/* ==========================================================================
   Kislights storefront.

   THE THINKING

   A lighting shop sells the light, not the fitting. Every competitor
   photographs a switched-off object on white and calls it a catalogue. So the
   site is built the other way round: warm dark ground, and the products are the
   things that glow on it. The page behaves like a showroom at dusk.

   The palette is the Kelvin scale — 2700K amber through 6500K blue — because
   that is the axis this trade actually sells on, and it is the same language
   the admin, the receipts and the documents already speak.

   SIGNATURE: the filament rule. A hairline that runs warm-to-cool beneath
   section headings and along card edges. One idea, used consistently, never
   decorated further.

   Type: Archivo for display, tight and industrial. IBM Plex Sans for reading.
   IBM Plex Mono for anything measured — wattage, lumens, prices, codes —
   because specifications should look like specifications.
   ========================================================================== */

:root {
  /* unlit ground */
  --night:      #14120F;
  --night-2:    #1C1814;
  --night-3:    #262019;
  --edge:       rgba(255,255,255,.09);

  /* 2700–3000K: warmth, action, price */
  --amber:      #F0A02C;
  --amber-deep: #C97D14;
  --glow:       #FFD9A0;

  /* 6500K: information, availability, cool accents */
  --daylight:   #6FA8CE;
  --daylight-2: #A8CBE0;

  --text:       #EDE8E0;
  --text-2:     #B5AC9E;
  --text-3:     #7E7466;

  --good:       #7FB876;
  --alert:      #E0806B;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;  --s8:4.5rem; --s9:7rem;

  --wrap: 1240px;
  --r:    4px;
}

* { box-sizing: border-box; }

/* An element carrying [hidden] is hidden, whatever a class says about
   display. The browser's own rule loses to any author class, which is how
   a modal ends up permanently on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: 1.1rem; letter-spacing: -.01em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the signature ---------- */
.filament-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber) 22%, var(--daylight) 72%, transparent);
  opacity: .55;
}

.eyebrow {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(20,18,15,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.hdr__in { display: flex; align-items: center; gap: var(--s5); padding: var(--s4) 0; }
.hdr__mark { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; text-decoration: none; }
.hdr__mark em { font-style: normal; color: var(--amber); }
.hdr__logo { max-height: 34px; }

.hdr__nav { display: flex; gap: var(--s5); margin-left: auto; font-size: .9rem; }
.hdr__nav a { color: var(--text-2); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--text); border-bottom-color: var(--amber); }

.hdr__call {
  font-family: var(--mono); font-size: .85rem; text-decoration: none;
  color: var(--night); background: var(--amber);
  padding: .45rem .9rem; border-radius: 100px; font-weight: 600;
}
.hdr__call:hover { background: var(--glow); }

.hdr__burger { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: var(--s9) 0 var(--s8); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(240,160,44,.16), transparent 72%);
  pointer-events: none;
}
.hero__in { position: relative; max-width: 46rem; }
.hero h1 { margin: var(--s4) 0 var(--s5); }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p { font-size: 1.1rem; color: var(--text-2); max-width: 40rem; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .8rem 1.5rem; border-radius: 100px;
  font: 600 .92rem var(--body); text-decoration: none;
  border: 1px solid var(--edge); background: transparent; color: var(--text);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--text-3); }
.btn--go {
  background: var(--amber); border-color: var(--amber); color: #1A1206;
  box-shadow: 0 0 30px -6px rgba(240,160,44,.5);
}
.btn--go:hover { background: var(--glow); border-color: var(--glow); }

/* ---------- sections ---------- */
.sec { padding: var(--s8) 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.sec__head p { color: var(--text-2); margin: var(--s2) 0 0; max-width: 44rem; }
.sec__more { font-size: .88rem; color: var(--daylight); text-decoration: none; white-space: nowrap; }
.sec__more:hover { color: var(--daylight-2); }

/* ---------- product grid ---------- */
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  position: relative;
  background: var(--night-2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: border-color .18s, transform .18s;
}
/* The product lights up on approach. One micro-interaction, and it is the
   thing the shop actually sells. */
.card:hover { border-color: rgba(240,160,44,.45); transform: translateY(-2px); }
.card:hover .card__img::after { opacity: 1; }

.card__img { position: relative; aspect-ratio: 1; background: var(--night-3); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,217,160,.16), transparent 70%);
}
.card__none {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-3); font-size: .78rem;
}

.card__body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card__name { font-size: .92rem; font-weight: 500; line-height: 1.35; }
.card__spec { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }
.card__price { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--glow); margin-top: auto; }
.card__stock { font-size: .72rem; color: var(--good); }
.card__stock--out { color: var(--text-3); }

/* ---------- category strip ---------- */
.cats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cat {
  position: relative; padding: var(--s5) var(--s4);
  background: var(--night-2); border: 1px solid var(--edge); border-radius: var(--r);
  text-decoration: none; color: inherit; overflow: hidden;
}
.cat::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent 65%); opacity: .5;
}
.cat:hover { border-color: rgba(240,160,44,.4); }
.cat__n { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.cat__c { font-family: var(--mono); font-size: .72rem; color: var(--text-3); margin-top: var(--s1); }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--edge); padding: var(--s7) 0 var(--s5); margin-top: var(--s8); }
.ftr__cols { display: grid; gap: var(--s6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.ftr h4 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.ftr a { color: var(--text-2); text-decoration: none; font-size: .88rem; }
.ftr a:hover { color: var(--amber); }
.ftr__note { color: var(--text-3); font-size: .82rem; line-height: 1.6; }
.ftr__base {
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--edge);
  font-size: .78rem; color: var(--text-3);
}
.ftr__base a { font-size: inherit; }

@media (max-width: 900px) {
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .hdr__nav { display: none; }
  .hdr__burger { display: block; margin-left: auto; }
}
@media (max-width: 560px) {
  .ftr__cols { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
  .hero { padding: var(--s7) 0 var(--s6); }
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Product page.
   ========================================================================== */

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: .8rem; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }

.pdp { display: grid; gap: var(--s7); grid-template-columns: 1.15fr 1fr; padding: var(--s5) 0 var(--s7); align-items: start; }

.pdp__shots { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.pdp__shot {
  margin: 0; border-radius: var(--r); overflow: hidden;
  background: var(--night-2); border: 1px solid var(--edge);
}
.pdp__shot--lead { grid-column: 1 / -1; }
.pdp__none { aspect-ratio: 4/3; display: grid; place-items: center; color: var(--text-3); font-size: .85rem; }

.pdp__info h1 { margin: var(--s3) 0 var(--s4); }

.pdp__price { font-size: 1.9rem; font-weight: 600; color: var(--glow); }
.pdp__price s { font-size: 1.1rem; color: var(--text-3); margin-left: var(--s3); }
.pdp__vat { font-size: .78rem; color: var(--text-3); margin: var(--s1) 0 var(--s5); }

.pdp__lead { color: var(--text-2); font-size: 1.02rem; }

.pdp__stock { margin: var(--s5) 0; padding: var(--s4); background: var(--night-2); border: 1px solid var(--edge); border-radius: var(--r); }
.pdp__stock h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--good); margin-bottom: var(--s3); }
.pdp__stock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pdp__stock li { display: flex; justify-content: space-between; gap: var(--s3); font-size: .9rem; }
.pdp__stock a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--edge); }
.pdp__stock a:hover { border-bottom-color: var(--amber); }
.pdp__stock span { color: var(--good); font-size: .82rem; }
.pdp__stock--none p { margin: 0; color: var(--text-2); font-size: .9rem; }

