/* ===========================================================================
   Rubyclo demo store
   A static rebuild of the Rubyclo storefront in plain HTML, CSS and JavaScript
   so it can be served straight from Cloudflare Pages with no Node process
   behind it. Design tokens are carried over from the original app.
   ======================================================================== */

:root {
  --sand-50: #fafafa;
  --sand-100: #f6f3ef;
  --sand-200: #eee6dc;
  --sand-300: #ded2c2;
  --clay-400: #b79b83;
  --clay-500: #9c7d63;
  --ink-700: #4a453f;
  --ink-800: #332f2b;
  --ink-900: #1f1c1a;
  --moss-600: #4f6b52;
  --berry-600: #9b3a5a;
  --alert-600: #b4462d;
  --radius: 0.75rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* SF Pro is referenced the only way Apple's licence permits, through the
     system font keywords. Everything after them is the non-Apple fallback. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto, system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over any display rule set below, otherwise a
   zero-count cart badge and the empty states stay on screen. */
[hidden] { display: none !important; }


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

body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink-800);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

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

:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: 2px; }

.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }

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

/* ---- Demo ribbon --------------------------------------------------------
   The visitor must never mistake this for a real shop that will take money. */
.demo-note {
  background: var(--ink-900);
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.55rem 1rem;
}
.demo-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; font-weight: 600; min-height: 2.75rem;
  padding-inline: 1.5rem; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--ink-700); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--sand-300); }
.btn-secondary:hover { border-color: var(--ink-900); }
.btn-light { background: #fff; color: var(--ink-900); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sand-200);
}
.header-inner { display: flex; align-items: center; gap: 1rem; height: 3.75rem; }
.wordmark {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-900);
}
.wordmark span { color: var(--berry-600); }
.main-nav { display: none; gap: 1.5rem; margin-left: 1.5rem; font-size: 0.9rem; font-weight: 500; }
@media (min-width: 860px) { .main-nav { display: flex; } }
.main-nav a { position: relative; padding-block: 0.25rem; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.5rem; padding-inline: 0.75rem; border-radius: 999px;
  border: 1px solid var(--sand-300); background: #fff; color: var(--ink-900);
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.icon-btn:hover { border-color: var(--ink-900); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
  padding-inline: 0.3rem; border-radius: 999px; background: var(--ink-900); color: #fff;
  font-size: 0.7rem; font-weight: 700;
}
.menu-toggle { display: inline-flex; }
@media (min-width: 860px) { .menu-toggle { display: none; } }
.mobile-nav {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.5rem 0 1rem; border-top: 1px solid var(--sand-200);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 0.65rem 0.25rem; font-weight: 500; border-bottom: 1px solid var(--sand-100); }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; }
.hero-media { position: relative; aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .hero-media { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .hero-media { aspect-ratio: 21 / 9; } }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 76% center;
  animation: hero-settle 1200ms var(--ease) both;
}
@media (min-width: 640px) { .hero-media img { object-position: center; } }
@media (min-width: 1024px) { .hero-media img { object-position: top; } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(31,28,26,0.75) 0%, rgba(31,28,26,0.35) 50%, rgba(31,28,26,0) 100%);
}
.hero-copy { position: absolute; inset: 0; display: flex; align-items: center; }
.hero-eyebrow {
  margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.hero-title {
  margin: 0.5rem 0 0; max-width: 42rem; color: #fff; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.75rem, 4.5vw, 3rem);
}
.hero-sub {
  margin: 0.75rem 0 0; max-width: 36rem; color: rgba(255,255,255,0.9);
  font-size: clamp(0.875rem, 1.4vw, 1rem); line-height: 1.6;
}
.hero-actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
.rise-in { animation: rise-in 900ms var(--ease) both; }
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---- USP strip ---- */
.usp-strip { background: var(--sand-100); border-bottom: 1px solid var(--sand-200); }
.usp-list {
  list-style: none; margin: 0; padding: 1.5rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (min-width: 1024px) { .usp-list { grid-template-columns: repeat(4, 1fr); } }
.usp-list p { margin: 0; }
.usp-list b { font-size: 0.875rem; }
.usp-list span { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.5; color: var(--ink-700); }

/* ---- Sections ---- */
.section { padding-block: 2.5rem; }
@media (min-width: 640px) { .section { padding-block: 3.5rem; } }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.section-title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.section-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--ink-700); }
.see-all { flex-shrink: 0; font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Product grid ---- */
.product-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; margin-top: 1.5rem;
}
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card { display: block; }
.product-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: #fff; border: 1px solid var(--sand-200);
}
.product-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform 700ms var(--ease);
}
.product-card:hover .product-media img { transform: scale(1.05); }
.badge {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  border-radius: 999px; padding: 0.2rem 0.6rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-new { background: var(--moss-600); color: #fff; }
.badge-out { background: var(--ink-900); color: #fff; }
.product-name { margin: 0.65rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-900); }
.product-price { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 700; color: var(--ink-900); }
.product-meta { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--ink-700); }

/* ---- Category tiles ---- */
.category-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
.category-card {
  overflow: hidden; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--sand-200);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(31,28,26,0.10); }
