/* Dubai Shop v2 (2026-10-30) — compact Shopee-style hero + tiles, Ivory & Gold. Loaded last (after theme-ivory.css). CSS only. */

/* ---------- Compact hero: ~340px desktop, ~290px mobile ---------- */
.hero .wrap{grid-template-columns:minmax(0,1fr) 168px;gap:14px;padding-block:22px;align-items:center}
.hero-copy{order:1;text-align:left}
.hero-media{order:2;padding:0}
.hero-copy h1{font-size:clamp(22px,1rem + 2.2vw,40px);line-height:1.12;margin:6px 0 8px}
.hero-copy p{font-size:var(--fs-sm);margin:0 0 12px;max-width:46ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-ctas{justify-content:flex-start;gap:8px}
.hero-ctas .btn--lg{height:40px;padding:0 16px;font-size:var(--fs-sm)}
.hero-media::before{width:168px;filter:none}
.hero .arch-frame{width:168px;max-width:168px;padding:6px}
.hero .arch-frame{margin:0}
.hero .arch{max-height:none}
.hero .plinth{display:none}
.hero-tag{position:static;margin-top:6px;padding:6px 10px;font-size:11px;text-align:center;border-radius:8px}
.hero-tag b{font-size:15px!important}
@media (max-width:767px){
  .hero .wrap{min-height:0;max-height:none}
  .hero-ctas .btn--ghost{display:none}
  .hero-tag{display:none}
}
@media (min-width:768px){
  .hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding-block:22px;min-height:300px}
  .hero-media::before{width:280px}
  .hero .arch-frame{width:180px;max-width:180px;padding:8px}
  .hero-media{display:flex;flex-direction:column;align-items:center}
}
@media (min-width:1280px){ .hero .wrap{min-height:320px} }

