/* Divaar.pk — new storefront design (bright, rounded, bold type).
   Loaded after store.css on the shop pages only (html.fx). Admin, receipt and policy pages are unchanged.
   Everything here is scoped to html.fx so the old look comes back by removing this file + the class. */

html.fx {
  /* defaults — Admin → Settings → Design 2.0 colours overrides all of these (assets/theme2.js) */
  --fx-page: #FFFFFF;
  --fx-shell: #FFFFFF;
  --fx-ink: #1E1F24;
  --fx-muted: #696C74;
  --fx-soft: #F4F2F7;
  --fx-soft-2: #EAE8EE;
  --fx-media: #ECE8F2;
  --fx-line: rgba(30, 31, 36, .08);
  --fx-lav: #CBB3E8; --fx-on-lav: #1E1F24;
  --fx-lime: #D4FF3F; --fx-on-lime: #262C10;
  --fx-hot: #E34234; --fx-orange: #E34234; --fx-on-hot: #FFFFFF;
  --fx-sale: #E34234; --fx-on-sale: #FFFFFF;
  --fx-btn: #1E1F24; --fx-on-btn: #FFFFFF; --fx-btn-hover: #0C0C0E; --fx-btn-r: 14px;
  --fx-pastel: radial-gradient(55% 75% at 14% 38%, #E6D8F7 0%, rgba(230, 216, 247, 0) 70%), radial-gradient(45% 70% at 40% 55%, #F4FFD1 0%, rgba(244, 255, 209, 0) 70%), radial-gradient(50% 80% at 88% 70%, #FBE1DC 0%, rgba(251, 225, 220, 0) 70%), #F5F0FB;
  --g-t1: linear-gradient(150deg, #E34234 0%, #F16650 55%, #FF8A6B 100%); --on-t1: #FFFFFF;
  --g-t2: linear-gradient(150deg, #B194DD 0%, #BEA4E3 55%, #CBB3E8 100%); --on-t2: #1E1F24;
  --g-t3: linear-gradient(150deg, #BDF01A 0%, #C9F82D 55%, #D4FF3F 100%); --on-t3: #1E1F24;
  --g-offer: linear-gradient(170deg, #E34234 0%, #EB5D49 55%, #F2785E 100%); --on-offer: #FFFFFF;
  --g-brand: linear-gradient(150deg, #B79BE0 0%, #C1A7E4 55%, #CBB3E8 100%); --on-brand: #1E1F24;
  --g-custom: linear-gradient(150deg, #BFA3E6 0%, #CDB7EC 55%, #DCCAF2 100%); --on-custom: #1E1F24;
  --g-footer: #1E1F24; --on-footer: #FFFFFF;
  --fx-pop-bg: #FFFFFF; --fx-pop-gallery: #F4F2F7; --fx-pop-tag: #D4FF3F; --fx-on-pop-tag: #1E1F24; --fx-pop-minh: 620px;
  --fx-card-r: 34px; --fx-tile-r: 40px; --fx-head-case: uppercase; --fx-head-w: 900;
  --fx-r: 34px;
  --display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ink: var(--fx-ink);
  --muted: var(--fx-muted);
  --canvas: var(--fx-page);
}
html.fx body::before, html.fx body::after { display: none !important; }
html.fx body { background: var(--fx-page); color: var(--fx-ink); letter-spacing: -0.005em; }
html.fx h1, html.fx h2, html.fx h3, html.fx h4 { letter-spacing: -0.03em; }

/* ---------- the page ---------- */
/* edge to edge: the page fills the whole window, no grey margins */
html.fx .fx-page { max-width: none; margin: 0; background: var(--fx-shell); border-radius: 0; padding: 0 0 14px; overflow: clip; box-shadow: none; }
html.fx .wrap { max-width: none; padding: 0 clamp(16px, 2.4vw, 44px); }
html.fx .fx-shell { position: relative; isolation: isolate; }
/* pastel panel behind nav + hero; its notched outline is drawn by assets/fx.js (plain rounded box without it) */
html.fx .fx-bg { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--fx-h, 100%); background: var(--fx-pastel); border-radius: var(--fx-r); pointer-events: none; }
html.fx .fx-bg.shaped { border-radius: 0; }

/* ---------- nav ---------- */
html.fx .nav-wrap { position: relative; top: auto; margin: 0; padding: 0; z-index: 60; }
html.fx body .nav { max-width: none !important; height: 104px; padding: 0 clamp(16px, 2.4vw, 44px); border-radius: 0; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 20px; }
html.fx .nav::before, html.fx .nav::after { display: none !important; }
html.fx .brand { flex: none; gap: 12px; color: var(--fx-ink) !important; }
html.fx .brand-mark { width: 50px; height: 50px; border-radius: 50%; background: var(--fx-ink) !important; color: var(--fx-shell) !important; display: grid; place-items: center; font-size: 22px; font-weight: 800; box-shadow: none !important; border: 0 !important; }
html.fx .brand img { height: 46px; max-width: 160px; }
html.fx body .nav .brand-name { overflow: visible; font-size: 27px; font-weight: 800 !important; letter-spacing: -0.04em; color: var(--fx-ink) !important; }
html.fx .nav-links { flex: 1 1 auto; min-width: 0; justify-content: center; gap: clamp(2px, .5vw, 10px); font-size: 18px; margin: 0 auto; }
html.fx body .nav-links > a, html.fx body .nav-cat-btn { padding: 10px 14px !important; border-radius: 999px; color: var(--fx-muted) !important; opacity: 1 !important; background: transparent !important; font-weight: 400 !important; font-size: 18px !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html.fx body .nav-links > a:hover, html.fx body .nav-cat-btn:hover { color: var(--fx-ink) !important; background: transparent !important; }
html.fx body .nav-links > a.active { color: var(--fx-ink) !important; font-weight: 500 !important; background: transparent !important; }
html.fx .nav-cat-btn { border: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; }
html.fx .nav-cat-menu { border-radius: 22px; background: #fff !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .12) !important; padding: 8px; }
html.fx .nav-cat-menu a { border-radius: 14px; color: var(--fx-ink) !important; }
html.fx .nav-cat-menu a:hover { background: var(--fx-soft) !important; }
html.fx .nav-actions { flex: none; gap: 12px; }
html.fx .fx-search { display: inline-flex; align-items: center; gap: 12px; height: 62px; width: clamp(220px, 21vw, 320px); padding: 0 12px 0 22px; border: 0; border-radius: 999px; background: #fff; color: var(--fx-muted); font: 400 17px var(--body); cursor: text; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(120, 80, 90, .06); }
html.fx .fx-search > svg { width: 22px; height: 22px; flex: none; }
html.fx .fx-search span { flex: 1; text-align: left; white-space: nowrap; }
html.fx .fx-search i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; }
html.fx .fx-search i svg { width: 14px; height: 14px; }
html.fx .fx-search:hover { color: var(--fx-ink); }
html.fx #cartBtn { width: 62px; height: 62px; border-radius: 50%; background: #fff !important; color: var(--fx-ink); box-shadow: 0 8px 24px rgba(120, 80, 90, .06) !important; }
html.fx #cartBtn svg { width: 24px; height: 24px; }
html.fx .cart-count { top: 6px; right: 6px; background: var(--fx-hot) !important; color: var(--fx-on-hot) !important; }
html.fx .nav-wa { flex: none; white-space: nowrap; height: 48px !important; min-height: 48px !important; padding: 0 20px !important; border-radius: 999px !important; background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; font-weight: 500 !important; font-size: 15px !important; box-shadow: none !important; margin: 0; }
@media (max-width: 1640px) { html.fx .nav-wa { display: none !important; } }
@media (max-width: 1440px) { html.fx body .nav-links > a, html.fx body .nav-cat-btn { font-size: 17px !important; padding: 9px 11px !important; } html.fx .fx-search { width: 240px; } }
@media (max-width: 1240px) { html.fx body .nav-links > a, html.fx body .nav-cat-btn { font-size: 15.5px !important; padding: 8px 8px !important; } html.fx .fx-search { width: 62px; padding: 0; justify-content: center; } html.fx .fx-search span, html.fx .fx-search i { display: none; } }

/* ---------- hero ---------- */
html.fx .hero.wrap { display: flex; flex-direction: column; align-items: center; padding: 64px 22px 70px; position: relative; }
html.fx .hero-card { order: 1; display: block; min-height: 0 !important; height: auto !important; background: none !important; color: var(--fx-ink); overflow: visible; border-radius: 0; isolation: auto; box-shadow: none !important; width: 100%; }
html.fx .hero-card::before, html.fx .hero-card::after { display: none !important; }
html.fx .hero-slides, html.fx .hero-dots { display: none !important; }
html.fx .hero-copy { max-width: min(1500px, 100%) !important; margin: 0 auto; padding: 0 !important; align-items: center !important; text-align: center; gap: 22px; }
html.fx .hero .eyebrow { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--fx-ink); font-size: 14px; font-weight: 500; }
html.fx .hero .eyebrow:empty { display: none; }
html.fx .hero h1, html.fx .hero #heroTitle { margin: 0; font-family: var(--display); font-size: clamp(46px, 7.4vw, 112px); line-height: .92; letter-spacing: -0.055em; font-weight: 500; text-transform: var(--fx-head-case); color: var(--fx-ink) !important; text-wrap: balance; text-shadow: none !important; }
html.fx .hero #heroTitle b { display: block; font-weight: var(--fx-head-w); letter-spacing: -0.06em; }
html.fx .hero-copy p { max-width: 760px; margin: 4px 0 0; font-size: clamp(17px, 1.6vw, 22px); color: var(--fx-muted) !important; line-height: 1.45; }
html.fx .hero-lamp-btn { order: 2; position: static !important; transform: none !important; margin: 26px 0 0 !important; height: 48px; padding: 0 22px !important; border-radius: 999px !important; background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; border: 0 !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; }

/* category tiles: big coloured squares with arrows on both sides */
html.fx .fx-cats { order: 3; width: 100%; margin-top: 46px; padding: 0 104px; position: relative; }
html.fx .fx-cats .rail-nav { display: block !important; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
html.fx .fx-cats .rail-btn { width: 76px; height: 76px; top: 50%; background: var(--fx-btn) !important; color: var(--fx-on-btn); border-radius: 50%; box-shadow: 0 14px 30px rgba(30,31,36,.22) !important; }
html.fx .fx-cats .rail-btn svg { width: 26px; height: 26px; }
html.fx .fx-cats .rail-btn[data-rail="-1"] { left: 4px; }
html.fx .fx-cats .rail-btn[data-rail="1"] { right: 4px; }
html.fx .fx-cats .rail-btn:disabled { opacity: .18 !important; pointer-events: none; }
html.fx .fx-cats:not(.scrollable) .rail-nav { display: none !important; }
html.fx #collections { display: flex !important; gap: clamp(16px, 1.8vw, 30px); padding: 14px 6px 26px !important; margin: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: safe center; scrollbar-width: none; background: none !important; }
html.fx #collections::-webkit-scrollbar { display: none; }
html.fx #collections::before { display: none !important; }
html.fx .fx-tile { flex: 0 0 auto; width: clamp(160px, 12.6vw, 226px); aspect-ratio: 1; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border-radius: var(--fx-tile-r); text-align: center; color: var(--fx-ink); text-decoration: none !important; background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: 0 14px 34px rgba(80, 60, 70, .08); transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
html.fx .fx-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(80, 60, 70, .14); }
html.fx .fx-tile-name { font-size: clamp(22px, 2vw, 31px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
html.fx .fx-tile-meta { font-size: 13px; font-weight: 500; opacity: .8; }
html.fx .fx-tile-go { position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s var(--ease); }
html.fx .fx-tile-go svg { width: 15px; height: 15px; }
html.fx .fx-tile:hover .fx-tile-go { opacity: 1; transform: none; }
/* category boxes: each position has its own colour (Admin → Settings → Design 2.0 colours → Category boxes) */
html.fx .fx-tile.t0 { --tb: var(--tile0, var(--g-t1)); --tc: var(--on-tile0, #fff); --ts: var(--soon-tile0, rgba(255,255,255,.22)); --tg: var(--go-tile0, rgba(255,255,255,.25)); --tgc: var(--on-go-tile0, #fff); }
html.fx .fx-tile.t1 { --tb: var(--tile1, #fff); --tc: var(--on-tile1, var(--fx-ink)); --ts: var(--soon-tile1, rgba(0,0,0,.07)); --tg: var(--go-tile1, var(--fx-btn)); --tgc: var(--on-go-tile1, var(--fx-on-btn)); }
html.fx .fx-tile.t2 { --tb: var(--tile2, var(--g-t2)); --tc: var(--on-tile2, var(--fx-ink)); --ts: var(--soon-tile2, rgba(255,255,255,.22)); --tg: var(--go-tile2, rgba(255,255,255,.25)); --tgc: var(--on-go-tile2, #fff); }
html.fx .fx-tile.t3 { --tb: var(--tile3, #fff); --tc: var(--on-tile3, var(--fx-ink)); --ts: var(--soon-tile3, rgba(0,0,0,.07)); --tg: var(--go-tile3, var(--fx-btn)); --tgc: var(--on-go-tile3, var(--fx-on-btn)); }
html.fx .fx-tile.t4 { --tb: var(--tile4, var(--g-t3)); --tc: var(--on-tile4, var(--fx-ink)); --ts: var(--soon-tile4, rgba(255,255,255,.22)); --tg: var(--go-tile4, rgba(255,255,255,.25)); --tgc: var(--on-go-tile4, #fff); }
html.fx .fx-tile.t5 { --tb: var(--tile5, #fff); --tc: var(--on-tile5, var(--fx-ink)); --ts: var(--soon-tile5, rgba(0,0,0,.07)); --tg: var(--go-tile5, var(--fx-btn)); --tgc: var(--on-go-tile5, var(--fx-on-btn)); }
html.fx .fx-tile { background: var(--tb) !important; color: var(--tc) !important; }
html.fx .fx-tile .fx-tile-go { background: var(--tg); color: var(--tgc); }
html.fx .fx-tile.soon .fx-tile-meta { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ts); opacity: 1; }

/* computers: the hero is just the headline and the category boxes — the shop starts right below */
@media (min-width: 761px) {
  html.fx .hero.wrap { padding: 22px 22px 18px; }
  html.fx .hero-copy { gap: 0; }
  html.fx .hero .eyebrow, html.fx .hero-copy p { display: none !important; }
  html.fx .hero h1, html.fx .hero #heroTitle { font-size: clamp(30px, 3.3vw, 54px); line-height: 1; letter-spacing: -0.045em; }
  html.fx .hero #heroTitle b { display: inline; }
  html.fx .hero-lamp-btn { margin-top: 12px !important; height: 40px; font-size: 14px !important; }
  html.fx .fx-cats { margin-top: 14px; padding: 0 84px; }
  html.fx #collections { padding: 8px 6px 12px !important; }
  html.fx .fx-tile { width: clamp(120px, 8.6vw, 156px); padding: 14px; }
  html.fx .fx-tile-name { font-size: clamp(18px, 1.4vw, 23px); }
  html.fx .fx-tile-meta { font-size: 11.5px; white-space: nowrap; }
  html.fx .fx-tile.soon .fx-tile-meta { padding: 3px 9px; }
  html.fx .fx-cats .rail-btn { width: 52px; height: 52px; }
}
/* ---------- spotlight: three pieces + offers ---------- */
html.fx .fx-spot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.75fr); gap: 24px; padding: 48px 22px 20px; align-items: stretch; }
html.fx .fx-spot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
html.fx .fx-spot-cards[data-n="0"] { display: none; }
html.fx .fx-spot-cards[data-n="0"] + .fx-promos { grid-column: 1 / -1; }
html.fx .fx-promos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 22px; min-height: 420px; }
html.fx .fx-promo { position: relative; display: flex; text-decoration: none !important; border-radius: var(--fx-card-r); overflow: hidden; color: #fff; transition: transform .35s var(--ease); }
html.fx .fx-promo:hover { transform: translateY(-4px); }
html.fx .fx-offer { grid-row: 1; flex-direction: column; padding: 26px 24px; background: var(--g-offer); color: var(--on-offer); min-height: 380px; }
html.fx .fx-offer b { position: relative; z-index: 2; font-size: clamp(26px, 2.3vw, 40px); line-height: .98; font-weight: var(--fx-head-w); text-transform: var(--fx-head-case); letter-spacing: -0.04em; max-width: 9ch; }
html.fx .fx-offer img { position: absolute; z-index: 0; right: 0; bottom: 0; width: 82%; height: 64%; object-fit: cover; border-top-left-radius: 120px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
html.fx .fx-squiggle { position: absolute; z-index: 1; left: 16px; bottom: 40px; width: 96px; height: 96px; color: var(--on-offer); }
html.fx .fx-brand { flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px 22px; text-align: center; background: var(--g-brand); color: var(--on-brand); }
html.fx .fx-brand-row { display: inline-flex; align-items: center; gap: 12px; }
html.fx .fx-brand-row b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
html.fx .fx-brand-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--fx-ink); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 22px; overflow: hidden; }
html.fx .fx-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
html.fx .fx-brand-txt { font-size: 21px; line-height: 1.12; max-width: 15ch; }
html.fx .fx-brand small { font-size: 13px; opacity: .85; }
html.fx .fx-corner { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--fx-ink); display: grid; place-items: center; }
html.fx .fx-corner svg { width: 16px; height: 16px; }
html.fx .fx-custom { grid-column: 1 / -1; align-items: center; gap: 18px; color: var(--fx-ink); padding: 6px 4px; }
html.fx .fx-custom:hover { transform: none; }
html.fx .fx-go { flex: none; width: 78px; height: 78px; border-radius: 50%; background: var(--fx-hot); color: var(--fx-on-hot); display: grid; place-items: center; transition: transform .35s var(--ease); }
html.fx .fx-go svg { width: 30px; height: 30px; }
html.fx .fx-custom:hover .fx-go { transform: rotate(10deg) scale(1.05); }
html.fx .fx-custom b { display: block; font-size: clamp(24px, 2.2vw, 33px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; }
html.fx .fx-custom small { display: block; margin-top: 8px; font-size: 15px; color: var(--fx-muted); line-height: 1.3; }

/* ---------- product card ---------- */
html.fx .fx-card { position: relative; display: flex !important; flex-direction: column; background: var(--fx-soft); border-radius: var(--fx-card-r); padding: 0; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
html.fx .fx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(30, 31, 36, .09); }
html.fx .fx-card .card-media { display: block !important; aspect-ratio: auto !important; border-radius: var(--fx-card-r) var(--fx-card-r) calc(var(--fx-card-r) * .82) calc(var(--fx-card-r) * .82) !important; background: var(--fx-media) !important; box-shadow: none !important; border: 0 !important; transform: none !important; overflow: hidden; }
html.fx .fx-card .card-media::after { display: none !important; }
html.fx .fx-card .cmp { position: relative !important; inset: auto !important; display: block; width: 100%; aspect-ratio: 1 / .92 !important; height: auto !important; border-radius: inherit !important; overflow: hidden; }
html.fx .fx-card .cmp > img { padding: 0; }
html.fx .fx-card .cmp > img[data-auto="studio"], html.fx .fx-card .cmp > img[data-fit="contain"] { padding: 18px 18px 40px; }
html.fx .fx-card:hover .cmp > img { transform: scale(calc(var(--z, 1) * 1.04)); }
html.fx .fx-card .card-flag { top: 16px; left: 16px; padding: 5px 12px; font-size: 12px; background: #fff; color: var(--fx-ink); }
html.fx .fx-card .card-flag.sale { background: var(--fx-sale); color: var(--fx-on-sale); }
html.fx .fx-card .card-flag.out { background: var(--fx-ink); color: #fff; }
html.fx .fx-card .card-media .bag-badge { top: 16px; right: 16px; left: auto; background: var(--fx-ink); color: #fff; box-shadow: none; }
html.fx .fx-card.in-bag .card-media { box-shadow: none !important; }
html.fx .fx-card.in-bag { box-shadow: 0 0 0 2.5px var(--fx-ink); }
html.fx .fx-card.flash { animation: fxFlash 2s var(--ease); }
@keyframes fxFlash { 25%, 60% { box-shadow: 0 0 0 3px var(--fx-hot), 0 12px 30px rgba(0, 0, 0, .12); } }
html.fx .fx-tag { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: -34px 10px 0; min-height: 60px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--fx-lime); color: var(--fx-on-lime); box-shadow: 0 8px 20px rgba(60, 70, 0, .10); }
html.fx .fx-tag-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.25; }
html.fx .fx-tag-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fx .fx-plus { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--fx-btn); color: var(--fx-on-btn); display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--ease), background .2s; }
html.fx .fx-plus svg { width: 20px; height: 20px; }
html.fx .fx-plus:hover { transform: rotate(90deg); background: var(--fx-btn-hover); }
html.fx .fx-body { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 18px 22px; }
html.fx .fx-name { display: block; padding: 0 44px 0 0; border: 0; background: none; text-align: left; color: var(--fx-ink); cursor: pointer; font: inherit; }
html.fx .fx-name b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fx .fx-name span { display: block; font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fx .fx-name em { font-style: normal; color: var(--fx-muted); font-size: 14px; }
html.fx .fx-sw { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.06); }
html.fx .fx-sw .swatches, html.fx .fx-sw .var-dots { display: inline-flex; gap: 2px; }
html.fx .fx-sw .swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
html.fx .fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
html.fx .fx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
html.fx .fx-price .price-now { font-size: clamp(21px, 1.6vw, 30px); font-weight: 400; letter-spacing: -0.03em; color: var(--fx-ink); white-space: nowrap; }
html.fx .fx-price .price-was { font-size: 13px; color: var(--fx-muted); }
html.fx .fx-price .price-from { font-size: 13px; color: var(--fx-muted); width: 100%; }
html.fx .fx-buy { flex: none; height: 46px; min-width: 0; padding: 0 16px; border: 0; border-radius: var(--fx-btn-r); background: var(--fx-btn); color: var(--fx-on-btn); font: 500 15px var(--body); cursor: pointer; transition: background .2s, transform .2s; }
html.fx .fx-buy:hover { background: var(--fx-btn-hover); transform: translateY(-1px); }

/* rows of cards further down */
html.fx .rail-track.grid > .fx-card { width: clamp(250px, 24%, 330px); }
html.fx .grid:not(.rail-track) { gap: 24px; }
html.fx .rail-track { gap: 24px; padding: 6px 6px 26px; margin: 0 -6px; scrollbar-width: none; }
html.fx .rail-track::-webkit-scrollbar { display: none; }
html.fx .rail:not(.fx-cats) .rail-btn { width: 56px; height: 56px; top: 36%; background: var(--fx-btn) !important; color: var(--fx-on-btn); box-shadow: 0 10px 24px rgba(30,31,36,.22) !important; }
html.fx .rail:not(.fx-cats) .rail-btn[data-rail="-1"] { left: -12px; }
html.fx .rail:not(.fx-cats) .rail-btn[data-rail="1"] { right: -12px; }
html.fx .rail-more { border-radius: var(--fx-card-r) !important; background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; }

/* ---------- sections ---------- */
html.fx .ticker { margin: 34px 0 0; border: 0 !important; background: var(--fx-ink) !important; border-radius: 999px; }
html.fx .ticker-track { color: var(--fx-shell); font-size: 17px; font-weight: 500; padding: 18px 0; }
html.fx .ticker-track span::after { content: "✦"; color: var(--fx-lime); }
html.fx .products, html.fx .lamps, html.fx .more, html.fx .wallart { padding: 64px 0 24px !important; background: none !important; border: 0 !important; }
@media (min-width: 761px) { html.fx .products { padding: 40px 0 6px !important; } html.fx :is(.lamps, .more, .wallart) { padding-top: 48px !important; } }
html.fx .wallart::before, html.fx .lamps::before, html.fx .more::before { display: none !important; }
html.fx :is(#wallart, #lamps, #more, #products) .section-head, html.fx .section-head { align-items: flex-end; margin-bottom: 26px; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx :is(#wallart, #lamps, #more) .section-head::before { display: none !important; }
html.fx body :is(#wallart, #lamps, #more) .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "k va" "h va" !important; grid-template-rows: auto auto !important; align-items: end !important; gap: 0 18px !important; text-align: left !important; }
html.fx body :is(#lamps, #more) .section-head > div:first-child { display: contents !important; }
html.fx body :is(#wallart, #lamps, #more) .section-head .kicker { grid-area: k !important; justify-self: start !important; align-self: end !important; }
html.fx body :is(#wallart, #lamps, #more) .section-head h2 { grid-area: h !important; justify-self: start !important; align-self: end !important; }
html.fx body :is(#lamps, #more) .section-head .sec-right, html.fx body #wallart .section-head .view-all { grid-area: va !important; justify-self: end !important; align-self: end !important; margin: 0 !important; }
html.fx body #wallart .section-head .lede { display: none !important; }
@media (max-width: 760px) {
  html.fx body :is(#wallart, #lamps, #more) .section-head { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "k" "h" "va" !important; grid-template-rows: auto !important; }
  html.fx body :is(#lamps, #more) .section-head .sec-right, html.fx body #wallart .section-head .view-all { justify-self: start !important; margin-top: 14px !important; }
}
html.fx :is(#wallart, #lamps, #more) .section-head h2 { font-size: clamp(38px, 4.6vw, 68px) !important; line-height: .95 !important; }
html.fx :is(#wallart, #lamps, #more) .section-head .kicker { background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; padding: 6px 14px !important; font-size: 14px !important; margin-bottom: 14px !important; }
html.fx .section-head.center { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; }
html.fx .section-head.has-va .view-all { position: static; }
html.fx .section-head h2 { font-size: clamp(38px, 4.6vw, 68px); font-weight: var(--fx-head-w); letter-spacing: -0.05em; text-transform: var(--fx-head-case); line-height: .95; color: var(--fx-ink); }
html.fx .kicker { display: inline-flex; width: max-content; padding: 6px 14px; margin-bottom: 14px; border-radius: 999px; background: var(--fx-lime); color: var(--fx-on-lime); font-size: 14px; font-weight: 600; }
html.fx .lede { color: var(--fx-muted); font-size: 18px; }
html.fx .sec-count { font-size: 15px; color: var(--fx-muted); }
html.fx .view-all, html.fx .vp-back { height: 50px; padding: 0 22px; border-radius: 999px; background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; box-shadow: none !important; font-weight: 500; font-size: 15px; }
html.fx .view-all:hover, html.fx .vp-back:hover { background: var(--fx-btn-hover) !important; }
html.fx .vp-back { padding-left: 16px; }
html.fx .live-dot { background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; }
html.fx .shop-tools { gap: 14px; }
html.fx .search, html.fx .sort select { min-height: 58px; border-radius: 999px; background: var(--fx-soft) !important; box-shadow: none !important; font-size: 17px; }
html.fx .search input { min-height: 58px; font-size: 17px; }
html.fx .search:focus-within { box-shadow: 0 0 0 2px var(--fx-ink) !important; background: #fff !important; }
html.fx .sort select { padding: 0 22px; }
html.fx .chip { min-height: 46px; padding: 0 20px; background: var(--fx-soft) !important; box-shadow: none !important; font-size: 15px; font-weight: 500; }
html.fx .chip:hover { background: var(--fx-soft-2) !important; }
html.fx .chip.on { background: var(--fx-btn) !important; color: var(--fx-on-btn); }
html.fx .chip.sm { min-height: 38px; }
html.fx .chip.sm.on { background: var(--fx-hot) !important; color: var(--fx-on-hot); }
html.fx .empty { border-radius: 28px; background: var(--fx-soft); }

/* perks: four bright tiles */
html.fx .perks-sec { padding: 40px 0 64px; }
html.fx .perks { gap: 22px; }
html.fx .perk { border-radius: calc(var(--fx-card-r) * .88); padding: 28px; background: var(--fx-soft) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 8px; }
html.fx .perk svg { width: 54px; height: 54px; padding: 14px; border-radius: 50%; color: var(--fx-on-hot); background: var(--fx-hot); margin-bottom: 12px; box-sizing: border-box; }
html.fx .perk:nth-child(2) svg { background: var(--fx-lav); color: var(--fx-on-lav); }
html.fx .perk:nth-child(3) svg { background: var(--fx-ink); color: var(--fx-shell); }
html.fx .perk:nth-child(4) svg { background: var(--fx-lime); color: var(--fx-on-lime); }
html.fx .perk strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
html.fx .perk span { font-size: 15px; color: var(--fx-muted); }

/* reviews */
html.fx .review-card { background: var(--fx-soft) !important; border-radius: 28px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* custom order: big blue panel */
html.fx .custom { margin: 10px 0 0; padding: 64px 0; border-radius: var(--fx-tile-r); background: var(--g-custom) !important; color: var(--on-custom); }
html.fx .custom::before, html.fx .custom::after { display: none !important; }
html.fx .custom .wrap { padding: 0 48px; }
html.fx .custom h2 { color: var(--on-custom); font-size: clamp(38px, 4.8vw, 70px); font-weight: var(--fx-head-w); text-transform: var(--fx-head-case); letter-spacing: -0.05em; line-height: .95; }
html.fx .custom .kicker { background: var(--fx-lime); color: var(--fx-on-lime); }
html.fx .custom-copy p { color: var(--on-custom); opacity: .88; }
html.fx .steps b { background: #fff !important; color: var(--fx-ink) !important; box-shadow: none !important; }
html.fx .steps li { color: var(--on-custom); }
html.fx .custom-copy .btn { background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; border: 0 !important; border-radius: 999px; }
html.fx .custom-form { background: #fff !important; color: var(--fx-ink); border-radius: 32px !important; padding: 32px !important; box-shadow: 0 30px 60px rgba(20, 30, 90, .25) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx .custom-form::before, html.fx .custom-form::after { display: none !important; }
html.fx .custom-form h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
html.fx .custom-form .field input:not([type=checkbox]), html.fx .custom-form .field select, html.fx .custom-form .field textarea { background: var(--fx-soft) !important; border-color: transparent !important; border-radius: 16px; }
html.fx .custom-form .btn-primary { background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; border-radius: var(--fx-btn-r); min-height: 56px; }

/* try our lamp */
html.fx .lamptry { padding-top: 56px !important; padding-bottom: 32px !important; background: none !important; }
html.fx .lamptry .lt-wrap { border-radius: 40px !important; background: var(--fx-soft) !important; box-shadow: none !important; }
html.fx .lamptry .lt-kicker { background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; box-shadow: none !important; }
html.fx .lamptry h2 { font-weight: var(--fx-head-w); letter-spacing: -0.045em; text-transform: var(--fx-head-case); }
html.fx .lamptry .lt-opt { border-radius: 999px !important; }
html.fx .lamptry .lt-opt.on { background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; box-shadow: none !important; }
html.fx .lamptry #ltShop, html.fx .lamptry [data-ref="ltShop"] { background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; border-radius: var(--fx-btn-r) !important; box-shadow: none !important; border: 0 !important; }

/* footer: dark rounded panel */
html.fx .footer { margin-top: 26px; border-radius: var(--fx-tile-r) var(--fx-tile-r) 0 0; padding: 56px 26px 26px; background: var(--g-footer) !important; --ft: var(--on-footer); color: var(--on-footer); font-size: 15px; }
html.fx .footer :is(p, li, small, span) { color: inherit; }
html.fx .footer h4 { color: var(--fx-lime) !important; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
html.fx .footer a, html.fx .footer .contact-list a, html.fx .footer .contact-list span { color: var(--on-footer) !important; opacity: .8; }
html.fx .footer a:hover { opacity: 1; }
html.fx .footer-logo, html.fx .footer-logo .urdu { color: var(--on-footer) !important; }
html.fx .footer-logo { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
html.fx .footer-bottom { border-color: color-mix(in srgb, var(--on-footer) 14%, transparent) !important; color: var(--on-footer); opacity: .7; }
html.fx .social { background: color-mix(in srgb, var(--on-footer) 12%, transparent) !important; color: var(--on-footer) !important; }

/* buttons inside the shop page follow the new look (dialogs keep the brand colour from Admin) */
html.fx main .btn-primary, html.fx .view-page .btn-primary { border-radius: 14px; }

/* inner pages (category / product / View all): the pastel band sits behind the nav only */
html.fx.fx-inner .fx-bg { height: 104px; }
html.fx .view-page { padding-top: 34px !important; }
html.fx .seo-page { padding-top: 30px; }
html.fx .seo-cat-head h1, html.fx .seo-info h1 { font-weight: var(--fx-head-w); letter-spacing: -0.045em; text-transform: var(--fx-head-case); }
html.fx .seo-tile { border-radius: 28px; background: var(--fx-soft); }
.view-mode #spotlight { display: none !important; }

/* floating bag button once the nav has scrolled away (assets/fx.js) */
html.fx .fx-fab { position: fixed; z-index: 70; right: 22px; bottom: 22px; width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--fx-btn); color: var(--fx-on-btn); display: grid; place-items: center; cursor: pointer; box-shadow: 0 16px 36px rgba(30,31,36,.3); transform: translateY(120px); transition: transform .4s var(--ease); }
html.fx .fx-fab.on { transform: none; }
html.fx .fx-fab svg { width: 26px; height: 26px; }
html.fx .fx-fab b { position: absolute; top: 4px; right: 2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fx-hot); color: var(--fx-on-hot); font-size: 12px; display: grid; place-items: center; }
html.fx .fx-fab b:empty { display: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1240px) {
  html.fx .fx-spot { grid-template-columns: 1fr; }
  html.fx .fx-promos { min-height: 360px; }
}
@media (max-width: 1000px) {
  html.fx .nav-links { display: none; }
  html.fx .menu-btn { display: inline-flex !important; width: 56px; height: 56px; border-radius: 50%; background: #fff !important; }
  html.fx .nav-links.open { display: flex; position: absolute; top: 100%; left: 12px; right: 12px; margin: 0; flex-direction: column; padding: 12px; border-radius: 26px; background: #fff; box-shadow: 0 24px 50px rgba(0,0,0,.14); z-index: 80; }
  html.fx .fx-spot-cards { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -22px; padding: 0 22px 8px; }
  html.fx .fx-spot-cards > * { scroll-snap-align: start; }
  html.fx .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html.fx .fx-page { margin: 0; border-radius: 0; padding: 0 0 8px; }
  html.fx .wrap { padding: 0 14px; }
  html.fx { --fx-r: 26px; }
  html.fx .nav { height: 74px; padding: 0 10px 0 14px; gap: 8px; }
  html.fx .brand-mark { width: 40px; height: 40px; font-size: 18px; }
  html.fx .brand-name { font-size: 21px; }
  html.fx .fx-search { width: 50px; height: 50px; padding: 0; justify-content: center; }
  html.fx .fx-search span, html.fx .fx-search i { display: none; }
  html.fx .nav-actions { gap: 8px; }
  html.fx #cartBtn, html.fx .menu-btn { width: 50px !important; height: 50px !important; }
  html.fx.fx-inner .fx-bg { height: 74px; }
  html.fx .hero.wrap { padding: 38px 12px 40px !important; min-height: 0 !important; }
  html.fx .hero-copy { gap: 14px; }
  html.fx .hero h1, html.fx .hero #heroTitle { font-size: clamp(38px, 11.5vw, 56px) !important; }
  html.fx .hero-copy p { font-size: 16px; }
  html.fx .hero-copy .eyebrow { font-size: 12px; }
  html.fx .fx-cats { padding: 0; margin-top: 28px; }
  html.fx .fx-cats .rail-nav { display: none !important; }
  html.fx #collections { display: flex !important; gap: 12px; padding: 6px 12px 16px !important; margin: 0 -12px !important; justify-content: flex-start; scroll-padding: 0 12px; }
  html.fx .fx-tile { width: 132px; border-radius: min(28px, var(--fx-tile-r)); padding: 12px; }
  html.fx .fx-tile-name { font-size: 19px; }
  html.fx .fx-tile-meta { font-size: 11.5px; }
  html.fx .fx-spot { padding: 26px 12px 10px; gap: 18px; }
  html.fx .fx-spot-cards { grid-template-columns: repeat(3, 76vw); gap: 14px; margin: 0 -12px; padding: 0 12px 6px; scroll-padding: 0 12px; }
  html.fx .fx-promos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-height: 0; gap: 12px; }
  html.fx .fx-offer { grid-row: 1; min-height: 260px; padding: 20px 18px; border-radius: 28px; }
  html.fx .fx-offer b { font-size: 25px; }
  html.fx .fx-squiggle { width: 64px; height: 64px; left: 10px; bottom: 18px; }
  html.fx .fx-brand { grid-row: 1; border-radius: 28px; padding: 22px 14px; }
  html.fx .fx-brand-row { flex-direction: column; gap: 8px; }
  html.fx .fx-brand-row b { font-size: 20px; }
  html.fx .fx-brand-txt { font-size: 16px; }
  html.fx .fx-corner { width: 34px; height: 34px; top: 10px; right: 10px; }
  html.fx .fx-custom { grid-column: 1 / -1; grid-row: 2; }
  html.fx .fx-go { width: 64px; height: 64px; }
  html.fx .fx-go svg { width: 24px; height: 24px; }
  html.fx .fx-card { border-radius: min(28px, var(--fx-card-r)); }
  html.fx .fx-card .card-media { border-radius: min(28px, var(--fx-card-r)) min(28px, var(--fx-card-r)) min(24px, var(--fx-card-r)) min(24px, var(--fx-card-r)) !important; }
  html.fx .fx-tag { min-height: 54px; margin-top: -30px; padding-left: 18px; }
  html.fx .fx-plus { width: 42px; height: 42px; }
  html.fx .fx-body { padding: 16px 18px 18px; gap: 14px; }
  html.fx .fx-name b { font-size: 17px; }
  html.fx .fx-name span { font-size: 15.5px; }
  html.fx .fx-buy { height: 44px; min-width: 0; padding: 0 16px; font-size: 14px; }
  html.fx .fx-sw { top: 16px; right: 16px; }
  html.fx .rail-track.grid > .fx-card { width: 72vw; max-width: 300px; }
  html.fx .rail-track { margin: 0 -12px; padding: 4px 12px 18px; gap: 14px; }
  html.fx .ticker { margin-top: 22px; }
  html.fx .products, html.fx .lamps, html.fx .more, html.fx .wallart { padding: 40px 0 10px !important; }
  html.fx .section-head h2 { font-size: 40px; }
  html.fx .search, html.fx .sort select, html.fx .search input { min-height: 50px; }
  html.fx .perks { grid-template-columns: 1fr 1fr; gap: 12px; }
  html.fx .perk { padding: 20px; border-radius: 24px; }
  html.fx .perk strong { font-size: 17px; }
  html.fx .perk span { font-size: 13.5px; }
  html.fx .custom { border-radius: 28px; padding: 40px 0; }
  html.fx .custom .wrap { padding: 0 16px; }
  html.fx .custom-form { padding: 22px !important; border-radius: 24px !important; }
  html.fx .footer { border-radius: 28px 28px 0 0; padding: 36px 6px 20px; }
  html.fx .fx-fab { right: 14px; bottom: 14px; width: 58px; height: 58px; }
}

/* sections far down are always drawn (store.css lets the browser skip them until near the screen) */
html.fx body:not(.admin) :is(.perks-sec, #reviews, #custom, .footer) { content-visibility: visible; }
/* section titles keep the bold look on phones too (store.css has its own phone header styles) */
html.fx body :is(#wallart, #lamps, #more) .section-head h2 { font-weight: var(--fx-head-w) !important; color: var(--fx-ink) !important; letter-spacing: -0.05em !important; text-transform: var(--fx-head-case); }
html.fx body :is(#wallart, #lamps, #more) .section-head .kicker { border-radius: 999px !important; }
@media (max-width: 760px) { html.fx body :is(#wallart, #lamps, #more) .section-head h2 { font-size: 40px !important; } }
/* category / product pages: no home hero */
html.fx body.seo-pp .hero, html.fx body.seo-cp .hero { display: none !important; }

/* ================= one look everywhere: brand colours follow the new design =================
   (Admin's brand colour is written onto the page at run time; these win over it) */
html.fx {
  --blue: var(--fx-btn) !important; --blue-hover: var(--fx-btn-hover) !important; --blue-ink: var(--fx-hot) !important; --on-blue: var(--fx-on-btn) !important;
  --brand-bg: var(--fx-btn) !important; --brand-bg-hover: var(--fx-btn-hover) !important; --footer-bg: var(--g-footer) !important; --footer-ink: var(--on-footer) !important;
}
html.fx .btn { border-radius: var(--fx-btn-r); font-weight: 500; }
html.fx .btn-primary, html.fx .btn-amber { background: var(--fx-btn) !important; color: var(--fx-on-btn) !important; box-shadow: none !important; border-color: transparent !important; }
html.fx .btn-primary:hover, html.fx .btn-amber:hover { background: var(--fx-btn-hover) !important; }
html.fx .field input:not([type=checkbox]), html.fx .field select, html.fx .field textarea { border-radius: 14px; background: var(--fx-soft); border-color: transparent; }
html.fx .field input:focus, html.fx .field select:focus, html.fx .field textarea:focus { background: #fff; border-color: var(--fx-ink); box-shadow: 0 0 0 3px rgba(30,31,36,.08); }

/* pop-up windows: product, bag, checkout, order placed */
html.fx dialog::backdrop { background: rgba(30, 31, 36, .38); }
html.fx .sheet, html.fx .drawer-panel { background: var(--fx-pop-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 34px !important; box-shadow: 0 40px 90px rgba(0,0,0,.22) !important; }
html.fx .sheet-head, html.fx .sheet-foot { background: var(--fx-pop-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: var(--fx-line) !important; }
html.fx .sheet-head h2 { font-size: 26px; font-weight: var(--fx-head-w); letter-spacing: -0.04em; text-transform: var(--fx-head-case); }
html.fx .pd-gallery { background: var(--fx-pop-gallery); border-radius: 28px; }
/* the window's own corners clip everything inside (no square corner showing behind the photo panel) */
html.fx dialog:has(> .sheet) { border-radius: 34px; overflow: hidden; background: transparent; }
html.fx #productDlg:not(.max) .pd-gallery { border-radius: 34px 28px 28px 34px; }
@media (max-width: 760px) { html.fx dialog.bottom:has(> .sheet) { border-radius: 28px 28px 0 0; } }
html.fx .pd-cat { display: inline-flex; width: max-content; padding: 5px 12px; border-radius: 999px; background: var(--fx-pop-tag); color: var(--fx-on-pop-tag) !important; font-size: 12px !important; letter-spacing: .02em; }
html.fx #pdName { font-size: clamp(26px, 2.6vw, 36px); font-weight: var(--fx-head-w); letter-spacing: -0.045em; text-transform: var(--fx-head-case); line-height: .98; }
html.fx .pd-price .price-now { font-weight: 500; }
html.fx .size-opt, html.fx .fin-opt, html.fx .pay { border-radius: 18px !important; border-color: transparent !important; background: var(--fx-soft) !important; box-shadow: none !important; }
html.fx .fin-opt { border-radius: 999px !important; }
html.fx .size-opt[aria-checked="true"], html.fx .fin-opt[aria-checked="true"], html.fx .pay[aria-checked="true"], html.fx .pay.on, html.fx .bank-card.chosen { background: #fff !important; border-color: var(--fx-ink) !important; box-shadow: 0 0 0 2px var(--fx-ink) !important; }
html.fx .qty { border-radius: 999px; background: var(--fx-soft); }
html.fx #pdAdd, html.fx #coSubmit, html.fx #toCheckout { min-height: 54px; padding: 0 26px; border-radius: var(--fx-btn-r) !important; font-size: 16px; }
html.fx .line, html.fx .co-summary { background: var(--fx-soft) !important; border-radius: 22px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx .co-step b, html.fx .co-sub b { background: var(--fx-hot) !important; color: var(--fx-on-hot) !important; }
html.fx .bank-card { border-radius: 20px; }
html.fx .drop { border-radius: 22px; }
html.fx .success-icon { background: var(--fx-lime) !important; color: var(--fx-on-lime) !important; }
html.fx .toast { border-radius: 16px; }

/* category & product pages */
html.fx .seo-crumbs ol { gap: 4px; font-size: 14px; }
html.fx .seo-crumbs li { padding: 6px 12px; border-radius: 999px; background: var(--fx-soft); }
html.fx .seo-crumbs li + li::before { display: none; }
html.fx .seo-crumbs [aria-current] { color: var(--fx-ink); font-weight: 500; }
html.fx .seo-page h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: .95; margin: 12px 0 14px; }
html.fx .seo-cat-head p { font-size: 18px; }
html.fx .seo-group { margin-top: 30px; }
html.fx .seo-group h2 { font-size: 28px; font-weight: var(--fx-head-w); letter-spacing: -0.04em; text-transform: var(--fx-head-case); margin-bottom: 16px; }
html.fx .seo-group h2 a { color: var(--fx-ink); text-decoration: none; }
html.fx .seo-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
html.fx .seo-tile { padding: 10px 10px 18px; border-radius: calc(var(--fx-card-r) * .88); background: var(--fx-soft) !important; box-shadow: none !important; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
html.fx .seo-tile:hover { box-shadow: 0 22px 44px rgba(30,31,36,.09) !important; }
html.fx .seo-tile-img { border-radius: 24px; background: var(--fx-media); margin-bottom: 10px; }
html.fx .seo-tile-name, html.fx .seo-tile-price { padding: 0 10px; }
html.fx .seo-tile-name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
html.fx .seo-tile-price { font-size: 20px; color: var(--fx-ink); }
html.fx .seo-soon { padding: 18px 22px; border-radius: 22px; background: var(--fx-lime); color: var(--fx-on-lime); }
html.fx .seo-gallery { gap: 14px; }
html.fx .seo-gallery img { border-radius: 30px; background: var(--fx-soft); }
html.fx .seo-kicker { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--fx-lime); color: var(--fx-on-lime) !important; font-size: 12px; }
html.fx .seo-price { font-size: 32px; font-weight: 400; letter-spacing: -0.03em; }
html.fx .seo-info .btn-primary { min-height: 54px; padding: 0 26px; }
html.fx .seo-related h2 { font-size: 30px; font-weight: var(--fx-head-w); letter-spacing: -0.04em; text-transform: var(--fx-head-case); }
html.fx .seo-note a, html.fx .seo-soon a { color: inherit; text-decoration: underline; }

/* product pop-up: always opens at a steady size (Admin → Design 2.0 → Product pop-up → Minimum height),
   grows with longer descriptions up to the window height, then the description scrolls inside */
@media (min-width: 901px) {
  html.fx #productDlg:not(.max) .pd-info { min-height: min(var(--fx-pop-minh, 620px), calc(100dvh - 50px)); }
  html.fx #productDlg:not(.max) .pd-foot { margin-top: auto; }
  html.fx #productDlg:not(.max) .pd-gallery { min-height: min(var(--fx-pop-minh, 620px), calc(100dvh - 50px)); }
}
html.fx .pd-thumb.on { border-color: var(--fx-ink); }
html.fx .pd-save { color: #138A4B; }

/* ---------- product pop-up: compact choices + movable blocks (Admin → Products → Opened card) ----------
   Size / colour choices sit in slim rows (label on the left, small chips on the right) so the description
   gets the room. "Side by side" and "Big tiles" are written by assets/theme2.js only when chosen.
   The blocks (name, price, choices, description) follow the saved order: .pd-head lets its parts join the
   column so each can take its own place; quantity + Add to bag always stay last. */
html.fx #productDlg .pd-head { display: contents; }
html.fx #productDlg .pd-info > .pd-head > :is(.pd-cat, #pdName, .pd-code) { order: var(--pdo-head, 1); }
html.fx #productDlg .pd-info > .pd-head > .pd-price { order: var(--pdo-price, 2); }
html.fx #productDlg .pd-info > .pd-head > .pd-opts { order: var(--pdo-opts, 3); }
html.fx #productDlg .pd-info > .pd-scroll-wrap { order: var(--pdo-desc, 4); }
html.fx #productDlg .pd-info > .pd-foot { order: 50; }
html.fx #productDlg .pd-info > .pd-head > * { flex: none; }
html.fx #productDlg .pd-opts:empty { display: none; }
html.fx #productDlg .pd-opts { gap: 10px; }
html.fx #productDlg .pd-opts .pick { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); align-items: center; gap: 6px 10px; }
html.fx #productDlg .pd-opts .pick-head { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13.5px; line-height: 1.2; }
html.fx #productDlg .pd-opts .pick-head b.chosen { display: none; }
html.fx #productDlg .pd-opts .pick-head b:not(.chosen) { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.06); }
html.fx #productDlg .pd-opts .pick > .need-msg { grid-column: 1 / -1; margin: 0; }
html.fx #productDlg .pd-opts .size-opts { display: flex; flex-wrap: wrap; gap: 6px; }
html.fx #productDlg .pd-opts .size-opt { flex-direction: row; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px !important; }
html.fx #productDlg .pd-opts .size-opt .nm { font-size: 14px; }
html.fx #productDlg .pd-opts .size-opt .pr { font-size: 12px; min-height: 0; }
html.fx #productDlg .pd-opts .fin-opts { gap: 6px; }
html.fx #productDlg .pd-opts .fin-opt { min-height: 36px; gap: 7px; padding: 0 13px 0 5px; font-size: 13.5px; }
html.fx #productDlg .pd-opts .fin-dot { width: 24px; height: 24px; }
html.fx #productDlg .pd-opts .pd-dims { margin: 0; }
html.fx #productDlg .pd-opts .pd-dim { padding: 4px 10px; font-size: 12.5px; }

/* ---------- "Try our lamp": one compact card — controls panel joined to the photo ---------- */
html.fx .lamptry .lt-wrap { display: grid !important; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important;
  max-width: 1180px; margin: 0 auto; padding: 0 !important; overflow: hidden; border-radius: var(--fx-card-r, 34px) !important; background: var(--fx-soft) !important; transition: background .6s ease !important; }
html.fx .lamptry .lt-wrap::before { display: none !important; }
html.fx .lamptry.on .lt-wrap { background: color-mix(in srgb, var(--fx-soft) 70%, #FFE2A8) !important; box-shadow: 0 30px 80px rgba(255, 170, 60, .18) !important; }
html.fx .lamptry .lt-copy { justify-content: center; gap: 14px !important; padding: 40px 36px; color: var(--fx-ink) !important; }
html.fx .lamptry .lt-copy h2 { color: var(--fx-ink) !important; font-size: clamp(30px, 3.2vw, 44px) !important; line-height: .98; margin: 0; }
html.fx .lamptry .lt-text { color: var(--fx-muted) !important; font-size: 16px !important; margin: 0; }
html.fx .lamptry .lt-pick { margin: 2px 0 0; }
html.fx .lamptry .lt-opt { background: #fff !important; color: var(--fx-ink) !important; border: 0 !important; box-shadow: 0 1px 0 rgba(30,31,36,.04) !important; }
/* the switch + its words sit in one white tile right under the picker */
html.fx .lamptry .lt-control { position: relative !important; display: flex !important; align-items: center; gap: 16px; width: 100%; margin: 4px 0 0 !important; padding: 12px 18px 12px 12px; border-radius: 24px; background: #fff; min-height: 0 !important; }
html.fx .lamptry .lt-board { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex: none; width: 92px !important; height: 126px !important; border-radius: 18px !important;
  box-shadow: 0 10px 22px rgba(30,31,36,.16), inset 0 1px 0 #fff, inset 0 -3px 8px rgba(0,0,0,.06) !important; }
html.fx .lamptry .lt-board .lt-plate { width: 60px !important; height: 86px !important; padding: 5px !important; border-radius: 13px !important; }
html.fx .lamptry .lt-board .lt-lbl { font-size: 9px !important; }
html.fx .lamptry .lt-screw.t { top: 7px; } html.fx .lamptry .lt-screw.b { bottom: 7px; }
html.fx .lamptry .lt-led { right: 10px; top: 10px; }
html.fx .lamptry .lt-control-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.fx .lamptry .lt-state { position: static !important; align-self: flex-start; padding: 5px 12px !important; border-radius: 999px; background: var(--fx-soft) !important; color: var(--fx-ink) !important; font-size: 12px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx .lamptry.on .lt-state { background: #FFD38A !important; color: #3A2408 !important; }
html.fx .lamptry .lt-hint { color: var(--fx-muted) !important; font-size: 14px !important; line-height: 1.35; }
html.fx .lamptry #ltShop { width: 100%; justify-content: center; min-height: 50px; margin-top: 2px; }
/* the photo fills the right side, edge to edge with the panel */
html.fx .lamptry .lt-stage { aspect-ratio: auto !important; height: 100% !important; min-height: 540px; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; }
html.fx .lamptry.on .lt-stage { box-shadow: none !important; }
@media (max-width: 900px) {
  html.fx .lamptry .lt-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  html.fx .lamptry .lt-stage { order: -1; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0; max-height: 62vh !important; }
  html.fx .lamptry .lt-copy { padding: 22px 18px 20px; }
  html.fx .lamptry .lt-copy h2 { font-size: 30px !important; }
}
html.fx .lamptry .lt-copy { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 40px 36px !important; grid-area: auto !important; }
html.fx .lamptry .lt-copy > * { grid-area: auto !important; }
html.fx .lamptry .lt-copy > .lt-kicker, html.fx .lamptry .lt-copy > .lt-pick { align-self: flex-start; }
html.fx .lamptry .lt-stage { width: 100% !important; max-width: none !important; justify-self: stretch !important; grid-area: auto !important; margin: 0 !important; }
html.fx .lamptry .lt-stage .lt-img { object-fit: cover !important; }
@media (max-width: 900px) { html.fx .lamptry .lt-copy { padding: 22px 18px 20px !important; } html.fx .lamptry .lt-control { padding: 10px 14px 10px 10px; } }
@media (max-width: 900px) {
  html.fx .lamptry .lt-stage { order: -1 !important; }
  html.fx .lamptry .lt-copy { order: 0 !important; }
  html.fx .lamptry .lt-control { justify-content: flex-start !important; flex-direction: row !important; align-items: center !important; text-align: left !important; }
  html.fx .lamptry .lt-control-txt { display: flex !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
  html.fx .lamptry .lt-board { width: 78px !important; height: 108px !important; }
  html.fx .lamptry .lt-board .lt-plate { width: 52px !important; height: 74px !important; }
}

/* ---------- product page: one big photo, small thumbnails under it ---------- */
html.fx .seo-gallery { display: flex !important; flex-direction: column; gap: 12px; }
html.fx .seo-gallery .seo-main { border-radius: 30px; overflow: hidden; background: var(--fx-media, var(--fx-soft)); }
html.fx .seo-gallery .seo-main img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 72vh; object-fit: contain !important; border-radius: 0 !important; background: transparent !important; }
html.fx .seo-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
html.fx .seo-thumbs::-webkit-scrollbar { display: none; }
html.fx .seo-thumb { flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--fx-soft); box-shadow: 0 0 0 2px transparent; opacity: .72; transition: opacity .15s, box-shadow .15s, transform .15s; }
html.fx .seo-thumb:hover { opacity: 1; transform: translateY(-2px); }
html.fx .seo-thumb.on { opacity: 1; box-shadow: 0 0 0 2px var(--fx-ink); }
html.fx .seo-thumb img { display: block; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; border-radius: 0 !important; }
@media (max-width: 760px) { html.fx .seo-thumb { width: 64px; height: 64px; border-radius: 14px; } html.fx .seo-gallery .seo-main { border-radius: 24px; } }

/* product names on cards: up to two lines instead of being cut off with "…" */
html.fx .fx-name b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  /* phones: the spotlight's three product cards repeat what the category rows just showed — keep only the offer cards */
  html.fx #spotlight .fx-spot-cards { display: none; }
  html.fx #spotlight .fx-promos { grid-column: 1 / -1; }
  /* comfortable thumb-sized buttons (44px minimum) */
  html.fx .fx-plus { width: 44px; height: 44px; }
}

/* ---------- "Try our lamp" button on the Lamps row + its pop-up ---------- */
html.fx .lamp-pop-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--fx-lime); color: var(--fx-on-lime); font: 600 15px var(--body); cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s; box-shadow: 0 8px 20px rgba(120, 150, 0, .18); }
html.fx .lamp-pop-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(120, 150, 0, .26); }
html.fx .lamp-pop-btn:focus-visible { outline: 3px solid var(--fx-ink); outline-offset: 3px; }
html.fx .lamp-pop-btn[hidden] { display: none !important; }
html.fx .lamp-pop-bulb { font-size: 17px; line-height: 1; }
html.fx body :is(#lamps) .section-head .sec-right { display: flex; align-items: center; gap: 12px; }

html.lamp-pop-open, html.lamp-pop-open body { overflow: hidden; }
html.fx dialog.lamp-pop { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
  width: min(1040px, calc(100vw - 48px)); height: min(640px, calc(100vh - 80px)); max-width: none; max-height: none; }
html.fx dialog.lamp-pop[open] { display: block; animation: lampPopIn .32s cubic-bezier(.2, .8, .2, 1); }
html.fx dialog.lamp-pop::backdrop { background: rgba(20, 18, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes lampPopIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
html.fx .lamp-pop-x { position: absolute; z-index: 6; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--fx-ink); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .2s; }
html.fx .lamp-pop-x:hover { transform: rotate(90deg); }
html.fx .lamp-pop-x svg { width: 18px; height: 18px; }
html.fx dialog.lamp-pop .lamptry { height: 100%; padding: 0 !important; margin: 0; }
html.fx dialog.lamp-pop .lamptry > .wrap { height: 100%; padding: 0 !important; max-width: none; }
html.fx dialog.lamp-pop .lamptry .lt-wrap { height: 100%; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important; border-radius: 32px !important; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .35) !important; }
html.fx dialog.lamp-pop .lamptry .lt-copy { padding: 34px 30px !important; overflow-y: auto; }
html.fx dialog.lamp-pop .lamptry .lt-copy h2 { font-size: clamp(28px, 2.6vw, 38px) !important; }
html.fx dialog.lamp-pop .lamptry .lt-stage { height: 100% !important; min-height: 0 !important; }
@media (prefers-reduced-motion: reduce) { html.fx dialog.lamp-pop[open] { animation: none; } }

/* phones: a compact card filling 68% of the screen height, room above and below to tap away */
@media (max-width: 760px) {
  html.fx body #lamps .section-head .sec-right { gap: 8px; }
  html.fx #lamps .section-head .sec-count { display: none; }
  html.fx .lamp-pop-btn { height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
  html.fx dialog.lamp-pop { width: calc(100vw - 24px); height: 68vh; height: 68dvh; }
  html.fx .lamp-pop-x { top: 10px; right: 10px; width: 40px; height: 40px; }
  html.fx dialog.lamp-pop .lamptry .lt-wrap { display: flex !important; flex-direction: column !important; border-radius: 26px !important; }
  html.fx dialog.lamp-pop .lamptry .lt-stage { order: -1 !important; flex: 1 1 auto; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; max-height: none !important; }
  /* the copy under the photo: title, then the switch beside the on/off label and the shop button */
  html.fx dialog.lamp-pop .lamptry .lt-copy { flex: none; order: 0 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center !important; gap: 10px 14px !important; padding: 14px 16px 16px !important; overflow: visible; }
  html.fx dialog.lamp-pop .lamptry .lt-kicker, html.fx dialog.lamp-pop .lamptry .lt-text, html.fx dialog.lamp-pop .lamptry .lt-hint { display: none !important; }
  html.fx dialog.lamp-pop .lamptry .lt-copy h2 { grid-column: 1 / -1 !important; font-size: 21px !important; line-height: 1.05; }
  html.fx dialog.lamp-pop .lamptry .lt-pick { grid-column: 1 / -1 !important; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0; scrollbar-width: none; }
  html.fx dialog.lamp-pop .lamptry .lt-pick[hidden] { display: none !important; }
  html.fx dialog.lamp-pop .lamptry .lt-pick::-webkit-scrollbar { display: none; }
  html.fx dialog.lamp-pop .lamptry .lt-opt { flex: none; }
  html.fx dialog.lamp-pop .lamptry .lt-control { display: contents !important; }
  html.fx dialog.lamp-pop .lamptry .lt-board { grid-column: 1 !important; grid-row: span 2 !important; width: 64px !important; height: 88px !important; border-radius: 14px !important; }
  html.fx dialog.lamp-pop .lamptry .lt-board .lt-plate { width: 42px !important; height: 60px !important; padding: 4px !important; border-radius: 10px !important; }
  html.fx dialog.lamp-pop .lamptry .lt-board .lt-lbl { font-size: 8px !important; }
  html.fx dialog.lamp-pop .lamptry .lt-screw.t { top: 5px; } html.fx dialog.lamp-pop .lamptry .lt-screw.b { bottom: 5px; }
  html.fx dialog.lamp-pop .lamptry .lt-led { right: 7px; top: 7px; width: 6px; height: 6px; }
  html.fx dialog.lamp-pop .lamptry .lt-control-txt { grid-column: 2 !important; align-self: end !important; justify-self: stretch !important; width: 100% !important; }
  html.fx dialog.lamp-pop .lamptry .lt-state { align-self: flex-start !important; margin: 0 !important; }
  html.fx dialog.lamp-pop .lamptry [data-ref="ltShop"] { grid-column: 2 !important; align-self: start !important; justify-self: stretch !important; width: 100% !important; max-width: none !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 42px; }
  html.fx dialog.lamp-pop .lamptry [data-ref="ltShop"][hidden] { display: none !important; }
}

/* ---------- category boxes: a living shape behind each name (assets/fx-shapes.js morphs and turns it) ---------- */
/* the shadow follows the shape itself (drop-shadow, not a box) — two soft layers so it reads as a gentle lift, never a dark smudge */
html.fx .fx-tile { isolation: isolate; overflow: clip; overflow-clip-margin: 12px; background: transparent !important; box-shadow: none !important;
  filter: drop-shadow(0 2px 3px rgba(80, 60, 70, .07)) drop-shadow(0 12px 18px rgba(80, 60, 70, .10));
  transition: transform .35s var(--ease), filter .35s var(--ease); }
html.fx .fx-tile:hover { box-shadow: none !important; filter: drop-shadow(0 4px 6px rgba(80, 60, 70, .08)) drop-shadow(0 20px 26px rgba(80, 60, 70, .15)); }
/* the scrolling row clips anything outside it, which cut the shadow off in a hard box — give the shadow room
   inside the row (extra padding) and take that space back with negative margins so the layout doesn't move */
html.fx #collections:not(.vp-coll) { padding-top: 16px !important; padding-bottom: 52px !important; margin-bottom: -34px !important;
  padding-left: 28px !important; padding-right: 28px !important; margin-left: -28px !important; margin-right: -28px !important; scroll-padding: 0 28px; }
html.fx .fx-tile-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tb); border-radius: inherit;
  clip-path: var(--shape, inset(0 round var(--fx-tile-r))); transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); will-change: clip-path, transform; }
html.fx .fx-tile.fx-live .fx-tile-bg { border-radius: 0; transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), transform 1s cubic-bezier(.65, 0, .35, 1); }
html.fx .fx-tile:hover .fx-tile-bg { --sc: 1.07; }
html.fx .fx-tile-name, html.fx .fx-tile-meta { position: relative; }
/* the little arrow sits at the bottom middle, inside every shape */
html.fx .fx-tile-go { right: auto; left: 50%; bottom: 9px; width: 30px; height: 30px; margin-left: -15px; transform: translateY(6px); }
html.fx .fx-tile-go svg { width: 13px; height: 13px; }
html.fx .fx-tile:hover .fx-tile-go { transform: none; }
@media (prefers-reduced-motion: reduce) { html.fx .fx-tile.fx-live .fx-tile-bg { transition: none; } }

/* ---------- computers: hero — headline on the left, the category shapes on the right (one calm band) ---------- */
@media (min-width: 1200px) {
  html.fx .hero.wrap { display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(0, 1.75fr); align-items: center; column-gap: clamp(24px, 3vw, 56px); padding: 34px clamp(28px, 3.4vw, 64px) 34px; }
  html.fx .hero-card { grid-column: 1; }
  html.fx .hero-copy { align-items: flex-start !important; text-align: left; }
  html.fx .hero h1, html.fx .hero #heroTitle { font-size: clamp(36px, 3.1vw, 58px); line-height: .95; letter-spacing: -0.05em; text-align: left; }
  html.fx .hero #heroTitle b { display: block; }
  html.fx .fx-cats { grid-column: 2; margin-top: 0; padding: 0 64px; }
  html.fx .fx-cats:not(.scrollable) { padding: 0; }
  html.fx #collections { justify-content: safe flex-end; padding: 14px 4px 18px !important; gap: clamp(12px, 1.2vw, 24px); }
  html.fx .fx-tile { width: clamp(112px, 9vw, 168px); padding: 14px; }
  html.fx .fx-tile-name { font-size: clamp(17px, 1.3vw, 22px); }
  html.fx .fx-tile-meta { font-size: 12px; }
}
/* in-between widths: stacked and centred, with room to breathe */
@media (min-width: 761px) and (max-width: 1199px) {
  html.fx .hero.wrap { padding: 28px 22px 16px; }
  html.fx .fx-cats { margin-top: 18px; }
}

/* ---------- computers: "Find your piece" is one compact toolbar — the category chips are the focus ---------- */
@media (min-width: 761px) {
  html.fx .products { padding: 26px 0 0 !important; }
  html.fx #products > .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; row-gap: 16px; }
  html.fx #products .section-head { grid-column: 1; margin: 0 !important; align-items: center !important; }
  html.fx #products .section-head > div { display: flex; align-items: center; gap: 12px; }
  html.fx #products .section-head .kicker { margin: 0; padding: 5px 12px; font-size: 13px; }
  html.fx #products .section-head h2 { font-size: clamp(26px, 2.1vw, 34px); letter-spacing: -0.04em; white-space: nowrap; }
  html.fx #products .section-head .live-dot { display: none !important; }
  html.fx #products .shop-tools { grid-column: 2; margin: 0 !important; }
  html.fx #products .search, html.fx #products .search input { min-height: 48px; font-size: 15.5px; }
  html.fx #products .sort .fx-sel { min-height: 48px; font-size: 15.5px; }
  html.fx #products .cat-chips { grid-column: 1 / -1; margin: 0 !important; gap: 10px; }
  html.fx #products .cat-chips .chip { min-height: 50px; padding: 0 22px; font-size: 16px; font-weight: 600; }
  html.fx #products .cat-chips.sub, html.fx #products .empty { grid-column: 1 / -1; }
  html.fx .lamps, html.fx .more, html.fx .wallart { padding-top: 40px !important; }
}

/* ---------- category shapes: the name always fits inside its shape (size follows the box, long names shrink) ---------- */
html.fx .fx-tile { container-type: inline-size; }
html.fx .fx-tile-name { font-size: clamp(14px, 15cqi, 24px) !important; max-width: 86%; overflow-wrap: anywhere; }
html.fx .fx-tile-name.long { font-size: clamp(13px, 12.5cqi, 21px) !important; }
html.fx .fx-tile-meta { font-size: clamp(10.5px, 8cqi, 12.5px) !important; }

/* ---------- "Find your piece": one slim bar — the products are the point, not the header ---------- */
@media (min-width: 761px) {
  html.fx .products { padding: 18px 0 0 !important; }
  html.fx #products > .wrap { column-gap: 18px; row-gap: 12px; }
  html.fx #products .section-head .kicker { display: none; }
  html.fx #products .section-head h2 { font-size: clamp(20px, 1.6vw, 26px); }
  html.fx #products .search, html.fx #products .search input { min-height: 42px; font-size: 15px; }
  html.fx #products .sort .fx-sel { min-height: 42px; font-size: 15px; padding: 0 14px 0 18px; }
  html.fx #products .cat-chips { gap: 8px; }
  html.fx #products .cat-chips .chip { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
  html.fx .lamps, html.fx .more, html.fx .wallart { padding-top: 28px !important; }
}
/* wide screens: title, category chips, search and sort all on one line */
@media (min-width: 1280px) {
  html.fx #products > .wrap { grid-template-columns: auto auto minmax(200px, 1fr); }
  html.fx #products .cat-chips:not(.sub) { grid-column: 2; grid-row: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.fx #products .cat-chips:not(.sub)::-webkit-scrollbar { display: none; }
  html.fx #products .shop-tools { grid-column: 3; grid-row: 1; }
  html.fx #products .cat-chips.sub, html.fx #products .empty { grid-column: 1 / -1; }
}

/* ---------- phones: shorter hero, smaller shapes; slimmer "Find your piece" ---------- */
@media (max-width: 760px) {
  html.fx .hero.wrap { padding: 22px 12px 16px !important; }
  html.fx .hero h1, html.fx .hero #heroTitle { font-size: clamp(30px, 9.4vw, 42px) !important; line-height: .95 !important; }
  html.fx .fx-cats { margin-top: 16px; }
  html.fx #collections { gap: 10px; padding: 6px 12px 12px !important; }
  html.fx .fx-tile { width: 112px; padding: 10px; }
  html.fx #products .section-head .kicker { display: none; }
  html.fx #products .section-head h2 { font-size: 26px !important; }
  html.fx .products { padding-top: 14px !important; }
}
@media (min-width: 1200px) { html.fx .fx-tile { width: clamp(124px, 9.8vw, 178px); } }

/* =====================================================================================================
   Product card 2.2 — one card everywhere (home rows, View all, category & type pages, "More in…", guides)
   · the neon band runs edge to edge and curves at both ends: top-right the photo's corner curves into it,
     bottom-left it curves into the glass panel; a soft shadow sits only at those two curves (3D feel)
   · the panel under it is frosted glass over the page, with one glow colour (Admin → Design → Product cards)
   ===================================================================================================== */
html.fx .fx-card { --fl: var(--fx-fl, 26px); --ss: var(--fx-fl-ss, 12px); --sh: var(--fx-fl-sh, rgba(15, 16, 18, .3)); --tag-h: 60px; --lime-c: var(--fx-lime); background: transparent; overflow: visible; }
html.fx .fx-card:hover { box-shadow: none; }
html.fx .fx-card .card-media { border-radius: var(--fx-card-r) var(--fx-card-r) 0 0 !important; position: relative; z-index: 0; }
html.fx a.card-media, html.fx a.fx-name { text-decoration: none !important; color: inherit; }

/* the neon band */
html.fx .fx-tag { margin: calc(var(--tag-h) / -2) 0 0 !important; min-height: var(--tag-h); border-radius: 0; padding-left: 22px; box-shadow: none; }
html.fx .fx-tag > * { position: relative; z-index: 1; }
/* each curve = a lime corner outside a quarter circle (so the photo / glass corner looks rounded) plus a shadow ring
   just outside that circle; clip-path keeps the shadow off the photo and off the glass — it only falls on the neon */
html.fx .fx-tag::before, html.fx .fx-tag::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: calc(2 * var(--fl) + var(--ss)); height: calc(var(--fl) + var(--ss)); }
/* top-right: the photo curves into the band; the shadow lies on the band just under that curve */
html.fx .fx-tag::before { --cx: calc(var(--fl) + var(--ss)); right: 0; top: calc(var(--fl) * -1);
  background: radial-gradient(circle at var(--cx) 0, transparent calc(var(--fl) - 1px), var(--sh) var(--fl), transparent calc(var(--fl) + var(--ss))),
              linear-gradient(var(--lime-c), var(--lime-c)) right top / var(--fl) var(--fl) no-repeat;
  -webkit-mask: radial-gradient(circle at var(--cx) 0, transparent calc(var(--fl) - .5px), #000 var(--fl));
  mask: radial-gradient(circle at var(--cx) 0, transparent calc(var(--fl) - .5px), #000 var(--fl));
  clip-path: polygon(var(--cx) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fl), var(--cx) var(--fl)); }
/* bottom-left: the band curves into the glass; the shadow lies on the band just above that curve */
html.fx .fx-tag::after { --cy: calc(var(--fl) + var(--ss)); left: 0; bottom: calc(var(--fl) * -1);
  background: radial-gradient(circle at var(--fl) var(--cy), transparent calc(var(--fl) - 1px), var(--sh) var(--fl), transparent calc(var(--fl) + var(--ss))),
              linear-gradient(var(--lime-c), var(--lime-c)) left bottom / var(--fl) var(--fl) no-repeat;
  -webkit-mask: radial-gradient(circle at var(--fl) var(--cy), transparent calc(var(--fl) - .5px), #000 var(--fl));
  mask: radial-gradient(circle at var(--fl) var(--cy), transparent calc(var(--fl) - .5px), #000 var(--fl));
  clip-path: polygon(0 0, 100% 0, 100% var(--ss), var(--fl) var(--ss), var(--fl) 100%, 0 100%); }
/* the glass panel — real frosted glass over the page itself (backdrop-filter), the same on every card:
   it never takes colour from the product photo, only from whatever the website shows behind it */
html.fx .fx-card { display: flex; flex-direction: column; }
html.fx .fx-card > .fx-body { flex: 1 1 auto; }
html.fx .fx-body { isolation: isolate; overflow: hidden; border-radius: 0 0 var(--fx-card-r) var(--fx-card-r);
  background: radial-gradient(120% 110% at 50% 108%, var(--fx-glass-tint, transparent) 0%, transparent 76%),
              radial-gradient(80% 95% at 106% -5%, var(--fx-glass-tint-2, transparent) 0%, transparent 72%),
              linear-gradient(var(--fx-glass-tint-3, transparent), var(--fx-glass-tint-3, transparent)),
              linear-gradient(180deg, rgba(255, 255, 255, .62) 0, rgba(255, 255, 255, .42) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 1px 0 0 rgba(255, 255, 255, .55), inset -1px 0 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .04), 0 18px 40px -20px rgba(20, 16, 40, .25); }
html.fx .fx-body::before { content: none; }
/* light: a soft highlight that follows the pointer (assets/fx.js) */
html.fx .fx-body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(80% 60% at var(--mx, 20%) var(--my, -20%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 65%); }
html.fx .fx-body > :not(.fx-sw) { position: relative; }
/* same layout on every card: two-line name, price above the old price, button on the right */
html.fx .fx-name { min-height: calc(2 * 1.25em + 2px); }
html.fx .fx-row { min-height: 52px; }
html.fx .fx-price { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
html.fx .fx-price .price-now { line-height: 1.15; }
html.fx .fx-price .price-was { line-height: 1.3; }
html.fx .fx-sw { background: rgba(255, 255, 255, .8); }
/* lift the whole card (not the box) on hover so the band and glass move together */
html.fx .fx-card:hover { transform: translateY(-4px); }
html.fx .fx-card:hover .fx-body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 1px 0 0 rgba(255, 255, 255, .6), inset -1px 0 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(0, 0, 0, .04), 0 26px 50px -20px rgba(20, 16, 40, .32); }
html.fx .fx-card.in-bag { box-shadow: none; }
html.fx .fx-card.in-bag .fx-body { outline: 2.5px solid var(--fx-bag-line, transparent); outline-offset: -2.5px; }
/* no backdrop-filter, or the device asks for less transparency: a calm solid panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.fx .fx-body { background: var(--fx-soft); } }
@media (prefers-reduced-transparency: reduce) { html.fx .fx-body { background: var(--fx-soft); -webkit-backdrop-filter: none; backdrop-filter: none; } html.fx .fx-body::after { display: none; } }
@media (max-width: 760px) { html.fx .fx-card { --tag-h: 54px; --fl: calc(var(--fx-fl, 26px) * .8); } }

/* Card design settings (Admin → Products → Card design, Oct 2026). Each fallback is the look before,
   so pages without the new settings look exactly the same. */
html.fx .fx-card { --tag-h: var(--fx-band-h, 60px); --lime-c: var(--fx-band, var(--fx-lime)); }
html.fx .fx-card .fx-tag { background: var(--fx-band, var(--fx-lime)); color: var(--fx-on-band, var(--fx-on-lime)); }
html.fx .fx-card .cmp { aspect-ratio: var(--fx-card-ratio, 1 / .92) !important; }
html.fx .fx-card:hover .cmp > img { transform: scale(calc(var(--z, 1) * var(--fx-card-zoom, 1.04))); }
html.fx .fx-card:hover { transform: translateY(var(--fx-card-lift, -4px)); }
html.fx .fx-body {
  background: radial-gradient(120% 110% at 50% 108%, var(--fx-glass-tint, transparent) 0%, transparent 76%),
              radial-gradient(80% 95% at 106% -5%, var(--fx-glass-tint-2, transparent) 0%, transparent 72%),
              linear-gradient(var(--fx-glass-tint-3, transparent), var(--fx-glass-tint-3, transparent)),
              linear-gradient(180deg, rgba(255, 255, 255, var(--fx-glass-w1, .62)) 0, rgba(255, 255, 255, var(--fx-glass-w2, .42)) 100%);
  -webkit-backdrop-filter: blur(var(--fx-glass-blur, 22px)) saturate(1.6); backdrop-filter: blur(var(--fx-glass-blur, 22px)) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 1px 0 0 rgba(255, 255, 255, .55), inset -1px 0 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .04), 0 18px 40px -20px rgba(20, 16, 40, var(--fx-card-sh, .25)); }
html.fx .fx-card:hover .fx-body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 1px 0 0 rgba(255, 255, 255, .6), inset -1px 0 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(0, 0, 0, .04), 0 26px 50px -20px rgba(20, 16, 40, var(--fx-card-sh2, .32)); }
html.fx .fx-card .fx-name b { font-size: var(--fx-name-size, 19px); }
html.fx .fx-card .card-flag { display: var(--fx-card-flag, inline-flex); }
html.fx .fx-card .fx-plus { display: var(--fx-card-plus, grid); }
html.fx .fx-card .fx-buy { background: var(--fx-buy-bg, var(--fx-btn)); color: var(--fx-buy-ink, var(--fx-on-btn)); box-shadow: var(--fx-buy-ring, none); }
html.fx .fx-card .fx-buy:hover { background: var(--fx-btn-hover); color: var(--fx-on-btn); }
@media (max-width: 760px) {
  html.fx .fx-card { --tag-h: calc(var(--fx-band-h, 60px) * .9); }
  html.fx .fx-card .fx-name b { font-size: calc(var(--fx-name-size, 19px) * .895); }
}

/* category & type pages: the same cards in a grid */
html.fx .seo-tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
@media (max-width: 760px) { html.fx .seo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) { html.fx .seo-tiles { grid-template-columns: minmax(0, 1fr); gap: 22px; } html.fx .seo-tiles > .fx-card { max-width: 440px; width: 100%; justify-self: center; } }

/* =====================================================================================================
   Guides on shop pages — homepage "Ideas & guides" block, "Helpful guides" on category pages,
   and the occasional small "guide" pill (assets/guides-nudge.js)
   ===================================================================================================== */
.guides-home { padding: 34px 0 56px; }
body.view-mode .guides-home { display: none; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gd-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--fx-card-r, 24px); background: var(--fx-soft, #F4F2F7); color: var(--fx-ink, #1E1F24); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.gd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(20, 16, 40, .35); }
.gd-img { display: block; aspect-ratio: 16 / 9; background: var(--fx-media, #ECE8F2); overflow: hidden; }
.gd-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gd-card:hover .gd-img img { transform: scale(1.04); }
.gd-noimg { display: grid; place-items: center; font-size: 40px; background: var(--fx-pastel, #F5F0FB); }
.gd-txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.gd-txt small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fx-muted, #696C74); }
.gd-txt b { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.gd-txt span { font-size: 14.5px; line-height: 1.45; color: var(--fx-muted, #696C74); }
.gd-txt em { font-style: normal; font-size: 14px; font-weight: 600; margin-top: 4px; }
.gd-soon { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--fx-card-r, 24px); background: var(--fx-pastel, #F5F0FB); color: var(--fx-ink, #1E1F24); text-decoration: none; }
.gd-soon > span:first-child { font-size: 34px; flex: none; }
.gd-soon > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; flex: 1; }
.gd-soon b { font-size: 18px; }
.gd-soon em { font-style: normal; font-weight: 700; white-space: nowrap; padding: 12px 18px; border-radius: var(--fx-btn-r, 14px); background: var(--fx-btn, #1E1F24); color: var(--fx-on-btn, #fff); }
@media (max-width: 640px) { .gd-soon { flex-direction: column; align-items: flex-start; } }
.gd-strip { margin: 40px 0 8px; }
.gd-strip h2 { font-size: clamp(22px, 2vw, 28px); margin: 0 0 16px; }
html.fx .gd-strip .section-head { margin: 0 0 18px; align-items: flex-end; }
html.fx .gd-strip .section-head h2 { font-size: clamp(26px, 2.6vw, 38px); margin: 6px 0 0; line-height: 1; }
html.fx .vp-guides { margin-top: 48px; }
@media (max-width: 760px) { html.fx .gd-strip .section-head { flex-wrap: wrap; gap: 10px; } html.fx .gd-strip .section-head h2 { font-size: 26px; } }

/* the small guide pill — shown rarely (see assets/guides-nudge.js) */
.gd-pill { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 104px));
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--fx-ink, #1E1F24); color: #fff; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
  transform: translateY(140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.gd-pill.on { transform: none; opacity: 1; }
.gd-pill a { color: inherit; text-decoration: none; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-pill a b { color: var(--fx-lime, #D4FF3F); font-weight: 700; }
.gd-pill button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .gd-pill { transition: none; } }

/* ---------- page sections: hidden sections and dividers (Admin → Website look → Page sections) ---------- */
.dv-off { display: none !important; }
.view-mode .dv-div { display: none !important; }
html.fx .dv-div { margin: 34px 0 0; }
html.fx .dv-div .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; }
/* moving words bar: the same look as the main ticker, and it shows on phones too */
html.fx .ticker.dv-div { display: block; }
@media (max-width: 760px) { html.fx .ticker.dv-div { display: block !important; margin-top: 22px; } html.fx .ticker.dv-div .ticker-track { font-size: 14px; padding: 13px 0; } }
html.fx .dv-glow .wrap i { display: block; width: 100%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--fx-lav), var(--fx-lime) 50%, var(--fx-hot)); box-shadow: 0 8px 22px -10px var(--fx-hot), inset 0 1px 0 rgba(255,255,255,.5); }
html.fx .dv-line .wrap::before, html.fx .dv-line .wrap::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-line) 20%, rgba(30,31,36,.18) 50%, var(--fx-line) 80%, transparent); }
html.fx .dv-line .wrap span { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-muted); }
html.fx .dv-stars .wrap i { font-style: normal; font-size: 18px; color: var(--fx-hot); }
html.fx .dv-stars .wrap i:nth-child(2) { color: var(--fx-lime); font-size: 24px; text-shadow: 0 0 1px var(--fx-ink); }
html.fx .dv-stars .wrap i:nth-child(3) { color: var(--fx-lav); }
html.fx .dv-space { height: 30px; margin: 0; }
@media (max-width: 760px) { html.fx .dv-div:not(.ticker) { margin-top: 22px; } html.fx .dv-space { height: 18px; } }