/*
Theme Name: PahalGiri
Theme URI: https://pahalgiri.com
Author: PahalGiri
Description: Custom WooCommerce-ready theme for the PahalGiri skincare brand, built pixel-for-pixel from the approved HTML/CSS design mockup. Phase 1 covers the static content pages: Homepage, About, Contact, FAQ and the Legal pages. Phase 2 adds the real WooCommerce pages: Shop, Single Product, Cart, Checkout (COD), Order Confirmation, Failed Payment, Order Pay, My Account, Lost Password, Track Order and Cancel Order Request.
Version: 1.17.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pahalgiri
*/

/* Basic WordPress compatibility helpers */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header { top: 46px; }
}

:root{
    --cream:      #F5F7FA;
    --cream-soft: #FBFCFE;
    --ink:        #0F1B2C;
    --ink-soft:   #4A5568;
    --green-deep: #0F1B2C;
    --green:      #1D5FA6;
    --green-soft: #E6F0FA;
    --gold:       #2E7FD6;
    --line:       #DCE4EE;
    --line-dark:  #1C2E43;
    --cream-text: #EFEFEC;
    --cream-text-soft: rgba(239,239,236,0.72);
    --footer-heading: #7FB2E8;
  }

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{background:var(--cream); color:var(--ink); font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

img{max-width:100%; display:block;}

a{color:inherit;}

.serif{font-family:'Cormorant Garamond', serif;}

.eyebrow{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--green);}

.wrap{max-width:1220px; margin:0 auto; padding:0 32px;}

header{position:sticky; top:0; z-index:100; background:var(--cream-soft); box-shadow:0 2px 16px rgba(15,27,44,0.06);}

.header-accent{height:4px; width:100%; background:linear-gradient(90deg, var(--ink) 0%, var(--green) 45%, var(--gold) 100%);}

.nav{max-width:1220px; margin:0 auto; padding:8px 32px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;}

.nav-logo{display:flex; align-items:center;}

.nav-logo img{height:34px; width:auto;}

.nav-menu{display:flex; gap:38px; list-style:none; justify-self:center;}

.nav-menu a{font-size:13.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink); text-decoration:none; position:relative; padding-bottom:4px;}

.nav-menu a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--green); transition:width .25s ease;}

.nav-menu a:hover{color:var(--green);}

.nav-menu a:hover::after{width:100%;}

.nav-icons{display:flex; align-items:center; gap:6px; justify-self:end;}

.icon-btn{width:40px; height:40px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); position:relative; transition:background .2s;}

.icon-btn:hover{background:var(--green-soft);}

.icon-btn svg{width:20px; height:20px; stroke:var(--ink);}

.cart-count{position:absolute; top:1px; right:1px; background:var(--green); color:#fff; font-size:9.5px; font-weight:800; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

.hamburger{display:none;}

@media (max-width:880px){
    .nav{grid-template-columns:auto 1fr auto; padding:6px 18px;}
    .nav-menu{display:none;}
    .hamburger{display:flex;}
    .nav-logo{justify-self:center;}
    .nav-logo img{height:30px; margin:0 auto;}
  }

.drawer-overlay{position:fixed; inset:0; background:rgba(32,29,24,0.5); z-index:190; opacity:0; visibility:hidden; transition:opacity .3s ease;}

.drawer-overlay.open{opacity:1; visibility:visible;}

/* Reusable centred confirm/alert modal — same dim-overlay language as the
   drawers above, but centred instead of sliding from an edge. Driven by
   pgModal()/pgCloseModal() in assets/js/main.js. */
.pg-modal-overlay{position:fixed; inset:0; background:rgba(32,29,24,0.5); z-index:300; opacity:0; visibility:hidden; transition:opacity .2s ease; display:flex; align-items:center; justify-content:center; padding:20px;}
.pg-modal-overlay.open{opacity:1; visibility:visible;}
.pg-modal{background:#fff; border-radius:16px; padding:28px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(32,29,24,0.25); transform:translateY(8px); transition:transform .2s ease;}
.pg-modal-overlay.open .pg-modal{transform:translateY(0);}
.pg-modal h3{font-size:19px; margin-bottom:10px;}
.pg-modal p{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:22px;}
.pg-modal-actions{display:flex; gap:10px; justify-content:flex-end;}
.pg-modal-actions button{flex:1;}
.btn-danger{background:var(--red); color:#fff; border:none; border-radius:10px; padding:12px 20px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;}
.btn-danger:hover{opacity:0.9;}

.menu-drawer{position:fixed; top:0; left:0; height:100%; width:82%; max-width:320px; background:var(--cream-soft); z-index:195; transform:translateX(-100%); transition:transform .35s ease; display:flex; flex-direction:column; padding:26px;}

.menu-drawer.open{transform:translateX(0);}

.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}

.drawer-head img{height:28px;}

.drawer-close{background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink);}

.menu-drawer nav a{display:block; padding:16px 2px; font-size:16px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}

.cart-drawer{position:fixed; top:0; right:0; height:100%; width:88%; max-width:380px; background:var(--cream-soft); z-index:195; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column;}

.cart-drawer.open{transform:translateX(0);}

.cart-head{display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line);}

.cart-head h3{font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600;}

.cart-items{flex:1; overflow-y:auto; padding:16px 22px;}

.cart-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}

.cart-item img{width:56px; height:56px; object-fit:contain; background:var(--green-soft); border-radius:6px; padding:6px;}

.cart-item-info .name{font-size:13.5px; font-weight:700; line-height:1.3;}

.cart-item-info .meta{font-size:12px; color:var(--ink-soft); margin-top:4px;}

.cart-item-info .price{font-size:13px; font-weight:700; color:var(--green); margin-top:6px;}

.cart-empty{padding:60px 22px; text-align:center; color:var(--ink-soft); font-size:14px;}

.cart-foot{padding:20px 22px; border-top:1px solid var(--line);}

.cart-foot .subtotal{display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:14px;}

/* Mockup's cart-foot only had one full-width Checkout button; a second
   "View Cart" button sits alongside it here, so both share this row. */
.cart-foot-actions{display:flex; gap:10px;}
.cart-foot-actions .btn-ghost, .cart-foot-actions .btn-primary{flex:1; text-align:center; padding:13px 10px; font-size:12.5px;}
.cart-item-remove{background:none; border:none; color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; padding:4px 2px; align-self:flex-start; transition:color .2s ease;}
.cart-item-remove:hover{color:var(--green);}
.cart-item-info{flex:1;}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 22px; border-radius:30px; font-size:13px; font-weight:600; z-index:220; opacity:0; pointer-events:none; transition:all .3s ease;}

.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.btn-primary{background:var(--green); color:#fff; padding:15px 32px; border-radius:2px; font-size:13.5px; font-weight:700; letter-spacing:0.03em; text-decoration:none; display:inline-block; border:none; cursor:pointer; transition:all .2s ease;}

.btn-primary:hover{transform:translateY(-2px); background:var(--ink);}

.btn-ghost{border:1.5px solid var(--ink); color:var(--ink); padding:13.5px 30px; border-radius:2px; font-size:13.5px; font-weight:700; letter-spacing:0.03em; text-decoration:none; display:inline-block; transition:all .2s ease;}

.btn-ghost:hover{background:var(--ink); color:#fff;}

.hero-slider{position:relative; width:100%; height:56vh; min-height:440px; max-height:600px; overflow:hidden; background:#DCE9F8;}

.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease;}

.slide.active{opacity:1; visibility:visible;}

.slide picture{display:block; width:100%; height:100%;}

.slide img.bg{width:100%; height:100%; object-fit:cover; object-position:center;}

.slide-overlay{position:absolute; inset:0; display:flex; align-items:center;}

.slide-overlay .wrap{width:100%;}

.slide-text{
    max-width:440px; background:rgba(255,255,255,0.72); backdrop-filter:blur(6px);
    border-radius:16px; padding:32px 34px; box-shadow:0 20px 50px rgba(15,27,44,0.1);
  }

.slide-eyebrow{font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:800; color:var(--green); margin-bottom:14px; display:block;}

.slide-text h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(30px,4vw,50px); line-height:1.08; color:var(--ink); margin:0; text-shadow:0 1px 2px rgba(255,255,255,0.5);}

.slide-text h1 em{font-style:italic; color:var(--green);}

.slide-text p{margin-top:16px; font-size:15px; color:var(--ink); font-weight:500; line-height:1.7; max-width:380px; opacity:0.85;}

.slide-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}

.hero-dots{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:10;}

.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(15,27,44,0.22); border:none; cursor:pointer; transition:all .25s ease;}

.hero-dot.active{background:var(--green); width:24px; border-radius:6px;}

.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,0.85); backdrop-filter:blur(4px); color:var(--ink); font-size:17px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(15,27,44,0.08);}

.hero-arrow:hover{background:#fff;}

.hero-arrow.prev{left:24px;}

.hero-arrow.next{right:24px;}

/* Tablet / narrow-desktop widths (821px–1300px): the hero content card sits
   close enough to the left edge here that the prev/next arrow buttons would
   sit on top of its text. Hiding just these two nav arrows in this range
   avoids the overlap; the dots below the slider and the auto-rotating
   slideshow still let visitors browse the slides, exactly as on mobile
   (where the arrows are already hidden the same way). Nothing else in the
   hero, or on any other page, changes. */
@media (min-width:821px) and (max-width:1300px){
    .hero-arrow{display:none;}
}

@media (max-width:820px){
    .hero-slider{height:auto; min-height:0; max-height:none; display:flex; flex-direction:column;}
    .slide{position:relative; display:none; height:auto;}
    .slide.active{display:flex; flex-direction:column;}
    .slide picture{display:block; width:100%; height:52vw; min-height:220px; max-height:320px;}
    .slide picture, .slide img.bg{width:100%; height:100%; object-position:center 30%;}
    .slide-overlay{position:relative; inset:auto; display:block; background:var(--green-soft); padding:22px 20px 28px;}
    .slide-overlay .wrap{padding:0;}
    .slide-text{
      max-width:100%; text-align:left; margin:0; background:none;
      backdrop-filter:none; border-radius:0; padding:0; box-shadow:none;
    }
    .slide-text .slide-eyebrow{font-size:10px; margin-bottom:8px;}
    .slide-text h1{font-size:clamp(21px,6vw,27px); line-height:1.15;}
    .slide-text p{margin-left:0; margin-right:0; margin-top:8px; opacity:0.85; color:var(--ink); font-weight:500; font-size:12.5px; line-height:1.6;}
    .slide-actions{justify-content:flex-start; margin-top:16px; gap:10px;}
    .slide-actions .btn-primary, .slide-actions .btn-ghost{padding:11px 18px; font-size:11.5px;}
    .hero-arrow{display:none;}
    .hero-dots{position:relative; bottom:auto; margin-top:0; padding-bottom:14px; background:var(--green-soft); justify-content:flex-start; padding-left:20px; left:auto; transform:none;}
  }

.trust-strip{background:var(--ink); color:var(--cream-text); padding:15px 0; overflow:hidden;}

.trust-track{display:flex; gap:56px; white-space:nowrap; animation:scroll-left 26s linear infinite; width:max-content;}

@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.trust-track span{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; opacity:0.9; display:flex; align-items:center; gap:9px;}

.trust-track span::before{content:'✦'; color:var(--gold); font-size:10px;}

.section{padding:88px 32px;}

.section-head{max-width:620px; margin-bottom:50px;}

.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.section-head h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); margin-top:12px; line-height:1.12;}

.section-head p{margin-top:14px; color:var(--ink-soft); font-size:15px; line-height:1.65;}

.products{background:var(--cream-soft);}

.product-row{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; padding:56px 0; border-top:1px solid var(--line);}

.product-row:last-child{border-bottom:1px solid var(--line);}

.product-row.reverse{grid-template-columns:1.15fr 0.85fr;}

.product-row.reverse .p-img{order:2;}

.product-row.reverse .p-copy{order:1;}

/* 1.9.0 — the tinted, padded panel around the two homepage product photos is
   gone; the image itself now occupies that footprint instead of floating in
   the middle of a box. Height is preserved so the row's rhythm is unchanged. */
.p-img{display:flex; justify-content:center; align-items:center; border-radius:14px; overflow:hidden;}

.p-img img{width:100%; height:400px; object-fit:contain; object-position:center; border-radius:14px;}

.p-copy h3{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:32px; line-height:1.1; margin-top:8px;}

.p-copy .desc{margin-top:14px; color:var(--ink-soft); font-size:14.5px; line-height:1.7; max-width:420px;}

.ingredient-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}

.pill{border:1px solid var(--line); background:var(--cream); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; color:var(--ink-soft);}

.p-cta{display:flex; gap:12px; margin-top:24px; align-items:center; flex-wrap:wrap;}

.p-cta .btn-primary{padding:12px 24px; font-size:12.5px;}

.p-size{font-size:12.5px; color:var(--ink-soft);}

@media (max-width:820px){
    .product-row, .product-row.reverse{grid-template-columns:1fr; text-align:center; gap:24px;}
    .product-row.reverse .p-img{order:1;} .product-row.reverse .p-copy{order:2;}
    .p-copy .desc{margin-left:auto; margin-right:auto;}
    .ingredient-pills, .p-cta{justify-content:center;}
  }

.results{background:var(--ink); color:var(--cream-text);}

.results .section-head h2{color:var(--cream-text);}

.results .section-head p{color:var(--cream-text-soft);}

.results .eyebrow{color:var(--footer-heading);}

.results-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}

.result-card{background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); border-radius:14px; overflow:hidden;}

.result-card img{width:100%; aspect-ratio:1; object-fit:cover; background:#fff;}

.result-card .r-label{padding:14px 16px 18px;}

.result-card .r-label b{font-size:13.5px; display:block; margin-bottom:3px;}

.result-card .r-label span{font-size:11.5px; color:var(--cream-text-soft);}

@media (max-width:900px){ .results-grid{grid-template-columns:repeat(2,1fr);} }

.ing-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}

.ing-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:14px; padding:24px 18px; text-align:center; transition:all .25s ease;}

.ing-card:hover{transform:translateY(-4px); box-shadow:0 16px 26px rgba(15,27,44,0.08); border-color:var(--green);}

.ing-card img{height:80px; width:80px; margin:0 auto 14px; object-fit:contain;}

.ing-card h4{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:17px;}

.ing-card p{font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5;}

@media (max-width:900px){ .ing-grid{grid-template-columns:repeat(2,1fr);} }

.certs{display:grid; grid-template-columns:repeat(6, 1fr); gap:24px; padding:50px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:1220px; margin:0 auto;}

.cert-item{display:flex; align-items:center; gap:12px;}

.cert-item img{height:34px; width:34px; object-fit:contain; flex-shrink:0;}

.cert-item .txt{font-size:12px; font-weight:700; line-height:1.3;}

.cert-item .txt span{display:block; font-weight:500; color:var(--ink-soft); font-size:10.5px; margin-top:2px;}

@media (max-width:980px){ .certs{grid-template-columns:repeat(3, 1fr);} }

@media (max-width:560px){ .certs{grid-template-columns:repeat(2, 1fr); gap:20px 14px; padding:40px 20px;} .cert-item img{height:30px; width:30px;} .cert-item .txt{font-size:11px;} .cert-item .txt span{font-size:9.5px;} }

