/*
Theme Name: woman's feelings
Theme URI: https://womansfeelings.com
Description: Custom WooCommerce theme for a curated Greek skincare shop. Greek-first, mobile-first, no page builder.
Author: womansfeelings
Version: 0.2.0
Requires PHP: 8.1
Text Domain: womansfeelings
WC requires at least: 10.0
WC tested up to: 10.9
*/

/* ============================================================ tokens

   Warm, restrained, one accent. The product photography is still the only real
   chroma — for a shop whose claim is 53 chosen things, letting the products
   carry the colour is the discipline.

   On the accent: this is a shop for women, which is exactly why it is not pink.
   The buyer is spending EUR 30-45 on a serum; the brands that win her (Korres,
   Aesop) are restrained, and pink-washing reads cheap next to a EUR 48 elixir.
   Mulberry is warm and unmistakably feminine without the cliche — and it is in
   the catalogue already (Korres Santorini Grape, Apivita Wine Elixir).

   Blush is a *surface*, never a decoration: it marks the places the page is
   speaking to you personally (chosen filters, the why-we-picked-it note).
*/
:root {
  --paper:   #FAF7F6;
  --ink:     #1E181B;
  --plum:    #6B2A44;
  --plum-lo: #8E4463;
  --blush:   #F2E6E8;
  --mineral: #DCCFD2;
  --muted:   #756A6E;

  --card:    #FFFFFF;
  --rule:    #EBE2E3;

  --sans: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* One scale, used everywhere. Tight tracking on display sizes is where the
     personality lives — we have no serif to lean on. */
  --s-xs:  0.75rem;
  --s-sm:  0.875rem;
  --s-md:  1rem;
  --s-lg:  1.25rem;
  --s-xl:  1.75rem;
  --s-2xl: clamp(2.25rem, 7vw, 3.75rem);
  --s-3xl: clamp(3rem, 14vw, 8rem);

  --gap:  1rem;
  --pad:  1.25rem;
  --max:  76rem;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --r:    12px;
  --r-sm: 8px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s-md);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.main { min-height: 60vh; }

/* ============================================================ header */

.hd {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
}
.hd__in {
  max-width: var(--max); margin: 0 auto;
  padding: .875rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hd__mark { display: grid; gap: .1rem; }
.hd__mark-name {
  font-weight: 700; font-size: var(--s-md);
  letter-spacing: -0.03em;
}
.hd__mark-tag {
  font-size: var(--s-xs); color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.hd__nav { display: flex; align-items: center; gap: 1.25rem; font-size: var(--s-sm); }
.hd__nav a { padding: .25rem 0; border-bottom: 1px solid transparent; }
.hd__nav a:hover { border-bottom-color: var(--ink); }
.hd__cart { display: inline-flex; align-items: center; gap: .4rem; }
.hd__cart-n {
  font-family: var(--mono); font-size: var(--s-xs);
  min-width: 1.35rem; height: 1.35rem;
  display: none; place-items: center;
  border-radius: 999px; background: var(--ink); color: var(--paper);
}
.hd__cart-n.is-on { display: grid; }

/* ============================================================ home

   The hero is a question, not a product. The shop's claim is that someone did
   the choosing; the fastest way to prove it is to ask what you need and answer
   with a short list.
*/

.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 12vw, 7rem) var(--pad) clamp(2rem, 6vw, 3.5rem);
}
.hero__q {
  font-size: var(--s-2xl);
  letter-spacing: -0.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: 1.25rem;
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--s-lg);
  line-height: 1.45;
}

.concerns {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad) clamp(3rem, 8vw, 5rem);
}
.concerns__h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .875rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.concerns__grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* The concern card. The count is the honest part: it is set in mono because it
   is data, and it is large because the smallness is the point. */
