/* HALUS — components. Consumes tokens.css. No hex values here.
   Exceptions, deliberate: pure white on the pine button fill, and white/black at
   alpha over photography, where a token would be wrong by definition. */

/* ── header ───────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-hair);}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 0;flex-wrap:wrap;}
.logo{font-size:1.2rem;font-weight:800;letter-spacing:.15em;text-decoration:none;}
.nav-main{display:flex;gap:26px;align-items:center;}
.navlink{font-size:.9rem;font-weight:500;color:var(--ink-700);text-decoration:none;background:none;border:0;
  padding:6px 0;border-bottom:1.5px solid transparent;display:inline-flex;align-items:center;gap:6px;}
.navlink:hover{color:var(--ink-900);border-bottom-color:var(--pine-600);}
.chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s var(--ease);opacity:.6;}

.nav-main li{list-style:none;}
.nav-main li > a{font-size:.9rem;font-weight:500;color:var(--ink-700);text-decoration:none;
  padding:6px 0;border-bottom:1.5px solid transparent;display:inline-flex;align-items:center;}
.nav-main li > a:hover{color:var(--ink-900);border-bottom-color:var(--pine-600);}

.utils{display:flex;align-items:center;gap:10px;}
.switch{display:flex;border:1px solid var(--line-hair);border-radius:var(--r);overflow:hidden;}
.switch ul{display:flex;list-style:none;margin:0;padding:0;}
.switch a,.switch button{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px;border:0;background:transparent;color:var(--ink-500);text-decoration:none;display:block;}

/* The currency switcher: four symbols in one control, the chosen one filled. Symbols rather
   than codes because ₺ $ € £ fit where TRY USD EUR GBP would not, and the code is still read
   aloud by a screen reader from the hidden label. */
.cur-switch{display:flex;}
.cur-switch button{cursor:pointer;letter-spacing:0;font-size:.78rem;padding:6px 9px;line-height:1.2;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.cur-switch button:hover{color:var(--ink-900);background:var(--surface);}
.cur-switch button.is-current{background:var(--pine-100);color:var(--pine-700);font-weight:700;}
.switch .current-lang > a,.switch [aria-current="true"]{background:var(--pine-100);color:var(--pine-700);font-weight:600;}
.cart{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;border-radius:var(--r);
  padding:7px 12px;background:var(--paper);text-decoration:none;display:inline-block;
  color:var(--ink-900);border:1px solid var(--line-strong);}
.cart-count{font-variant-numeric:tabular-nums;}
/* Sign in / My account. Quieter than the cart — it is not what anyone came to do. */
.acctlink{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-500);
  text-decoration:none;padding:7px 4px;white-space:nowrap;}
.acctlink:hover{color:var(--ink-900);}

/* ── products panel ───────────────────────────────────────
   There is no JavaScript on this site, so the panel is a CSS disclosure and nothing more.
   Its trigger is a real link to the all-products page: hover opens the panel on a desktop,
   keyboard focus opens it for anyone tabbing, and a tap on a phone simply follows the link
   to a page that lists everything. Every route to the range works without a script, and a
   crawler follows the same links a person does. */
.hasmenu{position:static;}
.panel{position:absolute;inset-inline:0;top:100%;background:var(--paper);
  border-block:1px solid var(--line-hair);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;}
.hasmenu:hover .panel,.hasmenu:focus-within .panel{opacity:1;visibility:visible;transform:none;
  transition-delay:0s;}
.hasmenu:hover .navlink,.hasmenu:focus-within .navlink{color:var(--ink-900);border-bottom-color:var(--pine-600);}
.hasmenu:hover .chev,.hasmenu:focus-within .chev{transform:rotate(-135deg) translate(-3px,-3px);opacity:1;}
.panelgrid{padding:34px 0 38px;}
.famcols ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px;list-style:none;margin:0;padding:0;}
.famcols a{display:block;padding:12px 0;text-decoration:none;font-weight:600;font-size:.92rem;}
.famcols a:hover{color:var(--pine-700);}
.famcols .count{font-family:var(--mono);font-size:.75rem;color:var(--ink-500);margin-left:6px;font-weight:400;
  font-feature-settings:"tnum" 1;}
.panelfoot{border-top:1px solid var(--line-hair);padding:14px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.84rem;}
.panelfoot a{color:var(--pine-700);font-weight:600;text-decoration:none;}
.panelfoot span{font-family:var(--mono);font-size:.7rem;color:var(--ink-400);letter-spacing:.06em;}

/* ── buttons ──────────────────────────────────────────── */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  font-family:var(--sans);font-size:.9rem;font-weight:600;padding:14px 26px;border:1px solid transparent;
  border-radius:var(--r);display:inline-block;text-decoration:none;line-height:1.3;
  transition:background var(--dur) var(--ease);}
.btn--primary,.woocommerce button.button.alt,.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,.woocommerce #place_order{background:var(--pine-600);color:#fff;}
.btn--primary:hover,.woocommerce button.button.alt:hover,.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,.woocommerce #place_order:hover{background:var(--pine-700);}
.btn--secondary,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:transparent;color:var(--ink-900);border-color:var(--line-strong);}
.btn--secondary:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--surface);}
/* A link that is a button is a button.

   Sections colour their links for reading — `.page-body a` sets pine so a policy page
   reads properly — and an element-plus-class selector like that outranks a lone
   `.btn--primary`. So an <a> button inside one lost its white text and kept its pine
   background: the cart's "Ödemeye geç" and the declined-payment page's "Sepete dön"
   were pine on pine at 1.3:1, which is to say invisible, on the two pages where a
   customer is closest to paying. Naming both classes puts the button's own colour back
   on top wherever it is dropped, without depending on which rule comes later in the
   file. */
a.btn.btn--primary{color:#fff;}
a.btn.btn--secondary{color:var(--ink-900);}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ── photographs ──────────────────────────────────────────
   Every image on this site is WebP, written at four widths, with width and height on the
   tag so the browser reserves the right space before a byte of it arrives — no reflow as
   the page fills in. `object-fit` keeps a shot that was cropped slightly differently from
   distorting the card it lands in. */
.ph{width:100%;height:auto;border-radius:var(--r);background:var(--surface);object-fit:cover;}
.ph--card{aspect-ratio:1.15;}
.ph--pdp{aspect-ratio:1.15;}
.ph--hero{aspect-ratio:1;}
.ph--thumb{width:92px;height:92px;aspect-ratio:1;}

/* ── image placeholder ────────────────────────────────────
   Photography is the bottleneck, so a product without a photo must still look
   deliberate rather than broken. data-ph carries the label. */
.imgph{background:var(--surface);border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  aspect-ratio:1.15;}
.imgph::after{content:attr(data-ph);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-300);text-align:center;padding:0 12px;}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:76px 0 68px;border-bottom:1px solid var(--line-hair);}
/* The photograph takes the larger half now, and `.ph--hero` below drops the 1.15 crop for
   a square — the hero shot is square, so cropping it only threw away picture. Between them
   the image is about a third larger than it was, which is what the marked points need: a
   dot on a small picture lands on three things at once. */
.hero .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center;}
.hero h1{font-size:var(--t-display);line-height:1.06;letter-spacing:-.03em;margin-bottom:20px;}
.hero p{font-size:1.0625rem;color:var(--ink-700);max-width:46ch;margin-bottom:30px;}

/* ── standard strip ───────────────────────────────────── */
.strip{background:var(--ink-900);color:var(--ink-300);padding:26px 0;}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;}
.strip div{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;}
.strip b{display:block;color:var(--paper);font-size:.9rem;font-weight:600;letter-spacing:0;
  font-family:var(--sans);margin-bottom:3px;}

/* ── who makes this ───────────────────────────────────────
   The homepage's closing band, in place of an "about us" menu item. A reading measure and
   nothing else — no portrait, no pull quote, no forge sparks. */
