/* ----------------------------------
   CSS Variables (Theme Tokens)
   Override these in your theme to match branding.
----------------------------------- */
:root {
  --wc-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --wc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --wc-text: #111827;             /* gray-900 */
  --wc-text-muted: #6b7280;       /* gray-500 */
  --wc-bg: #ffffff;               /* white */
  --wc-surface: #ffffff;          /* cards/panels */
  --wc-surface-alt: #f9fafb;      /* gray-50 */
  --wc-border: #e5e7eb;           /* gray-200 */

  --wc-primary: #0ea5e9;          /* sky-500 */
  --wc-primary-600: #0284c7;      /* hover */
  --wc-primary-contrast: #ffffff;

  --wc-success: #16a34a;          /* green-600 */
  --wc-warning: #d97706;          /* amber-600 */
  --wc-danger: #dc2626;           /* red-600 */

  --wc-radius: 12px;
  --wc-radius-sm: 8px;
  --wc-radius-lg: 16px;
  --wc-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --wc-focus-ring: 0 0 0 3px rgba(14,165,233,.35);

  --wc-spacing-1: .25rem;
  --wc-spacing-2: .5rem;
  --wc-spacing-3: .75rem;
  --wc-spacing-4: 1rem;
  --wc-spacing-5: 1.25rem;
  --wc-spacing-6: 1.5rem;

  --wc-font-size-sm: .875rem;
  --wc-font-size-base: 1rem;
  --wc-font-size-lg: 1.125rem;
  --wc-font-size-xl: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wc-text: #e5e7eb;           /* gray-200 */
    --wc-text-muted: #9ca3af;     /* gray-400 */
    --wc-bg: #0b0f14;             /* near-black */
    --wc-surface: #0f172a;        /* slate-900 */
    --wc-surface-alt: #0b1220;    /* darker */
    --wc-border: #1f2937;         /* gray-800 */

    --wc-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
    --wc-focus-ring: 0 0 0 3px rgba(14,165,233,.45);
  }
}

/* ----------------------------------
   Scope + Reset (only Woo + Blocks)
----------------------------------- */
:where(.woocommerce, .woocommerce-page, .wp-block) * { box-sizing: border-box; }
:where(.woocommerce, .woocommerce-page) { color: var(--wc-text); }

:where(.woocommerce, .woocommerce-page) a { color: var(--wc-primary); text-decoration: none; }
:where(.woocommerce, .woocommerce-page) a:hover { color: var(--wc-primary-600); text-decoration: underline; }

:where(.woocommerce, .woocommerce-page) img { max-width: 100%; height: auto; vertical-align: middle; }
:where(.woocommerce, .woocommerce-page) figure { margin: 0; }

