/**
 * Theme Name:       Shoptimizer Child
 * Theme URI:        https://www.commercegurus.com/wordpress-themes/shoptimizer
 * Description:      Child theme for Shoptimizer.
 * Author:           CommerceGurus
 * Author URI:       https://www.commercegurus.com/
 * Template:         shoptimizer
 * Version:          1.1.55
 * Text Domain:      shoptimizer-child
 */

/**
 * Design system: ink / slate / accent / mist (site palette).
 * Named aliases mirror the core hexes for use in section CSS.
 */
:root {
  --sg-ink: #222831;
  --sg-slate: #393e46;
  --sg-mist: #eeeeee;
  --sg-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sg-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sg-text: var(--sg-ink);
  --sg-muted: var(--sg-slate);
  --sg-border: rgba(34, 40, 49, 0.14);
  --sg-surface: var(--sg-mist);
  --sg-surface-2: var(--sg-mist);
  --sg-surface-muted: color-mix(in srgb, var(--sg-mist) 92%, var(--sg-slate) 8%);
  --sg-accent: #ffd369;
  --sg-accent-2: var(--sg-ink);
  --sg-accent-light-bg: rgba(255, 211, 105, 0.15);
  --sg-on-dark: var(--sg-mist);
  --sg-lux-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sg-shadow-image: 0 8px 32px rgba(0, 0, 0, 0.12);
  --sg-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --sg-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --sg-shadow-button: 0 4px 16px rgba(0, 0, 0, 0.15);
  --sg-shadow-button-hover: 0 8px 24px rgba(0, 0, 0, 0.22);
  --fragnatium-hero-ink: #111111;
  --fragnatium-hero-ink-rgb: 17, 17, 17;

  /* Type scale (semantic shorthands matching design-system/project/colors_and_type.css). */
  --sg-h1: 700 clamp(2.4rem, 4.4vw, 3.8rem)/1.08 var(--sg-display);
  --sg-h2: 500 clamp(1.7rem, 2.6vw, 2.4rem)/1.15 var(--sg-display);
  --sg-h3: 500 1.25rem/1.35 var(--sg-display);
  --sg-h4: 600 1.05rem/1.4 var(--sg-display);
  --sg-body-lg: 400 1.0625rem/1.65 var(--sg-body);
  --sg-body-md: 400 0.9375rem/1.65 var(--sg-body);
  --sg-body-sm: 400 0.85rem/1.6 var(--sg-body);
  --sg-caption: 500 0.75rem/1.5 var(--sg-body);
  --sg-eyebrow: 600 0.7rem/1 var(--sg-body);
  --sg-eyebrow-tracking: 0.22em;

  /* Tracking presets used across the system. */
  --sg-track-display: 0.02em;
  --sg-track-body: normal;
  --sg-track-caps: 0.14em;
  --sg-track-caps-tight: 0.06em;
  --sg-track-caps-wide: 0.22em;

  /* Motion durations — slow-out is the brand's signature. */
  --sg-dur-fast: 0.2s;
  --sg-dur-base: 0.5s;
  --sg-dur-slow: 1.65s;

  /* Radii — Fragnatium is intentionally squared everywhere. */
  --sg-radius-0: 0;
  --sg-radius-sm: 0;
  --sg-radius-md: 0;
  --sg-radius-lg: 0;

  /* Spacing scale. */
  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.25rem;
  --sg-space-6: 1.5rem;
  --sg-space-8: 2rem;
  --sg-space-10: 2.5rem;
  --sg-space-12: 3rem;
  --sg-space-16: 4rem;

  /* Layout container. */
  --sg-container-max: 1400px;
  --sg-container-pad: 1.25rem;
}

/* Responsive tiers (use consistently below):
   992px+ desktop · max 991px tablet/sidebar collapse · max 767px handheld · max 639px compact */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--sg-surface-2);
  color: var(--sg-text);
  font-family: var(--sg-body);
  font-size: 17px;
  line-height: 1.625;

  --wp--preset--font-size--small: 0.85rem;
}

.site-header a,
.site-content a,
.fragnatium-footer a {
  transition:
    color 0.5s var(--sg-lux-ease),
    border-color 0.5s var(--sg-lux-ease),
    background-color 0.5s var(--sg-lux-ease),
    opacity 0.5s var(--sg-lux-ease);
}

@media (prefers-reduced-motion: reduce) {
  .site-header a,
  .site-content a,
  .fragnatium-footer a {
    transition: none;
  }
}


