/* =========================================================
   TENEPATTU — Premium depth layer (additive, loaded AFTER style.css)
   Uses ONLY existing brand tokens. No markup, logic or class renames required.
   Remove the <link> to this file to roll back instantly.
   ========================================================= */
:root{
  --tp-ease:cubic-bezier(.22,.8,.26,1);
  --tp-shadow-1:0 1px 2px rgba(34,48,45,.06), 0 2px 6px rgba(34,48,45,.05);
  --tp-shadow-2:0 2px 4px rgba(34,48,45,.05), 0 10px 24px rgba(34,48,45,.09);
  --tp-shadow-3:0 4px 8px rgba(34,48,45,.06), 0 22px 44px rgba(34,48,45,.16);
  --tp-ring:0 0 0 3px rgba(91,144,137,.28);
  --tp-surface:linear-gradient(180deg,#fff 0%,#fffdfc 100%);
}

/* ---------- Base polish ---------- */
body{text-rendering:optimizeLegibility;}
::selection{background:var(--gold-300); color:var(--maroon-900);}
:focus-visible{outline:2px solid var(--gold-500); outline-offset:2px; border-radius:6px;}
h1,h2,h3{letter-spacing:-.01em;}
.section{padding:84px 0;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); position:relative;}
.section-head h2::after{
  content:''; display:block; width:46px; height:3px; border-radius:3px; margin-top:12px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
}
.section-head .view-all{transition:color .2s, border-color .2s, letter-spacing .25s var(--tp-ease);}
.section-head .view-all:hover{letter-spacing:.03em; border-color:var(--maroon-700);}
.bg-cream{background:linear-gradient(180deg,var(--cream-100) 0%,#eef4f2 100%);}

/* ---------- Header: glass + depth ---------- */
.site-header{
  background:#fff;
  transition:box-shadow .3s var(--tp-ease), background .3s;
}
.site-header.tp-scrolled{box-shadow:0 8px 28px rgba(34,48,45,.10); background:#fff;}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--tp-ease);
}
.main-nav a:hover::after{transform:scaleX(1);}
.icon-btn{border-radius:50%; transition:background .2s, transform .25s var(--tp-ease), box-shadow .25s;}
.icon-btn:hover{background:var(--gold-100); transform:translateY(-2px); box-shadow:var(--tp-shadow-1);}
.region-pill{box-shadow:var(--tp-shadow-1); transition:transform .2s var(--tp-ease), box-shadow .2s; cursor:pointer;}
.region-pill:hover{transform:translateY(-1px); box-shadow:var(--tp-shadow-2);}

/* ---------- Buttons: tactile ---------- */
.btn{box-shadow:var(--tp-shadow-1); transition:transform .25s var(--tp-ease), box-shadow .25s var(--tp-ease), background .2s, color .2s;}
.btn:hover{box-shadow:var(--tp-shadow-2); transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97); box-shadow:var(--tp-shadow-1);}
.btn-maroon{box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 14px rgba(217,144,111,.30);}
.btn-maroon:hover{box-shadow:0 10px 22px rgba(46,70,68,.28);}
.btn-lavender{box-shadow:0 8px 20px rgba(0,0,0,.18);}

/* ---------- Hero: layered depth ---------- */
.hero-banner{isolation:isolate;}
.hero-slide{min-height:clamp(380px,56vw,600px);}
.hero-slide-img{background-attachment:scroll;}
.hero-slide::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 80% at 10% 100%, rgba(46,70,68,.38), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(34,48,45,.18) 100%);
}
.hero-content{transform:translate3d(0,var(--tp-hero-y,0px),0); will-change:transform;}
.hero-content h1{font-size:clamp(34px,5.4vw,60px); text-shadow:0 3px 18px rgba(0,0,0,.28);}
.hero-content p{text-shadow:0 1px 10px rgba(0,0,0,.25);}

/* ---------- Feature strip: floating card ---------- */
.feature-strip{
  background:var(--tp-surface); border:1px solid var(--gold-100);
  box-shadow:var(--tp-shadow-2); border-radius:var(--radius-lg);
}
.feature-icon{transition:transform .35s var(--tp-ease);}
.feature-item:hover .feature-icon{transform:translateY(-3px) rotate(-6deg);}

/* ---------- Category cards: soft 3D ---------- */
.category-grid{perspective:1100px;}
.category-card{
  background:var(--tp-surface); border-radius:var(--radius-md);
  box-shadow:var(--tp-shadow-1);
  transition:transform .35s var(--tp-ease), box-shadow .35s var(--tp-ease), border-color .25s;
  transform-style:preserve-3d;
}
.category-card:hover{box-shadow:var(--tp-shadow-3); transform:translateY(-6px); border-color:var(--gold-300);}
.category-card .cat-img-wrap{box-shadow:inset 0 0 0 1px rgba(34,48,45,.04), 0 6px 14px rgba(34,48,45,.10);}

