/* MiMi Pic — components.css: hero, chips, cards, product page, buttons.
 *
 * Ported from the brand's own store look demo (design-systems/mimipic/store-demo.html,
 * CC #9047, iterated with Ivan to round 3). The mechanics are the house Glass Liquid
 * language hue-tinted to sage; nothing here is a fresh invention, and nothing here is
 * a Shopify theme.
 *
 * Reminder of the hard rule from layout.css: backdrop-filter lives on floating chrome
 * ONLY. Every card below is SOLID white with a glass LOOK.
 */

h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

/* ── Buttons ──────────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 13px 24px;
  font-weight: 600;
  font-size: .98rem;
  font-family: var(--mp-font-body);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }

/* The primary action is WOOD, not sage. The wood accent ties to the product itself —
 * a puzzle made of real wood — and it is the only element on the page in that colour. */
.btn-primary {
  background: var(--mp-wood);
  color: #fff;
  box-shadow: 0 6px 16px rgba(176, 125, 75, .4);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(176, 125, 75, .5); }

/* Secondary sits ON the dark hero, so it is a translucent white. */
.btn-secondary {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}
.btn-secondary:hover { background: rgba(255, 255, 255, .26); }

/* On a light surface a secondary needs a real edge to exist at all. */
.btn-ghost {
  background: transparent;
  color: var(--mp-sage-deep);
  border: 1px solid rgba(91, 111, 98, .4);
}

/* Add-to-cart while the required upload is pending / a request is in flight (CC #10743
 * item_5): muted and non-interactive, so the gate is legible, not a dead click. */
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn[disabled]:active { transform: none; }

/* A failed upload / add-to-cart. Quiet until it has something to say (x-show gates it),
 * then a small inline alert next to the button — never a blocking modal. */
.cart-error {
  display: inline-block;
  margin-left: 10px;
  color: #a3402f;
  font-size: .85rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────────
 * Compact and dense on purpose. A luxurious slab of whitespace above the fold just
 * pushes the product below it, and the product is what sells. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: 16px 0 20px;
  background: linear-gradient(135deg, #738a7a 0%, #3f4e45 100%);
  color: #fff;
  padding: 34px 28px;
  box-shadow: 0 10px 30px rgba(63, 78, 69, .22);
}
/* The wood bloom in the corner — what stops the hero reading as a flat green box. */
.hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(176, 125, 75, .55), transparent 65%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 20ch; margin: 0; }
.hero .lead {
  margin: 12px 0 18px;
  max-width: 50ch;
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
}
.hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero .bullets {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: rgba(255, 255, 255, .9);
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
}
/* The li rule MUST be here, not just on the ul. `.bullets li` further down sets a muted
 * grey for the light-surface case, and it beats a colour inherited from `.hero .bullets`
 * — which rendered the proof bullets as dark grey on dark green. The checkmarks stayed
 * light, so it read as "styled", not broken, which is exactly how a contrast failure
 * survives review. Caught by looking at the render, not by any gate. */
.hero .bullets li { color: rgba(255, 255, 255, .92); }
.hero .bullets li::before { content: "✓ "; color: #d7e3d6; }

@media (max-width: 560px) {
  .hero { padding: 26px 20px; border-radius: 16px; }
}

/* ── Category chips ───────────────────────────────────────────────────────────*/
.chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
/* Horizontal scroll is right for a phone (a thumb swipes) and wrong for a desktop, where
 * it silently clipped the last size option off the right edge — a variant a customer
 * could not see was a variant they could not buy. Above the phone breakpoint, wrap. */
@media (min-width: 561px) {
  .chips { flex-wrap: wrap; overflow-x: visible; }
}
.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--mp-sage-deep);
  font-size: .86rem;
  font-weight: 500;
  box-shadow: var(--mp-glass-shadow);
  border: 0;
}
.chip.active { background: var(--mp-sage); color: #fff; }

.sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 2px 12px;
}
.sectionhead h2 { margin: 0; }
.sectionhead .link { color: var(--mp-sage); font-size: .9rem; font-weight: 600; }