.cta-band{background:linear-gradient(120deg, var(--ink), var(--green)); color:var(--cream-text); text-align:center; padding:76px 32px;}

.cta-band h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(26px,3.4vw,40px);}

.cta-band p{margin-top:12px; opacity:0.9; font-size:14.5px; line-height:1.7;}

.cta-contact-line .nowrap{white-space:nowrap;}

.mob-only{display:none;}

@media (max-width:560px){
    .mob-only{display:inline;}
    .cta-contact-line{font-size:13.5px;}
  }

.cta-band .btn-primary{background:#fff; color:var(--ink); margin-top:24px;}

.cta-band .btn-primary:hover{background:var(--cream); color:var(--ink);}

footer{background:var(--green-deep); color:var(--cream-text); padding:70px 32px 0;}

.newsletter{max-width:1220px; margin:0 auto; padding:40px 0; border-bottom:1px solid var(--line-dark); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}

.newsletter-text h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:22px; margin-bottom:6px;}

.newsletter-text p{font-size:13px; color:var(--cream-text-soft);}

.newsletter-form{display:flex; gap:0; max-width:380px; width:100%;}

.newsletter-form input{flex:1; background:rgba(250,247,241,0.08); border:1px solid var(--line-dark); border-right:none; border-radius:4px 0 0 4px; padding:13px 16px; font-size:13.5px; color:var(--cream-text); font-family:inherit;}

.newsletter-form input::placeholder{color:var(--cream-text-soft);}

.newsletter-form input:focus{outline:none; border-color:var(--gold);}

.newsletter-form button{background:var(--gold); color:#fff; border:none; padding:0 22px; border-radius:0 4px 4px 0; font-size:13px; font-weight:800; letter-spacing:0.02em; cursor:pointer; white-space:nowrap;}

.newsletter-form{flex-wrap:wrap;}
.newsletter-form.is-loading button{opacity:.7; cursor:wait;}
.newsletter-form.is-subscribed input{border-color:var(--green); color:var(--cream-text);}
.newsletter-form.is-subscribed button{background:var(--green); cursor:default;}
.newsletter-msg{display:none; width:100%; margin-top:8px; font-size:12px; line-height:1.5;}
.newsletter-msg.show{display:block;}
.newsletter-msg.success{color:var(--green-soft);}
.newsletter-msg.error{color:#ffc2c2;}

.footer-grid{max-width:1220px; margin:0 auto; padding:48px 0; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; border-bottom:1px solid var(--line-dark);}

.footer-col h4{font-size:11.5px; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:18px; color:var(--footer-heading); font-weight:800;}

.footer-col ul{list-style:none;}

.footer-col a{display:block; font-size:13.5px; color:var(--cream-text-soft); text-decoration:none; margin-bottom:11px; line-height:1.6;}

.footer-col a:hover{color:var(--cream-text);}

.footer-logo{height:34px; width:auto; margin-bottom:16px;}

.footer-slogan{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15.5px; color:var(--cream-text); line-height:1.5; margin-bottom:14px;}

.footer-about p{font-size:13.5px; color:var(--cream-text-soft); line-height:1.75; max-width:280px;}

.footer-social{display:flex; gap:10px; margin-top:18px;}

.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; margin:0;}

.footer-social a:hover{border-color:var(--gold); background:rgba(46,127,214,0.12);}

.footer-social svg{width:16px; height:16px; stroke:var(--cream-text);}

.footer-about .footer-amazon-note{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14px; color:var(--cream-text-soft); margin-top:18px; margin-bottom:10px; line-height:1.5; max-width:280px;}

.footer-col .footer-amazon{display:inline-flex; align-items:center; justify-content:center; background:#FF9900; color:#131921; padding:11px 22px; border-radius:2px; font-size:13px; font-weight:800; letter-spacing:0.02em; text-decoration:none; border:1.5px solid #FF9900; transition:all .2s ease; margin-bottom:0;}

.footer-col .footer-amazon:hover{transform:translateY(-2px); background:#e88a00; border-color:#e88a00; color:#131921; box-shadow:0 6px 14px rgba(0,0,0,0.18);}

.footer-contact-item{display:flex; gap:10px; margin-bottom:14px; align-items:flex-start;}

.footer-contact-item svg{width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:2px;}

.footer-contact-item span{font-size:13.5px; color:var(--cream-text-soft); line-height:1.6;}

.footer-contact-item .note{font-size:11px; opacity:0.65; display:block; margin-top:2px;}

.footer-certs{max-width:1220px; margin:0 auto; padding:36px 0; display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; border-bottom:1px solid var(--line-dark);}

.footer-certs img{height:34px; width:auto; opacity:0.88;}

.footer-bottom{max-width:1220px; margin:0 auto; padding:22px 0 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--cream-text-soft);}

.footer-bottom a{text-decoration:none; color:var(--cream-text-soft);}

@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;} .footer-about{grid-column:1/-1;} .newsletter{flex-direction:column; align-items:flex-start;} }

@media (max-width:560px){ .footer-grid{gap:28px 20px;} }

.breadcrumb{max-width:1220px; margin:0 auto; padding:18px 32px 0; font-size:12.5px; color:var(--ink-soft);}

.breadcrumb a{color:var(--ink-soft); text-decoration:none;}

.breadcrumb a:hover{color:var(--green);}

.breadcrumb span.sep{margin:0 6px; opacity:0.5;}

.breadcrumb span.current{color:var(--ink); font-weight:600;}

.about-hero{max-width:900px; margin:0 auto; padding:48px 32px 20px; text-align:center;}

.about-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(34px,5vw,58px); line-height:1.1; margin-top:16px;}

.about-hero h1 em{font-style:italic; color:var(--green);}

.about-hero p{margin-top:20px; font-size:16px; color:var(--ink-soft); line-height:1.8; max-width:680px; margin-left:auto; margin-right:auto;}

.section{padding:76px 32px;}

.story-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}

@media (max-width:860px){ .story-split{grid-template-columns:1fr; gap:32px;} }

.story-text h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(28px,3.2vw,38px); line-height:1.15;}

.story-text h2 em{font-style:italic; color:var(--green);}

.story-text p{margin-top:18px; font-size:14.5px; color:var(--ink-soft); line-height:1.8;}

.story-visual{background:var(--green-soft); border-radius:18px; overflow:hidden; min-height:420px;}

.story-visual img{width:100%; height:100%; object-fit:cover; object-position:center top;}

.founder-section{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.founder-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}

@media (max-width:860px){ .founder-grid{grid-template-columns:1fr; gap:32px;} }

.founder-photo{border-radius:18px; overflow:hidden; aspect-ratio:1/1.05;}

.founder-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}

.founder-copy .eyebrow{margin-bottom:12px; display:block;}

.founder-copy h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(28px,3.2vw,38px); line-height:1.15;}

.founder-quote{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; color:var(--ink); border-left:3px solid var(--green); padding-left:20px; margin:22px 0; line-height:1.5;}

.founder-copy p.bio{font-size:14.5px; color:var(--ink-soft); line-height:1.8; margin-top:14px;}

.founder-name{margin-top:24px;}

.founder-name b{font-size:16px; display:block;}

.founder-name span{font-size:12.5px; color:var(--ink-soft);}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}

@media (max-width:900px){ .values-grid{grid-template-columns:1fr 1fr;} }

@media (max-width:520px){ .values-grid{grid-template-columns:1fr;} }

.value-card{text-align:left;}

.value-card .icon-circle{width:52px; height:52px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}

.value-card .icon-circle svg{width:24px; height:24px; color:var(--green);}

.value-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:8px;}

.value-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.65;}

.range-section{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.range-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}

@media (max-width:700px){ .range-grid{grid-template-columns:1fr;} }

.range-card{background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:32px; text-align:center; transition:all .25s ease;}

.range-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(15,27,44,0.08); border-color:var(--green);}

.range-card img{max-height:220px; margin:0 auto 20px; object-fit:contain;}

.range-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:21px;}

.range-card p{font-size:13px; color:var(--ink-soft); margin-top:8px;}

.range-card .btn-ghost{margin-top:18px; padding:10px 24px; font-size:12px;}

.contact-hero{max-width:800px; margin:0 auto; padding:48px 32px 10px; text-align:center;}

.contact-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(32px,4.6vw,52px); line-height:1.1; margin-top:16px;}

.contact-hero h1 em{font-style:italic; color:var(--green);}

.contact-hero p{margin-top:16px; font-size:15.5px; color:var(--ink-soft); line-height:1.75; max-width:600px; margin-left:auto; margin-right:auto;}

.contact-main{max-width:1220px; margin:0 auto; padding:48px 32px 80px; display:grid; grid-template-columns:1fr 0.85fr; gap:56px; align-items:start;}

@media (max-width:900px){ .contact-main{grid-template-columns:1fr; gap:36px;} }

.contact-form-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:18px; padding:40px;}

@media (max-width:560px){ .contact-form-card{padding:26px 22px;} }

.contact-form-card h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:26px; margin-bottom:6px;}

.contact-form-card .sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:26px;}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}

@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }

.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}

.form-field label{font-size:12px; font-weight:700; color:var(--ink);}

.form-field input, .form-field select, .form-field textarea{
    border:1px solid var(--line); border-radius:6px; padding:13px 14px; font-size:14px; font-family:inherit;
    background:#fff; color:var(--ink);
  }

.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--green);}

.form-field textarea{resize:vertical; min-height:110px;}

.form-note{font-size:11.5px; color:var(--ink-soft); margin-top:14px; line-height:1.6;}

.consent-row{
    display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:12px 14px;
    border:1.5px solid var(--line); border-radius:8px; background:var(--cream); cursor:pointer; transition:all .2s ease;
  }

.consent-row input{margin-top:2px; width:16px; height:16px; accent-color:var(--green); flex-shrink:0; cursor:pointer;}

.consent-row span{font-size:12px; color:var(--ink-soft); line-height:1.6;}

.consent-row span a{color:var(--green); font-weight:700; text-decoration:none;}

.consent-row.checked{border-color:var(--green); background:var(--green-soft);}

.consent-row.checked span{color:var(--ink);}

.form-submit{width:100%; margin-top:6px; text-align:center; justify-content:center;}

.contact-info-list{display:flex; flex-direction:column; gap:16px;}

.info-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:14px; padding:22px 24px; display:flex; gap:16px; align-items:flex-start; transition:all .2s ease;}

.info-card:hover{border-color:var(--green); box-shadow:0 10px 24px rgba(15,27,44,0.06);}

.info-card .ic{width:44px; height:44px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.info-card .ic svg{width:20px; height:20px; color:var(--green);}

.info-card h4{font-size:14.5px; font-weight:800; margin-bottom:4px;}

.info-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

.info-card a.link{color:var(--green); font-weight:700; text-decoration:none; font-size:13.5px;}

.info-card .note{font-size:11.5px; opacity:0.75; margin-top:4px; display:block;}

.hours-card{background:var(--ink); color:var(--cream-text); border-radius:14px; padding:22px 24px; margin-top:4px;}

.hours-card h4{font-size:13px; font-weight:800; margin-bottom:8px; color:var(--footer-heading); text-transform:uppercase; letter-spacing:0.06em;}

.hours-card p{font-size:13px; color:var(--cream-text-soft); line-height:1.7;}

.quick-links{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 32px;}

.quick-grid{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

@media (max-width:760px){ .quick-grid{grid-template-columns:1fr;} }

.quick-card{background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:28px; text-align:center; text-decoration:none; color:var(--ink); transition:all .25s ease;}

.quick-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(15,27,44,0.08); border-color:var(--green);}

.quick-card .ic{width:48px; height:48px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}

.quick-card .ic svg{width:22px; height:22px; color:var(--green);}

.quick-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:6px;}

.quick-card p{font-size:12.5px; color:var(--ink-soft);}

.grievance-section{padding:64px 32px;}

.grievance-box{max-width:820px; margin:0 auto; background:var(--green-soft); border:1px solid var(--line); border-radius:16px; padding:36px 40px;}

@media (max-width:560px){ .grievance-box{padding:26px;} }

.grievance-box .eyebrow{margin-bottom:10px; display:block;}

.grievance-box h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:24px; margin-bottom:14px;}

.grievance-box p{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:16px;}

.grievance-detail{display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13.5px;}

@media (max-width:560px){ .grievance-detail{grid-template-columns:1fr;} }

.grievance-detail div b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--green); margin-bottom:2px;}

:root{
    --ink:#0F1B2C; --ink-soft:#4A5568; --bone:#F5F7FA; --bone-soft:#FBFCFE;
    --blue:#1D5FA6; --blue-deep:#0F3D73; --blue-soft:#E6F0FA; --line:#DCE4EE; --line-dark:#1C2E47;
  
    --green-deep:#0F1B2C; --green:#1D5FA6; --green-soft:#E6F0FA; --gold:#2E7FD6;
    --cream-text:#EFEFEC; --cream-text-soft:rgba(239,239,236,0.72); --footer-heading:#7FB2E8; --cream-soft:#FBFCFE; --cream:#F5F7FA;
  }

body{background:var(--bone); color:var(--ink); font-family:'Manrope', sans-serif; overflow-x:hidden;}

.page-head{max-width:900px; margin:0 auto; padding:14px 32px 30px;}

.page-head h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(32px,4vw,48px); margin-top:6px;}

.page-head p{margin-top:12px; color:var(--ink-soft); font-size:15px;}

.faq-wrap{max-width:900px; margin:0 auto; padding:0 32px 100px;}

.cat-block{margin-bottom:44px;}

.cat-title{display:flex; align-items:center; gap:10px; font-family:'Cormorant Garamond', serif; font-weight:600; font-size:22px; color:var(--blue-deep); margin-bottom:6px;}

.cat-title svg{width:22px; height:22px; color:var(--blue);}

.faq-item{border-bottom:1px solid var(--line);}

.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 4px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:700; color:var(--ink);}

.faq-q .plus{width:20px; height:20px; flex-shrink:0; position:relative; transition:transform .3s ease;}

.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--blue); border-radius:2px;}

.faq-q .plus::before{top:50%; left:0; width:100%; height:2px; transform:translateY(-50%);}

.faq-q .plus::after{left:50%; top:0; height:100%; width:2px; transform:translateX(-50%);}

.faq-item.open .faq-q .plus{transform:rotate(45deg);}

.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}

.faq-a p{padding:0 4px 20px; font-size:14.5px; color:var(--ink-soft); line-height:1.75; max-width:760px;}

.faq-a a.inline{color:var(--blue); text-decoration:none; font-weight:700; border-bottom:1px solid var(--blue-soft);}

.faq-a a.inline:hover{border-bottom-color:var(--blue);}

.contact-cta{background:var(--blue-soft); border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin-top:20px; text-align:center;}

.contact-cta p{color:var(--ink-soft); font-size:14px; margin-bottom:14px;}