.pdp__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }

.specs { margin-top: var(--s6); }
.specs h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.specs dl { margin: 0; display: grid; gap: 0; }
.specs dl > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  padding: .6rem 0; border-bottom: 1px solid var(--edge);
}
.specs dl > div:last-child { border-bottom: 0; }
.specs dt { color: var(--text-2); font-size: .88rem; }
.specs dd { margin: 0; font-size: .88rem; color: var(--text); }

.pdp__prose { max-width: 44rem; padding-top: var(--s6); }
.pdp__prose h2 { margin-bottom: var(--s4); }
.pdp__prose div { color: var(--text-2); line-height: 1.75; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ---------- category ---------- */
.cat-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); padding-bottom: var(--s8); align-items: start; }

.filters { position: sticky; top: 90px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
.filters legend {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s2); padding: 0;
}
.filters label { display: flex; align-items: center; gap: var(--s2); font-size: .87rem; color: var(--text-2); padding: .2rem 0; cursor: pointer; }
.filters label:hover { color: var(--text); }
.filters input[type="checkbox"] { accent-color: var(--amber); width: 1rem; height: 1rem; }
.filters__clear { display: block; text-align: center; margin-top: var(--s3); font-size: .82rem; color: var(--text-3); }

.cat-count { font-size: .8rem; color: var(--text-3); margin: 0 0 var(--s4); }

.empty-shop { padding: var(--s8) var(--s5); text-align: center; border: 1px dashed var(--edge); border-radius: var(--r); }
.empty-shop h3 { margin-bottom: var(--s3); }
.empty-shop p { color: var(--text-2); max-width: 34rem; margin: 0 auto var(--s5); }

.pager-shop { margin-top: var(--s6); }
.pager-shop .pager__link { border-color: var(--edge); background: var(--night-2); color: var(--text-2); }
.pager-shop .pager__link--on { background: var(--amber); border-color: var(--amber); color: var(--night); }
.pager-shop .pager__count { color: var(--text-3); }

.guide { max-width: 44rem; padding-top: var(--s6); }
.guide h2 { margin: var(--s2) 0 var(--s4); }
.guide__body { color: var(--text-2); line-height: 1.8; }

@media (max-width: 860px) {
  .cat-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}

/* ---------- branches ---------- */
.branches-strip { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bstrip {
  padding: var(--s4); border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--night-2); text-decoration: none; color: inherit;
}
.bstrip:hover { border-color: rgba(240,160,44,.4); }
.bstrip__n { font-family: var(--display); font-weight: 700; }
.bstrip__a { font-size: .85rem; color: var(--text-2); margin-top: var(--s1); }
.bstrip__p { font-size: .82rem; color: var(--amber); margin-top: var(--s2); }

.branch { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6); margin-top: var(--s5); align-items: start; }
.branch__photo { border-radius: var(--r); border: 1px solid var(--edge); }
.branch__about { color: var(--text-2); margin-top: var(--s5); line-height: 1.75; }
.branch__find { margin-top: var(--s5); }
.branch__find h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s2); }
.branch__find p { color: var(--text-2); margin: 0; }

.branch__card { padding: var(--s5); background: var(--night-2); border: 1px solid var(--edge); border-radius: var(--r); position: sticky; top: 90px; }
.branch__card h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.branch__card address { font-style: normal; color: var(--text-2); line-height: 1.7; }

.hours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hours-list li { display: flex; justify-content: space-between; gap: var(--s3); font-size: .85rem; color: var(--text-2); padding: .25rem 0; border-bottom: 1px solid var(--edge); }
.hours-list li:last-child { border-bottom: 0; }

.branch__maps { display: block; margin-top: var(--s4); font-size: .85rem; color: var(--daylight); text-decoration: none; }
.branch__maps:hover { color: var(--daylight-2); }

@media (max-width: 860px) {
  .branch { grid-template-columns: 1fr; }
  .branch__card { position: static; }
}

/* ---------- capture ---------- */
.capture { background: var(--night-2); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; margin-top: var(--s5); }

.capture__tabs { display: flex; border-bottom: 1px solid var(--edge); }
.capture__tab {
  flex: 1; padding: .7rem .5rem; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: 500 .8rem var(--body); color: var(--text-3);
}
.capture__tab:hover { color: var(--text-2); }
.capture__tab--on { color: var(--glow); border-bottom-color: var(--amber); }

.capture__panel { display: none; padding: var(--s4); }
.capture__panel--on { display: block; }

.capture__lead { font-size: .85rem; color: var(--text-2); margin: 0 0 var(--s3); line-height: 1.55; }
.capture__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s2); }

.capture input, .capture textarea {
  width: 100%; padding: .6rem .7rem;
  background: var(--night); color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--r);
  font: 400 .88rem var(--body);
}
.capture input:focus, .capture textarea:focus { outline: none; border-color: var(--amber); }
.capture textarea { margin-bottom: var(--s3); resize: vertical; }

.capture__small { font-size: .72rem; color: var(--text-3); margin: var(--s2) 0 0; text-align: center; }

.capture--done { padding: var(--s5); text-align: center; border-color: rgba(240,160,44,.4); }
.capture--done strong { color: var(--glow); font-family: var(--display); font-size: 1.1rem; }
.capture--done p { color: var(--text-2); margin: var(--s2) 0 0; font-size: .9rem; }

.capture__wa {
  display: block; text-align: center; margin-top: var(--s3);
  font-size: .85rem; color: var(--daylight); text-decoration: none;
}
.capture__wa:hover { color: var(--daylight-2); }

@media (max-width: 480px) { .capture__row { grid-template-columns: 1fr; } }


/* ---------- builder credit ----------
   Quiet by construction. A signature that shouts stops being a signature and
   starts being an advertisement in someone else's shop. */
.ftr .credit { font-size: .78rem; color: var(--text-3); gap: .4rem; }
.ftr .credit img { max-height: 16px; width: auto; opacity: .75; }
.ftr .credit a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.ftr .credit a:hover { color: var(--amber); border-bottom-color: rgba(240,160,44,.35); }

/* ---------- header logo ----------
   Most logo files carry a white background. On a dark header that reads as a
   white box, so it is blended out until a transparent version is uploaded. */
.hdr__logo { max-height: 34px; width: auto; mix-blend-mode: screen; }

/* ---------- empty sections ----------
   With no products the sections collapsed into large voids. Sections that have
   nothing to show are not rendered at all now; this keeps the rest tight. */
.sec:empty { display: none; }
.sec > .sec__head:only-child { margin-bottom: 0; }

