/*
Theme Name: Nature's Praan
Theme URI: https://naturespraan.com
Author: Nature's Praan
Description: Custom WooCommerce-ready theme for Nature's Praan Sea Buckthorn Juice, built from the brand's original landing page design.
Version: 1.1.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: natures-praan
License: Proprietary — for Nature's Praan use only.
*/

  :root{
    --umber:#2B1200;
    --umber-2:#4A1D08;
    --bronze:#C97833;
    --bronze-deep:#7A3009;
    --gold:#F0A428;
    --berry:#E2672A;
    --cream:#FBF3E7;
    --cream-2:#F3E6D3;
    --pine:#56684A;
    --ink:#2B1200;
    --paper:#FFFDF9;
    --line: rgba(43,18,0,0.12);
    --shadow: 0 20px 60px rgba(43,18,0,0.18);
    --radius: 22px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Manrope', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.05;
    margin:0;
    letter-spacing:-0.01em;
  }
  .italic{font-style:italic; font-weight:500;}
  p{line-height:1.7; margin:0;}
  a{text-decoration:none; color:inherit;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:12.5px;
    font-weight:700;
    color:var(--bronze-deep);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:22px; height:1px;
    background:var(--bronze);
    display:inline-block;
  }
  .eyebrow.on-dark{color:var(--gold);}
  .eyebrow.on-dark::before{background:var(--gold);}
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:16px 30px;
    border-radius:100px;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.01em;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, color .3s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--berry); color:#fff; box-shadow:0 12px 28px rgba(226,103,42,0.35);}
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(226,103,42,0.45);}
  .btn-ghost{background:transparent; color:var(--cream); border-color:rgba(251,243,231,0.4);}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08); transform:translateY(-3px);}
  .btn-dark{background:var(--umber); color:var(--cream);}
  .btn-dark:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(42,22,8,0.3);}
  .btn-outline{background:transparent; border-color:var(--umber); color:var(--umber);}
  .btn-outline:hover{background:var(--umber); color:var(--cream);}

  /* Wreath ring — signature motif, echoes the berry wreath on the product label */
  .wreath{
    --size:64px;
    width:var(--size); height:var(--size);
    border-radius:50%;
    position:relative;
    flex-shrink:0;
    background:
      repeating-conic-gradient(from 0deg, var(--gold) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 60%, black 100%);
            mask: radial-gradient(circle, transparent 58%, black 60%, black 100%);
  }
  .wreath.small{--size:40px;}
  .wreath-badge{
    position:relative;
    width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
  }
  .wreath-badge .num{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:18px;
    color:var(--umber);
  }

  /* ===== Announcement bar ===== */
  .announce{
    background:linear-gradient(90deg, var(--umber) 0%, #3B2011 50%, var(--umber) 100%);
    color:var(--cream);
    text-align:center;
    font-size:12.5px;
    letter-spacing:0.06em;
    padding:9px 16px;
    font-weight:600;
  }
  .announce span{opacity:0.55; margin:0 10px;}

  /* ===== Nav ===== */
  header.nav{
    position:sticky; top:0; z-index:100;
    background:rgba(251,243,231,0.85);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .navrow{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    max-width:1240px; margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:20px;
  }
  .logo .mark{
    width:34px;height:34px;border-radius:50%;
    background:conic-gradient(from 180deg, var(--gold), var(--berry), var(--gold));
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-size:14px;
  }
  nav.links{display:flex; gap:34px; font-size:14.5px; font-weight:600;}
  nav.links a{position:relative; padding:4px 0; color:var(--umber);}
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--berry);
    transition:width .3s ease;
  }
  nav.links a:hover::after{width:100%;}
  .nav-cta{display:flex; gap:12px; align-items:center;}
  .navbtn{padding:11px 22px; font-size:13.5px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:24px; height:2px; background:var(--umber);}

  /* ===== Hero ===== */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex; align-items:flex-end;
    overflow:hidden;
    background:var(--umber);
  }
  .hero-bg{
    position:absolute; inset:0;
    background-size:cover; background-position:center 65%;
    transform:scale(1.06);
    animation:heroZoom 18s ease-in-out infinite alternate;
  }
  @keyframes heroZoom{from{transform:scale(1.06);} to{transform:scale(1);}}
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,10,3,0.15) 0%, rgba(20,10,3,0.15) 30%, rgba(20,10,3,0.78) 88%, rgba(20,10,3,0.92) 100%);
  }
  .hero-inner{
    position:relative; z-index:2;
    width:100%;
    padding:0 32px 76px;
    max-width:1240px; margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    align-items:end;
  }
  .hero-text .eyebrow{margin-bottom:22px;}
  .hero-text h1{
    color:#fff;
    font-size:clamp(40px, 5.6vw, 76px);
    max-width:720px;
  }
  .hero-text h1 em{
    font-style:italic; font-weight:500; color:var(--gold);
  }
  .hero-text p{
    color:rgba(251,243,231,0.86);
    font-size:17.5px;
    max-width:520px;
    margin-top:22px;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .hero-chips{
    display:flex; flex-wrap:wrap; gap:10px 22px;
    margin-top:38px;
    padding-top:26px;
    border-top:1px solid rgba(251,243,231,0.22);
  }
  .hero-chips .chip{
    font-size:13px; font-weight:600; color:rgba(251,243,231,0.85);
    display:flex; align-items:center; gap:7px;
  }
  .hero-chips .chip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}

  .hero-card{
    background:linear-gradient(155deg, #FFFDF9 0%, var(--cream) 55%, #F4D6A8 100%);
    border-radius:var(--radius);
    padding:26px;
    box-shadow:var(--shadow);
    justify-self:end;
    width:100%;
    max-width:340px;
  }
  .hero-card .tag{
    display:inline-block; background:var(--umber); color:var(--gold);
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px; margin-bottom:14px;
  }
  .hero-card h3{font-size:20px; margin-bottom:6px;}
  .hero-card .price-row{display:flex; align-items:baseline; gap:8px; margin:14px 0 18px;}
  .hero-card .price{font-family:'Fraunces',serif; font-size:28px; font-weight:600;}
  .hero-card .was{font-size:14px; text-decoration:line-through; opacity:0.45;}
  .hero-card .save{font-size:12.5px; font-weight:700; color:var(--pine); background:rgba(62,92,63,0.1); padding:3px 9px; border-radius:100px;}

  /* ===== Section frame ===== */
  section{padding:110px 0;}
  section.cream{background:var(--cream);}
  section.paper{background:var(--paper);}
  section.dark{background:var(--umber); color:var(--cream);}
  section.dark h2, section.dark h3{color:#fff;}
  section.dark p{color:rgba(251,243,231,0.78);}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,3.6vw,46px); margin-top:16px;}
  .section-head p{margin-top:18px; font-size:16.5px; color:#5a4635;}
  section.dark .section-head p{color:rgba(251,243,231,0.75);}
  .center{text-align:center; margin-left:auto; margin-right:auto;}

  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
  .reveal.show{opacity:1; transform:translateY(0);}

  /* ===== Intro ===== */
  .intro-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  }
  .intro-grid img{border-radius:var(--radius); box-shadow:var(--shadow);}
  .intro-copy .eyebrow{margin-bottom:18px;}
  .intro-copy h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:20px;}
  .intro-copy p{color:#5a4635; font-size:16.5px; margin-bottom:16px;}
  .intro-stats{
    display:flex; gap:34px; margin-top:32px; padding:26px 30px;
    border-radius:20px;
    background:linear-gradient(120deg, rgba(231,163,62,0.14), rgba(226,103,42,0.08) 60%, rgba(62,92,63,0.08));
    border:1px solid var(--line);
  }
  .intro-stats .stat b{font-family:'Fraunces',serif; font-size:26px; display:block; color:var(--bronze-deep);}
  .intro-stats .stat span{font-size:12.5px; color:#7a6650; text-transform:uppercase; letter-spacing:0.06em;}

  /* ===== Benefits ===== */
  .benefit-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  }
  .benefit-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    padding:34px 28px;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
  }
  .benefit-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(42,22,8,0.1);
    border-color:transparent;
    background:linear-gradient(160deg, #FFFDF9 0%, rgba(231,163,62,0.09) 100%);
  }
  .benefit-icon{
    width:50px; height:50px; border-radius:14px;
    background:linear-gradient(135deg, var(--gold), var(--berry));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
  }
  .benefit-icon svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8;}
  .benefit-card h3{font-size:19px; margin-bottom:10px;}
  .benefit-card p{font-size:14.8px; color:#5a4635;}

  /* ===== Omega section ===== */
  .omega-wrap{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;
  }
  .omega-wrap img{border-radius:var(--radius); box-shadow:var(--shadow);}
  .omega-list{display:flex; flex-direction:column; gap:0;}
  .omega-item{
    display:flex; gap:20px; padding:22px 0;
    border-bottom:1px solid rgba(251,243,231,0.16);
    align-items:flex-start;
  }
  .omega-item:first-child{padding-top:0;}
  .omega-item .wreath-badge{background:linear-gradient(135deg, rgba(231,163,62,0.22), rgba(226,103,42,0.1)); border-radius:50%;}
  .omega-item .wreath-badge .num{color:var(--gold); font-size:15px; font-weight:700;}
  .omega-item h4{font-size:18px; color:#fff; margin-bottom:6px; font-family:'Fraunces',serif; font-weight:600;}
  .omega-item p{font-size:14.5px; color:rgba(251,243,231,0.7);}

  /* ===== Differentiators ===== */
  .diff-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .diff-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;}
  .diff-item{display:flex; align-items:center; gap:12px; font-size:14.8px; font-weight:600; color:#3a2b1c;}
  .diff-item svg{width:18px; height:18px; stroke:var(--pine); stroke-width:2.4; flex-shrink:0;}
  .diff-wrap img{border-radius:var(--radius); box-shadow:var(--shadow);}
  .diff-tagline{font-family:'Fraunces',serif; font-style:italic; font-size:22px; color:var(--bronze-deep); margin:26px 0 30px;}

  /* ===== Origin / timeline ===== */
  .origin-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .origin-copy p{color:rgba(251,243,231,0.78); font-size:16px; margin-bottom:16px;}
  .timeline{margin-top:32px; display:flex; flex-direction:column;}
  .tl-item{display:flex; gap:18px; position:relative; padding-bottom:26px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{
    content:''; position:absolute; left:19px; top:44px; bottom:0; width:1px;
    background:rgba(251,243,231,0.18);
  }
  .tl-item:last-child::before{display:none;}
  .tl-num{
    width:40px;height:40px;border-radius:50%;
    background:rgba(231,163,62,0.14);
    border:1px solid rgba(231,163,62,0.4);
    color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:600; font-size:14px;
    flex-shrink:0;
  }
  .tl-text h4{color:#fff; font-size:16px; font-family:'Manrope'; font-weight:700; margin-bottom:4px;}
  .tl-text p{font-size:13.8px; color:rgba(251,243,231,0.6);}
  .origin-wrap img{border-radius:var(--radius); box-shadow:0 30px 70px rgba(0,0,0,0.5);}

  /* ===== How to use ===== */
  .use-wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
  .use-steps{counter-reset:step;}
  .use-step{
    display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);
  }
  .use-step:first-child{padding-top:0;}
  .use-step .sn{
    font-family:'Fraunces',serif; font-size:26px; color:var(--bronze); opacity:0.5; flex-shrink:0; width:34px;
  }
  .use-step h4{font-size:16.5px; margin-bottom:5px;}
  .use-step p{font-size:14.3px; color:#5a4635;}
  .precaution-box{
    background:linear-gradient(155deg, var(--umber) 0%, var(--bronze-deep) 100%);
    color:var(--cream);
    border-radius:var(--radius); padding:34px;
  }
  .precaution-box h3{color:#fff; font-size:20px; margin-bottom:18px;}
  .precaution-box ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px;}
  .precaution-box li{
    display:flex; gap:12px; font-size:14px; color:rgba(251,243,231,0.82); line-height:1.6;
  }
  .precaution-box li svg{width:16px;height:16px; stroke:var(--gold); flex-shrink:0; margin-top:3px;}

  /* ===== Pack comparison ===== */
  .pack-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
  .pack-card{
    background:var(--paper);
    border-radius:26px;
    overflow:hidden;
    border:1px solid var(--line);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    display:flex; flex-direction:column;
  }
  .pack-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);}
  .pack-card.featured{border-color:var(--berry); position:relative;}
  .pack-card.featured .pack-body{
    background:linear-gradient(165deg, rgba(226,103,42,0.06) 0%, rgba(231,163,62,0.05) 60%, transparent 100%);
  }
  .pack-ribbon{
    position:absolute; top:22px; right:-38px;
    background:var(--berry); color:#fff;
    font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    padding:7px 46px; transform:rotate(40deg);
    z-index:3;
  }
  .pack-img{aspect-ratio:16/9; overflow:hidden; position:relative;}
  .pack-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
  .pack-card:hover .pack-img img{transform:scale(1.05);}
  .pack-body{padding:30px 30px 32px; display:flex; flex-direction:column; gap:14px; flex:1;}
  .pack-body h3{font-size:23px;}
  .pack-body .desc{font-size:14.3px; color:#5a4635;}
  .pack-price-row{display:flex; align-items:baseline; gap:10px; margin-top:4px;}
  .pack-price-row .price{font-family:'Fraunces',serif; font-size:30px; font-weight:600;}
  .pack-price-row .was{font-size:14.5px; text-decoration:line-through; opacity:0.4;}
  .pack-price-row .per{font-size:12.5px; color:#7a6650; margin-left:auto;}
  .pack-save{
    display:inline-flex; align-self:flex-start;
    font-size:12.5px; font-weight:700; color:var(--pine);
    background:rgba(62,92,63,0.1); padding:5px 12px; border-radius:100px;
  }
  .pack-body .btn{margin-top:10px; width:100%;}
  .price-note{font-size:12px; color:#9c8368; text-align:center; margin-top:22px; font-style:italic;}

  /* ===== Quality / What you get ===== */
  .quality-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .quality-wrap img{border-radius:var(--radius); box-shadow:var(--shadow);}
  .quality-list{display:flex; flex-direction:column; gap:16px; margin-top:26px;}
  .quality-list li{
    display:flex; align-items:flex-start; gap:14px;
    font-size:15.5px; font-weight:600; list-style:none; color:#3a2b1c;
  }
  .quality-list li svg{width:20px;height:20px; stroke:var(--berry); stroke-width:2.2; flex-shrink:0; margin-top:1px;}

  /* details table */
  .detail-table{width:100%; border-collapse:collapse; margin-top:8px;}
  .detail-table tr{border-bottom:1px solid var(--line);}
  .detail-table tr:first-child td{padding-top:0;}
  .detail-table td{padding:15px 0; font-size:14.8px;}
  .detail-table td:first-child{color:#7a6650; font-weight:700; width:40%; letter-spacing:0.02em;}
  .detail-table td:last-child{font-weight:600;}

  /* ===== Testimonials ===== */
  .test-note{
    text-align:center; font-size:12.5px; color:#9c8368; font-style:italic; margin-top:-30px; margin-bottom:56px;
  }
  .test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .test-card{
    background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px;
    display:flex; flex-direction:column; gap:16px;
  }
  .stars{display:flex; gap:3px;}
  .stars svg{width:15px; height:15px; fill:var(--gold); stroke:none;}
  .test-card p.quote{font-size:15px; color:#3a2b1c; font-style:italic; line-height:1.7;}
  .test-meta{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line);}
  .test-avatar{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--berry));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
    flex-shrink:0;
  }
  .test-meta .name{font-size:13.8px; font-weight:700;}
  .test-meta .loc{font-size:12.3px; color:#8a7360;}
  .verified{font-size:10.5px; color:var(--pine); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:4px;}
  .verified svg{width:11px;height:11px; stroke:var(--pine); stroke-width:3;}

  /* ===== FAQ ===== */
  .faq-wrap{max-width:820px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 4px; cursor:pointer; gap:20px;
  }
  .faq-q h4{font-size:16.5px; font-weight:700; font-family:'Manrope';}
  .faq-icon{
    width:26px;height:26px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    position:relative;
  }
  .faq-icon::before, .faq-icon::after{
    content:''; position:absolute; background:var(--umber);
  }
  .faq-icon::before{width:10px; height:1.4px;}
  .faq-icon::after{width:1.4px; height:10px; transition:transform .3s ease;}
  .faq-item.open .faq-icon::after{transform:rotate(90deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
  .faq-a p{padding:0 4px 26px; font-size:14.8px; color:#5a4635; max-width:680px;}

  /* ===== Final CTA ===== */
  .cta-final{
    position:relative; border-radius:32px; overflow:hidden;
    background:var(--umber);
    padding:90px 60px;
    text-align:center;
  }
  .cta-final .bg{
    position:absolute; inset:0; background-size:cover; background-position:center 30%;
    opacity:0.5;
  }
  .cta-final .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,22,8,0.5), rgba(20,10,3,0.92));}
  .cta-final-inner{position:relative; z-index:2;}
  .cta-final h2{color:#fff; font-size:clamp(30px,4vw,48px); max-width:680px; margin:20px auto 20px;}
  .cta-final p{color:rgba(251,243,231,0.78); max-width:520px; margin:0 auto 34px; font-size:16px;}
  .cta-btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
  .trust-strip{
    display:flex; justify-content:center; gap:34px; margin-top:44px; flex-wrap:wrap;
  }
  .trust-strip .t-item{font-size:12.5px; color:rgba(251,243,231,0.55); font-weight:600; letter-spacing:0.03em;}

  /* ===== Footer ===== */
  footer{background:linear-gradient(180deg, #341704 0%, #1F0D00 60%, #150900 100%); color:rgba(251,243,231,0.6); padding:70px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(251,243,231,0.1);}
  .footer-brand .logo{color:#fff; margin-bottom:16px;}
  .footer-brand p{font-size:13.8px; line-height:1.7; max-width:280px;}
  footer h5{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:18px; font-family:'Manrope'; font-weight:700;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  footer ul a{font-size:13.8px; transition:color .3s ease;}
  footer ul a:hover{color:var(--gold);}
  .disclaimer{font-size:12px; line-height:1.8; padding-top:26px; opacity:0.65;}
  .bottom-row{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:14px;}

  /* Sticky mobile buy bar */
  .mobile-buybar{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:var(--paper); border-top:1px solid var(--line);
    padding:12px 16px; box-shadow:0 -10px 30px rgba(0,0,0,0.08);
    align-items:center; justify-content:space-between; gap:12px;
  }

  @media (max-width: 980px){
    nav.links, .nav-cta .navbtn.outline-only{display:none;}
    .burger{display:flex;}
    .hero-inner{grid-template-columns:1fr; }
    .hero-card{justify-self:stretch; max-width:none;}
    .intro-grid, .omega-wrap, .diff-wrap, .origin-wrap, .use-wrap, .quality-wrap{grid-template-columns:1fr; gap:36px;}
    .omega-wrap img, .diff-wrap img{order:-1;}
    .benefit-grid{grid-template-columns:1fr 1fr;}
    .pack-grid{grid-template-columns:1fr;}
    .test-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:36px;}
    section{padding:76px 0;}
    .mobile-buybar{display:flex;}
    body{padding-bottom:70px;}
  }
  @media (max-width: 640px){
    .diff-list{grid-template-columns:1fr;}
    .benefit-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .intro-stats{flex-wrap:wrap; gap:22px;}
    .cta-final{padding:60px 24px;}
    .wrap{padding:0 20px;}
  }

  /* ===== Top Marquee Banner ===== */
  .top-banner{
    background:linear-gradient(90deg, var(--bronze-deep), var(--berry), var(--bronze-deep));
    background-size:200% 100%;
    animation:bannerFlow 8s linear infinite;
    color:#fff;
    overflow:hidden;
    position:relative;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  @keyframes bannerFlow{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
  .marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 26s linear infinite;
    padding:11px 0;
  }
  .top-banner:hover .marquee-track{animation-play-state:paused;}
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .marquee-item{
    display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:700; letter-spacing:0.03em;
    padding:0 32px;
    white-space:nowrap;
  }
  .marquee-item svg{width:15px;height:15px; stroke:#fff; fill:none; stroke-width:2; flex-shrink:0;}
  .marquee-item .sep{opacity:0.5; margin-left:32px;}

  /* ===== Global animation keyframes ===== */
  @keyframes floatY{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-16px) rotate(6deg);}
  }
  @keyframes floatSlow{
    0%,100%{transform:translateY(0) translateX(0);}
    50%{transform:translateY(-22px) translateX(10px);}
  }
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 12px 28px rgba(226,103,42,0.35);}
    50%{box-shadow:0 12px 44px rgba(226,103,42,0.65);}
  }
  @keyframes shimmerText{
    0%{background-position:-200% 0;}
    100%{background-position:200% 0;}
  }
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:translateY(0);}
  }
  @keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
  }
  @keyframes popIn{
    0%{opacity:0; transform:scale(0.85);}
    100%{opacity:1; transform:scale(1);}
  }
  @keyframes spinSlow{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

  /* Hero entrance (plays on load, not scroll) */
  .hero-text .eyebrow{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) .1s both;}
  .hero-text h1{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) .25s both;}
  .hero-text > p{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) .4s both;}
  .hero-ctas{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) .55s both;}
  .hero-chips{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) .7s both;}
  .hero-card{animation:popIn 1s cubic-bezier(.2,.8,.2,1) .8s both;}

  /* floating decorative berries in hero */
  .hero .floaters{position:absolute; inset:0; z-index:1; pointer-events:none;}
  .hero .floaters span{
    position:absolute;
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--gold), var(--berry));
    opacity:0.55;
    animation:floatSlow 7s ease-in-out infinite;
  }

  /* Buttons: shine sweep + pulse */
  .btn{position:relative; overflow:hidden;}
  .btn::before{
    content:''; position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .btn:hover::before{left:120%;}
  .btn-primary{animation:pulseGlow 2.8s ease-in-out infinite;}
  .btn:active{transform:scale(0.96) !important;}

  /* Nav logo mark spin on hover */
  .logo .mark{transition:transform .6s ease;}
  .logo:hover .mark{transform:rotate(180deg) scale(1.1);}

  /* Wreath ring gentle rotation */
  .wreath{animation:spinSlow 40s linear infinite;}

  /* Reveal directions + stagger */
  .reveal{transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);}
  .reveal.dir-left{transform:translateX(-46px);}
  .reveal.dir-left.show{transform:translateX(0);}
  .reveal.dir-right{transform:translateX(46px);}
  .reveal.dir-right.show{transform:translateX(0);}
  .reveal.dir-scale{transform:scale(0.92); }
  .reveal.dir-scale.show{transform:scale(1);}
  .benefit-grid .benefit-card:nth-child(1){transition-delay:0s;}
  .benefit-grid .benefit-card:nth-child(2){transition-delay:.08s;}
  .benefit-grid .benefit-card:nth-child(3){transition-delay:.16s;}
  .benefit-grid .benefit-card:nth-child(4){transition-delay:.24s;}
  .benefit-grid .benefit-card:nth-child(5){transition-delay:.32s;}
  .benefit-grid .benefit-card:nth-child(6){transition-delay:.4s;}
  .test-grid .test-card:nth-child(1){transition-delay:0s;}
  .test-grid .test-card:nth-child(2){transition-delay:.12s;}
  .test-grid .test-card:nth-child(3){transition-delay:.24s;}
  .pack-grid .pack-card:nth-child(1){transition-delay:0s;}
  .pack-grid .pack-card:nth-child(2){transition-delay:.15s;}

  /* Extra hover effects */
  .benefit-icon{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  .benefit-card:hover .benefit-icon{transform:rotate(-10deg) scale(1.12);}
  .diff-item{transition:transform .3s ease, color .3s ease; cursor:default;}
  .diff-item:hover{transform:translateX(6px); color:var(--berry);}
  .diff-item svg{transition:transform .3s ease;}
  .diff-item:hover svg{transform:scale(1.25);}
  .omega-item{transition:padding-left .4s ease, background .4s ease;}
  .omega-item:hover{padding-left:10px; background:rgba(231,163,62,0.05);}
  .omega-item:hover .wreath-badge{transform:scale(1.1);}
  .omega-item .wreath-badge{transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .tl-item:hover .tl-num{background:var(--gold); color:var(--umber); transform:scale(1.1);}
  .tl-num{transition:all .35s cubic-bezier(.2,.8,.2,1);}
  .quality-list li{transition:transform .3s ease;}
  .quality-list li:hover{transform:translateX(8px);}
  .quality-list li:hover svg{transform:scale(1.3) rotate(-8deg);}
  .quality-list li svg{transition:transform .35s ease;}
  .use-step{transition:background .3s ease, padding-left .3s ease;}
  .use-step:hover{background:rgba(168,91,35,0.05); padding-left:8px;}
  .use-step:hover .sn{color:var(--berry); opacity:1;}
  .use-step .sn{transition:all .3s ease;}
  .detail-table tr{transition:background .3s ease;}
  .detail-table tr:hover{background:rgba(168,91,35,0.05);}
  .faq-q{transition:padding-left .3s ease;}
  .faq-q:hover{padding-left:8px;}
  .faq-q:hover h4{color:var(--berry);}
  .faq-icon{transition:all .3s ease;}
  .faq-q:hover .faq-icon{border-color:var(--berry); background:rgba(226,103,42,0.08);}
  .test-card{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;}
  .test-card:hover{transform:translateY(-10px) rotate(-0.6deg); box-shadow:0 26px 50px rgba(42,22,8,0.14);}
  .test-avatar{transition:transform .4s ease;}
  .test-card:hover .test-avatar{transform:rotate(-10deg) scale(1.1);}
  .stars{transition:transform .3s ease; transform-origin:left;}
  .test-card:hover .stars{transform:scale(1.1);}
  .intro-grid img, .diff-wrap img, .quality-wrap img{transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;}
  .intro-grid img:hover, .diff-wrap img:hover, .quality-wrap img:hover{transform:translateY(-6px) scale(1.015); box-shadow:0 34px 70px rgba(42,22,8,0.24);}
  .origin-wrap img{transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .origin-wrap img:hover{transform:scale(1.02) rotate(0.4deg);}
  footer ul a{position:relative; display:inline-block;}
  footer ul a::after{content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold); transition:width .3s ease;}
  footer ul a:hover::after{width:100%;}
  .intro-stats .stat{transition:transform .3s ease;}
  .intro-stats .stat:hover{transform:translateY(-4px);}
  .intro-stats .stat:hover b{color:var(--berry);}
  .cta-final-inner .btn-primary{animation:pulseGlow 2.4s ease-in-out infinite;}

  /* Shimmer text accent */
  .shimmer, .hero-text h1 em.shimmer{
    background:linear-gradient(90deg, var(--gold) 0%, #fff 50%, var(--gold) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmerText 3.5s linear infinite;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ===== Back to top ===== */
  .back-top{
    position:fixed; right:22px; bottom:22px; z-index:150;
    width:48px; height:48px; border-radius:50%;
    background:var(--umber); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px rgba(42,22,8,0.35);
    cursor:pointer; border:none;
    opacity:0; transform:translateY(20px) scale(0.8); pointer-events:none;
    transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }
  .back-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .back-top:hover{background:var(--berry); color:#fff; transform:translateY(-4px) scale(1.06);}
  .back-top svg{width:20px;height:20px; stroke:currentColor; fill:none; stroke-width:2.4;}
  .back-top{animation:floatY 3.5s ease-in-out infinite;}

  /* ===== Ripple ===== */
  .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;}
  @keyframes rippleAnim{to{transform:scale(2.6); opacity:0;}}

  /* ===== Parallax layers ===== */
  .hero-bg, .cta-final .bg{will-change:transform;}

  /* ===== Hero card tilt ===== */
  .hero-card{transition:transform .25s ease, box-shadow .25s ease; transform-style:preserve-3d;}

  /* ===== Wreath divider ===== */
  .wreath-divider{
    display:flex; align-items:center; justify-content:center; gap:18px;
    padding:0 0 0 0;
  }
  .wreath-divider .line{height:1px; width:100px; background:linear-gradient(90deg, transparent, var(--line));}
  section.dark .wreath-divider .line{background:linear-gradient(90deg, transparent, rgba(251,243,231,0.25));}
  .wreath-divider .center-wreath{
    width:34px; height:34px; border-radius:50%;
    background:repeating-conic-gradient(from 0deg, var(--gold) 0deg 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 50%, black 52%, black 100%);
            mask: radial-gradient(circle, transparent 50%, black 52%, black 100%);
    animation:spinSlow 22s linear infinite;
  }

  /* ===== Upload / Share your ritual section ===== */
  .upload-wrap{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:flex-start;
  }
  .upload-card{
    background:linear-gradient(160deg, #FFFDF9 0%, #FBF3E7 65%, #F6E4C8 100%);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:34px; box-shadow:0 20px 50px rgba(42,22,8,0.08);
    transition:box-shadow .4s ease;
  }
  .upload-card:hover{box-shadow:0 26px 60px rgba(42,22,8,0.14);}
  .upload-card h3{font-size:22px; margin-bottom:8px;}
  .upload-card > p{font-size:14.3px; color:#5a4635; margin-bottom:24px;}
  .drop-zone{
    border:2px dashed var(--line);
    border-radius:16px;
    padding:26px;
    text-align:center;
    cursor:pointer;
    transition:border-color .3s ease, background .3s ease, transform .3s ease;
    position:relative;
    overflow:hidden;
  }
  .drop-zone:hover{border-color:var(--bronze); background:rgba(168,91,35,0.04);}
  .drop-zone.dragover{border-color:var(--berry); background:rgba(226,103,42,0.08); transform:scale(1.015);}
  .drop-zone input[type=file]{display:none;}
  .drop-icon{
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--berry));
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px;
    animation:floatY 3.2s ease-in-out infinite;
  }
  .drop-icon svg{width:24px;height:24px; stroke:#fff; fill:none; stroke-width:2;}
  .drop-zone p{font-size:13.8px; color:#7a6650; margin:0;}
  .drop-zone .hint{font-size:12px; color:#a4907a; margin-top:6px;}
  .preview-wrap{margin-top:18px; display:none; align-items:center; gap:14px; animation:popIn .5s ease;}
  .preview-wrap.show{display:flex;}
  .preview-wrap img{width:64px; height:64px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow);}
  .preview-name{font-size:13px; font-weight:700; flex:1;}
  .preview-remove{
    width:26px;height:26px; border-radius:50%; border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    transition:all .25s ease;
  }
  .preview-remove:hover{background:var(--berry); border-color:var(--berry);}
  .preview-remove:hover svg{stroke:#fff;}
  .preview-remove svg{width:12px;height:12px; stroke:var(--umber); stroke-width:2.4;}

  .form-row{margin-top:16px; display:flex; flex-direction:column; gap:6px;}
  .form-row label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#7a6650;}
  .form-row input, .form-row textarea{
    border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    font-family:'Manrope'; font-size:14.3px; color:var(--ink); background:#fff;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--bronze); box-shadow:0 0 0 4px rgba(168,91,35,0.1);}
  .form-row textarea{resize:vertical; min-height:78px; font-family:'Manrope';}
  .star-picker{display:flex; gap:6px; margin-top:2px;}
  .star-picker span{font-size:22px; cursor:pointer; color:var(--line); transition:transform .2s ease, color .2s ease;}
  .star-picker span:hover, .star-picker span.active{color:var(--gold); transform:scale(1.15);}
  .upload-submit{margin-top:22px; width:100%;}
  .upload-note{font-size:12px; color:#9c8368; margin-top:12px; text-align:center;}
  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--umber); color:var(--cream); padding:14px 26px; border-radius:100px;
    font-size:13.5px; font-weight:700; box-shadow:0 16px 40px rgba(0,0,0,0.3);
    display:flex; align-items:center; gap:10px;
    opacity:0; pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
    z-index:300;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast svg{width:16px;height:16px; stroke:var(--gold); stroke-width:2.6;}

  .upload-side img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%;}
  .upload-side{position:relative;}
  .upload-badge{
    position:absolute; bottom:-18px; left:-18px;
    background:linear-gradient(140deg, #FFFDF9 0%, #F4D6A8 100%);
    border:1px solid var(--line); border-radius:16px;
    padding:14px 18px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:10px;
    animation:floatY 4s ease-in-out infinite;
  }
  .upload-badge .wreath-badge{width:38px;height:38px;}
  .upload-badge b{display:block; font-family:'Fraunces',serif; font-size:16px;}
  .upload-badge span{font-size:11px; color:#7a6650;}

  @media (max-width:980px){
    .upload-wrap{grid-template-columns:1fr;}
    .upload-side{order:-1;}
    .upload-badge{position:static; margin-top:14px; display:inline-flex;}
  }


/* ===================================================================
   WOOCOMMERCE OVERRIDES
   Applied to shop grid, single product, cart & checkout pages so they
   inherit the Nature's Praan brand look instead of default WC styling.
   =================================================================== */

.np-wc-wrap{ max-width:1240px; margin:0 auto; }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button{
  background:var(--berry) !important;
  color:#fff !important;
  border:none !important;
  border-radius:100px !important;
  padding:14px 30px !important;
  font-family:'Manrope', sans-serif !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  letter-spacing:0.01em;
  box-shadow:0 12px 28px rgba(226,103,42,0.3);
  transition:transform .3s ease, box-shadow .3s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.checkout-button:hover{
  background:var(--bronze-deep) !important;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(226,103,42,0.4);
}

/* Prices */
.woocommerce-Price-amount, .woocommerce ul.products li.product .price, .woocommerce div.product p.price{
  color:var(--bronze-deep);
  font-family:'Fraunces', serif;
  font-weight:600;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount{
  color:#a4907a; opacity:0.7;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* Shop grid */
.woocommerce ul.products li.product{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(42,18,0,0.12);
}
.woocommerce ul.products li.product img{ border-radius:14px; }
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
  font-size:18px;
}

/* Single product */
.woocommerce div.product .product_title{
  font-family:'Fraunces', serif;
  font-size:clamp(28px,3.4vw,40px);
  color:var(--ink);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:#5a4635; font-size:15.5px; line-height:1.7;
}
.woocommerce div.product form.cart .quantity input{
  border:1px solid var(--line); border-radius:10px; padding:10px; font-family:'Manrope';
}

/* Cart & Checkout tables */
.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.woocommerce table.shop_table th{
  background:var(--cream); color:var(--umber); font-family:'Manrope'; font-weight:700;
  text-transform:uppercase; font-size:12px; letter-spacing:0.05em;
}
.woocommerce #order_review, .woocommerce-checkout #payment{
  background:var(--cream);
  border-radius:16px;
  padding:24px;
  border:1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods{ border:none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-family:'Manrope';
}

/* Notices */
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--gold) !important;
  background:var(--cream);
  border-radius:12px;
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--gold) !important; }

/* Star ratings */
.woocommerce .star-rating span::before, .woocommerce div.product .woocommerce-product-rating .star-rating span::before{
  color:var(--gold);
}

/* Mini-cart badge in header */
.np-cart-link{ position:relative; display:inline-flex; align-items:center; gap:6px; }
.np-cart-count{
  background:var(--berry); color:#fff; font-size:10.5px; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:-8px; right:-10px;
}

/* ===================================================================
   WOOCOMMERCE BLOCKS CHECKOUT/CART OVERRIDES
   Newer WooCommerce defaults to the block-based Cart & Checkout pages
   (built with Gutenberg blocks), which use completely different CSS
   classes from the classic shortcode checkout above. These rules
   theme that block-based checkout to match the brand — matching the
   site's container width, spacing rhythm, and typography.
   =================================================================== */

/* Page-level container: match the site's 1240px content width + breathing room */
.woocommerce-checkout .wp-block-post-content,
.woocommerce-cart .wp-block-post-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-content{
  max-width:1240px;
  margin:0 auto;
  padding:56px 32px 90px;
}

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  max-width:1240px;
  margin:0 auto;
  width:100%;
}

/* Universal font application — WooCommerce Blocks ships its own default
   font-family on many inner elements, so this covers text, inputs, labels,
   buttons and summary rows explicitly rather than relying on inheritance. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout *:not(svg):not(path),
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart *:not(svg):not(path){
  font-family:'Manrope', sans-serif;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-product-name,
.wc-block-components-order-summary__title,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:'Fraunces', serif !important;
}

/* Page heading ("Checkout" / "Cart") */
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(32px, 4vw, 48px);
  margin-bottom:8px !important;
}

/* Two-column layout: give the form and summary consistent breathing room */
.wc-block-checkout__main{
  padding-right:12px;
}
.wc-block-checkout__sidebar{
  padding-left:12px;
}

/* Section headings ("Shipping address", "Shipping options", "Payment options") */
.wc-block-components-checkout-step__title,
.wc-block-components-title{
  font-weight:600 !important;
  font-size:21px !important;
  color:var(--ink) !important;
  margin-bottom:4px !important;
}
.wc-block-components-checkout-step{
  padding:30px 0 !important;
  border-bottom:1px solid var(--line);
}
.wc-block-components-checkout-step:first-child{
  padding-top:0 !important;
}
.wc-block-components-checkout-step__container{
  margin-top:18px;
}
.wc-block-components-checkout-step__description{
  font-size:14px;
  color:#7a6650;
}

/* Form field grid: comfortable spacing between fields */
.wc-block-components-address-form,
.wc-block-components-text-input,
.wc-block-components-checkout-form{
  --wc-form-gap:16px;
}
.wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-checkout-form .wc-block-components-text-input{
  margin-bottom:16px !important;
}

/* Text inputs, textareas, selects */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-textarea textarea,
.wc-block-components-checkout-form select,
.wc-blocks-components-select select{
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  font-family:'Manrope', sans-serif !important;
  font-size:15px !important;
  padding:14px 16px !important;
  height:auto !important;
  line-height:1.4 !important;
}
.wc-block-components-text-input input:focus{
  border-color:var(--bronze) !important;
  box-shadow:0 0 0 4px rgba(168,91,35,0.1) !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select label{
  font-size:13px !important;
  color:#7a6650 !important;
}

/* Radio option cards (Shipping options, Payment options)
   Deliberately minimal: earlier padding/layout overrides here caused
   the radio circle to overlap the option label text (e.g. "Flat rate"
   rendering as "at rate"). Only a checked-state border color is applied
   now — everything else is left as WooCommerce Blocks' own default
   markup and spacing, which renders correctly without overlap. */
.wc-block-components-radio-control__option[data-checked="true"],
.wc-block-components-radio-control__option.is-checked,
.wc-block-checkout__payment-method.is-active{
  border-color:var(--berry) !important;
}
.wc-block-components-radio-control__input:checked{
  accent-color:var(--berry);
}

/* Fix: floating field labels (e.g. "Email address") were sitting on top of
   the entered value instead of floating above it, after the input padding
   change above. This forces the label to always sit as a small static
   caption at the top-left of the field, so it can never overlap the text
   the customer types — regardless of focus/filled state. */
.wc-block-components-text-input{
  position:relative !important;
  padding-top:20px !important;
}
.wc-block-components-text-input label{
  position:absolute !important;
  top:8px !important;
  left:16px !important;
  right:16px !important;
  font-size:11px !important;
  line-height:1 !important;
  color:#7a6650 !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:0.03em;
  pointer-events:none !important;
  transform:none !important;
  transition:none !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wc-block-components-text-input input{
  padding-top:8px !important;
  padding-bottom:12px !important;
}

/* Order summary panel */
.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary{
  background:var(--cream) !important;
  border-radius:22px !important;
  padding:22px !important;
  border:1px solid var(--line);
}
.wc-block-components-order-summary__title{
  font-weight:600;
  font-size:22px;
  padding-bottom:20px !important;
}
.wc-block-components-totals-item{
  padding:14px 0 !important;
  font-size:14.5px;
}
.wc-block-components-totals-item .wc-block-components-totals-item__label{
  font-weight:600;
}
.wc-block-components-totals-footer-item{
  padding-top:20px !important;
  margin-top:8px !important;
  border-top:1px solid var(--line);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-weight:700 !important;
  font-size:20px !important;
  color:var(--bronze-deep) !important;
}
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount{
  color:var(--bronze-deep);
  font-weight:600;
}
.wc-block-components-sale-badge,
.wc-block-components-product-badge{
  background:var(--pine) !important;
  color:#fff !important;
  border-radius:100px !important;
  padding:3px 10px !important;
  font-size:11.5px !important;
}
/* Fix: the amount inside the green "Save" badge was inheriting the dark
   orange money-amount color above instead of white, making it hard to
   read against the green background. Force it white specifically here. */
.wc-block-components-sale-badge .wc-block-components-formatted-money-amount,
.wc-block-components-product-badge .wc-block-components-formatted-money-amount{
  color:#fff !important;
}

/* Order summary line items: consistent spacing + thumbnail sizing */
.wc-block-components-order-summary-item{
  display:flex !important;
  align-items:flex-start !important;
  padding:16px 0 !important;
  gap:12px !important;
}
.wc-block-components-order-summary-item__image{
  flex:0 0 auto !important;
}
.wc-block-components-order-summary-item__image img{
  border-radius:10px !important;
  width:46px !important;
  height:46px !important;
  object-fit:cover !important;
}
.wc-block-components-order-summary-item__description{
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:13.5px;
  color:#5a4635;
  line-height:1.5;
}
.wc-block-components-order-summary-item__individual-price,
.wc-block-components-order-summary-item__total-price{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  text-align:right !important;
  font-size:13.5px;
  color:#5a4635;
  line-height:1.5;
}
.wc-block-components-product-name{
  display:block;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.wc-block-components-sale-badge{
  white-space:nowrap !important;
}

/* Coupon accordion */
.wc-block-components-panel{
  border-top:1px solid var(--line) !important;
  padding-top:18px !important;
  margin-top:6px !important;
}
.wc-block-components-panel__button{
  color:var(--bronze-deep) !important;
  font-weight:700 !important;
  font-size:14px !important;
}

/* Primary action button (Place Order / Proceed to Checkout) */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a{
  background:var(--berry) !important;
  border:none !important;
  border-radius:100px !important;
  font-family:'Manrope', sans-serif !important;
  font-weight:700 !important;
  font-size:15.5px !important;
  padding:17px 32px !important;
  box-shadow:0 12px 28px rgba(226,103,42,0.3) !important;
  transition:transform .3s ease, box-shadow .3s ease !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(226,103,42,0.4) !important;
}

/* Notices / validation errors */
.wc-block-components-validation-error,
.wc-block-store-notice.is-error{
  background:#fff0ed !important;
  border-radius:12px !important;
  color:#8f2d18 !important;
  padding:14px 16px !important;
  font-size:13.5px !important;
}
.wc-block-store-notice.is-success{
  background:var(--cream) !important;
  border-left:4px solid var(--gold) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
}

@media (max-width: 900px){
  .wc-block-checkout__main{ padding-right:0; }
  .wc-block-checkout__sidebar{ padding-left:0; margin-top:32px; }
  .woocommerce-checkout .wp-block-post-content,
  .woocommerce-cart .wp-block-post-content,
  body.woocommerce-checkout .entry-content,
  body.woocommerce-cart .entry-content{
    padding:36px 20px 60px;
  }
}

/* Hide the "Shipping options" step: shipping is always ₹0/free (the real
   delivery-related charge is the COD fee shown separately), so there is
   nothing for the customer to actually choose here. The single free rate
   still applies automatically behind the scenes — this is purely visual. */
#shipping-option,
.wc-block-checkout__shipping-method,
.wp-block-woocommerce-checkout-shipping-method-block{
  display:none !important;
}

/* Also hide the matching "Flat rate — FREE" row in the order summary
   totals, since it never changes and just adds clutter. */
.wc-block-components-totals-shipping{
  display:none !important;
}