.contact-cta a{display:inline-block; background:var(--blue); color:#fff; padding:12px 26px; border-radius:2px; font-size:13.5px; font-weight:700; text-decoration:none;}

.footer-top{max-width:1220px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:44px; border-bottom:1px solid var(--line-dark);}

.footer-top img.logo{height:40px; width:auto; margin-bottom:16px;}

.newsletter-form button:hover{background:#C29A63;}

@media (max-width:560px){
    .footer-top{text-align:center; align-items:center;}
  }

:root{
    --ink:#0F1B2C; --ink-soft:#4A5568; --bone:#F5F7FA; --bone-soft:#FBFCFE;
    --blue:#1D5FA6; --blue-deep:#0F3D73; --blue-soft:#E6F0FA; --line:#DCE4EE; --line-dark:#1C2E47;
    --red:#C0392B; --red-soft:#FDECEA;
    --amber-bg:#FFF6E5; --amber-line:#F0C46B; --amber-text:#6B4E00;
    --green-deep:#0F1B2C; --green:#1D5FA6; --green-soft:#E6F0FA; --gold:#2E7FD6;
    --cream-text:#EFEFEC; --cream-text-soft:rgba(239,239,236,0.72); --footer-heading:#7FB2E8; --cream-soft:#FBFCFE; --cream:#F5F7FA;
  }

.legal-head{max-width:1180px; margin:0 auto; padding:14px 32px 24px;}

.legal-head h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(32px,4vw,48px); margin-top:6px; color:var(--ink);}

.legal-head .updated{font-size:12.5px; color:var(--ink-soft); margin-top:10px;}

.draft-notice{max-width:1180px; margin:0 auto 36px; padding:0 32px;}

.draft-notice .box{background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:8px; padding:16px 20px; font-size:13px; color:var(--amber-text); line-height:1.6;}

.legal-layout{max-width:1180px; margin:0 auto; padding:0 32px 100px; display:grid; grid-template-columns:250px 1fr; gap:56px; align-items:start;}

.toc{position:sticky; top:72px; background:var(--bone-soft); border:1px solid var(--line); border-radius:10px; padding:20px;}

@media (max-width:880px){ .legal-layout{grid-template-columns:1fr;} .toc{position:static !important; top:auto; margin-bottom:28px;} }

.toc-title{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:12px;}

.toc a{display:block; font-size:13px; color:var(--ink-soft); text-decoration:none; padding:7px 0; line-height:1.5; border-left:2px solid transparent; padding-left:10px; transition:all .2s ease;}

.toc a:hover, .toc a.active{color:var(--blue); border-left-color:var(--blue); font-weight:700;}

.legal-content section{margin-bottom:38px; scroll-margin-top:72px;}

.legal-content h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:23px; margin-bottom:12px; color:var(--blue-deep);}

.legal-content h3{font-size:14px; font-weight:700; margin:16px 0 6px;}

.legal-content p{font-size:14.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:12px;}

.legal-content ul, .legal-content ol{margin:8px 0 14px 20px; color:var(--ink-soft); font-size:14.5px; line-height:1.85;}

.legal-content li{margin-bottom:6px;}

@media (max-width:560px){ .legal-layout{padding:0 18px 70px;} .req-box{padding:16px 16px;} .req-box ul{margin-left:16px;} }

.legal-content b{color:var(--ink);}

.legal-content a.inline{color:var(--blue); text-decoration:none; font-weight:700; border-bottom:1px solid var(--blue-soft);}

.legal-content a.inline:hover{border-bottom-color:var(--blue);}

.highlight-box{background:var(--blue-soft); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:6px; padding:18px 20px; margin:14px 0;}

.highlight-box p{margin-bottom:8px; color:var(--ink-soft);}

.highlight-box p:last-child{margin-bottom:0;}

.cert-icons-row{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}

.cert-icons-row img{height:46px; width:auto; opacity:0.85;}

.contact-box{background:var(--bone-soft); border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin-top:8px;}

.contact-box p{margin-bottom:6px; color:var(--ink);}

:root{
    --ink:#0F1B2C; --ink-soft:#4A5568; --bone:#F5F7FA; --bone-soft:#FBFCFE;
    --blue:#1D5FA6; --blue-deep:#0F3D73; --blue-soft:#E6F0FA; --line:#DCE4EE; --line-dark:#1C2E47;
    --amber-bg:#FFF6E5; --amber-line:#F0C46B; --amber-text:#6B4E00;
  
    --green-deep:#0F1B2C; --green:#1D5FA6; --green-soft:#E6F0FA; --gold:#2E7FD6;
    --cream-text:#EFEFEC; --cream-text-soft:rgba(239,239,236,0.72); --footer-heading:#7FB2E8; --cream-soft:#FBFCFE; --cream:#F5F7FA;
  }

.legal-content ul{margin:8px 0 14px 20px; color:var(--ink-soft); font-size:14.5px; line-height:1.85;}

@media (max-width:560px){ .legal-layout{padding:0 18px 70px;} }

.info-table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px;}

.info-table th, .info-table td{text-align:left; padding:10px 14px; border:1px solid var(--line);}

.info-table th{background:var(--blue-soft); color:var(--blue-deep); font-weight:700;}

.info-table td{color:var(--ink-soft);}

.legal-head h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(30px,3.8vw,46px); margin-top:6px; color:var(--ink);}

.window-banner{display:flex; align-items:center; gap:24px; background:var(--blue-soft); border:1.5px solid var(--blue); border-radius:12px; padding:24px 28px; margin-bottom:16px;}

.window-banner .big{font-family:'Cormorant Garamond', serif; font-size:38px; font-weight:700; line-height:1.1; color:var(--blue-deep); flex-shrink:0; min-width:90px; border-right:1.5px solid var(--blue); padding-right:24px;}

.window-banner .txt{font-size:14.5px; color:var(--ink); line-height:1.65;}

@media (max-width:560px){
    .window-banner{flex-direction:column; align-items:flex-start; gap:14px; padding:22px 20px;}
    .window-banner .big{border-right:none; border-bottom:1.5px solid var(--blue); padding-right:0; padding-bottom:14px; width:100%;}
    .window-banner .txt{font-size:13.5px;}
  }

.elig-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:16px 0;}

@media (max-width:700px){ .elig-grid{grid-template-columns:1fr;} }

.elig-card{border-radius:12px; padding:22px; border:1.5px solid;}

.elig-card.yes{background:var(--green-soft); border-color:var(--green);}

.elig-card.no{background:var(--red-soft); border-color:var(--red);}

.elig-card h4{display:flex; align-items:center; gap:8px; font-size:14.5px; margin-bottom:12px;}

.elig-card.yes h4{color:#166B3C;}

.elig-card.no h4{color:#8E2A1F;}

.elig-card h4 svg{width:18px; height:18px;}

.elig-card ul{margin:0 0 0 18px; font-size:13.5px; line-height:1.75;}

.elig-card.yes ul{color:#1E5C38;}

.elig-card.no ul{color:#7A241A;}

.req-box{background:var(--bone-soft); border:1.5px solid var(--blue); border-radius:12px; padding:22px 24px; margin-top:16px;}

.req-box h4{font-size:14.5px; margin-bottom:10px; color:var(--blue-deep);}

.req-box ul{margin-left:18px; font-size:13.5px; line-height:1.8; color:var(--ink-soft);}

.req-box li b{color:var(--red);}

.steps-list{counter-reset:step; margin:16px 0;}

.steps-list li{list-style:none; display:flex; gap:14px; margin-bottom:16px; align-items:flex-start;}

.steps-list li::before{counter-increment:step; content:counter(step); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}

.steps-list li div{font-size:14px; color:var(--ink-soft); line-height:1.7; padding-top:2px;}

.steps-list li div b{color:var(--ink);}

.partner-strip{display:flex; align-items:center; gap:14px; background:var(--bone-soft); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:16px 0;}

.partner-strip .p-icon{width:44px; height:44px; border-radius:10px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.partner-strip .p-icon svg{width:22px; height:22px; color:var(--blue);}

.partner-strip .p-txt b{display:block; font-size:14px;}

.partner-strip .p-txt span{font-size:12.5px; color:var(--ink-soft);}

.cod-badge{display:inline-flex; align-items:center; gap:8px; background:var(--green-soft); color:#166B3C; padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700; margin-top:6px;}

.cod-badge svg{width:16px; height:16px;}

/* ============ PHASE 2 — SHOP PAGE ============ */

/* ============ SHOP HERO ============ */
.shop-hero{max-width:800px; margin:0 auto; padding:44px 32px 8px; text-align:center;}

.shop-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(32px,4.6vw,50px); line-height:1.1; margin-top:14px;}

.shop-hero h1 em{font-style:italic; color:var(--green);}

.shop-hero p{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.75; max-width:600px; margin-left:auto; margin-right:auto;}

/* ============ FILTER BAR ============ */
.filter-bar{max-width:1220px; margin:0 auto; padding:36px 32px 8px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}

.filter-tabs{display:flex; gap:10px; flex-wrap:wrap;}

.filter-tab{background:var(--cream-soft); border:1.5px solid var(--line); color:var(--ink-soft); padding:9px 18px; border-radius:24px; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .2s ease;}

.filter-tab:hover{border-color:var(--green); color:var(--green);}

.filter-tab.active{background:var(--ink); border-color:var(--ink); color:#fff;}

.sort-select{background:var(--cream-soft); border:1.5px solid var(--line); border-radius:24px; padding:9px 16px; font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer; font-family:inherit;}

/* ============ PRODUCT GRID ============ */
.shop-grid{max-width:1220px; margin:0 auto; padding:28px 32px 90px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}

@media (max-width:980px){ .shop-grid{grid-template-columns:repeat(2, 1fr);} }

@media (max-width:620px){ .shop-grid{grid-template-columns:1fr; max-width:420px;} }

.p-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:all .25s ease; position:relative;}

.p-card:hover{transform:translateY(-5px); box-shadow:0 20px 34px rgba(15,27,44,0.1); border-color:var(--green);}

.p-card-badge{position:absolute; top:14px; left:14px; z-index:2; background:var(--green); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:0.03em; padding:5px 12px; border-radius:20px;}

.p-card-badge.value{background:var(--gold);}

.p-card-img{background:#fff; aspect-ratio:2/3; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); overflow:hidden;}

.p-card-img img{width:100%; height:100%; object-fit:cover;}

.p-card-link{display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit;}

.p-card-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1;}

.p-card-cat{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:800; color:var(--green); margin-bottom:6px;}

.p-card-body h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; line-height:1.25; margin-bottom:8px;}

.p-card-body .desc{font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:14px; flex:1;}

.p-card-price{display:flex; align-items:baseline; gap:8px; margin-bottom:14px;}

.p-card-price .now{font-size:19px; font-weight:800; color:var(--ink);}

.p-card-price .old{font-size:13px; color:var(--ink-soft); text-decoration:line-through;}

.p-card-price .save{font-size:10.5px; font-weight:800; color:var(--green); background:var(--green-soft); padding:3px 8px; border-radius:12px;}

/* Two parallel buttons at the card's bottom (View Product + Add to Cart) —
   not in the original mockup, which had one plain "View Product" block. They
   reuse the site's own .btn-ghost/.btn-primary classes directly (rather than
   a new lookalike pair) so their colour AND hover behaviour are guaranteed
   identical to every other secondary/primary button on the site — this rule
   only resizes them to fit the narrower card. */
.p-card-actions{display:flex; gap:8px; padding:0 20px 20px;}

.p-card-actions .btn-ghost, .p-card-actions .btn-primary{flex:1; text-align:center; padding:11px 6px; font-size:12px; white-space:nowrap;}

.p-card-actions .btn-primary.loading{opacity:0.6; pointer-events:none;}

/* WooCommerce's own add-to-cart script injects a default "View cart" text
   link right after the button on success — our side cart drawer already
   covers that job far better, so this stray link is hidden everywhere. */
.added_to_cart.wc-forward{display:none !important;}

/* ============ PHASE 2 — SINGLE PRODUCT PAGE ============ */
/* Everything below is scoped under body.single-product (WooCommerce adds
   this class automatically on every product page) so it can never collide
   with a same-named class on Homepage/Shop/any other already-approved page —
   the exact kind of cross-page CSS clash that caused earlier bugs on this
   project. If a later page (Cart, Checkout, My Account) needs one of these
   same look, it gets its own scoped copy rather than sharing this one. */

/* Amazon button removed from this box per owner's request — the earlier
   parallel Add to Cart + Amazon row broke the layout on the live site, so
   Quantity & Purchase now only ever shows Quantity + Add to Cart here.
   Amazon is promoted instead to a single, site-wide footer badge — see
   .footer-amazon below (in the main footer rules, not this single-product
   scope). Add to Cart itself is also narrower now, on request. */

.single-product .product-main{max-width:1220px; margin:0 auto; padding:32px 32px 80px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; min-width:0;}
.single-product .product-main > *{min-width:0;}
@media (max-width:900px){ .single-product .product-main{grid-template-columns:1fr; gap:32px; padding:20px 20px 56px;} }

.single-product .gallery{min-width:0;}
/* Gallery (photo + thumbnails) is the shorter column — stick it while the
   visitor scrolls through the taller right-hand content (price, description,
   benefits, etc.), so the empty space below the photo isn't wasted. Because
   .product-main is a grid with align-items:start, the gallery automatically
   stops sticking and scrolls away together with the rest the moment
   .product-main itself ends — right before the full-width sections below
   (Targets/Suitable For/etc.) begin — so it can never overlap them. Desktop/
   tablet only (matches the existing two-column breakpoint below): below it
   the two columns stack into one, where a sticky photo would just get in
   the way of the text scrolling under it. */
@media (min-width:901px){
  .single-product .gallery{position:sticky; top:80px; align-self:start;}
}
.single-product .gallery-main{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:2/3; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.single-product .gallery-main img{width:100%; height:100%; object-fit:cover;}
.single-product .gallery-thumbs{display:flex; gap:12px; overflow-x:auto; padding-bottom:4px;}
.single-product .gallery-thumb{flex:0 0 76px; height:76px; border-radius:10px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--green-soft); transition:border-color .2s ease;}
.single-product .gallery-thumb img{width:100%; height:100%; object-fit:cover;}
.single-product .gallery-thumb.active{border-color:var(--green);}

.single-product .product-info .eyebrow{margin-bottom:10px; display:block;}
.single-product .product-info h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(30px,3.6vw,42px); line-height:1.1;}
.single-product .product-info .subtitle{font-size:14px; color:var(--ink-soft); margin-top:8px; font-weight:600; letter-spacing:0.02em;}
.single-product .price-row{display:flex; align-items:baseline; gap:12px; margin-top:20px; flex-wrap:wrap;}
.single-product .price-now{font-family:'Manrope', sans-serif; font-size:28px; font-weight:800; color:var(--ink);}
.single-product .price-old{font-size:16px; color:var(--ink-soft); text-decoration:line-through;}
.single-product .price-badge{background:var(--green-soft); color:var(--green); font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px;}
.single-product .price-gst{font-size:11.5px; color:var(--ink-soft); margin-top:6px; font-weight:500;}
.single-product .product-desc{margin-top:18px; font-size:14.5px; color:var(--ink-soft); line-height:1.75; max-width:480px;}

.single-product .benefit-list{list-style:none; margin-top:22px; display:grid; gap:10px;}
.single-product .benefit-list li{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink);}
.single-product .benefit-list li svg{width:17px; height:17px; color:var(--green); flex-shrink:0;}

.single-product .pill{border:1px solid var(--line); background:var(--cream-soft); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; color:var(--ink-soft);}

.single-product .freefrom-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.single-product .freefrom-badge{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--green); color:var(--green); padding:7px 14px 7px 10px; border-radius:6px; font-size:12px; font-weight:700;}
.single-product .freefrom-badge svg{width:14px; height:14px; flex-shrink:0;}

.single-product .buy-row{display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap;}
.single-product .qty-box{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:2px;}
.single-product .qty-box button{width:38px; height:48px; background:none; border:none; font-size:17px; cursor:pointer; color:var(--ink);}
.single-product .qty-box button:hover{background:var(--green-soft);}
.single-product .qty-box span{width:36px; text-align:center; font-weight:700; font-size:14px;}
.single-product .buy-row .btn-primary{height:48px; padding:0 26px; border:none; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center;}

.single-product .trust-mini{display:flex; gap:22px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap;}
.single-product .trust-mini-item{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink-soft);}
.single-product .trust-mini-item img{height:24px; width:24px; object-fit:contain;}