.cc {
  border-radius: var(--r);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.cc:hover { border-color: var(--plum); transform: translateY(-2px); }
.cc__name { font-weight: 500; font-size: var(--s-lg); letter-spacing: -0.02em; }
.cc__n {
  font-family: var(--mono); font-size: var(--s-sm);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.cc:hover .cc__n { color: var(--plum); }

.concerns__all {
  display: inline-block; margin-top: 1.5rem;
  font-size: var(--s-sm); font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: .15rem;
}

/* The signature: the catalogue size, stated without apology. */
.thesis {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) var(--pad);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.thesis__n {
  font-family: var(--mono);
  font-size: var(--s-3xl); font-weight: 400;
  line-height: .9; letter-spacing: -0.06em;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.thesis__t {
  margin-top: 1rem; font-size: var(--s-xl);
  font-weight: 700; letter-spacing: -0.03em;
}
.thesis__s { margin-top: .5rem; color: var(--muted); max-width: 40ch; margin-inline: auto; }

/* ============================================================ shop */

.shop { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 4rem; }

.shop__hd { padding: clamp(2rem, 6vw, 3.5rem) 0 1.25rem; }
.shop__title { font-size: var(--s-xl); letter-spacing: -0.035em; }
.shop__count { margin-top: .5rem; color: var(--muted); font-size: var(--s-sm); }
.shop__n {
  font-family: var(--mono); color: var(--ink);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

/* active filter chips */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-bottom: 1.25rem; }
.chips__h { position: absolute; left: -9999px; }
.chips__list { display: contents; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem .35rem .75rem;
  background: var(--plum); color: var(--paper);
  font-size: var(--s-xs); border-radius: 999px;
}
.chip__facet { opacity: .65; }
.chip__name { font-weight: 500; }
.chip__x { font-size: var(--s-md); line-height: 1; opacity: .8; }
.chip:hover .chip__x { opacity: 1; }
.chips__clear {
  font-size: var(--s-xs); color: var(--muted);
  border-bottom: 1px solid var(--mineral); padding-bottom: .1rem;
}
.chips__clear:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* mobile filter trigger */
.fbar {
  position: sticky; top: 4.25rem; z-index: 30;
  width: 100%; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 8px;
  font-family: var(--sans); font-size: var(--s-sm); font-weight: 500;
  cursor: pointer;
}
.fbar__n {
  font-family: var(--mono); font-size: var(--s-xs);
  background: var(--paper); color: var(--ink);
  min-width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center; border-radius: 999px;
}

.shop__body { display: block; }

/* ---- facets: bottom sheet on mobile, column on desktop */
.facets {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  max-height: 85vh; overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 0 var(--pad) var(--pad);
  transform: translateY(100%);
  transition: transform .28s var(--ease);
  overscroll-behavior: contain;
}
.facets.is-open { transform: translateY(0); }

.facets__hd {
  position: sticky; top: 0; background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0 .75rem; border-bottom: 1px solid var(--rule);
}
.facets__hd h2 { font-size: var(--s-md); }
.facets__x {
  background: 0; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--muted); padding: .25rem;
}

.facet { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.facet:last-of-type { border-bottom: 0; }
.facet__h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}
.facet__list { display: flex; flex-direction: column; gap: .1rem; }

/* A filter option. The count is always visible — it is how you know whether a
   click is worth making, and on a 53-product shop it is also the proof that we
   are not padding the catalogue. */
.opt {
  display: flex; align-items: center; gap: .625rem;
  padding: .45rem .5rem .45rem 0;
  font-size: var(--s-sm);
}
.opt__box {
  flex: 0 0 auto; width: .95rem; height: .95rem;
  border: 1px solid var(--mineral); border-radius: 8px;
  background: var(--card);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.opt__name { flex: 1 1 auto; }
.opt__n {
  font-family: var(--mono); font-size: var(--s-xs);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.opt:hover .opt__box { border-color: var(--plum); }
.opt.is-on { font-weight: 500; }
.opt.is-on .opt__box {
  background: var(--plum); border-color: var(--plum);
  box-shadow: inset 0 0 0 2px var(--card);
}
.opt.is-on .opt__n { color: var(--plum); }

.facets__ft { position: sticky; bottom: 0; background: var(--paper); padding: 1rem 0 0; }

/* ---- results */
.results { min-height: 20rem; }
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
}

.card { background: var(--card); border: 1px solid var(--rule);
        border-radius: var(--r); overflow: hidden; }
.card__link { display: grid; height: 100%; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__img { transform: scale(1.03); }

/* No photography yet. An honest placeholder beats a grey box: it says what the
   product is instead of pretending an image failed to load. */
.card__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 6px, transparent 6px 12px);
  color: var(--muted);
}
.card__ph span {
  font-size: var(--s-xs); letter-spacing: .1em; text-transform: uppercase;
  background: var(--card); padding: .3rem .6rem; border: 1px solid var(--rule);
}
.card__tag {
  position: absolute; top: .625rem; left: .625rem;
  background: var(--plum); color: var(--paper);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: .06em;
  padding: .2rem .45rem; border-radius: 8px;
}

.card__body { padding: .875rem; display: grid; gap: .2rem; align-content: start; }
.card__brand {
  font-size: var(--s-xs); color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.card__name {
  font-size: var(--s-sm); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.3;
}
.card__meta {
  margin-top: .35rem; display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--mono); font-size: var(--s-sm);
  font-variant-numeric: tabular-nums;
}
.card__price { font-weight: 500; }
.card__price del { color: var(--muted); font-weight: 400; margin-right: .3rem; }
.card__size { font-size: var(--s-xs); color: var(--muted); }

.empty { padding: 4rem 1rem; text-align: center; }
.empty__h { font-size: var(--s-lg); font-weight: 700; letter-spacing: -0.02em; }
.empty__t { margin-top: .4rem; color: var(--muted); }

.btn {
  display: inline-block; margin-top: 1.25rem;
  padding: .75rem 1.25rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--sans); font-size: var(--s-sm); font-weight: 500;
}
.btn--full { width: 100%; margin: 0; }
.btn:hover { background: var(--plum); }

.woocommerce-pagination { margin-top: 2rem; }
.woocommerce-pagination ul { display: flex; gap: .35rem; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center;
  min-width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--rule); background: var(--card);
  font-family: var(--mono); font-size: var(--s-sm);
}
.woocommerce-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================ footer */

