/* =========================================================================
   Motion + small-screen hardening.
   - Scroll reveal: text words / blocks / images arrive from a different
     direction each time. Only opacity + transform (+ one clip-path on
     images) and only ONCE per element — nothing loops, nothing repaints
     blur/shadow layers, so weak GPUs stay calm.
   - Everything is visible by default; hiding only happens after fx.js has
     started (html.js-fx), and prefers-reduced-motion switches it all off.
   ========================================================================= */

/* ---- reveal ---- */
.js-fx [data-reveal]{opacity:0; transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rv-d,0ms);}
.js-fx [data-reveal="up"]{transform:translate3d(0,44px,0);}
.js-fx [data-reveal="down"]{transform:translate3d(0,-38px,0);}
.js-fx [data-reveal="left"]{transform:translate3d(-72px,0,0);}
.js-fx [data-reveal="right"]{transform:translate3d(72px,0,0);}
.js-fx [data-reveal="zoom"]{transform:scale(.84);}
.js-fx [data-reveal="tilt"]{transform:perspective(900px) rotateX(16deg) translate3d(0,34px,0); transform-origin:50% 100%;}
.js-fx [data-reveal="img"]{transform:scale(1.14); clip-path:inset(14% 14% 14% 14% round 22px);}
.js-fx [data-reveal="img-l"]{transform:translate3d(-60px,0,0) scale(1.08); clip-path:inset(0 100% 0 0 round 18px);}
.js-fx [data-reveal="img-r"]{transform:translate3d(60px,0,0) scale(1.08); clip-path:inset(0 0 0 100% round 18px);}
.js-fx [data-reveal].is-in{opacity:1; transform:none;}
/* only pictures use clip-path (so shadows / tooltips of cards are never clipped) */
.js-fx [data-reveal="img"].is-in, .js-fx [data-reveal="img-l"].is-in, .js-fx [data-reveal="img-r"].is-in{clip-path:inset(0 0 0 0 round 18px);}
/* words: the heading box itself stays put, each word flies in from its own side */
.js-fx [data-reveal="words"]{opacity:1; transform:none;}
.rv-w{display:inline-block;}
.js-fx [data-reveal="words"] .rv-w{opacity:0; transform:translate3d(var(--rv-x,0), var(--rv-y,.7em), 0); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 65ms + var(--rv-d,0ms));}
.js-fx [data-reveal="words"].is-in .rv-w{opacity:1; transform:none;}
/* hero picture settles in once, as the page opens */
.js-fx .hero-bg{animation:heroSettle 1.9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes heroSettle{from{transform:scale(1.13);} to{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .js-fx [data-reveal], .js-fx [data-reveal] .rv-w{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;}
  .js-fx .hero-bg{animation:none;}
}

/* ---- story section (homepage) ---- */
.story{background:var(--cream, #FBF8F0);}
.story-steps{display:flex; flex-direction:column; gap:clamp(36px,6vw,72px); margin-top:8px;}
.story-step{display:grid; grid-template-columns:1fr; gap:22px; align-items:center;}
.story-img{border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--gold-tint, #F1E1BC); box-shadow:0 22px 44px -26px rgba(30,34,20,.55);}
.story-img img{width:100%; height:100%; object-fit:cover; display:block;}
.story-num{display:block; font-family:var(--font-display, Georgia, serif); font-size:clamp(2.6rem,7vw,4rem); line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--copper); font-weight:700; margin-bottom:6px;}
.story-text h3{font-size:clamp(1.3rem,3vw,1.7rem); margin:0 0 8px;}
.story-text p{margin:0; color:var(--ink-soft); font-size:1.02rem; max-width:44ch;}
@media (min-width:820px){
  .story-step{grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);}
  .story-step--rev .story-img{order:2;}
}

/* ---- product card: auto slideshow of every photo while hovering ---- */
.card-media{position:relative;}
.card-media--slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease;}
.card-media--slides img.is-active{opacity:1;}
.card-dots{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:5px; pointer-events:none; z-index:2;}
.card-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65); box-shadow:0 0 0 1px rgba(0,0,0,.18); transition:transform .25s, background .25s;}
.card-dots i.on{background:#fff; transform:scale(1.35);}

/* ---- product page gallery: arrows + swipe, no zoom needed ---- */
.gallery-main{position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.gallery-main img{-webkit-user-drag:none; user-select:none;}
.gallery-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.92); color:var(--ink); font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0 0 3px; box-shadow:0 6px 16px -8px rgba(0,0,0,.45); transition:transform .15s, background .15s;}
.gallery-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.gallery-arrow:active{transform:translateY(-50%) scale(.95);}
.gallery-prev{left:12px;} .gallery-next{right:12px;}
.gallery-count{position:absolute; left:12px; bottom:12px; z-index:3; background:rgba(20,22,14,.62); color:#fff; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; pointer-events:none;}
.gallery-main.swap-next img{animation:galNext .45s cubic-bezier(.2,.7,.2,1);}
.gallery-main.swap-prev img{animation:galPrev .45s cubic-bezier(.2,.7,.2,1);}
@keyframes galNext{from{opacity:.15; transform:translateX(34px);} to{opacity:1; transform:none;}}
@keyframes galPrev{from{opacity:.15; transform:translateX(-34px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.gallery-main.swap-next img, .gallery-main.swap-prev img{animation:none;}}

/* =========================================================================
   Phones. Rule of thumb: on a small screen NO text sits on top of a photo
   except where a solid dark layer guarantees it can be read.
   ========================================================================= */
.coin-rain-overlay, .fx-overlay{overflow:hidden;}
/* Cart link in the top bar: icon only, on every screen size — the word next to a
   shopping-cart glyph is redundant there, and dropping it frees real header space.
   The same link inside the mobile menu panel keeps its word (it's a plain text list). */
.nav-actions .cart-word{display:none;}
.nav-actions .cart-icon{display:inline; font-size:1.15rem;}
@media (max-width:380px){
  .brand{font-size:1.02rem;}
  .nav{padding-inline:12px; gap:8px;}
  .pages-menu-btn{padding:.5em .6em;}
}
@media (max-width:700px){
  /* hero: even, dark layer over the whole picture (text spans the full width here) */
  .hero-scrim{background:linear-gradient(180deg, rgba(23,26,15,.8) 0%, rgba(23,26,15,.9) 100%);}
  .cat-hero-scrim{background:rgba(23,26,15,.82);}
  .hero-inner{padding-block:52px 44px;}

  /* olive-grove banner: same photo-with-overlay-card layout as desktop, just
     sized down — the card carries its own solid background (see below), so it
     stays fully readable over the photo without splitting into two blocks. */
  .heritage-banner{min-height:0;}
  .heritage-banner-scrim{background:linear-gradient(180deg, rgba(20,22,12,.5) 0%, rgba(20,22,12,.68) 55%, rgba(20,22,12,.86) 100%);}
  .heritage-banner-inner{padding:34px 0 30px;}
  .haddabal-promo--overlay{background:rgba(18,20,12,.86);}
  .haddabal-promo{padding:18px 16px; gap:14px;}
  .haddabal-promo-coin{width:46px; height:46px; border-width:2px;}
  .haddabal-promo-eyebrow{font-size:.66rem; padding:.25em .7em;}
  .haddabal-promo h3{font-size:1.05rem; margin-bottom:4px;}
  .haddabal-promo p{font-size:.82rem;}
  .haddabal-promo-cta{padding:.6em 1.2em; font-size:.86rem;}
  .heritage-lines{min-height:5.6em; margin-top:18px;}
  .heritage-line{font-size:1rem; padding:0 6px;}

  /* category tiles: stronger dark layer behind the label */
  .cat-teaser-scrim{background:linear-gradient(180deg, rgba(23,26,15,.15) 0%, rgba(23,26,15,.62) 55%, rgba(23,26,15,.92) 100%);}
  .founder-grid{gap:22px;}
  .story-img{aspect-ratio:16/11;}
}
@media (max-width:420px){
  h1{overflow-wrap:anywhere; hyphens:auto;}
  .section-divider-title{max-width:none;}
}

/* ---- availability ---- */
.stock-line{margin:6px 0 0; font-size:.78rem; font-weight:700; letter-spacing:.01em;}
.stock-line--in{color:#2E6B3E;} .stock-line--low{color:#B26A00;} .stock-line--out{color:#B03A2E;}
.product-info .stock-line{font-size:.9rem; margin:8px 0 4px;}
.stock-badge{position:absolute; top:10px; left:10px; z-index:3; background:#B03A2E; color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:6px;}
.card--soldout .card-media img, .card--soldout .card-media svg{filter:grayscale(.9); opacity:.55;}
.card--soldout .price{color:var(--ink-faint);}
.stock-out-box{margin:14px 0; padding:16px 18px; border:1px dashed #D9A3A0; border-radius:12px; background:#FBF1EF;}
.stock-out-text{margin:0 0 12px; color:#7A2F26; font-size:.92rem;}
.stock-out-box .buy-actions{display:flex; flex-wrap:wrap; gap:10px;}
.stock-notify.is-on{background:#E4E6D4; color:var(--olive-deep); box-shadow:none; border:1px solid var(--olive);}
.stock-out-box .btn[disabled]{opacity:.45; cursor:not-allowed;}
.stock-banner{margin:0 0 16px; line-height:1.5;}
.zw-toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 24px); opacity:0; z-index:300; max-width:min(92vw, 460px); background:#22261B; color:#fff; padding:12px 18px; border-radius:12px; font-size:.9rem; box-shadow:0 14px 34px -14px rgba(0,0,0,.6); transition:opacity .3s, transform .3s;}
.zw-toast.in{opacity:1; transform:translate(-50%, 0);}

/* ---- founder photos: every picture is locked into its own grid cell ----
   (a picture with an intrinsic height taller than the cell used to stretch the
   1fr rows on some phones and slide over the text underneath) */
.founder-photos{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); height:clamp(250px,78vw,360px);}
.founder-photos .fp{position:relative; min-width:0; min-height:0; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow);}
.founder-photos .fp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none;}
.founder-photos .fp.ph1{grid-row:1 / 3;}
.founder-text{position:relative; z-index:1; min-width:0;}
.founder-grid > *{min-width:0;}

.story-img video{width:100%; height:100%; object-fit:cover; display:block;}
.story-lang{border:1px solid var(--line); border-radius:10px; padding:8px 14px; margin:8px 0; background:var(--cream-card,#fff);}
.story-lang summary{cursor:pointer; font-weight:700; padding:6px 0;}
.admin-grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}

/* ---- Haddabal expiry reminder ---- */
.coin-bar{background:linear-gradient(135deg,#2B2410 0%,#4A3A12 100%); color:#FFF3D0; border-bottom:3px solid #D9A441;}
.coin-bar--s2{background:linear-gradient(135deg,#4A1E12 0%,#7A2F1B 100%); border-bottom-color:#F0C878;}
.coin-bar-inner{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 34px 12px 0; position:relative;}
.coin-bar-coin{flex:none; width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #F0C878; box-shadow:0 4px 12px -4px rgba(0,0,0,.6);}
.coin-bar-text{flex:1 1 260px; min-width:0; font-size:.88rem; line-height:1.4;}
.coin-bar-text strong{display:block; font-size:1.02rem; color:#fff;}
.coin-bar-text ul{margin:4px 0 0; padding-left:18px; font-size:.82rem; color:#F6E2AE;}
.coin-bar-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.coin-bar-actions .btn{padding:.5em 1.1em; font-size:.82rem;}
.coin-bar-actions .btn-dark-outline{border-color:#F0C878; color:#F0C878;}
.coin-bar-terms{color:#F6E2AE; font-size:.78rem; text-decoration:underline;}
.coin-bar-close{position:absolute; right:0; top:8px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:1.2rem; line-height:1; cursor:pointer;}
.coin-rules{margin:0; padding-left:20px; color:var(--ink-soft); line-height:1.7;}
.coin-rules li{margin-bottom:8px;}
.coin-gift-note{margin:0 0 14px; padding:10px 14px; background:var(--gold-tint,#F1E1BC); border-radius:10px; font-size:.84rem; color:var(--ink);}
.lot-lock small{color:var(--ink-faint);}
@media (max-width:640px){.coin-bar-inner{padding-right:34px;} .coin-bar-actions .btn{flex:1 1 auto; text-align:center;}}

/* ---------------- wheel gifts: banner, list, reveal ---------------- */
.gift-banners{display:grid; gap:12px; margin:0 0 20px;}
.gift-banner{display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:16px; background:linear-gradient(120deg,#FFF3D6,#FBE3B4); border:1px solid #E8C877; color:#4A3410; box-shadow:0 10px 26px -18px rgba(150,100,10,.7);}
.gift-banner--ready{background:linear-gradient(120deg,#EAF5DA,#D5EBB8); border-color:#A9CF7C; color:#2F4A16;}
.gift-banner-media{width:64px; height:64px; flex:0 0 64px; border-radius:12px; object-fit:cover; background:#fff8e6; display:flex; align-items:center; justify-content:center; font-size:2rem;}
.gift-banner-text{flex:1; min-width:0;}
.gift-banner-text strong{display:block; font-size:1rem; line-height:1.3;}
.gift-banner-text p{margin:4px 0 0; font-size:.9rem; line-height:1.45;}
.gift-banner-text small{display:block; margin-top:6px; opacity:.75; font-size:.76rem;}
.gift-banner-btn{flex:0 0 auto; padding:.55em 1.1em; font-size:.85rem; white-space:nowrap;}
.gift-progress{height:8px; border-radius:99px; background:rgba(120,80,10,.15); margin-top:8px; overflow:hidden;}
.gift-progress span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#C8871B,#E9B94A);}
@media (max-width:560px){.gift-banner{flex-wrap:wrap;} .gift-banner-btn{width:100%; text-align:center;} .gift-banner-media{width:52px; height:52px; flex-basis:52px;}}
.gift-list{display:grid; gap:12px;}
.gift-card{display:flex; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line, #E3DCC6); border-radius:14px; background:var(--cream-card, #fff);}
.gift-card--off{opacity:.55;}
.gift-card-media{width:72px; height:72px; flex:0 0 72px; border-radius:12px; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:#FBF1D8;}
.gift-card-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.gift-card-body small{color:var(--ink-soft); font-size:.78rem;}
.gift-card-body .status-badge{align-self:flex-start;}
.gift-card-btn{flex:0 0 auto; padding:.5em 1em; font-size:.82rem;}
@media (max-width:480px){.gift-card{flex-wrap:wrap;} .gift-card-btn{width:100%;}}
.gift-reveal{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:18px; background:radial-gradient(ellipse at center, rgba(40,26,60,.86), rgba(8,8,18,.94)); animation:giftFade .4s ease both; overflow:auto;}
.gift-fx{position:fixed; inset:0; pointer-events:none;}
.gift-reveal-card{position:relative; z-index:2; width:min(92vw, 420px); text-align:center; padding:26px 22px 22px; border-radius:22px; background:#FFFBF0; color:#2b2412; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); animation:giftPop .7s cubic-bezier(.2,1.4,.4,1) both;}
.gift-reveal-glow{position:absolute; inset:-40px; z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(255,214,102,.55), transparent 62%); animation:giftGlow 2.4s ease-in-out infinite alternate;}
.gift-reveal-media{width:min(60vw, 220px); height:min(60vw, 220px); object-fit:cover; border-radius:18px; margin:0 auto 14px; display:block; box-shadow:0 12px 34px -10px rgba(0,0,0,.5); animation:giftBounce 1.6s ease-in-out infinite alternate;}
.gift-reveal-media--none{display:flex; align-items:center; justify-content:center; font-size:5rem; background:#FBF1D8; box-shadow:none;}
.gift-reveal-card h3{font-size:1.25rem; line-height:1.3; margin:0 0 8px;}
.gift-reveal-cond{color:#5f5638; font-size:.9rem; line-height:1.5; margin:0 0 16px;}
.gift-reveal-msg{margin:8px 0 12px; font-weight:600; color:#2F4A16;}
.gift-reveal-msg--err{color:#8A3324;}
.gift-reveal-send{margin:6px 0 4px; text-align:left;}
.gift-reveal-send label{display:block; font-size:.85rem; margin-bottom:6px;}
.gift-reveal-send input{width:100%; padding:.7em .9em; border:1px solid #d9cfae; border-radius:10px; font:inherit; margin-bottom:12px;}
.gift-reveal-actions{position:relative;}
.gift-reveal-close{position:absolute; top:-8px; right:-8px; width:32px; height:32px; border-radius:50%; border:0; background:#3a3320; color:#fff; font-size:1.2rem; line-height:1; cursor:pointer;}
@keyframes giftFade{from{opacity:0} to{opacity:1}}
@keyframes giftPop{0%{opacity:0; transform:scale(.4) rotate(-6deg)} 100%{opacity:1; transform:none}}
@keyframes giftGlow{from{opacity:.5; transform:scale(.92)} to{opacity:1; transform:scale(1.06)}}
@keyframes giftBounce{from{transform:translateY(0) rotate(-1.5deg)} to{transform:translateY(-6px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.gift-reveal-card,.gift-reveal-glow,.gift-reveal-media,.gift-reveal{animation:none;}}
.gift-reveal [hidden]{display:none!important;}

.story-step{position:relative;}
.story-edit-btn{position:absolute; top:6px; right:6px; z-index:4; background:#2F3A1E; color:#fff; font-size:.78rem; padding:.35em .8em; border-radius:999px; text-decoration:none; opacity:.92;}
.story-edit-btn:hover{background:var(--copper,#C07A22); color:#fff;}

/* ---- Haddabal expiry bar v2: bigger, warmer, with a countdown per batch ---- */
.coin-bar{background:radial-gradient(120% 200% at 0% 0%, #6B4B10 0%, #2B2410 55%, #1E190B 100%); border-bottom:3px solid #F0C878;}
.coin-bar--s2{background:radial-gradient(120% 200% at 0% 0%, #B23A1B 0%, #6E2412 55%, #3E1409 100%); border-bottom-color:#FFD98A;}
.coin-bar-inner{padding-top:16px; padding-bottom:16px; gap:14px 20px;}
.coin-bar-coin{width:60px; height:60px; border-width:3px; animation:coinBeat 1.8s ease-in-out 3;}
@keyframes coinBeat{0%,100%{transform:scale(1) rotate(-4deg)} 50%{transform:scale(1.09) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.coin-bar-coin{animation:none;}}
.coin-bar-text strong{font-size:1.2rem; letter-spacing:.01em;}
.coin-bar-text > span{display:block; margin-top:3px; font-size:.95rem; color:#FFF3D0;}
.coin-bar-text ul.coin-lots{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.coin-lot{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.09); border:1px solid rgba(240,200,120,.45); font-size:.8rem; color:#FBEBC0; max-width:100%;}
.coin-lot-n{flex:none; min-width:2.1em; height:2.1em; padding:0 .5em; border-radius:999px; background:linear-gradient(135deg,#F7D77E,#D9A441); color:#3A2A08; font-size:1rem; display:flex; align-items:center; justify-content:center;}
.coin-lot-txt{flex:1 1 auto; min-width:0; line-height:1.35;}
.coin-lot-count{flex:none; font-variant-numeric:tabular-nums; font-weight:700; color:#fff; background:rgba(0,0,0,.35); padding:.25em .65em; border-radius:999px; white-space:nowrap;}
.coin-bar-actions .btn-copper{box-shadow:0 8px 20px -8px rgba(240,160,40,.9);}
@media (max-width:640px){.coin-lot{width:100%; flex-wrap:wrap;} .coin-lot-count{margin-left:auto;} .coin-bar-coin{width:48px; height:48px;}}

.phase-head{font-size:1.1rem; margin:26px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--line,#E3DCC6);}
.phase-head--2{margin-top:36px; color:#8A5A12;}
.phase-note{padding:12px 16px; border-radius:12px; background:#FFF3D6; border:1px solid #E8C877; color:#5A3F0C; font-size:.92rem; line-height:1.5; margin-bottom:14px;}
.phase-note--open{background:#EAF5DA; border-color:#A9CF7C; color:#2F4A16;}
.level-map--locked{opacity:.6; filter:grayscale(.35);}
@media (max-width:640px){.coin-bar-inner{padding-left:16px !important;} .coin-bar-coin{margin-left:0;}}

/* ---- account: coin batches card (always visible on "My Haddabal") ---- */
.coin-acct{margin:22px 0; padding:18px 16px; border-radius:18px; color:#FFF3D0; border:2px solid #F0C878; background:radial-gradient(120% 160% at 0% 0%, #6B4B10 0%, #2B2410 60%, #1E190B 100%);}
.coin-acct-head{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
.coin-acct-coin{flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid #F0C878;}
.coin-acct-head strong{display:block; font-size:1.1rem; color:#fff;}
.coin-acct-head span{font-size:.85rem; color:#F6E2AE;}
.coin-acct .coin-lots{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.coin-acct .coin-lot-txt{display:flex; flex-direction:column; gap:2px; font-size:.82rem;}
.coin-lot--soon{border-color:#F0C878; background:rgba(240,200,120,.16);}
.coin-lot--last{border-color:#FF9D7A; background:rgba(200,60,30,.3);}
.coin-acct-promo{margin:14px 0 10px; font-size:.92rem;}
.coin-acct .lot-lock{color:#FFD98A;}
@media (max-width:520px){.coin-acct .coin-lot{flex-wrap:wrap;} .coin-acct .coin-lot-txt{flex:1 1 60%;} .coin-acct .coin-lot-count{margin-left:auto;}}

.gift-reveal-shop{display:inline-block; margin:12px auto 0; padding:.6em 1.4em; font-size:.9rem;}
.gift-reveal-actions{margin-top:4px;}
.gift-reveal-card .gift-reveal-close{top:10px; right:10px; z-index:3;}
[hidden]{display:none !important;}

/* ---- coin-bar v3: compact everywhere, especially on phones (one lot line, tighter type) ---- */
.coin-bar-inner{padding-top:12px; padding-bottom:12px; gap:10px 16px;}
.coin-bar-coin{animation-iteration-count:2;}
.coin-bar-text strong{font-size:1.05rem;}
.coin-bar-text > span{font-size:.86rem; line-height:1.35;}
.coin-lot{padding:6px 10px; gap:8px;}
.coin-lot-n{min-width:1.8em; height:1.8em; font-size:.86rem;}
.coin-lot-txt{font-size:.8rem;}
.coin-lot--more{background:transparent; border-style:dashed; padding:5px 10px;}
.coin-lot--more a{color:#FFE9B8; text-decoration:underline; font-size:.78rem;}
@media (max-width:640px){
  .coin-bar-coin{width:34px; height:34px; border-width:2px;}
  .coin-bar-inner{padding-top:10px; padding-bottom:10px; gap:6px 10px;}
  .coin-bar-text strong{font-size:.92rem;}
  .coin-bar-text > span{font-size:.78rem;}
  .coin-lots{margin-top:6px !important;}
  .coin-lot{width:auto; flex:1 1 auto; padding:5px 9px;}
  .coin-lot-txt{font-size:.74rem;}
  .coin-lot-count{font-size:.72rem; padding:.2em .5em;}
  .coin-bar-actions{gap:6px; margin-top:2px; width:100%;}
  .coin-bar-actions .btn{flex:1 1 calc(50% - 6px); padding:.42em .6em; font-size:.74rem;}
  .coin-bar-terms{flex:1 1 100%; text-align:center; order:3; font-size:.72rem;}
}