/* Assistant, the face Myntra sets its shop in. Open Font Licence, served from this shop rather
   than from Google: a third party does not need to be told every page a shopper opens, and one
   31 KB variable file covering 400-700 beats four requests to somebody else's CDN. */
@font-face {
  font-family: Assistant;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/assistant-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Assistant;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/assistant-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair for the headings, Inter for everything the shopper operates. Served from this shop
   rather than a font CDN, for the same reason Assistant is: nobody outside needs to be told which
   page each shopper opens, and two files beat four requests to somebody else's server. */
@font-face {
  font-family: Playfair;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/playfair-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Adaa Bazaar's own colour. Overridden per shop from configuration; everything else here is
     built from it rather than repeating a hex. */
  --brand: #770737;
  --gold: #b88646;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --line: #e8e2dd;
  --paper: #faf8f6;
  --surface: #ffffff;
  --tint: #f5ecef;
  --accent: var(--brand);
  --sale: #1e8e5a;

  --radius: 12px;
  --radius-card: 16px;
  --wrap: 1180px;
  /* Prose reads badly past about 1180px, but a rail of garments is not prose: capping it there
     left roughly 190px dead down each side of a laptop and 370px of a desktop, and fitted four
     pieces to a row where five go. Text pages keep the narrow measure. */
  --wrap-wide: 1480px;
  /* What the account links need spelled out, and so what the mark's side is held to. */
  --header-side: 180px;

  --lift: 0 1px 2px rgba(31, 31, 31, 0.04), 0 8px 24px rgba(31, 31, 31, 0.06);
  --lift-hover: 0 2px 6px rgba(31, 31, 31, 0.06), 0 16px 40px rgba(31, 31, 31, 0.10);
  --ease: 200ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 Inter, Assistant, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.wide { max-width: var(--wrap-wide); }
/* The header, the announcement bar and the footer span the shop, not the text column: left at the
   narrow measure they stopped lining up with a rail the moment the rail was widened, and a logo
   150px inboard of the first garment reads as a mistake. */
.announce .wrap, .site-header .wrap, .nav.wrap, .mega-inner, .site-footer .wrap,
.site-footer .footer-top {
  max-width: var(--wrap-wide);
}

h1, h2, h3, .serif { font-family: Playfair, Georgia, "Times New Roman", serif; font-weight: 500;
  letter-spacing: -0.01em; }

.site-header { border-bottom: 1px solid var(--line); background: #fff; position: relative; }
/* Two bands, and the split is the point. Row one is the shop's own controls - mark, search,
   account. Row two is the headings, which get the whole width to themselves.
   Everything on one row was tried and measured: nine headings, the mark, the search box and three
   account links fit only between 1457 and 1533px, and spilled the account links onto a second row
   at every other width. A second row that is designed reads as structure; the same row arrived at
   by overflow reads as a fault. Given its own band the nav can take a tenth heading and nothing
   above it moves.
   Each heading opens onto what hangs under it. Hover or keyboard focus opens the panel - no
   script - and the heading is itself a link, so a phone lands on a page listing the same groups
   instead of a menu it cannot open. */
/* Three tracks rather than a flex row, so the search box is centred on the page rather than
   centred in what the mark and the account links leave over - those two are 96px and 175px wide,
   so anything that centres between them sits off to one side. The outer tracks take equal shares
   of the remainder whatever they hold. */
.site-header .header-top { display: grid; align-items: center; gap: 24px; min-height: 64px;
  padding-top: 6px; padding-bottom: 6px;
  /* Both outer tracks share one floor rather than each taking its own content width. Left to
     themselves the mark needs 77px and the account links 175, so the row tightens unevenly and
     the middle drifts off centre. Held to the same figure they stay equal at every width, and
     the search box - which has the most to spare - is what gives way. */
  grid-template-columns:
      minmax(var(--header-side), 1fr) minmax(0, 598px) minmax(var(--header-side), 1fr); }
.site-header .header-top > .brand { justify-self: start; }
.site-header .header-top > .header-icons { justify-self: end; }
.brand { font-family: Playfair, Georgia, serif; font-size: 22px; letter-spacing: 0.5px; white-space: nowrap;
  flex: 0 0 auto; }
.brand span { color: var(--accent); }

.nav-band { border-top: 1px solid var(--line); }
/* Centred, because the row holds nothing else to align to. */
.nav { display: flex; justify-content: center; gap: 0 26px; flex-wrap: wrap; }
.nav-item { position: static; }
/* Quieter than it was. At 700 weight in caps, nine headings read as a wall; with the whole row
   to spread across they can be spaced instead of shouted. */
.nav-top { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
  padding: 13px 0 12px; border-bottom: 2px solid transparent; }
/* One mark, one colour, whether it is the page she is on or the panel she has open. Two marks in
   two colours at once was read as a fault rather than as two different facts. */
.nav-item:hover .nav-top, .nav-item:focus-within .nav-top,
.nav-top.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* Spans the header rather than the heading: a panel the width of the word "Blouses" cannot hold
   seven groups, and the shop is 1200px wide whatever the heading is called. */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(29, 26, 23, 0.14);
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
.nav-item:hover .mega, .nav-item:focus-within .mega {
  visibility: visible; opacity: 1; transform: none; }
/* No max-width here. It is set once, with the header and the footer, so the panel lines up with
   the mark above it - setting it again lower down is what put the two 130px out of step. */
.mega-inner { margin: 0 auto; padding: 22px 20px 26px; }
.mega-head { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--accent); }
.mega-links { columns: 200px; column-gap: 30px; }
.mega-links a { display: block; padding: 5px 0; font-size: 14px; color: var(--muted);
  break-inside: avoid; }
.mega-links a:hover, .mega-links a.is-active { color: var(--ink); font-weight: 600; }
.mega-all { display: inline-block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--accent); }
.mega-all:hover { text-decoration: underline; }


.hero { padding: 56px 0 32px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 10px; }
.hero p { color: var(--muted); margin: 0; max-width: 60ch; }

.page-head { padding: 40px 0 20px; }
.page-head h1 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 6px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a:hover { color: var(--ink); }

/* The rail on the left, the pieces on the right — the shape a shop this size wants, and the reason
   a page of choices reads as a list rather than a form spread across the top. */
.listing { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 36px;
  align-items: start; }
.rail { position: sticky; top: 14px; }
.rail-open > summary { display: none; }
.rail-head { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); }
.rail-groups { display: flex; flex-direction: column; gap: 1px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line); }
.rail-groups a { padding: 5px 0; font-size: 14px; color: var(--muted); }
.rail-groups a:hover, .rail-groups a.is-active { color: var(--ink); }

.filters { display: block; padding: 18px 0 0; }
.filters > div { margin-bottom: 15px; }
.filters label { display: block; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.filters select {
  font: inherit; padding: 8px 10px; width: 100%; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit;
}
.filters .clear { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--muted);
  text-decoration: underline; }
.filters .clear:hover { color: var(--accent); }
.more-filters { margin-bottom: 14px; }
.more-filters > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
  padding: 8px 0; list-style: none; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::before { content: "+ "; }
.more-filters[open] > summary::before { content: "\2212 "; }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 18px; }
.results-head .count { margin: 0; font-size: 13px; color: var(--muted); }
.sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sort span { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.sort select { font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: inherit; }

.grid { display: grid; gap: 26px 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding: 0 0 50px; }
.grid[aria-busy="true"] { opacity: 0.45; transition: opacity 120ms ease; }

.card-media { position: relative; background: #efeae1; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-media img { transform: scale(1.02); }
.card-media img { transition: transform 300ms ease; }
.card h3 { font: 400 16px/1.4 Georgia, serif; margin: 12px 0 4px; }
.card .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .now { font-size: 15px; }
.card .was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.card .off { font-size: 13px; color: var(--sale); }

.badge {
  position: absolute; top: 10px; left: 10px; background: rgba(29,26,23,0.82); color: #fff;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 9px; border-radius: 2px;
}
.badge.sold { background: rgba(109,102,93,0.9); }

.empty { padding: 60px 0; color: var(--muted); text-align: center; }

.pdp { display: grid; gap: 44px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 30px 0 70px; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 28px; } }

.gallery-main { background: #efeae1; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.thumbs button {
  width: 68px; aspect-ratio: 3 / 4; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); border-radius: 2px; background: #efeae1;
}
.thumbs button[aria-current="true"] { border-color: var(--ink); }