.category-media { aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.category-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--ease); }
.category-card:hover .category-media img { transform: scale(1.05); }
.category-body { padding: 1rem; }
.category-body h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink-900); }
.category-body p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-700); }

/* ---- Shop toolbar ---- */
.page-head { padding-top: 2rem; }
.page-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--sand-200);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border-radius: 999px; border: 1px solid var(--sand-300); background: #fff;
  padding: 0.4rem 0.9rem; font-size: 0.8125rem; font-weight: 600;
  color: var(--ink-800); cursor: pointer;
}
.chip:hover { border-color: var(--ink-900); }
.chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.select {
  min-height: 2.5rem; border-radius: 0.5rem; border: 1px solid var(--sand-300);
  background: #fff; padding: 0.4rem 0.7rem; font-size: 0.875rem; color: var(--ink-900);
}
.result-count { margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--ink-700); }
.empty-state { margin: 3rem 0; text-align: center; color: var(--ink-700); }
.empty-state p { margin: 0.25rem 0; }

/* ---- Product detail ---- */
.pdp { display: grid; gap: 2rem; padding-block: 2rem; }
@media (min-width: 900px) { .pdp { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } }
.gallery-main {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--sand-200);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.gallery-thumbs button {
  width: 4.5rem; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 0.5rem; border: 1px solid var(--sand-300); background: #fff;
}
.gallery-thumbs button[aria-current="true"] { border-color: var(--ink-900); border-width: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.breadcrumb { font-size: 0.8125rem; color: var(--ink-700); padding-top: 1.25rem; }
.breadcrumb a:hover { text-decoration: underline; }
.pdp-title { margin: 0.35rem 0 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.pdp-price { margin: 0.5rem 0 0; font-size: 1.35rem; font-weight: 700; color: var(--ink-900); }
.pdp-compare { margin-left: 0.5rem; font-size: 1rem; font-weight: 500; color: var(--ink-700); text-decoration: line-through; }
.pdp-desc { margin: 1rem 0 0; line-height: 1.7; color: var(--ink-700); }

.size-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.75rem; }
.size-head h2 { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--ink-900); }
.size-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.size-btn {
  min-width: 3.25rem; min-height: 2.75rem; border-radius: 0.5rem;
  border: 1px solid var(--sand-300); background: #fff; color: var(--ink-900);
  font-weight: 600; cursor: pointer;
}
.size-btn:hover:not(:disabled) { border-color: var(--ink-900); }
.size-btn[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.size-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.stock-note { margin: 0.6rem 0 0; font-size: 0.8125rem; font-weight: 600; }
.stock-in { color: var(--moss-600); }
.stock-low { color: var(--alert-600); }
.stock-out { color: var(--ink-700); }
.buy-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; }
.pdp-notes { margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--ink-700); }
.pdp-notes li { padding: 0.35rem 0; border-bottom: 1px solid var(--sand-200); }

.details { margin-top: 2rem; }
.details h2 { font-size: 0.875rem; font-weight: 700; color: var(--ink-900); margin: 0 0 0.5rem; }
.details dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.875rem; }
.details dt { font-weight: 600; color: var(--ink-900); }
.details dd { margin: 0; color: var(--ink-700); }
.care-list { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--ink-700); }
.care-list li { margin-bottom: 0.2rem; }

