/* Uyali shop pages: the home page, "Sell on Uyali", the shop pages and the coming-soon product pages.
   Loaded after styles.css. It reuses that file's tokens and parts (.wrap, .bar, .btn, .tag, .dot, .trust,
   .rows, .fit, .faq, .acc, .night, .close, .foot) and adds only what these pages need.
   nudgeball.html does not load this file, so nothing here changes that page. */

/* ── Shared by every shop page (body.shop-page) ── */
a.cart-btn { text-decoration: none; }
.shop-page .tag { grid-area: auto; justify-self: start; align-self: auto; }   /* the Nudgeball buy box moves its own tag on wide screens */
a.tag { position: relative; text-decoration: none; }
a.tag:hover { border-color: var(--muted); }
a.tag::after { content: ""; position: absolute; inset: -7px 0; }      /* a 44 px target around a 32 px pill */
.shop-page .nav a { min-height: 44px; }

/* The top bar gains its hairline once the page has scrolled. On the Nudgeball page app.js does this;
   here the browser does it, where it can. */
@keyframes bar-line { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--line); } }
@supports (animation-timeline: scroll()) {
  .shop-page .bar { animation: bar-line linear both; animation-timeline: scroll(); animation-range: 0 12px; }
}

/* A status line inside a card: a dot and two or three words */
.state { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; }

/* Footer links: tall enough for a thumb */
.shop-page .foot-policy-links { gap: 0 18px; padding-block: 0; }
.shop-page .foot-policy-links, .shop-page .foot-contact { margin-block: -8px; }
.shop-page .foot-policy-links a, .shop-page .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.shop-page .foot-policy-links a { margin-inline: -4px; padding-inline: 4px; }

/* ── Page heading: the home page and the three shop pages ── */
.phead { display: grid; gap: 16px; padding-block: clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.phead h1 { font-size: clamp(36px, 11.2vw, 96px); line-height: .96; letter-spacing: -0.045em; }
.phead p { max-width: 44ch; color: var(--text-2); font-size: clamp(17px, 1.7vw, 20px); }

/* Beside the heading on the home page and on "Sell on Uyali": a few words and one thing to do */
.phead-side { display: grid; gap: 12px; justify-items: start; }
.phead-now { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 650; text-underline-offset: 4px; }

/* A section heading with a line beside it, as in "How it plays" on the Nudgeball page */
.shead { display: grid; gap: 12px; }
.shead p { max-width: 44ch; color: var(--text-2); font-size: 17px; }

/* ── Tiles: a photo, a name and a status. The whole tile is one link. ── */
.tiles { display: grid; gap: 12px; }
.tile { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--paper); transition: border-color .15s ease; }
.tile:hover { border-color: var(--muted); }
.tile-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fill); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
/* A small photo is shown whole on a plain panel, never stretched: it takes the panel's height, less a margin,
   and keeps its own shape. The same rule serves the gallery and the rows on a product page. */