.home__soon { max-width: 44rem; padding-top: var(--s5); }
.home__soon h2 { margin: var(--s2) 0 var(--s4); }
.home__soon p { color: var(--text-2); font-size: 1.02rem; }

/* ==========================================================================
   Basket, checkout, order confirmation

   One page, not four. Every step in a checkout loses people, and on a phone on
   a Ugandan connection it loses a lot of them. There is no account to create
   and nothing to remember: a name and a phone number is what this trade runs on.
   ========================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hdr__basket {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .85rem; text-decoration: none; white-space: nowrap;
}
.hdr__basket:hover { border-color: var(--filament, #F0A02C); }
.hdr__n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px;
  background: var(--filament, #F0A02C); color: #1A1206;
  font: 700 .7rem/1 var(--mono, monospace);
}

.wrap--narrow { max-width: 760px; }

.cart__h1 { margin: var(--s5, 2rem) 0 var(--s4, 1.5rem); }
.cart__empty { text-align: center; padding: var(--s7, 4rem) 0; }
.cart__empty p { opacity: .7; margin-bottom: var(--s4, 1.5rem); }

.cart__list { margin-bottom: var(--s6, 3rem); }
.cart__row {
  display: grid;
  grid-template-columns: 72px 1fr 92px auto;
  gap: var(--s3, 1rem); align-items: center;
  padding: var(--s3, 1rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.cart__img { display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); }
.cart__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart__name a { text-decoration: none; font-weight: 500; display: block; }
.cart__name .mono { display: block; font-size: .72rem; opacity: .5; margin-top: 2px; }
.cart__qty input { width: 76px; text-align: center; }
.cart__money { text-align: right; white-space: nowrap; }
.cart__each { display: block; font-size: .7rem; opacity: .55; }

.cart__listfoot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3, 1rem); padding-top: var(--s3, 1rem); flex-wrap: wrap;
}
.cart__sub { font-size: 1.05rem; font-weight: 600; }

.cart__warn {
  padding: var(--s3, 1rem); border-radius: 10px;
  background: rgba(240,160,44,.12); border: 1px solid rgba(240,160,44,.4);
  font-size: .9rem;
}

.cart__form h2 { margin: var(--s5, 2rem) 0 var(--s3, 1rem); font-size: 1.15rem; }
.cart__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3, 1rem); }

.f { margin-bottom: var(--s3, 1rem); }
.f label { display: block; font-size: .82rem; margin-bottom: .35rem; opacity: .85; }
.f__opt { opacity: .5; font-weight: 400; }
.f__hint { font-size: .74rem; opacity: .55; margin: .3rem 0 0; }
.f input, .f select, .f textarea {
  width: 100%; padding: .7rem .8rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: inherit;
  font: inherit; font-size: .95rem;
}
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 2px solid var(--filament, #F0A02C); outline-offset: 1px; border-color: transparent;
}

.cart__choose { border: 0; padding: 0; margin: 0 0 var(--s4, 1.5rem); }
.cart__choose legend { font-size: .82rem; opacity: .85; margin-bottom: .5rem; padding: 0; }

/* A tappable row, not a radio dot you have to hit exactly. Most of these
   orders are placed one-handed on a phone. */
