/* =====================================================================
   allegory-static.css  —  LOADED LAST, after base.css + component CSS.
   Hand-ports the Liquid-generated bits the theme needs at runtime:
   the :root CSS-variable contract, the color-scheme classes, the 10px
   root font-size, and a few static glue rules. Without this the copied
   Zenith CSS is inert. Values from build-spec/design.json (live config).
   ===================================================================== */

html { font-size: 10px; -webkit-text-size-adjust: 100%; }
@media screen and (min-width: 3840px) { html { font-size: 16px; } }

/* The theme assumes border-box; without a global reset, .container's width:100% + padding
   overflowed the viewport (~8px) and forced mobile zoom / off-center content. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }

:root {
  /* ---- color contract (light scheme / background-1, RGB triplets) ---- */
  --color-background: 255,255,255;
  --color-background-secondary: 245,245,245;
  --color-foreground: 13,13,13;
  --color-foreground-secondary: 112,112,112;
  --color-overlay: 255,255,255;
  --color-button: 13,13,13;
  --color-button-hover: 13,13,13;
  --color-button-text: 255,255,255;
  --color-button-text-hover: 255,255,255;
  --color-button-secondary: 13,13,13;
  --color-button-secondary-hover: 13,13,13;
  --color-button-secondary-text: 255,255,255;
  --color-button-secondary-text-hover: 255,255,255;
  --color-button-tertiary-text: 13,13,13;
  --color-border: 230,230,230;
  --color-interface-elements: 232,232,232;
  --color-shadow: 18,18,18;
  --sold-out-badge-bg: 117,117,117;
  --sold-out-badge-color: 255,255,255;
  --sale-badge-bg: 13,13,13;
  --sale-badge-color: 255,255,255;
  --custom-badge-bg: 13,13,13;
  --custom-badge-color: 255,255,255;
  --new-badge-bg: 13,13,13;
  --new-badge-color: 255,255,255;
  --color-card-price-regular: 13,13,13;
  --color-card-price-sale: 179,31,31;
  --color-card-price-old: 112,112,112;
  --color-modal-overlay: 0,0,0;
  --color-success: 15,174,0;
  --color-error: 208,22,22;

  /* ---- typography (Archivo) ---- */
  --font-body-family: Archivo, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-scale: 1.0;
  --font-body-line-height: 1.3;
  --font-body-letter-spacing: 0em;
  --font-heading-family: Archivo, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-heading-letter-spacing: -0.04em;
  --font-heading-line-height: 1;
  --font-heading-text-transform: none;
  --font-heading-h1-scale: 1.25;
  --font-heading-h2-scale: 1.42;
  --font-heading-h3-scale: 1.40;
  --font-heading-h4-scale: 1.20;
  --font-heading-h5-scale: 1.00;
  --font-heading-card-family: Archivo, sans-serif;
  --font-heading-card-weight: 500;
  --font-heading-card-text-transform: none;
  --font-heading-card-scale: 1.0;
  --font-button-family: Archivo, sans-serif;
  --font-button-weight: 500;
  --font-button-text-transform: uppercase;
  --font-button-letter-spacing: 0em;
  --font-button-scale: 1.10;
  --font-header-menu-family: Archivo, sans-serif;
  --font-header-menu-weight: 500;
  --font-header-menu-text-scale: 1.2;
  --font-header-menu-letter-spacing: 0.05em;
  --font-header-menu-text-transform: uppercase;
  --font-subtitle-family: Archivo, sans-serif;
  --font-subtitle-weight: 500;
  --font-subtitle-scale: 1.0;
  --font-subtitle-letter-spacing: 0em;
  --font-subtitle-text-transform: uppercase;

  /* ---- radii / layout ---- */
  --border-radius-button: 4px;
  --border-radius-input: 4px;
  --border-radius-block: 0px;
  --header-height: 8rem;
  --announcement-height: 0px;
  --page-width: 100%;
  --duration-short: 100ms;
  --duration-default: 300ms;
  --duration-long: 500ms;
}

