/** Shopify CDN: Minification failed

Line 37:14 Unexpected "{"
Line 37:23 Expected ":"
Line 37:30 Unexpected "{"
Line 42:14 Unexpected "{"
Line 42:23 Expected ":"
Line 55:14 Unexpected "{"
Line 55:23 Expected ":"
Line 60:14 Unexpected "{"
Line 60:23 Expected ":"
Line 61:14 Unexpected "{"
... and 92 more hidden warnings

**/
/* =========================================================================
   SKYLONA — PRODUCT PAGE LUXURY RESTYLE
   ---------------------------------------------------------------------
   This file restyles Dawn's existing, working product-page components
   (gallery, thumbnails, slider, buy box, sticky info) to the SkyLona
   "Apple meets Rolex" aesthetic. It intentionally does NOT touch Dawn's
   structural/behavioral CSS in section-main-product.css — only visual
   tokens (color, spacing, radius, type). The JS (media-gallery.js,
   magnify.js, product-modal.js, product-form.js) is untouched and keeps
   working exactly as before: swipe, zoom, fullscreen, 3D/360°, video.

   Load order: this file loads AFTER section-main-product.css so these
   rules win on equal specificity.
   ========================================================================= */

@import url('skylona-luxury.css');

/* -------------------------------------------------------------------------
   PAGE CANVAS
   ------------------------------------------------------------------------- */

#MainProduct-{{ section.id }} {
  background: var(--skl-color-white);
  font-family: var(--skl-font-body);
}

#MainProduct-{{ section.id }} .product {
  gap: clamp(2rem, 4vw, 4.5rem);
}

/* -------------------------------------------------------------------------
   GALLERY — forced 4:5 aspect ratio
   Dawn sets --ratio / --preview-ratio inline per image (from actual file
   dimensions) in snippets/product-thumbnail.liquid. Custom properties set
   inline still win over external stylesheets on equal property name, so
   !important is required here too — same justified, narrowly-scoped
   pattern as the inventory-dot override below.
   ------------------------------------------------------------------------- */

#MainProduct-{{ section.id }} .product-media-container {
  --ratio: 0.8 !important;        /* 4:5 */
  --preview-ratio: 0.8 !important;
}

#MainProduct-{{ section.id }} .product-media-container .media img,
#MainProduct-{{ section.id }} .product-media-container .media video,
#MainProduct-{{ section.id }} .product-media-container .media model-viewer {
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   GALLERY — refined thumbnails, quiet slider counter, no harsh borders
   ------------------------------------------------------------------------- */

#MainProduct-{{ section.id }} .product__media-item {
  border-radius: var(--skl-radius-md);
  overflow: hidden;
  background: var(--skl-color-surface);
}

#MainProduct-{{ section.id }} .thumbnail {
  border-radius: var(--skl-radius-sm);
  border: 1px solid var(--skl-color-hairline);
  opacity: 0.55;
  transition: opacity var(--skl-duration-base) var(--skl-ease),
              border-color var(--skl-duration-base) var(--skl-ease);
}

#MainProduct-{{ section.id }} .thumbnail:hover {
  opacity: 0.85;
}

#MainProduct-{{ section.id }} .thumbnail[aria-current='true'] {
  opacity: 1;
  border-color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .thumbnail:focus-visible {
  outline: 2px solid var(--skl-color-emerald);
  outline-offset: 2px;
}

#MainProduct-{{ section.id }} .slider-counter {
  font-family: var(--skl-font-mono);
  font-size: var(--skl-size-micro);
  letter-spacing: 0.05em;
  color: var(--skl-color-ink-soft);
}

#MainProduct-{{ section.id }} .slider-button {
  background: var(--skl-color-white);
  border: 1px solid var(--skl-color-hairline);
  box-shadow: none;
}

#MainProduct-{{ section.id }} .slider-button:hover {
  border-color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .slider-button .icon {
  color: var(--skl-color-ink);
}

/* Loading shimmer for lazy-loaded media — calm, not flashy */
#MainProduct-{{ section.id }} .product__media-item img {
  background: linear-gradient(
    100deg,
    var(--skl-color-surface) 30%,
    #efefec 50%,
    var(--skl-color-surface) 70%
  );
}

/* XR / 360° launch button restyled to match luxury button system */
#MainProduct-{{ section.id }} .product__xr-button {
  background: var(--skl-color-white);
  color: var(--skl-color-ink);
  border: 1px solid var(--skl-color-hairline);
  border-radius: var(--skl-radius-sm);
  font-family: var(--skl-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--skl-size-micro);
}

#MainProduct-{{ section.id }} .product__xr-button:hover {
  border-color: var(--skl-color-ink);
}

/* -------------------------------------------------------------------------
   PRODUCT INFO COLUMN — sticky buy box
   ------------------------------------------------------------------------- */

#MainProduct-{{ section.id }} .product__info-wrapper {
  padding-top: 0;
}

@media screen and (min-width: 990px) {
  #MainProduct-{{ section.id }} .product__column-sticky {
    top: var(--skl-sticky-offset);
  }
}