/* ── Product card — SOLID, glass LOOK, never backdrop-filter ──────────────────*/
.card {
  background: #fff;
  border-radius: var(--mp-glass-radius);
  border: none;
  box-shadow: var(--mp-glass-shadow);
  overflow: hidden;
  contain: content;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .08);
}
.card .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mp-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, .9);
  color: var(--mp-sage-deep);
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
}
.card .body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card .title { font-weight: 600; font-size: .92rem; color: var(--mp-ink); line-height: 1.25; }
.card .proof { color: var(--mp-muted); font-size: .78rem; margin-bottom: 8px; }
/* Price and CTA sit side by side when the card is wide enough and STACK when it is not.
 * Without the wrap, on a 2-up mobile grid the button ran straight out past the card's
 * right edge — the card is ~190px there, and "Gratis" plus a text button does not fit
 * in it. A CTA hanging outside its own card is the kind of thing that reads as "cheap
 * site" instantly. */
.card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.card .price-slot { color: var(--mp-sage-deep); font-weight: 700; font-size: 1rem; }
.card .card-cta { flex: 0 1 auto; min-width: 0; }
.card .card-cta .btn {
  padding: 8px 14px;
  font-size: .82rem;
  border-radius: 10px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* On the 2-up grid the button gets its own line, full width. Two cramped columns
   * fighting over one row is worse than one honest stacked column. */
  .card .card-cta { flex: 1 0 100%; }
  .card .card-cta .btn { width: 100%; }
}

/* ── Product page ─────────────────────────────────────────────────────────────*/
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .pdp { grid-template-columns: 1fr; gap: 18px; } }

.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 46vh;    /* the fold must survive: the gallery may not push the price off-screen */
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--mp-glass-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main .preview-3d { width: 100%; height: 100%; border: 0; display: block; }

.gallery-strip { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery-strip button {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(91, 111, 98, .2);
  background: #fff;
  cursor: pointer;
  font-size: .65rem;
  color: var(--mp-muted);
  padding: 2px;
}
.gallery-strip button[aria-current="true"] { border-color: var(--mp-sage); border-width: 2px; }

/* The thumbnail IS the image — it fills its tile edge to edge. object-fit: cover crops
 * rather than distorts: a squashed product photo reads as cheap. */
.gallery-strip .gallery-thumb { overflow: hidden; display: grid; place-items: center; }
.gallery-strip .gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.gallery-thumb-3d { font-weight: 600; letter-spacing: .04em; color: var(--mp-sage-deep); }

.pinfo h1 { margin: 0; }
.price-slot { font-size: 1.6rem; font-weight: 700; color: var(--mp-sage-deep); margin: .6rem 0 0; }
.price-note { color: var(--mp-muted); font-size: .8rem; margin: .15rem 0 .9rem; }

.bullets { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.bullets li { font-size: .88rem; color: var(--mp-muted); }
.bullets li::before { content: "✓ "; color: var(--mp-sage); }

.selector { margin: 1rem 0; }
.selector .selector-label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .95rem; color: var(--mp-sage-deep); }
.selector select {
  width: 100%;
  max-width: 22rem;
  padding: .7rem .8rem;
  border-radius: 11px;
  border: 1px solid rgba(91, 111, 98, .25);
  background: #fff;
  font-family: var(--mp-font-body);
  font-size: .95rem;
  color: var(--mp-ink);
}

.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.badges .pill, .pill {
  display: inline-block;
  background: rgba(91, 111, 98, .1);
  color: var(--mp-sage-deep);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
}

/* The three-step plan. Numbered, because "how does this actually work" is the question
 * that stops a personalised-product purchase. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.step {
  background: #fff;
  border-radius: var(--mp-glass-radius);
  box-shadow: var(--mp-glass-shadow);
  padding: 1.1rem 1.2rem;
}
.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mp-sage);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.step p { margin: 0; font-size: .92rem; color: #3a403a; }

/* The differentiator, called out. A wood rule on the left — the one place the wood
 * accent appears outside a button. */
.unique {
  background: rgba(176, 125, 75, .10);
  border-left: 3px solid var(--mp-wood);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--mp-sage-deep);
  font-size: .92rem;
  margin: 1rem 0;
  max-width: 54ch;
}