.pdp h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 8px; }
.pdp .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.pdp .now { font-size: 24px; }
.pdp .was { color: var(--muted); text-decoration: line-through; }
.pdp .off { color: var(--sale); }
.tax-note { font-size: 13px; color: var(--muted); margin: 0 0 22px; }

.option { margin-bottom: 20px; }
.option .label { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  font: inherit; font-size: 14px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.swatch[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.stock { font-size: 14px; margin: 0 0 18px; }
.stock.in { color: var(--sale); }
.stock.low { color: var(--accent); }
.stock.out { color: var(--muted); }

.add {
  font: inherit; font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  width: 100%; padding: 15px 20px; cursor: pointer; color: #fff; background: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius);
}
.add:hover { filter: brightness(1.12); }
.add[disabled] { background: var(--muted); border-color: var(--muted); cursor: not-allowed; }

.specs { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; }
.specs h2 { font-size: 18px; margin: 0 0 12px; }
.specs dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
.desc { color: #3a3630; }

.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 30px 0; margin-top: 40px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

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

.bag { margin-left: auto; font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; }
.bag-count {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px;
  background: var(--accent); color: #fff; border-radius: 10px;
  font-size: 12px; letter-spacing: 0; text-align: center;
}

.flash-area:empty { display: none; }
.flash { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 18px; font-size: 15px; }
.flash.error { background: #fbe9ec; color: #7d1a2f; border: 1px solid #f0c9d1; }
.flash.notice { background: #e9f3ec; color: #1f5c38; border: 1px solid #c8e2d2; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; padding: 10px 0 70px; align-items: start; }
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; gap: 28px; } }

.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line:first-of-type { border-top: 1px solid var(--line); }
.cart-thumb { display: block; background: #efeae1; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-detail h3 { font: 400 17px/1.4 Georgia, serif; margin: 0 0 6px; }
.cart-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px; display: flex; gap: 12px; flex-wrap: wrap; }
address.cart-meta { display: block; font-style: normal; line-height: 1.7; }
.cart-price { text-align: right; white-space: nowrap; }
.cart-price strong { font-weight: 500; }

.qty-form { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.qty-form label { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.qty-form input { font: inherit; width: 72px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.linkish { font: inherit; font-size: 13px; padding: 0; cursor: pointer; background: none; border: 0; color: var(--muted); text-decoration: underline; }
.linkish:hover { color: var(--ink); }
.linkish.danger:hover { color: var(--accent); }

.summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; }
.summary h2 { font-size: 18px; margin: 0 0 14px; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 12px; font-size: 15px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; }
.summary-lines { list-style: none; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 18px; font-size: 18px; }
a.add { display: block; text-align: center; }

.field { margin-bottom: 18px; flex: 1 1 180px; }
.field label { display: block; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  font: inherit; width: 100%; padding: 11px 13px; background: #fff; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-error { color: var(--accent); font-size: 13px; margin: 6px 0 0; }
.field-note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.field-note.is-wrong { color: var(--accent); }
.payment-note { color: var(--muted); font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.noscript-variant { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

@media (max-width: 700px) {
  .site-header .header-top { display: flex; flex-wrap: wrap; gap: 10px 16px;
    padding-top: 12px; padding-bottom: 12px; }
  /* Nothing to centre against on a phone, and the headings are more than a screen wide, so the
     band scrolls sideways from the left rather than stacking one word per line. */
  .site-header .nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    gap: 18px; padding-bottom: 2px; scrollbar-width: none; }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .nav-top { padding: 8px 0; border-bottom-width: 2px; }
  /* No hover to open it with, and a floating panel over a strip is a trap. The heading is a link:
     its page lists the same groups along the top. */
  .mega { display: none; }
  /* One column: the rail folds into a control above the pieces rather than eating the screen
     before a shopper has seen a single garment. */
  .listing { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { position: static; margin-bottom: 18px; }
  .rail-open > summary { display: block; cursor: pointer; font-size: 13px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase; padding: 12px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .rail-groups { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
  .rail-groups a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 16px; }
  .filters .more-filters, .filters .stock-filter, .filters .clear { grid-column: 1 / -1; }
  /* Two to a row: one garment per screen turns a rail into a slideshow. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .card h3 { font-size: 14px; }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-price { grid-column: 2; text-align: left; }
}

.account { font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.account:hover { color: var(--ink); }

.auth-shell { display: grid; place-items: center; padding: 50px 20px 80px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; }
.auth-card h1 { font-size: 26px; margin: 0 0 20px; }

.order-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px 18px; margin-bottom: 14px; }
.order-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  align-items: baseline; }
.order-head a { font-family: Georgia, serif; font-size: 17px; }
.order-head > div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.order-items { margin: 8px 0 0; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 11px; font-size: 11px;
  letter-spacing: 0.7px; background: #ece7df; color: #554f47; }
.pill.PLACED { background: #e3ecf6; color: #1f4468; }
.pill.PACKED { background: #f3ecd9; color: #6b5316; }
.pill.SHIPPED { background: #e4eef0; color: #1d5057; }
.pill.DELIVERED { background: #e2f0e6; color: #1f5c38; }
.pill.CANCELLED { background: #f6e3e7; color: #7d1a2f; }

.card { position: relative; }
.save-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.save {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted); background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line); border-radius: 50%;
}
.save:hover { color: var(--accent); border-color: var(--accent); }
.save[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }

.save-inline { margin: 12px 0 0; }
.save-wide { display: inline-flex; align-items: center; gap: 9px; width: 100%; justify-content: center; }
.save-wide[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }

.reviews { border-top: 1px solid var(--line); padding: 34px 0 70px; max-width: 760px; }
.reviews h2 { font-size: 24px; margin: 0 0 10px; }
.rating-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.stars { color: var(--accent); letter-spacing: 2px; }
.review { border-top: 1px solid var(--line); padding: 18px 0; }
.review h3 { font: 400 17px/1.4 Georgia, serif; margin: 0 0 6px; }
.review p { margin: 0 0 6px; }
.review-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.verified { font-size: 12px; letter-spacing: 0.5px; color: var(--sale); border: 1px solid #c8e2d2;
  background: #e9f3ec; border-radius: 10px; padding: 2px 8px; }
.review-form { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
.review-form h3 { font: 400 19px/1.3 Georgia, serif; margin: 0 0 4px; }
.review-form .field { max-width: 420px; }
.review-form textarea, .review-form select, .review-form input {
  font: inherit; width: 100%; padding: 11px 13px; background: #fff; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.review-form .add { max-width: 260px; }
.google-cta { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px;
  color: var(--muted); font-size: 15px; }
.google-cta a { text-decoration: underline; }
.site-footer a { text-decoration: underline; }

.coupon-form { border-top: 1px solid var(--line); margin: 14px 0 0; padding-top: 14px; }
.coupon-form label { display: block; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { font: inherit; flex: 1 1 auto; min-width: 0; padding: 10px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); text-transform: uppercase; }
.coupon-form .linkish { font: inherit; font-size: 13px; padding: 0; cursor: pointer; background: none;
  border: 0; color: var(--muted); text-decoration: underline; }
.coupon-form .linkish:hover { color: var(--accent); }

.collection-intro { max-width: 65ch; color: var(--muted); margin: 8px 0 0; }
.subnav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.subnav a { font-size: 14px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 16px; background: #fff; color: var(--muted); }
.subnav a:hover { border-color: var(--ink); color: var(--ink); }

.prose { max-width: 68ch; padding-bottom: 60px; color: #3a3630; }
.prose h2 { font: 400 21px/1.35 Georgia, serif; margin: 28px 0 10px; color: var(--ink); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

.site-footer { padding-top: 0; }
.footer-pages { border-bottom: 1px solid var(--line); padding: 18px 0; margin-bottom: 22px; }
.footer-pages .wrap { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-pages a { font-size: 14px; color: var(--muted); text-decoration: none; }
.footer-pages a:hover { color: var(--ink); text-decoration: underline; }

.post-grid { display: grid; gap: 30px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 20px 0 50px; }
.post-card a { display: block; }
.post-cover { background: #efeae1; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 2; margin-bottom: 12px; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card h2, .post-card h3 { font: 400 20px/1.35 Georgia, serif; margin: 0 0 6px; }
.post-card h3 { font-size: 17px; }
.post-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.post-summary { color: #3a3630; margin: 0; }

.post { max-width: 68ch; padding-bottom: 20px; }
.post h1 { font-size: clamp(26px, 4vw, 38px); margin: 24px 0 8px; }
.post-hero { background: #efeae1; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 2; margin: 20px 0 26px; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.more-reading { border-top: 1px solid var(--line); margin-top: 20px; }
.more-reading h2 { font: 400 22px/1.3 Georgia, serif; margin: 28px 0 4px; }

.pay-choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer;
  color: var(--ink); font-size: 15px; }
.pay-choice input { margin-top: 4px; }
.flash.error[hidden] { display: none; }

.return-line { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 14px 0; }
.return-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.return-controls input[type=number] { font: inherit; width: 72px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.return-controls label { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); }
.exchange-pick { font: inherit; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; }
.steps { margin: 0; padding-left: 20px; color: var(--muted); }
.steps li { padding: 3px 0; }
.steps li.done { color: var(--ink); }

.account-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 24px; font-size: 14px;
  letter-spacing: 0.4px; }
.account-nav a { color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.account-nav a:hover { color: var(--ink); }
.account-nav a.here { color: var(--ink); border-bottom-color: var(--ink); }

.account-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px 18px; margin-bottom: 14px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-actions form { margin: 0; }
.account-actions .swatch { text-decoration: none; display: inline-block; }
.account-form { max-width: 640px; }
.account-form textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; }
.add.narrow { display: inline-block; width: auto; text-align: center; text-decoration: none; }

.saved-addresses { margin-bottom: 26px; }
.saved-address { display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 12px 14px; margin-bottom: 8px; color: inherit; }
.saved-address strong { display: block; font-weight: 600; }
.saved-address.chosen { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.parcel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px 18px; margin-top: 22px; }
.parcel h2 { margin-top: 0; }
.parcel .trail { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
.parcel .trail li { padding: 8px 0; border-top: 1px solid var(--line); display: flex;
  flex-wrap: wrap; gap: 10px; align-items: baseline; }

.not-found { padding: 60px 20px 90px; max-width: 620px; }
.not-found h1 { margin-top: 0; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-top: 26px; }

.search-form { display: flex; gap: 8px; margin: 0; align-items: center; }
.search-form input {
  font: inherit; font-size: 14px; padding: 8px 12px; width: 102px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); color: inherit;
}
.search-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.search-form.wide { margin-bottom: 26px; }
.search-form.wide input { width: min(420px, 100%); font-size: 15px; padding: 11px 14px; }

/* The mark is square, so it is held to the header's height rather than its own. */
.brand img { display: block; height: 34px; width: auto; }
.brand .wordmark { display: inline; }
.brand span span { color: var(--brand); }
@media (max-width: 700px) { .brand img { height: 36px; } }

/* Banners. The row scrolls and snaps without any script; the controls are added by one. */
.carousel { position: relative; margin: 0 -20px 34px; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.slide img { width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; }
.slide-words {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px;
  display: grid; gap: 8px; justify-items: start; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}
.slide-words h1 { margin: 0; font-size: clamp(24px, 4vw, 40px); }
.slide-words p { margin: 0; max-width: 46ch; }
.slide-words .add { width: auto; margin-top: 6px; }

.carousel-controls { position: absolute; inset: auto 0 12px; display: flex; gap: 10px;
  align-items: center; justify-content: center; }
.carousel-arrow {
  font: inherit; font-size: 20px; line-height: 1; width: 34px; height: 34px; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, 0.45); border: 0; border-radius: 50%;
}
.carousel-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.carousel-dots { display: flex; gap: 7px; }
.carousel-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.55); }
.carousel-dot[aria-current="true"] { background: #fff; }
.carousel-arrow:focus-visible, .carousel-dot:focus-visible { outline: 2px solid #fff;
  outline-offset: 2px; }

.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
  margin-bottom: 34px; }
.promo { position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #fff; color: inherit; }
.promo img { width: 100%; height: 200px; object-fit: cover; }
.promo-words { display: grid; gap: 3px; padding: 14px 16px; }
.promo-words strong { font-family: Georgia, serif; font-size: 18px; font-weight: 400; }
.promo-words span { color: var(--muted); font-size: 14px; }
.promo:hover { border-color: var(--brand); }

@media (max-width: 700px) { .carousel { margin-left: -20px; margin-right: -20px; } }

.price-inputs { display: flex; align-items: center; gap: 6px; }
.rail .price-inputs input { width: 100%; min-width: 0; }
.price-inputs input { font: inherit; font-size: 14px; width: 88px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.stock-filter label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }

.pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 30px 0 10px;
  font-size: 14px; color: var(--muted); }
.pager a { color: var(--brand); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.tell-me { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px 18px; margin: 18px 0; display: grid; gap: 10px; }
.tell-me h2 { margin: 0; font-size: 17px; }
.tell-me select, .tell-me input { font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.tell-me .add { justify-self: start; }

.beside-it { margin-top: 46px; }
.beside-it h2 { font-size: 22px; margin-bottom: 16px; }

.size-guide { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 12px 16px; }
.size-guide summary { cursor: pointer; font-size: 15px; }
.size-guide[open] summary { margin-bottom: 12px; }
.size-chart { width: 100%; border-collapse: collapse; font-size: 14px; }
.size-chart caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 8px; }
.size-chart th, .size-chart td { padding: 7px 10px; border-bottom: 1px solid var(--line);
  text-align: left; }
.size-chart thead th { font-weight: 600; }
.size-chart tbody th { font-weight: 600; white-space: nowrap; }

/* Groups: the way into a collection or a category, shown with a piece from inside it. */
.group-heading { font: 400 20px/1.3 Georgia, serif; margin: 34px 0 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.group-more { font: 400 13px/1 system-ui, sans-serif; color: var(--muted); text-decoration: underline; }
.group-grid { display: grid; gap: 22px 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.group-row { display: grid; gap: 18px; grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; }
.group-row .group { scroll-snap-align: start; }
.group { display: block; color: inherit; text-decoration: none; }
.group img, .group-none { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: #efeae1; border-radius: var(--radius); }
.group img { transition: transform 300ms ease; }
.group:hover img { transform: scale(1.02); }
.group-words { display: block; margin-top: 10px; }
.group-words strong { display: block; font: 400 15px/1.35 Georgia, serif; }
.group-words span { font-size: 13px; color: var(--muted); }

/* A photograph inside a written page, and whatever was not placed in the words. */
.page-figure { margin: 26px 0; }
.page-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.page-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.page-gallery { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 26px; }
.page-gallery .page-figure { margin: 0; }

/* A page's own banner: the full-width band above the words, sized like the front page's. */
.page-banner { margin: 0 0 6px; position: relative; }
.page-banner img { width: 100%; height: clamp(220px, 38vw, 460px); object-fit: cover; display: block; }
.page-banner figcaption { padding: 10px 20px 0; font-size: 13px; color: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   The premium layer: buttons, cards, the sticky header, the hero, the mobile bar.
   Appended so it settles over the plainer rules above without fighting them.
   ───────────────────────────────────────────────────────────────────────────── */

.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Buttons ------------------------------------------------------------------ */
.btn, .add, a.btn {
  font: 600 14px/1 Inter, sans-serif; letter-spacing: 0.2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius); border: 1px solid var(--brand);
  background: var(--brand); color: #fff; cursor: pointer; text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn:hover, .add:hover { transform: translateY(-1px); box-shadow: var(--lift-hover);
  background: #620530; border-color: #620530; }
.btn:active, .add:active { transform: translateY(0); }
.btn:focus-visible, .add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.ghost {
  background: transparent; color: var(--brand); border-color: var(--brand);
}
.btn.ghost:hover { background: var(--tint); color: var(--brand); border-color: var(--brand); }
.btn.narrow { padding: 10px 16px; }

/* Product cards ------------------------------------------------------------ */
.card { display: flex; flex-direction: column; }
.card-media { border-radius: var(--radius-card); box-shadow: var(--lift);
  transition: box-shadow var(--ease), transform var(--ease); }
.card:hover .card-media { box-shadow: var(--lift-hover); transform: translateY(-3px); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media img { transition: transform 450ms cubic-bezier(0.2, 0.6, 0.3, 1); }
.card h3 { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.45; }
.card .now { font-weight: 600; }

/* The heart: filled and given a beat the moment it is set. */
.wish { transition: transform var(--ease), background var(--ease), color var(--ease); }
.wish:hover { transform: scale(1.08); }
.wish[aria-pressed="true"] { color: var(--brand); }
.wish[aria-pressed="true"] .ico { fill: var(--brand); animation: heart 320ms ease; }
@keyframes heart { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .wish[aria-pressed="true"] .ico { animation: none; }
  .card:hover .card-media, .card:hover .card-media img, .btn:hover { transform: none; }
}

/* Header ------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--surface);
  transition: box-shadow var(--ease); }
.site-header.stuck { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(31, 31, 31, 0.06); }
/* A hairline of the shop's own colours rather than the browser's grey. */
.site-header::after { content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold) 46%, var(--brand)); opacity: 0.5; }

.announce { background: var(--brand); color: #fff; font: 500 12px/1 Inter, sans-serif;
  letter-spacing: 0.4px; }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 34px;
  min-height: 34px; padding-top: 0; padding-bottom: 0; }
.announce p { display: flex; align-items: center; gap: 7px; margin: 0; }
.announce .ico { width: 15px; height: 15px; stroke: currentColor; }
/* The strip loses its extras before it wraps: one promise read is worth three crushed. */
@media (max-width: 780px) { .announce .only-wide { display: none; } .announce .wrap { gap: 0; } }

/* The mark is sized by what it has to be readable at, not by a square box. The wordmark under
   the emblem is a quarter of its height, so the whole thing has to be tall for it to be words. */
.site-header .brand img { width: auto; height: 77px; transition: height var(--ease); }
.site-header.stuck .brand img { height: 48px; }
/* It shared a row with nine headings and was cut to 170px to make room, which left the
   placeholder reading "Search sarees," and stopping. It now has the middle track of the row to
   itself - 598px, and centred on the page rather than between its neighbours. */
.site-header .search-form { width: 100%; min-width: 180px; }
.site-header .search-form input {
  width: 100%; padding: 12px 16px 12px 42px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper); font-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
}
.site-header .search-form input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint); }

/* Every phone rule for the header lives here, below every desktop rule it has to beat. A media
   query adds no specificity, so where a rule sits in this file is the only thing deciding it -
   which is how the phone's mark size and its search box both ended up being written and then
   silently overridden a few lines further down. */
@media (max-width: 700px) {
  .site-header .brand img { height: 46px; }
  .site-header.stuck .brand img { height: 42px; }

  /* One line: mark, search, account. Measured on a 375px screen - 351px of row, 46 for the mark
     and 112 for three icons, which leaves the search 169. It only fits because the labels go, and
     the labels can go because the bar along the bottom already says Wishlist, Bag and You. */
  .site-header .header-top { display: flex; flex-wrap: nowrap; gap: 12px;
    padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .site-header .brand { order: 1; flex: 0 0 auto; }
  .site-header .search-form { order: 2; flex: 1 1 auto; width: auto; min-width: 0;
    max-width: none; margin: 0; }
  .site-header .header-icons { order: 3; flex: 0 0 auto; gap: 0; margin-left: 0; }
  .site-header .header-icon { padding: 4px 6px; font-size: 10px; }
  .site-header .header-icon span:not(.bag-count) { display: none; }
  /* The magnifier and the padding round it were sized for a 598px box; at 169 they were eating
     the room the word had to sit in. */
  .site-header .search-form input { width: 100%; padding: 10px 12px 10px 34px; font-size: 13px;
    background-position: 11px center; background-size: 16px 16px; }
}

.header-icons { display: flex; align-items: center; gap: 6px; order: 3; margin-left: auto; }
/* Never broken across two lines. Without this "Sign in" splits when the row tightens, which
   makes that one link taller than its neighbours and knocks the whole row off its centre. Held
   whole, it sets the floor for its track and the search box gives way instead - which it can,
   having the most room to spare. */
.header-icon { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px; border-radius: 10px; color: var(--ink); position: relative;
  white-space: nowrap;
  font: 500 11px/1 Inter, sans-serif; letter-spacing: 0.3px; transition: background var(--ease); }
.header-icon:hover { background: var(--tint); color: var(--brand); }
.bag-count {
  position: absolute; top: 0; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--brand); color: #fff;
  font: 600 10px/17px Inter, sans-serif; text-align: center;
}

/* Hero --------------------------------------------------------------------- */
.hero-premium {
  position: relative; overflow: hidden; margin: 0 -20px 8px; padding: 0 20px;
  background: linear-gradient(180deg, var(--tint) 0%, var(--paper) 68%);
}
.hero-premium .inner {
  max-width: var(--wrap); margin: 0 auto; display: grid; gap: 34px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 54px 0 48px;
}
.hero-words { display: grid; gap: 18px; justify-items: start;
  animation: rise 520ms cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.hero-words h1 { margin: 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; }
.hero-words p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 16px; }
.hero-eyebrow { font: 600 12px/1 Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero-shot { position: relative; animation: rise 620ms 80ms cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.hero-shot img { width: 100%; height: clamp(320px, 40vw, 520px); object-fit: cover;
  border-radius: var(--radius-card); box-shadow: var(--lift-hover); }
.hero-badges { position: absolute; inset: 0; pointer-events: none; }
.hero-badge {
  position: absolute; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.3px; color: var(--ink);
  box-shadow: var(--lift); backdrop-filter: blur(4px);
}
.hero-badge.one { top: 22px; left: -14px; }
.hero-badge.two { bottom: 74px; right: -12px; color: var(--brand); }
.hero-badge.three { bottom: 20px; left: 18px; color: var(--gold); }
/* Soft shapes behind it, drawn rather than fetched. */
.hero-premium::before, .hero-premium::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(184, 134, 70, 0.20), rgba(184, 134, 70, 0));
}
.hero-premium::before { width: 460px; height: 460px; top: -160px; right: -120px; }
.hero-premium::after { width: 380px; height: 380px; bottom: -190px; left: -140px;
  background: radial-gradient(circle at 40% 40%, rgba(119, 7, 55, 0.14), rgba(119, 7, 55, 0)); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-words, .hero-shot { animation: none; } }

/* Collection cards --------------------------------------------------------- */
.group { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.group img, .group .group-none { border-radius: 0; aspect-ratio: 4 / 5; }
.group img { transition: transform 500ms cubic-bezier(0.2, 0.6, 0.3, 1); }
.group:hover img { transform: scale(1.06); }
.group::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(31, 31, 31, 0.72) 0%, rgba(31, 31, 31, 0.12) 42%,
              rgba(31, 31, 31, 0) 68%);
  opacity: 0.72; transition: opacity var(--ease);
}
.group:hover::after { opacity: 1; }
.group .group-words {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #fff;
}
.group .group-words strong { font-family: Playfair, Georgia, serif; font-size: 17px; }
.group .group-words span {
  font: 500 11px/1 Inter, sans-serif; letter-spacing: 0.4px; color: #fff;
  background: rgba(255, 255, 255, 0.22); padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}

/* Sections ----------------------------------------------------------------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 46px 0 18px; }
.section-head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.section-head .sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.section-head a { font: 600 13px/1 Inter, sans-serif; color: var(--brand); }
.section-head a:hover { text-decoration: underline; }

/* The bar a phone gets, where a mouse would get the header. */
.bottom-bar { display: none; }
@media (max-width: 700px) {
  .bottom-bar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 70; background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .bottom-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 0; color: var(--muted); font: 500 10px/1 Inter, sans-serif; }
  .bottom-bar a.on { color: var(--brand); }
  body { padding-bottom: 64px; }
  /* A phone already has the bar above for getting about, and the header is three rows deep -
     224px of an 812px screen held back from the thing she came to read. It scrolls away here. */
  .site-header { position: static; }
  .hero-premium .inner { grid-template-columns: minmax(0, 1fr); padding: 30px 0 34px; gap: 24px; }
  .hero-shot { order: -1; }
  .hero-badge.one, .hero-badge.two, .hero-badge.three { display: none; }
}

/* Cards on a rail --------------------------------------------------------- */
.card-media { position: relative; }
.card-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 260ms ease; }
.card:hover .card-hover, .card:focus-within .card-hover { opacity: 1; }

.badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px;
  flex-wrap: wrap; max-width: calc(100% - 66px); }
.badge { padding: 5px 9px; border-radius: 999px; font: 600 11px/1 Inter, sans-serif;
  letter-spacing: 0.2px; background: rgba(255, 255, 255, 0.94); color: var(--ink); }
.badge.off { background: var(--brand); color: #fff; }
.badge.new { background: var(--gold); color: #fff; }
.badge.sold { background: rgba(31, 31, 31, 0.78); color: #fff; }
.card-fabric { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 4px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--muted);
  font: 500 11px/1 Inter, sans-serif; }

.card .save { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); color: var(--muted); box-shadow: var(--lift); }
.card .save:hover { color: var(--brand); }

/* The rail's own controls -------------------------------------------------- */
.fgroup { border-bottom: 1px solid var(--line); padding: 12px 0; }
.fgroup > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--ink); padding: 2px 0 10px; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after { content: "\2212"; color: var(--muted); font-size: 15px; }
.fgroup:not([open]) > summary::after { content: "+"; }
.fgroup:not([open]) > summary { padding-bottom: 2px; }

.cswatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cswatch, .cswatch-any { cursor: pointer; position: relative; }
.cswatch input, .cswatch-any input { position: absolute; opacity: 0; pointer-events: none; }
.cswatch span { display: block; width: 26px; height: 26px; border-radius: 50%;
  background: var(--dot); border: 1px solid rgba(31, 31, 31, 0.16);
  transition: transform var(--ease), box-shadow var(--ease); }
.cswatch em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cswatch:hover span { transform: scale(1.1); }
.cswatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.cswatch input:focus-visible + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.cswatch-any span { display: inline-block; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cswatch-any input:checked + span { border-color: var(--brand); color: var(--brand);
  background: var(--tint); }

.price-slider { width: 100%; accent-color: var(--brand); margin: 2px 0 6px; }
.price-said { margin: 0 0 8px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

.view-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); }
.view-toggle button { border: 0; background: transparent; cursor: pointer; width: 30px; height: 28px;
  border-radius: 7px; font: 600 12px/1 Inter, sans-serif; color: var(--muted); }
.view-toggle button:hover { background: var(--tint); color: var(--brand); }
.view-toggle button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.grid { grid-template-columns: repeat(var(--across, 4), minmax(0, 1fr)); }

@media (max-width: 700px) {
  /* The rail arrives from the bottom, the way a phone expects a filter to. */
  .rail-open > summary { display: flex; align-items: center; gap: 8px; justify-content: center; }
  .rail-open > summary .applied { background: var(--brand); color: #fff; border-radius: 999px;
    padding: 2px 8px; font-size: 10px; }
  .rail-open[open] { position: fixed; inset: auto 0 0 0; z-index: 80; max-height: 82vh;
    overflow: auto; background: var(--surface); border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(31, 31, 31, 0.2); padding: 6px 18px 84px; }
  .rail-open[open] > summary { position: sticky; top: 0; margin: 0 -18px 4px; padding: 14px 18px;
    background: var(--surface); border-bottom: 1px solid var(--line); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The product page --------------------------------------------------------- */
.rating-summary { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; }
.rating-summary .stars { color: var(--gold); letter-spacing: 1px; }
.rating-summary a { color: var(--muted); text-decoration: underline; }
.rating-summary a:hover { color: var(--brand); }

.option .label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.option-aside { display: flex; gap: 14px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.option-aside a, .option-aside .linkish { color: var(--brand); font-size: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: 500 14px/1 Inter, sans-serif; padding: 11px 16px; min-width: 48px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  transition: border-color var(--ease), background var(--ease), color var(--ease); }
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
/* Dimmed rather than struck through: a piece whose options are named "Beige · 3xl" has thirty of
   them, and thirty struck-out pills reads as a shop that has sold out rather than one with choices. */
.pill:disabled { color: #b4aca6; background: var(--paper); border-color: var(--line);
  cursor: not-allowed; }
/* Four rows and then it scrolls, so the buy button is never pushed off the screen by the sizes. */
.pills { max-height: 196px; overflow-y: auto; padding-right: 2px; }
.pills::-webkit-scrollbar { width: 6px; }
.pills::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.assurances { list-style: none; display: grid; gap: 10px 18px; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assurances li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.assurances .ico { width: 18px; height: 18px; color: var(--brand); flex: none; }
.assurances a { color: var(--muted); text-decoration: underline; }

.tabs { display: flex; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid var(--line);
  padding-top: 18px; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label { cursor: pointer; padding: 10px 14px; margin-right: 4px; border-radius: 999px;
  font: 600 13px/1 Inter, sans-serif; color: var(--muted);
  transition: background var(--ease), color var(--ease); }
.tabs > label:hover { background: var(--tint); color: var(--brand); }
.tabs > input:checked + label { background: var(--brand); color: #fff; }
.tabs > input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab-panel { display: none; flex: 1 0 100%; padding-top: 16px; }
#tab-detail:checked ~ [data-for="tab-detail"],
#tab-fabric:checked ~ [data-for="tab-fabric"],
#tab-shipping:checked ~ [data-for="tab-shipping"],
#tab-returns:checked ~ [data-for="tab-returns"] { display: block; }
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; }

/* Gallery ------------------------------------------------------------------ */
/* One photograph means no strip, and a two-column grid then put the only picture in the 76px
   column. The second column is claimed only when there is a strip to put in the first. */
.pdp .gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  align-items: start; }
.pdp .gallery.has-thumbs { grid-template-columns: 76px minmax(0, 1fr); }
.gallery-main { position: relative; overflow: hidden; border-radius: var(--radius-card);
  background: var(--tint); order: 2; }
.gallery-main img { width: 100%; display: block; transition: transform 300ms ease; }
/* The pointer decides what is magnified, so a border is read by moving to it, not by guessing. */
.gallery-main:hover img { transform: scale(1.75); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.gallery-main::after { content: "Hover to zoom"; position: absolute; right: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9);
  font: 500 11px/1 Inter, sans-serif; color: var(--muted); opacity: 1; transition: opacity var(--ease); }
.gallery-main:hover::after { opacity: 0; }

.pdp .thumbs { order: 1; display: flex; flex-direction: column; gap: 8px; }
.pdp .thumbs button { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer;
  border-radius: 10px; overflow: hidden; transition: border-color var(--ease); }
.pdp .thumbs button[aria-pressed="true"] { border-color: var(--brand); }
.pdp .thumbs img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 900px) {
  /* .has-thumbs must be named here too. Without it the top-level two-column rule carries three
     classes to this one's two, wins on specificity whatever the order, and every phone showed the
     photograph squeezed into the 76px strip column with the thumbnails wrapped beside it. */
  .pdp .gallery, .pdp .gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); }
  .pdp .thumbs { order: 2; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .pdp .thumbs button { flex: 0 0 68px; }
  .gallery-main::after { display: none; }
  .gallery-main:hover img { transform: none; }
}

/* On a phone the bag button follows the page, so it is never a scroll away. */
.buy-sticky { display: none; }
@media (max-width: 700px) {
  .buy-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 56px; z-index: 65;
    gap: 10px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); }
  .buy-sticky .price { flex: 1; display: grid; }
  .buy-sticky .btn { flex: 0 0 auto; }
  body.on-product { padding-bottom: 128px; }
}

/* Find my size ------------------------------------------------------------- */
.my-size-panel, .my-size { margin: 14px 0 4px; }
.my-size-form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--paper); }
.my-size-form .field { display: grid; gap: 5px; }
.my-size-form label { font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted); }
.my-size-form input, .my-size-form select { font: inherit; padding: 10px 12px; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.my-size-form .btn { justify-self: start; }
.my-size-answer { margin-top: 12px; padding: 16px; border-radius: var(--radius-card);
  background: var(--tint); border: 1px solid var(--line); }
.my-size-answer .said { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font: 500 14px/1 Inter, sans-serif; color: var(--muted); }
.my-size-answer .said strong { font: 500 30px/1 Playfair, Georgia, serif; color: var(--brand); }
.my-size-answer ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.my-size-answer .picked { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--sale); }

/* Front-page sections ------------------------------------------------------ */
.card-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  scrollbar-width: none; }
.card-row::-webkit-scrollbar { display: none; }
.card-row .card { scroll-snap-align: start; }

