/** Shopify CDN: Minification failed

Line 201:0 Unexpected "}"

**/
.product-accordion {
  border-radius: 0px;
  overflow: hidden;
  max-width: 800px;
  margin: 30px auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  color: #333;
  padding: 15px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  outline: none;
  font-weight: 600;
}

.accordion-header:hover {
  background-color: #f5f5f5;
}

.accordion-content {
  padding: 15px;
  background-color: #fff;
  display: none;
  animation: slide-down 0.3s ease;
}

.accordion-header[aria-expanded="true"] + .accordion-content {
  display: block;
}

.icon {
  font-weight: bold;
  transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}

/* Animation */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media screen and (min-width: 990px) {
    .title, .title-wrapper-with-link {
        margin: 0;
    }
}


/* main product custom*/

.main-product-custom{
  max-width: 1200px;
  padding: 30px 3rem;
}
/* Typography reset — override Dawn body font-size inflation */
html { font-size: 16px; }
body {
  font-family: var(--dr-font-body);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}/* ─── Global link reset ─── */
/* Make all links inherit their parent's color and font-size by default.
   Individual components can then style their own links explicitly. */
a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
a:hover { text-decoration: none; }

/* ─── Product card links ─── */
/* Both the image-wrapper anchor and the name anchor inside .dr-pcard
   should use the dark navy brand text color. Underline only on hover for the name. */
.dr-pcard a,
.dr-pcard__img-wrap a,
.dr-pcard__name a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: inherit;
}
.dr-pcard__name a:hover {
  color: var(--dr-teal, #0086C0);
}

/* ───────────────────────────────────────────── */
/*  UNIFIED PRIMARY BUTTON                        */
/*  Navy bg, white text, 8px corners, 48px tall   */
/* ───────────────────────────────────────────── */
.dr-btn-primary,
.dr-btn.dr-btn--primary,
.dr-pcard__atc,
.dr-mobile-menu__cta,
.dr-email-capture__submit,
.dr-cart-drawer__checkout-btn,
button[name="add"],
.product-form__submit,
.shopify-payment-button__button--unbranded {
    display: inline-flex;
      align-items: center;
        justify-content: center;
          height: 48px;
            min-height: 48px;
              padding: 0 24px;
                background: var(--color-text-primary); /* #0B2A3C navy */
                  color: #FFFFFF;
                    border: 0;
                      border-radius: 8px;
                        font-family: var(--dr-font-body);
                          font-size: 15px;
                            font-weight: 600;
                              line-height: 1;
                                letter-spacing: 0;
                                  text-transform: none;
                                    text-decoration: none;
                                      cursor: pointer;
                                        transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
                                          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
                                          }
                                          .dr-btn-primary:hover,
                                          .dr-btn.dr-btn--primary:hover,
                                          .dr-pcard__atc:hover,
                                          .dr-mobile-menu__cta:hover,
                                          .dr-email-capture__submit:hover,
                                          .dr-cart-drawer__checkout-btn:hover,
                                          button[name="add"]:hover,
                                          .product-form__submit:hover,
                                          .shopify-payment-button__button--unbranded:hover {
                                              background: #11385A; /* navy +10% lighter */
                                                transform: translateY(-1px);
                                                  box-shadow: 0 4px 12px rgba(11, 42, 60, 0.18);
                                                  }
                                                  .dr-btn-primary:active,
                                                  .dr-btn.dr-btn--primary:active,
                                                  .dr-pcard__atc:active,
                                                  .dr-mobile-menu__cta:active,
                                                  .dr-email-capture__submit:active,
                                                  .dr-cart-drawer__checkout-btn:active {
                                                      transform: translateY(0);
                                                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
                                                        }
                                                        .dr-btn-primary:focus-visible,
                                                        .dr-btn.dr-btn--primary:focus-visible,
                                                        .dr-pcard__atc:focus-visible,
                                                        .dr-mobile-menu__cta:focus-visible,
                                                        .dr-email-capture__submit:focus-visible,
                                                        .dr-cart-drawer__checkout-btn:focus-visible {
                                                            outline: 2px solid var(--color-text-primary);
                                                              outline-offset: 3px;
                                                              }

                                                              /* ───────────────────────────────────────────── */
                                                              /*  Accessible gold — skip-to-content override    */
                                                              /* ───────────────────────────────────────────── */
                                                              .skip-to-content-link,
                                                              .skip-to-content-link.button {
                                                                  background: var(--color-gold);
                                                                    color: var(--color-gold-fg);
                                                                      border-radius: 8px;
                                                                        padding: 12px 20px;
                                                                          font-size: 14px;
                                                                            font-weight: 600;
                                                                              letter-spacing: 0;
                                                                              }
                                                                              .skip-to-content-link:focus,
                                                                              .skip-to-content-link:hover {
                                                                                  background: var(--color-gold-hover);
                                                                                  }

}

