/* ==========================================================================
   COCINIÑA — SHOP PAGE  (Phase 4)
   --------------------------------------------------------------------------
   Everything is scoped under .cn-shop, which only exists when
   CN_REDESIGN_SHOP is on and the page is the shop. Product category archives
   never get the class and are untouched.

   The cards themselves come from product-card.css; this file supplies the
   page, the hero, the filter pills, the grid that holds the cards, and the
   add-to-cart feedback.

   CONTRAST — measured, not assumed:
     white on --cn-shop-bg .............. 14.26:1
     white on --cn-shop-card-bg .........  8.17:1
     --cn-text-muted on --cn-shop-card-bg   5.09:1
     --cn-accent on --cn-shop-bg .........  5.27:1
     --cn-accent on --cn-shop-card-bg ....  3.02:1  ← enough for the button
         shape (3:1), not for text, so View details and more are white on
         cards. Green appears there only as borders and the button fill.
     --cn-header-footer-bg on --cn-accent   5.28:1

   CONTENTS
     1. Page surface
     2. Hero — full-bleed breakout, live type
     3. Intro line
     4. Default WooCommerce furniture, hidden
     5. Filter pills
     6. Grid
     7. The card
     8. Add to cart, added state, toast
     9. Empty state
    10. Motion
   ========================================================================== */


/* ==========================================================================
   1. PAGE SURFACE
   ========================================================================== */

body.cn-shop {
  background-color: var(--cn-shop-bg);
}

.cn-shop #content,
.cn-shop .ast-container,
.cn-shop .site-content,
.cn-shop .elementor-location-archive {
  background-color: transparent;
}

/* Astra pads the container; the hero breaks out of it in section 2 and the
   rest of the page keeps a comfortable gutter. */
.cn-shop .ast-container {
  padding-left: var(--cn-space-sm);
  padding-right: var(--cn-space-sm);
}

/* The header already carries its own hairline. Nothing here may sit on top
   of it or remove the separation between it and a page of the same colour. */
.cn-shop .elementor-location-header {
  border-bottom: 1px solid var(--cn-header-border);
}


/* ==========================================================================
   2. HERO
   --------------------------------------------------------------------------
   Elementor renders the hero as a container with a CSS background image,
   sitting inside Astra's .ast-container, which is what left a strip of page
   showing down each side.

   The breakout is scrollbar-safe. `100vw` includes the scrollbar, so on a
   desktop with a visible one it would overflow by its width and give the
   page a horizontal scrollbar. Measuring the gutter from the element's own
   offsetParent instead — 50% of the container either side — stays exactly
   inside the viewport at every width.
   ========================================================================== */