/* ----------------------------------
   Typography (applies to Woo + Blocks inside content)
----------------------------------- */
:where(.woocommerce, .woocommerce-page, .entry-content) {
  font-family: var(--wc-font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(.woocommerce, .woocommerce-page, .entry-content) p { margin: 0 0 var(--wc-spacing-4); }
:where(.woocommerce, .woocommerce-page, .entry-content) h1,
:where(.woocommerce, .woocommerce-page, .entry-content) h2,
:where(.woocommerce, .woocommerce-page, .entry-content) h3,
:where(.woocommerce, .woocommerce-page, .entry-content) h4,
:where(.woocommerce, .woocommerce-page, .entry-content) h5,
:where(.woocommerce, .woocommerce-page, .entry-content) h6 {
  color: var(--wc-text);
  margin: 1.5em 0 .5em;
  line-height: 1.25;
}
:where(.woocommerce, .woocommerce-page, .entry-content) h1 { font-size: clamp(1.875rem, 3vw, 2.5rem); }
:where(.woocommerce, .woocommerce-page, .entry-content) h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
:where(.woocommerce, .woocommerce-page, .entry-content) h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

:where(.woocommerce, .woocommerce-page, .entry-content) ul, 
:where(.woocommerce, .woocommerce-page, .entry-content) ol { padding-left: 1.25em; margin: 0 0 var(--wc-spacing-4); }

:where(.woocommerce, .woocommerce-page, .entry-content) code, 
:where(.woocommerce, .woocommerce-page, .entry-content) pre {
  font-family: var(--wc-font-mono);
  background: var(--wc-surface-alt);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-sm);
}
:where(.woocommerce, .woocommerce-page, .entry-content) code { padding: .2em .4em; font-size: 90%; }
:where(.woocommerce, .woocommerce-page, .entry-content) pre { padding: var(--wc-spacing-4); overflow: auto; }

/* ----------------------------------
   Buttons
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .button,
:where(.woocommerce, .woocommerce-page) button,
:where(.woocommerce, .woocommerce-page) input[type="button"],
:where(.woocommerce, .woocommerce-page) input[type="submit"],
:where(.wp-block) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  font: 500 var(--wc-font-size-base)/1 var(--wc-font-sans);
  color: var(--wc-primary-contrast);
  background: var(--wc-primary);
  border: 1px solid transparent;
  border-radius: var(--wc-radius);
  padding: .7em 1.1em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--wc-shadow);
  transition: background-color .2s ease, transform .02s ease, box-shadow .2s ease;
}
:where(.woocommerce, .woocommerce-page) .button:hover,
:where(.woocommerce, .woocommerce-page) button:hover,
:where(.woocommerce, .woocommerce-page) input[type="submit"]:hover,
:where(.wp-block) .wp-block-button__link:hover { background: var(--wc-primary-600); text-decoration: none; }
:where(.woocommerce, .woocommerce-page) .button:active { transform: translateY(1px); }

/* Secondary / outline */
:where(.woocommerce, .woocommerce-page) .button.alt,
:where(.wp-block) .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wc-primary);
  border-color: var(--wc-primary);
}
:where(.wp-block) .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--wc-primary-contrast); }

/* Disabled */
:where(.woocommerce, .woocommerce-page) .disabled,
:where(.woocommerce, .woocommerce-page) :disabled {
  opacity: .6; cursor: not-allowed; pointer-events: none;
}

/* ----------------------------------
   Forms
----------------------------------- */
:where(.woocommerce, .woocommerce-page) input[type="text"],
:where(.woocommerce, .woocommerce-page) input[type="email"],
:where(.woocommerce, .woocommerce-page) input[type="url"],
:where(.woocommerce, .woocommerce-page) input[type="tel"],
:where(.woocommerce, .woocommerce-page) input[type="number"],
:where(.woocommerce, .woocommerce-page) input[type="password"],
:where(.woocommerce, .woocommerce-page) input[type="search"],
:where(.woocommerce, .woocommerce-page) textarea,
:where(.woocommerce, .woocommerce-page) select,
:where(.wp-block) .wp-block-search__input {
  width: 100%;
  padding: .65em .8em;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-surface);
  color: var(--wc-text);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
:where(.woocommerce, .woocommerce-page) input:focus,
:where(.woocommerce, .woocommerce-page) textarea:focus,
:where(.woocommerce, .woocommerce-page) select:focus,
:where(.wp-block) .wp-block-search__input:focus {
  border-color: var(--wc-primary);
  box-shadow: var(--wc-focus-ring);
}
:where(.woocommerce, .woocommerce-page) label { display: block; margin: 0 0 .4rem; font-weight: 500; }
:where(.woocommerce, .woocommerce-page) .form-row { margin: 0 0 var(--wc-spacing-4); }
:where(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single { height: auto; padding: .55em .8em; border-radius: var(--wc-radius-sm); border-color: var(--wc-border); }

/* ----------------------------------
   Tables
----------------------------------- */
:where(.woocommerce, .woocommerce-page) table.shop_table,
:where(.wp-block) .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius);
  overflow: hidden;
}
:where(.woocommerce, .woocommerce-page) table.shop_table th,
:where(.woocommerce, .woocommerce-page) table.shop_table td,
:where(.wp-block) .wp-block-table table th,
:where(.wp-block) .wp-block-table table td { padding: .9em 1em; border-bottom: 1px solid var(--wc-border); vertical-align: top; }
:where(.woocommerce, .woocommerce-page) table.shop_table thead th,
:where(.wp-block) .wp-block-table table thead th { background: var(--wc-surface-alt); text-align: left; }
:where(.woocommerce, .woocommerce-page) table.shop_table tr:last-child td,
:where(.wp-block) .wp-block-table table tr:last-child td { border-bottom: 0; }