.story { display: grid; gap: 22px; margin: 48px 0; border-radius: var(--radius-card);
  overflow: hidden; background: var(--tint); align-items: center; }
.story img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.story-words { padding: 30px 34px; }
.story h2 { margin: 0 0 10px; }
.story-words p { margin: 0 0 14px; color: var(--muted); max-width: 56ch; }
.story .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 8px; }
.story .btn { justify-self: start; }
@media (min-width: 860px) {
  .story { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 0; }
}

.signup { display: grid; gap: 18px; margin: 48px 0 8px; padding: 34px;
  border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface);
  align-items: center; }
.signup h2 { margin: 0 0 8px; }
.signup p { margin: 0; color: var(--muted); max-width: 52ch; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input { flex: 1 1 260px; font: inherit; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper); }
.signup input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
@media (min-width: 860px) {
  .signup { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .story { grid-template-columns: minmax(0, 1fr); }
}

/* Footer -------------------------------------------------------------------- */
.site-footer { border-top: 0; margin-top: 56px; padding: 0; background: var(--tint);
  color: var(--muted); font-size: 14px; }
.site-footer::before { content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold) 46%, var(--brand)); opacity: 0.55; }
.footer-top { display: grid; gap: 30px; padding-top: 44px; padding-bottom: 34px;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .footer-top { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 34px; }
}
/* (6) The leaf from the mark, very large and very faint, bleeding off the right edge. The thing
   that reads as art-directed rather than assembled - and it costs one gradient-free image. */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; top: -60px; right: -90px; width: 420px; height: 420px;
  background: url("/img/brand/mark-600.png") no-repeat center / contain;
  opacity: 0.045; pointer-events: none; }