/* ---- color-scheme classes (Liquid _color-vars.liquid replacement) ---- */
.color-background-1 {
  --color-background: 255,255,255; --color-background-secondary: 245,245,245;
  --color-foreground: 13,13,13; --color-foreground-secondary: 112,112,112;
  --color-overlay: 255,255,255; --color-border: 230,230,230;
  --color-button: 13,13,13; --color-button-text: 255,255,255;
  --color-button-secondary: 13,13,13; --color-button-secondary-text: 255,255,255;
}
.color-background-2 {
  --color-background: 245,245,245; --color-background-secondary: 255,255,255;
  --color-foreground: 13,13,13; --color-foreground-secondary: 112,112,112;
  --color-overlay: 255,255,255; --color-border: 230,230,230;
  --color-button: 13,13,13; --color-button-text: 255,255,255;
  --color-button-secondary: 255,255,255; --color-button-secondary-text: 13,13,13;
}
.color-background-3 {
  --color-background: 13,13,13; --color-background-secondary: 49,56,61;
  --color-foreground: 255,255,255; --color-foreground-secondary: 227,226,226;
  --color-overlay: 13,13,13; --color-border: 230,230,230;
  --color-button: 255,255,255; --color-button-text: 13,13,13;
  --color-button-secondary: 49,56,61; --color-button-secondary-text: 255,255,255;
}
.color-background-4 {
  --color-background: 13,13,13; --color-background-secondary: 49,56,61;
  --color-foreground: 255,255,255; --color-foreground-secondary: 227,226,226;
  --color-overlay: 13,13,13; --color-border: 244,244,242;
  --color-button: 255,255,255; --color-button-text: 13,13,13;
  --color-button-secondary: 49,56,61; --color-button-secondary-text: 255,255,255;
}

body {
  color: rgba(var(--color-foreground), 1);
  background-color: rgb(var(--color-background));
  font-family: var(--font-body-family);
}

/* ---- nav/button typography hook (header-label) ---- */
.header-label {
  font-family: var(--font-header-menu-family);
  font-weight: var(--font-header-menu-weight);
  font-size: calc(var(--font-header-menu-text-scale) * 1rem);
  text-transform: var(--font-header-menu-text-transform);
  letter-spacing: var(--font-header-menu-letter-spacing);
  line-height: 1.5;
  word-break: break-word;
}

/* ---- static glue ---- */
.header__heading-logo { display: block; width: 100%; height: auto; }
#MainContent { min-height: 50vh; }
img { max-width: 100%; height: auto; }

/* Bind the existing cart pill to Snipcart's live count */
.cart-count-bubble__count { display: inline-block; }
.snipcart-items-count:empty::after { content: "0"; }

/* ===================== product card fix ===================== */
/* component-card.css gives __information z-index:2 but no position, so the
   absolutely-positioned media image paints over it. Make it positioned. */