.opt {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: var(--s3, 1rem); margin-bottom: .6rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  cursor: pointer;
}
.opt:has(input:checked) { border-color: var(--filament, #F0A02C); background: rgba(240,160,44,.08); }
.opt input { margin-top: 3px; flex: none; }
.opt strong { display: block; font-size: .95rem; }
.opt__note { display: block; font-size: .78rem; opacity: .6; margin-top: 2px; }

.cart__panel { margin-bottom: var(--s4, 1.5rem); }

.cart__codes {
  padding: var(--s3, 1rem); border-radius: 10px;
  background: rgba(255,255,255,.05); font-size: .85rem; line-height: 1.7;
  margin-bottom: var(--s4, 1.5rem);
}

.cart__place {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4, 1.5rem); flex-wrap: wrap;
  padding-top: var(--s4, 1.5rem); border-top: 1px solid rgba(255,255,255,.12);
}
.cart__total span { display: block; font-size: .78rem; opacity: .6; }
.cart__total strong { font-size: 1.5rem; }
.cart__note { margin-top: .3rem; }
.btn--big { padding: .95rem 1.8rem; font-size: 1rem; }
.cart__small { font-size: .76rem; opacity: .5; margin-top: var(--s3, 1rem); }

.pdp__buy { display: flex; gap: .6rem; align-items: stretch; margin: var(--s4, 1.5rem) 0 var(--s3, 1rem); }
.pdp__qty {
  width: 76px; text-align: center; padding: .7rem;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: inherit; font: inherit;
}

/* ---------- confirmation ---------- */

.ord__head { padding: var(--s5, 2rem) 0 var(--s4, 1.5rem); }
.ord__head h1 { margin: .3rem 0 .6rem; }
.ord__head--paid h1 { color: var(--filament, #F0A02C); }

.ord__items { width: 100%; border-collapse: collapse; margin: var(--s4, 1.5rem) 0; font-size: .92rem; }
.ord__items td { padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ord__r { text-align: right; white-space: nowrap; }
.ord__sku { display: block; font-size: .7rem; opacity: .45; }
.ord__grand td { border-top: 2px solid rgba(255,255,255,.25); border-bottom: 0; font-size: 1.1rem; font-weight: 700; padding-top: .8rem; }
.ord__vat td { border: 0; font-size: .74rem; opacity: .5; padding-top: .3rem; }

.ord__where { margin: var(--s5, 2rem) 0; }
.ord__where h2 { font-size: 1rem; margin-bottom: .4rem; }
.ord__where p { margin: 0; line-height: 1.7; }

.ord__help {
  padding: var(--s4, 1.5rem); border-radius: 12px;
  background: rgba(255,255,255,.05);
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
}
.ord__help p { margin: 0 auto 0 0; font-size: .9rem; }

@media (max-width: 620px) {
  .cart__row { grid-template-columns: 56px 1fr auto; }
  .cart__img { width: 56px; height: 56px; }
  .cart__qty { grid-column: 2; }
  .cart__money { grid-column: 3; }
  .cart__two { grid-template-columns: 1fr; }
  .cart__place { flex-direction: column; align-items: stretch; }
  .cart__place .btn { justify-content: center; }
}

/* ============================================================
   MAPS AND BRANCH PAGES
   ------------------------------------------------------------
   A shop's location is the one piece of information a local
   customer always needs and a search engine always rewards.
   ============================================================ */

.lede { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; max-width: 62ch; margin-top: var(--s3); }

/* --- the map frame --- */
.bmap {
  position: relative; overflow: hidden;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--night-2); line-height: 0;
}
.bmap iframe { display: block; width: 100%; height: var(--bmap-h, 320px); filter: saturate(.85) contrast(1.05); }

/* --- open / closing / closed --- */
.bstatus {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; margin: var(--s3) 0 0;
}
.bstatus__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.bstatus--open    { color: #5FBF7F; }
.bstatus--closing { color: var(--amber); }
.bstatus--closed  { color: var(--text-3); }

/* --- call / whatsapp / directions --- */
.bacts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.bacts .btn { flex: 1 1 auto; justify-content: center; min-width: 140px; }
.bacts--compact .btn { font-size: .82rem; padding: .5rem .75rem; min-width: 0; }
.btn--wa  { background: #1FA855; border-color: #1FA855; color: #fff; }
.btn--wa:hover  { background: #178c46; border-color: #178c46; }
.btn--dir { background: var(--daylight); border-color: var(--daylight); color: #0b0e11; font-weight: 600; }
.btn--dir:hover { background: var(--daylight-2); border-color: var(--daylight-2); }

/* --- the branches index --- */
.branch-cards {
  display: grid; gap: var(--s5); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.bcard {
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--night-2); overflow: hidden;
  display: flex; flex-direction: column;
}
.bcard .bmap { border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; }
.bcard__body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.bcard__n { font-size: 1.15rem; margin: 0; }
.bcard__n a { color: var(--text-1); text-decoration: none; }
.bcard__n a:hover { color: var(--amber); }
.bcard__a { font-style: normal; color: var(--text-2); font-size: .9rem; line-height: 1.6; margin-top: var(--s2); }
.bcard .bacts { margin-top: auto; padding-top: var(--s4); }

/* --- today's row, in the seven-row list --- */
.hours-list__today { color: var(--text-1); font-weight: 600; }
.hours-list__today span:first-child::after { content: " · today"; color: var(--amber); font-weight: 400; font-size: .8em; }

.bstrip__s { font-size: .78rem; font-weight: 600; margin-top: var(--s2); }
.bstrip__s--open    { color: #5FBF7F; }
.bstrip__s--closing { color: var(--amber); }
.bstrip__s--closed  { color: var(--text-3); }

.branch__mgr { font-size: .82rem; color: var(--text-3); margin-top: var(--s4); }

@media (max-width: 640px) {
  .bmap iframe { height: calc(var(--bmap-h, 320px) * .75); }
  .bacts .btn { flex: 1 1 100%; }
}

/* ============================================================
   WRITTEN PAGES
   ------------------------------------------------------------
   The old site's Search Console data is in the dump: 107 rows,
   almost all with zero clicks. That is not a ranking problem,
   it is that there was nothing to rank. A shop page says what
   a thing costs; a guide says which thing to buy, and that is
   the search somebody makes first.
   ============================================================ */

.page { max-width: 74ch; }
.page__meta { color: var(--text-3); font-size: .85rem; margin-top: var(--s2); }

.prose { margin-top: var(--s6); color: var(--text-2); font-size: 1.02rem; line-height: 1.8; }
.prose h2 { font-family: var(--display); color: var(--text-1); font-size: 1.45rem;
            margin: var(--s7) 0 var(--s3); line-height: 1.25; }
.prose h3 { font-family: var(--display); color: var(--text-1); font-size: 1.15rem;
            margin: var(--s6) 0 var(--s2); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s2); }
.prose strong { color: var(--text-1); }
.prose a { color: var(--daylight); }
.prose a:hover { color: var(--daylight-2); }
.prose blockquote {
  margin: var(--s5) 0; padding: var(--s3) var(--s5);
  border-left: 2px solid var(--amber); color: var(--text-2);
}

.page__cta {
  margin-top: var(--s7); padding: var(--s6);
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--night-2);
}
.page__cta h2 { font-family: var(--display); margin: 0 0 var(--s2); font-size: 1.2rem; }
.page__cta p { color: var(--text-2); margin: 0 0 var(--s4); }
.page__ctabtns { display: flex; flex-wrap: wrap; gap: var(--s2); }

.guide-cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gcard {
  display: block; padding: var(--s5); text-decoration: none;
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--night-2);
  transition: border-color .15s;
}
.gcard:hover { border-color: rgba(240,160,44,.4); }
.gcard__t { font-family: var(--display); font-weight: 700; color: var(--text-1); line-height: 1.3; }
.gcard__d { font-size: .88rem; color: var(--text-2); margin-top: var(--s2); line-height: 1.6; }
.gcard__go { display: inline-block; margin-top: var(--s3); font-size: .85rem; color: var(--amber); }
.gcard--lg { padding: var(--s6); }

@media (max-width: 640px) {
  .prose { font-size: .98rem; }
  .page__ctabtns .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- the header picture on a guide, and the thumbnails --- */
.page__hero {
  display: block; width: 100%; height: auto;
  margin-top: var(--s6);
  border: 1px solid var(--edge); border-radius: var(--r);
  aspect-ratio: 16 / 7; object-fit: cover;
}
.gcard { overflow: hidden; padding: 0; }
.gcard__img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--edge);
}
.gcard > .gcard__t  { padding: var(--s5) var(--s5) 0; }
.gcard > .gcard__d  { padding: 0 var(--s5); }
.gcard > .gcard__go { padding: 0 var(--s5) var(--s5); }
.gcard--lg > .gcard__t { padding-top: var(--s6); }

@media (max-width: 640px) {
  .page__hero { aspect-ratio: 16 / 9; }
}

/* ============================================================
   A LIGHTING SHOP THAT SHOWS LIGHTING
   ------------------------------------------------------------
   The hero was text on purpose, and that reasoning was sound
   for a plumber. It is wrong for a business people buy from
   because of how the thing looks. There are 668 photographs
   in this system and the front page showed none of them.
   ============================================================ */

.hero--pic { padding: var(--s9) 0 var(--s8); }

.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  line-height: 0; pointer-events: none;
}
.hero__bg img, .hero__bg picture, .hero__bg picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The words have to stay readable over whatever photograph is behind them,
   and a photograph of a lit chandelier is bright in the middle. A flat tint
   is not enough — this is two gradients so the left side, where the text is,
   is darkest. */
.hero--pic::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--night) 8%, rgba(20,18,15,.82) 42%, rgba(20,18,15,.35) 78%),
    linear-gradient(to top, var(--night), transparent 55%);
}
.hero--pic .hero__in { z-index: 2; }
.hero--pic::before { opacity: .55; z-index: 2; }

