/* =========================================================
   Theme layer — cream + deep navy + amber, bold condensed type
   (loaded after style.css)
   ========================================================= */
:root{
  --navy:#0b1d33; --navy-2:#071423; --navy-3:#13304f;
  --gold:#f0a43a; --gold-2:#ffc670; --gold-soft:#fde9cc;
  --ivory:#fdf1e6; --line:#ecdccb; --ink:#14202f; --muted:#6a6f7a;
  --display:"Anton",Impact,sans-serif; --serif:"Anton",Impact,sans-serif; --body-serif:"Source Serif 4",Georgia,serif;
}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
h2 span,h1 span{color:var(--gold)}
p{font-family:var(--body-serif)}
.card h3,.cat b,.author b,.steps b,.foot h4,.summary h3,.form-card h3,.info-card h3,.cart-row b,.prose h2,.about-grid h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.price,.detail-price,.summary .tot b{font-family:var(--sans);font-weight:800}

/* Header */
.site-header{background:var(--ivory);border-bottom:0}
.nav{height:78px;gap:14px}
.logo b{font-family:var(--display);font-weight:400;letter-spacing:.06em;font-size:1.3rem}
.pills{display:flex;gap:6px;margin-left:auto}
.pills a{background:var(--navy);color:#fff;padding:9px 16px;border-radius:999px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;transition:.2s}
.pills a:hover{background:var(--gold);color:var(--navy)}
.pills a.on{background:#e6d3c1;color:var(--navy)}
.cart-pill{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 16px 4px 4px;font-size:.8rem;font-weight:700;white-space:nowrap}
.cp-ic{position:relative;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center}
.cp-ic em{position:absolute;top:-6px;right:-6px;background:var(--gold);color:var(--navy);font-style:normal;font-size:.62rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center}
.search-pill{display:flex;align-items:center;background:var(--navy);border-radius:999px;overflow:hidden;height:42px}
.search-pill input{width:120px;border:0!important;background:transparent!important;color:#fff!important;padding:0 14px!important;box-shadow:none!important;font-size:.82rem}
.search-pill input::placeholder{color:#aab4c6}
.search-pill select{width:130px!important;border:0!important;border-left:1px solid rgba(255,255,255,.15)!important;border-radius:0!important;background:transparent!important;color:#fff!important;font-size:.72rem;font-weight:700;text-transform:uppercase;padding:0 10px!important;box-shadow:none!important}
.search-pill select option{color:var(--ink)}
.search-pill button{width:44px;height:42px;color:#fff;border-left:1px solid rgba(255,255,255,.15)}
.search-pill button:hover{background:var(--gold);color:var(--navy)}
.catbar{background:var(--navy);color:#fff}
.catbar .wrap{display:flex;align-items:center;gap:24px;height:48px}
.cb-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;white-space:nowrap}
.cb-label b{font-weight:400;color:var(--gold)}
.catbar nav{display:flex;gap:4px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
.catbar nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:.88rem;padding:6px 12px;color:#dfe5ee;white-space:nowrap;transition:.2s}
.catbar nav a:hover,.catbar nav a.on{color:var(--gold)}
.cb-wa{background:var(--gold);color:var(--navy);padding:7px 16px;border-radius:999px;font-weight:700;font-size:.8rem;white-space:nowrap}
.cb-wa:hover{background:#fff}

/* Buttons */
.btn-light{background:var(--ivory);border-color:var(--ivory);color:var(--navy);font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}
.btn-light:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-ring{background:transparent;border:2px solid var(--gold);color:var(--gold);font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}
.btn-ring:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* Hero */
.hero{background:var(--navy);color:#fff;padding:70px 0 80px}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:6px 6px;pointer-events:none}
.hero-grid{position:relative;grid-template-columns:1fr 1fr;gap:40px}
.hero h1{font-size:clamp(3rem,7vw,6.2rem);color:var(--gold);line-height:.98;margin-bottom:18px}
.hero h1 span{color:#fff}
.hero .urdu{color:#c9d2e0;text-align:left;font-size:1.1rem;margin-bottom:12px}
.hero-lead{color:#c9d2e0;font-size:1.08rem;max-width:520px;margin-bottom:30px}
.hero-lead b{color:#fff}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative;height:500px;display:grid;place-items:center}
.ring-text{position:absolute;width:480px;height:480px;animation:spin 40s linear infinite}
.ring-text text{fill:#fff;font-family:var(--display);font-size:24px;letter-spacing:9px}
@keyframes spin{to{transform:rotate(360deg)}}
.sun{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold-2),var(--gold) 55%,#c97a12);box-shadow:0 0 80px rgba(240,164,58,.35)}
.sun.small{width:260px;height:260px}
.hero-art .hb{position:absolute;width:170px;top:auto;left:auto;right:auto}
.hero-art .hb0{z-index:4;width:200px;transform:translate(0,10px)}
.hero-art .hb1{z-index:3;transform:translate(-130px,30px) rotate(-6deg)}
.hero-art .hb2{z-index:3;transform:translate(130px,30px) rotate(6deg)}
.hero-art .hb3{z-index:2;transform:translate(215px,50px) rotate(10deg);width:140px}
.hero-art:hover .hb1{transform:translate(-150px,25px) rotate(-9deg)}
.hero-art:hover .hb2{transform:translate(150px,25px) rotate(9deg)}

/* Shelf */
.shelf-sec{padding:90px 0 20px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.5vw,3.8rem)}
.sec-head.split{align-items:end}
.sec-head.split p{max-width:430px;font-size:1.02rem}
.shelf{display:flex;justify-content:center;align-items:flex-end;gap:4px;padding:0 20px;min-height:280px}
.spine{width:52px;border-radius:3px 3px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0 8px;color:#fff;position:relative;transition:transform .25s;box-shadow:inset -6px 0 8px -4px rgba(0,0,0,.35);flex-shrink:0}
.spine::before,.spine::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--gold)}
.spine::before{top:22px}.spine::after{bottom:30px}
.spine.light{color:var(--navy)}
.spine.light::before,.spine.light::after{background:var(--navy)}
.spine:hover{transform:translateY(-14px)}
.spine:nth-child(7n){transform:rotate(6deg);transform-origin:bottom left}
.spine:nth-child(7n):hover{transform:rotate(6deg) translateY(-14px)}
.sp-title{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);letter-spacing:.06em;font-size:1rem;margin-top:22px}
.sp-foot{font-family:var(--body-serif);font-size:.6rem;opacity:.85}
.shelf-board{height:16px;background:var(--navy);border-radius:4px;margin:0 30px;box-shadow:0 18px 26px -10px rgba(11,29,51,.45)}
.shelf-hint{text-align:center;color:var(--muted);font-size:.85rem;margin-top:14px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px}
.pillars div{border-top:2px solid var(--navy);padding-top:22px}
.pillars i{color:var(--gold);font-size:1.3rem;margin-bottom:14px;display:block}
.pillars h3{font-size:1.5rem;color:var(--navy);margin-bottom:8px}
.pillars p{color:var(--muted);font-size:.95rem}

/* Product cards */
.divider{display:flex;align-items:center;gap:14px;color:var(--gold);margin:-10px 0 40px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#cdbba8}
.card{background:#fff;border-radius:6px;padding:0 0 16px;transition:.3s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.card-img,.card:hover .card-img{background:#fff;border-radius:6px 6px 0 0;padding:18px 18px 8px}
.card-body{padding:12px 16px 0;text-align:center}
.meta{justify-content:center}
.card h3{font-size:1.05rem;color:var(--navy)}
.card-foot{border-top:0;padding-top:4px;flex-direction:column;gap:10px}
.price{font-size:1.1rem}
.btn-add{background:var(--navy);color:#fff;border-color:var(--navy);width:100%;justify-content:center}
.btn-add:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.pill{border-radius:999px;background:var(--navy);color:#fff}
.more{margin-top:44px;text-align:center}

/* Spotlight */
.spot-wrap{background:var(--navy);margin-top:100px;padding:20px 0}
.spotlight{background:transparent;border-radius:0}
.spot-art{background:transparent;position:relative}
.spot-art .sun{left:50%;top:50%;transform:translate(-50%,-50%)}
.spot-art a{position:relative;z-index:1}
.spot-body h2{font-size:clamp(2rem,4vw,3.4rem);color:var(--gold)}
.spot-body .tag{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;padding:5px 12px;border-radius:999px;margin-bottom:16px}
.spot-buy .price{font-family:var(--display);font-weight:400;font-size:2.4rem}

/* Bulk */
.bulk{background:var(--gold);border-radius:24px;padding:60px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.bulk h2{font-size:clamp(2.2rem,4.5vw,3.8rem);color:var(--navy)}
.bulk h2 span{color:#fff}
.bulk p{color:#3a2a10;margin:16px 0 26px;max-width:480px;font-size:1.05rem}
.bulk .btn-light{background:var(--navy);border-color:var(--navy);color:#fff}
.bulk .btn-ring{border-color:var(--navy);color:var(--navy)}
.bulk .btn-ring:hover{background:var(--navy);color:#fff}
.bulk-list{list-style:none}
.bulk-list li{display:flex;gap:18px;align-items:center;padding:16px 0;border-top:2px solid var(--navy)}
.bulk-list b{font-family:var(--display);font-weight:400;font-size:1.8rem;color:#fff}
.bulk-list span{font-weight:600;color:var(--navy)}

/* Inner pages */
.page-head h1{color:var(--gold);font-size:clamp(2.4rem,5vw,4rem)}
.page-head::after{background:var(--gold);opacity:.18;border-radius:50%;width:260px;height:260px;right:-60px;bottom:-120px;transform:none}
.detail-info h1{font-size:clamp(2rem,4vw,3.2rem)}
.detail-img{background:#fff}
.site-footer::before{background:var(--gold)}
.foot h4{color:var(--gold);font-size:1.2rem}

@media (max-width:1180px){
  .search-pill select{display:none}
  .pills a{padding:8px 12px;font-size:.72rem}
}
@media (max-width:980px){
  .pills,.search-pill{display:none}
  .menu-btn{display:block}
  .cart-pill{margin-left:auto}
  .nav-open .pills{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:var(--ivory);padding:14px 20px 76px;gap:8px;box-shadow:var(--shadow);z-index:60}
  .nav-open .search-pill{display:flex;position:absolute;top:338px;left:20px;right:20px;z-index:61}
  .nav-open .search-pill input{flex:1;width:auto}
  .cb-label,.cb-wa{display:none}
  .catbar nav{justify-content:flex-start}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{height:420px}
  .pillars{grid-template-columns:1fr;gap:26px}
  .bulk{grid-template-columns:1fr;padding:40px 28px}
  .shelf{overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
}
@media (max-width:560px){
  .logo span{display:none}
  .cart-pill{font-size:.72rem}
  .hero{padding:44px 0 50px}
  .hero-art{height:330px}
  .ring-text{width:320px;height:320px}
  .sun{width:220px;height:220px}
  .hero-art .hb{width:110px}.hero-art .hb0{width:130px}
  .hero-art .hb1{transform:translate(-85px,20px) rotate(-6deg)}.hero-art .hb2{transform:translate(85px,20px) rotate(6deg)}.hero-art .hb3{display:none}
  .sec-head.split{align-items:flex-start}
  .spine{width:44px}
}
.site-header .wrap,.catbar .wrap{max-width:1360px}
.pills a{white-space:nowrap}
@media (max-width:1280px){.logo span{display:none}}
.card-foot form{width:100%}
.spot-art .sun.small{width:400px;height:400px}.spot-art{overflow:hidden}
/* Mobile menu: subjects + search inside the menu */
.m-only{display:none}
@media (max-width:980px){
  .catbar{display:none}
  .nav-open .search-pill{display:none}
  .nav-open .pills{padding-bottom:20px;max-height:calc(100vh - 78px);overflow-y:auto}
  .m-cats{display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
  .m-search{display:flex;background:var(--navy);border-radius:999px;overflow:hidden}
  .m-search input{flex:1;border:0!important;background:transparent!important;color:#fff!important;padding:12px 16px!important;box-shadow:none!important}
  .m-search input::placeholder{color:#aab4c6}
  .m-search button{width:48px;color:#fff}
  .m-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin-top:6px}
  .m-label b{font-weight:400;color:var(--gold)}
  .pills .m-cats a{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .pills .m-cats a i{color:var(--gold);width:20px;margin-right:6px}
  .pills .m-cats a.m-wa{background:#25d366;color:#fff;border-color:#25d366;text-align:center}
  .pills .m-cats a.m-wa i{color:#fff}
}
/* Mobile: subjects bar with its own MENU button */
.cb-toggle{display:none}
@media (max-width:980px){
  .catbar{display:block;position:relative}
  .catbar .wrap{height:60px;justify-content:space-between}
  .cb-label{display:block;font-size:1.25rem}
  .cb-toggle{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--navy);border-radius:999px;padding:10px 20px;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:1rem}
  .catbar nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:var(--navy);padding:6px 20px 16px;z-index:55;box-shadow:0 20px 30px -10px rgba(0,0,0,.4)}
  .cats-open .catbar nav{display:flex}
  .catbar nav a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem}
  .cats-open .cb-toggle i::before{content:"\f00d"}
}
/* Mobile: main menu as a left sidebar */
.side-overlay{display:none}
@media (max-width:980px){
  .pills,.nav-open .pills{display:flex;position:fixed;top:0;left:0;bottom:0;right:auto;width:min(310px,86vw);max-height:none;flex-direction:column;gap:4px;background:var(--ivory);padding:0 18px 24px;overflow-y:auto;z-index:200;box-shadow:20px 0 50px rgba(0,0,0,.25);transform:translateX(-105%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .nav-open .pills{transform:none}
  .side-head{display:flex;align-items:center;justify-content:space-between;padding:18px 0 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .side-head img{height:74px;width:auto}
  .side-close{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-size:1.05rem}
  .pills a{background:transparent;color:var(--navy);border-radius:10px;padding:13px 14px;font-size:.88rem}
  .pills a::before{font-family:"Font Awesome 6 Free";font-weight:900;color:var(--gold);width:26px;display:inline-block}
  .pills a:nth-of-type(1)::before{content:"\f015"}
  .pills a:nth-of-type(2)::before{content:"\f02d"}
  .pills a:nth-of-type(3)::before{content:"\f468"}
  .pills a:nth-of-type(4)::before{content:"\f05a"}
  .pills a:nth-of-type(5)::before{content:"\f095"}
  .pills a:hover,.pills a.on{background:var(--navy);color:#fff}
  .m-cats{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
  .side-overlay{display:block;position:fixed;inset:0;background:rgba(7,20,35,.55);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-open .side-overlay{opacity:1;pointer-events:auto}
  .nav-open{overflow:hidden}
}
@media (max-width:980px){.site-header{backdrop-filter:none;-webkit-backdrop-filter:none}.nav-open .site-header{z-index:300}}
/* Product grid: 2 per row on phones and small tablets */
@media (max-width:760px){
  .grid,.grid.g3{grid-template-columns:1fr 1fr;gap:14px}
  .card-img{padding:12px 12px 6px}
  .card-body{padding:10px 10px 0}
  .meta{flex-wrap:wrap;gap:4px;font-size:.66rem}
  .meta span{white-space:nowrap}
  .card h3{font-size:.92rem;line-height:1.2;margin-bottom:10px}
  .price{font-size:1rem}
  .btn-add{padding:7px 8px;font-size:.74rem}
}
/* Keep side padding on section wrappers */
.wrap.sec{padding-left:24px;padding-right:24px}
@media (max-width:560px){.wrap.sec{padding-left:16px;padding-right:16px}}
@media (max-width:760px){.sec-head.split{flex-direction:column;align-items:flex-start;gap:10px}}
/* Why order here */
.why{background:var(--navy);color:#fff;margin-top:100px;padding:90px 0;position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:6px 6px}
.why-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.why-head{position:sticky;top:150px}
.why-head h2{color:#fff;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.98;margin-bottom:20px}
.why-head h2 span{color:var(--gold)}
.why-head p{color:#c9d2e0;font-size:1.08rem;max-width:420px;margin-bottom:28px}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.why-list div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:26px;transition:.3s}
.why-list div:hover{background:rgba(240,164,58,.08);border-color:var(--gold);transform:translateY(-4px)}
.why-list i{width:50px;height:50px;border-radius:14px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:1.2rem;margin-bottom:16px}
.why-list h3{color:#fff;font-size:1.3rem;margin-bottom:6px}
.why-list p{color:#aeb8cc;font-size:.94rem}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;gap:36px}.why-head{position:static}}
@media (max-width:560px){.why{padding:64px 0}.why-list{grid-template-columns:1fr}}
/* Why section v2: list + order slip (reference style) */
.why-grid{grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.why-left h2{color:var(--gold);font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.98;margin-bottom:18px}
.why-intro{color:#c9d2e0;max-width:430px;margin-bottom:26px}
.why-items{list-style:none;display:grid}
.why-items li{display:flex;gap:18px;padding:20px 22px;border-top:1px solid rgba(255,255,255,.08);border-left:3px solid transparent;cursor:pointer;transition:background .3s,border-color .3s}
.why-items li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.why-items li>i{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(240,164,58,.5);color:var(--gold);display:grid;place-items:center;font-size:.95rem;transition:.3s}
.why-items h3{color:var(--gold);font-size:1.3rem;margin-bottom:4px}
.why-items p{color:#aeb8cc;font-size:.92rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s,opacity .4s}
.why-items li.on{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(240,164,58,.08),transparent)}
.why-items li.on>i{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.why-items li.on p{max-height:120px;opacity:1}
.slip-wrap{display:grid;place-items:center;perspective:1200px}
.slip{position:relative;width:min(400px,100%);background:#fdf3e7;color:var(--navy);padding:30px 30px 26px;transform:rotate(3deg);box-shadow:0 40px 70px -25px rgba(0,0,0,.65);transition:transform .5s;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 98%,#000) 50% 0/18px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 0,#0000 98%,#000) 50% 0/18px 100% repeat-x}
.slip:hover{transform:rotate(0) translateY(-6px)}
.slip-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.slip-top b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--navy);letter-spacing:.02em}
.slip-top small{display:block;font-family:var(--body-serif);font-style:italic;color:var(--muted);font-size:.8rem}
.slip-top img{height:42px}
.slip-row{display:flex;justify-content:space-between;font-family:var(--body-serif);font-size:.85rem;margin:14px 0 16px}
.slip-list{list-style:none;display:grid;gap:12px;font-family:var(--body-serif);font-weight:600}
.slip-list li{display:flex;align-items:center;gap:12px;transition:color .3s}
.slip-list li::before{content:"";width:18px;height:18px;border:2px solid var(--navy);border-radius:3px;flex-shrink:0;display:grid;place-items:center;font-family:"Font Awesome 6 Free";font-weight:900;font-size:.7rem;color:var(--gold);transition:.3s}
.slip-list li.chk{color:#b5651d}
.slip-list li.chk::before{content:"\f00c";border-color:var(--gold);color:#b5651d}
.slip-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:26px;padding-top:12px;border-top:1px dashed #cdbba8;font-size:.78rem;color:var(--muted)}
.slip-foot b{display:block;font-family:var(--display);font-weight:400;font-size:1rem;color:var(--navy);letter-spacing:.04em}
.slip-foot small{font-family:var(--body-serif);font-style:italic}
.stamp{position:absolute;right:26px;bottom:74px;width:86px;height:86px;border-radius:50%;border:3px double #c0571a;color:#c0571a;display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:.78rem;line-height:1.1;letter-spacing:.06em;transform:rotate(-14deg);opacity:.75}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;gap:50px}}
@media (max-width:560px){.why-items li{padding:16px 12px}.slip{padding:24px 20px}.stamp{width:70px;height:70px;font-size:.66rem;right:16px}}
/* Why v3: publisher vs bazaar + book journey */
.why-kicker{display:inline-flex;gap:8px;align-items:center;color:var(--gold);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.why-left h2{color:#fff;font-size:clamp(2.4rem,4.8vw,4rem)}
.why-left h2 span{color:var(--gold)}
.vs{border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 110px 130px;align-items:center;text-align:center}
.vs-head{background:rgba(255,255,255,.04);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9fabc0}
.vs-head span{padding:14px 8px}
.vs-head .us{background:var(--gold);color:var(--navy)}
.vs-row{border-top:1px solid rgba(255,255,255,.07);transition:background .3s}
.vs-row:hover{background:rgba(255,255,255,.04)}
.vs-row span{text-align:left;padding:15px 20px;color:#dfe5ee;font-weight:500}
.vs-row i{font-size:1rem;height:100%;display:grid;place-items:center}
.vs-row .yes{color:var(--gold);background:rgba(240,164,58,.08);height:100%;font-size:1.15rem}
.vs-row .no{color:#e5675a}.vs-row .mid{color:#9fabc0}
.vs-row .yes{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.vs.in .vs-row .yes{transform:none}
.vs.in .vs-row:nth-child(3) .yes{transition-delay:.15s}.vs.in .vs-row:nth-child(4) .yes{transition-delay:.3s}
.vs.in .vs-row:nth-child(5) .yes{transition-delay:.45s}.vs.in .vs-row:nth-child(6) .yes{transition-delay:.6s}.vs.in .vs-row:nth-child(7) .yes{transition-delay:.75s}

.journey{background:#fdf3e7;color:var(--navy);border-radius:24px;padding:30px 30px 26px;box-shadow:0 40px 70px -25px rgba(0,0,0,.6)}
.j-title{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin-bottom:22px}
.j-track{position:relative;display:grid;gap:18px;padding-left:64px;margin-bottom:26px}
.j-line{position:absolute;left:21px;top:22px;bottom:22px;width:4px;background:#e6d6c3;border-radius:4px;overflow:hidden}
.j-fill{width:100%;height:0;background:var(--gold);transition:height .9s cubic-bezier(.4,0,.2,1)}
.j-book{position:absolute;left:4px;top:0;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 6px rgba(240,164,58,.25);transition:top .9s cubic-bezier(.4,0,.2,1);animation:jPulse 1.6s infinite}
@keyframes jPulse{50%{box-shadow:0 0 0 12px rgba(240,164,58,.08)}}
.j-step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:10px 14px;border-radius:14px;opacity:.45;transition:opacity .4s,background .4s,transform .4s}
.j-step i{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--navy);display:grid;place-items:center;border:1px solid #e6d6c3;transition:.4s}
.j-step b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.1rem;letter-spacing:.03em}
.j-step small{color:var(--muted);font-size:.8rem}
.j-step.done{opacity:1}
.j-step.done i{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.j-step.now{opacity:1;background:#fff;transform:translateX(6px);box-shadow:0 10px 24px -14px rgba(11,29,51,.4)}
.j-step.now i{background:var(--gold);color:var(--navy);border-color:var(--gold)}
@media (max-width:560px){
  .vs-head,.vs-row{grid-template-columns:1fr 64px 84px}
  .vs-row span{padding:12px 12px;font-size:.86rem}
  .vs-head span{padding:12px 4px;font-size:.62rem}
  .journey{padding:24px 18px}
  .j-track{padding-left:56px}
}
.socials{display:flex;gap:10px;margin-top:18px}.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:.2s}.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.draft-note{display:inline-block;margin-top:10px;background:#fff3df;color:#8a5a12;border:1px dashed #e0a24a;border-radius:8px;padding:6px 12px;font-size:.82rem;font-family:var(--sans)}

/* ===== Product card v2 — compact, equal height ===== */
.card{background:#fff;border-radius:16px;padding:0;overflow:hidden;border:1px solid #efe5d6;box-shadow:0 1px 2px rgba(11,29,51,.04);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(11,29,51,.35);border-color:#e6d3b5}
.card-img,.card:hover .card-img{position:relative;display:grid;place-items:center;height:230px;padding:18px 0 14px;border-radius:0;background:radial-gradient(circle at 50% 120%,rgba(240,164,58,.28),transparent 60%),linear-gradient(180deg,#f7f1e7,#fbf8f2)}
.card-img .cover{width:auto;height:100%;aspect-ratio:3/4.1;max-width:78%;object-fit:cover;border-radius:2px 6px 6px 2px;box-shadow:0 16px 26px -12px rgba(11,29,51,.55)}
.card:hover .card-img .cover{transform:translateY(-6px) rotate(-1.5deg)}
.card-img .cover.gen{padding:10% 9%}
.card-img .cover.gen .gen-title{font-size:.8rem}
.card-img .cover.gen .gen-code{font-size:1rem}
.pill{top:12px;left:12px;font-size:.6rem;padding:4px 9px;letter-spacing:.08em}
.card-body{padding:14px 16px 16px;text-align:left;gap:0}
.meta{justify-content:flex-start;flex-wrap:nowrap;gap:6px;margin-bottom:8px;font-size:.66rem;letter-spacing:.04em;overflow:hidden}
.meta span{white-space:nowrap}
.meta .code{background:var(--gold-soft);color:#b5651d;padding:3px 8px;border-radius:6px;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.meta span+span::before{content:none}
.meta span:not(.code){border:1px solid #ece2d2;padding:2px 8px;border-radius:6px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:1rem;line-height:1.2;margin:0 0 12px;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.card-foot{margin-top:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px dashed #ece2d2}
.card-foot form{width:auto}
.price{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--navy);letter-spacing:.01em}
.btn-add{width:auto;display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:700}
.btn-add:hover{background:var(--gold);color:var(--navy)}
.grid{gap:22px}
@media (max-width:760px){
  .card-img,.card:hover .card-img{height:170px;padding:12px 0 10px}
  .card-body{padding:10px 10px 12px}
  .card h3{font-size:.86rem}
  .price{font-size:1.05rem}
  .btn-add{padding:8px 10px;font-size:0}
  .btn-add i{font-size:.85rem}
  .meta{font-size:.58rem}
  .meta span:not(.code){display:none}
  .meta .code{max-width:100%}
  .card-foot{flex-direction:row}
}

/* Full cover always visible: fixed cover height inside a fixed panel */
.card-img,.card:hover .card-img{--ch:200px;height:auto;padding:20px 0 16px;display:flex;align-items:center;justify-content:center;overflow:visible}
.card-img .cover{height:var(--ch);width:auto;max-width:none;aspect-ratio:auto;object-fit:contain;flex:none}
.card-img .cover.gen{width:calc(var(--ch) * .73);aspect-ratio:auto}
.card-img .pill{z-index:3}
@media (max-width:1100px){.card-img,.card:hover .card-img{--ch:180px}}
@media (max-width:760px){.card-img,.card:hover .card-img{--ch:150px;padding:14px 0 12px}}
@media (max-width:380px){.card-img,.card:hover .card-img{--ch:130px}}

/* ===== Product card v3 — big full cover (original look), never cropped ===== */
.card-img,.card:hover .card-img{--ch:auto;height:auto;display:block;padding:16px 16px 10px;background:#fff;border-radius:16px 16px 0 0;overflow:hidden}
.card-img .cover{display:block;width:100%;height:auto;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:3px 8px 8px 3px;box-shadow:0 16px 28px -14px rgba(11,29,51,.55)}
.card-img .cover.gen{width:100%;aspect-ratio:3/4.1}
.card-img .cover.gen .gen-title{font-size:1rem}.card-img .cover.gen .gen-code{font-size:1.3rem}
.card:hover .card-img .cover{transform:translateY(-6px) rotate(-1deg)}
.card-body{padding:12px 16px 16px;text-align:center}
.meta{justify-content:center;flex-wrap:wrap;gap:6px}
.meta .code{max-width:none}
.card h3{font-size:1.05rem;min-height:0;-webkit-line-clamp:3;margin-bottom:12px}
.card-foot{flex-direction:column;align-items:stretch;gap:10px;border-top:0;padding-top:0}
.card-foot form{width:100%}
.price{text-align:center;font-family:var(--sans);font-weight:800;font-size:1.15rem}
.btn-add{width:100%;justify-content:center;padding:11px 14px;font-size:.88rem}
@media (max-width:760px){
  .card-img,.card:hover .card-img{padding:10px 10px 6px}
  .card-body{padding:10px 10px 12px}
  .card h3{font-size:.86rem}
  .meta span:not(.code){display:inline-block}
  .price{font-size:1rem}
  .btn-add{font-size:.8rem;padding:9px 8px}
}

/* Mobile bottom quick bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:120;display:grid;grid-template-columns:repeat(5,1fr);background:var(--navy);border-radius:20px;padding:6px;box-shadow:0 14px 34px -10px rgba(7,20,35,.6);padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .mbar a,.mbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;border-radius:14px;color:#aeb8cc;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:.2s}
  .mbar i{position:relative;font-size:1.15rem}
  .mbar em{position:absolute;top:-8px;right:-12px;background:var(--gold);color:var(--navy);font-style:normal;font-family:var(--sans);font-size:.6rem;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;border:2px solid var(--navy)}
  .mbar .on,.mbar a:active,.mbar button:active{background:var(--gold);color:var(--navy)}
  .mbar .on em{border-color:var(--gold);background:var(--navy);color:var(--gold)}
  body{padding-bottom:86px}
  .wa-float{bottom:92px;right:16px;width:50px;height:50px;font-size:1.5rem}
  .nav-open .mbar{z-index:250}
}

/* Header account pill */
.acct-pill{display:flex;align-items:center;gap:8px;border:2px solid var(--navy);color:var(--navy);border-radius:999px;padding:6px 14px 6px 6px;font-size:.8rem;font-weight:700;white-space:nowrap;transition:.2s}
.acct-pill i{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.8rem}
.acct-pill.in i{background:var(--gold);color:var(--navy)}
.acct-pill b{color:#b5651d}
.acct-pill:hover{background:var(--navy);color:#fff}
.acct-pill:hover b{color:var(--gold)}
@media (max-width:980px){.acct-pill{margin-left:auto;padding:4px}.acct-pill span{display:none}.cart-pill{margin-left:0}}
/* Bottom quick bar switched off */ @media (max-width:760px){.mbar{display:none!important}body{padding-bottom:0}.wa-float{bottom:22px}}