body.cn-shop .cn-shop-hero,
body.cn-shop .elementor-element.elementor-element-f7250fc {
  position: relative;
  margin-left: calc(50% - 50vw + var(--cn-scrollbar, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--cn-scrollbar, 0px) / 2);
  width: auto;
  max-width: none;
  min-height: var(--cn-hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cn-space-xs);
  padding: var(--cn-space-2xl) var(--cn-space-md);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background-position: var(--cn-hero-focus);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

/* No overlay. The photo shows as it does on the live shop page: the
   readability veil and the scroll-drift layer were removed 2026-10-11 at the
   owner's request. White text on the bare photo is a known trade-off; the
   heading is large and bold, as live. */

/* The heading — the same type as the live /shop/ page (Elementor's
   Roboto 600, 116px, normal tracking, 1.4 line-height), measured 2026-10-11.
   Live keeps 116px on phones, which made a 1281px-tall hero at 390px, so
   here the size scales down below ~1250px and reaches exactly 116px above.

   Elementor prints
   `.elementor-436 .elementor-element.elementor-element-4bda575
   .elementor-heading-title { font-size: 116px; font-family: Roboto }` —
   four classes. Four classes plus the body element outranks it. */
body.cn-shop .elementor-element.elementor-element-4bda575 .elementor-heading-title,
body.cn-shop .cn-shop-hero .elementor-heading-title,
body.cn-shop .cn-shop-hero h1 {
  margin: 0;
  max-width: none;
  color: var(--cn-text);
  font-family: var(--cn-hero-font);
  font-size: var(--cn-hero-title-size);
  font-weight: var(--cn-weight-semibold);
  line-height: 1.4;
  letter-spacing: normal;
  text-wrap: balance;
}

@media (max-width: 767px) {
  body.cn-shop .cn-shop-hero,
  body.cn-shop .elementor-element.elementor-element-f7250fc {
    min-height: var(--cn-hero-h-mobile);
    padding: var(--cn-space-xl) var(--cn-space-sm);
  }
}


/* ==========================================================================
   3. INTRO LINE
   --------------------------------------------------------------------------
   Rendered either inside the hero under the heading, or between the hero
   and the pills. Both are built; the body class decides which shows.
   ========================================================================== */

/* Roboto 400, Elementor's site text font, to pair with the live heading.
   The live page has no subtitle, so there is nothing to copy exactly. */
.cn-shop .cn-hero__intro {
  margin: 0;
  max-width: 46ch;
  color: var(--cn-text);
  font-family: var(--cn-hero-font);
  font-size: var(--cn-hero-intro-size);
  font-weight: var(--cn-weight-regular);
  line-height: 1.5;
  letter-spacing: normal;
}

.cn-shop-intro-below .cn-shop-hero .cn-hero__intro,
.cn-shop-intro-below .elementor-element-f7250fc .cn-hero__intro {
  display: none;
}

.cn-shop .cn-shop-intro-below-line {
  margin: var(--cn-space-lg) auto 0;
  max-width: 46ch;
  color: var(--cn-text-muted);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-md);
  line-height: 1.5;
  text-align: center;
}

.cn-shop-intro-hero .cn-shop-intro-below-line {
  display: none;
}


/* ==========================================================================
   4. DEFAULT WOOCOMMERCE FURNITURE
   --------------------------------------------------------------------------
   Clipped rather than display:none, so the page title stays in the
   accessibility tree and in the markup for search engines.
   ========================================================================== */

.cn-shop .woocommerce-products-header__title,
.cn-shop .woocommerce-result-count,
.cn-shop .woocommerce-ordering,
.cn-shop .woocommerce-breadcrumb {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   5. FILTER PILLS
   --------------------------------------------------------------------------
   Elementor's taxonomy filter already renders these as buttons and already
   filters the grid over AJAX, staying on the shop page. Only the look
   changes here — the behaviour is Elementor's and is not touched, which is
   what keeps customers off the un-redesigned category archives.
   ========================================================================== */

.cn-shop .e-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cn-pill-gap);
  margin: var(--cn-space-lg) auto var(--cn-space-xl);
  padding: 0;
  max-width: var(--cn-card-max);
}

.cn-shop .e-filter-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--cn-nav-tap-min);
  padding: var(--cn-pill-pad);
  background-color: transparent;
  border: 1px solid var(--cn-card-border);
  border-radius: var(--cn-radius-pill);
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-tracking-wide);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--cn-dur-fast) var(--cn-ease),
              border-color var(--cn-dur-fast) var(--cn-ease),
              color var(--cn-dur-fast) var(--cn-ease);
}

.cn-shop .e-filter-item:hover,
.cn-shop .e-filter-item:focus-visible {
  border-color: var(--cn-accent);
  background-color: var(--cn-accent-soft);
  color: var(--cn-text);
}

/* Active pill — solid green with the deep green label, 5.28:1. */
.cn-shop .e-filter-item[aria-pressed="true"],
.cn-shop .e-filter-item.e-filter-item-active {
  background-color: var(--cn-accent);
  border-color: var(--cn-accent-dark);
  color: var(--cn-header-footer-bg);
}