/* --- category cards with a picture of what is inside --- */
.cats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.cat--pic { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cat__img { line-height: 0; background: var(--night-2); }
.cat--pic .cat__img img, .cat--pic .cat__img picture img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.cat--pic:hover .cat__img img { transform: scale(1.04); }
.cat--pic .cat__txt { padding: var(--s4); }
.cat--pic::before { display: none; }
.cat:not(.cat--pic) .cat__img { display: none; }

@media (max-width: 640px) {
  .hero--pic { padding: var(--s8) 0 var(--s7); }
  .hero--pic::after {
    background:
      linear-gradient(180deg, rgba(20,18,15,.55), rgba(20,18,15,.88) 45%),
      linear-gradient(to top, var(--night), transparent 60%);
  }
}

/* ============================================================
   SEARCH
   ------------------------------------------------------------
   679 products and no search box. Somebody holding a bulb with
   HW9011 printed on it had to guess which category it was
   filed under.
   ============================================================ */

.hdr__search { display: flex; align-items: center; margin-left: auto; margin-right: var(--s3); }
.hdr__search input {
  width: 190px; padding: .45rem .7rem; font-size: .85rem;
  color: var(--text-1); background: rgba(255,255,255,.06);
  border: 1px solid var(--edge); border-right: 0;
  border-radius: 999px 0 0 999px; outline: none;
}
.hdr__search input::placeholder { color: var(--text-3); }
.hdr__search input:focus { border-color: rgba(240,160,44,.5); background: rgba(255,255,255,.1); }
.hdr__search button {
  display: flex; align-items: center; justify-content: center;
  padding: .45rem .75rem; cursor: pointer; color: var(--night);
  background: var(--amber); border: 1px solid var(--amber);
  border-radius: 0 999px 999px 0;
}
.hdr__search button:hover { background: var(--amber-2, #ffb648); }

.bigsearch { display: flex; gap: var(--s2); margin-top: var(--s5); max-width: 44rem; }
.bigsearch input {
  flex: 1; padding: .8rem 1rem; font-size: 1rem;
  color: var(--text-1); background: var(--night-2);
  border: 1px solid var(--edge); border-radius: var(--r); outline: none;
}
.bigsearch input:focus { border-color: rgba(240,160,44,.5); }

.noresult {
  margin-top: var(--s6); padding: var(--s6);
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--night-2);
}
.noresult h2 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 var(--s2); }
.noresult h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
               color: var(--text-3); margin-bottom: var(--s3); }
.noresult p { color: var(--text-2); margin: 0 0 var(--s4); max-width: 52ch; }
.noresult .chip {
  display: inline-block; padding: .4rem .8rem; margin: 0 .35rem .5rem 0;
  font-size: .85rem; color: var(--text-1); text-decoration: none;
  border: 1px solid var(--edge); border-radius: 999px;
}
.noresult .chip:hover { border-color: rgba(240,160,44,.5); color: var(--amber); }

@media (max-width: 900px) {
  .hdr__search input { width: 120px; }
}
@media (max-width: 640px) {
  .hdr__search { order: 9; width: 100%; margin: var(--s3) 0 0; }
  .hdr__search input { width: 100%; }
  .bigsearch { flex-direction: column; }
}

/* ============================================================
   THE FRONT PAGE AS A SHOP WINDOW
   ------------------------------------------------------------
   One still photograph was never going to carry the front of a
   decorative lighting shop. A chandelier, a garden bollard and
   a panel ceiling are different businesses to the person
   looking — showing one tells two thirds of them they are in
   the wrong place.
   ============================================================ */

.hero--pic { min-height: 520px; display: flex; align-items: center; }

.hero__slide { opacity: 0; transition: opacity .9s ease; }
.hero__slide.is-on { opacity: 1; }

/* The name and price of whatever is behind. A hero that does not say what it
   is showing is decoration; this one is a window with a ticket in it. */
.hero__tags {
  position: absolute; z-index: 3; right: var(--s6); bottom: var(--s6);
  display: grid; max-width: min(42vw, 26rem);
}
.hero__tag {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  padding: var(--s3) var(--s4); text-decoration: none; text-align: right;
  background: rgba(20,18,15,.72); border: 1px solid var(--edge);
  border-radius: var(--r); backdrop-filter: blur(6px);
}
.hero__tag.is-on { opacity: 1; pointer-events: auto; }
.hero__tag:hover { border-color: rgba(240,160,44,.5); }
.hero__tagn { display: block; font-size: .9rem; color: var(--text-1); line-height: 1.3; }
.hero__tagp { display: block; font-family: var(--mono); font-size: .85rem; color: var(--amber); margin-top: 2px; }

.hero__dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--s5);
  display: flex; justify-content: center; gap: .5rem;
}
.hero__dot {
  width: 28px; height: 3px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.28); border: 0; border-radius: 2px;
  transition: background .3s ease;
}
.hero__dot:hover { background: rgba(255,255,255,.5); }
.hero__dot.is-on { background: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__tag { transition: none; }
}

@media (max-width: 900px) {
  .hero--pic { min-height: 440px; }
  .hero__tags { left: var(--s5); right: var(--s5); bottom: var(--s7); max-width: none; }
  .hero__tag { text-align: left; }
}

/* ============================================================
   THE CATEGORY PAGE WITH NO FILTERS
   ------------------------------------------------------------
   The sidebar is conditional; the two-column rule was not. With
   no filters the products fell into the 220px track meant for
   them and every card was squeezed to a third of its width.
   ============================================================ */

.cat-layout--full { grid-template-columns: 1fr; }

/* --- the shop's own banners --- */
.hero--own { min-height: 0; padding: 0; display: block; }
.hero--own .hero__bg { position: relative; inset: auto; }
.hero--own .hero__slide {
  position: absolute; inset: 0;
}
.hero--own .hero__slide:first-of-type { position: relative; }
.hero--own .hero__bg img { width: 100%; height: auto; display: block; object-fit: cover; }
.hero--own .hero__link { display: block; line-height: 0; }

/* The overlay is for words the SITE draws. A banner with its own words needs
   no veil over it — darkening somebody's artwork is not an improvement. */
.hero--own::after { display: none; }
.hero--own::before { display: none; }

.hero__in--own { position: relative; z-index: 2; }
.hero--own .hero__in--own {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; pointer-events: none;
}
.hero__copy { display: none; }
.hero__copy.is-on { display: block; pointer-events: auto; }
.hero__h {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  line-height: 1.08; margin: var(--s4) 0 var(--s5); color: var(--text-1);
}

.hero--own .hero__dots { bottom: var(--s4); }

/* ============================================================
   A HERO THAT WORKS WITH THE ARTWORK A SHOP ALREADY HAS
   ------------------------------------------------------------
   The first version asked the owner to go back to a designer
   and have the words taken out of their banner. That was not
   solving the problem. A shop has the banner it has: fill the
   band with it, darken it until words sit on it, and put real
   buttons on top.
   ============================================================ */

.hero--own {
  display: block; padding: 0; position: relative; overflow: hidden;
  /* A band, not a letterbox. Tall enough on a phone to be a picture
     rather than a stripe, wide enough on a desktop not to swallow
     the page. */
  min-height: clamp(380px, 46vw, 620px);
}

/* Every slide fills the band and is cropped to it, rather than being
   shown at whatever size it happens to be. This is what was wrong —
   an uploaded picture sat at its natural size in the middle of a
   black box. */
.hero--own .hero__bg,
.hero--own .hero__slide {
  position: absolute; inset: 0; z-index: 0;
}
.hero--own .hero__bg > img,
.hero--own .hero__bg picture,
.hero--own .hero__bg picture img,
.hero--own .hero__link,
.hero--own .hero__link img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}

/* The veil. Strength comes from the slide, through --veil, so each
   photograph gets what it actually needs. Two layers: a flat tint for
   legibility and a foot so the bottom buttons have something to sit on. */
.hero--own .hero__slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,9,8,calc(var(--veil, .45) * .85)), rgba(10,9,8,var(--veil, .45))),
    linear-gradient(to top, rgba(10,9,8,.55), transparent 42%);
}
.hero--own::after, .hero--own::before { display: none; }

