/**
 * ============================================================================
 * Specifikit Demo Theming & Settings CSS
 * Location: /demos/handbag/assets/specifikit-demo.css
 * Version: 1.2
 * Author: specifikit.com
 * ============================================================================
 */

/* ==========================================================================
   1. MINIMAL CSS RESET (Mimics Shopify Theme Environment)
   ========================================================================== */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* ==========================================================================
   2. COMPLETE THEME SETTINGS (CSS VARIABLES)
   This section replicates the default output from the Shopify Theme Editor,
   ensuring all components are styled correctly and consistently.
   ========================================================================== */
:root {
  /* General & Typography */
  --specifikit-primary-color: #000000;
  --specifikit-primary-text-color: #FFFFFF;
  --specifikit-accent-color: #4338ca;
  --specifikit-border-color: #DDDDDD;
  --specifikit-border-width: 2px;
  --specifikit-border-radius: 8px;
  --specifikit-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --specifikit-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Loader */
  --specifikit-loader-color: #000000;
  --specifikit-loader-bg-color: #FFFFFF;

  /* Badges */
  --specifikit-sale-badge-bg: #ef4444;
  --specifikit-sale-badge-text-color: #FFFFFF;
  --specifikit-vendor-badge-bg-color: #f3f4f6;
  --specifikit-vendor-badge-text-color: #1f2937;
  --specifikit-vendor-badge-border-color: #d1d5db;
  --specifikit-vendor-badge-border-width: 2px;

  /* Action Panel & Quantity */
  --specifikit-action-panel-bg: #f8f8f8;
  --specifikit-action-panel-text-color: #666666;
  --specifikit-action-panel-heading-color: #111827;
  --specifikit-action-panel-list-label-color: #333333;
  --specifikit-action-panel-list-value-color: #666666;
  --specifikit-action-panel-border-color: rgba(0, 0, 0, 0);
  --specifikit-action-panel-border-width: 0px;
  --specifikit-action-panel-border-radius: 8px;
  --specifikit-action-panel-padding: 24px;
  --specifikit-qty-label-color: #333333;
  --specifikit-qty-input-bg: #FFFFFF;
  --specifikit-qty-input-text-color: #333333;
  --specifikit-qty-input-border-color: #DDDDDD;
  --specifikit-qty-input-border-color-focus: #000000;

  /* Notifications & Pre-order */
  --specifikit-notification-panel-bg: #fefce8;
  --specifikit-notification-panel-text-color: #854d0e;
  --specifikit-notification-panel-icon-color: #d97706;
  --specifikit-notification-panel-border-color: #facc15;
  --specifikit-notification-panel-border-width: 2px;
  --specifikit-notification-panel-border-radius: 8px;
  --specifikit-notification-panel-padding: 16px;
  --specifikit-preorder-message-bg: #eef2ff;
  --specifikit-preorder-message-text-color: #4338ca;
  --specifikit-preorder-message-icon-color: #4f46e5;
  --specifikit-preorder-message-icon-bg: rgba(0, 0, 0, 0);
  --specifikit-preorder-message-icon-size: 16px;
  --specifikit-preorder-message-border-color: #c7d2fe;
  --specifikit-preorder-message-border-width: 1px;
  --specifikit-preorder-message-border-radius: 8px;
  --specifikit-preorder-message-padding: 16px;

  /* Advanced Feature UI */
  --specifikit-text-button-border-width: 2px;
  --specifikit-text-button-transform: uppercase;
  --specifikit-button-border-width: 0px;
  --specifikit-text-button-icon-size: 16px;
  --specifikit-text-button-gap: 10px;
  --specifikit-icon-toolbar-gap: 8px;
  --specifikit-icon-only-button-size: 44px;
  --specifikit-icon-only-button-icon-size: 24px;

  /* Button Colors */
  --specifikit-save-color-bg: #10b981;
  --specifikit-save-color-bg-hover: #059669;
  --specifikit-save-color-text: #FFFFFF;
  --specifikit-save-border-color: #10b981;
  --specifikit-save-border-color-hover: #059669;
  --specifikit-save-icon-color: #FFFFFF;
  --specifikit-save-icon-color-hover: #FFFFFF;
  --specifikit-share-color-bg: #3b82f6;
  --specifikit-share-color-bg-hover: #2563eb;
  --specifikit-share-color-text: #FFFFFF;
  --specifikit-share-border-color: #3b82f6;
  --specifikit-share-border-color-hover: #2563eb;
  --specifikit-share-icon-color: #FFFFFF;
  --specifikit-share-icon-color-hover: #FFFFFF;
  --specifikit-load-color-bg: #64748b;
  --specifikit-load-color-bg-hover: #475569;
  --specifikit-load-color-text: #FFFFFF;
  --specifikit-load-border-color: #64748b;
  --specifikit-load-border-color-hover: #475569;
  --specifikit-load-icon-color: #FFFFFF;
  --specifikit-load-icon-color-hover: #FFFFFF;
  --specifikit-compare-color-bg: #4338ca;
  --specifikit-compare-color-bg-hover: #3730a3;
  --specifikit-compare-color-text: #FFFFFF;
  --specifikit-compare-border-color: #4338ca;
  --specifikit-compare-border-color-hover: #3730a3;
  --specifikit-compare-icon-color: #FFFFFF;
  --specifikit-compare-icon-color-hover: #FFFFFF;
  --specifikit-wishlist-color-bg: #ef4444;
  --specifikit-wishlist-color-bg-hover: #dc2626;
  --specifikit-wishlist-color-text: #FFFFFF;
  --specifikit-wishlist-border-color: #ef4444;
  --specifikit-wishlist-border-color-hover: #dc2626;
  --specifikit-wishlist-icon-color: #FFFFFF;
  --specifikit-wishlist-icon-color-hover: #FFFFFF;
  --specifikit-delete-color-bg: rgba(0, 0, 0, 0);
  --specifikit-delete-color-bg-hover: #ef4444;
  --specifikit-delete-color-text: #ef4444;
  --specifikit-delete-color-text-hover: #FFFFFF;
  --specifikit-delete-border-color: #ef4444;
  --specifikit-delete-border-color-hover: #ef4444;
  --specifikit-360-button-color-bg: #FFFFFF;
  --specifikit-360-button-color-text: #000000;
  --specifikit-360-button-color-border: #000000;
  --specifikit-360-button-color-bg-active: #4338ca;
  --specifikit-360-button-color-text-active: #FFFFFF;
  --specifikit-360-button-color-border-active: #4338ca;
  --specifikit-ar-button-color-bg: #667eea;
  --specifikit-ar-button-color-text: #FFFFFF;
  --specifikit-ar-button-color-border: #000000;
  --specifikit-zoom-button-color-bg: #FFFFFF;
  --specifikit-zoom-button-color-text: #000000;
  --specifikit-zoom-button-color-border: #000000;

  /* Icon Toolbar & Tooltips */
  --specifikit-icon-toolbar-bg: #f3f4f6;
  --specifikit-icon-toolbar-border: #e5e7eb;
  --specifikit-icon-toolbar-radius: 12px;
  --specifikit-icon-toolbar-border-width: 1px;
  --specifikit-tooltip-bg: #1f2937;
  --specifikit-tooltip-text: #FFFFFF;
  --specifikit-icon-toolbar-padding-y: 8px;
  --specifikit-icon-toolbar-padding-x: 8px;

  /* Dialogs (Save/Share) */
  --specifikit-dialog-bg-color: #FFFFFF;
  --specifikit-dialog-text-color: #374151;
  --specifikit-dialog-input-bg-color: #f3f4f6;
  --specifikit-dialog-input-text-color: #111827;
  --specifikit-dialog-input-border-color: #d1d5db;
  --specifikit-dialog-cancel-bg-color: #000000;
  --specifikit-dialog-cancel-text-color: #FFFFFF;

  /* Price Breakdown */
  --specifikit-price-breakdown-wrapper-bg: rgba(249, 250, 251, 1);
  --specifikit-price-breakdown-wrapper-border-color: #e5e7eb;
  --specifikit-price-breakdown-wrapper-border-width: 1px;
  --specifikit-price-breakdown-wrapper-border-radius: 8px;

  /* View Toolbar (Multi-Angle) */
  --specifikit-view-button-color-bg: rgba(0, 0, 0, 0);
  --specifikit-view-button-color-text: #333333;
  --specifikit-view-button-color-border: rgba(0, 0, 0, 0);
  --specifikit-view-button-color-bg-active: #000000;
  --specifikit-view-button-color-text-active: #FFFFFF;
  --specifikit-view-button-color-border-active: #000000;
  --specifikit-view-toolbar-bg: rgba(255, 255, 255, 0.8);
  --specifikit-view-toolbar-border: rgba(0, 0, 0, 0.1);
  --specifikit-view-toolbar-radius: 20px;
  --specifikit-view-toolbar-padding: 6px;
  --specifikit-view-toolbar-gap: 6px;
  --specifikit-view-toolbar-button-border-width: 1px;
  --specifikit-view-button-font-size: 13px;
  --specifikit-view-button-icon-size: 16px;
  --specifikit-view-icon-only-button-size: 40px;
  --specifikit-view-icon-only-button-icon-size: 22px;

  /* Modal Theming */
  --specifikit-modal-header-bg: #FFFFFF;
  --specifikit-modal-header-text-color: #111827;
  --specifikit-modal-body-bg: #FFFFFF;
  --specifikit-modal-close-bg: #f3f4f6;
  --specifikit-modal-close-icon-color: #374151;
  --specifikit-modal-close-bg-hover: #ef4444;
  --specifikit-modal-close-icon-color-hover: #FFFFFF;
  --specifikit-modal-scrollbar-track-color: #f1f1f1;
  --specifikit-modal-scrollbar-thumb-color: #c1c1c1;
}