.about{border-top:1px solid var(--line-hair);}
.about h2{font-size:var(--t-h3);margin-bottom:12px;}
.about__text{max-width:58ch;color:var(--ink-700);}
.about__note{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);
  margin-top:16px;}

/* ── sections ─────────────────────────────────────────────
   `.sec` is the class every template actually uses, and until now it was defined nowhere —
   so every section on the site had no vertical padding and the whole page ran together with
   nothing between one band and the next. It is the spacing rule for the site: one band of
   the page, top and bottom, from the scale in tokens.css.

   A section that follows another gets a hairline between them. `:not(:first-child)` rather
   than a border on every one, so the page does not open or close on a stray line. */
.sec{padding:var(--band) 0;}
.sec + .sec{border-top:1px solid var(--line-hair);}
.sec > h2{margin-bottom:var(--stack);}

/* Repeated groups in a list — the ten families on the all-products page — are the same
   component ten times, not ten separate statements. A full band between each doubles the
   scroll and makes one page read as ten. The rule between them does the separating. */
.sec--group{padding:var(--band-tight) 0;}
.sec--group:first-child{padding-top:0;}

.shead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-bottom:var(--stack);flex-wrap:wrap;}
.eyebrow{margin-bottom:10px;}

/* The introductory line under a page heading. Used on ten templates and, until now, styled
   on none of them. Recovered from the design system: prototype/halus-design-system-v2.html */
.lede{font-size:1.0625rem;color:var(--ink-700);max-width:60ch;font-weight:400;}

/* ── family grid ──────────────────────────────────────────
   The homepage's route into the range, and the empty-cart and 404 pages' way back into it.
   It was rendering as a run of inline links, because the rules were written for the
   prototype's class names (`.fams`, `.fam`) and the templates use these. Same design, names
   the markup actually uses.

   One hairline between tiles rather than a border on each: gap:1px over a line-coloured
   background, so the grid reads as a single ruled block. */
/* Ten categories across six columns left two dead cells, and because the hairlines are made
   by the container's background showing through 1px gaps, those cells rendered as a grey
   block. Flex rather than grid fixes it for any number of categories: the last row's tiles
   grow to fill the width instead of leaving a hole. Grid cannot do that — `auto-fit` only
   collapses tracks that are empty in *every* row.

   The trade is that a short last row has wider tiles than the row above. That reads as
   deliberate; a grey rectangle reads as broken. */
.famgrid{display:flex;flex-wrap:wrap;gap:1px;
  background:var(--line-hair);border:1px solid var(--line-hair);border-radius:var(--r);
  overflow:hidden;}
/* Five across, so ten families make two equal rows and every tile is the same size.
   
   The dead cells this replaces were never a design decision: the belt used
   `repeat(auto-fill,minmax(190px,1fr))`, which fits as many columns as the width allows —
   six, at a typical desktop — and ten tiles across six columns leaves two over. The column
   count came from the browser window rather than from the number of categories, so the hole
   appeared and disappeared as the window was resized.
   
   Five is chosen because ten divides by it. If a category is ever added or retired, check
   this number: the divisors of the count are the only row lengths that come out even. Nothing
   breaks if it stops dividing — flex-grow makes a short last row stretch rather than leaving
   a gap — but it stops being a neat block. */
.famcard{flex:1 1 calc(20% - 1px);min-width:150px;background:var(--paper);padding:20px;
  text-decoration:none;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  transition:background var(--dur) var(--ease);}
.famcard:hover{background:var(--surface);}
.famcard__name{font-size:.98rem;font-weight:600;}
.famcard:hover .famcard__name{color:var(--pine-700);}
.famcard .count{font-family:var(--mono);font-size:.75rem;color:var(--ink-500);
  font-feature-settings:"tnum" 1;}

/* ── search box and family jump links ─────────────────────
   Both exist because the all-products page is one long page by choice. Pagination would
   have hidden four fifths of the range behind clicks; these are the two things that make a
   long page navigable instead. Neither needs a script — one is a GET form, the other is a
   row of anchors. */
.searchbar{display:flex;gap:10px;margin:20px 0 16px;max-width:520px;}
.searchbar input{flex:1;min-width:0;}
.searchbar .btn{flex:none;padding:12px 20px;font-size:.86rem;}
/* On the homepage it sits under the one call to action, so it must read as the quieter of
   the two — a line, not a second button competing with the first. */
.searchbar--hero{margin-top:26px;max-width:420px;}
.searchbar--hero input{background:transparent;border-color:var(--line-hair);}
.searchbar--hero input:focus{background:var(--paper);}

.jumps{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:26px;margin-bottom:8px;
  border-bottom:1px solid var(--line-hair);}
.jump{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px;border-radius:var(--r);
  border:1px solid var(--line-hair);text-decoration:none;font-size:.86rem;font-weight:500;
  color:var(--ink-700);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.jump:hover{border-color:var(--pine-600);background:var(--pine-100);color:var(--pine-800);}
.jump .count{font-family:var(--mono);font-size:.7rem;color:var(--ink-500);
  font-feature-settings:"tnum" 1;}
.jump:hover .count{color:var(--pine-700);}

/* The heading a jump lands on must clear the sticky header, or the family name sits behind
   it and the visitor arrives looking at the second row of products. The header is two rows
   tall on a phone, so the offset is not one number — see the 900px block at the foot. */
.sec[id]{scroll-margin-top:96px;}

.famgrid--after{margin-top:34px;}

/* ── product card ─────────────────────────────────────────
   Every rule here used to be scoped under `.product`, because WooCommerce wrapped each card
   in `<li class="product">`. WooCommerce is gone and the hand-written templates emit a bare
   <li>, so none of it was matching: the cards had no aspect ratio, no flex column, and their
   prices did not line up. Scoped to our own markup now.

   The card is image-led on purpose. Name, then one line of specification, then the price
   pinned to the bottom of the card so a column of them reads as a column of prices however
   long the names are. */
/* auto-fill rather than auto-fit: a category with one product in it should show one card,
   not one card stretched across the whole page. */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:34px 26px;
  list-style:none;padding:0;margin:0;}
.products > li{min-width:0;}
.card{text-decoration:none;display:flex;flex-direction:column;height:100%;}

/* 4:5 — taller than it is wide, which is the shape a grill, a saw and an axe all photograph
   into without waste. Fixed, so a row of cards has a straight line across the top of the
   names whatever the photographs turn out to be. */
.card__media{position:relative;aspect-ratio:4/5;margin-bottom:14px;border-radius:var(--r);
  overflow:hidden;background:var(--surface);}
.card__media img,.card__media .imgph{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  border-radius:0;}
.card:hover .card__media{background:var(--surface-2);}
.card__media::after{content:"";position:absolute;inset:0;border:1px solid var(--line-hair);
  border-radius:var(--r);pointer-events:none;}

.card h3{font-size:.98rem;font-weight:600;letter-spacing:-.01em;margin:0 0 4px;line-height:1.3;}
.card:hover h3{color:var(--pine-700);}
.card__spec{font-size:.8rem;color:var(--ink-500);margin-bottom:10px;}
/* Which materials it is made in. The one thing a photograph cannot tell you, and the reason
   somebody opens the product page. */
.card__opts{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:10px;}
.card .price{font-size:.98rem;font-weight:700;margin-top:auto;color:var(--ink-900);}
.card .price small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);font-weight:500;display:block;margin-bottom:2px;}

/* The family heading on the all-products page. */
.rangehead{font-size:var(--t-h3);display:flex;align-items:baseline;gap:10px;margin-bottom:18px;
  padding-bottom:10px;border-bottom:1px solid var(--line-hair);}
.rangehead a{text-decoration:none;}
.rangehead a:hover{color:var(--pine-700);}
.rangehead .count{font-family:var(--mono);font-size:.75rem;color:var(--ink-500);font-weight:400;
  font-feature-settings:"tnum" 1;}