[data-fit="contain"] { --pad: 16px; }
.tile-img[data-fit="contain"] > img, .pcard-img[data-fit="contain"] > img, .pgal-frame[data-fit="contain"] > img, .pgal-thumb[data-fit="contain"] > img, .row-img[data-fit="contain"] > img { position: absolute; top: var(--pad); left: 50%; width: auto; max-width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); border-radius: var(--r-s); object-fit: contain; transform: translateX(-50%); }
.tile-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.tile-shop { color: var(--muted); font-size: 13px; font-weight: 600; }
.tile h2, .tile h3 { font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; }
.tile p { color: var(--text-2); font-size: 15px; }
.tile-link { text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; }
.tile .state { margin-top: auto; padding-top: 6px; }
.tile .tile-price { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@supports selector(:has(*)) {
  .tile:has(.tile-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .tile-link:focus-visible { outline: none; }
}
/* A tile on its side: a square photo beside the words */
.tile-row { grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.tile-row .tile-img { align-self: stretch; aspect-ratio: auto; min-height: 112px; }
.tile-row .tile-img img { position: absolute; inset: 0; }
.tile-row .tile-img[data-fit="contain"] { --pad: 10px; }
.tile-row .tile-img[data-fit="contain"] img { inset: var(--pad) auto auto 50%; }

/* ── Home: the three shops as doors ── */
.doors { padding-bottom: clamp(56px, 8vw, 104px); }
.door h2, .door h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; }
.soon .doors { padding-bottom: 0; }      /* the same doors inside a section that has its own space (sell.html) */
/* Phones: three short rows, so all three shops are on the first screen. */
@media (max-width: 719px) {
  .door { grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .door .tile-img { align-self: stretch; aspect-ratio: auto; min-height: 128px; }
  .door .tile-img img { position: absolute; inset: 0; }
}

/* ── Home: what can be ordered today (inside a .night band) ── */
.now-row { display: grid; gap: 20px; align-items: center; }
.now-what { display: grid; gap: 8px; justify-items: start; }
.now-what h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.now-what p { max-width: 46ch; color: var(--night-muted); font-size: 17px; }
.now-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--night-muted); font-size: 14px; }
.now-price .price-now { font-size: 24px; }

/* ── Home: coming soon ── */
.soon { display: grid; gap: 28px; padding-block: clamp(56px, 8vw, 104px); }
/* Phones: two side by side. With an odd number the last one lies on its side below, as the colour cards do
   on the Nudgeball page. Wider screens: three across, for any number of cards. */
.tiles-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 639px) {
  .tiles-3 > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .tiles-3 > .tile:last-child:nth-child(odd) .tile-img { align-self: stretch; aspect-ratio: auto; min-height: 128px; }
  .tiles-3 > .tile:last-child:nth-child(odd) .tile-img img { position: absolute; inset: 0; }
  .tiles-3 > .tile:last-child:nth-child(odd) .tile-img[data-fit="contain"] { --pad: 10px; }
  .tiles-3 > .tile:last-child:nth-child(odd) .tile-img[data-fit="contain"] img { inset: var(--pad) auto auto 50%; }
  .tiles-3 .tile-body { padding: 14px 14px 16px; }
  .tiles-3 .tile h3 { font-size: 18px; }
}

/* ── A quiet panel: "ask us" on the home page, "not on sale yet" on a shop page ── */
.panel { padding-bottom: clamp(56px, 8vw, 104px); }
.panel-in { display: grid; gap: 20px; align-items: center; justify-items: start; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.panel-copy { display: grid; gap: 12px; }
.panel-copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
.panel-copy p { max-width: 54ch; color: var(--text-2); font-size: 17px; }

/* ── "Sell on Uyali": a pale lime band, on the home page and as "How to start" on sell.html ── */
.sellband { background: var(--lime-soft); }
.sellband-in { display: grid; gap: 28px; padding-block: clamp(48px, 7vw, 88px); }
.sellband-copy { display: grid; gap: 16px; justify-items: start; }
.sellband-copy p { max-width: 44ch; color: var(--text-2); font-size: 17px; }
.sellband-copy .btn { margin-top: 4px; }
.sellband-list { display: grid; gap: 0; align-content: center; font-size: clamp(18px, 2vw, 22px); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.sellband-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding-block: 16px; border-top: 1px solid rgb(11 11 12 / .14); }
.sellband-list li:last-child { border-bottom: 1px solid rgb(11 11 12 / .14); }
.sellband-list .ico { margin-top: .12em; }
.sellband-label { margin-bottom: 12px; color: var(--text-2); font-size: 15px; font-weight: 600; }

/* ── sell.html: what Uyali does, as three statements in a dark band; and its questions after the pale band ── */
.does { display: grid; gap: 20px; margin-top: 16px; }
.does li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--night-line); }
.does h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; }
.does p { max-width: 34ch; color: var(--night-muted); font-size: 17px; }
.faq-after-band { padding-top: clamp(56px, 8vw, 104px); }

/* ── Shop pages: the product list ──
   One card (.pcard) for each product, all in one container (.plist). Nothing is set by hand: the layout
   follows the number of cards.
     one             a wide feature card: the photo on one side, the words and a button on the other
     two             side by side (one above the other on a phone)
     three or more   a grid: two across on phones and tablets, three across on desktop
   Cards in a row are the same height, with the status at the foot. The photos of a shop share one frame:
   data-frame="square" or data-frame="portrait" on .plist. */
