
/* =========================================================
   SATRUPA V6 — FINAL RESPONSIVE / LUXURY POLISH
   Loaded after page-specific CSS.
   No Tailwind runtime required.
========================================================= */

:root{
  --sat-ink:#171a10;
  --sat-olive:#3D4B2A;
  --sat-gold:#3D4B2A;
  --sat-cream:#EDE5D8;
  --sat-line:#e8e3da;
  --sat-muted:#73736d;
}

html{width:100%;overflow-x:hidden}
body{width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
*,*::before,*::after{max-width:100%}
img,video,canvas,svg{max-width:100%;height:auto}
img{image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* Consistent customer header */
.site-header{width:100%;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.nav-container{width:min(1240px,calc(100% - 32px));min-height:74px;padding:10px 0}
.nav-container .logo{font-family:"Playfair Display","Poppins",sans-serif;font-weight:600;letter-spacing:.18em;color:var(--sat-olive)}
.nav-links{align-items:center}
.nav-links a{white-space:nowrap}

/* Any page hero/banner: never stretch or artificially scale */
.hero-container img,
.hero-container video,
.shop-hero-image img,
.banner img,
.banner-image img,
.page-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none!important;
  animation:none!important;
  filter:none!important;
  image-rendering:auto;
}

/* Shop banner */
.shop-hero{
  width:min(1240px,calc(100% - 32px));
  height:clamp(460px,48vw,610px);
  margin:18px auto 0;
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
.shop-hero-image,
.shop-hero-image img{width:100%;height:100%}
.shop-hero-image img{object-position:center center!important}
.shop-hero-overlay{position:absolute;inset:0;pointer-events:none}
.shop-hero-content{z-index:2;max-width:590px}
.shop-hero-content h1{font-family:"Playfair Display",serif;line-height:1.06}

/* Product grid: stable aspect ratio = less stretching */
.products-grid .product-card img{
  width:100%!important;
  aspect-ratio:3/4;
  height:auto!important;
  object-fit:cover!important;
  display:block!important;
  filter:none!important;
  transform:none;
}
.products-grid{
  align-items:start;
}
.products-grid .product-card{
  min-width:0;
  overflow:hidden;
}

/* Generic responsive containers */
.product-container,
.products-section,
.shop-controls{
  max-width:1240px;
}
input,select,textarea,button{max-width:100%}
table{max-width:100%}

/* Product detail images — show full product without forced enlargement */
.main-image{
  height:auto!important;
  aspect-ratio:3/4;
  min-height:0;
}
.main-image img{
  object-fit:contain!important;
  background:#f2eee6;
  transform:none!important;
  filter:none!important;
}
.thumbnail-gallery img{
  object-fit:cover!important;
  filter:none!important;
}

/* Lightbox: preserve original image quality/aspect */
.image-lightbox img{
  width:auto!important;
  height:auto!important;
  max-width:92vw!important;
  max-height:88vh!important;
  object-fit:contain!important;
  filter:none!important;
}

/* Forms */
input,select,textarea{
  font-size:16px; /* prevents iOS zoom */
}

/* Footer */
footer{width:100%;overflow:hidden}

/* Tablet */
@media (max-width:1024px){
  .nav-container{width:calc(100% - 28px)}
  .shop-hero{width:calc(100% - 28px);height:540px}
  .products-section{width:calc(100% - 40px)}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product-layout{gap:40px!important}
}

/* Phones */
@media (max-width:768px){
  .nav-container{min-height:68px}
  .nav-links{
    display:none!important;
  }
  .mobile-menu-btn{
    display:flex!important;
    width:42px;
    height:42px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:50%;
    background:#fff;
    align-items:center;
    justify-content:center;
  }

  .shop-hero{
    width:calc(100% - 20px);
    height:500px;
    margin:10px auto 0;
    border-radius:20px;
  }
  .shop-hero-image img{
    object-position:center center!important;
  }
  .shop-hero-content{
    left:20px!important;
    right:20px!important;
    bottom:24px!important;
    top:auto!important;
    transform:none!important;
  }

  .products-section{width:calc(100% - 24px);padding-bottom:60px}
  .products-grid{grid-template-columns:1fr!important;gap:18px!important}
  .products-grid .product-card{padding:10px!important;border-radius:17px!important}
  .products-grid .product-card img{aspect-ratio:4/5!important}

  .product-container{width:calc(100% - 24px)}
  .product-layout{grid-template-columns:1fr!important;gap:28px!important}
  .main-image{aspect-ratio:4/5;height:auto!important;border-radius:18px!important}
  .thumbnail-gallery{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
  .thumbnail-gallery img{height:auto!important;aspect-ratio:1/1!important}
  .product-info h1{font-size:clamp(28px,8vw,36px)!important}

  .image-lightbox{padding:14px}
  .image-lightbox img{max-width:94vw!important;max-height:78vh!important}
}

/* Small phones */
@media (max-width:480px){
  .nav-container{width:calc(100% - 20px)}
  .logo{font-size:20px!important}
  .shop-hero{height:470px;width:calc(100% - 16px);border-radius:17px}
  .shop-hero-content h1{font-size:30px!important}
  .shop-hero-content p{font-size:12px!important;line-height:1.6}
  .shop-hero-btn{width:100%;justify-content:center}
  .products-heading h2{font-size:30px!important}
  .product-container{width:calc(100% - 20px)}
  .main-image{border-radius:15px!important}
}

/* Very small phones */
@media (max-width:360px){
  .shop-hero{height:440px}
  .shop-hero-content h1{font-size:27px!important}
  .products-grid .product-card img{aspect-ratio:4/5!important}
}