.single-product .stock-row{display:flex; align-items:center; gap:8px; margin-top:16px;}
.single-product .stock-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--green);}
.single-product .stock-badge.out{color:#C0392B;}
.single-product .stock-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--green);}
.single-product .stock-badge.out .dot{background:#C0392B;}

.single-product .info-box{border:1px solid var(--line); border-radius:10px; padding:18px; margin-top:20px; background:#fff;}
.single-product .info-box-label{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);}

.single-product .whats-included{background:var(--green-soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:20px; max-width:420px;}
.single-product .whats-included h4{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; font-weight:800; color:var(--green); margin-bottom:12px;}
.single-product .included-item{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.single-product .included-item:last-child{margin-bottom:0;}
.single-product .included-item img{width:40px; height:40px; object-fit:contain; background:#fff; border-radius:6px; padding:4px; flex-shrink:0;}
.single-product .included-item b{display:block; font-size:13px; font-weight:700; color:var(--ink);}
.single-product .included-item span{font-size:11.5px; color:var(--ink-soft);}

.single-product .pincode-row{display:flex; gap:8px;}
.single-product .pincode-row input{flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:11px 12px; font-size:13.5px; font-family:inherit;}
.single-product .pincode-row input:focus{outline:none; border-color:var(--green);}
.single-product .pincode-row button{background:var(--ink); color:#fff; border:none; padding:0 20px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;}
.single-product .pincode-result{margin-top:14px; display:none;}
.single-product .pincode-result.show{display:block;}
.single-product .pincode-result-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; padding:10px 12px; border-radius:8px;}
.single-product .pincode-result-row:last-child{margin-bottom:0;}
.single-product .pincode-result-row svg{width:17px; height:17px; flex-shrink:0; margin-top:1px;}
.single-product .pincode-result-row.ok{background:var(--green-soft); border:1px solid var(--green);}
.single-product .pincode-result-row.ok svg{color:var(--green);}
.single-product .pincode-result-row.no{background:#FDECEA; border:1px solid #C0392B;}
.single-product .pincode-result-row.no svg{color:#C0392B;}
.single-product .pincode-result-row b{font-size:13px; display:block;}
.single-product .pincode-result-row span{font-size:12px; color:var(--ink-soft);}

.single-product .return-box-inline{display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:12px; color:var(--ink-soft); line-height:1.6;}
.single-product .return-box-inline svg{width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:1px;}
.single-product .return-box-inline a{color:var(--green); font-weight:700; text-decoration:none;}

.single-product .pfaq-list{display:flex; flex-direction:column; gap:10px;}
.single-product .pfaq-item{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--cream-soft);}
.single-product .pfaq-q{width:100%; text-align:left; background:none; border:none; padding:16px 18px; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:inherit;}
.single-product .pfaq-plus{width:18px; height:18px; flex-shrink:0; position:relative;}
.single-product .pfaq-plus::before, .single-product .pfaq-plus::after{content:''; position:absolute; background:var(--green); border-radius:2px; transition:transform .2s ease;}
.single-product .pfaq-plus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.single-product .pfaq-plus::after{width:2px; height:100%; left:50%; top:0; transform:translateX(-50%);}
.single-product .pfaq-item.open .pfaq-plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.single-product .pfaq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.single-product .pfaq-item.open .pfaq-a{max-height:200px;}
.single-product .pfaq-a p{padding:0 18px 16px; font-size:13px; color:var(--ink-soft); line-height:1.7;}

.single-product .attract-line{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--green); margin-top:16px;}
.single-product .attract-line svg{width:17px; height:17px; flex-shrink:0;}

.single-product .info-cards-section{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.single-product .info-cards{max-width:1220px; margin:0 auto; padding:64px 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:900px){ .single-product .info-cards{grid-template-columns:1fr 1fr; padding:48px 20px;} }
@media (max-width:520px){ .single-product .info-cards{grid-template-columns:1fr;} }
/* The base .info-card rule (used on the Contact page) is display:flex for a
   2-child icon+text row layout. This page's info-card has 3 stacked
   children (icon circle, heading, list) and needs a plain vertical block
   layout instead — override display explicitly rather than relying on
   text-align alone, so it never again silently inherits the Contact page's
   flex-row behaviour. */
.single-product .info-card{display:block; text-align:left;}
.single-product .info-card .icon-circle{width:52px; height:52px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.single-product .info-card .icon-circle svg{width:24px; height:24px; color:var(--green);}
.single-product .info-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:10px;}
.single-product .info-card ul{list-style:none; display:grid; gap:6px;}
.single-product .info-card ul li{font-size:13px; color:var(--ink-soft); line-height:1.6; padding-left:16px; position:relative;}
.single-product .info-card ul li::before{content:'—'; position:absolute; left:0; color:var(--green);}
.single-product .info-card ol{margin-left:16px; display:grid; gap:8px;}
.single-product .info-card ol li{font-size:13px; color:var(--ink-soft); line-height:1.6; padding-left:2px;}

.single-product .ing-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;}
@media (max-width:900px){ .single-product .ing-grid{grid-template-columns:repeat(2,1fr);} }
.single-product .ing-card img{height:76px; width:76px; margin:0 auto 14px; object-fit:contain;}
.single-product .ing-card p{margin-top:6px;}

.single-product .steps-photo-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;}
@media (max-width:900px){ .single-product .steps-photo-grid{grid-template-columns:repeat(3,1fr) !important;} }
@media (max-width:560px){ .single-product .steps-photo-grid{grid-template-columns:repeat(2,1fr) !important;} }
.single-product .step-photo-card{text-align:center; position:relative;}
.single-product .step-photo-card img{width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--green-soft);}
.single-product .step-num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:11px; font-weight:800; margin-bottom:6px;}
.single-product .step-photo-card b{display:block; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:4px;}
.single-product .step-photo-card p{font-size:11.5px; color:var(--ink-soft); line-height:1.5;}

.single-product .routine-row-head{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px; max-width:640px; margin-left:auto; margin-right:auto;}
.single-product .routine-num{width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.single-product .routine-tag{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:800; color:var(--green); display:block;}
.single-product .routine-row-head h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:20px; margin-top:2px;}
.single-product .routine-down-arrow{display:flex; align-items:center; justify-content:center; color:var(--green); margin:36px 0;}
.single-product .routine-down-arrow svg{width:30px; height:30px;}
.single-product .routine-closing{max-width:640px; margin:40px auto 0; text-align:center; padding-top:28px; border-top:1px solid var(--line);}
.single-product .routine-closing p{font-size:13.5px; color:var(--ink-soft); line-height:1.8;}
@media (max-width:560px){ .single-product .routine-row-head{gap:10px;} .single-product .routine-row-head h3{font-size:16px;} }

.single-product .people-band{background:var(--ink); color:var(--cream-text);}
.single-product .people-band .section-head h2{color:var(--cream-text);}
.single-product .people-band .section-head p{color:var(--cream-text-soft);}
.single-product .people-band .eyebrow{color:var(--footer-heading);}
.single-product .people-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:700px){ .single-product .people-grid{grid-template-columns:1fr;} }
.single-product .people-card{border-radius:16px; overflow:hidden; position:relative; aspect-ratio:3/4;}
.single-product .people-card img{width:100%; height:100%; object-fit:cover;}
.single-product .people-card .tag{position:absolute; bottom:16px; left:16px; background:rgba(255,255,255,0.92); color:var(--ink); font-size:12px; font-weight:700; padding:7px 14px; border-radius:20px;}

.single-product .label-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:700px){ .single-product .label-grid{grid-template-columns:1fr;} }
.single-product .label-block{background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:22px 24px;}
.single-product .label-block h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:17px; margin-bottom:8px; color:var(--ink);}
.single-product .label-block p{font-size:13.5px; color:var(--ink-soft); line-height:1.7;}
.single-product .label-caution{border-left:3px solid #C0392B; background:#FDECEA;}
.single-product .label-caution h3{color:#8E2A1F;}
.single-product .label-storage{border-left:3px solid var(--green); background:var(--green-soft);}
.single-product .ingredient-full-list{font-size:12.5px; color:var(--ink-soft); line-height:1.8;}
.single-product .label-product-block{margin-bottom:32px; padding-bottom:28px; border-bottom:1px dashed var(--line);}
.single-product .label-product-block:last-of-type{border-bottom:none;}
.single-product .label-product-title{font-family:'Cormorant Garamond', serif; font-weight:700; font-size:20px; color:var(--green-deep); margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--green);}
.single-product .manuf-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line);}
@media (max-width:700px){ .single-product .manuf-grid{grid-template-columns:1fr;} }
.single-product .manuf-label{font-size:11px; text-transform:uppercase; letter-spacing:0.1em; font-weight:800; color:var(--green); display:block; margin-bottom:8px;}
.single-product .manuf-block p{font-size:13px; color:var(--ink-soft); line-height:1.7;}
.single-product .batch-note{font-size:11.5px; color:var(--ink-soft); opacity:0.75; margin-top:16px; font-style:italic;}

/* WooCommerce's own "Added to cart" / error notices — styled to match the
   theme instead of showing WooCommerce's unstyled default list. */
.single-product ul.woocommerce-message,
.single-product ul.woocommerce-error,
.single-product ul.woocommerce-info{max-width:1220px; margin:18px auto 0; padding:14px 32px; list-style:none; font-size:13.5px; font-weight:600;}
.single-product ul.woocommerce-message{background:var(--green-soft); color:var(--green);}
.single-product ul.woocommerce-error{background:#FDECEA; color:#C0392B;}
.single-product ul.woocommerce-info{background:var(--cream-soft); border:1px solid var(--line); color:var(--ink-soft);}
.single-product ul.woocommerce-message a, .single-product ul.woocommerce-info a{color:inherit; font-weight:800; text-decoration:underline;}
.single-product input[type="number"]::-webkit-inner-spin-button, .single-product input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}

/* ===================================================================
   PRODUCT AUTHENTICITY PAGE — static info page (page-product-authenticity.php)
   Class names below are unique to this page (checked against the rest of
   the stylesheet for collisions before adding), so no scoping wrapper is
   needed — same approach as the About page's .about-hero/.story-split etc.
   =================================================================== */

.auth-hero{max-width:760px; margin:0 auto; padding:48px 32px 8px; text-align:center;}
.auth-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(30px,4.2vw,44px); line-height:1.1; margin-top:14px;}
.auth-hero p{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.75;}

.channel-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto;}
@media (max-width:700px){ .channel-grid{grid-template-columns:1fr;} }
.channel-card{background:var(--green-soft); border:1.5px solid var(--green); border-radius:16px; padding:28px; text-align:center;}
.channel-card .ic{width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.channel-card .ic svg{width:24px; height:24px; color:var(--green);}
.channel-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:8px;}
.channel-card p{font-size:13px; color:var(--ink-soft); line-height:1.6;}
.channel-card a{color:var(--green); font-weight:700; text-decoration:none; font-size:13px; display:inline-block; margin-top:10px;}

.not-channel-box{max-width:900px; margin:20px auto 0; background:var(--red-soft); border:1.5px solid var(--red); border-radius:14px; padding:20px 24px; display:flex; gap:14px; align-items:flex-start;}
.not-channel-box svg{width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px;}
.not-channel-box b{font-size:13.5px; display:block; margin-bottom:4px;}
.not-channel-box p{font-size:13px; color:var(--ink-soft); line-height:1.7;}

.verify-section{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.verify-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1220px; margin:0 auto;}
@media (max-width:900px){ .verify-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .verify-grid{grid-template-columns:1fr;} }
.verify-card{text-align:left;}
.verify-card .num{width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-family:'Cormorant Garamond', serif; font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.verify-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:18px; margin-bottom:8px;}
.verify-card p{font-size:13px; color:var(--ink-soft); line-height:1.65;}

.report-box{max-width:820px; margin:0 auto; background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:32px 36px; text-align:center;}
@media (max-width:560px){ .report-box{padding:24px 20px;} }
.report-box h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(22px,3vw,28px);}
.report-box p{margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.7;}
.report-actions{display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap;}

/* ===================================================================
   CART PAGE — page-cart.php + woocommerce/cart/cart.php + inc/cart-content.php
   Class names checked against the rest of the stylesheet for collisions
   before adding (none found), so no scoping wrapper needed.
   =================================================================== */

.cart-hero{max-width:1220px; margin:0 auto; padding:32px 32px 0;}
.cart-hero h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(28px,3.6vw,38px);}
.cart-hero p{font-size:13px; color:var(--ink-soft); margin-top:6px;}

/* v1.5.4: same align-items:start sticky-breaking issue fixed on .checkout-layout above — .cart-summary's position:sticky needs the right column stretched to the left column's height to have any room to stick. */
.cart-layout{max-width:1220px; margin:0 auto; padding:24px 32px 90px; display:grid; grid-template-columns:1fr 380px; gap:36px; min-width:0;}
@media (max-width:900px){ .cart-layout{grid-template-columns:minmax(0,1fr); padding:20px 20px 60px; gap:24px;} }