@media (max-width: 760px) { .site-footer::before { display: none; } }
.footer-brand img { width: 95px; height: auto; margin-bottom: 14px; }
.footer-brand p { margin: 0 0 14px; max-width: 40ch; }
.footer-signup { margin-top: 18px; max-width: 330px; }
.footer-signup .footer-head { margin-bottom: 8px; }
.footer-signup-row { display: flex; gap: 8px; }
.footer-signup input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; }
.footer-signup input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(119, 7, 55, 0.12); }
.footer-signup .btn { flex: 0 0 auto; padding: 10px 18px; }

/* (4) The shopfront. A marketplace cannot show you a door. */
.footer-shop .shopfront { width: 100%; max-width: 260px; height: auto; border-radius: var(--radius);
  margin-bottom: 12px; }
.visit { display: inline-flex; align-items: center; gap: 6px; color: var(--brand) !important;
  font-weight: 600; }
.visit .ico { width: 15px; height: 15px; stroke: var(--brand); fill: none; }
.footer-review { display: inline-flex; align-items: center; gap: 7px; color: var(--brand);
  font-weight: 600; text-decoration: none; }
.footer-review .ico { width: 16px; height: 16px; stroke: var(--gold); fill: var(--gold); }
.footer-review:hover { text-decoration: underline; }