.shop-list { padding-bottom: clamp(40px, 6vw, 72px); }
.plist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--paper); transition: border-color .15s ease; }
.pcard:hover { border-color: var(--muted); }
.pcard-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--fill); }
.plist[data-frame="portrait"] .pcard-img { aspect-ratio: 4 / 5; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 22px; }
.pcard h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.pcard-desc { color: var(--text-2); font-size: 16px; }
.pcard-link { text-decoration: none; }
.pcard-link::after { content: ""; position: absolute; inset: 0; }      /* the whole card opens the product */
@supports selector(:has(*)) {
  .pcard:has(.pcard-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pcard-link:focus-visible { outline: none; }
}
.pcard .state { order: 9; margin-top: auto; padding-top: 6px; }      /* at the foot, so a row of cards lines up */
.pcard .pprice-line { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.pcard .pprice-line[data-priced], .pcard .price-now { font-size: 20px; }
/* The button is a picture of one: the card itself is the link. It shows on a feature card only. */
.pcard-actions { display: contents; }
.pcard-cta { display: none; }
.pcard-more { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; font-size: 15px; font-weight: 600; text-underline-offset: 4px; }      /* above the card-wide link */
/* Under the list, when more is to come */
.plist-note { margin-top: 16px; color: var(--muted); font-size: 15px; }

/* Exactly two cards: larger names */
.pcard:first-child:nth-last-child(2) h2, .pcard:first-child:nth-last-child(2) ~ .pcard h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; }

/* One card: the feature */
.pcard:only-child .pcard-body { justify-content: center; gap: 16px; padding: clamp(20px, 4.4vw, 56px); }
.pcard:only-child h2 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.pcard:only-child .pcard-desc { max-width: 40ch; font-size: 17px; }
.pcard:only-child .state { order: 0; margin-top: 0; padding-top: 0; }
.pcard:only-child .pprice-line { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.pcard:only-child .pprice-line[data-priced], .pcard:only-child .price-now { font-size: 28px; }
.pcard:only-child .pcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 4px; }
.pcard:only-child .pcard-cta { display: inline-flex; }
.pcard:only-child .pcard-more { margin-block: 0; }

/* Three or more cards on a phone: two across, and each card keeps to the name, the price and the status. */
@supports selector(:has(*)) {
  @media (min-width: 360px) and (max-width: 639px) {
    .plist:has(> .pcard:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .plist:has(> .pcard:nth-child(3)) .pcard-body { gap: 6px; padding: 14px 14px 16px; }
    .plist:has(> .pcard:nth-child(3)) h2 { font-size: 18px; }
    .plist:has(> .pcard:nth-child(3)) :is(.pcard-desc, .pcard-more) { display: none; }
    .plist:has(> .pcard:nth-child(3)) .pprice { gap: 2px 8px; }
    .plist:has(> .pcard:nth-child(3)) .price-now { padding: 2px 8px; font-size: 16px; }
    .plist:has(> .pcard:nth-child(3)) .pprice-line { font-size: 14px; line-height: 1.25; }
    .plist:has(> .pcard:nth-child(3)) .pcard-price { line-height: 1.25; }
  }
}

/* A price that is not known yet, said plainly. shop.js swaps in the price (data-priced) once catalogue.js has one. */
.pprice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pprice-line { color: var(--ink); font-size: 20px; line-height: 1.2; font-weight: 750; letter-spacing: -0.02em; }
.pprice-line[data-priced] { padding: 4px 12px; border-radius: var(--r-s); background: var(--lime); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* The other two shops, near the bottom of a shop page */
.others { display: grid; gap: 20px; padding-bottom: clamp(56px, 8vw, 104px); }
.others > h2 { font-size: clamp(24px, 3vw, 32px); }

/* ── Product page: gallery and details, side by side as on the Nudgeball page ── */
.pstage { padding-top: 0; }
.pgal { display: grid; gap: 12px; align-self: start; min-width: 0; }
/* JavaScript off: every photo, two to a row, each with its caption. */
.pgal-frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pgal-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--fill); }
.pgal-square .pgal-frame { aspect-ratio: 1 / 1; }
.pgal-frame img { width: 100%; height: 100%; object-fit: cover; }
.pgal-frame figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .92); font-size: 13px; font-weight: 650; }
/* A full-length photo is narrower than the frame: it keeps its height and sits in the middle, with nothing behind it. */
.pgal-frame[data-fit="height"] { background: none; }
.pgal-frame[data-fit="height"] img { position: absolute; top: 0; left: 50%; width: auto; max-width: 100%; border-radius: var(--r-l); object-fit: contain; transform: translateX(-50%); }
/* A small photo sits whole on a plain panel (the [data-fit="contain"] rule above). */
.pgal-frame[data-fit="contain"] { --pad: clamp(16px, 4vw, 32px); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
/* The small photos are 700 and 850 px tall: on a sharp screen they are kept to about half that, centred, so they stay crisp. */
.pgal-frame[data-fit="contain"] > img, .prows .row-img[data-fit="contain"] > img { top: 50%; max-height: 400px; transform: translate(-50%, -50%); }
/* JavaScript on (the page's <head> adds .js): one photo at a time, with thumbnails under it. */
.js .pgal-frames { display: block; }
.js .pgal-frame:not([data-on]) { display: none; }
.js .pgal-frame figcaption { display: none; }
.pgal-thumbs { display: none; gap: 10px; min-height: 100px; margin: -9px; padding: 9px; overflow-x: auto; scrollbar-width: none; }
.pgal-thumbs::-webkit-scrollbar { display: none; }
/* The focus ring sits outside the ring that marks the selected photo, so both can be seen. */
.pgal-thumb:focus-visible { outline-offset: 5px; }
.js .pgal-thumbs { display: flex; }
.pgal-thumb { position: relative; flex: 0 0 72px; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: var(--fill); opacity: .72; transition: opacity .15s ease; }
.pgal-square .pgal-thumb { aspect-ratio: 1 / 1; }
.pgal-square .pgal-thumbs { min-height: 82px; }
.pgal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgal-thumb[data-fit="height"] img { object-fit: contain; }
.pgal-thumb[data-fit="contain"] { --pad: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pgal-thumb[data-fit="contain"] img { border-radius: 4px; }
.pgal-thumb:hover { opacity: 1; }
.pgal-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }

.pinfo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
.ptags { display: flex; flex-wrap: wrap; gap: 8px; }
.pinfo h1 { margin-top: -4px; font-size: clamp(40px, 6.2vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.pnote { color: var(--muted); font-size: 14px; }
.opt .pnote { margin-top: 2px; }
/* Colour choice: a pill for each colour, with its name on it */
.pswatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pswatch { position: relative; display: block; cursor: pointer; }
.pswatch-in { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 650; transition: box-shadow .15s ease; }
.pswatch:hover .pswatch-in { box-shadow: inset 0 0 0 1px var(--muted); }
.pswatch input:checked + .pswatch-in { box-shadow: inset 0 0 0 2px var(--ink); }
.pswatch input:focus-visible + .pswatch-in { outline: 2px solid var(--ink); outline-offset: 3px; }
.pswatch-chip { width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(11 11 12 / .14); }
/* Without JavaScript the colour pills could not change the photos, so the page lists the colours in words instead. */
html:not(.js) .js-only { display: none; }
.pcta { display: grid; gap: 10px; }
.pcta + .pnote { margin-top: -8px; }

/* Rows under the product: portrait photos for clothing, and a whole small photo on a plain panel */
.prows .row-img img { aspect-ratio: 4 / 5; }
.prows .row-img[data-fit="contain"] { --pad: clamp(16px, 4vw, 40px); position: relative; aspect-ratio: 1 / 1; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.prows .row-img[data-fit="contain"] img { aspect-ratio: auto; }
.prows .row-img[data-square] img { aspect-ratio: 1 / 1; }
/* "What we know so far" follows the rows directly, so it needs no space of its own above. */
.pknown { padding-top: 0; }

/* The closing band on a product page: what can be ordered today, and the way back to the shop */
.shop-page .close h2 { max-width: 13ch; }
.nowrap { white-space: nowrap; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.close-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-weight: 600; text-underline-offset: 4px; }

/* ══ Daou: the modest fashion brand, a shop on Uyali ══
   Its pages carry <body data-brand="daou">. A card for Daou on another page carries the same attribute
   on the card. Inside that scope the signal colour is Daou's soft pink, never Uyali's lime.
     --daou-pink   soft pink: the logo on ink, and fills that carry ink text
     --daou-blush  tinted panels
     --daou-rose   graphics on a light background only: the logo, dots, hairlines. Too weak for text.
     --daou-deep   text, links and selected states on a light background
   The logo (assets/brand/daou-logo*.svg) is never stretched, redrawn or recoloured outside this palette,
   and keeps clear space of at least the height of its letter "a": about half the logo's own height. */
[data-brand="daou"] {
  --daou-pink: #f2b3c4;
  --daou-blush: #fbedf0;
  --daou-rose: #c76d8a;
  --daou-deep: #a8456a;
  /* Every rule that reads Uyali's lime turns pink here: the strip's current link, the cart count,
     a price once one is set, the "what we know so far" panel. */
  --lime: var(--daou-pink);
  --lime-soft: var(--daou-blush);
  --lime-text: var(--daou-deep);
}
[data-brand="daou"] .dot { background: var(--daou-rose); box-shadow: 0 0 0 3px rgb(199 109 138 / .22); }
[data-brand="daou"] .dot-idle { box-shadow: none; }
[data-brand="daou"] :is(.tile, .pcard):hover, .tile[data-brand="daou"]:hover { border-color: var(--daou-rose); }
[data-brand="daou"] .panel-in { background: var(--daou-blush); box-shadow: none; }
[data-brand="daou"] .row-copy .aside { border-left-color: var(--daou-rose); }
[data-brand="daou"] .pswatch input:checked + .pswatch-in { background: var(--daou-blush); box-shadow: inset 0 0 0 2px var(--daou-deep); }
[data-brand="daou"] .pgal-thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--daou-deep); }

/* The top of the Daou shop page: the logo in soft pink on ink. The logo is the page's h1.
   --clear is the logo's clear space; the plate's padding and the gap to the words both use it. */
.brandhead { padding-block: clamp(8px, 2vw, 24px) clamp(28px, 4vw, 48px); }
.brandhead-in { --logo-w: clamp(200px, 56vw, 440px); --clear: calc(var(--logo-w) * .19); display: grid; gap: var(--clear); padding: var(--clear); border-radius: var(--r-l); background: var(--night); color: var(--paper); forced-color-adjust: none; }
/* If the logo file does not load, its alt text ("Daou") shows in the brand's pink instead of being cut off. */
.brandhead-logo { line-height: 1; color: var(--daou-pink); }
.brandhead-logo img { display: block; width: var(--logo-w); height: auto; }
.brandhead-copy { display: grid; gap: 6px; max-width: 32ch; }
.brandhead-kind { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; font-weight: 750; letter-spacing: -0.025em; }
.brandhead-copy p + p { color: var(--night-muted); font-size: 17px; }

/* The Daou logo as the name on a card (the home page, "The other shops"), on a blush card. */
.tile[data-brand="daou"]:is(.door, .tile-row) { border-color: var(--daou-pink); background: var(--daou-blush); }
.brand-logo { width: auto; height: 30px; margin-block: 2px 8px; }
.tile-row .brand-logo { height: 24px; margin-block: 2px 6px; }
.tile[data-brand="daou"] .tile-shop { color: var(--daou-deep); }

/* The brand tag on a Daou product page: the logo in soft pink on an ink pill. */
.shop-page .tag-daou { padding-inline: 14px; border-color: var(--night); background: var(--night); color: var(--daou-pink); forced-color-adjust: none; }
.tag-daou img { width: auto; height: 16px; }
a.tag-daou:hover { border-color: var(--daou-rose); }

/* ── Wider screens ── */
@media (min-width: 640px) {
  .tiles-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .plist { gap: 16px; }
  .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pgal-thumb { flex-basis: 84px; }
  .pgal-thumbs { min-height: 115px; }
  .pgal-square .pgal-thumbs { min-height: 94px; }
}
@media (min-width: 720px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .door .tile-img { aspect-ratio: 1 / 1; }      /* square, so the three names are on the first screen */
  .door .tile-body { gap: 8px; padding: 20px 22px 22px; }
  .does { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  /* The feature card: photo and words side by side. A square frame fills its half; a portrait frame keeps its shape. */
  .pcard:only-child { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcard:only-child .pcard-img { aspect-ratio: auto; min-height: 100%; }
  .plist[data-frame="portrait"] .pcard:only-child .pcard-img { aspect-ratio: 4 / 5; min-height: 0; }
  .pcard:only-child .pcard-img img { position: absolute; inset: 0; }
  .pcard:only-child .pcard-body { min-height: min(46vw, 560px); }
}
@media (min-width: 900px) {
  .phead { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); align-items: end; gap: 32px; }
  .phead h1 { font-size: min(96px, 7.4vw); }      /* the home page's heading stays on two lines beside its text */
  .phead p { padding-bottom: 8px; }
  .phead-side p { padding-bottom: 0; }
  .phead-side { padding-bottom: 8px; }
  .brandhead-in { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .brandhead-copy { justify-self: end; }
  .shead { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .now-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px; }
  .panel-in { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
  .sellband-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
  .pinfo { gap: 18px; }
  .pinfo h1 { font-size: 56px; }
  /* The gallery is never taller than the window, so its thumbnails stay on screen while the details scroll. */
  .js .pgal { position: sticky; top: calc(var(--bar-h) + 16px); justify-self: center; }
  /* Portrait photos: the thumbnails stand in a rail beside the photo, so the photo can use the height of the window. */
  .js .pgal:not(.pgal-square) { grid-template-columns: 84px minmax(0, 1fr); width: min(100%, max(400px, calc((100vh - var(--bar-h) - 64px) * .8 + 96px))); }
  .js .pgal:not(.pgal-square) .pgal-frames { grid-column: 2; grid-row: 1; }
  .js .pgal:not(.pgal-square) .pgal-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; min-height: 0; overflow: visible; }
  .js .pgal:not(.pgal-square) .pgal-thumb { flex: none; width: 84px; }
  /* Square photos: thumbnails underneath, as on the Nudgeball page. */
  .js .pgal-square { width: min(100%, max(340px, calc(100vh - var(--bar-h) - 64px - 106px))); }
}

@media (forced-colors: active) {
  .pswatch-in, .pgal-thumb { border: 1px solid ButtonText; }
  .pswatch input:checked + .pswatch-in, .pgal-thumb[aria-current="true"] { border: 3px solid Highlight; }
  .pswatch-chip { forced-color-adjust: none; }
}

/* A wide but short window (most laptops): the three shops become side-by-side cards, as on a phone, so their names are on the first screen. */
@media (min-width: 900px) and (max-height: 940px) {
  .door { grid-template-rows: none; grid-template-columns: 128px minmax(0, 1fr); align-items: center; }
  .door .tile-img { align-self: stretch; aspect-ratio: auto; min-height: 128px; }
  .door .tile-img img { position: absolute; inset: 0; }
}
/* Tablets: a product page's rows sit photo beside words, so a tall photo does not fill the whole screen. */
@media (min-width: 640px) and (max-width: 899px) {
  .prows .row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
}

/* ── Clips. A video never loads or plays by itself: the visitor presses play, and then it plays with its sound. ── */
.pvids { display: grid; gap: 20px; padding-bottom: clamp(56px, 8vw, 104px); }
.pvids-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.pvid video, .sellvid video { display: block; width: 100%; height: auto; border-radius: var(--r-l); background: var(--fill); }
.pvid video { aspect-ratio: 9 / 16; object-fit: cover; }
.pvid figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.sellvid { padding-bottom: clamp(40px, 6vw, 72px); }
.sellvid-in { display: grid; gap: 14px; max-width: 960px; }
.sellvid video { aspect-ratio: 16 / 9; }
.sellvid figcaption { font-size: clamp(18px, 2vw, 22px); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.sellvid-says { max-width: 62ch; color: var(--text-2); font-size: 15px; }
@media (min-width: 720px) { .pvids-in { gap: 16px; } }

/* ── A brand's own pages carry the brand's logo in place of Uyali's: in the top bar and in the footer. ── */
.logo-daou img { display: block; height: 34px; width: auto; }
.foot-brand { display: block; height: 40px; width: auto; }
.others-back { margin-top: 16px; font-weight: 650; }
.others-back a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }