/* PROPOSAL — NOT LIVE. Dubai Shop colour scheme "Ivory & Gold": warm off-white surfaces, soft gold accents, charcoal text; gold primary button with charcoal label.
   Load AFTER app.css to try it:  <link rel="stylesheet" href="/shop/assets/css/theme-ivory.css">
   Without this file the current "Luxe Dubai" midnight design (styles.css + luxe.css + app.css) stays the fallback.
   Contrast (WCAG 2.x): see CHANGELOG.md "Colour Scheme Proposals". CSS only, no PHP changes. */
:root{
  --t-bg:#FBF8F2; --t-surface:#FFFFFF; --t-header:#FFFDF8; --t-sand:#F3EADB; --t-sand2:#E6D6B8;
  --t-ink:#1F1B16; --t-muted:#5E554B; --t-line:#E4D8C4;
  --t-accent:#C9A35A; --t-accent-ink:#1F1B16; --t-accent-hover:#6B4E1A; --t-accent-hover-ink:#FFFFFF;
  --t-strong:#7A5A1F; --t-deco:#C9A35A; --t-soft:#F1E3C4; --t-soft-ink:#5C4416; --t-soft-border:#C9A35A;
  --t-promo:#F1E6D2; --t-promo-ink:#3A2F22; --t-foot:#F3EADB; --t-foot-ink:#2A241D; --t-foot-muted:#5E554B; --t-foot-head:#7A5A1F;
  --t-hero-a:#FFFDF8; --t-hero-b:#F1E6D2; --t-badge:#7A5A1F; --t-badge-ink:#FFFFFF;
  /* existing variables re-pointed so every rule that uses them follows the scheme */
  --ivory:var(--t-bg); --cream:var(--t-sand); --sand:var(--t-sand); --sand-2:var(--t-sand2); --white:var(--t-surface);
  --ink:var(--t-ink); --oud:var(--t-ink); --oud-2:var(--t-muted); --night:var(--t-ink); --night-2:var(--t-promo); --night-3:var(--t-sand);
  --muted:var(--t-muted); --line:var(--t-line); --gold:var(--t-deco); --gold-d:var(--t-strong); --gold-l:var(--t-soft); --gold-soft:var(--t-soft);
  --emerald:var(--t-strong); --emerald-d:var(--t-accent-hover); --hair:color-mix(in srgb,var(--t-deco) 55%,transparent);
  --gold-grad:linear-gradient(115deg,#8C6A35 0%,#C9A35A 30%,#E6CF98 50%,#C9A35A 70%,#9C7B43 100%);
}
/* ---- core surfaces ---- */
body{background:var(--t-bg);color:var(--t-ink)}
.sec-head h2,.shop-head h1,.pdp-info h1,.page-title,.panel-box h2,.auth-card h1{color:var(--t-ink)}
.eyebrow,.card-brand,.note h5,.feature .eyebrow,.feature.light .eyebrow{color:var(--t-strong)}
.stars{color:var(--t-strong)}
.card-name:hover,.sec-head a:hover,.crumbs a:hover,.brand-tile:hover,.buy .icon-btn:hover{color:var(--t-strong)}
.sec-head a{border-color:var(--t-deco)}
.sec-head a:hover{border-color:var(--t-strong)}
.cat:hover .cat-arch{outline-color:var(--t-strong)}
.check input{accent-color:var(--t-strong)}
.perks .icon{color:var(--t-strong)}
.linklike{color:var(--t-strong)}

/* metallic gradient text is unreadable on light backgrounds: solid accent instead */
.gold-text,.hero-copy h1 em,.news h2,.feature:not(.light) h3,.hero-tag b,.header .logo,.footer .logo{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--t-strong)}
.header .logo,.footer .logo{color:var(--t-ink)}
.header .logo span,.footer .logo span,.logo span{color:var(--t-strong)}
.page-hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--t-ink)}