.footer-col { display: grid; align-content: start; gap: 9px; }
/* (2) Playfair, because everything else in this footer was grey Inter and could have belonged
   to any shop. The brand's own face, at the size a column head wants. */
.footer-head { margin: 0 0 6px; color: var(--ink);
  font: 600 15px/1.2 Playfair, Georgia, serif; letter-spacing: 0.4px; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--brand); text-decoration: underline; }
.footer-note { margin: 0; line-height: 1.6; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-top: 16px; padding-bottom: 22px; font-size: 13px;
  border-top: 1px solid var(--line); }

/* The maker's mark. It turns rather than blinks: a footer credit that demands attention is
   taking it from the shop. */
.powered, .footer-review, .footer-bottom a { text-decoration: none; }
/* The mark stays - it is the maker's - but it defers to the shop it was made for: the image is
   40% smaller than it was, the name a point down and italic. A credit, not a second brand. */
.powered { display: inline-flex; align-items: center; gap: 7px; color: var(--muted);
  font-size: 13px; font-style: italic; }
/* (7) Monochrome at rest. In full colour it was the only blue on a maroon-and-gold page, and
   the last thing the eye landed on. Its own colours come back on hover. */
.powered img { border-radius: 8px; box-shadow: none;
  filter: grayscale(1) opacity(0.55); transition: filter var(--ease);
  animation: turn 4s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 50% 50%; }