/* The words and buttons sit above the veil. */
.hero--own .hero__in--own {
  position: relative; z-index: 2;
  min-height: clamp(380px, 46vw, 620px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--s7); padding-bottom: var(--s7);
}
.hero__copy { display: none; }
.hero__copy.is-on { display: block; max-width: 44rem; }

.hero__copy--centre { margin-inline: auto; text-align: center; }
.hero__copy--centre .hero__acts { justify-content: center; }
.hero__copy--right  { margin-left: auto; text-align: right; }
.hero__copy--right .hero__acts { justify-content: flex-end; }

.hero__copy h1, .hero__h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 3.4rem); line-height: 1.08;
  margin: var(--s3) 0 var(--s4); color: var(--text-1);
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.hero__copy p { color: var(--text-1); opacity: .92; text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* A finished banner draws none of its own words, so its buttons drop to
   the foot and centre — where that kind of artwork leaves room. */
.hero__copy--bare.is-on {
  max-width: none; margin: auto auto 0; text-align: center;
}
.hero__copy--bare .hero__acts { justify-content: center; margin-top: 0; }

.hero--own .hero__dots { bottom: var(--s3); z-index: 3; }
.hero--own .hero__link { position: relative; z-index: 1; }

/* Read by search engines and screen readers, taking no space. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .hero--own, .hero--own .hero__in--own { min-height: 440px; }
  .hero__copy.is-on { max-width: none; }
  .hero__copy--right, .hero__copy--centre { text-align: left; margin-left: 0; }
  .hero__copy--right .hero__acts, .hero__copy--centre .hero__acts { justify-content: flex-start; }
  .hero--own .hero__acts { flex-direction: column; align-items: stretch; }
  .hero--own .hero__acts .btn { width: 100%; justify-content: center; }
  .hero__copy--bare.is-on { text-align: center; }
}

/* ============================================================
   THE HERO BAND — FINAL
   ------------------------------------------------------------
   Two faults on the live site, both visible in a screenshot and
   neither in any log:
   
   1. An earlier rule in this same stylesheet set
         .hero--own .hero__slide:first-of-type { position: relative }
      which is MORE SPECIFIC than the rule meant to replace it. So
      the first slide stayed in the flow, took its full natural
      height, and the words stacked underneath the picture instead
      of over it. The band became about 1,250px tall.
   
   2. With no height on the band, a 1870x841 banner simply drew
      itself at whatever size it liked.
   
   Named overrides rather than hoping load order saves us — both
   sheets are already on the server.
   ============================================================ */

.hero--own {
  display: block; padding: 0; position: relative; overflow: hidden;
  /* The band takes the shape of a wide banner rather than a fixed
     height, so artwork at the usual 1870x841 fits almost exactly and
     nothing is sliced off its bottom edge. The two guards stop it
     becoming a stripe on a small laptop or a wall on a large screen. */
  aspect-ratio: 16 / 7;
  min-height: 360px;
  max-height: 620px;
}

.hero--own .hero__bg,
.hero--own .hero__slide,
.hero--own .hero__slide:first-of-type,
.hero--own .hero__bg:first-of-type {
  position: absolute; inset: 0; z-index: 0; height: auto;
}

.hero--own .hero__bg > img,
.hero--own .hero__bg picture,
.hero--own .hero__bg picture img,
.hero--own .hero__link,
.hero--own .hero__link > img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}

.hero--own .hero__in--own {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--s6); padding-bottom: var(--s6);
}

/* --- a finished banner: no words of ours, buttons at the foot --- */
.hero__copy--bare.is-on {
  max-width: none; margin: auto auto 0; text-align: center;
}

/* The buttons have to read over whatever the photograph is doing
   underneath them, and a chandelier's reflection is the brightest
   thing in the picture. So they sit on a plate of their own. */
.hero__copy--bare .hero__acts {
  display: inline-flex; gap: .5rem; margin: 0;
  padding: .5rem; border-radius: 999px;
  background: rgba(10, 9, 8, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}
.hero__copy--bare .hero__acts .btn { margin: 0; }
.hero__copy--bare .hero__acts .btn:not(.btn--go) {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  color: var(--text-1);
}
.hero__copy--bare .hero__acts .btn:not(.btn--go):hover {
  background: rgba(255, 255, 255, .18);
}

/* Words written for the phone are hidden on every bigger screen, where
   the banner's own words are visible. They stay in the HTML either way,
   so a search engine and a screen reader always have them. */
.hero__words { display: none; }

@media (max-width: 640px) {
  /* ------------------------------------------------------------
     ON A PHONE, STACK. DO NOT OVERLAY.

     A 390px screen has no room for a photograph and a paragraph in
     the same band. Overlaid, the words land on lit crystal — the
     brightest thing in the frame — and no amount of darkening saves
     them without ruining the picture you paid for.

     So: the picture on top at its own shape, the words and buttons
     underneath on the page's own background. Always legible, nothing
     fighting, and the artwork is never darkened at all.
     ------------------------------------------------------------ */
  .hero--own {
    aspect-ratio: auto; min-height: 0; max-height: none;
    padding-top: 78vw;            /* room for the picture above */
  }

  .hero--own .hero__bg,
  .hero--own .hero__slide,
  .hero--own .hero__slide:first-of-type {
    inset: 0 0 auto 0; height: 78vw;
  }

  /* A whisper at the foot so the dots have something to sit on. */
  .hero--own .hero__slide::after {
    background: linear-gradient(to top, rgba(10,9,8,.45), transparent 38%);
  }

  .hero--own .hero__bg > img,
  .hero--own .hero__link > img { object-position: center; }

  .hero--own .hero__in--own {
    position: static; inset: auto; min-height: 0;
    display: block; padding: var(--s5) 0 var(--s6);
  }

  .hero__copy.is-on,
  .hero__copy--bare.is-on { margin: 0; max-width: none; text-align: left; }

  .hero__words { display: block; }
  .hero__copy h1, .hero__h, .hero__words h1 {
    font-size: clamp(1.6rem, 7.4vw, 2.1rem);
    margin: var(--s2) 0 var(--s3); text-shadow: none;
  }
  .hero__copy p { text-shadow: none; opacity: 1; color: var(--text-2); }

  /* Below the picture there is nothing to read over, so the plate
     comes off and the buttons are just buttons. */
  .hero__copy--bare .hero__acts,
  .hero--own .hero__acts {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--s2); margin-top: var(--s4);
    background: none; border: 0; padding: 0;
    backdrop-filter: none; box-shadow: none; border-radius: 0;
  }
  .hero--own .hero__acts .btn { width: 100%; justify-content: center; }
  .hero__copy--bare .hero__acts .btn:not(.btn--go) {
    background: transparent; border-color: var(--edge); color: var(--text-1);
  }

  .hero--own .hero__dots {
    top: calc(78vw - 18px); bottom: auto;
  }
}

/* ============================================================
   ADD TO HOME SCREEN
   ------------------------------------------------------------
   Offered on the third page, not the first. Somebody who has
   seen one page of a shop has no reason to install it, and
   being asked is irritating. A refusal is remembered for sixty
   days rather than repeated every visit.
   ============================================================ */