.cart-list{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:8px; min-width:0;}
.cart-row{display:flex; gap:16px; padding:18px 14px; border-bottom:1px solid var(--line); align-items:center; transition:opacity .2s ease;}
.cart-row:last-child{border-bottom:none;}
.cart-row-img{width:76px; height:76px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.cart-row-img img{width:100%; height:100%; object-fit:cover;}
.cart-row-info{flex:1; min-width:0;}
.cart-row-info h4{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:15.5px; margin-bottom:4px; overflow-wrap:break-word;}
.cart-row-info .size{font-size:11.5px; color:var(--ink-soft);}
.cart-row-info .price-mobile{display:none; font-size:13.5px; font-weight:800; margin-top:6px;}
.cart-row-qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:2px; flex-shrink:0;}
.cart-row-qty button{width:30px; height:34px; background:none; border:none; font-size:15px; cursor:pointer; color:var(--ink); font-family:inherit;}
.cart-row-qty button:hover{background:var(--green-soft);}
.cart-row-qty span{width:28px; text-align:center; font-weight:700; font-size:13px; display:inline-block;}
.cart-row-price{width:80px; text-align:right; font-weight:800; font-size:14px; flex-shrink:0;}
.cart-row-remove{width:32px; height:32px; border-radius:50%; border:none; background:none; color:var(--ink-soft); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.cart-row-remove:hover{background:var(--red-soft); color:var(--red);}
.cart-row-remove svg{width:16px; height:16px;}

@media (max-width:640px){
  .cart-row{flex-wrap:wrap; gap:12px; padding:16px 12px;}
  .cart-row-img{width:64px; height:64px;}
  .cart-row-info{flex-basis:calc(100% - 76px - 32px);}
  .cart-row-price{display:none;}
  .cart-row-info .price-mobile{display:block;}
  .cart-row-qty{order:3; margin-left:76px;}
  .cart-row-remove{order:4; margin-left:auto;}
}

.cart-empty-state{text-align:center; padding:70px 20px; max-width:1220px; margin:0 auto;}
.cart-empty-state svg{width:56px; height:56px; color:var(--line); margin:0 auto 18px;}
.cart-empty-state h3{font-family:'Cormorant Garamond', serif; font-size:22px; margin-bottom:8px;}
.cart-empty-state p{font-size:13.5px; color:var(--ink-soft); margin-bottom:22px;}

/* Order summary sidebar */
.cart-summary{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:24px; position:sticky; top:80px; min-width:0;}
@media (max-width:900px){ .cart-summary{position:relative; top:0;} }
.cart-summary h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:18px;}
.promo-row{display:flex; gap:8px; margin-bottom:14px;}
.promo-row input{flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:11px 12px; font-size:13px; font-family:inherit;}
.promo-row button{background:var(--ink); color:#fff; border:none; padding:0 16px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit;}
.coupon-msg{font-size:12px; margin-bottom:16px; line-height:1.5;}
.coupon-msg.success{color:var(--green);}
.coupon-msg.error{color:var(--red);}

/* v1.5.3: Checkout's own promo code box — the plain flex .promo-row above
   was designed for the Cart page's slim sidebar and looked cramped inside
   Checkout's Order Summary card, so it's redesigned bigger/roomier here,
   scoped to Checkout only (.checkout-layout) so the Cart page keeps its own
   compact version untouched. */
.checkout-layout .promo-row{margin-bottom:18px;}
.checkout-layout .promo-input-group{display:flex; gap:10px;}
.checkout-layout .promo-input-group input{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:10px; padding:15px 16px; font-size:14px; font-family:inherit; background:#fff;}
.checkout-layout .promo-input-group input:focus{outline:none; border-color:var(--ink);}
.checkout-layout .promo-input-group button{background:var(--ink); color:#fff; border:none; padding:0 24px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit;}
.checkout-layout .promo-input-group button.loading{opacity:.6; cursor:default;}
#order_review.pg-loading{opacity:.6; pointer-events:none;}
.checkout-layout .promo-status{font-size:12.5px; margin-top:9px; line-height:1.5; min-height:16px;}
.checkout-layout .promo-status.success{color:var(--green);}
.checkout-layout .promo-status.error{color:var(--red);}

.sum-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; gap:10px;}
.sum-row.total{font-size:16px; font-weight:800; color:var(--ink); padding-top:14px; margin-top:6px; border-top:1px solid var(--line);}
.sum-note{font-size:11.5px; color:var(--ink-soft); margin-top:14px; line-height:1.6;}
.cart-summary .btn-primary{width:100%; text-align:center; margin-top:18px;}
.trust-mini-row{display:flex; gap:16px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap;}
.trust-mini-row .item{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-soft);}
.trust-mini-row svg{width:15px; height:15px; color:var(--green);}

/* You may also like */
.also-like{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 32px;}
.also-grid{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){ .also-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .also-grid{grid-template-columns:1fr; max-width:340px;} }
.also-card{background:var(--cream); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); transition:all .2s ease; display:block;}
.also-card:hover{border-color:var(--green); transform:translateY(-3px);}
.also-img{background:#fff; aspect-ratio:2/3; border-bottom:1px solid var(--line);}
.also-img img{width:100%; height:100%; object-fit:cover;}
.also-body{padding:16px;}
.also-body h4{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:15px; margin-bottom:6px;}
.also-body .price{font-size:13.5px; font-weight:800;}

/* ============ CHECKOUT PAGE ============ */
/* Minimal, distraction-free checkout header (no main nav/drawer here — see page-checkout.php) */
.checkout-header{background:var(--cream-soft); border-bottom:1px solid var(--line); padding:16px 20px;}
.checkout-header-inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.checkout-header-inner img{height:30px;}
.checkout-secure{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-soft);}
.checkout-secure svg{width:15px; height:15px; color:var(--green);}

.progress-bar{max-width:1100px; margin:0 auto; padding:18px 20px 0; display:flex; align-items:center; justify-content:center; gap:8px;}
.progress-step{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink-soft);}
.progress-step .dot{width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:11px;}
.progress-step.active{color:var(--green);}
.progress-step.active .dot{background:var(--green); color:#fff;}
.progress-step.done .dot{background:var(--green); color:#fff;}
.progress-line{width:30px; height:1.5px; background:var(--line);}
@media (max-width:560px){ .progress-step span.label{display:none;} .progress-line{width:18px;} }

/* v1.5.4 fix: align-items:start used to be set here so this grid's shorter
   right column wouldn't visually stretch — but that's exactly what broke
   the Order Summary's position:sticky (item 7): with align-items:start the
   right column's own box is only ever as tall as its own content, which is
   the same height as the sticky card inside it, leaving it zero room to
   ever separate from normal scroll and "stick". Removing it (default
   align-items:stretch) makes the right column's box match the taller left
   column's height instead, so the sticky Order Summary card now has real
   room to stay in view while the customer scrolls the left side, and only
   scrolls away once its own column's bottom edge is reached. */
.checkout-layout{max-width:1100px; margin:0 auto; padding:32px 20px 90px; display:grid; grid-template-columns:1fr 380px; gap:36px; min-width:0;}
@media (max-width:900px){ .checkout-layout{grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 18px 60px;} }
.checkout-layout .form-section{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:20px; min-width:0;}
@media (max-width:560px){ .checkout-layout .form-section{padding:18px;} }
.saved-address-card{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.saved-address-card svg{width:20px; height:20px; flex-shrink:0; color:var(--green); margin-top:2px;}
.saved-address-card .saved-address-text{flex:1; font-size:13.5px; line-height:1.6; color:var(--ink-soft); overflow-wrap:break-word; word-break:break-word;}
.saved-address-card .btn-ghost{flex-shrink:0;}
@media (max-width:560px){ .saved-address-card{flex-wrap:wrap;} .saved-address-card .btn-ghost{margin-left:32px;} }
.pg-field-status{font-size:12px; margin-top:6px; min-height:14px;}
.pg-field-status.error{color:var(--red);}
.pg-field-status.ok{color:var(--green);}
.pg-pw-field{position:relative;}
.pg-pw-field input[type="password"],.pg-pw-field input[type="text"]{padding-right:44px;}
.pg-pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; padding:8px; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
.pg-pw-toggle svg{width:18px; height:18px;}
.pg-pw-toggle.active{color:var(--green);}
.checkout-layout .form-section-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.checkout-layout .form-section-head .num{width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.checkout-layout .form-section-head h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px;}
/* Clearfix: .form-row-first/-last are floated (WooCommerce's own real
   two-column convention), so the .form-section box needs to clear them
   itself, otherwise it collapses to zero height around its floated
   children and the next section visually overlaps it. */
.checkout-layout .form-section::after{content:""; display:table; clear:both;}

/* WooCommerce's own real form-row markup (form-row-first/-last/-wide, .input-text)
   re-skinned to match the design — WooCommerce's default CSS is disabled
   site-wide, so these are this theme's own rules for that markup. */
/* v1.5.3 fix: the generic .form-row{display:grid; grid-template-columns:1fr 1fr}
   rule further up this file was written only for the Contact page's own
   2-field-per-row layout, but being unscoped it also matched WooCommerce's
   own <p class="form-row ..."> field wrappers here — splitting each single
   field's label and input into two grid columns instead of stacking them,
   which is what pushed fields like "Apartment, suite, unit" out of line.
   display:block restores the plain stacked layout these float-based
   form-row-first/-last/-wide rules were always written for. */
.checkout-layout .form-row{display:block; margin-bottom:14px;}
.checkout-layout .form-row-first, .checkout-layout .form-row-last{width:48%;}
.checkout-layout .form-row-first{float:left;}
.checkout-layout .form-row-last{float:right;}
.checkout-layout .form-row-wide{clear:both; width:100%;}
@media (max-width:480px){ .checkout-layout .form-row-first, .checkout-layout .form-row-last{width:100%; float:none;} }
.checkout-layout .form-row label{display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.checkout-layout .form-row label .required{color:var(--red); text-decoration:none;}
.checkout-layout .form-row input.input-text,
.checkout-layout .form-row select,
.checkout-layout .form-row textarea{
  border:1px solid var(--line); border-radius:6px; padding:12px 13px; font-size:13.5px; font-family:inherit;
  background:#fff; color:var(--ink); width:100%;
}
.checkout-layout .form-row input.input-text:focus,
.checkout-layout .form-row select:focus{outline:none; border-color:var(--green);}
.checkout-layout .form-row.woocommerce-invalid input.input-text{border-color:var(--red);}

/* Delivery method / Payment method option cards (reused for both) */
.checkout-layout .pay-options{display:flex; flex-direction:column; gap:10px;}
.checkout-layout .pay-option{border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:all .2s ease;}
.checkout-layout .pay-option.selected{border-color:var(--green); background:var(--green-soft);}
.checkout-layout .pay-option:has(input:checked){border-color:var(--green); background:var(--green-soft);}
.checkout-layout .pay-option input{accent-color:var(--green); flex-shrink:0;}
.checkout-layout .pay-option .ic{width:34px; height:34px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.checkout-layout .pay-option .ic svg{width:18px; height:18px; color:var(--green);}
.checkout-layout .pay-option-info{flex:1; min-width:0;}
.checkout-layout .pay-option-info b{font-size:13.5px; display:block;}
.checkout-layout .pay-option-info span{font-size:11.5px; color:var(--ink-soft);}
.checkout-layout .payment_box{padding:14px 4px 4px 46px; font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.checkout-layout .secure-note{display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-soft);}
.checkout-layout .secure-note svg{width:15px; height:15px; color:var(--green); flex-shrink:0;}

/* Order summary sidebar — reuses .cart-summary/.sum-row/.promo-row, just a closer sticky offset since the checkout header isn't sticky */
.checkout-layout .cart-summary{top:20px;}
@media (max-width:900px){ .checkout-layout .cart-summary{position:relative; top:0;} }
.sum-item{display:flex; gap:12px; margin-bottom:14px; align-items:center;}
.sum-item img{width:52px; height:52px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; padding:4px; flex-shrink:0;}
.sum-item-info{flex:1; min-width:0;}
.sum-item-info b{font-size:12.5px; display:block; overflow-wrap:break-word;}
.sum-item-info span{font-size:11px; color:var(--ink-soft);}
.sum-item-price{font-size:13px; font-weight:800; flex-shrink:0;}

.terms-row{display:flex; align-items:flex-start; gap:10px; margin:16px 0; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px; background:var(--cream); cursor:pointer; transition:all .2s ease;}
.terms-row input{margin-top:2px; width:16px; height:16px; accent-color:var(--green); flex-shrink:0; cursor:pointer;}
.terms-row span{font-size:11.5px; color:var(--ink-soft); line-height:1.6;}
.terms-row span a{color:var(--green); font-weight:700; text-decoration:none;}
.terms-row.checked{border-color:var(--green); background:var(--green-soft);}

/* v1.5.3: guest checkout / returning-customer login + "create an account"
   (see woocommerce/checkout/form-login.php and the create-account-row block
   in woocommerce/checkout/form-checkout.php). Guest checkout itself needs no
   markup at all — it's simply what happens when neither of these is used. */
.checkout-login-toggle{margin-bottom:8px;}
.login-prompt-line{font-size:13px; color:var(--ink-soft); margin-bottom:0;}
.login-prompt-line .showlogin{color:var(--green); font-weight:700; text-decoration:none; margin-left:4px;}
.checkout-login-toggle .form-card{margin-top:14px; margin-bottom:0;}
.checkout-login-toggle .lost_password{font-size:11.5px; margin-top:10px;}
.checkout-login-toggle .lost_password a{color:var(--green); font-weight:700; text-decoration:none;}
.checkout-layout .create-account-row{clear:both; margin-top:16px;}
.checkout-layout .create-account-fields{margin-top:14px;}

.secure-badges{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); text-align:center;}
.secure-badge{display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:10px;}
.secure-badge svg{width:15px; height:15px; color:var(--green);}
.secure-badge-tags{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
.secure-badge-tags span{border:1px solid var(--line); border-radius:4px; padding:3px 9px; font-size:10.5px; font-weight:700; color:var(--ink-soft);}

.checkout-footer-note{max-width:1100px; margin:0 auto; padding:0 20px 40px; text-align:center; font-size:11.5px; color:var(--ink-soft);}
.checkout-footer-note a{color:var(--green); text-decoration:none; font-weight:700;}

/* Real WooCommerce notices (required-field errors, coupon errors, etc.) on checkout */
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-message,
.woocommerce-notices-wrapper ul.woocommerce-info{margin:16px auto 0; padding:14px 20px; list-style:none; font-size:13.5px; font-weight:600; border-radius:8px;}
.woocommerce-notices-wrapper ul.woocommerce-error{background:#FDECEA; color:#C0392B;}
.woocommerce-notices-wrapper ul.woocommerce-message{background:var(--green-soft); color:var(--green);}
.woocommerce-notices-wrapper ul.woocommerce-info{background:var(--cream-soft); border:1px solid var(--line); color:var(--ink-soft);}

/* ============ ORDER CONFIRMATION (thank-you) PAGE ============ */
.success-wrap{max-width:640px; margin:0 auto; padding:60px 24px 20px; text-align:center;}
@media (max-width:560px){ .success-wrap{padding:40px 20px 10px;} }
.success-icon{width:76px; height:76px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.success-icon svg{width:38px; height:38px; color:var(--green);}
.success-wrap h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(28px,4.4vw,38px); line-height:1.15;}
.success-wrap p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
.order-number-box{display:inline-flex; align-items:center; gap:10px; background:var(--cream-soft); border:1px solid var(--line); border-radius:30px; padding:10px 22px; margin-top:22px; font-size:14px; font-weight:800;}
.order-number-box span.lbl{font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}

.confirm-details{max-width:640px; margin:32px auto 0; padding:0 24px 60px;}
.detail-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:20px; min-width:0;}
@media (max-width:560px){ .detail-card{padding:20px;} }
.detail-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:18px; margin-bottom:16px;}

.oi-row{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);}
.oi-row:last-child{border-bottom:none;}
.oi-row img{width:48px; height:48px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px; flex-shrink:0;}
.oi-row-info{flex:1; min-width:0;}
.oi-row-info b{font-size:13px; display:block; overflow-wrap:break-word;}
.oi-row-info span{font-size:11px; color:var(--ink-soft);}
.oi-row-price{font-size:13px; font-weight:800; flex-shrink:0;}

.info-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:480px){ .info-grid-2{grid-template-columns:1fr;} }
.info-grid-2 h4{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--green); font-weight:800; margin-bottom:8px;}
.info-grid-2 p{font-size:13px; color:var(--ink-soft); line-height:1.7;}

.whats-next{display:flex; gap:14px; margin-bottom:16px; align-items:flex-start;}
.whats-next:last-child{margin-bottom:0;}
.whats-next .ic{width:34px; height:34px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.whats-next .ic svg{width:16px; height:16px; color:var(--green);}
.whats-next b{font-size:13px; display:block; margin-bottom:2px;}
.whats-next p{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

.confirm-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px;}
.confirm-help{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:28px;}
.confirm-help a{color:var(--green); font-weight:700; text-decoration:none;}

footer.confirm-footer{background:var(--green-deep); color:var(--cream-text); padding:56px 32px 26px; text-align:center; margin-top:20px;}
footer.confirm-footer img{height:30px; margin:0 auto 12px;}
footer.confirm-footer p{font-size:12.5px; color:var(--cream-text-soft);}

/* ============ MY ACCOUNT ============ */
.btn-sm{padding:9px 18px; font-size:12px;}
.btn-danger{border:1.5px solid var(--red); color:var(--red); background:none; padding:9px 18px; border-radius:2px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;}
.btn-danger:hover{background:var(--red); color:#fff;}

/* v1.5.4: same align-items:start sticky-breaking issue fixed on .checkout-layout above — .acc-sidebar's position:sticky needs its own column stretched to the content column's height to have any room to stick while scrolling a long Orders list, etc. */
.account-wrap{max-width:1220px; margin:0 auto; padding:28px 32px 90px; display:grid; grid-template-columns:270px 1fr; gap:36px; min-width:0; align-items:start;}
.account-wrap > *{min-width:0;}
/* WooCommerce always wraps [woocommerce_my_account]'s output in its own
   <div class="woocommerce"> — confirmed via DevTools inspection this was
   the actual single direct child collapsing the two-column grid below
   (sidebar + content) into one stacked column the whole time. Making that
   wrapper invisible to the grid restores its real children as the grid
   items. Kept alongside the earlier <p> safety net below. */
.account-wrap > .woocommerce{display:contents;}
.account-wrap > .woocommerce > *{min-width:0;}
/* Safety net: if WordPress still wraps the [woocommerce_my_account] output
   in a stray <p> for any reason, this makes that wrapper invisible to the
   grid so its real children (sidebar nav + content) become the actual grid
   items instead of one collapsed column. */
.account-wrap > p{display:contents;}
@media (max-width:900px){ .account-wrap{grid-template-columns:minmax(0,1fr); padding:20px 20px 60px;} }

.acc-sidebar{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:24px; position:sticky; top:88px; min-width:0;}
@media (max-width:900px){ .acc-sidebar{position:relative; top:0; padding:18px;} }
.acc-profile{display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:16px; border-bottom:1px solid var(--line);}
.acc-avatar{width:52px; height:52px; border-radius:50%; background:var(--green); color:#fff; font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.acc-profile .name{font-size:14.5px; font-weight:800;}
.acc-profile .since{font-size:11px; color:var(--ink-soft); margin-top:2px;}

.acc-nav{display:flex; flex-direction:column; gap:4px;}
.acc-nav-btn{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; background:none; border:none; text-align:left; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:all .2s ease; width:100%; text-decoration:none;}
.acc-nav-btn svg{width:18px; height:18px; flex-shrink:0;}
.acc-nav-btn:hover{background:var(--green-soft); color:var(--green);}
.acc-nav-btn.active{background:var(--ink); color:#fff;}
.acc-nav-btn.logout{margin-top:12px; padding-top:14px; border-top:1px solid var(--line); border-radius:0; color:var(--red);}
.acc-nav-btn.logout:hover{background:var(--red-soft); color:var(--red);}
@media (max-width:900px){
  .acc-nav{flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px;}
  .acc-nav-btn{flex-direction:column; gap:5px; flex-shrink:0; width:auto; padding:10px 14px; font-size:11px; text-align:center; border-radius:10px;}
  .acc-nav-btn svg{width:20px; height:20px;}
  .acc-nav-btn.logout{margin-top:0; padding-top:10px; border-top:none; border-left:1px solid var(--line); border-radius:10px;}
}

.acc-panel-head{margin-bottom:24px;}
.acc-panel-head h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(24px,3vw,30px);}
.acc-panel-head p{font-size:13.5px; color:var(--ink-soft); margin-top:6px;}

.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
@media (max-width:700px){ .stat-grid{grid-template-columns:1fr 1fr;} }
.stat-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:14px; padding:20px;}
.stat-card .stat-icon{width:38px; height:38px; border-radius:10px; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.stat-card .stat-icon svg{width:19px; height:19px; color:var(--green);}
.stat-card .num{font-family:'Cormorant Garamond', serif; font-size:28px; font-weight:700;}
.stat-card .label{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

.dash-section{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:20px;}
.dash-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:8px;}
.dash-section-head h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px;}
.dash-section-head a{font-size:12.5px; font-weight:700; color:var(--green); text-decoration:none;}

.quick-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:700px){ .quick-actions{grid-template-columns:1fr;} }
.quick-action{display:flex; align-items:center; gap:12px; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:16px; text-decoration:none; color:var(--ink); transition:all .2s ease;}
.quick-action:hover{border-color:var(--green); transform:translateY(-2px);}
.quick-action .ic{width:38px; height:38px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.quick-action .ic svg{width:18px; height:18px; color:var(--green);}
.quick-action b{font-size:13px; display:block;}
.quick-action span{font-size:11px; color:var(--ink-soft);}

.order-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:14px;}
.order-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.order-id{font-size:13.5px; font-weight:800;}
.order-date{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.order-status{font-size:11px; font-weight:800; padding:5px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap;}
.order-status.delivered{background:var(--green-soft); color:var(--green);}
.order-status.processing{background:var(--line); color:var(--ink-soft);}
.order-status.cancelled{background:var(--red-soft); color:var(--red);}
.order-items{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.order-item-thumb{display:flex; align-items:center; gap:10px; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:8px 12px;}
.order-item-thumb img{width:32px; height:32px; object-fit:contain; background:#fff; border-radius:4px;}
.order-item-thumb span{font-size:11.5px; font-weight:600;}
.order-card-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.order-total{font-size:14px; font-weight:800;}
.order-actions{display:flex; gap:10px; flex-wrap:wrap;}

.addr-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .addr-grid{grid-template-columns:1fr;} }
.addr-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:14px; padding:20px; position:relative;}
.addr-tag{display:inline-block; background:var(--green-soft); color:var(--green); font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:12px; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.03em;}
.addr-card p{font-size:13px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; overflow-wrap:break-word; word-break:break-word;}
.addr-actions{display:flex; gap:10px;}

/* Account Details / Edit Address form cards — reuse WooCommerce's own real
   form-row markup exactly like the Checkout page does, scoped under
   .form-card so it never collides with the site's OTHER unrelated
   .form-row (a plain 2-column grid wrapper used on the Contact page). */
.form-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:20px;}
@media (max-width:560px){ .form-card{padding:20px;} }
.form-card h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px; margin-bottom:18px;}
.form-card::after{content:""; display:table; clear:both;}
.form-card .required{color:var(--red); text-decoration:none;}
.form-card p.form-row{display:block; margin-bottom:14px;}
.form-card p.form-row-first, .form-card p.form-row-last{width:48%;}
.form-card p.form-row-first{float:left;}
.form-card p.form-row-last{float:right;}
.form-card p.form-row-wide{clear:both; width:100%;}
@media (max-width:480px){ .form-card p.form-row-first, .form-card p.form-row-last{width:100%; float:none;} }
.form-card p.form-row label{display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.form-card p.form-row input.input-text{border:1px solid var(--line); border-radius:6px; padding:12px 13px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink); width:100%;}
.form-card p.form-row input.input-text:focus{outline:none; border-color:var(--green);}
.form-card .btn-ghost{vertical-align:middle;}

/* Login / Register (logged-out My Account view — new design, not in the
   original mockup, matching the same visual language as Checkout/Lost
   Password) */
.login-grid{max-width:900px; margin:40px auto 80px; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media (max-width:700px){ .login-grid{grid-template-columns:1fr; margin:28px auto 56px;} }
.login-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:28px;}
@media (max-width:560px){ .login-card{padding:20px;} }
.login-card h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:22px;}
.login-sub{font-size:12.5px; color:var(--ink-soft); margin-top:8px; margin-bottom:20px; line-height:1.6;}
.login-card .form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.login-card .form-field label{font-size:12px; font-weight:700; color:var(--ink);}
.login-card .form-field input.input-text{border:1px solid var(--line); border-radius:6px; padding:12px 13px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink); width:100%;}
.login-card .form-field input.input-text:focus{outline:none; border-color:var(--green);}
.login-remember{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; cursor:pointer;}
.login-card .btn-primary{width:100%; text-align:center;}
.login-lost{text-align:center; margin-top:16px;}
.login-lost a{font-size:12.5px; font-weight:700; color:var(--green); text-decoration:none;}