/* ---------- Collection cards ---------- */
.collection-card{
  box-shadow:var(--tp-shadow-2);
  transition:transform .4s var(--tp-ease), box-shadow .4s var(--tp-ease);
}
.collection-card:hover{transform:translateY(-6px) scale(1.01); box-shadow:var(--tp-shadow-3);}
.collection-card::before{background:linear-gradient(0deg,rgba(34,48,45,.78),rgba(34,48,45,.08) 70%);}

/* ---------- Product cards: layered + tilt-ready ---------- */
.product-grid{perspective:1200px;}
.product-card{
  background:var(--tp-surface); border-radius:var(--radius-md);
  box-shadow:var(--tp-shadow-1);
  transition:transform .35s var(--tp-ease), box-shadow .35s var(--tp-ease), border-color .25s;
  transform:perspective(900px) rotateX(var(--tp-rx,0deg)) rotateY(var(--tp-ry,0deg)) translateY(var(--tp-ty,0px));
  will-change:transform;
}
.product-card:hover{box-shadow:var(--tp-shadow-3); --tp-ty:-6px; border-color:var(--gold-300);}
.product-card.tp-tilting{transition:box-shadow .35s var(--tp-ease), border-color .25s;}
.product-thumb{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--cream-100) 100%);}
.product-thumb::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(0deg,rgba(34,48,45,.10),transparent);
}
.product-thumb img{filter:drop-shadow(0 8px 14px rgba(34,48,45,.12));}
.badge{box-shadow:0 4px 10px rgba(91,144,137,.35); z-index:2;}
.product-info h3{line-height:1.35;}
.price-now{font-family:var(--font-display); font-weight:700; color:var(--maroon-900);}
.add-cart-btn, .product-card-cta{transition:transform .25s var(--tp-ease), box-shadow .25s, background .2s, color .2s;}
.product-card-cta:hover{transform:translateY(-1px); box-shadow:var(--tp-shadow-2);}
.wishlist-btn{box-shadow:var(--tp-shadow-2); transition:transform .25s var(--tp-ease) !important;}
.wishlist-btn:hover{transform:scale(1.12);}

/* ---------- Shorts + reviews ---------- */
.short-card{box-shadow:var(--tp-shadow-2); transition:transform .35s var(--tp-ease), box-shadow .35s;}
.short-card:hover{transform:translateY(-5px); box-shadow:var(--tp-shadow-3);}
.review-card{
  background:var(--tp-surface); box-shadow:var(--tp-shadow-1); position:relative;
  transition:transform .3s var(--tp-ease), box-shadow .3s;
}
.review-card::before{
  content:'\201C'; position:absolute; top:6px; right:16px; font-family:var(--font-display);
  font-size:64px; line-height:1; color:var(--gold-100); pointer-events:none;
}
.review-card:hover{transform:translateY(-4px); box-shadow:var(--tp-shadow-2);}

/* ---------- Forms ---------- */
.form-input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea{
  transition:border-color .2s, box-shadow .25s var(--tp-ease), background .2s;
}
.form-input{border-color:#d9e4e2; box-shadow:inset 0 1px 2px rgba(34,48,45,.05);}
.form-input:hover{border-color:var(--gold-500);}
.form-input:focus, input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold-500); box-shadow:var(--tp-ring);}

/* ---------- Account / cart / checkout surfaces ---------- */
.account-menu{box-shadow:var(--tp-shadow-2); border-radius:var(--radius-md); overflow:hidden;}
.account-menu-item{transition:background .2s, padding-left .25s var(--tp-ease);}
.account-menu-item:hover{padding-left:6px;}
.cart-row{border-radius:var(--radius-md); transition:box-shadow .25s;}
.cart-row:hover{box-shadow:var(--tp-shadow-1);}
.cart-row img{border-radius:var(--radius-sm); box-shadow:var(--tp-shadow-1);}
.qty-stepper{border-radius:999px; box-shadow:var(--tp-shadow-1);}
.fulfil-choice{transition:box-shadow .25s, border-color .2s, transform .25s var(--tp-ease);}
.fulfil-choice:hover{box-shadow:var(--tp-shadow-2); transform:translateY(-2px);}