/* Unified button — force override with !important */
.dr-btn-primary,
.dr-btn.dr-btn--primary,
.dr-btn.dr-btn--primary.dr-btn--lg,
.dr-pcard__atc,
.dr-mobile-menu__cta,
.dr-email-capture__submit,
.dr-cart-drawer__checkout-btn,
button[name="add"],
.product-form__submit,
.shopify-payment-button__button--unbranded {
    background: var(--color-text-primary) !important;
      background-image: none !important;
        color: #FFFFFF !important;
          border: 0 !important;
            border-radius: 8px !important;
              height: 48px !important;
                min-height: 48px !important;
                  padding: 0 24px !important;
                    font-size: 15px !important;
                      font-weight: 600 !important;
                        text-transform: none !important;
                          letter-spacing: 0 !important;
                          }
                          .dr-btn-primary:hover,
                          .dr-btn.dr-btn--primary:hover,
                          .dr-btn.dr-btn--primary.dr-btn--lg:hover,
                          .dr-pcard__atc:hover,
                          .dr-mobile-menu__cta:hover,
                          .dr-email-capture__submit:hover,
                          .dr-cart-drawer__checkout-btn:hover,
                          button[name="add"]:hover,
                          .product-form__submit:hover,
                          .shopify-payment-button__button--unbranded:hover {
                            background: #11385A !important;
                              color: #FFFFFF !important;
                              }
                              /* Skip-to-content — force override */
                              .skip-to-content-link,
                              .skip-to-content-link.button {
                                background: var(--color-gold) !important;
                                  background-image: none !important;
                                    color: var(--color-gold-fg) !important;
                                      border-radius: 8px !important;
                                        padding: 12px 20px !important;
                                          font-size: 14px !important;
                                            font-weight: 600 !important;
                                              letter-spacing: 0 !important;
                                                height: auto !important;
                                                  min-height: 0 !important;
                                                  }
                                                  .skip-to-content-link:focus,
                                                  .skip-to-content-link:hover,
                                                  .skip-to-content-link.button:focus,
                                                  .skip-to-content-link.button:hover {
                                                      background: var(--color-gold-hover) !important;
                                                        color: var(--color-gold-fg) !important;
                                                        }

/* High-specificity override — beats inline <style> rules like .hero-actions .dr-btn--primary */
.dr-btn.dr-btn--primary.dr-btn--primary,
.dr-btn.dr-btn--primary.dr-btn--lg.dr-btn--primary,
.hero-actions .dr-btn--primary.dr-btn--primary,
.dr-email-capture__submit.dr-email-capture__submit,
.dr-email-capture .dr-btn--primary.dr-btn--primary {
  background: #009CDE !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #009CDE !important;
  border-radius: 999px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important;
}
.dr-btn.dr-btn--primary.dr-btn--primary:hover,
.dr-btn.dr-btn--primary.dr-btn--lg.dr-btn--primary:hover,
.hero-actions .dr-btn--primary.dr-btn--primary:hover,
.dr-email-capture__submit.dr-email-capture__submit:hover,
.dr-email-capture .dr-btn--primary.dr-btn--primary:hover {
  background: #0086C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #0086C0 !important;
  box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important;
  transform: translateY(-1px) !important;
}

/* ============================================== */
/* Reposition Shopify Chat widget so it doesn't overlap PDP thumbnails */
/* ============================================== */
inbox-online-store-chat#ShopifyChat { left: auto !important; right: 24px !important; bottom: 24px !important; }
@media (max-width: 768px) { inbox-online-store-chat#ShopifyChat { right: 16px !important; bottom: 80px !important; } }

/* Hero headline — brand heading typography */
.hero-title {
font-family: var(--font-heading, 'Avenir Next LT Pro', 'Avenir Next', 'Segoe UI', system-ui, sans-serif) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
}


/* Hero description — clean secondary text on navy (replaces beige) */
.hero-desc {
color: rgba(255, 255, 255, 0.78) !important;
}
  

/* Promo code chip — make it a tappable copy button */
button.dr-promo-banner__code {
border: none;
cursor: pointer;
font: inherit;
color: inherit;
transition: transform 0.15s ease, background 0.15s ease;
position: relative;
}
button.dr-promo-banner__code:hover {
background: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
button.dr-promo-banner__code:active {
transform: translateY(0);
}
button.dr-promo-banner__code:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9);
outline-offset: 2px;
}
.dr-promo-banner__copied {
display: inline-block;
margin-left: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
transform: translateY(2px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.dr-promo-banner__copied.is-visible {
opacity: 1;
transform: translateY(0);
}


/* Product card hover — wake up the cards with snappier 200ms response */
.dr-pcard {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out !important;
  }
  .dr-pcard__img-wrap {
  overflow: hidden !important;
  }
  .dr-pcard__img-wrap img {
  transition: transform 200ms ease-out !important;
  will-change: transform;
  }
.dr-pcard:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  }
  .dr-pcard:hover .dr-pcard__img-wrap img {
  transform: scale(1.03) !important;
  }
  @media (prefers-reduced-motion: reduce) {
  .dr-pcard, .dr-pcard__img-wrap img { transition: none !important; }
  .dr-pcard:hover { transform: none !important; }
  .dr-pcard:hover .dr-pcard__img-wrap img { transform: none !important; }
  }


/* Mobile header rebuild — hamburger left, logo center, search+cart right, 56px row */
@media (max-width: 767px) {
  .dr-header__container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  }
  .dr-header__container > nav {
  display: none !important;
  }
  .dr-header__actions {
  display: contents !important;
  }
  .dr-header__mobile-toggle {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: inherit !important;
  }
  .dr-header__mobile-toggle svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  }
  .dr-header__logo {
  order: 2 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 8px !important;
  min-width: 0 !important;
  }
  .dr-header__search-btn {
  order: 3 !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  }
  .dr-header__cart-btn {
  order: 4 !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  }
  }


