/* Divaar.pk — shop page (Apple-inspired · Liquid Glass) */

/* ---------- floating glass nav ---------- */
.nav-wrap { position: sticky; top: 10px; z-index: 60; padding: 0 16px; margin-top: 10px; }
.nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 8px 6px 14px; border-radius: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ink); min-width: 0; }
.brand img { height: 34px; width: auto; max-width: 140px; object-fit: contain; }
.brand-name { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: flex; gap: 2px; font-size: 14px; }
.nav-links a { padding: 8px 14px; border-radius: 980px; color: var(--ink); opacity: .78; text-decoration: none; transition: background .2s, opacity .2s; }
.nav-links a:hover { opacity: 1; background: rgba(0,0,0,.05); }
.nav-links a.active { opacity: 1; background: rgba(0,0,0,.07); font-weight: 500; }
.nav-actions { display: flex; align-items: center; gap: 2px; }
.cart-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.menu-btn { display: none !important; }
.nav-wa { margin-left: 6px; }

/* ---------- hero: photo slideshow (photos + framing from Admin) ---------- */
.hero { padding-top: 14px; }
.hero-card { position: relative; overflow: hidden; border-radius: 32px; min-height: 620px; display: flex; align-items: flex-end;
  background: radial-gradient(900px 520px at 22% 0%, #23302A 0%, #121614 55%, #0B0C0B 100%); color: var(--on-dark); isolation: isolate; }
.hero-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); z-index: 3; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); overflow: hidden; }
.hero-slide.on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); transform: scale(var(--z, 1)); transform-origin: var(--x, 50%) var(--y, 50%); }
.hero-slide.on img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(calc(var(--z, 1) * 1.06)); } to { transform: scale(var(--z, 1)); } }
.hero-card.has-photo .hero-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,9,.78) 0%, rgba(8,10,9,.45) 38%, rgba(8,10,9,0) 68%), linear-gradient(0deg, rgba(8,10,9,.55), rgba(8,10,9,0) 45%); }
.hero-copy { position: relative; z-index: 2; padding: 64px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.hero-card:not(.has-photo) { align-items: center; justify-content: center; text-align: center; }
.hero-card:not(.has-photo) .hero-copy { align-items: center; max-width: 820px; }
.hero-card:not(.has-photo)::before { /* subtle brushed-metal sheen when no photo yet */ content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.10), transparent 70%); }
.eyebrow { font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--blue-ink) 45%, #fff); letter-spacing: 0; }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: #fff; text-wrap: balance; }
.hero-copy p { margin: 0; max-width: 500px; font-size: 19px; line-height: 1.5; color: var(--on-dark-muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-dots { position: absolute; z-index: 4; right: 28px; bottom: 26px; display: flex; gap: 6px; padding: 7px 10px; border-radius: 980px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.hero-dots:empty { display: none; }
.hero-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.hero-dots button[aria-selected="true"] { width: 22px; background: #fff; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; margin: 22px 0 6px; border-block: 1px solid var(--hairline); }
.ticker-track { display: flex; gap: 40px; padding: 13px 0; width: max-content; animation: ticker 44s linear infinite; font-size: 14px; color: var(--muted); white-space: nowrap; }
.ticker-track span::after { content: "·"; margin-left: 40px; color: #C7C7CC; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
.kicker { display: block; font-size: 17px; font-weight: 600; color: var(--blue-ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.lede { margin: 6px 0 0; max-width: 560px; font-size: 19px; color: var(--muted); }

/* ---------- collections ---------- */
.collections { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(118px, 1fr)); gap: 12px; padding-top: 26px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.collections::-webkit-scrollbar { display: none; }
/* Category tile: full-bleed photo on top, quiet caption row underneath */
.coll { display: flex; flex-direction: column; padding: 6px; border: var(--bw, 0px) solid var(--bc, transparent); border-radius: var(--r-t, 0px) var(--r-t, 0px) var(--r-b, 18px) var(--r-b, 18px); background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); scroll-snap-align: start; text-decoration: none; text-align: left; color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.04); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.coll:hover { transform: translateY(calc(-3px - var(--lift, 0px))); box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.03); }
.coll:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue-ink) 50%, transparent); outline-offset: 3px; }
.coll-media { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: calc(var(--r-t, 0px) * .75) calc(var(--r-t, 0px) * .75) calc(var(--r-b, 18px) * .75) calc(var(--r-b, 18px) * .75); overflow: hidden; background: var(--tile, #F1F0EE); }
.coll-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hv-pct, 30%); opacity: 0; transition: opacity .5s var(--ease); background: linear-gradient(0deg, var(--hv-color, #6E5848), transparent); pointer-events: none; }
.coll:hover .coll-media::after { opacity: var(--hv-op, 1); }
.coll.soon .coll-media img { opacity: .55; filter: grayscale(.4); }
.coll.soon .coll-meta { color: #BF4800; }
.coll-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .9s var(--ease); }
.coll:hover .coll-media img { transform: scale(1.04); }
.coll-media.studio img { object-fit: contain; padding: 14px 18px; mix-blend-mode: multiply; }
.coll-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 6px 8px; }
.coll-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coll-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-go { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F1F0EE; color: var(--ink); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.coll-go svg { width: 13px; height: 13px; }
.coll:hover .coll-go { background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); transform: translateX(2px); }
.coll .coll-ph { position: absolute; left: 50%; top: 50%; width: auto; height: 52%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #D9DBE0 60%, #B9BCC3); }

/* ---------- WALL ART: brushed-metal frames ---------- */
.wallart { margin-top: 48px; padding: 84px 0 96px; background: linear-gradient(180deg, #ECECEF 0%, #E4E4E8 100%); position: relative; }
.wallart::before { /* soft gallery light from above */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 42% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0)); }
.wallart .wrap { position: relative; }
.frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 270px)); justify-content: center; gap: 56px 48px; margin-top: 12px; perspective: 1400px; }
.frame { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.frame-hang { position: relative; width: 100%; padding-top: 26px; }
.frame-hang::before { /* picture wire + hook */ content: ""; position: absolute; top: 0; left: 50%; width: 46%; height: 30px; transform: translateX(-50%); background:
  linear-gradient(to top right, transparent calc(50% - 1px), rgba(60,62,68,.55) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
  linear-gradient(to top left, transparent calc(50% - 1px), rgba(60,62,68,.55) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.frame-hang::after { content: ""; position: absolute; top: -4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8E9299 70%); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.frame-box {
  --m1: #F7F8FA; --m2: #C5C9D0; --m3: #EEF0F3; --m4: #8C9199; --m5: #E3E6EA; --m6: #A6AAB2;
  position: relative; display: block; width: 100%; padding: 13px; border: 0; cursor: pointer; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 2px), /* brushed grain */
    linear-gradient(135deg, var(--m1) 0%, var(--m2) 16%, var(--m3) 30%, var(--m4) 48%, var(--m5) 64%, var(--m6) 82%, var(--m1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.6), inset 0 -2px 2px rgba(0,0,0,.28), inset -1px 0 1px rgba(0,0,0,.18),
    0 2px 3px rgba(0,0,0,.18), 0 14px 22px -10px rgba(0,0,0,.38), 0 38px 60px -24px rgba(0,0,0,.42);
  transform: rotateX(1.5deg); transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.frame-box.gold   { --m1: #FFF4D6; --m2: #D9B56A; --m3: #FBE7B2; --m4: #9C7634; --m5: #EBCB86; --m6: #B48A45; }
.frame-box.black  { --m1: #6B6E75; --m2: #2A2C31; --m3: #55585F; --m4: #121317; --m5: #44474D; --m6: #1E2024; }
.frame-box.brass  { --m1: #F2E2C2; --m2: #B08A55; --m3: #E2C99A; --m4: #73552B; --m5: #C9A773; --m6: #8D6A38; }
.frame:hover .frame-box { transform: translateY(-6px) rotateX(4deg) rotateY(-4deg); box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.6), inset 0 -2px 2px rgba(0,0,0,.28), inset -1px 0 1px rgba(0,0,0,.18),
    0 4px 6px rgba(0,0,0,.16), 0 24px 30px -12px rgba(0,0,0,.40), 0 60px 80px -30px rgba(0,0,0,.45); }
.frame-mat { position: relative; display: block; background: #FBFBF8; padding: 16px; box-shadow: inset 0 3px 6px rgba(0,0,0,.30), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -1px 0 rgba(255,255,255,.8); }
.frame-art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #EDEDF0; box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.15); }
.frame-art img { width: 100%; height: 100%; object-fit: contain; background: #F4F4F1; transition: transform .8s var(--ease); }
.frame:hover .frame-art img { transform: scale(1.03); }
.frame-art .card-ph { position: absolute; inset: 0; }
.frame-box::after { /* glass glare across the frame */ content: ""; position: absolute; inset: 13px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 54%); mix-blend-mode: screen; opacity: .7; transition: transform .8s var(--ease); }
.frame:hover .frame-box::after { transform: translateX(8%); }
.frame-badges { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; gap: 6px; }
.frame-info { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.frame-info .name { font-size: 17px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.frame-info .meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.frame-info .price { font-size: 15px; }
.frame-info .btn { margin-top: 8px; }

/* ---------- products ---------- */
.products { padding: 72px 0 8px; }
.products .shop-tools { margin-bottom: 0; }
.lamps, .more { padding: 72px 0; }
.lamps { background: var(--surface); }
.sec-count { font-size: 15px; color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 980px; border: 0; background: rgba(0,0,0,.05); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; }
.chip:hover { background: rgba(0,0,0,.08); }
.chip small { font-size: 12px; opacity: .55; }
.chip[aria-selected="true"] { background: var(--ink); color: #fff; }
.shop-tools { display: flex; gap: 10px; margin: 14px 0 26px; }
.search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 980px; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.search input { flex: 1; border: 0; outline: none; min-height: 44px; background: transparent; color: var(--ink); font-size: 16px; }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 4px color-mix(in srgb, var(--blue-ink) 16%, transparent); }
.sort select { min-height: 44px; padding: 0 16px; border-radius: 980px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: #fff; font-size: 16px; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Gallery tile — soft studio-grey tile, the piece itself in the middle, quiet caption at the bottom.
   Hover warms the tile to a lit taupe backdrop (like a lamp switched on). */
.card { display: block; }
.card-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-t, 0px) var(--r-t, 0px) var(--r-b, 18px) var(--r-b, 18px); border: var(--bw, 0px) solid var(--bc, transparent); box-shadow: var(--sh, none); padding: 0; cursor: pointer; overflow: hidden; text-align: left; color: var(--ink);
  background: var(--tile, #F1F0EE); isolation: isolate; transition: background .5s var(--ease), color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover .card-media { transform: translateY(calc(var(--lift, 0px) * -1)); }
/* hover: tinted gradient rising from the bottom — colour & height set per category in admin */
.card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(var(--hv-pct, 30%), 104px); z-index: 1; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0;
  background: linear-gradient(0deg, var(--hv-color, #6E5848) 0%, color-mix(in srgb, var(--hv-color, #6E5848) 82%, transparent) 38%, color-mix(in srgb, var(--hv-color, #6E5848) 35%, transparent) 72%, transparent 100%); }
.card:hover .card-media::after, .card-media:focus-visible::after { opacity: var(--hv-op, 1); }
.card:hover .card-media, .card-media:focus-visible { color: var(--hv-ink, #fff); }
.card-media:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue-ink) 50%, transparent); outline-offset: 3px; }
/* white studio backgrounds melt into the tile */
.cmp > img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px 18px 6px; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.card:hover .cmp > img { transform: translateY(-4px) scale(var(--hz, 1.035)); }
.card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; padding: 14px; text-align: center; }
.card-banner { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-price { font-size: 13px; color: var(--muted); transition: color .35s var(--ease); }
.cb-price .price-now { color: inherit; font-weight: 600; }
.cb-price .price-was { font-size: 12px; }
.cb-price .price-from, .cb-price .price-was { color: inherit; transition: color .35s var(--ease); }
.card:hover .cb-price .price-from, .card:hover .cb-price .price-was, .card-media:focus-visible .cb-price .price-from, .card-media:focus-visible .cb-price .price-was { color: var(--hv-ink2, rgba(255,255,255,.85)); }
.cb-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.cb-cat { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .35s var(--ease); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.cb-go { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.05); transition: background .35s var(--ease), transform .35s var(--ease); }
.cb-go svg { width: 13px; height: 13px; }
.card:hover .cb-price, .card:hover .cb-cat, .card-media:focus-visible .cb-price, .card-media:focus-visible .cb-cat { color: var(--hv-ink2, rgba(255,255,255,.82)); }
.card:hover .cb-go { background: rgba(255,255,255,.22); transform: translateX(2px); }
.card-flag { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 3px 9px; border-radius: 980px; font-size: 11px; font-weight: 600; background: #fff; color: #BF4800; }
.card-flag.sale { background: #FF9F0A; color: #1D1D1F; }
.card-flag.out { background: rgba(29,29,31,.82); color: #fff; }
.card-fins { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; gap: 4px; }
.card-fins .swatch { width: 11px; height: 11px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.15); }

/* ---------- perks ---------- */
.perks-sec { padding: 8px 0 72px; }
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.perk { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: 22px; padding: 24px; }
.perk svg { color: var(--blue); margin-bottom: 8px; }
.perk strong { font-size: 17px; font-weight: 700; }
.perk span { font-size: 14px; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { padding: 0 0 80px; }

/* ---------- custom (glass over colour) ---------- */
.custom { position: relative; overflow: hidden; padding: 96px 0; background:
  radial-gradient(40% 55% at 12% 20%, rgba(255, 159, 10, .55), transparent 70%),
  radial-gradient(45% 60% at 88% 18%, rgba(94, 92, 230, .55), transparent 70%),
  radial-gradient(50% 60% at 70% 95%, color-mix(in srgb, var(--blue-ink) 45%, transparent), transparent 70%),
  radial-gradient(40% 50% at 25% 90%, rgba(255, 55, 95, .35), transparent 70%),
  #F5F5F7; }
.custom-grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.custom-copy { flex: 1 1 400px; display: flex; flex-direction: column; gap: 18px; }
.custom h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.035em; }
.custom-copy p { margin: 0; color: #3A3A3C; font-size: 19px; line-height: 1.5; max-width: 500px; }
.steps { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: center; font-size: 16px; }
.steps b { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(0,0,0,.08); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.custom-copy .btn { align-self: flex-start; color: var(--ink); border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.45); }
.custom-form { flex: 1 1 460px; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.custom-form h3 { font-size: 24px; }
.custom-form .field input:not([type=checkbox]), .custom-form .field select, .custom-form .field textarea { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.08); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-note { margin: 0; font-weight: 500; min-height: 1em; font-size: 14px; }
.form-note.ok { color: var(--ok); }

/* ---------- footer ---------- */
.footer { background: var(--canvas); color: var(--muted); padding: 48px 0 28px; font-size: 13px; border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer h4 { color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; }
.footer a { display: block; padding: 4px 0; color: var(--muted); }
.footer a:hover { color: var(--ink); text-decoration: none; }
.footer-logo { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); }
.footer-logo .urdu { color: var(--steel-4); font-size: 16px; margin-left: 6px; }
.footer-brand p { margin: 6px 0 14px; }
.socials { display: flex; gap: 6px; flex-wrap: wrap; }
.social { display: inline-flex !important; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.05); color: var(--ink) !important; padding: 0 !important; }
.social:hover { background: rgba(0,0,0,.09); }
.contact-list a, .contact-list span { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.footer-bottom { border-top: 1px solid var(--hairline); margin-top: 32px; padding-top: 18px; font-size: 12px; }

/* ---------- product dialog ---------- */
.product-sheet { width: min(1040px, calc(100vw - 32px)); }
.pd-tools { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; gap: 2px; padding: 3px; border-radius: 980px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 14px rgba(0,0,0,.14); }
.pd-tools .icon-btn { width: 40px; height: 40px; }
.pd { display: grid; grid-template-columns: 1.1fr 1fr; }
.pd-gallery { position: relative; display: flex; flex-direction: column; }
.pd-gallery.dark .pd-thumb { background: rgba(255,255,255,.08); }
.pd-gallery.dark .pd-thumb.on { border-color: #fff; }
.pd-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y; }
.pd-stage > img, .pd-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.pd-stage .card-ph { color: inherit; opacity: .7; }
/* Desktop: photo side follows the height of the details, so short products have no empty gap */
@media (min-width: 901px) {
  #productDlg:not(.max) .pd-gallery { position: sticky; top: 0; align-self: start; height: var(--gal-h, 560px); }
  #productDlg:not(.max) .pd-stage { aspect-ratio: auto; flex: 1; min-height: 0; }
  #productDlg:not(.max) .pd-info { align-self: start; min-height: 380px; }
}
.pd-prev, .pd-next { position: absolute; top: calc(50% - 60px); background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pd-prev { left: 12px; } .pd-next { right: 12px; }
.pd-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.pd-thumb { width: 60px; height: 60px; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--tile); position: relative; }
.pd-thumb.on { border-color: var(--blue); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.3); }
.pd-info { padding: 34px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.pd-code { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; margin-top: -8px; font-variant-numeric: tabular-nums; }
.pd-code:empty { display: none; }
.pd-cat { font-size: 13px; font-weight: 500; color: #BF4800; }
.pd-info h2 { font-size: 32px; font-weight: 800; padding-right: 96px; }
.pd-price { font-size: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.pd-save { font-size: 14px; font-weight: 500; color: var(--ok); }
.pd-opts { display: flex; flex-direction: column; gap: 20px; }
.pick { display: flex; flex-direction: column; gap: 10px; }
.pick-head { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.pick-head span { font-weight: 700; }
.pick-head b { font-weight: 400; color: var(--muted); }
.size-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.size-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 10px; border-radius: 14px; border: 1px solid #D2D2D7; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.size-opt .nm { font-weight: 600; font-size: 15px; }
.size-opt .pr { font-size: 12px; color: var(--muted); min-height: 1em; }
.size-opt[aria-checked="true"], .fin-opt[aria-checked="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-ink) 20%, transparent); }
.fin-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border-radius: 980px; border: 1px solid #D2D2D7; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.fin-dot { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 6px 10px rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.18); }
.fin-opt .pr { font-size: 12px; color: var(--muted); }
.pd-parts { list-style: none; margin: 0 0 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; border-radius: 14px; background: rgba(0,0,0,.035); }
.pd-parts[hidden] { display: none; }
.pd-parts li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #3A3A3C; }
.pd-parts b { font-weight: 600; color: var(--ink); }
.pd-parts b::after { content: " ·"; color: var(--muted); font-weight: 400; }
.pp-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pd-desc { margin: 0; white-space: pre-line; color: #3A3A3C; line-height: 1.6; font-size: 16px; }
.pd-stock { margin: 0; font-size: 14px; font-weight: 500; color: #BF4800; }
.pd-buy { display: flex; gap: 12px; align-items: center; }
/* Details column: fixed head (name, price, choices) · scrolling description · fixed foot (stock + buy) */
.pd-head { flex: none; display: flex; flex-direction: column; gap: 14px; }
.pd-scroll-wrap { position: relative; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pd-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.pd-scroll:empty { display: none; }
.pd-scroll > * { flex: none; }
.pd-scroll.fade-t { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }
.pd-scroll.fade-t.fade-b { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 64px), transparent 100%); }
.pd-scroll.fade-b { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent 100%); }
.pd-more { position: absolute; left: 50%; bottom: 2px; width: 30px; height: 30px; margin-left: -15px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); animation: pdBob 1.8s ease-in-out infinite; }
.pd-more[hidden] { display: none; }
.pd-more:hover { background: #fff; }
@keyframes pdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .pd-more { animation: none; } }
.pd-foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
@media (min-width: 901px) {
  #productDlg:not(.max) .pd-info { max-height: calc(100dvh - 50px); overflow: hidden; }
}
@media (max-width: 900px) {
  .pd-scroll { overflow: visible; } .pd-scroll.fade-b, .pd-scroll.fade-t { -webkit-mask-image: none; mask-image: none; } .pd-more { display: none; }
  .pd-foot { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px; background: rgba(242,242,245,.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0,0,0,.06); }
}
.pd-buy .btn { flex: 1; min-height: 50px; }
.qty { display: inline-flex; align-items: center; border-radius: 980px; background: rgba(0,0,0,.05); }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.pd-reviews:empty { display: none; }
.pd-reviews { border-top: 1px solid var(--hairline); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.pd-reviews .review-card { flex: none; width: 100%; box-shadow: none; border: 1px solid var(--line); }

/* ---------- cart drawer ---------- */
.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); padding: 10px; }
.drawer-panel { height: 100%; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; background: rgba(251,251,253,.82); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer-foot { border-top: 1px solid var(--hairline); padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; background: #fff; border-radius: 18px; padding: 10px; box-shadow: var(--shadow-sm); }
.line img, .line .line-ph { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--tile); }
.line-name { font-weight: 600; font-size: 15px; }
.line-opt { font-size: 13px; color: var(--muted); }
.line-warn { font-size: 13px; color: var(--danger); font-weight: 500; }
.line .qty { margin-top: 8px; }
.line .qty .icon-btn { width: 34px; height: 34px; }
.line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-weight: 600; }
.line-remove { font-size: 13px; color: var(--muted); font-weight: 400; }
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; min-width: 0; min-height: 42px; border-radius: 980px; border: 0; box-shadow: inset 0 0 0 1px #D2D2D7; padding: 0 16px; font-size: 16px; text-transform: uppercase; background: #fff; }
.coupon-msg { font-size: 13px; font-weight: 500; margin: 0; }
.coupon-msg.ok { color: var(--ok); } .coupon-msg.bad { color: var(--danger); }
.totals { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 19px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--hairline); margin-top: 4px; }
.free-note { font-size: 13px; color: var(--muted); margin: 0; }
.free-bar { height: 5px; border-radius: 5px; background: rgba(0,0,0,.08); overflow: hidden; }
.free-bar i { display: block; height: 100%; background: var(--brand-bg, var(--blue)); }

/* ---------- checkout ---------- */
.checkout-sheet { width: min(1080px, calc(100vw - 32px)); }
.co { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
.co-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-step { font-size: 19px; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.co-step b, .co-sub b { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.co-sub { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; font-weight: 500; line-height: 1.45; }
.co-sub > span { flex: 1; min-width: 0; padding-top: 1px; }
.co-sub b { width: 22px; height: 22px; font-size: 12px; background: var(--brand-bg, var(--blue)); }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pay { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid #D2D2D7; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.pay[aria-checked="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-ink) 20%, transparent); }
.pay strong { display: block; font-weight: 600; }
.pay small { color: var(--muted); }
.pay-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C7C7CC; flex: none; margin-top: 2px; }
.pay[aria-checked="true"] .pay-dot { border: 6px solid var(--blue); }
.transfer { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(0,0,0,.035); }
.banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.transfer-note { margin: 0; font-size: 14px; color: var(--muted); white-space: pre-line; }
.transfer-note:empty { display: none; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.co-summary { background: #fff; border-radius: 22px; padding: 20px; align-self: start; position: sticky; top: 80px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.co-summary h3 { font-size: 19px; }
.co-item { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.co-item span { color: var(--muted); }
.co-total { font-size: 19px; font-weight: 700; margin-right: auto; }

/* ---------- success ---------- */
.success .sheet-body { display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: #E3F4E8; color: var(--ok); display: flex; align-items: center; justify-content: center; }
.success-icon svg { width: 32px; height: 32px; }
.success h2 { font-size: 28px; }
.success .btn { width: 100%; }
.pending-box { background: #FFF2DB; color: #5C3B00; border-radius: 16px; padding: 12px 14px; font-size: 14px; text-align: left; width: 100%; }

.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-wa { display: none !important; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding: 48px; }
}
@media (max-width: 900px) {
  .menu-btn { display: inline-flex !important; }
  .nav { position: relative; }
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; padding: 8px; border-radius: 22px; background: #FBFBFD; box-shadow: 0 12px 40px rgba(0,0,0,.18); border: 1px solid var(--glass-edge); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }
  .hero-card { min-height: 560px; }
  .hero-copy { padding: 40px; }
  .hero-card.has-photo .hero-slides::after { background: linear-gradient(0deg, rgba(8,10,9,.85) 0%, rgba(8,10,9,.55) 40%, rgba(8,10,9,0) 70%); }
  .collections { grid-template-columns: repeat(var(--n), minmax(110px, 1fr)); gap: 10px; }
  .pd { grid-template-columns: minmax(0, 1fr); }
  .co { grid-template-columns: minmax(0, 1fr); }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 760px) {
  .nav-wrap { padding: 0 10px; top: 8px; }
  .nav { padding: 4px 4px 4px 10px; border-radius: 20px; }
  .brand-name { font-size: 17px; }
  .hero { padding-top: 10px; }
  .hero-card { border-radius: 26px; min-height: 540px; }
  .hero-copy { padding: 26px 22px 30px; gap: 14px; }
  .hero-dots { right: 50%; transform: translateX(50%); top: 16px; bottom: auto; }
  .hero-copy p { font-size: 16px; }
  .hero-ctas { flex-wrap: nowrap; }
  .hero-ctas .btn { flex: 1; padding: 0 12px; font-size: 15px; min-height: 48px; }
  .wallart { margin-top: 48px; padding: 56px 0 64px; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; justify-content: stretch; }
  .frame-box { padding: 8px; }
  .frame-box::after { inset: 8px; }
  .frame-mat { padding: 9px; }
  .frame-hang { padding-top: 20px; }
  .frame-info .name { font-size: 15px; }
  .frame-info .btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .products { padding: 48px 0 0; }
  .lamps, .more { padding: 48px 0; }
  .shop-tools { flex-direction: column; }
  .sort select { width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-media { border-radius: var(--r-t, 0px) var(--r-t, 0px) var(--r-b, 16px) var(--r-b, 16px); }
  .card-name { font-size: 15px; }
  .card-price { font-size: 15px; }
  .card-foot { flex-direction: column; align-items: stretch; }
  .card .btn { width: 100%; }
  .perks { gap: 10px; }
  .perk { padding: 16px; border-radius: 18px; }
  .perk strong { font-size: 15px; } .perk span { font-size: 13px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .custom { padding: 64px 0; }
  .custom-form { padding: 20px; border-radius: 24px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .drawer { width: 100vw; padding: 0; }
  .drawer-panel { border-radius: 0; }
  .pd-info { padding: 22px 16px 12px; }
  .pd-info h2 { font-size: 26px; }
  .pd-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .co-step { font-size: 18px; }
  .co-step b { width: 24px; height: 24px; font-size: 12px; }
  .sheet-body { padding: 16px; }
  .sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- product view: full screen ---------- */
#productDlg.max { margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
#productDlg.max .product-sheet { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow: hidden; }
#productDlg.max .pd { grid-template-columns: minmax(0, 1fr) min(440px, 36vw); height: 100%; }
#productDlg.max .pd-gallery { height: 100dvh; }
#productDlg.max .pd-stage { aspect-ratio: auto; flex: 1; min-height: 0; }
#productDlg.max .pd-stage > img { padding: 32px; }
#productDlg.max .pd-info { overflow: hidden; height: 100dvh; padding-bottom: 22px; }
#productDlg.max .pd-scroll-wrap { flex: 1 1 auto; }
@media (max-width: 900px) {
  #productDlg.max .pd { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  #productDlg.max .pd-gallery { height: auto; }
  #productDlg.max .pd-stage { height: 70dvh; flex: none; }
  #productDlg.max .pd-info { height: auto; overflow: visible; }
  #productDlg.max .pd-scroll-wrap { flex: none; }
  #productDlg.max .product-sheet { overflow-y: auto; }
}
@media (max-width: 760px) {
  .collections { grid-template-columns: repeat(var(--n), 38vw); gap: 10px; scroll-padding: 0 16px; }
  .coll { padding: 5px; }
  .coll-name { font-size: 14px; } .coll-meta { font-size: 12px; }
  .cmp > img { padding: 12px 10px 4px; }
  .card-banner { left: 12px; right: 10px; bottom: 11px; }
  .cb-name { font-size: 13px; } .cb-price { font-size: 12px; }
  .cb-cat { display: none; } .cb-go { width: 24px; height: 24px; }
  .pd-stage { aspect-ratio: 1 / 1; max-height: 52dvh; }
  .pd-thumbs { padding: 8px 10px; } .pd-thumb { width: 48px; height: 48px; }
  .cb-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .cmp > img { padding-bottom: 4px; }
  .size-opts { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

.tips-head { margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* category menu (desktop dropdown, phone list) */
.nav-cats { position: relative; display: flex; }
.nav-cats[hidden] { display: none; }
.nav-cat-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 0; border-radius: 980px; background: none; color: var(--ink); opacity: .78; font-size: 14px; cursor: pointer; }
.nav-cat-btn:hover, .nav-cats.open .nav-cat-btn { opacity: 1; background: rgba(0,0,0,.05); }
.nav-cat-btn svg { transition: transform .2s; }
.nav-cats.open .nav-cat-btn svg { transform: rotate(180deg); }
.nav-cat-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 240px; max-height: 70vh; overflow: auto; padding: 8px; border-radius: 18px; background: #FBFBFD;
  box-shadow: 0 16px 48px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); display: none; flex-direction: column; z-index: 60; }
.nav-cats.open .nav-cat-menu { display: flex; }
.nav-cat-menu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 15px; opacity: 1; }
.nav-cat-menu a:hover { background: rgba(0,0,0,.05); }
.nav-cat-menu a span { font-size: 12px; color: var(--muted); }
.nav-cat-menu a.all { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 12px 12px; font-weight: 600; }
@media (max-width: 900px) {
  .nav-cats { flex-direction: column; }
  .nav-cat-btn { padding: 12px 14px; font-size: 16px; justify-content: space-between; width: 100%; }
  .nav-cat-menu { position: static; transform: none; box-shadow: none; background: transparent; padding: 0 0 4px 10px; max-height: none; min-width: 0; }
}
/* category chips above products */
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 14px 0 8px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 980px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.chip span { font-size: 12px; color: var(--muted); }
.chip.empty { color: var(--muted); }
.chip.on { background: var(--ink); color: #fff; box-shadow: none; }
.chip.on span { color: rgba(255,255,255,.7); }

/* hover slideshow layers */
.cmp > img.sl, .frame-art img.sl { opacity: 0; transition: opacity .9s var(--ease), transform .8s var(--ease); }
.cmp > img.sl.on, .frame-art img.sl.on { opacity: 1; }
.frame-art img.sl { position: absolute; inset: 0; }

/* products already in the bag */
.card.in-bag .card-media { box-shadow: 0 0 0 2.5px var(--blue), 0 8px 24px color-mix(in srgb, var(--blue) 14%, transparent); }
.card.in-bag .card-media { outline: 0; }
.frame.in-bag .frame-box { outline: 2.5px solid var(--blue); outline-offset: 6px; border-radius: 4px; }
.bag-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 980px; background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); font-size: 11.5px; font-weight: 600; box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 25%, transparent); pointer-events: none; }
.bag-badge svg { width: 13px; height: 13px; }
.card-media .bag-badge { right: 12px; bottom: auto; top: 40px; }
.frame-hang { position: relative; }
.frame-hang .bag-badge { right: 4px; top: 4px; }

/* colour versions */
.var-dots { display: inline-flex; gap: 4px; align-items: center; }
.var-dots .swatch { width: 11px; height: 11px; }
.var-dots .swatch.cur { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--ink); }
.cb-var { font-style: normal; font-weight: 500; opacity: .75; }
.fin-opt.var-link { opacity: .85; }
.fin-opt.var-link:hover { opacity: 1; }
.frame-info .meta .var-dots { margin-right: 6px; }

/* View all links */
.view-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 980px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.view-all svg { width: 14px; height: 14px; }
.view-all:hover { background: var(--ink); color: #fff; }
.sec-right { display: flex; align-items: center; gap: 12px; }
.section-head.has-va { position: relative; }
.section-head.has-va .view-all { position: absolute; right: 0; bottom: 0; }

/* side-scrolling rows */
.rail { position: relative; }
.rail-track { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; gap: 16px; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; overscroll-behavior-x: contain; }
.rail-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.rail-track.grid > .card { width: clamp(220px, 23%, 290px); }
.rail-track.frames { justify-content: flex-start; gap: 40px; perspective: none; padding-top: 10px; }
.rail-track.frames > .frame { width: 270px; }
.rail:not(.scrollable) .rail-track.frames { justify-content: center; }
.rail-nav { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 4; }
.rail.scrollable .rail-nav { display: block; }
.rail-btn { position: absolute; top: 42%; transform: translateY(-50%); pointer-events: auto; width: 44px; height: 44px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06); transition: opacity .2s; }
.rail-btn[data-rail="-1"] { left: -22px; }
.rail-btn[data-rail="1"] { right: -22px; }
.rail-btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .rail-nav { display: none !important; }
  .rail-track.grid > .card { width: 64vw; max-width: 280px; }
  .rail-track.frames > .frame { width: 68vw; max-width: 270px; }
  .rail-track { gap: 12px; margin: 0 -16px; padding: 4px 16px 16px; scroll-padding: 0 16px; }
  .section-head.has-va .view-all { position: static; margin-top: 12px; }
  .sec-right .sec-count { display: none; }
  .view-all { padding: 7px 12px; font-size: 13px; }
}

/* view-all page */
.view-mode .hero, .view-mode .ticker, .view-mode #collections, .view-mode #products, .view-mode #wallart, .view-mode #lamps, .view-mode #more, .view-mode .perks-sec, .view-mode #reviews, .view-mode #custom { display: none !important; }
.view-page { padding-top: 104px; padding-bottom: 72px; min-height: 70vh; }
.vp-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 980px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.vp-back svg { width: 16px; height: 16px; }
.vp-back:hover { background: var(--ink); color: #fff; }
.view-page .shop-tools { margin: 14px 0 0; }
.cat-chips.sub { margin-top: 0; }
.chip.sm { min-height: 32px; font-size: 13px; padding: 0 12px; background: #F2F2F5; box-shadow: none; }
.chip.sm.on { background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); }
.vp-frames { margin-top: 26px; }
.vp-grid { margin-top: 10px; }
.cat-chips[hidden] { display: none; }
@media (max-width: 760px) { .view-page { padding-top: 92px; } }

/* per-product photo framing */
.cmp > img.sl, .frame-art img.sl, .pd-stage > img { transform-origin: var(--fx, 50%) var(--fy, 50%); object-position: var(--fx, 50%) var(--fy, 50%); }
.cmp > img.sl { transform: scale(var(--z, 1)); }
.card:hover .cmp > img.sl { transform: translateY(-4px) scale(calc(var(--z, 1) * var(--hz, 1.035))); }
.frame-art img.sl { transform: scale(var(--z, 1)); }
.frame:hover .frame-art img.sl { transform: scale(calc(var(--z, 1) * 1.03)); }
.pd-stage > img { transform: scale(var(--z, 1)); }

/* ---------- per-photo fit (admin → product → photo → Adjust) ----------
   contain  = Fit: the whole photo with breathing room (default)
   cover    = Fill & centre: fills the photo area edge to edge, crops what spills over
   fill     = Stretch: stretched to every edge
   original = Original ratio: whole photo, as large as it fits, no padding */
.cmp > img[data-fit] { padding: 0; mix-blend-mode: normal; }
.cmp > img[data-fit="cover"] { object-fit: cover; }
.cmp > img[data-fit="fill"] { object-fit: fill; }
.cmp > img[data-fit="original"] { object-fit: contain; mix-blend-mode: multiply; }
.cmp > img[data-fit="contain"] { padding: 16px 16px 4px; mix-blend-mode: multiply; }
.frame-art img[data-fit="cover"] { object-fit: cover; }
.frame-art img[data-fit="fill"] { object-fit: fill; }
.pd-stage > img[data-fit="cover"] { object-fit: cover; padding: 0; }
.pd-stage > img[data-fit="fill"] { object-fit: fill; padding: 0; }
.pd-stage > img[data-fit="original"] { padding: 0; }

/* ---------- glass surfaces over the live background ---------- */
.wallart { background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 100%); border-block: 1px solid rgba(255,255,255,.7); }
.wallart::before { background: radial-gradient(60% 42% at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.lamps { background: rgba(255,255,255,.16); border-block: 1px solid rgba(255,255,255,.7); }
.perk, .review-card, .co-summary, .line { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 4px 18px rgba(20,20,20,.05); }
.footer { background: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top-color: rgba(255,255,255,.7); }
.ticker { border-block-color: rgba(255,255,255,.7); background: rgba(255,255,255,.25); }
.search, .sort select, .chip, .view-all, .vp-back { background-color: rgba(255,255,255,.7); }
.chip.on { background: var(--ink); }
.chip.sm { background: rgba(255,255,255,.55); }
.chip.sm.on { background: var(--brand-bg, var(--blue)); }
.view-all:hover, .vp-back:hover { background: var(--ink); }
.card-media { background: color-mix(in srgb, var(--tile, #F1F0EE) 90%, transparent); box-shadow: var(--sh, none), inset 0 0 0 1px rgba(255,255,255,.55); }

/* category tile → highlight its pieces in the row */
.coll, .coll:hover, .coll:focus { text-decoration: none; }
.coll * { text-decoration: none; }
@keyframes pieceFlash { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 0%, transparent); } 25%, 60% { box-shadow: 0 0 0 3px var(--blue), 0 10px 28px color-mix(in srgb, var(--blue) 18%, transparent); } }
.card.flash .card-media { animation: pieceFlash 2s var(--ease); }
.frame.flash .frame-box { animation: pieceFlash 2s var(--ease); }

/* category tile photo framing (admin → Categories → Adjust photo) */
.coll .coll-media img[data-framed] { object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--z, 1)); }
.coll:hover .coll-media img[data-framed] { transform: scale(calc(var(--z, 1) * 1.04)); }
.coll .coll-media img[data-fit] { padding: 0; mix-blend-mode: normal; }
.coll .coll-media img[data-fit="cover"] { object-fit: cover; }
.coll .coll-media img[data-fit="fill"] { object-fit: fill; }
.coll .coll-media img[data-fit="contain"] { object-fit: contain; padding: 12px 14px; mix-blend-mode: multiply; }
.coll .coll-media img[data-fit="original"] { object-fit: contain; mix-blend-mode: multiply; }

/* Auto photo display: real photos fill the same photo box on every card (matching, symmetrical cards);
   white-background product shots keep floating on the tile */
.cmp > img[data-auto="photo"] { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.cmp > img[data-auto="studio"] { object-fit: contain; }

/* the photo box: same size on every card, clipped, with a small fixed gap above the name & price */
.cmp { position: absolute; left: 0; right: 0; top: 0; bottom: var(--cap-h, 70px); overflow: hidden; z-index: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 760px) { .cmp { --cap-h: 62px; } }
/* filled photos zoom in place on hover instead of sliding up (keeps the edges clean) */
.card:hover .cmp > img[data-auto="photo"], .card:hover .cmp > img[data-fit="cover"], .card:hover .cmp > img[data-fit="fill"] { transform: scale(calc(var(--z, 1) * var(--hz, 1.035))); }
/* stack photo box and caption so they can never overlap, whatever the name length */
.card-media { display: flex !important; flex-direction: column; }
.cmp { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; }
.card-banner { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; flex: none; padding: 10px 16px 15px; }
@media (max-width: 760px) { .card-banner { padding: 8px 12px 11px; } }
.cmp { z-index: auto; }   /* no own layer, so white-background photos still melt into the tile */
.card-media { background: var(--tile, #F1F0EE) !important; }

/* fixed photo shape on every card: 4:5 portrait box + the name strip under it
   (the admin "Adjust photo" card preview uses the very same 4:5 box) */
.card-media { aspect-ratio: auto !important; }
.cmp { flex: none !important; aspect-ratio: 4 / 5; height: auto; }

/* ---------- footer in the brand colour; text flips light/dark for contrast ---------- */
.footer { --ft: var(--on-blue, #fff); background: var(--brand-bg, var(--blue)) !important; color: color-mix(in srgb, var(--ft) 76%, transparent); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.footer h4, .footer-logo, .footer-logo .urdu { color: var(--ft); }
.footer-logo .urdu { opacity: .8; }
.footer a, .footer .contact-list a, .footer .contact-list span { color: color-mix(in srgb, var(--ft) 78%, transparent) !important; }
.footer a:hover { color: var(--ft) !important; }
.footer .contact-list svg { color: var(--ft); opacity: .85; }
.footer .social { background: color-mix(in srgb, var(--ft) 14%, transparent) !important; color: var(--ft) !important; }
.footer .social:hover { background: color-mix(in srgb, var(--ft) 24%, transparent) !important; }
.footer-bottom { border-top-color: color-mix(in srgb, var(--ft) 20%, transparent); color: color-mix(in srgb, var(--ft) 70%, transparent); }

/* ---------- Try our lamp ---------- */
.lamptry { position: relative; padding: 88px 0; overflow: hidden; transition: background .8s var(--ease); background: linear-gradient(180deg, rgba(18,18,20,.0), rgba(18,18,20,.0)); }
.lamptry::before { content: ""; position: absolute; inset: 0; background: #141416; opacity: .92; transition: opacity .8s var(--ease), background .8s var(--ease); pointer-events: none; }
.lamptry.on::before { background: radial-gradient(70% 90% at 70% 40%, #4A3218 0%, #23180E 55%, #120D08 100%); opacity: 1; }
.lt-wrap { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.lt-copy { color: #F5F5F7; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lt-kicker { color: color-mix(in srgb, var(--blue-ink) 40%, #fff); margin: 0; }
.lamptry.on .lt-kicker { color: #FFC976; }
.lt-copy h2 { color: #fff; margin: 0; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1.05; }
.lt-text { margin: 0; color: rgba(245,245,247,.72); font-size: 18px; max-width: 420px; }
.lt-hint { margin: 0; font-size: 13px; color: rgba(245,245,247,.5); }
/* the switch */
.lt-switch { display: inline-flex; align-items: center; gap: 14px; padding: 6px; border: 0; background: none; cursor: pointer; color: #fff; margin-top: 8px; -webkit-tap-highlight-color: transparent; }
.lt-track { position: relative; width: 92px; height: 50px; border-radius: 25px; background: linear-gradient(180deg, #2A2A2E, #3A3A40); box-shadow: inset 0 3px 8px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.08); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.lt-knob { position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9D9DE 60%, #B9B9C0); box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 -2px 4px rgba(0,0,0,.18); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.lt-switch[aria-checked="true"] .lt-track { background: linear-gradient(180deg, #F6B24A, #FFD38A); box-shadow: inset 0 2px 6px rgba(120,60,0,.35), 0 0 28px rgba(255,190,90,.55); }
.lt-switch[aria-checked="true"] .lt-knob { transform: translateX(42px); }
.lt-state { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; min-width: 34px; text-align: left; color: rgba(255,255,255,.7); }
.lt-switch[aria-checked="true"] .lt-state { color: #FFD38A; }
.lt-switch:focus-visible .lt-track { outline: 3px solid #FFD38A; outline-offset: 3px; }
/* the photo */
.lt-stage { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 640px; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer; background: #0E0E10; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .8s var(--ease); }
.lamptry.on .lt-stage { box-shadow: 0 30px 90px rgba(255,170,60,.28), 0 0 0 1px rgba(255,210,140,.18); }
.lt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-on { opacity: 0; transition: opacity .55s ease; }
.lamptry.on .lt-on { opacity: 1; }
.lamptry.flick .lt-on { animation: ltFlicker .5s steps(1, end); }
@keyframes ltFlicker { 0% { opacity: .0; } 12% { opacity: .85; } 22% { opacity: .2; } 34% { opacity: 1; } 46% { opacity: .55; } 60%, 100% { opacity: 1; } }
.lt-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 35% at 50% 30%, rgba(255,200,120,.22), transparent 70%); opacity: 0; transition: opacity .8s var(--ease); mix-blend-mode: screen; }
.lamptry.on .lt-glow { opacity: 1; }
@media (max-width: 900px) {
  .lamptry { padding: 64px 0; }
  .lt-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lt-stage { max-height: 70vh; border-radius: 22px; }
  .lt-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lamptry.flick .lt-on { animation: none; } .lt-knob { transition: none; } }

/* caption: bigger title on the left, price on the right; category & arrow on the photo's bottom corners */
.card-banner { display: flex !important; align-items: center !important; justify-content: space-between; gap: 12px; }
.card-banner .cb-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-banner .cb-name .cb-var { font-weight: 500; }
.card-banner .cb-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; font-size: 15px; line-height: 1.25; color: var(--ink); }
.card-banner .cb-price .price-now { font-weight: 700; }
.card-banner .cb-price .price-was { font-size: 12px; color: var(--muted); }
.cmp .cb-ov { position: absolute; z-index: 3; bottom: 12px; }
.cmp .cb-cat.cb-ov { left: 12px; max-width: calc(100% - 70px); padding: 5px 10px; border-radius: 980px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cmp .cb-go.cb-ov { right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.cmp .cb-go.cb-ov svg { width: 15px; height: 15px; }
.card:hover .cmp .cb-go.cb-ov { background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); transform: translateX(2px); }
.card:hover .cmp .cb-cat.cb-ov { color: var(--ink); }
/* hover shade keeps caption text readable in its own colours */
.card:hover .card-banner .cb-name, .card-media:focus-visible .card-banner .cb-name { color: var(--hv-ink, #fff); }
.card:hover .card-banner .cb-price, .card:hover .card-banner .cb-price .price-now { color: var(--hv-ink, #fff); }
@media (max-width: 760px) {
  .card-banner .cb-name { font-size: 14.5px; }
  .card-banner .cb-price { font-size: 13.5px; }
  .cmp .cb-ov { bottom: 9px; } .cmp .cb-cat.cb-ov { left: 9px; font-size: 9px; padding: 4px 8px; } .cmp .cb-go.cb-ov { right: 9px; width: 32px; height: 32px; }
}
.cmp .cb-cat.cb-ov { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
@media (max-width: 760px) { .cmp .cb-go.cb-ov { width: 32px !important; height: 32px !important; } }
/* footer colour can differ from the brand colour (admin → Brand colour → Footer) */
.footer { --ft: var(--footer-ink, var(--on-blue, #fff)); background: var(--footer-bg, var(--brand-bg, var(--blue))) !important; }

/* ---------- category section headers as clear glass tiles; no dividing lines between sections ---------- */
.wallart, .lamps, .more { border-block: 0 !important; }
:is(#wallart, #lamps, #more) .section-head {
  position: relative; flex-direction: row !important; align-items: center !important; justify-content: space-between; text-align: left !important;
  gap: 10px 18px; padding: 20px 24px 20px 30px; margin-bottom: 22px; border-radius: 24px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 8px 28px rgba(20,20,20,.07);
  overflow: hidden;
}
:is(#wallart, #lamps, #more) .section-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--brand-bg, var(--blue)); }
:is(#wallart, #lamps, #more) .section-head .kicker { display: inline-flex; align-items: center; width: max-content; padding: 4px 12px; margin-bottom: 8px; border-radius: 980px; background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
:is(#wallart, #lamps, #more) .section-head h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; margin: 0; }
#wallart .section-head { flex-wrap: wrap; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k va" "h va" "l va"; }
#wallart .section-head .kicker { grid-area: k; }
#wallart .section-head h2 { grid-area: h; }
#wallart .section-head .lede { grid-area: l; margin: 6px 0 0; text-align: left; font-size: 15px; }
#wallart .section-head.has-va .view-all { grid-area: va; position: static; align-self: center; }
:is(#wallart, #lamps, #more) .sec-right { align-self: center; }
@media (max-width: 760px) {
  :is(#wallart, #lamps, #more) .section-head { padding: 16px 16px 16px 22px; border-radius: 20px; }
  #wallart .section-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "l" "va"; }
  #wallart .section-head.has-va .view-all { justify-self: start; margin-top: 10px; }
}

/* ---------- product name gets room for two lines ---------- */
.card-banner { align-items: flex-start !important; min-height: 64px; }
.card-banner .cb-name { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow: hidden; }
.card-banner .cb-price { padding-top: 1px; }
@media (max-width: 760px) { .card-banner { min-height: 58px; } }

/* ---------- Try our lamp: light glass panel like the rest of the site ---------- */
.lamptry { padding: 40px 0 88px; background: none !important; }
.lamptry::before { display: none !important; }
.lt-wrap { padding: 40px; border-radius: 32px; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 16px 50px rgba(20,20,20,.08); transition: background .8s var(--ease), box-shadow .8s var(--ease); }
.lamptry.on .lt-wrap { background: radial-gradient(80% 120% at 85% 30%, rgba(255,214,150,.75), rgba(255,240,215,.7) 45%, rgba(255,255,255,.6) 80%); box-shadow: inset 0 1px 0 #fff, 0 20px 70px rgba(255,170,60,.25); }
.lt-copy { color: var(--ink); }
.lt-copy h2 { color: var(--ink); }
.lt-text { color: var(--muted); }
.lt-hint { color: var(--muted); opacity: .85; }
.lt-kicker, .lamptry.on .lt-kicker { display: inline-flex; width: max-content; padding: 4px 12px; border-radius: 980px; background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lt-stage { border-radius: 24px; box-shadow: 0 20px 50px rgba(20,20,20,.18), 0 0 0 1px rgba(0,0,0,.05); }
.lamptry.on .lt-stage { box-shadow: 0 24px 70px rgba(255,160,50,.35), 0 0 0 1px rgba(255,200,120,.35); }

/* the rocker switch — a real wall switch that tilts */
.lt-switch { gap: 18px; padding: 4px; }
.lt-track, .lt-knob { display: none !important; }
.lt-plate { display: grid; place-items: center; width: 96px; height: 140px; padding: 11px; border-radius: 24px; perspective: 420px;
  background: linear-gradient(180deg, #FDFDFD, #ECECEF); box-shadow: 0 12px 26px rgba(20,20,20,.16), 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.06); }
.lt-rocker { position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 100%; border-radius: 17px;
  background: linear-gradient(180deg, #E4E4E8 0%, #FFFFFF 38%, #F4F4F6 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08), inset 0 -10px 14px rgba(0,0,0,.05), 0 7px 0 #CFCFD5, 0 9px 14px rgba(0,0,0,.16);
  transform: rotateX(16deg); transform-origin: 50% 50%; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background .4s ease, box-shadow .4s ease; }
.lt-lbl { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #6E6E73; transition: color .3s ease, opacity .3s ease; }
.lt-lbl-off { color: #2B2B2E; }
.lt-lbl-on { opacity: .55; }
.lt-switch[aria-checked="true"] .lt-rocker { transform: rotateX(-16deg);
  background: linear-gradient(180deg, #FFF8E8 0%, #FFE7B8 60%, #FFD48A 100%);
  box-shadow: inset 0 -2px 4px rgba(150,80,0,.15), inset 0 10px 14px rgba(255,255,255,.6), 0 -7px 0 #E9C68A, 0 0 34px rgba(255,190,90,.75), 0 0 80px rgba(255,190,90,.35); }
.lt-switch[aria-checked="true"] .lt-lbl-on { color: #7A4A00; opacity: 1; }
.lt-switch[aria-checked="true"] .lt-lbl-off { color: #A07A40; opacity: .6; }
.lt-switch:active .lt-rocker { transition-duration: .08s; }
.lt-switch:focus-visible .lt-plate { outline: 3px solid var(--blue); outline-offset: 4px; }
.lt-state { color: var(--muted) !important; }
.lt-switch[aria-checked="true"] .lt-state { color: #B06A00 !important; }
@media (max-width: 900px) { .lt-wrap { padding: 22px; border-radius: 26px; } .lamptry { padding: 24px 0 64px; } }

/* lamp picker */
.lt-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lt-pick[hidden] { display: none; }
.lt-opt { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 5px 14px 5px 5px; border-radius: 980px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.75); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(20,20,20,.06); transition: background .2s, box-shadow .2s, transform .15s; }
.lt-opt img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #F1F0EE; }
.lt-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,20,20,.1); }
.lt-opt.on { background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 30%, transparent); }
.lt-stage .lt-img { transition: opacity .55s ease, filter .25s ease; }
.lt-stage.swap .lt-img { filter: blur(6px); opacity: .25 !important; }
/* inside the Lamps "View all" page */
.view-page .lamptry { padding: 40px 0 0; }
.view-page .lamptry > .wrap { padding: 40px; max-width: none; }
@media (max-width: 900px) { .view-page .lamptry > .wrap { padding: 22px; } }
/* bigger, more prominent category label in section header tiles */
:is(#wallart, #lamps, #more) .section-head .kicker { font-size: 16px !important; padding: 7px 18px !important; letter-spacing: .08em; margin-bottom: 10px; box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 25%, transparent); }
@media (max-width: 760px) { :is(#wallart, #lamps, #more) .section-head .kicker { font-size: 14px !important; padding: 6px 14px !important; } }

/* ======== Try our lamp v3: night-room panel under the category strip, physical switchboard on the photo ======== */
.lamptry { padding: 26px 0 6px !important; }
.lamptry .lt-wrap { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr); gap: 34px; align-items: center; padding: 30px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 90% at 82% 18%, #3A2B1F 0%, #1C1612 55%, #110D0A 100%) !important;
  border: 1px solid rgba(255,220,170,.08); box-shadow: 0 30px 80px rgba(30,18,6,.32) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: background .9s var(--ease), box-shadow .9s var(--ease); }
.lamptry.on .lt-wrap { background: radial-gradient(75% 110% at 72% 30%, #8A5A24 0%, #4A2F15 45%, #1E140C 100%) !important; box-shadow: 0 30px 90px rgba(255,160,60,.30) !important; }
.lamptry .lt-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.lamptry .lt-copy { position: relative; color: #F5F0E8; gap: 14px; }
.lamptry .lt-copy h2 { color: #FFF8EE !important; font-size: clamp(32px, 4.2vw, 50px); }
.lamptry .lt-text { color: rgba(245,240,232,.74) !important; font-size: 17px; }
.lamptry .lt-hint { color: rgba(245,240,232,.55) !important; }
.lamptry .lt-kicker { display: inline-flex; width: max-content; padding: 6px 14px; border-radius: 980px; background: rgba(255,200,120,.14) !important; color: #FFD38A !important; border: 1px solid rgba(255,200,120,.28); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lamptry .lt-opt { background: rgba(255,255,255,.08); color: #F5F0E8; border-color: rgba(255,255,255,.14); box-shadow: none; }
.lamptry .lt-opt:hover { background: rgba(255,255,255,.14); }
.lamptry .lt-opt.on { background: #FFD38A; color: #2A1A08; box-shadow: 0 6px 20px rgba(255,190,90,.35); }
/* the photo */
.lamptry .lt-stage { position: relative; aspect-ratio: 16 / 11; max-height: 620px; border-radius: 24px; overflow: hidden; cursor: pointer; background: #0E0B09; box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) !important; }
.lamptry.on .lt-stage { box-shadow: 0 24px 70px rgba(255,160,50,.35), 0 0 0 1px rgba(255,210,140,.25) !important; }
.lamptry .lt-stage:focus-visible { outline: 3px solid #FFD38A; outline-offset: 4px; }
/* the physical switchboard */
.lt-board { position: absolute; z-index: 3; left: 6%; top: 50%; transform: translateY(-50%); width: 128px; height: 176px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(160deg, #FCFAF5 0%, #ECE6DB 55%, #DCD5C8 100%);
  box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 #fff, inset 0 -4px 10px rgba(0,0,0,.08); cursor: default; }
.lt-screw { position: absolute; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #BDB6AA 70%); box-shadow: inset 0 -1px 1px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.6); }
.lt-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(90,80,65,.55); transform: rotate(-30deg); }
.lt-screw.t { top: 11px; } .lt-screw.b { bottom: 11px; }
.lt-led { position: absolute; right: 14px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #9C9488; box-shadow: inset 0 1px 1px rgba(0,0,0,.3); transition: background .3s, box-shadow .3s; }
.lamptry.on .lt-led { background: #FFB547; box-shadow: 0 0 8px 2px rgba(255,180,70,.9); }
.lt-board .lt-switch { margin: 0; padding: 0; gap: 0; }
.lt-board .lt-plate { width: 82px; height: 118px; padding: 6px; border-radius: 16px; perspective: 420px; background: linear-gradient(180deg, #CFC8BB, #EAE4DA); box-shadow: inset 0 2px 6px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.7); }
.lt-board .lt-rocker { border-radius: 12px; }
.lt-board .lt-lbl { font-size: 11px; }
.lamptry .lt-state { position: absolute; z-index: 3; right: 16px; bottom: 16px; padding: 6px 14px; border-radius: 980px; background: rgba(15,10,6,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F5F0E8 !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; min-width: 0; }
.lamptry.on .lt-state { background: rgba(255,200,120,.9); color: #3A2408 !important; }
.hero-lamp-btn[hidden] { display: none !important; }
@media (max-width: 900px) {
  .lamptry .lt-wrap { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 18px; border-radius: 26px; }
  .lamptry .lt-stage { aspect-ratio: 4 / 5; max-height: 72vh; }
  .lt-board { left: 5%; transform: translateY(-50%) scale(.82); transform-origin: left center; }
  .lamptry .lt-copy h2 { font-size: 30px; }
}

/* ---------- performance: glass look without live backdrop blur (it was recalculated over the moving background every frame)
   — only the menu bar and pop-ups keep real blur; everything else uses a slightly more solid glass colour ---------- */
body:not(.admin) :is(.coll, .perk, .review-card, .co-summary, .line, .cmp .cb-ov, .lamptry .lt-state, .search, .sort select, .chip,
  .view-all, .vp-back, .rail-btn, .coll-go, .cb-go, .qty, .btn-soft, .btn-ghost, .steps b, .custom-form, .footer, .wallart, .lamps, .lt-wrap, .ticker) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body:not(.admin) :is(#wallart, #lamps, #more) .section-head { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.82) !important; }
html.glass3d body:not(.admin) :is(.btn-soft, .btn-ghost, .chip:not(.on), .view-all, .vp-back, .icon-btn, .rail-btn, .coll-go, .cb-go, .qty, .sort select, .search) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255,255,255,.86); }
.coll { background: rgba(255,255,255,.82) !important; }
.perk, .review-card { background: rgba(255,255,255,.8) !important; }
.cmp .cb-cat.cb-ov { background: rgba(255,255,255,.94); }
.cmp .cb-go.cb-ov { background: rgba(255,255,255,.96); }
/* let the browser skip drawing far-down sections until they're near the screen */
body:not(.admin) :is(.perks-sec, #reviews, #custom, .footer) { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* the moving background stays on its own GPU layer */
body:not(.admin)::before { will-change: transform; transform: translateZ(0); }

/* ================= phone polish ================= */
@media (max-width: 760px) {
  /* hero: headline fits, buttons wrap neatly (third one full width) */
  .hero h1 { font-size: clamp(32px, 9.2vw, 42px) !important; line-height: 1.04; overflow-wrap: anywhere; }
  .hero-copy { padding: 24px 20px 26px !important; gap: 12px !important; max-width: 100% !important; }
  .hero-copy p { font-size: 15.5px !important; }
  .hero-ctas { flex-wrap: wrap !important; gap: 10px !important; }
  .hero-ctas .btn { flex: 1 1 calc(50% - 5px) !important; min-width: 0; min-height: 46px !important; padding: 0 12px !important; font-size: 15px !important; white-space: nowrap; }
  .hero-ctas .hero-lamp-btn { flex-basis: 100% !important; }
  .eyebrow { font-size: 13px; }
  /* product pop-up: smaller photo so name, price and options show straight away */
  .pd-stage { max-height: 40dvh !important; }
  .pd-thumbs { padding: 8px 12px !important; gap: 6px !important; }
  .pd-thumb { width: 46px !important; height: 46px !important; border-radius: 10px !important; }
  .pd-info { gap: 10px !important; }
  .pd-info h2 { font-size: 23px !important; padding-right: 0 !important; line-height: 1.15; }
  .pd-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; }
  .size-opt { min-height: 50px; }
  /* sections: tighter spacing */
  .wallart, .lamps, .more, .products { padding-top: 40px !important; padding-bottom: 28px !important; }
  .collections { padding-top: 18px !important; }
  /* try our lamp: a squarer photo so the whole panel fits better */
  .lamptry .lt-stage { aspect-ratio: 1 / 1 !important; max-height: 62vh; }
  .lamptry .lt-text { font-size: 15.5px !important; }
  .lt-opt { padding: 4px 12px 4px 4px; font-size: 13px; }
  .lt-opt img { width: 30px; height: 30px; }
  /* cards in the 2-column View all grid */
  .view-page .grid { gap: 10px !important; }
  .view-page .card-banner { padding: 8px 10px 10px !important; }
  .view-page .card-banner .cb-name { font-size: 13.5px !important; }
  .view-page .card-banner .cb-price { font-size: 13px !important; }
  .view-page .cmp .cb-cat.cb-ov { font-size: 8.5px !important; padding: 3px 7px !important; max-width: calc(100% - 50px); }
  .view-page .cmp .cb-go.cb-ov { width: 28px !important; height: 28px !important; }
  /* footer columns breathe */
  .footer { padding: 36px 0 24px !important; }
  /* custom section */
  .custom { padding: 56px 0 !important; }
  .custom-copy h2 { font-size: 32px !important; }
  /* reviews: cards a bit narrower than the screen so the next one peeks in */
  .review-card { flex-basis: 84vw !important; }
}
@media (max-width: 380px) {
  .hero-ctas .btn { flex-basis: 100% !important; }
  .card-banner .cb-name { font-size: 13.5px !important; }
}

/* ---------- wider page: half the empty side margins on large screens ---------- */
body:not(.admin) .wrap { max-width: max(1240px, calc((100vw + 1240px) / 2)); }
.nav { max-width: max(1240px, calc((100vw + 1240px) / 2 - 44px)) !important; }
/* tighter gaps between the category sections */
.wallart, .lamps, .more { padding-top: 34px !important; padding-bottom: 22px !important; }
.products { padding-top: 48px !important; }
:is(#wallart, #lamps, #more) .section-head { margin-bottom: 16px !important; }
.perks-sec { padding-top: 24px !important; }

/* ---------- hero "Try our lamp" button: bottom-right corner of the hero (web), centred under the hero (phone) ---------- */
.hero { position: relative; }
.hero-lamp-btn { position: absolute; z-index: 5; right: 50px; bottom: 70px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.hero.wrap .hero-lamp-btn { right: 50px; }
.hero-lamp-btn:not(.btn-primary) { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.hero-lamp-btn:hover { background: rgba(255,255,255,.28); }
@media (max-width: 760px) {
  .hero-lamp-btn { position: static; display: flex; width: max-content; margin: 14px auto 0; color: var(--ink) !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 8px 22px rgba(20,20,20,.12); }
}

/* ======== Try our lamp v4: light panel matching the site, whole photo (never cropped), wall switch beside the photo ======== */
.lamptry { padding: 30px 0 8px !important; }
.lamptry.lamptry-end { padding: 44px 0 56px !important; }
.lamptry .lt-wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; padding: 36px; border-radius: 32px;
  background: rgba(255,255,255,.66) !important; border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 #fff, 0 16px 50px rgba(20,20,20,.08) !important; }
.lamptry.on .lt-wrap { background: radial-gradient(90% 130% at 78% 40%, rgba(255,214,150,.85) 0%, rgba(255,240,218,.8) 48%, rgba(255,255,255,.72) 85%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 22px 70px rgba(255,165,60,.28) !important; }
.lamptry .lt-wrap::before { display: none !important; }
.lamptry .lt-copy { color: var(--ink); gap: 14px; }
.lamptry .lt-copy h2 { color: var(--ink) !important; font-size: clamp(32px, 4vw, 48px); }
.lamptry .lt-text { color: var(--muted) !important; font-size: 17px; }
.lamptry .lt-hint { color: var(--muted) !important; margin: 0; font-size: 14px; }
.lamptry .lt-kicker { background: var(--brand-bg, var(--blue)) !important; color: var(--on-blue, #fff) !important; border: 0 !important; padding: 5px 13px; font-size: 12px; }
.lamptry .lt-opt { background: rgba(255,255,255,.8); color: var(--ink); border-color: rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(20,20,20,.06); }
.lamptry .lt-opt:hover { background: #fff; }
.lamptry .lt-opt.on { background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 30%, transparent); }

/* the photo: the frame takes the photo's own shape (set from the picture), so all of it shows */
.lamptry .lt-stage { --ar: 1.5; aspect-ratio: var(--ar) !important; width: min(100%, calc(600px * var(--ar))); max-height: none !important; justify-self: center;
  border-radius: 24px; background: #EFEDEA; box-shadow: 0 20px 50px rgba(20,20,20,.16), 0 0 0 1px rgba(0,0,0,.05) !important; }
.lamptry.on .lt-stage { box-shadow: 0 24px 70px rgba(255,155,40,.38), 0 0 0 1px rgba(255,200,120,.4) !important; }
.lamptry .lt-img { object-fit: contain !important; }

/* the wall switch, beside the photo */
.lt-control { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.lt-control-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.lamptry .lt-board { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex: none; width: 108px; height: 150px; border-radius: 20px; cursor: default;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4F1EC 55%, #E6E1D8 100%);
  box-shadow: 0 14px 30px rgba(20,20,20,.14), 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 #fff, inset 0 -3px 8px rgba(0,0,0,.05) !important; }
.lamptry .lt-screw.t { top: 10px; } .lamptry .lt-screw.b { bottom: 10px; }
.lamptry .lt-led { right: 12px; top: 12px; width: 6px; height: 6px; }
.lt-board .lt-plate { width: 70px !important; height: 102px !important; padding: 5px !important; border-radius: 14px !important; perspective: 360px;
  background: linear-gradient(180deg, #D8D2C7, #EEE9E1) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.8) !important; }
/* rocker: the pressed-in half is the one that's active (OFF pressed at the bottom, ON pressed at the top) */
.lt-board .lt-rocker { border-radius: 10px !important; transform: rotateX(-13deg) !important; transition: transform .12s cubic-bezier(.2, 1.6, .4, 1), background .35s ease, box-shadow .35s ease !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F6F3 45%, #E9E6E0 100%) !important;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.08), 0 -5px 0 #CFC8BC, 0 -7px 12px rgba(0,0,0,.12) !important; }
.lt-board .lt-switch[aria-checked="true"] .lt-rocker { transform: rotateX(13deg) !important;
  background: linear-gradient(180deg, #FFE9BF 0%, #FFF4DC 55%, #FFFFFF 100%) !important;
  box-shadow: inset 0 2px 3px rgba(150,80,0,.12), 0 5px 0 #E2C287, 0 0 26px rgba(255,185,80,.7) !important; }
.lt-board .lt-lbl { font-size: 10.5px !important; }
.lt-board .lt-lbl-off { color: #2B2B2E; opacity: 1; }
.lt-board .lt-lbl-on { color: #8A8A8E; opacity: 1; }
.lt-board .lt-switch[aria-checked="true"] .lt-lbl-on { color: #8A5200; }
.lt-board .lt-switch[aria-checked="true"] .lt-lbl-off { color: #A8A096; }
.lt-board .lt-switch:active .lt-rocker { transition-duration: .05s !important; }
.lamptry .lt-state { position: static !important; display: inline-flex; width: max-content; padding: 5px 12px; border-radius: 980px;
  background: rgba(0,0,0,.06) !important; color: var(--muted) !important; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lamptry.on .lt-state { background: #FFD38A !important; color: #5A3608 !important; box-shadow: 0 0 18px rgba(255,190,90,.6); }

@media (max-width: 900px) {
  /* phone: title → photo → switch → shop, so the switch and the photo are on screen together */
  .lamptry .lt-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; padding: 18px !important; border-radius: 26px; }
  .lamptry .lt-copy { display: contents; }
  .lamptry .lt-copy > * { justify-self: start; }
  .lamptry .lt-stage { order: 5; justify-self: center !important; width: min(100%, calc(60vh * var(--ar))) !important; aspect-ratio: var(--ar) !important; max-height: none !important; }
  .lamptry .lt-control { order: 6; margin-top: 4px; }
  .lamptry #ltShop, .lamptry [data-ref="ltShop"] { order: 7; }
  .lamptry .lt-board { width: 92px; height: 128px; }
  .lt-board .lt-plate { width: 60px !important; height: 88px !important; }
  .lamptry .lt-copy h2 { font-size: 30px; }
  .lamptry .lt-text { font-size: 15.5px !important; }
  .lamptry.lamptry-end { padding: 30px 0 40px !important; }
}

/* Try our lamp: nothing in the section moves when the switch flips.
   Both texts sit in the same spot (the box is sized to the longer one) and only their visibility changes;
   the "on" photo fills exactly the box of the "off" photo, so the two line up pixel for pixel. */
.lamptry .lt-state, .lamptry .lt-hint { display: inline-grid !important; }
.lamptry .lt-hint { display: grid !important; }
.lamptry .lt-state > *, .lamptry .lt-hint > * { grid-area: 1 / 1; font: inherit; }
.lamptry .lt-s-on, .lamptry .lt-h-on, .lamptry.on .lt-s-off, .lamptry.on .lt-h-off { visibility: hidden; }
.lamptry.on .lt-s-on, .lamptry.on .lt-h-on { visibility: visible; }
.lamptry .lt-state { justify-items: center; }
.lamptry .lt-img.lt-on { object-fit: cover !important; object-position: center; }
.lamptry .lt-stage, .lamptry .lt-wrap, .lamptry .lt-board { contain: layout; }
.lamptry .lt-kicker, .lamptry.on .lt-kicker { padding: 5px 13px !important; border: 0 !important; font-size: 12px !important; margin: 0 !important; }

/* Try our lamp v5: text column lines up with the photo (tops level, Shop button level with the photo's bottom),
   switch centred between them; rocker in the brand colour */
@media (min-width: 901px) {
  .lamptry .lt-wrap { align-items: stretch !important; }
  .lamptry .lt-stage { align-self: center; }
  .lamptry .lt-copy { justify-content: flex-start; height: 100%; padding: 0 !important; }
  .lamptry .lt-copy h2 { line-height: 1.02; margin-top: 2px !important; }
  .lamptry .lt-control { margin: auto 0 !important; align-self: center; padding: 18px 0; }
  .lamptry #ltShop, .lamptry [data-ref="ltShop"] { margin-top: 0 !important; margin-bottom: 0 !important; }
}
@media (max-width: 900px) {
  .lamptry .lt-control { justify-self: center !important; margin: 6px 0 2px !important; }
}
.lt-board .lt-rocker { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 45%, rgba(0,0,0,.14) 100%), var(--brand-bg, var(--blue)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.18), 0 -5px 0 color-mix(in srgb, var(--blue) 62%, #000), 0 -7px 12px rgba(0,0,0,.18) !important; }
.lt-board .lt-switch[aria-checked="true"] .lt-rocker { background: linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.22) 100%), var(--brand-bg, var(--blue)) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.3), inset 0 2px 3px rgba(0,0,0,.18), 0 5px 0 color-mix(in srgb, var(--blue) 62%, #000), 0 0 26px rgba(255,185,80,.75) !important; }
.lt-board .lt-lbl, .lt-board .lt-switch[aria-checked="true"] .lt-lbl { color: var(--on-blue, #fff) !important; }
.lt-board .lt-lbl-on { opacity: .5 !important; }
.lt-board .lt-lbl-off { opacity: 1 !important; }
.lt-board .lt-switch[aria-checked="true"] .lt-lbl-on { opacity: 1 !important; }
.lt-board .lt-switch[aria-checked="true"] .lt-lbl-off { opacity: .5 !important; }
@media (max-width: 900px) {
  .lamptry .lt-control { flex-direction: column; align-items: center; gap: 12px; width: 100%; }
  .lamptry .lt-control-txt { align-items: center; text-align: center; }
  .lamptry .lt-hint { justify-items: center; }
}

/* phone footer: two columns — brand | contact on top, shop | help below */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "brand contact" "shop help"; column-gap: 18px !important; row-gap: 26px !important; }
  .footer-grid > .footer-brand { grid-area: brand; }
  .footer-grid > div:nth-child(2) { grid-area: shop; }
  .footer-grid > div:nth-child(3) { grid-area: help; }
  .footer-grid > div:nth-child(4) { grid-area: contact; }
  .footer-grid > div:nth-child(n+2) { padding-left: 0; }
  .footer-grid > div:nth-child(3), .footer-grid > div:nth-child(4) { text-align: right; }
  .footer-grid > div:nth-child(3) a, .footer-grid > div:nth-child(4) a { margin-left: auto; }
  .footer-grid > div:nth-child(4) .contact-list > * { justify-content: flex-end; text-align: right; }
  .footer-grid h4 { margin-top: 0 !important; }
  .footer-logo { font-size: 21px !important; }
  .footer-brand p { margin: 6px 0 12px !important; font-size: 13.5px; }
  .footer-grid a, .contact-list, .contact-list * { overflow-wrap: anywhere; }
  .footer-bottom { text-align: center; margin-top: 26px !important; }
}

/* ===== phone only: compact hero (text block about a third of its old height, shorter card) and lamp button above the Lamps row ===== */
@media (max-width: 760px) {
  .hero-card { min-height: 0 !important; height: min(118vw, 460px) !important; border-radius: 24px !important; }
  .hero-copy { padding: 14px 16px 16px !important; gap: 8px !important; }
  .hero .eyebrow, #heroBadge { display: none !important; }
  .hero h1 { font-size: clamp(22px, 6.4vw, 27px) !important; line-height: 1.08 !important; letter-spacing: -0.025em; }
  .hero-copy p { font-size: 13px !important; line-height: 1.4 !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-ctas { flex-wrap: nowrap !important; gap: 8px !important; margin-top: 2px !important; }
  .hero-ctas .btn { min-height: 38px !important; height: 38px; font-size: 14px !important; padding: 0 10px !important; }
  .hero-card.has-photo .hero-slides::after { background: linear-gradient(0deg, rgba(8,10,9,.82) 0%, rgba(8,10,9,.5) 30%, rgba(8,10,9,0) 55%) !important; }
  .hero-dots { top: 12px !important; bottom: auto !important; right: 50% !important; transform: translateX(50%); }
  .hero-lamp-btn.lamp-btn-row { display: flex; width: max-content; margin: 26px auto -8px !important; position: relative !important; z-index: 2; }
}
@media (max-width: 760px) {
  .hero-card { height: min(78vw, 320px) !important; }
  .hero-copy { padding: 12px 14px 14px !important; gap: 8px !important; }
  .hero-copy p { display: none !important; }
  .hero h1 { font-size: clamp(21px, 6vw, 25px) !important; }
  .hero-lamp-btn.lamp-btn-row { right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; margin: 30px auto 0 !important; }
}

/* ===== phone only: no category chips under the search (they come back while a category filter is on, so it can be cleared),
   no empty gap before Wall art, compact section header tiles with View all in the top-right corner ===== */
@media (max-width: 760px) {
  .cat-chips:not(.filtering) { display: none !important; }
  .products { padding-bottom: 0 !important; }
  .products .shop-tools { margin-bottom: 0 !important; }
  .products .empty:not([hidden]) { margin-top: 14px; }
  #wallart { padding-top: 18px !important; }
  :is(#wallart, #lamps, #more) .section-head { padding: 12px 14px 12px 20px !important; margin-bottom: 14px !important; border-radius: 18px !important; gap: 2px 12px !important; }
  :is(#wallart, #lamps, #more) .section-head::before { width: 5px !important; }
  :is(#wallart, #lamps, #more) .section-head .kicker { padding: 3px 9px !important; margin-bottom: 4px !important; font-size: 10.5px !important; }
  :is(#wallart, #lamps, #more) .section-head h2 { font-size: 21px !important; line-height: 1.1 !important; }
  :is(#wallart, #lamps, #more) .section-head .lede { font-size: 12.5px !important; line-height: 1.35 !important; margin: 3px 0 0 !important; }
  :is(#wallart, #lamps, #more) .section-head .view-all { padding: 6px 11px !important; font-size: 12.5px !important; min-height: 0 !important; }
  #wallart .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "k va" "h h" "l l" !important; align-items: start !important; }
  #wallart .section-head .kicker { grid-area: k; }
  #wallart .section-head h2 { grid-area: h; }
  #wallart .section-head .lede { grid-area: l; }
  #wallart .section-head .view-all { grid-area: va; position: static !important; margin: 0 !important; justify-self: end; align-self: start; }
  :is(#lamps, #more) .section-head { align-items: flex-start !important; }
}
@media (max-width: 760px) { #wallart { margin-top: 0 !important; padding-top: 16px !important; } }

/* end-of-row "View all" card: phones only */
.rail-more { display: none; }
@media (max-width: 760px) {
  .rail-track > .rail-more { display: flex; flex: 0 0 auto; width: 38vw; max-width: 170px; align-self: stretch; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 22px; text-decoration: none; color: var(--ink); scroll-snap-align: end;
    background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.55)); border: 1px solid rgba(255,255,255,.95);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0,0,0,.04), 0 10px 26px rgba(20,20,20,.10); }
  .rail-track.frames > .rail-more { margin: 10px 0 70px; }
  .rail-more .rm-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; font-weight: 700;
    background: var(--brand-bg, var(--blue)); color: var(--on-blue, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
  .rail-more b { font-size: 15px; margin-top: 4px; }
  .rail-more small { font-size: 12px; color: var(--muted); }
  .rail-more:active { transform: scale(.97); }

  /* section header tiles: 3D glass, no side bar, slim; category name centred and highlighted (no pill), tagline small, View all on the right */
  :is(#wallart, #lamps, #more) .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; grid-template-areas: ". c va" !important;
    align-items: center !important; gap: 0 8px !important; padding: 9px 10px !important; margin-bottom: 12px !important; border-radius: 20px !important; text-align: center !important;
    background: linear-gradient(165deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.48) 100%) !important;
    border: 1px solid rgba(255,255,255,.95) !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(20,20,20,.05), 0 1px 2px rgba(20,20,20,.06), 0 10px 24px rgba(20,20,20,.10), 0 2px 0 rgba(255,255,255,.6) !important; }
  :is(#wallart, #lamps, #more) .section-head::before { display: none !important; }
  :is(#lamps, #more) .section-head > div:first-child { grid-area: c; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  #wallart .section-head .kicker { grid-area: c; align-self: end; }
  #wallart .section-head h2 { grid-area: c; align-self: start; }
  #wallart .section-head { grid-template-areas: ". c va" !important; grid-template-rows: auto !important; }
  #wallart .section-head > .kicker, #wallart .section-head > h2 { grid-row: 1; }
  :is(#wallart, #lamps, #more) .section-head .kicker { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
    font-size: 15px !important; font-weight: 800 !important; letter-spacing: .08em !important; color: var(--blue-ink, var(--blue)) !important; justify-self: center; text-align: center; }
  :is(#wallart, #lamps, #more) .section-head h2 { font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.3 !important; color: var(--muted) !important; margin: 2px 0 0 !important; justify-self: center; text-align: center; }
  #wallart .section-head .lede { display: none !important; }
  :is(#lamps, #more) .section-head .sec-right { grid-area: va; justify-self: end; }
  :is(#wallart, #lamps, #more) .section-head .view-all { grid-area: va; justify-self: end; align-self: center; position: static !important; margin: 0 !important; padding: 5px 10px !important; font-size: 12px !important; }
}
@media (max-width: 760px) {
  #wallart .section-head { grid-template-areas: ". k va" ". h va" !important; grid-template-rows: auto auto !important; }
  #wallart .section-head > .kicker { grid-area: k !important; grid-row: auto !important; align-self: end; }
  #wallart .section-head > h2 { grid-area: h !important; grid-row: auto !important; align-self: start; }
}
@media (max-width: 760px) {
  :is(#wallart, #lamps, #more) .section-head { grid-template-columns: 84px minmax(0, 1fr) 84px !important; }
  :is(#wallart, #lamps, #more) .section-head .kicker { font-size: 13.5px !important; letter-spacing: .05em !important; line-height: 1.2; white-space: normal; }
  :is(#wallart, #lamps, #more) .section-head .view-all { white-space: nowrap; }
}

/* ===== phone only: shorter hero; no category strip / word ticker on the home page — the strip sits at the end of each View all page ===== */
@media (max-width: 760px) {
  .hero-card { height: min(66vw, 256px) !important; }
  .hero-copy { padding: 10px 12px 12px !important; gap: 7px !important; }
  .hero h1 { font-size: clamp(19px, 5.4vw, 22px) !important; }
  .hero-ctas .btn { min-height: 34px !important; height: 34px !important; font-size: 13.5px !important; }
  .ticker { display: none !important; }
  #collections:not(.vp-coll) { display: none !important; }
  #collections.vp-coll { margin: 34px 0 0 !important; padding: 0 !important; }
  #collections.vp-coll::before { content: "Browse other categories"; display: block; margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
}
@media (max-width: 760px) { .view-mode #collections.vp-coll:not([hidden]) { display: grid !important; } #collections.vp-coll::before { grid-column: 1 / -1; position: sticky; left: 0; } }

/* ===== phone only: the whole Try our lamp section fits on one screen; switch overlaps the bottom of the photo ===== */
@media (max-width: 760px) {
  .lamptry, .lamptry.lamptry-end { padding: 14px 0 14px !important; }
  .lamptry .lt-wrap { padding: 14px 14px 16px !important; gap: 8px !important; border-radius: 22px !important; }
  .lamptry .lt-kicker, .lamptry.on .lt-kicker { font-size: 10.5px !important; padding: 3px 10px !important; }
  .lamptry .lt-copy h2 { font-size: 22px !important; line-height: 1.1 !important; margin: 0 !important; }
  .lamptry .lt-text { font-size: 13.5px !important; line-height: 1.35 !important; margin: 0 !important; }
  .lamptry .lt-pick { margin: 0 !important; }
  .lamptry .lt-stage { width: min(100%, calc(50svh * var(--ar))) !important; border-radius: 18px !important; margin-top: 2px; }
  .lamptry .lt-control { order: 6; position: relative; z-index: 4; margin: -58px 0 0 !important; gap: 6px !important; pointer-events: none; }
  .lamptry .lt-control > * { pointer-events: auto; }
  .lamptry .lt-board { width: 78px !important; height: 108px !important; border-radius: 16px !important; box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 #fff !important; }
  .lt-board .lt-plate { width: 50px !important; height: 74px !important; border-radius: 11px !important; }
  .lt-board .lt-lbl { font-size: 9px !important; }
  .lamptry .lt-screw.t { top: 7px; } .lamptry .lt-screw.b { bottom: 7px; }
  .lamptry .lt-control-txt { flex-direction: row !important; align-items: center !important; justify-content: center; gap: 8px !important; }
  .lamptry .lt-state { font-size: 10.5px !important; padding: 3px 9px !important; }
  .lamptry .lt-hint { font-size: 12.5px !important; text-align: left; }
  .lamptry #ltShop, .lamptry [data-ref="ltShop"] { justify-self: center !important; min-height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
  .lt-opt { padding: 3px 10px 3px 3px !important; font-size: 12.5px !important; }
  .lt-opt img { width: 26px !important; height: 26px !important; }
}
@media (max-width: 760px) { .lamptry .lt-stage { width: min(100%, calc(max(220px, 100svh - 392px) * var(--ar))) !important; } }

/* phone only: no separate "Try our lamp" button; section header text on the left, View all on the right */
@media (max-width: 760px) {
  #heroLamp { display: none !important; }
  :is(#wallart, #lamps, #more) .section-head { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "c va" !important; padding: 9px 10px 9px 16px !important; text-align: left !important; }
  #wallart .section-head { grid-template-areas: "k va" "h va" !important; }
  :is(#lamps, #more) .section-head > div:first-child { align-items: flex-start !important; }
  :is(#wallart, #lamps, #more) .section-head .kicker, :is(#wallart, #lamps, #more) .section-head h2 { justify-self: start !important; text-align: left !important; }
}

/* phone only: small "Sort by" menu in the shop header; a little room above Wall art */
@media (max-width: 760px) {
  #products .section-head { flex-wrap: nowrap !important; align-items: flex-end !important; }
  #products .section-head .live-dot { display: none !important; }
  #products .section-head .sort { flex: none; margin-bottom: 4px; }
  #products .section-head .sort select { width: auto !important; min-height: 34px !important; height: 34px; padding: 0 30px 0 14px !important; font-size: 13.5px !important; font-weight: 600; color: var(--ink);
    -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 11px center !important; box-shadow: inset 0 0 0 1px var(--line), 0 2px 8px rgba(20,20,20,.06) !important; }
  #wallart { padding-top: 26px !important; }
}
@media (max-width: 760px) {
  #products .section-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  #products .section-head .sort select { width: 112px !important; max-width: 112px; text-overflow: ellipsis; }
}
@media (max-width: 760px) { #products .section-head h2 { font-size: clamp(24px, 7vw, 28px) !important; white-space: nowrap; } }

/* ===== phone only: Try our lamp — switch top-right beside the title (never over the photo), no status line, smaller lamp choices ===== */
@media (max-width: 760px) {
  .lamptry .lt-wrap { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 12px !important; row-gap: 8px !important; }
  .lamptry .lt-copy > *, .lamptry .lt-stage { order: 0 !important; }
  .lamptry .lt-kicker { grid-column: 1; grid-row: 1; }
  .lamptry .lt-copy h2 { grid-column: 1; grid-row: 2; }
  .lamptry .lt-text { grid-column: 1; grid-row: 3; }
  .lamptry .lt-control { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end !important; margin: 0 !important; z-index: 1; }
  .lamptry .lt-pick { grid-column: 1 / -1; grid-row: 4; }
  .lamptry .lt-stage { grid-column: 1 / -1; grid-row: 5; margin-top: 2px; }
  .lamptry #ltShop, .lamptry [data-ref="ltShop"] { grid-column: 1 / -1; grid-row: 6; }
  .lamptry .lt-board { width: 66px !important; height: 92px !important; border-radius: 14px !important; box-shadow: 0 8px 18px rgba(20,20,20,.16), 0 1px 3px rgba(0,0,0,.1), inset 0 1px 0 #fff !important; }
  .lt-board .lt-plate { width: 42px !important; height: 62px !important; border-radius: 9px !important; padding: 4px !important; }
  .lt-board .lt-lbl { font-size: 8px !important; }
  .lamptry .lt-screw { width: 8px; height: 8px; margin-left: -4px; }
  .lamptry .lt-screw.t { top: 5px; } .lamptry .lt-screw.b { bottom: 5px; }
  .lamptry .lt-led { right: 8px; top: 8px; width: 5px; height: 5px; }
  /* status pill + hint: hidden on phones (kept for screen readers) */
  .lamptry .lt-control-txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* lamp choices: one small row that scrolls sideways */
  .lamptry .lt-pick:not([hidden]) { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; margin: 0 -14px !important; padding: 2px 14px 4px; }
  .lamptry .lt-pick::-webkit-scrollbar { display: none; }
  .lamptry .lt-opt { flex: none; max-width: 170px; padding: 2px 10px 2px 2px !important; gap: 6px !important; font-size: 12px !important; box-shadow: 0 1px 4px rgba(20,20,20,.06) !important; }
  .lamptry .lt-opt img { width: 22px !important; height: 22px !important; }
  .lamptry .lt-stage { width: min(100%, calc(max(220px, 100svh - 360px) * var(--ar))) !important; }
  /* shop header: less space above the search bar */
  #products .section-head { margin-bottom: 10px !important; }
  #products .shop-tools { margin-top: 0 !important; }
}

/* ===== web only: section header — category name alone on the left; the category pill on the right edge with View all below it ===== */
@media (min-width: 761px) {
  :is(#wallart, #lamps, #more) .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "h k" "h va" !important; grid-template-rows: auto auto !important;
    align-items: center !important; gap: 10px 18px !important; }
  :is(#lamps, #more) .section-head > div:first-child { display: contents; }
  :is(#wallart, #lamps, #more) .section-head h2 { grid-area: h !important; align-self: center; }
  :is(#wallart, #lamps, #more) .section-head .kicker { grid-area: k !important; justify-self: end; align-self: end; margin: 0 !important; }
  :is(#lamps, #more) .section-head .sec-right { grid-area: va; justify-self: end; align-self: start; }
  #wallart .section-head .view-all { grid-area: va !important; justify-self: end; align-self: start; position: static !important; margin: 0 !important; }
  #wallart .section-head .lede { display: none !important; }
}


/* ===== Liquid glass: menu bar + hero glass buttons =====
   html.lgx      → every browser: rim light, cursor light, translucency change on hover, springy press (blur stays real)
   html.lgx-lens → computers with Chrome/Edge: the background bends along the edges (filter drawn by store.js) */
html.lgx .lgx-el { isolation: isolate; transition: transform .5s cubic-bezier(.2, 1.7, .35, 1), box-shadow .35s ease, background-color .35s ease; }
html.lgx .hero .btn-glass.lgx-el:not(.hero-lamp-btn) { position: relative; }
html.lgx .lgx-el.lgx-down { transform: scale(.965); transition-duration: .12s; }
html.lgx .hero .btn-glass.lgx-el.lgx-down { transform: scale(.94); }
.lgx-shine { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(160px 120px at var(--lx, 50%) var(--ly, 0%), rgba(255,255,255,.65), rgba(255,255,255,0) 70%); mix-blend-mode: soft-light; }
.lgx-hot > .lgx-shine { opacity: 1; }
.hero .btn-glass > .lgx-shine { mix-blend-mode: screen; background: radial-gradient(90px 70px at var(--lx, 50%) var(--ly, 0%), rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }
/* rim light like the edge of thick glass */
html.lgx .nav.lg.lgx-el { box-shadow: inset 1px 1px 0 rgba(255,255,255,.75), inset -1px -1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 32px rgba(20,20,20,.10) !important; }
html.lgx .hero .btn-glass.lgx-el { box-shadow: inset 1px 1px 0 rgba(255,255,255,.65), inset -1px -1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.28) !important; border-color: rgba(255,255,255,.4) !important; }

/* lensing (Chrome/Edge computers) — the glass layer sits behind the content */
html.lgx-lens .nav.lg.lgx-el { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lgx-lens .nav.lg.lgx-el::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none;
  /* no own background here: Chrome only feeds the page behind into the lens filter when this layer paints nothing itself.
     The glass is lightened with brightness instead of a white tint. */
  -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.22) contrast(.88); backdrop-filter: blur(10px) saturate(190%) brightness(1.22) contrast(.88);
  filter: var(--lgx-filter, none); transition: backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; }
html.lgx-lens .nav.lg.lgx-hot::after { -webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.14) contrast(.92); backdrop-filter: blur(8px) saturate(200%) brightness(1.14) contrast(.92); }
html.lgx-lens .hero .btn-glass.lgx-el { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lgx-lens .hero .btn-glass.lgx-el::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none;
  -webkit-backdrop-filter: blur(2.5px) saturate(175%) brightness(1.18); backdrop-filter: blur(2.5px) saturate(175%) brightness(1.18);
  filter: var(--lgx-filter, none); transition: backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; }
html.lgx-lens .hero .btn-glass.lgx-hot::after { -webkit-backdrop-filter: blur(2px) saturate(185%) brightness(1.3); backdrop-filter: blur(2px) saturate(185%) brightness(1.3); }
/* no lens (Safari, phones…): translucency still changes on hover */
html.lgx:not(.lgx-lens) .hero .btn-glass.lgx-hot { background: rgba(255,255,255,.28) !important; }

/* menu bar text: brand colour and bold (no text shadow) */
body:not(.admin) .nav .brand-name,
body:not(.admin) .nav-links > a,
body:not(.admin) .nav-cat-btn {
  color: var(--blue-ink, var(--blue)) !important; font-weight: 600 !important; opacity: 1 !important;
  text-shadow: none !important;
}
body:not(.admin) .nav .brand-name { font-weight: 700 !important; }
body:not(.admin) .nav-links > a.active { background: color-mix(in srgb, var(--blue) 10%, rgba(255,255,255,.4)) !important; }
body:not(.admin) .nav-links > a:hover, body:not(.admin) .nav-cat-btn:hover { background: color-mix(in srgb, var(--blue) 8%, transparent) !important; }
body:not(.admin) .nav-cat-btn svg { stroke: currentColor; }

/* menu bar lens blur everywhere (browsers without lensing get the heavier blur too) */
html.lgx:not(.lgx-lens) .nav.lg { -webkit-backdrop-filter: blur(22px) saturate(190%) !important; backdrop-filter: blur(22px) saturate(190%) !important; }

/* blend modes on layers inside the glass cut it off from the page behind (Chrome), so in lens mode the highlights blend normally */
html.lgx-lens .lgx-el::before { mix-blend-mode: normal !important; opacity: .55; }
html.lgx-lens .lgx-shine, html.lgx-lens .hero .btn-glass > .lgx-shine { mix-blend-mode: normal !important; background: radial-gradient(160px 110px at var(--lx, 50%) var(--ly, 0%), rgba(255,255,255,.32), rgba(255,255,255,0) 70%) !important; }

/* ===== Menu bar settings (Admin → Settings → Menu bar) — values come in as CSS variables on .nav ===== */
.nav-off { display: none !important; }
.nav-tint { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--nav-tint, transparent); }
body:not(.admin) .nav.nav-custom .brand-name,
body:not(.admin) .nav.nav-custom .nav-links > a,
body:not(.admin) .nav.nav-custom .nav-cat-btn { color: var(--nav-ink, var(--blue-ink, var(--blue))) !important; font-weight: var(--nav-fw, 600) !important; }
body:not(.admin) .nav.nav-custom .brand-name { font-weight: max(var(--nav-fw, 600), 600) !important; }
@media (min-width: 761px) {
  body:not(.admin) .nav.nav-custom { padding-top: var(--nav-py, 6px) !important; padding-bottom: var(--nav-py, 6px) !important; border-radius: var(--nav-radius, 22px) !important; }
  body:not(.admin) .nav.nav-custom .nav-links { gap: var(--nav-gap, 2px); }
  body:not(.admin) .nav.nav-custom .nav-links > a, body:not(.admin) .nav.nav-custom .nav-cat-btn { font-size: var(--nav-fs, 14px) !important; padding-left: var(--nav-px, 14px) !important; padding-right: var(--nav-px, 14px) !important; }
  body:not(.admin) .nav.nav-custom .brand-name { font-size: var(--nav-brand-fs, 19px) !important; }
  body:not(.admin) .nav.nav-custom .nav-wa { min-height: var(--nav-cta-h, 36px) !important; font-size: var(--nav-cta-fs, 14px) !important; padding-left: var(--nav-cta-px, 16px) !important; padding-right: var(--nav-cta-px, 16px) !important; }
}
@media (max-width: 760px) { body:not(.admin) .nav.nav-custom { border-radius: min(var(--nav-radius, 22px), 22px) !important; } }

/* menu bar text shadow / outline (Admin → Settings → Menu bar) — outline drawn outside the letters */
body:not(.admin) .nav.nav-custom .brand-name,
body:not(.admin) .nav.nav-custom .nav-links > a,
body:not(.admin) .nav.nav-custom .nav-cat-btn { text-shadow: var(--nav-ts, none) !important; -webkit-text-stroke: var(--nav-stroke-w, 0px) var(--nav-stroke-c, transparent); paint-order: stroke fill; }

/* product page: height / width / thickness */
.pd-dims { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.pd-dim { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); font-size: 13.5px; }
.pd-dim i { font-style: normal; color: var(--muted); font-size: 12px; }
.pd-dim b { font-weight: 700; color: var(--ink); }

/* card photo background (product's photo background, or the card's own) — photos sit on it normally, no melting */

.cmp[data-bg] img { mix-blend-mode: normal !important; }
.cmp[data-bg]:not([data-bg="white"]):not([data-bg="glass"]) .card-ph { color: rgba(255,255,255,.7); }

/* menu bar: selected button — solid pill (Admin → Settings → Menu bar → Selected button) */
body:not(.admin) .nav.nav-custom .nav-links > a.active { background: var(--nav-act-bg, var(--blue)) !important; color: var(--nav-act-ink, #fff) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.25); }

/* phone menu: sizes and spacing from the phone settings (only when separate phone settings are saved) */
@media (max-width: 760px) {
  body:not(.admin) .nav.nav-m-custom { padding-top: var(--nav-py, 4px) !important; padding-bottom: var(--nav-py, 4px) !important; border-radius: var(--nav-radius, 20px) !important; }
  body:not(.admin) .nav.nav-m-custom .brand-name { font-size: var(--nav-brand-fs, 17px) !important; }
  body:not(.admin) .nav.nav-m-custom .nav-links { gap: var(--nav-gap, 0px); }
  body:not(.admin) .nav.nav-m-custom .nav-links > a, body:not(.admin) .nav.nav-m-custom .nav-cat-btn { font-size: calc(var(--nav-fs, 14px) + 2px) !important; padding-left: var(--nav-px, 14px) !important; padding-right: var(--nav-px, 14px) !important; }
}

/* ================= PRODUCT & CATEGORY PAGES (built by scripts/prerender.mjs) ================= */
body.seo-pp .hero, body.seo-cp .hero { display: none; }
.view-mode #seo { display: none; }
.seo-page { padding-top: 28px; padding-bottom: 36px; }
.seo-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--muted); }
.seo-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.seo-crumbs a { color: inherit; text-decoration: none; }
.seo-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.seo-page h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 4px 0 10px; text-wrap: balance; }
.seo-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.seo-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seo-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--tile); display: block; }
.seo-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); }
.seo-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-ink); text-decoration: none; }
.seo-code { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.seo-price { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.seo-opts { color: var(--muted); margin: 0 0 16px; }
.seo-desc { margin: 22px 0 0; line-height: 1.6; }
.seo-note { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 20px 0 0; }
.seo-note a { color: var(--blue-ink); }
.seo-cat-head p { color: var(--muted); max-width: 720px; line-height: 1.55; margin: 0 0 22px; }
.seo-related { margin-top: 44px; }
.seo-related h2 { font-size: 22px; margin: 0 0 14px; }
.seo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.seo-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--surface); border-radius: var(--r); padding: 10px 10px 14px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.seo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.seo-tile-img { display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--tile); margin-bottom: 6px; }
.seo-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seo-tile-name { font-weight: 600; line-height: 1.3; }
.seo-tile-price { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .seo-page { padding-top: 18px; }
  .seo-product { grid-template-columns: 1fr; gap: 20px; }
  .seo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.seo-group { margin: 6px 0 30px; }
.seo-group h2 { font-size: 22px; margin: 0 0 14px; }
.seo-group h2 a { color: inherit; text-decoration: none; }
.seo-group h2 a:hover { text-decoration: underline; }