/* ---------- Modals ---------- */
.modal-overlay{-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.region-modal{box-shadow:var(--tp-shadow-3); animation:tp-pop .35s var(--tp-ease);}
.region-choice{transition:transform .25s var(--tp-ease), box-shadow .25s, border-color .2s;}
.region-choice:hover{transform:translateY(-3px); box-shadow:var(--tp-shadow-2);}
@keyframes tp-pop{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}

/* ---------- Footer ---------- */
.site-footer{
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(91,144,137,.20), transparent 60%),
    var(--choco-900);
}
.footer-col a{transition:color .2s, transform .25s var(--tp-ease); display:block; width:fit-content;}
.footer-col a:hover{transform:translateX(4px);}

/* ---------- Mobile bottom nav: floating dock ---------- */
.mobile-bottom-nav{
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:rgba(255,255,255,.94);
  box-shadow:0 -10px 30px rgba(34,48,45,.10);
  border-radius:18px 18px 0 0;
}
.mobile-bottom-nav a{transition:transform .25s var(--tp-ease), color .2s;}
.mobile-bottom-nav a:active{transform:scale(.9);}
.mobile-bottom-nav a.active i{transform:translateY(-2px);}

/* ---------- Responsive refinements ---------- */
@media(max-width:768px){
  .section{padding:52px 0;}
  .section-head{margin-bottom:24px;}
  .feature-strip{padding:16px;}
  .collection-grid{grid-template-columns:1fr;}
  .collection-card{min-height:220px;}
  .hero-content{padding:44px 20px;}
  .btn{min-height:44px;}
  .icon-btn{width:44px; height:44px;}
  .category-card:hover, .collection-card:hover, .review-card:hover{transform:none;}
  body{padding-bottom:max(0px, env(safe-area-inset-bottom));}
}
@media(max-width:400px){
  .container{padding:0 16px;}
  .product-grid{gap:14px;}
}

/* ---------- Touch devices: no hover-tilt, keep clean ---------- */
@media(hover:none){
  .product-card{transform:none;}
  .product-card:hover{--tp-ty:0px;}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .product-card, .hero-content{transform:none !important;}
}

/* Keep scroll-reveal and tilt cooperating (reveal rules are more specific) */
.product-card.tp-reveal.tp-hidden-init.tp-in{
  transform:perspective(900px) rotateX(var(--tp-rx,0deg)) rotateY(var(--tp-ry,0deg)) translateY(var(--tp-ty,0px));
  transition:transform .35s var(--tp-ease), box-shadow .35s var(--tp-ease), border-color .25s, opacity .5s ease;
}
.product-card.tp-reveal.tp-hidden-init.tp-in.tp-tilting{transition:box-shadow .35s var(--tp-ease), border-color .25s, opacity .5s ease;}
@media(hover:none){ .product-card.tp-reveal.tp-hidden-init.tp-in{transform:none;} }
@media(prefers-reduced-motion:reduce){ .product-card.tp-reveal.tp-hidden-init.tp-in{transform:none !important;} }


/* ---------- Fixes: bigger mobile logo, solid white header bar, no overlay on banner images ---------- */
.site-header{background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none;}
.hero-slide-img::before, .hero-slide-img::after{display:none !important; content:none !important;}
.hero-slide-img .hero-content h1, .hero-slide-img .hero-content p{text-shadow:none;}
@media(max-width:768px){
  .nav-wrap{padding:8px 14px; gap:6px; justify-content:flex-start; flex-wrap:wrap;}
  .mobile-toggle{padding:4px 4px; flex:0 0 auto; margin-right:2px;}
  .logo{flex:0 0 auto; min-width:0; margin-right:auto;}
  .logo-img-mobile{height:46px !important; width:auto !important; max-width:none;}
  /* children of nav-actions join the header row; US pickup pill drops to its own full-width line */
  .nav-actions{display:contents;}
  .nav-actions .icon-btn{width:36px; height:36px; flex:0 0 auto;}
  .region-pill{padding:5px 9px; flex:0 0 auto;}
  /* slim edge-to-edge delivery strip: "📍 City .......... Change" */
  #pickupLocPill{
    order:10; flex:1 0 auto; width:calc(100% + 28px); max-width:none !important;
    margin:2px -14px -8px; padding:8px 16px; border:none; border-top:1px solid var(--gold-100);
    border-radius:0; box-shadow:none; background:var(--sage-100); color:var(--maroon-900);
    justify-content:space-between; font-size:12.5px; font-weight:600;
  }
  #pickupLocPill i{color:var(--gold-500); font-size:15px; margin-right:4px;}
  #pickupLocPill::after{content:'Change'; margin-left:auto; font-size:11.5px; font-weight:700; color:var(--maroon-700); text-decoration:underline; text-underline-offset:2px;}
}
@media(max-width:360px){
  .logo-img-mobile{height:40px !important;}
}