/* ======================================================================
   3. UPDATED: CONDITIONAL TYPOGRAPHIC SYSTEM
   This system robustly controls font sizes. When "Typographic Island"
   is enabled, it uses `em` units for isolation. When disabled, it uses
   `rem` units to scale harmoniously with the theme's root font size.
   ====================================================================== */

/* STATE 1: Typographic Island ENABLED (Default for Demo) */
.specifikit-product-customizer-wrapper[data-typographic-island="true"] {
  --specifikit-island-root-px: 16px;
  font-size: var(--specifikit-island-root-px);
  --specifikit-font-size-xs: 0.75em;    /* 12px */
  --specifikit-font-size-sm: 0.8125em;  /* 13px */
  --specifikit-font-size-base: 0.9375em; /* 15px */
  --specifikit-font-size-lg: 1.25em;    /* 20px */
  --specifikit-font-size-xl: 1.5em;     /* 24px */
  --specifikit-font-size-h4: 1em;       /* 16px */
  --specifikit-font-size-h3: 1.25em;    /* 20px */
  --specifikit-font-size-h2: 1.625em;   /* 26px */
  --specifikit-line-height-tight: 1.2;
  --specifikit-line-height-normal: 1.5;
  --specifikit-line-height-relaxed: 1.6;
}

/*
  ★ DEFINITIVE CONTEXT RESET PATTERN ★
  This proactive rule targets all key containers that hold text within
  the typographic island. By resetting their font-size to the island's
  root pixel value, it completely eliminates any possibility of 'em' unit
  compounding, guaranteeing 100% font-size consistency.
*/
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-option-button,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-component-dropdown__option,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-component-dropdown__trigger,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-accordion-header,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-view-button,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-btn,
.specifikit-product-customizer-wrapper[data-typographic-island="true"] .specifikit-summary-details li {
  font-size: var(--specifikit-island-root-px);
}