/* ----------------------------------
   WooCommerce Notices (messages, errors, info)
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .woocommerce-message,
:where(.woocommerce, .woocommerce-page) .woocommerce-error,
:where(.woocommerce, .woocommerce-page) .woocommerce-info {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--wc-spacing-4);
  padding: var(--wc-spacing-4);
  border-radius: var(--wc-radius);
  border: 1px solid var(--wc-border);
  background: var(--wc-surface-alt);
  margin: 0 0 var(--wc-spacing-5);
}
:where(.woocommerce, .woocommerce-page) .woocommerce-message { border-color: color-mix(in srgb, var(--wc-success) 35%, var(--wc-border)); }
:where(.woocommerce, .woocommerce-page) .woocommerce-error { border-color: color-mix(in srgb, var(--wc-danger) 35%, var(--wc-border)); }
:where(.woocommerce, .woocommerce-page) .woocommerce-info { border-color: color-mix(in srgb, var(--wc-primary) 35%, var(--wc-border)); }

/* ----------------------------------
   Breadcrumbs
----------------------------------- */
:where(.woocommerce-breadcrumb) {
  font-size: var(--wc-font-size-sm);
  color: var(--wc-text-muted);
  margin: 0 0 var(--wc-spacing-4);
}
:where(.woocommerce-breadcrumb) a { color: inherit; }

/* ----------------------------------
   Product Loop (archives)
----------------------------------- */
:where(.woocommerce, .woocommerce-page) ul.products { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
:where(.woocommerce, .woocommerce-page) ul.products li.product { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); overflow: hidden; box-shadow: var(--wc-shadow); display: flex; flex-direction: column; }
:where(.woocommerce, .woocommerce-page) ul.products li.product a { text-decoration: none; }
:where(.woocommerce, .woocommerce-page) ul.products li.product .woocommerce-loop-product__title { font-size: var(--wc-font-size-base); font-weight: 600; margin: .75rem 1rem 0; color: var(--wc-text); }
:where(.woocommerce, .woocommerce-page) ul.products li.product .price { margin: .5rem 1rem 1rem; font-weight: 600; color: var(--wc-text); }
:where(.woocommerce, .woocommerce-page) ul.products li.product .star-rating { margin: 0 1rem .75rem; }
:where(.woocommerce, .woocommerce-page) ul.products li.product .button { margin: 0 1rem 1rem; }
:where(.woocommerce, .woocommerce-page) ul.products li.product img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; background: var(--wc-surface-alt); }

/* Sale badge */
:where(.woocommerce, .woocommerce-page) .onsale {
  position: absolute; z-index: 2; inset: .6rem .6rem auto auto;
  background: var(--wc-danger); color: #fff; font-weight: 700; font-size: .75rem;
  padding: .35rem .5rem; border-radius: 999px; box-shadow: var(--wc-shadow);
}

/* Pagination */
:where(.woocommerce, .woocommerce-page) .woocommerce-pagination .page-numbers { display: inline-flex; gap: .25rem; align-items: center; }
:where(.woocommerce, .woocommerce-page) .woocommerce-pagination .page-numbers > * { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border-radius: var(--wc-radius-sm); border: 1px solid var(--wc-border); background: var(--wc-surface); }
:where(.woocommerce, .woocommerce-page) .woocommerce-pagination .page-numbers .current { background: var(--wc-primary); color: var(--wc-primary-contrast); border-color: transparent; }