.powered-name { font-weight: 600; font-size: 12px; font-style: italic;
  color: var(--ink); transition: color var(--ease); }
.powered:hover .powered-name { color: var(--brand); }
.powered:hover img { animation-duration: 1.2s; filter: none; }
@keyframes turn {
  0%, 34% { transform: rotateY(0deg); }
  67% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .powered img { animation: none; } }

/* What customers say ------------------------------------------------------- */
.says { margin: 52px 0; }
.section-head.centred { display: block; text-align: center; margin-bottom: 18px; }
.section-head.centred .sub { margin-left: auto; margin-right: auto; }
.says .eyebrow { font: 600 12px/1 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 10px; }

.says-badge { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto 24px; padding: 12px 22px; width: max-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.says-badge .ico { width: 18px; height: 18px; stroke: var(--gold); fill: var(--gold); }
.says-badge strong { font-size: 18px; }
.says-badge .says-count { padding-left: 12px; border-left: 1px solid var(--line);
  color: var(--muted); font-size: 14px; }

/* The row runs left to right for ever. It is written twice and shifted by exactly half, so the
   loop has no seam; pausing on hover lets a quote actually be read. */
.marquee { overflow: hidden; margin: 0 -20px; padding: 6px 0; -webkit-mask-image:
  linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: drift 60s linear infinite; }
.marquee-run { display: flex; gap: 18px; padding-right: 18px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

.say { flex: 0 0 320px; display: flex; flex-direction: column; gap: 10px; margin: 0;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); }
.say-stars { margin: 0; color: var(--gold); letter-spacing: 2px; }
.say blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.say figcaption { display: grid; gap: 3px; margin-top: auto; padding-top: 8px; font-size: 13px; }
.say figcaption strong { font-size: 14px; }
.say figcaption a { color: var(--muted); }
.say figcaption a:hover { color: var(--brand); }
.say-blank { min-height: 168px; background: var(--tint); border-style: dashed; }

.says-empty > p { margin: 18px 0 0; text-align: center; color: var(--muted); }

/* The Google standing --------------------------------------------------------
   Borrowed proof, and it has to look borrowed: Google's own letter colours, the word Google
   spelled out, and the whole badge a link to the listing. A shopper should be able to tell at a
   glance that these 811 reviews are checkable somewhere that is not this website. */
.says-badge.google { gap: 12px; padding: 13px 24px; text-decoration: none; color: inherit;
  transition: border-color var(--ease), box-shadow var(--ease); }
.says-badge.google:hover { border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(31, 31, 31, 0.08); }
.g-mark { font: 700 19px/1 Arial, Helvetica, sans-serif; letter-spacing: -0.5px; }
.g-b { color: #4285F4; } .g-r { color: #EA4335; } .g-y { color: #FBBC05; } .g-g { color: #34A853; }
.says-badge .says-stars { color: var(--gold); letter-spacing: 1px; font-size: 15px; }
/* A disc with her initial, not her photograph. Google's avatars live on Google's servers, and
   lifting somebody's face onto a shop's page is neither ours to do nor stable enough to rely on.
   Where Google gave no name there is no initial either, so those get a plain figure. */
.google-says .say figcaption { display: flex; align-items: center; gap: 11px; }
.say-face { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint); color: var(--brand);
  font: 600 15px/1 Inter, sans-serif; }
.say-face.blank { padding: 9px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.say-by { display: grid; gap: 2px; min-width: 0; }
.say-src { color: var(--muted); font-size: 12px; }
.google-all { margin: 22px 0 0; text-align: center; }

/* The footer's reassurance row ------------------------------------------------
   Three promises across one line, each able to stand alone: a shop with no gateway yet still
   has social accounts and still has TLS, and the row has to read properly with any one of the
   three missing.
   Coloured from the shop's own tokens, not white: this footer is pale, and a row written for a
   dark one is a row nobody can read. */
.footer-trust { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px 34px; padding: 22px 20px; color: var(--ink);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent) 1; }
.footer-trust .ico { width: 19px; height: 19px; }
.follow { display: flex; align-items: center; gap: 12px; }
.follow-label { font-weight: 600; letter-spacing: 0.3px; color: var(--ink); }
.follow a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line); color: var(--brand);
  transition: background var(--ease), border-color var(--ease), transform var(--ease); }