.ft { border-top: 1px solid var(--rule); margin-top: 4rem; }
.ft__in { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--pad); }
.ft__count { display: flex; align-items: baseline; gap: .75rem; }
.ft__n {
  font-family: var(--mono); font-size: var(--s-xl);
  color: var(--plum); font-variant-numeric: tabular-nums;
}
.ft__count-t { color: var(--muted); font-size: var(--s-sm); max-width: 36ch; }
.ft__nav { margin-top: 1.5rem; }
.ft__nav ul { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--s-sm); }
.ft__legal { margin-top: 1.5rem; font-size: var(--s-xs); color: var(--muted); }

/* ============================================================ desktop */

@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60rem) {
  .fbar { display: none; }

  .shop__body {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  /* The sheet becomes a column. Same markup, same links — only the frame moves. */
  .facets {
    position: sticky; top: 5rem; inset: auto;
    transform: none; max-height: calc(100vh - 7rem);
    background: 0; border: 0; padding: 0;
  }
  .facets__hd, .facets__ft, .facets__x { display: none; }
  .facet:first-of-type { padding-top: 0; }
}

/* ============================================================ motion */

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

/* ============================================================ product page

   Warmth here is structural, not decorative. The two blush surfaces are the
   two moments the page speaks to her directly: why we chose this, and what is
   actually in it. Everything else stays on paper.
*/

.pdp { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 4rem; }

.pdp__top { display: grid; gap: 1.75rem; padding-top: 1.5rem; }

.pdp__media { border-radius: var(--r); overflow: hidden; background: var(--card); }
.pdp__media img { border-radius: var(--r); }

.pdp__ph {
  aspect-ratio: 4 / 5;
  display: grid; place-content: center; gap: .5rem; justify-items: center;
  background: var(--blush);
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--plum);
}
.pdp__ph-t {
  font-size: var(--s-xs); letter-spacing: .12em; text-transform: uppercase;
  background: var(--card); padding: .35rem .7rem; border-radius: 999px;
}
.pdp__ph-s { font-size: var(--s-xs); color: var(--muted); }