/* ----------------------------------
   Single Product
----------------------------------- */
:where(.woocommerce, .woocommerce-page) div.product { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  :where(.woocommerce, .woocommerce-page) div.product { grid-template-columns: 1.1fr .9fr; align-items: start; }
}
:where(.woocommerce, .woocommerce-page) div.product .images { position: relative; background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); overflow: hidden; }
:where(.woocommerce, .woocommerce-page) div.product .images img { width: 100%; height: auto; display: block; }
:where(.woocommerce, .woocommerce-page) div.product .summary { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); box-shadow: var(--wc-shadow); }
:where(.woocommerce, .woocommerce-page) .product_title { margin-top: 0; }
:where(.woocommerce, .woocommerce-page) .price { font-size: var(--wc-font-size-xl); font-weight: 700; }
:where(.woocommerce, .woocommerce-page) .quantity input.qty { width: 4.5rem; }

/* Tabs */
:where(.woocommerce, .woocommerce-page) .woocommerce-tabs { margin-top: 2rem; }
:where(.woocommerce, .woocommerce-page) .woocommerce-tabs ul.tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--wc-border); padding: 0 0 .5rem; margin: 0 0 1rem; list-style: none; }
:where(.woocommerce, .woocommerce-page) .woocommerce-tabs ul.tabs li a { display: inline-block; padding: .5rem .75rem; border-radius: var(--wc-radius-sm); }
:where(.woocommerce, .woocommerce-page) .woocommerce-tabs ul.tabs li.active a { background: var(--wc-surface-alt); }

/* Related / upsells grid */
:where(.woocommerce, .woocommerce-page) .related ul.products, :where(.woocommerce, .woocommerce-page) .upsells ul.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ----------------------------------
   Cart
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .woocommerce-cart-form { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); box-shadow: var(--wc-shadow); }
:where(.woocommerce, .woocommerce-page) .cart-collaterals .cart_totals { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); box-shadow: var(--wc-shadow); }
:where(.woocommerce, .woocommerce-page) .coupon { display: flex; gap: .5rem; }