/* ---- promo bar + header (were #141414 / rgba(14,14,14,.97)) ---- */
.promo{background:var(--t-promo);color:var(--t-promo-ink);border-bottom:1px solid var(--t-line)}
.promo b{color:var(--t-promo-ink);font-weight:600}
.header{background:var(--t-header);border-bottom:1px solid var(--t-line);color:var(--t-ink);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.header .icon-btn{color:var(--t-ink)}
.header .icon-btn:hover,.icon-btn:hover{background:var(--t-soft)}
.nav a{color:var(--t-ink)}
.nav a:hover,.nav a.on{color:var(--t-strong);border-color:var(--t-strong)}
.search-desk input{background:var(--t-bg);border:1px solid var(--t-line);color:var(--t-ink)}
.search-desk input::placeholder{color:var(--t-muted)}
.search-desk .icon{color:var(--t-muted)}
.badge{background:var(--t-badge);color:var(--t-badge-ink)}
.drawer .panel{background:var(--t-surface)}
.panel-head .logo{color:var(--t-ink)}

/* ---- buttons: one obvious primary ---- */
.btn,.btn--gold,.sticky-atc .btn{background:var(--t-accent);border:1px solid var(--t-accent);color:var(--t-accent-ink);font-weight:600}
.btn:hover,.btn--gold:hover,.sticky-atc .btn:hover{background:var(--t-accent-hover);border-color:var(--t-accent-hover);color:var(--t-accent-hover-ink)}
.btn--ghost,.toolbar .btn--ghost{background:transparent;color:var(--t-ink);border-color:var(--t-ink);font-weight:500}
.btn--ghost:hover{background:var(--t-ink);color:var(--t-surface);border-color:var(--t-ink)}
.btn[disabled],.btn[disabled]:hover{opacity:1;background:var(--t-soft);border:1px dashed var(--t-soft-border);color:var(--t-soft-ink)}
.quick{background:var(--t-accent);color:var(--t-accent-ink);border:1px solid var(--t-accent)}
.quick:hover{background:var(--t-accent-hover);color:var(--t-accent-hover-ink)}
.chip:hover{border-color:var(--t-strong);color:var(--t-strong)}
.chip.on,.pager a.on,.acct-nav a.on{background:var(--t-strong);border-color:var(--t-strong);color:#fff}
.size-chip.on,.size-opt.on{border-color:var(--t-ink);box-shadow:inset 0 0 0 1px var(--t-strong)}

/* ---- dark bands made light: home hero, shop page hero, features, newsletter, footer, sticky bar ---- */
.hero{background:radial-gradient(120% 90% at 75% 40%,var(--t-hero-a) 0%,var(--t-hero-b) 75%);color:var(--t-ink)}
.hero-copy h1{color:var(--t-ink)}
.hero-copy p{color:var(--t-muted)}
.hero .eyebrow{color:var(--t-strong)}
.hero .btn--ghost{color:var(--t-ink);border-color:var(--t-ink)}
.hero .btn--ghost:hover{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-surface)}
.hero-tag{background:var(--t-surface);border:1px solid var(--t-line);color:var(--t-muted);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.page-hero{background:linear-gradient(180deg,var(--t-hero-a) 0%,var(--t-hero-b) 100%);color:var(--t-ink);border-bottom:1px solid var(--t-line)}
.page-hero .crumbs,.page-hero p{color:var(--t-muted)}
.page-hero .crumbs a:hover{color:var(--t-strong)}
.page-hero .eyebrow{color:var(--t-strong)}
.feature{background:var(--t-sand);color:var(--t-ink);border:1px solid var(--t-line)}
.feature.light{background:var(--t-surface)}
.news{background:var(--t-sand);color:var(--t-ink);border-top:1px solid var(--t-line)}
.news p{color:var(--t-muted)}
.news .eyebrow{color:var(--t-strong)}
.news input{background:var(--t-surface);border-color:var(--t-line);color:var(--t-ink)}
.news input::placeholder{color:var(--t-muted)}
.trust{background:var(--t-surface);border-color:var(--t-line)}
.trust-item .ic{color:var(--t-strong);border-color:var(--t-line)}
.footer{background:var(--t-foot);color:var(--t-foot-ink);border-top:1px solid var(--t-line)}
.footer::before{opacity:.05}
.footer h4{color:var(--t-foot-head)}
.footer .about-p,.legal{color:var(--t-foot-muted)}
.footer li a:hover,.legal a:hover{color:var(--t-strong)}
.legal{border-top:1px solid var(--t-line)}
.pay span{border-color:var(--t-line);color:var(--t-ink);background:var(--t-surface)}
.mock-label{color:var(--t-strong)}
.sticky-atc{background:var(--t-surface);border-top:1px solid var(--t-line);color:var(--t-ink);box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.sticky-atc .t{color:var(--t-muted)}
.sticky-atc .t b{color:var(--t-ink)}
.section--cream{background:var(--t-sand)}

/* ---- bag / cart page ---- */
.cart-lines{background:var(--t-surface);border:1px solid var(--t-line);border-radius:12px;padding:4px clamp(14px,2vw,22px) 18px}
.cart-line{border-color:var(--t-line)}
.cart-line .cl-name,.cart-line .cl-total{color:var(--t-ink)}
.cl-img{background:var(--t-bg);border:1px solid var(--t-line)}
.qty{background:var(--t-surface);border-color:var(--t-sand2)}
.qty button{color:var(--t-ink)}
.summary{background:var(--t-surface);color:var(--t-ink);border:1px solid var(--t-line);border-top:3px solid var(--t-deco);border-radius:12px;box-shadow:0 18px 40px -28px rgba(0,0,0,.28)}
.summary h3{color:var(--t-ink)}
.summary dt{color:var(--t-muted)} .summary dd{color:var(--t-ink);font-weight:600}
.summary .tot,.summary dt.tot{color:var(--t-ink);border-color:var(--t-line)}
.summary .muted,.summary .small{color:var(--t-muted)}
.radio-card:has(input:checked){border-color:var(--t-strong);background:var(--t-soft)}
.empty{background:var(--t-surface);border-color:var(--t-sand2)}
.alert{background:var(--t-surface)}
.tl--done::before,.tl--current::before{background:var(--t-strong)} .tl--done::after{background:var(--t-strong);border-color:var(--t-strong)} .tl--current::after{border-color:var(--t-strong);box-shadow:0 0 0 4px var(--t-soft)}

/* ---- product page gallery (fix 2026-10-25): the base desktop rule (styles.css) makes .gallery a two-column grid
   "84px thumbs | main image". With one photo there is no .thumbs, so the main image dropped into the 84px column
   and the big column stayed empty. Main image now always fills the column; thumbs (2+ photos) sit in a row below. ---- */
.gallery{grid-template-columns:minmax(0,1fr);gap:12px}
.gallery-main{aspect-ratio:1/1;width:100%;background:radial-gradient(60% 50% at 50% 40%,#fff 0%,#fff 55%,var(--t-bg) 100%);border:1px solid var(--t-line);box-shadow:0 1px 2px rgba(31,27,22,.04),0 12px 32px -18px rgba(122,90,31,.25)}
.gallery-main img{width:86%;height:86%;object-fit:contain;object-position:50% 50%}
.thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,84px));order:0;gap:10px}
.thumb{background:#fff;border-color:var(--t-line)}
.thumb.on{border-color:var(--t-deco);box-shadow:inset 0 0 0 1px var(--t-deco)}
@media (min-width:900px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,84px));order:0}
}