/* ── badges ───────────────────────────────────────────── */
.badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r);font-weight:500;display:inline-block;}
.card__media .badge{position:absolute;top:10px;left:10px;z-index:1;}
.badge--stock{color:var(--pine-700);background:var(--pine-100);}
.badge--low{color:var(--rust-700);background:var(--paper);border:1px solid var(--rust-700);}
.badge--out{color:var(--ink-500);background:var(--surface-2);}
.badge--material{color:var(--ink-700);background:var(--surface-2);}

/* ── product page ─────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:26px 0 var(--band);}
.pdp > *{min-width:0;}

/* The two columns. Both were unstyled — the photograph had nothing holding it at the top of
   a long buying column, and the specifications ran straight into the add-to-cart button. */
.pdp__media{position:sticky;top:90px;}
.pdp__buy{min-width:0;}
.pdp__buy h1{font-size:var(--t-h1);line-height:1.12;margin-bottom:10px;}
.pdp__buy .lede{margin-bottom:26px;}

/* Each option axis and the add-ons block. A fieldset with the browser's own border and
   padding removed, then given the spacing the rest of the page uses. */
.opts-group{border:0;padding:0;margin:0 0 var(--stack);min-width:0;}

/* Specifications. Above the fold on a phone, under the buy column on a desktop — either way
   it is the reason this audience is on the page, so it gets a ruled block of its own. */
.specs{margin-top:var(--stack);padding-top:26px;border-top:1px solid var(--line-strong);}
.specs h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;margin:0 0 14px;}
.specs dl{margin:0;font-size:.86rem;}
.specs dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line-hair);}
.specs dt{color:var(--ink-500);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--mono);}
.specs dd{margin:0;text-align:right;font-weight:500;}
.made-in{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);
  margin-top:16px;}

/* The long description, below both columns and set to a reading measure. */
.pdp__desc{max-width:68ch;}
/* The heading earns its place: this section is now the *rest* of the description rather than
   all of it, so it needs to say what it is instead of appearing as loose text under a photo. */
.pdp__desc h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;margin:0 0 14px;}
.pdp__desc p{margin-bottom:16px;color:var(--ink-700);}

/* ── breadcrumb ───────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:20px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);}
.crumbs a{color:var(--ink-500);text-decoration:none;}
.crumbs a:hover{color:var(--pine-700);}
/* ink-300 is the token for text on the dark register; on paper it is 2:1 and all but
   gone. The separator is aria-hidden and decorative, so it should stay recessive —
   ink-400 is recessive and still visible. */
.crumbs__sep{color:var(--ink-400);}
.crumbs [aria-current="page"]{color:var(--ink-700);}

/* ── configurator — the most valuable component on the site ──
   It is CSS, not JavaScript. The server writes every price for every combination into the
   page and :has() reveals the one that matches what is ticked, so the right figure appears
   the instant a radio is pressed with nothing to download and nothing that can fail to
   load. The rules that do the revealing are generated per product and inlined in <head> by
   templates/site/product.php — they name this product's own option values, so they cannot
   live in a shared stylesheet.

   The default state below matters as much as the rules: if the stylesheet never arrives,
   what is left standing is the default variant's price and every add-on's price, all
   correct, all in the HTML. */
.cfg__price{display:block;}
/* Add-on prices are written once per parent material. Hidden until a rule claims one, so a
   row can never show two figures at the same time. */
.cfg .opt__delta [data-mat],.cfg .opt__label small[data-mat]{display:none;}
.cfg__price--muted{font-size:1.1rem;color:var(--ink-500);}
.cfg__note{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-500);
  margin:0 0 16px;}

.optlabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:10px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;}
/* The add-on nudge — "80% of customers pick an add-on" — is a line meant to sell, not a
   placeholder, and ink-400 is the token for disabled text. At 12px it came out at 3.1:1,
   under AA and genuinely hard to read. ink-500 is the lightest ink that clears AA on
   paper, which is exactly what this line wants: quiet, but read. */
.optlabel i{font-style:normal;font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:.78rem;color:var(--ink-500);}
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:26px;}
.opt{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line-hair);
  border-radius:var(--r);cursor:pointer;background:var(--paper);
  transition:border-color .14s var(--ease),background .14s var(--ease);}
.opt:hover{border-color:var(--line-strong);}
.opt:has(input:checked){border-color:var(--pine-600);background:var(--pine-100);}
.opt:has(input:focus-visible){outline:2px solid var(--pine-600);outline-offset:2px;}
.opt input{accent-color:var(--pine-600);flex:none;width:16px;height:16px;margin:0;}
.opt .opt__label{flex:1;min-width:0;font-size:.89rem;font-weight:500;overflow-wrap:break-word;}
.opt .opt__label small{display:block;font-weight:400;color:var(--ink-500);font-size:.78rem;margin-top:2px;}
.opt .opt__delta{font-family:var(--mono);font-size:.82rem;font-weight:500;white-space:nowrap;color:var(--ink-700);}
.opt:has(input:checked) .opt__delta{color:var(--pine-700);}
.opt--disabled{opacity:.5;cursor:not-allowed;}

.total-bar{border-top:1px solid var(--line-strong);padding-top:19px;display:flex;
  justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.total-bar .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);}
.total-bar .total{font-size:1.85rem;font-weight:700;letter-spacing:-.026em;}
.total-bar .sub{font-family:var(--mono);font-size:.7rem;color:var(--ink-500);}
.assure{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;}
.assure div{font-family:var(--mono);font-size:.68rem;color:var(--ink-500);}
.assure b{color:var(--pine-700);font-weight:600;}

/* ── specification table ──────────────────────────────────
   A missing dimension is shown as a visible gap, never invented. */
table.sp{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.8rem;margin-top:38px;}
table.sp td{padding:10px 0;border-bottom:1px solid var(--line-hair);}
table.sp td:first-child{color:var(--ink-500);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;width:48%;}
table.sp td:last-child{text-align:right;}
table.sp .tbd{color:var(--ink-400);}

/* ── shoppable scene ──────────────────────────────────── */
.scene{position:relative;border-radius:var(--r);overflow:hidden;}
.scene .imgph{aspect-ratio:16/10;}
.scene img{width:100%;}
/* --x and --y are set inline per hotspot as percentages of the image.
   Defaults keep it centred if a coordinate is ever missing. */
.hotspot{--x:50%;--y:50%;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;border:0;padding:0;background:transparent;z-index:2;
  touch-action:manipulation;}
.hotspot::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgb(255 255 255/.6);background:rgb(25 26 23/.18);transition:all .18s var(--ease);}
.hotspot::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;transition:all .18s var(--ease);}
.hotspot:hover::before,.hotspot.is-open::before{border-color:#fff;background:rgb(44 74 59/.5);}
.hotspot:hover::after,.hotspot.is-open::after{background:var(--pine-300);transform:scale(1.18);}
.hotspot:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@media (prefers-reduced-motion:no-preference){
  .hotspot::before{animation:halus-pulse 2.8s ease-out infinite;}
  @keyframes halus-pulse{0%{box-shadow:0 0 0 0 rgb(255 255 255/.5);}
    60%,100%{box-shadow:0 0 0 11px rgb(255 255 255/0);}}
  .hotspot.is-open::before,.hotspot:hover::before{animation:none;}
}
.hotspot-card{--x:50%;--y:50%;position:absolute;left:var(--x);top:var(--y);z-index:3;width:232px;
  background:var(--paper);border:1px solid var(--line-hair);border-radius:var(--r);padding:14px;
  transform:translate(18px,-50%);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s var(--ease),visibility .16s;}
.hotspot-card--flip{transform:translate(calc(-100% - 18px),-50%);}
.hotspot-card.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.hotspot-card .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--pine-600);margin-bottom:5px;}
.hotspot-card .n{font-size:.9rem;font-weight:600;margin-bottom:2px;line-height:1.3;}
.hotspot-card .s{font-size:.76rem;color:var(--ink-500);margin-bottom:9px;}
.hotspot-card .row{justify-content:space-between;align-items:center;}
.hotspot-card .p{font-size:.92rem;font-weight:600;}
.hotspot-card .add{font-size:.74rem;font-weight:600;background:var(--pine-600);color:#fff;border:0;
  border-radius:var(--r);padding:7px 12px;text-decoration:none;}