/* Mobile header — corrections: absolute-center logo, push search/cart right */
@media (max-width: 767px) {
.dr-header__container {
position: relative !important;
gap: 0 !important;
}
.dr-header__logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
flex: 0 0 auto !important;
max-width: 60% !important;
margin: 0 !important;
pointer-events: auto !important;
}
.dr-header__search-btn {
margin-left: auto !important;
}
}
  

/* ============================================================
   Mobile announcement bar — auto-scrolling marquee
   ============================================================ */
@keyframes dr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .dr-announce {
    padding: 10px 0 !important;
    font-size: 12px !important;
  }

  /* Edge fade — prevents hard text clipping at viewport edges */
  .dr-announce::before,
  .dr-announce::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
  }
  .dr-announce::before {
    left: 0;
    background: linear-gradient(to right, #0A1628 0%, rgba(10, 22, 40, 0) 100%);
  }
  .dr-announce::after {
    right: 0;
    background: linear-gradient(to left, #0A1628 0%, rgba(10, 22, 40, 0) 100%);
  }

  .dr-announce__items {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 28px !important;
    width: max-content !important;
    padding: 0 !important;
    animation: dr-marquee var(--dr-announce-duration, 30s) linear infinite;
    will-change: transform;
  }

  /* Pause on hover, focus, or class toggle (e.g. touchstart) */
  .dr-announce:hover .dr-announce__items,
  .dr-announce:focus-within .dr-announce__items,
  .dr-announce__items.is-paused {
    animation-play-state: paused;
  }

  .dr-announce__item,
  .dr-announce__sep {
    flex-shrink: 0 !important;
  }

  /* Slightly larger separator dot for the wider mobile gap */
  .dr-announce__sep {
    width: 4px !important;
    height: 4px !important;
  }
}

/* Reduced-motion fallback: static, wrapped, clones hidden */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .dr-announce__items {
    animation: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: auto !important;
    gap: 6px 14px !important;
    padding: 2px 12px !important;
  }
  .dr-announce__items .dr-announce__clone {
    display: none !important;
  }
}


/* =====================================================================
   ANNOUNCEMENT BAR — MOBILE MARQUEE HARDENING (UI Surgeon, 2026-04-25)
   Belt-and-suspenders: ensures clones render on mobile across all
   browser cascade states, tightens timing for readability, widens
   edge-fades for cleaner optical handoff. Appended after all earlier
   rules so it wins on cascade order without specificity escalation.
   ===================================================================== */

:root {
  --dr-announce-bg: #0A1628;
}

@media (max-width: 767px) {
  /* 1. Guarantee clones render on mobile across all cascade states. */
  .dr-announce__items .dr-announce__clone {
    display: inline-flex !important;
  }
  .dr-announce__sep.dr-announce__clone {
    display: inline-block !important;
  }

  /* 2. Tighten marquee timing to validated 22 px/s reading pace.
        Track ≈ 1244 px on 390 px viewport → 1244 / 22 ≈ 28 s loop. */
  .dr-announce__items {
    animation-duration: 28s !important;
  }

  /* 3. Wider, smoother edge-fades (24 → 32 px) using bg token. */
  .dr-announce::before,
  .dr-announce::after {
    width: 32px !important;
  }
  .dr-announce::before {
    background: linear-gradient(to right, var(--dr-announce-bg) 0%, rgba(10, 22, 40, 0) 100%) !important;
  }
  .dr-announce::after {
    background: linear-gradient(to left,  var(--dr-announce-bg) 0%, rgba(10, 22, 40, 0) 100%) !important;
  }
}