.pwabar {
  position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 90;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--night-2); border: 1px solid var(--edge);
  border-radius: var(--r); box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.pwabar.is-on { transform: translateY(0); opacity: 1; }

.pwabar__t { flex: 1; font-size: .9rem; font-weight: 600; color: var(--text-1); line-height: 1.35; }
.pwabar__t span { display: block; font-weight: 400; font-size: .8rem; color: var(--text-3); margin-top: 2px; }
.pwabar__no { color: var(--text-3); border-color: transparent; }
.pwabar__no:hover { color: var(--text-1); }

@media (max-width: 640px) {
  .pwabar { flex-wrap: wrap; }
  .pwabar__t { flex: 1 1 100%; }
  .pwabar .btn { flex: 1; justify-content: center; }
}

@media (display-mode: standalone) {
  /* Already installed — never ask again, and lose the install bar
     entirely in case anything tries. */
  .pwabar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pwabar { transition: none; }
}

/* ---------------------------------------------------------------------------
   The veil follows the words.

   A flat tint treats the whole photograph as background, which is wrong when
   the photograph has a subject — a lit chandelier is bright exactly where it
   matters, and dimming it evenly to make room for a headline throws away the
   reason the picture was chosen.

   So the veil is heaviest where the words sit and thins across the frame.
   Left-aligned words darken the left and let the fixture on the right keep
   its glow; right-aligned words mirror it; centred words keep the even
   wash, because centred words have nowhere to hide.

   A second, weak layer along the foot gives the buttons and the dots
   something to sit on whichever way the first one runs.
--------------------------------------------------------------------------- */
.hero--own .hero__slide::after {
  background:
    linear-gradient(var(--veil-dir, to bottom),
      rgba(10, 9, 8, var(--veil, .45)) 0%,
      rgba(10, 9, 8, calc(var(--veil, .45) * .74)) 44%,
      rgba(10, 9, 8, calc(var(--veil, .45) * .30)) 100%),
    linear-gradient(to top, rgba(10, 9, 8, .50), transparent 46%);
}

/* Which way it runs is decided by where the words were put, in the admin —
   not by a second setting somebody has to understand. */
.hero--own .hero__slide--left  { --veil-dir: to right; }
.hero--own .hero__slide--right { --veil-dir: to left; }
.hero--own .hero__slide--centre { --veil-dir: to bottom; }

/* On a phone the picture is on its own above the words, so there is nothing
   to keep legible over it. The veil goes back to a light even wash that only
   stops the picture from glaring. */
@media (max-width: 640px) {
  .hero--own .hero__slide::after {
    background: linear-gradient(to bottom,
                  rgba(10, 9, 8, calc(var(--veil, .45) * .34)),
                  rgba(10, 9, 8, calc(var(--veil, .45) * .52)));
  }
}

/* ---------------------------------------------------------------------------
   THE SIDEWAYS SCROLL WHEN YOU ZOOM IN

   Zooming a browser does not magnify the page; it makes the page think the
   window is narrower. A 1440px monitor at 175% is a 820px window, and that is
   where this showed up.

   .hero--own asked for aspect-ratio: 16/7 and min-height: 360px, and never
   stated a width. An aspect ratio works in whichever direction it is given
   room to. With a floor on the height and nothing said about the width, the
   browser is entitled to satisfy the ratio by making the band WIDER — so at a
   768px window it drew itself 360 x 16/7 = 823px across, pushed 55px past the
   edge of the screen, and the whole page could be dragged sideways.

   Stating the width removes the choice: the ratio can only be satisfied by
   changing the height, which is what was always meant.
--------------------------------------------------------------------------- */
.hero--own {
  width: 100%;
  max-width: 100%;
}

/* The same guarantee for the page as a whole. Nothing on this site is meant
   to scroll sideways, and one stray wide element should not be able to drag
   the rest of it along. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ===========================================================================
   THE SHOP'S OWN ACCOUNTS, AND PASSING A PRODUCT ON
   ===========================================================================

   One component, <x-shop.social />, used in two places: a full row in the
   footer and a quiet one at the bottom right of the hero. Both read the same
   social.* settings, so an account with no link set never appears anywhere
   and nobody ends up with a dead icon.

   The marks are inline SVG, not an icon font and not a script from Facebook
   or X. Their official buttons watch your visitors on your own page and cost
   a network round trip each; these are a few hundred bytes in the HTML that
   tell nobody anything until somebody clicks.
   =========================================================================== */

.social { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.social__label {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.social__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3);
}

.social__a {
  --sz: 38px;
  width: var(--sz); height: var(--sz);
  display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: 50%;
  color: var(--text-2);
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.social__a svg { width: 54%; height: 54%; display: block; }

/* It lights up on approach. One micro-interaction, in a lighting shop. */
.social__a:hover,
.social__a:focus-visible {
  color: var(--night);
  background: var(--amber);
  border-color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(240,160,44,.28);
}

/* WhatsApp goes green rather than amber, because that is the one people
   recognise by colour before they have read anything. */
.social__a--whatsapp:hover,
.social__a--whatsapp:focus-visible {
  background: #25D366; border-color: #25D366;
  box-shadow: 0 6px 18px rgba(37,211,102,.3);
}

.social--sm .social__a { --sz: 32px; }
.social--md { margin-top: var(--s4); }

/* --- the row in the hero ------------------------------------------------
   Bottom right, away from the headline and the buttons, which are on the
   left. It is deliberately quiet: the hero's job is to send somebody INTO
   the shop, and a social icon sends them out of it. If it distracts, it can
   be switched off in Settings → Website.
   ----------------------------------------------------------------------- */
.hero__social {
  position: absolute; right: var(--s6); bottom: var(--s5); z-index: 3;
}
.hero__social .social__a {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
  backdrop-filter: blur(2px);
}

/* On a phone the hero stacks and the picture is its own block, so an
   absolutely positioned row would land on top of the artwork. There is a
   full row of these in the footer a short scroll away. */
@media (max-width: 640px) {
  .hero__social { display: none; }
}

/* --- share this product ------------------------------------------------- */
.share {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--edge);
}
.share__h {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.share__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3);
}
.share__row a,
.share__row button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: 50%;
  background: none; color: var(--text-2); cursor: pointer; font: inherit;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.share__row svg { width: 54%; height: 54%; display: block; }

.share__row a:hover, .share__row a:focus-visible,
.share__row button:hover, .share__row button:focus-visible {
  color: var(--night); background: var(--amber); border-color: var(--amber);
  transform: translateY(-2px);
}

/* Copying worked. Green, because this is a result rather than an invitation,
   and it goes back on its own after a couple of seconds. */
.share__row .share__copy.is-done {
  color: var(--night); background: var(--good); border-color: var(--good);
  transform: none;
}

/* The phone's own share sheet: one wide button, not a circle. */
.share__row .share__sheet {
  width: auto; height: 44px; border-radius: 999px;
  padding-inline: var(--s4); gap: .5rem;
  grid-auto-flow: column; align-items: center;
  border-color: var(--amber); color: var(--amber); font-weight: 600;
}
.share__row .share__sheet svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .share { gap: var(--s3); }
  .share__h { width: 100%; }
}