.pdp__brand {
  font-size: var(--s-xs); color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}
.pdp__name {
  margin-top: .4rem;
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  letter-spacing: -0.04em; line-height: 1.08;
  text-wrap: balance;
}
.pdp__buy {
  margin-top: 1rem;
  display: flex; align-items: baseline; gap: .75rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.pdp__price { font-size: var(--s-xl); font-weight: 500; }
.pdp__price del { color: var(--muted); font-weight: 400; margin-right: .4rem; }
.pdp__size { font-size: var(--s-sm); color: var(--muted); }

.pdp__cart { margin-top: 1.25rem; }
.pdp__cart .quantity { display: none; }        /* one of a thing, by default */
.pdp__cart button,
.pdp__cart .button {
  width: 100%;
  padding: .95rem 1.5rem;
  background: var(--plum); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: var(--s-md); font-weight: 500;
  letter-spacing: -0.01em;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.pdp__cart button:hover { background: var(--ink); transform: translateY(-1px); }
.pdp__cart .stock.out-of-stock { color: var(--muted); font-size: var(--s-sm); }

/* Why we chose it — the curation promise, made good on. */
.why {
  margin-top: 1.75rem;
  padding: 1.15rem 1.25rem;
  background: var(--blush);
  border-radius: var(--r);
}
.why__h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--plum);
}
.why__t { margin-top: .5rem; font-size: var(--s-md); line-height: 1.6; }

.spec { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.spec__h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}

/* Actives, in Greek. Each is a link into everything else containing it —
   the shortest path from "this worked" to a second purchase. */
