/* ==========================================================================
   Swiss clinical skin.
   Retheming happens at the token layer: the markup keeps its semantic classes
   and every JS hook, so commerce behaviour is untouched.
   ========================================================================== */

:root{
  --background:0 0% 100%;
  --foreground:0 0% 4%;
  --card:0 0% 100%;
  --card-foreground:0 0% 4%;
  --popover:0 0% 100%;
  --popover-foreground:0 0% 4%;
  --surface:0 0% 95%;
  --muted:0 0% 95%;
  --muted-foreground:0 0% 27%;
  --border:0 0% 4%;
  --input:0 0% 4%;
  --primary:17 100% 50%;
  --primary-foreground:0 0% 100%;
  --secondary:0 0% 95%;
  --secondary-foreground:0 0% 4%;
  --accent:0 0% 95%;
  --accent-foreground:0 0% 4%;
  --ring:17 100% 50%;
  --announcement-bg:0 0% 4%;
  --announcement-fg:0 0% 100%;
  --destructive:0 84% 50%;
  --radius:0px;
}

body{font-family:Archivo,system-ui,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground))}

/* the direction is square: nothing rounds */
.rounded,.rounded-sm,.rounded-md,.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-3xl,
.rounded-full,[class*="rounded-"]{border-radius:0 !important}

h1,h2,h3,.font-display{font-family:Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.03em}
h1{font-weight:800;letter-spacing:-.045em;line-height:.94}
h2{font-weight:800}
h3{font-weight:600;letter-spacing:-.01em}

/* announcement rail */
.bg-primary.text-announcement-foreground,
header + nav, .topbar{letter-spacing:.1em}
[class*="announcement"]{background:hsl(var(--announcement-bg)) !important;color:hsl(var(--announcement-fg)) !important;
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:500}

/* header + nav: rules, not shadows */
header.sticky{border-bottom:2px solid hsl(var(--foreground))}
/* The nav below is sticky at top-16 (64px). The header must therefore be
   exactly 64px of content, or the nav rides up over it once you scroll and the
   header looks vertically clipped. Its 2px border is added to the nav offset. */
header.sticky .container-narrow{height:4rem}
nav[aria-label="Main navigation"]{top:66px}
nav[aria-label="Main navigation"]{border-bottom:1px solid hsl(var(--foreground))}
nav[aria-label="Main navigation"] a{text-transform:uppercase;letter-spacing:.06em;font-weight:500;font-size:12px}
nav[aria-label="Main navigation"] a:hover{color:hsl(var(--primary))}
.apx-wordmark{font-weight:800;font-size:19px;letter-spacing:-.03em;text-transform:uppercase;color:hsl(var(--foreground))}

/* hero: inverted panel becomes a stark white field with oversized type */
section.bg-foreground.text-background{background:hsl(var(--background)) !important;color:hsl(var(--foreground)) !important;
  border-bottom:2px solid hsl(var(--foreground))}
/* Tailwind's text-* utilities pin a fixed rem line-height; scaling the font
   without restating it collapses the lines onto each other. */
section.bg-foreground.text-background h1{color:hsl(var(--foreground));
  font-size:clamp(2.4rem,6.4vw,5rem);line-height:.95}
section.bg-foreground.text-background p{color:hsl(var(--muted-foreground)) !important}
section.bg-foreground.text-background .border-background\/30{border-color:hsl(var(--foreground)) !important;border-width:2px;color:hsl(var(--foreground)) !important}