@media (min-width: 769px) {
  .specifikit-product-customizer-wrapper[data-typographic-island="true"] {
    --specifikit-font-size-lg: 1.375em; /* 22px */
    --specifikit-font-size-h3: 1.375em; /* 22px */
    --specifikit-font-size-h2: 1.875em; /* 30px */
  }
}

@media (min-width: 969px) {
  .specifikit-product-customizer-wrapper[data-typographic-island="true"] {
    --specifikit-font-size-base: 1em;    /* 16px */
    --specifikit-font-size-lg: 1.5em;    /* 24px */
    --specifikit-font-size-h3: 1.5em;    /* 24px */
    --specifikit-font-size-h2: 2.125em;  /* 34px */
  }
}

/* STATE 2: Typographic Island DISABLED (Failsafe) */
.specifikit-product-customizer-wrapper:not([data-typographic-island='true']) {
  --specifikit-font-size-xs: 0.8125rem;
  --specifikit-font-size-sm: 0.875rem;
  --specifikit-font-size-base: 1rem;
  --specifikit-font-size-lg: 1.375rem;
  --specifikit-font-size-xl: 1.625rem;
  --specifikit-font-size-h4: 1.125rem;
  --specifikit-font-size-h3: 1.375rem;
  --specifikit-font-size-h2: 1.875rem;
  --specifikit-line-height-tight: 1.2;
  --specifikit-line-height-normal: 1.5;
  --specifikit-line-height-relaxed: 1.6;
}