.hotspot-card .add:hover{background:var(--pine-700);}

/* Without hover the hotspots are unreachable on their own, so the same products
   are listed under the image. Shown only where the dots do not work. */
.scenelist{display:none;margin-top:16px;border-top:1px solid var(--line-hair);}
.scenelist a{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-hair);text-decoration:none;align-items:baseline;}
.scenelist .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--pine-600);
  display:block;margin-bottom:2px;}
.scenelist .n{font-size:.9rem;font-weight:600;}
.scenelist .p{font-size:.9rem;font-weight:600;white-space:nowrap;}

/* No hover, so the card becomes a sheet across the foot of the image.
   MUST match canHover() in halus.js. */
@media (hover:none),(pointer:coarse),(max-width:760px){
  .hotspot-card,.hotspot-card--flip{inset:auto 10px 10px 10px;width:auto;transform:translateY(8px);
    transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;}
  .hotspot-card.is-open,.hotspot-card--flip.is-open{transform:none;}
  .scenelist{display:block;}
}

/* ── guide block ──────────────────────────────────────── */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.guide .imgph{aspect-ratio:1.5;}
.guide h3{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:12px;}
.guide p{color:var(--ink-700);margin-bottom:20px;max-width:44ch;}

/* ── forms, notices, WooCommerce furniture ────────────── */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="search"],
input[type="number"],textarea,select{font-size:.9rem;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--paper);width:100%;}
label{font-size:.88rem;}
.woocommerce form .form-row{margin-bottom:16px;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;font-size:.9rem;
  padding:16px 18px;border-radius:var(--r);margin:0 0 24px;border:1px solid var(--line-hair);
  background:var(--surface);}
.woocommerce-message{border-color:var(--pine-600);background:var(--pine-100);color:var(--pine-800);}
.woocommerce-error{border-color:var(--rust-700);color:var(--rust-700);}
.woocommerce table.shop_table,.woocommerce table.shop_attributes{width:100%;border-collapse:collapse;
  font-size:.9rem;margin-bottom:26px;}
.woocommerce table.shop_table th{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-500);text-align:left;padding:10px 12px 10px 0;
  border-bottom:1px solid var(--line-strong);font-weight:500;}
.woocommerce table.shop_table td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line-hair);}
.woocommerce-pagination ul{display:flex;gap:6px;list-style:none;padding:0;margin:38px 0 0;justify-content:center;}
.woocommerce-pagination a,.woocommerce-pagination span{font-family:var(--mono);font-size:.8rem;
  padding:8px 13px;border:1px solid var(--line-hair);border-radius:var(--r);text-decoration:none;display:block;}
.woocommerce-pagination .current{background:var(--pine-100);color:var(--pine-700);border-color:var(--pine-600);}
.woocommerce-result-count{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-400);}
.archive-head{padding:var(--stack) 0 26px;border-bottom:1px solid var(--line-hair);
  margin-bottom:var(--stack);}
.archive-head p{color:var(--ink-500);max-width:60ch;margin-top:8px;font-size:.94rem;}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:26px;}

/* ── article, 404, search ─────────────────────────────── */
/* `padding-block`, never the `padding` shorthand.
   
   This class is always set on the same element as `.wrap`, which supplies the page's side
   gutter with `padding-inline`. The shorthand wrote `0` into the left and right of that
   padding and, sitting later in the cascade, won — so the checkout, the cart, the receipt
   and every account page ran flush to both edges of the window with no gutter at all. Only
   the vertical padding belongs to this class; the horizontal belongs to `.wrap`. */
.page-body{padding-block:var(--stack) var(--band);max-width:68ch;}

/* Cart, checkout and account bring their own tables and columns — a reading measure would
   squeeze the checkout into a gutter.
   
   It restores the page width rather than removing the limit. `max-width:none` also cancelled
   the 1180px cap `.wrap` sets on the very same element, so on a wide monitor the checkout
   stretched the full width of the screen and every field grew with it. Widening past the
   reading measure is the intent; widening past the page is not. */
.page-body--wide{max-width:var(--wrap);}
.search-form{display:flex;gap:10px;margin:22px 0 34px;max-width:520px;}
.search-form label{flex:1;}
.page-body p,.page-body ul,.page-body ol{margin-bottom:18px;}
.page-body h2,.page-body h3{margin:34px 0 12px;}
.page-body a{color:var(--pine-700);}
.results{list-style:none;padding:0;margin:0;}
.results li{padding:20px 0;border-bottom:1px solid var(--line-hair);}
.results a{text-decoration:none;font-weight:600;}

/* ── notices ──────────────────────────────────────────────
   One-shot messages: "sepete eklendi", a form error, a line dropped from the cart. Colour
   is never the only signal — each carries its own words — because the register here is
   quiet and a green box that says nothing is decoration. */
.flashes{padding-top:22px;}
.notice{font-size:.92rem;padding:14px 17px;border:1px solid var(--line-hair);border-radius:var(--r);
  background:var(--surface);margin:0 0 12px;}
.notice--ok{border-color:var(--pine-600);background:var(--pine-100);color:var(--pine-800);}
.notice--warn{border-color:var(--amber-700);color:var(--amber-700);background:var(--paper);}
.notice--error{border-color:var(--rust-700);color:var(--rust-700);background:var(--paper);}

/* A button that reads as a link. Used for the cart's remove controls, which must be
   buttons — they change something — while looking like the small text they are. */
.linkbtn{background:none;border:0;padding:0;font-size:.78rem;color:var(--ink-500);
  text-decoration:underline;text-underline-offset:2px;}
.linkbtn:hover{color:var(--rust-700);}

/* ── cart ─────────────────────────────────────────────────
   A list, not a table. This traffic is overwhelmingly phones arriving from Instagram, and
   a four-column table on a 390px screen either restacks into nonsense or scrolls sideways.
   The media queries stay in this block rather than at the foot of the file: the way a cart
   line restacks only makes sense next to the rules it is undoing. */
.cartlayout{display:grid;grid-template-columns:1fr 360px;gap:52px;align-items:start;padding-top:8px;}

.cartform{margin:0;}
.cartline__media{min-width:0;}
.cartline__body{min-width:0;}
.cartlines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);}
.cartline{display:grid;grid-template-columns:92px 1fr 92px 130px;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line-hair);}
.imgph--thumb{aspect-ratio:1;width:92px;}
.cartline__name{font-weight:600;text-decoration:none;}
.cartline__name:hover{color:var(--pine-700);}

/* The choices made in the configurator, said back plainly. */
.cartline__opts{margin:6px 0 0;font-size:.84rem;color:var(--ink-500);}
.cartline__opts dt,.cartline__opts dd{display:inline;margin:0;}
.cartline__opts dt::after{content:": ";}
.cartline__opts dd::after{content:"";display:block;}
.cartline__sku{font-size:.66rem;letter-spacing:.1em;color:var(--ink-400);margin-top:7px;}

/* Add-ons sit under the product they were bought with — the way they were chosen, the way
   they will be packed, and the way the order table stores them. */
.cartline__addons{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px dashed var(--line-hair);}
.cartline__addons li{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font-size:.86rem;
  margin-bottom:6px;}