/* buttons */
.bg-primary{background:hsl(var(--primary)) !important;color:hsl(var(--primary-foreground)) !important}
button,.btn,a[class*="bg-primary"],button[class*="bg-primary"]{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.border-border:not(.bg-primary):hover{border-color:hsl(var(--primary))}

/* trust strip + section heads sit on rules */
.border-b.border-border,.border-t.border-border{border-color:hsl(var(--foreground))}
.bg-surface{background:hsl(var(--surface))}

/* product + category cards: 1px black, no shadow, orange on hover */
.apx-card,article[class*="border-border"]{border:1px solid hsl(var(--foreground)) !important;box-shadow:none !important}
.apx-card:hover{box-shadow:none !important;border-color:hsl(var(--primary)) !important}
.apx-card .bg-surface{border-bottom:1px solid hsl(var(--foreground))}
.apx-card h3{font-size:15px;font-weight:600;text-transform:uppercase}
.apx-card .text-lg,.apx-card .font-bold{font-weight:800;letter-spacing:-.03em}

/* category tiles fill on hover */
a[class*="border-border"][class*="text-center"]:hover,
a.border.border-border:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
a[class*="border-border"][class*="text-center"]:hover *{color:hsl(var(--primary-foreground))}

/* labels + accents */
.text-primary{color:hsl(var(--primary)) !important}
.text-muted-foreground{color:hsl(var(--muted-foreground))}

/* faq */
details summary{text-transform:uppercase;font-weight:600;font-size:14px;letter-spacing:.02em}

/* footer inverts to solid black */
footer.bg-foreground{background:hsl(var(--foreground)) !important;color:hsl(var(--background)) !important}
footer.bg-foreground p,footer.bg-foreground span,footer.bg-foreground li,footer.bg-foreground a{color:hsl(var(--background))}
footer.bg-foreground [class*="text-background/"]{color:hsl(0 0% 100% / .72) !important}
footer.bg-foreground a:hover{color:hsl(var(--primary)) !important}
footer.bg-foreground h3{color:hsl(var(--background))}

/* forms */
input,select,textarea{border-radius:0 !important;border:2px solid hsl(var(--foreground)) !important;font-family:Archivo,system-ui,sans-serif}
input:focus-visible,select:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:1px}

/* hero vial: states the category above the fold */
.apx-hero-media{position:relative;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--surface));border:1px solid hsl(var(--foreground));
  padding:2.5rem 1.5rem 3.25rem;min-height:22rem}