.actives { display: flex; flex-wrap: wrap; gap: .4rem; }
.active {
  display: inline-block;
  padding: .4rem .8rem;
  background: var(--card);
  border: 1px solid var(--mineral); border-radius: 999px;
  font-size: var(--s-sm); font-weight: 500;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.active:hover { border-color: var(--plum); color: var(--plum); }

.suits { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; font-size: var(--s-sm); }
.suits dt { color: var(--muted); }
.suits dd { margin: 0; }
.suits dd a { border-bottom: 1px solid var(--mineral); }
.suits dd a:hover { border-bottom-color: var(--plum); color: var(--plum); }

/* ---- lower detail */

.pdp__detail {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: grid; gap: 2rem;
}
.sec__h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.how__t { margin-top: .75rem; max-width: 60ch; line-height: 1.65; }
.how__t p + p { margin-top: .75rem; }

/* The full INCI. Open by default: a closed disclosure implies something to
   hide, and the point is that there isn't. */
.inci__d {
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1rem 1.25rem;
}
.inci__s {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.inci__s::-webkit-details-marker { display: none; }
.inci__c {
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.inci__d[open] .inci__c { transform: rotate(-135deg); }
.inci__note { margin-top: .75rem; font-size: var(--s-xs); color: var(--muted); }
.inci__list {
  margin-top: .5rem;
  font-family: var(--mono); font-size: var(--s-xs);
  line-height: 1.9; color: var(--muted);
  word-break: break-word;
}

@media (min-width: 60rem) {
  .pdp__top {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem; align-items: start;
    padding-top: 2.5rem;
  }
  .pdp__media { position: sticky; top: 5.5rem; }
  .pdp__detail { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .pdp__cart button, .pdp__cart .button { width: auto; min-width: 14rem; }
}

/* ============================================================ pre-launch */

.soon {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--pad) clamp(4rem, 12vw, 7rem);
  border-top: 1px solid var(--rule);
}
.soon__h { font-size: var(--s-xl); font-weight: 700; letter-spacing: -0.03em; }
.soon__t { margin-top: .5rem; color: var(--muted); max-width: 40ch; }

/* Draft-preview banner. Logged in you see 53 products; a visitor sees none.
   Without this the two views are indistinguishable and it is genuinely easy to
   believe the shop is live when it is not. */
.pv {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--plum); color: #fff;
  padding: .55rem var(--pad);
  font-size: var(--s-xs);
  display: flex; gap: .75rem; align-items: center; justify-content: center;
  text-align: center;
}
.pv strong { font-weight: 700; }
.pv__n { font-family: var(--mono); }

/* ============================================================ cart

   WooCommerce ships the cart as a table. A cart is a list of things, not
   tabular data, and a 5-column table on a phone is unreadable. This is a list
   that reflows — the form contract (names, nonce, update button) is unchanged.
*/

.cart { max-width: var(--max); margin: 0 auto; padding: clamp(2rem,6vw,3.5rem) var(--pad) 4rem; }
.cart__hd { display: flex; align-items: baseline; gap: .75rem; padding-bottom: 1.25rem; }
.cart__title { font-size: var(--s-xl); letter-spacing: -0.035em; }
.cart__n { color: var(--muted); font-size: var(--s-sm); font-family: var(--mono); }

.cart__body { display: grid; gap: 2rem; }

.ci { display: grid; gap: .625rem; }
.ci__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  grid-template-areas:
    "media info rm"
    "media qty price";
  gap: .5rem .875rem;
  align-items: start;
  padding: .875rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.ci__media { grid-area: media; }
.ci__media img { border-radius: var(--r-sm); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.ci__info { grid-area: info; min-width: 0; }
.ci__brand { font-size: var(--s-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.ci__name { font-size: var(--s-sm); font-weight: 500; line-height: 1.35; margin-top: .1rem; }
.ci__size, .ci__note { font-size: var(--s-xs); color: var(--muted); margin-top: .15rem; }
.ci__qty { grid-area: qty; align-self: end; }
.ci__price {
  grid-area: price; align-self: end; justify-self: end;
  font-family: var(--mono); font-size: var(--s-sm); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ci__rm { grid-area: rm; justify-self: end; }
.ci__x {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
  border-radius: 999px;
}
.ci__x:hover { background: var(--blush); color: var(--plum); }

/* Quantity. WooCommerce's default is a bare number input that on iOS opens a
   full numeric keyboard to change 1 into 2. Steppers are the right control. */
.quantity { display: inline-flex; align-items: center; }
.quantity input[type="number"] {
  width: 3.25rem; height: 2.25rem;
  text-align: center;
  font-family: var(--mono); font-size: var(--s-sm);
  border: 1px solid var(--mineral); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  -moz-appearance: textfield;
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; align-items: center; }
.coupon { display: flex; gap: .4rem; flex: 1 1 16rem; }
.coupon input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid var(--mineral); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--sans); font-size: var(--s-sm);
}
.btn--ghost {
  margin: 0; padding: .6rem 1rem;
  background: 0; color: var(--ink);
  border: 1px solid var(--mineral); border-radius: var(--r-sm);
  font-size: var(--s-sm);
}
.btn--ghost:hover { background: var(--card); border-color: var(--ink); }
/* Update only matters once something changed; JS reveals it. Without JS it
   stays visible, so the cart still updates. */
.cart__update[hidden] { display: none; }

.cart--empty { text-align: left; max-width: 46rem; }
.cart__empty-t { margin-top: .5rem; color: var(--muted); }
.cart__empty-h {
  margin: 2rem 0 .75rem; font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cart__empty-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(13rem,1fr)); }

/* ---- totals */

.tot {
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.tot__h { font-size: var(--s-md); letter-spacing: -0.02em; }
.tot__list {
  margin: 1rem 0 0;
  display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem;
  font-size: var(--s-sm);
}
.tot__list dt { color: var(--muted); }
.tot__list dd { margin: 0; justify-self: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tot__list .tot__coupon { color: var(--plum); }
.tot__grand {
  padding-top: .75rem; border-top: 1px solid var(--rule);
  font-size: var(--s-lg); font-weight: 700; color: var(--ink) !important;
}
.tot__vat { margin-top: .5rem; font-size: var(--s-xs); color: var(--muted); }
.tot .woocommerce-shipping-destination { font-size: var(--s-xs); color: var(--muted); }
.tot ul#shipping_method { display: grid; gap: .35rem; margin-top: .25rem; }
.tot ul#shipping_method li { display: flex; gap: .4rem; align-items: baseline; }

.wc-proceed-to-checkout { margin-top: 1.25rem; }
.btn--go {
  background: var(--plum); border-radius: 999px;
  padding: .95rem 1.5rem; text-align: center;
}
.btn--go:hover { background: var(--ink); }
.tot__back {
  display: block; margin-top: .75rem; text-align: center;
  font-size: var(--s-sm); color: var(--muted);
}
.tot__back:hover { color: var(--ink); }

@media (min-width: 60rem) {
  .cart__body { grid-template-columns: 1fr 20rem; gap: 2.5rem; align-items: start; }
  .cart__side { position: sticky; top: 5.5rem; }
  .ci__row { grid-template-columns: 4.5rem 1fr 6rem 6rem 2rem;
             grid-template-areas: "media info qty price rm"; align-items: center; }
  .ci__price { align-self: center; }
  .ci__rm { align-self: center; }
}

/* ============================================================ checkout

   Summary first in the source: on a phone she sees what she is buying before
   the form she must fill in. CSS reorders on desktop where both are visible.
*/

.co { max-width: var(--max); margin: 0 auto; padding: clamp(2rem,6vw,3.5rem) var(--pad) 4rem; }
.co__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; }
.co__title { font-size: var(--s-xl); letter-spacing: -0.035em; }
.co__back { font-size: var(--s-sm); color: var(--muted); }
.co__back:hover { color: var(--ink); }

.co__form { display: grid; gap: 2rem; }
.co__sec-h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding-bottom: .75rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.co__summary {
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}

/* ---- form fields */

.co .form-row { margin: 0 0 .875rem; display: grid; }
.co label { font-size: var(--s-sm); font-weight: 500; margin-bottom: .3rem; }
.co label .required { color: var(--plum); text-decoration: none; border: 0; }
.co .woocommerce-input-wrapper { width: 100%; }
.co input[type="text"], .co input[type="email"], .co input[type="tel"],
.co input[type="password"], .co textarea, .co select,
.co .select2-container--default .select2-selection--single {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--mineral); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--sans); font-size: var(--s-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.co input:focus, .co textarea:focus, .co select:focus {
  outline: 0; border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(107,42,68,.12);
}
.co textarea { min-height: 5rem; resize: vertical; }
.co .form-row-first, .co .form-row-last { width: 100%; }

/* Woo prints its own validation classes; make them ours. */
.co .woocommerce-invalid input, .co .woocommerce-invalid select { border-color: #C25E4A; }
.co .woocommerce-validated input { border-color: var(--mineral); }

.co .woocommerce-billing-fields__field-wrapper,
.co .woocommerce-shipping-fields__field-wrapper,
.co .woocommerce-additional-fields__field-wrapper { display: grid; }

/* ---- order review table */

.co__summary table.shop_table { width: 100%; border-collapse: collapse; font-size: var(--s-sm); }
.co__summary table.shop_table th { text-align: left; font-weight: 500; color: var(--muted); padding: .5rem 0; }
.co__summary table.shop_table td { padding: .5rem 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.co__summary table.shop_table td.product-name { text-align: left; font-family: var(--sans); }
.co__summary table.shop_table tbody tr { border-bottom: 1px solid var(--rule); }
.co__summary table.shop_table tfoot th { padding-top: .75rem; }
.co__summary table.shop_table tfoot td { padding-top: .75rem; }
.co__summary table.shop_table tfoot .order-total th,
.co__summary table.shop_table tfoot .order-total td {
  font-size: var(--s-lg); font-weight: 700; color: var(--ink);
  border-top: 1px solid var(--rule);
}
.co__summary .product-quantity { color: var(--muted); }

/* ---- payment */

#payment { margin-top: 1.25rem; }
#payment ul.payment_methods { display: grid; gap: .5rem; margin-bottom: 1rem; }
#payment ul.payment_methods li {
  padding: .8rem;
  border: 1px solid var(--mineral); border-radius: var(--r-sm);
  background: var(--paper);
}
#payment ul.payment_methods li label { display: inline; font-weight: 500; margin: 0; }
#payment .payment_box {
  margin-top: .6rem; padding: .6rem .75rem;
  background: var(--blush); border-radius: var(--r-sm);
  font-size: var(--s-sm); color: var(--ink);
}
#payment .payment_box p { margin: 0; }
#payment .woocommerce-privacy-policy-text { font-size: var(--s-xs); color: var(--muted); margin-bottom: 1rem; }
#payment .form-row.place-order { margin: 0; }
#place_order {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--plum); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: var(--s-md); font-weight: 500;
  transition: background .18s var(--ease);
}
#place_order:hover { background: var(--ink); }

/* Woo notices, in our voice. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none;
  margin: 0 0 1.25rem; padding: .8rem 1rem;
  border-radius: var(--r-sm); font-size: var(--s-sm);
  border: 1px solid var(--rule); background: var(--card);
}
.woocommerce-error { border-color: #E7C4BC; background: #FBEFEC; }
.woocommerce-message { border-color: var(--mineral); background: var(--blush); }
.woocommerce-error li + li { margin-top: .25rem; }
.woocommerce-message .button, .woocommerce-error .button { display: none; }

@media (min-width: 60rem) {
  .co__form {
    grid-template-columns: 1fr 22rem;
    gap: 3rem; align-items: start;
  }
  /* Summary is first in source for mobile; put it right on desktop. */
  .co__summary { order: 2; position: sticky; top: 5.5rem; }
  .co__fields  { order: 1; }
  .co .form-row-first, .co .form-row-last { width: calc(50% - .4375rem); }
  .co .woocommerce-billing-fields__field-wrapper,
  .co .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr 1fr; gap: 0 .875rem;
  }
  .co .form-row-wide, .co #billing_address_1_field,
  .co #billing_email_field, .co #billing_company_field { grid-column: 1 / -1; }
}

/* ============================================================ order received

   Two jobs: reassure that it worked, then say what happens next. The default
   answers "what did I buy?" — a question she already knows — and skips "when
   does it come and what do I pay?", which is the only thing she is wondering.
*/

.ty { max-width: 40rem; margin: 0 auto; padding: clamp(2.5rem,8vw,4.5rem) var(--pad) 5rem; }

.ty__mark {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--blush); color: var(--plum);
  border-radius: 999px;
}
.ty__mark svg { width: 1.5rem; height: 1.5rem; }

