/* Shared DrGsmile controls. Uses the clinic artwork and a CSS-only metal edge. */
:root {
  --drg-control-ink: #112c46;
  --drg-control-rim: linear-gradient(128deg, #a3acba 0%, #fdfefe 22%, #9ca7b9 39%, #dde5ef 57%, #fff 75%, #a0afbf 100%);
  --drg-control-surface: linear-gradient(180deg, #203e59, #112c46);
  --drg-control-light: linear-gradient(180deg, #fff, #f3f6f9);
}

.site-header .nav-island {
  min-height: 64px;
  padding: 8px 20px;
  gap: 30px;
  border: 1px solid #fff9;
  border-radius: 14px;
  color: var(--drg-control-ink);
  background: #f9fcffeb;
  box-shadow: 0 1px 1px #ffffffb3, 0 5px 20px #102a4309;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header .wordmark { flex: none; min-height: 44px; gap: 0; }
.site-header .store-brand-logo { display: block; width: 120px; height: 44px; object-fit: contain; }
.site-header .nav-actions { gap: 20px; padding: 7px 8px 7px 18px; }
.site-header.is-scrolled .nav-island {
  color: var(--drg-control-ink);
  background: #ffffffef;
  box-shadow: 0 1px 1px #ffffffb3, 0 5px 24px #102a4312;
}
.site-header .desktop-nav { gap: 27px; }
.site-header .desktop-nav :is(button, a), .site-header .account-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--drg-control-ink);
}
.site-header .desktop-nav :is(button, a):hover,
.site-header .desktop-nav button[aria-expanded="true"],
.site-header .account-link:hover { color: #3375ab; }

.button, .commerce-button, .commerce-small-button, .product-add-button.button {
  --drg-button-fill: var(--drg-control-surface);
  border: 2px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: var(--drg-button-fill) padding-box, var(--drg-control-rim) border-box;
  box-shadow: 0 1px 1px #fff2 inset, 0 3px 7px #112c4614;
  transition: box-shadow .18s ease, transform .18s ease;
  touch-action: manipulation;
}
.button:hover, .commerce-button:hover, .commerce-small-button:hover,
.product-add-button.button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--drg-button-fill) padding-box, var(--drg-control-rim) border-box;
  box-shadow: 0 1px 1px #fff4 inset, 0 6px 14px #112c4624;
  transform: translateY(-1px);
}
.button:active, .commerce-button:active, .commerce-small-button:active,
.product-add-button.button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 4px #0002 inset; }
.button-light, .commerce-small-button {
  --drg-button-fill: var(--drg-control-light);
  color: var(--drg-control-ink);
}
.button-light:hover, .commerce-small-button:hover { color: var(--drg-control-ink); }
.shop-tile .button-light {
  --drg-button-fill: var(--drg-control-surface);
  color: #fff;
  background: var(--drg-button-fill) padding-box, var(--drg-control-rim) border-box;
}
.shop-tile .button-light:hover { background: var(--drg-button-fill) padding-box, var(--drg-control-rim) border-box; }
.product-add-button.button:disabled {
  border-color: #e2e8ef;
  background: #e9eef3;
  color: #647c91;
  box-shadow: none;
  transform: none;
}
.site-header .nav-cta, .site-header.is-scrolled .nav-cta {
  min-height: 48px;
  padding: 12px 20px;
  color: #fff;
  background: var(--drg-control-surface) padding-box, var(--drg-control-rim) border-box;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.site-header .cart-link [data-cart-count] {
  min-width: 20px;
  height: 20px;
  background: #ffffffed;
  color: var(--drg-control-ink);
  font-variant-numeric: tabular-nums;
}
.site-header .language-switch { gap: 3px; }
.site-header .language-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 44px;
  opacity: 1;
  color: #617789;
  font-size: 11px;
  text-decoration: none;
}
.site-header .language-switch .is-active { color: var(--drg-control-ink); text-decoration: underline; text-underline-offset: 5px; }
.site-header .language-switch > span { color: #a1b0be; }
.site-header .menu-toggle {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 11px;
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--drg-control-ink);
  background: var(--drg-control-light) padding-box, var(--drg-control-rim) border-box;
  box-shadow: 0 2px 6px #112c4614;
  touch-action: manipulation;
}
.site-header .menu-toggle span { width: 20px; height: 1px; margin: 6px 0; transition: transform .18s ease; }
.site-header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-header :is(a, button):focus-visible,
.button:focus-visible, .commerce-button:focus-visible, .commerce-small-button:focus-visible {
  outline: 3px solid #3c88c8;
  outline-offset: 4px;
}
.mega-menu { top: 117px; border: 1px solid #dce6ee; border-radius: 14px; box-shadow: 0 18px 55px #112c461c; }
.mega-open:has(.site-header.is-scrolled) .mega-menu { top: 82px; }
.filters button, .dialog-close, .product-gallery-arrow { min-width: 44px; min-height: 44px; touch-action: manipulation; }

@media (max-width: 1100px) and (min-width: 761px) {
  .site-header .nav-island { gap: 20px; padding-left: 15px; padding-right: 15px; }
  .site-header .desktop-nav { gap: 18px; }
  .site-header .nav-actions { gap: 13px; padding-left: 12px; padding-right: 7px; }
  .site-header .account-link { display: none; }
  .site-header .store-brand-logo { width: 110px; height: 40px; }
}
@media (max-width: 760px) {
  .site-header {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    gap: 8px;
    padding: 6px 8px;
    min-height: 62px;
    border: 1px solid #fff9;
    border-radius: 12px;
    background: #f9fcfff2;
    box-shadow: 0 4px 20px #112c4610;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .site-header.is-scrolled { top: max(8px, env(safe-area-inset-top)); }
  .site-header .nav-island, .site-header.is-scrolled .nav-island {
    gap: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--drg-control-ink);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header .nav-actions { gap: 7px; }
  .site-header .store-brand-logo { width: 99px; height: 36px; }
  .site-header .account-link { display: none; }
  .site-header .language-switch { display: flex; gap: 0; }
  .site-header .language-switch button { min-width: 28px; font-size: 10px; }
  .site-header .language-switch > span { font-size: 10px; }
  .site-header .nav-cta, .site-header.is-scrolled .nav-cta { min-height: 46px; padding: 10px 11px; gap: 6px; font-size: 11px; letter-spacing: 0; }
  .site-header .cart-link [data-cart-count] { min-width: 17px; height: 17px; font-size: 10px; }
  .mobile-menu { padding-top: 128px; }
  .mobile-menu > .button, .mobile-menu > .button:hover { border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--drg-control-ink); transform: none; }
}
@media (max-width: 380px) {
  .site-header { gap: 6px; padding-left: 6px; padding-right: 6px; }
  .site-header .store-brand-logo { width: 82px; height: 30px; }
  .site-header .nav-actions { gap: 5px; }
  .site-header .nav-cta, .site-header.is-scrolled .nav-cta { padding-left: 8px; padding-right: 8px; gap: 5px; }
  .site-header .menu-toggle { width: 44px; min-width: 44px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .commerce-button, .commerce-small-button, .site-header, .site-header .nav-island, .site-header .menu-toggle span { transition: none; }
  .button:hover, .commerce-button:hover, .commerce-small-button:hover, .product-add-button.button:hover:not(:disabled) { transform: none; }
}