/* =========================================================================
   custom.css  — Full, ready-to-paste stylesheet for your shop site
   - Includes product grid rules, single-product two-column layout,
     image sizing and hover animation.
   - Save to assets/css/custom.css and hard-refresh the browser.
   ========================================================================= */

/* ---------- CSS variables for easy tuning ---------- */
:root{
  --card-img-height: 280px;
  --card-img-max-height: 300px;
  --single-max-height-desktop: 360px;
  --single-max-height-tablet: 320px;
  --single-max-height-mobile: 300px;
  --hover-scale: 1.06;
  --hover-rotate: -0.5deg;
  --transition-speed: 300ms;
}

/* ---------- Small components (existing rules preserved) ---------- */
.award-img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 8px;
}

.templatemo-accordion ul li a {
    color: rgb(132, 132, 132) !important;
}
.templatemo-accordion ul li a:hover {
    color: rgb(247, 0, 45) !important;
}

/* Sidebar */
.sidebar-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
}
.sidebar-menu { list-style: none; padding-left: 0; margin: 0; }
.sidebar-menu .category-link,
.sidebar-menu li:first-child a {
    display: block;
    min-width: 220px;
    width: 100%;
    padding: 10px 15px;
    color: #555;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s;
    font-weight: 500;
}
.sidebar-menu .category-link:hover { background-color: #f8f9fa; color: #dc3545; }
.sidebar-menu .active-category {
    color: #28a745; font-weight: bold; background-color: rgba(40,167,69,.1);
    border-left: 4px solid #28a745;
}
.submenu { list-style: none; padding-left: 20px; margin-top: 5px; }
.submenu .subcategory-link {
    display:block; padding:8px 15px; color:#555; text-decoration:none; border-radius:4px;
}
.submenu .subcategory-link:hover{ background-color:#f0f8ff; color:#007bff; }
.submenu .active-subcategory { color:#007bff; font-weight:bold; background-color:rgba(0,123,255,.1); border-left:3px solid #007bff; }
.category-link .arrow { font-size:0.8rem; color:#999; }

@media (max-width:992px){
  .sidebar-menu .category-link, .sidebar-menu li:first-child a { min-width:auto; width:100%; }
}

/* Breadcrumbs */
.styled-breadcrumb{ background:none; padding:0; margin-bottom:1rem; font-size:0.95rem; display:flex; flex-wrap:wrap; list-style:none; }
.styled-breadcrumb .breadcrumb-item { position:relative; display:flex; align-items:center; }
.styled-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content:"›"; margin:0 8px; color:#999; font-weight:bold; transition:transform .3s, color .3s; }
.styled-breadcrumb .breadcrumb-item:hover + .breadcrumb-item::before,
.styled-breadcrumb .breadcrumb-item a:hover + .breadcrumb-item::before { transform: translateX(3px); color:#dc3545; }
.styled-breadcrumb .breadcrumb-item a { text-decoration:none; padding:4px 10px; border-radius:4px; transition:all .3s; color:#555; }
.styled-breadcrumb .breadcrumb-item a:hover { background-color: rgba(220,53,69,.1); color:#dc3545; }
.styled-breadcrumb .active-category-bc a { color:#28a745; font-weight:bold; background-color:rgba(40,167,69,.1); }
.styled-breadcrumb .active-subcategory-bc { color:#007bff; font-weight:bold; background-color:rgba(0,123,255,.1); padding:4px 10px; border-radius:4px; }

/* ---------- Product grid / cards ---------- */
.product-wap .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    height: auto;
    display:flex;
    flex-direction:column;
}

.product-wap .card-img-top {
    height: var(--card-img-height);
    object-fit: cover;
    transition: transform .3s;
}

/* Alternative: show full image without cropping */
.product-wap .card-img-top {
    width:100%;
    height:auto;
    max-height: var(--card-img-max-height);
    object-fit: contain;
    background-color: #f5f5f5;
    transition: transform .3s;
}

.product-wap .card:hover .card-img-top { transform: scale(1.05); }
.product-overlay { position:absolute; top:0; left:0; height:100%; width:100%; background-color: rgba(0,0,0,.45); opacity:0; transition:opacity .3s; }
.product-wap .card:hover .product-overlay { opacity:1; }

.product-wap .card-body { flex-grow:1; text-align:center; }
.product-wap .card-title { font-size:1.1rem; font-weight:600; margin-bottom:.3rem; color:#333; }
.product-wap .card-text { font-size:.95rem; color:#555; margin-bottom:.2rem; }

@media (max-width:767px){
  .product-wap .card { display:flex; flex-direction:column; margin-bottom:1rem; padding:0; height:auto; }
  .product-wap .card-img-top { width:100%; height:auto; object-fit:contain; display:block; }
  .product-wap .card-body { padding: .5rem .5rem; flex-grow:0; text-align:center; }
  .row { margin-left:-5px; margin-right:-5px; }
  .row > [class*='col-'] { padding-left:5px; padding-right:5px; margin-bottom:1rem; }
}

/* ---------- Product single page: main image & thumbnails ---------- */

/* Generic wrapper (kept for semantic layout) */
.product-image-wrapper {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}

/* If you use .main-image wrapper (recommended) */
.main-image {
    width:100%;
    max-height: var(--single-max-height-desktop);
    background-color:#f5f5f5;
    border-radius:8px;
    border:1px solid #e0e0e0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
    transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Targets the exact image markup you posted:
   <img class="card-img img-fluid main-product-img" id="product-detail" ...> */
#product-detail,
img.main-product-img,
.card-img.img-fluid.main-product-img {
    display:block;
    width:100% !important;
    height:auto !important;
    max-height: var(--single-max-height-desktop) !important;
    object-fit: contain !important;
    transition: transform var(--transition-speed) ease, filter var(--transition-speed) ease;
    transform-origin:center center;
    will-change: transform;
    cursor: pointer;
    border-radius:6px;
}

/* Hover animation: subtle zoom + tiny rotate + lift shadow */
#product-detail:hover,
img.main-product-img:hover,
.card-img.img-fluid.main-product-img:hover,
.main-image:hover img.main-product-img {
    transform: scale(var(--hover-scale)) rotate(var(--hover-rotate)) !important;
    filter: saturate(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.main-image:hover { transform: translateY(-2px); }

/* Thumbnails */
.thumbnails { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; margin-top:10px; }
.thumbnail-container { position:relative; width:80px; height:80px; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; transition:all .3s; }
.thumbnail-container:hover { border-color:#28a745; transform:scale(1.05); }
.thumbnail-img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Two-column layout for single product (force even if something else interferes) ---------- */
/* Use .product-single-row as container around the two columns (image + details)
   e.g. <div class="row product-single-row"> <div class="col-12 col-md-6">...image...</div> <div class="col-12 col-md-6">...details...</div> </div> */

.product-single-row {
    margin-top:20px;
    gap:28px;
    align-items:flex-start;
}

/* Force the two-column appearance on medium and up */
@media (min-width:768px) {
  .product-single-row {
      display:flex !important;
      flex-wrap:nowrap !important;
  }
  .product-single-row > .col-12,
  .product-single-row > [class*="col-"] {
      flex: 0 0 50% !important;
      max-width: 50% !important;
  }
}

/* On small screens revert to stacked layout */
@media (max-width:767.98px) {
  .product-single-row { display:block !important; }
  .product-single-row > [class*="col-"] { width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .product-details { margin-top:12px; }
}

/* Slight adjustments for tablets */
@media (max-width:991.98px) {
  #product-detail,
  img.main-product-img,
  .card-img.img-fluid.main-product-img {
    max-height: var(--single-max-height-tablet) !important;
  }
}

/* Mobile specific */
@media (max-width:767.98px) {
  #product-detail,
  img.main-product-img,
  .card-img.img-fluid.main-product-img {
    max-height: var(--single-max-height-mobile) !important;
  }
}

/* ---------- Minor utilities and polish ---------- */
.product-details { padding-left:12px; padding-right:12px; }
.product-title { font-size:1.8rem; margin-bottom: .5rem; }
.product-price { font-size:1.2rem; color:#333; margin-bottom:.5rem; }

/* End of file */