/* ==========================================================================
   6. GRID
   --------------------------------------------------------------------------
   Elementor sizes its own grid from the widget settings (3 columns). The
   column count is driven from the body class instead so both layouts can be
   compared without touching the Elementor template.
   ========================================================================== */

body.cn-shop .elementor-widget-loop-grid .elementor-grid {
  display: grid;
  gap: var(--cn-card-gap);
  --grid-column-gap: var(--cn-card-gap);
  --grid-row-gap: var(--cn-card-gap);
  row-gap: var(--cn-card-gap);
  column-gap: var(--cn-card-gap);
  width: 100%;
  max-width: var(--cn-card-max);
  margin: 0 auto;
}

body.cn-shop-cols-2 .elementor-widget-loop-grid .elementor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.cn-shop-cols-3 .elementor-widget-loop-grid .elementor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --cn-card-max: 1180px;
}

@media (max-width: 1024px) {
  body.cn-shop-cols-2 .elementor-widget-loop-grid .elementor-grid,
  body.cn-shop-cols-3 .elementor-widget-loop-grid .elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body.cn-shop-cols-2 .elementor-widget-loop-grid .elementor-grid,
  body.cn-shop-cols-3 .elementor-widget-loop-grid .elementor-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(var(--cn-widget-h) + var(--cn-widget-inset) * 2);
  }
}


/* ==========================================================================
   7. THE CARD
   --------------------------------------------------------------------------
   Each dish is the shared cn-product-card (product-card.css), printed by
   cn_shop_widget_content() in place of loop template 552's widgets. Here:

   - Elementor's loop item and its containers stop drawing anything. Their
     boxes are taken out of the layout with display:contents, so the card
     is the only box — no inner container frame (it was brick-coloured).
   - The card is brick (--cn-shop-card-bg, #7F3B30) with a green-tinted
     outline and the white glow, on the deep green page. Green on that
     brick is 3.02:1 — enough for the button, not for text — so the green
     text inside the card (View details, more) turns white.
   - The photo sits beside the text while the card is at least 340px wide
     and moves to the top, full card width, below that. A container query
     on the loop item measures the card itself, so it holds at every
     column count rather than guessing from the viewport.
   ========================================================================== */

/* The loop item is the grid cell and the size container; it draws nothing. */
body.cn-shop .elementor-widget-loop-grid [data-elementor-type="loop-item"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;   /* the glow must not be clipped */
  container: cn-card / inline-size;
}

body.cn-shop .elementor-widget-loop-grid [data-elementor-type="loop-item"] .e-con,
body.cn-shop .elementor-widget-loop-grid [data-elementor-type="loop-item"] .e-con-inner,
body.cn-shop .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-element,
body.cn-shop .elementor-widget-loop-grid [data-elementor-type="loop-item"] .elementor-widget-container {
  display: contents;
}