/* 4. Smallest viewports (≤360 px): tighten gap from 28 → 20 px. */
@media (max-width: 360px) {
  .dr-announce__items {
    gap: 20px !important;
  }
}


/* ============================================================
   UI SURGEON — Block 2 (2025_04_25): Back-to-Top + Focus Rings
   ============================================================ */

/* ---------- 1. Back-to-Top button restyle ----------
   Spec:
   - Only visible after 600px scroll (handled in JS via .is-visible)
   - Background: var(--color-gold) [#A9894F — accessible AA]
   - Icon: white Lucide ArrowUp (replaces chevron-up)
   - Fade-in: 200ms
   - White-on-gold contrast: 3.39:1 (passes WCAG 1.4.11 non-text)
*/
#dr-back-to-top.dr-back-to-top {
  background: var(--color-gold) !important;
  color: var(--color-gold-fg) !important;
  transition:
    opacity 200ms ease,
    visibility 200ms ease,
    transform 200ms ease,
    background-color 200ms ease !important;
  box-shadow: 0 4px 12px rgba(169, 137, 79, 0.28) !important;
}

#dr-back-to-top.dr-back-to-top:hover {
  background: var(--color-gold-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(146, 117, 57, 0.36) !important;
}

#dr-back-to-top.dr-back-to-top:active {
  transform: translateY(0) !important;
}

/* Hide existing chevron SVG (keeps ARIA intact) */
#dr-back-to-top.dr-back-to-top > svg {
  display: none !important;
}

/* Inject Lucide ArrowUp via CSS mask */
#dr-back-to-top.dr-back-to-top::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27currentColor%27 stroke-width%3D%272.25%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M12 19V5%27%2F%3E%3Cpath d%3D%27m5 12 7-7 7 7%27%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27currentColor%27 stroke-width%3D%272.25%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M12 19V5%27%2F%3E%3Cpath d%3D%27m5 12 7-7 7 7%27%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  #dr-back-to-top.dr-back-to-top { transition: none !important; }
  #dr-back-to-top.dr-back-to-top:hover { transform: none !important; }
}

/* ---------- 2. Global :focus-visible ring ----------
   - 2px solid var(--dr-teal-on-light) [#0E7490, 4.74:1 on white]
   - 2px offset
   - Keyboard-only (mouse clicks suppressed by :focus-visible)
*/
:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--dr-teal-on-light) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.18) !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-radius: inherit;
}
/* ============== END Block 2 ============== */


/* ============================================================
   UI SURGEON — Block 3 (2025_04_25): Selection + Newsletter Input
   ============================================================ */

/* ---------- 1. Custom text-selection style ----------
   Spec: soft teal background + navy text
   - Background: var(--dr-teal-soft) [#CFFAFE]
   - Text: var(--color-text-primary) [#0B2A3C]
   - Contrast: 12.27:1 — exceeds WCAG AAA (7:1)
*/
::selection {
  background-color: var(--dr-teal-soft);
  color: var(--color-text-primary);
  text-shadow: none;
}
::-moz-selection {
  background-color: var(--dr-teal-soft);
  color: var(--color-text-primary);
  text-shadow: none;
}