/* Prevent the parent theme's negative-margin bleed patterns from creating a
   horizontal scrollbar. overflow-x:clip on html is treated as visible by the
   spec (doesn't propagate to viewport), so we use hidden which does propagate.
   overflow-x:hidden alone does not break position:sticky (only overflow:hidden
   on the scroll container does, and we're only restricting the horizontal axis). */
html,
body {
  overflow-x: hidden;
}

#content.site-content {
  padding-top: 0;
  overflow: hidden;
}

/* The parent theme bleeds .single-product .content-area wider than its
   container on mobile (calc(100% + 2em)) to compensate for 1em col-full
   padding. Our col-full uses 1.25rem, so reset this cleanly. */
@media (max-width: 991px) {
  .single-product .content-area {
    width: 100%;
    margin-left: 0;
  }
}

.site-branding .site-title {
  font-size: 2.5rem;
  font-family: var(--sg-display);
}

.menu-primary-menu-container > ul > li > a {
  color: var(--sg-on-dark);
}

@media (min-width: 992px) {
  .menu-primary-menu-container > ul > li > a:hover,
  .menu-primary-menu-container > ul > li > a:focus-visible {
    color: var(--sg-accent);
  }
}

body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
  background-color: var(--sg-surface-2);
}

.widget_shopping_cart .product_list_widget li a.remove {
  top: 50%;
  margin-top: -7px;
}

.shoptimizer-mini-cart-wrap .product_list_widget img {
  max-width: 80px;
  width: 80px;
}

.shoptimizer-primary-navigation {
  display: flex;
  font-family: var(--sg-body);
  font-weight: bold;
  max-width: none !important;
  align-items: center;
  flex-direction: column;
}

.shoptimizer-mini-cart-wrap .widget_shopping_cart li.mini_cart_item {
  font-size: 1rem;
}

.main-header {
  max-width: none !important;
  background: var(--sg-surface);
  border-bottom: 1px solid var(--sg-border);
}
@media (max-width: 991px) {
  .main-navigation {
    width: 100%;
  }
  .menu-primary-menu-container > ul > li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--sg-border);
  }
  .menu-primary-menu-container > ul > li:last-child {
    border-bottom: none;
  }
  /* Match mobile drawer, menu toggle and filter bar to the header surface.
     Parent theme ships a Kirki customizer rule that prints inline <style> with
     `background-color: #fff` on .site-branding button.menu-toggle (and variants);
     that inline stylesheet loads after ours, so !important is required. */
  .col-full-nav,
  .mobile-filter {
    background: var(--sg-surface);
  }
  .site-branding button.menu-toggle,
  .site-branding button.menu-toggle:hover,
  .site-header button.mobile-search-toggle,
  .m-search-bh .site-search,
  .m-search-toggled .site-search {
    background-color: transparent !important;
  }
}

@media (min-width: 992px) {
  .col-full-nav,
  .shoptimizer-primary-navigation {
    background: var(--fragnatium-hero-ink);
  }

  .shoptimizer-primary-navigation {
    flex-direction: row;
  }

  .main-header {
    padding: 2rem 1.25rem;
  }

  .shoptimizer-archive #secondary {
    display: flex;
    flex-direction: column;
  }
  .shoptimizer-archive .secondary-wrapper {
    display: flex;
  }
  .shoptimizer-archive .col-full {
    display: flex;
    justify-content: center;
  }
  .left-woocommerce-sidebar .secondary-wrapper {
    order: 1;
  }
  .left-woocommerce-sidebar #primary {
    order: 2;
  }
  .left-woocommerce-sidebar #secondary,
  .right-woocommerce-sidebar #secondary {
    min-width: 250px;
    margin-right: 2rem;
    border-right: 1px solid var(--sg-border);
  }
}

.button.alt {
  background-color: var(--sg-text);
  color: var(--sg-on-dark);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.875rem 1.75rem;
  line-height: 1.25;
  border: 1px solid var(--sg-text);
  box-shadow: var(--sg-shadow-button);
  transition:
    background-color 0.5s var(--sg-lux-ease),
    border-color 0.5s var(--sg-lux-ease),
    color 0.5s var(--sg-lux-ease),
    box-shadow 0.5s var(--sg-lux-ease);
}

.button.alt:hover {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.button.alt:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 3px;
}

.button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  color: #fff;
}

