/* theRhea — Collection. A client preview built to The Row's measured shop system
   (13 px type, 2:3 photographs, 4 columns, 40 px gutters, 100 px between rows),
   with theRhea's own name, photographs, pieces and words. */
:root {
  --ink: #000;
  --ink2: #1c1b1b;
  --grey: #6a6a6a;      /* breadcrumb, secondary lines (5.4:1 on white) */
  --faint: #a5a3a3;     /* unavailable and disabled only, never essential text */
  --line: #ddd;
  --tile: #f8f6f5;      /* behind every photograph */
  --m: 20px;            /* page margin */
  --g: 40px;            /* column gutter */
  --rg: 100px;          /* between rows */
  --head: 60px;           /* The Row's header reads as 60: photographs start there */
  --sans: "Host Grotesk", "Noto Sans Georgian", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.dialog-open, html.menu-open { overflow: hidden; }
body { margin: 0; background: #fff; color: var(--ink2); font: 400 13px/1.65 var(--sans); font-variant-numeric: tabular-nums; }
html[lang="ka"] body { line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.u, .hd a:hover, .hd button:hover, .ft a:hover, .cap a:hover, .crumb a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.grey { color: var(--grey); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 30; }
.skip:focus { top: 8px; }

/* header: seven links, the spaced name, four utilities */
.hd { position: relative; z-index: 20; height: var(--head); padding: 0 var(--m); background: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hd nav ul, .hd .util { display: flex; gap: 0 30px; align-items: center; white-space: nowrap; }
.hd .util { justify-self: end; }
.mark { font-size: 18px; font-weight: 300; letter-spacing: 0.36em; margin-right: -0.36em; line-height: 1; color: var(--ink); white-space: nowrap; }
.ico { display: none; }
.ico svg { width: 20px; height: 20px; }

/* the phone menu */
.menu { position: fixed; inset: 0; z-index: 40; background: #fff; padding: 0 var(--m) 28px; display: flex; flex-direction: column; overflow: auto; }
.menu[hidden] { display: none; }
.menu-top { height: var(--head); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu-top button { justify-self: end; min-height: 44px; }
.menu ul { margin-top: 18px; border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu ul a, .menu ul button { display: flex; align-items: center; min-height: 48px; width: 100%; text-align: left; font-size: 14px; }
.menu .menu-foot { margin-top: auto; padding-top: 28px; color: var(--grey); display: grid; gap: 2px; }

/* the breadcrumb row and the filter */
.crumb { padding: 32px var(--m) 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.crumb .path { display: flex; gap: 0 9px; flex-wrap: wrap; }
.crumb .count { color: var(--grey); margin-left: 6px; }
.fbtn { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.fbtn .plus { color: var(--grey); font-size: 14px; line-height: 1; transition: transform 0.2s ease; }
.fbtn[aria-expanded="true"] .plus { transform: rotate(45deg); }
.fpanel { padding: 4px var(--m) 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); }
.fpanel[hidden] { display: none; }
.fpanel h2 { color: var(--grey); margin-bottom: 6px; }
.fpanel ul { display: grid; gap: 2px; }
.fpanel button { text-align: left; }
.fpanel button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fpanel .n { color: var(--grey); margin-left: 4px; }
.fpanel .clear { grid-column: 4; justify-self: end; align-self: end; text-decoration: underline; text-underline-offset: 3px; }

/* the grid: 2:3 photographs, name left and price right */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--rg); padding: 0 var(--m); grid-auto-flow: dense; }
.card .ph { display: block; position: relative; aspect-ratio: 2 / 3; background: var(--tile); overflow: hidden; }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card .ph .alt { opacity: 0; transition: opacity 0.35s ease; }
@media (hover: hover) and (pointer: fine) { .card:hover .ph .alt { opacity: 1; } }
.card .ph:focus-visible .alt { opacity: 1; }
.cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; color: var(--ink); }
.cap .pr { white-space: nowrap; }
.ed { grid-column: span 2; grid-row: span 2; position: relative; background: var(--tile); min-height: 400px; overflow: hidden; }
.ed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ed.right { grid-column: 3 / span 2; grid-row: 3 / span 2; }
.empty { padding: 0 var(--m) 40px; color: var(--grey); }

/* footer: language and address, three link columns, the newsletter */
.ft { margin: 140px 10px 0; border-top: 1px solid var(--line); padding: 50px 57px 28px; }
.ft .cols { display: grid; grid-template-columns: 172px repeat(3, minmax(0, 196px)) minmax(200px, 255px); gap: 0 70px; align-items: start; }
.ft .lang { border-right: 1px solid var(--line); padding-right: 30px; display: grid; gap: 22px; }
.ft .lang span { display: block; }
.ft ul { display: grid; gap: 9px; }
.ft .copy { text-align: center; margin-top: 30px; display: grid; gap: 4px; }
.ft .copy .grey { font-size: 12px; }
.nl { display: grid; gap: 14px; }
.nl .row { display: flex; border-bottom: 1px solid var(--ink2); padding: 4px 0 6px; }
.nl input[type="email"] { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; }
.nl input[type="email"]::placeholder { color: var(--grey); }
.nl input[type="email"]:focus { outline: none; }
.nl .row:focus-within { outline: 1px solid var(--ink); outline-offset: 4px; }
.nl .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; }
.nl .consent input { margin: 1px 0 0; width: 15px; height: 15px; accent-color: var(--ink); flex: none; }
.msg:empty { display: none; }
.msg { color: var(--grey); }

/* buttons */
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 30px; padding: 0 18px; background: #fff; color: var(--ink); border: 1px solid var(--ink2); }
.btn:hover { background: var(--ink2); color: #fff; }
.btn.dark { background: #212121; color: #fff; min-height: 45px; }
.btn.light { background: #f0f0f0; border-color: transparent; min-height: 45px; }
.btn.light:hover { background: #e6e6e6; color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn.dark[disabled]:hover { background: #212121; }

/* bag drawer, 600 wide like the reference */
dialog { color: var(--ink2); }
dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
#bag { margin: 0 0 0 auto; width: min(600px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; border: 0; padding: 0; background: #fff; }
#bag[open] { display: flex; flex-direction: column; }
.bag-head { height: 60px; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; flex: none; }
[data-bag-body] { padding: 10px 30px 30px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 22px; }
.bag-lines { display: grid; gap: 22px; }
.bag-lines li { display: grid; grid-template-columns: 170px 1fr auto; gap: 20px; align-items: start; }
.bag-lines img { width: 170px; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 0; background: var(--tile); }
.bag-lines li div { display: grid; }
.bag-lines .rm { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.bag-foot { margin: auto -30px -30px; display: grid; border-top: 1px solid var(--line); padding-top: 18px; }
.bag-foot .sum, .bag-foot .grey { padding: 0 30px 14px; }
.bag-foot .btn { border: 0; }
.bag-foot .sum { display: flex; justify-content: space-between; }
.bag-foot .btn { width: 100%; }
.bag-foot:only-child, .bag-foot.solo { border-top: 0; }

/* product page: photographs stacked on the left, the information column on the right */
.pdp { display: grid; grid-template-columns: 6.25% 42.85% 6.95% 34.6% 1fr; align-items: start; }
.shots { grid-column: 2; display: grid; }
.shots figure { aspect-ratio: 2 / 3; background: var(--tile); position: relative; overflow: hidden; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.shots .count { display: none; }
.info { grid-column: 4; position: sticky; top: 0; padding: 0 0 40px; display: grid; }
.info.free { position: static; }
.info .bc { color: var(--grey); display: flex; gap: 9px; flex-wrap: wrap; }
.info .bc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.info h1 { margin-top: 48px; color: var(--ink2); }
.info .price { margin-top: 15px; color: var(--ink); display: flex; gap: 12px; align-items: baseline; }
.info .price .grey { font-size: 12px; }
.info .colour { margin-top: 30px; display: flex; gap: 12px; align-items: center; }
.info .sw { width: 18px; height: 18px; border: 1px solid var(--ink2); padding: 2px; flex: none; }
.info .sw i { display: block; width: 100%; height: 100%; }
.info .sizes-row { margin-top: 28px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.info fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.info legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sizes { display: flex; gap: 18px; flex-wrap: wrap; }
.size { position: relative; }
.size input { position: absolute; inset: -6px -4px; opacity: 0; margin: 0; cursor: pointer; }
.size span { display: inline-block; padding: 2px 0; }
.size small { display: none; }
.size input:checked + span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--ink); }
.size input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.size:hover span { text-decoration: underline; text-underline-offset: 4px; }
.info .guide-link { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.info .add { margin-top: 26px; width: 100%; }
.info .warn { margin-top: 8px; color: var(--ink); }
.info .warn:empty { display: none; }
.info .pick { margin-top: 12px; }
.info .pick a { text-decoration: underline; text-underline-offset: 3px; }
.info .save { margin-top: 6px; justify-self: start; text-decoration: underline; text-underline-offset: 3px; color: var(--grey); }
.info .save[aria-pressed="true"] { color: var(--ink2); }
.info .desc { margin-top: 52px; }
.info .note { margin-top: 10px; color: var(--grey); }
.info .acc { margin-top: 50px; display: grid; gap: 14px; }
.info summary { cursor: pointer; list-style: none; width: max-content; max-width: 100%; }
.info summary::-webkit-details-marker { display: none; }
.info details[open] summary { text-decoration: underline; text-underline-offset: 3px; }
.info details > *:not(summary) { margin-top: 10px; }
.info details ul { display: grid; gap: 2px; }
.info details p + p { margin-top: 6px; }
.similar { padding: 0 var(--m); margin-top: 60px; }
.similar > h2 { margin-bottom: 20px; }
.similar .grid { padding: 0; }

/* size guide dialog */
#guide { width: min(640px, calc(100vw - 32px)); border: 0; padding: 30px; }
#guide .head { display: flex; justify-content: space-between; margin-bottom: 18px; }
#guide .table-wrap { overflow-x: auto; }
#guide table { width: 100%; border-collapse: collapse; font-size: 12px; }
#guide th, #guide td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 400; }
#guide th[scope="row"] { text-align: left; color: var(--grey); }
#guide .sel { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
#guide .finder { margin-top: 18px; display: grid; gap: 10px; }
#guide .finder label { display: grid; gap: 4px; }
#guide .finder input[type="number"] { border: 0; border-bottom: 1px solid var(--ink2); padding: 4px 0; width: 120px; }
#guide .finder .opts { display: flex; flex-wrap: wrap; gap: 6px 16px; }
#guide .finder .opts label { display: flex; gap: 6px; align-items: center; }
#guide .finder fieldset { border: 0; padding: 0; margin: 0; }
#guide .finder legend { margin-bottom: 6px; color: var(--grey); padding: 0; }
#guide .p { margin-top: 12px; color: var(--grey); }
#guide .btn { justify-self: start; }

/* atelier page: the same two columns as the product page */
.at { display: grid; grid-template-columns: 6.25% 42.85% 6.95% 34.6% 1fr; align-items: start; }
.at .pics { grid-column: 2; display: grid; }
.at .pic { aspect-ratio: 2 / 3; background: var(--tile); position: relative; overflow: hidden; }
.at .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.at .text { grid-column: 4; padding-top: 0; display: grid; }
.at .text .bc { color: var(--grey); }
.at .text h1 { margin-top: 48px; }
.at .text .lead { margin-top: 24px; display: grid; gap: 10px; }
.at .sect { margin-top: 60px; display: grid; gap: 8px; }
.at .sect h2 { color: var(--ink); }
.at .facts { display: grid; gap: 2px; }
.at .facts div { display: flex; gap: 12px; }
.at .facts dt { color: var(--grey); min-width: 150px; flex: none; }
.at .facts dd { margin: 0; }
.at ol { display: grid; gap: 6px; }
.at ol li { display: grid; grid-template-columns: 22px 1fr; }
.at ol .i { color: var(--grey); }
.book { display: grid; gap: 22px; }
.book fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.book legend { color: var(--grey); padding: 0; margin-bottom: 6px; }
.book .opts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.book .opts label { position: relative; }
.book .opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.book .opts span { display: inline-flex; gap: 0.35em; padding: 2px 0; }
.book .opts b { font-weight: 400; }
.book .opts input:checked + span { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
.book .opts input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.book .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.book .field { display: grid; gap: 4px; }
.book .field span { color: var(--grey); }
.book .field input { border: 0; border-bottom: 1px solid var(--ink2); padding: 4px 0; background: transparent; }
.book .btn { width: 100%; }
.flist ul { display: grid; gap: 10px; }
.flist li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; }
.flist li img { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 0; background: var(--tile); }
.flist li small { display: block; color: var(--grey); font-size: inherit; }
.flist button { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }

/* narrower screens */
@media (max-width: 1280px) { .hd nav li.opt { display: none; } }
/* below 1100 the header becomes the compact one: menu, name, bag */
@media (max-width: 1100px) {
  .hd nav, .hd .util .wide { display: none; }
  .ico { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .hd .menu-btn { justify-self: start; margin-left: -12px; }
  .hd .util { gap: 0; margin-right: -12px; }
}
@media (max-width: 1180px) {
  .ft .cols { grid-template-columns: 150px repeat(2, minmax(0, 1fr)) minmax(220px, 1.2fr); gap: 30px 40px; }
  .ft .cols > ul.c3 { display: none; }
}
@media (max-width: 860px) {
  :root { --m: 15px; --g: 10px; --rg: 50px; }
  .ico .badge { font-size: 11px; margin-left: 2px; }
  .mark { font-size: 16px; letter-spacing: 0.32em; margin-right: -0.32em; }
  .hd .mark { min-height: 44px; display: inline-flex; align-items: center; }
  .crumb { padding: 22px var(--m) 14px; }
  .fpanel { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .fpanel .clear { grid-column: 2; }
  .grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed, .ed.right { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 4; min-height: 0; }
  .cap { flex-direction: column; gap: 2px; padding: 12px 10px 0; }
  .ft { margin: 90px 0 0; padding: 36px var(--m) 24px; }
  .ft .cols { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .ft .lang { grid-column: 1 / -1; border-right: 0; padding-right: 0; grid-template-columns: 1fr 1fr; }
  .ft .cols > ul.c3 { display: grid; }
  .ft .nl-wrap { grid-column: 1 / -1; }
  .pdp, .at { grid-template-columns: 1fr; }
  .shots { grid-column: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots figure { flex: 0 0 100%; scroll-snap-align: start; }
  .shots .count { display: block; position: absolute; left: 15px; bottom: 12px; font-size: 12px; color: var(--ink); }
  .info, .at .text { grid-column: 1; position: static; padding: 18px var(--m) 0; }
  .info h1, .at .text h1 { margin-top: 22px; }
  .info .desc, .info .acc { margin-top: 34px; }
  .at .pics { grid-column: 1; }
  .at .pic + .pic { display: none; }
  .similar { padding: 0; }
  .similar > h2 { padding: 0 var(--m); }
  .book .two { grid-template-columns: 1fr; }
  .bag-head, [data-bag-body] { padding-left: var(--m); padding-right: var(--m); }
}
@media (prefers-reduced-motion: reduce) { .card .ph .alt, .fbtn .plus { transition: none; } }
/* Georgian labels are longer: the three garment links wait in the filter and the phone menu */
@media (max-width: 1800px) { html[lang="ka"] .hd nav li.opt { display: none; } }
.cap .act a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 860px) { .crumb .path > a:first-child, .crumb .path > span[aria-hidden] { display: none; } }

/* per-card framing: the focal point and a gentle zoom keep faces at a similar size */
.card .ph img.main { object-position: var(--pos, 50% 0); transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 0); }
.card .ph .alt { object-position: var(--apos, 50% 0); }

/* phones: real tap targets for the small text controls */
@media (max-width: 860px) {
  .fbtn { min-height: 44px; padding: 0 0 0 12px; margin-right: -4px; }
  .fpanel button { min-height: 40px; display: inline-flex; align-items: center; }
  .size span { padding: 10px 0; }
  .size input { inset: 0 -9px; }
  .info .add { min-height: 44px; }
  .info summary { padding: 9px 0; }
  .info .acc { gap: 2px; }
  .info .guide-link, .info .pick a, .info .save { display: inline-block; padding: 10px 0; }
  .info .pick { margin-top: 2px; }
  .info .save { margin-top: 0; }
  .book .opts span { padding: 10px 0; }
  .crumb { padding-top: 14px; padding-bottom: 6px; }
  .bag-foot { margin: auto calc(-1 * var(--m)) -30px; }
  .bag-foot .sum, .bag-foot .grey { padding-left: var(--m); padding-right: var(--m); }
  .bag-lines li { grid-template-columns: 96px 1fr auto; }
  .bag-lines img { width: 96px; }
}
@media (max-width: 1320px) { html[lang="ka"] .hd nav li:nth-child(6) { display: none; } }

/* every page: the breadcrumb row sits at the same height under the header, and the content starts at the same line */
.info h1, .at .text h1 { margin-top: 0; }
.info .price { margin-top: 15px; }
@media (max-width: 860px) { .info h1, .at .text h1 { margin-top: 0; } .pdp .info, .at .text { padding-top: 18px; } }
@media (max-width: 860px) { .crumb { min-height: 64px; align-items: center; padding-top: 14px; padding-bottom: 6px; } }