.cartline__addons li:last-child{margin-bottom:0;}
.cartline__addons a{text-decoration:none;font-weight:600;}
.cartline__addons a:hover{color:var(--pine-700);}
.cartline__addons .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pine-700);border:1px solid var(--pine-600);border-radius:var(--r);padding:2px 6px;}
.cartline__addonprice{color:var(--ink-500);font-size:.82rem;}

.cartline__qty .qty{width:76px;text-align:center;padding:9px 6px;}
.cartline__money{text-align:right;}
.cartline__total{font-weight:700;white-space:nowrap;}
.cartline__unit{font-size:.68rem;margin-top:3px;}
.cartline__money .linkbtn{margin-top:8px;}
.cartform__actions{display:flex;justify-content:flex-end;padding-top:18px;}

.cart-summary{background:var(--surface);border:1px solid var(--line-hair);border-radius:var(--r);
  padding:24px 26px 22px;position:sticky;top:18px;}
.cart-summary h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;margin:0 0 15px;}
.cart-summary__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
  font-size:.94rem;}
.cart-summary__row--note{color:var(--ink-500);font-size:.82rem;text-align:right;}
.cart-summary__row--total{border-top:1px solid var(--line-strong);margin-top:6px;padding-top:14px;
  margin-bottom:16px;font-weight:700;font-size:1.05rem;}
.btn--block{display:block;width:100%;text-align:center;}
.btn[disabled]{opacity:.45;cursor:default;}
.cart-summary__soon{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  margin-top:9px;}
.cart-summary__back{display:block;text-align:center;margin-top:16px;font-size:.86rem;color:var(--pine-700);}

@media(max-width:900px){
  .cartlayout{grid-template-columns:1fr;gap:34px;}
  .cart-summary{position:static;}
}
@media(max-width:620px){
  /* The line becomes two rows: picture and product across the top, quantity and money
     underneath it. Nothing is hidden — a cart that hides a number loses the order. */
  .cartline{grid-template-columns:72px 1fr;gap:14px 16px;}
  .imgph--thumb{width:72px;}
  .cartline__qty{grid-column:1;}
  .cartline__money{grid-column:2;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;
    gap:10px;}
  .cartline__money .linkbtn{margin-top:0;}
  .cartform__actions{justify-content:stretch;}
  .cartform__actions .btn{width:100%;text-align:center;}
}

/* ── checkout ─────────────────────────────────────────────
   Form on the left, order and the pay button on the right, sticky so the total is in view
   while the address is being filled in. The button lives in the right-hand column but
   belongs to the form in the left-hand one — plain HTML `form="checkout"` ties them
   together, which is the whole reason this needs no script. */
.checkout{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start;}
.checkout__form{min-width:0;}
.checkout__form .acct__section:first-child{margin-top:0;}
.checkout__side{background:var(--surface);border:1px solid var(--line-hair);border-radius:var(--r);
  padding:24px 26px 22px;position:sticky;top:18px;}
.checkout__side > h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;margin:0 0 15px;}
.checkout__side .fld--check{margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--line-hair);}
.checkout__side .fld--check label{align-items:flex-start;font-weight:400;font-size:.84rem;line-height:1.5;}
.checkout__side .fld--check a{color:var(--pine-700);}

/* Work out delivery for the country just typed in. Sits under the address block rather than
   beside the total, because it belongs to the field it acts on — and there is no JavaScript
   here to make the summary follow the box on its own. */
.checkout__recalc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 8px;}
.checkout__recalc small{font-size:.8rem;line-height:1.4;}

.sumlines{list-style:none;margin:0 0 14px;padding:0;}
.sumlines li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-hair);font-size:.88rem;}
.sumlines__what small{display:block;color:var(--ink-500);font-size:.78rem;margin-top:2px;}
.sumlines__qty{color:var(--ink-500);font-size:.76rem;}
.sumlines__money{font-weight:600;white-space:nowrap;}

/* ── thank you ────────────────────────────────────────── */
.thanks{max-width:62ch;margin-bottom:38px;}
.thanks h1{margin:6px 0 12px;}
.thanks .notice{margin-top:16px;}
.thanks__acts{margin-top:34px;}

@media(max-width:900px){
  .checkout{grid-template-columns:1fr;gap:30px;}
  /* The summary goes first on a phone: what it costs, before a form to fill in. */
  .checkout__side{position:static;order:-1;}
}

/* ── checkout (WordPress-era rules, still referenced by the responsive block) ── */
.checkout-guest{font-size:.9rem;color:var(--ink-700);background:var(--pine-100);border-radius:var(--r);
  padding:13px 18px;margin:0 0 24px;}
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.15fr .85fr;column-gap:56px;
  align-items:start;}
/* Explicit placement for all four known children. An error notice must never be pushed
   below the form it belongs to, so it spans and leads. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{grid-column:1/-1;grid-row:1;}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:2/span 2;}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:2;}
.woocommerce-checkout #order_review{grid-column:2;grid-row:3;position:sticky;top:88px;
  background:var(--surface);border:1px solid var(--line-hair);border-radius:var(--r);padding:24px 26px;}
/* Billing above shipping. Side by side inside a checkout column is too narrow for the
   il/ilçe/mahalle fields Hezarfen adds. */
#customer_details .col-2{margin-top:34px;}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - 7px);
  display:inline-block;vertical-align:top;}
.woocommerce form .form-row-first{margin-right:12px;}
.woocommerce form .form-row label{display:block;margin-bottom:6px;color:var(--ink-700);}
.woocommerce form .form-row .required{color:var(--rust-700);text-decoration:none;}
.woocommerce-input-wrapper{display:block;}
#order_review table.shop_table{margin-bottom:0;font-size:.88rem;}
#order_review table.shop_table th{padding-top:0;}
#order_review .product-name{padding-right:14px;}
#order_review .product-quantity{color:var(--ink-500);font-weight:500;}
#order_review .product-total,#order_review td{text-align:right;}
#order_review .product-name,#order_review th{text-align:left;}
#order_review tfoot th{font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--ink-700);font-weight:400;border-bottom:0;}
#order_review tfoot td{border-bottom:0;}
#order_review tfoot .order-total th,#order_review tfoot .order-total td{border-top:1px solid var(--line-strong);
  padding-top:14px;font-weight:700;font-size:1rem;color:var(--ink-900);}

#payment{margin-top:22px;}
#payment ul.payment_methods{list-style:none;margin:0 0 18px;padding:0;background:var(--paper);
  border:1px solid var(--line-hair);border-radius:var(--r);}
#payment ul.payment_methods li{padding:14px 16px;border-bottom:1px solid var(--line-hair);}
#payment ul.payment_methods li:last-child{border-bottom:0;}
#payment ul.payment_methods label{font-weight:600;font-size:.9rem;margin-left:7px;}
#payment ul.payment_methods img{display:inline-block;max-height:26px;width:auto;margin-left:8px;
  vertical-align:middle;}
#payment .payment_box{background:var(--surface-2);border-radius:var(--r);padding:14px 16px;margin-top:12px;
  font-size:.86rem;color:var(--ink-700);}
#payment .payment_box p:last-child{margin-bottom:0;}
/* The distance-selling contract checkbox. Turkish law requires it; it is not fine print. */
#payment .woocommerce-terms-and-conditions-wrapper{font-size:.85rem;margin-bottom:18px;}
#payment .form-row.place-order{margin:0;}
#payment #place_order{width:100%;}

/* ── forms ────────────────────────────────────────────────
   One field, one label, one error. Every form on this site posts to the server and comes
   back rendered — there is no JavaScript to check anything in the browser — so the error
   state has to be legible on the page rather than in a tooltip. */
.fld{margin:0 0 18px;}
.fld > label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;}
/* The "(isteğe bağlı)" marker. Which fields may be left empty is information, not
   decoration — at ink-400 it came out at 3.1:1, and it appears six times on the
   checkout, where a misread costs a form error. ink-500 keeps it quieter than the
   label it follows and still clears AA. */
.fld > label i{font-style:normal;font-weight:400;color:var(--ink-500);font-size:.8rem;}
.fld small{display:block;font-size:.78rem;color:var(--ink-500);margin-top:6px;}
.fld__error{color:var(--rust-700);font-weight:600;}
.fld--error input,.fld--error textarea,.fld--error select{border-color:var(--rust-700);}
.fld--check label{display:flex;align-items:center;gap:10px;font-size:.9rem;cursor:pointer;font-weight:500;}
.fld--check input{width:16px;height:16px;accent-color:var(--pine-600);flex:none;}
.fld--static .fld__label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;}
/* Two fields side by side where they are genuinely one thought — first and last name. */
.fldrow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}

.authpage{max-width:520px;}
.authform{border:1px solid var(--line-hair);border-radius:var(--r);padding:28px;margin-top:22px;}
.authform--flush{border:0;padding:0;margin-top:0;}
.authform__alt{margin:16px 0 0;font-size:.88rem;text-align:center;}
.authform__alt a{color:var(--pine-700);}
/* ── marked points on the hero photograph ─────────────────
   A dot over a thing in the picture; hovering it names the product and its price, and
   clicking goes to the product page.

   No JavaScript. `:hover` shows the card and `:focus-visible` does the same for a keyboard,
   which is the whole interaction — the link works with neither. */
.herofig{position:relative;}

.spot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:2;}

/* The dot. White with a dark ring around it so it reads on a light sky and on dark steel
   alike — a plain white circle disappears against the kettle. */
.spot__dot{display:block;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease);}
.spot:hover .spot__dot,
.spot:focus-visible .spot__dot{transform:scale(1.35);}
.spot:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:50%;}

/* The card. Sits above the dot, centred on it, and is out of the way until asked for.
   `visibility` rather than `display` so the fade has something to animate, and so a screen
   reader still finds the name — the link would otherwise announce as nothing but a dot. */
.spot__card{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);
  min-width:150px;max-width:220px;padding:11px 14px;background:var(--paper);
  border-radius:var(--r);box-shadow:0 6px 24px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);}
.spot:hover .spot__card,
.spot:focus-visible .spot__card{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

.spot__name{display:block;font-size:.86rem;font-weight:600;line-height:1.25;color:var(--ink-900);}
.spot__price{display:block;margin-top:3px;font-size:.86rem;color:var(--ink-700);}

/* A card near the edge of the picture would hang off it, so a dot close to one anchors its
   card to that side instead of centring it. Which side is decided in the template, from the
   coordinate — CSS can only match the `left:` string, and `left:8%` and `left:85%` look the
   same to it. */
.spot--right .spot__card{left:auto;right:-6px;transform:translateY(4px);}
.spot--right:hover .spot__card,
.spot--right:focus-visible .spot__card{transform:translateY(0);}

.spot--left .spot__card{left:-6px;right:auto;transform:translateY(4px);}
.spot--left:hover .spot__card,
.spot--left:focus-visible .spot__card{transform:translateY(0);}

/* Touch has no hover: the card would need a first tap to appear and a second to follow the
   link, which is a thing people give up on. The dot stays — it still says "this is a
   product" — and one tap goes straight to the page. */
@media(hover:none){
  .spot__card{display:none;}
}

/* ── the card form ────────────────────────────────────────
   iyzico draws itself inside `.payform__frame`, so almost nothing here is ours: a measure
   to sit in, room around it, and a centre. Their form is responsive on its own and fights
   any width we impose, so none is imposed — only a maximum, so it does not stretch to a
   desktop's full width and leave the card fields a metre apart. */
.payform{max-width:640px;}
.payform .lede{margin-bottom:26px;}
.payform__order{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);margin:0 0 10px;}
.payform__order strong{font-weight:500;color:var(--ink-700);}
.payform__amount{font-weight:700;color:var(--ink-900);}
.payform__frame{margin:0 auto;min-height:320px;}
.payform__back{margin-top:28px;font-size:.9rem;}
.payform__back a{color:var(--pine-700);}

/* ── contact ──────────────────────────────────────────────
   The telephone number and the address, above the form. Bordered rather than plain so
   it reads as a card of facts and not as the first paragraph of the page — a visitor
   scanning for a phone number should find it without reading anything. */
.contact__direct{margin-top:26px;padding:24px 26px;border:1px solid var(--line-hair);
  border-radius:var(--r);background:var(--surface);}
.contact__direct h2{margin:0 0 14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-500);font-weight:500;}
.contact__list{margin:0;display:grid;gap:9px;}
.contact__list > div{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 18px;}
.contact__list dt{font-size:.78rem;color:var(--ink-500);}
.contact__list dd{margin:0;font-size:.95rem;font-weight:500;}
.contact__list a{color:var(--pine-700);}
@media(max-width:620px){
  .contact__list > div{grid-template-columns:1fr;gap:2px;}
}

/* The honeypot. Off-screen rather than display:none, which some scripts check for, and
   never reachable by keyboard or screen reader — the field is aria-hidden and its input
   carries tabindex="-1". A person who fills this in cannot exist. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.authalt{margin-top:38px;padding-top:28px;border-top:1px solid var(--line-hair);}
.authalt h2{font-size:var(--t-h3);margin-bottom:8px;}
.authalt p{color:var(--ink-700);font-size:.94rem;margin-bottom:16px;}
.addrform{max-width:640px;}

/* ── account ──────────────────────────────────────────────
   Sidebar and content. The sidebar is a plain list of links and a sign-out button, which is
   a form because it changes something — a link that signs you out gets followed by anything
   that prefetches. */
.acct{display:grid;grid-template-columns:212px 1fr;gap:52px;align-items:start;}
.acct__body{min-width:0;}
.acct__body h1{margin-bottom:22px;}
.acct__section{margin-top:38px;}
.acct__section h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;margin:0 0 15px;}
.acct__section h3{font-size:.82rem;color:var(--ink-500);font-weight:600;margin:0 0 8px;}
.acct__help{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-hair);font-size:.9rem;
  color:var(--ink-500);}
.acct__help a{color:var(--pine-700);}

.acctnav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-hair);}
.acctnav li{border-bottom:1px solid var(--line-hair);}
.acctnav a{display:block;padding:13px 2px;font-size:.9rem;font-weight:500;color:var(--ink-700);
  text-decoration:none;}
.acctnav a:hover{color:var(--ink-900);}
.acctnav .is-current a{color:var(--pine-700);font-weight:700;}
.acctnav__out{padding:16px 0 0;}

.emptybox{border:1px dashed var(--line-hair);border-radius:var(--r);padding:34px 28px;text-align:center;}
.emptybox p{color:var(--ink-500);margin-bottom:18px;}

.crumbs--flush{padding-top:0;margin-bottom:14px;}

/* ── orders ───────────────────────────────────────────── */
.orderlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);}
.orderrow{display:grid;grid-template-columns:1fr auto auto auto;gap:20px;align-items:center;
  padding:17px 0;border-bottom:1px solid var(--line-hair);}
.orderrow__no a{font-family:var(--mono);font-weight:600;text-decoration:none;display:block;}
.orderrow__no a:hover{color:var(--pine-700);}
.orderrow__no span{font-size:.68rem;display:block;margin-top:3px;}
.orderrow__state{min-width:0;}
.orderrow__money{text-align:right;}
.orderrow__money .num{font-weight:600;display:block;}
.orderrow__money .mono{font-size:.66rem;}
.orderrow__go a{font-size:.84rem;color:var(--pine-700);text-decoration:none;white-space:nowrap;}

/* Status. Colour is never the only signal — each chip carries the word too. */
.statechip{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r);border:1px solid var(--line-hair);color:var(--ink-500);
  white-space:nowrap;}
.statechip--live{border-color:var(--pine-600);background:var(--pine-100);color:var(--pine-800);}
.statechip--done{border-color:var(--line-strong);color:var(--ink-700);}
.statechip--halted{border-color:var(--rust-700);color:var(--rust-700);}

/* ── order detail ─────────────────────────────────────── */
.ordermeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line-hair);border:1px solid var(--line-hair);border-radius:var(--r);
  overflow:hidden;margin:0 0 34px;}
.ordermeta > div{background:var(--paper);padding:15px 18px;}
.ordermeta .lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);display:block;}
.ordermeta strong{display:block;margin-top:5px;font-size:.95rem;font-weight:600;color:var(--ink-900);}

.orderitems{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);}
.orderitem{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:start;padding:16px 0;
  border-bottom:1px solid var(--line-hair);}
.orderitem__what{min-width:0;}
.orderitem__name{font-weight:600;display:block;}
.orderitem__sku{display:block;font-size:.66rem;letter-spacing:.1em;color:var(--ink-400);margin-top:4px;}
.orderitem__addons{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line-hair);}
.orderitem__addons li{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font-size:.86rem;
  margin-bottom:5px;}
.orderitem__qty{color:var(--ink-500);font-size:.84rem;white-space:nowrap;}
.orderitem__money{font-weight:600;white-space:nowrap;}

.ordertotals{margin:18px 0 0;max-width:340px;margin-left:auto;}
.ordertotals > div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.92rem;}
.ordertotals dt,.ordertotals dd{margin:0;}
.ordertotals__total{border-top:1px solid var(--line-strong);margin-top:6px;padding-top:12px;
  font-weight:700;font-size:1.02rem;}

/* ── addresses ────────────────────────────────────────── */
.addrgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.addrcard{border:1px solid var(--line-hair);border-radius:var(--r);padding:22px 24px;}
.addrcard.is-default{border-color:var(--pine-600);}
.addrcard__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;}
.addrcard__head h2{font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--ink-900);font-weight:700;margin:0;}
.addrcard__acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-hair);font-size:.82rem;}
.addrcard__acts a{color:var(--pine-700);text-decoration:none;}
.addrcard__acts form{display:inline;}
.linkbtn--danger:hover{color:var(--rust-700);}
.addr{font-style:normal;font-size:.9rem;color:var(--ink-700);line-height:1.7;}
.addr span{display:block;}
.tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pine-700);border:1px solid var(--pine-600);border-radius:var(--r);padding:2px 6px;
  white-space:nowrap;}

/* Four steps on a rail. The dot sits over the rail, so the rail is drawn per step and
   the last one's is dropped — otherwise it runs off past the final dot. */
.otl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 20px;padding:0;}
.otl__step{position:relative;padding:26px 14px 0 0;font-size:.86rem;color:var(--ink-400);}
.otl__step::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:var(--line-hair);}
.otl__step:last-child::before{content:none;}
.otl__step::after{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--line-hair);}
.otl__step.is-done{color:var(--ink-900);}
.otl__step.is-done::before{background:var(--pine-600);}
.otl__step.is-done::after{background:var(--pine-600);border-color:var(--pine-600);}
.otl__label{display:block;font-weight:600;}
.otl__when{display:block;margin-top:3px;font-size:.68rem;letter-spacing:.05em;color:var(--ink-400);}
.otl--halted{margin:0 0 28px;}
.otl__tracking{font-size:.88rem;margin:0 0 32px;}
.otl__tracking a{color:var(--pine-700);}

@media(max-width:900px){
  .woocommerce-checkout form.checkout{display:block;}
  .woocommerce-checkout #order_review{position:static;margin-top:30px;}

  /* The account sidebar becomes a row of links above the content. It is four items; a
     drawer would need a script and a full-width stack would push the page down. */
  .acct{grid-template-columns:1fr;gap:26px;}
  .acctnav ul{display:flex;flex-wrap:wrap;gap:0 22px;border-top:0;border-bottom:1px solid var(--line-hair);}
  .acctnav li{border-bottom:0;}
  .acctnav a{padding:8px 0;}
  .acctnav__out{padding-top:10px;}
  .addrgrid{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .fldrow{grid-template-columns:1fr;}
  /* The order row stacks: number and status on one line, money and the link under it. */
  .orderrow{grid-template-columns:1fr auto;gap:10px 16px;}
  .orderrow__money{grid-column:1;text-align:left;}
  .orderrow__go{grid-column:2;text-align:right;}
  .orderitem{grid-template-columns:1fr auto;}
  .orderitem__qty{grid-column:1;}
  .ordertotals{max-width:none;}
}
@media(max-width:760px){
  /* shop_table_responsive carries data-title on every cell; WooCommerce's own stylesheet
     is dequeued, so the stacking is ours to draw. */
  table.shop_table_responsive thead{display:none;}
  table.shop_table_responsive tr{display:block;padding:14px 0;border-bottom:1px solid var(--line-hair);}
  table.shop_table_responsive td{display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:5px 0;border-bottom:0;text-align:right;}
  table.shop_table_responsive td::before{content:attr(data-title);font-family:var(--mono);font-size:.62rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);text-align:left;}
  table.shop_table_responsive td.product-remove::before,
  table.shop_table_responsive td.product-thumbnail::before,
  table.shop_table_responsive td.actions::before{content:none;}
  table.shop_table_responsive td.product-thumbnail{justify-content:flex-start;}
  table.shop_table_responsive td.actions{justify-content:flex-end;padding-top:14px;}
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;margin-right:0;}
}
@media(max-width:620px){
  .otl{grid-template-columns:1fr;}
  .otl__step{padding:0 0 18px 26px;}
  .otl__step::before{top:12px;bottom:-6px;left:5px;right:auto;width:1px;height:auto;}
  .otl__step::after{top:5px;}
  .otl__step:last-child{padding-bottom:0;}
}

/* ── footer ───────────────────────────────────────────── */
.site-footer{background:var(--ink-900);color:var(--ink-300);padding:56px 0 44px;font-size:.86rem;}
.site-footer a{color:var(--ink-300);text-decoration:none;}
.site-footer a:hover{color:var(--paper);}
.site-footer .logo{color:var(--paper);margin-bottom:12px;display:inline-block;}
.site-footer h4,.site-footer .menu-title{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);margin-bottom:13px;font-weight:500;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li > a{display:block;margin-bottom:7px;}
/* ── social links ─────────────────────────────────────────
   Inline SVG inheriting the footer's ink through currentColor, so there is no second palette
   to keep in step. Deliberately quiet — a row of small outlines under the tagline, not a set
   of brand-coloured badges. The tap target is 40px square even though the glyph is 20, which
   is what makes them usable with a thumb. */
.soc{display:flex;gap:6px;margin-top:16px;}
.soc__link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  margin-left:-9px;color:var(--ink-400);border-radius:var(--r);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);}
.soc__link:first-child{margin-left:-9px;}
.soc__link:hover{color:var(--paper);background:var(--line-hair-dark);}
.soc__link:focus-visible{color:var(--paper);}
.soc__icon{display:block;}

.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;margin-bottom:38px;}
.foot-cols > div > p{color:var(--ink-400);max-width:34ch;}
.foot-fine{border-top:1px solid var(--line-hair-dark);padding-top:22px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.06em;color:var(--ink-400);}
/* The guarantee used to sit here on its own, in a little bordered box. It now lives in the
   footer's company column next to the repair page, where it reads as a promise rather than
   as fine print — so the fine line is back to what it is for: where things are made, and
   the year. */