/* ===========================================================================
   A SLIDE DRAWN RATHER THAN PHOTOGRAPHED
   =========================================================================== */

/* It fills the band exactly like a photograph would, so everything already
   built on top of a slide — the veil, the words, the buttons, the dots —
   works without knowing the difference. */
.hero--own .hero__art {
  position: absolute; inset: 0; z-index: 0;
  /* Load-bearing. The phone framing below scales the drawing up, and without
     this the overflow paints straight over the headline underneath it. */
  overflow: hidden;
}
.hero--own .hero__art svg { width: 100%; height: 100%; display: block; }

/* A wide drawing cropped to a phone's tall picture block leaves the fitting
   stranded at the top with dead space underneath. So the phone gets its own
   framing: closer in, centred on the light itself. Nothing is lost, because
   a drawing can be looked at from any distance — which is the whole reason
   for drawing it instead of uploading a photograph. */
@media (max-width: 640px) {
  .hero--own .hero__art svg {
    /* Anchored low and to the right, which brings the hanging pendants into
       frame underneath the ribbon. The empty lower-left of the drawing is
       deliberate — on a computer the headline sits there — but on a phone
       the words are below the picture, so that emptiness has no job and the
       crop moves away from it. */
    transform: scale(1.40);
    transform-origin: 78% 40%;
  }
}

/* Somebody who has asked their system to stop moving things is also telling
   you they would rather have less visual noise. The drawing stays; the
   glows simply stop being so loud. */
@media (prefers-reduced-motion: reduce) {
  .hero--own .hero__art svg { opacity: .9; }
}

/* The drawn slide as a thumbnail in the admin list. The drawing has no size
   of its own, so the box has to give it one. */
.slidecard__img--art { position: relative; overflow: hidden; min-height: 150px; }
.slidecard__img--art .hero__art { position: absolute; inset: 0; }
.slidecard__img--art svg { width: 100%; height: 100%; display: block; }

/* ===========================================================================
   THE FOOTER ICONS WERE STACKING, AND THE LOGO WAS INVISIBLE
   ===========================================================================

   1. The icon row sat inside the footer, and the footer says

          .ftr ul { display: grid; gap: var(--s2); }

      which is (0,1,1) and beats .social__row at (0,1,0). So every icon got
      its own grid row and the accounts came out as a vertical column running
      off the bottom of the page. Specificity, not layout: the rule below is
      (0,2,0) and wins honestly rather than by !important.

   2. .hdr__logo carried mix-blend-mode: screen. Screen blending makes BLACK
      transparent, which is a reasonable trick for a white logo on a dark
      header — and exactly the wrong one for a dark-ink logo, which is what
      is uploaded. It was not a broken image; it was being erased on purpose.
   =========================================================================== */

.ftr .social__row {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin: 0; padding: 0; list-style: none;
}

/* In the footer the label belongs above the icons, not beside them: the
   column is a quarter of the page wide and there is no room for both. */
.social--md { display: block; margin-top: var(--s5); }
.social--md .social__label { display: block; margin-bottom: var(--s3); }

/* --- the logo ----------------------------------------------------------- */
.hdr__logo {
  max-height: 34px; width: auto;
  /* No blend mode. If a logo needs help to be seen on this header, the
     answer is to upload a light version in Settings -> Brand, or to let the
     drawn wordmark below take over — not to blend the artwork away. */
  mix-blend-mode: normal;
}

/* --- the drawn lockup, for when no light logo has been uploaded --------- */
.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.mark__bulb { width: 1.55em; height: 1.55em; flex: none; display: block; }
.mark__word {
  font-family: var(--display); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -.02em; line-height: 1;
  color: var(--text);
}
.mark__word em { font-style: normal; color: var(--amber); }

.hdr__mark:hover .mark__word { color: #fff; }
.hdr__mark:hover .mark__bulb { filter: drop-shadow(0 0 6px rgba(240,160,44,.55)); }

@media (max-width: 480px) {
  .mark__word { font-size: 1.05rem; }
}

/* ===========================================================================
   QUICK ACTIONS
   ===========================================================================
   A launcher at the bottom right and a short panel above it. It is closed
   until somebody opens it, it can be sent away for a month, and it moves
   out of the way of a phone keyboard. Nothing appears on its own.
   =========================================================================== */

.quick {
  position: fixed; z-index: 60;
  right: clamp(.75rem, 2.2vw, 1.5rem);
  bottom: clamp(.75rem, 2.2vw, 1.5rem);
  /* iPhones with a home bar. Without this it sits under the bar. */
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}

/* The keyboard is up, or the page is being printed. Either way, be gone. */
.quick.is-away { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media print { .quick { display: none; } }

/* --- the button --------------------------------------------------------- */
.quick__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 52px; padding-inline: 1.1rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--night); background: var(--amber);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.quick__btn:hover { background: var(--glow); transform: translateY(-2px); }
.quick__btn:focus-visible { outline: 3px solid var(--daylight); outline-offset: 3px; }

.quick__btn svg { width: 22px; height: 22px; display: block; flex: none; }
.quick__btnx { display: none; }
.quick.is-open .quick__btni { display: none; }
.quick.is-open .quick__btnx { display: block; }
.quick.is-open .quick__lbl { display: none; }
.quick.is-open .quick__btn { padding-inline: .95rem; }

/* --- the panel ---------------------------------------------------------- */
.quick__panel {
  width: min(21rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem); overflow-y: auto;
  background: var(--night-2);
  border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  padding: .5rem;
  animation: quickin .16s ease-out;
}
@keyframes quickin { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .quick__panel { animation: none; }
  .quick__btn { transition: none; }
}

.quick__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .55rem .6rem .35rem;
  font-weight: 600; color: var(--text);
}
.quick__dismiss {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--text-3);
}
.quick__dismiss svg { width: 16px; height: 16px; }
.quick__dismiss:hover { color: var(--text); background: var(--night-3); }

.quick__group { padding: .35rem 0; }
.quick__group + .quick__group { border-top: 1px solid var(--edge); }
.quick__gh {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); padding: .5rem .6rem .3rem;
}

.quick__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; border-radius: 10px;
  text-decoration: none; color: var(--text);
}
.quick__item:hover, .quick__item:focus-visible {
  background: var(--night-3); outline: none;
}
.quick__item:focus-visible { box-shadow: 0 0 0 2px var(--daylight) inset; }

.quick__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--night-3); color: var(--amber);
}
.quick__ico svg { width: 18px; height: 18px; display: block; }

.quick__txt { display: grid; gap: .1rem; min-width: 0; }
.quick__txt strong { font-weight: 600; font-size: .92rem; }
.quick__txt small {
  color: var(--text-3); font-size: .78rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* On a narrow phone the label on the button is noise — the icon is the
   whole message, and the corner is worth more than the word. */
@media (max-width: 420px) {
  .quick__lbl { display: none; }
  .quick__btn { padding-inline: .95rem; }
}