.apx-hero-vial{max-height:22rem;width:auto;object-fit:contain;display:block}
.apx-hero-cap{position:absolute;left:0;bottom:0;padding:.5rem .75rem;
  background:hsl(var(--foreground));color:hsl(var(--background));
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.apx-hero-media::after{content:"";position:absolute;right:0;bottom:0;width:2.25rem;height:.35rem;
  background:hsl(var(--primary))}
@media (max-width:767px){.apx-hero-media{min-height:16rem;padding:1.75rem 1rem 2.75rem}
  .apx-hero-vial{max-height:15rem}}

/* size ladder: the catalogue's own unit-price advantage, made legible */
.apx-ladder{margin:0 0 1.5rem}
.apx-ladder-head{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.6rem}
.apx-ladder-opts{display:flex;flex-wrap:wrap;gap:.6rem}
.apx-size{position:relative;display:flex;flex-direction:column;gap:.15rem;min-width:8.5rem;
  padding:.7rem .85rem;border:1px solid hsl(var(--foreground));background:hsl(var(--background));
  color:hsl(var(--foreground));transition:background .12s,color .12s}
.apx-size:hover{background:hsl(var(--surface))}
.apx-size.is-current{background:hsl(var(--foreground));color:hsl(var(--background))}
.apx-size-amt{font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:15px}
.apx-size-price{font-size:13px;font-weight:600}
.apx-size-per{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.apx-size-save{margin-top:.3rem;display:inline-block;padding:.15rem .35rem;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.apx-size-save--muted{background:transparent;color:hsl(var(--primary));padding-left:0}
.apx-size.is-current .apx-size-save--muted{color:hsl(var(--primary))}

/* attach row ("complete the setup") — legacy markup, restyled in place */
.apx-attach h2{font-size:1.35rem;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  color:hsl(var(--foreground))}
.apx-attach h2 + p{color:hsl(var(--muted-foreground));font-size:14px}
.apx-attach .text-neutral-900{color:hsl(var(--foreground))}
.apx-attach .text-neutral-500,.apx-attach .text-neutral-600{color:hsl(var(--muted-foreground))}
.apx-attach a[class*="flex-col"]{border:1px solid hsl(var(--foreground)) !important;border-radius:0 !important;
  background:hsl(var(--background)) !important;box-shadow:none !important;transform:none !important}
.apx-attach a[class*="flex-col"]:hover{border-color:hsl(var(--primary)) !important;
  box-shadow:none !important;transform:none !important}
.apx-attach .bg-white{background:hsl(var(--background))}
.apx-attach [class*="bg-gradient"]{background:hsl(var(--surface)) !important}
.apx-attach [class*="border-neutral"]{border-color:hsl(var(--foreground)) !important}
.apx-attach img{mix-blend-mode:multiply}

/* cart + checkout: same conversion path, so the design must not change here */
.woocommerce-cart .rounded-2xl,.woocommerce-cart .rounded-xl,.woocommerce-cart .rounded-full,
.woocommerce-checkout .rounded-2xl,.woocommerce-checkout .rounded-xl,.woocommerce-checkout .rounded-full{border-radius:0 !important}
.woocommerce-cart [class*="border-neutral"],.woocommerce-checkout [class*="border-neutral"]{border-color:hsl(var(--foreground)) !important}
.woocommerce-cart .text-neutral-900,.woocommerce-checkout .text-neutral-900{color:hsl(var(--foreground))}
.woocommerce-cart .text-neutral-500,.woocommerce-cart .text-neutral-600,
.woocommerce-checkout .text-neutral-500,.woocommerce-checkout .text-neutral-600{color:hsl(var(--muted-foreground))}
.woocommerce-cart .bg-white,.woocommerce-checkout .bg-white{background:hsl(var(--background))}
.woocommerce-cart .shadow-sm,.woocommerce-cart .shadow-md,.woocommerce-cart [class*="shadow"],
.woocommerce-checkout [class*="shadow"]{box-shadow:none !important}
.woocommerce-cart h1,.woocommerce-checkout h1{font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
.woocommerce-cart h2,.woocommerce-checkout h2{letter-spacing:.12em}
.woocommerce-cart .btn-brand,.woocommerce-checkout .btn-brand,
.woocommerce-cart button[type=submit],.woocommerce-checkout button[type=submit],
.woocommerce-checkout #place_order{background:hsl(var(--primary)) !important;color:hsl(var(--primary-foreground)) !important;
  border:0 !important;border-radius:0 !important;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.woocommerce-cart input,.woocommerce-checkout input,.woocommerce-checkout select,.woocommerce-checkout textarea{
  border-radius:0 !important;border:2px solid hsl(var(--foreground)) !important}
.woocommerce table.shop_table,.woocommerce table.shop_table td,.woocommerce table.shop_table th{
  border-color:hsl(var(--foreground)) !important;border-radius:0 !important}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{text-transform:uppercase;font-weight:800;letter-spacing:-.02em}

/* ---------------------------------------------------------------------------
   Legacy body markup (registry, lot records, monographs, tracking, policies).
   These pages keep their renderers; only their presentation is restated here.
   --------------------------------------------------------------------------- */
.mg-serif{font-family:Archivo,system-ui,sans-serif}
.mg-mono{font-family:Archivo,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;font-size:.9em}
.mg-muted{color:hsl(var(--muted-foreground))}
.mg-fine{font-size:12px;color:hsl(var(--muted-foreground))}
.mg-red{color:hsl(var(--destructive))}
.mg-stamp{color:hsl(var(--primary));font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.mg-label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:hsl(var(--muted-foreground))}

.mg-page-head{max-width:80rem;margin:0 auto;padding:3rem 1.5rem 1.25rem;
  border-bottom:2px solid hsl(var(--foreground))}
.mg-page-head h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.96;margin:0 0 .6rem;color:hsl(var(--foreground))}
.mg-page-head p{color:hsl(var(--muted-foreground));max-width:60ch;margin:0}
.mg-section{max-width:80rem;margin:0 auto;padding:2.5rem 1.5rem}
.mg-section-rule{border-top:2px solid hsl(var(--foreground))}
.mg-center{text-align:center;margin-top:1.75rem}

.mg-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3rem}
@media(max-width:900px){.mg-two-col{grid-template-columns:1fr;gap:1.75rem}}

.mg-tablewrap{overflow-x:auto;border:1px solid hsl(var(--foreground))}
.mg-table{width:100%;border-collapse:collapse;font-size:14px}
.mg-table th{background:hsl(var(--foreground));color:hsl(var(--background));
  text-align:left;padding:.7rem .85rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.mg-table td{padding:.7rem .85rem;border-top:1px solid hsl(var(--border))}
.mg-table tr:hover td{background:hsl(var(--surface))}
.mg-row-rejected td{background:hsl(0 84% 97%)}

.mg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:hsl(var(--foreground));border:1px solid hsl(var(--foreground));
  max-width:80rem;margin:0 auto}
.mg-stats > div{background:hsl(var(--background));padding:1.25rem}
.mg-stat{display:block;font-size:2.25rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;margin-top:.35rem}

.mg-chip-passed,.mg-chip-rejected{display:inline-block;padding:.2rem .45rem;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid hsl(var(--foreground))}
.mg-chip-rejected{background:hsl(var(--destructive));color:#fff;border-color:hsl(var(--destructive))}

.mg-doclist{display:flex;flex-direction:column}
.mg-doclist a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.95rem .15rem;border-bottom:1px solid hsl(var(--border))}
.mg-doclist a:hover{color:hsl(var(--primary))}

.mg-btn,.mg-btn-sm{display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:0;border-radius:0;
  padding:.8rem 1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;cursor:pointer}
.mg-btn-sm{padding:.5rem .8rem;font-size:12px}
.mg-btn:hover,.mg-btn-sm:hover{opacity:.9;color:hsl(var(--primary-foreground))}
.mg-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.3rem;
  border:2px solid hsl(var(--foreground));color:hsl(var(--foreground));background:transparent;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.mg-lotchip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;
  border:1px solid hsl(var(--foreground));font-size:12px;font-weight:600}
.mg-lotchip:hover{border-color:hsl(var(--primary));color:hsl(var(--primary))}

/* The attach carousel scrolls internally, but a flex child defaults to
   min-width:auto and so refuses to shrink below its content, widening the
   document instead. Constrain it so the page never scrolls sideways. */
.apx-attach,.apx-attach > div{min-width:0;max-width:100%}
.apx-attach [class*="overflow-x-auto"]{min-width:0;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch}

/* brand lockup: mark + wordmark, inherits colour so it inverts in the footer */
.apx-brand{display:inline-flex;align-items:center;gap:.55rem;color:hsl(var(--foreground))}
.apx-brand-mark{height:1.6rem;width:auto;display:block;flex:0 0 auto}
.apx-brand .apx-wordmark{font-weight:800;font-size:19px;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
.apx-brand--footer{color:hsl(var(--background));margin-bottom:1rem}
.apx-brand--footer .apx-wordmark{font-size:22px}
@media(max-width:420px){.apx-brand .apx-wordmark{font-size:15px}.apx-brand-mark{height:1.3rem}}

/* category bar: more vertical presence */
nav[aria-label="Main navigation"] a{padding-top:1.05rem;padding-bottom:1.05rem;font-size:12.5px}
nav[aria-label="Main navigation"] ul{gap:.35rem}
#apx-mobile-menu a{display:block;padding:.85rem .25rem;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid hsl(var(--border))}
#apx-mobile-menu a:last-child{border-bottom:0}
#apx-mobile-menu a:hover{color:hsl(var(--primary))}

/* ---------------------------------------------------------------------------
   Arbitrary-value utilities the borrowed stylesheet never compiled, because the
   source markup did not use them. Without these the search overlay and cart
   drawer have no stacking order, width, or offset, so they render underneath
   the sticky header and cannot position themselves.
   --------------------------------------------------------------------------- */
.z-\[90\]{z-index:90}
.z-\[95\]{z-index:95}
.max-w-\[420px\]{max-width:420px}
.translate-x-full{--tw-translate-x:100%;transform:translateX(100%)}
.w-\[92\%\]{width:92%}
.mt-\[10vh\]{margin-top:10vh}
.max-h-\[55vh\]{max-height:55vh}
.rounded-\[24px\]{border-radius:0}
.w-\[190px\]{width:190px}
.max-w-\[280px\]{max-width:280px}
.h-\[calc\(100vh-4rem\)\]{height:calc(100vh - 4rem)}

/* search overlay, restyled square to match the direction */
#apx-search-overlay .rounded-\[24px\],#apx-search-overlay > div:last-child{border-radius:0}
#apx-search-overlay input{border:0 !important;font-size:16px}
#apx-search-results a{display:block;padding:.7rem .5rem;border-bottom:1px solid hsl(var(--border))}
#apx-search-results a:hover{background:hsl(var(--surface))}

/* wishlist control: a drawn icon rather than a text glyph */
.apx-wish{position:absolute;top:.5rem;right:.5rem;height:2rem;width:2rem;display:flex;
  align-items:center;justify-content:center;border:1px solid hsl(var(--border));
  background:hsl(var(--background));color:hsl(var(--muted-foreground));cursor:pointer;padding:0;
  transition:color .12s,border-color .12s}
.apx-wish svg{width:1rem;height:1rem;display:block}
.apx-wish:hover{color:hsl(var(--primary));border-color:hsl(var(--primary))}
.apx-wish[aria-pressed="true"]{color:hsl(var(--primary));border-color:hsl(var(--primary))}
.apx-wish[aria-pressed="true"] svg{fill:hsl(var(--primary))}
.apx-wish--pdp{position:static;height:2.75rem;width:2.75rem;border-color:hsl(var(--foreground))}
.apx-wish--pdp svg{width:1.15rem;height:1.15rem}

/* card footer: price on its own line, button full width, so cards line up at
   any column count instead of the button floating beside a variable price */
.apx-card-foot{margin-top:auto;padding-top:.7rem;display:flex;flex-direction:column;gap:.55rem}
.apx-card-foot form{margin:0}
.apx-card-foot .text-lg,.apx-card-foot span{font-weight:800;letter-spacing:-.03em;font-size:1.05rem}
.apx-add{display:block;width:100%;height:2.5rem;border:0;background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;cursor:pointer;font-family:Archivo,system-ui,sans-serif}
.apx-add:hover{opacity:.9}

/* brand anchor is a block element in a flex row: give it its own centring so
   the mark and wordmark sit on the bar's centre line rather than the baseline */
header.sticky a.flex-shrink-0{display:flex;align-items:center;height:100%}
header.sticky .apx-brand{line-height:1}
header.sticky .apx-brand-mark{position:relative;top:0}

/* account, login and registration forms */
.apx-woo .woocommerce-form,.woocommerce-account .woocommerce form{border:1px solid hsl(var(--foreground));
  padding:1.5rem;background:hsl(var(--background))}
.woocommerce-account h2,.woocommerce-account legend{font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:1.1rem;margin-bottom:.9rem}
.woocommerce form .form-row label{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.35rem}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row input[type=password]{
  width:100%;height:2.75rem;padding:0 .75rem;border:2px solid hsl(var(--foreground));border-radius:0;
  font-family:Archivo,system-ui,sans-serif;font-size:15px}
.woocommerce form .form-row{margin-bottom:1rem}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button{
  background:hsl(var(--primary)) !important;color:hsl(var(--primary-foreground)) !important;border:0 !important;
  border-radius:0 !important;height:2.75rem;padding:0 1.4rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;font-family:Archivo,system-ui,sans-serif;cursor:pointer}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;
  flex-wrap:wrap;gap:.4rem;border-bottom:2px solid hsl(var(--foreground));padding-bottom:.75rem}
.woocommerce-MyAccount-navigation a{display:inline-block;padding:.5rem .8rem;border:1px solid hsl(var(--border));
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.woocommerce-MyAccount-navigation li.is-active a{background:hsl(var(--foreground));color:hsl(var(--background))}

/* ---------------------------------------------------------------------------
   Researcher gate. Its JS rewrites these class names on every state change, and
   none of them exist in the borrowed stylesheet, so the checked state was
   invisible and the button unstyled. Defined here, scoped to the gate.
   --------------------------------------------------------------------------- */
.mg-gate-card{background:hsl(var(--background)) !important;border:2px solid hsl(var(--foreground)) !important;
  border-radius:0 !important;color:hsl(var(--foreground))}
.mg-gate-card h2,.mg-gate-card p,.mg-gate-card span,.mg-gate-card label{color:hsl(var(--foreground))}
.mg-gate-card h2{font-family:Archivo,system-ui,sans-serif !important;font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
.mg-gate-lede,.mg-gate-fine{color:hsl(var(--muted-foreground)) !important}
.mg-gate-fine a{color:hsl(var(--primary)) !important;text-decoration:underline}
.mg-gate .mg-wordmark{color:hsl(var(--foreground))}
.mg-gate .mg-stamp{color:hsl(var(--primary)) !important}

.mg-gate .apx-gate-opt{border:1px solid hsl(var(--border)) !important;border-radius:0 !important;
  background:hsl(var(--background));padding:1rem}
.mg-gate .apx-gate-opt.border-brand,.mg-gate .apx-gate-opt[class*="oklch"]{
  border-color:hsl(var(--primary)) !important;background:hsl(17 100% 97%) !important}
.mg-gate .border-neutral-200,.mg-gate .border-neutral-300{border-color:hsl(var(--border)) !important}

/* the checked marker: this is what made the state unreadable */
.mg-gate .apx-gate-dot{border-radius:0 !important;border:2px solid hsl(var(--foreground)) !important;
  background:transparent;position:relative}
.mg-gate .apx-dot-on,.mg-gate .bg-brand{background:hsl(var(--primary)) !important;
  border-color:hsl(var(--primary)) !important}
.mg-gate .apx-dot-on::after{content:"";position:absolute;left:4px;top:0;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.mg-gate-btn,#apx-gate-enter{border-radius:0 !important;font-family:Archivo,system-ui,sans-serif !important;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}
#apx-gate-enter.btn-brand{background:hsl(var(--primary)) !important;color:#fff !important;box-shadow:none !important;transform:none !important}
#apx-gate-enter[class*="bg-neutral"]{background:hsl(var(--surface)) !important;color:hsl(var(--muted-foreground)) !important;
  border:1px solid hsl(var(--border)) !important;cursor:not-allowed}

/* checkout trust row had no layout, so the three items ran together */
.apx-checkout-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1rem 0;
  padding:.75rem 0;border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}
.apx-checkout-trust span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));white-space:nowrap}
.apx-checkout-trust span::before{content:"";display:inline-block;width:.4rem;height:.4rem;
  background:hsl(var(--primary));margin-right:.45rem;vertical-align:middle}