.follow a:hover { background: var(--brand); border-color: var(--brand); color: #fff;
  transform: translateY(-1px); }
.follow .ico { width: 17px; height: 17px; fill: currentColor; stroke: none; }

.pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink); }
.pay-row .ico { stroke: var(--brand); fill: none; }
.pay-label { font-weight: 600; }
.pay-marks { display: flex; gap: 7px; flex-wrap: wrap; }
.pay-mark { padding: 4px 9px; border-radius: 5px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink);
  font: 600 11px/1.5 Inter, sans-serif; letter-spacing: 0.2px; white-space: nowrap; }

/* The Google standing, repeated where every page can carry it rather than the home page only. */
.footer-google { display: flex; align-items: center; gap: 9px; color: var(--ink);
  text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--ease), box-shadow var(--ease); }
.footer-google:hover { border-color: var(--gold);
  box-shadow: 0 3px 12px rgba(31, 31, 31, 0.07); }
.footer-google .g-mark { font-size: 16px; }
.footer-google .says-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.footer-google strong { color: var(--ink); }
.footer-google .footer-note { margin: 0; font-size: 12px; color: var(--muted); }

/* The fraud notice. Findable when somebody is already suspicious, without frightening everybody
   who is not - so the heading carries the shop's colour and the body stays quiet grey. */
/* Block, not flex. It carries the class "wrap", and .site-footer .wrap is a flex row - which
   laid the heading and its paragraph side by side as two columns and left the heading stranded
   on the far left. */
/* (1) Below the copyright and deliberately quiet. It was the largest thing in the footer and
   the subject was fraud, which is not what a shop should be loudest about. Findable when
   somebody is already suspicious; invisible to everybody else. */
.site-footer .footer-warning { display: block; padding: 0 20px 20px; }
.footer-warning > p { max-width: 70ch; margin: 0 auto; font-size: 11.5px; line-height: 1.6;
  color: var(--muted); text-align: center; opacity: 0.85; }
.footer-warning .warning-head { max-width: none; margin: 0 0 5px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase; font-size: 10.5px;
  color: var(--muted); text-align: center; }
.footer-warning a { color: var(--brand); text-decoration: underline; }
.footer-entity { font-size: 12px; color: var(--muted); }

.ssl { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); }
.ssl .ico { stroke: var(--brand); fill: none; stroke-width: 1.7; }

@media (max-width: 860px) {
  /* Stacked and centred rather than three things fighting for one line. */
  .footer-trust { justify-content: center; text-align: center; gap: 16px; }
  .follow, .pay-row, .ssl { justify-content: center; width: 100%; }
}

@media (max-width: 560px) {
  /* The badge carries four things. On a narrow screen the rating and the count are the two that
     matter, so the stars stand down rather than the row wrapping into a block. */
  .says-badge.google { gap: 9px; padding: 11px 16px; }
  .says-badge .says-stars { display: none; }
}

/* Reset ------------------------------------------------------------------- */
.rail-reset { margin: 0 0 14px; }
.rail-reset .btn { width: 100%; justify-content: center; }

/* Bag and wishlist --------------------------------------------------------- */
/* An empty bag is not an error, so it is not drawn as one. */
.nothing { display: grid; justify-items: center; gap: 10px; text-align: center;
  margin: 40px auto 64px; padding: 48px 24px; max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.nothing .ico { width: 40px; height: 40px; stroke: var(--brand); stroke-width: 1.2; }
.nothing h2 { margin: 6px 0 0; }
.nothing p { margin: 0; color: var(--muted); max-width: 46ch; }
.nothing-do { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.cart-line { align-items: start; }
.cart-line:last-of-type { border-bottom: 0; }
.cart-detail h3 { margin: 0 0 8px; font-size: 16px; }
.cart-options { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.cart-chip { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink); background: var(--paper); }
.cart-low { margin: 0 0 10px; font-size: 13px; color: var(--brand); }
/* The code is for whoever answers the phone, not for the shopper reading her bag: one line, and
   never three of them across a title. */
.cart-detail .cart-meta span { display: block; max-width: 34ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cart-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cart-actions form { margin: 0; }
.cart-was { display: block; font-size: 13px; color: var(--muted);
  text-decoration: line-through; }
.cart-back { display: inline-block; margin-top: 22px; color: var(--brand); font-weight: 600; }

.summary { position: sticky; top: 220px; border-radius: var(--radius-card);
  background: var(--surface); }
.summary dd.off { color: var(--brand); }
.summary-saved { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--brand);
  font-weight: 600; }
.btn.block { display: flex; width: 100%; justify-content: center; margin-top: 16px; }
.bag-assurances { border-top: 1px solid var(--line); }
.coupon-form.applied .cart-meta { justify-content: space-between; }

/* How far off free delivery is, drawn from the rule that actually charges it. */
.free-run { margin: 0 0 16px; padding: 13px 15px; border-radius: var(--radius);
  background: var(--tint); font-size: 13px; }
.free-run p { margin: 0 0 9px; color: var(--ink); }
.free-run.got-it { display: flex; align-items: center; gap: 9px; color: var(--brand);
  font-weight: 600; }
.free-run.got-it .ico { width: 18px; height: 18px; }
.free-bar { height: 5px; border-radius: 999px; background: rgba(31, 31, 31, 0.10);
  overflow: hidden; }
.free-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--gold)); transition: width var(--ease); }

.saved-grid .card { display: flex; flex-direction: column; }
.saved-do { margin-top: auto; padding: 12px 0 2px; }
.saved-do .btn { width: 100%; justify-content: center; }
.saved-gone { display: block; text-align: center; font-size: 13px; color: var(--muted);
  padding: 11px 0; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .summary { position: static; }
}
@media (max-width: 700px) {
  .cart-line { grid-template-columns: 84px minmax(0, 1fr); }
  .cart-price { grid-column: 2; text-align: left; margin-top: 6px; }
}

/* Signing in and signing up -------------------------------------------------- */
.auth-shell { display: block; padding: 40px 20px 80px; }
.auth-split { display: grid; gap: 0; max-width: 980px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
  background: var(--surface); box-shadow: var(--lift); }