/* ── responsive ───────────────────────────────────────── */
@media(max-width:900px){
  .hero .grid,.pdp,.guide{grid-template-columns:1fr;gap:30px;}
  .foot-cols{grid-template-columns:1fr 1fr;}
  .famcols ul{grid-template-columns:1fr;}

  /* Two per row below 900px. Five tiles would be 160px each here and the longer names — Ateş
     Araçları, Taşıma ve Kumaş — wrap to two lines at that width. Two is the other divisor of
     ten that keeps the rows even; three would leave 3+3+3+1. */
  .famcard{flex-basis:calc(50% - 1px);min-width:0;}

  /* No burger, because a burger needs a script to open.
     The header becomes two rows instead: logo, language and cart across the top, the three
     navigation links underneath. Everything is visible and reachable with one tap, which is
     both fewer taps than a drawer and one less thing that can fail to load.
     The hover panel is suppressed here — "Ürünler" is a link to the full range, and on a
     phone that page is the better answer than a dropdown. */
  /* Two rows, but tight ones. The header is sticky, and every pixel it takes is a pixel of
     product nobody sees on a 812px phone screen. */
  .hdr{padding:11px 0;gap:14px;}
  .nav-main{order:3;width:100%;gap:20px;border-top:1px solid var(--line-hair);padding-top:7px;
    margin-top:1px;overflow-x:auto;}
  .navlink{white-space:nowrap;padding:4px 0;}
  .panel{display:none;}
  .chev{display:none;}

  /* The header is two rows here, so a jump needs to clear more than it does on a desktop.
     Measured, not guessed: 112px of header plus room to breathe. */
  .sec[id]{scroll-margin-top:132px;}
}
@media(max-width:620px){
  /* The whole vertical rhythm tightens at once, because it is one scale rather than a set
     of separate numbers. 72px of empty band is a third of a phone screen spent on nothing. */
  :root{--band:48px;--band-tight:36px;--stack:24px;}

  .hero{padding:44px 0;}
  /* Still two per row on a phone — the 900px rule already set that; this only tightens the
     padding, which the whole scale does at this width. */
  .famcard{padding:16px;}
  .pdp{padding-bottom:var(--band);}
  /* Sticky is wrong in a single column — it would pin the photograph over the buy form. */
  .pdp__media{position:static;}

  /* Two up on a phone. One card per screen turns 18 grills into eighteen screens of
     scrolling, and this is the primary case — Instagram traffic is overwhelmingly phones.
     Forced to two columns rather than left to auto-fill, which would give one. */
  .products{grid-template-columns:1fr 1fr;gap:26px 14px;}
  .card h3{font-size:.92rem;}
  .card__spec,.card__opts{margin-bottom:8px;}
}

/* ── written pages ────────────────────────────────────────
   The contract, privacy, delivery and returns. One narrow column and nothing beside it: these
   are read rather than scanned, and a legal document set next to a row of product cards reads
   as something to skip past. The measure is set for reading, not for the grid. */
.doc{max-width:68ch;margin:0 auto;}
.doc h1{font-size:var(--t-h1);line-height:1.12;letter-spacing:-.02em;margin-bottom:14px;}
.doc__intro{margin-bottom:30px;}
.doc h2{font-size:1.02rem;font-weight:700;margin:34px 0 10px;letter-spacing:-.01em;}
.doc p{margin-bottom:14px;color:var(--ink-700);}
/* A definition lifted out of the scraped two-column table: term, dash, meaning. */
.doc__term{padding-left:16px;border-left:2px solid var(--line-hair);color:var(--ink-700);}
/* Who the seller is. Boxed because it is the one block a reader may be hunting for — the
   address a cancellation notice has to go to. */
.doc__seller{background:var(--surface);border:1px solid var(--line-hair);border-radius:var(--r);
  padding:20px 22px;margin-bottom:32px;}
.doc__seller h2{margin:0 0 12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-500);font-weight:500;}
.doc__seller dl{margin:0;display:grid;gap:9px;}
.doc__seller dl > div{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:6px 18px;}
.doc__seller dt{font-size:.78rem;color:var(--ink-500);}
.doc__seller dd{margin:0;font-size:.88rem;font-weight:500;}
@media(max-width:620px){
  .doc__seller dl > div{grid-template-columns:1fr;gap:2px;}
}

/* ── product gallery ──────────────────────────────────────
   Several photographs of one product, with no JavaScript: a hidden radio per shot, the
   thumbnails below are its labels, and the sibling combinator shows whichever is checked.
   The same technique the configurator uses — and like the configurator, the page is correct
   before any of it applies: without the stylesheet every shot simply stacks. */
.gal{display:flex;flex-direction:column;gap:12px;}
.gal__stage{position:relative;}
.gal__shot{display:none;}
.gal__shot .ph{aspect-ratio:1.15;width:100%;}

/* One rule per position, zero to nine. Ten is the cap the importer will fetch to, and a
   handful of explicit rules is clearer here than a selector nobody can read six months
   later. A position with no photograph simply never gets a radio, so the spare rules cost
   nothing; a photograph past the last rule would be unreachable, which is why this list has
   to stay at or above the importer's cap. */
#gal-0:checked ~ .gal__stage .gal__shot--0,
#gal-1:checked ~ .gal__stage .gal__shot--1,
#gal-2:checked ~ .gal__stage .gal__shot--2,
#gal-3:checked ~ .gal__stage .gal__shot--3,
#gal-4:checked ~ .gal__stage .gal__shot--4,
#gal-5:checked ~ .gal__stage .gal__shot--5,
#gal-6:checked ~ .gal__stage .gal__shot--6,
#gal-7:checked ~ .gal__stage .gal__shot--7,
#gal-8:checked ~ .gal__stage .gal__shot--8,
#gal-9:checked ~ .gal__stage .gal__shot--9{display:block;}

.gal__thumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.gal__thumb{display:block;cursor:pointer;border:1px solid var(--line-hair);border-radius:var(--r);
  overflow:hidden;background:var(--paper);transition:border-color var(--dur) var(--ease);}
.gal__thumb:hover{border-color:var(--line-strong);}
.gal__thumb .ph{display:block;width:72px;height:72px;aspect-ratio:1;object-fit:cover;border-radius:0;}

/* The chosen thumbnail. Border rather than opacity on the others: dimming three photographs
   to highlight one makes the whole strip look switched off. */
#gal-0:checked ~ .gal__thumbs .gal__thumb--0,
#gal-1:checked ~ .gal__thumbs .gal__thumb--1,
#gal-2:checked ~ .gal__thumbs .gal__thumb--2,
#gal-3:checked ~ .gal__thumbs .gal__thumb--3,
#gal-4:checked ~ .gal__thumbs .gal__thumb--4,
#gal-5:checked ~ .gal__thumbs .gal__thumb--5,
#gal-6:checked ~ .gal__thumbs .gal__thumb--6,
#gal-7:checked ~ .gal__thumbs .gal__thumb--7,
#gal-8:checked ~ .gal__thumbs .gal__thumb--8,
#gal-9:checked ~ .gal__thumbs .gal__thumb--9{border-color:var(--pine-600);}

/* Keyboard: the radio is off-screen, so the ring has to appear on the label it drives. */
.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--0,
#gal-0.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--0,
#gal-1.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--1,
#gal-2.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--2,
#gal-3.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--3,
#gal-4.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--4,
#gal-5.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--5,
#gal-6.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--6,
#gal-7.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--7,
#gal-8.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--8,
#gal-9.gal__pick:focus-visible ~ .gal__thumbs .gal__thumb--9{outline:2px solid var(--pine-600);outline-offset:2px;}

/* ── designs with their own photograph ────────────────────
   The tin patterns. Each design's shot is hidden until its box is ticked, and the plain
   product photograph stands until one is. The revealing rules name this product's own option
   values, so they are generated per product and inlined in <head> — the same arrangement the
   configurator's prices use, and for the same reason.

   Ticking three designs shows three photographs. That is the honest answer: three tins is
   what would arrive. */
.desens{display:grid;gap:10px;}
/* The two default states, written out rather than left implicit: the product shot shows and
   the design shots do not. The inline rules per product only ever reverse them. */
.desens__default{display:block;}
.desens__shot{display:none;}
.desens .ph{width:100%;}