/* ---------- Tiles: 6 / row at 1280+, 4-5 tablet, 2 mobile; gap 8-10px ---------- */
.grid,.shop-layout .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:700px){ .grid,.shop-layout .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} }
@media (min-width:1024px){ .grid,.shop-layout .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1280px){ .grid,.shop-layout .grid{grid-template-columns:repeat(6,minmax(0,1fr))} .shop-layout{grid-template-columns:230px minmax(0,1fr)} }
.card.tile{background:var(--t-surface,#fff);border:1px solid var(--t-line,#E4D8C4);border-radius:6px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.card.tile:hover{border-color:var(--t-deco,#C9A35A);box-shadow:0 4px 14px rgba(122,90,31,.12)}
.card.tile .card-media{aspect-ratio:1/1;border:0;border-radius:0;border-bottom:1px solid var(--t-line,#E4D8C4)}
.card.tile .card-media img{width:100%;height:100%;object-fit:cover}
.card.tile:hover .card-media img{transform:none}
.card.tile .card-tags{top:6px;left:6px;gap:4px}
.card.tile .card-tags>span{height:18px;padding:0 6px;font-size:10px;border-radius:3px}
.card.tile .pill-new{background:var(--t-badge,#7A5A1F);color:var(--t-badge-ink,#fff)}
.card.tile .pill-out{background:rgba(31,27,22,.72);color:#fff}
.tile-off{position:absolute;top:0;right:0;background:var(--t-soft,#F1E3C4);color:var(--t-strong,#7A5A1F);font-size:11px;font-weight:700;padding:3px 6px;border-bottom-left-radius:6px;line-height:1.2}
.card.tile .card-body{padding:6px 8px 8px;gap:2px}
.card.tile .card-brand{font-size:10px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.tile .card-name{font-family:var(--sans,Inter,system-ui,sans-serif);font-size:13px;font-weight:500;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.tile .card-meta{display:none}
.card.tile .price{margin-top:2px;font-size:15px;font-weight:700;color:var(--t-strong,#7A5A1F);gap:6px}
.card.tile .price s{font-size:11px}
.card.tile .price .sale{color:var(--t-strong,#7A5A1F)}
.card.tile .no-price{color:var(--t-strong,#7A5A1F);font-weight:600;font-size:13px}
.tile-stats{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t-muted,#5E554B);flex-wrap:wrap;min-height:16px}
.tile-stats .card-rating{font-size:11px}
.tile-sold{white-space:nowrap}
.tile-loc{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--t-muted,#5E554B);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-loc .icon{width:12px;height:12px;flex:none;stroke:var(--t-deco,#C9A35A)}
.card.tile .quick{width:32px;height:32px;right:6px;bottom:6px}
.card.tile .quick .icon{width:16px;height:16px}
@media (min-width:1024px) and (not (pointer:coarse)){
  .card.tile .quick{width:auto;height:30px;left:6px;right:6px;bottom:6px;font-size:12px}
}

/* ---------- Brand logos (home brand tiles + product page) ---------- */
.brand-logo{display:block;height:44px;width:auto;max-width:200px;object-fit:contain;margin:0 auto 8px}
.brand-mono{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 8px;border-radius:50%;border:1px solid var(--t-deco,#C9A35A);color:var(--t-strong,#7A5A1F);font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.02em;background:var(--t-surface,#fff)}
.pdp-brand-logo{height:40px;width:auto;max-width:200px;object-fit:contain;display:block;margin:0 0 6px}

/* ---------- Rating filter (shop sidebar) ---------- */
.rate-opt{display:flex;align-items:center;gap:8px;min-height:var(--ctl,40px);font-size:var(--fs-sm);color:var(--t-ink)}
.rate-opt .stars{color:var(--t-deco,#C9A35A);letter-spacing:1px}
.rate-opt .stars .off{color:var(--t-line,#E4D8C4)}
.rate-opt.on{font-weight:600;color:var(--t-strong,#7A5A1F)}
.rate-opt .n{color:var(--t-muted);font-size:var(--fs-xs);margin-left:auto}

/* ---------- Rate Your Order / Items ---------- */
.rate-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--t-soft,#F1E3C4);border:1px solid var(--t-soft-border,#C9A35A);color:var(--t-soft-ink,#5C4416);border-radius:8px;padding:12px 14px;margin:0 0 16px}
.rate-banner b{font-weight:600}
.rate-banner .btn{margin-left:auto}
.rate-items{display:grid;gap:12px}
.rate-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;border:1px solid var(--t-line);border-radius:8px;padding:12px;background:var(--t-surface,#fff)}
.rate-item img{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--t-line)}
.rate-item .ri-name{font-weight:600;margin:0 0 6px}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{font-size:28px;line-height:1;color:var(--t-line,#E4D8C4);cursor:pointer;padding:2px}
.star-input input:checked~label,.star-input label:hover,.star-input label:hover~label{color:var(--t-deco,#C9A35A)}
.star-input input:focus-visible+label{outline:2px solid var(--t-strong);outline-offset:2px}
.rate-item .ri-fields{display:grid;gap:8px;margin-top:8px}
.rate-item input[type=text],.rate-item textarea{width:100%;border:1px solid var(--t-line);border-radius:6px;padding:8px 10px;font:inherit;background:#fff}
.rate-item textarea{min-height:72px}
.rate-item .ri-done{color:var(--t-muted);font-size:var(--fs-sm)}
.rate-item .ri-done .stars{color:var(--t-deco,#C9A35A)}
/* Brand tiles with logo above the name */
.brand-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:104px;padding:12px 10px}
.brand-tile .brand-logo,.brand-tile .brand-mono{margin:0 auto 8px}
.brand-tile span:not(.brand-mono){line-height:1.25}
/* Rating filter chip, Clear All, dropdown heading */
.chip .stars{color:var(--t-deco,#C9A35A);letter-spacing:1px}
.chip--clear{background:transparent;border-style:dashed}
.drop-h{margin:10px 0 2px;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted)}
.rate-list{display:grid;gap:2px}
.rate-wrap{margin-top:20px;padding-top:16px;border-top:1px solid var(--t-line,#E4D8C4)}
.rate-wrap h2{margin:0 0 4px}
fieldset.star-input{border:0;padding:0;margin:4px 0 0;min-width:0}

/* hero frame: square corners instead of the dome (30 Oct) */
.hero .arch-frame,.hero .arch{border-radius:0}

/* ---------- Hero v3 (30 Oct): square #1 photo beside the copy + #2/#3 best-seller tiles on the right ---------- */
.hero3 .wrap{grid-template-columns:minmax(0,1fr) 132px;grid-template-areas:"copy main" "picks picks";gap:12px 14px;padding-block:18px;min-height:0;align-items:center}
.hero3 .hero-copy{grid-area:copy;min-width:0}
.h3-main{grid-area:main;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.h3-sq{position:relative;display:block;aspect-ratio:1;padding:6px;border:1px solid var(--hair);border-radius:0;background:var(--t-surface,#fff)}
.h3-sq img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.h3-sq:hover img,.h3-pick-img:hover img{transform:scale(1.04)}
.h3-tag{display:none;text-align:center;font-size:11px;line-height:1.3;color:var(--t-muted)}
.h3-tag span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--t-strong)}
.h3-tag b{display:block;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--t-ink)}
.h3-tag b small,.h3-pick-price small{font-family:var(--sans,inherit);font-size:10px;font-weight:400;color:var(--t-muted)}
.h3-tag em{font-style:normal}
.h3-picks{grid-area:picks;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.h3-pick{display:flex;align-items:center;gap:10px;min-width:0;padding:6px;background:var(--t-surface,#fff);border:1px solid var(--hair);border-radius:0;transition:border-color .2s,box-shadow .2s}
.h3-pick:hover{border-color:var(--t-deco);box-shadow:0 8px 22px -14px rgba(122,90,31,.45)}
.h3-pick-img{flex:0 0 auto;display:block;width:56px;aspect-ratio:1;overflow:hidden;background:var(--t-bg)}
.h3-pick-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.h3-pick-body{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
.h3-rank{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-strong)}
.h3-pick-name{font-family:var(--serif);font-size:13px;font-weight:600;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-pick-name:hover{color:var(--t-strong)}
.h3-pick-meta{font-size:10.5px;color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-pick-price{font-size:12.5px;font-weight:600;color:var(--t-strong)}
@media (max-width:767px){ .hero3 .h3-pick-meta{display:none} }
@media (min-width:768px){
  .hero3 .wrap{grid-template-columns:minmax(0,1.15fr) 168px minmax(0,1fr);grid-template-areas:"copy main picks";gap:clamp(16px,2.4vw,36px);padding-block:22px;min-height:300px}
  .hero3.hero3--solo .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"copy main";justify-items:start}
  .hero3--solo .h3-main{width:200px}
  .h3-tag{display:block}
  .h3-picks{grid-template-columns:minmax(0,1fr);gap:12px;align-self:center}
  .h3-pick{gap:12px;padding:8px}
  .h3-pick-img{width:72px}
  .h3-pick-name{font-size:14px}
}
@media (min-width:1024px){
  .hero3 .wrap{grid-template-columns:minmax(0,1.1fr) 210px minmax(0,1fr)}
  .h3-pick-img{width:96px}
  .h3-pick-name{font-size:16px}
  .h3-rank{font-size:10px}
  .h3-pick-price{font-size:14px}
}
@media (min-width:1280px){ .hero3 .wrap{min-height:320px} }

/* New badge: red (30 Oct) */
.pill-new,.card.tile .pill-new{background:#C62828;color:#fff}

/* Shop By Brand: tiles with a real wordmark logo hide the duplicate name text (kept for screen readers) and the logo fills the tile (30 Oct) */
.brand-tile:has(img.brand-logo){justify-content:center}
.brand-tile:has(img.brand-logo) .brand-logo{height:60px;max-width:88%;margin:0 auto}
.brand-tile:has(img.brand-logo) > span:not(.brand-mono){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:1024px){ .brand-tile:has(img.brand-logo) .brand-logo{height:68px} }

/* ---------- Hero v4 (30 Oct 2026): Shopee-style promo carousel (left) + UAE red / UAE green best-seller banners (right).
   Markup: shop/index.php .hero4 / .hc / .hb; JS: assets/js/hero-carousel.js. Motion is transform/opacity only and lives inside
   prefers-reduced-motion:no-preference; hero height ~310px phones, ~312px tablets, ~336px desktop. ---------- */
.hero.hero4 .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hc" "hb";gap:8px;padding-block:12px;min-height:0;max-height:none;align-items:stretch}
.hero4 .wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:30%;top:50%;width:min(900px,130%);aspect-ratio:1.6;margin:calc(min(900px,130%) / -3.2) 0 0 calc(min(900px,130%) / -2);border-radius:50%;background:radial-gradient(closest-side,rgba(232,196,120,.38),rgba(201,163,90,.16) 45%,rgba(201,163,90,0) 100%)}
.hero4 .wrap::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-6%;top:-30%;width:min(520px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,205,.6),rgba(241,227,196,.22) 50%,rgba(241,227,196,0) 100%)}
.hero4--solo .wrap{grid-template-areas:"hc"}
/* carousel */
.hc{grid-area:hc;position:relative;overflow:hidden;height:186px;border-radius:4px;background:#14100C;box-shadow:0 14px 34px -22px rgba(58,30,10,.6);min-width:0}
.hc-track{display:flex;height:100%;will-change:transform}
.hc-slide{position:relative;flex:0 0 100%;min-width:0;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px 14px;color:#FBF3E2;overflow:hidden}
.hc-slide::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--pattern);background-size:56px 56px;opacity:.06;pointer-events:none}
.hc-slide--best{background:linear-gradient(118deg,#120E0B 0%,#2A1A12 45%,#5C1426 100%)}
.hc-slide--new{background:linear-gradient(118deg,#FFF9EC 0%,#F4E6C6 55%,#E3C58A 100%);color:#2A1D12}
.hc-slide--sale{background:linear-gradient(118deg,#4A0B1B 0%,#7A1830 55%,#9E2A3A 100%)}
.hc-slide--brand{background:linear-gradient(118deg,#0C0A08 0%,#1E1710 55%,#3A2913 100%)}
.hc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.hc-eye{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#E8C770;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hc-head{margin:0;font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.02;letter-spacing:.01em;background:linear-gradient(92deg,#F7E7B4 0%,#D9B24C 45%,#F3DDA0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:2px}
.hc-slide--new .hc-head{background:none;color:#6B1028}
.hc-slide--new .hc-eye{color:#7A5A1F}
.hc-name{font-family:var(--serif);font-size:15px;font-weight:600;color:inherit;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
a.hc-name:hover{color:#E8C770}
.hc-slide--new a.hc-name:hover{color:#6B1028}
.hc-meta{display:none;font-size:11.5px;opacity:.85;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-price{font-family:var(--serif);font-size:19px;font-weight:600;color:#F1D27E;line-height:1.2}
.hc-price s{font-family:var(--sans,inherit);font-size:12px;font-weight:400;opacity:.75;margin-right:4px}
.hc-price small{font-family:var(--sans,inherit);font-size:10px;font-weight:400;opacity:.8}
.hc-slide--new .hc-price{color:#6B1028}
.hc-ctas{display:flex;gap:8px;margin-top:8px;max-width:100%}
.hc-ctas .btn--lg{height:34px;padding:0 14px;font-size:12.5px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hc .hc-more{display:none;color:#FBF3E2;border-color:rgba(232,199,112,.7);background:transparent}
.hc .hc-more:hover{background:#FBF3E2;color:#1A120C;border-color:#FBF3E2}
.hc-sq{position:relative;display:block;width:132px;aspect-ratio:1;padding:6px;background:#FFFDF8;border:1px solid #D4AF37;border-radius:0;box-shadow:0 0 0 4px rgba(212,175,55,.16),0 16px 30px -18px rgba(0,0,0,.7);overflow:hidden}
.hc-sq img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hc-sq--logo{display:grid;place-items:center;padding:14px}
.hc-sq--logo img{height:auto;max-height:100%;mix-blend-mode:normal}
.hc-sq::after,.hb-card::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:45%;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,250,235,.6) 50%,rgba(255,255,255,0) 100%);opacity:0;transform:skewX(-12deg)}
.hc-arrow{display:none;position:absolute;top:50%;z-index:2;width:34px;height:54px;margin-top:-27px;border:0;padding:0;background:rgba(10,8,6,.38);color:#FBF3E2;font-size:30px;line-height:50px;text-align:center;cursor:pointer}
.hc-prev{left:0;border-radius:0 3px 3px 0}.hc-next{right:0;border-radius:3px 0 0 3px}
.hc-arrow:hover{background:rgba(10,8,6,.6);color:#E8C770}
.hc-dots{display:none;position:absolute;z-index:2;bottom:7px;right:14px;width:132px;justify-content:center;gap:6px}
.hc--js .hc-dots{display:flex}
.hc-dot{width:7px;height:7px;padding:0;border:1px solid rgba(232,199,112,.9);border-radius:50%;background:rgba(255,253,248,.55);cursor:pointer}
.hc-dot[aria-current="true"]{background:#D4AF37;border-color:#D4AF37;transform:scale(1.3)}
.hc-arrow:focus-visible,.hc-dot:focus-visible{outline:2px solid #E8C770;outline-offset:2px}
/* UAE flag banners */
.hb{grid-area:hb;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.hb-card{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:92px;padding:8px 8px 12px 10px;color:#fff;border-radius:4px;overflow:hidden;box-shadow:0 12px 26px -18px rgba(0,0,0,.65)}
.hb-card--red{background:linear-gradient(115deg,#B71C2B 0%,#CC2533 66%,#EF3340 100%)}
.hb-card--green{background:linear-gradient(115deg,#00521F 0%,#00632A 55%,#00732F 100%)}
.hb-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(#fff 0 2px,#D4AF37 2px 3px,#000 3px 5px);pointer-events:none}
.hb-body{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;line-height:1.2}
.hb-rank{font-size:10px;font-weight:600;letter-spacing:.04em;color:#fff;padding:1px 6px;border:1px solid #E8C770;background:rgba(0,0,0,.28);border-radius:2px;white-space:nowrap}
.hb-name{font-family:var(--serif);font-size:14px;font-weight:600;color:#fff;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-name:hover{color:#fff;text-decoration:underline;text-decoration-color:#E8C770}
.hb-meta{display:none;font-size:11px;color:#fff;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-price{font-size:13px;font-weight:700;color:#fff}
.hb-price small{font-size:9.5px;font-weight:400}
.hb-go{display:none;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.03em;color:#fff;border-bottom:1px solid #E8C770}
.hb-img{flex:0 0 auto;display:block;width:56px;aspect-ratio:1;padding:3px;background:#FFFDF8;border:1px solid #E8C770;overflow:hidden}
.hb-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (min-width:768px){
  .hero.hero4 .wrap{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"hc hb";gap:10px;padding-block:16px}
  .hero4--solo.hero .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"hc"}
  .hc{height:280px}
  .hc-slide{padding:20px 50px 24px;gap:22px}
  .hc--js .hc-arrow{display:block}
  .hc-dots{right:auto;left:0;width:100%;bottom:9px}
  .hc-dot{width:8px;height:8px}
  .hc-eye{font-size:11px}
  .hc-head{font-size:40px}
  .hc-name{font-size:18px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hc-meta{display:block}
  .hc-price{font-size:22px}
  .hc-ctas{margin-top:10px}
  .hc-ctas .btn--lg{height:40px;padding:0 18px;font-size:13.5px}
  .hc-sq{width:200px;padding:8px}
  .hb{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;height:280px}
  .hb-card{min-height:0}
  .hb-card{height:auto;padding:10px 10px 14px 14px;gap:10px}
  .hb-rank{font-size:9.5px}
  .hb-name{font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hb-price{font-size:14px}
  .hb-img{width:84px;padding:4px}
}
@media (min-width:1024px){
  .hero.hero4 .wrap{gap:12px;padding-block:18px}
  .hc{height:300px}
  .hc-slide{padding:22px 60px 26px}
  .hc-head{font-size:52px}
  .hc .hc-more{display:inline-flex}
  .hc-sq{width:228px}
  .hb{gap:12px;height:300px}
  .hb-card{padding:12px 12px 16px 18px}
  .hb-name{font-size:20px}
  .hb-go{display:inline-block}
  .hb-price{font-size:15px}
  .hb-img{width:104px}
}
@media (min-width:1280px){ .hero.hero4 .wrap{min-height:0} .hb-img{width:112px} .hb-name{display:block;white-space:nowrap;-webkit-line-clamp:unset} .hb-meta{display:block} }
@media (prefers-reduced-motion:no-preference){
  @keyframes h4Glow{0%{transform:translate3d(-4%,-3%,0) scale(1);opacity:.75}50%{transform:translate3d(5%,2%,0) scale(1.08);opacity:1}100%{transform:translate3d(-2%,4%,0) scale(.96);opacity:.8}}
  @keyframes h4Glow2{0%{transform:translate3d(0,0,0) scale(1);opacity:.55}100%{transform:translate3d(-8%,10%,0) scale(1.12);opacity:.9}}
  @keyframes h4In{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @keyframes h4InSide{from{opacity:0;translate:18px 0}to{opacity:1;translate:0 0}}
  @keyframes h4Float{0%,100%{translate:0 3px}50%{translate:0 -5px}}
  @keyframes h4Shine{0%,72%{opacity:0;transform:translateX(0) skewX(-12deg)}76%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-12deg)}}
  .hero4 .wrap::before{animation:h4Glow 16s ease-in-out infinite alternate}
  .hero4 .wrap::after{animation:h4Glow2 11s ease-in-out infinite alternate}
  .hero4 .hc{animation:h4In .7s cubic-bezier(.2,.7,.2,1) both}
  .hero4 .hb-card{animation:h4InSide .7s cubic-bezier(.2,.7,.2,1) .25s both}
  .hero4 .hb-card + .hb-card{animation-delay:.4s}
  .hc-track{transition:transform .65s cubic-bezier(.65,0,.25,1)}
  .hc:not(.hc--js) .hc-slide:first-child .hc-copy > *,.hc--js .hc-slide.is-on .hc-copy > *{animation:h4In .6s cubic-bezier(.2,.7,.2,1) both}
  .hc-copy > :nth-child(2){animation-delay:.07s!important}
  .hc-copy > :nth-child(3){animation-delay:.14s!important}
  .hc-copy > :nth-child(4){animation-delay:.2s!important}
  .hc-copy > :nth-child(5){animation-delay:.26s!important}
  .hc-copy > :nth-child(6){animation-delay:.32s!important}
  .hc-sq img{animation:h4Float 5.5s ease-in-out 1s infinite}
  .hc-sq--logo img{animation:none}
  .hc-sq::after{animation:h4Shine 7s ease-in-out 1.6s infinite}
  .hb-card::before{animation:h4Shine 9s ease-in-out 3s infinite}
  .hb-card + .hb-card::before{animation-delay:5.5s}
  .hb-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  .hb-img img,.hc-sq img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .hc-ctas .btn,.hc-arrow{transition:transform .25s,box-shadow .3s,background-position .4s,background-color .25s,color .25s,border-color .25s}
  .hc-dot{transition:transform .3s,background-color .3s}
  @media (hover:hover){
    .hb-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -16px rgba(0,0,0,.7)}
    .hb-card:hover .hb-img img{transform:scale(1.08)}
    .hc-sq:hover img{transform:scale(1.05)}
    .hc-ctas .btn:hover{transform:translateY(-1px)}
    .hc-ctas .btn--gold:hover{box-shadow:0 0 0 3px rgba(212,175,55,.22),0 8px 22px -8px rgba(212,175,55,.85)}
  }
}
@media (prefers-reduced-motion:reduce){
  .hero4 *,.hero4 .wrap::before,.hero4 .wrap::after,.hero4 *::before,.hero4 *::after{animation:none!important;transition:none!important}
  .hc-sq::after,.hb-card::before{display:none}
}

/* ---- Hero v5 banners (30 Oct 2026): Shopee-style "play of colours" on the UAE red/green #2 and #3 cards.
   White swoosh ring behind a big tilted photo, heavy yellow headline, white tag, black price pill, teal/navy chips,
   small sparkles. Text stays on the darker left side of each gradient (white >= 5.4:1, yellow >= 3.8:1 large text). */
.hb-card{--hb-ring:150px;align-items:stretch;padding:8px 8px 11px 10px;border-radius:6px}
.hb-card--red{background:radial-gradient(circle at 86% 50%,rgba(255,255,255,.16) 0 34%,rgba(255,255,255,0) 35%),linear-gradient(115deg,#B71C2B 0%,#C8232F 52%,#EF3340 100%)}
.hb-card--green{background:radial-gradient(circle at 86% 50%,rgba(255,255,255,.14) 0 34%,rgba(255,255,255,0) 35%),linear-gradient(115deg,#00521F 0%,#005F28 52%,#00732F 100%)}
.hb-ring{position:absolute;z-index:-1;right:calc(var(--hb-ring) * -.28);top:50%;width:var(--hb-ring);aspect-ratio:1;margin-top:calc(var(--hb-ring) * -.5);border-radius:50%;border:calc(var(--hb-ring) * .085) solid rgba(255,255,255,.9);border-left-color:rgba(255,255,255,.55);pointer-events:none}
.hb-body{justify-content:center;gap:3px;z-index:1;flex:1 1 0}
.hb-card .hb-img{margin-left:4px}
.hb-top{display:flex;align-items:center;gap:4px;min-width:0}
.hb-rank{font-family:var(--sans,Inter,system-ui,sans-serif);font-size:9.5px;font-weight:700;letter-spacing:.01em;padding:2px 7px 2px 6px;border:0;border-radius:3px 10px 10px 3px;background:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
.hb-card--red .hb-rank{color:#9E1622}
.hb-card--green .hb-rank{color:#00521F}
.hb-chip{display:none;flex:0 0 auto;font-family:var(--sans,Inter,system-ui,sans-serif);font-size:9px;font-weight:700;line-height:1;letter-spacing:.03em;color:#fff;padding:3px 6px;border-radius:3px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hb-chip--teal{background:#0B7A75}
.hb-chip--navy{background:#14254D}
.hb-name{font-family:"Arial Black","Segoe UI Black",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;font-weight:900;font-size:13px;line-height:1.1;letter-spacing:-.01em;color:#FFD400;text-shadow:0 2px 0 rgba(0,0,0,.22),0 0 10px rgba(0,0,0,.18)}
.hb-name:hover{color:#FFE14D;text-decoration:none}
.hb-brand{display:none;font-size:11px;font-weight:600;color:#fff;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-buy{display:flex;align-items:center;gap:5px;min-width:0;margin-top:2px}
.hb-price{display:inline-block;font-family:var(--sans,Inter,system-ui,sans-serif);font-size:11px;font-weight:700;line-height:1;color:#fff;background:#111;padding:5px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 8px -3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
.hb-price small{font-size:9px;font-weight:500}
.hb-meta,.hb-go{display:none}
.hb-img{position:relative;z-index:1;align-self:center;width:62px;padding:3px;background:#fff;border:0;border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 16px -6px rgba(0,0,0,.55),0 0 0 2px rgba(255,212,0,.85)}
.hb-img img{border-radius:3px}
.hb-spark{position:absolute;z-index:0;display:block;width:9px;height:9px;background:#FFD400;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);pointer-events:none}
.hb-spark--a{right:8px;top:7px}
.hb-spark--b{right:calc(var(--hb-ring) * .62);bottom:13px;width:6px;height:6px;background:#fff}
.hb-spark--c{display:none;right:calc(var(--hb-ring) * .5);top:12px;width:7px;height:7px;background:#FFE680;opacity:.85}
@media (min-width:768px){
  .hb-card{--hb-ring:190px;padding:10px 12px 14px 14px}
  .hb-rank{font-size:10px}
  .hb-name{font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hb-price{font-size:12px;padding:6px 12px}
  .hb-img{width:92px;padding:4px}
  .hb-spark{width:11px;height:11px}
  .hb-spark--c{display:block}
}
@media (min-width:1024px){
  .hb-card{--hb-ring:210px;padding:12px 14px 16px 18px}
  .hb-body{gap:4px}
  .hb-name{font-size:18px}
  .hb-brand{display:block}
  .hb-price{font-size:13px}
  .hb-img{width:112px;padding:5px}
}
@media (min-width:1280px){
  .hb-card{--hb-ring:220px}
  .hb-name{font-size:20px;display:-webkit-box;white-space:normal;-webkit-line-clamp:2}
  .hb-img{width:120px}
  .hb-meta{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .hb-spark{animation:h5Twinkle 3.2s ease-in-out infinite}
  .hb-spark--b{animation-delay:1.1s}
  .hb-spark--c{animation-delay:2.1s}
  .hb-card + .hb-card .hb-spark{animation-duration:3.8s}
  .hb-img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  @media (hover:hover){
    .hb-card:hover .hb-img{transform:rotate(-2deg) scale(1.05)}
    .hb-card:hover .hb-img img{transform:none}
  }
  @keyframes h5Twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
}
@media (prefers-reduced-motion:reduce){
  .hb-spark{animation:none;opacity:.8}
}

/* ---- Hero v5 scenes (30 Oct 2026): each carousel slide is a little CSS scene (no images beyond product photos / brand logos,
   no external hosts). Layers: .hc-scene (aria-hidden: rays, spotlight, glowing arc, curtains, seats, sparkles, coins, confetti)
   under .hc-copy + .hc-art. Motion is transform/opacity only and switched off under prefers-reduced-motion. ---- */
.hero5 .hc-slide{isolation:isolate;color:#FFF8EA}
.hero5 .hc-slide::before{z-index:0}
.hc-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hc-scene i{position:absolute;display:block}
.hero5 .hc-copy,.hc-art{position:relative;z-index:1}
.hero5 .hc-slide--best{background:radial-gradient(ellipse 34% 95% at 80% 0,rgba(255,214,140,.38),rgba(255,214,140,0) 72%),linear-gradient(180deg,#2E0812 0%,#16060B 72%,#0B0406 100%)}
.hero5 .hc-slide--new{background:radial-gradient(ellipse 60% 120% at 82% 110%,rgba(255,180,80,.35),rgba(255,180,80,0) 60%),linear-gradient(118deg,#3A0614 0%,#6E0D22 55%,#A3142C 100%);color:#FFF8EA}
.hero5 .hc-slide--sale{background:radial-gradient(ellipse 55% 110% at 88% 50%,rgba(255,196,80,.45),rgba(255,196,80,0) 65%),linear-gradient(110deg,#A3141F 0%,#C81E2A 42%,#E2432A 74%,#F2852A 100%)}
.hero5 .hc-slide--brand{background:radial-gradient(circle at 22% 50%,rgba(255,235,200,.28),rgba(255,235,200,0) 45%),linear-gradient(110deg,#A85A2C 0%,#B4652F 55%,#9E5126 100%)}
.hero5 .hc-slide--trust{background:radial-gradient(circle at 30% 55%,#FFD27A 0%,#F5A43A 34%,#DE6A22 66%,#A8361A 100%)}
/* light rays (all slides), centred behind the art / headline */
.hc-rays{width:180%;aspect-ratio:1;left:30%;top:50%;margin:-90% 0 0 -90%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,200,.22) 0 5deg,rgba(255,240,200,0) 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 50%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 50%)}
.hc-slide--best .hc-rays,.hc-slide--new .hc-rays,.hc-slide--sale .hc-rays{left:auto;right:-90%;margin:-90% 0 0 0;transform:translateX(-22%)}
.hc-slide--best .hc-rays{opacity:.4}
.hc-slide--trust .hc-rays{opacity:.8}
/* spotlight cone (Best Seller) */
.hc-spot{display:none!important}
.hc-slide--best .hc-spot{display:block!important;top:0;bottom:0;right:4%;width:44%;background:linear-gradient(180deg,rgba(255,236,190,.34),rgba(255,236,190,.06) 85%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
/* glowing arc (Sale / New) */
.hc-arc{display:none!important}
.hc-slide--sale .hc-arc,.hc-slide--new .hc-arc{display:block!important;right:-22%;top:-75%;width:95%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,110,0) 56%,rgba(255,226,140,.6) 60%,rgba(255,170,60,.28) 64%,rgba(255,170,60,0) 71%)}
/* stage: curtains, scalloped valance, seats (Best Seller / New Arrivals) */
.hc-curtain{top:0;bottom:0;width:7%;z-index:1;background:repeating-linear-gradient(90deg,#4A0716 0 5px,#8E1730 9px,#B42340 11px,#6A0C21 15px,#4A0716 18px);box-shadow:0 0 14px rgba(0,0,0,.55)}
.hc-curtain--l{left:0;border-radius:0 0 100% 0/0 0 70% 0}
.hc-curtain--r{right:0;border-radius:0 0 0 100%/0 0 0 70%}
.hc-valance{top:0;left:0;right:0;height:14px;z-index:2;background:radial-gradient(circle at 50% 0,#8E1730 0 9px,rgba(0,0,0,0) 10px) 0 4px/22px 14px repeat-x,linear-gradient(#5E0A1C,#5E0A1C) 0 0/100% 5px no-repeat;filter:drop-shadow(0 2px 0 #C9971F)}
.hc-seats{left:0;right:0;bottom:0;height:12px;z-index:1;opacity:.85;background:radial-gradient(ellipse 11px 9px at 50% 100%,#3A0812 0 96%,rgba(0,0,0,0) 100%) 0 100%/26px 12px repeat-x}
.hc-slide--new .hc-seats{display:none}
/* sparkles, coins, confetti */
.hc-spark{width:12px;height:12px;background:#FFE7A0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px rgba(255,230,150,.9))}
.hc-spark--1{top:14%;left:46%}.hc-spark--2{top:22%;right:9%;width:9px;height:9px}.hc-spark--3{bottom:22%;left:56%;width:8px;height:8px}.hc-spark--4{top:62%;right:3%;width:14px;height:14px}
.hc-coin{display:none!important;width:22px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6C4,#F4C430 45%,#B8860B 82%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 0 4px #C9971F,0 4px 8px rgba(0,0,0,.35)}
.hc-slide--best .hc-coin,.hc-slide--trust .hc-coin,.hc-slide--brand .hc-coin{display:block!important}
.hc-coin--1{top:16%;right:31%}.hc-coin--2{bottom:16%;right:3%;width:16px}
.hc-slide--trust .hc-coin--1{top:10%;right:6%;width:30px}.hc-slide--trust .hc-coin--2{bottom:12%;left:3%;width:20px}
.hc-slide--brand .hc-coin--1{top:10%;right:4%}.hc-slide--brand .hc-coin--2{bottom:14%;left:42%}
.hc-conf{display:none!important;width:7px;height:22px;border-radius:2px;background:linear-gradient(90deg,#A8761F,#FFE38A 50%,#B8860B)}
.hc-slide--sale .hc-conf,.hc-slide--new .hc-conf,.hc-slide--trust .hc-conf{display:block!important}
.hc-conf--1{top:8%;left:38%;transform:rotate(28deg)}.hc-conf--2{top:60%;left:3%;transform:rotate(-34deg);height:16px}
.hc-conf--3{bottom:8%;left:47%;transform:rotate(62deg)}.hc-conf--4{top:4%;right:2%;transform:rotate(-18deg);height:28px}
.hc-slide--new .hc-conf--2{left:9%}

/* 3D outlined display headline (borrowed from the Shopee "Siguradong Mura" / "Payday Deals" treatment): gold bevel fill,
   dark outline, stacked extrusion. Heavy system stack only (no new font host). */
.hero5 .hc-head--3d{font-family:"Arial Black","Segoe UI Black",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;font-weight:900;font-size:21px;line-height:1.04;letter-spacing:0;
  background:linear-gradient(180deg,#FFF8D2 0%,#FFE07A 42%,#E9A91E 58%,#FFE38A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #5A0E0A;filter:drop-shadow(0 1px 0 #6E1206) drop-shadow(0 2px 0 #4A0B04) drop-shadow(0 4px 6px rgba(0,0,0,.4));
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px 4px 0;max-width:100%}
.hero5 .hc-slide--trust .hc-head--3d{background:none;color:#D7192B;-webkit-text-stroke:5px #FFD45A;paint-order:stroke fill;filter:none;
  text-shadow:0 2px 0 #B8860B,0 3px 0 #9A6A08,0 4px 0 #7A1206,0 6px 10px rgba(80,20,0,.45);padding:0 4px 6px 2px}
/* Best Seller: elegant italic serif (Cormorant italic 500 is already loaded) with a small-caps tagline beside it (ref: Trelock). */
.hero5 .hc-slide--best .hc-head{grid-column:1;grid-row:1;font-family:var(--serif);font-style:italic;font-weight:500;font-size:27px;line-height:1;letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFF3CF 0%,#F1D27E 55%,#C99A3A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));white-space:nowrap;padding:0 10px 4px 0;-webkit-text-stroke:0;display:block;overflow:visible}
.hero5 .hc-slide--best .hc-eye{font-variant:small-caps;text-transform:none;font-size:12px;letter-spacing:.14em;line-height:1.15;white-space:normal;color:#F1D27E}
.hero5 .hc-eye{color:#FFE7A0}
.hero5 .hc-name{color:#FFF8EA}
.hero5 a.hc-name:hover{color:#FFE07A}
.hero5 .hc-price{color:#FFE07A}
.hero5 .hc-slide--sale .hc-price s{opacity:.85}
/* white tab label */
.hc-tab{display:inline-block;align-self:flex-start;background:#fff;color:#B71C2B;font-weight:700;font-size:11px;line-height:1;padding:5px 10px 5px 8px;border-radius:3px 12px 12px 3px;box-shadow:0 3px 8px -3px rgba(0,0,0,.35);white-space:nowrap}
/* ribbon (trust) */
.hc-ribbon{display:inline-block;margin-top:2px;padding:4px 10px;background:linear-gradient(180deg,#00732F,#00521F);color:#fff;font-weight:800;font-size:11px;line-height:1.15;border:2px solid #FFD45A;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.45);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* split pill (Sale / New): two real facts joined by a + medallion */
.hc-pill{display:none;align-items:center;margin-top:6px;padding:3px;background:#fff;border-radius:999px;box-shadow:0 0 0 2px rgba(255,212,90,.9),0 6px 16px -6px rgba(0,0,0,.45);max-width:100%}
.hc-pill > span{padding:3px 14px;color:#9E1622;font-size:11px;line-height:1.1;text-align:center;white-space:nowrap}
.hc-pill > span b{display:block;font-family:"Arial Black","Segoe UI Black",Roboto,Arial,system-ui,sans-serif;font-weight:900;font-size:15px}
.hc-pill > span + i + span{background:linear-gradient(180deg,#D7262F,#A3141F);color:#fff;border-radius:999px}
.hc-plus{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;margin:0 -9px;border-radius:50%;background:#C8232F;color:#fff;border:2px solid #fff;font-style:normal;font-weight:900;font-size:14px;line-height:1}
/* chips (brand) */
.hc-chips{display:none;gap:6px;margin:4px 0 2px}
.hc-chip{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}
.hc-chip--green{background:#00632A}.hc-chip--navy{background:#14254D}

/* ---- art column ---- */
.hc-art{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.hero5 .hc-sq{width:104px;padding:5px;border-radius:6px}
/* marquee sign with bulbs */
.hc-sign{position:relative;isolation:isolate;display:inline-block;padding:5px 10px;margin-bottom:6px;background:#1A0A06;color:#FFE7A0;border-radius:6px;
  font-family:"Arial Black","Segoe UI Black",Roboto,Arial,system-ui,sans-serif;font-weight:900;font-size:10px;line-height:1.1;white-space:nowrap;letter-spacing:.02em;
  box-shadow:0 0 0 2px #D4AF37,0 0 16px rgba(255,200,80,.55);text-shadow:0 0 6px rgba(255,210,110,.9)}
.hc-sign::before,.hc-sign::after{content:"";position:absolute;z-index:-1;border-radius:4px}
.hc-sign::before{inset:2px;background:radial-gradient(circle,#FFF6D0 0 1.3px,#FFB940 1.9px,rgba(255,185,64,0) 2.6px) 0 0/8px 8px}
.hc-sign::after{inset:6px;background:#2A0E08;border-radius:2px}
/* pedestal (Best Seller) */
.hc-pedestal{display:block;width:124px;height:14px;margin-top:-2px;border-radius:50%/0 0 100% 100%;background:linear-gradient(180deg,#F3DDA0 0%,#C9971F 45%,#6E4A12 100%);box-shadow:0 8px 12px -6px rgba(0,0,0,.7);position:relative}
.hc-pedestal::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#FFF1C2,#D9B24C 70%)}
.hc-art--best .hc-sq{position:relative;z-index:1}
/* starburst price tag (Sale) */
.hc-art--sale{position:relative}
.hc-burst{position:absolute;z-index:3;top:-12px;left:-16px;width:56px;aspect-ratio:1;display:grid;place-content:center;text-align:center;background:#FFD400;color:#9E1622;line-height:.95;
  clip-path:polygon(50.0% 0.0%,58.9% 11.0%,71.7% 5.0%,74.9% 18.7%,89.1% 18.8%,86.0% 32.6%,98.7% 38.9%,90.0% 50.0%,98.7% 61.1%,86.0% 67.4%,89.1% 81.2%,74.9% 81.3%,71.7% 95.0%,58.9% 89.0%,50.0% 100.0%,41.1% 89.0%,28.3% 95.0%,25.1% 81.3%,10.9% 81.2%,14.0% 67.4%,1.3% 61.1%,10.0% 50.0%,1.3% 38.9%,14.0% 32.6%,10.9% 18.8%,25.1% 18.7%,28.3% 5.0%,41.1% 11.0%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hc-burst b{font-family:"Arial Black","Segoe UI Black",Roboto,Arial,system-ui,sans-serif;font-weight:900;font-size:15px}
.hc-burst small{font-weight:800;font-size:9px}
/* white brand-logo label card */
.hc-lbl{position:absolute;z-index:3;display:none;align-items:center;justify-content:center;height:30px;min-width:64px;max-width:96px;padding:4px 8px;background:#fff;border-radius:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
  font-family:"Arial Black","Segoe UI Black",Roboto,Arial,system-ui,sans-serif;font-weight:900;font-size:11px;color:#1A120C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-lbl img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
/* gift bow */
.hc-bow{position:absolute;z-index:4;display:none;width:26px;height:16px}
.hc-bow::before,.hc-bow::after{content:"";position:absolute;top:0;width:12px;height:14px;border:3px solid #FFD45A;border-radius:60% 40% 60% 40%;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.hc-bow::before{left:0;transform:rotate(-24deg)}.hc-bow::after{right:0;transform:rotate(24deg)}
/* cluster of extra sale bottles */
.hc-cluster{display:none}
.hc-bottle{display:block;width:44px;aspect-ratio:3/4;padding:3px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 10px 18px -10px rgba(0,0,0,.7)}
.hc-bottle img,.hc-poster img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* posters (New Arrivals) */
.hc-posters{display:flex;gap:6px;align-items:flex-end}
.hc-poster{display:flex;flex-direction:column;width:52px;padding:3px 3px 0;background:#FFFDF8;border:1px solid #D4AF37;border-radius:4px;box-shadow:0 0 0 2px rgba(212,175,55,.25),0 12px 18px -12px rgba(0,0,0,.8);color:#1A120C;overflow:hidden}
.hc-poster img{aspect-ratio:3/4;height:auto}
.hc-poster span{display:block;padding:2px 1px 3px;font-size:8.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hc-poster:nth-child(n+3){display:none}
.hc-poster--1{transform:rotate(-3deg)}.hc-poster--2{transform:translateY(-4px) rotate(2deg)}.hc-poster--3{transform:rotate(-2deg)}.hc-poster--4{transform:translateY(-3px) rotate(3deg)}
.hc-art--new{position:relative}
/* Brand Spotlight (ref: Shopee HONOR): logo in a big white circle, 3 bottles fanned + tilted, chips, bold line */
.hero5 .hc-slide--brand{grid-template-columns:auto minmax(0,1fr)}
.hc-art--brand{order:-1;flex-direction:row;align-items:center}
.hc-circle{display:grid;place-items:center;width:78px;aspect-ratio:1;border-radius:50%;background:#fff;padding:12px;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 12px 24px -12px rgba(0,0,0,.6);flex:none}
.hc-circle img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hc-fan{display:flex;align-items:center;margin-left:-10px}
.hc-fan .hc-bottle{width:40px;margin-left:-12px}
.hc-fan .hc-bottle:first-child{margin-left:0}
.hc-fan .hc-bottle--1{transform:rotate(-12deg) translateY(4px)}.hc-fan .hc-bottle--2{position:relative;z-index:1;transform:translateY(-4px)}.hc-fan .hc-bottle--3{transform:rotate(12deg) translateY(4px)}
.hc-fan .hc-bottle--3{display:none}
.hero5 .hc-slide--brand .hc-head--3d{background:none;color:#fff;-webkit-text-stroke:0;filter:none;text-shadow:0 2px 0 #7A3A14,0 3px 0 #5E2A0C,0 5px 10px rgba(60,20,0,.45);font-size:18px}
.hero5 .hc-slide--brand .hc-name{color:#FFF8EA;font-weight:700}
.hero5 .hc-slide--brand .hc-tab{color:#8A3E14}
/* trust promises */
.hc-promise{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:128px}
.hc-promise li{display:flex;align-items:center;gap:6px;font-weight:800;font-size:10.5px;line-height:1.15;color:#fff;text-shadow:0 1px 2px rgba(90,20,0,.6)}
.hc-medal{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6C4,#F4C430 50%,#B8860B 90%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 3px 6px rgba(90,30,0,.45);color:#B71C2B}
.hc-ico{width:62%;height:62%}

@media (min-width:768px){
  .hero5 .hc-head--3d{font-size:28px}
  .hero5 .hc-slide--best .hc-head{font-size:38px}
  .hero5 .hc-slide--best .hc-eye{font-size:13px}
  .hero5 .hc-slide--brand .hc-head--3d{font-size:24px}
  .hc-pill{display:inline-flex}
  .hc-slide--new .hc-meta,.hc-slide--sale .hc-meta{display:none}
  .hc-tab{font-size:12px;padding:6px 12px 6px 10px}
  .hc-ribbon{font-size:14px;padding:5px 14px}
  .hc-sign{font-size:13px;padding:7px 14px;margin-bottom:10px}
  .hc-sign::before{background-size:9px 9px}
  .hero5 .hc-sq{width:150px;padding:7px}
  .hc-pedestal{width:160px;height:20px}
  .hc-pedestal::before{top:-8px;height:16px}
  .hc-burst{width:76px;top:-16px;left:-22px}
  .hc-burst b{font-size:20px}.hc-burst small{font-size:11px}
  .hc-poster{width:66px}
  .hc-poster span{font-size:9.5px}
  .hc-circle{width:96px;padding:14px}
  .hc-fan{margin-left:-12px}
  .hc-fan .hc-bottle{width:48px;margin-left:-14px}
  .hc-chips{display:flex}
  .hc-promise{width:122px;gap:8px}
  .hc-promise li{font-size:11.5px;gap:6px}
  .hc-medal{width:26px;height:26px}
  .hc-curtain{width:5%}
  .hc-valance{height:18px}
  .hc-spark{width:16px;height:16px}
  .hc-coin{width:30px}
  .hc-conf{width:9px;height:30px}
}
@media (min-width:1024px){
  .hb-chip{display:inline-block}
  .hero5 .hc-head--3d{font-size:34px}
  .hero5 .hc-slide--brand .hc-head--3d{font-size:32px}
  .hero5 .hc-slide--best .hc-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:end}
  .hero5 .hc-slide--best .hc-copy > *{grid-column:1 / -1}
  .hero5 .hc-slide--best .hc-head{grid-column:1;grid-row:1;font-size:52px}
  .hero5 .hc-slide--best .hc-eye{grid-column:2;grid-row:1;align-self:end;margin-bottom:5px}
  .hc-pedestal{width:180px}
  .hc-circle{width:124px;padding:18px}
  .hc-fan .hc-bottle{width:58px;margin-left:-16px}
  .hc-promise{width:210px}
  .hc-promise li{font-size:14px}
  .hc-medal{width:32px;height:32px}
  .hc-poster:nth-child(3){display:flex}
  .hc-fan .hc-bottle--3{display:block}
  .hc-lbl,.hc-bow{display:flex}
  .hc-bow{display:block}
  .hc-art--sale .hc-lbl{left:-40px;bottom:6px}
  .hc-art--sale .hc-bow{left:-50px;bottom:28px}
  .hc-art--new .hc-lbl{left:-58px;top:44%}
  .hc-art--new .hc-bow{left:-66px;top:calc(44% - 10px)}
  .hc-cluster{display:flex;flex-direction:column;gap:8px;position:absolute;right:-50px;top:50%;transform:translateY(-50%)}
  .hc-art--sale{margin-right:44px}
  .hc-cluster .hc-bottle{width:56px}
  .hc-cluster .hc-bottle--1{transform:rotate(6deg)}.hc-cluster .hc-bottle--2{transform:rotate(-5deg)}
}
@media (min-width:1280px){
  .hero5 .hc-head--3d{font-size:44px}
  .hero5 .hc-slide--best .hc-head{font-size:66px}
  .hero5 .hc-slide--brand .hc-head--3d{font-size:40px}
  .hero5 .hc-sq{width:166px}
  .hc-poster{width:74px}
  .hc-poster:nth-child(4){display:flex}
  .hc-circle{width:150px;padding:22px}
  .hc-fan .hc-bottle{width:70px;margin-left:-18px}
  .hc-promise{width:250px}
  .hc-promise li{font-size:16px}
  .hc-medal{width:36px;height:36px}
}
@media (prefers-reduced-motion:no-preference){
  .hc-spark{animation:h5Twinkle 2.8s ease-in-out infinite}
  .hc-spark--2{animation-delay:.7s}.hc-spark--3{animation-delay:1.3s}.hc-spark--4{animation-delay:2s}
  .hc-coin{animation:h5Float 4.6s ease-in-out infinite}.hc-coin--2{animation-delay:1.4s}
  .hc-conf{animation:h5Sway 5s ease-in-out infinite}.hc-conf--2{animation-delay:1.1s}.hc-conf--3{animation-delay:2.2s}.hc-conf--4{animation-delay:3s}
  .hc-sign::before{animation:h5Bulbs 1.6s steps(2,end) infinite}
  .hc-rays{animation:h5Spin 80s linear infinite}
  .hc-fan .hc-bottle,.hc-poster,.hc-cluster .hc-bottle,.hc-promise li{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  @media (hover:hover){
    .hc-poster:hover,.hc-fan .hc-bottle:hover,.hc-cluster .hc-bottle:hover{transform:translateY(-4px) rotate(0) scale(1.06)}
  }
  @keyframes h5Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes h5Sway{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 5px;rotate:14deg}}
  @keyframes h5Bulbs{0%{opacity:1}100%{opacity:.55}}
  @keyframes h5Spin{to{rotate:360deg}}
}
@media (prefers-reduced-motion:reduce){
  .hc-spark,.hc-coin,.hc-conf,.hc-sign::before,.hc-rays{animation:none}
}

/* 2026-10-30 (hero6): Daniel: dark-green end-cap with gold sunburst REMOVED from all primary buttons; gold gradient, highlight,
   border, shadow and hover shine kept; end-cap width removed so buttons are back to their original widths. */
/* ---- Buttons (30 Oct 2026, Daniel; ref Trelock): primary = metallic gold with a dark-green square end-cap carrying a
   CSS-drawn gold sunburst (no image, no data: URI) + shine sweep on hover; secondary (.btn--ghost) = frosted translucent pill.
   Site-wide on shop pages (shop-v2.css loads last). Sizes: heights/fonts untouched; the end-cap adds ~cap+11-padding px of width. ---- */
.hc-ctas .btn--lg{min-width:0;flex-shrink:1}
.btn:not(.btn--ghost):not([disabled]),.sticky-atc .btn:not([disabled]),.btn--gold:not([disabled]){position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(100deg,#F6D77A 0%,#E2B04A 34%,#C98E2B 70%,#E8BE5C 100%);background-size:100% 100%;border:1px solid #A8761F;color:#1A120C;border-radius:6px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,250,220,.8),inset 0 -1px 0 rgba(120,80,10,.35),0 6px 14px -7px rgba(90,60,10,.6)}
.btn:not(.btn--ghost):not([disabled])::before,.btn--gold:not([disabled])::before{content:"";position:absolute;z-index:-1;top:-10%;bottom:-10%;left:-45%;width:35%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,252,235,.75) 50%,rgba(255,255,255,0) 100%);transform:translateX(0) skewX(-18deg);opacity:0}
.btn:not(.btn--ghost):not([disabled]):hover,.btn--gold:not([disabled]):hover,.sticky-atc .btn:not([disabled]):hover{background:linear-gradient(100deg,#F8DD88 0%,#E6B653 34%,#CF9532 70%,#ECC566 100%);border-color:#94661A;color:#1A120C}
.btn--block:not(.btn--ghost)::before{left:-45%}
.btn--ghost{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(26,18,12,.28);border-radius:999px;color:var(--t-ink,#1A120C)}
.btn--ghost:hover{background:rgba(255,255,255,.8);border-color:rgba(26,18,12,.5);color:var(--t-ink,#1A120C)}
.hc .hc-more{background:rgba(255,255,255,.12);border:1px solid rgba(255,240,200,.5);color:#FFF8EA;border-radius:999px}
.hc .hc-more:hover{background:rgba(255,255,255,.24);border-color:rgba(255,240,200,.85);color:#fff}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    .btn:not(.btn--ghost):not([disabled]):hover::before,.btn--gold:not([disabled]):hover::before{opacity:1;transform:translateX(480%) skewX(-18deg);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .2s}
  }
}

.hc-cta-t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 2026-10-30 (hero7): Daniel: pattern -5 points per layer: page 25%->20%, hero surround 25.5%->20.5%, slides 29%->24%, trust 30%->25%. */
/* 2026-10-30 (hero6): pattern opacity +20 points per Daniel: page 5%->25%, hero surround 5.5%->25.5%, slides 9%->29% (trust 10%->30%);
   denser tile: new file pattern-arabic-v2.svg (270px tile, same glyph sizes, letters closer); mask sizes 360->270 and 300->225 so glyphs render at the same size. */
/* ---- Arabic letter pattern (original tile: ../img/pattern-arabic-v2.svg, Noto Naskh Arabic glyphs, OFL) ----
   One ~15 KB SVG used as a repeat mask, tinted per surface: gold on ivory ~5%, ivory on the hero scenes ~9%. Decorative only. */
/* 2026-10-30 (hero9): Daniel: page pattern restyled after his calligraphy reference (own tile, not copied): new file
   pattern-arabic-v3.svg, Aref Ruqaa Bold (OFL) brush glyphs + Arabic-Indic digits, 600px tile, glyphs ~2-3x larger, varied size/rotation,
   edge-wrapped. Single-colour mask tinted gold (option); still 15%. Mobile tile 400px. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--pat-c,#B8913A);opacity:.05;
  -webkit-mask:url(../img/pattern-arabic-v4.svg) 0 0 / 400px 400px repeat;mask:url(../img/pattern-arabic-v4.svg) 0 0 / 400px 400px repeat}
/* 2026-10-30 (hero11): Daniel: "can you try this pattern". Page pattern v4 = original dense mixed-size Arabic letter scatter (OFL fonts, paths), same gold tint, still 10%. */
@media (min-width:768px){body::before{-webkit-mask-size:600px 600px;mask-size:600px 600px}}
.hero5{position:relative;isolation:isolate}
/* 2026-10-30 (hero7b): Daniel: "remove pattern in hero". No Arabic pattern on the hero surround or inside any slide (trust included);
   the hero gets the page ivory as an opaque background so the fixed body::before page pattern (20%) does not show through it. */
.hero5{background:var(--ivory,#FBF7F0)}
.hero5::before,.hero5 .hc-slide::before{content:none;background:none} /* also drops the faint luxe.css geometric tile (.hero::before 7%, .hc-slide::before 6%) */
@media print{body::before{display:none}}

/* ---- 2026-10-30 (hero7): Daniel: make banner #2 and #3 "a bit different". CSS-only, same markup/links/heights.
   #2 red  = photo RIGHT, tilted, white swoosh ring, headline left, black price pill + diagonal gold stripes and confetti.
   #3 green = MIRRORED: round photo LEFT on a soft spotlight + gold podium glow, text right-aligned, gold ribbon tag,
              white price pill with dark text, marquee bulb-lights along the top edge, starburst sparks on the left. ---- */
.hb-card--red{background:
  linear-gradient(115deg,rgba(232,190,92,0) 0 60%,rgba(232,190,92,.95) 60% 62.5%,rgba(232,190,92,0) 62.5% 65%,rgba(255,230,150,.6) 65% 66%,rgba(232,190,92,0) 66%),
  radial-gradient(circle at 86% 50%,rgba(255,255,255,.16) 0 34%,rgba(255,255,255,0) 35%),linear-gradient(115deg,#B71C2B 0%,#C8232F 52%,#EF3340 100%)}
.hb-card--green{--iw:62px;--pl:10px;flex-direction:row-reverse;background:
  radial-gradient(circle,#FFE680 0 1.6px,rgba(255,230,128,.35) 2.2px,rgba(255,230,128,0) 3.4px) 3px 2px / 13px 9px repeat-x,
  radial-gradient(ellipse at 18% 55%,rgba(255,255,255,.17) 0 30%,rgba(255,255,255,0) 52%),linear-gradient(245deg,#00521F 0%,#005F28 50%,#00732F 100%)}
.hb-card--green .hb-ring{right:auto;left:calc(var(--pl) + var(--iw) / 2 - var(--iw) * .75);top:auto;bottom:5px;margin-top:0;width:calc(var(--iw) * 1.5);height:calc(var(--iw) * .3);aspect-ratio:auto;border:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#F6D77A 0 30%,rgba(201,142,43,.85) 52%,rgba(201,142,43,0) 72%);opacity:.9}
.hb-card--green .hb-img{width:var(--iw);margin:0 4px 0 0;border-radius:50%;padding:0;overflow:hidden;transform:none;box-shadow:0 10px 18px -8px rgba(0,0,0,.6),0 0 0 2px #E8C770,0 0 0 5px rgba(255,255,255,.18)}
.hb-card--green .hb-img img{border-radius:50%;padding:12%;background:#fff;box-sizing:border-box}
.hb-card--green .hb-body{align-items:flex-end;text-align:right}
.hb-card--green .hb-top,.hb-card--green .hb-buy{justify-content:flex-end;flex-direction:row-reverse}
.hb-card--green .hb-rank{color:#00401A;background:linear-gradient(180deg,#F6D77A,#E2B04A);border-radius:0 3px 3px 0;padding:2px 7px 2px 11px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%)}
.hb-card--green .hb-name{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.hb-card--green .hb-name:hover{color:#FFF3C4}
.hb-card--green .hb-price{color:#0F2A1A;background:#fff;box-shadow:0 3px 8px -3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,199,112,.9)}
.hb-card--green .hb-spark--a{right:auto;left:calc(var(--pl) + var(--iw) + 2px);top:12px;width:12px;height:12px;background:#FFE680;clip-path:polygon(50% 0,58% 33%,85% 15%,67% 42%,100% 50%,67% 58%,85% 85%,58% 67%,50% 100%,42% 67%,15% 85%,33% 58%,0 50%,33% 42%,15% 15%,42% 33%)}
.hb-card--green .hb-spark--b{right:auto;left:4px;bottom:16px}
.hb-card--green .hb-spark--c{right:auto;left:calc(var(--pl) + var(--iw) * .15);top:8px}
@media (min-width:768px){ .hb-card--green{--iw:92px;--pl:14px} }
@media (min-width:1024px){ .hb-card--green{--iw:96px;--pl:16px;padding-left:16px} .hb-card--green .hb-img{width:var(--iw)} }
@media (min-width:1280px){ .hb-card--green{--iw:104px} }
@media (min-width:768px){ .hb-card--red{background:
  linear-gradient(135deg,#E8BE5C 0 17px,rgba(232,190,92,0) 17px 21px,rgba(255,230,150,.8) 21px 24px,rgba(232,190,92,0) 24px),
  linear-gradient(135deg,rgba(232,190,92,0) calc(100% - 26px),rgba(255,230,150,.8) calc(100% - 26px) calc(100% - 23px),rgba(232,190,92,0) calc(100% - 23px) calc(100% - 19px),#E8BE5C calc(100% - 19px)),
  radial-gradient(circle at 86% 50%,rgba(255,255,255,.16) 0 34%,rgba(255,255,255,0) 35%),linear-gradient(115deg,#B71C2B 0%,#C8232F 52%,#EF3340 100%)} }
@media (prefers-reduced-motion:no-preference){ @media (hover:hover){ .hb-card--green:hover .hb-img{transform:scale(1.05)} } }
/* 2026-10-30 (hero7): fix at 1024-1279px (also live in hero5/hero6): slide-1 "Shop Now" was ellipsised to "Shop N..." and the
   small-caps tagline squeezed into a narrow column ("Frag... Wor..."). Tagline goes back above the headline and CTA padding is trimmed. */
@media (min-width:1024px) and (max-width:1279.98px){
  .hero5 .hc-slide--best .hc-copy{display:block}
  .hero5 .hc-slide--best .hc-eye{margin:0 0 4px}
  .hc-ctas .btn--lg{padding:0 12px}
  .hc-ctas .btn--gold{flex-shrink:0}
}

/* 2026-10-30 (hero8): Daniel: page pattern 20% -> 15%. */

/* 2026-10-30 (hero9, option B soft sand): Daniel: hero surround a clearly different shade from the (near-white) header: warm champagne,
   still no pattern. Gold hairline under the header (top edge of the hero); the luxe gold line under the hero is kept.
   Cards get a warm hairline + slightly deeper shadow so they still pop on the darker surround. */
.hero5{--hs-a:#F1EADF;--hs-b:#E6DAC6;background:linear-gradient(180deg,var(--hs-a) 0%,var(--hs-b) 100%);
  box-shadow:inset 0 1px 0 rgba(176,136,62,.55)}
.hero5 .hc,.hero5 .hb-card{box-shadow:0 0 0 1px rgba(110,74,18,.18),0 16px 30px -18px rgba(60,32,6,.7)}
@media (prefers-reduced-motion:no-preference){ @media (hover:hover){ .hero5 .hb-card:hover{box-shadow:0 0 0 1px rgba(110,74,18,.22),0 20px 32px -16px rgba(60,32,6,.75)} } }

/* 2026-10-30 (hero10): Daniel: page pattern 15% -> 10%. */

/* 2026-10-31 (hero13): Daniel: "spacing" (shop.php page-header band). Cause: luxe.css gives every .eyebrow a 22px gold
   ::before dash + 10px gap, so "The Collection" started 32px right of the crumbs/H1/subtitle; also the inline eyebrow sat in a
   24px line box (9px stray gap) and the search bar touched the band (0px) while search->chips was 28px. Scoped to the shop band. */
.page-hero .shop-head{padding-bottom:clamp(22px,2.6vw,34px)}
.page-hero .shop-head .eyebrow{display:flex;gap:0;margin:0}
.page-hero .shop-head .eyebrow::before{content:none;display:none}
.page-hero .shop-head h1{margin:8px 0 0}
.page-hero .shop-head p{margin:8px 0 0}
.page-hero + .wrap{--sh-gap:clamp(14px,1.6vw,20px)}
.page-hero + .wrap > .shop-search{margin:var(--sh-gap) 0 0;align-items:stretch}
.page-hero + .wrap > .shop-search input{height:auto;min-height:34px}
.page-hero + .wrap > .chips{padding-block:var(--sh-gap)}

/* 2026-10-31 (hero14): Daniel: page pattern 10% -> 5%. */

/* ===== 2026-10-31 verified badge (task 3; keep separate from pending work12 footer-logo block) ===== */
.vbadge{display:inline-block;width:1.05em;height:1.05em;min-width:14px;min-height:14px;margin-left:.3em;vertical-align:-.16em;line-height:0;flex:none}
.vbadge svg{width:100%;height:100%;display:block}
.vbadge .vb-bg{fill:#00843D}
.vbadge .vb-ck{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vbadge--corner{position:absolute;right:5px;bottom:6px;width:15px;height:15px;min-width:0;min-height:0;margin:0;border-radius:50%;background:var(--t-bg,#fbf8f2);padding:1px;box-sizing:content-box}
.acct-hello{margin:-10px 0 18px;color:var(--t-ink,#2a2a2a);font-size:var(--fs-sm,15px);display:flex;align-items:center;flex-wrap:wrap}
.acct-hello .acct-name{font-weight:600;margin-left:.3em}
.menu-list .menu-lbl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 .5em}
.menu-me{display:inline-flex;align-items:center;font-size:.82em;color:var(--muted,#7a7368);font-weight:500}
.rv-name{display:inline-flex;align-items:center}
.rv-name .vbadge{width:14px;height:14px}
.resend-hint{margin:14px 0 2px;color:var(--muted,#7a7368)}

/* ---- 2026-10-30 hero12: footer payment logos (official GCash, Maya, Visa, Mastercard marks + neutral COD icon) replace text chips. Images: shop/assets/img/pay/*.svg (same-origin). ---- */
.footer .pay.pay--logos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.footer .pay.pay--logos .pay-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 8px;background:#fff;border:1px solid var(--t-line,#E4D8C4);border-radius:6px;box-shadow:0 1px 2px rgba(58,47,34,.06);line-height:0}
.footer .pay.pay--logos .pay-chip img{display:block;height:18px;width:auto;max-width:96px}
.footer .pay.pay--logos .pay-visa img{height:15px}
.footer .pay.pay--logos .pay-mastercard img{height:22px}
@media (max-width:480px){.footer .pay.pay--logos .pay-chip{height:32px;padding:0 7px}.footer .pay.pay--logos .pay-chip img{height:16px}.footer .pay.pay--logos .pay-visa img{height:13px}.footer .pay.pay--logos .pay-mastercard img{height:20px}}

/* ---- ID Verification: Take Photo / Upload From Gallery + camera panel (id-verify.php, assets/js/idv-camera.js) ---- */
.idv-shot{gap:8px;margin-bottom:20px}
.idv-shot [hidden]{display:none!important}
.idv-lbl{font-weight:500}
.idv-shot.is-js .idv-file,.idv-cap{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important;opacity:0!important}
.idv-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.idv-actions .btn,.idv-cam-btns .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-size:14px;letter-spacing:.02em}
.idv-actions .btn .icon{width:18px;height:18px;flex:none}
.idv-cam{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid rgba(184,145,58,.45);border-radius:14px;background:linear-gradient(180deg,#FBF7EE,#F4ECDC);box-shadow:0 10px 30px -18px rgba(26,18,12,.55);max-width:440px}
.idv-stage{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#1A120C}
.idv-video,.idv-still{display:block;width:100%;height:100%;object-fit:cover}
.idv-stage--user .idv-video{transform:scaleX(-1)} /* mirror the live selfie view only; the saved photo is not mirrored */
.idv-guide{position:absolute;inset:9% 12%;border:2px dashed rgba(241,223,174,.7);border-radius:12px;pointer-events:none}
.idv-cam-btns{display:flex;flex-wrap:wrap;gap:10px}
.idv-cam-btns .btn{flex:1 1 120px}
.idv-picked{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line,#E7DFD0);border-radius:12px;background:rgba(255,255,255,.65);max-width:440px}
.idv-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;background:#EFE7D6}
.idv-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idv-clear{background:none;border:0;padding:6px 4px;color:#7A5A1F;font:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.idv-msg{margin:0;padding:8px 12px;border-radius:10px;background:#FFF4E5;border:1px solid #F0C98A;color:#6B4510;font-size:13px}
.idv-shot .hint{margin-top:0}
@media (max-width:560px){
  .idv-actions .btn{flex:1 1 100%}
  .idv-cam{max-width:none;padding:10px}
  .idv-stage{aspect-ratio:3/4}
}
/* ===== 2026-11-01 Powered By Bad Decisions badge (storefront footer, plain image, no link) ===== */
.footer .bd-badge{display:flex;justify-content:center;align-items:center;padding:6px 16px 20px;line-height:0}
.footer .bd-badge img{display:block;height:28px;width:auto;max-width:100%}
.footer--bare .bd-badge{padding-top:0}
@media (max-width:480px){.footer .bd-badge{padding:4px 12px calc(16px + env(safe-area-inset-bottom,0px))}.footer .bd-badge img{height:24px}}