@media (min-width: 900px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.auth-side { position: relative; display: grid; align-items: end; min-height: 240px;
  background: var(--brand); color: #fff; }
.auth-side img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-side-words { grid-area: 1 / 1; position: relative; padding: 30px 32px;
  background: linear-gradient(to top, rgba(43, 4, 22, 0.92) 0%, rgba(43, 4, 22, 0.62) 55%,
              rgba(43, 4, 22, 0.28) 100%); }
.auth-side .eyebrow { margin: 0 0 8px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); }
.auth-side h2 { margin: 0 0 8px; color: #fff; font-size: clamp(24px, 3vw, 32px); }
.auth-side-words > p { margin: 0 0 18px; color: rgba(255, 255, 255, 0.86); max-width: 30ch; }
.auth-side-list { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0;
  font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.auth-side-list li { display: flex; align-items: center; gap: 11px; }
.auth-side-list .ico { width: 18px; height: 18px; flex: none; stroke: var(--gold); }
@media (max-width: 899px) {
  /* Above the form on a phone, and kept short: left to its own shape the photograph was 440px
     of picture before the first field, and the form is what the page is for. */
  .auth-side { height: 210px; min-height: 0; overflow: hidden; }
  .auth-side img { height: 210px; }
  .auth-side-words { padding: 20px 22px 18px; }
  .auth-side-list { display: none; }
  .auth-side h2 { font-size: 22px; }
  .auth-card { padding: 26px 22px 28px; }
}

.auth-card { width: 100%; max-width: none; border: 0; border-radius: 0; padding: 38px 34px 34px;
  background: var(--surface); }
.auth-card.alone { max-width: 460px; margin: 0 auto; border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--lift); }
.auth-card h1 { font-size: clamp(26px, 3vw, 32px); margin: 0 0 6px; }
.auth-sub { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.auth-card .field { margin-bottom: 16px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-aside { font-size: 12px; color: var(--muted); }
a.field-aside:hover { color: var(--brand); text-decoration: underline; }
.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.auth-card .field input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint); }
.auth-card .field input.wrong { border-color: var(--accent); }

.field-peek { position: relative; }
.field-peek input { padding-right: 68px; }
.peek { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 6px 10px;
  border: 0; border-radius: var(--radius); background: none; cursor: pointer;
  font: 600 12px/1 Inter, sans-serif; color: var(--muted); }
.peek:hover { color: var(--brand); background: var(--tint); }

.auth-swap { margin: 20px 0 0; font-size: 15px; text-align: center; }
.auth-swap a { color: var(--brand); font-weight: 600; }
.auth-swap a:hover { text-decoration: underline; }
.auth-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center;
  line-height: 1.6; }
.auth-note a { color: var(--brand); text-decoration: underline; }

/* Quick view --------------------------------------------------------------- */
/* The peek is a link to the piece with the dialog standing in front of it, so it is only ever
   drawn where a pointer can reach it — a phone taps the card and gets the page, which is right. */
.card-peek {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); z-index: 2;
  padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  color: var(--ink); font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.3px;
  box-shadow: var(--lift); opacity: 0; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.card:hover .card-peek, .card-peek:focus-visible {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
.card-peek:hover { background: #fff; color: var(--brand); }
@media (hover: none) { .card-peek { display: none; } }

.quick-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 720px); padding: 0;
  border: 0; border-radius: var(--radius-card); background: var(--surface);
  box-shadow: 0 24px 60px rgba(31, 31, 31, 0.22); overflow: visible;
}
.quick-dialog::backdrop { background: rgba(31, 31, 31, 0.52); backdrop-filter: blur(2px); }
.quick-close {
  position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; z-index: 3;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--lift);
}
.quick-close:hover { color: var(--brand); border-color: var(--brand); }
.quick-waiting { margin: 0; padding: 60px 24px; text-align: center; color: var(--muted); }

.quick { display: grid; gap: 0; max-height: min(88vh, 720px); }
@media (min-width: 720px) { .quick { grid-template-columns: 320px minmax(0, 1fr); } }
.quick-shot { background: var(--tint); border-radius: var(--radius-card) 0 0 var(--radius-card);
  overflow: hidden; }
.quick-shot img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
@media (max-width: 719px) {
  .quick-shot { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .quick-shot img { max-height: 220px; }
}
.quick-words { padding: 26px 28px 24px; overflow-y: auto; }
.quick-words h2 { margin: 0 0 10px; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; }
.quick-words h2 a { color: inherit; }
.quick-words h2 a:hover { color: var(--brand); }
.quick-words .option { margin-bottom: 14px; }
/* A piece with thirty options must not push the button out of the dialog. */
.quick-words .pills { max-height: 116px; overflow-y: auto; }
.quick-full { margin: 14px 0 0; text-align: center; font-size: 14px; }
.quick-full a { color: var(--brand); font-weight: 600; }
.quick-full a:hover { text-decoration: underline; }

/* ---- how a piece is bought ------------------------------------------------------------- */
/* The shop's own maroon and cream. The brief asked for purple and gold; next to the rest of
   the page they read as somebody else's shop bolted on. */
.buying { border: 0; padding: 0; margin: 22px 0 18px; }
.buying legend { font: 500 13px/1.3 inherit; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--muted); padding: 0; margin-bottom: 12px; }

.buy-card { display: block; position: relative; margin-bottom: 10px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.buy-card:hover { border-color: var(--brand); }
.buy-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.buy-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand);
  background: var(--tint); }
.buy-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The one the shop would rather sell, marked once and quietly. */
.buy-card.featured { border-color: var(--gold); }

.buy-card-body { display: flex; flex-direction: column; gap: 6px; }
.buy-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.buy-card-name { font-weight: 600; }
.buy-badge { font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--brand); }
.buy-card.featured .buy-badge { background: var(--brand); color: #fff; }

.buy-card-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buy-now { font: 500 18px/1.2 inherit; }
.buy-was { color: var(--muted); text-decoration: line-through; font-size: 14px; }
.buy-save { color: var(--sale); font-size: 13px; font-weight: 600; }
.buy-card-blurb { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---- the figures a piece is cut to ---- */
.measure { margin: 4px 0 16px; padding: 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); }
.measure[hidden] { display: none; }
.measure-lead { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.measure-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.measure label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.measure label span { color: var(--muted); }
.measure input, .measure textarea { font: inherit; padding: 9px 11px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; color: inherit; width: 100%; }
.measure input:focus, .measure textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.measure-notes { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; font-size: 13px; }
.measure-saved { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 520px) {
  .measure-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-card-price { gap: 8px; }
}

/* ---- how a bag line was bought ---- */
.cart-buying { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.cart-buying-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.cart-chip.bought { background: var(--tint); color: var(--brand); border-color: transparent; }
.cart-save { color: var(--sale); font-size: 13px; font-weight: 600; }
.cart-policy { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cart-measure { margin: 0 0 6px; font-size: 12px; color: var(--ink); }
.cart-measure-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cart-option-form { margin-top: 6px; }
.cart-option-form select { font: inherit; font-size: 13px; padding: 6px 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: inherit; }

/* ---- owning up to a final sale before the money moves ---- */
.final-sale { margin: 16px 0; padding: 14px 16px; background: var(--tint);
  border: 1px solid var(--brand); border-radius: var(--radius); }
.final-sale label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
  line-height: 1.5; cursor: pointer; }
.final-sale input { margin-top: 3px; flex: 0 0 auto; }
.final-sale-why { margin: 10px 0 0 28px; padding: 0; list-style: disc; }
.final-sale-why li { color: var(--muted); font-size: 12px; line-height: 1.6; }
.summary-how { display: block; font-size: 12px; color: var(--brand); margin-top: 2px; }
.summary-save { display: block; font-size: 12px; color: var(--sale); }
.summary-policy { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ---- what can still be done about a piece already bought ---- */
.order-terms { list-style: none; margin: 8px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 5px; }
.order-terms li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.order-badge { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.order-badge.ok { background: #e9f3ec; color: #1f5c38; }
.order-badge.final { background: var(--tint); color: var(--brand); }

/* A confirmed order carries no thumbnail, so its lines must not leave the 96px picture column
   standing empty — that squeezed the title to one word a line. */
.cart-line.plain { grid-template-columns: minmax(0, 1fr) auto; }
.order-where, .cart-where { color: var(--brand); font-weight: 600; }
.cart-where { margin: 0 0 6px; font-size: 13px; }

/* ---- cloth is bought by the metre ---- */
.length { margin: 18px 0 4px; }
.length > label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px; }
.length > label .sub { text-transform: none; letter-spacing: 0; font-size: 12px; }
.length-row { display: flex; align-items: center; gap: 10px; }
.length-row input { font: inherit; width: 92px; padding: 11px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
.length-unit { font-size: 14px; color: var(--muted); }


/* The shop is running a gateway only the founder can see: say so where it matters. */
.preview-note { margin: 0 0 12px; padding: 9px 13px; border-radius: var(--radius);
  background: var(--tint); color: var(--brand); font-size: 13px; font-weight: 600; }

/* Two lines, so a row of cards has one baseline instead of four. The full name is still on the
   card's title attribute, and on the piece's own page. */
.card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
/* The fifth column is only offered where it fits; below that the button is not shown at all. */
@media (max-width: 1399px) { .view-toggle .only-wide { display: none; } }
/* Below 700px the rail is two across whatever is chosen, so the chooser is a control that does
   nothing while insisting it is set to four. Better absent than lying. */
@media (max-width: 700px) { .view-toggle { display: none; } }

/* ---- the strip that turns ---- */
.announce .wrap { justify-content: center; }
.announce-line { margin: 0; display: flex; align-items: center; gap: 8px; }
.announce-line[hidden] { display: none; }

/* Both of the rules that used to live here - heading text tightening at 1533, account labels
   disappearing at 1560 - existed only because the mark, the headings, the search box and the
   account links were fighting over one row. They are not any more, so the headings keep one size
   and the labels are always spelled out. */

/* The measuring guide under the size table: full width of the panel, never wider than the screen. */
.size-how { margin: 18px 0 0; }
.size-how img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); }