/* --- WooCommerce Notices (map to alert styles) --- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error {
  padding: 1rem 1.25rem;
  border-radius: 0;
  font-size: 0.92rem;
  border: 1px solid transparent;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.woocommerce-message::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message {
  background: #eef5f0;
  color: #2d5b42;
  border-color: rgba(45, 91, 66, 0.18);
}

.woocommerce-error,
.woocommerce-error li {
  background: #fdf2f2;
  color: #9b2c2c;
  border-color: rgba(155, 44, 44, 0.18);
}

.woocommerce-error {
  list-style: none;
  padding-left: 1.25rem;
}

.woocommerce-message a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.woocommerce-mini-cart-item.cart-item--upgrade {
  border-left: 3px solid var(--sg-accent, #ffd369);
  padding-left: 0.75rem;
}

/* Fix any input styling conflicts */

/* ==========================================================================
        BLOCKS: Critical Layout Fixes
        WooCommerce Blocks uses .wc-block-components-sidebar-layout with flexbox
        ========================================================================== */

.quantity.buttons_added,
.woocommerce-variation-price,
.variations .cgkit-as-wrap {
  display: none !important;
}

body:not(.home):not(.page-template-page-brands) .shoptimizer-archive {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 992px) {
  body:not(.home):not(.page-template-page-brands):not(.woocommerce-cart):not(
      .woocommerce-checkout
    )
    .shoptimizer-archive {
    padding: 2rem 1.25rem;
  }
}

#content {
  background: var(--sg-surface-2);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

.col-full {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ==========================================================================
   Fragnatium design-system helpers
   Mirror of design-system/project/colors_and_type.css. Generic .sg-* classes
   for use in any future template. They do NOT override existing WooCommerce
   or parent-theme rules — .button.alt, etc., keep their current behaviour.
   ========================================================================== */

.sg-h1,
h1.sg {
  font: var(--sg-h1);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
  margin: 0;
}

.sg-h2,
h2.sg {
  font: var(--sg-h2);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
  margin: 0;
}

.sg-h3,
h3.sg {
  font: var(--sg-h3);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
  margin: 0;
}

.sg-h4,
h4.sg {
  font: var(--sg-h4);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
  margin: 0;
}

.sg-body-lg {
  font: var(--sg-body-lg);
  color: var(--sg-text);
}

.sg-body {
  font: var(--sg-body-md);
  color: var(--sg-text);
}

.sg-body-sm {
  font: var(--sg-body-sm);
  color: var(--sg-text);
}

.sg-muted {
  color: var(--sg-muted);
}

.sg-eyebrow {
  font: var(--sg-eyebrow);
  letter-spacing: var(--sg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sg-accent-2);
  display: inline-block;
}

.sg-caps {
  font-family: var(--sg-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Squared ink CTA — non-WC equivalent of .button.alt.
   Use .sg-btn for any custom template (newsletter, hero, etc.). */
.sg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sg-text);
  color: var(--sg-on-dark);
  border: 1px solid var(--sg-text);
  border-radius: 0;
  padding: 0.875rem 1.75rem;
  font-family: var(--sg-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sg-shadow-button);
  transition:
    background-color var(--sg-dur-base) var(--sg-lux-ease),
    border-color var(--sg-dur-base) var(--sg-lux-ease),
    color var(--sg-dur-base) var(--sg-lux-ease),
    box-shadow var(--sg-dur-base) var(--sg-lux-ease);
}

.sg-btn:hover {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-text);
  box-shadow: var(--sg-shadow-button-hover);
}

.sg-btn:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 3px;
}

/* Underline-only secondary with the brand's signature padding-left slide. */
.sg-btn-ghost {
  background: transparent;
  color: var(--sg-text);
  border: 0;
  border-bottom: 1px solid var(--sg-text);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--sg-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--sg-track-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--sg-dur-base) var(--sg-lux-ease),
    border-color var(--sg-dur-base) var(--sg-lux-ease),
    padding-left var(--sg-dur-base) var(--sg-lux-ease);
}

.sg-btn-ghost:hover {
  color: var(--sg-accent-2);
  border-color: var(--sg-accent);
  padding-left: 0.3rem;
}

/* Hairline card with accent-light hover wash — borders do the structural work. */
.sg-card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 0;
  padding: 1.25rem;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.sg-card:hover {
  background-color: var(--sg-accent-light-bg);
}

.sg-input {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 1px solid var(--sg-border);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  font-family: var(--sg-body);
  font-size: 0.95rem;
  color: var(--sg-text);
  transition: border-color var(--sg-dur-fast) ease;
}

.sg-input::placeholder {
  color: var(--sg-muted);
  opacity: 0.7;
}

.sg-input:focus {
  outline: none;
  border-color: var(--sg-accent-2);
}

@media (prefers-reduced-motion: reduce) {
  .sg-btn,
  .sg-btn-ghost,
  .sg-card,
  .sg-input {
    transition: none;
  }
}