.product-card__inner { position: relative; }
.product-card__information { position: relative; z-index: 2; margin-top: auto !important; }
/* Force 2-up product grid on mobile (theme's mobile-2 column rule wasn't applying) */
@media (max-width: 575.99px) {
  #product-grid.collection-product-list,
  .featured-collection .collection-product-list { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== homepage ===================== */
/* Ronin heading row */
.heading-group { display: flex; align-items: center; justify-content: space-between; padding: 3rem 1.2rem 1.5rem; }
.heading-group--border-bottom { border-bottom: 1px solid rgb(var(--color-border)); }
.heading-group .h6 { margin: 0; }
.popular-products-section { margin-bottom: 0; }

/* Header cart: text on desktop (>=750), icon + count badge on mobile (<750).
   Ported from header-cart-icon-styles.liquid (live: cart_button_type=text, mobile=icon). */
@media screen and (min-width: 750px) {
  .cart-count-bubble__icon { display: none; }
  .cart-count-bubble__text { display: flex; }
  .header__cart { width: unset; }
}
@media screen and (max-width: 749.99px) {
  .cart-count-bubble { width: 2rem; height: 2rem; position: relative; overflow: visible; }
  .cart-count-bubble__icon { display: block; }
  .cart-count-bubble__text { display: none; }
  .cart-count-bubble__count {
    position: absolute; top: 1.1rem; right: -0.7rem;
    color: rgb(var(--color-background)); background-color: rgb(var(--color-foreground));
    padding: 0.1rem 0.36rem; min-width: 1.2rem; height: 1.6rem; border-radius: 1rem;
    font-size: 1rem; line-height: 1.4rem; text-align: center;
  }
}

/* ===================== PDP layout + gallery + pills ===================== */
.product { padding: 2rem 0; }
.product__outer { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 990px) {
  .product__outer { flex-direction: row; align-items: flex-start; gap: 4rem; padding: 0 2rem; }
  .product__media { flex: 1 1 60%; position: sticky; top: calc(var(--header-height) + 1rem); }
  .product__info-container { flex: 1 1 40%; max-width: 48rem; }
}
.product__info-container { padding: 2rem; }
.allegory-pdp-main img { width: 100%; height: auto; display: block; background: #f5f5f5; }
.allegory-pdp-thumbs { display: flex; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; }
.allegory-pdp-thumb { width: 6.4rem; height: 8rem; padding: 0; border: 1px solid rgb(var(--color-border)); background: none; cursor: pointer; overflow: hidden; }
.allegory-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.allegory-pdp-thumb.is-active { border-color: rgb(var(--color-foreground)); }
.product__title { margin: 0 0 1rem; }
.product__price { margin-bottom: 1rem; font-size: 1.6rem; }
.product-form__controls { border: 0; padding: 0; margin: 0 0 1.6rem; }
.product-form__group-name { display: block; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.product-form__controls-group { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.product-parameters input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.product-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.4rem; padding: 0.9rem 1.4rem;
  border: 1px solid rgb(var(--color-border)); border-radius: var(--border-radius-button);
  cursor: pointer; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.03em;
  user-select: none; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.product-parameters input[type="radio"]:checked + .product-pill {
  background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: rgb(var(--color-foreground));
}
.product-parameters input[type="radio"]:focus-visible + .product-pill { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }
/* Sold-out sizes: grayed + struck through, not selectable */
.product-pill--sold-out,
.product-parameters input[type="radio"]:disabled + .product-pill {
  opacity: 0.35; text-decoration: line-through; cursor: not-allowed; pointer-events: none;
}
.product__buy-buttons { margin: 1.6rem 0; }
.product-form__submit { width: 100%; min-height: 4.6rem; cursor: pointer; }
.product-form__submit.is-sold-out { opacity: 0.5; cursor: not-allowed; }
.product__divider--border { border-top: 1px solid rgb(var(--color-border)); margin: 1.6rem 0; }
/* .product-accordion styling is handled by the theme's section-main-product.css
   (toggle/content + :not(.active) hide); we just toggle .active in JS. */

/* ===== header: only the Allegory mobile-drawer inline-submenu bits that are
   NOT in base.css / component-menu-drawer.css (they lived in the theme's inline
   <style>). Desktop nav layout + flyouts are handled by base.css. ===== */
.menu-drawer__summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.menu-drawer__summary::-webkit-details-marker { display: none; }
.menu-drawer__plus { position: relative; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.menu-drawer__plus::before, .menu-drawer__plus::after { content: ""; position: absolute; background: currentColor; }
.menu-drawer__plus::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.menu-drawer__plus::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: opacity 0.2s; }
.menu-drawer__details[open] .menu-drawer__plus::after { opacity: 0; }
.menu-drawer__inline-list { list-style: none; padding-left: 1.2rem; margin: 0 0 0.6rem; }
.menu-drawer__menu-item--child { display: block; padding: 0.6rem 0; opacity: 0.8; }

/* ===== mobile quick-add panel show/hide (we own the state; theme CSS styles the look) ===== */
.mobile-quick-add__panel { display: none; }
.mobile-quick-add__panel.is-open { display: block; }
.mobile-quick-add__overlay { opacity: 0; visibility: hidden; transition: opacity 0.2s; }
.mobile-quick-add__overlay.is-visible { opacity: 1; visibility: visible; }
.mobile-quick-add__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }

.menu-drawer__navigation { padding: 1.5rem 2rem; }