/* ---------- 2. Newsletter / email-capture input restyle ----------
   Spec: 1px border, 8px corners, 48px height, muted placeholder, teal focus
*/
.dr-email-capture__input,
.newsletter-form__field-wrapper input[type="email"],
.newsletter-form input[type="email"] {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(207, 250, 254, 0.22) !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;
  font: 400 15px/1 "DM Sans", -apple-system, system-ui, sans-serif !important;
  box-shadow: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

.dr-email-capture__input::placeholder,
.newsletter-form__field-wrapper input[type="email"]::placeholder,
.newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.dr-email-capture__input:hover,
.newsletter-form__field-wrapper input[type="email"]:hover,
.newsletter-form input[type="email"]:hover {
  border-color: rgba(207, 250, 254, 0.40) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.dr-email-capture__input:focus,
.dr-email-capture__input:focus-visible,
.newsletter-form__field-wrapper input[type="email"]:focus,
.newsletter-form__field-wrapper input[type="email"]:focus-visible,
.newsletter-form input[type="email"]:focus,
.newsletter-form input[type="email"]:focus-visible {
  outline: none !important;
  border-color: var(--dr-teal-light) !important;
  background-color: rgba(34, 211, 238, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22) !important;
}
/* ============== END Block 3 ============== */


/* ============================================================
   UI SURGEON — Block 3.1 (2025_04_25): Specificity bump for newsletter input
   The section.email-capture inline style uses compound selectors with
   !important. This block uses higher-specificity selectors to win cleanly.
   ============================================================ */
.dr-email-capture .dr-email-capture__input,
.dr-email-capture input[type="email"].dr-email-capture__input,
.dr-email-capture form input[type="email"],
form.dr-email-capture__form input[type="email"],
.newsletter-form .newsletter-form__field-wrapper input[type="email"],
section.dr-email-capture input[type="email"] {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(207, 250, 254, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;
  font: 400 15px/1 "DM Sans", -apple-system, system-ui, sans-serif !important;
  box-shadow: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

.dr-email-capture .dr-email-capture__input::placeholder,
.dr-email-capture input[type="email"]::placeholder,
form.dr-email-capture__form input[type="email"]::placeholder,
.newsletter-form .newsletter-form__field-wrapper input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.dr-email-capture .dr-email-capture__input:hover,
.dr-email-capture input[type="email"]:hover,
form.dr-email-capture__form input[type="email"]:hover {
  border-color: rgba(207, 250, 254, 0.40) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.dr-email-capture .dr-email-capture__input:focus,
.dr-email-capture .dr-email-capture__input:focus-visible,
.dr-email-capture input[type="email"]:focus,
.dr-email-capture input[type="email"]:focus-visible,
form.dr-email-capture__form input[type="email"]:focus,
form.dr-email-capture__form input[type="email"]:focus-visible {
  outline: none !important;
  border-color: var(--dr-teal-light) !important;
  background-color: rgba(34, 211, 238, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22) !important;
}
/* ============== END Block 3.1 ============== */


/* ============================================================
   UI SURGEON — Block 4 (2025_04_25): Border-Radius Normalization
   Spec: 4 / 8 / 12 / 9999px (tiny / button-input-card / large / pill)
   This block normalizes off-spec radii inline-styled in section files.
   ============================================================ */

/* ---------- 8px tier (buttons/inputs/small cards) ---------- */
.custom-grid__item,
.dr-sub-details-inline,
.dr-hero__cta,
.dr-hero .button--primary,
.hero__cta-primary,
section[class*="hero"] .button--primary,
.dr-footer__newsletter-input,
input.dr-footer__newsletter-input {
  border-radius: 8px !important;
}

/* ---------- 12px tier (large cards/dropdowns) ---------- */
.dr-pcard,
article.dr-pcard,
.dr-search-overlay__panel,
.dr-categories__link,
a.dr-categories__link,
.dr-diff-card {
  border-radius: 12px !important;
}

/* ---------- 4px tier (tiny elements: badges, code chips, progress) ---------- */
.dr-promo-banner__code,
.dr-cart-drawer__item-sub-badge,
.dr-cart-drawer__item-qty {
  border-radius: 4px !important;
}

/* ---------- 9999px tier (pills/avatars only) ---------- */
.dr-guarantee__badge {
  border-radius: 9999px !important;
}
/* ============== END Block 4 ============== */

/* ============================================================
   UI SURGEON — Block 5 (2025_04_25): Skeleton Loaders
   Subtle shimmer placeholders for product cards and cart drawer.
   ============================================================ */

/* ---------- Shimmer animation (single source of truth) ---------- */
@keyframes drSkeletonShimmer {
  0%   { background-position: -468px 0; }
  100% { background-position:  468px 0; }
}

/* Base skeleton primitive — apply to any block that should pulse */
.dr-skeleton,
.dr-skeleton-block {
  position: relative;
  overflow: hidden;
  background-color: #E5E7EB;
  background-image: linear-gradient(
    90deg,
    #E5E7EB 0%,
    #F3F4F6 50%,
    #E5E7EB 100%
  );
  background-size: 936px 100%;
  background-repeat: no-repeat;
  animation: drSkeletonShimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.dr-skeleton-block { border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .dr-skeleton,
  .dr-skeleton-block,
  .dr-pcard__img-wrap:not(.is-loaded)::before,
  [data-cart-loading]:not([hidden]) ~ * .dr-cart-drawer__item-skeleton {
    animation: none !important;
  }
}

/* ---------- 1. Product card image skeleton ----------
   Show a shimmer behind the image until it has loaded.
   The .dr-pcard__media wraps the <img>. Mark it ".is-loaded" via JS
   when the image fires onload (added below). Until then the ::before
   pseudo paints a shimmer that sits beneath the (transparent) image.
*/
.dr-pcard__img-wrap,
.dr-pcard__media {
  position: relative;
  background-color: #E5E7EB;
}

.dr-pcard__img-wrap:not(.is-loaded)::before,
.dr-pcard__media:not(.is-loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #E5E7EB;
  background-image: linear-gradient(
    90deg,
    #E5E7EB 0%,
    #F3F4F6 50%,
    #E5E7EB 100%
  );
  background-size: 936px 100%;
  animation: drSkeletonShimmer 1.4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.dr-pcard__img-wrap.is-loaded::before,
.dr-pcard__media.is-loaded::before {
  opacity: 0;
  animation: none;
  transition: opacity 280ms ease;
}

.dr-pcard__img-wrap img,
.dr-pcard__media img {
  position: relative;
  z-index: 1;
}

/* ---------- 2. Cart drawer skeleton items ----------
   When [data-cart-loading] is active (no [hidden] attr), the existing
   markup paints the skeleton via the spinner overlay AND we add
   skeleton rows to communicate the line-item shape.
*/
[data-cart-loading]:not([hidden]) {
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  z-index: 10;
}

[data-cart-loading]:not([hidden]) .dr-cart-drawer__spinner {
  display: none; /* hide the existing spinner — replaced by skeletons */
}

[data-cart-loading]:not([hidden])::before,
[data-cart-loading]:not([hidden])::after {
  content: "";
  display: grid;
  grid-template-columns: 72px 1fr 24px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 12px;
  height: 96px;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
  /* paint as a single skeleton row using box-shadow trick + bg layers */
  background:
    /* thumbnail block */
    linear-gradient(#E5E7EB, #E5E7EB) 0 50% / 72px 72px no-repeat,
    /* title line */
    linear-gradient(#E5E7EB, #E5E7EB) 84px 28px / 60% 14px no-repeat,
    /* price line */
    linear-gradient(#E5E7EB, #E5E7EB) 84px 56px / 35% 12px no-repeat,
    /* shimmer */
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%) 0 0 / 936px 100% repeat-x;
  background-color: transparent;
  animation: drSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* ---------- 3. Generic in-flight content blocks ----------
   Any explicit skeleton element placed by section files
*/
.dr-skeleton-line {
  display: block;
  height: 12px;
  margin: 8px 0;
  border-radius: 4px;
  background-color: #E5E7EB;
  background-image: linear-gradient(90deg, #E5E7EB, #F3F4F6, #E5E7EB);
  background-size: 936px 100%;
  animation: drSkeletonShimmer 1.4s ease-in-out infinite;
}
.dr-skeleton-line--sm { height: 10px; width: 40%; }
.dr-skeleton-line--md { height: 14px; width: 70%; }
.dr-skeleton-line--lg { height: 18px; width: 100%; }
.dr-skeleton-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #E5E7EB;
  background-image: linear-gradient(90deg, #E5E7EB, #F3F4F6, #E5E7EB);
  background-size: 936px 100%;
  animation: drSkeletonShimmer 1.4s ease-in-out infinite;
}
/* ============== END Block 5 (CSS) ============== */

/* ---------- 4. JS hook: mark images as loaded ----------
   Lives in the script tag below — kept in CSS file is not possible.
   See dr-skeleton-init in custom.css companion (handled inline). */

/* === DR. ROBAINA AESTHETIC DIRECTOR — FOUNDATION + TYPOGRAPHY (Phase 1) === */ :root { --dr-e-display:'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif; --dr-e-body:'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif; --dr-e-ink:#020617; --dr-e-ink-2:#0B2A3C; --dr-e-ink-3:#3A4F5E; --dr-e-ink-4:#6F7E8A; --dr-e-bone:#F5F1E8; --dr-e-cream:#FBF8F2; --dr-e-paper:#FFFFFF; --dr-e-line:#E8E2D2; --dr-e-line-2:#D8D0BC; --dr-e-teal:#0E7490; --dr-e-teal-2:#155E75; --dr-e-teal-3:#0891B2; --dr-e-gold:#A9894F; --dr-e-gold-2:#927539; --dr-e-shadow-sm:0 1px 2px rgba(2,6,23,.04),0 1px 1px rgba(2,6,23,.03); --dr-e-shadow-md:0 2px 4px rgba(2,6,23,.04),0 4px 12px rgba(2,6,23,.06); --dr-e-shadow-lg:0 4px 8px rgba(2,6,23,.04),0 16px 32px rgba(2,6,23,.08); --dr-e-shadow-xl:0 12px 24px rgba(2,6,23,.06),0 32px 64px rgba(2,6,23,.12); --dr-e-r-sm:6px; --dr-e-r-md:10px; --dr-e-r-lg:18px; --dr-e-r-xl:28px; --dr-e-r-pill:9999px; --dr-e-s-1:4px; --dr-e-s-2:8px; --dr-e-s-3:12px; --dr-e-s-4:16px; --dr-e-s-5:24px; --dr-e-s-6:32px; --dr-e-s-7:48px; --dr-e-s-8:64px; --dr-e-s-9:96px; --dr-e-s-10:128px; --dr-e-dur-fast:150ms; --dr-e-dur-base:250ms; --dr-e-dur-slow:400ms; --dr-e-ease-out:cubic-bezier(.16,1,.3,1); --dr-e-ease-in:cubic-bezier(.7,0,.84,0); --dr-e-ease-std:cubic-bezier(.4,0,.2,1); }

/* =========================================================
   DR. ROBAINA — AESTHETIC SYSTEM v1
   Block 1: Foundation tokens + Typography + Color refinement
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand color system */
  --dr-e-navy:      #0B2A3C;
  --dr-e-navy-700:  #133349;
  --dr-e-navy-500:  #1F4A66;
  --dr-e-ink:       #020617;
  --dr-e-ink-soft:  #1E293B;
  --dr-e-teal:      #0E7490;
  --dr-e-teal-600:  #0B5F77;
  --dr-e-teal-300:  #5BA9BD;
  --dr-e-gold:      #A9894F;
  --dr-e-gold-600:  #8E7140;
  --dr-e-gold-300:  #C9B587;
  --dr-e-bone:      #F5F1E8;
  --dr-e-cream:     #FBF8F2;
  --dr-e-paper:     #FFFFFF;
  --dr-e-line:      rgba(11,42,60,0.12);
  --dr-e-line-soft: rgba(11,42,60,0.06);

  /* Typography */
  --dr-e-font-display: 'Avenir Next LT Pro', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --dr-e-font-body:    'Avenir Next LT Pro', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  /* Spacing scale */
  --dr-e-s1: 4px;
  --dr-e-s2: 8px;
  --dr-e-s3: 12px;
  --dr-e-s4: 16px;
  --dr-e-s5: 24px;
  --dr-e-s6: 32px;
  --dr-e-s7: 48px;
  --dr-e-s8: 64px;
  --dr-e-s9: 96px;
  --dr-e-s10: 128px;

  /* Radii */
  --dr-e-r-sm:   6px;
  --dr-e-r-md:   10px;
  --dr-e-r-lg:   18px;
  --dr-e-r-xl:   28px;
  --dr-e-r-pill: 999px;

  /* Shadows */
  --dr-e-shadow-sm: 0 1px 2px rgba(2,6,23,0.06), 0 1px 3px rgba(2,6,23,0.04);
  --dr-e-shadow-md: 0 4px 12px rgba(2,6,23,0.08), 0 2px 4px rgba(2,6,23,0.04);
  --dr-e-shadow-lg: 0 12px 32px rgba(2,6,23,0.10), 0 4px 12px rgba(2,6,23,0.06);
  --dr-e-shadow-xl: 0 24px 64px rgba(2,6,23,0.14), 0 8px 24px rgba(2,6,23,0.08);

  /* Motion */
  --dr-e-ease:    cubic-bezier(.16, 1, .3, 1);
  --dr-e-dur-1:   150ms;
  --dr-e-dur-2:   250ms;
  --dr-e-dur-3:   400ms;
}

/* ---------- Typography refinement ---------- */
body {
  font-family: var(--dr-e-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--dr-e-ink);
}

h1, h2, h3, .display, .hero-title, .section-title {
  font-family: var(--dr-e-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-feature-settings: "ss01", "lnum";
}

h1 { letter-spacing: -0.02em; line-height: 1.05; }
h2 { letter-spacing: -0.015em; line-height: 1.1; }
h3 { letter-spacing: -0.01em;  line-height: 1.2; }

em, i, .italic {
  font-family: var(--dr-e-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--dr-e-gold);
}

/* ---------- Color refinement: replace bright cyan with refined teal ---------- */
:root {
  --color-accent: var(--dr-e-teal);
  --color-primary: var(--dr-e-navy);
}

[style*="#009CDE"],
[style*="#0086C0"],
[style*="#22d3ee"] {
  color: var(--dr-e-teal) !important;
}

a { color: var(--dr-e-teal); transition: color var(--dr-e-dur-2) var(--dr-e-ease); }
a:hover { color: var(--dr-e-teal-600); }

/* ---------- Selection ---------- */
::selection {
  background: var(--dr-e-gold);
  color: var(--dr-e-paper);
}
/* Block 2 - Hero polish (verified selectors) */
.hero-title em, .hero-title i { color: var(--dr-e-gold) !important; font-style: italic !important; font-weight: 400 !important; font-family: var(--dr-e-font-display) !important; }
.hero-section { background: radial-gradient(ellipse at 25% 35%, rgba(30,69,97,0.35) 0%, transparent 55%), linear-gradient(135deg, var(--dr-e-ink) 0%, #0F172A 50%, #083344 100%) !important; position: relative !important; }
.hero-desc { color: rgba(245, 241, 232, 0.82) !important; font-size: 1.0625rem !important; line-height: 1.65 !important; max-width: 42ch !important; letter-spacing: 0.005em !important; font-family: var(--dr-e-font-body) !important; }
.hero-section .dr-btn, .hero-section .dr-btn--lg { font-family: var(--dr-e-font-body) !important; font-weight: 500 !important; letter-spacing: 0.015em !important; font-size: 0.9375rem !important; padding: 16px 32px !important; transition: transform var(--dr-e-dur-2) var(--dr-e-ease), box-shadow var(--dr-e-dur-2) var(--dr-e-ease), background var(--dr-e-dur-2) var(--dr-e-ease), border-color var(--dr-e-dur-2) var(--dr-e-ease) !important; }
.hero-section .dr-btn--primary { background: #009CDE !important; color: #FFFFFF !important; border: 2px solid #009CDE !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important; }
.hero-section .dr-btn--primary:hover { background: #0086C0 !important; border-color: #0086C0 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important; }
.hero-section .dr-btn--outline-light { background: transparent !important; color: #FFFFFF !important; border: 2px solid rgba(255,255,255,0.6) !important; border-radius: 999px !important; font-weight: 600 !important; }
.hero-section .dr-btn--outline-light:hover { background: rgba(255,255,255,0.08) !important; border-color: #FFFFFF !important; transform: translateY(-1px) !important; }
.hero-stats { border-top: 1px solid rgba(245, 241, 232, 0.10) !important; padding-top: 28px !important; margin-top: 32px !important; gap: 40px !important; }
.hero-stat__number { color: var(--dr-e-cream) !important; font-family: var(--dr-e-font-display) !important; font-weight: 500 !important; font-size: clamp(2rem, 3.2vw, 2.5rem) !important; letter-spacing: -0.02em !important; line-height: 1 !important; font-feature-settings: "ss01", "lnum" !important; }
.hero-stat__label { color: rgba(245, 241, 232, 0.5) !important; font-family: var(--dr-e-font-body) !important; font-size: 0.6875rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 500 !important; margin-top: 8px !important; display: block !important; }
.hero-image-wrap img { filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45)) drop-shadow(0 8px 16px rgba(0,0,0,0.3)) !important; }
.hero-social-proof { font-family: var(--dr-e-font-body) !important; color: var(--dr-e-gold-300) !important; font-size: 0.8125rem !important; letter-spacing: 0.04em !important; font-weight: 500 !important; }
.dr-announce, .dr-announce__items { background: var(--dr-e-ink) !important; color: rgba(245, 241, 232, 0.72) !important; font-family: var(--dr-e-font-body) !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; font-weight: 500 !important; }

/* Block 2.1 - Primary CTA hard override */
.hero-actions .dr-btn--primary, .hero-actions .dr-btn.dr-btn--primary, .hero-actions .dr-btn--primary.dr-btn--primary, .hero-section .dr-btn--primary.dr-btn--primary, .hero-section .hero-actions .dr-btn--primary { background: #009CDE !important; color: #FFFFFF !important; border: 2px solid #009CDE !important; border-radius: 999px !important; padding: 16px 32px !important; font-size: 0.9375rem !important; font-weight: 700 !important; letter-spacing: 0.015em !important; text-transform: none !important; box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important; transition: transform 250ms cubic-bezier(.16,1,.3,1), box-shadow 250ms cubic-bezier(.16,1,.3,1), background 250ms cubic-bezier(.16,1,.3,1) !important; }
.hero-actions .dr-btn--primary:hover, .hero-actions .dr-btn--primary.dr-btn--primary:hover, .hero-section .dr-btn--primary.dr-btn--primary:hover { background: #0086C0 !important; border-color: #0086C0 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(13, 174, 196, 0.30) !important; }

/* Block 1.1 - Typography patch (brand font variable alignment) */
:root { --font-heading-family: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; --font-body-family: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; --font-heading: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; --font-body: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; --dr-font-heading: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; --dr-font-body: 'Avenir Next LT Pro','Avenir Next','Segoe UI',system-ui,sans-serif !important; }
body, .text-body { font-family: var(--dr-e-font-body) !important; }
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5, .dr-h1, .dr-h2, .dr-h3, .dr-h4, .dr-h5, .dr-h6, .hero-title, .title--primary, h1.h2, .cart__heading, .template-search h1, .template-search .h2, .collection-hero__title, .article-template__title, .section-title, .main-article h1, .template-404 h1, .shopify-policy__body h2, .article-template__content h2, .article-template__content h3 { font-family: var(--dr-e-font-display) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; }
.hero-title { letter-spacing: -0.02em !important; line-height: 1.05 !important; }
.hero-stat__number { font-family: var(--dr-e-font-display) !important; font-weight: 500 !important; font-feature-settings: "ss01", "lnum" !important; }