#MainProduct-{{ section.id }} .product__title h1,
#MainProduct-{{ section.id }} .product__title {
  font-family: var(--skl-font-display);
  font-size: var(--skl-size-h1);
  font-weight: 400;
  letter-spacing: var(--skl-tracking-tight);
  color: var(--skl-color-ink);
  line-height: 1.1;
}

/* First word of the product title, and first word of the brand/vendor
   line, rendered in emerald — the rest stays ink black. Shared class so
   both pick up the same accent color from one place. */
#MainProduct-{{ section.id }} .skl-title-accent {
  color: var(--skl-color-emerald);
}

#MainProduct-{{ section.id }} .product__text.caption-with-letter-spacing {
  font-family: var(--skl-font-body);
  font-size: var(--skl-size-micro);
  font-weight: 600;
  letter-spacing: var(--skl-tracking-wide);
  color: var(--skl-color-ink-soft);
}

#MainProduct-{{ section.id }} .skl-brand-name.product__text.caption-with-letter-spacing {
  color: var(--skl-color-ink-soft);
}

/* Price block — the one place emerald can carry real weight */
#MainProduct-{{ section.id }} .price {
  font-family: var(--skl-font-body);
  color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .price__container {
  gap: 0.6rem;
}

#MainProduct-{{ section.id }} .price--on-sale .price-item--regular {
  color: var(--skl-color-ink-soft);
}

#MainProduct-{{ section.id }} .price__sale .price-item--last {
  color: var(--skl-color-emerald);
  font-weight: 700;
}

#MainProduct-{{ section.id }} .price__badge-sale,
#MainProduct-{{ section.id }} .price__badge-sold-out {
  background: var(--skl-color-emerald-tint);
  color: var(--skl-color-emerald-dark);
  border: none;
  border-radius: var(--skl-radius-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Variant picker — large, deliberate tap targets */
#MainProduct-{{ section.id }} .product-form__input .form__label {
  font-size: var(--skl-size-small);
  font-weight: 600;
  color: var(--skl-color-ink);
  letter-spacing: 0.02em;
}

#MainProduct-{{ section.id }} fieldset.product-form__input input[type='radio'] + label {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--skl-radius-sm);
  border: 1px solid var(--skl-color-hairline-strong);
  color: var(--skl-color-ink);
  font-family: var(--skl-font-body);
}

#MainProduct-{{ section.id }} fieldset.product-form__input input[type='radio']:checked + label {
  border-color: var(--skl-color-ink);
  background: var(--skl-color-ink);
  color: var(--skl-color-white);
}

#MainProduct-{{ section.id }} fieldset.product-form__input input[type='radio']:focus-visible + label {
  outline: 2px solid var(--skl-color-emerald);
  outline-offset: 2px;
}

/* Quantity selector — large mobile-first tap targets */
#MainProduct-{{ section.id }} .quantity {
  border: 1px solid var(--skl-color-hairline-strong);
  border-radius: var(--skl-radius-sm);
  min-height: 52px;
}

#MainProduct-{{ section.id }} .quantity__button {
  width: 48px;
}

/* Primary buy buttons restyled to luxury system, large mobile-first tap targets.
   Add to Cart = emerald background, black text.
   Buy Now (Shopify's unbranded dynamic checkout button) = black background, white text.
   NOTE: if Shop Pay / PayPal / other BRANDED express-checkout buttons are
   enabled in Shopify Admin → Payments, those render inside a sandboxed
   iframe Shopify controls directly — CSS cannot restyle them. This only
   reaches the generic "unbranded" dynamic checkout button. */
#MainProduct-{{ section.id }} .product-form__buttons .button {
  min-height: 56px;
  border-radius: var(--skl-radius-sm);
  font-family: var(--skl-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: var(--skl-size-body);
}

#MainProduct-{{ section.id }} .product-form__submit {
  background: var(--skl-color-emerald);
  border-color: var(--skl-color-emerald);
  color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .product-form__submit:hover {
  background: var(--skl-color-emerald-dark);
  border-color: var(--skl-color-emerald-dark);
  color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .product-form__submit .loading-overlay__spinner svg {
  color: var(--skl-color-ink);
}

#MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded {
  border-radius: var(--skl-radius-sm) !important;
  min-height: 56px !important;
  background: var(--skl-color-ink) !important;
  color: var(--skl-color-white) !important;
  border-color: var(--skl-color-ink) !important;
}

#MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded:hover {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
}

/* Accordions (description, custom tabs) — hairline, no shadow boxes */
#MainProduct-{{ section.id }} .accordion {
  border-color: var(--skl-color-hairline);
}

#MainProduct-{{ section.id }} .accordion summary {
  font-family: var(--skl-font-body);
  font-weight: 600;
  font-size: var(--skl-size-body);
  color: var(--skl-color-ink);
  min-height: 56px; /* large tap target */
}

/* -------------------------------------------------------------------------
   MOBILE: comfortable single-column stacking, no horizontal scroll leaks
   ------------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  #MainProduct-{{ section.id }} {
    overflow-x: hidden;
  }

  #MainProduct-{{ section.id }} .product__info-wrapper {
    padding-inline: var(--skl-gutter);
  }

  #MainProduct-{{ section.id }} .product-form__buttons .button {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #MainProduct-{{ section.id }} .thumbnail,
  #MainProduct-{{ section.id }} .product__media-item img {
    transition: none;
  }
}