/* ============ LOST PASSWORD ============ */
.lp-wrap{max-width:440px; margin:0 auto; padding:64px 24px 80px;}
@media (max-width:560px){ .lp-wrap{padding:44px 20px 60px;} }
.lp-wrap .success-icon{width:60px; height:60px;}
.lp-wrap .success-icon svg{width:28px; height:28px;}
.lp-icon{width:60px; height:60px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 22px;}
.lp-icon svg{width:28px; height:28px; color:var(--green);}
.lp-head{text-align:center; margin-bottom:28px;}
.lp-head h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(24px,3.4vw,30px);}
.lp-head p{margin-top:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;}
.lp-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:30px; min-width:0;}
@media (max-width:560px){ .lp-card{padding:22px;} }
.lp-card .form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.lp-card .form-field label{font-size:12px; font-weight:700;}
.lp-card .form-field input.input-text{border:1px solid var(--line); border-radius:6px; padding:12px 13px; font-size:13.5px; font-family:inherit; background:#fff; width:100%; min-width:0;}
.lp-card .form-field input.input-text:focus{outline:none; border-color:var(--green);}
.lp-card .btn-primary{width:100%; text-align:center;}
.lp-back{display:block; text-align:center; margin-top:22px; font-size:12.5px; font-weight:700; color:var(--green); text-decoration:none;}
.lp-email-highlight{font-weight:800; color:var(--ink);}
.pw-strength{margin-top:8px; display:flex; gap:4px;}
.pw-strength-bar{height:4px; flex:1; border-radius:2px; background:var(--line); transition:background .2s ease;}
.pw-strength-label{font-size:11px; color:var(--ink-soft); margin-top:6px;}

/* ============ ORDER PAY (retry / pay-for-order) PAGE ============
   Reuses .order-number-box, .detail-card, .oi-row, .sum-row(.total),
   .eyebrow and .btn-primary from Checkout/Order Confirmation. The
   .pay-option card is the same visual design as Checkout's own, but scoped
   under .pay-wrap here (rather than .checkout-layout) since this page uses
   a single centered column, not the two-column checkout grid. */
.pay-wrap{max-width:600px; margin:0 auto; padding:44px 20px 70px;}
@media (max-width:560px){ .pay-wrap{padding:32px 16px 50px;} }

.pay-status{display:flex; align-items:center; gap:10px; background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:10px; padding:14px 16px; margin-bottom:28px;}
.pay-status svg{width:18px; height:18px; color:var(--amber-text); flex-shrink:0;}
.pay-status span{font-size:13px; font-weight:700; color:var(--ink);}

.pay-hero{text-align:center; margin-bottom:28px;}
.pay-hero h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(24px,3.6vw,30px);}
.pay-hero p{margin-top:8px; font-size:13.5px; color:var(--ink-soft);}

.pay-wrap .pay-options{display:flex; flex-direction:column; gap:10px;}
.pay-wrap .pay-option{border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:all .2s ease;}
.pay-wrap .pay-option.selected{border-color:var(--green); background:var(--green-soft);}
.pay-wrap .pay-option:has(input:checked){border-color:var(--green); background:var(--green-soft);}
.pay-wrap .pay-option input{accent-color:var(--green); flex-shrink:0;}
.pay-wrap .pay-option .ic{width:34px; height:34px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pay-wrap .pay-option .ic svg{width:18px; height:18px; color:var(--green);}
.pay-wrap .pay-option-info{flex:1; min-width:0;}
.pay-wrap .pay-option-info b{font-size:13px; display:block;}
.pay-wrap .pay-option-info span{font-size:11.5px; color:var(--ink-soft);}

.pay-footer-note{text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:16px;}
.pay-footer-note a{color:var(--green); font-weight:700; text-decoration:none;}

/* ============ FAILED PAYMENT (order-received, status = failed) ============
   Renders on the same Order Confirmation URL/chrome as the success view —
   see the $order->has_status('failed') branch at the top of thankyou.php.
   Reuses .order-number-box, .detail-card and .btn-primary/.btn-ghost. */
.fail-wrap{max-width:600px; margin:0 auto; padding:60px 24px 20px; text-align:center;}
@media (max-width:560px){ .fail-wrap{padding:40px 20px 10px;} }
.fail-wrap .eyebrow{color:var(--red);}
.fail-icon{width:76px; height:76px; border-radius:50%; background:var(--red-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.fail-icon svg{width:36px; height:36px; color:var(--red);}
.fail-wrap h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(26px,4vw,34px); line-height:1.15;}
.fail-wrap p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.7;}

.fail-details{max-width:600px; margin:32px auto 0; padding:0 24px 60px;}

.reason-box{background:var(--red-soft); border:1px solid var(--red); border-radius:10px; padding:14px 16px; display:flex; gap:10px; align-items:flex-start;}
.reason-box svg{width:17px; height:17px; color:var(--red); flex-shrink:0; margin-top:1px;}
.reason-box b{font-size:13px; display:block;}
.reason-box span{font-size:12.5px; color:var(--ink-soft);}

.common-reasons{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.reason-item{display:flex; gap:12px; align-items:flex-start;}
.reason-item .num{width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--ink-soft); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.reason-item p{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

.fail-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px;}

.fail-note{background:var(--green-soft); border:1px solid var(--green); border-radius:10px; padding:14px 16px; display:flex; gap:10px; align-items:flex-start; margin-top:20px;}
.fail-note svg{width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:1px;}
.fail-note span{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

.fail-help{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:28px;}
.fail-help a{color:var(--green); font-weight:700; text-decoration:none;}

/* ============ TRACK ORDER PAGE ============
   Standard site-wide header/footer + breadcrumb (same as About/Contact/
   Product Authenticity). Reuses .form-row/.form-field, .btn-primary,
   .detail-card and .oi-row from Checkout/Order Pay/thankyou. */
.track-hero{max-width:700px; margin:0 auto; padding:44px 32px 8px; text-align:center;}
.track-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(30px,4.2vw,44px); line-height:1.1; margin-top:14px;}
.track-hero p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.7;}

.track-form-card{max-width:600px; margin:32px auto 0; background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:32px; min-width:0;}
@media (max-width:560px){ .track-form-card{padding:22px; margin-left:20px; margin-right:20px;} }
.track-form-card .form-row{margin-bottom:16px;}
.track-form-card .btn-primary{width:100%; text-align:center; margin-top:6px;}

/* v1.5.4 fix: Cancel Order's lookup card used the generic, unconstrained
   .form-card class (meant for full-width contexts like the Checkout login
   box or My Account's grid column) with nothing else on the page giving it
   a max-width — so its Order ID / Email-or-Phone fields stretched edge-to-
   edge across the whole screen. Given its own class here, matching Track
   Order's already-correct .track-form-card sizing exactly. */
.cancel-form-card{max-width:600px; margin:32px auto 0; background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:32px; min-width:0;}
@media (max-width:560px){ .cancel-form-card{padding:22px; margin-left:20px; margin-right:20px;} }
.cancel-form-card .form-row{margin-bottom:16px;}
.cancel-form-card .btn-primary{width:100%; text-align:center; margin-top:6px;}
.track-form-note{font-size:11.5px; color:var(--ink-soft); margin-top:14px; text-align:center;}

.track-result{max-width:800px; margin:40px auto 0; padding:0 32px;}
.result-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:24px 28px; margin-bottom:24px;}
.result-head .order-id{font-size:16px; font-weight:800;}
.result-head .order-date{font-size:12px; color:var(--ink-soft); margin-top:4px;}
.result-status-badge{background:var(--green-soft); color:var(--green); font-size:11.5px; font-weight:800; padding:6px 16px; border-radius:20px; text-transform:uppercase; letter-spacing:0.03em;}