/* ---- Cart ---- */
.cart-layout { display: grid; gap: 2rem; padding-block: 2rem; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 7fr 4fr; gap: 3rem; align-items: start; } }
.cart-line {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--sand-200);
}
.cart-line img { width: 5.5rem; aspect-ratio: 4/5; object-fit: cover; object-position: top; border-radius: 0.5rem; border: 1px solid var(--sand-200); }
.cart-line h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-900); }
.cart-line .size { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--ink-700); }
.qty { display: inline-flex; align-items: center; margin-top: 0.6rem; border: 1px solid var(--sand-300); border-radius: 999px; overflow: hidden; }
.qty button { width: 2.25rem; height: 2.25rem; background: #fff; border: 0; cursor: pointer; font-size: 1.05rem; color: var(--ink-900); }
.qty button:hover { background: var(--sand-100); }
.qty span { min-width: 2rem; text-align: center; font-weight: 600; font-size: 0.9rem; }
.line-right { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
.line-total { font-weight: 700; color: var(--ink-900); }
.link-btn { background: none; border: 0; padding: 0; font-size: 0.8125rem; color: var(--ink-700); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--ink-900); }
.summary { background: #fff; border: 1px solid var(--sand-200); border-radius: var(--radius); padding: 1.25rem; }
.summary h2 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: var(--ink-900); }
.summary-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; color: var(--ink-700); }
.summary-total { border-top: 1px solid var(--sand-200); margin-top: 0.5rem; padding-top: 0.75rem; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.summary .btn { margin-top: 1rem; }
.summary-note { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--ink-700); }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem);
  z-index: 60; background: var(--ink-900); color: #fff; border-radius: 999px;
  padding: 0.7rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- Footer ---- */
.site-footer { background: var(--sand-100); border-top: 1px solid var(--sand-200); margin-top: 2rem; }
.footer-grid { display: grid; gap: 2rem; padding-block: 2.5rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h3 { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-900); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.footer-grid li { padding: 0.25rem 0; color: var(--ink-700); }
.footer-grid a:hover { text-decoration: underline; }
.footer-blurb { font-size: 0.875rem; line-height: 1.6; color: var(--ink-700); margin: 0.5rem 0 0; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid var(--sand-200); padding-block: 1.25rem;
  font-size: 0.78rem; color: var(--ink-700);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between;
}
.pay-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
/* Every mark sits on the same 44 by 28 tile so the row reads as one set,
   whatever the shape of the logo inside it. */
.pay-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 28px; padding: 3px;
  border: 1px solid var(--sand-300); background: #fff; border-radius: 0.35rem;
}
.pay-mark svg { width: 100%; height: 100%; display: block; }
.pay-chip {
  border: 1px solid var(--sand-300); background: #fff; border-radius: 0.35rem;
  padding: 0.15rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--ink-800);
}

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Phone refinements ────────────────────────────────────────────────────────
   Below 640px the header bar, the pill buttons and the stacked hero CTAs were
   all sized for desktop and ate most of the first screen. Everything here is
   inside the breakpoint, so tablet and desktop are unchanged. */
@media (max-width: 639px) {

  /* Demo banner: still legible, half the height */
  .demo-note { font-size: 0.75rem; padding: 0.4rem 0.9rem; line-height: 1.4; }

  /* Header bar */
  .header-inner { height: 3.25rem; gap: 0.5rem; }
  .wordmark { font-size: 1.1rem; }
  .icon-btn {
    min-height: 2rem;
    padding-inline: 0.7rem;
    font-size: 0.8125rem;
  }

  /* Hero type: smaller steps between eyebrow, title and body so the block
     reads as one unit instead of three competing sizes. */
  .hero-eyebrow { font-size: 0.6875rem; letter-spacing: 0.18em; }
  .hero-title { font-size: 1.5rem; line-height: 1.2; margin-top: 0.4rem; }
  .hero-sub {
    font-size: 0.8125rem; line-height: 1.55; margin-top: 0.5rem;
    max-width: 30ch;                 /* stops the 3-line orphan wrap */
  }

  /* CTAs side by side rather than two full-width stacked bars */
  .hero-actions { flex-direction: row; gap: 0.5rem; margin-top: 0.9rem; }
  .hero-actions .btn {
    flex: 1 1 0; min-width: 0;
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
  }

  /* Hero fills the phone screen so nothing from the next section shows above
     the fold. 108px is the demo note plus the sticky header. */
  .hero-media { aspect-ratio: auto; height: calc(100svh - 124px); min-height: 400px; }

  /* Feature strip: a defined 2 by 2 block with rules between the cells rather
     than four loose paragraphs floating in space. */
  .usp-list {
    padding: 0.9rem 0; gap: 0;
    grid-template-columns: 1fr 1fr;
  }
  .usp-list li { padding: 0.6rem 0.75rem; }
  .usp-list li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--sand-200); }
  .usp-list li:nth-child(even) { padding-right: 0; }
  .usp-list li:nth-child(-n + 2) { border-bottom: 1px solid var(--sand-200); }
  .usp-list b { font-size: 0.75rem; line-height: 1.3; display: block; }
  .usp-list span { margin-top: 0.1rem; font-size: 0.6875rem; line-height: 1.4; }
}