/* The card */
body.cn-shop .cn-product-card {
  flex: 1 1 auto;
  background-color: var(--cn-shop-card-bg);
  border: 1px solid var(--cn-card-border);
  box-shadow: var(--cn-card-glow);
  text-align: left;
  transition: box-shadow var(--cn-dur) var(--cn-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.cn-shop .cn-product-card:hover {
    box-shadow: var(--cn-card-glow-hover);
  }
}

body.cn-shop .cn-product-card:focus-within {
  box-shadow: var(--cn-card-glow-hover);
}

/* Template 552 justified its text; the card is always left-aligned. */
body.cn-shop .cn-product-card .cn-product-card__desc {
  text-align: left;
}

/* White, not green, on the brick card (green text would be 3.02:1). */
body.cn-shop .cn-product-card .cn-product-card__link,
body.cn-shop .cn-product-card .cn-product-card__more {
  color: var(--cn-text);
}

body.cn-shop .cn-product-card .cn-product-card__link:hover,
body.cn-shop .cn-product-card .cn-product-card__link:focus-visible,
body.cn-shop .cn-product-card .cn-product-card__more:hover,
body.cn-shop .cn-product-card .cn-product-card__more:focus-visible {
  color: var(--cn-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Narrow card: photo on top, full card width, rounded top corners. The
   negative margins pull it out over the card's padding; the radius is the
   card's own minus its 1px border, so the corners sit flush. */
@container cn-card (width < 340px) {

  body.cn-shop .cn-product-card .cn-product-card__top {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cn-shop .cn-product-card .cn-product-card__media {
    order: -1;
    width: calc(100% + 2 * var(--cn-card-pad));
    height: auto;
    aspect-ratio: 4 / 3;
    margin: calc(-1 * var(--cn-card-pad)) calc(-1 * var(--cn-card-pad)) 0;
    border: 0;
    border-bottom: var(--cn-border-hair);
    border-radius: calc(var(--cn-radius-lg) - 1px) calc(var(--cn-radius-lg) - 1px) 0 0;
  }
}


/* ==========================================================================
   8. ADD TO CART, ADDED STATE, TOAST
   ========================================================================== */

/* The button is product-card.css's; only the states cn-shop.js sets live
   here, at a weight that outranks that file's button rule. */
body.cn-shop .cn-product-card .cn-product-card__buy a.cn-product-card__add.loading {
  opacity: 0.72;
}

body.cn-shop .cn-product-card .cn-product-card__buy a.cn-product-card__add.is-added {
  background: var(--cn-accent-dark);
  background-color: var(--cn-accent-dark);
}

/* WooCommerce appends its own View cart anchor after the button; the toast
   already offers that, so it is hidden as a safety net in case the script
   does not get to remove it. */
body.cn-shop .cn-product-card__buy a.added_to_cart {   /* outranks product-card.css (0,3,1) */
  display: none;
}

/* Toast — sits above the chat widget's 155x50 pill, never beside it. */
.cn-shop-toast {
  position: fixed;
  right: var(--cn-widget-inset);
  bottom: var(--cn-toast-bottom);
  z-index: var(--cn-header-z);
  display: flex;
  align-items: center;
  gap: var(--cn-space-sm);
  max-width: calc(100vw - var(--cn-space-lg));
  padding: var(--cn-space-2xs) var(--cn-space-sm);
  background-color: var(--cn-surface);
  border: 1px solid var(--cn-card-border);
  border-radius: var(--cn-radius-pill);
  box-shadow: var(--cn-shadow-card);
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--cn-dur-fast) var(--cn-ease),
              transform var(--cn-dur-fast) var(--cn-ease);
}

.cn-shop-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cn-shop-toast__text {
  font-weight: var(--cn-weight-semibold);
  white-space: nowrap;
}

.cn-shop-toast__link {
  color: var(--cn-accent);            /* 5.27:1 on --cn-surface */
  font-weight: var(--cn-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.cn-shop-toast__link:hover,
.cn-shop-toast__link:focus-visible {
  color: var(--cn-text);
}


/* ==========================================================================
   9. EMPTY STATE
   ========================================================================== */

.cn-shop .cn-shop-empty,
.cn-shop .elementor-widget-loop-grid .e-loop-nothing-found-message {
  max-width: 46ch;
  margin: var(--cn-space-2xl) auto;
  padding: var(--cn-space-xl) var(--cn-space-lg);
  background-color: var(--cn-card-bg);
  border: 1px solid var(--cn-card-border);
  border-radius: var(--cn-radius-lg);
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  text-align: center;
}


/* ==========================================================================
   10. MOTION
   ========================================================================== */

.cn-shop .cn-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--cn-dur) var(--cn-ease),
              transform var(--cn-dur) var(--cn-ease);
}

.cn-shop .cn-reveal.cn-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .cn-shop .cn-reveal,
  .cn-shop .cn-reveal.cn-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.cn-shop .cn-product-card,
  .cn-shop-toast {
    transition: none;
  }
}