/* indicative local price; the charge is in euro */
.apx-approx{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:hsl(var(--muted-foreground));white-space:nowrap}
.apx-card-foot .apx-approx{display:block;margin-top:.15rem}
.apx-fx-note{font-size:12px;color:hsl(var(--muted-foreground));border-left:3px solid hsl(var(--primary));
  padding:.5rem .75rem;margin:.75rem 0}

/* cart drawer: free-shipping gap closer and attach offers */
.apx-gap,.apx-attach-mini{border:1px solid hsl(var(--border));padding:.7rem;margin:.6rem 0}
.apx-gap{border-color:hsl(var(--primary))}
.apx-gap-head{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:hsl(var(--foreground));margin-bottom:.5rem}
.apx-gap .apx-gap-head{color:hsl(var(--primary))}
.apx-gap-row,.apx-attach-row{display:flex;align-items:center;gap:.6rem}
.apx-attach-row+.apx-attach-row{margin-top:.55rem;padding-top:.55rem;border-top:1px solid hsl(var(--border))}
.apx-gap-img{width:2.4rem;height:2.4rem;object-fit:contain;background:hsl(var(--surface));flex:0 0 auto}
.apx-gap-body{display:flex;flex-direction:column;min-width:0;flex:1}
.apx-gap-name{font-size:12.5px;font-weight:600;line-height:1.25;color:hsl(var(--foreground));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-gap-price{font-size:12px;font-weight:700;color:hsl(var(--muted-foreground))}
.apx-gap-add{flex:0 0 auto;height:2rem;padding:0 .8rem;border:0;background:hsl(var(--primary));
  color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;font-family:Archivo,system-ui,sans-serif}
.apx-gap-add:hover{opacity:.9}

/* ---------------------------------------------------------------------------
   Legacy brand classes used across the drawer, modals, account and forms.
   These were only ever defined scoped to cart/checkout, so every other primary
   button rendered as white text on white. Defined once, globally.
   --------------------------------------------------------------------------- */
.btn-brand{background:hsl(var(--primary)) !important;color:#fff !important;border:0 !important;
  border-radius:0 !important;font-family:Archivo,system-ui,sans-serif !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.06em;box-shadow:none !important;cursor:pointer}
.btn-brand:hover{opacity:.9;color:#fff !important;transform:none !important}
.bg-brand{background:hsl(var(--primary)) !important}
.text-brand,.text-brand-deep{color:hsl(var(--primary)) !important}
.border-brand{border-color:hsl(var(--primary)) !important}
.divide-neutral-100 > * + *{border-color:hsl(var(--border))}
.text-neutral-900{color:hsl(var(--foreground))}
.text-neutral-500,.text-neutral-600{color:hsl(var(--muted-foreground))}
.border-neutral-200,.border-neutral-300{border-color:hsl(var(--border))}
.bg-neutral-50,.bg-neutral-100{background:hsl(var(--surface))}

/* Woo's password reveal is absolutely positioned inside the field wrapper;
   the skin's input rules collapsed it to zero size. */
.woocommerce form .password-input{position:relative;display:block}
.woocommerce form .password-input input{padding-right:3rem}
.woocommerce form .show-password-input{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  width:1.5rem;height:1.5rem;border:0;background:transparent;cursor:pointer;padding:0;
  color:hsl(var(--muted-foreground))}
.woocommerce form .show-password-input::after{content:"Show";font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;position:absolute;right:0;top:50%;
  transform:translateY(-50%)}
.woocommerce form .show-password-input.display-password::after{content:"Hide"}

/* ---------------------------------------------------------------------------
   Product descriptions are imported HTML and contain tables carrying classes
   from wherever they were authored, including a min-width bound to a CSS
   variable that does not exist here. Unconstrained, those tables size to their
   content and widen the whole page on narrow screens. Scroll them internally.
   --------------------------------------------------------------------------- */
.prose table,.apx-attach table,.entry-content table{display:block;width:100%;max-width:100%;
  min-width:0 !important;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse}
.prose table th,.prose table td{border:1px solid hsl(var(--border));padding:.5rem .6rem;
  font-size:13px;vertical-align:top}
.prose table th{background:hsl(var(--surface));text-align:left;font-weight:700}
.prose [class*="_tableWrapper"]{max-width:100%;min-width:0 !important;overflow-x:auto;display:block}
.prose img,.prose pre{max-width:100%}
.prose pre{overflow-x:auto}

/* cookie bar: its inner row did not account for the bar's own padding, so the
   content box ran wider than the viewport on small screens */
#apx-cookie{max-width:100vw;overflow-x:hidden;box-sizing:border-box}
#apx-cookie > div{max-width:100%;min-width:0;box-sizing:border-box}
#apx-cookie p{min-width:0;flex:1 1 auto}

/* review and comment fields must never exceed their column */
textarea,input[type=text],input[type=email],input[type=url],input[type=search]{max-width:100%;box-sizing:border-box}
.comment-form textarea,#respond textarea{width:100%;max-width:100%}