@media (min-width: 769px) {
  .specifikit-product-customizer-wrapper:not([data-typographic-island='true']) {
    --specifikit-font-size-lg: 1.5rem;
    --specifikit-font-size-h3: 1.5rem;
    --specifikit-font-size-h2: 2.125rem;
  }
}
  
@media (min-width: 969px) {
  .specifikit-product-customizer-wrapper:not([data-typographic-island='true']) {
    --specifikit-font-size-base: 1.0625rem;
    --specifikit-font-size-lg: 1.625rem;
    --specifikit-font-size-h3: 1.75rem;
    --specifikit-font-size-h2: 2.375rem;
  }
}

/* ======================================================================
   4. TRANSPLANTED CONTENT & APP BLOCK STYLING (from specifikit-product.liquid)
   This ensures that any content transplanted from the theme (like descriptions
   or app blocks) visually conforms to the customizer's typographic system.
   ====================================================================== */

.specifikit-product-customizer-wrapper .specifikit-transplanted {
  font-family: var(--specifikit-font-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #374151 !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted h1 {
  font-family: var(--specifikit-font-heading) !important;
  font-size: var(--specifikit-font-size-h2) !important;
  line-height: var(--specifikit-line-height-tight) !important;
  font-weight: 700 !important;
  color: var(--specifikit-action-panel-heading-color, #111827) !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted h2 {
  font-family: var(--specifikit-font-heading) !important;
  font-size: var(--specifikit-font-size-h3) !important;
  line-height: var(--specifikit-line-height-tight) !important;
  color: var(--specifikit-action-panel-heading-color, #111827) !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted p,
.specifikit-product-customizer-wrapper .specifikit-transplanted .rte,
.specifikit-product-customizer-wrapper .specifikit-transplanted[class*="description"] {
  font-size: var(--specifikit-font-size-base) !important;
  line-height: var(--specifikit-line-height-relaxed) !important;
  color: #4b5563 !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted[class*="caption"],
.specifikit-product-customizer-wrapper .specifikit-transplanted.product__tax,
.specifikit-product-customizer-wrapper .specifikit-transplanted.installment,
.specifikit-product-customizer-wrapper .specifikit-transplanted form {
  font-size: var(--specifikit-font-size-sm) !important;
  line-height: var(--specifikit-line-height-normal) !important;
  color: #6b7280 !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted a {
  font-family: inherit !important;
  font-size: inherit !important;
  color: var(--specifikit-primary-color) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  transition: opacity 0.2s ease !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.specifikit-product-customizer-wrapper .specifikit-transplanted a:hover {
  opacity: 0.75 !important;
}

.specifikit-product-customizer-wrapper shopify-payment-terms {
  all: revert;
  --shopify-payment-terms-font-family: var(--specifikit-font-body);
  --shopify-payment-terms-font-size: var(--specifikit-font-size-sm);
  --shopify-payment-terms-text-color: #4b5563;
  --shopify-payment-terms-link-color: var(--specifikit-primary-color);
  --shopify-payment-terms-disclosure-text-color: #6b7280;
  display: block;
  margin-top: 1rem;
}

/* ======================================================================
   5. STRUCTURAL CSS (from specifikit-product.liquid)
   This ensures the correct UI (text buttons vs. icon toolbar) is shown
   based on the data-attribute set in the demo's HTML.
   ====================================================================== */
.specifikit-toolbar-wrapper {
  display: none;
}
.specifikit-text-buttons {
  display: block;
}

[data-icon-toolbar-display='mobile_only'] .specifikit-toolbar-wrapper {
  display: block;
}
[data-icon-toolbar-display='mobile_only'] .specifikit-text-buttons {
  display: none;
}
@media (min-width: 769px) {
  [data-icon-toolbar-display='mobile_only'] .specifikit-toolbar-wrapper {
    display: none;
  }
  [data-icon-toolbar-display='mobile_only'] .specifikit-text-buttons {
    display: block;
  }
}

[data-icon-toolbar-display='mobile_tablet'] .specifikit-toolbar-wrapper {
  display: block;
}
[data-icon-toolbar-display='mobile_tablet'] .specifikit-text-buttons {
  display: none;
}
@media (min-width: 969px) {
  [data-icon-toolbar-display='mobile_tablet'] .specifikit-toolbar-wrapper {
    display: none;
  }
  [data-icon-toolbar-display='mobile_tablet'] .specifikit-text-buttons {
    display: block;
  }
}

[data-icon-toolbar-display='all_devices'] .specifikit-toolbar-wrapper {
  display: block;
}
[data-icon-toolbar-display='all_devices'] .specifikit-text-buttons {
  display: none;
}

/* ======================================================================
   6. DEMO-SPECIFIC LAYOUT CORRECTIONS & FAILSAFES
   These rules ensure the demo's robust HTML structure maintains the
   visual parity of the original Shopify environment.
   ====================================================================== */

/* Replicates the flex-gap between the Add to Cart and Wishlist buttons,
   which is lost due to the robust HTML structure change for the demo. */
#specifikit-add-to-cart-form > [data-specifikit-placeholder="wishlist-button"] {
  margin-top: 12px;
}

/* Ensures images in the comparison modal are correctly sized and scaled. */
.specifikit-comparison-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #f3f4f6;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.specifikit-comparison-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * ============================================================================
 * ROBUST LAYOUT CORRECTION FOR DEMO WRAPPER (THE FIX)
 *
 * Problem: The `.specifikit-product-customizer-wrapper` in `specifikit-core.css`
 * has its own `max-width` and `margin: auto`, designed to center itself
 * within a full-width Shopify theme section. In this demo, it's nested
 * inside `.demo-wrapper`, which already handles centering and padding. This
 * conflict causes the inner content to overflow on mobile.
 *
 * Solution: This high-specificity rule overrides the core layout styles
 * ONLY when the customizer is inside our `.demo-wrapper`. It removes the
 * conflicting properties and padding, forcing the customizer to behave as
 * a simple block that fluidly fills its parent. This is a bulletproof fix
 * that guarantees containment and proper centering without affecting the
 * core component styles.
 * ============================================================================
 */
.demo-wrapper > .specifikit-product-customizer-wrapper {
  max-width: none;
  margin: 0;
  padding: 0;
}

/*
 * ============================================================================
 * END Specifikit Demo Theming & Settings CSS FILE
 * ============================================================================
 */