/* ----------------------------------
   Checkout
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { :where(.woocommerce, .woocommerce-page) .woocommerce-checkout form.checkout { grid-template-columns: 1fr 1fr; align-items: start; } }
:where(.woocommerce, .woocommerce-page) #customer_details, :where(.woocommerce, .woocommerce-page) #order_review { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); box-shadow: var(--wc-shadow); }
:where(.woocommerce, .woocommerce-page) #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 1rem; }
:where(.woocommerce, .woocommerce-page) #payment .payment_box { background: var(--wc-surface-alt); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); padding: .75rem; }

/* ----------------------------------
   Account Area
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-navigation { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); }
:where(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
:where(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-navigation a { display: block; padding: .5rem .75rem; border-radius: var(--wc-radius-sm); color: var(--wc-text); }
:where(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-navigation .is-active a { background: var(--wc-surface-alt); }
:where(.woocommerce, .woocommerce-page) .woocommerce-MyAccount-content { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); }

/* ----------------------------------
   Ratings / Stars
----------------------------------- */
:where(.woocommerce, .woocommerce-page) .star-rating { --size: 1rem; display: inline-block; font-size: var(--size); line-height: 1; color: #f59e0b; }

/* ----------------------------------
   Search block / product search
----------------------------------- */
:where(.wp-block-search) { display: flex; gap: .5rem; }
:where(.wp-block-search) .wp-block-search__inside-wrapper { display: contents; }
:where(.wp-block-search) .wp-block-search__button { white-space: nowrap; }

/* ----------------------------------
   Gutenberg Block Basics
----------------------------------- */
/* Alignment + content width helpers */
:where(.entry-content) .alignwide { margin-left: max(-5vw, -40px); margin-right: max(-5vw, -40px); }
:where(.entry-content) .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Images / Captions */
:where(.wp-block-image) { margin: 0 0 var(--wc-spacing-4); }
:where(.wp-block-image) img { border-radius: var(--wc-radius); }
:where(.wp-block-image .wp-element-caption) { color: var(--wc-text-muted); font-size: var(--wc-font-size-sm); text-align: center; margin-top: .5rem; }

/* Galleries */
:where(.wp-block-gallery) { gap: .5rem; }
:where(.wp-block-gallery) .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Columns */
:where(.wp-block-columns) { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { :where(.wp-block-columns) { grid-template-columns: var(--wp--style--root--content-size, 1fr) 1fr; } }
:where(.wp-block-column) { min-width: 0; }

/* Cover */
:where(.wp-block-cover) { border-radius: var(--wc-radius); overflow: hidden; }
:where(.wp-block-cover__inner-container) { padding: 3vw; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* Buttons block */
:where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Quote / Pullquote */
:where(.wp-block-quote) { border-left: 4px solid var(--wc-primary); padding-left: 1rem; color: var(--wc-text); }
:where(.wp-block-pullquote) { border-top: 2px solid var(--wc-border); border-bottom: 2px solid var(--wc-border); padding: 1rem 0; text-align: center; font-size: var(--wc-font-size-lg); color: var(--wc-text); }

/* Lists */
:where(.wp-block-list) { margin: 0 0 var(--wc-spacing-4); }

/* Separator & Spacer */
:where(.wp-block-separator) { border: 0; border-top: 1px solid var(--wc-border); margin: 2rem 0; opacity: .7; }
:where(.wp-block-spacer) { display: block; }

/* Table block */
:where(.wp-block-table) table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); overflow: hidden; }
:where(.wp-block-table) th, :where(.wp-block-table) td { padding: .8rem 1rem; border-bottom: 1px solid var(--wc-border); }
:where(.wp-block-table) thead th { background: var(--wc-surface-alt); text-align: left; }

/* Code block */
:where(.wp-block-code) code { display: block; padding: var(--wc-spacing-4); background: var(--wc-surface-alt); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); overflow-x: auto; font-family: var(--wc-font-mono); }

/* File block */
:where(.wp-block-file) { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); }

/* Media & Text */
:where(.wp-block-media-text) { gap: 1rem; }
:where(.wp-block-media-text) .wp-block-media-text__content { padding: 1rem; }

/* Embed (make iframes responsive) */
:where(.wp-block-embed, .wp-block-video, .wp-block-audio, .wp-block-jetpack-video) iframe,
:where(.entry-content) iframe[src*="youtube"],
:where(.entry-content) iframe[src*="vimeo"],
:where(.entry-content) iframe[src*="maps"] {
  max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;
  background: #000;
  border-radius: var(--wc-radius);
}

/* ----------------------------------
   Widgets (minimally)
----------------------------------- */
:where(.widget) { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: var(--wc-spacing-5); }
:where(.widget) .widget-title { margin-top: 0; font-weight: 700; }

/* ----------------------------------
   Utility helpers
----------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ----------------------------------
   Accessibility tweaks
----------------------------------- */
:where(.woocommerce, .woocommerce-page) a:focus,
:where(.woocommerce, .woocommerce-page) button:focus,
:where(.woocommerce, .woocommerce-page) input:focus,
:where(.woocommerce, .woocommerce-page) textarea:focus,
:where(.wp-block) .wp-block-button__link:focus {
  outline: none; box-shadow: var(--wc-focus-ring);
}

/* ----------------------------------
   Print basics
----------------------------------- */
@media print {
  :where(.woocommerce, .woocommerce-page) .button,
  :where(.wp-block) .wp-block-button__link { box-shadow: none !important; background: #000 !important; color: #fff !important; }
  :where(.woocommerce, .woocommerce-page) nav, :where(.woocommerce, .woocommerce-page) .site-header, :where(.woocommerce, .woocommerce-page) .site-footer { display: none !important; }
}