.lead { color: #3a403a; max-width: 60ch; font-size: 1rem; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1rem 0; max-width: 34rem; }
.spec-table td { padding: .5rem .2rem; border-bottom: 1px solid rgba(91, 111, 98, .14); font-size: .9rem; }
.spec-table td:first-child { color: var(--mp-muted); }

.legal-surfaces { font-size: .82rem; color: var(--mp-muted); }
.legal-surfaces a { color: var(--mp-sage); font-weight: 600; }
.legal-surfaces .legal-note { display: block; margin-top: .3rem; }

/* ── Build chrome — internal preview only, stripped in live mode ──────────────*/
[data-build-chrome] {
  background: rgba(35, 35, 35, .86);
  color: #fff;
  font-size: .72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 14px;
  line-height: 1.5;
}
[data-build-chrome] code { color: #ffd9a0; }

/* ── Language switcher + suggestion banner (multilingual §Rule 3) ──────────────
   The switcher is ALWAYS visible in the header. The suggestion banner is offered
   on first visit when the visitor's language differs from the page — dismissible,
   and it NEVER redirects (app.js). */
.lang-switcher {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}
.lang-switcher a {
  font-size: 0.85rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.lang-switcher a:hover { opacity: 1; background: rgba(0,0,0,0.05); }

.lang-suggest {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: #5B6F62;
  color: #fff;
  font-size: 0.9rem;
}
.lang-suggest-go {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.lang-suggest-x {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
}
.lang-suggest-x:hover { background: rgba(255,255,255,0.15); }

/* ── Broader-catalog surfaces (CC #10743 item_4) ─────────────────────────────
 * The homepage body and collection layout for a catalog that is no longer one product. Built on the
 * existing tokens and the existing .card/.chip/.grid vocabulary — a new catalog surface is not a licence
 * to start a second design language. Cards sit on solid surfaces (never glass): the one real backdrop
 * -filter on this site is the floating header, and stacking more of them costs paint on mobile.
 */

/* Featured-collections grid — the catalog's front door. */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--mp-gap);
}
.collection-tile {
  display: flex;
  flex-direction: column;
  background: var(--mp-card-bg);
  border-radius: var(--mp-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--mp-ink);
  box-shadow: 0 2px 10px rgba(35, 35, 35, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.collection-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(35, 35, 35, 0.12);
}
/* The tile keeps its full height even when the collection has no artwork yet (the themed range today), so
   an image-less tile sits flush with its neighbours instead of collapsing and knocking the grid out of
   line. The empty state is a calm cream panel, never a "coming soon" placeholder. */
.collection-tile { height: 100%; }
.collection-tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--mp-cream);
  flex: none;
}
.collection-tile-label { margin-top: auto; }
.collection-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-tile-label {
  padding: 12px 14px;
  font-family: var(--mp-font-display);
  font-size: 1.05rem;
}

/* Ready-made → personalised conversion band. Renders only when BOTH sides are real (showConversion()). */
.conversion-band {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--mp-gap-lg);
  align-items: center;
  margin: var(--mp-gap-lg) 0;
  padding: var(--mp-gap-lg);
  background: var(--mp-cream);
  border-radius: var(--mp-radius);
}
.conversion-ready {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--mp-gap);
}
.conversion-ready-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--mp-ink);
  font-size: 0.9rem;
}
.conversion-ready-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.conversion-switch h2 {
  margin: 0 0 0.75rem;
  font-family: var(--mp-font-display);
  font-size: 1.3rem;
}

/* Collection page — breadcrumb + internal linking. */
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--mp-muted);
  margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--mp-sage); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.more-collections { margin-top: var(--mp-gap-lg); }
.more-collections h2 { font-family: var(--mp-font-display); font-size: 1.15rem; margin: 0 0 0.6rem; }

/* Mobile: the band must never force a horizontal scroll (acceptance A14). */
@media (max-width: 720px) {
  .conversion-band { grid-template-columns: 1fr; }
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}