.ty__h { margin-top: 1.25rem; font-size: clamp(1.5rem,4.5vw,2rem); letter-spacing: -0.035em; text-wrap: balance; }
.ty__t { margin-top: .6rem; color: var(--muted); }
.ty__t strong { color: var(--ink); font-weight: 500; }

/* Numbered because this genuinely is a sequence — the order things happen in
   is the information, not decoration. */
.next { margin: 2rem 0 0; display: grid; gap: .875rem; }
.next__i { display: flex; align-items: baseline; gap: .75rem; }
.next__n {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--mineral); border-radius: 999px;
  font-family: var(--mono); font-size: var(--s-xs); color: var(--plum);
}
.next__t { font-size: var(--s-sm); line-height: 1.5; }

.ty__box {
  margin-top: 2rem; padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.ty__meta { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; margin: 0; font-size: var(--s-sm); }
.ty__meta dt { color: var(--muted); }
.ty__meta dd { margin: 0; justify-self: end; }
.ty__num { font-family: var(--mono); }
.ty__total { font-family: var(--mono); font-weight: 700; font-size: var(--s-md); }
.ty__addr { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.ty__addr-h {
  font-size: var(--s-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ty__addr address { margin-top: .4rem; font-style: normal; font-size: var(--s-sm); line-height: 1.5; }

.ty__back { display: inline-block; margin-top: 2rem; font-size: var(--s-sm); font-weight: 500;
            border-bottom: 1px solid var(--ink); padding-bottom: .15rem; }

/* Woo prints its own order table + customer details after our box; we have
   already said everything that matters, so keep them out of the way. */
.ty .woocommerce-order-overview,
.ty .woocommerce-order-details,
.ty .woocommerce-customer-details { display: none; }