/* ==========================================================================
   NeeDoh — WooCommerce screens.

   Theme-authored, and separate from the ported files because bin/port-css.py
   overwrites those on every run.

   The static build has no catalog, no cart, no checkout and no account area, so
   most of this has no source to port. What DOES have a source is the product
   tile, and every value in that section is copied from the visible best-loved
   card's inline styles rather than redesigned. Each block says where its values
   came from.
   ========================================================================== */

/* ── The product tile ─────────────────────────────────────────────────────
   Used by the WooCommerce catalog, the related-products row, and the home
   page's best-loved band. One component, three placements.

   NOT `.product-card`. That class has CSS in the source but nothing emits it,
   and it describes a white bordered card — a different design from the one that
   actually renders. See the note in bin/port-css.py's SHARED_PREFIXES.

   Values below are the visible card's own inline declarations:

     .product-tile        text-decoration:none; display:flex;
                          flex-direction:column; gap:16px
     .product-tile-thumb  position:relative; aspect-ratio:1/1;
                          border-radius:32px; overflow:hidden;
                          box-shadow:0 14px 32px -16px rgba(0,0,0,0.5);
                          border:1px solid rgba(255,255,255,0.12)
     .product-tile-img    position:absolute; inset:0; width:100%; height:100%;
                          object-fit:cover; object-position:center
     .product-tile-name   font-family:var(--font-display); font-size:20px;
                          line-height:1.15
     .product-tile-desc   font-size:14.5px; line-height:1.5

   ONE DELIBERATE CHANGE, and it is on the client-facing changes list: the
   source hardcodes the name to #fff and the description to
   rgba(255,255,255,0.7), because that band sits on a near-black background. The
   catalog is white, where white text is invisible. Both use `currentColor`
   here, so the tile inherits its context and needs no second variant. On the
   dark band it renders identically to the source.

   The source's name is also a <div>; it is an <h3> here. Card titles being
   styled divs was a site-wide defect, already listed for the client. */

.product-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.product-tile-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.product-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The stock pill sits over the thumbnail on a card, rather than inline beside
   the price as it does on the product page. */
.product-tile-thumb .stock-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.product-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-tile-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
  color: currentColor;
}

.product-tile-desc {
  font-size: 14.5px;
  line-height: 1.5;
  /* The source's rgba(255,255,255,0.7) expressed against the inherited colour,
     so it works on the dark band and on the white catalog alike. */
  opacity: 0.7;
}

.product-tile-price {
  font-family: var(--font-body);
  font-size: 15px;
  margin-top: 2px;
}

.product-tile:hover .product-tile-thumb {
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55);
}

/* ── Catalog layout ──────────────────────────────────────────────────────
   No source equivalent: the static build's /products/ URL is a 404. The grid
   columns and gaps match the source's own `plan-best-grid`
   (repeat(4, 1fr), gap 28px) and its category grid, so the catalog sits in the
   same rhythm as the home page bands. */

.shop-hero .hero-split-text {
  max-width: 62ch;
}

.shop-intro {
  font-size: 17px;
  line-height: 1.7;
}

.shop-products .products,
.product-related .product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.shop-products .products > li,
.product-related .product-grid > li {
  margin: 0;
}

.shop-empty {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-mute, var(--ink));
  max-width: 54ch;
}

@media (max-width: 1080px) {
  .shop-products .products,
  .product-related .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 880px) {
  .shop-products .products,
  .product-related .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .shop-products .products,
  .product-related .product-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Category tiles ──────────────────────────────────────────────────────
   MOVED to assets/css/theme.css as .category-tile.

   The first version here was a .category-card of my own design — a min-height
   overlay card. The home page's featured-categories band renders a different
   thing: a square thumbnail with a gradient scrim and the label INSIDE it, and
   the description below. Two designs for one component, and the source's is the
   approved one.

   Unified on .category-tile, in theme.css because the home page uses it too.
   What stays here is only the band that holds the grid. */

.shop-categories {
  position: relative;
}

.shop-categories > .wrap > .display {
  margin-bottom: 36px;
}

/* ── Product page additions ──────────────────────────────────────────────
   The PDP itself is ported (page-product-nice-cube.css). These are only the
   wrappers WooCommerce needs that the single static page had no equivalent of. */

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-section-body {
  font-size: 17px;
  line-height: 1.7;
}

.product-section-body > *:first-child { margin-top: 0; }
.product-section-body > *:last-child  { margin-bottom: 0; }

.product-related,
.product-faq,
.product-crosslinks {
  /* .product-section carries the padding; these only need to not add more. */
  padding-top: 0;
}

/* The FAQ accordion is ported and shared (components.css) — <details class=
   "faq-item">. The product page's variant has no separate answer wrapper: the
   answer is a bare <p> inside the <details>, and .faq-list is in the product
   page's own stylesheet. Nothing to add here.

   An earlier version of this file styled `.product-faq .faq-question`, which was
   part of emitting a component no page renders. Both are gone. */

/* Woo's add-to-cart form is a plain wrapper here; the buy box owns the layout. */
.needoh-cart-form,
form.cart {
  display: contents;
}

/* ── Cart, checkout and account ──────────────────────────────────────────
   Entirely new screens. Woo's own woocommerce-layout.css and
   woocommerce-smallscreen.css are LEFT ENQUEUED on these three, because their
   table and two-column layouts are load-bearing and rebuilding them from
   scratch would be a large surface with no design to check against. What
   follows is brand styling on top: type, colour, buttons, inputs.

   Deliberately not restyled: the layout itself. If a checkout field is in the
   wrong column, that is Woo's grid and should be fixed there, not overridden. */

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.woocommerce table.shop_table {
  border-radius: var(--radius-md);
  border-color: var(--rule);
}

.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* Woo's buttons take the brand pill, matching .btn-primary. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--accent-deep);
  color: #fff;
}

/* Woo's notices. The default green/blue/red bars clash with the palette. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--accent);
}