.timeline{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:32px 28px; margin-bottom:24px;}
@media (max-width:560px){ .timeline{padding:24px 18px;} }
.timeline-row{display:flex; gap:16px;}
.timeline-marker{display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
.timeline-dot{width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; font-weight:800;}
.timeline-dot svg{width:14px; height:14px;}
.timeline-dot.pending{background:var(--line); color:var(--ink-soft);}
.timeline-line{width:2px; flex:1; background:var(--green); min-height:36px;}
.timeline-line.pending{background:var(--line);}
.timeline-item{padding-bottom:28px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item b{font-size:14px; display:block;}
.timeline-item .time{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.timeline-item p{font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.6;}
.timeline-item.pending b{color:var(--ink-soft);}

.order-items-box{background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:22px 24px;}
.order-items-box h4{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:17px; margin-bottom:16px;}

.track-help{text-align:center; margin-top:28px; font-size:12.5px; color:var(--ink-soft);}
.track-help a{color:var(--green); font-weight:700; text-decoration:none;}

/* ============ CANCEL ORDER PAGE ============
   Reuses .form-card/.form-row/.form-field, .detail-card, .oi-row and
   .status-badge-style badge from Track Order. .btn-danger already exists
   site-wide as a SMALL outline button for a different (not yet built)
   context, so the full-width filled danger button this page's mockup
   calls for is scoped under .cancel-result rather than redefined globally. */
.cancel-hero{max-width:700px; margin:0 auto; padding:44px 32px 8px; text-align:center;}
.cancel-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(30px,4.2vw,44px); line-height:1.1; margin-top:14px;}
.cancel-hero p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.7;}

.cancel-result{max-width:700px; margin:40px auto 0; padding:0 32px 70px;}
.cancel-result .status-badge{font-size:11.5px; font-weight:800; padding:6px 16px; border-radius:20px; text-transform:uppercase; letter-spacing:0.03em; background:var(--amber-bg); color:var(--amber-text);}
.cancel-result .btn-danger{background:var(--red); border-color:var(--red); color:#fff; padding:14px 30px; border-radius:2px; font-size:13.5px; font-weight:700; letter-spacing:0.03em; width:100%; text-align:center; margin-top:6px;}
.cancel-result .btn-danger:hover{background:#9c2f21; border-color:#9c2f21; color:#fff;}

.eligibility-box{border-radius:12px; padding:18px 20px; margin-bottom:20px; display:flex; gap:12px; align-items:flex-start;}
.eligibility-box.ok{background:var(--green-soft); border:1px solid var(--green);}
.eligibility-box.no{background:var(--red-soft); border:1px solid var(--red);}
.eligibility-box svg{width:20px; height:20px; flex-shrink:0; margin-top:1px;}
.eligibility-box.ok svg{color:var(--green);}
.eligibility-box.no svg{color:var(--red);}
.eligibility-box b{font-size:14px; display:block; margin-bottom:4px;}
.eligibility-box p{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.eligibility-box a{color:var(--green); font-weight:700; text-decoration:none;}

.warning-note{display:flex; gap:10px; align-items:flex-start; background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:10px; padding:14px 16px; margin-bottom:18px; font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.warning-note svg{width:16px; height:16px; color:var(--amber-text); flex-shrink:0; margin-top:1px;}

.cancel-success{text-align:center; padding:20px 0;}
.cancel-success .ic{width:64px; height:64px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.cancel-success .ic svg{width:32px; height:32px; color:var(--green);}
.cancel-success h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:20px; margin-bottom:8px;}
.cancel-success p{font-size:13px; color:var(--ink-soft); line-height:1.6;}

/* ===========================================================================
   1.8.0 — Shared status colours, warning notices, delivery availability
   ===========================================================================
   One meaning per colour, used on every surface that shows an order status:
   Track Order, My Account → My Orders, the confirmation page and email
   banners. Green = progressing or done, red = stopped, amber = needs
   attention, grey = closed/neutral. Previously each page picked its own, so a
   cancelled order could read blue in one place and red in another.
   ------------------------------------------------------------------------ */

:root{
  --ok:#1B7F4B;        --ok-soft:#E4F4EB;
  --warn:#9A6400;      --warn-soft:#FDF2DD;
  --danger:#B3261E;    --danger-soft:#FBE9E7;
  --neutral:#4A5568;   --neutral-soft:#EEF1F5;
}

.status-badge{display:inline-block; padding:5px 12px; border-radius:2px; font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; white-space:nowrap;}
.status-badge.status-success{background:var(--ok-soft); color:var(--ok);}
.status-badge.status-info{background:var(--green-soft); color:var(--green);}
.status-badge.status-warning{background:var(--warn-soft); color:var(--warn);}
.status-badge.status-danger{background:var(--danger-soft); color:var(--danger);}
.status-badge.status-neutral{background:var(--neutral-soft); color:var(--neutral);}

/* Legal / compliance warnings — the "administrative office and warehouse"
   line and anything of that kind. Deliberately set apart from body copy so it
   reads as a condition of doing business, not as decoration. */
.notice-warning{
  border-left:3px solid #E0A9A3;
  background:#FDF5F4;
  color:#8A4038;
  padding:13px 16px;
  border-radius:2px;
  font-size:13px;
  line-height:1.7;
  margin:18px 0;
  font-weight:500;
}

/* Checkout delivery availability */
.pg-pincode-notice{
  border-radius:2px; padding:13px 16px; font-size:13px; line-height:1.65;
  font-weight:600; margin:0 0 18px; border-left:3px solid var(--neutral);
  background:var(--neutral-soft); color:var(--neutral);
}
.pg-pincode-notice.is-available{border-left-color:var(--ok); background:var(--ok-soft); color:var(--ok);}
.pg-pincode-notice.is-limited{border-left-color:var(--warn); background:var(--warn-soft); color:var(--warn);}
.pg-pincode-notice.is-unavailable{border-left-color:var(--danger); background:var(--danger-soft); color:#7A1A15;}

/* ===========================================================================
   1.8.0 — Mobile layout pass (max-width:600px only)
   ===========================================================================
   Phones were showing content squeezed into the middle with dead space down
   both edges. Two causes, both handled here:

   1. Section containers keep their desktop 32px side padding on a 360px
      screen — 64px of a 360px viewport, ~18%, spent on nothing.
   2. Several grids are written as INLINE styles from inc/product-content.php
      ("grid-template-columns:repeat(3,1fr); max-width:640px; margin:0 auto"),
      and an inline style beats a stylesheet rule. On a phone that produced
      three columns crammed into 640px of centred content. Those need
      !important to override — the same trick the existing
      .steps-photo-grid rule already had to use.

   Scoped to 600px so tablets (768px and up) and desktop are untouched.
   ------------------------------------------------------------------------ */

@media (max-width:600px){

  /* --- Global containers: reclaim the side gutters --- */
  .wrap,
  .breadcrumb,
  .legal-head,
  .legal-layout,
  .draft-notice,
  .contact-main,
  .filter-bar,
  .shop-grid,
  .cart-hero,
  .cart-layout,
  .checkout-layout,
  .account-wrap,
  .certs,
  .single-product .product-main,
  .single-product .info-cards,
  .single-product ul.woocommerce-info{
    padding-left:16px !important;
    padding-right:16px !important;
    max-width:100% !important;
  }

  .wrap[style]{max-width:100% !important; padding-left:16px !important; padding-right:16px !important;}

  /* Anything centred with a hard max-width should simply fill the phone. */
  .shop-grid,
  .also-grid,
  .cart-empty-state,
  .track-form-card,
  .cancel-form-card,
  .login-grid,
  .lp-card,
  .form-card,
  .detail-card{max-width:100% !important;}

  /* --- Inline-styled product content grids (see note above) --- */
  .ing-grid,
  .results-grid,
  .people-grid,
  .label-grid,
  .manuf-grid,
  .channel-grid,
  .verify-grid,
  .values-grid,
  .range-grid,
  .quick-grid,
  .elig-grid,
  .info-grid-2,
  .quick-actions,
  .addr-grid{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Two-up is still comfortable for small tiles at 360px. */
  .certs{grid-template-columns:repeat(2,1fr) !important;}
  .single-product .steps-photo-grid{grid-template-columns:repeat(2,1fr) !important;}

  /* --- Type scale: desktop display sizes overflow a phone --- */
  h1{font-size:30px !important; line-height:1.15 !important;}
  h2{font-size:24px !important; line-height:1.2 !important;}
  h3{font-size:18px !important;}
  .legal-head h1{font-size:30px !important;}
  .legal-content h2{font-size:21px !important;}
  .legal-content p,
  .legal-content li{font-size:14.5px !important; line-height:1.75 !important;}

  /* --- Cards: trim padding so the content, not the frame, gets the width --- */
  .detail-card,
  .form-card,
  .login-card,
  .lp-card,
  .contact-form-card,
  .grievance-box,
  .report-box,
  .cart-summary,
  .acc-sidebar,
  .checkout-layout .form-section{padding:18px 16px !important;}

  .timeline{padding:20px 14px !important;}

  /* --- Tables scroll instead of squeezing --- */
  .shop_table,
  .woocommerce-table,
  .order-details-table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

  /* --- Buttons: full width is easier to hit, and stops mid-line wrapping --- */
  .btn-primary,
  .btn-ghost{width:100%; text-align:center;}
  .btn-primary.btn-sm,
  .btn-ghost.btn-sm,
  .status-badge{width:auto;}

  /* --- Address / summary rows stack rather than collide --- */
  .saved-address-card{flex-direction:column; align-items:flex-start; gap:10px;}
  .saved-address-card .btn-ghost{margin-left:0 !important;}
  .result-head{flex-direction:column; align-items:flex-start; gap:10px;}

  /* --- Footer --- */
  .footer-grid{grid-template-columns:1fr !important; gap:26px !important;}
  .footer-bottom{flex-direction:column; align-items:center; text-align:center;}
  .footer-certs{gap:20px;}

  /* --- Checkout / account chrome --- */
  .checkout-header-inner{padding-left:16px; padding-right:16px;}
  .progress-bar{padding-left:16px; padding-right:16px;}
  .acc-panel-head h1{font-size:26px !important;}
}

/* Very small phones (320–360px) need one more notch of breathing room. */
@media (max-width:380px){
  .wrap,
  .breadcrumb,
  .legal-layout,
  .shop-grid,
  .cart-layout,
  .checkout-layout,
  .account-wrap{padding-left:12px !important; padding-right:12px !important;}
  h1{font-size:26px !important;}
  .certs{grid-template-columns:repeat(2,1fr) !important; gap:14px 10px !important;}
}

/* Order status pills in My Account / order cards now use the same tone
   classes as .status-badge (see pahalgiri_order_status_style). The older
   .delivered / .cancelled / .processing classes are kept below so any markup
   still using them doesn't lose its styling. */
.order-status.status-success{background:var(--ok-soft); color:var(--ok);}
.order-status.status-info{background:var(--green-soft); color:var(--green);}
.order-status.status-warning{background:var(--warn-soft); color:var(--warn);}
.order-status.status-danger{background:var(--danger-soft); color:var(--danger);}
.order-status.status-neutral{background:var(--neutral-soft); color:var(--neutral);}

/* Inline variant of the compliance warning, for the short notes that sit
   inside a contact block or the site footer rather than in body copy. */
.note.note-warning{color:#A5564D; font-weight:600;}
footer .note.note-warning{color:#D8A7A1;}


/* Homepage product photos: shorter on small screens so the copy stays in view. */
@media (max-width:900px){ .p-img img{height:340px;} }
@media (max-width:600px){ .p-img img{height:280px;} }

/* ---------------------------------------------------------------------------
   1.9.0 — Key ingredient cards now carry a short explanation as well as the
   one-line benefit. The benefit stays the bold takeaway; the description sits
   under a hairline rule in smaller, left-aligned text, because a paragraph of
   centred body copy is hard to read once it runs past two lines.
   Cards stretch to equal height so a longer description doesn't leave its
   neighbours looking clipped.
--------------------------------------------------------------------------- */
.ing-grid{align-items:stretch;}
.ing-card{display:flex; flex-direction:column;}
.ing-card .ing-benefit{font-size:12px; font-weight:700; color:var(--green); margin-top:6px; line-height:1.5;}
.ing-card .ing-desc{
  font-size:12.5px; color:var(--ink-soft); line-height:1.65; text-align:left;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}

@media (max-width:600px){
  .ing-card{padding:20px 16px;}
  .ing-card img{height:64px; width:64px; margin-bottom:10px;}
  .ing-card .ing-desc{font-size:12.5px; line-height:1.7;}
  .single-product .ing-card img{height:64px; width:64px;}
}

/* Registration numbers in the footer bottom bar — required to be shown, but
   deliberately quiet so they don't compete with the legal links above. */
.footer-reg{font-size:11.5px; color:rgba(239,239,236,0.5); letter-spacing:0.02em;}
@media (max-width:600px){ #manufacturing .info-grid-2{grid-template-columns:1fr !important;} }

/* Optional-field hint next to a label — used on Last Name in the account and
   registration forms, so "optional" is visible before the customer wonders
   why the form won't save. */
.optional{font-size:11.5px; font-weight:500; color:var(--ink-soft); letter-spacing:0;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:600px){ .form-row-2{grid-template-columns:1fr !important;} }

/* Long-form product description (1.14.0) — the copy written in WooCommerce,
   rendered low on the product page. Reading measure kept near 70 characters;
   headings use the same serif as the rest of the site. */
.product-longform{color:var(--ink-soft); font-size:15.5px; line-height:1.8;}
.product-longform h2{font-size:24px; margin:30px 0 12px;}
.product-longform h3{font-family:var(--serif); font-size:20px; color:var(--ink); margin:26px 0 10px;}
.product-longform h4{font-size:15px; font-weight:800; color:var(--ink); margin:20px 0 8px;}
.product-longform p{margin:0 0 14px;}
.product-longform ul,.product-longform ol{margin:0 0 16px; padding-left:20px;}
.product-longform li{margin-bottom:8px;}
.product-longform strong{color:var(--ink); font-weight:700;}
.product-desc p{margin:0 0 10px;}
.product-desc p:last-child{margin-bottom:0;}
@media (max-width:600px){
  .product-longform{font-size:14.5px;}
  .product-longform h3{font-size:18px;}
}


/* ===========================================================================
   1.17.0 — new components
   =========================================================================== */

/* --- "About this product" photo -------------------------------------------
   The product's own WooCommerce photo, shown at the top of the long-form
   description (see woocommerce/single-product.php). Deliberately capped well
   below the 820px reading column: a product photo blown up to full column
   width pushes the copy below the fold and reads as a second hero rather
   than an illustration of the text under it. */
.longform-photo{
  max-width:340px; margin:0 auto 30px; background:#fff;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.longform-photo img{width:100%; height:auto; display:block;}

/* --- Sign In / Create Account switcher ------------------------------------
   Only one card is ever on screen, so the two-column grid collapses to a
   single centred column at every width. */
.login-grid.auth-switcher{grid-template-columns:minmax(0,1fr); max-width:480px;}
.login-card[hidden]{display:none;}
.auth-switch{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  text-align:center; font-size:12.5px; color:var(--ink-soft);
}
.auth-switch-link{
  color:var(--green); font-weight:800; text-decoration:none; margin-left:4px;
  border-bottom:1px solid transparent;
}
.auth-switch-link:hover{border-bottom-color:var(--green);}

/* --- "We found your earlier orders" note (My Account dashboard) ----------- */
.acc-found-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--green-soft); border:1px solid var(--green); border-radius:12px;
  padding:13px 16px; margin-bottom:20px;
}
.acc-found-note svg{width:17px; height:17px; color:var(--green); flex-shrink:0; margin-top:1px;}
.acc-found-note span{font-size:12.5px; color:var(--ink); line-height:1.6; font-weight:600;}


/* ===========================================================================
   1.17.0 — MOBILE PASS 2 (max-width:600px, plus the shop grid at 620px)
   ===========================================================================
   The 1.8.0 pass fixed the side gutters but left every vertical rhythm at its
   desktop value, so a phone got desktop-sized whitespace on a quarter of the
   width: 76px between sections, 50px under every section heading, 400px-tall
   product photos, one product card per screen. The page was correct but
   enormous — the owner's words: "mobile mode में बहुत बड़ी".

   This block is the size pass. It only ever REDUCES spacing and scales type
   down, and every rule is inside a max-width media query, so desktop and
   tablet render exactly as they did before.
   ------------------------------------------------------------------------ */

/* Shop grid: two cards per row on a phone rather than one.
   A single full-width card meant one product filled the whole screen and the
   range had to be scrolled through blind. Two columns show four products at a
   glance, which is what the 2:3 photo ratio was designed for. */
@media (max-width:620px){
  .shop-grid{grid-template-columns:repeat(2,1fr) !important; max-width:100% !important; gap:12px !important;}
  .p-card-body{padding:12px 12px 14px;}
  .p-card-cat{font-size:9px; margin-bottom:4px;}
  .p-card-body h3{font-size:15px; line-height:1.25; margin-bottom:5px;}
  .p-card-body .desc{font-size:11px; line-height:1.5; margin-bottom:10px;}
  .p-card-price{gap:6px; margin-bottom:10px; flex-wrap:wrap;}
  .p-card-price .now{font-size:15.5px;}
  .p-card-price .old{font-size:11.5px;}
  .p-card-price .save{font-size:9px; padding:2px 6px;}
  .p-card-badge{top:9px; left:9px; font-size:9px; padding:4px 9px;}
  /* Two buttons side by side don't fit a half-width card — stack them. */
  .p-card-actions{flex-direction:column; gap:7px; padding:0 12px 12px;}
  .p-card-actions .btn-ghost,
  .p-card-actions .btn-primary{padding:10px 6px; font-size:11.5px; width:100%;}
}

@media (max-width:600px){

  /* --- Vertical rhythm: the single biggest win on a phone --------------- */
  .section{padding:44px 16px !important;}
  .section > .wrap{padding-left:0 !important; padding-right:0 !important;}
  .section-head{margin-bottom:26px !important;}
  .section-head p{font-size:13.5px; margin-top:10px;}
  .eyebrow{font-size:10px;}

  /* --- Type scale ------------------------------------------------------- */
  h1{font-size:27px !important;}
  h2{font-size:23px !important;}
  .section-head h2{font-size:23px !important;}

  /* --- Page heads (About / Contact / Shop / Legal / Authenticity) -------- */
  .about-hero,
  .contact-hero,
  .shop-hero,
  .auth-hero{padding:26px 16px 4px !important;}
  .about-hero p,
  .contact-hero p,
  .shop-hero p,
  .auth-hero p{font-size:13.5px !important; line-height:1.7 !important; margin-top:10px !important;}
  .page-head{padding:8px 16px 20px !important;}
  .legal-head{padding:8px 16px 16px !important;}
  .breadcrumb{padding:12px 16px 0 !important; font-size:11.5px;}
  .filter-bar{padding:18px 16px 4px !important; gap:12px;}
  .filter-tab{padding:7px 14px; font-size:11.5px;}
  .sort-select{padding:7px 12px; font-size:11.5px;}

  /* --- Homepage --------------------------------------------------------- */
  .trust-strip{padding:11px 0;}
  .trust-track{gap:34px;}
  .trust-track span{font-size:10px; gap:7px;}
  .product-row{padding:30px 0 !important; gap:18px !important;}
  .p-img img{height:250px;}
  .p-copy h3{font-size:24px; margin-top:6px;}
  .p-copy .desc{font-size:13.5px; margin-top:10px; line-height:1.65;}
  .ingredient-pills{margin-top:14px; gap:6px;}
  .pill{padding:5px 11px; font-size:11px;}
  .p-cta{margin-top:16px; gap:10px;}
  .result-card .r-label{padding:11px 12px 14px;}
  .ing-card{padding:18px 14px;}
  .ing-card img{height:56px; width:56px; margin-bottom:10px;}
  .ing-card h4{font-size:15.5px;}
  .certs{padding:28px 16px !important; gap:16px 12px !important;}
  .cta-band{padding:46px 18px !important;}
  .cta-band p{font-size:13.5px; margin-top:10px;}
  .cta-band .btn-primary{margin-top:18px;}

  /* --- Buttons: keep the full-width tap target, lose the desktop bulk --- */
  .btn-primary{padding:13px 24px; font-size:12.5px;}
  .btn-ghost{padding:11.5px 22px; font-size:12.5px;}

  /* --- Single product --------------------------------------------------- */
  .single-product .product-main{padding:14px 16px 40px !important; gap:22px !important;}
  .single-product .gallery-main{aspect-ratio:3/4; border-radius:14px; margin-bottom:12px;}
  .single-product .gallery-thumbs{gap:8px;}
  .single-product .gallery-thumb{flex:0 0 58px; height:58px; border-radius:8px;}
  .single-product .product-info h1{font-size:26px !important;}
  .single-product .product-info .subtitle{font-size:12.5px; margin-top:6px;}
  .single-product .price-row{margin-top:14px; gap:9px;}
  .single-product .price-now{font-size:24px;}
  .single-product .price-old{font-size:14px;}
  .single-product .product-desc{margin-top:14px; font-size:13.5px; line-height:1.7;}
  .single-product .benefit-list{margin-top:16px; gap:8px;}
  .single-product .benefit-list li{font-size:12.5px;}
  .single-product .info-box{padding:14px; margin-top:14px; border-radius:10px;}
  .single-product .info-box-label{margin-bottom:11px; padding-bottom:8px;}
  .single-product .whats-included{padding:14px 16px; margin-top:14px;}
  .single-product .buy-row{margin-top:20px; gap:10px;}
  .single-product .buy-row .btn-primary{flex:1; height:46px; padding:0 18px;}
  .single-product .qty-box button{width:34px; height:46px;}
  .single-product .trust-mini{margin-top:20px; padding-top:18px; gap:14px;}
  .single-product .freefrom-badge{padding:6px 11px 6px 8px; font-size:11px;}
  .single-product .info-cards{padding:36px 16px !important; gap:22px !important;}
  .single-product .step-photo-card img{width:74px; height:74px; margin-bottom:9px;}
  .single-product .step-photo-card b{font-size:12.5px;}
  .single-product .step-photo-card p{font-size:11px;}
  .single-product .routine-down-arrow{margin:22px 0;}
  .single-product .routine-closing{margin-top:26px; padding-top:20px;}
  .single-product .label-block{padding:16px 18px;}
  .single-product .pfaq-q{padding:14px 15px; font-size:12.5px;}
  .single-product .pfaq-a p{padding:0 15px 14px; font-size:12.5px;}
  .longform-photo{max-width:230px; margin-bottom:22px; border-radius:14px;}

  /* --- Cart / Checkout --------------------------------------------------- */
  .cart-hero{padding:20px 16px 0 !important;}
  .cart-layout{padding:16px 16px 48px !important; gap:18px !important;}
  .cart-summary{padding:18px 16px !important;}
  .checkout-layout{padding:18px 16px 48px !important; gap:18px !important;}
  .also-like{padding:36px 16px !important;}

  /* --- My Account -------------------------------------------------------- */
  .account-wrap{padding:16px 16px 48px !important; gap:18px !important;}
  .acc-panel-head{margin-bottom:18px;}
  .acc-panel-head h1{font-size:23px !important;}
  .acc-panel-head p{font-size:12.5px; margin-top:4px;}
  .acc-sidebar{padding:14px !important;}
  .acc-profile{padding-bottom:14px; margin-bottom:12px; gap:11px;}

  /* Login / lost password ------------------------------------------------- */
  .lp-wrap{padding:32px 16px 56px !important;}
  .login-grid{margin:20px auto 48px !important;}
  .login-card h2{font-size:20px;}
  .login-sub{margin-bottom:16px;}

  /* --- Footer ------------------------------------------------------------ */
  footer{padding:44px 16px 0 !important;}
  .newsletter{padding:26px 0 !important; gap:16px;}
  .newsletter-text h3{font-size:19px;}
  .footer-grid{padding:30px 0 !important; gap:26px 18px !important;}
  .footer-col h4{margin-bottom:13px;}
  .footer-col a{font-size:13px; margin-bottom:9px;}
  .footer-certs{padding:22px 0 !important; gap:20px !important;}
  .footer-certs img{height:26px;}
  .footer-bottom{padding:16px 0 20px !important;}
}

/* ---------------------------------------------------------------------------
   1.17.0 — My Account: the three counters, and the grey line under the tabs
   ---------------------------------------------------------------------------
   Two things the owner reported on a phone:

   1. A faint grey line appeared inside the account box directly under the
      Dashboard / My Orders / Addresses row. It was never a border — it was
      the horizontal SCROLLBAR of that row (.acc-nav is overflow-x:auto so the
      tabs can be swiped). It carries no meaning and the row is obviously
      swipeable without it, so the scrollbar is hidden on every engine while
      the swiping itself still works.

   2. Total Orders / In Progress / Delivered were full-width cards stacked one
      under another, so three numbers took most of the first screen. They are
      three short counters — they belong side by side, which is also how the
      approved desktop design shows them. Sized down to fit three across a
      360px phone with real gaps between them.
--------------------------------------------------------------------------- */
@media (max-width:900px){
  .acc-nav{padding-bottom:0; scrollbar-width:none; -ms-overflow-style:none;}
  .acc-nav::-webkit-scrollbar{display:none; width:0; height:0;}
}

@media (max-width:700px){
  .stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important; margin-bottom:20px !important; max-width:100% !important;
  }
  .stat-card{padding:12px 8px 13px; border-radius:12px; text-align:center;}
  .stat-card .stat-icon{width:28px; height:28px; border-radius:8px; margin:0 auto 8px;}
  .stat-card .stat-icon svg{width:15px; height:15px;}
  .stat-card .num{font-size:22px; line-height:1.1;}
  .stat-card .label{font-size:10px; margin-top:3px; line-height:1.3;}
}

@media (max-width:360px){
  .stat-card{padding:10px 5px 11px;}
  .stat-card .num{font-size:19px;}
  .stat-card .label{font-size:9px;}
}

/* Very small phones — one more notch down, matching the 380px block above. */
@media (max-width:380px){
  .section{padding:38px 14px !important;}
  h1{font-size:24px !important;}
  h2{font-size:21px !important;}
  .shop-grid{gap:10px !important;}
  .p-card-body h3{font-size:14px;}
  .single-product .product-main{padding:12px 14px 36px !important;}
  footer{padding:38px 14px 0 !important;}
}

/* Containers that carry their own desktop 32px side padding and 56–100px of
   vertical padding, and so were missed by the 1.8.0 gutter list. Same
   treatment as .section above. */
@media (max-width:600px){
  .faq-wrap{padding:0 16px 56px !important;}
  .cat-block{margin-bottom:30px;}
  .faq-q{padding:16px 2px; font-size:14px;}
  .faq-a p{padding:0 2px 16px; font-size:13.5px;}
  .quick-links{padding:40px 16px !important;}
  .quick-card{padding:20px 16px;}
  .grievance-section{padding:40px 16px !important;}
  .contact-main{padding:24px 16px 48px !important; gap:24px !important;}
  .contact-form-card{padding:20px 16px !important;}
  .info-card{padding:16px 16px;}
  .legal-layout{padding:0 16px 56px !important;}
  .not-channel-box{padding:16px 16px;}
}


/* ===========================================================================
   1.17.1 — support-channels note
   ===========================================================================
   Printed by pahalgiri_support_note_html() everywhere contact details appear:
   the footer, the Contact page, every legal page, the CTA bands, the FAQ and
   the order emails. It is a quiet clarification, not a warning, so it reads
   one step below the contact details it sits under — never louder than the
   email address and WhatsApp number it qualifies.
   ------------------------------------------------------------------------ */

/* Light backgrounds (Contact, FAQ, legal pages, Authenticity). */
.support-note{
  font-size:12px; line-height:1.6; color:var(--ink-soft);
  margin-top:14px; margin-bottom:0;
}
.support-note a{color:var(--green); font-weight:700; text-decoration:none; border-bottom:1px solid transparent;}
.support-note a:hover{border-bottom-color:var(--green);}

/* The FAQ card styles every <a> inside it as a solid button — the policy link
   in this note is a plain inline link, so that treatment is undone here. */
.contact-cta .support-note{margin-top:16px;}
.contact-cta .support-note a{
  display:inline; background:none; color:var(--blue); padding:0;
  border-radius:0; font-size:inherit; font-weight:700;
}
.report-box .support-note{margin-top:18px; font-size:12px;}
.grievance-box .support-note{margin-top:16px;}

/* Dark CTA band (gradient) and dark footer. */
.cta-support-note{
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,0.75);
  margin-top:14px; max-width:600px; margin-left:auto; margin-right:auto;
}
.cta-support-note a{color:#fff; font-weight:700; text-decoration:underline;}

.footer-support-note{
  font-size:11.5px; line-height:1.6; color:var(--cream-text-soft);
  margin-top:6px; padding-top:14px; border-top:1px solid var(--line-dark);
}
.footer-support-note a{
  /* .footer-col a is display:block with a bottom margin (it styles the link
     lists in the other footer columns) — this policy link is mid-sentence. */
  display:inline; margin:0; color:var(--footer-heading); font-weight:700; text-decoration:none;
}
.footer-support-note a:hover{text-decoration:underline;}

/* Checkout's slim footer strip — one clause on its own line. */
.checkout-support-note{display:block; margin-top:6px; opacity:0.85;}

@media (max-width:600px){
  .support-note{font-size:11.5px; margin-top:12px;}
  .cta-support-note{font-size:12px; margin-top:12px;}
  .footer-support-note{font-size:11px; padding-top:12px;}
}