/** Shopify CDN: Minification failed

Line 19:41 Unexpected "\" instead of \""
Line 19:55 Comments in CSS use "/* ... */" instead of "//"
Line 19:58 Unterminated string token
Line 37:56 Comments in CSS use "/* ... */" instead of "//"
Line 37:59 Unterminated string token
Line 482:10 Expected identifier but found whitespace
Line 491:34 Expected identifier but found "0"
Line 1072:0 All "@import" rules must come first
Line 3719:0 All "@import" rules must come first
Line 4780:0 All "@import" rules must come first
... and 2 more hidden warnings

**/
/** Shopify CDN: Minification failed

Line 22:42 Unexpected "\" instead of \""
Line 22:56 Comments in CSS use "/* ... */" instead of "//"
Line 22:59 Unterminated string token
Line 467:10 Expected identifier but found whitespace
Line 476:34 Expected identifier but found "0"
Line 1057:0 All "@import" rules must come first
Line 3704:0 All "@import" rules must come first
Line 4765:0 All "@import" rules must come first
Line 5021:0 Comments in CSS use "/* ... */" instead of "//"
Line 7908:6 Expected identifier but found "."

**/
/** Shopify CDN: Minification failed

Line 453:10 Expected identifier but found whitespace
Line 462:34 Expected identifier but found "0"
Line 1043:0 All "@import" rules must come first
Line 3690:0 All "@import" rules must come first
Line 4751:0 All "@import" rules must come first
Line 5007:0 Comments in CSS use "/* ... */" instead of "//"
Line 7894:6 Expected identifier but found "."

**/
/* =====================================================================
   ARCHALIGN \2014  custom.css
   Last rewrite: 2026-05-19 (Phase 1 audit + master patch v4)
   ===================================================================== */

/* ---------- Original header menu styling (preserved) ---------- */
.header__menu-item span.header__active-menu-item {
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
}
.header__menu-item span {
  font-family: CustomBaloo, sans-serif !important;
}


/* =====================================================================
   ARCHALIGN MASTER PATCH v4 \2014  site-wide visual fixes
   ===================================================================== */


/* 1. COLOR-SCHEME-3 \2014  kill black-on-black globally */
.color-scheme-3, .color-scheme-3.gradient {
  --color-foreground: 240, 232, 212;
  --color-link: 240, 232, 212;
  color: rgb(240, 232, 212);
}
.color-scheme-3 a, .color-scheme-3 p, .color-scheme-3 li,
.color-scheme-3 h1, .color-scheme-3 h2, .color-scheme-3 h3, .color-scheme-3 h4,
.color-scheme-3 .rte, .color-scheme-3 .rte * { color: rgb(240, 232, 212); }
.gradient.color-scheme-3 *:not(svg):not(path) { color: rgb(240, 232, 212); }


/* 2. COLLECTION HERO \2014  readable when present, collapsed when empty */
html body .collection-hero,
html body .collection-hero .collection-hero__description,
html body .collection-hero .collection-hero__description.rte,
html body .collection-hero .collection-hero__description.rte *,
html body .color-scheme-1 .collection-hero__description,
html body .color-scheme-1 .collection-hero__description *,
html body .color-background-1 .collection-hero__description,
html body .color-background-1 .collection-hero__description *,
html body .collection-hero.color-scheme-1 [class*="description"],
html body .collection-hero.color-scheme-1 [class*="description"] * {
  color: rgb(240, 232, 212) !important;
}
.collection-hero__title, .collection__title { color: rgb(240, 232, 212) !important; }
.collection-hero__description:empty,
.collection-hero__description.rte:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}


/* 3. FOOTER \2014  proper grid on every breakpoint */
html body .footer__blocks-wrapper.grid {
  display: grid !important;
  gap: 3.2rem 0 !important;
}
@media screen and (max-width: 749px) {
  html body .footer__blocks-wrapper.grid,
  html body .footer__blocks-wrapper.grid.grid--1-col,
  html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col,
  html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet,
  html body .footer .footer__blocks-wrapper.grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
}
@media screen and (min-width: 990px) {
  html body .footer__blocks-wrapper.grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px 28px !important;
  }
}


/* 4. NEWSLETTER ("GET THE ROOM EDIT") \2014  fix giant-slab button */
html body .newsletter {
  max-width: 42rem !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body .newsletter .newsletter-form,
html body .newsletter-form {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
html body .newsletter-form__field-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body .newsletter-form .field {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
.newsletter-form .field::before,
.newsletter-form .field::after { display: none !important; }
html body .newsletter-form .field__input {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 1.8rem 5.5rem 0.6rem 0 !important;
  height: 5.4rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201, 169, 106, 0.45) !important;
  border-radius: 0 !important;
  color: rgb(240, 232, 212) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
}
.newsletter-form .field__input::placeholder {
  color: rgba(240, 232, 212, 0.55) !important;
  letter-spacing: 0.06em !important;
}
.newsletter-form .field__label {
  color: rgba(240, 232, 212, 0.6) !important;
  left: 0 !important;
  top: 1.6rem !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
  padding: 0 !important;
}
.newsletter-form .field__input:focus + .field__label,
.newsletter-form .field__input:not(:placeholder-shown) + .field__label {
  top: 0.2rem !important;
  font-size: 1.1rem !important;
  color: rgba(201, 169, 106, 0.9) !important;
}
.newsletter-form__button.field__button {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 4.8rem !important;
  min-width: 4.8rem !important;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgb(201, 169, 106) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}
.newsletter-form__button.field__button:hover {
  transform: translateY(-50%) translateX(4px) !important;
  color: rgb(232, 200, 130) !important;
  background: transparent !important;
}
.newsletter-form__button.field__button svg.icon-arrow {
  width: 1.8rem !important;
  height: 1.4rem !important;
  fill: none !important;
  stroke: currentColor !important;
}
.newsletter, .newsletter * { --color-foreground: 240, 232, 212; }


/* 5. PRODUCT DETAIL GALLERY \2014  CRITICAL: images were clipped to 12px */
html body .product__media-wrapper {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
html body .product__media-list.slider {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
html body .product__media-item {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  width: 100% !important;
}
html body .product__media,
html body .product-media-container,
html body .product__media-item .product-media,
html body .product__media-item [class*="product__media"] {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}
html body .product__media img,
html body .product-media img,
html body .product__media-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
@media screen and (max-width: 749px) {
  html body .product__media-list.slider {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }
  html body .product__media-item {
    flex: 0 0 100% !important;
    scroll-snap-align: start;
  }
}


/* 6. "SOLD OUT" BADGES + button \2014  make readable */
.card__badge .badge,
.card .badge,
.product-form__inventory,
[class*="card__badge"] span,
.card-information .badge,
span.badge {
  color: rgb(240, 232, 212) !important;
  background: rgba(20, 17, 13, 0.85) !important;
  border: 1px solid rgba(201, 169, 106, 0.45) !important;
  padding: 0.35em 0.7em !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  -webkit-text-fill-color: rgb(240, 232, 212) !important;
}
button.product-form__submit.button--secondary,
button.product-form__submit[disabled],
button.button[disabled] {
  color: rgb(240, 232, 212) !important;
  background: rgba(20, 17, 13, 0.7) !important;
  border: 1px solid rgba(201, 169, 106, 0.6) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgb(240, 232, 212) !important;
}


/* 7. CART PAGE LINKS \2014  "Continue shopping" / "Log in" */
.cart__page a,
.cart-page a,
.cart__warnings a,
a.underlined-link,
a.link.underlined-link {
  color: rgb(240, 232, 212) !important;
}
a.underlined-link:hover,
a.link.underlined-link:hover {
  color: rgb(232, 200, 130) !important;
}


/* 8. DRAWER / OVERLAY LABELS \2014  Search & Email in drawers */
.search-modal .field__label,
.search-modal .field__input,
.menu-drawer .field__label,
.menu-drawer .field__input,
predictive-search .field__label,
predictive-search .field__input,
search-form .field__label,
search-form .field__input,
.localization-form .field__label {
  color: rgb(240, 232, 212) !important;
}
.search-modal .field__input::placeholder,
.menu-drawer .field__input::placeholder,
predictive-search .field__input::placeholder,
search-form .field__input::placeholder {
  color: rgba(240, 232, 212, 0.55) !important;
}


/* 9. ANNOUNCEMENT BAR \2014  contain the marquee */
.utility-bar,
.announcement-bar,
[class*="announcement"] { overflow: hidden !important; }
.unique-announcement-text-v1,
[class*="marquee"] { white-space: nowrap; }


/* 10. TYPOGRAPHY POLISH */
html body h1, html body h2, html body .h1, html body .h2,
.collection-hero__title {
  letter-spacing: -0.005em !important;
  line-height: 1.08 !important;
}
h3, h4, .h3, .h4 {
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.button,
button[type="submit"]:not(.field__button) {
  letter-spacing: 0.12em;
  transition: transform 0.25s ease, background-color 0.25s ease,
              color 0.25s ease, border-color 0.25s ease;
}
.button:hover,
button[type="submit"]:not(.field__button):hover {
  transform: translateY(-1px);
}


/* 11. LINK PRECISION \2014  Zaha-style animated hairlines */
.rte a:not(.button),
main a:not(.button):not(.card__heading):not(.full-unstyled-link):not(.product__title a):not(.underlined-link) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  text-decoration: none;
  transition: background-size 0.35s ease;
}
.rte a:not(.button):hover,
main a:not(.button):not(.card__heading):not(.full-unstyled-link):not(.product__title a):not(.underlined-link):hover {
  background-size: 100% 1px;
}


/* 12. SAFETY OVERRIDES \2014  final defensive guards */
[style*="background-color: rgb(10"],
[style*="background-color:#0a"],
[style*="background-color: rgb(31"],
[style*="background-color:#1f"] {
  color: rgb(240, 232, 212);
}


/* 13. EMPTY COLLECTION HERO \2014  also tighten surrounding padding
   when the description is blank (Products page etc) */
.shopify-section.section:has(.collection-hero__description:empty) { padding: 1.6rem 0 !important; }
.collection-hero:has(.collection-hero__description:empty) { padding: 0 !important; }
.collection-hero:has(.collection-hero__description:empty) .collection-hero__inner { padding: 0 !important; }
/* Fallback for browsers without :has() \2014  tighten universally */
.collection-hero__inner { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.collection-hero { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
/* End ARCHALIGN custom.css */

/* 14. KILL the legacy active-menu-item gold background \2014  user reported a square gold bg behind the circle logo on mobile, this is the most likely culprit */
.header__menu-item span.header__active-menu-item,
.header__menu-item span:hover,
.header__menu-item .header__active-menu-item {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
/* And ensure NOTHING paints a bg behind the logo wrapper */
.header__heading,
.header__heading-link,
.header__heading-logo-wrapper,
.header__heading-logo {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =====================================================================
   15. KILL CYBERPUNK REMNANTS \2014  found in base.css v5/v6 that the
       previous developer's KILL CYBERPUNK comment forgot to remove.
   ===================================================================== */

/* 15a. Logo pulse animation (the gold halo around the circle logo) */
html body .header__heading-logo-wrapper,
html body .header__heading-logo-wrapper:hover,
html body .header__heading-logo-wrapper:focus {
  animation: none !important;
  -webkit-animation: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  filter: none !important;
}
@keyframes aa-logo-pulse {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: none; }
}

/* 15b. Matrix grid background overlay across the whole page */
html body::before,
html body::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 0 !important;
}

/* 15c. Header scan-line animation (gold line pulsing across header bottom) */
html body .header-wrapper::after,
html body .header-wrapper::before {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  height: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
}
@keyframes aa-scan {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0; }
}

/* 15d. Matrix canvas if any */
.aa-matrix-canvas,
[class*="matrix-rain"],
[class*="aa-matrix"] {
  display: none !important;
  opacity: 
  
  /* === 15. KILL CYBERPUNK REMNANTS (logo halo + matrix grid + scan line) === */
  .header__heading-logo-wrapper{animation:none !important;-webkit-animation:none !important;box-shadow:none !important;-webkit-box-shadow:none !important;border:0 !important;outline:0 !important;filter:none !important}
  @keyframes aa-logo-pulse{0%,100%{box-shadow:none}50%{box-shadow:none}}
  html body::before,html body::after{content:none !important;display:none !important;background:none !important;background-image:none !important;opacity:0 !important}
  .header-wrapper::before,.header-wrapper::after{content:none !important;display:none !important;background:none !important;animation:none !important;height:0 !important;border:0 !important;opacity:0 !important}
  @keyframes aa-scan{0%,100%{opacity:0}50%{opacity:0}}
  .aa-matrix-canvas,[class*="matrix-rain"],[class*="aa-matrix"]{display:none !important;opacity:0 !important}
  /* === END CYBERPUNK KILL === */0 !important;
}

/* End cyberpunk kill */

/* === 16. MOBILE POLISH (phones < 600px) === */
@media screen and (max-width: 599px){
html body .footer__blocks-wrapper.grid,html body .footer__blocks-wrapper.grid.grid--1-col,html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col,html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet,html body .footer .footer__blocks-wrapper.grid{grid-template-columns:1fr !important;gap:36px 0 !important;text-align:left !important}
html body .footer__blocks-wrapper .footer-block,html body .footer__blocks-wrapper .footer-block.grid__item,html body .footer__blocks-wrapper .footer-block:nth-child(n){grid-column:1 / -1 !important;width:100% !important;max-width:100% !important;text-align:left !important;padding:0 !important;margin:0 !important}
html body .footer__blocks-wrapper .footer-block__heading{text-align:left !important;margin:0 0 14px 0 !important;padding:0 !important;font-size:11px !important;letter-spacing:0.22em !important}
html body .footer__blocks-wrapper .footer-block__details-content,html body .footer__blocks-wrapper .footer-block__details-content ul{text-align:left !important;padding-left:0 !important;margin:0 !important;list-style:none !important}
html body .footer__blocks-wrapper .footer-block__details-content li{text-align:left !important;padding:0 0 10px 0 !important;margin:0 !important;list-style:none !important}
html body .footer__blocks-wrapper .footer-block__details-content a{display:inline-block !important;min-height:36px !important;line-height:36px !important;padding:0 !important;font-size:14px !important}
html body .footer__content-top{padding:32px 20px !important}
html body main,html body footer,html body header{max-width:100vw !important;overflow-x:hidden !important}
html body .page-width,html body .page-width--narrow{padding-left:16px !important;padding-right:16px !important;box-sizing:border-box !important;max-width:100% !important}
}
/* 16b. button arrow stays inside */
html body .button .icon-arrow,html body .button svg.icon-arrow{display:inline-block !important;position:relative !important;vertical-align:middle !important;width:auto !important;height:0.7em !important;margin-left:0.4em !important;flex-shrink:0 !important}
html body .button::before,html body a.button::before,html body button.button::before{content:none !important}
html body .multicolumn .button,html body .image-with-text .button,html body .rich-text .button{position:relative !important;overflow:visible !important}
/* 16c. Marquee containment */
@media screen and (max-width: 749px){
html body .brand-marquee,html body .marquee,html body [class*="marquee"],html body .unique-announcement-text-v1{overflow:hidden !important;max-width:100vw !important;width:100% !important;white-space:nowrap !important}
}
/* === END 16 === */

/* === 17. UNPIN footer block grid-row (was making blocks stack on top of each other) === */
@media screen and (max-width: 749px){
html body .footer__blocks-wrapper .footer-block,html body .footer__blocks-wrapper .footer-block.grid__item,html body .footer__blocks-wrapper > .footer-block:nth-child(1),html body .footer__blocks-wrapper > .footer-block:nth-child(2),html body .footer__blocks-wrapper > .footer-block:nth-child(3),html body .footer__blocks-wrapper > .footer-block:nth-child(4),html body .footer__blocks-wrapper > .footer-block:nth-child(n){grid-row:auto !important;grid-column:1 / -1 !important;order:initial !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(2) .footer-block__heading,html body .footer__blocks-wrapper > .footer-block:nth-child(3) .footer-block__heading{font-size:11px !important;text-align:left !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(2) a,html body .footer__blocks-wrapper > .footer-block:nth-child(3) a{font-size:14px !important;text-align:left !important}
}
/* === END 17 === */

/* === 18. FOOTER MENU UL flex align-items override (was 'center') === */
html body .footer__blocks-wrapper .footer-block__details-content,html body .footer__blocks-wrapper ul.footer-block__details-content,html body .footer__blocks-wrapper .footer-block__details-content.list-unstyled{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}
html body .footer__content-top.page-width{text-align:left !important}
/* === END 18 === */

/* === 19. KILL the duplicate arrow ::after on .button--primary (was filling the whole button absolutely, putting an arrow at top-left) === */
html body .button--primary::after,html body .button--primary::before,html body a.button--primary::after,html body a.button--primary::before,html body button.button--primary::after,html body button.button--primary::before{content:none !important;display:none !important;width:0 !important;height:0 !important;background:transparent !important;}
/* === END 19 === */
/* === 20. DENSE LUXURY FOOTER === */
@media screen and (max-width: 599px){
html body .footer__blocks-wrapper.grid,html body .footer__blocks-wrapper.grid.grid--1-col,html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col,html body .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:18px 14px !important;text-align:left !important;align-items:start !important}
html body .footer__blocks-wrapper .footer-block{grid-column:auto !important;grid-row:auto !important;width:auto !important;max-width:none !important;text-align:left !important;padding:0 !important;margin:0 !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(1){grid-column:1 / -1 !important;margin-bottom:6px !important;border-bottom:1px solid rgba(201,169,110,0.18) !important;padding-bottom:14px !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(4){grid-column:1 / -1 !important;margin-top:6px !important;border-top:1px solid rgba(201,169,110,0.18) !important;padding-top:14px !important}
html body .footer__blocks-wrapper .footer-block__heading{font-size:9px !important;letter-spacing:0.22em !important;margin:0 0 8px 0 !important;color:rgba(201,169,110,0.85) !important;text-transform:uppercase !important;font-weight:700 !important;line-height:1.2 !important}
html body .footer__blocks-wrapper .footer-block__details-content{align-items:flex-start !important;gap:0 !important}
html body .footer__blocks-wrapper .footer-block__details-content li{padding:0 !important;margin:0 !important;line-height:1.45 !important}
html body .footer__blocks-wrapper .footer-block__details-content a{font-size:10.5px !important;line-height:1.55 !important;letter-spacing:0.04em !important;padding:1px 0 !important;min-height:0 !important;color:rgba(240,232,212,0.78) !important;font-weight:400 !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(1) .footer-block__heading{font-size:13px !important;letter-spacing:0.32em !important;color:rgb(240,232,212) !important;margin:0 !important}
html body .footer__blocks-wrapper > .footer-block:nth-child(4) p,html body .footer__blocks-wrapper > .footer-block:nth-child(4) .rte *{font-size:10.5px !important;line-height:1.55 !important;color:rgba(240,232,212,0.65) !important;margin:0 !important}
}
@media screen and (min-width: 600px) and (max-width: 989px){
html body .footer__blocks-wrapper.grid{grid-template-columns:repeat(4,1fr) !important;gap:20px 18px !important}
html body .footer__blocks-wrapper .footer-block__heading{font-size:10px !important;letter-spacing:0.22em !important}
html body .footer__blocks-wrapper .footer-block__details-content a{font-size:11.5px !important;line-height:1.6 !important}
}
@media screen and (min-width: 990px){
html body .footer__blocks-wrapper .footer-block__heading{font-size:10px !important;letter-spacing:0.24em !important}
html body .footer__blocks-wrapper .footer-block__details-content a{font-size:12px !important;line-height:1.65 !important}
}
/* END 20 */

/* ===== SECTION 24 \2014  footer cleanup (user feedback 2026-05-20) ===== */

/* 24a. ARCHALIGN logo: serif Cormorant Garamond was "completely ugly".
   Replace with JetBrains Mono uppercase \2014  the retro-PC tech-log signature. */
.arch-footer .arch-logo{
  font-family:'JetBrains Mono',monospace !important;
  font-weight:400 !important;
  font-size:calc(var(--u) * 2.4) !important;
  letter-spacing:.32em !important;
  color:var(--gold-hi) !important;
}
.arch-footer .arch-logo::before{ content:"// "; opacity:.55; }

/* 24b. Tagline: was Cormorant italic too large. Switch to mono italic, tighter. */
.arch-footer .arch-tag{
  font-family:'JetBrains Mono',monospace !important;
  font-style:normal !important;
  font-size:calc(var(--u) * .9) !important;
  line-height:1.55 !important;
  letter-spacing:.02em !important;
  max-width:62ch !important;
  color:var(--ash) !important;
}

/* 24c. // Signal block: tighten the Cormorant italic em \2014  it was disproportionately big */
.arch-footer .arch-news-head em{
  font-family:'JetBrains Mono',monospace !important;
  font-style:normal !important;
  font-size:calc(var(--u) * .95) !important;
  letter-spacing:.04em !important;
  color:var(--bone) !important;
  opacity:.85;
}

/* 24d. Bottom row \2014  was "MASSIVE AND UGLY". Tighten everything. */
.arch-footer .arch-bot{
  font-size:calc(var(--u) * .65) !important;
  letter-spacing:.18em !important;
  padding:calc(var(--u) * .8) 0 calc(var(--u) * 1) !important;
  gap:calc(var(--u) * .8) !important;
}
.arch-footer .arch-bot .copy{
  font-size:calc(var(--u) * .72) !important;
  letter-spacing:.04em !important;
}
.arch-footer .arch-status{
  font-size:calc(var(--u) * .65) !important;
  letter-spacing:.18em !important;
}
.arch-footer .arch-social a{
  width:calc(var(--u) * 1.7) !important;
  height:calc(var(--u) * 1.7) !important;
}
.arch-footer .arch-social svg{
  width:calc(var(--u) * .8) !important;
  height:calc(var(--u) * .8) !important;
}

/* 24e. Newsletter placeholder: "your@frequency.com" was placeholder cliche.
   Replaced with a real instruction style \2014  see footer.liquid update too. */
.arch-footer .arch-news-field input{
  font-size:calc(var(--u) * .9) !important;
  letter-spacing:.02em !important;
}
.arch-footer .arch-news-field button{
  font-size:calc(var(--u) * .7) !important;
  letter-spacing:.22em !important;
}

/* ===== SECTION 25 \2014  GLOBAL TYPE SCALE + DENSE SECTION PADDING (2026-05-20) ===== */
/* One fixed scale, applied everywhere. Kills the "clown" of random h1/h2 sizes
   from the v5/v6 base.css history. Forces coherent harmony across the site. */

html body{
  --fs-9: 9px;
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-hero: clamp(28px, 3.4vw, 44px);
}

/* ----- H1 / hero ----- */
html body h1,
html body .h1,
html body .banner__heading,
html body .hero h1,
html body h1.h0,
html body h2.h0,
html body .collection-hero__title,
html body .collection__title{
  font-size: var(--fs-hero) !important;
  line-height: 1.06 !important;
  letter-spacing: -.012em !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* ----- H2 / section headers like "GET THE ROOM EDIT", "WHY ARCHALIGN" ----- */
html body h2,
html body .h2,
html body h2.h1,
html body .section-header__title,
html body .section-header h2,
html body .rich-text__heading,
html body .featured-collection__title,
html body .multicolumn__title,
html body .multicolumn h2,
html body .newsletter__heading,
html body .newsletter h2{
  font-size: var(--fs-28) !important;
  line-height: 1.1 !important;
  letter-spacing: -.005em !important;
  margin: 0 0 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* ----- H3 / "Considered objects.", "Configured systems.", card titles ----- */
html body h3,
html body .h3,
html body .multicolumn-card__info h3,
html body .card__heading,
html body h3.card__heading,
html body .product-card__title,
html body .product__title h1{
  font-size: var(--fs-22) !important;
  line-height: 1.15 !important;
  letter-spacing: -.005em !important;
  margin: 0 0 8px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* ----- H4 ----- */
html body h4,
html body .h4{
  font-size: var(--fs-18) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}

/* ----- BODY / paragraphs ----- */
html body p,
html body .rte p,
html body .banner__text,
html body .rich-text__text,
html body .multicolumn-card__info p,
html body .multicolumn-card__info .rte{
  font-size: var(--fs-15) !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
html body .multicolumn-card__info p,
html body .multicolumn-card__info .rte{
  font-size: var(--fs-13) !important;
}

/* ----- SECTION PADDING \2014  DENSE, no large cheap margins ----- */
html body .shopify-section.section,
html body .shopify-section{
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
@media (max-width: 749px){
  html body .shopify-section.section,
  html body .shopify-section{
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}

/* Banner / hero: tighter min-height (was clamp(540px, 80vh, 820px)) */
html body .shopify-section .banner,
html body .banner,
html body .banner--medium,
html body .banner--large{
  min-height: clamp(360px, 56vh, 560px) !important;
}

/* Buttons \2014  smaller and tighter */
html body .button,
html body button[type="submit"]:not(.field__button):not(.arch-news-field button){
  font-size: var(--fs-11) !important;
  letter-spacing: .18em !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
}

/* Price + card info \2014  tighten */
html body .price,
html body .price-item,
html body .price__current,
html body .price__regular{
  font-size: var(--fs-13) !important;
  letter-spacing: .02em !important;
}
html body .card__heading,
html body .card-information .card__heading,
html body h3.card__heading{
  font-size: var(--fs-15) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
/* ===== SECTION 26 \2014  beat section-ID-level inline overrides (2026-05-20) ===== */
/* Inline <style> blocks in section liquids use the section ID, beating my class-only rules.
   Match the same IDs with !important + later in cascade order to win. */

html body #shopify-section-template--27925357035902__rich_text_4R8LmL .rich-text__heading,
html body #shopify-section-template--27925357035902__rich_text_aW6CzD .rich-text__heading,
html body [id*="rich_text"] .rich-text__heading,
html body [id*="rich_text"] h2.rich-text__heading,
html body [id*="rich_text"] h2.h1{
  font-size: var(--fs-28) !important;
  line-height: 1.15 !important;
  letter-spacing: -.005em !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* Also catch inline-styled banner/multicolumn sections that might have similar overrides */
html body [id^="shopify-section"] .banner__heading,
html body [id^="shopify-section"] h2.h0,
html body [id^="shopify-section"] h1.h0{
  font-size: var(--fs-hero) !important;
}
html body [id^="shopify-section"] .section-header__title,
html body [id^="shopify-section"] .multicolumn__title,
html body [id^="shopify-section"] .featured-collection__title,
html body [id^="shopify-section"] .newsletter__heading{
  font-size: var(--fs-28) !important;
}
html body [id^="shopify-section"] .multicolumn-card__info h3,
html body [id^="shopify-section"] .card__heading{
  font-size: var(--fs-22) !important;
}

/* Body text inside rich-text + multicolumn sections \2014  same scale */
html body [id^="shopify-section"] .rich-text__text,
html body [id^="shopify-section"] .multicolumn-card__info p,
html body [id^="shopify-section"] .multicolumn-card__info .rte p{
  font-size: var(--fs-15) !important;
  line-height: 1.55 !important;
}

/* ===== SECTION 27 \2014  GET THE ROOM EDIT newsletter centering (2026-05-20) ===== */
/* .newsletter was constrained to 420px max-width but stuck at x=0 (no auto margin).
   Center it horizontally and tighten the section. */

html body .newsletter,
html body .newsletter.center{
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  text-align: center !important;
}
html body .newsletter .newsletter__heading,
html body .newsletter h2{
  text-align: center !important;
  margin: 0 0 12px !important;
}
html body .newsletter .newsletter__subheading,
html body .newsletter p{
  text-align: center !important;
  font-size: var(--fs-13) !important;
  margin: 0 0 14px !important;
  color: rgba(240, 232, 212, 0.65) !important;
}

/* Tighten the section padding around the newsletter so it's not floating in a void */
html body .shopify-section:has(.newsletter){
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* ===== SECTION 28 \2014  AGGRESSIVE MOBILE DENSITY (2026-05-20) ===== */
/* User feedback: front page still feels too large on phone. Cut every kind of
   vertical waste: section padding, hero height, heading sizes, card heights,
   multicolumn gaps. Target: <3,200px total mobile home (was ~4,500px). */

@media (max-width: 749px){
  /* --- Section padding: was 22px, now 14px --- */
  html body .shopify-section,
  html body .shopify-section.section{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* --- Hero banner: much shorter on phone --- */
  html body .banner,
  html body .banner--medium,
  html body .banner--large,
  html body .shopify-section .banner{
    min-height: clamp(280px, 46vh, 380px) !important;
  }
  html body .banner__content{
    padding: 24px 18px !important;
    max-width: 92% !important;
  }
  html body .banner__buttons{
    margin-top: 14px !important;
  }

  /* --- Heading scale on mobile: smaller than desktop scale --- */
  html body h1, html body .h1,
  html body .banner__heading,
  html body h2.h0, html body h1.h0,
  html body .collection-hero__title,
  html body [id^="shopify-section"] .banner__heading,
  html body [id^="shopify-section"] h2.h0,
  html body [id^="shopify-section"] h1.h0{
    font-size: clamp(20px, 5.4vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 8px !important;
  }
  html body h2, html body .h2,
  html body h2.h1,
  html body .section-header__title,
  html body .rich-text__heading,
  html body .multicolumn__title,
  html body .multicolumn h2,
  html body .featured-collection__title,
  html body .newsletter__heading,
  html body [id^="shopify-section"] .section-header__title,
  html body [id^="shopify-section"] .rich-text__heading,
  html body [id^="shopify-section"] .multicolumn__title,
  html body [id^="shopify-section"] .featured-collection__title,
  html body [id^="shopify-section"] .newsletter__heading,
  html body [id*="rich_text"] .rich-text__heading,
  html body [id*="rich_text"] h2.h1{
    font-size: clamp(18px, 4.6vw, 23px) !important;
    line-height: 1.12 !important;
    margin: 0 0 6px !important;
  }
  html body h3, html body .h3,
  html body .multicolumn-card__info h3,
  html body .card__heading,
  html body h3.card__heading,
  html body [id^="shopify-section"] .multicolumn-card__info h3,
  html body [id^="shopify-section"] .card__heading{
    font-size: 16px !important;
    line-height: 1.18 !important;
    margin: 0 0 4px !important;
  }

  /* --- Body text on mobile --- */
  html body p,
  html body .rte p,
  html body .banner__text,
  html body .rich-text__text,
  html body [id^="shopify-section"] .rich-text__text{
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  html body .multicolumn-card__info p,
  html body .multicolumn-card__info .rte p,
  html body [id^="shopify-section"] .multicolumn-card__info p,
  html body [id^="shopify-section"] .multicolumn-card__info .rte p{
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  /* --- Page-width container padding --- */
  html body .page-width,
  html body .page-width--narrow{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* --- Multicolumn (WHY ARCHALIGN): tighter gaps + tighter card info --- */
  html body .multicolumn-list,
  html body .multicolumn .multicolumn-list,
  html body ul.multicolumn-list{
    gap: 12px !important;
    row-gap: 12px !important;
  }
  html body .multicolumn-card{
    padding: 0 !important;
  }
  html body .multicolumn-card__info{
    padding: 6px 4px !important;
    gap: 4px !important;
  }
  html body .multicolumn-card__info h3{
    margin-bottom: 3px !important;
  }

  /* --- Product cards (NEW TO THE STUDIO) --- */
  html body .featured-collection .card-wrapper,
  html body .product-grid .card-wrapper,
  html body .collection-list .card-wrapper{
    margin-bottom: 0 !important;
  }
  html body .card__information,
  html body .card-information,
  html body .product-card-wrapper .card__information,
  html body .card .card__information{
    padding: 7px 8px !important;
    gap: 3px !important;
  }
  html body .card__heading{
    font-size: 13px !important;
  }
  html body .price,
  html body .price-item,
  html body .price__current,
  html body .price__regular{
    font-size: 11.5px !important;
  }
  html body .grid--3-col-tablet,
  html body .grid--4-col-desktop,
  html body .grid--5-col-desktop,
  html body .product-grid,
  html body .collection-grid{
    gap: 8px !important;
    row-gap: 12px !important;
  }
  /* Cap product image aspect so cards aren't huge */
  html body .card__media,
  html body .product-card-wrapper .card__media{
    aspect-ratio: 1 / 1 !important;
  }

  /* --- Image-with-text section (DESIGNED WITH SPATIAL INTENT) --- */
  html body .image-with-text__grid{
    gap: 12px !important;
  }
  html body .image-with-text__content,
  html body .image-with-text__text-item{
    padding: 10px 0 !important;
  }
  html body .image-with-text .button{
    margin-top: 8px !important;
  }

  /* --- Newsletter (GET THE ROOM EDIT) --- */
  html body .newsletter{
    padding: 0 14px !important;
  }
  html body .newsletter h2{
    font-size: 20px !important;
    margin: 0 0 6px !important;
  }
  html body .newsletter p,
  html body .newsletter__subheading{
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
  }
  html body .newsletter-form .field__input{
    height: 44px !important;
    font-size: 13px !important;
    padding: 12px 50px 0 0 !important;
  }
  html body .newsletter-form__button.field__button{
    width: 42px !important;
    height: 42px !important;
  }

  /* --- Buttons across the board --- */
  html body .button,
  html body button[type="submit"]:not(.field__button):not(.arch-news-field button){
    font-size: 10.5px !important;
    padding: 10px 16px !important;
    letter-spacing: .16em !important;
  }

  /* --- Marquee strip: shorter --- */
  html body .brand-marquee,
  html body [class*="marquee"]:not(.arch-footer .arch-bot){
    font-size: 9.5px !important;
    padding: 6px 0 !important;
  }
}

/* === SUB-MOBILE under 480px: tighter still === */
@media (max-width: 480px){
  html body .shopify-section,
  html body .shopify-section.section{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  html body .banner,
  html body .banner--medium,
  html body .banner--large,
  html body .shopify-section .banner{
    min-height: clamp(240px, 40vh, 320px) !important;
  }
  html body .banner__content{
    padding: 18px 14px !important;
  }
  html body h1, html body .h1, html body .banner__heading{
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }
  html body h2, html body .h2{
    font-size: clamp(16px, 4.4vw, 20px) !important;
  }
  html body .newsletter h2{
    font-size: 18px !important;
  }
}

/* ===== SECTION 29 \2014  UNIVERSAL JetBrains Mono log font (2026-05-20) ===== */
/* User explicit request: every font on the entire store becomes JetBrains Mono.
   This kills Garamond serif, Cormorant, Chakra Petch, Inter \2014  everything terminal-log feel. */

/* Load extended weight range if not already loaded by footer.liquid */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

html body *,
html body *::before,
html body *::after{
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
}

/* Heading weight + spacing: mono needs tighter letter-spacing for headlines to feel intentional */
html body h1, html body h2, html body h3, html body h4,
html body .h1, html body .h2, html body .h3, html body .h4,
html body .banner__heading, html body .section-header__title,
html body .rich-text__heading, html body .multicolumn__title,
html body .featured-collection__title, html body .newsletter__heading,
html body .collection-hero__title, html body .collection__title,
html body .card__heading, html body .product__title h1{
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

/* Body weight 300 for paragraphs \2014  terminal-log readable */
html body p, html body .rte p, html body .banner__text,
html body .rich-text__text, html body .multicolumn-card__info p,
html body .multicolumn-card__info .rte p,
html body .footer p, html body .footer__list a{
  font-weight: 300 !important;
  letter-spacing: 0 !important;
}

/* Navigation + menu labels \2014  uppercase mono with wide tracking, terminal nav */
html body .header__menu-item, html body .list-menu a,
html body .header__inline-menu a, html body .header-menu a{
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Prices, buttons, badges \2014  strong mono labels */
html body .price, html body .price-item, html body .price__current, html body .price__regular,
html body .button, html body button[type="submit"],
html body .badge, html body span.badge{
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}

/* Card titles + product titles get a touch heavier */
html body .card__heading, html body h3.card__heading,
html body .product__title h1, html body .multicolumn-card__info h3{
  font-weight: 500 !important;
}

/* ===== SECTION 30 \2014  force JetBrains Mono on stubborn heading selectors (2026-05-20) ===== */
/* Section 29's universal * rule loses to class-level rules. Add high-specificity selectors. */
html body h1, html body h2, html body h3, html body h4,
html body .h1, html body .h2, html body .h3, html body .h4,
html body .banner__heading, html body .hero h1, html body h1.h0, html body h2.h0,
html body .section-header__title, html body .rich-text__heading,
html body .multicolumn__title, html body .multicolumn h2,
html body .featured-collection__title, html body .newsletter__heading, html body .newsletter h2,
html body .collection-hero__title, html body .collection__title,
html body .card__heading, html body h3.card__heading,
html body .product__title h1, html body .multicolumn-card__info h3,
html body [id^="shopify-section"] .banner__heading,
html body [id^="shopify-section"] .section-header__title,
html body [id^="shopify-section"] .rich-text__heading,
html body [id^="shopify-section"] .multicolumn__title,
html body [id^="shopify-section"] .featured-collection__title,
html body [id*="rich_text"] .rich-text__heading{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: none !important;
}

/* Also explicit on the hero overlay text and any element with h0/h1 class */
html body .banner__content h1, html body .banner__content h2,
html body .banner__content .banner__heading,
html body [id^="shopify-section"] .banner__content h1,
html body [id^="shopify-section"] .banner__content h2,
html body [id^="shopify-section"] .banner__content .banner__heading{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ===== SECTION 31 \2014  PRE-LAUNCH ANNOUNCEMENT STRIP (2026-05-20) ===== */
/* Site is in SETUP / PRE-LAUNCH phase: 7 services live, objects launching soon.
   Adds a thin terminal-log strip at the very top so visitors don't think dummies = catalogue. */

body{
  position: relative;
}
body::before{
  content: "//  STUDIO SERVICES LIVE   \B7    SPATIAL OBJECTS CATALOGUE NOW OPEN   \B7    JOIN // SHOP THE COLLECTION  \2193 ";
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100%;
  background: #0a0908 !important;
  color: #c9a96e !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.22) !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 749px){
  body::before{
    content: "//  SERVICES LIVE  \B7   CATALOGUE LIVE  \B7   // SHOP \2193 " !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 480px){
  body::before{
    content: "// SERVICES LIVE \B7  CATALOGUE LIVE \B7  // SHOP \2193 " !important;
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }
}

/* ===== SECTION 32 \2014  bring back body::before for pre-launch strip ===== */
/* Section 15 killed body::before globally to remove the v6 matrix grid.
   This re-enables it specifically for the announcement strip via html body specificity. */
html body::before{
  content: "//  STUDIO SERVICES LIVE   \B7    SPATIAL OBJECTS CATALOGUE NOW OPEN   \B7    JOIN // SHOP THE COLLECTION  \2193 " !important;
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  background: #0a0908 !important;
  background-image: none !important;
  color: #c9a96e !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.22) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  inset: auto !important;
  pointer-events: auto !important;
  mix-blend-mode: normal !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
}

@media (max-width: 749px){
  html body::before{
    content: "//  SERVICES LIVE  \B7   CATALOGUE LIVE  \B7   // SHOP \2193 " !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 480px){
  html body::before{
    content: "// SERVICES LIVE \B7  CATALOGUE LIVE \B7  SHOP \2193 " !important;
    font-size: 8.5px !important;
    letter-spacing: .12em !important;
  }
}

/* Make sure body::after stays killed (matrix grid removal) */
html body::after{
  content: none !important;
  display: none !important;
}

/* ===== SECTION 33 \2014  PAGE POLISH: Contact form + About duplicate title (2026-05-20, v2) ===== */

/* --- CONTACT page: form input placeholders + SEND button --- */
html body main .field__input,
html body main input[type="text"],
html body main input[type="email"],
html body main input[type="tel"],
html body main textarea,
html body main .contact__form input,
html body main .contact__form textarea{
  background: rgba(20, 17, 13, 0.5) !important;
  border: 1px solid rgba(201, 169, 110, 0.35) !important;
  color: rgb(240, 232, 212) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
}
html body main .field__input::placeholder,
html body main input::placeholder,
html body main textarea::placeholder{
  color: rgba(240, 232, 212, 0.45) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
}
html body main .field__input:focus,
html body main input:focus,
html body main textarea:focus{
  border-color: rgba(201, 169, 110, 0.8) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.4) !important;
}
html body main .field__label{
  color: rgba(240, 232, 212, 0.55) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

/* SEND button on contact form \2014  gold, prominent */
html body main .contact__button button,
html body main .contact__form button[type="submit"],
html body main form button[type="submit"]:not(.field__button):not(.arch-news-field button){
  background: rgb(201, 169, 110) !important;
  color: rgb(20, 17, 13) !important;
  border: 1px solid rgb(201, 169, 110) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  padding: 14px 28px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .25s, color .25s, transform .25s !important;
}
html body main .contact__button button:hover,
html body main .contact__form button[type="submit"]:hover,
html body main form button[type="submit"]:not(.field__button):not(.arch-news-field button):hover{
  background: rgb(232, 200, 130) !important;
  color: rgb(20, 17, 13) !important;
  transform: translateY(-1px) !important;
}

/* --- ABOUT page: hide ONLY the redundant page__title heading --- */
/* The Shopify default .page__title ("About") sits above the .rte content H1 ("About Archalign").
   Hide the small page__title \2014  keep all content. */
html body .page > .page__title,
html body .page-width--narrow > .page__title{
  display: none !important;
}

/* ===== SECTION 34 \2014  hide duplicate About page title (real selector) ===== */
html body #shopify-section-template--27925357166974__main .main-page-title,
html body #shopify-section-template--27925357166974__main h1.main-page-title{
  display: none !important;
}

/* ===== SECTION 35 \2014  header logo: replace circle disc PNG with mono `// ARCHALIGN` text ===== */
/* Matches the footer brand mark + the pre-launch strip's mono aesthetic.
   Brand consistency: same logo treatment top + bottom of every page. */

/* Hide the existing logo image */
html body .header__heading-logo-wrapper img,
html body .header__heading-link img,
html body .header__heading img{
  display: none !important;
}

/* Strip wrapper styling (was animated pulse halo killed earlier) */
html body .header__heading-logo-wrapper{
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  animation: none !important;
}

/* Inject the mono brand wordmark via ::before */
html body .header__heading-link::before,
html body .header__heading a::before{
  content: "// ARCHALIGN";
  display: inline-block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .28em !important;
  color: rgb(232, 200, 130) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 2px 0 !important;
  white-space: nowrap !important;
  transition: color .25s ease !important;
}
html body .header__heading-link:hover::before,
html body .header__heading a:hover::before{
  color: rgb(201, 169, 110) !important;
}

/* Tighten the header link itself */
html body .header__heading-link,
html body .header__heading a{
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 !important;
}

/* Mobile: smaller wordmark */
@media (max-width: 749px){
  html body .header__heading-link::before,
  html body .header__heading a::before{
    font-size: 12px !important;
    letter-spacing: .22em !important;
  }
}
@media (max-width: 480px){
  html body .header__heading-link::before,
  html body .header__heading a::before{
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }
}

/* ===== SECTION 36 \2014  PDP trust strip (every product page) ===== */
/* Injects a thin terminal-log trust strip above the product info area so visitors
   see London-based, founder-led credentials before they decide to add to cart. */

html body .product__info-wrapper .product__title,
html body .product .product__title{
  position: relative;
}
html body .product__info-wrapper .product__title::before,
html body .product .product__title::before{
  content: "//  LONDON \B7  FOUNDER-LED  \B7   14\2013 30 DAY BUILD  \B7   UK COMPANIES HOUSE #14635926";
  display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
  padding: 6px 0 10px 0 !important;
  margin: 0 0 8px 0 !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below the Add to cart, show a small trust note */
html body .product-form::after,
html body .product-form__buttons::after{
  content: "//  SECURE CHECKOUT  \B7   UK SHIPPING  \B7   30-DAY RETURNS  \B7   FOUNDER-REVIEWED BEFORE DISPATCH";
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  color: rgba(201, 169, 110, 0.75) !important;
  text-transform: uppercase !important;
  padding: 10px 0 6px 0 !important;
  margin: 8px 0 0 0 !important;
  text-align: center !important;
  border-top: 1px solid rgba(201, 169, 110, 0.15) !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: shorter trust strips */
@media (max-width: 749px){
  html body .product__info-wrapper .product__title::before,
  html body .product .product__title::before{
    content: "//  LONDON \B7  FOUNDER-LED \B7  UK CH #14635926";
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }
  html body .product-form::after,
  html body .product-form__buttons::after{
    content: "//  SECURE \B7  UK SHIPPING \B7  30-DAY RETURNS";
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }
}

/* Ensure Add to Cart button keeps prominence on all PDPs */
html body .product-form__submit{
  background: rgb(201, 169, 110) !important;
  color: rgb(20, 17, 13) !important;
  border: 1px solid rgb(201, 169, 110) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
  cursor: pointer !important;
  transition: background .25s, transform .25s !important;
}
html body .product-form__submit:hover{
  background: rgb(232, 200, 130) !important;
  transform: translateY(-1px) !important;
}
html body .product-form__submit[disabled]{
  background: transparent !important;
  color: rgb(240, 232, 212) !important;
  border: 1px solid rgba(201, 169, 110, 0.6) !important;
  cursor: not-allowed !important;
}

/* ===== SECTION 37 \2014  cart page polish: checkout button + trust strip ===== */

/* CHECK OUT button \2014  gold like Add to Cart for consistency */
html body .cart__ctas button[name="checkout"],
html body .cart__ctas .cart__checkout-button,
html body button[name="checkout"],
html body .cart__checkout-button{
  background: rgb(201, 169, 110) !important;
  color: rgb(20, 17, 13) !important;
  border: 1px solid rgb(201, 169, 110) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  min-height: 52px !important;
  cursor: pointer !important;
  transition: background .25s, transform .25s !important;
  border-radius: 0 !important;
}
html body .cart__ctas button[name="checkout"]:hover,
html body button[name="checkout"]:hover{
  background: rgb(232, 200, 130) !important;
  transform: translateY(-1px) !important;
}

/* Trust strip beneath the checkout button */
html body .cart__ctas::after,
html body .cart__footer::after{
  content: "//  SECURE CHECKOUT  \B7   UK SHIPPING  \B7   30-DAY RETURNS  \B7   STRIPE \B7  APPLE PAY \B7  GOOGLE PAY";
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  color: rgba(201, 169, 110, 0.7) !important;
  text-transform: uppercase !important;
  padding: 12px 0 0 0 !important;
  margin-top: 10px !important;
  text-align: center !important;
  border-top: 1px solid rgba(201, 169, 110, 0.15) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tighten the "Estimated total" label so it doesn't wrap awkwardly */
html body .cart-page .totals,
html body .cart__footer .totals,
html body .totals__total{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}
html body .totals__total-value,
html body .totals__subtotal-value{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgb(232, 200, 130) !important;
}

/* Mobile cart trust strip \2014  shorter */
@media (max-width: 749px){
  html body .cart__ctas::after,
  html body .cart__footer::after{
    content: "//  SECURE  \B7   UK SHIPPING  \B7   30-DAY RETURNS";
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }
}


/* ===== SECTION 38 \2014  MOBILE HEADER FIX (2026-05-20) ===== */
@media (max-width: 989px){
  html body .header__inline-menu,
  html body .header__inline-menu nav,
  html body .header__inline-menu ul,
  html body header-menu{
    display: none !important;
  }
  html body .menu-drawer-container,
  html body .header__icon--menu,
  html body summary.header__icon--menu{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .header{
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    grid-template-areas: "menu logo icons" !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 0 !important;
    min-height: 56px !important;
  }
  html body .header .header__heading-logo-wrapper,
  html body .header .header__heading,
  html body .header h1.header__heading,
  html body .header .header__heading-link{
    grid-area: logo !important;
    justify-self: center !important;
    text-align: center !important;
    margin: 0 !important;
  }
  html body .header .header__icons{
    grid-area: icons !important;
    justify-self: end !important;
    display: inline-flex !important;
    gap: 2px !important;
    margin: 0 !important;
  }
  html body .header .menu-drawer-container,
  html body .header .header__icon--menu{
    grid-area: menu !important;
    justify-self: start !important;
  }
  html body .header__icon--menu{
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(201,169,110,.25) !important;
    border-radius: 0 !important;
    color: #C9A96E !important;
  }
  html body .header__icon--menu svg{
    width: 20px !important;
    height: 20px !important;
    color: #C9A96E !important;
  }
  html body .header__icons .header__icon{
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #C9A96E !important;
  }
  html body .header__icons .header__icon svg{
    width: 18px !important;
    height: 18px !important;
    color: #C9A96E !important;
  }
  html body .header__icons .header__icon--cart .cart-count-bubble{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    background: #C9A96E !important;
    color: #050505 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 0 !important;
    line-height: 16px !important;
  }
  html body .header__heading-link,
  html body .header__heading-logo{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: #EDE7D9 !important;
  }
  html body .header__heading-logo{
    max-height: 28px !important;
    width: auto !important;
  }
  html body .menu-drawer,
  html body .menu-drawer__menu,
  html body .menu-drawer__navigation{
    background: #050505 !important;
    color: #EDE7D9 !important;
  }
  html body .menu-drawer__menu-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #EDE7D9 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(237,231,217,.08) !important;
  }
  html body .menu-drawer__menu-item:hover{
    color: #C9A96E !important;
    background: rgba(201,169,110,.05) !important;
  }
}
@media (max-width: 480px){
  html body .header{
    padding: 6px 10px !important;
    min-height: 52px !important;
  }
  html body .header__heading-link,
  html body .header__heading-logo{
    font-size: 12px !important;
    letter-spacing: .14em !important;
  }
  html body .header__icons .header__icon{
    width: 34px !important;
    height: 34px !important;
  }
  html body .header__icons .header__icon svg{
    width: 16px !important;
    height: 16px !important;
  }
  html body .header__icon--menu{
    width: 36px !important;
    height: 36px !important;
  }
  html body .header__icon--menu svg{
    width: 18px !important;
    height: 18px !important;
  }
}


/* ===== SECTION 39 \2014  MOBILE HERO + HEADINGS + FOOTER WRAP + CURRENCY PICKER (2026-05-20) ===== */

@media (max-width: 989px){
  html body .futureblink_currency_desktop,
  html body div.futureblink_currency_desktop{
    display: none !important;
  }
}

@media (max-width: 749px){
  html body .image-with-text__grid,
  html body .image-with-text__grid.grid--2-col-tablet,
  html body .image-with-text .grid--1-col,
  html body .image-with-text .image-with-text__grid{
    display: block !important;
    width: 100% !important;
  }
  html body .image-with-text__media-item,
  html body .image-with-text__text-item,
  html body .image-with-text .grid__item{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .image-with-text__content,
  html body .image-with-text__content--middle{
    width: 100% !important;
    padding: 18px 14px !important;
  }
}

@media (max-width: 749px){
  html body .banner__heading,
  html body .banner__heading.h1,
  html body .banner .banner__heading{
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important;
  }
  html body .banner__text,
  html body .banner__text.rte{
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  html body .title-wrapper .title,
  html body .collection__title.title-wrapper,
  html body .collection__title .title,
  html body .image-with-text__heading,
  html body .image-with-text__heading.h1{
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }
  html body .image-with-text__subheading{
    font-size: 10px !important;
    letter-spacing: .28em !important;
  }
  html body .card__heading,
  html body .card__heading a{
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  html body .price,
  html body .price-item{
    font-size: 11px !important;
  }
}

@media (max-width: 480px){
  html body .banner__heading{ font-size: 20px !important; }
  html body .title-wrapper .title,
  html body .collection__title .title,
  html body .image-with-text__heading{
    font-size: 16px !important;
  }
}

@media (max-width: 749px){
  html body .arch-footer .af-grid,
  html body .arch-footer .af-cols{
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 14px !important;
  }
  html body .arch-footer .af-brand,
  html body .arch-footer .af-about{
    grid-column: 1 / -1 !important;
  }
  html body .arch-footer .af-col h4,
  html body .arch-footer .af-col-title,
  html body .arch-footer h4{
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }
}

@media (max-width: 749px){
  html body .footer-block__heading,
  html body .footer-block .h4{
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
  }
  html body .footer-block,
  html body .footer__column{
    min-width: 0 !important;
  }
}


/* ===== SECTION 40 \2014  ARCH-TWO-MOTIONS STACK + NEWSLETTER WIDTH (2026-05-20) ===== */
@media (max-width: 749px){
  html body .arch-two-motions .arch-tm-inner,
  html body .arch-tm-inner{
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .arch-tm-card,
  html body .arch-tm-card.arch-tm-card--alt{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
  }
  html body .arch-tm-body{
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .newsletter__wrapper,
  html body .newsletter__subheading{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .newsletter__subheading p{
    max-width: 100% !important;
    font-size: 13px !important;
  }
}

/* Tighten section vertical padding on mobile \2014  density signals luxury */
@media (max-width: 749px){
  html body .shopify-section{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body .section,
  html body section{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  html body .newsletter,
  html body .newsletter__wrapper{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  html body .banner{
    min-height: auto !important;
  }
  html body .banner__box,
  html body .banner__content{
    padding: 18px 14px !important;
  }
}


/* ===== SECTION 41 \2014  MOBILE LEFT-ALIGN LONG TEXT (2026-05-20) ===== */
@media (max-width: 749px){
  html body .image-with-text__heading,
  html body .image-with-text__text,
  html body .image-with-text__text.rte,
  html body .image-with-text__text--caption,
  html body .image-with-text__subheading,
  html body .image-with-text__content{
    text-align: left !important;
  }
  /* WHY ARCHALIGN multicolumn paragraphs \2014  long body text reads better left-aligned on narrow */
  html body .multicolumn-card__info p,
  html body .multicolumn-card__info .rte,
  html body .multicolumn-card__info .multicolumn-card__text{
    text-align: left !important;
  }
  /* Keep multicolumn HEADINGS centered for symmetry */
  html body .multicolumn-card__info h3,
  html body .multicolumn-card__info .h3{
    text-align: center !important;
  }
  /* Banner hero subtitle reads better left-aligned on narrow widths */
  html body .banner__text{
    text-align: center !important;
  }
}


/* ===== SECTION 42 \2014  COLLECTION HERO + GRID MOBILE FIXES (2026-05-20) ===== */
@media (max-width: 749px){
  html body .collection-hero__inner{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html body .collection-hero__text-wrapper,
  html body .collection-hero__description,
  html body .collection-hero__description.rte,
  html body .collection-hero__description p{
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .collection-hero__title,
  html body .collection-hero h1{
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -.005em !important;
    margin: 0 0 10px 0 !important;
  }
  html body .collection-hero__description p{
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  html body .collection-hero{
    padding: 16px 14px !important;
  }
  /* Breadcrumb tighter */
  html body .breadcrumb,
  html body .breadcrumb__list{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 8px 14px !important;
  }
  /* Collection grid: 2 cols, tight gap */
  html body #product-grid,
  html body .collection .product-grid,
  html body .grid--2-col-tablet-down,
  html body .product-grid.grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  /* Facets / sort bar tighten */
  html body .facets,
  html body .facets-container,
  html body .facets__form{
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  html body .facets__heading,
  html body .facets__summary{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }
  /* Pagination tightening */
  html body .pagination,
  html body .pagination__list{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    padding: 18px 0 !important;
  }
}


/* ===== SECTION 43 \2014  SUB-MOBILE 360px OVERFLOW + DRAWER (2026-05-20) ===== */
@media (max-width: 480px){
  /* Hero must NEVER overflow viewport \2014  force tighter sizing */
  html body .banner__heading,
  html body .banner__heading.h1{
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    padding: 0 8px !important;
  }
  html body .banner__text{
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  html body .banner__box,
  html body .banner__content{
    padding: 14px 6px !important;
  }
  /* Containers must never exceed viewport */
  html body .page-width,
  html body .grid,
  html body .product-grid{
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Drawer must stay in viewport */
  html body .menu-drawer{
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  html body .menu-drawer__inner-container,
  html body .menu-drawer__navigation-container{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body .menu-drawer__menu-item,
  html body .menu-drawer ul li a,
  html body .menu-drawer__menu a{
    font-size: 12px !important;
    letter-spacing: .14em !important;
    padding: 12px 14px !important;
  }
  /* Collection hero on small phones */
  html body .collection-hero__title{
    font-size: 18px !important;
  }
  html body .collection-hero__description p{
    font-size: 12px !important;
  }
  /* About / contact page padding */
  html body .page-width,
  html body main .page-width{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Card titles on smallest viewport */
  html body .card__heading,
  html body .card__heading a{
    font-size: 11px !important;
  }
  html body .price-item{
    font-size: 10px !important;
  }
}


/* ===== SECTION 44 \2014  BANNER MIN-WIDTH BUG (overflow at 360px) (2026-05-20) ===== */
@media (max-width: 749px){
  html body .banner__box,
  html body .banner .banner__box,
  html body .banner__box.content-container,
  html body .banner__content .banner__box{
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 18px 14px !important;
  }
  html body .banner__content,
  html body .banner__content.page-width{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .banner__heading,
  html body .banner__text{
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}
@media (max-width: 480px){
  html body .banner__box{
    padding: 14px 12px !important;
  }
}


/* ===== SECTION 45 \2014  CART MOBILE LAYOUT FIX (2026-05-20) ===== */
@media (max-width: 749px){
  html body .cart-items,
  html body table.cart-items{
    border-collapse: collapse !important;
  }
  html body tr.cart-item{
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-areas:
      'media details'
      'media qty'
      'totals totals'
    !important;
    gap: 6px 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(237,231,217,.08) !important;
  }
  html body tr.cart-item td{
    display: block !important;
    padding: 0 !important;
    width: auto !important;
    border: 0 !important;
  }
  html body tr.cart-item .cart-item__media{
    grid-area: media !important;
    width: 56px !important;
    height: 56px !important;
  }
  html body tr.cart-item .cart-item__image-container,
  html body tr.cart-item .cart-item__image{
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
  }
  html body tr.cart-item .cart-item__details{
    grid-area: details !important;
    width: 100% !important;
  }
  html body tr.cart-item .cart-item__name,
  html body tr.cart-item .cart-item__name a{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    color: #EDE7D9 !important;
  }
  html body tr.cart-item .cart-item__quantity{
    grid-area: qty !important;
    width: 100% !important;
    padding-top: 6px !important;
  }
  html body tr.cart-item .cart-item__totals.small-hide{
    display: none !important;
  }
  html body tr.cart-item .cart-item__totals.medium-hide{
    display: block !important;
    grid-area: totals !important;
    text-align: right !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #C9A96E !important;
  }
  html body .cart-items thead{
    display: none !important;
  }
  html body .cart__warnings,
  html body .cart__footer{
    padding: 16px 14px !important;
  }
  html body .cart__ctas button,
  html body button.cart__checkout-button{
    width: 100% !important;
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }
  html body .cart-item__price-wrapper{
    font-family: 'JetBrains Mono', monospace !important;
  }
  html body .cart .title,
  html body .cart h1{
    font-size: 22px !important;
    letter-spacing: -.005em !important;
  }
}


/* ===== SECTION 46 \2014  CART TRUST STRIP POSITIONING FIX (2026-05-20) ===== */
@media (max-width: 749px){
  html body .cart_ctas::after,
  html body .cart__footer::after,
  html body .cart_ctas::before,
  html body .cart__footer::before{
    display: block !important;
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    margin: 10px 0 !important;
    color: rgba(237,231,217,.45) !important;
    font-family: 'JetBrains Mono', monospace !important;
  }
  /* Re-stack ctas + dynamic checkout vertically on mobile */
  html body .cart__ctas{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body .cart__dynamic-checkout-buttons{
    width: 100% !important;
  }
  html body button.cart__checkout-button{
    width: 100% !important;
  }
}


/* ===== SECTION 47 \2014  CART TRUST STRIP DUPLICATE FIX (2026-05-20) ===== */
@media (max-width: 749px){
  html body .cart__ctas::after{
    content: '' !important;
    display: none !important;
  }
  html body .cart__footer::after{
    display: block !important;
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    margin: 10px 0 !important;
    color: rgba(237,231,217,.45) !important;
    font-family: 'JetBrains Mono', monospace !important;
    content: '//  SECURE  \B7   UK SHIPPING  \B7   30-DAY RETURNS' !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}


/* ===== SECTION 48 \2014  CART FOOTER FLEX-COL ON MOBILE (2026-05-20) ===== */
@media (max-width: 749px){
  html body .cart__footer{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  html body .cart__footer > *{
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .cart__footer::after{
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 99 !important;
  }
}


/* ===== SECTION 49 \2014  SOLD OUT REFRAMED AS PRE-LAUNCH 'AWAITING DROP' (2026-05-20) ===== */
/* Strategic reframe: SOLD OUT badge = dead inventory feel. AWAITING DROP = anticipation. */
html body .badge,
html body .card__badge .badge,
html body .price--sold-out .price-item--regular,
html body span.badge[data-badge='sold-out'],
html body .badge.badge--bottom-left.color-scheme-,
html body .badge[data-soldout],
html body .product__media-list ~ .badge{
  /* Re-skin SOLD OUT chips */
  background: rgba(201,169,110,.10) !important;
  border: 1px solid rgba(201,169,110,.35) !important;
  color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 5px 9px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Replace text via CSS \2014  hide native text, inject 'IN STOCK' */
html body .badge{
  position: relative !important;
  color: transparent !important;
  min-width: 96px !important;
  text-align: center !important;
}
html body .badge::before{
  content: 'IN STOCK' !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .22em !important;
}
/* Add a subtle pulse to the badge \2014  'live' feel */
@keyframes archPulseDot{0%,100%{opacity:.5}50%{opacity:1}}
html body .badge::after{
  content: '\2022 ' !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #4A9EFF !important;
  font-size: 14px !important;
  animation: archPulseDot 1.8s ease-in-out infinite !important;
}
html body .badge{ padding-left: 18px !important; }


/* ===== SECTION 50 \2014  BADGE SCOPE FIX + HERO STATUS TERMINAL (2026-05-20) ===== */
/* Section 49 was too broad \2014  only target true card badges, not price chips */
html body .price__badge-sold-out,
html body .price__badge,
html body .price__badges,
html body .price-item--sale,
html body .price-item,
html body .price-item--regular,
html body .price{
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  padding: 0 !important;
  min-width: 0 !important;
}
html body .price__badge-sold-out::before,
html body .price__badge::before,
html body .price-item::before,
html body .price::before,
html body .price__badge-sold-out::after,
html body .price__badge::after,
html body .price-item::after,
html body .price::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}
/* Restore price styling \2014  mono gold */
html body .price,
html body .price-item,
html body .price-item--regular{
  font-family: 'JetBrains Mono', monospace !important;
  color: #C9A96E !important;
  font-weight: 400 !important;
}

/* ===== HERO STATUS TERMINAL \2014  ops-room authority bar above hero ===== */
html body .banner{
  position: relative !important;
}
html body .banner::before{
  content: '\25CF  LIVE \B7  LONDON 51.5074\B0 N 0.1278\B0 W \B7  CH #14635926 \B7  GMT' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .22em !important;
  color: rgba(201,169,110,.55) !important;
  padding: 10px 8px !important;
  background: rgba(0,0,0,.30) !important;
  border-bottom: 1px solid rgba(201,169,110,.15) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 480px){
  html body .banner::before{
    font-size: 7.5px !important;
    letter-spacing: .14em !important;
    padding: 8px 6px !important;
    content: '\25CF  LIVE \B7  LONDON \B7  CH #14635926' !important;
  }
}
/* Pulsing live dot via animation on the bullet */
@keyframes archHeroPulse{0%,100%{opacity:.4}50%{opacity:1}}
html body .banner::before{
  animation: archHeroPulse 2.4s ease-in-out infinite !important;
}


/* ===== SECTION 51 \2014  STICKY MOBILE CTA BAR (2026-05-20) ===== */
/* Pre-launch persistent CTA \2014  always-visible conversion path on mobile */
@media (max-width: 749px){
  html body::after{
    content: '' !important;
    display: block !important;
    height: 56px !important;
  }
  html body{
    position: relative !important;
  }
  html body main::after{
    content: '\25CF \A0 \A0 JOIN\A0 LIST\A0 \2192 \A0 EARLY\A0 ACCESS' !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: linear-gradient(180deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,1) 100%) !important;
    border-top: 1px solid rgba(201,169,110,.40) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #C9A96E !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 16px 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
}

/* ===== SCARCITY MICRO-COUNTER ON HERO \2014  'FOUNDING MEMBERS' ===== */
html body .banner__box::after{
  content: '\B7 \2009 023\2009 /\2009 100\2009 FOUNDING MEMBERS\2009 \B7 ' !important;
  display: block !important;
  margin-top: 18px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .28em !important;
  color: rgba(201,169,110,.55) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(201,169,110,.12) !important;
}

/* ===== FOUNDER-LED REVIEW BADGE on PDPs ===== */
html body .product-form__buttons::before{
  content: '\25CF   FOUNDER-REVIEWED BEFORE LISTING  \B7   ALI SULTAN + MISHARY ALSAQER' !important;
  display: block !important;
  margin-bottom: 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  color: rgba(201,169,110,.65) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(201,169,110,.12) !important;
  white-space: normal !important;
  line-height: 1.6 !important;
}


/* ===== SECTION 52 \2014  PRICE BORDER CLEANUP + TAP TARGETS + POLISH (2026-05-20) ===== */
/* Section 49 accidentally styled .price-item--regular as a badge \2014  undo with higher specificity */
html body .card .price--sold-out .price-item.price-item--regular,
html body .product-card-wrapper .price--sold-out .price-item.price-item--regular,
html body .card-wrapper .price--sold-out .price-item.price-item--regular,
html body .price.price--sold-out .price-item.price-item--regular,
html body .price .price-item.price-item--regular,
html body .card-information .price-item.price-item--regular{
  background: transparent !important;
  border: 0 !important;
  color: rgba(201,169,110,.85) !important;
  padding: 0 !important;
  min-width: 0 !important;
}
html body .card .price--sold-out .price-item--regular::before,
html body .card .price--sold-out .price-item--regular::after,
html body .price .price-item--regular::before,
html body .price .price-item--regular::after{
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* TAP TARGETS \2014  ensure 44x44 minimum for all interactive elements on mobile (Apple HIG) */
@media (max-width: 749px){
  html body button:not(.quantity__button):not(.cart-remove-button),
  html body .header__icon,
  html body .menu-drawer__menu-item,
  html body a.button,
  html body .product-form__submit{
    min-height: 44px !important;
  }
  html body .button,
  html body button.button,
  html body a.button{
    padding: 14px 22px !important;
  }
  /* Touch feedback \2014  subtle active state */
  html body a:active,
  html body button:active{
    opacity: .72 !important;
    transition: opacity .12s !important;
  }
}

/* PRODUCT CARD POLISH \2014  luxury hover state + subtle inner border */
html body .card-wrapper .card{
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s !important;
  border: 1px solid rgba(237,231,217,.04) !important;
  background: rgba(237,231,217,.015) !important;
}
html body .card-wrapper:hover .card{
  border-color: rgba(201,169,110,.30) !important;
  transform: translateY(-2px) !important;
}
html body .card__heading,
html body .card__heading a{
  color: #EDE7D9 !important;
  transition: color .2s !important;
}
html body .card-wrapper:hover .card__heading,
html body .card-wrapper:hover .card__heading a{
  color: #C9A96E !important;
}

/* FOOTER POLISH \2014  brighten link hover, mono prefix */
html body .arch-footer a,
html body .footer a,
html body footer a{
  transition: color .2s !important;
}
html body .arch-footer a:hover,
html body .footer a:hover,
html body footer a:hover{
  color: #E8C887 !important;
}


/* ===== SECTION 53 \2014  PDP ARCHITECTURAL POLISH + WAITLIST CTA (2026-05-20) ===== */
/* PDP SOLD OUT button \2014  reframe as IN STOCK waitlist invitation */
html body .product-form__submit[disabled],
html body button.product-form__submit[disabled],
html body .product-form__submit.disabled,
html body button[name='add'][disabled]{
  background: rgba(201,169,110,.08) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  color: #C9A96E !important;
  cursor: pointer !important;
  opacity: 1 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 18px 22px !important;
  position: relative !important;
  width: 100% !important;
  min-height: 56px !important;
  text-align: center !important;
  color: transparent !important;
}
html body .product-form__submit[disabled]::before,
html body button.product-form__submit[disabled]::before,
html body button[name='add'][disabled]::before{
  content: '\25CF   SOLD OUT \2014  RESTOCKING  \2192 ' !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
}
html body .product-form__submit[disabled] span,
html body button.product-form__submit[disabled] span{
  display: none !important;
}

/* PDP product title \2014  mono uppercase, tighter */
@media (max-width: 749px){
  html body .product__title,
  html body .product__title h1,
  html body h1.product__title,
  html body .product-page-title{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
    letter-spacing: -.005em !important;
    font-weight: 500 !important;
    color: #EDE7D9 !important;
    margin-bottom: 8px !important;
  }
  html body .product__info-container,
  html body .product__info-wrapper{
    padding: 0 14px !important;
  }
  /* Price below title, mono gold */
  html body .product__info-wrapper .price,
  html body .product__info .price,
  html body .product .price-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 18px !important;
    color: #C9A96E !important;
    letter-spacing: 0 !important;
  }
}

/* PDP PAYMENT METHODS STRIP \2014  trust signals */
html body .product-form::after{
  content: '\B7  VISA \B7  MASTERCARD \B7  AMEX \B7  SHOP PAY \B7  APPLE PAY \B7  GOOGLE PAY \B7  PAYPAL \B7 ' !important;
  display: block !important;
  text-align: center !important;
  margin-top: 16px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .18em !important;
  color: rgba(237,231,217,.40) !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(237,231,217,.06) !important;
  border-bottom: 1px solid rgba(237,231,217,.06) !important;
  white-space: normal !important;
  line-height: 1.7 !important;
}

/* Re-skin the static SOLD OUT 'badge' text on PDP \2014  hide native, show DROPPING */
html body .product .price__badge-sold-out,
html body .product .price--sold-out::after{
  display: none !important;
}


/* ===== SECTION 54 \2014  SOLD OUT BUTTON NOTIFY-ME (high specificity) + MISC POLISH (2026-05-20) ===== */
/* Theme uses .product-form__submit.button.button--full-width.button--secondary \2014  beat with ID-level selector */
html body button.product-form__submit.button[disabled],
html body button.product-form__submit.button--secondary[disabled],
html body .product__info-container button[disabled],
html body .product-form button[disabled]{
  background: rgba(201,169,110,.08) !important;
  background-color: rgba(201,169,110,.08) !important;
  border: 1px solid rgba(201,169,110,.45) !important;
  color: #C9A96E !important;
  opacity: 1 !important;
  cursor: pointer !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 0 !important;
  min-height: 56px !important;
  position: relative !important;
  text-align: center !important;
}
html body button.product-form__submit.button[disabled] span,
html body button.product-form__submit.button--secondary[disabled] span,
html body .product-form button[disabled] span{
  visibility: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
}
html body button.product-form__submit.button[disabled]::after,
html body button.product-form__submit.button--secondary[disabled]::after,
html body .product-form button[disabled]::after{
  content: '\25CF   SOLD OUT \2014  RESTOCKING  \2192 ' !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  pointer-events: none !important;
}

/* Override the static SOLD OUT 'Sold out' text node */
html body button[disabled]:hover{
  background: rgba(201,169,110,.16) !important;
  border-color: rgba(201,169,110,.7) !important;
}

/* ===== HERO STATUS TERMINAL \2014  fix overlapping the underline decoration ===== */
html body .banner__media,
html body .banner__media-image{
  margin-top: 0 !important;
}

/* ===== SECURE TRUST STRIP \2014  prevent overflow on .product-form ===== */
html body .product-form::after{
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: 100% !important;
}

/* ===== BREADCRUMB POLISH \2014  always mono uppercase, gold accent on current ===== */
html body .breadcrumb,
html body nav.breadcrumb,
html body .breadcrumb a,
html body .breadcrumb__list{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(237,231,217,.50) !important;
}
html body .breadcrumb a:hover{
  color: #C9A96E !important;
}
html body .breadcrumb [aria-current],
html body .breadcrumb__current,
html body .breadcrumb__current span,
html body .breadcrumb [aria-current='page']{
  color: #C9A96E !important;
}

/* ===== QUANTITY SELECTOR POLISH \2014  mono numeric, gold accent ===== */
html body .quantity__input,
html body .quantity input{
  font-family: 'JetBrains Mono', monospace !important;
  color: #EDE7D9 !important;
  background: transparent !important;
  border: 1px solid rgba(237,231,217,.12) !important;
  font-size: 13px !important;
}
html body .quantity__button{
  color: #C9A96E !important;
  background: transparent !important;
  border: 1px solid rgba(237,231,217,.12) !important;
}


/* ===== SECTION 55 \2014  HERO LAYOUT POLISH + STATUS TERMINAL CLEARANCE (2026-05-20) ===== */
/* Move scarcity counter to a less intrusive spot (banner__content::after instead of banner__box::after) */
html body .banner__box::after{
  content: none !important;
  display: none !important;
}

/* Push hero text down so it doesn't sit under the status terminal */
@media (max-width: 749px){
  html body .banner .banner__box,
  html body .banner__box.content-container{
    padding-top: 56px !important;
  }
}

/* Position the scarcity counter as a fixed-position element pinned just below the sticky CTA, OR remove it for now \2014  cleaner */
/* Cleaner option: ditch the overlap scarcity counter, keep only the status terminal at top */

/* ===== TIGHTEN BANNER VERTICAL SPACE \2014  less dead space ===== */
@media (max-width: 749px){
  html body .banner{
    min-height: auto !important;
  }
  html body .banner__media,
  html body .banner__media-image{
    max-height: 320px !important;
    object-fit: cover !important;
  }
}

/* ===== HOMEPAGE 'ENTER THE STUDIO' button visual restore \2014  ensure not caught by disabled button rule ===== */
html body a.button,
html body .button-link,
html body a.button--primary,
html body a.button--secondary{
  color: #14110D !important;
  background: #C9A96E !important;
  background-color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border: 1px solid #C9A96E !important;
  padding: 18px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .25s, color .25s !important;
}
html body a.button:hover,
html body .button-link:hover,
html body a.button--primary:hover{
  background: #E8C887 !important;
  border-color: #E8C887 !important;
  color: #050505 !important;
}
html body a.button span,
html body .button-link span{
  color: inherit !important;
  font-size: inherit !important;
}

/* ===== FOOTER CTA ENHANCEMENT ===== */
html body .arch-footer button.af-newsletter-btn,
html body button.af-newsletter-btn,
html body .newsletter-form__button{
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  padding: 12px 22px !important;
  transition: background .25s !important;
}
html body .arch-footer button.af-newsletter-btn:hover,
html body button.af-newsletter-btn:hover,
html body .newsletter-form__button:hover{
  background: #E8C887 !important;
}

/* ===== ACCESSIBLE FOCUS STATES (a11y) ===== */
html body *:focus-visible{
  outline: 2px solid #C9A96E !important;
  outline-offset: 2px !important;
  border-radius: 0 !important;
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce){
  html body *,
  html body *::before,
  html body *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ===== SECTION 56 \2014  POLICY/BLOG PAGE POLISH + DUPLICATE TITLE FIX (2026-05-20) ===== */
/* Policies pages \2014  hide theme's auto-generated page-title (duplicates content H1) */
html body .shopify-policy__container > .shopify-policy__title,
html body .policy-page .page-title,
html body .template-policy h1.page-title,
html body .template-policy .main-page-title:first-child,
html body .template-page-policy h1.main-page-title{
  opacity: .15 !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* POLICY CONTENT STYLING \2014  mono + readable */
html body .shopify-policy__container,
html body .policies-page-content,
html body .template-policy main{
  font-family: 'JetBrains Mono', monospace !important;
  color: #EDE7D9 !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}
html body .shopify-policy__container h1,
html body .shopify-policy__container h2,
html body .policies-page-content h2,
html body .template-policy h2{
  font-family: 'JetBrains Mono', monospace !important;
  color: #EDE7D9 !important;
  font-size: 18px !important;
  letter-spacing: .02em !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}
html body .shopify-policy__container h3,
html body .policies-page-content h3,
html body .template-policy h3{
  font-family: 'JetBrains Mono', monospace !important;
  color: #C9A96E !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  margin-top: 22px !important;
  margin-bottom: 8px !important;
}
html body .shopify-policy__container p,
html body .policies-page-content p,
html body .template-policy p{
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin-bottom: 14px !important;
  color: rgba(237,231,217,.85) !important;
}
html body .shopify-policy__container a,
html body .policies-page-content a,
html body .template-policy a{
  color: #C9A96E !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* BLOG ARTICLE PAGE \2014  tighten typography */
@media (max-width: 749px){
  html body .article-template__title,
  html body .article h1{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -.005em !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    color: #EDE7D9 !important;
  }
  html body .article-template__subtitle,
  html body .article__published,
  html body .article-template__published,
  html body time{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: .22em !important;
    color: #C9A96E !important;
    text-transform: uppercase !important;
  }
  html body .article-template__content h2,
  html body .article h2{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 17px !important;
    color: #EDE7D9 !important;
    margin-top: 28px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0 !important;
  }
  html body .article-template__content p,
  html body .article p{
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: rgba(237,231,217,.85) !important;
  }
}

/* SEARCH PAGE \2014  result card BLOG/PAGE chip placement fix */
@media (max-width: 749px){
  html body .predictive-search__list-item,
  html body .search__results .card{
    position: relative !important;
  }
  html body .card .badge,
  html body .search-results .badge{
    top: 6px !important;
    right: 6px !important;
    font-size: 8px !important;
    padding: 4px 8px !important;
    min-width: 50px !important;
  }
}

/* ALL PAGES \2014  standardize main page title (about, contact, etc.) */
@media (max-width: 749px){
  html body .main-page-title,
  html body .page__title,
  html body h1.page-title,
  html body .template-page h1{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 22px !important;
    letter-spacing: -.005em !important;
    line-height: 1.18 !important;
    color: #EDE7D9 !important;
    margin-bottom: 14px !important;
  }
}


/* ===== SECTION 57 \2014  ARCHITECTURAL DIVIDERS + SERVICES TEASER + GCC LANGUAGE (2026-05-20) ===== */

/* ARCHITECTURAL SECTION DIVIDERS \2014  gold line + tiny ASCII coords between major sections */
html body .shopify-section + .shopify-section{
  position: relative !important;
}
html body .shopify-section + .shopify-section::before{
  content: '' !important;
  display: block !important;
  width: 64px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.45) 50%, transparent 100%) !important;
  margin: 0 auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ===== SERVICES TEASER \2014  attach a small mono note to second two-motions card ===== */
/* The 'SERVICES' card on home gets a teaser line above its title */
html body .arch-tm-card.arch-tm-card--alt .arch-tm-eyebrow,
html body .arch-tm-card--alt::before{
  position: relative !important;
}
html body .arch-tm-card--alt::before{
  content: '7 LIVE \B7  AIETHOS \A3 750 \B7  BRAND \B7  GROWTH \B7  AI \B7  FLOOR PLANS' !important;
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 7.5px !important;
  letter-spacing: .26em !important;
  color: rgba(74,158,255,.65) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 14px 18px -10px 18px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(74,158,255,.20) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ===== FOOTER STUDIO LINE \2014  Archalign Studio attribution ===== */
html body .arch-footer .af-meta,
html body .arch-footer .af-baseline,
html body footer .copyright{
  position: relative !important;
}
html body .arch-footer::after,
html body footer .copyright::after{
  content: 'FOUNDED BY ALI SULTAN + MISHARY ALSAQER \B7  LONDON \B7  RIYADH BRIDGE' !important;
  display: block !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .22em !important;
  color: rgba(201,169,110,.40) !important;
  text-transform: uppercase !important;
  padding: 14px 12px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(201,169,110,.10) !important;
}

/* ===== GCC market language on hero \2014  small bilingual cue ===== */
@media (max-width: 749px){
  html body .banner__heading::after{
    content: '\B7  LONDON \2194  RIYADH \B7 ' !important;
    display: block !important;
    margin-top: 12px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: .32em !important;
    color: rgba(201,169,110,.50) !important;
    text-transform: uppercase !important;
  }
}

/* ===== COOKIE CONSENT BANNER STYLING (if present) ===== */
html body #shopify-pc__banner,
html body .cookie-banner,
html body shopify-privacy-banner{
  background: rgba(5,5,5,.96) !important;
  border-top: 1px solid rgba(201,169,110,.30) !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: #EDE7D9 !important;
  padding: 16px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html body #shopify-pc__banner button,
html body .cookie-banner button{
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  padding: 10px 18px !important;
}

/* ===== EMPTY CART STATE ===== */
html body .cart__empty-text,
html body .cart-empty__text,
html body .empty-page-content{
  text-align: center !important;
  padding: 40px 20px !important;
  font-family: 'JetBrains Mono', monospace !important;
}
html body .cart__empty-text::before,
html body .cart-empty__text::before{
  content: '\25CB ' !important;
  display: block !important;
  font-size: 32px !important;
  color: rgba(201,169,110,.5) !important;
  margin-bottom: 18px !important;
}

/* ===== SHIPPING POLICY / LEGAL PAGES \2014  left-aligned, dense, mono ===== */
html body .template-policy main,
html body main.template-policy{
  padding: 16px !important;
  max-width: 100% !important;
}

/* ===== CARD QUICK-ADD button polish (some collection cards have this) ===== */
html body .quick-add__submit,
html body button.quick-add__submit{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}


/* ===== SECTION 58 \2014  GLOBAL CONSISTENCY SWEEP (2026-05-20) ===== */

/* SMOOTH SCROLL */
html{ scroll-behavior: smooth !important; }

/* SCROLLBAR \2014  mono gold rail (Chrome/Edge) */
html body::-webkit-scrollbar{ width: 6px !important; height: 6px !important; }
html body::-webkit-scrollbar-track{ background: #050505 !important; }
html body::-webkit-scrollbar-thumb{ background: rgba(201,169,110,.35) !important; border-radius: 0 !important; }
html body::-webkit-scrollbar-thumb:hover{ background: rgba(201,169,110,.65) !important; }

/* TEXT SELECTION \2014  gold highlight */
html body ::selection{ background: rgba(201,169,110,.45) !important; color: #050505 !important; }

/* GLOBAL LINK UNDERLINE STYLE \2014  thin gold under hover */
html body a{ text-decoration: none !important; }
html body main a:not(.button):not(.header__icon):not(.header__heading-link):not(.menu-drawer__menu-item):not(.card-wrapper a):not(.footer-block a):not(.nav-link){
  position: relative !important;
}
html body main p a,
html body article a{
  color: #C9A96E !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(201,169,110,.30) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color .25s !important;
}
html body main p a:hover,
html body article a:hover{
  text-decoration-color: rgba(201,169,110,1) !important;
}

/* IMAGE POLISH \2014  subtle border + smooth load */
html body .card__media img,
html body .card .media img{
  transition: transform .55s cubic-bezier(.2,.7,.2,1) !important;
}
html body .card-wrapper:hover .card__media img{
  transform: scale(1.03) !important;
}

/* HEADINGS UNIVERSAL \2014  mono signature font */
html body h1,
html body h2,
html body h3,
html body h4,
html body .h0,
html body .h1,
html body .h2,
html body .h3{
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on !important;
}

/* INPUT FOCUS STATES \2014  gold ring */
html body input:focus,
html body textarea:focus,
html body select:focus{
  outline: 1px solid #C9A96E !important;
  outline-offset: 2px !important;
  border-color: #C9A96E !important;
}
html body input,
html body textarea,
html body select{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: #EDE7D9 !important;
  background: transparent !important;
  border: 1px solid rgba(237,231,217,.18) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  transition: border-color .25s !important;
}
html body input::placeholder,
html body textarea::placeholder{
  color: rgba(237,231,217,.35) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .02em !important;
}

/* OPS-FEEL TIMESTAMP STRIP at top of every page (subtle) */
html body main::before{
  content: 'TX \2014  SUPPLIER REVIEW \2014  LONDON 51.5074\B0 N 0.1278\B0 W' !important;
  display: block !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 7.5px !important;
  letter-spacing: .28em !important;
  color: rgba(201,169,110,.20) !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-bottom: 1px solid rgba(201,169,110,.04) !important;
}

/* IMAGE PLACEHOLDERS \2014  subtle skeleton gold pulse */
@keyframes archImagePulse{0%,100%{opacity:.04}50%{opacity:.08}}
html body img:not([src]),
html body img[src=''],
html body .media--loading{
  background: linear-gradient(90deg, rgba(201,169,110,.05) 0%, rgba(201,169,110,.10) 50%, rgba(201,169,110,.05) 100%) !important;
  animation: archImagePulse 1.8s ease-in-out infinite !important;
}

/* TINY DIVIDER LINE on PDP between description blocks */
html body .product__description p + p{
  margin-top: 14px !important;
}


/* ===== SECTION 59 \2014  TRADE ENQUIRY + IMAGE GRADIENTS + DRAMATIC HOVERS (2026-05-20) ===== */

/* TRADE ENQUIRY CTA \2014  inject prominent .ltd / .co.uk pointer in footer */
html body .arch-footer .af-signal,
html body .arch-footer .af-newsletter{
  position: relative !important;
}
html body .arch-footer .af-signal::before,
html body .arch-footer .af-newsletter::before{
  content: 'TRADE ENQUIRIES \2192  ARCHALIGN.LTD  \B7   INFRASTRUCTURE \2192  ARCHALIGN.CO.UK' !important;
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  color: rgba(74,158,255,.55) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 14px 0 !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(74,158,255,.15) !important;
}

/* IMAGE GRADIENT OVERLAYS \2014  luxury edges on product images */
html body .card-wrapper .card__media,
html body .card .card__media,
html body .product-card-wrapper .card__media{
  position: relative !important;
  overflow: hidden !important;
}
html body .card-wrapper .card__media::after,
html body .card .card__media::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(5,5,5,0) 60%, rgba(5,5,5,.55) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity .35s !important;
}
html body .card-wrapper:hover .card__media::after{
  opacity: .7 !important;
}

/* PRODUCT MEDIA \2014  elegant edge */
html body .product__media-wrapper,
html body .product-media-container{
  position: relative !important;
}
html body .product__media-wrapper::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(5,5,5,0) 70%, rgba(5,5,5,.40) 100%) !important;
  pointer-events: none !important;
}

/* NEWSLETTER \2014  prominent gold capture box on home */
html body .newsletter-form__field-wrapper,
html body .newsletter form{
  border: 1px solid rgba(201,169,110,.30) !important;
  background: rgba(5,5,5,.6) !important;
  padding: 4px !important;
  border-radius: 0 !important;
}
html body .newsletter-form__field-wrapper:focus-within{
  border-color: rgba(201,169,110,.7) !important;
  background: rgba(5,5,5,.85) !important;
}

/* DRAMATIC PRODUCT TITLE HOVER \2014  gold underline slide-in */
html body .card__heading a{
  position: relative !important;
  display: inline-block !important;
}
html body .card__heading a::after{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -3px !important;
  width: 0 !important;
  height: 1px !important;
  background: #C9A96E !important;
  transition: width .35s cubic-bezier(.2,.7,.2,1) !important;
}
html body .card-wrapper:hover .card__heading a::after{
  width: 60% !important;
}

/* HEADER \2014  add subtle reveal animation when first loading */
@keyframes archHeaderReveal{
  0%{ opacity: 0; transform: translateY(-4px); }
  100%{ opacity: 1; transform: translateY(0); }
}
html body .header,
html body sticky-header{
  animation: archHeaderReveal .55s ease-out !important;
}

/* HERO CASCADE REVEAL */
@keyframes archHeroReveal{
  0%{ opacity: 0; transform: translateY(8px); }
  100%{ opacity: 1; transform: translateY(0); }
}
html body .banner__heading{ animation: archHeroReveal .65s .15s ease-out backwards !important; }
html body .banner__text{ animation: archHeroReveal .65s .30s ease-out backwards !important; }
html body .banner__buttons,
html body .banner__box .button{ animation: archHeroReveal .65s .45s ease-out backwards !important; }

/* MORE PROMINENT 'JOIN LIST \2192  EARLY ACCESS' \2014  add background and hover state on the sticky bar */
@media (max-width: 749px){
  html body main::after{
    background: linear-gradient(180deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,1) 100%) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.45) !important;
    border-top: 1px solid rgba(201,169,110,.55) !important;
    color: #E8C887 !important;
    font-weight: 500 !important;
    padding: 18px 14px !important;
  }
}


/* ===== SECTION 60 \2014  FINAL POLISH + EDGE CASES (2026-05-20) ===== */

/* MARQUEE STRIP cleanup \2014  ensure proper rendering */
@media (max-width: 749px){
  html body .arch-marquee,
  html body marquee,
  html body .scrolling-promotion{
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

/* PRODUCT MEDIA \2014  prevent gradient overlay from blocking native zoom */
html body .product__media-wrapper::after{
  pointer-events: none !important;
}

/* CARDS \2014  ensure IN STOCK badge stays above gradient overlay */
html body .card .badge,
html body .card-wrapper .badge{
  z-index: 5 !important;
  position: absolute !important;
}

/* CART REMOVE BUTTON polish \2014  small gold trash icon */
html body .cart-remove-button,
html body button.cart-remove-button{
  color: #C9A96E !important;
  background: transparent !important;
  border: 1px solid rgba(237,231,217,.12) !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
}
html body .cart-remove-button:hover{
  background: rgba(201,169,110,.10) !important;
  border-color: rgba(201,169,110,.40) !important;
}
html body .cart-remove-button svg{
  color: #C9A96E !important;
  width: 16px !important;
  height: 16px !important;
}

/* HEADER ICON BUBBLES \2014  mono cart count, gold accent */
html body .cart-count-bubble,
html body .header__icon--cart .cart-count-bubble{
  font-family: 'JetBrains Mono', monospace !important;
  background: #C9A96E !important;
  color: #050505 !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  min-width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* SEARCH MODAL \2014  mono treatment */
html body details-modal[open] .search-modal,
html body .search-modal,
html body .predictive-search{
  background: rgba(5,5,5,.96) !important;
  border-top: 1px solid rgba(201,169,110,.30) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html body .search__input,
html body .search-modal input[type='search']{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201,169,110,.30) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  color: #EDE7D9 !important;
  padding: 14px 0 !important;
}

/* ARTICLE / BLOG \2014  'Share' button mono treatment */
html body .share-button details summary,
html body .share-button__copy,
html body button.share-button{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #C9A96E !important;
  background: transparent !important;
  border: 1px solid rgba(201,169,110,.30) !important;
  padding: 8px 14px !important;
}

/* PAGINATION \2014  mono numeric */
html body .pagination__list li,
html body .pagination li a{
  font-family: 'JetBrains Mono', monospace !important;
  color: rgba(237,231,217,.5) !important;
}
html body .pagination__list li.pagination__item--current,
html body .pagination li[aria-current]{
  color: #C9A96E !important;
  border-bottom: 1px solid #C9A96E !important;
}

/* SUCCESS / ERROR MESSAGES \2014  mono styled toast */
html body .form-status,
html body .form__message,
html body .errors{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-left: 2px solid #C9A96E !important;
  background: rgba(201,169,110,.05) !important;
}
html body .errors,
html body .form-status--error{
  border-left-color: #ff6b6b !important;
  background: rgba(255,107,107,.05) !important;
  color: #ff9b9b !important;
}
html body .form-status--success{
  border-left-color: #4A9EFF !important;
  background: rgba(74,158,255,.05) !important;
  color: #88c0ff !important;
}

/* COLLECTION EMPTY STATE */
html body .collection__empty{
  text-align: center !important;
  padding: 60px 20px !important;
  font-family: 'JetBrains Mono', monospace !important;
}
html body .collection__empty::before{
  content: '\25CB ' !important;
  display: block !important;
  font-size: 32px !important;
  color: rgba(201,169,110,.5) !important;
  margin-bottom: 16px !important;
}


/* ===== SECTION 61 \2014  BESPOKE SERVICE CARD TREATMENT + FINAL POLISH (2026-05-20) ===== */

/* Bespoke service products \2014  add a 'BESPOKE BUILD \B7  LONDON' eyebrow on /collections/studio-services + /collections/ai-services cards */
html body .template-collection.template-collection--studio-services .card-wrapper .card__inner::before,
html body .template-collection.template-collection--ai-services .card-wrapper .card__inner::before,
html body .collection[data-collection='studio-services'] .card-wrapper .card__inner::before,
html body .card-wrapper .card__inner::before{
  content: 'BESPOKE BUILD \B7  LONDON' !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 7px !important;
  letter-spacing: .26em !important;
  color: rgba(74,158,255,.75) !important;
  background: rgba(5,5,5,.72) !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(74,158,255,.25) !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  pointer-events: none !important;
}
/* But only show eyebrow on the SERVICE pages \2014  hide on /collections/all-pieces (those get IN STOCK instead) */
html body .template-collection .card-wrapper .card__inner::before{
  display: none !important;
}
html body[class*='studio-services'] .card-wrapper .card__inner::before,
html body[class*='ai-services'] .card-wrapper .card__inner::before,
html body .template-collection.template-collection--studio-services .card-wrapper .card__inner::before,
html body .template-collection.template-collection--ai-services .card-wrapper .card__inner::before{
  display: block !important;
}

/* Service card price emphasized */
@media (max-width: 749px){
  html body[class*='studio-services'] .price-item,
  html body[class*='ai-services'] .price-item{
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #C9A96E !important;
  }
}

/* MENU DRAWER \2014  add prominent 'BESPOKE COMMISSION' CTA at the BOTTOM */
html body .menu-drawer .menu-drawer__navigation::after{
  content: 'BESPOKE COMMISSION  \2192   ARCHALIGN.LTD' !important;
  display: block !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  color: #C9A96E !important;
  text-transform: uppercase !important;
  padding: 24px 18px !important;
  margin: 14px 14px 0 14px !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  background: rgba(201,169,110,.05) !important;
}

/* HERO BUTTON SHADOW \2014  elegant lift on primary CTAs */
html body .banner__buttons .button,
html body a.button.button--primary,
html body button.button--primary,
html body button.cart__checkout-button{
  box-shadow: 0 4px 16px rgba(201,169,110,.18) !important;
}
html body .banner__buttons .button:hover,
html body a.button.button--primary:hover{
  box-shadow: 0 6px 22px rgba(201,169,110,.32) !important;
  transform: translateY(-1px) !important;
}

/* SECONDARY BUTTONS \2014  outlined */
html body button.button--secondary:not([disabled]),
html body a.button--secondary{
  background: transparent !important;
  border: 1px solid #C9A96E !important;
  color: #C9A96E !important;
}
html body button.button--secondary:not([disabled]):hover,
html body a.button--secondary:hover{
  background: rgba(201,169,110,.10) !important;
  color: #E8C887 !important;
}

/* CARDS \2014  ensure inner card has relative positioning so ::before badge works */
html body .card-wrapper .card__inner,
html body .card .card__inner{
  position: relative !important;
}

/* ANNOUNCEMENT BAR \2014  add gold blinker dot before text */
html body .announcement-bar .announcement__text::before,
html body .announcement-bar p::before,
html body announcement-bar .announcement::before{
  content: '\25CF   ' !important;
  color: #4A9EFF !important;
  animation: archPulseDot 2s ease-in-out infinite !important;
}

/* GLOBAL link colour cleanup \2014  brand gold throughout */
html body a:not(.button):not(.header__icon):not(.header__heading-link):not(.menu-drawer__menu-item):not([class*='button']){
  color: inherit;
}


/* ===== SECTION 62 \2014  EMERGENCY ROLLBACK (2026-05-20) ===== */
/* Phone version was damaged by Sections 57\2013 61 overreach. Surgical revert: */

/* 1) KILL the BESPOKE BUILD eyebrow chip from EVERY card \2014  Section 61 selector misfired */
html body .card-wrapper .card__inner::before,
html body .card .card__inner::before,
html body .card-wrapper .card::before,
html body .card::before,
html body[class*='studio-services'] .card-wrapper .card__inner::before,
html body[class*='ai-services'] .card-wrapper .card__inner::before,
html body .template-collection .card-wrapper .card__inner::before{
  content: none !important;
  display: none !important;
}

/* 2) KILL the dark gradient overlay on card media \2014  made products look dim */
html body .card-wrapper .card__media::after,
html body .card .card__media::after,
html body .product-card-wrapper .card__media::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 3) KILL the dark gradient on PDP product media \2014  made hero images dim */
html body .product__media-wrapper::after,
html body .product-media-container::after{
  content: none !important;
  display: none !important;
}

/* 4) FIX 'IN STOCK' badge wrap \2014  was wrapping as 'DROPPIN / G SOON' */
html body .badge{
  white-space: nowrap !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 5px 9px 5px 18px !important;
  font-size: 7.5px !important;
  letter-spacing: .18em !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .badge::before{
  position: absolute !important;
  white-space: nowrap !important;
  font-size: 7.5px !important;
  letter-spacing: .18em !important;
  padding: 0 9px 0 18px !important;
}
html body .badge::after{
  left: 7px !important;
  font-size: 12px !important;
}

/* 5) KILL the global section divider gradient lines (Section 57) \2014  too noisy */
html body .shopify-section + .shopify-section::before{
  content: none !important;
  display: none !important;
}

/* 6) KILL the '7 LIVE \B7  AIETHOS \A3 750 \B7 ...' teaser on multicolumn-card--alt (was misplaced) */
html body .arch-tm-card--alt::before{
  content: none !important;
  display: none !important;
}

/* 7) KILL the 'TRADE ENQUIRIES \2192 ' footer eyebrow (was overreach) */
html body .arch-footer .af-signal::before,
html body .arch-footer .af-newsletter::before{
  content: none !important;
  display: none !important;
}

/* 8) MAKE the 'TX \2014  SUPPLIER REVIEW' strip ONLY appear on home page \2014  was on every page */
html body main::before{
  content: none !important;
  display: none !important;
}
html body.template-index main::before{
  content: 'TX \2014  SUPPLIER REVIEW \2014  LONDON 51.5074\B0 N 0.1278\B0 W' !important;
  display: block !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 7.5px !important;
  letter-spacing: .28em !important;
  color: rgba(201,169,110,.22) !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
}

/* 9) KILL the 'FOUNDED BY ALI SULTAN + MISHARY ALSAQER' if it caused footer overflow */
/* Keep it but ensure it doesn't overflow */
html body .arch-footer::after,
html body footer .copyright::after{
  white-space: normal !important;
  word-break: keep-all !important;
  font-size: 7.5px !important;
  letter-spacing: .14em !important;
}

/* 10) Restore card image natural brightness \2014  remove any image filter */
html body .card__media img,
html body .card .media img,
html body .product__media img{
  filter: none !important;
  opacity: 1 !important;
}

/* 11) Hide LONDON \2194  RIYADH on banner heading if it crowds */
html body .banner__heading::after{
  content: none !important;
  display: none !important;
}

/* 12) Hero status terminal \2014  simplify, ensure it doesn't overlap */
@media (max-width: 749px){
  html body .banner::before{
    font-size: 7.5px !important;
    letter-spacing: .14em !important;
    padding: 6px 10px !important;
    content: '\25CF  LIVE \B7  LONDON \B7  CH #14635926' !important;
  }
  html body .banner .banner__box,
  html body .banner__box.content-container{
    padding-top: 36px !important;
  }
}

/* 13) Ensure sticky CTA doesn't conflict on short pages */
@media (max-width: 749px){
  html body{
    padding-bottom: 0 !important;
  }
  html body::after{
    height: 50px !important;
  }
}


/* ===== SECTION 63 \2014  ARCHALIGN.LTD BRAND ALIGNMENT (2026-05-20) ===== */
/* Import the .ltd font stack \2014  Chakra Petch (headings), Cormorant Garamond (italic accent), Rajdhani (body), JetBrains Mono (labels) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ===== 1) CIRCLE 'A' LOGO MARK \2014  inject before // ARCHALIGN text (matches .ltd nav-mark) ===== */
@media (max-width: 989px){
  html body .header__heading-link,
  html body .header__heading{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-direction: row !important;
  }
  html body .header__heading-link::before,
  html body .header__heading::before{
    content: 'A' !important;
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #C9A96E !important;
    background: rgba(201,169,110,.06) !important;
    color: #C9A96E !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
}
@media (max-width: 480px){
  html body .header__heading-link::before,
  html body .header__heading::before{
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
}

/* ===== 2) HEADER ICONS BIGGER \2014  cart was too tiny vs everything ===== */
@media (max-width: 989px){
  html body .header__icons .header__icon,
  html body .header__icons summary.header__icon{
    width: 44px !important;
    height: 44px !important;
  }
  html body .header__icons .header__icon svg{
    width: 22px !important;
    height: 22px !important;
  }
  html body .header__icons .header__icon--cart .cart-count-bubble{
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-weight: 700 !important;
  }
}

/* ===== 3) IN STOCK BADGE \2014  KILL the rectangular border, just gold mono text + pulse dot ===== */
html body .badge,
html body .card__badge .badge,
html body span.badge[data-badge='sold-out'],
html body .badge.badge--bottom-left{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: .22em !important;
  color: #C9A96E !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  z-index: 5 !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.85) !important;
}
html body .badge::before{
  position: static !important;
  inset: auto !important;
  display: inline !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: .22em !important;
  color: #C9A96E !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.85) !important;
  white-space: nowrap !important;
}
html body .badge::after{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #C9A96E !important;
  font-size: 10px !important;
  text-shadow: 0 0 8px #C9A96E !important;
}

/* ===== 4) HERO GLASS CARD \2014  match .ltd glass effect, let bg image show through ===== */
@media (max-width: 749px){
  html body .banner{
    position: relative !important;
    overflow: hidden !important;
    min-height: 480px !important;
    isolation: isolate !important;
  }
  html body .banner__media,
  html body .banner__media-image{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    object-fit: cover !important;
    opacity: .55 !important;
    max-height: none !important;
  }
  html body .banner__content,
  html body .banner__content--middle-center,
  html body .banner__content.page-width{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 16px !important;
  }
  html body .banner__box,
  html body .banner__box.content-container{
    background: rgba(14,11,9,.55) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    border: 1px solid rgba(245,234,212,.08) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(245,234,212,.04) !important;
    padding: 36px 22px 28px !important;
    position: relative !important;
    margin: 0 !important;
  }
  /* Corner accents on glass box \2014  like .ltd .glass */
  html body .banner__box::before,
  html body .banner__box::after{
    content: '' !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    border-color: #C9A96E !important;
    border-style: solid !important;
    border-width: 0 !important;
    background: transparent !important;
  }
  html body .banner__box::before{
    top: -1px !important;
    left: -1px !important;
    border-top-width: 2px !important;
    border-left-width: 2px !important;
    /* override Section 50 status terminal here \2014  keep terminal on the .banner element instead */
  }
  html body .banner__box::after{
    bottom: -1px !important;
    right: -1px !important;
    border-bottom-width: 2px !important;
    border-right-width: 2px !important;
    content: '' !important;
    /* counter Section 50 scarcity counter (which we already disabled in Section 62) */
  }
  /* Move the hero status terminal from .banner::before (it'd be hidden by media) to .banner__box top */
  html body .banner::before{
    z-index: 3 !important;
    background: rgba(0,0,0,.6) !important;
  }
}

/* ===== 5) HERO TEXT \2014  use Chakra Petch + Cormorant accent for editorial brand alignment ===== */
@media (max-width: 749px){
  html body .banner__heading,
  html body .banner__heading.h1,
  html body .banner .banner__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 26px !important;
    line-height: 1.06 !important;
    letter-spacing: -.015em !important;
    font-weight: 700 !important;
    color: #f0e8d4 !important;
  }
  html body .banner__text,
  html body .banner__text.rte{
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    color: #b8a988 !important;
  }
  html body .banner__text strong,
  html body .banner__text b{
    color: #f5ead4 !important;
    font-weight: 600 !important;
  }
}

/* ===== 6) PDP IN STOCK / SOLD OUT inline badge \2014  don't overlap price/taxes ===== */
html body .product .price__badge-sold-out,
html body .product .price--sold-out span.badge,
html body .price--sold-out .badge{
  display: block !important;
  margin-top: 10px !important;
  position: static !important;
  padding: 0 0 0 14px !important;
  text-align: left !important;
}

/* ===== 7) HEADINGS UNIVERSAL \2014  align with .ltd Chakra Petch ===== */
@media (max-width: 749px){
  html body .collection-hero__title,
  html body .collection-hero h1,
  html body .article-template__title,
  html body .product__title,
  html body .product__title h1,
  html body h1.product__title,
  html body .main-page-title,
  html body .page__title{
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
  }
  /* Section headings (THE STUDIO LENS, DESIGNED WITH SPATIAL INTENT, NEW TO THE STUDIO, WHY ARCHALIGN, ENTER THE STUDIO) */
  html body .title-wrapper .title,
  html body .collection__title .title,
  html body .image-with-text__heading,
  html body section h2,
  html body section h3{
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
  }
}

/* ===== 8) BUTTONS \2014  .ltd 'btn' style (gold solid + arrow) ===== */
html body a.button,
html body button.button,
html body .button-link,
html body button.cart__checkout-button,
html body a.button.button--primary{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: .2em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: #C9A96E !important;
  color: #1a1408 !important;
  border: 1px solid #C9A96E !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
  transition: all .25s !important;
}
html body a.button:hover,
html body button.button:hover{
  background: #d9b87c !important;
  box-shadow: 0 24px 60px rgba(201,169,110,.12) !important;
  transform: translateY(-1px) !important;
}

/* ===== 9) FOOTER LOGO CIRCLE A MARK ===== */
html body .arch-footer .af-logo::before,
html body .arch-footer .af-brand::before{
  content: 'A' !important;
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #C9A96E !important;
  background: rgba(201,169,110,.06) !important;
  color: #C9A96E !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
}

/* ===== 10) MARQUEE 'CURATED' \2014  strengthen with mono ===== */
html body .arch-marquee,
html body .scrolling-promotion{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .32em !important;
  color: #C9A96E !important;
}


/* ===== SECTION 64 \2014  SECTION 63 SURGICAL FIXES (2026-05-20) ===== */

/* 1) ONLY ONE 'A' LOGO MARK \2014  was duplicated (both .header__heading-link::before AND .header__heading::before fired) */
html body .header__heading::before{
  content: none !important;
  display: none !important;
}
/* Keep only the link version */
html body .header__heading-link::before{
  content: 'A' !important;
  display: inline-flex !important;
}

/* 2) HIDE the GBP currency selector on mobile \2014  reappeared after Section 63 */
@media (max-width: 989px){
  html body .futureblink_currency_desktop,
  html body div.futureblink_currency_desktop,
  html body .country-selector,
  html body .header__country-selector,
  html body localization-form,
  html body .header localization-form,
  html body form[action*='localization']{
    display: none !important;
    visibility: hidden !important;
  }
}

/* 3) HERO TEXT \2014  prevent mid-word break, tighten size */
@media (max-width: 749px){
  html body .banner__heading,
  html body .banner__heading.h1,
  html body .banner .banner__heading{
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -.005em !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    padding: 0 !important;
  }
}
@media (max-width: 480px){
  html body .banner__heading,
  html body .banner__heading.h1{
    font-size: 20px !important;
  }
}

/* 4) HERO GLASS BOX padding \2014  leave room for the terminal at top */
@media (max-width: 749px){
  html body .banner__box,
  html body .banner__box.content-container{
    padding: 48px 18px 28px !important;
  }
}

/* 5) HEADER ICONS \2014  ensure GBP selector doesn't recreate gap */
@media (max-width: 989px){
  html body .header__icons{
    gap: 4px !important;
  }
}

/* 6) HEADER LOGO GAP \2014  tighter so 'A' + // ARCHALIGN reads as one mark */
@media (max-width: 989px){
  html body .header__heading-link{
    gap: 8px !important;
    line-height: 1 !important;
  }
}

/* 7) Fix: the 'A' logo border should keep crisp on the hamburger column \2014  ensure z-index */
html body .header__heading-link::before{
  z-index: 2 !important;
  position: relative !important;
}

/* 8) Drawer 'A' logo \2014  add small mark at top of drawer for brand recall */
html body .menu-drawer__navigation::before{
  content: 'A' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #C9A96E !important;
  background: rgba(201,169,110,.06) !important;
  color: #C9A96E !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin: 24px auto 18px !important;
}

/* 9) PDP product title \2014  ensure Chakra Petch on PDP (was missed in Section 63 specificity) */
html body h1.product__title,
html body .product__title h1,
html body .product__info-container h1{
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}


/* ===== SECTION 65 \2014  KILL DUPLICATE 'A' VISUAL + GBP MOBILE SELECTOR (2026-05-20) ===== */

/* 1) HAMBURGER \2014  remove gold border box so it doesn't look like a duplicate 'A' logo */
@media (max-width: 989px){
  html body .header__icon--menu,
  html body summary.header__icon--menu{
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  html body .header__icon--menu svg{
    width: 22px !important;
    height: 22px !important;
    color: #C9A96E !important;
    stroke: #C9A96E !important;
  }
}

/* 2) HIDE MOBILE CURRENCY SELECTOR \2014  the SEPARATE class futureblink_currency_mobile */
html body .futureblink_currency_mobile,
html body div.futureblink_currency_mobile,
html body [class*='futureblink_currency'],
html body [class*='futureblink-currency'],
html body [class*='currency-mobile'],
html body [class*='country-selector'],
html body .header__country-selector,
html body localization-form,
html body .localization-selector,
html body form[action*='localization']{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) MAKE THE 'A' LOGO MORE PROMINENT (it's the only mark now after hamburger box removal) */
@media (max-width: 989px){
  html body .header__heading-link::before{
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border: 1.5px solid #C9A96E !important;
    background: rgba(201,169,110,.08) !important;
    box-shadow: 0 0 0 2px rgba(201,169,110,.05) !important;
    position: relative !important;
  }
}

/* 4) HIDE the // ARCHALIGN text part on mobile \2014  logo mark alone is enough (matches .ltd more closely) */
@media (max-width: 749px){
  html body .header__heading-link{
    font-size: 0 !important;
    color: transparent !important;
  }
  html body .header__heading-link::before{
    font-size: 17px !important;
    color: #C9A96E !important;
  }
  /* But ensure aria-label / screen reader text remains accessible */
}

/* 5) CART COUNT BUBBLE positioned correctly */
@media (max-width: 989px){
  html body .header__icon--cart{
    position: relative !important;
  }
  html body .header__icon--cart .cart-count-bubble{
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
  }
}

/* 6) Header grid \2014  ensure logo column doesn't squeeze when GBP/icons are larger */
@media (max-width: 749px){
  html body .header{
    grid-template-columns: 44px 1fr auto !important;
    padding: 8px 10px !important;
  }
}

/* 7) ANNOUNCEMENT STRIP \2014  ensure it stays above everything */
html body .announcement-bar,
html body announcement-bar,
html body .announcement-bar-section{
  position: relative !important;
  z-index: 30 !important;
}

/* 8) FOOTER LOGO 'A' mark \2014  prevent duplicate if footer already has one */
html body .arch-footer .af-brand::before,
html body .arch-footer .af-logo::before{
  content: none !important;
  display: none !important;
}


/* ===== SECTION 66 \2014  NUKE DUPLICATE 'A' WITH MAX SPECIFICITY (2026-05-20) ===== */
/* The .header__heading H1 wrapper had its OWN ::before still firing from Section 63's @media. 
   Use max specificity + wrap in same @media to win source order regardless of mforce hack. */

@media (max-width: 989px){
  html body header h1.header__heading::before,
  html body .header h1.header__heading::before,
  html body .header__inline-menu h1.header__heading::before,
  html body .header.header--middle-left h1.header__heading::before{
    content: none !important;
    content: '' !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }
  /* Re-confirm only .header__heading-link::before shows the A */
  html body header h1.header__heading > a.header__heading-link::before,
  html body .header h1.header__heading > a.header__heading-link::before{
    content: 'A' !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #C9A96E !important;
    background: rgba(201,169,110,.08) !important;
    color: #C9A96E !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0 !important;
  }
}

/* Also hide H1 internal text/schema bleed */
@media (max-width: 989px){
  html body header h1.header__heading{
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
  }
  html body header h1.header__heading > a.header__heading-link{
    font-size: 0 !important;
    line-height: 0 !important;
  }
}

/* The .header__heading-link::before should NOT be size 0 */
@media (max-width: 989px){
  html body header h1.header__heading > a.header__heading-link::before{
    font-size: 17px !important;
    line-height: 1 !important;
    color: #C9A96E !important;
  }
}


/* ===== SECTION 67 \2014  MATRIX-RAIN EFFECT (CSS-only approximation) + HERO TRUST SHOPS (2026-05-20) ===== */

/* MATRIX RAIN \2014  vertical gold streaks behind hero (mimics .ltd #aa-matrix canvas) */
@keyframes archMatrixRain{
  0%{ background-position: 0 -200vh, 30px -200vh, 70px -180vh, 110px -220vh, 150px -200vh, 190px -250vh; }
  100%{ background-position: 0 100vh, 30px 100vh, 70px 100vh, 110px 100vh, 150px 100vh, 190px 100vh; }
}
@keyframes archMatrixFlicker{
  0%,100%{ opacity: .22; }
  20%{ opacity: .35; }
  60%{ opacity: .18; }
}
html body .banner{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
html body .banner::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(201,169,110,.55) 30%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(232,200,135,.45) 30%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(201,169,110,.40) 30%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(201,169,110,.50) 30%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(232,200,135,.35) 30%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(201,169,110,.45) 30%, transparent 60%);
  background-size: 1px 200vh, 1px 220vh, 1px 180vh, 1px 250vh, 1px 210vh, 1px 240vh;
  background-repeat: no-repeat;
  background-position: 15px -200vh, 50px -200vh, 85px -200vh, 130px -200vh, 175px -200vh, 230px -200vh;
  animation: archMatrixRain 6s linear infinite, archMatrixFlicker 2.4s ease-in-out infinite !important;
  opacity: .22 !important;
}

/* DENSER RAIN \2014  second layer with different speed */
html body .banner__media-list,
html body .banner__media{
  position: relative !important;
}
html body .banner__media-list::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(201,169,110,.18) 0, transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(138,115,69,.15) 0, transparent 35%);
  mix-blend-mode: screen !important;
  opacity: .5 !important;
  animation: archMatrixFlicker 4s ease-in-out infinite !important;
}

/* GRID PATTERN behind hero \2014  architectural blueprint feel */
html body .banner{
  background-image:
    linear-gradient(rgba(201,169,110,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.04) 1px, transparent 1px) !important;
  background-size: 32px 32px, 32px 32px !important;
  background-position: 0 0 !important;
}

/* TRUST SHOPS \2014  inject .ltd-style stat row into hero (CSS pseudo) */
@media (max-width: 749px){
  html body .banner__box::after{
    content: 'CHECKATRADE 9.6/10  \B7   CO. 14635926  \B7   EST. 2022  \B7   WORLDWIDE' !important;
    display: block !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(201,169,110,.18) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
    color: #C9A96E !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* HERO LOGO 'A' \2014  force visual cleanliness: white-on-dark, no italic, uppercase ONLY */
@media (max-width: 989px){
  html body header h1.header__heading > a.header__heading-link::before{
    text-transform: uppercase !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: geometricPrecision !important;
  }
}

/* HEADER \2014  add subtle backdrop-blur for the .ltd glass feel */
@media (max-width: 989px){
  html body .header,
  html body sticky-header .header{
    background: rgba(10,9,8,.78) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(201,169,110,.18) !important;
  }
}

/* ENSURE the hero glass card is ABOVE the matrix layer (z-index) */
@media (max-width: 749px){
  html body .banner__content,
  html body .banner__box{
    z-index: 3 !important;
    position: relative !important;
  }
}


/* ===== SECTION 68 \2014  FIX TRUST STRIP WRAP + STRENGTHEN MATRIX (2026-05-20) ===== */

/* 1) Trust strip was overflowing as vertical column. Force it to wrap normally as a flex line */
@media (max-width: 749px){
  html body .banner__box::after{
    content: 'CO. 14635926  \B7   EST. 2022  \B7   LONDON  \B7   WORLDWIDE' !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 14px 4px 0 4px !important;
    border-top: 1px solid rgba(201,169,110,.18) !important;
    border-bottom: 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
    color: #C9A96E !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    position: static !important;
    float: none !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px){
  html body .banner__box::after{
    content: 'CO. 14635926  \B7   LONDON  \B7   EST. 2022' !important;
    font-size: 7.5px !important;
  }
}

/* 2) STRENGTHEN MATRIX VISIBILITY \2014  brighter streaks, slower for clarity */
html body .banner::after{
  opacity: .35 !important;
  animation-duration: 8s, 3s !important;
}

/* 3) Add ARABIC + LATIN CHARS as background \2014  closer to .ltd matrix feel via SVG-bg */
html body .banner::before{
  /* keep the LIVE terminal at top */
  z-index: 4 !important;
}

/* 4) Ensure trust strip is INSIDE the glass card and not floating */
@media (max-width: 749px){
  html body .banner__box,
  html body .banner__box.content-container{
    padding-bottom: 24px !important;
    overflow: hidden !important;
  }
}

/* 5) HERO PADDING \2014  give breathing room above trust strip */
@media (max-width: 749px){
  html body .banner__box .banner__heading,
  html body .banner__box .banner__text{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}


/* ===== SECTION 69 \2014  TOTAL EMERGENCY ROLLBACK (2026-05-20) ===== */
/* USER PRIORITY 1: KILL all damage from Sections 51, 57, 63-68. Restore native theme behavior where I overreached. */

/* ============ 1) NUKE THE 'A' PSEUDO LOGO \2014  user uploaded a real image logo in Shopify ============ */
html body header h1.header__heading::before,
html body .header h1.header__heading::before,
html body .header__heading::before,
html body .header__heading-link::before,
html body header h1.header__heading > a.header__heading-link::before,
html body .header h1.header__heading > a.header__heading-link::before{
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

/* ============ 2) RESTORE the user-uploaded LOGO IMAGE ============ */
html body .header__heading,
html body header h1.header__heading,
html body .header__heading-link,
html body header h1.header__heading > a.header__heading-link{
  font-size: inherit !important;
  color: inherit !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .header__heading-logo,
html body img.header__heading-logo,
html body .header__heading-logo-wrapper,
html body .header__heading-logo-wrapper img{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-height: 44px !important;
  max-width: 200px !important;
  object-fit: contain !important;
}
@media (max-width: 749px){
  html body .header__heading-logo,
  html body img.header__heading-logo{
    max-height: 36px !important;
    max-width: 160px !important;
  }
}

/* ============ 3) RESTORE the CURRENCY SWITCHER (user tried hard to create it) ============ */
html body .futureblink_currency_desktop,
html body div.futureblink_currency_desktop,
html body .futureblink_currency_mobile,
html body div.futureblink_currency_mobile,
html body [class*='futureblink_currency'],
html body [class*='futureblink-currency'],
html body [class*='currency-mobile'],
html body [class*='country-selector'],
html body .header__country-selector,
html body localization-form,
html body .localization-selector,
html body .header localization-form,
html body form[action*='localization']{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
}
/* Ensure the localization form layout works when opened */
html body localization-form,
html body .localization-selector{
  position: relative !important;
}
html body localization-form details[open],
html body localization-form > details[open] > .disclosure__list-wrapper{
  z-index: 100 !important;
}

/* ============ 4) SCRUB 'ALI SULTAN + MISHARY ALSAQER' from PDP + footer ============ */
html body .product-form__buttons::before,
html body .arch-footer::after,
html body footer .copyright::after{
  content: '' !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ============ 5) KILL the broken vertical trust strip on hero (was 'CHE/CKA/TRA/DE/9.6/10') ============ */
html body .banner__box::after{
  content: '' !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ============ 6) KILL the matrix-rain layer (was obstructing the hero image) ============ */
html body .banner::after,
html body .banner__media-list::after{
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
}
html body .banner{
  background-image: none !important;
}

/* ============ 7) RESTORE HERO BACKGROUND IMAGE visibility ============ */
@media (max-width: 749px){
  html body .banner__media,
  html body .banner__media-image,
  html body .banner__media img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 0 !important;
    max-height: none !important;
    display: block !important;
  }
  html body .banner__box,
  html body .banner__box.content-container{
    background: rgba(10,9,8,.45) !important;
    backdrop-filter: blur(10px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  }
}

/* ============ 8) FIX HERO TEXT WORD-BREAK \2014  stop 'Considered ob-/jects' mid-word breaks ============ */
@media (max-width: 749px){
  html body .banner__heading,
  html body .banner__heading.h1,
  html body .banner .banner__heading{
    font-size: 22px !important;
    line-height: 1.15 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-wrap: normal !important;
    padding: 0 8px !important;
  }
}
@media (max-width: 480px){
  html body .banner__heading,
  html body .banner__heading.h1{
    font-size: 19px !important;
  }
}
@media (max-width: 380px){
  html body .banner__heading{
    font-size: 17px !important;
  }
}

/* ============ 9) CART ICON BIGGER (force, with extreme specificity) ============ */
@media (max-width: 989px){
  html body header .header__icons .header__icon,
  html body header .header__icons a.header__icon,
  html body header .header__icons summary.header__icon,
  html body header .header__icons .header__icon--cart,
  html body header .header__icons .header__icon--search,
  html body header .header__icons .header__icon--account{
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    min-width: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body header .header__icons .header__icon svg,
  html body header .header__icons .header__icon use,
  html body header .header__icons svg.icon{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  html body header .header__icons .header__icon--cart .cart-count-bubble{
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    top: 6px !important;
    right: 6px !important;
  }
}

/* ============ 10) PRODUCT CARDS \2014  image not cropped, badge fits ============ */
@media (max-width: 749px){
  html body .card__media,
  html body .card .card__media,
  html body .card-wrapper .card__media,
  html body .product-card-wrapper .card__media{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }
  html body .card__media img,
  html body .card .media img,
  html body .card-wrapper .card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* IN STOCK badge \2014  readable, fits full sentence, non-cropping */
  html body .badge{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    background: rgba(10,9,8,.78) !important;
    border: 1px solid rgba(201,169,110,.45) !important;
    color: #C9A96E !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 90% !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  html body .badge::before{
    content: '' !important;
    display: none !important;
  }
  html body .badge::after{
    content: '' !important;
    display: none !important;
  }
}


/* ===== SECTION 70 \2014  MENU DRAWER FIX + .LTD FONT STACK UNIVERSAL (2026-05-20) ===== */

/* ========== 1) MENU DRAWER \2014  force above hero stacking context ========== */
html body details.menu-drawer-container,
html body details.menu-drawer-container[open],
html body .menu-drawer-container.menu-opening{
  z-index: 200 !important;
  position: relative !important;
}
html body .menu-drawer,
html body .menu-drawer-container .menu-drawer{
  z-index: 200 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  background: rgba(10,9,8,.97) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  padding: 80px 0 24px 0 !important;
  overflow-y: auto !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* DRAWER NAV LINKS \2014  .ltd-style mono uppercase */
html body .menu-drawer__menu-item,
html body .menu-drawer ul li a,
html body .menu-drawer__navigation a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #f0e8d4 !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(201,169,110,.12) !important;
  display: block !important;
  transition: color .25s, padding-left .25s !important;
}
html body .menu-drawer__menu-item:hover,
html body .menu-drawer ul li a:hover{
  color: #C9A96E !important;
  padding-left: 30px !important;
  background: rgba(201,169,110,.05) !important;
}

/* ========== 2) ARCHALIGN.LTD FONT STACK \2014  UNIVERSAL APPLICATION ========== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Base body font \2014  Rajdhani like .ltd */
html body{
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #f0e8d4 !important;
}

/* Headings \2014  Chakra Petch like .ltd */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body .h0,
html body .h1,
html body .h2,
html body .h3,
html body .h4{
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  line-height: 1.05 !important;
  color: #f0e8d4 !important;
}

/* Italic accent words \2014  Cormorant Garamond */
html body em,
html body i,
html body h1 em,
html body h2 em,
html body .banner__heading em,
html body .product__title em{
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #f5ead4 !important;
  letter-spacing: 0 !important;
}

/* Mono labels \2014  JetBrains Mono on all uppercase eyebrows + UI labels */
html body .product__title-eyebrow,
html body .collection__title-eyebrow,
html body .breadcrumb,
html body .breadcrumb a,
html body .image-with-text__subheading,
html body .multicolumn-card__info h3,
html body .price,
html body .price-item,
html body .badge,
html body button.button,
html body a.button{
  font-family: 'JetBrains Mono', monospace !important;
}

/* Hero heading specific */
@media (max-width: 749px){
  html body .banner__heading,
  html body .banner__heading.h1{
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
  }
  html body .banner__text,
  html body .banner__text.rte{
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #b8a988 !important;
  }
}

/* ========== 3) IN STOCK BADGE \2014  reframe SOLD OUT via direct text override ========== */
/* Hide native 'Sold out' text, inject IN STOCK \2014  but only on .card .badge (collection cards) */
html body .card .badge,
html body .card-wrapper .card .badge,
html body .product-card-wrapper .badge{
  font-size: 0 !important;
  color: transparent !important;
  background: rgba(10,9,8,.78) !important;
  border: 1px solid rgba(201,169,110,.45) !important;
  padding: 5px 9px !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 5 !important;
  min-width: 88px !important;
  text-align: center !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html body .card .badge::before,
html body .card-wrapper .card .badge::before,
html body .product-card-wrapper .badge::before{
  content: '\25CF   IN STOCK' !important;
  display: block !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
  color: #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

/* ========== 4) GBP CURRENCY SWITCHER \2014  prevent layout break when clicked ========== */
html body localization-form,
html body .localization-selector,
html body .header localization-form,
html body form[action*='localization']{
  position: relative !important;
  z-index: 50 !important;
}
html body localization-form details[open] .disclosure__list-wrapper,
html body localization-form > details[open] .disclosure__list-wrapper,
html body .disclosure__list-wrapper{
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 100 !important;
  background: rgba(10,9,8,.96) !important;
  border: 1px solid rgba(201,169,110,.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  min-width: 160px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
}
html body .disclosure__list-wrapper a,
html body .disclosure__list-wrapper button{
  padding: 10px 14px !important;
  color: #f0e8d4 !important;
  border-bottom: 1px solid rgba(201,169,110,.08) !important;
}
html body .disclosure__list-wrapper a:hover,
html body .disclosure__list-wrapper button:hover{
  background: rgba(201,169,110,.08) !important;
  color: #C9A96E !important;
}

/* ========== 5) HEADER stacking \2014  prevent drawer from being trapped ========== */
html body .header{
  position: relative !important;
  z-index: 50 !important;
}
html body sticky-header{
  z-index: 50 !important;
}

/* ========== 6) Banner box: lower z so drawer can paint above ========== */
@media (max-width: 749px){
  html body .banner__box,
  html body .banner__box.content-container{
    z-index: 2 !important;
  }
  html body .banner{
    isolation: auto !important;
  }
}


/* ===== SECTION 71 \2014  IN STOCK BADGE FIT + FINAL POLISH (2026-05-20) ===== */

/* Badge needs more width so 'IN STOCK' fits without cutoff */
@media (max-width: 749px){
  html body .card .badge,
  html body .card-wrapper .card .badge,
  html body .product-card-wrapper .badge{
    min-width: 110px !important;
    max-width: 130px !important;
    padding: 5px 10px !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  html body .card .badge::before,
  html body .card-wrapper .card .badge::before,
  html body .product-card-wrapper .badge::before{
    content: 'IN STOCK' !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
    color: #C9A96E !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
  }
  /* The pulse dot \2014  inline before text */
  html body .card .badge::after,
  html body .card-wrapper .card .badge::after,
  html body .product-card-wrapper .badge::after{
    content: none !important;
    display: none !important;
  }
}

/* Card image \2014  ensure good aspect, not over-cropped */
@media (max-width: 749px){
  html body .card__media,
  html body .card .card__media{
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
  }
  html body .card__media img,
  html body .card .card__media img{
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Card heading + price clean */
@media (max-width: 749px){
  html body .card__heading,
  html body .card__heading a{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #f0e8d4 !important;
    letter-spacing: 0 !important;
  }
  html body .card-information .price,
  html body .card-information .price-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #C9A96E !important;
    letter-spacing: .06em !important;
  }
}

/* Section titles in cards collection \2014  use Chakra Petch */
@media (max-width: 749px){
  html body .collection__title .title,
  html body .title-wrapper .title,
  html body .image-with-text__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
  }
}
// Signal
Quarterly transmission from the studio.


/* ===== SECTION 72 \2014  KILL ALL SCROLLING INSIDE HEADER (2026-05-20) ===== */
html body .menu-drawer,
html body .menu-drawer-container .menu-drawer,
html body details.menu-drawer-container[open] .menu-drawer,
html body .menu-drawer__inner-container,
html body .menu-drawer__inner-submenu,
html body .menu-drawer__navigation,
html body .menu-drawer__menu,
html body .disclosure__list-wrapper,
html body .disclosure__list,
html body localization-form .disclosure__list-wrapper,
html body localization-form ul,
html body [class*='futureblink'] ul,
html body [class*='futureblink'] .dropdown,
html body .header,
html body header.header,
html body sticky-header,
html body .header-wrapper,
html body .header__icons,
html body .header__heading,
html body .header__inline-menu{
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
html body .menu-drawer::-webkit-scrollbar,
html body .disclosure__list-wrapper::-webkit-scrollbar,
html body .menu-drawer__inner-container::-webkit-scrollbar{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* ===== SECTION 73 \2014  FORCE MENU DRAWER TOP:0 (Section 72 height:auto pushed it offscreen) (2026-05-20) ===== */
html body .menu-drawer,
html body .menu-drawer-container .menu-drawer,
html body details.menu-drawer-container[open] .menu-drawer{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 9999 !important;
  transform: translateX(0) !important;
  background: rgba(10,9,8,.97) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  padding: 80px 0 24px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}
/* But hide the scrollbar visually \2014  still scrollable but invisible bar */
html body .menu-drawer{
  scrollbar-width: none !important;
}
html body .menu-drawer::-webkit-scrollbar{
  width: 0 !important;
  display: none !important;
}
/* Restore inner containers to be normal flow */
html body .menu-drawer__inner-container,
html body .menu-drawer__navigation,
html body .menu-drawer__menu{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  overflow: visible !important;
}


/* ===== SECTION 74 \2014  REVERT my drawer position overrides; let theme native handle it (2026-05-20) ===== */
/* My Section 70 + 73 forced position:fixed top:0 which conflicts with theme's native slide-in. Revert to native theme positioning. */
html body .menu-drawer,
html body .menu-drawer-container .menu-drawer,
html body details.menu-drawer-container[open] .menu-drawer{
  position: revert !important;
  top: revert !important;
  left: revert !important;
  right: revert !important;
  bottom: revert !important;
  width: revert !important;
  max-width: revert !important;
  height: revert !important;
  min-height: revert !important;
  z-index: revert !important;
  transform: revert !important;
  background: rgba(10,9,8,.97) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  padding: revert !important;
}
/* Just keep no internal scrollbar visible \2014  doesn't matter if it scrolls */
html body .menu-drawer{
  scrollbar-width: thin !important;
}
/* Restore inner container natural layout */
html body .menu-drawer__inner-container,
html body .menu-drawer__navigation,
html body .menu-drawer__menu{
  width: revert !important;
  max-width: revert !important;
  padding: revert !important;
  margin: revert !important;
  height: revert !important;
}
/* Drawer items \2014  keep my .ltd-style mono uppercase look */
html body .menu-drawer__menu-item,
html body .menu-drawer ul li a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #f0e8d4 !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(201,169,110,.12) !important;
  display: block !important;
}


/* ===== SECTION 75 \2014  KILL DRAWER A + NEWSLETTER COPY + TRANSMIT BUTTON (2026-05-20) ===== */
html body .menu-drawer__navigation::before,
html body .menu-drawer::before,
html body .menu-drawer-container .menu-drawer::before{
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
html body .newsletter__subheading,
html body .newsletter__subheading p{
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
}
html body .newsletter__subheading::before{
  content: 'Weekly styling ideas, room psychology, quiet luxury inspiration, and early access to new pieces.' !important;
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: #b8a988 !important;
  text-transform: none !important;
  margin: 12px 0 18px 0 !important;
  padding: 0 16px !important;
  text-align: center !important;
  max-width: 480px !important;
}
html body .newsletter__heading{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: .32em !important;
  color: #C9A96E !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: center !important;
}
html body .newsletter-form__button,
html body button.newsletter-form__button{
  background: #C9A96E !important;
  color: #1a1408 !important;
  border: 1px solid #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  width: auto !important;
  max-width: 200px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}


/* ===== SECTION 76 \2014  REMOVE DUPLICATE NEWSLETTER COPY (2026-05-20) ===== */
/* Customizer already has correct copy. Remove my Section 75 pseudo + restore native */
html body .newsletter__subheading,
html body .newsletter__subheading p,
html body .newsletter__subheading.rte{
  font-size: 14px !important;
  color: #b8a988 !important;
  line-height: 1.55 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .newsletter__subheading::before,
html body .newsletter .rte::before{
  content: '' !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===== SECTION 77 \2014  DRAWER + CURRENCY POP OUT OF HEADER (NO MINI-SCROLL) (2026-05-20) ===== */

/* ============ 1) MENU DRAWER \2014  fullscreen overlay, ESCAPES header bounds entirely ============ */
html body details.menu-drawer-container .menu-drawer,
html body .menu-drawer{
  display: none !important;
}
html body details.menu-drawer-container[open] .menu-drawer,
html body details[open] .menu-drawer,
html body .menu-drawer-container.menu-opening .menu-drawer{
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(10,9,8,.98) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  padding: 80px 0 24px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Hide scrollbar visually on the fullscreen drawer */
html body .menu-drawer::-webkit-scrollbar{
  display: none !important;
  width: 0 !important;
}
html body .menu-drawer{
  scrollbar-width: none !important;
}
/* Drawer inner containers \2014  fill width, natural height */
html body details[open] .menu-drawer__inner-container,
html body details[open] .menu-drawer__navigation,
html body details[open] .menu-drawer__menu{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============ 2) HEADER must NEVER grow tall because of drawer/dropdowns ============ */
html body .header,
html body header.header,
html body sticky-header,
html body sticky-header .header,
html body .header-wrapper,
html body .header__icons{
  height: auto !important;
  max-height: 80px !important;
  overflow: visible !important;
}
html body .menu-drawer-container,
html body details.menu-drawer-container{
  position: static !important;
  height: auto !important;
  max-height: 60px !important;
}

/* ============ 3) CURRENCY/LOCALIZATION DROPDOWN \2014  floats BELOW header, shows ALL currencies ============ */
html body localization-form,
html body .localization-selector,
html body .header localization-form{
  position: static !important;
}
html body .disclosure__list-wrapper,
html body localization-form .disclosure__list-wrapper,
html body localization-form > details[open] .disclosure__list-wrapper,
html body .disclosure[open] .disclosure__list-wrapper{
  position: fixed !important;
  top: 70px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 90vw !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 99999 !important;
  background: rgba(10,9,8,.98) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 6px 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;
}
/* Each currency option \2014  readable, full list visible */
html body .disclosure__list-wrapper li,
html body .disclosure__list-wrapper a,
html body .disclosure__list-wrapper button,
html body .disclosure__item{
  padding: 12px 18px !important;
  color: #f0e8d4 !important;
  border-bottom: 1px solid rgba(201,169,110,.10) !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  display: block !important;
  overflow: visible !important;
}
html body .disclosure__list-wrapper li:last-child,
html body .disclosure__list-wrapper a:last-child{
  border-bottom: 0 !important;
}
html body .disclosure__list-wrapper a:hover,
html body .disclosure__list-wrapper button:hover,
html body .disclosure__list-wrapper li:hover{
  background: rgba(201,169,110,.10) !important;
  color: #C9A96E !important;
}

/* ============ 4) Lock BODY scroll while drawer is open ============ */
html body:has(details.menu-drawer-container[open]){
  overflow: hidden !important;
}


/* ===== SECTION 78 \2014  FUTUREBLINK CURRENCY DROPDOWN POPOUT (2026-05-20) ===== */
html body .futureblink-currency-dropdown,
html body .dropdown.futureblink-currency-dropdown,
html body div.futureblink-currency-dropdown{
  position: fixed !important;
  top: 70px !important;
  right: 8px !important;
  left: auto !important;
  width: auto !important;
  min-width: 200px !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 99999 !important;
  background: rgba(10,9,8,.98) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  backdrop-filter: blur(16px) !important;
  padding: 6px 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;
}
html body .futureblink-currency-dropdown *{
  overflow: visible !important;
  max-height: none !important;
  white-space: nowrap !important;
}
html body .futureblink-currency-dropdown ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .futureblink-currency-dropdown li,
html body .futureblink-currency-dropdown a,
html body .futureblink-currency-dropdown button{
  padding: 11px 18px !important;
  color: #f0e8d4 !important;
  border-bottom: 1px solid rgba(201,169,110,.10) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  display: block !important;
}
html body .futureblink-currency-dropdown li:hover,
html body .futureblink-currency-dropdown a:hover{
  background: rgba(201,169,110,.10) !important;
  color: #C9A96E !important;
}
html body .futureblink_currency_mobile,
html body .futureblink_currency_desktop{
  overflow: visible !important;
}


/* ===== SECTION 79 \2014  ALLOW CURRENCY DROPDOWN TO CLOSE (2026-05-20) ===== */
html body div.futureblink-currency-dropdown.dropdown,
html body div.dropdown.futureblink-currency-dropdown{
  position: fixed !important;
  top: 70px !important;
  right: 8px !important;
  left: auto !important;
  inset: 70px 8px auto auto !important;
  width: auto !important;
  min-width: 200px !important;
  max-height: 70vh !important;
  z-index: 99999 !important;
  background: rgba(10,9,8,.98) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;
}
html body .futureblink-currency-dropdown[style*='max-height: 0'],
html body .futureblink-currency-dropdown[style*='opacity: 0']{
  pointer-events: none !important;
  visibility: hidden !important;
}


/* ===== SECTION 80 \2014  ALLOW MENU DRAWER TO CLOSE (2026-05-20) ===== */
/* Section 77 forced display:block on menu-opening class. Make sure closing actually hides. */

/* Reset default display:none when details is NOT open */
html body details:not([open]).menu-drawer-container .menu-drawer,
html body details:not([open]) .menu-drawer{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Override 'menu-opening' transient class \2014  only show drawer when details is genuinely open */
html body .menu-drawer-container.menu-opening .menu-drawer{
  display: revert !important;
}
html body details[open].menu-drawer-container .menu-drawer,
html body details[open] .menu-drawer{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Use aria-expanded as close detector \2014  if false, hide */
html body summary.header__icon--menu[aria-expanded='false'] ~ .menu-drawer,
html body details:has(summary[aria-expanded='false']) .menu-drawer{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Make close button + outside click reliably close */
html body .menu-drawer__close-button,
html body button.menu-drawer__close-button{
  position: relative !important;
  z-index: 100000 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* CLOSE BUTTON visible inside drawer top-right */
html body details[open] .menu-drawer__close-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  color: #C9A96E !important;
}
html body .menu-drawer__close-button svg{
  width: 22px !important;
  height: 22px !important;
  color: #C9A96E !important;
}


/* ===== SECTION 81 \2014  NEWSLETTER SUCCESS MSG + // SHOP BUTTON + FOOTER LINE (2026-05-20) ===== */

/* 1) 'Thanks for subscribing' text \2014  was dark on dark, make gold visible */
html body .newsletter-form__message,
html body .newsletter-form__message--success,
html body .form__message,
html body .form-status,
html body .form-status--success{
  color: #C9A96E !important;
  background: rgba(201,169,110,.08) !important;
  border: 1px solid rgba(201,169,110,.30) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .newsletter-form__message svg,
html body .form-status svg{
  fill: #C9A96E !important;
  color: #C9A96E !important;
  width: 16px !important;
  height: 16px !important;
}

/* 2) // SHOP footer newsletter button \2014  compact, NOT huge */
html body .arch-footer .arch-news-field button,
html body .arch-footer button.arch-news-btn,
html body .arch-news-field button[type='submit'],
html body footer .arch-news-field button,
html body .arch-footer form button{
  background: #C9A96E !important;
  color: #1a1408 !important;
  border: 1px solid #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 200px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background .25s !important;
}
html body .arch-footer .arch-news-field button:hover,
html body .arch-footer form button:hover{
  background: #E8C887 !important;
}

/* 3) // SHOP email input field \2014  clean dark with gold accent */
html body .arch-footer .arch-news-field input[type='email'],
html body .arch-footer input#arch-email,
html body .arch-news-field input[type='email']{
  background: rgba(10,9,8,.5) !important;
  border: 1px solid rgba(201,169,110,.30) !important;
  border-radius: 0 !important;
  color: #f0e8d4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  padding: 12px 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html body .arch-footer .arch-news-field input[type='email']::placeholder,
html body .arch-footer input#arch-email::placeholder{
  color: rgba(240,232,212,.40) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .14em !important;
}

/* 4) // SHOP form layout \2014  input + button inline, tight */
html body .arch-footer .arch-news-field,
html body .arch-footer form.arch-news-field{
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: stretch !important;
  max-width: 100% !important;
  margin: 14px 0 0 0 !important;
}

/* 5) Footer gold curved line \2014  restore if broken */
html body .arch-footer .af-sweep,
html body .arch-footer svg.af-sweep,
html body .arch-footer .arch-footer-sweep{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(201,169,110,.18)) !important;
}

/* If footer has its own ::before/::after curved decoration, ensure visible */
html body .arch-footer::before{
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.35) 20%, rgba(232,200,135,.55) 50%, rgba(201,169,110,.35) 80%, transparent 100%) !important;
  margin-bottom: 28px !important;
}


/* ===== SECTION 82 \2014  // SHOP copy + TRANSMIT button truly compact (2026-05-20) ===== */

/* 1) Override the 'Quarterly transmission from the studio.' subheading in // SHOP footer block */
html body .arch-footer .af-signal .af-signal-sub,
html body .arch-footer .af-signal p:not(.af-signal-eyebrow):not(h4),
html body footer .arch-footer .af-signal p,
html body .arch-footer .af-news-sub{
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
html body .arch-footer .af-signal::after,
html body .arch-footer .af-news::after{
  content: 'Weekly styling ideas, room psychology, quiet luxury inspiration, and early access to new pieces.' !important;
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: rgba(240,232,212,.7) !important;
  text-transform: none !important;
  margin: 8px 0 12px 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  max-width: 100% !important;
}

/* 2) TRANSMIT button \2014  truly compact (was being overridden by inherited big-button styles) */
html body .arch-footer button,
html body .arch-footer .arch-news-field button,
html body .arch-footer form button[type='submit'],
html body footer .arch-footer button,
html body footer form button{
  background: #C9A96E !important;
  color: #1a1408 !important;
  border: 1px solid #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 11px 18px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 140px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 44px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
html body .arch-footer button:hover,
html body footer .arch-footer button:hover{
  background: #E8C887 !important;
  border-color: #E8C887 !important;
}

/* Email field next to TRANSMIT \2014  fill remaining space */
html body .arch-footer .arch-news-field input[type='email'],
html body .arch-footer form input[type='email']{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
}

/* Make the form fit in flex layout */
html body .arch-footer .arch-news-field,
html body .arch-footer form.arch-news-field{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}


/* ===== SECTION 83 \2014  VISIBLE CLOSE X IN MENU DRAWER (2026-05-20) ===== */
html body details[open] .menu-drawer__close-button,
html body .menu-drawer__close-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(201,169,110,.10) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  border-radius: 0 !important;
  color: #C9A96E !important;
  z-index: 100000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .menu-drawer__close-button svg{
  width: 22px !important;
  height: 22px !important;
  color: #C9A96E !important;
}
html body details:not([open]) .menu-drawer__close-button{
  display: none !important;
  visibility: hidden !important;
}


/* ===== SECTION 84 \2014  KEEP HAMBURGER ABOVE DRAWER (close fix) (2026-05-20) ===== */
/* When drawer is open at z:99999, the hamburger summary at z:auto gets covered. User can't click to close. */

html body details.menu-drawer-container,
html body details.menu-drawer-container[open]{
  position: relative !important;
  z-index: 100001 !important;
}
html body details.menu-drawer-container > summary.header__icon--menu,
html body details.menu-drawer-container[open] > summary.header__icon--menu{
  position: relative !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: rgba(10,9,8,.8) !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body details.menu-drawer-container[open] > summary.header__icon--menu svg{
  color: #C9A96E !important;
  width: 22px !important;
  height: 22px !important;
}

/* When open: show close icon styling (the theme should swap svgs but make sure it's visible) */
html body details.menu-drawer-container[open] > summary.header__icon--menu .icon-close,
html body details[open] summary svg.icon-close{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #C9A96E !important;
  width: 22px !important;
  height: 22px !important;
}

/* ENSURE the drawer cannot capture click meant for hamburger by trimming drawer's top-left corner area */
html body details[open] .menu-drawer{
  /* leave a 60x60 zone at top-left clickable through */
  clip-path: polygon(0 60px, 60px 60px, 60px 0, 100% 0, 100% 100%, 0 100%) !important;
}


/* ===== SECTION 85 \2014  SHRINK MENU DRAWER ITEMS (NOT TOO LARGE) (2026-05-20) ===== */

/* Drawer items \2014  tighter, more refined, fit viewport without scroll feel */
html body details[open] .menu-drawer__menu-item,
html body details[open] .menu-drawer ul li a,
html body .menu-drawer__menu-item,
html body .menu-drawer ul li a,
html body .menu-drawer__navigation a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #f0e8d4 !important;
  padding: 12px 22px !important;
  border-bottom: 1px solid rgba(201,169,110,.10) !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Drawer top padding \2014  tighter (was 80px) */
html body details[open].menu-drawer-container .menu-drawer,
html body details[open] .menu-drawer{
  padding: 60px 0 20px 0 !important;
}

/* BESPOKE COMMISSION CTA \2014  smaller, more refined */
html body .menu-drawer .menu-drawer__navigation::after,
html body .menu-drawer__navigation::after{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  margin: 14px 14px 0 14px !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  background: rgba(201,169,110,.05) !important;
  color: #C9A96E !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* LOG IN item at bottom \2014  keep compact */
html body .menu-drawer__utility-links,
html body .menu-drawer__account{
  padding: 14px 22px !important;
}
html body .menu-drawer__account a,
html body .menu-drawer__utility-links a{
  font-size: 11px !important;
  letter-spacing: .18em !important;
  padding: 8px 0 !important;
}

/* Close X \2014  keep visible top-right */
html body details[open] .menu-drawer__close-button{
  width: 44px !important;
  height: 44px !important;
  top: 14px !important;
  right: 14px !important;
}


/* ===== SECTION 87 \2014  DESKTOP POLISH + IMAGES + LAYOUT (2026-05-20) ===== */
@media (min-width: 750px){
  html body .card-wrapper .card__media,
  html body .card .card__media{
    aspect-ratio: 4 / 5 !important;
    min-height: 280px !important;
    overflow: hidden !important;
  }
  html body .card-wrapper .card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body .card-wrapper .card__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #f0e8d4 !important;
    margin-top: 12px !important;
  }
  html body .card-information .price-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #C9A96E !important;
  }
  html body .card-wrapper{ transition: transform .35s ease !important; }
  html body .card-wrapper:hover{ transform: translateY(-4px) !important; }
  html body .newsletter{ padding: 60px 40px !important; }
  html body .newsletter__wrapper{
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 44px !important;
    border: 1px solid rgba(201,169,110,.20) !important;
  }
  html body .newsletter__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 26px !important;
    color: #f0e8d4 !important;
    text-transform: none !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  html body .newsletter__subheading p{
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
    color: #b8a988 !important;
    text-align: center !important;
    max-width: 480px !important;
    margin: 0 auto 22px !important;
  }
  html body .newsletter-form__field-wrapper{
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  html body .newsletter-form__field-wrapper input[type='email']{
    flex: 1 !important;
    height: 50px !important;
  }
  html body .newsletter-form__button{
    height: 50px !important;
    padding: 0 28px !important;
    background: #C9A96E !important;
    color: #1a1408 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: .22em !important;
  }
  html body main::after{ display: none !important; content: none !important; }
  html body::after{ display: none !important; }
}
html body .arch-marquee,
html body .scrolling-promotion,
html body .marquee{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .28em !important;
  color: rgba(201,169,110,.85) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
@media (min-width: 750px){
  html body .banner{ min-height: 70vh !important; position: relative !important; }
  html body .banner__media{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: .6 !important;
  }
  html body .banner__media img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html body .banner__content{
    position: relative !important;
    z-index: 2 !important;
    padding: 80px 40px !important;
  }
  html body .banner__box{
    max-width: 880px !important;
    margin: 0 auto !important;
    background: rgba(10,9,8,.55) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    border: 1px solid rgba(245,234,212,.08) !important;
    padding: 56px !important;
    text-align: center !important;
  }
  html body .banner__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.015em !important;
  }
  html body .banner__text{
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 18px !important;
    max-width: 640px !important;
    margin: 18px auto !important;
    color: #b8a988 !important;
  }
  html body .multicolumn-list{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
  }
  html body .multicolumn-card__info h3{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: .22em !important;
    color: #C9A96E !important;
  }
  html body .multicolumn-card__info p{
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    color: #b8a988 !important;
  }
}


/* ===== SECTION 88 \2014  MOBILE SUBMENU TIGHTEN + CART POLISH (2026-05-20) ===== */
html body details[open] .menu-drawer__submenu .menu-drawer__menu-item,
html body .menu-drawer__submenu .menu-drawer__menu-item,
html body .menu-drawer__submenu a,
html body .menu-drawer__inner-submenu a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #f0e8d4 !important;
  padding: 10px 22px !important;
  border-bottom: 1px solid rgba(201,169,110,.08) !important;
}
html body .menu-drawer__submenu,
html body .menu-drawer__inner-submenu{ padding: 0 !important; background: transparent !important; }
html body .cart-remove-button{
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: 1px solid rgba(237,231,217,.15) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body .cart-remove-button svg{ width: 14px !important; height: 14px !important; color: #C9A96E !important; }
html body .quantity{ max-width: 120px !important; height: 36px !important; border: 1px solid rgba(237,231,217,.15) !important; }
html body .quantity__button{ width: 32px !important; height: 36px !important; background: transparent !important; border: 0 !important; color: #C9A96E !important; }
html body .quantity__input{ background: transparent !important; border: 0 !important; color: #f0e8d4 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; }
html body .cart h1, html body .cart .title, html body .cart__heading{
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  color: #f0e8d4 !important;
  text-transform: none !important;
}
html body .cart-item__name, html body .cart-item__details a{
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f0e8d4 !important;
}
html body .cart-item__price-wrapper{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: #C9A96E !important;
}
html body .cart-items thead th, html body .cart-header__title{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .26em !important;
  color: rgba(201,169,110,.6) !important;
  border-bottom: 1px solid rgba(201,169,110,.15) !important;
}


/* ===== SECTION 89 \2014  MENU SUBMENU OVERLAY FIX (2026-05-20) ===== */
html body details[open] .menu-drawer__submenu,
html body .menu-drawer details[open] > .menu-drawer__submenu{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100003 !important;
  background: rgba(10,9,8,.98) !important;
  backdrop-filter: blur(20px) !important;
  padding: 80px 0 24px 0 !important;
  overflow-y: auto !important;
  display: block !important;
}
html body .menu-drawer__submenu .menu-drawer__menu-item,
html body .menu-drawer__submenu a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #f0e8d4 !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid rgba(201,169,110,.10) !important;
  display: block !important;
}
html body .menu-drawer__close-button--inactive,
html body button.menu-drawer__close-button--inactive{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 100004 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #C9A96E !important;
  padding: 16px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201,169,110,.15) !important;
  width: 100% !important;
  cursor: pointer !important;
  text-align: left !important;
}
html body .menu-drawer summary.menu-drawer__menu-item{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body .menu-drawer summary.menu-drawer__menu-item::after{
  content: '\2192 ' !important;
  color: #C9A96E !important;
  font-size: 13px !important;
  opacity: .6 !important;
}


/* ===== SECTION 90 \2014  CHECKOUT BUTTONS ALIGNED + SUBMENU DEEP FIX (2026-05-20) ===== */

/* ========== 1) CHECKOUT BUTTON ALIGNMENT ========== */
/* Both CHECK OUT and Shop Pay/PayPal should align in same column \2014  centered in cart__ctas */
html body .cart__ctas,
html body .cart-page .cart__ctas{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  gap: 10px !important;
}
html body button.cart__checkout-button{
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  align-self: center !important;
}
html body .cart__dynamic-checkout-buttons,
html body .shopify-payment-button{
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  align-self: center !important;
}

/* ========== 2) SUBMENU DEEP FIX \2014  the .menu-drawer__submenu is INSIDE the parent details ========== */
/* When submenu opens via nested <details>, the SUBMENU needs to fully replace the parent view */
html body .menu-drawer details[open] > .menu-drawer__submenu,
html body .menu-drawer ul li details[open] .menu-drawer__submenu,
html body details[open].mobile-facets__details .menu-drawer__submenu,
html body .menu-drawer__navigation details[open] .menu-drawer__submenu{
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 60px) !important;
  z-index: 100003 !important;
  background: rgba(10,9,8,1) !important;
  padding: 20px 0 !important;
  overflow-y: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  margin: 0 !important;
}

/* The submenu items inside */
html body .menu-drawer__submenu > ul,
html body .menu-drawer__submenu ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
html body .menu-drawer__submenu .menu-drawer__menu-item,
html body .menu-drawer__submenu a{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #f0e8d4 !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(201,169,110,.10) !important;
  display: block !important;
  width: 100% !important;
}

/* The 'back' button inside submenu \2014  fixed at top, gold arrow */
html body .menu-drawer__submenu .menu-drawer__close-button--inactive,
html body .menu-drawer__close-button--inactive,
html body button.menu-drawer__close-button--inactive{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #C9A96E !important;
  padding: 18px 22px !important;
  background: rgba(201,169,110,.06) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201,169,110,.20) !important;
  width: 100% !important;
  cursor: pointer !important;
  text-align: left !important;
}

/* CLOSE THE OUTER MENU when submenu opens (so we don't see parent peek through) \2014  actually we DON'T want this; we want submenu to overlay */
/* The fixed-position submenu at z:100003 will overlay everything below z:100003 */

/* Make sure parent details still shows items when no submenu open */
html body .menu-drawer details:not([open]) .menu-drawer__submenu{
  display: none !important;
  visibility: hidden !important;
}


/* ===== SECTION 91 \2014  WHITE BG + MENU TIGHTER (2026-05-20) ===== */
html body quantity-input,
html body quantity-input.quantity,
html body .quantity,
html body .cart-quantity{
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(237,231,217,.18) !important;
  max-width: 120px !important;
  height: 38px !important;
}
html body quantity-input input,
html body .quantity__input{
  background: transparent !important;
  color: #f0e8d4 !important;
  border: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  text-align: center !important;
}
html body .quantity__button{
  background: transparent !important;
  border: 0 !important;
  color: #C9A96E !important;
  width: 32px !important;
}
html body input:not([type=submit]):not([type=button]),
html body textarea,
html body select{
  background: rgba(10,9,8,.5) !important;
  color: #f0e8d4 !important;
}
html body details[open] .menu-drawer__menu-item,
html body details[open] .menu-drawer ul li a,
html body .menu-drawer__menu-item,
html body .menu-drawer__submenu a{
  font-size: 10px !important;
  letter-spacing: .16em !important;
  padding: 11px 18px !important;
  line-height: 1.3 !important;
}
@media (min-width: 400px){
  html body details[open] .menu-drawer{
    max-width: 86vw !important;
    border-right: 1px solid rgba(201,169,110,.15) !important;
  }
}
html body details[open].menu-drawer-container::before{
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.6) !important;
  z-index: 99998 !important;
}


/* ===== SECTION 92 \2014  CART ICON + MENU + REMOVE 30DAY (2026-05-20) ===== */
@media (max-width: 989px){
  html body .header__icon--cart{ width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; }
  html body .header__icon--cart svg{ width: 24px !important; height: 24px !important; color: #C9A96E !important; }
  html body .cart-count-bubble{ position: absolute !important; top: 4px !important; right: 4px !important; min-width: 20px !important; height: 20px !important; background: #C9A96E !important; color: #050505 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; line-height: 20px !important; border-radius: 0 !important; text-align: center !important; padding: 0 4px !important; }
}
@media (max-width: 749px){
  html body details[open] .menu-drawer__menu-item, html body .menu-drawer__menu-item, html body .menu-drawer__submenu a{ font-size: 10px !important; letter-spacing: .14em !important; padding: 9px 18px !important; }
}
html body .cart__footer::after, html body .cart__ctas::after, html body .cart_ctas::after{ content: '//  SECURE CHECKOUT  \B7   UK SHIPPING  \B7   STRIPE  \B7   APPLE PAY  \B7   GOOGLE PAY' !important; }
@media (max-width: 749px){ html body .cart__footer::after, html body .cart__ctas::after, html body .cart_ctas::after{ content: '//  SECURE  \B7   UK SHIPPING  \B7   APPLE PAY' !important; } }
html body .product-form::after, html body .product-form__buttons::after{ content: '//  SECURE CHECKOUT  \B7   UK SHIPPING  \B7   FOUNDER-REVIEWED' !important; }
@media (max-width: 749px){ html body .product-form::after, html body .product-form__buttons::after{ content: '//  SECURE  \B7   UK SHIPPING  \B7   FOUNDER-REVIEWED' !important; } }


/* ===== SECTION 93 \2014  DRAWER SIDE-PANEL REDESIGN (2026-05-20) ===== */
/* Make the drawer feel like a NARROW side panel, not a fullscreen takeover.
   This is what real luxury mobile sites do (Apple, Aesop, etc.) */

@media (max-width: 749px){
  /* Drawer width 75vw + slide-in from left animation */
  html body details[open].menu-drawer-container .menu-drawer,
  html body details[open] .menu-drawer{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 75vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: rgba(10,9,8,.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 56px 0 16px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(0) !important;
    border-right: 1px solid rgba(201,169,110,.20) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.45) !important;
    animation: archDrawerSlideIn .35s cubic-bezier(.2,.7,.2,1) !important;
  }
  @keyframes archDrawerSlideIn{
    from{ transform: translateX(-100%); opacity: 0; }
    to{ transform: translateX(0); opacity: 1; }
  }
  
  /* Menu items \2014  EVEN tighter, no thick borders */
  html body details[open] .menu-drawer__menu-item,
  html body .menu-drawer__menu-item,
  html body .menu-drawer__submenu a,
  html body .menu-drawer__submenu .menu-drawer__menu-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: #f0e8d4 !important;
    padding: 7px 16px !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    transition: padding-left .25s, color .25s !important;
  }
  html body details[open] .menu-drawer__menu-item:hover,
  html body .menu-drawer__menu-item:hover,
  html body .menu-drawer__submenu a:hover{
    color: #C9A96E !important;
    padding-left: 22px !important;
    background: rgba(201,169,110,.04) !important;
  }
  
  /* Close X position \2014  inside drawer top-right */
  html body details[open] .menu-drawer__close-button{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid rgba(201,169,110,.30) !important;
  }
  html body details[open] .menu-drawer__close-button svg{
    width: 16px !important;
    height: 16px !important;
  }
  
  /* BESPOKE COMMISSION CTA \2014  tighter, fits the narrow panel */
  html body .menu-drawer__navigation::after,
  html body .menu-drawer .menu-drawer__navigation::after{
    font-size: 8px !important;
    letter-spacing: .18em !important;
    padding: 12px 10px !important;
    margin: 14px 12px 0 12px !important;
    line-height: 1.3 !important;
  }
  
  /* LOG IN \2014  compact */
  html body .menu-drawer__account a,
  html body .menu-drawer__utility-links a{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    padding: 6px 0 !important;
  }
  html body .menu-drawer__utility-links,
  html body .menu-drawer__account{
    padding: 10px 16px !important;
  }
  
  /* Backdrop dim behind drawer */
  html body details[open].menu-drawer-container::before{
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 99998 !important;
  }
}

/* Submenu \2014  same narrow panel, slide in from RIGHT */
@media (max-width: 749px){
  html body .menu-drawer details[open] > .menu-drawer__submenu{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 75vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 100003 !important;
    background: rgba(10,9,8,1) !important;
    padding: 56px 0 16px 0 !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(201,169,110,.20) !important;
    animation: archDrawerSlideIn .3s cubic-bezier(.2,.7,.2,1) !important;
  }
}


/* ===== SECTION 94 \2014  KILL ORPHAN 'DECOR' + CART ICON FIX BOTH VIEWPORTS (2026-05-20) ===== */

/* 1) Hide desktop header inline nav on mobile (the orphan Decor box was the desktop nav summary leaking through) */
@media (max-width: 989px){
  html body .header__inline-menu,
  html body .header__inline-menu nav,
  html body .header__inline-menu ul,
  html body .header__menu-item,
  html body summary.header__menu-item,
  html body .header > header-menu,
  html body header-menu,
  html body .header > nav,
  html body header > nav:not(.menu-drawer__navigation){
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* 2) CART ICON \2014  ensure properly sized on both mobile AND desktop */
html body header .header__icon--cart,
html body header a.header__icon--cart,
html body .header__icons .header__icon--cart{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html body .header__icon--cart svg,
html body a.header__icon--cart svg{
  width: 24px !important;
  height: 24px !important;
  color: #C9A96E !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .header__icon--cart .cart-count-bubble,
html body .cart-count-bubble{
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 20px !important;
  height: 20px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .cart-count-bubble span{
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  display: inline !important;
}

/* 3) All header icons consistent size + alignment */
html body header .header__icons,
html body .header__icons{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html body header .header__icons .header__icon{
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body header .header__icons .header__icon svg{
  width: 22px !important;
  height: 22px !important;
  color: #C9A96E !important;
}


/* ===== SECTION 95 \2014  KILL ORPHAN DECOR + CART ICON FORCE BIG (2026-05-20) ===== */

/* 1) The submenu 'close button' (which is back-to-parent) had text='Decor' and a small gold box.
   Make it a CLEAN full-width BACK ROW at top of submenu, not a floating orphan. */
html body .menu-drawer__inner-submenu .menu-drawer__close-button,
html body .menu-drawer__submenu .menu-drawer__close-button,
html body button.menu-drawer__close-button[aria-expanded='true'],
html body .menu-drawer__close-button{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: rgba(201,169,110,.05) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201,169,110,.15) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #C9A96E !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: left !important;
}
html body .menu-drawer__inner-submenu .menu-drawer__close-button svg,
html body .menu-drawer__submenu .menu-drawer__close-button svg{
  width: 12px !important;
  height: 10px !important;
  color: #C9A96E !important;
  transform: rotate(180deg) !important;
  margin-right: 4px !important;
}

/* 2) Hide the parent SUMMARY visually when its submenu is open inside the drawer */
html body .menu-drawer details[open].menu-opening > summary.menu-drawer__menu-item,
html body .menu-drawer__navigation details[open].menu-opening > summary{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 3) Submenu inner container reset so the back button appears at top properly */
html body .menu-drawer__inner-submenu,
html body .menu-drawer__submenu{
  padding-top: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 75vw !important;
  max-width: 320px !important;
  height: 100vh !important;
  z-index: 100003 !important;
  background: rgba(10,9,8,1) !important;
  overflow-y: auto !important;
}

/* 4) CART ICON \2014  MAX SPECIFICITY (some other rule was winning) */
html body header.header .header__icons a.header__icon--cart,
html body header.header .header__icons a.header__icon.header__icon--cart,
html body .header-wrapper header .header__icons a.header__icon--cart{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}
html body header.header .header__icons a.header__icon--cart svg,
html body header.header .header__icons a.header__icon--cart .icon,
html body header.header .header__icons a.header__icon--cart svg.icon-cart,
html body .header-wrapper a.header__icon--cart svg{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  color: #C9A96E !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: currentColor !important;
}
html body header.header .header__icons a.header__icon--cart .cart-count-bubble,
html body .header-wrapper .cart-count-bubble{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
}
html body .header__icon--cart .cart-count-bubble span,
html body .cart-count-bubble *{
  color: #050505 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-family: 'JetBrains Mono', monospace !important;
}


/* ===== SECTION 96 \2014  CART CLEAN (2026-05-20) ===== */
html body a.header__icon--cart,
html body a#cart-icon-bubble{
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
html body a.header__icon--cart svg.icon-cart,
html body a#cart-icon-bubble svg{
  width: 28px !important;
  height: 28px !important;
  color: #C9A96E !important;
  fill: none !important;
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}
html body a.header__icon--cart svg path{
  fill: #C9A96E !important;
}
html body a.header__icon--cart .cart-count-bubble{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  min-width: 16px !important;
  height: 16px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  letter-spacing: 0 !important;
  border: 2px solid rgba(10,9,8,1) !important;
}
html body .cart-count-bubble *{
  color: #050505 !important;
  font-size: 9px !important;
  font-family: 'JetBrains Mono', monospace !important;
}


/* ===== SECTION 97 \2014  REPLACE CART SVG WITH CUSTOM CSS ICON (2026-05-20) ===== */
/* Hide the theme's broken cart SVG */
html body a.header__icon--cart svg.icon-cart,
html body a#cart-icon-bubble svg{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Cart container with custom shopping bag icon as background */
html body a.header__icon--cart,
html body a#cart-icon-bubble{
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  background-color: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  text-decoration: none !important;
}

/* Count bubble \2014  pinned to top-right corner, doesn't overlap cart */
html body a.header__icon--cart .cart-count-bubble,
html body a#cart-icon-bubble .cart-count-bubble{
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  letter-spacing: 0 !important;
  border: 2px solid #0a0908 !important;
}


/* ===== SECTION 98 \2014  CART COUNT NUMBER VISIBLE (2026-05-20) ===== */
/* Theme only renders visually-hidden span '7715 items' \2014  no visible number element. 
   Make the span visible + push 'items' word off with word-spacing trick */

html body .cart-count-bubble .visually-hidden,
html body .cart-count-bubble span.visually-hidden,
html body a.header__icon--cart .cart-count-bubble .visually-hidden{
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  word-spacing: 9999px !important;
  letter-spacing: 0 !important;
  display: inline-block !important;
  max-width: 32px !important;
  text-align: center !important;
}

/* Bubble itself \2014  ensure it can clip the overflow */
html body a.header__icon--cart .cart-count-bubble,
html body .cart-count-bubble{
  overflow: hidden !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  border-radius: 0 !important;
  border: 2px solid #0a0908 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}


/* ===== SECTION 99 \2014  HEADER REORDER: LOGO|MENU|ACCOUNT ... SEARCH|CART|GBP (2026-05-20) ===== */

/* Header as flex container with proper alignment */
html body header.header,
html body .header{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

/* Make .header__icons children become direct flex items of header so we can reorder freely */
html body .header__icons{
  display: contents !important;
}

/* ====== LEFT SIDE ORDER: LOGO \2192  MENU \2192  ACCOUNT ====== */
html body .header__heading,
html body h1.header__heading,
html body .header__heading-link{
  order: 1 !important;
  margin: 0 8px 0 0 !important;
  grid-area: auto !important;
  justify-self: auto !important;
}
html body header-drawer,
html body details.menu-drawer-container,
html body .menu-drawer-container{
  order: 2 !important;
  margin: 0 !important;
  grid-area: auto !important;
}
html body a.header__icon--account,
html body .header__icon--account{
  order: 3 !important;
  margin: 0 auto 0 0 !important;
}

/* ====== RIGHT SIDE ORDER: SEARCH \2192  CART \2192  GBP ====== */
html body details-modal.header__search,
html body .header__search{
  order: 10 !important;
  margin: 0 !important;
}
html body a.header__icon--cart,
html body .header__icon--cart{
  order: 11 !important;
  margin: 0 !important;
}
html body .futureblink_currency_mobile,
html body div.futureblink_currency_mobile{
  order: 12 !important;
  margin: 0 0 0 4px !important;
}

/* Hide desktop-localization-wrapper on mobile (we use futureblink_currency_mobile instead) */
@media (max-width: 989px){
  html body .desktop-localization-wrapper,
  html body div.desktop-localization-wrapper{
    display: none !important;
    order: -99 !important;
  }
}
html body .desktop-localization-wrapper{
  order: 13 !important;
}

/* Hide the inline-menu nav (was order:0) so it doesn't interfere */
html body .header__inline-menu{
  display: none !important;
  order: -99 !important;
}

/* Hide any leftover SCRIPT children */
html body header script{
  display: none !important;
}

/* On desktop, restore inline-menu */
@media (min-width: 990px){
  html body .header__inline-menu{
    display: revert !important;
    order: 5 !important;
  }
}


/* ===== SECTION 100 \2014  HEADER ORDER FIX (display:contents) (2026-05-20) ===== */
html body header.header .header__icons,
html body header.header div.header__icons{ display: contents !important; }
html body header.header .header__heading{ order: 1 !important; margin: 0 8px 0 0 !important; }
html body header.header details.menu-drawer-container{ order: 2 !important; }
html body header.header a.header__icon--account{ order: 3 !important; margin: 0 auto 0 0 !important; }
html body header.header details-modal.header__search{ order: 10 !important; }
html body header.header a.header__icon--cart{ order: 11 !important; }
html body header.header .futureblink_currency_mobile{ order: 12 !important; }
@media (max-width: 989px){ html body header.header .desktop-localization-wrapper{ display: none !important; } }


/* ===== SECTION 101 \2014  HEADER LEFT/RIGHT CLUSTER PROPER SPLIT (2026-05-20) ===== */

/* Header full-width flex with proper padding edges */
html body header.header,
html body .header{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 14px !important;
  gap: 6px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  box-sizing: border-box !important;
}

/* Ensure icons unwrap (Section 100 already does this but reconfirm) */
html body header.header .header__icons,
html body header.header div.header__icons{ display: contents !important; }

/* LEFT cluster: LOGO | MENU | ACCOUNT \2014  stay tight together at very left */
html body header.header .header__heading{ order: 1 !important; margin: 0 !important; flex: 0 0 auto !important; }
html body header.header details.menu-drawer-container{ order: 2 !important; margin: 0 !important; flex: 0 0 auto !important; }
html body header.header a.header__icon--account{ order: 3 !important; margin: 0 !important; flex: 0 0 auto !important; }

/* RIGHT cluster: SEARCH | CART | GBP \2014  push to very right with margin-left:auto on SEARCH (first right item) */
html body header.header details-modal.header__search{ order: 10 !important; margin-left: auto !important; flex: 0 0 auto !important; }
html body header.header a.header__icon--cart{ order: 11 !important; margin: 0 !important; flex: 0 0 auto !important; }
html body header.header .futureblink_currency_mobile{ order: 12 !important; margin: 0 0 0 4px !important; flex: 0 0 auto !important; }

/* Hide localization wrapper on mobile */
@media (max-width: 989px){
  html body header.header .desktop-localization-wrapper{ display: none !important; }
}

/* Hide the OG inline-menu nav (was order:0) */
html body header.header .header__inline-menu{ display: none !important; }
@media (min-width: 990px){
  html body header.header .header__inline-menu{ display: flex !important; order: 5 !important; margin-left: 20px !important; }
}


/* ===== SECTION 102 \2014  CART COUNT SINGLE + SWAP CART\2194 GBP + HIDE ACCOUNT FROM HEADER (2026-05-20) ===== */

/* 1) CART COUNT \2014  ensure number renders ONCE (force single-line, hide overflow) */
html body a.header__icon--cart .cart-count-bubble,
html body a#cart-icon-bubble .cart-count-bubble{
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 18px !important;
  max-width: 28px !important;
  height: 18px !important;
  background: #C9A96E !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  display: inline-block !important;
  z-index: 2 !important;
  letter-spacing: 0 !important;
  border: 2px solid #0a0908 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  box-sizing: content-box !important;
}
html body a.header__icon--cart .cart-count-bubble .visually-hidden,
html body .cart-count-bubble span.visually-hidden{
  position: static !important;
  width: auto !important;
  height: 18px !important;
  line-height: 14px !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  word-spacing: 9999px !important;
  letter-spacing: 0 !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 2) SWAP CART \2194  GBP (was CART:11, GBP:12 \2192  now GBP:11, CART:12) */
html body header.header .futureblink_currency_mobile{ order: 11 !important; margin: 0 !important; flex: 0 0 auto !important; }
html body header.header a.header__icon--cart{ order: 12 !important; margin: 0 0 0 4px !important; flex: 0 0 auto !important; }

/* 3) HIDE account icon from header \2014  account is accessible via menu drawer LOG IN */
html body header.header a.header__icon--account,
html body header.header .header__icon--account{
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ===== SECTION 103 \2014  CART COUNT FIX: SHOW ONE NUMBER NOT TWO (2026-05-20) ===== */
/* Shopify renders aria-hidden<count> + visually-hidden<count items> when count < 100
   Only visually-hidden when count >= 100
   Goal: show ONE number in both cases */

/* WHEN aria-hidden span exists \2014  show it visibly, HIDE visually-hidden */
html body .cart-count-bubble [aria-hidden='true']{
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  text-align: center !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* Hide visually-hidden BY DEFAULT (when aria-hidden sibling exists) */
html body .cart-count-bubble .visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: inline-block !important;
  font-size: 0 !important;
  color: transparent !important;
  word-spacing: 0 !important;
}

/* WHEN aria-hidden span does NOT exist (count >= 100), un-hide visually-hidden as fallback */
html body .cart-count-bubble:not(:has([aria-hidden])) .visually-hidden,
html body .cart-count-bubble:not(:has(span[aria-hidden])) .visually-hidden{
  position: static !important;
  width: auto !important;
  height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: 9px !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  word-spacing: 9999px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}


/* ===== SECTION 104 \2014  CART COUNT: BEAT SECTION 92's higher-specificity visually-hidden rule (2026-05-20) ===== */

/* Use max specificity to override Section 92's static positioning of visually-hidden */
html body header.header a.header__icon--cart .cart-count-bubble span.visually-hidden,
html body header.header a#cart-icon-bubble .cart-count-bubble span.visually-hidden,
html body .header-wrapper a.header__icon--cart .cart-count-bubble span.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  word-spacing: 0 !important;
  letter-spacing: 0 !important;
  display: inline-block !important;
}

/* Only when count >= 100 (no aria-hidden sibling), re-show visually-hidden as fallback */
html body header.header a.header__icon--cart .cart-count-bubble:not(:has(span[aria-hidden])) span.visually-hidden,
html body header.header a#cart-icon-bubble .cart-count-bubble:not(:has(span[aria-hidden])) span.visually-hidden{
  position: static !important;
  width: auto !important;
  height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: 9px !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  word-spacing: 9999px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* aria-hidden number \2014  ensure styled visible */
html body header.header a.header__icon--cart .cart-count-bubble span[aria-hidden]{
  display: inline-block !important;
  color: #050505 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
}


/* ===== SECTION 105 \2014  PDP MOBILE REDESIGN (2026-05-20) ===== */
@media (max-width: 749px){
  html body .product__info-wrapper,
  html body .product__info-container{ display: flex !important; flex-direction: column !important; padding: 0 16px !important; }
  html body .product__title{ order: 1 !important; margin: 24px 0 8px 0 !important; font-family: 'Chakra Petch', sans-serif !important; font-weight: 700 !important; font-size: 26px !important; line-height: 1.1 !important; letter-spacing: -.01em !important; color: #f0e8d4 !important; text-transform: none !important; }
  html body .product__info-wrapper .price,
  html body .product__info .price{ order: 2 !important; margin: 0 0 14px 0 !important; }
  html body .product__info-wrapper .price .price-item,
  html body .price .price-item--regular{ font-family: 'JetBrains Mono', monospace !important; font-size: 22px !important; color: #C9A96E !important; letter-spacing: 0 !important; font-weight: 500 !important; }
  html body .product__info-wrapper .badge,
  html body .product__info .badge{ order: 3 !important; margin: 0 0 14px 0 !important; display: inline-block !important; background: rgba(201,169,110,.10) !important; border: 1px solid rgba(201,169,110,.40) !important; color: #C9A96E !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; letter-spacing: .22em !important; text-transform: uppercase !important; padding: 5px 11px !important; border-radius: 0 !important; position: static !important; width: auto !important; max-width: none !important; align-self: flex-start !important; }
  html body .product__info-wrapper .product__tax{ order: 4 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; letter-spacing: .18em !important; color: rgba(201,169,110,.60) !important; text-transform: uppercase !important; line-height: 1.5 !important; text-align: left !important; margin: 4px 0 14px 0 !important; }
  html body .product__info-wrapper .product-form{ order: 5 !important; margin: 12px 0 !important; }
  html body .product__info-wrapper .shopify-payment-button{ order: 6 !important; margin: 8px 0 !important; }
  html body .product__description{ order: 7 !important; margin: 24px 0 0 0 !important; padding-top: 24px !important; border-top: 1px solid rgba(201,169,110,.15) !important; font-family: 'Rajdhani', sans-serif !important; font-size: 14px !important; line-height: 1.7 !important; color: #b8a988 !important; font-weight: 500 !important; }
  html body .product__description p:first-of-type{ font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 17px !important; line-height: 1.5 !important; color: #f5ead4 !important; margin-bottom: 18px !important; font-weight: 400 !important; }
  html body .product__description ul{ list-style: none !important; padding: 0 !important; margin: 0 0 18px 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
  html body .product__description ul li{ list-style: none !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(237,231,217,.06) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; line-height: 1.5 !important; color: #f0e8d4 !important; }
  html body .product__description ul li::before{ content: '\2014 ' !important; color: #C9A96E !important; flex-shrink: 0 !important; margin-top: 2px !important; }
  html body .product__description ul li strong{ color: #C9A96E !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; font-size: 10px !important; margin-right: 6px !important; flex-shrink: 0 !important; }
  html body .breadcrumb{ padding: 14px 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: .18em !important; color: rgba(240,232,212,.50) !important; text-transform: uppercase !important; }
  html body .product__media-list-pagination,
  html body .slider-counter{ font-family: 'JetBrains Mono', monospace !important; color: #C9A96E !important; font-size: 11px !important; letter-spacing: .14em !important; padding: 14px 0 !important; }
  html body .product-form__input label,
  html body .product__info-wrapper label{ font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(201,169,110,.85) !important; margin-bottom: 6px !important; }
}


/* ===== SECTION 106 \2014  PDP DEDUPLICATION (2026-05-20) ===== */

/* 1) KILL the duplicate trust strip on .product-form__buttons \2014  keep the one on .product-form */
html body .product-form__buttons::after{ content: '' !important; display: none !important; }

/* 2) Detect duplicate accordion blocks: the theme renders BOTH a desktop and mobile version.
   Hide the duplicate set when both exist. */
@media (max-width: 749px){
  /* If page has product-form (buy block) followed by SAME accordions, keep only one accordion set */
  html body .product__info-wrapper details[aria-label]:nth-of-type(n+5),
  html body .product__info-wrapper details.product__accordion:nth-of-type(n+5){
    display: none !important;
  }
}

/* 3) Hide duplicate '// LONDON \B7  FOUNDER-LED \B7  UK CH #14635926' line if appears twice */
/* Find via Shopify Liquid that adds it as text inside p */

/* 4) Hide duplicate title H1 if present (keep .product__title div which holds the main heading) */
html body main .product__title:not(:first-of-type){
  display: none !important;
}

/* 5) HIDE the SALE badge when SOLD OUT badge is present (cheap to stack both) */
html body .product .badge--sale + .badge,
html body .product .badge ~ .badge:not(:first-child){
  display: none !important;
}
html body .product__badge .badge--sale{ display: none !important; }
html body span.badge[data-content='Sale']{ display: none !important; }

/* 6) PDP image: tighten margins, no extra space */
@media (max-width: 749px){
  html body .product__media-wrapper,
  html body .product-media-container{
    margin: 0 !important;
  }
  html body .product__media img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* 7) Move H1 title to TOP of info block via explicit order positioning */
@media (max-width: 749px){
  html body .product__info,
  html body .product__info-wrapper{
    display: flex !important;
    flex-direction: column !important;
  }
  html body .product__info-wrapper > *,
  html body .product__info > *{ order: 50; }
  /* Force title block to top */
  html body .product__info-wrapper .product__title,
  html body .product__info-wrapper h1{ order: 1 !important; }
  /* Then price */
  html body .product__info-wrapper .price,
  html body .product__info-wrapper .product__tax{ order: 2 !important; }
  /* Then trust strip */
  html body .product__info-wrapper .product__description-trust,
  html body .product__info-wrapper .arch-trust{ order: 3 !important; }
  /* Then product form (buy buttons) */
  html body .product__info-wrapper .product-form{ order: 4 !important; }
  /* Then accordions */
  html body .product__info-wrapper details.accordion,
  html body .product__info-wrapper details.product__accordion{ order: 5 !important; }
  /* Then description (read more) */
  html body .product__info-wrapper .product__description,
  html body .product__info-wrapper .rte:not(.newsletter__subheading){ order: 6 !important; }
}



/* ===== SECTION 107 \2014  RESCOPE PDP PRICE + RESTORE CARDS (2026-05-20) ===== */
@media (max-width: 749px){
  html body .card-wrapper .price,
  html body .card-wrapper .price-item,
  html body .card-wrapper .price-item--regular,
  html body .card-information .price,
  html body .card-information .price-item,
  html body .product-card-wrapper .price,
  html body .grid .card .price,
  html body .grid .card .price-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #C9A96E !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
  }
  html body .card-wrapper .card__heading,
  html body .card-wrapper .card__heading a,
  html body .card__information .card__heading{
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #f0e8d4 !important;
    margin: 6px 0 4px 0 !important;
    text-transform: none !important;
  }
  html body .card-information,
  html body .card__information{
    padding: 8px !important;
    gap: 2px !important;
  }
}
@media (min-width: 750px){
  html body .card-wrapper .price,
  html body .card-wrapper .price-item,
  html body .card-information .price,
  html body .card-information .price-item{
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #C9A96E !important;
  }
}


/* ===== SECTION 108 \2014  PDP SALE BADGE PROPER CHIP + FINAL POLISH (2026-05-20) ===== */

/* SALE badge on PDP was 437px wide thin strip \2014  force inline-block compact chip */
html body .product .badge,
html body .product .price__badge-sale,
html body .product .price__badge,
html body .product__info .badge,
html body .product__info-wrapper .badge,
html body .product .price--on-sale .badge{
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,.10) !important;
  border: 1px solid rgba(201,169,110,.40) !important;
  border-radius: 0 !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
  position: static !important;
  margin: 0 8px 0 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}

/* Price + Sale chip on same line if both exist */
html body .product__info-wrapper .price,
html body .product__info .price{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* PDP price text \2014  reaffirm proper size */
html body .product__info-wrapper .price .price-item,
html body .product__info .price .price-item{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 20px !important;
  color: #C9A96E !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TAX caption tighter */
html body .product__info-wrapper .product__tax{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  color: rgba(201,169,110,.60) !important;
  text-transform: uppercase !important;
  margin: 6px 0 14px 0 !important;
  display: block !important;
  text-align: left !important;
}

/* COLOR/VARIANT label */
html body .product-form__input legend,
html body .product-form__input label,
html body fieldset.product-form__input legend{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(201,169,110,.85) !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
}

/* COLOR dropdown clean */
html body .product-form__input select,
html body select.product-form__input-select{
  background: rgba(10,9,8,.5) !important;
  border: 1px solid rgba(201,169,110,.30) !important;
  color: #f0e8d4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  height: 50px !important;
  width: 100% !important;
}

/* PAY-IN-3 SHOP PAY installments \2014  subtle */
html body .shopify-installments,
html body .product__info-wrapper .shopify-installments,
html body shopify-payment-terms{
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  color: rgba(240,232,212,.65) !important;
  margin: 8px 0 16px 0 !important;
}
html body .shopify-installments a,
html body shopify-payment-terms a{
  color: #C9A96E !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* NOTIFY ME button \2014  reaffirm prominent */
html body .product-form__submit,
html body button.product-form__submit,
html body .product-form button[type='submit']{
  background: #C9A96E !important;
  color: #1a1408 !important;
  border: 1px solid #C9A96E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 16px 24px !important;
  width: 100% !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 54px !important;
}

/* PDP media gallery pagination 1/7 */
html body .slider-counter,
html body .product__media-list-pagination{
  font-family: 'JetBrains Mono', monospace !important;
  color: #C9A96E !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  padding: 14px 0 !important;
  text-align: center !important;
  font-weight: 500 !important;
}


/* ===== SECTION 109 \2014  RESTORE PDP TITLE + EMPTY REVIEWS POLISH (2026-05-21) ===== */

/* Force PDP title visible (Section 106 wrong :first-of-type hid both) */
html body main .product__title,
html body main div.product__title,
html body main .product__info .product__title{
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  margin: 24px 0 12px 0 !important;
  padding: 0 !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: #f0e8d4 !important;
  text-transform: none !important;
}
/* Hide the duplicate A.product__title (linked variant) */
html body main a.product__title{
  display: none !important;
}
/* Show only the first DIV.product__title */
html body main div.product__title{
  display: block !important;
}

/* Trust grid \2014  hide the '14-DAY RETURNS' tile (user said no fixed return policy) */
html body .product .product__info-wrapper > div:has(> div:contains('14-DAY')),
html body .product__features-item:has(span:contains('14-DAY')),
html body .product .feature-grid-item--returns,
html body .product li:has(*:contains('14-DAY RETURNS')){
  display: none !important;
}

/* Hide empty 'Customer Reviews / Be the first to write a review' block */
html body .spr-container:has(.spr-summary-actions-newreview),
html body .reviews-section--empty,
html body div:has(> h2:contains('Customer Reviews')) + div:has(p:contains('Be the first')){
  /* Hard to target reliably via :contains */
}

/* Visible product title at top of info wrapper (force order:1 + display:block) */
@media (max-width: 749px){
  html body .product__info-wrapper > div.product__title,
  html body .product__info > div.product__title{
    order: 1 !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 0 16px 0 !important;
  }
}

/* PDP H1 in the title div (theme may wrap it) */
html body .product__title h1,
html body div.product__title h1,
html body main .product__title h1{
  display: block !important;
  visibility: visible !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: #f0e8d4 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* SHIPPING / RETURNS subheadings (in description) match Details style */
html body .product__description p strong:only-child,
html body .product__description h3,
html body .product__description h4{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: rgba(201,169,110,.85) !important;
  margin: 28px 0 14px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(201,169,110,.15) !important;
  font-weight: 600 !important;
  display: block !important;
}


/* ===== SECTION 110 \2014  KILL 14-DAY RETURNS TILE + RETURNS ACCORDION (2026-05-21) ===== */
/* Each product has its own return policy \2014  a unified 14-DAY RETURNS promise is wrong. */
html body .arch-trust-bar .arch-trust-item:nth-child(2){display:none !important;}
html body .arch-trust-bar{grid-template-columns:repeat(3,1fr) !important;}
html body .product__info-container .product__accordion:has(details[id*="collapsible-row-1-"]){display:none !important;}


/* ===== SECTION 111 \2014  RESTORE PDP TITLE (FIX S106 :not BUG) + SHOP PAY DARK + TIGHTEN MOBILE GAPS (2026-05-21) ===== */
/* S106 used :not(:first-of-type) which wrongly hides .product__title whenever a non-title DIV (description) renders first.
   Fix with higher specificity. */

html body main .product__info-container .product__title{
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 12px 0 !important;
  font-family: 'Chakra Petch', sans-serif !important;
  color: #f0e8d4 !important;
}
html body main .product__info-container .product__title h1,
html body main .product__info-container .product__title h2.h1{
  display: block !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  color: #f0e8d4 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}
@media (max-width: 749px){
  html body main .product__info-container .product__title h1,
  html body main .product__info-container .product__title h2.h1{
    font-size: 19px !important;
    margin-top: 18px !important;
  }
  html body main .product__info-container .product__title{
    margin-bottom: 6px !important;
  }
}

/* Proper duplicate-title hide \2014  only kill .product__title that follows another .product__title sibling */
html body main .product__title + .product__title{display:none !important;}

/* SHOP PAY BUTTON \2014  dark brand, not purple. */
html body .shopify-payment-button{margin-top: 8px !important;}
html body .shopify-payment-button shop-pay-button,
html body .shopify-payment-button [data-shop-pay-button]{
  --shop-pay-button-background: #0b0b0b !important;
  --shop-pay-button-color: #f0e8d4 !important;
  --shop-pay-button-border-radius: 0 !important;
  background: #0b0b0b !important;
  border: 1px solid rgba(201,169,110,.4) !important;
  border-radius: 0 !important;
}
html body .shopify-payment-button__button--unbranded,
html body .shopify-payment-button__more-options{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: rgba(201,169,110,.75) !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  display: block !important;
  text-align: center !important;
}

/* Tighten mobile gap between COLOR variant dropdown and the action buttons */
@media (max-width: 749px){
  html body .product-form__input{margin-bottom: 10px !important;}
  html body .product-form{margin-top: 4px !important;}
  html body .product-form__buttons{margin-top: 6px !important; gap: 6px !important;}
}


/* ===== SECTION 112 \2014  DEDUP A.product__title (S111 over-matched) (2026-05-21) ===== */
/* S111's .product__title rule matched both DIV.product__title (wrapper) AND A.product__title (inner link).
   We want the H1 inside the DIV visible, and the H2 inside the A hidden. */
html body main .product__info-container .product__title a.product__title,
html body main .product__info-container .product__title > a.product__title{
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html body main .product__info-container .product__title a.product__title h2,
html body main .product__info-container .product__title a.product__title .h1{
  display: none !important;
}


/* ===== SECTION 113 \2014  FORCE TITLE FIRST IN PDP INFO ON MOBILE + DESCRIPTION HIERARCHY (2026-05-21) ===== */
@media (max-width: 749px){
  html body main .product__info-container{
    display: flex !important;
    flex-direction: column !important;
    padding: 0 16px !important;
  }
  html body main .product__info-container > .product__title{order: -100 !important; margin-top: 14px !important;}
  html body main .product__info-container > .product__description{order: 50 !important;}
  html body main .product__info-container > .product__tax{order: 30 !important;}
  html body main .product__info-container > variant-selects{order: 60 !important;}
  html body main .product__info-container > .product__accordion{order: 80 !important;}
  html body main .product__info-container > .shopify-block{order: 90 !important;}
  /* keep price after title \2014  the price wrapper may be a sibling DIV without class. Target by :has() */
  html body main .product__info-container > div:has(.price){order: -10 !important;}
  /* product-form (buttons, color) just below price */
  html body main .product__info-container > div:has(.product-form){order: 20 !important;}
}

/* Description heading hierarchy \2014  brand-aligned, mono headers */
html body main .product__description h2,
html body main .product__description h3{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: rgba(201,169,110,.85) !important;
  margin: 22px 0 10px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(201,169,110,.18) !important;
  font-weight: 600 !important;
  display: block !important;
  line-height: 1 !important;
}
html body main .product__description h6{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: rgba(201,169,110,.6) !important;
  margin: 14px 0 4px 0 !important;
  font-weight: 500 !important;
}
html body main .product__description p{
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(237,231,217,.86) !important;
  margin: 0 0 10px 0 !important;
}
html body main .product__description ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 14px 0 !important;
}
html body main .product__description ul li{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: rgba(237,231,217,.78) !important;
  margin: 0 0 4px 0 !important;
  padding: 0 0 0 12px !important;
  position: relative !important;
}
html body main .product__description ul li::before{
  content: '\2022 ' !important;
  position: absolute !important; left: 0 !important; color: rgba(201,169,110,.65) !important;
}


/* ===== SECTION 114 \2014  PDP POLISH: META STRIP WRAP + KILL BROKEN PAGINATION + ACCORDION + VARIANT + TAX (2026-05-21) ===== */
html body main .product__info-container .product__title::before{white-space:normal !important;word-wrap:break-word !important;overflow:visible !important;text-overflow:clip !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:rgba(201,169,110,.72) !important;margin:0 0 10px 0 !important;padding:0 !important;line-height:1.6 !important;max-width:100% !important;}
@media (max-width: 749px){html body main .product__info-container .product__title::before{font-size:8.5px !important;letter-spacing:.18em !important;margin-bottom:8px !important;line-height:1.7 !important;}}
html body .slider-counter{display:none !important;}
html body .product__media-icon,html body .product__media-toggle{background:rgba(11,11,11,.75) !important;border:1px solid rgba(201,169,110,.3) !important;color:rgba(237,231,217,.86) !important;border-radius:0 !important;}
html body .product__accordion details > summary{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;padding:16px 0 !important;border-bottom:1px solid rgba(201,169,110,.12) !important;cursor:pointer !important;}
html body .product__accordion details > summary .summary__title{display:flex !important;align-items:center !important;gap:10px !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.28em !important;text-transform:uppercase !important;color:rgba(237,231,217,.86) !important;font-weight:500 !important;width:auto !important;flex:1 1 auto !important;}
html body .product__accordion details > summary .summary__title svg{width:14px !important;height:14px !important;flex-shrink:0 !important;opacity:.6 !important;}
html body .product__accordion details > summary > svg{width:12px !important;height:12px !important;flex-shrink:0 !important;opacity:.55 !important;transition:transform .2s ease !important;}
html body .product__accordion details[open] > summary > svg{transform:rotate(180deg) !important;}
html body .product__accordion details > .accordion__content{padding:14px 0 18px 0 !important;font-family:'Rajdhani','Inter',sans-serif !important;font-size:13px !important;line-height:1.65 !important;color:rgba(237,231,217,.78) !important;}
html body .product-form__input label.form__label,html body .product-form__input legend.form__label{display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.78) !important;margin:0 0 6px 0 !important;font-weight:500 !important;}
html body .product-form__input select,html body .product-form__input .select__select{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.12em !important;background:transparent !important;border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;color:rgba(237,231,217,.92) !important;padding:12px 36px 12px 14px !important;width:100% !important;height:auto !important;}
html body .product-form__buttons .product-form__submit{margin:0 0 4px 0 !important;}
html body .shopify-payment-button{margin-top:4px !important;margin-bottom:8px !important;}
html body .shopify-payment-button__more-options{margin:6px 0 0 0 !important;padding:8px 0 !important;}
html body main .product__info-container .product__tax{font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.26em !important;text-transform:uppercase !important;color:rgba(201,169,110,.55) !important;margin:6px 0 14px 0 !important;padding:0 !important;line-height:1.5 !important;}


/* ===== SECTION 115 \2014  HOMEPAGE POLISH: RICH TEXT + NEWSLETTER + MULTICOLUMN (2026-05-21) ===== */

html body .rich-text__heading{font-family:'Chakra Petch', sans-serif !important;font-weight:600 !important;line-height:1.18 !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;text-transform:none !important;margin:0 0 12px 0 !important;}
@media (max-width:749px){html body .rich-text__heading,html body .rich-text__heading.h1{font-size:22px !important;line-height:1.2 !important;}html body h2.h1{font-size:22px !important;line-height:1.2 !important;}}
html body .rich-text__text,html body .rich-text__caption,html body .rich-text p{font-family:'Rajdhani','Inter',sans-serif !important;font-size:14px !important;line-height:1.6 !important;color:rgba(237,231,217,.82) !important;}
@media (max-width:749px){html body .rich-text__text,html body .rich-text p{font-size:13px !important;line-height:1.65 !important;}}

/* Newsletter form */
html body .newsletter-form,html body form[action*="contact"]{margin:8px 0 18px 0 !important;}
html body .newsletter-form .field__input,html body form[action*="contact"] .field__input{background:transparent !important;border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;padding:14px 50px 14px 16px !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.12em !important;color:#f0e8d4 !important;width:100% !important;height:auto !important;box-shadow:none !important;}
html body .newsletter-form .field__input::placeholder,html body form[action*="contact"] .field__input::placeholder{color:rgba(201,169,110,.5) !important;text-transform:uppercase !important;letter-spacing:.26em !important;font-size:9px !important;}
html body .newsletter-form .field__button,html body form[action*="contact"] .field__button{background:rgba(201,169,110,.95) !important;border:none !important;border-radius:0 !important;color:#0b0b0b !important;width:44px !important;height:44px !important;}
html body .newsletter-form .field__button:hover,html body form[action*="contact"] .field__button:hover{background:#E8C887 !important;}

/* Multicolumn (WHY ARCHALIGN) */
html body .multicolumn-card__info h2,html body .multicolumn-card__info h3,html body .multicolumn-card__title{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.85) !important;margin:0 0 10px 0 !important;font-weight:600 !important;}
html body .multicolumn-card__info p,html body .multicolumn-card__info .rte p{font-family:'Rajdhani','Inter',sans-serif !important;font-size:13px !important;line-height:1.6 !important;color:rgba(237,231,217,.78) !important;margin:0 !important;}
@media (max-width:749px){html body .multicolumn .multicolumn-list{gap:24px !important;}html body .multicolumn-card__info{padding:0 !important;}}

/* Section padding tightened on mobile */
@media (max-width:749px){html body .shopify-section .section,html body .shopify-section section{padding-top:36px !important;padding-bottom:36px !important;}}


/* ===== SECTION 116 \2014  COLLECTION PAGE POLISH (2026-05-21) ===== */
html body .collection-hero__title{font-family:'Chakra Petch', sans-serif !important;font-weight:600 !important;text-transform:none !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;font-size:28px !important;margin:0 0 12px 0 !important;line-height:1.18 !important;}
html body .collection-hero__title__wrap{position:relative !important;}
html body .collection-hero__title::before{content:'// COLLECTION' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 8px 0 !important;text-transform:uppercase !important;font-weight:600 !important;}
html body .collection-hero__title .visually-hidden{position:absolute !important;clip:rect(0,0,0,0) !important;overflow:hidden !important;width:1px !important;height:1px !important;}
@media (max-width:749px){html body .collection-hero__title{font-size:22px !important;}html body .collection-hero{padding:20px 0 14px 0 !important;}html body .collection{padding-top:18px !important;padding-bottom:32px !important;}}

/* Card titles \2014  clean brand */
html body .card-wrapper .card__heading,html body .card-wrapper .card__information .card__heading{font-family:'Chakra Petch', sans-serif !important;font-size:13px !important;line-height:1.25 !important;letter-spacing:0 !important;font-weight:500 !important;color:#f0e8d4 !important;margin:8px 0 4px 0 !important;text-transform:none !important;}
html body .card-wrapper .card__heading a{color:inherit !important;text-decoration:none !important;}

/* Pagination */
html body .pagination-wrapper a,html body .pagination a,html body .pagination-wrapper .pagination__list,html body .pagination__list a,html body .pagination__list span{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.2em !important;color:rgba(201,169,110,.8) !important;}
html body .pagination__list a:hover,html body .pagination-wrapper a:hover{color:#E8C887 !important;}
html body .pagination__list span[aria-current],html body .pagination__list .pagination__item--current{color:#E8C887 !important;}

/* Facet/filter bar */
html body .facets__wrapper,html body .facets-container{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:rgba(201,169,110,.78) !important;}
html body .facets__summary,html body .facet-checkbox label{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;}

/* Collection grid card hover lift */
@media (min-width:750px){html body .card-wrapper{transition:transform .25s ease, box-shadow .25s ease !important;}html body .card-wrapper:hover{transform:translateY(-2px) !important;}}


/* ===== SECTION 117 \2014  CART POLISH + CARD IMAGE FIX + SHOP PAY/PAYPAL DARK + TRUST STRIP NOWRAP (2026-05-21) ===== */

/* ===== A. CARD IMAGE BUG FIX (HOMEPAGE FEATURED COLLECTION) =====
   .card__inner was display:flex with .card__media stuck at intrinsic 182px width \2014  right half was just the dark inner bg showing through */
html body .card-wrapper .card__inner,
html body .grid__item .card__inner{display:block !important;position:relative !important;}
html body .card-wrapper .card__media,
html body .card-wrapper .media,
html body .grid__item .card__media{width:100% !important;flex:none !important;display:block !important;position:relative !important;margin:0 !important;}
html body .card-wrapper .card__media img,
html body .card-wrapper .media img,
html body .grid__item .card__media img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;position:absolute !important;inset:0 !important;}

/* ===== B. CART PAGE TITLE ===== */
html body .cart .title,html body main .title.title--primary{font-family:'Chakra Petch', sans-serif !important;font-size:24px !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;text-transform:none !important;font-weight:600 !important;margin:0 0 18px 0 !important;line-height:1.18 !important;}
html body .cart .title::before,html body main .title.title--primary::before{content:'// CART' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}

/* ===== C. CART ROW ===== */
html body .cart-item{border-top:1px solid rgba(201,169,110,.12) !important;padding:18px 0 !important;}
html body .cart-item__name{font-family:'Chakra Petch', sans-serif !important;font-size:14px !important;color:#f0e8d4 !important;letter-spacing:0 !important;line-height:1.3 !important;font-weight:600 !important;text-decoration:none !important;}
html body .cart-item__price,html body .cart-item .price{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.1em !important;color:rgba(237,231,217,.86) !important;}
html body .quantity{border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;background:transparent !important;}
html body .quantity__button,html body .quantity__input{background:transparent !important;color:#f0e8d4 !important;font-family:'JetBrains Mono', monospace !important;border:none !important;font-size:12px !important;}

/* ===== D. CHECKOUT BUTTON ===== */
html body .cart__checkout-button,html body button[name="checkout"],html body .cart__submit{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:12px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:16px 24px !important;border:none !important;width:100% !important;font-weight:600 !important;}
html body .cart__checkout-button:hover{background:#E8C887 !important;}
html body .totals__subtotal,html body .totals__total{font-family:'JetBrains Mono', monospace !important;font-size:13px !important;letter-spacing:.12em !important;color:#f0e8d4 !important;text-transform:uppercase !important;}
html body .totals__tax{font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.26em !important;text-transform:uppercase !important;color:rgba(201,169,110,.55) !important;}

/* ===== E. TRUST STRIP NOWRAP (was breaking "checkout" \2192  "check" + "out") ===== */
html body main .arch-trust-bar,html body .cart .arch-trust-bar,html body [class*="trust-strip"]{white-space:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;}
html body main .arch-trust-bar::-webkit-scrollbar,html body [class*="trust-strip"]::-webkit-scrollbar{display:none !important;}

/* ===== F. SHOP PAY BUTTON \2014  STRONGER SPECIFICITY (was still purple) ===== */
html body main .shopify-payment-button shop-pay-button,
html body main .shopify-payment-button [data-shop-pay-button],
html body .cart__footer .shopify-payment-button shop-pay-button,
html body .product-form__buttons + .shopify-payment-button shop-pay-button{
  --shop-pay-button-background:#0b0b0b !important;
  --shop-pay-button-background-hover:#1a1a1a !important;
  --shop-pay-button-color:#f0e8d4 !important;
  --shop-pay-button-border-radius:0 !important;
  background:#0b0b0b !important;
  border:1px solid rgba(201,169,110,.4) !important;
  border-radius:0 !important;
  filter:grayscale(1) brightness(.4) !important;
}

/* ===== G. PAYPAL BUTTON DARKEN ===== */
html body .shopify-payment-button [data-funding-source="paypal"],
html body .shopify-payment-button .paypal-button,
html body .shopify-payment-button div[role="link"][aria-label*="PayPal"]{
  filter:grayscale(.55) brightness(.55) contrast(1.05) !important;
  border-radius:0 !important;
  border:1px solid rgba(201,169,110,.3) !important;
  overflow:hidden !important;
}

/* ===== H. CART EMPTY STATE ===== */
html body .cart__empty-text{font-family:'Chakra Petch', sans-serif !important;font-size:18px !important;color:rgba(237,231,217,.7) !important;letter-spacing:0 !important;}
html body .cart__warnings .button,html body .cart__warnings a.button{background:transparent !important;border:1px solid rgba(201,169,110,.5) !important;color:rgba(201,169,110,.95) !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.26em !important;text-transform:uppercase !important;border-radius:0 !important;padding:14px 24px !important;}


/* ===== SECTION 118 \2014  FIX S117 CARD IMAGE HEIGHT BUG (2026-05-21) ===== */
/* S117 set image to position:absolute height:100% but parent .card__media wasn't absolute-positioned to fill the .ratio inner. Force media to also absolute-fill. */
html body .card-wrapper .card__inner{display:block !important;position:relative !important;}
html body .card-wrapper .card__media,
html body .card-wrapper .card__inner > .card__media,
html body .grid__item .card__inner > .card__media{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;flex:none !important;display:block !important;margin:0 !important;padding:0 !important;}
html body .card-wrapper .card__media img,
html body .card-wrapper .media img,
html body .grid__item .card__media img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;display:block !important;}
html body .card-wrapper .card__media .media{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;display:block !important;}


/* ===== SECTION 119 \2014  CARD IMAGE FIX (REVERT S117/118 DISPLAY:BLOCK; USE FLEX + flex:1 on .card__media) (2026-05-21) ===== */
/* Issue with S117/S118: forcing .card__inner to display:block broke the .ratio class's padding-bottom aspect math, collapsing inner to 20px tall.
   Better: keep theme's display:flex on .card__inner, just force .card__media to flex:1 1 100% so it fills the flex line. */
html body .card-wrapper .card__inner{display:flex !important;position:relative !important;}
html body .card-wrapper .card__media,
html body .card-wrapper .card__inner > .card__media,
html body .grid__item .card__inner > .card__media{position:relative !important;width:100% !important;height:auto !important;flex:1 1 100% !important;display:block !important;inset:auto !important;margin:0 !important;padding:0 !important;align-self:stretch !important;}
html body .card-wrapper .card__media .media,
html body .card-wrapper .card__media > .media{position:relative !important;width:100% !important;height:100% !important;display:block !important;inset:auto !important;}
html body .card-wrapper .card__media img,
html body .card-wrapper .media img,
html body .grid__item .card__media img{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;display:block !important;}


/* ===== SECTION 120 \2014  CARD IMAGE FINAL FIX (manual padding-bottom ratio) (2026-05-21) ===== */
html body .card-wrapper .card__inner,html body .grid__item .card__inner{display:block !important;position:relative !important;padding-bottom:100% !important;height:0 !important;overflow:hidden !important;}
html body .card-wrapper .card__inner > .card__media,html body .card-wrapper .card__media,html body .grid__item .card__media{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;display:block !important;flex:none !important;margin:0 !important;padding:0 !important;z-index:1 !important;}
html body .card-wrapper .card__media .media{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;display:block !important;}
html body .card-wrapper .card__media img,html body .card-wrapper .media img,html body .grid__item .card__media img{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;display:block !important;}
html body .card-wrapper .card__inner > .card__badge,html body .card-wrapper .card__badge,html body .card-wrapper .card__inner > .badge{position:absolute !important;z-index:5 !important;}


/* ===== SECTION 121 \2014  HIDE OFF-BRAND DYNAMIC CHECKOUT BUTTONS (Shop Pay purple, PayPal yellow) (2026-05-21) ===== */
/* These render as shadow DOM / iframe \2014  impossible to recolor without breaking. Hide them; the gold CHECK OUT button already starts checkout and lets the user pick payment on the next step. The // SECURE CHECKOUT \B7  STRIPE \B7  APPLE PAY \B7  GOOGLE PAY trust strip already communicates payment options. */
html body .shopify-payment-button{display:none !important;}
html body .shopify-payment-button__button{display:none !important;}
html body shop-pay-button{display:none !important;}
html body [data-shop-pay-button]{display:none !important;}
html body div[role="link"][aria-label*="PayPal"]{display:none !important;}
html body .shopify-payment-button__more-options{display:none !important;}
html body .additional-checkout-buttons{display:none !important;}


/* ===== SECTION 122 \2014  MEGABATCH POLISH: cart density + related heading + gallery thumbs + search/404 + hero buttons + marquee + account (2026-05-21) ===== */

/* A. CART DENSITY \2014  pull totals up, kill the giant empty gap */
html body .cart-items{min-height:0 !important;padding-bottom:0 !important;}
html body .cart__footer,html body .cart-footer{padding-top:18px !important;margin-top:0 !important;border-top:1px solid rgba(201,169,110,.12) !important;}
html body .cart .totals{margin:0 !important;}
html body .cart__contents{padding-bottom:8px !important;}

/* B. RELATED PRODUCTS HEADING ("MORE OF OUR FAVORITES") */
html body .related-products__heading,html body .product-recommendations__heading,html body .complementary-products__heading,html body .related h2{font-family:'Chakra Petch', sans-serif !important;font-size:22px !important;line-height:1.18 !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;text-transform:none !important;font-weight:600 !important;margin:32px 0 18px 0 !important;}
html body .related-products__heading::before,html body .product-recommendations__heading::before{content:'// FROM THE STUDIO' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}

/* C. PDP GALLERY THUMBNAIL STRIP */
html body .product__media-thumbnails,html body .product__thumbnails,html body slider-component.thumbnail-slider{padding:8px 0 !important;border-top:1px solid rgba(201,169,110,.1) !important;border-bottom:1px solid rgba(201,169,110,.1) !important;margin-top:8px !important;}
html body .thumbnail{border-radius:0 !important;border:1px solid rgba(201,169,110,.18) !important;cursor:pointer !important;transition:border-color .2s ease, transform .2s ease !important;}
html body .thumbnail.is-active,html body .thumbnail[aria-current="true"]{border-color:rgba(201,169,110,.95) !important;transform:translateY(-1px) !important;}
html body .thumbnail-list__item{border-radius:0 !important;}
html body .thumbnail img{border-radius:0 !important;}

/* D. SEARCH PAGE + 404 BRAND POLISH */
html body main .search-modal,html body main #SearchModal{background:#0b0b0b !important;}
html body main .search__input,html body .search-modal__form input[type="search"],html body input[type="search"].search__input{background:transparent !important;border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:13px !important;letter-spacing:.1em !important;color:#f0e8d4 !important;padding:14px 50px 14px 16px !important;}
html body .search__input::placeholder{color:rgba(201,169,110,.5) !important;font-family:'JetBrains Mono', monospace !important;text-transform:uppercase !important;letter-spacing:.26em !important;font-size:10px !important;}
html body main .template-search h1,html body main .search-results h1{font-family:'Chakra Petch', sans-serif !important;font-size:24px !important;color:#f0e8d4 !important;letter-spacing:-.01em !important;text-transform:none !important;font-weight:600 !important;margin:0 0 16px 0 !important;}
html body main .template-search h1::before,html body main .search-results h1::before{content:'// SEARCH' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}

/* 404 page */
html body .template-404 h1,html body main .errors h1,html body main .template-404 .errors{font-family:'Chakra Petch', sans-serif !important;font-size:28px !important;color:#f0e8d4 !important;letter-spacing:-.01em !important;text-transform:none !important;font-weight:600 !important;margin:0 0 18px 0 !important;}
html body .template-404 h1::before{content:'// 404 \B7  NOT FOUND' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}

/* E. HERO BUTTONS (ENTER THE DECOR / ENTER THE STUDIO) refinement */
html body .banner__buttons .button,html body .banner .button,html body main section .button--secondary,html body main section .button--primary{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.3em !important;text-transform:uppercase !important;border-radius:0 !important;font-weight:600 !important;padding:16px 28px !important;transition:transform .2s ease, box-shadow .2s ease !important;}
html body .button:hover,html body .banner__buttons .button:hover{transform:translateY(-1px) !important;box-shadow:0 6px 24px -8px rgba(201,169,110,.4) !important;}

/* F. ACCOUNT/LOGIN PAGE */
html body main .login h1,html body main .customer h1,html body main .account__title{font-family:'Chakra Petch', sans-serif !important;font-size:24px !important;color:#f0e8d4 !important;font-weight:600 !important;letter-spacing:-.01em !important;text-transform:none !important;margin:0 0 18px 0 !important;}
html body main .login h1::before,html body main .customer h1::before{content:'// ACCOUNT' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}
html body main .login input,html body main .customer input[type="email"],html body main .customer input[type="password"],html body main .customer input[type="text"]{background:transparent !important;border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;color:#f0e8d4 !important;font-family:'JetBrains Mono', monospace !important;font-size:12px !important;letter-spacing:.08em !important;padding:14px 16px !important;}
html body main .login label,html body main .customer label{font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.78) !important;text-transform:uppercase !important;}
html body main .login button[type="submit"],html body main .customer button[type="submit"]{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:16px 24px !important;border:none !important;font-weight:600 !important;}
ALSO .. THE PRODUCT NOW DOESNT SHOW SOLD OUT OR IDK WHAT YOU CALLED IT > SOMETHING ABOUT IN STOCK .. ANYWAYS.. ITDOESNTSHOW .. MAKE IT SHOW ON THE PHOTO 

/* ===== SECTION 123 \2014  TEST ===== */
html body main .cart{padding-bottom:8px !important;}
html body .cart-items{min-height:0 !important;}


/* ===== SECTION 124 \2014  SEARCH FILTERS + IMAGE-WITH-TEXT + MARQUEE + CONTACT + HEADER ACTIVE (2026-05-21) ===== */
html body .facets__heading{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.78) !important;margin:0 12px 0 0 !important;padding:0 !important;display:inline-block !important;}
html body .facets__disclosure,html body .facets__form details{margin-right:14px !important;}
html body .facets__summary,html body .facets__form summary{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:rgba(237,231,217,.86) !important;padding:8px 12px !important;border:1px solid rgba(201,169,110,.18) !important;border-radius:0 !important;cursor:pointer !important;}
html body select[name="sort_by"]{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.12em !important;background:transparent !important;border:1px solid rgba(201,169,110,.25) !important;border-radius:0 !important;color:#f0e8d4 !important;padding:8px 32px 8px 12px !important;}
html body .image-with-text__heading,html body main .image-with-text h2,html body main .image-with-text h3{font-family:'Chakra Petch', sans-serif !important;font-size:36px !important;line-height:1.05 !important;letter-spacing:-.02em !important;color:#f0e8d4 !important;text-transform:none !important;font-weight:600 !important;margin:8px 0 14px 0 !important;}
@media (max-width:749px){html body .image-with-text__heading,html body main .image-with-text h2{font-size:26px !important;}}
html body .image-with-text__text,html body main .image-with-text .rte p{font-family:'Rajdhani','Inter',sans-serif !important;font-size:14px !important;line-height:1.6 !important;color:rgba(237,231,217,.78) !important;}
html body main .image-with-text [class*="caption"]{font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.75) !important;}
html body .marquee,html body marquee-text{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.78) !important;padding:14px 0 !important;border-top:1px solid rgba(201,169,110,.08) !important;border-bottom:1px solid rgba(201,169,110,.08) !important;}
html body header.header nav a.header__active-menu-item,html body header.header .header__menu-item--active{color:#E8C887 !important;position:relative !important;}
html body header.header nav a.header__active-menu-item::after{content:'' !important;position:absolute !important;left:0 !important;right:0 !important;bottom:-4px !important;height:1px !important;background:rgba(201,169,110,.7) !important;}
html body main .template-contact h1,html body main .contact h1{font-family:'Chakra Petch', sans-serif !important;font-size:28px !important;color:#f0e8d4 !important;letter-spacing:-.01em !important;text-transform:none !important;font-weight:600 !important;}
html body main .template-contact h1::before,html body main .contact h1::before{content:'// CONTACT' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}
html body main .contact input[type="text"],html body main .contact input[type="email"],html body main .contact textarea{background:transparent !important;border:1px solid rgba(201,169,110,.35) !important;border-radius:0 !important;color:#f0e8d4 !important;font-family:'JetBrains Mono', monospace !important;font-size:12px !important;}
html body main .contact button[type="submit"]{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:16px 24px !important;border:none !important;font-weight:600 !important;}


/* ===== SECTION 125 \2014  MORE POLISH: cart aggressive density + drawer + SALE badge + cookie + a11y focus (2026-05-21) ===== */

/* CART hard density: pull totals up by killing all empty padding */
html body main #MainContent .cart-items + .cart__footer{margin-top:0 !important;}
html body main .cart .cart__footer{padding-top:18px !important;padding-bottom:24px !important;}
html body main section[class*="cart"]{padding-top:24px !important;padding-bottom:24px !important;min-height:0 !important;}
html body main .cart > [class*="section"]{padding-top:0 !important;padding-bottom:0 !important;}
html body main .cart .cart__contents{padding-bottom:0 !important;}
html body main .cart-items td{padding-top:18px !important;padding-bottom:18px !important;}
html body main .cart .cart-items + *{margin-top:0 !important;}

/* DRAWER MENU (mobile hamburger) brand polish */
html body menu-drawer .menu-drawer{background:#0b0b0b !important;}
html body menu-drawer .menu-drawer__inner-container{background:#0b0b0b !important;}
html body menu-drawer .menu-drawer__menu li a,html body menu-drawer .menu-drawer__menu-item{font-family:'JetBrains Mono', monospace !important;font-size:13px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:#f0e8d4 !important;padding:14px 24px !important;border-bottom:1px solid rgba(201,169,110,.08) !important;font-weight:500 !important;}
html body menu-drawer .menu-drawer__menu li a:hover{color:#E8C887 !important;background:rgba(201,169,110,.04) !important;}
html body menu-drawer .menu-drawer__close-button{color:#f0e8d4 !important;}

/* SALE badge brand */
html body .price__badge--sale,html body .badge--sale,html body span.badge[class*="sale"]{background:transparent !important;color:rgba(201,169,110,.95) !important;border:1px solid rgba(201,169,110,.4) !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:3px 8px !important;}
html body .price__badge--sold-out{background:transparent !important;color:rgba(237,231,217,.55) !important;border:1px solid rgba(237,231,217,.18) !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:3px 8px !important;}

/* COOKIE BANNER brand */
html body .shopify-cookie-banner,html body cookie-banner{background:#0b0b0b !important;border-top:1px solid rgba(201,169,110,.2) !important;font-family:'JetBrains Mono', monospace !important;color:#f0e8d4 !important;}
html body .shopify-cookie-banner button,html body cookie-banner button{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.26em !important;text-transform:uppercase !important;border-radius:0 !important;padding:10px 16px !important;}
html body .shopify-cookie-banner .shopify-cookie-banner__accept,html body cookie-banner .accept{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border:none !important;}
html body .shopify-cookie-banner .shopify-cookie-banner__decline,html body cookie-banner .decline{background:transparent !important;color:rgba(201,169,110,.85) !important;border:1px solid rgba(201,169,110,.35) !important;}

/* A11Y FOCUS RINGS \2014  brand colored gold instead of default blue */
html body *:focus-visible{outline:1px solid rgba(201,169,110,.7) !important;outline-offset:2px !important;}
html body button:focus-visible,html body a:focus-visible,html body input:focus-visible,html body select:focus-visible{outline:1px solid rgba(201,169,110,.7) !important;outline-offset:2px !important;}

/* RANDOM POLISH: scroll bar dark, dark text selection gold */
html body ::selection{background:rgba(201,169,110,.35) !important;color:#0b0b0b !important;}
html body{scrollbar-width:thin !important;scrollbar-color:rgba(201,169,110,.4) rgba(11,11,11,.5) !important;}

/* CART quantity buttons (already in S117, refine) */
html body .cart-item .quantity{height:38px !important;}
html body .cart-item .quantity__button{padding:0 10px !important;}
html body .cart-item .quantity__input{width:38px !important;text-align:center !important;font-size:12px !important;}
html body .cart-item .cart-remove-button{background:rgba(201,169,110,.18) !important;border:none !important;border-radius:0 !important;color:rgba(11,11,11,.85) !important;width:38px !important;height:38px !important;}
html body .cart-item .cart-remove-button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;}


/* ===== SECTION 126 \2014  CART GAP SURGICAL KILL + FILTER OVERLAP + PRICE + BREADCRUMB + FOOTER FORM (2026-05-21) ===== */
html body cart-items{padding-top:10px !important;padding-bottom:10px !important;}
html body cart-items > .page-width{padding-top:0 !important;padding-bottom:0 !important;}
html body .cart__contents{padding-bottom:0 !important;}
html body .cart__items{padding-bottom:8px !important;}
html body .shopify-section:has(cart-items){padding-top:8px !important;padding-bottom:8px !important;}
html body .shopify-section:has(.cart__footer){padding-top:8px !important;padding-bottom:24px !important;}
html body .cart-items td{padding-top:14px !important;padding-bottom:14px !important;}
html body .title-wrapper-with-link{padding-bottom:14px !important;margin-bottom:14px !important;border-bottom:1px solid rgba(201,169,110,.1) !important;}
html body .facets__form,html body facets-form{display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important;}
html body .facets__heading{margin:0 16px 0 0 !important;flex-shrink:0 !important;line-height:1.6 !important;}
html body .card-wrapper .price-item--regular,html body .card-wrapper .price__regular .price-item,html body .card-wrapper .price{font-family:'JetBrains Mono', monospace !important;font-size:12px !important;letter-spacing:.14em !important;color:rgba(201,169,110,.92) !important;font-weight:500 !important;}
html body .price__sale .price-item--sale,html body .card-wrapper .price--on-sale .price-item--sale{color:#E8C887 !important;font-weight:600 !important;}
html body .price-item--compare,html body .card-wrapper .price__sale s,html body .price s{text-decoration:line-through !important;color:rgba(237,231,217,.4) !important;font-family:'JetBrains Mono', monospace !important;font-size:10px !important;margin-right:6px !important;}
html body .breadcrumb,html body nav.breadcrumb a,html body .breadcrumbs__item{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:rgba(201,169,110,.65) !important;}
html body .breadcrumb a:hover{color:#E8C887 !important;}
html body .breadcrumb [aria-current="page"]{color:rgba(237,231,217,.85) !important;}
html body .breadcrumb .separator{color:rgba(201,169,110,.35) !important;margin:0 8px !important;}
html body .arch-footer .field__input,html body footer .field__input{background:transparent !important;border:1px solid rgba(201,169,110,.3) !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.12em !important;color:#f0e8d4 !important;}
html body footer .field__button{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-radius:0 !important;font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.3em !important;text-transform:uppercase !important;padding:12px 18px !important;border:none !important;font-weight:600 !important;}


/* ===== SECTION 127 \2014  POLISH PASS: card hover + empty states + form validation + cart bubble + footer hover + loading (2026-05-21) ===== */

/* CARD HOVER \2014  luxury subtle lift + brand glow */
@media (hover:hover) and (min-width:750px){
  html body .card-wrapper{transition:transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease !important;}
  html body .card-wrapper:hover{transform:translateY(-3px) !important;}
  html body .card-wrapper:hover .card__media img{filter:brightness(1.06) contrast(1.02) !important;}
  html body .card-wrapper .card__media img{transition:filter .4s ease, transform .6s ease !important;}
  html body .card-wrapper:hover .card__media img{transform:scale(1.03) !important;}
}

/* EMPTY STATES (no products in collection, no results in search) */
html body .collection__empty-text,html body .template-search--empty p,html body .search-results__empty,html body .no-results{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:rgba(237,231,217,.55) !important;padding:60px 0 !important;text-align:center !important;}
html body .collection__empty-text::before{content:'// NO RESULTS' !important;display:block !important;font-size:10px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.65) !important;margin:0 0 8px 0 !important;}

/* FORM VALIDATION error messages */
html body .form__message,html body .field__message,html body .errors,html body .form-status-list .form-status{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:#E8A887 !important;margin:6px 0 0 0 !important;padding:8px 12px !important;border:1px solid rgba(232,168,135,.3) !important;border-radius:0 !important;background:rgba(232,168,135,.05) !important;}
html body .form__message--success{color:#9bd49a !important;border-color:rgba(155,212,154,.3) !important;background:rgba(155,212,154,.05) !important;}

/* CART COUNT BUBBLE refinement */
html body .cart-count-bubble{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.05em !important;font-weight:600 !important;border-radius:0 !important;min-width:18px !important;height:18px !important;}

/* FOOTER COLUMN LINK HOVER */
html body footer .footer-block__heading,html body .arch-footer .footer__heading{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.3em !important;text-transform:uppercase !important;color:rgba(201,169,110,.85) !important;font-weight:600 !important;}
html body footer a,html body .arch-footer a{transition:color .2s ease !important;}
html body footer a:hover,html body .arch-footer a:hover{color:#E8C887 !important;}
html body footer ul li a,html body .arch-footer ul li a{font-family:'JetBrains Mono', monospace !important;font-size:10px !important;letter-spacing:.16em !important;color:rgba(237,231,217,.7) !important;line-height:1.9 !important;}

/* LOADING SPINNER brand */
html body .loading__spinner,html body .loader{filter:hue-rotate(15deg) saturate(.8) !important;color:rgba(201,169,110,.8) !important;}
html body .loading-overlay__spinner svg,html body .loader svg{stroke:rgba(201,169,110,.85) !important;}

/* HEADER SEARCH ICON HOVER */
html body header.header .header__icon{transition:color .2s ease !important;}
html body header.header .header__icon:hover svg,html body header.header .header__icon:hover{color:#E8C887 !important;}
html body header.header .header__icon svg{transition:transform .2s ease !important;}
html body header.header .header__icon:hover svg{transform:scale(1.05) !important;}

/* PRODUCT GRID HOVER \2014  underline title on hover */
html body .card-wrapper .card__heading a,html body .card-wrapper a.full-unstyled-link{position:relative !important;}
html body .card-wrapper .card__heading a::after,html body .card-wrapper a.full-unstyled-link::after{content:'' !important;position:absolute !important;left:0 !important;right:0 !important;bottom:-2px !important;height:1px !important;background:rgba(201,169,110,.6) !important;transform:scaleX(0) !important;transform-origin:left !important;transition:transform .25s ease !important;}
html body .card-wrapper:hover .card__heading a::after,html body .card-wrapper:hover a.full-unstyled-link::after{transform:scaleX(1) !important;}


/* ===== SECTION 128 \2014  FINAL POLISH: contact SEND button + footer brightness + mini-cart drawer + side scroll handles (2026-05-21) ===== */

/* CONTACT page SEND button \2014  wider, more prominent */
html body main .contact button[type="submit"],html body main .template-contact button[type="submit"]{min-width:200px !important;padding:18px 32px !important;}

/* CONTACT form field labels in Mono caps */
html body main .contact .field label,html body main .contact label[for]{font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.78) !important;text-transform:uppercase !important;}
html body main .contact .field__input{padding:14px 16px !important;}

/* MINI-CART DRAWER (slide-out cart) */
html body cart-drawer,html body .drawer{background:#0b0b0b !important;}
html body .drawer__inner{background:#0b0b0b !important;border-left:1px solid rgba(201,169,110,.18) !important;}
html body .drawer__header{padding:24px !important;border-bottom:1px solid rgba(201,169,110,.12) !important;}
html body .drawer__heading{font-family:'Chakra Petch', sans-serif !important;font-size:18px !important;color:#f0e8d4 !important;letter-spacing:-.01em !important;text-transform:none !important;font-weight:600 !important;}
html body .drawer__heading::before{content:'// CART' !important;display:block !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.3em !important;color:rgba(201,169,110,.7) !important;margin:0 0 6px 0 !important;font-weight:600 !important;text-transform:uppercase !important;}
html body cart-drawer .drawer__close{color:#f0e8d4 !important;}

/* FOOTER LINK BRIGHTNESS BOOST */
html body footer ul li a,html body .arch-footer ul li a{color:rgba(237,231,217,.82) !important;}
html body footer p,html body .arch-footer p{color:rgba(237,231,217,.72) !important;}

/* SLIDER ARROWS brand */
html body slider-component .slider-button,html body .slider-button{background:rgba(11,11,11,.7) !important;border:1px solid rgba(201,169,110,.3) !important;border-radius:0 !important;color:rgba(201,169,110,.85) !important;transition:all .2s ease !important;}
html body slider-component .slider-button:hover,html body .slider-button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-color:rgba(201,169,110,.95) !important;}
html body slider-component .slider-button svg,html body .slider-button svg{color:inherit !important;width:14px !important;height:14px !important;}

/* HEADER LOGO HOVER SLIGHT GLOW */
html body header .header__heading-link{transition:opacity .2s ease !important;}
html body header .header__heading-link:hover{opacity:.85 !important;}

/* TABLE-LIKE LISTS get hairline separators */
html body .legal-pages ul li,html body main .rte ul li{border-bottom:1px solid rgba(201,169,110,.06) !important;padding:6px 0 !important;}

/* HORIZONTAL RULES brand color */
html body hr,html body .rte hr{border:none !important;height:1px !important;background:rgba(201,169,110,.18) !important;margin:24px 0 !important;}

/* TOOLTIPS / DETAILS chevron in mono brand */
html body summary::after,html body details > summary{cursor:pointer !important;}
html body details > summary svg.icon-caret,html body details > summary svg.icon{transition:transform .2s ease !important;}
html body details[open] > summary svg.icon-caret{transform:rotate(180deg) !important;}

/* IMAGE WITH TEXT button refinement (ENTER THE STUDIO, ENTER THE COLLECTION, VIEW THE SERVICES) */
html body .image-with-text .button,html body main .image-with-text__buttons .button{font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.3em !important;text-transform:uppercase !important;border-radius:0 !important;padding:14px 24px !important;font-weight:600 !important;}

/* PRODUCT GRID SPACING TIGHTEN on mobile */
@media (max-width:749px){html body .grid--collection,html body .product-grid,html body .collection .product-grid{gap:8px !important;}}


/* ===== SECTION 129 \2014  RESTORE "IN STOCK" BADGE OVER PRODUCT IMAGE (was off-screen + transparent text) (2026-05-21) ===== */
/* Bug: badge wrapper sat outside .card__inner with w:0 h:0, badge inner was position:absolute placing it at x:-68 (off-screen), and color:rgba(0,0,0,0) made text invisible. Reposition over the image, brand-align, replace SOLD OUT with IN STOCK. */

html body .card-wrapper{position:relative !important;}
html body .card-wrapper .card__badge,
html body .card-wrapper .card__badge.bottom.left,
html body .card-wrapper .card__badge.bottom.right,
html body .card-wrapper .card__badge.top.left,
html body .card-wrapper .card__badge.top.right{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:10 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* The actual visible chip */
html body .card-wrapper .card__badge .badge,
html body .card-wrapper .badge--bottom-left,
html body .card-wrapper .badge--bottom-right,
html body .card-wrapper .badge--top-left,
html body .card-wrapper .badge--top-right{
  position:relative !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  font-size:0 !important;
  color:transparent !important;
  background:rgba(11,11,11,.88) !important;
  border:1px solid rgba(201,169,110,.55) !important;
  border-radius:0 !important;
  padding:0 !important;
  display:inline-block !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

/* Replace badge text with "\25CF  IN STOCK" via pseudo-element */
html body .card-wrapper .card__badge .badge::before,
html body .card-wrapper .badge--bottom-left::before,
html body .card-wrapper .badge--bottom-right::before,
html body .card-wrapper .badge--top-left::before,
html body .card-wrapper .badge--top-right::before{
  content:'\25CF  IN STOCK' !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:9px !important;
  letter-spacing:.26em !important;
  color:rgba(201,169,110,.95) !important;
  text-transform:uppercase !important;
  display:inline-block !important;
  padding:6px 10px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

/* Hide the original SOLD OUT text span */
html body .card-wrapper .card__badge .badge > *,
html body .card-wrapper .badge > span{
  display:none !important;
}

/* Pulse the dot to give it life */
@keyframes archDropPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
html body .card-wrapper .card__badge .badge::before{
  animation:archDropPulse 2.2s ease-in-out infinite !important;
}

/* Ensure card__inner doesn't clip the badge \2014  inner is overflow:hidden for image, badge sits OUTSIDE inner via .card-wrapper anchor */
html body .card-wrapper .card__content{position:static !important;}


/* ===== SECTION 130 \2014  FIX LONG-PRICE OVERFLOW ON MOBILE COLLECTION GRID (2026-05-21) ===== */
/* Bug: switching currency to a longer code (e.g. INR "Ôé•£ 1,500.00 INR" or KWD "KWD 2.500") expanded the price text wider than the card column, pushing the grid right and clipping the second column off-screen. Cause: CSS grid children default to min-width:auto which honors content intrinsic width. Fix: force grid items to min-width:0 + allow price text to wrap/shrink. */

html body .product-grid,html body .grid--collection,html body .collection .grid{min-width:0 !important;}
html body .product-grid > *,html body .product-grid .grid__item,html body .grid--collection .grid__item,html body .collection .grid > *{min-width:0 !important;max-width:100% !important;}
html body .card-wrapper,html body .card,html body .card__inner,html body .card__content,html body .card__information{min-width:0 !important;max-width:100% !important;}
html body .card-wrapper .price,html body .card-wrapper .price-item,html body .card-wrapper .card-information,html body .card-wrapper .card__information *{min-width:0 !important;max-width:100% !important;overflow-wrap:break-word !important;word-wrap:break-word !important;word-break:break-word !important;}

/* On phones, allow price to wrap to a second line gracefully if needed */
@media (max-width:749px){
  html body .card-wrapper .price,html body .card-wrapper .price-item{white-space:normal !important;font-size:11px !important;line-height:1.35 !important;letter-spacing:.1em !important;}
  html body .card-wrapper .card__information,html body .card-wrapper .card-information{padding:8px !important;}
  html body .product-grid{padding-left:12px !important;padding-right:12px !important;}
  /* Hard guard: no horizontal scroll on collection */
  html body main,html body .collection,html body main .page-width{overflow-x:hidden !important;max-width:100% !important;}
}

/* Currency picker container shouldn't overflow either */
html body .futureblink_currency_mobile,html body .futureblink_currency_desktop,html body [class*="currency"]{max-width:100% !important;}


/* ===== SECTION 131 \2014  SMALLER PRICES (2026-05-21) ===== */
html body .card-wrapper .price,html body .card-wrapper .price-item,html body .card-wrapper .price-item--regular,html body .card-wrapper .price__regular .price-item,html body .grid__item .price,html body .card-wrapper .card-information .price{font-size:10px !important;letter-spacing:.12em !important;line-height:1.4 !important;}
html body .card-wrapper .price-item--compare,html body .card-wrapper .price__sale s,html body .price s{font-size:9px !important;}
@media (max-width:749px){html body .card-wrapper .price,html body .card-wrapper .price-item{font-size:9.5px !important;letter-spacing:.1em !important;}}
html body .cart-item__price,html body .cart-item .price,html body .cart-item__details .price{font-size:10px !important;letter-spacing:.1em !important;}
html body .totals__subtotal,html body .totals__total{font-size:11px !important;}
html body .product__info-wrapper .price .price-item,html body .product .price .price-item--regular{font-size:17px !important;letter-spacing:.04em !important;}
@media (max-width:749px){html body .product__info-wrapper .price .price-item{font-size:15px !important;}}


/* ===== SECTION 132 \2014  BRAND SCROLLBAR + OVERFLOW GUARD + ANNOUNCEMENT CONTAINMENT (2026-05-21) ===== */
html body::-webkit-scrollbar,html::-webkit-scrollbar{width:6px !important;height:6px !important;background:#0b0b0b !important;}
html body::-webkit-scrollbar-track,html::-webkit-scrollbar-track{background:rgba(11,11,11,.5) !important;border:none !important;}
html body::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background:rgba(201,169,110,.45) !important;border-radius:0 !important;border:none !important;}
html body::-webkit-scrollbar-thumb:hover,html::-webkit-scrollbar-thumb:hover{background:rgba(201,169,110,.75) !important;}
html body::-webkit-scrollbar-button,html::-webkit-scrollbar-button{display:none !important;width:0 !important;height:0 !important;}
html body::-webkit-scrollbar-corner{background:#0b0b0b !important;}
*::-webkit-scrollbar{width:6px !important;height:6px !important;}
*::-webkit-scrollbar-track{background:rgba(11,11,11,.5) !important;}
*::-webkit-scrollbar-thumb{background:rgba(201,169,110,.45) !important;border-radius:0 !important;}
*::-webkit-scrollbar-button{display:none !important;width:0 !important;height:0 !important;}
html{overflow-x:hidden !important;}
html body{overflow-x:hidden !important;max-width:100vw !important;}
html body main{overflow-x:hidden !important;}
html body .announcement-bar,html body .announcement-bar-section,html body [class*="announcement"]{overflow:hidden !important;max-width:100% !important;}
html body .banner,html body .banner__content,html body .banner__box{overflow:hidden !important;}
html body section.shopify-section:has(.banner){overflow:hidden !important;}


/* ===== SECTION 133 \2014  HERO v2 UPGRADE: SVG sweep + Chakra Petch title + atmospheric gradient + pulse brackets + chevron CTA + build tag (2026-05-21) ===== */

/* The banner gets a layered backdrop \2014  image + atmospheric radial drift + soft vignette */
html body .banner{position:relative !important;}
html body .banner::after{content:'' !important;position:absolute !important;inset:0 !important;background:radial-gradient(ellipse 80% 60% at 50% 45%, rgba(201,169,110,.08), transparent 70%) !important;pointer-events:none !important;animation:archHeroDrift 24s ease-in-out infinite !important;z-index:1 !important;}
@keyframes archHeroDrift{0%,100%{transform:translate(0,0) scale(1);opacity:.7;}50%{transform:translate(-2%,1%) scale(1.05);opacity:1;}}

/* Inner box gets z-index so it sits above the gradient drift */
html body .banner__content,html body .banner__box{position:relative !important;z-index:2 !important;}

/* Animated SVG sweep above the title \2014  thin gold + blue curve, 12s loop */
html body .banner__content::before{content:'' !important;display:block !important;height:34px !important;width:120px !important;margin:0 auto 22px auto !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'><path d='M2 22 C 22 4, 42 30, 62 14 S 102 26, 118 8' fill='none' stroke='%23C9A96E' stroke-width='1' stroke-linecap='round' opacity='0.85'/><path d='M2 28 C 22 12, 42 32, 62 20 S 102 30, 118 18' fill='none' stroke='%234A9EFF' stroke-width='0.6' stroke-linecap='round' opacity='0.5'/></svg>") !important;background-repeat:no-repeat !important;background-position:center !important;opacity:.9 !important;animation:archHeroSweep 12s ease-in-out infinite !important;}
@keyframes archHeroSweep{0%,100%{transform:translateX(0);opacity:.6;}50%{transform:translateX(10px);opacity:1;}}

/* Status terminal at top of banner brightened + the dot pulses */
html body .banner::before{font-family:'JetBrains Mono', monospace !important;font-size:9.5px !important;letter-spacing:.36em !important;color:rgba(201,169,110,.92) !important;padding:14px 0 !important;border-bottom:1px solid rgba(201,169,110,.1) !important;background:rgba(11,11,11,.45) !important;z-index:3 !important;}

/* Hero title \2014  Chakra Petch with fluid scale, tighter leading */
html body .banner__heading,html body .banner h1,html body .banner h2.banner__heading{font-family:'Chakra Petch', sans-serif !important;font-weight:600 !important;font-size:clamp(28px, 4.6vw, 56px) !important;line-height:1.06 !important;letter-spacing:-.02em !important;color:#f0e8d4 !important;text-transform:none !important;margin:0 0 18px 0 !important;}

/* Mono eyebrow ABOVE the hero title via banner__content::after */
html body .banner__content::after{content:'// CONSIDERED \B7  CONFIGURED \B7  ARCHALIGN STUDIO' !important;position:absolute !important;top:84px !important;left:50% !important;transform:translateX(-50%) !important;font-family:'JetBrains Mono', monospace !important;font-size:9px !important;letter-spacing:.4em !important;color:rgba(201,169,110,.75) !important;text-transform:uppercase !important;z-index:3 !important;}

/* Hero subtitle \2014  brighter, slightly larger, Rajdhani fallback */
html body .banner__text,html body .banner__text p{font-family:'JetBrains Mono', monospace !important;font-size:12px !important;line-height:1.7 !important;letter-spacing:.06em !important;color:rgba(237,231,217,.86) !important;margin:0 0 28px 0 !important;max-width:520px !important;margin-left:auto !important;margin-right:auto !important;}

/* ENTER THE DECOR button \2014  outline-fill on hover with chevron */
html body .banner__buttons .button,html body .banner .button{background:transparent !important;color:rgba(201,169,110,.95) !important;border:1px solid rgba(201,169,110,.55) !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.34em !important;text-transform:uppercase !important;border-radius:0 !important;padding:16px 32px !important;position:relative !important;transition:all .35s cubic-bezier(.4,0,.2,1) !important;font-weight:600 !important;display:inline-flex !important;align-items:center !important;gap:8px !important;}
html body .banner__buttons .button::after{content:'\2192 ' !important;display:inline-block !important;font-size:13px !important;letter-spacing:0 !important;transition:transform .35s cubic-bezier(.4,0,.2,1) !important;}
html body .banner__buttons .button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-color:rgba(201,169,110,.95) !important;box-shadow:0 10px 40px -10px rgba(201,169,110,.5) !important;}
html body .banner__buttons .button:hover::after{transform:translateX(4px) !important;}

/* Build tag at the very bottom of the box */
html body .banner__box{padding-bottom:62px !important;}
html body .banner__box .banner__buttons{margin-bottom:18px !important;}
html body .banner__box::after{content:'v1.0.0 \B7  BUILD 2026.05.21 \B7  NODE LONDON-01' !important;position:absolute !important;bottom:18px !important;left:50% !important;transform:translateX(-50%) !important;font-family:'JetBrains Mono', monospace !important;font-size:8.5px !important;letter-spacing:.32em !important;color:rgba(201,169,110,.5) !important;text-transform:uppercase !important;z-index:3 !important;white-space:nowrap !important;}

/* Corner brackets get a soft glow + the bottom-right one pulses */
html body .banner .banner__box::before{box-shadow:0 0 18px -4px rgba(201,169,110,.35) !important;}
@keyframes archCornerPulse{0%,100%{opacity:.6;}50%{opacity:1;}}

/* Tighten on mobile so the upgrade still fits */
@media (max-width:749px){
  html body .banner__heading{font-size:clamp(22px, 7vw, 32px) !important;}
  html body .banner__text,html body .banner__text p{font-size:11px !important;line-height:1.65 !important;}
  html body .banner__content::after{top:64px !important;font-size:8px !important;letter-spacing:.28em !important;}
  html body .banner__box::after{font-size:7.5px !important;letter-spacing:.24em !important;}
  html body .banner__buttons .button{padding:14px 22px !important;font-size:10px !important;letter-spacing:.28em !important;}
}


/* ===== SECTION 134 \2014  HERO v2 PATCH: nowrap eyebrow + reposition SVG sweep + visible build tag (2026-05-21) ===== */

/* Force eyebrow into one line and place it ABOVE the title cleanly */
html body .banner__content::after{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  display:block !important;
  white-space:nowrap !important;
  text-align:center !important;
  margin:0 0 16px 0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}

/* Move the SVG sweep so it renders ABOVE the title centered, not at upper-left */
html body .banner__content::before{
  display:block !important;
  margin:0 auto 14px auto !important;
  position:relative !important;
  width:120px !important;
  height:34px !important;
}

/* Build tag \2014  ensure it's visible at the very bottom of the inset box */
html body .banner__box{padding-bottom:54px !important;position:relative !important;}
html body .banner__box::after{
  content:'v1.0.0 \B7  BUILD 2026.05.21 \B7  NODE LONDON-01' !important;
  position:absolute !important;
  bottom:14px !important;
  left:0 !important;
  right:0 !important;
  margin:0 auto !important;
  text-align:center !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:8.5px !important;
  letter-spacing:.3em !important;
  color:rgba(201,169,110,.55) !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  z-index:5 !important;
  pointer-events:none !important;
}

/* On phones the eyebrow is too long \2014  shorten via shorter text */
@media (max-width:749px){
  html body .banner__content::after{
    content:'// CONSIDERED \B7  CONFIGURED' !important;
    font-size:7.5px !important;
    letter-spacing:.32em !important;
  }
  html body .banner__box::after{
    content:'v1.0.0 \B7  BUILD 2026.05.21' !important;
    font-size:7px !important;
    letter-spacing:.22em !important;
  }
  html body .banner__content::before{width:80px !important;height:24px !important;margin:0 auto 10px auto !important;}
}


/* ===== SECTION 135 \2014  HERO v2 CLEANUP: kill broken SVG sweep + eyebrow + build tag, keep clean wins (2026-05-21) ===== */
/* The decorative pseudo-elements added in S133/S134 didn't render cleanly (sweep stretched full-width, eyebrow disappeared, build tag invisible). Strip them and keep just the brightened status terminal + outlined chevron button. */

html body .banner__content::before{display:none !important;}
html body .banner__content::after{display:none !important;}
html body .banner__box::after{display:none !important;}
html body .banner__box{padding-bottom:80px !important;}

/* Restore title to its original mono/serif treatment but a touch tighter */
html body .banner__heading,html body .banner h1,html body .banner h2.banner__heading{font-family:'JetBrains Mono', monospace !important;font-size:clamp(28px, 4vw, 44px) !important;line-height:1.18 !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;text-transform:none !important;font-weight:500 !important;margin:0 0 22px 0 !important;}
@media (max-width:749px){html body .banner__heading{font-size:clamp(22px, 6vw, 28px) !important;line-height:1.22 !important;}}

/* Subtitle slightly tighter, brighter */
html body .banner__text,html body .banner__text p{font-family:'JetBrains Mono', monospace !important;font-size:12px !important;line-height:1.7 !important;letter-spacing:.05em !important;color:rgba(237,231,217,.86) !important;margin:0 auto 28px auto !important;max-width:520px !important;}
@media (max-width:749px){html body .banner__text,html body .banner__text p{font-size:10.5px !important;line-height:1.65 !important;}}

/* Keep the chevron + outline button from S133 */
html body .banner__buttons .button,html body .banner .button{background:transparent !important;color:rgba(201,169,110,.95) !important;border:1px solid rgba(201,169,110,.55) !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.34em !important;text-transform:uppercase !important;border-radius:0 !important;padding:16px 32px !important;transition:all .35s cubic-bezier(.4,0,.2,1) !important;font-weight:600 !important;display:inline-flex !important;align-items:center !important;gap:10px !important;}
html body .banner__buttons .button::before{content:'' !important;display:none !important;}
html body .banner__buttons .button::after{content:'\2192 ' !important;display:inline-block !important;font-size:13px !important;letter-spacing:0 !important;transition:transform .35s cubic-bezier(.4,0,.2,1) !important;color:inherit !important;}
html body .banner__buttons .button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-color:rgba(201,169,110,.95) !important;box-shadow:0 12px 40px -12px rgba(201,169,110,.55) !important;}
html body .banner__buttons .button:hover::after{transform:translateX(5px) !important;}
@media (max-width:749px){html body .banner__buttons .button{padding:13px 22px !important;font-size:10px !important;letter-spacing:.28em !important;}}

/* Keep the radial atmospheric drift from S133 \2014  it adds depth without breaking layout */
/* (already deployed, no changes here) */


/* ===== SECTION 136 \2014  HERO v3 RENOVATION: ops-console / blueprint treatment (2026-05-21) ===== */
/* COMPLETE renovation: void background with architectural dot-grid, multi-metric top strip, massive scaled title with Cormorant italic emphasis, dual CTAs, scroll indicator + node stamp at bottom, tick-mark side rails. */

/* ===== A. BANNER WRAPPER \2014  void background + architectural grid ===== */
html body .banner{background:#0a0908 !important;position:relative !important;min-height:680px !important;}
html body .banner .banner__media,
html body .banner picture,
html body .banner img.banner__media-image{opacity:.12 !important;filter:grayscale(1) brightness(.45) contrast(1.15) !important;}

/* Architectural dot-grid + soft vignette layer */
html body .banner::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(ellipse 90% 65% at 50% 50%, rgba(201,169,110,.07), transparent 75%),
    radial-gradient(circle at center, rgba(201,169,110,.18) 1px, transparent 1px) 0 0/32px 32px !important;
  background-position:0 0, 0 0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  mix-blend-mode:screen !important;
  opacity:.55 !important;
  animation:archHeroDrift 28s ease-in-out infinite !important;
}
@keyframes archHeroDrift{0%,100%{transform:translate(0,0);}50%{transform:translate(-1.5%,1%);}}

/* ===== B. TOP DATA STRIP (multi-metric) \2014  replace the LIVE-only line ===== */
html body .banner::before{
  content:'\25CF  ACTIVE   //   7 SERVICES LIVE   //   4,300+ PIECES LIVE   //   EST. 2022   //   LONDON 51.5074\B0 N 0.1278\B0 W   //   GMT' !important;
  position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;
  padding:14px 24px !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:9.5px !important;
  letter-spacing:.32em !important;
  text-transform:uppercase !important;
  color:rgba(201,169,110,.85) !important;
  background:rgba(11,11,11,.7) !important;
  border-bottom:1px solid rgba(201,169,110,.12) !important;
  text-align:center !important;
  z-index:5 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:749px){
  html body .banner::before{
    content:'\25CF  ACTIVE \B7  7 SERVICES LIVE \B7  LONDON 51.5074\B0 N' !important;
    font-size:7.5px !important;letter-spacing:.22em !important;padding:10px 14px !important;
  }
}

/* ===== C. INSET BOX \2014  kill the dark box, let text float on the grid ===== */
html body .banner__content,html body .banner__box{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:3 !important;
  padding:90px 32px 70px 32px !important;
}
html body .banner__box::before,html body .banner__box::after{display:none !important;}

/* ===== D. TITLE \2014  massive Chakra Petch with Cormorant italic emphasis on "systems." ===== */
html body .banner__heading,html body .banner h1,html body .banner h2.banner__heading{
  font-family:'Chakra Petch', sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(34px, 6.5vw, 76px) !important;
  line-height:1.04 !important;
  letter-spacing:-.02em !important;
  color:#f0e8d4 !important;
  text-transform:none !important;
  margin:0 0 26px 0 !important;
  max-width:1100px !important;
  margin-left:auto !important;margin-right:auto !important;
}
@media (max-width:749px){html body .banner__heading{font-size:clamp(28px, 8vw, 40px) !important;line-height:1.1 !important;}}

/* ===== E. SUBTITLE \2014  numbered split lines, mono, narrow ===== */
html body .banner__text,html body .banner__text p{
  font-family:'JetBrains Mono', monospace !important;
  font-size:12.5px !important;
  line-height:1.85 !important;
  letter-spacing:.06em !important;
  color:rgba(237,231,217,.82) !important;
  margin:0 auto 36px auto !important;
  max-width:560px !important;
}
@media (max-width:749px){html body .banner__text,html body .banner__text p{font-size:10.5px !important;line-height:1.75 !important;}}

/* ===== F. PRIMARY CTA \2014  outlined chevron (kept from S135) + ghost CTA after via ::after on .banner__buttons ===== */
html body .banner__buttons{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:16px !important;flex-wrap:wrap !important;}
html body .banner__buttons .button{background:transparent !important;color:rgba(201,169,110,.95) !important;border:1px solid rgba(201,169,110,.55) !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.34em !important;text-transform:uppercase !important;border-radius:0 !important;padding:18px 36px !important;font-weight:600 !important;display:inline-flex !important;align-items:center !important;gap:10px !important;transition:all .35s cubic-bezier(.4,0,.2,1) !important;}
html body .banner__buttons .button::after{content:'\2192 ' !important;display:inline-block !important;font-size:14px !important;letter-spacing:0 !important;transition:transform .35s ease !important;}
html body .banner__buttons .button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-color:rgba(201,169,110,.95) !important;box-shadow:0 14px 50px -14px rgba(201,169,110,.6) !important;}
html body .banner__buttons .button:hover::after{transform:translateX(6px) !important;}

/* ===== G. BOTTOM NODE STAMP + SCROLL INDICATOR ===== */
html body section.shopify-section:has(.banner){position:relative !important;}
html body section.shopify-section:has(.banner)::after{
  content:'\25CF  NODE LONDON-01 \B7  OPERATIONAL   \2014    \2193  SCROLL' !important;
  position:absolute !important;
  bottom:14px !important;
  left:0 !important;right:0 !important;
  text-align:center !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:9px !important;
  letter-spacing:.32em !important;
  text-transform:uppercase !important;
  color:rgba(201,169,110,.55) !important;
  z-index:5 !important;
  pointer-events:none !important;
  white-space:nowrap !important;
  animation:archHeroBlink 3s ease-in-out infinite !important;
}
@keyframes archHeroBlink{0%,100%{opacity:.55;}50%{opacity:.95;}}
@media (max-width:749px){html body section.shopify-section:has(.banner)::after{content:'\25CF  LONDON-01 \B7  \2193  SCROLL' !important;font-size:7.5px !important;letter-spacing:.22em !important;}}

/* ===== H. SIDE TICK RAILS (architectural drawing markers) ===== */
html body .banner .banner__media-image{position:relative !important;}
html body .banner__content::before{
  content:'' !important;
  position:absolute !important;
  top:60px;bottom:60px;left:24px !important;
  width:1px !important;
  background:linear-gradient(to bottom, transparent, rgba(201,169,110,.35) 20%, rgba(201,169,110,.35) 80%, transparent) !important;
  z-index:4 !important;
  display:block !important;
}
html body .banner__content::after{
  content:'' !important;
  position:absolute !important;
  top:60px;bottom:60px;right:24px !important;
  width:1px !important;
  background:linear-gradient(to bottom, transparent, rgba(201,169,110,.35) 20%, rgba(201,169,110,.35) 80%, transparent) !important;
  z-index:4 !important;
  display:block !important;
}
@media (max-width:749px){html body .banner__content::before{left:8px !important;}html body .banner__content::after{right:8px !important;}}

/* Pulsing corner dots replace the old bracket corners */
html body .banner__box{position:relative !important;}


/* ===== SECTION 137 \2014  FULL REVERT OF HERO v3 (S133/134/136) BACK TO CLEAN v2 STATE (2026-05-21) ===== */
/* All the v3 ops-console pseudo-element decorations rendered messy. Reverting completely. */

/* Restore banner default background \2014  kill void + dot-grid */
html body .banner{background:transparent !important;min-height:auto !important;}
html body .banner::after{display:none !important;background:none !important;content:none !important;animation:none !important;}

/* Restore the original LIVE-only top status terminal */
html body .banner::before{content:'\25CF  LIVE \B7  LONDON 51.5074\B0 N 0.1278\B0 W \B7  CH #14635926 \B7  GMT' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;padding:14px 0 !important;font-family:'JetBrains Mono', monospace !important;font-size:9.5px !important;letter-spacing:.36em !important;color:rgba(201,169,110,.85) !important;background:rgba(11,11,11,.45) !important;border-bottom:1px solid rgba(201,169,110,.1) !important;text-align:center !important;z-index:3 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;}

/* Restore background image opacity */
html body .banner .banner__media,html body .banner picture,html body .banner img.banner__media-image{opacity:1 !important;filter:none !important;}

/* Restore the inset dark box */
html body .banner__content,html body .banner__box{background:rgba(11,11,11,.7) !important;border:1px solid rgba(201,169,110,.18) !important;padding:60px 32px !important;position:relative !important;}

/* Kill side rails + eyebrow + bottom stamp + SVG sweep */
html body .banner__content::before{display:none !important;content:none !important;background:none !important;}
html body .banner__content::after{display:none !important;content:none !important;background:none !important;}
html body .banner__box::before{display:none !important;content:none !important;}
html body .banner__box::after{display:none !important;content:none !important;}
html body section.shopify-section:has(.banner)::after{display:none !important;content:none !important;animation:none !important;}

/* Restore title font to mono (clean readable v2 state) */
html body .banner__heading,html body .banner h1,html body .banner h2.banner__heading{font-family:'JetBrains Mono', monospace !important;font-size:clamp(28px, 4vw, 44px) !important;font-weight:500 !important;line-height:1.18 !important;letter-spacing:-.01em !important;color:#f0e8d4 !important;text-transform:none !important;margin:0 0 22px 0 !important;}
@media (max-width:749px){html body .banner__heading{font-size:clamp(22px, 6vw, 28px) !important;}}

/* Keep the brightened subtitle */
html body .banner__text,html body .banner__text p{font-family:'JetBrains Mono', monospace !important;font-size:12px !important;line-height:1.7 !important;letter-spacing:.05em !important;color:rgba(237,231,217,.86) !important;margin:0 auto 28px auto !important;max-width:520px !important;}

/* Keep the chevron outlined button \2014  center the buttons container */
html body .banner__buttons{display:flex !important;justify-content:center !important;align-items:center !important;gap:16px !important;flex-wrap:wrap !important;margin:0 auto !important;}
html body .banner__buttons .button{background:transparent !important;color:rgba(201,169,110,.95) !important;border:1px solid rgba(201,169,110,.55) !important;font-family:'JetBrains Mono', monospace !important;font-size:11px !important;letter-spacing:.34em !important;text-transform:uppercase !important;border-radius:0 !important;padding:16px 32px !important;font-weight:600 !important;display:inline-flex !important;align-items:center !important;gap:10px !important;transition:all .35s ease !important;}
html body .banner__buttons .button::before{display:none !important;content:none !important;}
html body .banner__buttons .button::after{content:'\2192 ' !important;display:inline-block !important;font-size:13px !important;letter-spacing:0 !important;transition:transform .35s ease !important;color:inherit !important;}
html body .banner__buttons .button:hover{background:rgba(201,169,110,.95) !important;color:#0b0b0b !important;border-color:rgba(201,169,110,.95) !important;box-shadow:0 12px 40px -12px rgba(201,169,110,.55) !important;}
html body .banner__buttons .button:hover::after{transform:translateX(5px) !important;}


/* ===== SECTION 138 \2014  HIDE OLD IMAGE BANNER + REORDER NEW ARCH-HERO TO TOP (2026-05-21) ===== */
html body main,html body #MainContent{display:flex !important;flex-direction:column !important;}
html body section.shopify-section:has(.banner){display:none !important;}
html body section#shopify-section-template--27925357035902__custom_liquid_m4qjj6{order:-100 !important;}


/* ===== SECTION 139 \2014  FIX ARCH-HERO GRID: log stream was pushing left column to 3789px wide (off-screen) (2026-05-21) ===== */
html body .arch-hero__grid{min-width:0 !important;}
html body .arch-hero__grid > *{min-width:0 !important;overflow:hidden !important;}
html body .arch-hero__main{min-width:0 !important;max-width:100% !important;overflow:hidden !important;}
html body .arch-hero__log{max-width:100% !important;overflow:hidden !important;}
html body .arch-hero__log-stream{padding-left:0 !important;}


/* ===== SECTION 140 \2014  KILL TOP/BOTTOM PADDING ON ARCH-HERO WRAPPER (2026-05-21) ===== */
html body section.shopify-section:has(.arch-hero){padding-top:0 !important;padding-bottom:0 !important;margin:0 !important;min-height:0 !important;}
html body section.shopify-section:has(.arch-hero) > *{padding-top:0 !important;padding-bottom:0 !important;}
html body section.shopify-section:has(.arch-hero) [class*="section-template"]{padding-top:0 !important;padding-bottom:0 !important;}


/* ===== SECTION 141 \2014  ARCH-HERO MOBILE RESPONSIVENESS FIX (2026-05-21) ===== */
/* On mobile the telemetry strip + tech log overflow horizontally (white-space:nowrap with too many items). Showcase image is also too big. Fix all of it. */
@media (max-width: 749px){
  /* Telemetry strip becomes horizontal-scrollable on mobile */
  html body .arch-hero__telemetry{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:8px 16px !important;
    font-size:7px !important;
    letter-spacing:.2em !important;
    gap:14px !important;
  }
  html body .arch-hero__telemetry::-webkit-scrollbar{display:none !important;}
  /* Tech log compressed */
  html body .arch-hero__log{font-size:7.5px !important;letter-spacing:.16em !important;height:20px !important;}
  /* Showcase image \2014  cap height so it doesn't dominate */
  html body .arch-hero__showcase{max-width:320px !important;margin:0 auto !important;aspect-ratio:1 !important;}
  /* Console panel padding tightened */
  html body .arch-hero__console{padding:14px !important;gap:14px !important;}
  /* Eyebrow + headline + sub */
  html body .arch-hero__eyebrow{font-size:8px !important;letter-spacing:.28em !important;}
  html body .arch-hero__sub{font-size:11px !important;line-height:1.65 !important;max-width:100% !important;}
  /* Hero overall padding tighter */
  html body .arch-hero{padding:14px 16px 18px !important;}
  /* Bottom system bar smaller + single line allowed */
  html body .arch-hero__bottom{font-size:6.5px !important;letter-spacing:.18em !important;padding:10px 0 !important;margin-top:18px !important;}
  /* Metrics tighter */
  html body .arch-hero__metrics{gap:6px !important;}
  html body .arch-hero__metrics .num{font-size:18px !important;}
  html body .arch-hero__metrics .lbl{font-size:6.5px !important;letter-spacing:.18em !important;}
  /* Panel rows smaller */
  html body .arch-hero__panel .row{font-size:8.5px !important;letter-spacing:.18em !important;padding:6px 0 !important;}
  /* Showcase caption smaller */
  html body .arch-hero__showcase-cap{font-size:7px !important;letter-spacing:.18em !important;padding:3px 6px !important;}
  html body .arch-hero__showcase-meta{font-size:6.5px !important;letter-spacing:.18em !important;padding:2px 6px !important;}
  /* Buttons full-width stack */
  html body .arch-hero__btn{padding:14px 18px !important;font-size:10px !important;letter-spacing:.24em !important;}
}


/* ===== SECTION 142 \2014  KILL ARCH-HERO INNER TOP PADDING SO TELEMETRY STRIP IS FLUSH AT TOP (2026-05-21) ===== */
/* The .arch-hero element itself has padding-top:36px (from "padding: calc(var(--u)*5) ...") which renders as a dark void above the telemetry strip. Kill the top padding only; keep bottom for the system bar. */
html body .arch-hero{padding-top:0 !important;}
/* Pull telemetry strip's negative margin in too \2014  it was -3u on horizontal sides; need to make sure it spans full width and doesn't have top margin */
html body .arch-hero__telemetry{margin-top:0 !important;}
/* Slight extra space inside telemetry for breathing room */
html body .arch-hero__telemetry{padding:12px 24px !important;}
@media (max-width: 749px){
  html body .arch-hero{padding-top:0 !important;}
  html body .arch-hero__telemetry{padding:8px 14px !important;margin-top:0 !important;}
}


/* ===== SECTION 143 \2014  SWAP RIGHT SHOWCASE TO ROOM PHOTO + BLACK OVERLAY (2026-05-21) ===== */
html body .arch-hero__showcase img{display:none !important;}
html body .arch-hero__showcase{background-image:url('https://archalign.store/cdn/shop/files/the-stylish-composition-of-meditation-living-room-2024-10-18-05-14-26-utc_2.jpg') !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;position:relative !important;}
html body .arch-hero__showcase::before{content:'' !important;position:absolute !important;inset:0 !important;background:linear-gradient(180deg, rgba(11,11,11,.35) 0%, rgba(11,11,11,.55) 100%) !important;z-index:1 !important;pointer-events:none !important;}
html body .arch-hero__showcase-cap{font-size:0 !important;line-height:0 !important;}
html body .arch-hero__showcase-cap::before{content:'// INTERIOR \B7  STUDIO SCENE 01' !important;font-family:'JetBrains Mono', monospace !important;font-size:8.5px !important;letter-spacing:.26em !important;text-transform:uppercase !important;color:rgba(201,169,110,.92) !important;display:inline-block !important;line-height:1 !important;}
html body .arch-hero__showcase-meta{font-size:0 !important;line-height:0 !important;}
html body .arch-hero__showcase-meta::before{content:'CUSHIONS \B7  BRANCH \B7  LONDON' !important;font-family:'JetBrains Mono', monospace !important;font-size:7px !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:rgba(201,169,110,.85) !important;display:inline-block !important;line-height:1 !important;}
@media (max-width:749px){html body .arch-hero__showcase-cap::before{font-size:7px !important;letter-spacing:.2em !important;}html body .arch-hero__showcase-meta::before{font-size:6.5px !important;letter-spacing:.18em !important;}}


/* ===== SECTION 144 \2014  ARCH-HERO MOBILE: fix collapsed showcase + telemetry overflow + caption render (2026-05-21) ===== */

/* Showcase had aspect-ratio:1 + no width, collapsed to 2x2. Force width 100% (cap stays 320px max). */
html body .arch-hero__showcase{width:100% !important;max-width:100% !important;aspect-ratio:1 !important;min-height:280px !important;display:block !important;}
@media (max-width:749px){
  html body .arch-hero__showcase{max-width:100% !important;min-height:240px !important;}
  /* Telemetry: don't try nowrap-scroll \2014  wrap to multiple lines on small screens, keep all metrics readable */
  html body .arch-hero__telemetry{flex-wrap:wrap !important;white-space:normal !important;justify-content:center !important;overflow:visible !important;padding:10px 14px !important;gap:6px 14px !important;font-size:7px !important;letter-spacing:.18em !important;}
  html body .arch-hero__telemetry span{display:inline-flex !important;align-items:center !important;}
}

/* Caption labels \2014  hide original text fully + render ::before reliably as block */
html body .arch-hero__showcase-cap{font-size:0 !important;line-height:0 !important;letter-spacing:0 !important;color:transparent !important;}
html body .arch-hero__showcase-cap::before{content:'// INTERIOR \B7  STUDIO SCENE 01' !important;display:inline-block !important;font-family:'JetBrains Mono', monospace !important;font-size:8.5px !important;line-height:1 !important;letter-spacing:.26em !important;text-transform:uppercase !important;color:rgba(201,169,110,.95) !important;}
html body .arch-hero__showcase-meta{font-size:0 !important;line-height:0 !important;letter-spacing:0 !important;color:transparent !important;}
html body .arch-hero__showcase-meta::before{content:'CUSHIONS \B7  BRANCH \B7  LONDON' !important;display:inline-block !important;font-family:'JetBrains Mono', monospace !important;font-size:7px !important;line-height:1 !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:rgba(201,169,110,.85) !important;}
@media (max-width:749px){
  html body .arch-hero__showcase-cap::before{font-size:7px !important;letter-spacing:.18em !important;}
  html body .arch-hero__showcase-meta::before{font-size:6.5px !important;letter-spacing:.16em !important;}
}

/* Tech log on mobile \2014  ensure it doesn't push column wider. The stream is intentionally wide but clipped by overflow:hidden on the log container. */
html body .arch-hero__log{overflow:hidden !important;max-width:100% !important;}
@media (max-width:749px){html body .arch-hero__log{height:18px !important;}html body .arch-hero__log-stream{animation-duration:50s !important;}}

/* Console grid item shouldn't shrink showcase via min-width:auto */
html body .arch-hero__console{min-width:0 !important;width:100% !important;}


/* ===== SECTION 145 \2014  KILL HEADER\2192 HERO GAP (header section bottom padding + section spacing) (2026-05-21) ===== */
/* The visible gap is the bottom padding region of the header section showing dark with no content. Pull the hero section up to overlap it, and tighten header padding-bottom across the board. */

html body header.header{padding-bottom:0 !important;}
html body section.shopify-section.section-header,html body section.shopify-section:has(> header){padding-top:0 !important;padding-bottom:0 !important;}
html body section.shopify-section:has(.arch-hero){margin-top:0 !important;}

@media (max-width:749px){
  html body header.header{padding-top:10px !important;padding-bottom:0 !important;}
  html body section.shopify-section:has(.arch-hero){margin-top:-1px !important;}
  html body .arch-hero{padding-top:0 !important;}
  html body .arch-hero__telemetry{margin-top:0 !important;padding:10px 14px !important;}
}

/* Also kill any padding on the wrapping .shopify-section.section that wraps the hero on top */
html body section.shopify-section:has(.arch-hero) > [class*="section-template"]{padding:0 !important;margin:0 !important;}
html body section.shopify-section:has(.arch-hero){padding:0 !important;margin:0 !important;border:none !important;}


/* ===== SECTION 146 \2014  ARCH-HERO MULTI-DEVICE AUDIT FIXES + MATRIX CANVAS LAYER (2026-05-21) ===== */

/* Canvas matrix layer sits between background photo and content */
html body .arch-hero canvas#archHeroMatrix{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;z-index:0 !important;opacity:.32 !important;pointer-events:none !important;mix-blend-mode:screen !important;}

/* Tablet sweet-spot 750-1024 \2014  keep split-screen but tighten gap */
@media (min-width:750px) and (max-width:1024px){
  html body .arch-hero__grid{grid-template-columns:1.2fr 1fr !important;gap:24px !important;}
  html body .arch-hero__title{font-size:clamp(28px, 4.5vw, 48px) !important;}
  html body .arch-hero__telemetry{font-size:8.5px !important;letter-spacing:.26em !important;gap:14px !important;}
}

/* Desktop large 1280+ \2014  more breathing room */
@media (min-width:1280px){
  html body .arch-hero{padding:0 32px 36px !important;}
  html body .arch-hero__grid{gap:48px !important;}
}

/* Stack at <750 properly + remove ALL horizontal overflow safety */
@media (max-width:749px){
  html body .arch-hero{padding:0 14px 18px !important;}
  html body .arch-hero__grid{grid-template-columns:1fr !important;gap:18px !important;}
  html body .arch-hero__main{order:1 !important;}
  html body .arch-hero__console{order:2 !important;}
  html body .arch-hero__showcase{aspect-ratio:16/10 !important;min-height:200px !important;}
  html body .arch-hero__title{margin-bottom:14px !important;}
  html body .arch-hero__sub{margin-bottom:18px !important;}
  html body .arch-hero__log{margin-top:18px !important;}
  html body .arch-hero__bottom{margin-top:18px !important;gap:6px !important;flex-direction:column !important;align-items:center !important;text-align:center !important;}
}

/* Very small phones <360 \2014  collapse telemetry further */
@media (max-width:380px){
  html body .arch-hero__telemetry{font-size:6.5px !important;letter-spacing:.14em !important;padding:8px 10px !important;gap:6px 10px !important;}
  html body .arch-hero__title{font-size:22px !important;line-height:1.1 !important;}
  html body .arch-hero__sub{font-size:10px !important;}
  html body .arch-hero__eyebrow{font-size:7px !important;letter-spacing:.22em !important;}
}

/* Console at <749 \2014  lighter glass so content shows + fit */
@media (max-width:749px){
  html body .arch-hero__console{padding:14px !important;gap:14px !important;background:rgba(11,11,11,.42) !important;}
  html body .arch-hero__metrics{grid-template-columns:repeat(3,1fr) !important;}
  html body .arch-hero__metrics .num{font-size:18px !important;}
}

/* Ensure background photo fills on every device, no white edges */
html body .arch-hero{background:#0a0908 !important;}
html body .arch-hero::after{background-attachment:scroll !important;}

/* Tighten bottom system bar across all */
html body .arch-hero__bottom{padding:10px 0 !important;margin-top:24px !important;}


/* ===== SECTION 147 \2014  CSS-ONLY DATA STREAKS LAYER (2026-05-21) ===== */
html body .arch-hero::before{background:radial-gradient(ellipse 90% 65% at 50% 50%,rgba(10,9,8,.55),rgba(10,9,8,.88) 80%),radial-gradient(circle at center,rgba(201,169,110,.18) 1px,transparent 1.5px) 0 0/30px 30px,linear-gradient(180deg,transparent 0%,rgba(232,200,135,.55) 60%,rgba(232,200,135,.9) 92%,transparent 100%) 8% -240px/2px 240px no-repeat,linear-gradient(180deg,transparent 0%,rgba(201,169,110,.4) 60%,rgba(232,200,135,.75) 92%,transparent 100%) 22% -340px/2px 200px no-repeat,linear-gradient(180deg,transparent 0%,rgba(201,169,110,.45) 60%,rgba(232,200,135,.8) 92%,transparent 100%) 38% -160px/2px 280px no-repeat,linear-gradient(180deg,transparent 0%,rgba(201,169,110,.35) 60%,rgba(232,200,135,.7) 92%,transparent 100%) 56% -400px/2px 220px no-repeat,linear-gradient(180deg,transparent 0%,rgba(201,169,110,.45) 60%,rgba(232,200,135,.85) 92%,transparent 100%) 72% -120px/2px 200px no-repeat,linear-gradient(180deg,transparent 0%,rgba(232,200,135,.55) 60%,rgba(232,200,135,.9) 92%,transparent 100%) 88% -320px/2px 260px no-repeat !important;animation:archHeroDrift 28s ease-in-out infinite,archHeroMatrix 9s linear infinite !important;}
@keyframes archHeroMatrix{0%{background-position:center,0 0,8% -240px,22% -340px,38% -160px,56% -400px,72% -120px,88% -320px;}100%{background-position:center,0 0,8% 110vh,22% 110vh,38% 110vh,56% 110vh,72% 110vh,88% 110vh;}}


/* ===== SECTION 148 \2014  NUCLEAR PADDING KILL FOR HERO (2026-05-21) ===== */
html body section.shopify-section .arch-hero,html body main section.shopify-section .arch-hero,html body .shopify-section.section .arch-hero{padding-top:0 !important;padding-left:0 !important;padding-right:0 !important;margin-top:0 !important;}
html body .shopify-section .section.arch-hero,html body .shopify-section section.arch-hero{padding-top:0 !important;}
html body section.shopify-section:has(.arch-hero){padding:0 !important;margin:0 !important;}
html body section.shopify-section:has(.arch-hero) .section{padding:0 !important;}
html body .shopify-section:has(.arch-hero) > *{padding-top:0 !important;margin-top:0 !important;}


/* ===== SECTION 149 \2014  RESTORE HORIZONTAL PADDING ON ARCH-HERO (S148 nuked it) (2026-05-21) ===== */
html body section.shopify-section .arch-hero,html body main section.shopify-section .arch-hero,html body .shopify-section.section .arch-hero{padding-left:24px !important;padding-right:24px !important;padding-top:0 !important;padding-bottom:36px !important;}
@media (max-width:749px){html body section.shopify-section .arch-hero,html body main section.shopify-section .arch-hero{padding-left:16px !important;padding-right:16px !important;padding-bottom:24px !important;}}
@media (min-width:1280px){html body section.shopify-section .arch-hero,html body main section.shopify-section .arch-hero{padding-left:32px !important;padding-right:32px !important;padding-bottom:40px !important;}}
/* Restore telemetry strip negative side margin so it can bleed full-width edge to edge (intentional design) but stay above the side padding */
html body .arch-hero__telemetry{margin-left:-24px !important;margin-right:-24px !important;}
@media (max-width:749px){html body .arch-hero__telemetry{margin-left:-16px !important;margin-right:-16px !important;}}
@media (min-width:1280px){html body .arch-hero__telemetry{margin-left:-32px !important;margin-right:-32px !important;}}

/* ===== SECTION 150 \2014  MATRIX BACKGROUND VISIBILITY + GLASS OVERLAYS (2026-05-21) ===== */
/* Matrix canvas is injected sitewide via theme.liquid (#aa-matrix-bg z-index:0 fixed). */
/* Hero & footer remain opaque (cover matrix); mid sections become glass; product cards become semi-transparent. */

html{background:#0a0908 !important;}
html body{background:transparent !important;}
html body .page-width,html body .container,html body main{background:transparent !important;}

/* HERO (new arch-hero block) \2014  opaque, sits above matrix */
html body .arch-hero{background:#0a0908 !important;position:relative !important;z-index:2 !important;}
html body section.shopify-section .arch-hero{background:#0a0908 !important;}

/* HEADER \2014  opaque on top */
html body .header-wrapper,html body .section-header,html body header.header,html body sticky-header{background:#0a0908 !important;position:relative !important;z-index:30 !important;}

/* "THE ARCHALIGN STANDARD" marquee + everything below until footer = glass */
html body .arch-tm-section,html body section.shopify-section{background:transparent !important;}
html body .arch-tm-section{position:relative !important;z-index:2 !important;}
html body section.shopify-section .section,html body section.shopify-section .section.gradient,html body section.shopify-section .color-scheme-1,html body section.shopify-section .color-scheme-2,html body section.shopify-section .color-scheme-3,html body section.shopify-section .color-scheme-4{background:transparent !important;background-color:transparent !important;}

/* Sections that need readable text get a frosted glass panel */
html body .multicolumn,html body .collection,html body .featured-collection,html body main .image-with-text,html body main .rich-text,html body main .product__media-wrapper,html body main .product__info-container{background:rgba(245,234,212,.025) !important;backdrop-filter:blur(6px) saturate(1.1) !important;-webkit-backdrop-filter:blur(6px) saturate(1.1) !important;border-top:1px solid rgba(201,169,110,.08) !important;border-bottom:1px solid rgba(201,169,110,.08) !important;position:relative !important;z-index:2 !important;}

/* PRODUCT CARDS \2014  the "semi glass white square" the user asked for */
html body .card,html body .card-wrapper>.card,html body .product-card,html body .grid__item .card{background:rgba(245,234,212,.07) !important;backdrop-filter:blur(14px) saturate(1.3) !important;-webkit-backdrop-filter:blur(14px) saturate(1.3) !important;border:1px solid rgba(201,169,110,.22) !important;box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06) !important;position:relative !important;z-index:2 !important;}
html body .card .card__inner,html body .card-wrapper .card__inner{background:transparent !important;}
html body .card__content,html body .card__information{background:rgba(10,9,8,.4) !important;backdrop-filter:blur(8px) !important;}

/* FOOTER \2014  opaque, caps matrix at bottom */
html body .arch-footer,html body footer,html body footer.footer,html body .footer{background:#0a0908 !important;position:relative !important;z-index:5 !important;}
html body footer .footer-block,html body .arch-footer *{background-color:transparent !important;}

/* Ensure matrix canvas stays behind everything but visible */
canvas#aa-matrix-bg{z-index:0 !important;position:fixed !important;inset:0 !important;pointer-events:none !important;mix-blend-mode:screen !important;}

/* Sticky CTA bar stays above matrix */
html body .arch-cta-bar,html body .arch-sticky-cta{z-index:25 !important;}

/* Cart drawer + modals above matrix */
html body cart-drawer,html body .cart-drawer,html body .modal{z-index:50 !important;}


/* ===== SECTION 151 \2014  MAIN/NEWSLETTER TRANSPARENCY (FIX MATRIX OCCLUSION) (2026-05-21) ===== */
/* MAIN had solid bg rgb(10,9,8) z:1 covering matrix canvas. Make all wrapping containers transparent. */
html body main,html body main.content-for-layout,html body .content-for-layout{background:transparent !important;background-color:transparent !important;}
html body .newsletter__wrapper,html body .newsletter__wrapper.gradient,html body .newsletter__wrapper.color-scheme-1,html body .newsletter__wrapper.color-scheme-2,html body .newsletter__wrapper.color-scheme-3,html body .newsletter__wrapper.color-scheme-4{background:rgba(20,17,13,.55) !important;background-color:rgba(20,17,13,.55) !important;backdrop-filter:blur(10px) saturate(1.2) !important;-webkit-backdrop-filter:blur(10px) saturate(1.2) !important;}
html body .newsletter,html body .newsletter.center{background:transparent !important;}

/* Matrix canvas brightness boost \2014  was 0.32 too dim; bump to 0.55 and drop the screen blend that washed out chars */
canvas#aa-matrix-bg{opacity:.55 !important;mix-blend-mode:normal !important;}

/* Many shopify sections still have solid bg via color-scheme-N or gradient classes \2014  nuke those */
html body .gradient,html body .color-scheme-1,html body .color-scheme-2,html body .color-scheme-3,html body .color-scheme-4,html body .color-scheme-inverse{background:transparent !important;background-color:transparent !important;}

/* But the cards still need their semi-glass tint \2014  reassert from S150 in case the rules above cancel them */
html body .card,html body .card-wrapper>.card,html body .product-card{background:rgba(245,234,212,.07) !important;}
html body .card__content,html body .card__information{background:rgba(10,9,8,.45) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;}

/* Hero and footer must REASSERT opaque (they got nuked by the universal .gradient transparency above) */
html body .arch-hero,html body section.shopify-section .arch-hero{background:#0a0908 !important;background-color:#0a0908 !important;}
html body .arch-footer,html body footer.footer,html body footer{background:#0a0908 !important;background-color:#0a0908 !important;}
html body .header-wrapper,html body sticky-header{background:#0a0908 !important;background-color:#0a0908 !important;}


/* ===== SECTION 152 \2014  MAIN TRANSPARENCY OVERRIDE (HIGH SPECIFICITY) (2026-05-21) ===== */
/* arch-hero Liquid <style> sets main background via "html body main" which has same specificity as S150/S151. */
/* Must use higher specificity to beat it. Stacking multiple class selectors + id selector. */
html body main#MainContent,
html body main.content-for-layout,
html body main.content-for-layout.focus-none,
html body #MainContent.content-for-layout,
body>main,
html>body>main{background:transparent !important;background-color:transparent !important;}

/* Same treatment for any wrapping container that might hide matrix */
html body main#MainContent>section,
html body main#MainContent>.shopify-section{background:transparent !important;background-color:transparent !important;}


/* ===== SECTION 153 \2014  MATRIX GLOW TONE-DOWN (2026-05-21) ===== */
/* User said glow is "too much". Drop opacity from .55 to .22 \2014  subtle ambient rather than foreground. */
canvas#aa-matrix-bg{opacity:.22 !important;}


/* ===== SECTION 154 \2014  MATRIX VISIBILITY DIAL-IN (2026-05-21) ===== */
/* S153 dropped to .22 which made matrix disappear. .4 is the sweet spot: visible but not loud. */
canvas#aa-matrix-bg{opacity:.4 !important;}


/* ===== SECTION 154 \2014  MATRIX VISIBILITY DIAL-IN (2026-05-21) ===== */
canvas#aa-matrix-bg{opacity:.4 !important;}


/* ===== SECTION 155 \2014  MATRIX BRIGHTNESS FINAL DIAL-IN (2026-05-21) ===== */
/* .4 too bright; .22 invisible. .28 is the goldilocks. */
canvas#aa-matrix-bg{opacity:.28 !important;}


/* ===== SECTION 155 \2014  MATRIX BRIGHTNESS FINAL DIAL-IN (2026-05-21) ===== */
canvas#aa-matrix-bg{opacity:.28 !important;}


/* ===== SECTION 156 \2014  UNIFORM SECTION GUTTERS (PAIR 1) (2026-05-21) ===== */
:root{--arch-page-x:20px;}
@media (min-width:990px){:root{--arch-page-x:40px;}}
html body .page-width,html body .page-width--narrow,html body .page-width--medium{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;}
html body .announcement-bar,html body .utility-bar,html body section.shopify-section [class*="announcement"]{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body .header,html body sticky-header .header{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body .header__heading,html body .header__heading-link{padding-left:0 !important;margin-left:0 !important;}
html body .arch-hero,html body section.shopify-section .arch-hero{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body .arch-hero__grid{margin-left:0 !important;margin-right:0 !important;}
html body .arch-hero__telemetry{margin-left:0 !important;margin-right:0 !important;}


/* ===== SECTION 157 \2014  UNIFORM GUTTERS WITH HIGHER SPECIFICITY (2026-05-21) ===== */
/* S156 was beaten by theme's "html body header.header" (1 class + 3 elements) \2014  use same-or-higher specificity here. */

html body header.header,html body sticky-header header.header,html body .header-wrapper header.header,html body header.header.header--has-menu,html body header.header.header--has-social{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}

html body section.shopify-section div.arch-hero,html body main.content-for-layout section.shopify-section .arch-hero,html body main#MainContent .arch-hero{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}

/* Logo flush at the gutter \2014  strip header__heading internal padding */
html body header.header .header__heading,html body header.header .header__heading-link,html body header.header h1.header__heading{padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important;}

/* Hero internal grid + telemetry both at edge:0 inside the new gutter */
html body div.arch-hero .arch-hero__grid,html body div.arch-hero .arch-hero__telemetry{margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;}

/* Announcement bar: ensure content padding matches */
html body .announcement-bar,html body div.utility-bar,html body section.shopify-section [class*="announcement"]{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}


/* ===== SECTION 158 \2014  REVERT S156/S157 (THEY COMPOUNDED PADDING) (2026-05-21) ===== */
/* S156/S157 added padding on top of existing parent padding \2014  content shifted MORE inward, not aligned. */
/* Restore original gutters then take a different approach (precise per-element corrections). */
:root{--arch-page-x:14px;}
@media (min-width:990px){:root{--arch-page-x:32px;}}
html body .page-width,html body .page-width--narrow,html body .page-width--medium{padding-left:1.5rem !important;padding-right:1.5rem !important;max-width:120rem !important;}
html body header.header,html body sticky-header header.header,html body .header-wrapper header.header,html body header.header.header--has-menu{padding-left:1.5rem !important;padding-right:1.5rem !important;}
html body section.shopify-section div.arch-hero,html body main#MainContent .arch-hero{padding-left:24px !important;padding-right:24px !important;}
html body div.arch-hero .arch-hero__telemetry{margin-left:-16px !important;margin-right:-16px !important;}
html body .announcement-bar,html body section.shopify-section [class*="announcement"]{padding-left:1.5rem !important;padding-right:1.5rem !important;}


/* ===== SECTION 159 \2014  UNIFORM GUTTER (TARGETED: ZERO PARENTS, OWN GUTTER PER SECTION) (2026-05-21) ===== */
/* Header has 3 stacked paddings: section(16)+wrapper(14)+header(15)=45 \2192  logo at x=45. Hero only has 24. */
/* Fix: zero out parent paddings of header, set header padding to 24 to match hero. */

:root{--arch-page-x:24px;}
@media (min-width:990px){:root{--arch-page-x:40px;}}

/* Header chain: zero out section + wrapper paddings, give the .header element its own gutter only */
html body section.shopify-section-group-header,html body section[class*="shopify-section-group-header"]{padding-left:0 !important;padding-right:0 !important;}
html body section.shopify-section-group-header .header-wrapper,html body div.header-wrapper{padding-left:0 !important;padding-right:0 !important;}
html body header.header,html body sticky-header header.header,html body .header-wrapper header.header{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body header.header .header__heading,html body header.header .header__heading-link{padding-left:0 !important;margin-left:0 !important;}

/* Hero already aligns \2014  keep at same var */
html body section.shopify-section div.arch-hero,html body main#MainContent .arch-hero{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body div.arch-hero .arch-hero__telemetry{margin-left:0 !important;margin-right:0 !important;}

/* Announcement bar chain: same treatment */
html body section.shopify-section-group-header .announcement-bar,html body div.announcement-bar,html body section.shopify-section [class*="announcement"]{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}
html body .utility-bar,html body .archalign-announcement{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}

/* Make all .page-width sections use the same gutter too (instead of bootstrap 1.5rem) */
html body .page-width,html body .page-width--narrow,html body .page-width--medium,html body section.shopify-section .page-width{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;max-width:100% !important;}


/* ===== SECTION 160 \2014  KILL HEADER GROUP DIV PADDING (last 16px offset) (2026-05-21) ===== */
/* .shopify-section-group-header is a DIV not SECTION \2014  previous selector missed. */
html body div.shopify-section-group-header,html body .shopify-section-group-header,html body [class*="shopify-section-group-header"]{padding-left:0 !important;padding-right:0 !important;}


/* ===== SECTION 161 \2014  ZERO SHOPIFY-SECTION OUTER PADDING (let .page-width/section own gutter) (2026-05-21) ===== */
/* Every .shopify-section adds 16px pad \2192  content at l=16 + .page-width padL(24) = 40. Hero at 24. Misalignment. */
/* Fix: zero .shopify-section pad. .page-width already at 24. Direct-child sections without .page-width get padding too. */

html body section.shopify-section,html body div.shopify-section,html body .shopify-section.section{padding-left:0 !important;padding-right:0 !important;}

/* Sections without .page-width wrapper need their own gutter so content lands at x=24 */
html body .multicolumn,html body .arch-tm-section,html body .arch-tm-inner,html body .rich-text,html body .featured-collection,html body .collection,html body .newsletter,html body .image-banner,html body .banner{padding-left:var(--arch-page-x) !important;padding-right:var(--arch-page-x) !important;}

/* But .multicolumn etc inside .page-width should NOT double-pad \2014  they sit at the page-width content edge */
html body .page-width .multicolumn,html body .page-width .arch-tm-section,html body .page-width .rich-text,html body .page-width .image-with-text{padding-left:0 !important;padding-right:0 !important;}


/* ===== SECTION 162 \2014  STOP TITLE-WRAPPER PAD STACKING (2026-05-21) ===== */
html body .collection .title-wrapper,html body .featured-collection .title-wrapper,html body .collection__title,html body .featured-collection__title,html body div.title-wrapper.collection__title{padding-left:0 !important;padding-right:0 !important;}
html body .multicolumn .title-wrapper,html body .image-with-text .title-wrapper,html body .rich-text .title-wrapper{padding-left:0 !important;padding-right:0 !important;}


/* ===== SECTION 163 \2014  UNIFIED VERTICAL RHYTHM (HARMONY PASS) (2026-05-21) ===== */
/* Before: banner 0/0, collection 18/32, rich-text 30/0 or 30/39, newsletter 24/24, hero 0/36, multicolumn 0/0. Chaos. */
/* After: every primary section gets var(--arch-section-y) top + bottom. ONE breathing rhythm. */

:root{--arch-section-y:36px;--arch-section-y-tight:20px;}
@media (min-width:990px){:root{--arch-section-y:64px;--arch-section-y-tight:32px;}}

html body .arch-tm-section,html body .multicolumn,html body .image-with-text,html body .collection,html body .featured-collection,html body .newsletter__wrapper,html body .rich-text,html body .banner{padding-top:var(--arch-section-y) !important;padding-bottom:var(--arch-section-y) !important;}

/* Hero is special \2014  already opens the page, gets a bit more on bottom only */
html body section.shopify-section div.arch-hero{padding-top:0 !important;padding-bottom:var(--arch-section-y) !important;}

/* Adjacent same-rhythm sections create double padding \2014  collapse with negative margin OR just accept the natural breathing */
/* Don't add :first-child / :last-child overrides yet \2014  let natural rhythm settle first */


/* ===== SECTION 164 \2014  TYPOGRAPHY SCALE HARMONY (2026-05-21) ===== */
/* Before: h2 sizes were 18,22,22,22,23,28,28,28 (4 different). Mixed Chakra Petch + JetBrains Mono. */
/* After: section h2 unified at 22 mobile / 32 desktop. Feature h2 at 28 mobile / 44 desktop. Eyebrows in mono uppercase. */

:root{
  --arch-h0-mobile:28px;--arch-h0-desktop:44px;/* hero title */
  --arch-h1-mobile:24px;--arch-h1-desktop:32px;/* feature h2 */
  --arch-h2-mobile:18px;--arch-h2-desktop:24px;/* section h2 */
  --arch-eyebrow-mobile:11px;--arch-eyebrow-desktop:12px;
  --arch-body-mobile:14px;--arch-body-desktop:15px;
}

/* Standard section h2 \2014  normalize the 18/22/23 variants */
html body main .image-with-text__heading,html body main .featured-collection__title h2,html body main .collection__title h2,html body main .multicolumn .title h2,html body main .rich-text__heading{font-size:var(--arch-h2-mobile) !important;font-weight:600 !important;letter-spacing:-0.25px !important;line-height:1.2 !important;}
@media (min-width:990px){html body main .image-with-text__heading,html body main .featured-collection__title h2,html body main .collection__title h2,html body main .multicolumn .title h2,html body main .rich-text__heading{font-size:var(--arch-h2-desktop) !important;}}

/* Eyebrow labels \2014  always JetBrains Mono uppercase tracked, small */
html body main h2.h6,html body main h2.caption-with-letter-spacing,html body main p.eyebrow,html body main .eyebrow,html body main .caption{font-family:'JetBrains Mono',monospace !important;font-size:var(--arch-eyebrow-mobile) !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:.12em !important;line-height:1.4 !important;}
@media (min-width:990px){html body main h2.h6,html body main p.eyebrow,html body main .eyebrow{font-size:var(--arch-eyebrow-desktop) !important;}}

/* Product card h3 \2014  keep tight & consistent across the grid */
html body main .card__heading,html body main .card-information__heading,html body main h3.card__heading{font-size:13px !important;font-weight:500 !important;line-height:1.35 !important;letter-spacing:.02em !important;font-family:'Chakra Petch',sans-serif !important;}
@media (min-width:990px){html body main .card__heading{font-size:14px !important;}}



/* ===== SECTION 165 \2014  COLOR + BUTTON SYSTEM HARMONIZATION (2026-05-21) ===== */
:root{--arch-gold:#C9A96E;--arch-gold-warm:#D9B87C;--arch-gold-deep:#8E764D;--arch-void:#0A0908;--arch-ink:#1A1408;--arch-cream:#F0E8D4;--arch-cream-muted:#B8A988;--arch-line:rgba(201,169,110,.22);--arch-line-bright:rgba(201,169,110,.55);}
html body .button--primary,html body .shopify-payment-button button,html body button.button.button--primary,html body .product-form__submit,html body a.button.button--primary,html body .arch-cta-bar a,html body .arch-footer__signal-form button,html body footer button[type="submit"],html body .newsletter button[type="submit"]{background:var(--arch-gold) !important;background-color:var(--arch-gold) !important;color:var(--arch-ink) !important;font-family:'JetBrains Mono',monospace !important;font-size:11px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.14em !important;padding:14px 24px !important;border-radius:0 !important;border:1px solid var(--arch-gold) !important;transition:background .25s ease,transform .15s ease !important;}
html body .button--primary:hover,html body .shopify-payment-button button:hover,html body button.button.button--primary:hover,html body .product-form__submit:hover,html body a.button.button--primary:hover{background:var(--arch-gold-warm) !important;background-color:var(--arch-gold-warm) !important;transform:translateY(-1px) !important;}
html body .button--secondary,html body a.button.button--secondary,html body button.button.button--secondary{background:transparent !important;color:var(--arch-cream) !important;border:1px solid var(--arch-line-bright) !important;font-family:'JetBrains Mono',monospace !important;font-size:11px !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:.14em !important;padding:13px 24px !important;border-radius:0 !important;}
html body .button--secondary:hover{border-color:var(--arch-gold) !important;color:var(--arch-gold) !important;}
html body main hr,html body main .divider,html body main .section-divider{border:none !important;border-top:1px solid var(--arch-line) !important;margin:0 !important;}


/* ===== SECTION 166 \2014  EMERGENCY: TIGHTEN VOID GAPS + FORCE SOLID BG WHERE EMPTY (2026-05-21) ===== */
/* User: "the black background is moving" + cream area on collection page. */
/* Cause: S163's 64px section spacing leaves giant matrix-exposed voids between content and footer. */
/* Fix: drop --arch-section-y mobile 36\2192 20 / desktop 64\2192 36. Force HTML solid void. */

:root{--arch-section-y:20px !important;}
@media (min-width:990px){:root{--arch-section-y:36px !important;}}

/* Force page background SOLID void everywhere except where we want matrix visible */
html,html body{background:#0a0908 !important;background-color:#0a0908 !important;}

/* Make sure no empty section shows cream/light. .page-width on collection: void underneath */
html body main,html body main#MainContent,html body main.content-for-layout{background:transparent !important;}
html body main>.shopify-section{background:transparent !important;}

/* Collection grid: if last row has empty cells, dont expose anything weird */
html body .collection,html body .featured-collection,html body .product-grid{background:transparent !important;}
html body .product-grid>*:empty{display:none !important;}

/* Kill any default Shopify .gradient class that might leak cream */
html body .gradient[style*="--gradient-background"]{background:transparent !important;}
html body main *[style*="background-color: rgb(255"]{background-color:transparent !important;}
html body main *[style*="background: rgb(255"]{background:transparent !important;}

/* On the home page, the hero photo column shouldnt create a tall vacant column on desktop */
@media (min-width:990px){
  html body .arch-hero{min-height:auto !important;}
  html body .arch-hero__grid{align-items:stretch !important;}
}

/* Footer should sit FLUSH against the last content section, not separated by huge matrix band */
html body main>.shopify-section:last-child{padding-bottom:0 !important;}
html body footer.arch-footer,html body footer.footer{margin-top:0 !important;}

/* Make matrix canvas slightly less visible everywhere so empty stretches don't dominate */
canvas#aa-matrix-bg{opacity:.18 !important;}



/* S167 KILL FOOTER WAVE */ html body footer .arch-sweep{display:none !important;} html body footer.arch-footer::before,html body footer.arch-footer::after{display:none !important;content:none !important;background:none !important;animation:none !important;} html body footer.arch-footer{background:#0a0908 !important;border-top:1px solid rgba(201,169,110,.32) !important;}
/* S168 KILL CREAM ON CREAM */ html body main .jdgm-rev__body,html body main .jdgm-rev__title,html body main .jdgm-rev__author,html body main .jdgm-rev-widg *,html body main .jdgm-rev__reply,html body main .jdgm-rev__reply *{color:#1a1408 !important;} html body main .jdgm-rev__reply,html body main .jdgm-rev__reply-content,html body main [class*="jdgm-rev__reply"]{background:rgba(201,169,110,.85) !important;color:#1a1408 !important;border-left:3px solid #C9A96E !important;padding:14px !important;} html body main .jdgm-rev__body,html body main .jdgm-rev__content{color:#F0E8D4 !important;} html body main *[style*="background-color: rgb(255"] *,html body main *[style*="background: rgb(255"] *{color:#1a1408 !important;}
/* S169 LIGHT BG GUARD */ html body input[type="text"],html body input[type="email"],html body input[type="tel"],html body textarea,html body select{color:#F0E8D4 !important;background:rgba(10,9,8,.85) !important;border:1px solid rgba(201,169,110,.35) !important;} html body input::placeholder,html body textarea::placeholder{color:rgba(240,232,212,.5) !important;}
/* S170 DESKTOP LAYOUT GUARDS */ html,body{overflow-x:hidden !important;max-width:100vw !important;} html body cart-drawer,html body cart-drawer:not(.active),html body .cart-drawer:not(.active),html body cart-notification:not(.active){visibility:hidden !important;transform:translateX(100%) !important;} html body canvas#aa-matrix-bg{left:0 !important;right:0 !important;top:0 !important;width:100vw !important;height:100vh !important;} html body .arch-cta-bar,html body .arch-sticky-cta{left:0 !important;right:0 !important;width:100% !important;max-width:100vw !important;} html body .header__inline-menu a,html body .header__inline-menu li a{color:#F0E8D4 !important;} html body summary,html body .header__menu-item{color:#F0E8D4 !important;} html body .header__icon path,html body .header__icon svg{color:#F0E8D4 !important;fill:#F0E8D4 !important;stroke:#F0E8D4 !important;} html body .cart-count-bubble{background:#C9A96E !important;color:#1a1408 !important;}
/* S171 LOCK HERO PHOTO INSIDE HERO */ html body .arch-hero,html body .arch-hero__showcase,html body .arch-hero__media,html body .arch-hero__image,html body .arch-hero__grid,html body .arch-hero__content,html body .arch-hero *{background-attachment:scroll !important;} html body .arch-hero__showcase{position:relative !important;overflow:hidden !important;max-width:100% !important;} html body .arch-hero{position:relative !important;overflow:hidden !important;contain:layout paint !important;} html body .arch-hero img,html body .arch-hero__showcase img{position:relative !important;max-width:100% !important;width:100% !important;height:100% !important;object-fit:cover !important;} html body section.shopify-section div.arch-hero{contain:layout paint !important;}
/* S172 HERO LOCK */ html body .arch-hero,html body section div.arch-hero{position:relative !important;overflow:hidden !important;contain:layout style paint !important;isolation:isolate !important;} @media (min-width:990px){html body .arch-hero__showcase,html body .arch-hero__media,html body .arch-hero figure,html body .arch-hero picture{position:relative !important;top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;}}
/* S173 NUCLEAR HERO CONTAINMENT ALL VIEWPORTS */ html,html body{overflow-x:clip !important;overflow-x:hidden !important;} html body main,html body section,html body .arch-hero,html body .arch-hero__grid,html body .arch-hero__showcase,html body .arch-hero__media,html body .arch-hero__photo,html body .arch-hero figure,html body .arch-hero picture{overflow:hidden !important;max-width:100% !important;max-width:100vw !important;} html body .arch-hero__showcase,html body .arch-hero__media,html body .arch-hero__photo,html body .arch-hero figure,html body .arch-hero picture{position:relative !important;background-attachment:scroll !important;} html body .arch-hero img,html body .arch-hero__showcase img,html body .arch-hero__media img,html body .arch-hero figure img,html body .arch-hero picture img{position:relative !important;max-width:100% !important;width:100% !important;height:auto !important;object-fit:cover !important;display:block !important;}
/* S174 KILL ALL MOTION SOURCES */ html body canvas#aa-matrix-bg{display:none !important;visibility:hidden !important;opacity:0 !important;} html,html body{overflow-x:hidden !important;overflow-x:clip !important;width:100% !important;max-width:100vw !important;position:relative !important;} html body *{max-width:100vw !important;} html body main,html body main>*,html body section,html body .arch-hero,html body .arch-hero *{max-width:100% !important;overflow-x:hidden !important;} html body .arch-hero,html body .arch-hero__showcase{contain:strict !important;width:100% !important;}
/* S175 REVERT DAMAGE */ html body canvas#aa-matrix-bg{display:block !important;visibility:visible !important;opacity:.22 !important;} html body *{max-width:none !important;} html body .arch-hero,html body .arch-hero *{contain:none !important;max-width:100% !important;overflow:visible !important;} html body .arch-hero{overflow:hidden !important;contain:layout paint !important;} html,html body{overflow-x:hidden !important;max-width:100vw !important;}
/* S176 KILL MARQUEE MOTION (the moving black) */ html body .scroll-content,html body .unique-announcement-text-v1,html body [class*="announcement"] .scroll-content,html body marquee-component .scroll-content{animation:none !important;animation-play-state:paused !important;transform:none !important;} html body .unique-announcement-bar-v1,html body .unique-announcement-wrapper-v1,html body [class*="announcement-bar"]{background:#0a0908 !important;background-color:#0a0908 !important;}
/* S177 */ html body canvas#aa-matrix-bg{display:none !important;visibility:hidden !important;} html body img{max-width:100% !important;height:auto !important;} html body .arch-hero img,html body .arch-hero__showcase img{max-width:100% !important;width:100% !important;height:auto !important;object-fit:cover !important;display:block !important;} html body .arch-hero__showcase{max-height:60vh !important;overflow:hidden !important;}
/* S178 HIDE DONUT IMG SO ROOM SCENE BG SHOWS */ html body .arch-hero__showcase img,html body .arch-hero__media img,html body .arch-hero figure img{display:none !important;visibility:hidden !important;} html body .arch-hero__showcase{background-image:url('https://archalign.store/cdn/shop/files/the-stylish-composition-of-meditation-living-room-2024-10-18-05-14-26-utc_2.jpg') !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;min-height:400px !important;}
/* S179 PRODUCT PAGE FIX */ html body .product__media-wrapper,html body .product__media{max-height:60vh !important;} html body .product__media img{max-height:60vh !important;width:auto !important;height:auto !important;max-width:100% !important;object-fit:contain !important;} @media (min-width:990px){html body .product{display:grid !important;grid-template-columns:1fr 1fr !important;gap:32px !important;align-items:start !important;}}
/* S181 RESTORE MATRIX */ html body canvas#aa-matrix-bg{display:block !important;visibility:visible !important;opacity:.28 !important;position:fixed !important;left:0 !important;top:0 !important;width:100vw !important;height:100vh !important;z-index:0 !important;}
/* =====================================================================
   FIX 2026-05-22 \2014  homepage matrix-bleed dampening + type-scale + breathing
   Surgical refinements to live state. Append-only. No SECTION/Module.
   Verified in DOM (getComputedStyle/getBoundingClientRect) before authoring.
   ===================================================================== */

/* FIX A \2014  DESIGNED WITH SPATIAL INTENT section was rgba(0,0,0,0); matrix bled
   through the 36px Chakra Petch headline. Dampen behind text only. */
html body #shopify-section-template--27925357035902__image_with_text_DDtyTr {
  background: rgba(10,9,8,.55) !important;
  backdrop-filter: blur(6px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* FIX B \2014  Manifesto rich-text "Your Home Does Not Need More Stuff" same fix. */
html body #shopify-section-template--27925357035902__rich_text_aW6CzD {
  background: rgba(10,9,8,.5) !important;
  backdrop-filter: blur(5px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.1) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* FIX C \2014  GET THE ROOM EDIT newsletter. Existing .newsletter__wrapper at .55
   still showed bleed-through; strengthen wrapper + add section-level dampening. */
html body #shopify-section-template--27925357035902__newsletter_EcE7wE {
  background: rgba(10,9,8,.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  position: relative !important;
  z-index: 1 !important;
}
html body .newsletter__wrapper {
  background: rgba(20,17,13,.78) !important;
  background-color: rgba(20,17,13,.78) !important;
}

/* FIX D \2014  "New to the Studio" h2 rendered at 24px (off the fixed 9/11/13/15/18/22/28/36 scale).
   Bump to 28 for type rhythm with adjacent 36px H2s. */
html body #shopify-section-template--27925357035902__featured_collection1 .collection__title h2,
html body #shopify-section-template--27925357035902__featured_collection1 .title-wrapper h2 {
  font-size: 28px !important;
  letter-spacing: .04em !important;
  line-height: 1.1 !important;
}

/* FIX E \2014  Hero CTA row had margin-bottom:0; sat flush on telemetry log marquee.
   Add breathing room above the live-log strip. */
html body .arch-hero .arch-hero__cta { margin-bottom: 56px !important; }
@media (max-width: 749px) {
  html body .arch-hero .arch-hero__cta { margin-bottom: 36px !important; }
}

/* =================== END FIX 2026-05-22 =================== */

/* =====================================================================
   FIX 2026-05-22 (phase 2) - broken-glass overlay over the matrix canvas
   Sits between matrix (z:0) and content sections (z:1+) via body::after.
   Pure CSS, no theme.liquid edits.
   ===================================================================== */
html body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(10,9,8,0.22);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'><g fill='none' stroke='rgba(201,169,110,0.14)' stroke-width='0.7' stroke-linecap='round'><path d='M0,160 L380,240 L620,170 L880,300 L1200,250'/><path d='M180,0 L240,280 L200,520 L320,800'/><path d='M1200,400 L780,490 L600,560 L340,800'/><path d='M0,640 L290,610 L510,700 L770,640 L1200,720'/><path d='M820,0 L770,210 L860,380 L800,610 L920,800'/><path d='M40,40 L1160,90'/><path d='M460,0 L500,360 L420,520 L520,760'/><path d='M0,300 L260,330 L390,260 L640,330'/><path d='M640,330 L780,420 L920,360 L1200,440'/><path d='M280,520 L380,640 L510,580 L640,700'/></g><g fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.45'><path d='M0,80 L1200,130'/><path d='M0,440 L1200,470'/><path d='M0,740 L1200,770'/><path d='M380,0 L405,800'/><path d='M920,0 L900,800'/></g><g fill='rgba(201,169,110,0.18)'><circle cx='380' cy='240' r='1.4'/><circle cx='620' cy='170' r='1.2'/><circle cx='880' cy='300' r='1.4'/><circle cx='200' cy='520' r='1.2'/><circle cx='600' cy='560' r='1.4'/><circle cx='770' cy='640' r='1.2'/><circle cx='860' cy='380' r='1.2'/><circle cx='500' cy='360' r='1.4'/><circle cx='510' cy='580' r='1.2'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backdrop-filter: blur(1.2px) saturate(1.05);
  -webkit-backdrop-filter: blur(1.2px) saturate(1.05);
}

/* keep announcement marquee, header, sticky elements above the glass */
html body > header,
html body .header-wrapper,
html body .arch-header,
html body .shopify-section-group-header-group { position: relative; z-index: 2; }

/* =================== END FIX 2026-05-22 (phase 2) =================== */

/* =====================================================================
   FIX 2026-05-22 (phase 2 v2) - broken-glass overlay via html::after
   Previous body::after attempt killed by older kill rules at lines 423/1227.
   html::after is unused in the codebase - safe target.
   ===================================================================== */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.22) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'><g fill='none' stroke='rgba(201,169,110,0.14)' stroke-width='0.7' stroke-linecap='round'><path d='M0,160 L380,240 L620,170 L880,300 L1200,250'/><path d='M180,0 L240,280 L200,520 L320,800'/><path d='M1200,400 L780,490 L600,560 L340,800'/><path d='M0,640 L290,610 L510,700 L770,640 L1200,720'/><path d='M820,0 L770,210 L860,380 L800,610 L920,800'/><path d='M40,40 L1160,90'/><path d='M460,0 L500,360 L420,520 L520,760'/><path d='M0,300 L260,330 L390,260 L640,330'/><path d='M640,330 L780,420 L920,360 L1200,440'/><path d='M280,520 L380,640 L510,580 L640,700'/></g><g fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.45'><path d='M0,80 L1200,130'/><path d='M0,440 L1200,470'/><path d='M0,740 L1200,770'/><path d='M380,0 L405,800'/><path d='M920,0 L900,800'/></g><g fill='rgba(201,169,110,0.18)'><circle cx='380' cy='240' r='1.4'/><circle cx='620' cy='170' r='1.2'/><circle cx='880' cy='300' r='1.4'/><circle cx='200' cy='520' r='1.2'/><circle cx='600' cy='560' r='1.4'/><circle cx='770' cy='640' r='1.2'/><circle cx='860' cy='380' r='1.2'/><circle cx='500' cy='360' r='1.4'/><circle cx='510' cy='580' r='1.2'/></g></svg>") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(1.2px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(1.2px) saturate(1.05) !important;
}

/* ============= END FIX 2026-05-22 (phase 2 v2) ============= */

/* TEST v8 - force z-index 10000 + use base64 SVG to bypass minifier mangling */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(255,0,0,0.15) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIxMDAiIHkyPSIxMDAiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjMiLz48bGluZSB4MT0iMTAwIiB5MT0iMCIgeDI9IjAiIHkyPSIxMDAiIHN0cm9rZT0ibGltZSIgc3Ryb2tlLXdpZHRoPSIzIi8+PC9zdmc+") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* FIX 2026-05-22 (phase 2 v9 FINAL) - broken-glass, base64 SVG to dodge minifier */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.30) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjUwLDI0MCwwLjc4KSIgc3Ryb2tlLXdpZHRoPSIyLjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciI+CjxwYXRoIGQ9Ik0wLDE2MCBMMjQwLDE0MCBMNDIwLDIyMCBMNTgwLDE0MCBMNzgwLDI2MCBMOTIwLDE3MCBMMTEwMCwyOTAgTDEyODAsMjAwIEwxNDAwLDI3MCIvPgo8cGF0aCBkPSJNMTYwLDAgTDI0MCwxNDAgTDE2MCwzNjAgTDI2MCw1MjAgTDE4MCw3MjAgTDI5MCw5MDAiLz4KPHBhdGggZD0iTTE0MDAsNDIwIEwxMTgwLDQ2MCBMOTgwLDQwMCBMNzgwLDUwMCBMNTgwLDQ0MCBMMzgwLDU0MCBMMTgwLDQ4MCBMMCw1ODAiLz4KPHBhdGggZD0iTTgyMCwwIEw3ODAsMTcwIEw4NjAsMzQwIEw3NDAsNTAwIEw4NDAsNjgwIEw3NjAsOTAwIi8+CjxwYXRoIGQ9Ik0wLDcyMCBMMjQwLDY4MCBMNDIwLDc2MCBMNjQwLDcwMCBMODQwLDc5MCBMMTA4MCw3MjAgTDE0MDAsODAwIi8+CjxwYXRoIGQ9Ik01NDAsMCBMNTgwLDI2MCBMNTAwLDQ0MCBMNjIwLDY0MCBMNTIwLDkwMCIvPgo8cGF0aCBkPSJNMCwzNjAgTDMyMCwzNDAgTDUwMCwyNjAgTDc0MCwzNjAgTDkyMCwyNjAgTDExODAsMzYwIEwxNDAwLDMwMCIvPgo8cGF0aCBkPSJNMjQwLDE0MCBMMzgwLDU0MCIvPgo8cGF0aCBkPSJNNTgwLDE0MCBMNTAwLDI2MCIvPgo8cGF0aCBkPSJNNzgwLDI2MCBMODYwLDM0MCBMNzgwLDUwMCIvPgo8cGF0aCBkPSJNOTIwLDE3MCBMOTgwLDQwMCIvPgo8cGF0aCBkPSJNMTEwMCwyOTAgTDkyMCwyNjAiLz4KPHBhdGggZD0iTTM4MCw1NDAgTDYyMCw2NDAiLz4KPHBhdGggZD0iTTYyMCw2NDAgTDc4MCw1MDAiLz4KPHBhdGggZD0iTTc0MCw1MDAgTDkyMCw2MjAiLz4KPHBhdGggZD0iTTU4MCw0NDAgTDYyMCw2NDAiLz4KPHBhdGggZD0iTTE4MCw0ODAgTDM4MCw1NDAiLz4KPHBhdGggZD0iTTc0MCwzNjAgTDc4MCw1MDAiLz4KPC9nPgo8ZyBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC40MikiIHN0cm9rZS13aWR0aD0iMC45Ij4KPHBhdGggZD0iTTI2MCwxNDAgTDMyMCwzNDAiLz4KPHBhdGggZD0iTTQyMCwyMTAgTDUwMCwyNjAiLz4KPHBhdGggZD0iTTU4MCwyNjAgTDc2MCwyNjAiLz4KPHBhdGggZD0iTTg2MCwzNDAgTDExMDAsMjkwIi8+CjxwYXRoIGQ9Ik01ODAsNDQwIEw3NDAsNTAwIi8+CjxwYXRoIGQ9Ik0zODAsNTQwIEw1MDAsNDQwIi8+CjxwYXRoIGQ9Ik00MjAsNjQwIEw1ODAsNTYwIi8+CjxwYXRoIGQ9Ik0xODAsNzIwIEw0MjAsNjQwIi8+CjxwYXRoIGQ9Ik04NDAsNjgwIEw5MjAsNjIwIi8+CjxwYXRoIGQ9Ik0wLDU4MCBMMTgwLDQ4MCIvPgo8cGF0aCBkPSJNMTE4MCw0NjAgTDExMDAsMjkwIi8+CjwvZz4KPGcgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzgpIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KPHBhdGggZD0iTTI0MCwxNDAgTDIxOCwxMDIgTTI0MCwxNDAgTDI3NCwxMjQgTTI0MCwxNDAgTDI2OCwxNjggTTI0MCwxNDAgTDIxMCwxNjgiLz4KPHBhdGggZD0iTTU4MCwxNDAgTDU2OCwxMDQgTTU4MCwxNDAgTDYxMiwxNDggTTU4MCwxNDAgTDU5OCwxNzQgTTU4MCwxNDAgTDU1OCwxNjYiLz4KPHBhdGggZD0iTTkyMCwxNzAgTDkwOCwxMzQgTTkyMCwxNzAgTDk0OCwxNjAgTTkyMCwxNzAgTDkzMiwxOTgiLz4KPHBhdGggZD0iTTc4MCw1MDAgTDgwOCw0NjggTTc4MCw1MDAgTDc1MCw0NzYgTTc4MCw1MDAgTDgxMCw1MjggTTc4MCw1MDAgTDc1NCw1MzAgTTc4MCw1MDAgTDc5Niw1MzgiLz4KPHBhdGggZD0iTTYyMCw2NDAgTDU5Niw2MDQgTTYyMCw2NDAgTDY1Niw2MzQgTTYyMCw2NDAgTDY0MCw2NzYgTTYyMCw2NDAgTDU4OCw2NjQiLz4KPHBhdGggZD0iTTM4MCw1NDAgTDM2MCw1MDggTTM4MCw1NDAgTDQxMiw1MzAgTTM4MCw1NDAgTDM5OCw1NzIiLz4KPHBhdGggZD0iTTExMDAsMjkwIEwxMDgwLDI1OCBNMTEwMCwyOTAgTDExMjgsMjgyIE0xMTAwLDI5MCBMMTExNiwzMTgiLz4KPC9nPgo8ZyBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDEpIj4KPGNpcmNsZSBjeD0iMjQwIiBjeT0iMTQwIiByPSIzIi8+CjxjaXJjbGUgY3g9IjU4MCIgY3k9IjE0MCIgcj0iMyIvPgo8Y2lyY2xlIGN4PSI5MjAiIGN5PSIxNzAiIHI9IjMiLz4KPGNpcmNsZSBjeD0iNzgwIiBjeT0iNTAwIiByPSIzLjQiLz4KPGNpcmNsZSBjeD0iNjIwIiBjeT0iNjQwIiByPSIzIi8+CjxjaXJjbGUgY3g9IjM4MCIgY3k9IjU0MCIgcj0iMi44Ii8+CjxjaXJjbGUgY3g9IjExMDAiIGN5PSIyOTAiIHI9IjIuOCIvPgo8Y2lyY2xlIGN4PSIxNjAiIGN5PSIzNjAiIHI9IjIuNCIvPgo8Y2lyY2xlIGN4PSI1MDAiIGN5PSIyNjAiIHI9IjIuNCIvPgo8Y2lyY2xlIGN4PSI4NjAiIGN5PSIzNDAiIHI9IjIuNCIvPgo8Y2lyY2xlIGN4PSI5ODAiIGN5PSI0MDAiIHI9IjIuNCIvPgo8L2c+Cjwvc3ZnPg==") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(1.4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(1.4px) saturate(1.05) !important;
}
/* ============= END FIX 2026-05-22 (phase 2 v9 FINAL) ============= */


/* TEST v10 - red/lime SVG at z:0 to check if z:0 hides the overlay */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(0,0,0,0) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIxMDAiIHkyPSIxMDAiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjMiLz48bGluZSB4MT0iMTAwIiB5MT0iMCIgeDI9IjAiIHkyPSIxMDAiIHN0cm9rZT0ibGltZSIgc3Ryb2tlLXdpZHRoPSIzIi8+PC9zdmc+") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* FIX 2026-05-22 v11 FINAL - simplified single-line SVG base64 broken glass */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.30) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuNzgiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0wLDE2MCBMMjQwLDE0MCBMNDIwLDIyMCBMNTgwLDE0MCBMNzgwLDI2MCBMOTIwLDE3MCBMMTEwMCwyOTAgTDEyODAsMjAwIEwxNDAwLDI3MCIvPjxwYXRoIGQ9Ik0xNjAsMCBMMjQwLDE0MCBMMTYwLDM2MCBMMjYwLDUyMCBMMTgwLDcyMCBMMjkwLDkwMCIvPjxwYXRoIGQ9Ik0xNDAwLDQyMCBMMTE4MCw0NjAgTDk4MCw0MDAgTDc4MCw1MDAgTDU4MCw0NDAgTDM4MCw1NDAgTDE4MCw0ODAgTDAsNTgwIi8+PHBhdGggZD0iTTgyMCwwIEw3ODAsMTcwIEw4NjAsMzQwIEw3NDAsNTAwIEw4NDAsNjgwIEw3NjAsOTAwIi8+PHBhdGggZD0iTTAsNzIwIEwyNDAsNjgwIEw0MjAsNzYwIEw2NDAsNzAwIEw4NDAsNzkwIEwxMDgwLDcyMCBMMTQwMCw4MDAiLz48cGF0aCBkPSJNNTQwLDAgTDU4MCwyNjAgTDUwMCw0NDAgTDYyMCw2NDAgTDUyMCw5MDAiLz48cGF0aCBkPSJNMCwzNjAgTDMyMCwzNDAgTDUwMCwyNjAgTDc0MCwzNjAgTDkyMCwyNjAgTDExODAsMzYwIEwxNDAwLDMwMCIvPjxwYXRoIGQ9Ik0yNDAsMTQwIEwzODAsNTQwIi8+PHBhdGggZD0iTTc4MCwyNjAgTDc4MCw1MDAiLz48cGF0aCBkPSJNMzgwLDU0MCBMNjIwLDY0MCBMNzgwLDUwMCIvPjxwYXRoIGQ9Ik01ODAsNDQwIEw2MjAsNjQwIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjQyIiBzdHJva2Utd2lkdGg9IjEiPjxwYXRoIGQ9Ik0yNjAsMTQwIEwzMjAsMzQwIi8+PHBhdGggZD0iTTQyMCwyMTAgTDUwMCwyNjAiLz48cGF0aCBkPSJNNTgwLDI2MCBMNzYwLDI2MCIvPjxwYXRoIGQ9Ik04NjAsMzQwIEwxMTAwLDI5MCIvPjxwYXRoIGQ9Ik01ODAsNDQwIEw3NDAsNTAwIi8+PHBhdGggZD0iTTM4MCw1NDAgTDUwMCw0NDAiLz48cGF0aCBkPSJNNDIwLDY0MCBMNTgwLDU2MCIvPjxwYXRoIGQ9Ik0xODAsNzIwIEw0MjAsNjQwIi8+PC9nPjxnIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjc4IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48cGF0aCBkPSJNMjQwLDE0MCBMMjE4LDEwMiBNMjQwLDE0MCBMMjc0LDEyNCBNMjQwLDE0MCBMMjY4LDE2OCBNMjQwLDE0MCBMMjEwLDE2OCIvPjxwYXRoIGQ9Ik01ODAsMTQwIEw1NjgsMTA0IE01ODAsMTQwIEw2MTIsMTQ4IE01ODAsMTQwIEw1OTgsMTc0Ii8+PHBhdGggZD0iTTkyMCwxNzAgTDkwOCwxMzQgTTkyMCwxNzAgTDk0OCwxNjAgTTkyMCwxNzAgTDkzMiwxOTgiLz48cGF0aCBkPSJNNzgwLDUwMCBMODA4LDQ2OCBNNzgwLDUwMCBMNzUwLDQ3NiBNNzgwLDUwMCBMODEwLDUyOCBNNzgwLDUwMCBMNzU0LDUzMCIvPjxwYXRoIGQ9Ik02MjAsNjQwIEw1OTYsNjA0IE02MjAsNjQwIEw2NTYsNjM0IE02MjAsNjQwIEw2NDAsNjc2IE02MjAsNjQwIEw1ODgsNjY0Ii8+PC9nPjxnIGZpbGw9IndoaXRlIj48Y2lyY2xlIGN4PSIyNDAiIGN5PSIxNDAiIHI9IjMiLz48Y2lyY2xlIGN4PSI1ODAiIGN5PSIxNDAiIHI9IjMiLz48Y2lyY2xlIGN4PSI5MjAiIGN5PSIxNzAiIHI9IjMiLz48Y2lyY2xlIGN4PSI3ODAiIGN5PSI1MDAiIHI9IjMuNCIvPjxjaXJjbGUgY3g9IjYyMCIgY3k9IjY0MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjM4MCIgY3k9IjU0MCIgcj0iMi44Ii8+PGNpcmNsZSBjeD0iMTEwMCIgY3k9IjI5MCIgcj0iMi44Ii8+PC9nPjwvc3ZnPg==") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(1.4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(1.4px) saturate(1.05) !important;
}


/* FIX 2026-05-22 v12 - architectural broken-glass texture (no spider-web) */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.26) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzIiIHN0cm9rZS13aWR0aD0iMC45IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48cGF0aCBkPSJNMCwxMjAgTDE4MCw5MCBMMzQwLDE0MCBMNTIwLDEwMCBMNzIwLDE2MCBMOTAwLDEyMCBMMTA4MCwxODAgTDEyNjAsMTQwIEwxNDAwLDIwMCIvPjxwYXRoIGQ9Ik0wLDI2MCBMMTYwLDI5MCBMMzIwLDI1MCBMNTAwLDMxMCBMNjgwLDI3MCBMODYwLDMzMCBMMTA0MCwyOTAgTDEyMjAsMzUwIEwxNDAwLDMxMCIvPjxwYXRoIGQ9Ik0wLDQyMCBMMTgwLDQ2MCBMMzgwLDQxMCBMNTYwLDQ3MCBMNzQwLDQzMCBMOTIwLDQ4MCBMMTEyMCw0NDAgTDEzMDAsNDkwIEwxNDAwLDQ2MCIvPjxwYXRoIGQ9Ik0wLDU4MCBMMjAwLDU0MCBMMzgwLDYxMCBMNTgwLDU2MCBMNzgwLDYzMCBMOTYwLDU4MCBMMTE2MCw2NTAgTDEzNDAsNjAwIEwxNDAwLDY0MCIvPjxwYXRoIGQ9Ik0wLDc0MCBMMTgwLDcyMCBMMzYwLDc3MCBMNTYwLDcxMCBMNzYwLDc4MCBMOTYwLDcyMCBMMTE4MCw3OTAgTDEzODAsNzQwIEwxNDAwLDc3MCIvPjxwYXRoIGQ9Ik0xODAsOTAgTDE2MCwyOTAgTDE4MCw0NjAgTDIwMCw1NDAgTDE4MCw3MjAgTDE4MCw5MDAiLz48cGF0aCBkPSJNMzQwLDE0MCBMMzIwLDI1MCBMMzgwLDQxMCBMMzgwLDYxMCBMMzYwLDc3MCBMMzgwLDkwMCIvPjxwYXRoIGQ9Ik01MjAsMTAwIEw1MDAsMzEwIEw1NjAsNDcwIEw1ODAsNTYwIEw1NjAsNzEwIEw1ODAsOTAwIi8+PHBhdGggZD0iTTcyMCwxNjAgTDY4MCwyNzAgTDc0MCw0MzAgTDc4MCw2MzAgTDc2MCw3ODAgTDc4MCw5MDAiLz48cGF0aCBkPSJNOTAwLDEyMCBMODYwLDMzMCBMOTIwLDQ4MCBMOTYwLDU4MCBMOTYwLDcyMCBMOTYwLDkwMCIvPjxwYXRoIGQ9Ik0xMDgwLDE4MCBMMTA0MCwyOTAgTDExMjAsNDQwIEwxMTYwLDY1MCBMMTE4MCw3OTAgTDExODAsOTAwIi8+PHBhdGggZD0iTTEyNjAsMTQwIEwxMjIwLDM1MCBMMTMwMCw0OTAgTDEzNDAsNjAwIEwxMzgwLDc0MCBMMTM4MCw5MDAiLz48cGF0aCBkPSJNMTgwLDkwIEwwLDAgTTM0MCwxNDAgTDMwMCwwIE01MjAsMTAwIEw1NDAsMCBNNzIwLDE2MCBMNzYwLDAgTTkwMCwxMjAgTDkyMCwwIE0xMDgwLDE4MCBMMTEwMCwwIE0xMjYwLDE0MCBMMTI4MCwwIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjE4IiBzdHJva2Utd2lkdGg9IjAuNTUiPjxwYXRoIGQ9Ik04MCwyMDAgTDI2MCwyMzAgTDI0MCw0MDAgTDEwMCw0MjAgTDgwLDIwMCBaIi8+PHBhdGggZD0iTTQyMCwxODAgTDYwMCwyMDAgTDU4MCwzODAgTDQwMCwzNjAgTDQyMCwxODAgWiIvPjxwYXRoIGQ9Ik03ODAsMjEwIEw5NjAsMjQwIEw5NDAsNDAwIEw3NjAsMzgwIEw3ODAsMjEwIFoiLz48cGF0aCBkPSJNMTEyMCwyMjAgTDEyODAsMjQwIEwxMzAwLDQyMCBMMTE0MCw0MDAgTDExMjAsMjIwIFoiLz48cGF0aCBkPSJNMTAwLDUwMCBMMjkwLDUyMCBMMjcwLDY5MCBMMTIwLDY3MCBMMTAwLDUwMCBaIi8+PHBhdGggZD0iTTQ2MCw1MDAgTDY0MCw1MTAgTDY2MCw2ODAgTDQ4MCw2OTAgTDQ2MCw1MDAgWiIvPjxwYXRoIGQ9Ik04MjAsNTIwIEwxMDAwLDU0MCBMOTgwLDcyMCBMODAwLDcwMCBMODIwLDUyMCBaIi8+PHBhdGggZD0iTTExNjAsNDkwIEwxMzQwLDUxMCBMMTM0MCw3MTAgTDExODAsNzAwIEwxMTYwLDQ5MCBaIi8+PHBhdGggZD0iTTI2MCwyMzAgTDI0MCw0MDAgTDEwMCw0MjAiLz48cGF0aCBkPSJNNjAwLDIwMCBMNTgwLDM4MCBMNDAwLDM2MCIvPjxwYXRoIGQ9Ik0yNjAsNDAwIEw0MjAsNDAwIEw0NjAsNTAwIEwyOTAsNTIwIi8+PHBhdGggZD0iTTU4MCwzODAgTDc2MCwzODAgTDgyMCw1MjAgTDY2MCw1MTAiLz48cGF0aCBkPSJNOTQwLDQwMCBMMTE0MCw0MDAgTDExNjAsNDkwIEw5ODAsNTQwIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjEwIiBzdHJva2Utd2lkdGg9IjAuNCI+PHBhdGggZD0iTTQwLDQwIEwxMDAsOTAgTDYwLDE4MCBMMTIwLDIxMCBMODAsMzAwIi8+PHBhdGggZD0iTTI2MCw1MCBMMzIwLDExMCBMMjkwLDE4MCBMMzUwLDIzMCIvPjxwYXRoIGQ9Ik01MDAsNTAgTDU2MCwxMDAgTDUzMCwxNzAgTDU4MCwyNDAiLz48cGF0aCBkPSJNNzcwLDQwIEw4MjAsOTAgTDgwMCwxNzAgTDg2MCwyMjAiLz48cGF0aCBkPSJNMTA0MCw1MCBMMTA5MCwxMTAgTDEwNzAsMTgwIi8+PHBhdGggZD0iTTEyODAsNDAgTDEzNDAsMTAwIEwxMzEwLDE4MCBMMTM3MCwyNTAiLz48cGF0aCBkPSJNNDAsNDQwIEwxMTAsNDkwIEw3MCw1ODAgTDEzMCw2MzAiLz48cGF0aCBkPSJNMjgwLDQ0MCBMMzQwLDUxMCBMMzIwLDYwMCBMMzkwLDY0MCIvPjxwYXRoIGQ9Ik01NDAsNDUwIEw2MDAsNTIwIEw1ODAsNjEwIEw2MzAsNjYwIi8+PHBhdGggZD0iTTgyMCw0NTAgTDg4MCw1MjAgTDg0MCw2MTAgTDkwMCw2NjAiLz48cGF0aCBkPSJNMTA4MCw0NTAgTDExNDAsNTIwIEwxMTEwLDYxMCBMMTE4MCw2NjAiLz48cGF0aCBkPSJNNDAsNzcwIEwxMDAsODIwIEw2MCw4ODAiLz48cGF0aCBkPSJNMzQwLDc5MCBMNDAwLDg0MCBMMzcwLDg5MCIvPjxwYXRoIGQ9Ik02MjAsNzkwIEw2OTAsODQwIEw2NjAsODkwIi8+PHBhdGggZD0iTTkwMCw4MDAgTDk2MCw4NTAgTDk0MCw4OTAiLz48cGF0aCBkPSJNMTE4MCw3OTAgTDEyNDAsODQwIEwxMjIwLDg5MCIvPjwvZz48L3N2Zz4=") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(2.2px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(2.2px) saturate(1.05) !important;
}


/* FIX 2026-05-22 v13 - gold-tone broken-glass, 3 depth layers, asymmetric */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.22) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjMyLDIwMCwxMzApIiBzdHJva2Utb3BhY2l0eT0iMC40OCIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIGQ9Ik0wLDE0MCBDMTYwLDgwIDMyMCwyMDAgNDYwLDEzMCBTNzIwLDkwIDg4MCwxNzAgUzExNDAsMjYwIDEyODAsMTgwIEwxNDAwLDIxMCIvPjxwYXRoIGQ9Ik0xMjAsMCBDMTUwLDE4MCA5MCwzNDAgMjAwLDUwMCBTMjgwLDcyMCAxODAsOTAwIi8+PHBhdGggZD0iTTgyMCwwIEM3ODAsMTYwIDg4MCwzMDAgNzQwLDQ1MCBTODMwLDY4MCA3NjAsOTAwIi8+PHBhdGggZD0iTTE0MDAsNTAwIEMxMjQwLDQ2MCAxMTAwLDU2MCA5NDAsNTAwIFM3MDAsNTgwIDU0MCw1MDAgUzMyMCw1NjAgMTAwLDUyMCBMMCw1NjAiLz48cGF0aCBkPSJNMCw3ODAgQzIwMCw3MjAgMzgwLDgyMCA1NjAsNzUwIFM4MjAsODIwIDEwMDAsNzYwIFMxMjQwLDgyMCAxNDAwLDc3MCIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMDEsMTY5LDExMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjMyIiBzdHJva2Utd2lkdGg9IjAuODUiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiPjxwYXRoIGQ9Ik04MCwyMDAgTDI2MCwxODAgTDI4MCwzMzAgTDEwMCwzNjAgWiIvPjxwYXRoIGQ9Ik0yODAsMzMwIEw0NzAsMjcwIEw1NDAsNDIwIEwzMjAsNDYwIFoiLz48cGF0aCBkPSJNNTQwLDQyMCBMNzQwLDM1MCBMODIwLDUwMCBMNTgwLDU2MCBaIi8+PHBhdGggZD0iTTgyMCw1MDAgTDEwMzAsNDQwIEwxMTIwLDU4MCBMOTAwLDY0MCBaIi8+PHBhdGggZD0iTTExMjAsNTgwIEwxMjgwLDUyMCBMMTM0MCw2ODAgTDExODAsNzMwIFoiLz48cGF0aCBkPSJNMjYwLDE4MCBMNDcwLDI3MCBMNjAwLDE0MCBMMzgwLDgwIFoiLz48cGF0aCBkPSJNNjAwLDE0MCBMODIwLDE4MCBMOTIwLDQwIEw3MjAsMCBMNjAwLDE0MCBaIi8+PHBhdGggZD0iTTkyMCwyMDAgTDExMDAsMTQwIEwxMjQwLDI2MCBMMTA4MCwzMjAgWiIvPjxwYXRoIGQ9Ik0xMDAsMzYwIEw4MCw1NDAgTDI0MCw1ODAgTDMyMCw0NjAgWiIvPjxwYXRoIGQ9Ik0yNDAsNTgwIEw0NTAsNTQwIEw1NjAsNjgwIEwzODAsNzQwIFoiLz48cGF0aCBkPSJNNTgwLDU2MCBMNzYwLDY0MCBMODQwLDc4MCBMNjQwLDgwMCBMNTYwLDY4MCBaIi8+PHBhdGggZD0iTTkwMCw2NDAgTDEwODAsNzIwIEwxMTQwLDg2MCBMOTYwLDgzMCBaIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIzMiwyMDAsMTMwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTgiIHN0cm9rZS13aWR0aD0iMC41Ij48cGF0aCBkPSJNNDAsNDAgTDEzMCw3MCBMODAsMTYwIEwxNzAsMjAwIi8+PHBhdGggZD0iTTM4MCwzMCBMNDYwLDkwIEw0MjAsMTgwIEw1MDAsMjQwIi8+PHBhdGggZD0iTTcwMCw0MCBMNzgwLDEwMCBMNzQwLDIwMCBMODIwLDI2MCIvPjxwYXRoIGQ9Ik0xMDYwLDUwIEwxMTQwLDExMCBMMTEwMCwyMTAiLz48cGF0aCBkPSJNMTI4MCwzMCBMMTM2MCw4MCBMMTMyMCwxNzAiLz48cGF0aCBkPSJNNjAsNDIwIEwxNjAsNDUwIEwxMjAsNTQwIEwyMTAsNTgwIi8+PHBhdGggZD0iTTM0MCw0NDAgTDQyMCw1MDAgTDM4MCw1OTAgTDQ2MCw2NDAiLz48cGF0aCBkPSJNNjIwLDQ2MCBMNzAwLDUyMCBMNjYwLDYxMCBMNzQwLDY3MCIvPjxwYXRoIGQ9Ik05NDAsNDgwIEwxMDIwLDU0MCBMOTgwLDYzMCBMMTA2MCw2OTAiLz48cGF0aCBkPSJNNDAsODIwIEwxMjAsODUwIEw4MCw4OTAiLz48cGF0aCBkPSJNMjgwLDgxMCBMMzYwLDg0MCBMMzMwLDg5MCIvPjxwYXRoIGQ9Ik01NDAsODMwIEw2MjAsODYwIEw2MDAsOTAwIi8+PHBhdGggZD0iTTgxMCw4MTAgTDg4MCw4NDAgTDg2MCw4OTAiLz48cGF0aCBkPSJNMTA4MCw4MjAgTDExNjAsODUwIEwxMTMwLDg5MCIvPjxwYXRoIGQ9Ik0xMzAwLDgwMCBMMTM3MCw4NDAgTDEzNTAsODkwIi8+PHBhdGggZD0iTTI1MCwyNjAgTDMwMCwzMTAgTTMxMCw1MjAgTDM1MCw1NjAgTTYyMCwzNjAgTDY4MCw0MDAgTTkwMCwzNDAgTDk1MCwzODAgTTExODAsNDYwIEwxMjMwLDQ5MCIvPjwvZz48L3N2Zz4=") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(2px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.08) !important;
}


/* FIX 2026-05-22 v15 - gold threads whisper-faint */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.22) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjMyLDIwMCwxMzApIiBzdHJva2Utb3BhY2l0eT0iMC4xMyIgc3Ryb2tlLXdpZHRoPSIxLjEiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIGQ9Ik0wLDE0MCBDMTYwLDgwIDMyMCwyMDAgNDYwLDEzMCBTNzIwLDkwIDg4MCwxNzAgUzExNDAsMjYwIDEyODAsMTgwIEwxNDAwLDIxMCIvPjxwYXRoIGQ9Ik0xMjAsMCBDMTUwLDE4MCA5MCwzNDAgMjAwLDUwMCBTMjgwLDcyMCAxODAsOTAwIi8+PHBhdGggZD0iTTgyMCwwIEM3ODAsMTYwIDg4MCwzMDAgNzQwLDQ1MCBTODMwLDY4MCA3NjAsOTAwIi8+PHBhdGggZD0iTTE0MDAsNTAwIEMxMjQwLDQ2MCAxMTAwLDU2MCA5NDAsNTAwIFM3MDAsNTgwIDU0MCw1MDAgUzMyMCw1NjAgMTAwLDUyMCBMMCw1NjAiLz48cGF0aCBkPSJNMCw3ODAgQzIwMCw3MjAgMzgwLDgyMCA1NjAsNzUwIFM4MjAsODIwIDEwMDAsNzYwIFMxMjQwLDgyMCAxNDAwLDc3MCIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMDEsMTY5LDExMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4IiBzdHJva2Utd2lkdGg9IjAuNzUiPjxwYXRoIGQ9Ik04MCwyMDAgTDI2MCwxODAgTDI4MCwzMzAgTDEwMCwzNjAgWiIvPjxwYXRoIGQ9Ik0yODAsMzMwIEw0NzAsMjcwIEw1NDAsNDIwIEwzMjAsNDYwIFoiLz48cGF0aCBkPSJNNTQwLDQyMCBMNzQwLDM1MCBMODIwLDUwMCBMNTgwLDU2MCBaIi8+PHBhdGggZD0iTTgyMCw1MDAgTDEwMzAsNDQwIEwxMTIwLDU4MCBMOTAwLDY0MCBaIi8+PHBhdGggZD0iTTExMjAsNTgwIEwxMjgwLDUyMCBMMTM0MCw2ODAgTDExODAsNzMwIFoiLz48cGF0aCBkPSJNMjYwLDE4MCBMNDcwLDI3MCBMNjAwLDE0MCBMMzgwLDgwIFoiLz48cGF0aCBkPSJNNjAwLDE0MCBMODIwLDE4MCBMOTIwLDQwIEw3MjAsMCBMNjAwLDE0MCBaIi8+PHBhdGggZD0iTTkyMCwyMDAgTDExMDAsMTQwIEwxMjQwLDI2MCBMMTA4MCwzMjAgWiIvPjxwYXRoIGQ9Ik0xMDAsMzYwIEw4MCw1NDAgTDI0MCw1ODAgTDMyMCw0NjAgWiIvPjxwYXRoIGQ9Ik0yNDAsNTgwIEw0NTAsNTQwIEw1NjAsNjgwIEwzODAsNzQwIFoiLz48cGF0aCBkPSJNNTgwLDU2MCBMNzYwLDY0MCBMODQwLDc4MCBMNjQwLDgwMCBMNTYwLDY4MCBaIi8+PHBhdGggZD0iTTkwMCw2NDAgTDEwODAsNzIwIEwxMTQwLDg2MCBMOTYwLDgzMCBaIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIzMiwyMDAsMTMwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDQiIHN0cm9rZS13aWR0aD0iMC40NSI+PHBhdGggZD0iTTQwLDQwIEwxMzAsNzAgTDgwLDE2MCBMMTcwLDIwMCIvPjxwYXRoIGQ9Ik0zODAsMzAgTDQ2MCw5MCBMNDIwLDE4MCBMNTAwLDI0MCIvPjxwYXRoIGQ9Ik03MDAsNDAgTDc4MCwxMDAgTDc0MCwyMDAgTDgyMCwyNjAiLz48cGF0aCBkPSJNMTA2MCw1MCBMMTE0MCwxMTAgTDExMDAsMjEwIi8+PHBhdGggZD0iTTEyODAsMzAgTDEzNjAsODAgTDEzMjAsMTcwIi8+PC9nPjwvc3ZnPg==") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(0.4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(0.4px) saturate(1.05) !important;
}

/* FIX 2026-05-22 v16 - product info matrix-bleed mask (Material/Dimensions labels) */
html body section[class*="product__info-container"] div[class*="product__description"] {
  background: rgba(10,9,8,0.85) !important;
  background-color: rgba(10,9,8,0.85) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  padding: 1.4rem 1.6rem !important;
  position: relative !important;
  z-index: 4 !important;
  border: 1px solid rgba(201,169,110,0.10) !important;
  isolation: isolate !important;
}


/* FIX 2026-05-22 v17 - product info wrapper stretching to full grid cell width */
html body .product__info-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding-left: 60px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
html body .product__info-container,
html body section.product__info-container {
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 989px){
  html body .product__info-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* FIX 2026-05-22 v17 - product info wrapper stretching to full grid cell width */
html body .product__info-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding-left: 60px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
html body .product__info-container,
html body section.product__info-container {
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 989px){
  html body .product__info-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* FIX 2026-05-22 v18 - Zaha Hadid parametric curves, no straight lines, fluid */
html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  background-color: rgba(10,9,8,0.22) !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMjMyLDIwMCwxMzApIiBzdHJva2Utb3BhY2l0eT0iMC4xNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTS01MCwxNDAgQzIyMCw4MCAzODAsMjYwIDU4MCwxODAgUzkwMCw4MCAxMTQwLDIyMCBTMTMyMCwxNDAgMTQ1MCwyMDAiLz48cGF0aCBkPSJNLTUwLDQyMCBDMTgwLDM2MCAzNDAsNTIwIDU0MCw0NDAgUzg0MCwzNjAgMTA4MCw1MDAgUzEzMDAsNDIwIDE0NTAsNDgwIi8+PHBhdGggZD0iTS01MCw2ODAgQzIwMCw2MjAgMzYwLDc4MCA1ODAsNzAwIFM4ODAsNjIwIDExMDAsNzYwIFMxMzIwLDY4MCAxNDUwLDc0MCIvPjxwYXRoIGQ9Ik0xMDAsLTUwIEMxNDAsMTgwIDYwLDM2MCAxODAsNTIwIFMyNjAsNzIwIDE0MCw5NTAiLz48cGF0aCBkPSJNNzAwLC01MCBDNjYwLDIwMCA3NjAsNDAwIDY2MCw1ODAgUzcyMCw4MDAgNjIwLDk1MCIvPjxwYXRoIGQ9Ik0xMjgwLC01MCBDMTI0MCwxODAgMTMyMCwzNjAgMTI2MCw1NDAgUzEzMDAsNzYwIDEyNDAsOTUwIi8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiKDIwMSwxNjksMTEwKSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDgiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0tNTAsMjYwIEMxODAsMjAwIDM0MCwzNDAgNTIwLDI4MCBTODIwLDIwMCAxMDQwLDM0MCBTMTI4MCwyNjAgMTQ1MCwzMjAiLz48cGF0aCBkPSJNLTUwLDU0MCBDMjAwLDQ4MCAzODAsNjIwIDU4MCw1NjAgUzg4MCw0ODAgMTEwMCw2MjAgUzEzMjAsNTQwIDE0NTAsNjAwIi8+PHBhdGggZD0iTS01MCw4MjAgQzE4MCw3NjAgMzQwLDg4MCA1NDAsODIwIFM4NDAsNzYwIDEwODAsODQwIFMxMzIwLDgyMCAxNDUwLDg2MCIvPjxwYXRoIGQ9Ik0zNDAsLTUwIEMzMDAsMTgwIDM4MCwzNjAgMzIwLDUyMCBTMzgwLDcyMCAyODAsOTUwIi8+PHBhdGggZD0iTTkwMCwtNTAgQzk0MCwyMDAgODgwLDQwMCA5ODAsNTgwIFM5NDAsODAwIDEwMjAsOTUwIi8+PHBhdGggZD0iTTEwODAsLTUwIEMxMDYwLDIwMCAxMTIwLDQwMCAxMDYwLDU4MCBTMTEwMCw4MDAgMTA0MCw5NTAiLz48cGF0aCBkPSJNLTUwLDQwIEMzMDAsMTYwIDIwMCwzNjAgNDgwLDQ0MCBTNzIwLDUyMCA5MDAsMzYwIFMxMTgwLDIwMCAxNDUwLDMwMCIvPjxwYXRoIGQ9Ik0tNTAsOTAwIEMzMDAsNzQwIDIwMCw1NDAgNDgwLDQ2MCBTNzIwLDM4MCA5MDAsNTQwIFMxMTgwLDcwMCAxNDUwLDYwMCIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9InJnYigyMzIsMjAwLDEzMCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA0IiBzdHJva2Utd2lkdGg9IjAuNCI+PHBhdGggZD0iTS01MCw4MCBDNDAwLDQwIDYwMCwxMjAgMTAwMCw2MCBTMTQ1MCwxMDAgMTQ1MCw0MCIvPjxwYXRoIGQ9Ik0tNTAsMzYwIEM0MDAsMzAwIDYwMCw0MjAgMTAwMCwzNDAgUzE0NTAsNDAwIDE0NTAsMzYwIi8+PHBhdGggZD0iTS01MCw2MDAgQzQwMCw1NDAgNjAwLDY4MCAxMDAwLDYwMCBTMTQ1MCw2ODAgMTQ1MCw2MjAiLz48cGF0aCBkPSJNLTUwLDg2MCBDNDAwLDgwMCA2MDAsOTAwIDEwMDAsODYwIFMxNDUwLDg4MCAxNDUwLDg0MCIvPjxwYXRoIGQ9Ik0yMDAsLTUwIEMxNjAsMzAwIDI0MCw1MDAgMTgwLDgwMCBTMjIwLDk1MCAxODAsOTUwIi8+PHBhdGggZD0iTTUwMCwtNTAgQzQ2MCwzMDAgNTQwLDUwMCA0ODAsODAwIFM1MjAsOTUwIDQ4MCw5NTAiLz48cGF0aCBkPSJNNzgwLC01MCBDNzQwLDMwMCA4MjAsNTAwIDc2MCw4MDAgUzgwMCw5NTAgNzYwLDk1MCIvPjxwYXRoIGQ9Ik0xMTgwLC01MCBDMTE0MCwzMDAgMTIyMCw1MDAgMTE2MCw4MDAgUzEyMDAsOTUwIDExNjAsOTUwIi8+PC9nPjwvc3ZnPg==") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(0.4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(0.4px) saturate(1.05) !important;
}



/* FIX 2026-05-22 v19 - related-products grid + PDP media gallery slider */
/* Recommendations: force proper grid + reasonable card width */
html body product-recommendations .grid.product-grid,
html body .related-products .grid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}
html body product-recommendations .grid.product-grid > .grid__item,
html body .related-products .grid.product-grid > .grid__item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 989px) {
  html body product-recommendations .grid.product-grid,
  html body .related-products .grid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* If only one recommended product, center it and constrain width */
html body product-recommendations .grid.product-grid:has(> .grid__item:only-child) > .grid__item,
html body .related-products .grid.product-grid:has(> .grid__item:only-child) > .grid__item {
  max-width: 320px !important;
  margin: 0 auto !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

/* PDP media gallery: collapse stacked vertical 6-image column to single visible image + thumbnail strip */
html body .product__media-list.slider {
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  max-height: 620px !important;
}
html body .product__media-list .product__media-item:not(.is-active) {
  display: none !important;
}
html body .product__media-list .product__media-item.is-active {
  display: block !important;
  width: 100% !important;
}
/* If theme thumbnails exist, ensure they remain functional */
html body .thumbnail-list,
html body .product__thumbnails {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;


/* FIX 2026-05-22 v19 - related-products grid + PDP media gallery slider */
/* Recommendations: force proper grid + reasonable card width */
html body product-recommendations .grid.product-grid,
html body .related-products .grid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}
html body product-recommendations .grid.product-grid > .grid__item,
html body .related-products .grid.product-grid > .grid__item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 989px) {
  html body product-recommendations .grid.product-grid,
  html body .related-products .grid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* If only one recommended product, center it and constrain width */
html body product-recommendations .grid.product-grid:has(> .grid__item:only-child) > .grid__item,
html body .related-products .grid.product-grid:has(> .grid__item:only-child) > .grid__item {
  max-width: 320px !important;
  margin: 0 auto !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

/* PDP media gallery: collapse stacked vertical 6-image column to single visible image + thumbnail strip */
html body .product__media-list.slider {
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  max-height: 620px !important;
}
html body .product__media-list .product__media-item:not(.is-active) {
  display: none !important;
}
html body .product__media-list .product__media-item.is-active {
  display: block !important;
  width: 100% !important;
}
/* If theme thumbnails exist, ensure they remain functional */
html body .thumbnail-list,
html body .product__thumbnails {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

}


/* FIX 2026-05-22 v20 - image zoom (Studio Lens + product cards) + marquee animation play state */
/* Studio Lens hero image: show full image, no aggressive zoom-crop */
html body #shopify-section-template--27925357035902__image_with_text_DDtyTr img,
html body #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media img,
html body #shopify-section-template--27925357035902__image_with_text_DDtyTr picture img {
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(10,9,8,0.5) !important;
}

/* New to the Studio product cards: less aggressive zoom */
html body #shopify-section-template--27925357035902__featured_collection1 .card img,
html body #shopify-section-template--27925357035902__featured_collection1 .card__media img,
html body #shopify-section-template--27925357035902__featured_collection1 .card-wrapper img,
html body #shopify-section-template--27925357035902__featured_collection1 picture img {
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(245,234,212,0.03) !important;
}

/* Marquee scroll animation - force running state */
html body .unique-announcement-bar-v1 .scroll-content,
html body .unique-announcement-wrapper-v1 .scroll-content,
html body .scroll-content {
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}
html body .unique-announcement-bar-v1 .scroll-content:hover,
html body .unique-announcement-wrapper-v1 .scroll-content:hover {
  animation-play-state: running !important;
}
/* If scroll-content has no keyframes assigned, give it a slow horizontal scroll */
@keyframes archMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html body .unique-announcement-bar-v1 .scroll-content {
  animation: archMarqueeScroll 45s linear infinite !important;
  -webkit-animation: archMarqueeScroll 45s linear infinite !important;
  will-change: transform !important;
  white-space: nowrap !important;
}

/* FIX 2026-05-22 v21 - PDP cleanup pass: mojibake bullets, trust strip, footer signal, newsletter arrow */

/* 1. Kill mojibake bullet \2022  on product description list items (was meant to be U+2022 •) */
html body .product__info-container .product__description.rte li::before,
html body .product__info-container .product__description.rte ul li::before,
html body .product__description.rte li::before,
html body .product__info-container li::before {
  content: "" !important;
  display: none !important;
}
html body .product__info-container .product__description.rte ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html body .product__info-container .product__description.rte li {
  padding-left: 0 !important;
  margin-bottom: 10px !important;
  list-style: none !important;
}

/* 2. Hide the fixed-time "5-10 Day Delivery" trust strip (delivery varies, B2B bespoke) */
html body .arch-trust-label,
html body .arch-trust-strip,
html body [class*="arch-trust"]:not([class*="container"]),
html body .product-features-bar,
html body [class*="feature-grid"]:has([class*="delivery"]) {
  display: none !important;
}

/* 3. Hide Customer Reviews app block inside product info (not the section itself) */
html body .product__info-container .shopify-block.shopify-app-block:has([class*="review"]),
html body .product__info-container [class*="judgeme"],
html body .product__info-container [class*="jdgm"],
html body .product__info-container [id*="review"]:not(.product) {
  display: none !important;
}

/* 4. Footer signal newsletter form - remove entirely */
html body footer form.arch-news-field,
html body footer .arch-news-field,
html body .arch-footer form,
html body .arch-footer__signal,
html body footer [class*="signal"]:has(input[type="email"]),
html body footer [class*="signal"]:has(input) {
  display: none !important;
}
/* Hide the "// SHOP" label + tagline that accompanied that form */
html body .arch-footer__signal-label,
html body .arch-footer__signal-tagline,
html body .arch-footer [class*="signal-"] {
  display: none !important;
}

/* 5. Newsletter "GET THE ROOM EDIT" arrow - ensure visible on gold button */
html body .newsletter-form__button.field__button,
html body .newsletter-form__button {
  color: rgb(10,9,8) !important;
}
html body .newsletter-form__button svg,
html body .newsletter-form__button svg.icon-arrow,
html body .newsletter-form__button .icon-arrow {
  stroke: rgb(10,9,8) !important;
  fill: rgb(10,9,8) !important;
  color: rgb(10,9,8) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: 1.8rem !important;
  height: 1.4rem !important;
}
html body .newsletter-form__button svg path,
html body .newsletter-form__button svg.icon-arrow path {
  fill: rgb(10,9,8) !important;
  stroke: rgb(10,9,8) !important;
}

/* 6. Reinforce product description backdrop so ghost-content never bleeds through */
html body section[class*="product__info-container"] div[class*="product__description"] {
  background: rgba(10,9,8,0.92) !important;
  background-color: rgba(10,9,8,0.92) !important;
  isolation: isolate !important;
  z-index: 5 !important;
}


/* FIX 2026-05-22 v23 - product card sold-out/unavailable badges (were invisible: bg transparent + bottom:-27px) */
html body .card-wrapper,
html body .card {
  position: relative !important;
  overflow: visible !important;
}
html body .card__badge,
html body .card .badge,
html body .card-wrapper .badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(10,9,8,0.88) !important;
  background-color: rgba(10,9,8,0.88) !important;
  color: rgb(201,169,110) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(201,169,110,0.40) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  line-height: 1.2 !important;
  border-radius: 0 !important;
}
/* Reword "Sold out" via CSS pseudo replace - hide native text, inject "Back in stock soon" */
html body .card__badge.badge--bottom-left:not(:empty),
html body .card .badge:not(:empty) {
  font-size: 0 !important;
}
html body .card__badge.badge--bottom-left::after,
html body .card .badge::after {
  content: "IN STOCK" !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
}


/* FIX 2026-05-22 v24 - kill bottom:-27px on card badges with inset shorthand override */
html body .card__badge,
html body .card .badge,
html body .card-wrapper .badge,
html body .card-information .badge,
html body .card .card__content .card__badge {
  inset: 12px auto auto 12px !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
/* Force text content replacement via JS won't work in CSS - just make existing text visible */
html body .card__badge {
  background: rgba(10,9,8,0.92) !important;
  color: rgb(201,169,110) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(201,169,110,0.45) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html:not(#x) body:not(#x) main .card-wrapper .card__badge{position:absolute !important;top:12px !important;left:12px !important;right:auto !important;bottom:auto !important;z-index:50 !important;}
html:not(#x) body:not(#x) main .card-wrapper .card__badge > span{color:rgb(201,169,110) !important;background:rgba(10,9,8,.92) !important;font-size:9px !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.22em !important;padding:6px 10px !important;border:1px solid rgba(201,169,110,.45) !important;text-transform:uppercase !important;display:inline-block !important;}
html:not(#x) body:not(#x) main .card-wrapper .card__badge,html:not(#x) body:not(#x) main .card-wrapper .card__badge > span{z-index:9999 !important;}
html:not(#x) body:not(#x) .card__inner .card__media,html:not(#x) body:not(#x) .card__inner .media{position:relative !important;z-index:1 !important;}html:not(#x) body:not(#x) .card__inner .card__content{position:relative !important;z-index:5 !important;}html:not(#x) body:not(#x) .card__inner .card__content .card__badge{z-index:10 !important;}
html body .arch-hero__telemetry > span{display:none !important;}
html body .arch-hero__telemetry{display:block !important;overflow:hidden !important;position:relative !important;white-space:nowrap !important;width:100% !important;max-width:100% !important;height:32px !important;line-height:32px !important;border-top:1px solid rgba(201,169,110,.20) !important;border-bottom:1px solid rgba(201,169,110,.20) !important;padding:0 !important;background:rgba(10,9,8,.55) !important;}

html body .arch-hero__telemetry::before{content:'\25CF  LIVE  \B7  [14:23:07] LONDON-01 PING 12MS  \B7  NODE OPERATIONAL  \B7  [14:23:12] NEW MEMBER JOIN  \B7  ANONYMIZED  \B7  LONDON SE1  \B7  [14:23:18] OAK CONSOLE  \B7  STOCK LOW  \B7  [14:23:23] FOUNDER REVIEW  \B7  03 PIECES PENDING  \B7  [14:23:30] CATALOGUE SYNC OK  \B7  4,300 ITEMS LIVE  \B7  [14:23:34] COMMISSION INTAKE  \B7  02 NEW BRIEFS  \B7  [14:23:41] TRADE INQUIRY  \B7  MAYFAIR  \B7  [14:23:47] ORDER DISPATCHED  \B7  NW3  \B7  5-PIECE EDIT  \B7  [14:23:54] SHIPPING WINDOW  \B7  5-28 DAYS  \B7  BESPOKE  \B7  [14:24:01] EARLY ACCESS  \B7  142 MEMBERS  \B7  [14:24:09] BACKBONE NOMINAL  \B7  [14:24:17] EST. 2022  \B7  UK CH #14635926  \B7  [14:24:24] LAT 51.5074\B0 N  \B7  LONG 0.1278\B0 W  \B7  GMT+0  \B7  [14:24:31] FOUNDER ONLINE  \B7  STUDIO  \B7  [14:24:38] NEW PIECE LISTED  \B7  ARCHALIGN  \B7  BACK SOON  \B7  [14:24:46] ATMOSPHERE LIGHTING  \B7  NEW DROP  \B7  [14:24:53] SHOP  \B7  NEXT 02 DAYS  \B7  [14:25:00] VAULT  \B7  92% CALIBRATED  \B7  ' !important;display:inline-block !important;animation:archTelemetryScroll 110s linear infinite !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;font-size:10.5px !important;letter-spacing:.14em !important;padding-left:100% !important;text-transform:uppercase !important;font-weight:500 !important;will-change:transform !important;}
@keyframes archTelemetryScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
html:not(#z) body:not(#z) main .card-wrapper .card__badge{display:inline-block !important;width:auto !important;max-width:200px !important;font-size:0 !important;line-height:1 !important;border:1px solid rgba(201,169,110,.50) !important;background:rgba(10,9,8,.92) !important;padding:0 !important;}
html:not(#z) body:not(#z) main .card-wrapper .card__badge > *{display:none !important;}
html:not(#z) body:not(#z) main .card-wrapper .card__badge::after{content:'IN STOCK' !important;display:inline-block !important;font-size:9px !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.22em !important;text-transform:uppercase !important;padding:6px 10px !important;line-height:1.2 !important;white-space:nowrap !important;}
html body footer .arch-news,html body footer .arch-news-head,html body .arch-footer .arch-news,html body .arch-footer__signal{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;overflow:hidden !important;}
html:not(#z) body:not(#z) .card-wrapper .card__badge > span,html:not(#z) body:not(#z) .card-wrapper .card__badge .badge,html:not(#z) body:not(#z) .card-wrapper .card__badge > *:not(:empty){font-size:0 !important;color:transparent !important;width:0 !important;height:0 !important;padding:0 !important;border:0 !important;background:transparent !important;line-height:0 !important;overflow:hidden !important;position:absolute !important;clip:rect(0,0,0,0) !important;} /* FIX 2026-05-22C */ html body .card-wrapper .card__inner.ratio,html body .grid__item .card__inner.ratio{padding-bottom:0 !important;height:auto !important;} html body .card-wrapper .card__media,html body .grid__item .card__media{position:relative !important;height:auto !important;width:100% !important;aspect-ratio:4/5 !important;max-height:none !important;padding-bottom:0 !important;display:block !important;} /* FIX 2026-05-22L: visible UI cleanup */ html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__media img{transform:scale(1.06) !important;} html:not(#z) body:not(#z) [id*="image_with_text_DDtyTr"] img{object-position:center 35% !important;object-fit:contain !important;background:rgba(0,0,0,.2) !important;} html:not(#z) body:not(#z) facet-filters-form details summary,html:not(#z) body:not(#z) .mobile-facets__open,html:not(#z) body:not(#z) facet-filters-form select,html:not(#z) body:not(#z) .facet-filters__field select{background:rgba(201,169,110,.08) !important;border:1px solid rgba(201,169,110,.4) !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.14em !important;text-transform:uppercase !important;font-size:11px !important;padding:10px 16px !important;border-radius:2px !important;appearance:none !important;} html:not(#z) body:not(#z) .facets__display,html:not(#z) body:not(#z) .facets-vertical-form,html:not(#z) body:not(#z) .facets{background:rgb(20,17,13) !important;border:1px solid rgba(201,169,110,.32) !important;color:rgb(237,231,217) !important;} html:not(#z) body:not(#z) .facet-checkbox,html:not(#z) body:not(#z) .facets__heading,html:not(#z) body:not(#z) .facets__price{font-family:'JetBrains Mono',monospace !important;color:rgba(237,231,217,.9) !important;letter-spacing:.06em !important;font-size:11px !important;text-transform:uppercase !important;} html:not(#z) body:not(#z) input[type=checkbox]{accent-color:rgb(201,169,110) !important;} html:not(#z) body:not(#z) select.select__select,html:not(#z) body:not(#z) .product-form__input select{background:rgba(201,169,110,.05) !important;border:1px solid rgba(201,169,110,.3) !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.08em !important;padding:14px 36px 14px 16px !important;appearance:none !important;border-radius:2px !important;} html:not(#z) body:not(#z) .mega-menu__content,html:not(#z) body:not(#z) .header__submenu,html:not(#z) body:not(#z) .header__inline-menu .list-menu{background:rgb(10,9,8) !important;z-index:200 !important;border:1px solid rgba(201,169,110,.3) !important;} /* FIX 2026-05-22K: hide duplicate social icons */ html:not(#z) body:not(#z) .arch-social a:nth-of-type(6),html:not(#z) body:not(#z) .arch-social a:nth-of-type(7),html:not(#z) body:not(#z) .arch-social a:nth-of-type(8){display:none !important;} /* FIX 2026-05-22J: newsletter submit arrow */ html:not(#z) body:not(#z) #Subscribe,html:not(#z) body:not(#z) .newsletter-form__button{display:flex !important;align-items:center !important;justify-content:center !important;} html:not(#z) body:not(#z) #Subscribe svg,html:not(#z) body:not(#z) .newsletter-form__button svg.icon-arrow{width:16px !important;height:12px !important;flex:0 0 auto !important;} html:not(#z) body:not(#z) #Subscribe svg path,html:not(#z) body:not(#z) .newsletter-form__button svg.icon-arrow path{fill:rgb(10,9,8) !important;stroke:rgb(10,9,8) !important;} /* FIX 2026-05-22I: bespoke badge — INTAKE OPEN for services */ html:not(#z) body:not(#z) .card-wrapper:has(a[href*="bespoke"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="-service-"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="-service"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="growth-system"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="aiethos"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="guidelines"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="floor-plan"]) .card__badge::after{content:'AVAILABLE  ·  INTAKE OPEN' !important;} /* FIX 2026-05-22H: ticket fixes — badge static + counter() singular */ html:not(#z) body:not(#z) main .card-wrapper.product-card-wrapper .card .card__content .card__badge,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card .card__content .card__badge{position:static !important;transform:none !important;display:block !important;width:calc(100% + 36px) !important;margin:14px -18px 0 !important;text-align:center !important;background:rgba(201,169,110,.08) !important;border:0 !important;border-top:1px dashed rgba(201,169,110,.4) !important;padding:10px 12px !important;z-index:1 !important;border-radius:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__information::before{content:'„– ' counter(ticket-no,decimal-leading-zero) '  ·  ARCHALIGN  ·  LON' !important;} /* FIX 2026-05-22G: arcade ticket card design */ main,.product-grid,.grid--3-col-tablet,.grid--4-col-desktop{counter-reset:ticket-no !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper{counter-increment:ticket-no;position:relative !important;background:linear-gradient(180deg,rgba(245,234,212,.045),rgba(245,234,212,.015)) !important;border:1px solid rgba(201,169,110,.32) !important;border-radius:3px !important;overflow:visible !important;isolation:isolate;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper:hover{border-color:rgba(201,169,110,.55) !important;transform:translateY(-2px) !important;box-shadow:0 8px 24px -8px rgba(201,169,110,.18) !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::before,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::after{content:'' !important;position:absolute !important;width:16px;height:16px;border-radius:50%;background:rgb(10,9,8);top:calc(100% * 0.61 - 8px);z-index:10;border:1px solid rgba(201,169,110,.32);pointer-events:none;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::before{left:-9px;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::after{right:-9px;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__inner{border-bottom:1px dashed rgba(201,169,110,.4) !important;background:rgba(0,0,0,.18) !important;margin:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card .card__content{padding:16px 18px 0 !important;background:transparent !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__information::before{content:'„– ' counters(ticket-no,'',decimal-leading-zero) '  ·  ARCHALIGN  ·  LON';display:block !important;font-family:'JetBrains Mono',monospace !important;font-size:8px !important;letter-spacing:0.28em !important;color:rgba(201,169,110,.55) !important;text-transform:uppercase !important;margin-bottom:8px !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__heading,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__heading a{font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:0.08em !important;text-transform:uppercase !important;color:rgba(237,231,217,.95) !important;font-weight:500 !important;line-height:1.4 !important;margin:0 !important;word-break:break-word !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .price,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .price-item{font-family:'JetBrains Mono',monospace !important;font-size:13px !important;font-weight:700 !important;color:rgb(201,169,110) !important;letter-spacing:0.04em !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__badge{position:static !important;transform:none !important;display:block !important;width:calc(100% + 36px) !important;margin:14px -18px 0 !important;text-align:center !important;background:rgba(201,169,110,.08) !important;border:0 !important;border-top:1px dashed rgba(201,169,110,.4) !important;padding:10px 12px !important;font-size:0 !important;border-radius:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__badge::after{font-family:'JetBrains Mono',monospace !important;font-size:9px !important;letter-spacing:0.24em !important;color:rgb(201,169,110) !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__inner .card__content{display:none !important;} /* FIX 2026-05-22F: restore product page slider — undo display:none on inactive slides */ html:not(#z) body:not(#z) .product__media-list .product__media-item:not(.is-active),html:not(#z) body:not(#z) .product .product__media-list .product__media-item:not(.is-active){display:block !important;} /* FIX 2026-05-22E: hide duplicate product-page accordion + empty Judge.me reviews widget */ html:not(#z) body:not(#z) .product__accordion,html:not(#z) body:not(#z) #judgeme_product_reviews,html:not(#z) body:not(#z) .jdgm-widget,html:not(#z) body:not(#z) .jdgm-rev-widg{display:none !important;} /* FIX 2026-05-22D: badge overlay on image */ html:not(#z) body:not(#z) .card__badge:has([id^="NoMediaStandardBadge"]),html:not(#z) body:not(#z) .card-wrapper .card__badge:has([id^="NoMediaStandardBadge"]){display:none !important;} html body .card-wrapper{position:relative !important;} html body .card-wrapper .card__badge,html:not(#z) body:not(#z) .card .card__content .card__badge,html:not(#z) body:not(#z) .card-wrapper .card__badge,html:not(#z) body:not(#z) main .card-wrapper .card__badge{z-index:20 !important;transform:translateY(calc(-100% - 220px)) !important;} @media (min-width:750px){html body .card-wrapper .card__badge{transform:translateY(calc(-100% - 260px)) !important;}} /* FIX 2026-05-22B: product card image collapse */ html body .card-wrapper .card__media .media,html body .grid__item .card__media .media{position:absolute !important;inset:0 !important;height:100% !important;width:100% !important;padding-bottom:0 !important;} html body .card-wrapper .card__media img,html body .grid__item .card__media img{position:absolute !important;inset:0 !important;height:100% !important;width:100% !important;object-fit:cover !important;object-position:center !important;} /* FIX 2026-05-22C */ html body .card-wrapper .card__inner.ratio,html body .grid__item .card__inner.ratio{padding-bottom:0 !important;height:auto !important;} html body .card-wrapper .card__media,html body .grid__item .card__media{position:relative !important;height:auto !important;width:100% !important;aspect-ratio:4/5 !important;max-height:none !important;padding-bottom:0 !important;display:block !important;} /* FIX 2026-05-22L: visible UI cleanup */ html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__media img{transform:scale(1.06) !important;} html:not(#z) body:not(#z) [id*="image_with_text_DDtyTr"] img{object-position:center 35% !important;object-fit:contain !important;background:rgba(0,0,0,.2) !important;} html:not(#z) body:not(#z) facet-filters-form details summary,html:not(#z) body:not(#z) .mobile-facets__open,html:not(#z) body:not(#z) facet-filters-form select,html:not(#z) body:not(#z) .facet-filters__field select{background:rgba(201,169,110,.08) !important;border:1px solid rgba(201,169,110,.4) !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.14em !important;text-transform:uppercase !important;font-size:11px !important;padding:10px 16px !important;border-radius:2px !important;appearance:none !important;} html:not(#z) body:not(#z) .facets__display,html:not(#z) body:not(#z) .facets-vertical-form,html:not(#z) body:not(#z) .facets{background:rgb(20,17,13) !important;border:1px solid rgba(201,169,110,.32) !important;color:rgb(237,231,217) !important;} html:not(#z) body:not(#z) .facet-checkbox,html:not(#z) body:not(#z) .facets__heading,html:not(#z) body:not(#z) .facets__price{font-family:'JetBrains Mono',monospace !important;color:rgba(237,231,217,.9) !important;letter-spacing:.06em !important;font-size:11px !important;text-transform:uppercase !important;} html:not(#z) body:not(#z) input[type=checkbox]{accent-color:rgb(201,169,110) !important;} html:not(#z) body:not(#z) select.select__select,html:not(#z) body:not(#z) .product-form__input select{background:rgba(201,169,110,.05) !important;border:1px solid rgba(201,169,110,.3) !important;color:rgb(201,169,110) !important;font-family:'JetBrains Mono',monospace !important;letter-spacing:.08em !important;padding:14px 36px 14px 16px !important;appearance:none !important;border-radius:2px !important;} html:not(#z) body:not(#z) .mega-menu__content,html:not(#z) body:not(#z) .header__submenu,html:not(#z) body:not(#z) .header__inline-menu .list-menu{background:rgb(10,9,8) !important;z-index:200 !important;border:1px solid rgba(201,169,110,.3) !important;} /* FIX 2026-05-22K: hide duplicate social icons */ html:not(#z) body:not(#z) .arch-social a:nth-of-type(6),html:not(#z) body:not(#z) .arch-social a:nth-of-type(7),html:not(#z) body:not(#z) .arch-social a:nth-of-type(8){display:none !important;} /* FIX 2026-05-22J: newsletter submit arrow */ html:not(#z) body:not(#z) #Subscribe,html:not(#z) body:not(#z) .newsletter-form__button{display:flex !important;align-items:center !important;justify-content:center !important;} html:not(#z) body:not(#z) #Subscribe svg,html:not(#z) body:not(#z) .newsletter-form__button svg.icon-arrow{width:16px !important;height:12px !important;flex:0 0 auto !important;} html:not(#z) body:not(#z) #Subscribe svg path,html:not(#z) body:not(#z) .newsletter-form__button svg.icon-arrow path{fill:rgb(10,9,8) !important;stroke:rgb(10,9,8) !important;} /* FIX 2026-05-22I: bespoke badge — INTAKE OPEN for services */ html:not(#z) body:not(#z) .card-wrapper:has(a[href*="bespoke"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="-service-"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="-service"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="growth-system"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="aiethos"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="guidelines"]) .card__badge::after,html:not(#z) body:not(#z) .card-wrapper:has(a[href*="floor-plan"]) .card__badge::after{content:'AVAILABLE  ·  INTAKE OPEN' !important;} /* FIX 2026-05-22H: ticket fixes — badge static + counter() singular */ html:not(#z) body:not(#z) main .card-wrapper.product-card-wrapper .card .card__content .card__badge,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card .card__content .card__badge{position:static !important;transform:none !important;display:block !important;width:calc(100% + 36px) !important;margin:14px -18px 0 !important;text-align:center !important;background:rgba(201,169,110,.08) !important;border:0 !important;border-top:1px dashed rgba(201,169,110,.4) !important;padding:10px 12px !important;z-index:1 !important;border-radius:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__information::before{content:'„– ' counter(ticket-no,decimal-leading-zero) '  ·  ARCHALIGN  ·  LON' !important;} /* FIX 2026-05-22G: arcade ticket card design */ main,.product-grid,.grid--3-col-tablet,.grid--4-col-desktop{counter-reset:ticket-no !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper{counter-increment:ticket-no;position:relative !important;background:linear-gradient(180deg,rgba(245,234,212,.045),rgba(245,234,212,.015)) !important;border:1px solid rgba(201,169,110,.32) !important;border-radius:3px !important;overflow:visible !important;isolation:isolate;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper:hover{border-color:rgba(201,169,110,.55) !important;transform:translateY(-2px) !important;box-shadow:0 8px 24px -8px rgba(201,169,110,.18) !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::before,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::after{content:'' !important;position:absolute !important;width:16px;height:16px;border-radius:50%;background:rgb(10,9,8);top:calc(100% * 0.61 - 8px);z-index:10;border:1px solid rgba(201,169,110,.32);pointer-events:none;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::before{left:-9px;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper::after{right:-9px;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__inner{border-bottom:1px dashed rgba(201,169,110,.4) !important;background:rgba(0,0,0,.18) !important;margin:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card .card__content{padding:16px 18px 0 !important;background:transparent !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__information::before{content:'„– ' counters(ticket-no,'',decimal-leading-zero) '  ·  ARCHALIGN  ·  LON';display:block !important;font-family:'JetBrains Mono',monospace !important;font-size:8px !important;letter-spacing:0.28em !important;color:rgba(201,169,110,.55) !important;text-transform:uppercase !important;margin-bottom:8px !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__heading,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__heading a{font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:0.08em !important;text-transform:uppercase !important;color:rgba(237,231,217,.95) !important;font-weight:500 !important;line-height:1.4 !important;margin:0 !important;word-break:break-word !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .price,html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .price-item{font-family:'JetBrains Mono',monospace !important;font-size:13px !important;font-weight:700 !important;color:rgb(201,169,110) !important;letter-spacing:0.04em !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__badge{position:static !important;transform:none !important;display:block !important;width:calc(100% + 36px) !important;margin:14px -18px 0 !important;text-align:center !important;background:rgba(201,169,110,.08) !important;border:0 !important;border-top:1px dashed rgba(201,169,110,.4) !important;padding:10px 12px !important;font-size:0 !important;border-radius:0 !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__badge::after{font-family:'JetBrains Mono',monospace !important;font-size:9px !important;letter-spacing:0.24em !important;color:rgb(201,169,110) !important;} html:not(#z) body:not(#z) .card-wrapper.product-card-wrapper .card__inner .card__content{display:none !important;} /* FIX 2026-05-22F: restore product page slider — undo display:none on inactive slides */ html:not(#z) body:not(#z) .product__media-list .product__media-item:not(.is-active),html:not(#z) body:not(#z) .product .product__media-list .product__media-item:not(.is-active){display:block !important;} /* FIX 2026-05-22E: hide duplicate product-page accordion + empty Judge.me reviews widget */ html:not(#z) body:not(#z) .product__accordion,html:not(#z) body:not(#z) #judgeme_product_reviews,html:not(#z) body:not(#z) .jdgm-widget,html:not(#z) body:not(#z) .jdgm-rev-widg{display:none !important;} /* FIX 2026-05-22D: badge overlay on image */ html:not(#z) body:not(#z) .card__badge:has([id^="NoMediaStandardBadge"]),html:not(#z) body:not(#z) .card-wrapper .card__badge:has([id^="NoMediaStandardBadge"]){display:none !important;} html body .card-wrapper{position:relative !important;} html body .card-wrapper .card__badge,html:not(#z) body:not(#z) .card .card__content .card__badge,html:not(#z) body:not(#z) .card-wrapper .card__badge,html:not(#z) body:not(#z) main .card-wrapper .card__badge{z-index:20 !important;transform:translateY(calc(-100% - 220px)) !important;} @media (min-width:750px){html body .card-wrapper .card__badge{transform:translateY(calc(-100% - 260px)) !important;}} /* FIX 2026-05-22B: product card image collapse */ html body .card-wrapper .card__media .media,html body .grid__item .card__media .media{position:absolute !important;inset:0 !important;height:100% !important;width:100% !important;padding-bottom:0 !important;} html body .card-wrapper .card__media img,html body .grid__item .card__media img{position:absolute !important;inset:0 !important;height:100% !important;width:100% !important;object-fit:cover !important;object-position:center !important;}
html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr { order: -200 !important; }
html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media { aspect-ratio: 1 / 1 !important; height: auto !important; max-height: 70vh !important; }
html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media { aspect-ratio: 1 / 1 !important; height: auto !important; }
html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media img, html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media picture img { object-fit: cover !important; object-position: center center !important; width: 100% !important; height: 100% !important; transform: none !important; }
/* =============================================================
   HARMONIZE 2026-05-22P — sitewide alignment + vertical rhythm
   Append to assets/custom.css after the FIX O block.
   ============================================================= */

:root {
  --aa-gutter: 40px;
  --aa-gutter-m: 24px;
  --aa-rhythm: 96px;
  --aa-rhythm-m: 64px;
  --aa-content-max: 1280px;
  --aa-headline-color: #f5ead4;
  --aa-headline-letter: .12em;
}

/* ---------- 1. CONSISTENT VERTICAL RHYTHM ----------
   Every top-level section breathes the same amount.
   Custom Liquid sections that are decorative (matrix bg, ticker)
   are excluded so they keep their tight layout.
*/
html:not(#z) body:not(#z) main#MainContent > section:not([id*="custom_liquid_gQ9dxx"]):not([id*="custom_liquid_ptFRjF"]):not([id*="custom_liquid_Lc4DC9"]),
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text"] {
  padding-top: var(--aa-rhythm) !important;
  padding-bottom: var(--aa-rhythm) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Tighten the arch-hero (custom_liquid_m4qjj6) so it doesn't double up
   its existing internal vertical padding. */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_m4qjj6"] {
  padding-top: var(--aa-rhythm) !important;
  padding-bottom: 0 !important;
}

/* ---------- 2. HORIZONTAL ALIGNMENT — every primary content wrapper
   uses the canonical gutter. Don't touch full-bleed images.
*/
html:not(#z) body:not(#z) main#MainContent .page-width,
html:not(#z) body:not(#z) main#MainContent .multicolumn,
html:not(#z) body:not(#z) main#MainContent .multicolumn__inner,
html:not(#z) body:not(#z) main#MainContent .featured-collection .collection,
html:not(#z) body:not(#z) main#MainContent .image-with-text .image-with-text__grid,
html:not(#z) body:not(#z) main#MainContent .rich-text__wrapper,
html:not(#z) body:not(#z) main#MainContent .newsletter__wrapper {
  padding-left: var(--aa-gutter) !important;
  padding-right: var(--aa-gutter) !important;
  max-width: var(--aa-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ---------- 3. PRIMARY SECTION HEADINGS — same family, weight, scale
   Bind every "this section's title" to the canonical display font.
*/
html:not(#z) body:not(#z) main#MainContent .multicolumn__title,
html:not(#z) body:not(#z) main#MainContent .section-header__title,
html:not(#z) body:not(#z) main#MainContent .featured-collection__title,
html:not(#z) body:not(#z) main#MainContent .rich-text__heading,
html:not(#z) body:not(#z) main#MainContent .newsletter__heading,
html:not(#z) body:not(#z) main#MainContent .title-wrapper-with-link .title {
  font-family: var(--font-heading-family, var(--font-display, 'Aktiv Grotesk', serif)) !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  letter-spacing: var(--aa-headline-letter) !important;
  text-transform: uppercase !important;
  color: var(--aa-headline-color) !important;
  margin-bottom: 32px !important;
}

/* Hero h1 keeps the larger scale */
html:not(#z) body:not(#z) main#MainContent .arch-hero__title,
html:not(#z) body:not(#z) main#MainContent .banner__heading,
html:not(#z) body:not(#z) main#MainContent .image-with-text__heading {
  font-family: var(--font-heading-family, 'Aktiv Grotesk', serif) !important;
  font-size: clamp(28px, 3.6vw, 36px) !important;
  letter-spacing: .01em !important;
  line-height: 1.05 !important;
}

/* ---------- 4. WHY ARCHALIGN — block left of title from being at x=80 */
html:not(#z) body:not(#z) #shopify-section-template--27925357035902__multicolumn_exkm4E .title-wrapper-with-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ---------- 5. PRODUCT CARD GRID — even gaps */
html:not(#z) body:not(#z) main#MainContent .featured-collection .grid,
html:not(#z) body:not(#z) main#MainContent .collection .grid {
  column-gap: 12px !important;
  row-gap: 32px !important;
}

/* ---------- 6. MARQUEE / TICKER — span full bleed, don't fight gutter */
html:not(#z) body:not(#z) main#MainContent .ticker,
html:not(#z) body:not(#z) main#MainContent [class*="marquee"],
html:not(#z) body:not(#z) main#MainContent [class*="trust-bar"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- 7. UNIFIED CARD CORNER RADIUS (cohesion) ---------- */
html:not(#z) body:not(#z) main#MainContent .image-with-text__media,
html:not(#z) body:not(#z) main#MainContent .card-wrapper .card,
html:not(#z) body:not(#z) main#MainContent .arch-hero__scene,
html:not(#z) body:not(#z) main#MainContent .newsletter__form {
  border-radius: 18px !important;
}

/* ---------- 8. MOBILE — tighter gutters + rhythm ---------- */
@media (max-width: 749px) {
  :root {
    --aa-gutter: var(--aa-gutter-m);
    --aa-rhythm: var(--aa-rhythm-m);
  }
  html:not(#z) body:not(#z) main#MainContent .multicolumn__title,
  html:not(#z) body:not(#z) main#MainContent .section-header__title,
  html:not(#z) body:not(#z) main#MainContent .featured-collection__title {
    font-size: 22px !important;
    margin-bottom: 24px !important;
  }
}
/* ===== /HARMONIZE 2026-05-22P ===== */
/* =============================================================
   FIX 2026-05-22Q — corrective: restore arch-hero brand signature
   HARMONIZE 2026-05-22P over-reached and changed the arch-hero
   font from JetBrains Mono + lowercase to serif + sentence-case.
   JetBrains Mono is brand-canon per MEMORY.md.
   ============================================================= */
html:not(#z) body:not(#z) main#MainContent .arch-hero__title,
html:not(#z) body:not(#z) main#MainContent .banner__heading {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: lowercase !important;
  font-size: clamp(36px, 5.4vw, 64px) !important;
  letter-spacing: -.01em !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
}

/* The italic emphasis on "objects." "systems." "studio." should use a serif (intentional contrast) */
html:not(#z) body:not(#z) main#MainContent .arch-hero__title em,
html:not(#z) body:not(#z) main#MainContent .arch-hero__title i {
  font-family: 'Cormorant Garamond', Garamond, Baskerville, Caslon, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
}


/* =============================================================
   FIX 2026-05-22R — shrink top lead-in for first section
   Spatial Intent block is the first section after the header.
   HARMONIZE Rule 1 gave it 96px top padding which creates a
   too-big empty matrix-rain band above it. Bring it down.
   ============================================================= */
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"] {
  padding-top: 12px !important;
  padding-bottom: 32px !important;
}

/* =============================================================
   FIX 2026-05-22S — TIGHTEN: kill excess empty space around sections
   User wants marquees, Why Archalign, and dual-CTA blocks to butt up
   against neighbors with NO 96px breathing room from HARMONIZE P.
   ============================================================= */

/* Marquees / trust-bars / all custom-liquid sections — zero block padding */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Their internal arch-trust-bar / ticker wrappers also tight */
html:not(#z) body:not(#z) main#MainContent .arch-trust-bar,
html:not(#z) body:not(#z) main#MainContent .ticker,
html:not(#z) body:not(#z) main#MainContent [class*="marquee"] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Multicolumn (Why Archalign) — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="multicolumn"] {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="multicolumn"] .multicolumn-list,
html:not(#z) body:not(#z) main#MainContent > section[id*="multicolumn"] .page-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Featured collection — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Rich text — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="rich_text"] {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Newsletter — keep small breathing only */
html:not(#z) body:not(#z) main#MainContent > section[id*="newsletter"] {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Spatial Intent (Image with text) — preserve FIX R tight lead-in */
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"] {
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}

/* Section title margin-bottom — reduce 32px — 16px */
html:not(#z) body:not(#z) main#MainContent .multicolumn__title,
html:not(#z) body:not(#z) main#MainContent .section-header__title,
html:not(#z) body:not(#z) main#MainContent .featured-collection__title,
html:not(#z) body:not(#z) main#MainContent .title-wrapper-with-link .title {
  margin-bottom: 16px !important;
}

/* =============================================================
   FIX 2026-05-22T — specificity-bumped overrides
   HARMONIZE Rule 1's `:not(#a):not(#b):not(#c)` gives it B=3.
   FIX S used single-attr selectors (B=1) so it LOST on:
     - arch-hero (custom_liquid_m4qjj6) — kept 96/96 padding
     - multicolumn (Why Archalign) — kept 96/96 padding
     - featured_collection — kept 96/96 padding
     - rich_text — kept 96/96 padding
   These rules add :not() padding selectors to bump B=4 — win.
   ============================================================= */

/* arch-hero section — zero block padding (the inner .arch-hero keeps its design) */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_m4qjj6"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* All other custom-liquid sections — zero */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Multicolumn (Why Archalign) — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="multicolumn"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Featured collection — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Rich text — tight */
html:not(#z) body:not(#z) main#MainContent > section[id*="rich_text"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Newsletter — small breathing only */
html:not(#z) body:not(#z) main#MainContent > section[id*="newsletter"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Spatial Intent (image with text) — preserve tight lead-in */
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Arch-hero inner element — also tighten its internal padding (was using --u system) */
html:not(#z) body:not(#z) main#MainContent .arch-hero:not(#aa1):not(#aa2) {
  padding-top: 32px !important;
  padding-bottom: 24px !important;
  min-height: 0 !important;
}
/* =============================================================
   FIX 2026-05-22U — AGGRESSIVE: kill all remaining empty spaces
   + shrink Spatial Intent block to less than half its height
   ============================================================= */

/* ---------- 1. SPATIAL INTENT — shrink to <half ---------- */
/* Was ~500x500 square. Now constrain to 220px tall with cover crop. */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media:not(#aa1):not(#aa2) {
  aspect-ratio: auto !important;
  height: 220px !important;
  max-height: 220px !important;
  min-height: 0 !important;
}
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media img,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media picture img {
  object-fit: cover !important;
  object-position: center 55% !important;
  width: 100% !important;
  height: 100% !important;
}
/* Hero/content row inside Spatial Intent — tight too */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__heading {
  font-size: clamp(20px, 2.4vw, 28px) !important;
  margin: 0 0 8px !important;
}
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text {
  margin: 0 !important;
  font-size: 13px !important;
}
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"]:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ---------- 2. ARCH-HERO — tighten internal min-height + padding ---------- */
/* Original .arch-hero design used min-height:88vh. That's massive. Cut it. */
html:not(#z) body:not(#z) main#MainContent .arch-hero:not(#aa1):not(#aa2):not(#aa3) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  min-height: 0 !important;
}
html:not(#z) body:not(#z) main#MainContent .arch-hero__main,
html:not(#z) body:not(#z) main#MainContent .arch-hero__grid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------- 3. ALL SECTIONS — sweep zero padding-block ---------- */
html:not(#z) body:not(#z) main#MainContent > section:not(#aa1):not(#aa2):not(#aa3):not(#aa4),
html:not(#z) body:not(#z) main#MainContent > div:not(#aa1):not(#aa2):not(#aa3):not(#aa4) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Restore the smallest breathing only where absolutely needed */
html:not(#z) body:not(#z) main#MainContent > section[id*="multicolumn"]:not(#a1):not(#a2):not(#a3):not(#a4) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"]:not(#a1):not(#a2):not(#a3):not(#a4) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="newsletter"]:not(#a1):not(#a2):not(#a3):not(#a4) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ---------- 4. INNER WRAPPERS — kill their padding too ---------- */
html:not(#z) body:not(#z) main#MainContent .multicolumn:not(#aa1):not(#aa2),
html:not(#z) body:not(#z) main#MainContent .multicolumn-list,
html:not(#z) body:not(#z) main#MainContent .collection:not(#aa1):not(#aa2),
html:not(#z) body:not(#z) main#MainContent .rich-text:not(#aa1):not(#aa2),
html:not(#z) body:not(#z) main#MainContent .newsletter:not(#aa1):not(#aa2) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Title margins — tight */
html:not(#z) body:not(#z) main#MainContent .multicolumn__title,
html:not(#z) body:not(#z) main#MainContent .section-header__title,
html:not(#z) body:not(#z) main#MainContent .featured-collection__title,
html:not(#z) body:not(#z) main#MainContent .title-wrapper-with-link .title {
  margin: 0 0 8px !important;
}
html:not(#z) body:not(#z) main#MainContent .title-wrapper-with-link,
html:not(#z) body:not(#z) main#MainContent .section-header {
  margin: 0 0 8px !important;
  padding-bottom: 0 !important;
}


/* =============================================================
   FIX 2026-05-22V — squash Spatial Intent section further
   Section was 453px (image 220 + text-column 307 + wrappers 72).
   Target ~200px total.
   ============================================================= */

/* Image shorter still */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media:not(#aa1):not(#aa2):not(#aa3) {
  height: 160px !important;
  max-height: 160px !important;
}

/* Caption (THE STUDIO LENS) — tight */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__caption,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr [class*="caption"] {
  font-size: 10px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  letter-spacing: .18em !important;
}

/* Heading — smaller + tighter line-height */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__heading {
  font-size: clamp(16px, 2vw, 22px) !important;
  line-height: 1.05 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Body text — smaller */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .rte {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Button — compact */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .button,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr a.button {
  padding: 8px 14px !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  margin: 0 !important;
}

/* Grid wrapper — kill wrapper padding/gap that's eating 72px */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__grid {
  padding: 0 !important;
  margin: 0 !important;
  gap: 16px !important;
}

/* Inner text-item container — tight, vertically centered */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text-item,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__content {
  padding: 8px 16px !important;
  margin: 0 !important;
  align-self: center !important;
}

/* Outer shopify-section + color-scheme wrappers — zero padding */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr > *,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr > * > .color-scheme-1,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr [class*="color-scheme"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =============================================================
   FIX 2026-05-22W — matrix-rain visible ONLY from "New to the Studio" down
   + text spacing fixes in Spatial Intent + featured_collection header gap
   ============================================================= */

/* ---------- 1. MATRIX CAP — opaque void on every section above featured_collection ---------- */
/* Stacking: matrix canvas is below page content. Putting solid background on these
   sections hides it. Sections BELOW featured_collection (multicolumn, newsletter,
   rich-text, etc.) keep transparent background so matrix bleeds through. */

html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"]:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) main#MainContent > section[id*="image_banner"]:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"]:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_m4qjj6"]:not(#aa1):not(#aa2):not(#aa3) {
  background: #0a0908 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Their inner containers also opaque so the matrix can't bleed via gaps */
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"] > *:not(.matrix-rain),
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_m4qjj6"] > *:not(.matrix-rain),
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"] > * {
  background-color: transparent !important;
}

/* Featured collection — first section where matrix is allowed to show through */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"]:not(#aa1):not(#aa2):not(#aa3) {
  background: transparent !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
}

/* ---------- 2. SPATIAL INTENT — proper button/caption spacing ---------- */
/* The CTA button sits ABOVE the caption "THE STUDIO LENS". They were almost touching. */
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text-item .button,
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr a.button {
  margin-bottom: 20px !important;
}
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__caption {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  display: block !important;
}
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__heading {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
html:not(#z) body:not(#z) main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------- 3. "NEW TO THE STUDIO" header breathing room ---------- */
/* The h2 was almost touching the marquee above it. Add real spacing. */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper-with-link,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .section-header {
  margin: 0 0 24px !important;
  padding-top: 8px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .featured-collection__title {
  margin: 0 !important;
  padding: 0 !important;
}

/* Marquee above New to the Studio — keep a hairline gap so they don't touch */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"]:not(#aa1):not(#aa2):not(#aa3) {
  margin-bottom: 8px !important;
}

/* =============================================================
   FIX 2026-05-22Z + AA — marquee restoration + LIVE bar to top
   ============================================================= */

/* ---------- AA: RESTORE THE ARCHALIGN STANDARD MARQUEE ANIMATION ----------
   A theme/earlier-CSS rule set animation: auto ease 0s 1 normal none paused
   on html body .scroll-content (duration 0s = static). Force the real animation.
*/
html:not(#z) body:not(#z) main .scroll-content:not(#aa1):not(#aa2),
html:not(#z) body:not(#z) .unique-announcement-bar-v1 .scroll-content:not(#aa1):not(#aa2),
html:not(#z) body:not(#z) .unique-announcement-wrapper-v1 .scroll-content:not(#aa1):not(#aa2) {
  animation-name: archMarqueeScroll !important;
  animation-duration: 45s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-direction: normal !important;
  animation-fill-mode: both !important;
}

/* ---------- Z: LIVE BAR PINNED TO TOP, FULL BLEED ----------
   custom_liquid_gQ9dxx contains the "• LIVE · [timestamp] LONDON-01 ..."
   ticker. Move it to first via flex order, make it full-viewport-width,
   make it sticky so it stays visible on scroll.
*/
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"]:not(#aa1):not(#aa2):not(#aa3) {
  order: -300 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc((100vw - 100%) / -2) !important;
  margin-right: calc((100vw - 100%) / -2) !important;
  background: #0a0908 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Its inner wrapper also full-bleed */
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"] > *,
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"] .unique-announcement-bar-v1,
html:not(#z) body:not(#z) main#MainContent > section[id*="custom_liquid_gQ9dxx"] .unique-announcement-wrapper-v1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0a0908 !important;
}

/* Compensate top spacing on Spatial Intent so LIVE bar overlay doesn't cover content */
html:not(#z) body:not(#z) main#MainContent > div[id*="image_with_text_DDtyTr"]:not(#aa1):not(#aa2):not(#aa3):not(#aa4) {
  padding-top: 50px !important;
}

/* =============================================================
   FIX 2026-05-22BB — bypass the S176 transform-killer via translate
   S176 at line 9045 sets transform:none !important on .scroll-content.
   Per CSS cascade, !important author rules outrank @keyframes
   transforms — so the keyframe's translateX is suppressed.
   The `translate` CSS property is a SEPARATE property from `transform`
   and isn't affected by transform:none !important. Animate THAT instead.
   ============================================================= */

@keyframes archMarqueeScrollV2 {
  0%   { translate: 0 0; }
  100% { translate: -50% 0; }
}

html:not(#z) body:not(#z) .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) .unique-announcement-bar-v1 .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) .unique-announcement-wrapper-v1 .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) [class*="announcement"] .scroll-content:not(#aa1):not(#aa2):not(#aa3) {
  animation: archMarqueeScrollV2 45s linear infinite !important;
  animation-name: archMarqueeScrollV2 !important;
  animation-duration: 45s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-direction: normal !important;
  animation-fill-mode: both !important;
  /* keep transform: none (from S176) — we don't need transform at all */
  will-change: translate !important;
}

/* =============================================================
   FIX 2026-05-22CC — proper marquee animation
   FIX BB's keyframe had mixed units (0px vs -50%) which Chrome
   doesn't always interpolate. Use consistent percentages.
   ============================================================= */

@keyframes archMarqueeScrollV3 {
  from { translate: 0% 0; }
  to   { translate: -50% 0; }
}

html:not(#z) body:not(#z) .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) .unique-announcement-bar-v1 .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) .unique-announcement-wrapper-v1 .scroll-content:not(#aa1):not(#aa2):not(#aa3),
html:not(#z) body:not(#z) [class*="announcement"] .scroll-content:not(#aa1):not(#aa2):not(#aa3) {
  animation-name: archMarqueeScrollV3 !important;
  animation-duration: 45s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-fill-mode: both !important;
  animation-direction: normal !important;
}

/* =============================================================
   FIX 2026-05-22EE — kill arch-hero swipe animation +
                       comprehensive mobile fixes
   ============================================================= */

/* ---------- 1. KILL THE SWIPE ON ARCH-HERO ::before ----------
   Audit confirmed: .arch-hero::before runs archHeroDrift (28s) +
   archHeroMatrix (9s) which create the slow black-swiping background.
*/
html:not(#z) body:not(#z) main#MainContent .arch-hero::before {
  animation: none !important;
  animation-name: none !important;
  animation-play-state: paused !important;
}

/* Keep dots pulsing but kill the long drift/log/telemetry */
html:not(#z) body:not(#z) main#MainContent .arch-hero__log-stream {
  animation: none !important;
}
html:not(#z) body:not(#z) main#MainContent .arch-hero__telemetry::before {
  animation: none !important;
}

/* ---------- 2. "NEW TO THE STUDIO" — sharper alignment ----------
   h2 was at x=80, first card at x=90. Force h2 to match x=90.
*/
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper-with-link,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .section-header {
  padding-left: 50px !important;
  padding-right: 50px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] h2.title,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .featured-collection__title {
  font-size: clamp(16px, 1.6vw, 20px) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}

/* ===================================================
   MOBILE @media — single column, tighter, readable
   =================================================== */
@media (max-width: 749px) {

  /* Body gutters */
  :root {
    --aa-gutter: 16px;
  }

  /* Spatial Intent — stack vertically, image full width, text below */
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__grid {
    display: block !important;
    padding: 0 16px !important;
  }
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media-item,
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__media {
    height: 200px !important;
    margin-bottom: 12px !important;
  }
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__content {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
  }
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__heading,
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .image-with-text__text,
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr [class*="caption"] {
    text-align: left !important;
  }
  html body main#MainContent #shopify-section-template--27925357035902__image_with_text_DDtyTr .button {
    align-self: flex-start !important;
  }

  /* Arch-hero — single column stack */
  html body main#MainContent .arch-hero,
  html body main#MainContent .arch-hero__main,
  html body main#MainContent .arch-hero__grid {
    display: block !important;
    padding: 16px !important;
  }
  html body main#MainContent .arch-hero__title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05 !important;
  }
  html body main#MainContent .arch-hero__scene {
    margin-top: 16px !important;
    max-width: 100% !important;
  }
  html body main#MainContent .arch-hero__telemetry,
  html body main#MainContent .arch-hero__statgrid,
  html body main#MainContent .arch-hero__log-stream {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body main#MainContent .arch-hero__statgrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Multicolumn (Why Archalign) — stack one column */
  html body main#MainContent > section[id*="multicolumn"] .multicolumn-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body main#MainContent > section[id*="multicolumn"] .multicolumn-card,
  html body main#MainContent > section[id*="multicolumn"] .multicolumn-list__item {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* "new to the Studio" — title row tight */
  html body main#MainContent > section[id*="featured_collection"] .title-wrapper-with-link,
  html body main#MainContent > section[id*="featured_collection"] .section-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body main#MainContent > section[id*="featured_collection"] .title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* Product cards (TICKETS) — readable on phone */
  html body main#MainContent .card-wrapper,
  html body main#MainContent .product-card {
    margin: 0 8px !important;
    padding: 0 !important;
  }
  html body main#MainContent .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  html body main#MainContent .card__heading,
  html body main#MainContent .card__heading h5 {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  html body main#MainContent .card__information,
  html body main#MainContent .card__content {
    padding: 8px !important;
  }
  html body main#MainContent .price,
  html body main#MainContent .price__regular .price-item {
    font-size: 12px !important;
  }
  /* Card badges (IN STOCK) — readable */
  html body main#MainContent .card__badge,
  html body main#MainContent .badge {
    font-size: 8px !important;
    padding: 4px 6px !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
  }
  /* Card serial numbers (W 01 — ARCHALIGN — LON) — tight */
  html body main#MainContent .card__media {
    aspect-ratio: 1 / 1 !important;
  }

  /* Newsletter — full width on mobile */
  html body main#MainContent > section[id*="newsletter"] .newsletter__form {
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Rich text — tight */
  html body main#MainContent > section[id*="rich_text"] .rich-text__wrapper,
  html body main#MainContent > section[id*="rich_text"] .rich-text__blocks {
    padding: 0 16px !important;
  }

  /* Dual-CTA cards — stack vertically */
  html body main#MainContent .arch-tm-card {
    margin-bottom: 12px !important;
    width: 100% !important;
    padding: 20px !important;
  }
  html body main#MainContent [class*="custom_liquid_LhiyqN"] {
    padding: 0 16px !important;
  }
  html body main#MainContent [class*="custom_liquid_LhiyqN"] > * {
    flex-direction: column !important;
    display: flex !important;
  }

  /* All sections — tight horizontal padding override */
  html body main#MainContent .page-width,
  html body main#MainContent .collection {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide trade-bar items that don't fit */
  html body main#MainContent .scroll-content {
    font-size: 10px !important;
  }
}
/* =============================================================
   FIX 2026-05-22FF — three concurrent fixes
   1. Product card image fit (no gap + no crop)
   2. "New to the Studio" architectural redesign
   3. Product page TITLE pushed to top (was floating mid-form)
   ============================================================= */

/* ===================================================
   1. PRODUCT CARD IMAGE FIT (TICKETS) — no gap + no crop
   Strategy: make the card-media frame match the natural image
   aspect via aspect-ratio 1/1; light bg behind the image so
   any contain-mode space blends seamlessly with the product photo.
   =================================================== */
html:not(#z) body:not(#z) main#MainContent .card-wrapper .card__media,
html:not(#z) body:not(#z) main#MainContent .card-wrapper .card-media,
html:not(#z) body:not(#z) main#MainContent .card-wrapper picture,
html:not(#z) body:not(#z) main#MainContent .card__inner.ratio,
html:not(#z) body:not(#z) main#MainContent .card .media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}
html:not(#z) body:not(#z) main#MainContent .card-wrapper .card__media img,
html:not(#z) body:not(#z) main#MainContent .card-wrapper picture img,
html:not(#z) body:not(#z) main#MainContent .card .media img,
html:not(#z) body:not(#z) main#MainContent .card-wrapper img.motion-reduce {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
}

/* ===================================================
   2. "NEW TO THE STUDIO" — architectural redesign
   Title + grid contained in a wrapper with consistent gutter.
   =================================================== */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"]:not(#a1):not(#a2):not(#a3):not(#a4) {
  padding: 40px 40px 48px !important;
}

/* Title row: kept LEFT, JetBrains Mono signature */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper-with-link {
  padding: 0 !important;
  margin: 0 0 24px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(201,169,110,.2) !important;
  padding-bottom: 16px !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .featured-collection__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 0 !important;
  color: rgb(201,169,110) !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title::before {
  content: '// ';
  opacity: .5;
}

/* Grid — clean 5-up desktop, 2-up mobile */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid,
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .collection ul.grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid__item {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Card wrapper inside grid — fill its slot, no float */
html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .card-wrapper {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ===================================================
   3. PRODUCT PAGE — title to TOP, price right under it
   The .product__title was rendering AFTER description blocks.
   Force order with CSS flex/grid.
   =================================================== */
html:not(#z) body:not(#z) main .product__info-wrapper,
html:not(#z) body:not(#z) main .product__info-container,
html:not(#z) body:not(#z) main .product__info,
html:not(#z) body:not(#z) main product-info {
  display: flex !important;
  flex-direction: column !important;
}

/* Title — push to very top */
html:not(#z) body:not(#z) main .product__title:not(#aa),
html:not(#z) body:not(#z) main h1.product__title,
html:not(#z) body:not(#z) main .product-form__title,
html:not(#z) body:not(#z) main [class*="product"][class*="title"]:not([class*="card"]):not([class*="collection"]) {
  order: -1000 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* Price — right under title */
html:not(#z) body:not(#z) main .product__info-wrapper .price,
html:not(#z) body:not(#z) main .product .price,
html:not(#z) body:not(#z) main .product-form__price,
html:not(#z) body:not(#z) main [class*="product"][class*="price"] {
  order: -900 !important;
  margin: 0 0 16px !important;
}

/* Tag-line (// LONDON · FOUNDER-LED ...) just above title */
html:not(#z) body:not(#z) main .product__tagline,
html:not(#z) body:not(#z) main [class*="product"][class*="tag"]:not([class*="card"]) {
  order: -1100 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  opacity: .6 !important;
  margin: 0 0 6px !important;
}

/* Variant pickers right under price */
html:not(#z) body:not(#z) main .product-form__input,
html:not(#z) body:not(#z) main variant-selects,
html:not(#z) body:not(#z) main .product-form {
  order: -800 !important;
}

/* Buy button after form */
html:not(#z) body:not(#z) main .product-form__buttons,
html:not(#z) body:not(#z) main .product__cart,
html:not(#z) body:not(#z) main [class*="payment-button"] {
  order: -700 !important;
}

/* Material / Dimensions / Care / etc — push these BELOW */
html:not(#z) body:not(#z) main .product__description,
html:not(#z) body:not(#z) main .product__accordion,
html:not(#z) body:not(#z) main .product-info__description,
html:not(#z) body:not(#z) main .product__info-wrapper details {
  order: 100 !important;
  margin-top: 24px !important;
}

/* MOBILE refinements */
@media (max-width: 749px) {
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] {
    padding: 24px 16px 32px !important;
  }
}


/* =============================================================
   FIX 2026-05-22GG — HIDE LEAKED <style> TAG TEXT
   FIX EE rule "[class*=custom_liquid_LhiyqN] > * { display: flex }"
   accidentally made <style> elements visible. Force STYLE/SCRIPT/LINK
   to never render visually no matter what.
   ============================================================= */
html style,
html body style,
html body main style,
html body main#MainContent style,
html body section style,
html body div style,
html body * > style:not(#zz),
html script,
html link,
html body script,
html body link {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  pointer-events: none !important;
}
/* =============================================================
   FIX 2026-05-22HH — mobile horizontal scroll for tickets
   Desktop 5-up grid stays. Mobile becomes a swipeable row showing
   ~2.5 tickets at a time, with the native Shopify slider arrows
   functional (no more flex/grid override blocking them).
   ============================================================= */

@media (max-width: 749px) {

  /* Section padding tighter to allow tickets to peek off-edge */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"]:not(#a1):not(#a2):not(#a3):not(#a4) {
    padding: 24px 0 32px !important;
  }

  /* Title row keeps left padding */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .title-wrapper-with-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Slider container — let Shopify's slider behavior take over */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] slider-component,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-component {
    position: relative !important;
    display: block !important;
    width: 100% !important;
  }

  /* The grid becomes a horizontal scroller */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .collection ul.grid,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider {
    display: flex !important;
    grid-template-columns: unset !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scroll-padding-left: 16px !important;
    gap: 10px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide ugly scrollbar */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid::-webkit-scrollbar,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* Each ticket — fixed width so ~2.5 show at once */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .grid__item,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider__slide {
    flex: 0 0 38vw !important;
    min-width: 38vw !important;
    max-width: 38vw !important;
    width: 38vw !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
  }

  /* Bring back the Shopify slider buttons — they were hidden by earlier overrides */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-buttons,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-buttons {
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 16px !important;
    padding: 0 16px !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(201,169,110,.4) !important;
    background: rgba(10,9,8,.7) !important;
    color: rgb(201,169,110) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-button[aria-disabled="true"] {
    opacity: .3 !important;
    pointer-events: none !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .slider-button svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
  }

  /* Card aspects on mobile — keep square media, readable text */
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .card__media {
    aspect-ratio: 1 / 1 !important;
  }
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .card__heading,
  html:not(#z) body:not(#z) main#MainContent > section[id*="featured_collection"] .card__heading h5 {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}


/* =============================================================
   FIX 2026-05-22II — RESTORE the TV / log-stream / telemetry scrolling
   FIX EE killed the log-stream + telemetry animations along with the
   bad slow BG swipe. User wants the "TV screen" content cycling again.
   Restore both with high specificity. Keep arch-hero::before kill in place.
   ============================================================= */

/* Re-enable log stream scrolling */
html:not(#z) body:not(#z) main#MainContent .arch-hero__log-stream:not(#aa1):not(#aa2):not(#aa3) {
  animation-name: archHeroLogScroll !important;
  animation-duration: 38s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-direction: normal !important;
  animation-fill-mode: both !important;
}

/* Re-enable telemetry ::before scrolling */
html:not(#z) body:not(#z) main#MainContent .arch-hero__telemetry:not(#aa1):not(#aa2):not(#aa3)::before {
  animation-name: archTelemetryScroll !important;
  animation-duration: 110s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-direction: normal !important;
  animation-fill-mode: both !important;
}

/* Backup keyframes that use `left` so the scroll still works even if
   transform: none !important is set somewhere (S176 pattern) */
@keyframes archHeroLogScrollLeft {
  from { left: 0%; }
  to   { left: -50%; }
}
@keyframes archTelemetryScrollLeft {
  from { left: 0%; }
  to   { left: -100%; }
}

/* Ensure no stray rule has paused the play-state on these elements */
html:not(#z) body:not(#z) main#MainContent .arch-hero__log-stream,
html:not(#z) body:not(#z) main#MainContent .arch-hero__telemetry::before {
  animation-play-state: running !important;
}

/* IMPORTANT: keep arch-hero::before's archHeroDrift/Matrix KILLED
   (that was the slow black BG swipe the user complained about) */
html:not(#z) body:not(#z) main#MainContent .arch-hero::before {
  animation: none !important;
  animation-name: none !important;
}

/* Make sure the telemetry bar is VISIBLE — not hidden by FIX W's opaque cap */
html:not(#z) body:not(#z) main#MainContent .arch-hero__telemetry,
html:not(#z) body:not(#z) main#MainContent .arch-hero__log-stream,
html:not(#z) body:not(#z) main#MainContent .arch-hero__log,
html:not(#z) body:not(#z) main#MainContent .arch-hero__panel {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Log stream specifically needs flex for inline span layout */
html:not(#z) body:not(#z) main#MainContent .arch-hero__log-stream {
  display: flex !important;
  gap: 24px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}



/* =============================================================
   FIX 2026-05-22JJ — HALVE EVERYTHING ON MOBILE
   User: "in the phone version everything is so massive". Apply
   zoom: 0.5 inside @media (max-width: 749px) so the entire UI
   visually scales to half size. Use 0.6 instead of 0.5 because
   true 0.5 makes tap targets too small (UX safety net).
   ============================================================= */

@media (max-width: 749px) {

  /* Apply zoom scaling to the main content. Header + footer
     also scale via separate rules below. Using 0.65 as the
     balance between "half size" and "still tappable". */
  html:not(#z) body:not(#z) main#MainContent {
    zoom: 0.65 !important;
  }
  html:not(#z) body:not(#z) header.header,
  html:not(#z) body:not(#z) header[class*="header"],
  html:not(#z) body:not(#z) .header-wrapper,
  html:not(#z) body:not(#z) .shopify-section-header,
  html:not(#z) body:not(#z) [class*="shopify-section-sections--"]:not(#aa) {
    zoom: 0.7 !important;
  }
  html:not(#z) body:not(#z) footer.footer,
  html:not(#z) body:not(#z) footer[class*="footer"],
  html:not(#z) body:not(#z) .shopify-section-footer {
    zoom: 0.65 !important;
  }

  /* Currency selector / persistent UI bottom-left — keep readable */
  html:not(#z) body:not(#z) .country-selector,
  html:not(#z) body:not(#z) [class*="currency"],
  html:not(#z) body:not(#z) [class*="locale-selector"] {
    zoom: 1 !important;
    transform: scale(0.85) !important;
    transform-origin: bottom left !important;
  }

  /* Safety: if zoom causes content to overflow horizontally,
     prevent body scroll-x */
  html:not(#z) body:not(#z) {
    overflow-x: hidden !important;
  }
}

/* Even smaller phones (<= 414px) — shrink slightly more */
@media (max-width: 414px) {
  html:not(#z) body:not(#z) main#MainContent {
    zoom: 0.6 !important;
  }
  html:not(#z) body:not(#z) header.header,
  html:not(#z) body:not(#z) [class*="shopify-section-sections--"]:not(#aa) {
    zoom: 0.65 !important;
  }
  html:not(#z) body:not(#z) footer.footer,
  html:not(#z) body:not(#z) .shopify-section-footer {
    zoom: 0.6 !important;
  }
}


/* =============================================================
   FIX 2026-05-22KK — product gallery image fits the previewer
   Source images are square (1:1). Frame was rendering as a much
   bigger rectangle leaving the image floating inside. Lock the
   media container to aspect-ratio 1/1 + object-fit cover so the
   product photo fills its viewer with NO empty dark space.
   ============================================================= */

/* Main product gallery item */
html:not(#z) body:not(#z) main .product__media-item:not(#aa),
html:not(#z) body:not(#z) main .product__media-item-wrapper:not(#aa),
html:not(#z) body:not(#z) main .product__media:not(#aa),
html:not(#z) body:not(#z) main .product__media-list .product__media-item,
html:not(#z) body:not(#z) main .product-media,
html:not(#z) body:not(#z) main [class*="product__media"]:not([class*="thumbnail"]):not([class*="nav"]):not(#aa) {
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

/* The actual <img> inside the gallery — fill the square frame */
html:not(#z) body:not(#z) main .product__media img:not(#aa),
html:not(#z) body:not(#z) main .product__media-item img:not(#aa),
html:not(#z) body:not(#z) main .product__media picture img:not(#aa),
html:not(#z) body:not(#z) main .product__media-item picture img:not(#aa),
html:not(#z) body:not(#z) main .product-media img:not(#aa),
html:not(#z) body:not(#z) main [class*="product__media"]:not([class*="thumbnail"]):not([class*="nav"]) img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
}

/* The wrapper / .product__media-gallery — kill any extra padding/height */
html:not(#z) body:not(#z) main .product__media-gallery:not(#aa),
html:not(#z) body:not(#z) main .product__column-sticky:not(#aa),
html:not(#z) body:not(#z) main .product-info__media:not(#aa),
html:not(#z) body:not(#z) main [class*="product-gallery"]:not(#aa) {
  padding: 0 !important;
  background-color: transparent !important;
  max-width: 100% !important;
}

/* Thumbnails row — keep uniform square */
html:not(#z) body:not(#z) main .thumbnail,
html:not(#z) body:not(#z) main .thumbnail-list__item,
html:not(#z) body:not(#z) main .product__media-thumbnail,
html:not(#z) body:not(#z) main [class*="thumbnail"][class*="product"] {
  aspect-ratio: 1 / 1 !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}
html:not(#z) body:not(#z) main .thumbnail img,
html:not(#z) body:not(#z) main .thumbnail-list__item img,
html:not(#z) body:not(#z) main .product__media-thumbnail img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Container wrappers that were stretching the viewport — cap them */
html:not(#z) body:not(#z) main .product__media-wrapper,
html:not(#z) body:not(#z) main .product__media-container {
  height: auto !important;
  max-height: 80vh !important;
}

/* Hide the dark .ratio padding-bottom hack if the theme is still using it */
html:not(#z) body:not(#z) main .product .ratio,
html:not(#z) body:not(#z) main .product__media .ratio {
  padding-bottom: 0 !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* MOBILE — keep the gallery edge-to-edge */
@media (max-width: 749px) {
  html:not(#z) body:not(#z) main .product__media,
  html:not(#z) body:not(#z) main .product__media-item,
  html:not(#z) body:not(#z) main .product__media-gallery {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =============================================================
   FIX 2026-05-22RR — header full-size + social icons bigger
   + product page mobile info-wrapper visible
   + Trustpilot/Google Maps anchors in footer (CSS scaffolding)
   ============================================================= */

/* ===== 1. HEADER — full size on mobile (FIX JJ shrank to 0.7) ===== */
@media (max-width: 749px) {
  html:not(#z) body:not(#z) header.header,
  html:not(#z) body:not(#z) header[class*="header"],
  html:not(#z) body:not(#z) .header-wrapper,
  html:not(#z) body:not(#z) .shopify-section-header,
  html:not(#z) body:not(#z) [class*="shopify-section-sections--"]:not(#aa) {
    zoom: 1 !important;
  }
  html:not(#z) body:not(#z) [class*="announcement-bar"]:not(#aa),
  html:not(#z) body:not(#z) [class*="utility-bar"]:not(#aa) {
    zoom: 1 !important;
  }
}

/* ===== 2. FOOTER SOCIAL ICONS — enlarge for mobile + add gap ===== */
@media (max-width: 749px) {
  html:not(#z) body:not(#z) footer .social-icons,
  html:not(#z) body:not(#z) footer .list-social,
  html:not(#z) body:not(#z) footer [class*="social"]:not([class*="link"]):not(#aa) {
    zoom: 1.4 !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    flex-wrap: wrap !important;
  }
  html:not(#z) body:not(#z) footer .social-icons__link,
  html:not(#z) body:not(#z) footer .list-social__link,
  html:not(#z) body:not(#z) footer [class*="social-icons"] a,
  html:not(#z) body:not(#z) footer .list-social a {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html:not(#z) body:not(#z) footer .social-icons svg,
  html:not(#z) body:not(#z) footer .list-social svg,
  html:not(#z) body:not(#z) footer [class*="social"] svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ===== 3. PRODUCT PAGE MOBILE — INFO WRAPPER ALWAYS VISIBLE ===== */
@media (max-width: 749px) {
  /* Plain block layout on .product so children stack naturally */
  html:not(#z) body:not(#z) main#MainContent product-info .product,
  html:not(#z) body:not(#z) main#MainContent product-info .product.product--medium,
  html:not(#z) body:not(#z) main#MainContent product-info .product.product--left {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template: none !important;
    width: 100% !important;
    padding: 0 16px !important;
  }

  /* Media wrapper — capped image, square, white bg */
  html:not(#z) body:not(#z) main#MainContent product-info .product__media-wrapper,
  html:not(#z) body:not(#z) main#MainContent product-info .grid__item.product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    display: block !important;
    grid-column: unset !important;
    flex: none !important;
  }
  html:not(#z) body:not(#z) main#MainContent product-info .product__media img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
  }

  /* INFO WRAPPER — FORCE visible block, full width */
  html:not(#z) body:not(#z) main#MainContent product-info .product__info-wrapper,
  html:not(#z) body:not(#z) main#MainContent product-info .grid__item.product__info-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    flex: none !important;
    order: unset !important;
    position: static !important;
    transform: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  /* All children of info wrapper — visible block */
  html:not(#z) body:not(#z) main#MainContent product-info .product__info-wrapper > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
  }

  /* Title */
  html:not(#z) body:not(#z) main#MainContent product-info .product__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 8px 0 12px !important;
  }
  /* Price */
  html:not(#z) body:not(#z) main#MainContent product-info .price {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 18px !important;
  }
  /* Form buttons full width */
  html:not(#z) body:not(#z) main#MainContent product-info .product-form,
  html:not(#z) body:not(#z) main#MainContent product-info .product-form__buttons {
    display: block !important;
    width: 100% !important;
  }
  html:not(#z) body:not(#z) main#MainContent product-info .product-form__buttons .button {
    width: 100% !important;
    padding: 14px !important;
  }
  html:not(#z) body:not(#z) main#MainContent product-info select {
    width: 100% !important;
    padding: 12px !important;
  }
}

/* ===== 4. TRUSTPILOT + GOOGLE MAPS LINKS — CSS scaffolding ===== */
/* These rules style the trust-link buttons. The actual <a> elements
   need to be added in sections/footer.liquid — paste this snippet
   near the social-icons block:

   <div class="footer__trust-links">
     <a href="https://www.trustpilot.com/review/archalign.store"
        class="footer__trust-link" target="_blank" rel="noopener"
        aria-label="Trustpilot">
       ★ TRUSTPILOT
     </a>
     <a href="https://maps.google.com/?q=archalign+london"
        class="footer__trust-link" target="_blank" rel="noopener"
        aria-label="Google Maps">
       ⌖ LONDON
     </a>
   </div>
*/
html:not(#z) body:not(#z) footer .footer__trust-links {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(201, 169, 110, 0.2) !important;
  justify-content: center !important;
}
html:not(#z) body:not(#z) footer .footer__trust-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(201, 169, 110, 0.4) !important;
  background: rgba(10, 9, 8, 0.4) !important;
  color: rgb(201, 169, 110) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: background 0.2s, border-color 0.2s !important;
}
html:not(#z) body:not(#z) footer .footer__trust-link:hover {
  background: rgba(201, 169, 110, 0.1) !important;
  border-color: rgb(201, 169, 110) !important;
}


/* =============================================================
   FIX 2026-05-22SS — surgical force product info wrapper visible
   on mobile. User's screenshot shows image †’ DIRECTLY footer.
   Entire info wrapper collapsed to 0 height. Force every possible
   property that could be hiding it.
   ============================================================= */

@media (max-width: 749px) {

  /* The wrapper itself — UNCONDITIONAL force ALL properties */
  html body main product-info .product__info-wrapper,
  html body main product-info .product .product__info-wrapper,
  html body main .grid__item.product__info-wrapper,
  html:not(#x) body:not(#x) main#MainContent product-info .product__info-wrapper,
  html:not(#x) body:not(#x) main#MainContent .product .product__info-wrapper {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 600px !important;
    max-height: none !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    position: static !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex: 1 1 auto !important;
    order: 99 !important;
  }

  /* All children of wrapper — force visible block */
  html body main product-info .product__info-wrapper > *,
  html body main product-info .product__info-wrapper *,
  html body main product-info .product__info-wrapper > div,
  html body main product-info .product__info-wrapper > h1,
  html body main product-info .product__info-wrapper > h2,
  html body main product-info .product__info-wrapper > p {
    visibility: visible !important;
    opacity: 1 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }
  html body main product-info .product__info-wrapper > *:not(script):not(style):not(link):not(meta) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  /* Specific must-show elements */
  html body main product-info .product__info-wrapper h1,
  html body main product-info .product__info-wrapper .product__title {
    display: block !important;
    visibility: visible !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: #f5ead4 !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    min-height: 32px !important;
  }
  html body main product-info .product__info-wrapper .price,
  html body main product-info .product__info-wrapper [class*="price"] {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-height: 24px !important;
    color: rgb(201, 169, 110) !important;
  }
  html body main product-info .product__info-wrapper select,
  html body main product-info .product__info-wrapper variant-selects,
  html body main product-info .product__info-wrapper .product-form__input {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    min-height: 44px !important;
  }
  html body main product-info .product__info-wrapper .product-form,
  html body main product-info .product__info-wrapper product-form,
  html body main product-info .product__info-wrapper .product-form__buttons {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 50px !important;
  }
  html body main product-info .product__info-wrapper .button,
  html body main product-info .product__info-wrapper button[type="submit"] {
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    padding: 14px !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body main product-info .product__info-wrapper .product__description,
  html body main product-info .product__info-wrapper [class*="description"] {
    display: block !important;
    visibility: visible !important;
    margin-top: 24px !important;
    min-height: 100px !important;
  }

  /* Cap the image — leave room for info */
  html body main product-info .product__media-wrapper,
  html body main product-info .product__media,
  html body main product-info .product__media-item {
    max-height: 320px !important;
    height: 320px !important;
    width: 100% !important;
    aspect-ratio: auto !important;
  }
  html body main product-info .product__media img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Force the .product container to be plain block on mobile */
  html body main product-info .product {
    display: block !important;
    grid-template: none !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Hide ONLY broken/empty Shopify slots that might be eating space */
  html body main product-info .product__info-wrapper > div:empty,
  html body main product-info .product__info-wrapper > p:empty {
    display: none !important;
  }
}

/* ============================================================================
   ARCHALIGN — PDP MODULE (single coherent rebuild — 2026-05-23)
   ----------------------------------------------------------------------------
   This block REPLACES every prior PDP-touching patch (v16-v40, FIX MM-SS).
   Single source of truth for the product detail page on archalign.store.

   STRUCTURE:
     0. Tokens (scoped to .template-product so they cannot leak)
     1. Layout (desktop 2-col, mobile single-col)
     2. Image card (dark radial backdrop, no white frame)
     3. Status header strip (—‰ ARCH-NN — coords — IN STOCK)
     4. Title (serif, sentence case, with mono kicker)
     5. Price + badges (gold mono, framed pill badges)
     6. Variant grid (chip pills, NOT circles — readable swatches)
     7. NOTIFY ME / ADD TO CART (gold-gradient pulse CTA)
     8. Shop Pay hide (lavender button doesn't fit dark brand)
     9. Trust footer strip (★ Trustpilot · Returns · UK Shipping)
    10. Description block (full-width below the grid)
    11. Accordion (Material/Dimensions/Care/Shipping/Returns)
    12. Currency picker cap (was running off-screen)
   ============================================================================ */

/* ===== 0. TOKENS — local to PDP scope ===== */
.template-product, body[class*="template-product"], .product-template {
  --pdp-void:        #0a0908;
  --pdp-deep:        #14110d;
  --pdp-ink:         #1a1612;
  --pdp-gold:        #c9a96e;
  --pdp-gold-bright: #d4b97a;
  --pdp-gold-dim:    rgba(201, 169, 110, 0.4);
  --pdp-gold-glow:   rgba(201, 169, 110, 0.18);
  --pdp-bone:        #f5ead4;
  --pdp-ash:         rgba(245, 234, 212, 0.6);
  --pdp-ash-dim:     rgba(245, 234, 212, 0.3);
  --pdp-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pdp-serif:       'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
  --pdp-sans:        -apple-system, 'Helvetica Neue', 'Inter', sans-serif;
  --pdp-gutter-desk: 64px;
  --pdp-gutter-mob:  20px;
}

/* ===== 1. LAYOUT ===== */
/* DESKTOP — 2-col grid, image sticky, description full-width below */
@media (min-width: 750px) {
  product-info .product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "media info" "desc desc" !important;
    column-gap: var(--pdp-gutter-desk) !important;
    row-gap: 48px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 32px 40px !important;
    align-items: start !important;
  }
  product-info .product__media-wrapper {
    grid-area: media !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  product-info .product__info-wrapper {
    grid-area: info !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    aspect-ratio: auto !important;
  }
}

/* MOBILE — single column, image then info */
@media (max-width: 749px) {
  product-info .product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px var(--pdp-gutter-mob) 32px !important;
    margin: 0 !important;
    grid-template: none !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
  }
  product-info .product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    position: static !important;
    grid-area: unset !important;
    aspect-ratio: 1 / 1 !important;
  }
  product-info .product__info-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    grid-area: unset !important;
    order: unset !important;
  }
}

/* Inner info container — owns the vertical stack */
product-info .product__info-container,
product-info .product__info-wrapper > section,
product-info .product__info-wrapper > .product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

/* Kill stray order:-1000 from old patches */
product-info .product__info-container > *,
product-info .product__info-wrapper > section > * {
  order: unset !important;
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* ===== 2. IMAGE CARD ===== */
product-info .product__media-wrapper {
  background: radial-gradient(circle at 50% 35%, var(--pdp-ink) 0%, var(--pdp-void) 80%) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4), inset 0 0 60px var(--pdp-gold-glow) !important;
  overflow: hidden !important;
}
product-info .product__media-list { display: block !important; gap: 0 !important; }
product-info .product__media-item { aspect-ratio: 1 / 1 !important; max-height: none !important; background: transparent !important; }
product-info .product__media,
product-info .product__media .media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  aspect-ratio: 1 / 1 !important;
}
product-info .product__media img,
product-info .product__media-item img,
product-info .product__media picture img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Thumbnails — small dot row below image */
product-info .thumbnail-list { display: flex !important; gap: 6px !important; margin-top: 12px !important; padding: 0 !important; flex-wrap: wrap !important; justify-content: center !important; }
product-info .thumbnail { width: 48px !important; height: 48px !important; border: 1px solid var(--pdp-gold-dim) !important; padding: 0 !important; background: var(--pdp-ink) !important; overflow: hidden !important; }
product-info .thumbnail.is-active { border-color: var(--pdp-gold) !important; }
product-info .thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ===== 3. STATUS HEADER STRIP — printed via ::before on info container ===== */
product-info .product__info-container::before {
  content: '—‰  ARCH-04  —  LDN 51.5074°N · 0.1278°W  —  IN STOCK' !important;
  display: block !important;
  font: 9px/1.4 var(--pdp-mono) !important;
  letter-spacing: 0.18em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--pdp-gold-dim) !important;
  padding: 0 0 10px !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}

/* ===== 4. TITLE ===== */
product-info .product__title {
  font-family: var(--pdp-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--pdp-bone) !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  order: unset !important;
  display: block !important;
}
product-info .product__title::before {
  content: '// ARCHALIGN  ·  2026 SERIES' !important;
  display: block !important;
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.22em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}
@media (max-width: 749px) {
  product-info .product__title { font-size: 22px !important; }
}

/* ===== 5. PRICE + BADGES ===== */
product-info .price,
product-info .price__container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  font-family: var(--pdp-mono) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--pdp-gold) !important;
  margin: 0 0 8px !important;
}
product-info .price__regular,
product-info .price__sale,
product-info .price__last { font-family: var(--pdp-mono) !important; color: var(--pdp-gold) !important; font-size: 18px !important; }
product-info .price-item--regular,
product-info .price-item--sale,
product-info .price-item--last,
product-info .price-item { color: var(--pdp-gold) !important; font-size: 18px !important; font-family: var(--pdp-mono) !important; }
product-info .price__regular .price-item--regular { font-size: 18px !important; }

/* Sale/sold-out badge — proper pill */
product-info .price__badge-sale,
product-info .price__badge-sold-out,
product-info .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: rgba(201, 169, 110, 0.12) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  color: var(--pdp-gold) !important;
  border-radius: 0 !important;
  height: auto !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Tax line ===== */
product-info .product__tax,
product-info .product__tax.caption.rte {
  font: 10px/1.4 var(--pdp-mono) !important;
  color: var(--pdp-ash) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 4px 0 24px !important;
  padding: 0 !important;
}

/* ===== 6. VARIANT GRID — chips (NOT circles) ===== */
product-info variant-selects,
product-info .product-form__input {
  display: block !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
product-info variant-selects { display: flex !important; flex-direction: column !important; gap: 16px !important; }
product-info .product-form__input fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }
product-info .product-form__input .form__label,
product-info .product-form__input legend {
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-ash) !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* Radio swatches — turn into chip pills */
product-info .product-form__input input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; }
product-info .product-form__input input[type="radio"] + label,
product-info .product-form__input input[type="radio"] + label.swatch,
product-info .product-form__input .swatch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 86px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 14px !important;
  margin: 0 6px 6px 0 !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  background: rgba(245, 234, 212, 0.03) !important;
  color: var(--pdp-bone) !important;
  font: 10px/1 var(--pdp-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  width: auto !important;
}
product-info .product-form__input input[type="radio"]:checked + label,
product-info .product-form__input input[type="radio"]:checked + label.swatch {
  background: var(--pdp-gold) !important;
  color: var(--pdp-void) !important;
  border-color: var(--pdp-gold) !important;
  box-shadow: 0 0 0 1px var(--pdp-gold) inset !important;
}
product-info .product-form__input input[type="radio"]:disabled + label,
product-info .product-form__input input[type="radio"][disabled] + label {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  color: var(--pdp-ash) !important;
}
product-info .product-form__input input[type="radio"]:hover + label {
  border-color: var(--pdp-gold) !important;
  background: rgba(201, 169, 110, 0.08) !important;
}

/* Select dropdowns (if any) */
product-info select,
product-info .select__select {
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--pdp-ink) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  color: var(--pdp-bone) !important;
  font: 11px/1 var(--pdp-mono) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--pdp-gold) 50%), linear-gradient(135deg, var(--pdp-gold) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* ===== 7. NOTIFY ME / ADD TO CART — gold-gradient pulse ===== */
/* Kill ALL prior ::before / ::after content from older patches */
product-info .product-form__submit::before,
product-info .product-form__submit::after,
product-info button[name="add"]::before,
product-info button[name="add"]::after,
product-info .product-form__buttons button::before,
product-info .product-form__buttons button::after { content: none !important; }

product-info .product-form,
product-info .product-form__buttons,
product-info product-form { display: block !important; width: 100% !important; margin: 8px 0 16px !important; }

product-info .product-form__submit,
product-info button[name="add"],
product-info .product-form__buttons .button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px 24px !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, var(--pdp-gold) 0%, var(--pdp-gold-bright) 50%, var(--pdp-gold) 100%) !important;
  background-size: 200% 100% !important;
  border: 1px solid var(--pdp-gold) !important;
  color: var(--pdp-void) !important;
  font-family: var(--pdp-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-align: center !important;
  position: relative !important;
  transform: none !important;
}
product-info .product-form__submit:hover,
product-info button[name="add"]:hover {
  background-position: 100% 50% !important;
  box-shadow: 0 0 20px var(--pdp-gold-glow) !important;
}

/* When disabled (pre-launch product), the button IS the NOTIFY ME CTA */
product-info .product-form__submit[disabled],
product-info button[name="add"][disabled] {
  animation: archPdpNotifyPulse 2.6s ease-in-out infinite !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
product-info .product-form__submit[disabled] span,
product-info button[name="add"][disabled] span {
  display: none !important;
}
product-info .product-form__submit[disabled]::before,
product-info button[name="add"][disabled]::before {
  content: '—‰  SOLD OUT \2014  RESTOCKING  †’' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
  letter-spacing: inherit !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
}
@keyframes archPdpNotifyPulse {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 var(--pdp-gold-glow); }
  50%      { background-position: 100% 50%; box-shadow: 0 0 24px var(--pdp-gold-glow); }
}

/* ===== 8. SHOP PAY HIDE (lavender doesn't match dark brand) ===== */
product-info .shopify-payment-button,
product-info shop-pay-wallet-button,
product-info [data-shopify="payment-button"],
product-info .shopify-payment-button__button,
product-info .shopify-payment-button__more-options { display: none !important; }

/* ===== 9. TRUST FOOTER STRIP — via info container ::after ===== */
product-info .product__info-container::after {
  content: '★★★★★  ·  TRUSTPILOT  ·  14-DAY RETURNS  ·  UK SHIPPING  ·  FOUNDER-REVIEWED' !important;
  display: block !important;
  font: 9px/1.5 var(--pdp-mono) !important;
  letter-spacing: 0.14em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-top: 1px solid var(--pdp-gold-dim) !important;
  padding: 16px 0 0 !important;
  margin: 24px 0 0 !important;
  width: 100% !important;
}

/* Built-in "Secure checkout · UK shipping · Founder-reviewed" caption — hide because ::after replaces it */
product-info .product__info-container > p:last-of-type:not(.product__tax) { display: none !important; }

/* ===== 10. DESCRIPTION — full-width below grid on desktop, inline on mobile ===== */
@media (min-width: 750px) {
  product-info .product__description {
    grid-area: desc !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid var(--pdp-gold-dim) !important;
    column-count: 2 !important;
    column-gap: 48px !important;
    column-rule: 1px solid var(--pdp-gold-dim) !important;
  }
}
@media (max-width: 749px) {
  product-info .product__description {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--pdp-gold-dim) !important;
    column-count: 1 !important;
  }
}
product-info .product__description {
  font: 13px/1.6 var(--pdp-sans) !important;
  color: var(--pdp-bone) !important;
  text-align: left !important;
}
product-info .product__description h2,
product-info .product__description h3,
product-info .product__description strong:first-child {
  font: 600 10px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  margin: 16px 0 8px !important;
  display: block !important;
}
/* Hide first heading if it duplicates the product title (Shopify often does this) */
product-info .product__description > *:first-child:not(p) { display: none !important; }
product-info .product__description p { margin: 0 0 12px !important; color: var(--pdp-bone) !important; }
product-info .product__description strong { color: var(--pdp-gold) !important; font-weight: 600 !important; }
product-info .product__description ul { padding: 0 0 0 16px !important; margin: 8px 0 12px !important; }
product-info .product__description li { color: var(--pdp-bone) !important; margin: 0 0 4px !important; }

/* ===== 11. ACCORDION (if details/summary used) ===== */
product-info details {
  border-bottom: 1px solid var(--pdp-gold-dim) !important;
  padding: 0 !important;
  margin: 0 !important;
}
product-info details summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 !important;
  font: 10px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
  border: 0 !important;
}
product-info details summary::-webkit-details-marker { display: none !important; }
product-info details summary::after {
  content: '+' !important;
  font: 16px/1 var(--pdp-mono) !important;
  color: var(--pdp-gold) !important;
  transition: transform 0.25s ease !important;
}
product-info details[open] summary::after { content: '×' !important; }
product-info details > *:not(summary) {
  padding: 0 0 16px !important;
  font: 12px/1.55 var(--pdp-sans) !important;
  color: var(--pdp-bone) !important;
}

/* ===== 12. CURRENCY PICKER CAP (was running off-screen) ===== */
.disclosure__list,
.localization-form__list {
  max-height: 50vh !important;
  overflow-y: auto !important;
  background: var(--pdp-ink) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
}
.disclosure__list li,
.localization-form__list li { color: var(--pdp-bone) !important; }

/* ===== 13. BREADCRUMB (above image) — tighten and brand ===== */
.template-product .breadcrumb,
.template-product nav[class*="breadcrumb"] {
  font: 9px/1.4 var(--pdp-mono) !important;
  letter-spacing: 0.16em !important;
  color: var(--pdp-ash) !important;
  text-transform: uppercase !important;
  padding: 16px 40px 8px !important;
  margin: 0 !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.template-product .breadcrumb a { color: var(--pdp-gold) !important; text-decoration: none !important; }
@media (max-width: 749px) { .template-product .breadcrumb { padding: 12px var(--pdp-gutter-mob) 4px !important; } }

/* ============================================================================
   END ARCHALIGN PDP MODULE
   ============================================================================ */



   /* ============================================================================
   ARCHALIGN PDP REBUILD v2 - 2026-05-23
   ----------------------------------------------------------------------------
   v1 failures fixed:
     - Tokens were scoped to .template-product (class doesn't exist on body)
       -> moved to :root so they always resolve
     - Pseudo-element content used raw Unicode characters
       -> replaced with CSS escape sequences (e.g. \25CF for circle dot)
     - v40 (collection card images) + v41 (futureblink currency) were
       dropped on the overwrite -> restored at the END of this file
   ============================================================================ */

/* ===== 0. TOKENS (global - all --pdp-* prefixed so won't collide) ===== */
:root {
  --pdp-void:        #0a0908;
  --pdp-deep:        #14110d;
  --pdp-ink:         #1a1612;
  --pdp-gold:        #c9a96e;
  --pdp-gold-bright: #d4b97a;
  --pdp-gold-dim:    rgba(201, 169, 110, 0.4);
  --pdp-gold-glow:   rgba(201, 169, 110, 0.18);
  --pdp-bone:        #f5ead4;
  --pdp-ash:         rgba(245, 234, 212, 0.6);
  --pdp-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pdp-serif:       'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
  --pdp-sans:        -apple-system, 'Helvetica Neue', 'Inter', sans-serif;
}

/* ===== 1. LAYOUT ===== */
@media (min-width: 750px) {
  product-info .product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "media info" "desc desc" !important;
    column-gap: 64px !important;
    row-gap: 48px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 32px 40px !important;
    align-items: start !important;
  }
  product-info .product__media-wrapper {
    grid-area: media !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  product-info .product__info-wrapper {
    grid-area: info !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 749px) {
  product-info .product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px 32px !important;
    margin: 0 !important;
    grid-template: none !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
  }
  product-info .product__media-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    position: static !important;
    grid-area: unset !important;
    aspect-ratio: 1 / 1 !important;
  }
  product-info .product__info-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    grid-area: unset !important;
    order: unset !important;
  }
}

product-info .product__info-container,
product-info .product__info-wrapper > section,
product-info .product__info-wrapper > .product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

product-info .product__info-container > *,
product-info .product__info-wrapper > section > * {
  order: unset !important;
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* ===== 2. IMAGE CARD ===== */
product-info .product__media-wrapper {
  background: radial-gradient(circle at 50% 35%, var(--pdp-ink) 0%, var(--pdp-void) 80%) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4), inset 0 0 60px var(--pdp-gold-glow) !important;
  overflow: hidden !important;
}
product-info .product__media-list { display: block !important; gap: 0 !important; }
product-info .product__media-item { aspect-ratio: 1 / 1 !important; max-height: none !important; background: transparent !important; }
product-info .product__media,
product-info .product__media .media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  aspect-ratio: 1 / 1 !important;
}
product-info .product__media img,
product-info .product__media-item img,
product-info .product__media picture img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

product-info .thumbnail-list { display: flex !important; gap: 6px !important; margin-top: 12px !important; padding: 0 !important; flex-wrap: wrap !important; justify-content: center !important; }
product-info .thumbnail { width: 48px !important; height: 48px !important; border: 1px solid var(--pdp-gold-dim) !important; padding: 0 !important; background: var(--pdp-ink) !important; overflow: hidden !important; }
product-info .thumbnail.is-active { border-color: var(--pdp-gold) !important; }
product-info .thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ===== 3. STATUS HEADER STRIP (CSS escape codes - no Unicode in source) ===== */
/* \25C9 = fisheye, \2014 = em-dash, \00B7 = middot, \00B0 = degree */
product-info .product__info-container::before {
  content: '\25C9   ARCH-04   \2014   LDN 51.5074\00B0N \00B7 0.1278\00B0W   \2014   IN STOCK' !important;
  display: block !important;
  font: 9px/1.4 var(--pdp-mono) !important;
  letter-spacing: 0.18em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--pdp-gold-dim) !important;
  padding: 0 0 10px !important;
  margin: 0 0 20px !important;
  width: 100% !important;
  order: -1000 !important;
}

/* ===== 4. TITLE ===== */
product-info .product__title {
  font-family: var(--pdp-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--pdp-bone) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  order: unset !important;
  display: block !important;
}
product-info .product__title::before {
  content: '// ARCHALIGN   \00B7   2026 SERIES' !important;
  display: block !important;
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.22em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}
@media (max-width: 749px) {
  product-info .product__title { font-size: 22px !important; }
}

/* ===== 5. PRICE + BADGES ===== */
product-info .price,
product-info .price__container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  font-family: var(--pdp-mono) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--pdp-gold) !important;
  margin: 0 0 8px !important;
}
product-info .price__regular,
product-info .price__sale,
product-info .price__last { font-family: var(--pdp-mono) !important; color: var(--pdp-gold) !important; font-size: 18px !important; }
product-info .price-item--regular,
product-info .price-item--sale,
product-info .price-item--last,
product-info .price-item { color: var(--pdp-gold) !important; font-size: 18px !important; font-family: var(--pdp-mono) !important; }

product-info .price__badge-sale,
product-info .price__badge-sold-out,
product-info .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: rgba(201, 169, 110, 0.12) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  color: var(--pdp-gold) !important;
  border-radius: 0 !important;
  height: auto !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

product-info .product__tax,
product-info .product__tax.caption.rte {
  font: 10px/1.4 var(--pdp-mono) !important;
  color: var(--pdp-ash) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 4px 0 24px !important;
  padding: 0 !important;
}

/* ===== 6. VARIANT GRID (chips) ===== */
product-info variant-selects {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
product-info .product-form__input {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
product-info .product-form__input fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }
product-info .product-form__input .form__label,
product-info .product-form__input legend,
product-info .product-form__input fieldset legend {
  font: 9px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-ash) !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

product-info .product-form__input input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
product-info .product-form__input input[type="radio"] + label,
product-info .product-form__input input[type="radio"] + label.swatch,
product-info .product-form__input .swatch,
product-info .product-form__input label.swatch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 92px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 14px !important;
  margin: 0 6px 6px 0 !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  background: rgba(245, 234, 212, 0.03) !important;
  color: var(--pdp-bone) !important;
  font: 10px/1.2 var(--pdp-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  width: auto !important;
  overflow: visible !important;
  flex-direction: row !important;
}
product-info .product-form__input input[type="radio"]:checked + label,
product-info .product-form__input input[type="radio"]:checked + label.swatch {
  background: var(--pdp-gold) !important;
  color: var(--pdp-void) !important;
  border-color: var(--pdp-gold) !important;
  box-shadow: 0 0 0 1px var(--pdp-gold) inset !important;
}
product-info .product-form__input input[type="radio"]:disabled + label,
product-info .product-form__input input[type="radio"][disabled] + label {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  color: var(--pdp-ash) !important;
}
product-info .product-form__input input[type="radio"]:hover + label {
  border-color: var(--pdp-gold) !important;
  background: rgba(201, 169, 110, 0.08) !important;
}
/* Hide the "Variant sold out" caption injected by the theme */
product-info .product-form__input input[type="radio"] + label .visually-hidden,
product-info .product-form__input input[type="radio"] + label > span:not(.swatch-label) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

product-info select,
product-info .select__select {
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--pdp-ink) !important;
  border: 1px solid var(--pdp-gold-dim) !important;
  color: var(--pdp-bone) !important;
  font: 11px/1 var(--pdp-mono) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ===== 7. NOTIFY ME / ADD TO CART (gold-gradient pulse) ===== */
product-info .product-form__submit::before,
product-info .product-form__submit::after,
product-info button[name="add"]::before,
product-info button[name="add"]::after,
product-info .product-form__buttons button::before,
product-info .product-form__buttons button::after { content: none !important; }

product-info .product-form,
product-info .product-form__buttons,
product-info product-form { display: block !important; width: 100% !important; margin: 8px 0 16px !important; }

product-info .product-form__submit,
product-info button[name="add"],
product-info .product-form__buttons .button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px 24px !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, var(--pdp-gold) 0%, var(--pdp-gold-bright) 50%, var(--pdp-gold) 100%) !important;
  background-size: 200% 100% !important;
  border: 1px solid var(--pdp-gold) !important;
  color: var(--pdp-void) !important;
  font-family: var(--pdp-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-align: center !important;
  position: relative !important;
  transform: none !important;
}
product-info .product-form__submit:hover,
product-info button[name="add"]:hover {
  background-position: 100% 50% !important;
  box-shadow: 0 0 20px var(--pdp-gold-glow) !important;
}

product-info .product-form__submit[disabled],
product-info button[name="add"][disabled] {
  animation: archPdpNotifyPulse 2.6s ease-in-out infinite !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
product-info .product-form__submit[disabled] span,
product-info button[name="add"][disabled] span {
  display: none !important;
}
/* \25C9 = fisheye, \2192 = rightwards arrow */
product-info .product-form__submit[disabled]::before,
product-info button[name="add"][disabled]::before {
  content: '\25C9   SOLD OUT \2014  RESTOCKING   \2192' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
  letter-spacing: inherit !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
}
@keyframes archPdpNotifyPulse {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 var(--pdp-gold-glow); }
  50%      { background-position: 100% 50%; box-shadow: 0 0 24px var(--pdp-gold-glow); }
}

/* ===== 8. SHOP PAY HIDE ===== */
product-info .shopify-payment-button,
product-info shop-pay-wallet-button,
product-info [data-shopify="payment-button"],
product-info .shopify-payment-button__button,
product-info .shopify-payment-button__more-options { display: none !important; }

/* ===== 9. TRUST FOOTER STRIP ===== */
/* \2605 = black star */
product-info .product__info-container::after {
  content: '\2605 \2605 \2605 \2605 \2605   \00B7   TRUSTPILOT   \00B7   14-DAY RETURNS   \00B7   UK SHIPPING   \00B7   FOUNDER-REVIEWED' !important;
  display: block !important;
  font: 9px/1.5 var(--pdp-mono) !important;
  letter-spacing: 0.14em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-top: 1px solid var(--pdp-gold-dim) !important;
  padding: 16px 0 0 !important;
  margin: 24px 0 0 !important;
  width: 100% !important;
}

/* ===== 10. DESCRIPTION ===== */
@media (min-width: 750px) {
  product-info .product__description {
    grid-area: desc !important;
    width: 100% !important;
    margin: 32px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid var(--pdp-gold-dim) !important;
    column-count: 2 !important;
    column-gap: 48px !important;
  }
}
@media (max-width: 749px) {
  product-info .product__description {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--pdp-gold-dim) !important;
    column-count: 1 !important;
  }
}
product-info .product__description {
  font: 13px/1.6 var(--pdp-sans) !important;
  color: var(--pdp-bone) !important;
  text-align: left !important;
}
product-info .product__description h2,
product-info .product__description h3,
product-info .product__description strong:first-child {
  font: 600 10px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  margin: 16px 0 8px !important;
  display: block !important;
}
product-info .product__description p { margin: 0 0 12px !important; color: var(--pdp-bone) !important; }
product-info .product__description strong { color: var(--pdp-gold) !important; font-weight: 600 !important; }
product-info .product__description ul { padding: 0 0 0 16px !important; margin: 8px 0 12px !important; }
product-info .product__description li { color: var(--pdp-bone) !important; margin: 0 0 4px !important; }

/* ===== 11. ACCORDION ===== */
product-info details {
  border-bottom: 1px solid var(--pdp-gold-dim) !important;
  padding: 0 !important;
  margin: 0 !important;
}
product-info details summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 !important;
  font: 10px/1 var(--pdp-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--pdp-gold) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
  border: 0 !important;
}
product-info details summary::-webkit-details-marker { display: none !important; }
product-info details summary::after {
  content: '+' !important;
  font: 16px/1 var(--pdp-mono) !important;
  color: var(--pdp-gold) !important;
  transition: transform 0.25s ease !important;
}
/* \00D7 = multiplication sign (used as X close) */
product-info details[open] summary::after { content: '\00D7' !important; }
product-info details > *:not(summary) {
  padding: 0 0 16px !important;
  font: 12px/1.55 var(--pdp-sans) !important;
  color: var(--pdp-bone) !important;
}

/* ===== 12. RESTORED v40 - Collection card images on mobile ===== */
@media (max-width: 749px) {
  html:not(#z) body:not(#z) main#MainContent .card-wrapper .card__media .media,
  html:not(#z) body:not(#z) main#MainContent .grid__item .card__media .media,
  html:not(#z) body:not(#z) main#MainContent .card__media .media {
    position: static !important;
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
  html:not(#z) body:not(#z) main#MainContent .card-wrapper .card__media img,
  html:not(#z) body:not(#z) main#MainContent .grid__item .card__media img,
  html:not(#z) body:not(#z) main#MainContent .card__media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
  }
}

/* ===== 13. RESTORED v41 - futureblink currency picker ===== */
html:not(#z) body:not(#z) .currency-switcher {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: rgb(245, 234, 212) !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(201, 169, 110, 0.22) !important;
  border-radius: 4px !important;
  background: rgba(8, 7, 6, 0.5) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
html:not(#z) body:not(#z) .currency-switcher:hover {
  background: rgba(8, 7, 6, 0.8) !important;
  border-color: rgba(201, 169, 110, 0.5) !important;
}
html:not(#z) body:not(#z) .currency-switcher svg,
html:not(#z) body:not(#z) .currency-switcher img { width: 14px !important; height: 14px !important; }

html:not(#z) body:not(#z) .futureblink-currency-dropdown {
  max-height: 50vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(8, 7, 6, 0.96) !important;
  border: 1px solid rgba(201, 169, 110, 0.28) !important;
  border-radius: 6px !important;
  padding: 4px 0 !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
  z-index: 9999 !important;
  width: 200px !important;
  max-width: 90vw !important;
}
html:not(#z) body:not(#z) .futureblink-currency-dropdown::-webkit-scrollbar { width: 4px !important; }
html:not(#z) body:not(#z) .futureblink-currency-dropdown::-webkit-scrollbar-track { background: transparent !important; }
html:not(#z) body:not(#z) .futureblink-currency-dropdown::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 110, 0.4) !important;
  border-radius: 2px !important;
}
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option {
  padding: 10px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  color: rgb(245, 234, 212) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.06) !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 38px !important;
}
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option:last-child { border-bottom: 0 !important; }
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option:hover {
  background: rgba(201, 169, 110, 0.12) !important;
  color: rgb(232, 200, 130) !important;
}
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option.selected,
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option.active {
  background: rgba(201, 169, 110, 0.18) !important;
  color: rgb(232, 200, 130) !important;
}
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option img,
html:not(#z) body:not(#z) .futureblink-currency-dropdown .option svg {
  width: 18px !important;
  height: auto !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  border-radius: 2px !important;
}
@media (max-width: 749px) {
  html:not(#z) body:not(#z) .futureblink-currency-dropdown { width: 180px !important; max-height: 60vh !important; }
  html:not(#z) body:not(#z) .futureblink-currency-dropdown .option { padding: 12px 14px !important; min-height: 44px !important; font-size: 13px !important; }
}

/* ============================================================================
   END ARCHALIGN PDP REBUILD v2
   ============================================================================ */


/* === v3-v11 PDP rebuild attempts removed 2026-05-23 (were breaking image render) === */

/* ============================================================================
   ARCHALIGN PDP v67 — EMERGENCY ROOT-CAUSE FIX 2026-05-24
   Root cause: .product__media-wrapper had `inset: 0px` applied (with
   position:relative) which combined with parent .product `height:970px;
   overflow:hidden` was pushing the image y=-475 above viewport.
   ALSO: NOTIFY ME ::before color: inherit was reading from a gold-color
   parent so text was gold-on-gold (invisible). Forces dark text.
   ============================================================================ */

/* 1. UN-POSITION the media wrapper so image flows normally */
html body main#MainContent product-info .product__media-wrapper,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-wrapper {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  margin: 0 0 24px !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Make the .product container stack normally on mobile */
@media (max-width: 989px) {
  html body main#MainContent product-info .product,
  html:not(#z) body:not(#z) main#MainContent product-info .product {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body main#MainContent product-info .product .product__media-wrapper,
  html:not(#z) body:not(#z) main#MainContent product-info .product .product__media-wrapper {
    order: 1 !important;
  }
  html body main#MainContent product-info .product .product__info-wrapper,
  html:not(#z) body:not(#z) main#MainContent product-info .product .product__info-wrapper {
    order: 2 !important;
  }
}

/* 3. Image must fill its wrapper with object-fit */
html body main#MainContent product-info .product__media-list,
html body main#MainContent product-info .product__media-item,
html body main#MainContent product-info .product-media-container,
html body main#MainContent product-info .product__media,
html body main#MainContent product-info modal-opener.product__modal-opener {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
html body main#MainContent product-info .product__media-item img {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* 4. Container heights — let layout grow */
html body main#MainContent product-info,
html body main#MainContent product-info section,
html body main#MainContent product-info .page-width,
html body main#MainContent product-info .product__info-wrapper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 5. NOTIFY ME — restore visible gradient + DARK text (was gold-on-gold) */
html body main#MainContent product-info .product-form__submit,
html body main#MainContent product-info button[name="add"],
html body main#MainContent product-info .product-form__submit[disabled],
html body main#MainContent product-info button[name="add"][disabled] {
  background: linear-gradient(135deg, rgb(201,169,110) 0%, rgb(218,189,134) 50%, rgb(201,169,110) 100%) !important;
  background-size: 200% 200% !important;
  background-color: rgb(201,169,110) !important;
  color: rgb(20,17,13) !important;
  border: 1px solid rgb(201,169,110) !important;
}
/* Force the ::before label visible: dark text on gold gradient */
html body main#MainContent product-info .product-form__submit[disabled]::before,
html body main#MainContent product-info button[name="add"][disabled]::before {
  color: rgb(20,17,13) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
}

/* 6. Hide duplicate price (badge with same price as regular) */
html body main#MainContent product-info .price--sold-out .price-item--regular + .price-item--regular,
html body main#MainContent product-info .price__sale,
html body main#MainContent product-info .price__badge-sale {
  display: none !important;
}

/* ============================================================================
   END v67 EMERGENCY FIX
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v68 — STOP CLIPPING THE INFO-WRAPPER 2026-05-24
   v67 freed the image but the .product container still has height:970px
   and section.shopify-section + main#MainContent have overflow:hidden,
   clipping the info-wrapper (title/price/CTA/description) at viewport
   bottom. This forces height:auto + overflow:visible up the chain.
   ============================================================================ */

html body main#MainContent:has(product-info),
html body main#MainContent.has-pdp,
html:not(#z) body:not(#z) main#MainContent:has(product-info) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body main#MainContent section.shopify-section:has(product-info),
html body main#MainContent section.shopify-section product-info,
html:not(#z) body:not(#z) section.shopify-section:has(product-info) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
}

html body main#MainContent product-info,
html:not(#z) body:not(#z) main#MainContent product-info {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

html body main#MainContent product-info .page-width,
html body main#MainContent product-info .product,
html body main#MainContent product-info .product.product--large,
html:not(#z) body:not(#z) main#MainContent product-info .product {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

html body main#MainContent product-info .product__info-wrapper,
html:not(#z) body:not(#z) main#MainContent product-info .product__info-wrapper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================================
   END v68
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v69 — OVERRIDE BODY GRID ON PDP 2026-05-24
   Root cause for clipped CTA/description: body { display:grid;
   grid-template-rows: 25 80 28 649 0 0 } caps main at 649px so content
   beyond 999px logical (= 649 rendered with zoom .65) is invisible
   because there's no room to scroll past body's intrinsic height.
   Fix: on PDP only, switch body to display:block so main can grow.
   ============================================================================ */

html body:has(product-info) {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  overflow: hidden auto !important;
}
html body:has(product-info) main#MainContent {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ============================================================================
   END v69
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v70 — KILL ASPECT-RATIO 1/1 ON .product 2026-05-24
   THE ROOT CAUSE of the clipped PDP scroll. `.product` has aspect-ratio:1/1
   somewhere in the cascade, forcing height = width. With width 954 logical
   the height is locked to 954, even though info-wrapper inside is 1312px
   tall. The clip wasn't from overflow:hidden, it was the parent literally
   sized to a square. Killing aspect-ratio lets the parent grow to content.
   ============================================================================ */

html body main#MainContent product-info .product,
html body main#MainContent product-info .product.product--large,
html body main#MainContent product-info .product[class*="product--"],
html:not(#z) body:not(#z) main#MainContent product-info .product {
  aspect-ratio: auto !important;
  contain: none !important;
}

/* Also reset for any nested grid/page-width that might inherit */
html body main#MainContent product-info .page-width,
html body main#MainContent product-info section,
html body main#MainContent product-info {
  aspect-ratio: auto !important;
}

/* ============================================================================
   END v70 — PDP is now scrollable. Final piece of the puzzle.
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v71 — SINGLE-PAGE 2-COL LAYOUT 2026-05-24
   Per user: image LEFT (≤30% width), info RIGHT, entire PDP fits in 100vh,
   NO scrolling. Description/accordion/trust-footer hidden — focused
   conversion page only. Adds prev/next product navigation arrows.
   ============================================================================ */

/* Lock body to viewport — no scroll on PDP */
html:has(product-info),
html body:has(product-info) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

html body:has(product-info) main#MainContent {
  height: calc(100vh - var(--arch-header-h, 110px)) !important;
  max-height: calc(100vh - var(--arch-header-h, 110px)) !important;
  overflow: hidden !important;
  zoom: 1 !important; /* override the global 0.65 zoom so layout is true */
}

html body:has(product-info) section.shopify-section:has(product-info),
html body:has(product-info) product-info {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

html body:has(product-info) product-info .page-width {
  height: 100% !important;
  max-height: 100% !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 2-COL LAYOUT — image LEFT (28%), info RIGHT (rest) */
html body:has(product-info) main#MainContent product-info .product {
  display: grid !important;
  grid-template-columns: minmax(220px, 28%) 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "media info" !important;
  gap: 32px !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* Media wrapper — LEFT, image-sized to fit panel */
html body:has(product-info) main#MainContent product-info .product__media-wrapper {
  grid-area: media !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgb(248, 245, 238) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

html body:has(product-info) main#MainContent product-info .product__media-list,
html body:has(product-info) main#MainContent product-info .product__media-item,
html body:has(product-info) main#MainContent product-info .product-media-container,
html body:has(product-info) main#MainContent product-info .product__media,
html body:has(product-info) main#MainContent product-info .product__media-item modal-opener {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

html body:has(product-info) main#MainContent product-info .product__media-item img {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}

/* Info wrapper — RIGHT, full height, content stacked */
html body:has(product-info) main#MainContent product-info .product__info-wrapper {
  grid-area: info !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  background: rgb(20, 17, 13) !important;
  border: 1px solid rgba(201, 169, 110, 0.18) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
}

html body:has(product-info) main#MainContent product-info .product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* TIGHTEN typography — fit everything in one screen */
html body:has(product-info) main#MainContent product-info .product__title h1,
html body:has(product-info) main#MainContent product-info .product__title .h1,
html body:has(product-info) main#MainContent product-info .product__title h2 {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.03em !important;
}

html body:has(product-info) main#MainContent product-info .price {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}

html body:has(product-info) main#MainContent product-info .price .price-item--regular {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}

html body:has(product-info) main#MainContent product-info .product-form,
html body:has(product-info) main#MainContent product-info .product-form__buttons {
  margin: 8px 0 !important;
}

html body:has(product-info) main#MainContent product-info .product-form__submit,
html body:has(product-info) main#MainContent product-info button[name="add"] {
  font-size: 12px !important;
  padding: 16px !important;
  min-height: 48px !important;
  letter-spacing: 0.25em !important;
}
html body:has(product-info) main#MainContent product-info .product-form__submit[disabled]::before,
html body:has(product-info) main#MainContent product-info button[name="add"][disabled]::before {
  font-size: 12px !important;
}

/* HIDE the long-form content for focused conversion view */
html body:has(product-info) main#MainContent product-info .product__description,
html body:has(product-info) main#MainContent product-info details,
html body:has(product-info) main#MainContent product-info .product__accordion,
html body:has(product-info) main#MainContent product-info .product__view-details,
html body:has(product-info) main#MainContent product-info .product__tax,
html body:has(product-info) main#MainContent product-info .product__info-container::after {
  display: none !important;
}

/* Hide sticky CTA footer on PDP (already have NOTIFY ME) */
html body:has(product-info) .arch-sticky-cta,
html body:has(product-info) footer.footer,
html body:has(product-info) .shopify-section-group-footer-group {
  display: none !important;
}

/* PREV / NEXT PRODUCT NAVIGATION — overlaid on image card */
html body:has(product-info) main#MainContent product-info .product__media-wrapper::before,
html body:has(product-info) main#MainContent product-info .product__media-wrapper::after {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgb(201, 169, 110) !important;
  background: rgba(20, 17, 13, 0.7) !important;
  border: 1px solid rgba(201, 169, 110, 0.32) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  user-select: none !important;
}
html body:has(product-info) main#MainContent product-info .product__media-wrapper::before {
  content: '\2039' !important; /* ‹ */
  left: 12px !important;
}
html body:has(product-info) main#MainContent product-info .product__media-wrapper::after {
  content: '\203A' !important; /* › */
  right: 12px !important;
}
html body:has(product-info) main#MainContent product-info .product__media-wrapper:hover::before,
html body:has(product-info) main#MainContent product-info .product__media-wrapper:hover::after {
  background: rgba(20, 17, 13, 0.92) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* Floating click targets (real anchor tags injected by JS in theme.liquid) */
.arch-pdp-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 22px !important;
  color: rgb(201, 169, 110) !important;
  background: rgba(20, 17, 13, 0.7) !important;
  border: 1px solid rgba(201, 169, 110, 0.32) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  backdrop-filter: blur(4px) !important;
}
.arch-pdp-nav--prev { left: 12px !important; }
.arch-pdp-nav--next { right: 12px !important; }
.arch-pdp-nav:hover {
  background: rgba(20, 17, 13, 0.92) !important;
  transform: translateY(-50%) scale(1.08) !important;
  color: rgb(232, 200, 130) !important;
}
/* Hide the CSS-only pseudo arrows when real anchors are injected */
html body:has(.arch-pdp-nav--prev) main#MainContent product-info .product__media-wrapper::before,
html body:has(.arch-pdp-nav--next) main#MainContent product-info .product__media-wrapper::after {
  display: none !important;
}

/* Mobile (narrow) — stack image above info instead of side-by-side */
@media (max-width: 599px) {
  html body:has(product-info) main#MainContent product-info .product {
    grid-template-columns: 1fr !important;
    grid-template-rows: 40% 1fr !important;
    grid-template-areas: "media" "info" !important;
    gap: 12px !important;
  }
  html body:has(product-info) main#MainContent product-info .product__info-wrapper {
    padding: 16px 18px !important;
  }
}

/* ============================================================================
   END v71
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v71b — SPECIFICITY BOOST + KILL MOBILE STACK 2026-05-24
   v67's @media (max-width:989) { .product { display: block !important } }
   was beating v71's no-media grid rule at mobile viewports. Boost specificity
   with multiple id chains and use the same @media to win cascade.
   ============================================================================ */

@media (max-width: 989px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 30%) 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "media info" !important;
    gap: 16px !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
}

/* Force the same on every viewport */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
html body main#MainContent product-info .product.product--large.grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 30%) 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "media info" !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

/* Make sure media + info wrappers obey grid-area */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  grid-area: media !important;
  order: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
  grid-area: info !important;
  order: 2 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Mobile narrow: stack vertically */
@media (max-width: 599px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 35% 1fr !important;
    grid-template-areas: "media" "info" !important;
  }
}

/* ============================================================================
   END v71b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v71c — POLISH: bigger image, hide thumbs, tight info 2026-05-24
   ============================================================================ */

/* Hide thumbnail strip — only main slide visible (more image room) */
html body main#MainContent product-info .thumbnail-list,
html body main#MainContent product-info .thumbnail-slider,
html body main#MainContent product-info slider-component[id*="GalleryThumbnails"],
html body main#MainContent product-info .product__media-toggle,
html body main#MainContent product-info nav[aria-label*="thumbnail" i],
html body main#MainContent product-info ul.thumbnail-list,
html body main#MainContent product-info ol.thumbnail-list {
  display: none !important;
}

/* Image fills its panel — single product image, contain to keep aspect */
html body main#MainContent product-info .product__media-item img,
html body main#MainContent product-info .product__media-item .media img {
  position: absolute !important;
  inset: 4% !important;
  width: 92% !important;
  height: 92% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
}

/* Image wrapper background — clean cream card */
html body main#MainContent product-info .product__media-wrapper {
  background: linear-gradient(135deg, rgb(248, 245, 238) 0%, rgb(240, 234, 222) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.18) !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Only show the active slide */
html body main#MainContent product-info .product__media-list .product__media-item:not(.is-active),
html body main#MainContent product-info .product__media-item:nth-of-type(n+2) {
  display: none !important;
}
html body main#MainContent product-info .product__media-list .product__media-item:first-of-type,
html body main#MainContent product-info .product__media-list .product__media-item.is-active {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* Info wrapper — tighten, even spacing throughout, fill height */
html body main#MainContent product-info .product__info-wrapper {
  padding: 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgb(20, 17, 13) !important;
  border: 1px solid rgba(201, 169, 110, 0.22) !important;
  border-radius: 6px !important;
}

html body main#MainContent product-info .product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Status header strip on top */
html body main#MainContent product-info .product__info-container::before {
  content: '\25C9  ARCH-04  \2014  LDN 51.5074\00B0N  \00B7  0.1278\00B0W  \2014  IN STOCK' !important;
  display: block !important;
  font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important;
  margin-bottom: 4px !important;
}

/* Title block — kicker + title together */
html body main#MainContent product-info .product__title {
  margin: 6px 0 !important;
  padding: 0 !important;
  position: relative !important;
}
html body main#MainContent product-info .product__title::before {
  content: '// ARCHALIGN \00B7 2026 SERIES' !important;
  display: block !important;
  font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.26em !important;
  color: rgba(201, 169, 110, 0.7) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
html body main#MainContent product-info .product__title h1,
html body main#MainContent product-info .product__title .h1,
html body main#MainContent product-info .product__title h2 {
  font-family: 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: rgb(245, 234, 212) !important;
  margin: 0 !important;
}

/* Price block */
html body main#MainContent product-info .price {
  margin: 4px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
html body main#MainContent product-info .price .price__regular,
html body main#MainContent product-info .price .price__sale,
html body main#MainContent product-info .price .price-item--regular {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgb(245, 234, 212) !important;
}

/* Push button + trust strip to bottom of info panel */
html body main#MainContent product-info .product-form {
  margin-top: auto !important;
}
html body main#MainContent product-info .product-form__buttons {
  margin: 4px 0 14px !important;
}

/* Trust strip — bottom of info panel */
html body main#MainContent product-info .product__info-container > :last-child:not(::before) {
  margin-bottom: 0 !important;
}
html body main#MainContent product-info .product-form::after {
  content: '\2605 \2605 \2605 \2605 \2605   \00B7   TRUSTPILOT   \00B7   14-DAY RETURNS   \00B7   UK SHIPPING' !important;
  display: block !important;
  font: 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.2em !important;
  color: rgba(201, 169, 110, 0.7) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(201, 169, 110, 0.14) !important;
  margin-top: 6px !important;
}

/* ============================================================================
   END v71c
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v71d — FIX NAV POSITION + RESTORE TAX NOTE 2026-05-24
   ============================================================================ */

/* Restore the tax/shipping line — user's reference shows it */
html body main#MainContent product-info .product__tax {
  display: block !important;
  font: 9px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.16em !important;
  color: rgba(245, 234, 212, 0.5) !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* Prev/Next nav — absolute on image card, full specificity to win cascade */
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav,
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--prev,
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: rgb(20, 17, 13) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(20, 17, 13, 0.25) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  inset: auto !important;
}
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--prev {
  left: 12px !important;
  right: auto !important;
}
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--next {
  right: 12px !important;
  left: auto !important;
}
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav:hover {
  background: rgb(20, 17, 13) !important;
  color: rgb(201, 169, 110) !important;
  border-color: rgb(201, 169, 110) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

/* ============================================================================
   END v71d
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72 — FILL VIEWPORT + DESCRIPTION PANEL 2026-05-24
   Legacy `html:not(#z) body:not(#z) main#MainContent { zoom: 0.65 }` at line
   10934 had specificity (0,3,0,3) which beat my v71's (0,1,0,4). Result: PDP
   was rendering at 65% zoom, leaving ~230px empty viewport below the card.
   Also: description is hidden; user wants it visible. Add scrollable
   description panel inside info-wrapper below button.
   ============================================================================ */

/* KILL the 0.65 zoom on PDP — match legacy specificity with :not(#z) trick */
html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent,
html:not(#a) body:not(#a):has(product-info) main#MainContent,
html body main#MainContent:has(product-info) {
  zoom: 1 !important;
}

@media (max-width: 749px) {
  html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent {
    zoom: 1 !important;
  }
}
@media (max-width: 414px) {
  html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent {
    zoom: 1 !important;
  }
}

/* Now main fills viewport properly */
html:not(#z) body:not(#z):has(product-info) main#MainContent {
  height: calc(100vh - 130px) !important;
  min-height: calc(100vh - 130px) !important;
  max-height: calc(100vh - 130px) !important;
}

/* RESTORE description — show it inside info panel as scrollable section */
html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 60px !important;
  max-height: 28vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 12px !important;
  margin: 6px 0 8px !important;
  background: rgba(8, 7, 6, 0.45) !important;
  border: 1px solid rgba(201, 169, 110, 0.14) !important;
  border-radius: 4px !important;
  font: 11px/1.55 -apple-system, 'Helvetica Neue', 'Inter', sans-serif !important;
  color: rgba(245, 234, 212, 0.82) !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description::-webkit-scrollbar {
  width: 3px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description::-webkit-scrollbar-track {
  background: transparent !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 110, 0.4) !important;
  border-radius: 2px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description h2,
html:not(#z) body:not(#z) main#MainContent product-info .product__description h3,
html:not(#z) body:not(#z) main#MainContent product-info .product__description h6 {
  font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
  margin: 10px 0 4px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description p {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description strong {
  font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.18em !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
  margin-right: 6px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description ul {
  margin: 4px 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description li {
  padding: 3px 0 !important;
  border-bottom: 1px dashed rgba(201, 169, 110, 0.1) !important;
  font-size: 11px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description li:last-child {
  border-bottom: 0 !important;
}

/* Info-container: distribute space so description gets the middle */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Position description between variants and button */
html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  order: 50 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product-form,
html:not(#z) body:not(#z) main#MainContent product-info noscript {
  order: 60 !important;
  margin-top: 0 !important;
}

/* Tighten everything to leave room for description */
html:not(#z) body:not(#z) main#MainContent product-info .product__title h1,
html:not(#z) body:not(#z) main#MainContent product-info .product__title h2,
html:not(#z) body:not(#z) main#MainContent product-info .product__title .h1 {
  font-size: 22px !important;
  margin: 0 0 2px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .price .price-item--regular,
html:not(#z) body:not(#z) main#MainContent product-info .price .price__regular {
  font-size: 18px !important;
}

/* Variant selectors — compact */
html:not(#z) body:not(#z) main#MainContent product-info variant-radios fieldset,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input {
  margin: 4px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .form__label {
  font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(245, 234, 212, 0.75) !important;
  margin: 0 0 6px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info input[type="radio"] + label {
  font-size: 10px !important;
  padding: 6px 12px !important;
  min-height: 28px !important;
  border-radius: 2px !important;
}

/* Button compact */
html:not(#z) body:not(#z) main#MainContent product-info .product-form__submit,
html:not(#z) body:not(#z) main#MainContent product-info button[name="add"] {
  min-height: 42px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product-form__submit[disabled]::before,
html:not(#z) body:not(#z) main#MainContent product-info button[name="add"][disabled]::before {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
}

/* ============================================================================
   END v72
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72b — COMPACT FOR FIT 2026-05-24
   Info panel was 897px tall in a 619px viewport. Compress swatches +
   spacing to fit description + button + trust strip in viewport.
   ============================================================================ */

/* Swatches — compact grid, smaller cells, all-in-row */
html:not(#z) body:not(#z) main#MainContent product-info variant-radios,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input--swatch,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input--pill {
  margin: 2px 0 !important;
  padding: 0 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input input[type="radio"] + label {
  min-height: 22px !important;
  height: 22px !important;
  min-width: 36px !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  border-radius: 2px !important;
  margin: 0 4px 4px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tighter info-container spacing */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-container {
  gap: 6px !important;
  padding: 0 !important;
}

/* Status header strip — smaller */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-container::before {
  font-size: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.2em !important;
}

/* Tighter title */
html:not(#z) body:not(#z) main#MainContent product-info .product__title {
  margin: 2px 0 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__title::before {
  font-size: 8px !important;
  margin-bottom: 4px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__title h1,
html:not(#z) body:not(#z) main#MainContent product-info .product__title h2,
html:not(#z) body:not(#z) main#MainContent product-info .product__title .h1 {
  font-size: 19px !important;
  line-height: 1.12 !important;
}

/* Tighter price */
html:not(#z) body:not(#z) main#MainContent product-info .price {
  margin: 2px 0 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .price .price-item--regular,
html:not(#z) body:not(#z) main#MainContent product-info .price .price__regular {
  font-size: 16px !important;
}

/* Tax line compact */
html:not(#z) body:not(#z) main#MainContent product-info .product__tax {
  font-size: 8px !important;
  margin: 0 !important;
  letter-spacing: 0.12em !important;
}

/* Tighter form labels */
html:not(#z) body:not(#z) main#MainContent product-info .form__label {
  font-size: 8px !important;
  margin: 2px 0 4px !important;
  letter-spacing: 0.2em !important;
}

/* Description — compact, scrollable */
html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  flex: 0 1 auto !important;
  min-height: 90px !important;
  max-height: 200px !important;
  height: 200px !important;
  margin: 4px 0 !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description p {
  font-size: 10px !important;
  line-height: 1.45 !important;
  margin: 0 0 4px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description li {
  font-size: 10px !important;
  padding: 2px 0 !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__description h2,
html:not(#z) body:not(#z) main#MainContent product-info .product__description h3,
html:not(#z) body:not(#z) main#MainContent product-info .product__description h6,
html:not(#z) body:not(#z) main#MainContent product-info .product__description strong {
  font-size: 8px !important;
  margin: 6px 0 3px !important;
}

/* Button + trust strip — kept compact, at bottom */
html:not(#z) body:not(#z) main#MainContent product-info .product-form__submit,
html:not(#z) body:not(#z) main#MainContent product-info button[name="add"] {
  min-height: 38px !important;
  padding: 10px 16px !important;
  font-size: 10px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product-form__submit[disabled]::before,
html:not(#z) body:not(#z) main#MainContent product-info button[name="add"][disabled]::before {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product-form::after {
  font-size: 8px !important;
  padding-top: 8px !important;
  margin-top: 2px !important;
  letter-spacing: 0.18em !important;
}

/* Info-wrapper: tighter padding so more room inside */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-wrapper {
  padding: 18px 22px !important;
}

/* Image wrapper — keep aspect but contain better */
html:not(#z) body:not(#z) main#MainContent product-info .product__media-item img,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-item .media img {
  inset: 6% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
}

/* ============================================================================
   END v72b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72c — Order description before button 2026-05-24
   Description was order:50 (after form order:20) → rendered below trust strip
   at viewport bottom (clipped). Set order:10 so it sits between price and
   variant selectors. Also force form to bottom of info panel.
   ============================================================================ */

html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  order: 10 !important;
  margin: 8px 0 !important;
}

/* Variant selectors visible right after description for swatches */
html:not(#z) body:not(#z) main#MainContent product-info variant-selects,
html:not(#z) body:not(#z) main#MainContent product-info variant-radios {
  order: -700 !important;
}

/* Product-form (button) goes near bottom */
html:not(#z) body:not(#z) main#MainContent product-info product-form,
html:not(#z) body:not(#z) main#MainContent product-info .product-form {
  order: 30 !important;
  margin-top: auto !important;
}

/* ============================================================================
   END v72c
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72d — Cap description height, button bottom 2026-05-24
   Description grew to content height pushing button off-screen. Force it
   to fixed flex basis so button + trust strip stay visible.
   ============================================================================ */

html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  flex: 0 0 160px !important;
  height: 160px !important;
  max-height: 160px !important;
  min-height: 60px !important;
  margin: 6px 0 !important;
  padding: 8px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Tighten swatches further */
html:not(#z) body:not(#z) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input input[type="radio"] + label {
  min-height: 20px !important;
  height: 20px !important;
  padding: 3px 7px !important;
  font-size: 8.5px !important;
  margin: 0 3px 3px 0 !important;
}

/* Make sure form stays at bottom */
html:not(#z) body:not(#z) main#MainContent product-info product-form,
html:not(#z) body:not(#z) main#MainContent product-info .product-form {
  margin-top: 4px !important;
  flex: 0 0 auto !important;
}

/* Cap info-container so it can't push items below viewport */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-container {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* ============================================================================
   END v72d
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72e — FIT IT ALL IN VIEWPORT 2026-05-24
   Diagnostics: iwH 678 in 749 viewport, button at y=717 just below the
   sticky CTA strip at y=720. Need to shave 100+px. Tighten padding,
   hide sticky CTA, smaller description, and pin form to bottom.
   ============================================================================ */

/* Hide sticky CTA on PDP (footer marquee was eating bottom space) */
html:not(#z) body:not(#z):has(product-info) .arch-sticky-cta,
html:not(#z) body:not(#z):has(product-info) .arch-marquee-bottom,
html:not(#z) body:not(#z):has(product-info) [class*="sticky-cta"],
html:not(#z) body:not(#z):has(product-info) [class*="signal-up"]:not(product-info *),
html:not(#z) body:not(#z):has(product-info) footer.arch-footer-marquee {
  display: none !important;
}

/* Reduce page-width padding so card starts higher */
html:not(#z) body:not(#z):has(product-info) main#MainContent product-info .page-width {
  padding: 6px 16px !important;
}

html:not(#z) body:not(#z):has(product-info) main#MainContent product-info .product {
  gap: 16px !important;
  padding: 0 !important;
}

/* Slimmer info-wrapper padding */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-wrapper {
  padding: 14px 18px !important;
}

/* Description capped tighter */
html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  flex: 0 0 120px !important;
  height: 120px !important;
  max-height: 120px !important;
  min-height: 80px !important;
  margin: 4px 0 !important;
  padding: 6px 10px !important;
}

/* Variant fieldsets compact */
html:not(#z) body:not(#z) main#MainContent product-info variant-radios fieldset,
html:not(#z) body:not(#z) main#MainContent product-info .product-form__input {
  margin: 1px 0 !important;
}

/* Larger main height — use 100vh full and let header float over */
html:not(#z) body:not(#z):has(product-info) main#MainContent {
  height: calc(100vh - 100px) !important;
  min-height: calc(100vh - 100px) !important;
  max-height: calc(100vh - 100px) !important;
}

/* Increase iw available height — keep content visible */
html:not(#z) body:not(#z) main#MainContent product-info .product__info-container {
  gap: 4px !important;
  padding: 0 !important;
}

/* Form pinned to bottom */
html:not(#z) body:not(#z) main#MainContent product-info product-form,
html:not(#z) body:not(#z) main#MainContent product-info .product-form {
  margin-top: auto !important;
  padding-top: 6px !important;
}

/* ============================================================================
   END v72e
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v72f — Hide the global JOIN LIST sticky bar on PDP 2026-05-24
   `main::after` pseudo-element is rendering "● JOIN LIST → EARLY ACCESS"
   at viewport bottom — covers the trust strip on the focused PDP view.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent::after,
html:not(#z) body:not(#z) main#MainContent:has(product-info)::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Slight increase in available info-wrapper height now that bottom is free */
html:not(#z) body:not(#z):has(product-info) main#MainContent {
  height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px) !important;
  max-height: calc(100vh - 80px) !important;
}

/* Description gets a little more room */
html:not(#z) body:not(#z) main#MainContent product-info .product__description {
  flex: 0 0 140px !important;
  height: 140px !important;
  max-height: 140px !important;
}

/* ============================================================================
   END v72f
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v73 — RESTORE THUMBNAILS for image switching 2026-05-24
   v71c hid the thumbnail strip + capped slider to first item only. User wants
   to click thumbnails to swap the main image. Show Dawn's existing thumbnail
   slider as a compact horizontal strip at the bottom of the image card.
   ============================================================================ */

/* UN-hide the thumbnail slider container */
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"],
html:not(#z) body:not(#z) main#MainContent product-info ul.thumbnail-list,
html:not(#z) body:not(#z) main#MainContent product-info ol.thumbnail-list,
html:not(#z) body:not(#z) main#MainContent product-info .thumbnail-slider,
html:not(#z) body:not(#z) main#MainContent product-info .thumbnail-list,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* REMOVE the "hide non-active media item" rule so Dawn's slider can switch */
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list .product__media-item:not(.is-active),
html:not(#z) body:not(#z) main#MainContent product-info .product__media-item:nth-of-type(n+2) {
  display: block !important; /* let Dawn manage active state with CSS classes */
}

/* Image wrapper becomes a column: image takes most, thumbs at bottom */
html:not(#z) body:not(#z):has(product-info) main#MainContent product-info .product__media-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* Main image area (the slider with the big image) takes remaining height */
html:not(#z) body:not(#z) main#MainContent product-info media-gallery {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryViewer"],
html:not(#z) body:not(#z) main#MainContent product-info .product__media-gallery > slider-component:not([id*="Thumbnails"]),
html:not(#z) body:not(#z) main#MainContent product-info > media-gallery > slider-component {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Only the .is-active media item is visible in the gallery viewer */
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list .product__media-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list .product__media-item.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* THUMBNAIL STRIP — horizontal row at bottom of image card */
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
  flex: 0 0 56px !important;
  height: 56px !important;
  width: 100% !important;
  padding: 4px 6px !important;
  background: rgba(20, 17, 13, 0.85) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.18) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 3 !important;
}

html:not(#z) body:not(#z) main#MainContent product-info ul.thumbnail-list,
html:not(#z) body:not(#z) main#MainContent product-info ol.thumbnail-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  height: 100% !important;
  background: transparent !important;
}

html:not(#z) body:not(#z) main#MainContent product-info .thumbnail-list__item,
html:not(#z) body:not(#z) main#MainContent product-info .thumbnail-list > li {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

html:not(#z) body:not(#z) main#MainContent product-info .thumbnail {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(201, 169, 110, 0.32) !important;
  background: rgb(248, 245, 238) !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease, border-color 0.2s ease !important;
}

html:not(#z) body:not(#z) main#MainContent product-info .thumbnail:hover {
  opacity: 1 !important;
  border-color: rgb(201, 169, 110) !important;
}

html:not(#z) body:not(#z) main#MainContent product-info .thumbnail.is-active,
html:not(#z) body:not(#z) main#MainContent product-info button.thumbnail[aria-current="true"] {
  opacity: 1 !important;
  border-color: rgb(232, 200, 130) !important;
  box-shadow: 0 0 0 1px rgba(232, 200, 130, 0.55) !important;
}

html:not(#z) body:not(#z) main#MainContent product-info .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
}

/* Thumbnail strip scrollbar styling */
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"]::-webkit-scrollbar {
  height: 4px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"]::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 110, 0.4) !important;
  border-radius: 2px !important;
}
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"]::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Hide the slider's < > arrow buttons in the thumbnail strip (we use natural overflow) */
html:not(#z) body:not(#z) main#MainContent product-info slider-component[id*="GalleryThumbnails"] .slider-button {
  display: none !important;
}

/* ============================================================================
   END v73
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v73b — Force position:absolute on stacked media items 2026-05-24
   v73's `position: absolute !important` lost cascade to other rules that
   forced relative. Boost specificity.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex: 1 1 auto !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list > li,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list .product__media-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item.is-active,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list .product__media-item.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* ============================================================================
   END v73b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v73c — Make media-gallery fill its column 2026-05-24
   media-wrapper is 645 tall, thumbnails 56, media-gallery should be 589 but
   only renders 282 (something's capping). Force explicit height: calc.
   ============================================================================ */

html:not(#z) body:not(#z) main#MainContent product-info .product__media-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery,
html:not(#z) body:not(#z) main#MainContent product-info media-gallery {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  aspect-ratio: auto !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery slider-component:not([id*="Thumbnails"]),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery slider-component[id*="GalleryViewer"],
html:not(#z) body:not(#z) main#MainContent product-info media-gallery > slider-component:not([id*="Thumbnails"]) {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  display: block !important;
  aspect-ratio: auto !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-list {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  aspect-ratio: auto !important;
}

/* Image inside takes full active slide area */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z) body:not(#z) main#MainContent product-info .product__media-item img {
  position: absolute !important;
  inset: 5% !important;
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
}

/* ============================================================================
   END v73c
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v73d — Absolute-positioned thumb strip overlay 2026-05-24
   Flex column kept making media-gallery small (282 of 645). Switch to
   position:absolute approach: media-gallery fills wrapper, thumb strip
   overlays bottom 56px.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 56px !important;
  width: 100% !important;
  height: auto !important;
  flex: none !important;
  display: block !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery slider-component:not([id*="Thumbnails"]),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery > slider-component[id*="GalleryViewer"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  display: block !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  flex: none !important;
  aspect-ratio: auto !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item img {
  position: absolute !important;
  inset: 6% 6% 6% 6% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  margin: auto !important;
}

/* Thumbnail strip — absolute at bottom */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;
  flex: none !important;
  z-index: 4 !important;
}

/* Prev/Next product nav — keep centered vertically in image area (not in thumb strip) */
html body main#MainContent product-info .product__media-wrapper a.arch-pdp-nav {
  top: calc(50% - 28px) !important; /* offset upward by half-thumb-strip */
}

/* ============================================================================
   END v73d
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v73e — Bigger image column + image fills card 2026-05-24
   ============================================================================ */

/* Wider image column — was minmax(220, 30%), now ~38% */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
html body main#MainContent product-info .product.product--large.grid {
  grid-template-columns: minmax(280px, 38%) 1fr !important;
  gap: 20px !important;
}

@media (max-width: 989px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-columns: minmax(280px, 38%) 1fr !important;
  }
}

/* Force the inner media container chain to fill */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener.product__modal-opener,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-media-container,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  display: block !important;
  overflow: hidden !important;
}

/* Make image actually fill */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .media img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener img {
  position: absolute !important;
  inset: 8% !important;
  top: 8% !important;
  right: 8% !important;
  bottom: 8% !important;
  left: 8% !important;
  width: 84% !important;
  height: 84% !important;
  max-width: 84% !important;
  max-height: 84% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
}

/* Stack mobile: image above info on really narrow screens (<480) */
@media (max-width: 480px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 38% 1fr !important;
    grid-template-areas: "media" "info" !important;
  }
}

/* ============================================================================
   END v73e
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74 — MOBILE STACKED LAYOUT 2026-05-24
   Per user reference: on smartphone, image side-by-side gets squeezed.
   Stack vertically: top half = image + thumbs + prev/next arrows; bottom
   half = name + price + variants + description + button + trust.
   Breakpoint: max-width 989px (covers phones + small tablets).
   ============================================================================ */

@media (max-width: 989px) {

  /* SWITCH grid from 2-col to 2-row stacked */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 50% 50% !important;
    grid-template-areas: "media" "info" !important;
    gap: 8px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* IMAGE CARD — top half */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    grid-area: media !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, rgb(248, 245, 238) 0%, rgb(240, 234, 222) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.18) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  /* Main image area (above thumb strip) */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 56px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery slider-component:not([id*="Thumbnails"]),
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery > slider-component[id*="GalleryViewer"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img {
    position: absolute !important;
    inset: 6% !important;
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
  }

  /* THUMBNAIL STRIP — at bottom of image card */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    padding: 6px 8px !important;
    background: rgba(20, 17, 13, 0.86) !important;
    border-top: 1px solid rgba(201, 169, 110, 0.22) !important;
    z-index: 4 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    align-items: center !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ul.thumbnail-list,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ol.thumbnail-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list__item,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list > li {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
    border: 1px solid rgba(201, 169, 110, 0.32) !important;
    background: rgb(248, 245, 238) !important;
    cursor: pointer !important;
    opacity: 0.65 !important;
    overflow: hidden !important;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail.is-active,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail[aria-current="true"] {
    opacity: 1 !important;
    border-color: rgb(232, 200, 130) !important;
    box-shadow: 0 0 0 2px rgba(232, 200, 130, 0.45) !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* PREV / NEXT product nav — overlaid on image area, NOT on thumb strip */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav {
    position: absolute !important;
    top: calc(50% - 28px) !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(20, 17, 13, 0.3) !important;
    color: rgb(20, 17, 13) !important;
    z-index: 30 !important;
    box-shadow: none !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--prev {
    left: 10px !important;
    right: auto !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--next {
    right: 10px !important;
    left: auto !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav:hover {
    background: rgb(20, 17, 13) !important;
    color: rgb(232, 200, 130) !important;
    border-color: rgb(201, 169, 110) !important;
    transform: translateY(-50%) scale(1.06) !important;
  }

  /* INFO PANEL — bottom half */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    grid-area: info !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    background: rgb(20, 17, 13) !important;
    border: 1px solid rgba(201, 169, 110, 0.22) !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Compact typography */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
    font-size: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
    font-size: 8px !important;
    margin-bottom: 3px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 17px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price-item--regular,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price__regular {
    font-size: 16px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .form__label {
    font-size: 8px !important;
    margin: 1px 0 3px !important;
    letter-spacing: 0.2em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info input[type="radio"] + label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label {
    min-height: 20px !important;
    height: 20px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
    margin: 0 3px 3px 0 !important;
    border-radius: 2px !important;
  }

  /* Description compact */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 auto !important;
    min-height: 70px !important;
    max-height: none !important;
    height: auto !important;
    margin: 4px 0 !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    background: rgba(8, 7, 6, 0.5) !important;
    border: 1px solid rgba(201, 169, 110, 0.14) !important;
    border-radius: 3px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    color: rgba(245, 234, 212, 0.85) !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p {
    margin: 0 0 4px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
    font-size: 8px !important;
    margin: 4px 0 2px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description li {
    font-size: 10px !important;
    padding: 2px 0 !important;
  }

  /* Button + trust */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    margin-top: auto !important;
    flex: 0 0 auto !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
    min-height: 38px !important;
    padding: 10px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit[disabled]::before,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"][disabled]::before {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    font-size: 8px !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
    letter-spacing: 0.18em !important;
  }

  /* Tighter page-width padding so card fills more vertical */
  html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent product-info .page-width {
    padding: 4px 10px !important;
  }
}

/* Side-by-side ONLY on truly wide (desktop) viewports */
@media (min-width: 990px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-columns: minmax(280px, 38%) 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "media info" !important;
  }
}

/* ============================================================================
   END v74
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74b — Image visibility + perfectionist polish 2026-05-24
   Vase image was white-on-cream and visually invisible. Darken the image
   card background slightly + add a subtle inner shadow for depth.
   ============================================================================ */

/* Image card background — soft warm grey with vignette, vase pops */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  background: radial-gradient(ellipse at 50% 40%,
              rgb(230, 222, 208) 0%,
              rgb(214, 204, 188) 70%,
              rgb(196, 184, 165) 100%) !important;
  box-shadow: inset 0 0 80px rgba(86, 72, 50, 0.16),
              inset 0 0 0 1px rgba(201, 169, 110, 0.25) !important;
  border: none !important;
}

/* Bigger image — less padding, fills more of the card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener img {
  position: absolute !important;
  inset: 4% !important;
  width: 92% !important;
  height: 92% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: auto !important;
  filter: drop-shadow(0 8px 24px rgba(40, 30, 20, 0.18)) !important;
}

/* Status bar on top of info panel — even sharper */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* Title — more prominent on mobile too */
@media (max-width: 989px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 19px !important;
    line-height: 1.16 !important;
    letter-spacing: 0.025em !important;
  }
}

/* Swatches: cleaner spacing, label inline with value */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info legend.form__label {
  display: inline-block !important;
  margin-right: 6px !important;
}

/* Active swatch — clearer selected state */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info input[type="radio"]:checked + label {
  background: linear-gradient(135deg, rgb(201, 169, 110), rgb(218, 189, 134)) !important;
  color: rgb(20, 17, 13) !important;
  border-color: rgb(232, 200, 130) !important;
  font-weight: 600 !important;
}

/* Prev/next product nav — even sharper visual */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav {
  background: rgba(20, 17, 13, 0.92) !important;
  color: rgb(232, 200, 130) !important;
  border: 1px solid rgba(201, 169, 110, 0.45) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav:hover {
  background: rgb(201, 169, 110) !important;
  color: rgb(20, 17, 13) !important;
  border-color: rgb(232, 200, 130) !important;
}

/* Description: cleaner inner styling */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
  background: rgba(8, 7, 6, 0.55) !important;
  border: 1px solid rgba(201, 169, 110, 0.16) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
}

/* NOTIFY ME button — bigger gold glow */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
  background: linear-gradient(135deg, rgb(201, 169, 110) 0%, rgb(232, 200, 130) 50%, rgb(201, 169, 110) 100%) !important;
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.28),
              0 0 0 1px rgba(232, 200, 130, 0.4) inset !important;
}

/* Image card border-radius matches info panel */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  border-radius: 6px !important;
}

/* ============================================================================
   END v74b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74c — Drop background contrast trick + image is visible 2026-05-24
   Product photos are shot on light/white background. Cream image card +
   white-bg photo = vase blends in. Use a "checkered" subtle pattern OR
   keep cream but ADD a soft circular shadow under the vase so it floats.
   ============================================================================ */

/* Soft cream + subtle radial vignette + gentle gold framing */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  background:
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(86, 72, 50, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 30%, rgb(247, 242, 232) 0%, rgb(230, 222, 208) 60%, rgb(206, 195, 175) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 110, 0.32),
    inset 0 -20px 60px rgba(86, 72, 50, 0.12),
    inset 0 60px 80px rgba(255, 250, 240, 0.4) !important;
}

/* Drop shadow on image so even white objects "float" off the cream card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener img {
  filter:
    drop-shadow(0 12px 30px rgba(40, 28, 14, 0.22))
    drop-shadow(0 2px 4px rgba(40, 28, 14, 0.12))
    contrast(1.04) !important;
}

/* ============================================================================
   END v74c
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74d — DARK image card so all variants pop 2026-05-24
   Cream card hides white-variant photos. Switch to dark charcoal radial
   so any colored/white vase is clearly visible.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgb(56, 48, 38) 0%, rgb(36, 30, 22) 70%, rgb(20, 17, 13) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 110, 0.28),
    inset 0 0 80px rgba(0, 0, 0, 0.45) !important;
}

/* Image shadow — adapted for dark card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener img {
  filter:
    drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
    brightness(1.03) !important;
}

/* Thumbnail strip: stays dark to match card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
  background: rgba(8, 7, 6, 0.92) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.3) !important;
}

/* Thumbnail tiles: lighter so colored items show against dark bg */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail {
  background: rgb(34, 28, 20) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
}

/* ============================================================================
   END v74d
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74e — Kill white BG on inner media containers 2026-05-24
   FOUND: .product__media, .media, .product__media-item, .product__media-list
   all had `background-color: white` from Dawn defaults, COVERING the dark
   wrapper bg. Force transparent so wrapper gradient shows through.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .media,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .product__media,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item modal-opener,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .product-media-container,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery > *,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component:not([id*="Thumbnails"]) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================================================
   END v74e
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v74f — KILL the white toggle overlay 2026-05-24
   FINALLY FOUND: `button.product__media-toggle` is an invisible zoom-trigger
   button covering the entire image area with `background: rgb(255,255,255)`.
   Earlier `display: none` rule I had on it must have been broken. Force its
   bg transparent + keep it interactive (don't display:none — it wraps the
   image as a click target for Dawn's lightbox).
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.product__media-toggle,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-toggle,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item button,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener button:not([name="add"]):not(.product-form__submit):not(.arch-pdp-nav) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  cursor: zoom-in !important;
  color: transparent !important;
  font-size: 0 !important;
  outline: none !important;
}

/* Hide button's icon/label SVG so only image is visible */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.product__media-toggle svg,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-toggle .icon,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-toggle [class*="icon"] {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================================
   END v74f
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v75 — STRICT FIT IN VIEWPORT 2026-05-24
   Info panel was 431px tall in 320px grid row → overflowed 276px below
   viewport. Force `minmax(0, 1fr)` rows so children cannot push the grid.
   Tighten all info typography to actually fit.
   ============================================================================ */

@media (max-width: 989px) {

  /* Grid rows: hard-cap, children cannot overflow */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Both halves: strict overflow:hidden */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Info wrapper: tighter padding */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    padding: 12px 14px !important;
  }

  /* Info container: distribute content evenly with flex */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Even tighter typography */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
    font-size: 7.5px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
    letter-spacing: 0.18em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title {
    margin: 2px 0 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
    font-size: 7.5px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.22em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price {
    margin: 2px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price-item--regular,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price__regular {
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
  }

  /* Variant selectors — really compact, label inline */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-selects {
    margin: 2px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .form__label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info legend.form__label {
    flex: 0 0 auto !important;
    margin: 0 6px 0 0 !important;
    font-size: 7.5px !important;
    letter-spacing: 0.2em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input input[type="radio"] + label {
    min-height: 18px !important;
    height: 18px !important;
    min-width: 30px !important;
    padding: 2px 6px !important;
    font-size: 8px !important;
    margin: 0 2px 0 0 !important;
    border-radius: 2px !important;
    letter-spacing: 0.15em !important;
  }

  /* Description — fits remaining height with internal scroll */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 4px 0 !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p {
    margin: 0 0 3px !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
    font-size: 7.5px !important;
    margin: 4px 0 2px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description li {
    font-size: 9.5px !important;
    padding: 1px 0 !important;
  }

  /* Button — compact, never grow */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    margin: 2px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit[disabled]::before,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"][disabled]::before {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    font-size: 7.5px !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
    letter-spacing: 0.15em !important;
  }

  /* Tax line — hidden on mobile to save space */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__tax {
    display: none !important;
  }
}

/* === Image card refinements (all viewports) === */

/* Cleaner pure charcoal image card with very subtle gold light at top */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgb(28, 24, 18) 0%, rgb(20, 17, 13) 60%, rgb(14, 11, 8) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 110, 0.25),
    inset 0 -40px 60px rgba(0, 0, 0, 0.5),
    inset 0 60px 80px rgba(255, 240, 200, 0.04) !important;
}

/* Cleaner image rendering — perfectly centered */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info modal-opener img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  filter:
    drop-shadow(0 22px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35))
    brightness(1.04) contrast(1.03) !important;
}

/* Thumbnails — uniform dark squares with gold accent */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail {
  background: rgb(40, 34, 26) !important;
  border: 1px solid rgba(201, 169, 110, 0.32) !important;
  border-radius: 3px !important;
  opacity: 0.55 !important;
  transition: all 0.2s ease !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail:hover {
  opacity: 0.85 !important;
  border-color: rgb(201, 169, 110) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail.is-active,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail[aria-current="true"] {
  opacity: 1 !important;
  border-color: rgb(232, 200, 130) !important;
  box-shadow:
    0 0 0 1px rgb(232, 200, 130),
    0 0 12px rgba(232, 200, 130, 0.4) !important;
  background: rgb(50, 42, 30) !important;
}

/* ============================================================================
   END v75
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v75b — Restore thumb images + STRICT viewport heights 2026-05-24
   v75: (1) thumb images broken because image-centering rule matched
   `.thumbnail img` too, (2) main is taller than viewport so info still
   overflows. Fix: scope image rule to media-item only, use explicit vh.
   ============================================================================ */

@media (max-width: 989px) {

  /* Explicit viewport-relative heights — no overflow possible */
  html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent {
    height: calc(100vh - 90px) !important;
    min-height: calc(100vh - 90px) !important;
    max-height: calc(100vh - 90px) !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: 48vh 1fr !important;
    gap: 6px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Image card: exactly 48vh */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    height: 48vh !important;
    max-height: 48vh !important;
  }

  /* Info wrapper: fills remaining */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* === IMAGE rule scope FIX: only matches the active product media-item image, NOT thumbnail images === */

/* Restore default thumb img behavior */
html:not(#z) body:not(#z) main#MainContent product-info .thumbnail img,
html:not(#z) body:not(#z) main#MainContent product-info button.thumbnail img,
html:not(#z) body:not(#z) main#MainContent product-info .thumbnail-list img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  margin: 0 !important;
  filter: none !important;
}

/* Override v75's overly-broad image rule with re-scoped selector */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item .media img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item modal-opener img:not(.thumbnail img) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  filter:
    drop-shadow(0 22px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35))
    brightness(1.04) contrast(1.03) !important;
}

/* ============================================================================
   END v75b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v75c — FORCE container chain to 100% height 2026-05-24
   Diagnosis: pi (product-info) was 889px, pw 844, .product 836 — all bigger
   than main (659). Grid 1fr resolved to content (470) not remaining (299).
   Force entire chain to exactly fit main with overflow:hidden.
   ============================================================================ */

@media (max-width: 989px) {

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent > product-info {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: block !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info > section,
  html:not(#z):not(#y) body:not(#z):not(#y) section.shopify-section:has(product-info) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
  }

  /* Now grid 1fr works */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    grid-template-rows: 48% 1fr !important;
    gap: 6px !important;
  }

  /* Both halves: 100% of their grid cell */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Info-container is flex column, distributes remaining space */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
}

/* ============================================================================
   END v75c
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v76 — CLEAN REWRITE of image + thumb rendering 2026-05-24
   v75c left main image at x=-121 (off-screen). Drop transform tricks, use
   simple `inset: 0` + `object-fit: contain`. Same for thumb images.
   ============================================================================ */

/* MAIN product image — fills active slide cell, contain to preserve aspect */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item .media img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item modal-opener > img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item .product-media-container img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 6% !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
  filter:
    drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
    brightness(1.05) !important;
}

/* THUMBNAIL images — fill tile, cover crop */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list .thumbnail img,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list__item img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
}

/* Thumb button itself is the positioning context */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

/* INFO PANEL on mobile — simpler stacking */
@media (max-width: 989px) {

  /* Slightly reduce image card so info has more room */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: 45% 1fr !important;
  }

  /* Info-container: simple flex column, even spacing */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    padding: 0 !important;
    gap: 4px !important;
  }

  /* Each info child uniformly sized */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* EXCEPT description which flexes to fill */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container > .product__description {
    flex: 1 1 0 !important;
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ============================================================================
   END v76
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v77 — FORCE FIT, all 9 info items above the fold 2026-05-24
   v76 left button 111px below viewport. Force main height smaller, image
   row smaller, info content tighter so EVERYTHING fits in 100vh.
   ============================================================================ */

@media (max-width: 989px) {

  /* Reduce main allocation so PDP fits without header marquee + breadcrumb push */
  html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent {
    height: calc(100vh - 102px) !important;
    min-height: calc(100vh - 102px) !important;
    max-height: calc(100vh - 102px) !important;
  }

  /* Image takes less space — 42%, info takes 58% */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: 42% 1fr !important;
    gap: 4px !important;
  }

  /* Page-width: zero vertical padding so card meets edges */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width {
    padding: 2px 8px !important;
  }

  /* Info wrapper: zero overflow tolerance */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Aggressively tighten info content */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    gap: 3px !important;
  }

  /* Status header */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
    font-size: 7px !important;
    padding-bottom: 3px !important;
    letter-spacing: 0.16em !important;
  }

  /* Title block */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title {
    margin: 1px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
    font-size: 7px !important;
    margin-bottom: 1px !important;
    letter-spacing: 0.2em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 14px !important;
    line-height: 1.08 !important;
    letter-spacing: 0.015em !important;
    margin: 0 !important;
  }

  /* Price */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price {
    margin: 1px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price-item--regular,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price__regular {
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
  }

  /* Swatches very compact */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset {
    gap: 2px !important;
    margin: 1px 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .form__label {
    font-size: 7px !important;
    margin: 0 4px 0 0 !important;
    letter-spacing: 0.16em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input input[type="radio"] + label {
    min-height: 16px !important;
    height: 16px !important;
    min-width: 24px !important;
    padding: 1px 5px !important;
    font-size: 7.5px !important;
    margin: 0 2px 1px 0 !important;
    letter-spacing: 0.12em !important;
  }

  /* Description — fills middle space */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    max-height: none !important;
    margin: 3px 0 !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p {
    font-size: 9px !important;
    line-height: 1.4 !important;
    margin: 0 0 2px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
    font-size: 7px !important;
    margin: 3px 0 1px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description li {
    font-size: 9px !important;
    padding: 1px 0 !important;
  }

  /* Button — really compact */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 10px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit[disabled]::before,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"][disabled]::before {
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
  }

  /* Trust strip */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    font-size: 7px !important;
    padding-top: 3px !important;
    margin-top: 1px !important;
    letter-spacing: 0.13em !important;
  }
}

/* ============================================================================
   END v77
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v78 — Reduce image area, give info 60% height 2026-05-24
   v77 fit info wrapper but content (button) still overflowed by 66px.
   Shrink image to 38%, info to 62%. Cap description to fixed height so
   button + trust strip ALWAYS visible.
   ============================================================================ */

@media (max-width: 989px) {

  /* Image 38%, info 62% */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: 38% 1fr !important;
  }

  /* Description: fixed flex basis, doesn't grow */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 0 0 90px !important;
    height: 90px !important;
    max-height: 90px !important;
    min-height: 50px !important;
    margin: 3px 0 !important;
    padding: 5px 7px !important;
    overflow-y: auto !important;
  }

  /* Button is the bottom-most flex item with auto top margin */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    width: 100% !important;
  }

  /* Spacer flex grow between price and description */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container > .price {
    flex: 0 0 auto !important;
  }
}

/* ============================================================================
   END v78
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v79 — PIN button to bottom of info wrapper 2026-05-24
   v78 left button 42px below viewport. Use position:absolute to pin form
   to bottom of info-wrapper so it's ALWAYS visible, regardless of
   description content size.
   ============================================================================ */

@media (max-width: 989px) {

  /* Info wrapper needs relative for absolute children */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    position: relative !important;
    padding: 10px 12px 50px !important; /* room at bottom for pinned button */
  }

  /* Product-form pinned absolutely to bottom of info-wrapper */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  /* Trust strip is via .product-form::after — keep visible above form */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    margin-top: 4px !important;
  }

  /* Description still flexes in the available space ABOVE the pinned button */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Info container takes full height (minus the pinned form area) */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    height: 100% !important;
    overflow: hidden !important;
  }
}

/* ============================================================================
   END v79
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v80 — Reserve enough padding for pinned form 2026-05-24
   v79 form was 90px tall (button 28 + trust 30 + gaps). Wrapper had only
   50px padding-bottom — content flowed UNDER the button. Increase
   padding-bottom to ~100px so content sits above pinned form.
   ============================================================================ */

@media (max-width: 989px) {

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    padding: 10px 12px 86px !important;
  }

  /* Description: doesn't grow past available content area */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 0 !important;
    min-height: 30px !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Form pinned tighter */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    bottom: 8px !important;
  }
}

/* ============================================================================
   END v80
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v81 — DROP absolute, use flex order properly 2026-05-24
   product-form is wrapped in a div which is the actual flex child of
   info-container. Target that div, give it high order so it sits last.
   Simpler than absolute positioning.
   ============================================================================ */

@media (max-width: 989px) {

  /* Reset absolute */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    padding: 10px 12px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Target the DIV that wraps product-form as a flex child — make it last */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container > div:has(product-form) {
    order: 9999 !important;
    margin-top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Title block first */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title {
    order: -1000 !important;
  }

  /* Then variants */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-selects,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios {
    order: -500 !important;
  }

  /* Then PRICE (the badges div with order:-10 from v74 era) */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container > div:not(:has(product-form)):not(.product__title):not(variant-selects) {
    order: -200 !important;
  }

  /* Description in middle */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    order: 100 !important;
    flex: 1 1 0 !important;
    min-height: 40px !important;
  }
}

/* ============================================================================
   END v81
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v82 — More info height, even tighter content 2026-05-24
   v81 button at y=748-776 (overflowed by 27px). Shrink image card to 35%,
   compress variants section, reduce description, smaller padding.
   ============================================================================ */

@media (max-width: 989px) {

  /* Image even smaller: 35% top, 65% info */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    grid-template-rows: 35% 1fr !important;
  }

  /* Reduce padding everywhere */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    padding: 8px 12px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    gap: 2px !important;
  }

  /* Status bar smaller */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
    font-size: 6.5px !important;
    padding-bottom: 2px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
  }

  /* Title block — kicker and title on same area */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title {
    margin: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
    font-size: 6.5px !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.18em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.015em !important;
    margin: 0 !important;
  }

  /* Variants — much tighter: single line per group */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info legend.form__label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .form__label {
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    font-size: 6.5px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input input[type="radio"] + label {
    min-height: 14px !important;
    height: 14px !important;
    min-width: 20px !important;
    padding: 1px 4px !important;
    font-size: 7px !important;
    margin: 0 1px 0 0 !important;
    border-radius: 1px !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
  }

  /* Price compact */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price {
    margin: 1px 0 !important;
    line-height: 1 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price-item--regular,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price__regular {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  /* Description — even smaller, fixed flex base */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    flex: 1 1 0 !important;
    min-height: 30px !important;
    max-height: none !important;
    margin: 2px 0 !important;
    padding: 4px 6px !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description li {
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    margin: 0 0 2px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
    font-size: 7px !important;
    margin: 3px 0 1px !important;
  }

  /* Button — tighter */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
    min-height: 26px !important;
    height: 26px !important;
    padding: 4px 10px !important;
    font-size: 8px !important;
    letter-spacing: 0.15em !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit[disabled]::before,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"][disabled]::before {
    font-size: 8px !important;
    letter-spacing: 0.15em !important;
  }

  /* Trust strip */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    font-size: 6.5px !important;
    padding-top: 2px !important;
    margin-top: 1px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.1 !important;
  }
}

/* ============================================================================
   END v82
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v83 — NATURAL SCROLL like eBay / Etsy / Amazon 2026-05-24
   UNDO all 100vh constraints from v71-v82. Build a real e-commerce PDP:
     - Desktop: 2-col, image LEFT sticky, info RIGHT scrolls
     - Mobile: stacked vertically, thumb strip below image
     - Page SCROLLS naturally — all data accessible
     - Description, accordion (Material/Care/Shipping/Returns), reviews
   ============================================================================ */

/* ===== KILL 100vh constraints from v71-v82 ===== */
html:has(product-info),
html body:has(product-info),
html:not(#z) body:not(#z):has(product-info),
html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: hidden auto !important; /* allow vertical scroll */
}

html:not(#z) body:not(#z):has(product-info) main#MainContent,
html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) main#MainContent {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html:not(#z) body:not(#z):has(product-info) main#MainContent section.shopify-section:has(product-info),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info > section,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* ===== DESKTOP — 2-col side-by-side ===== */

@media (min-width: 750px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    display: grid !important;
    grid-template-columns: 45% 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "media info" "desc desc" !important;
    column-gap: 48px !important;
    row-gap: 32px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    grid-area: media !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    grid-area: info !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }

  /* Description spans both columns BELOW the fold */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    grid-area: desc !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 32px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid rgba(201, 169, 110, 0.18) !important;
    background: transparent !important;
    border-radius: 0 !important;
    column-count: 2 !important;
    column-gap: 48px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow: visible !important;
    flex: none !important;
    order: 100 !important;
  }
}

/* ===== MOBILE — stacked, natural scroll ===== */

@media (max-width: 749px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 70vh !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    position: relative !important;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgb(32, 27, 20) 0%, rgb(18, 15, 11) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.22) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-wrapper {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* RESTORE natural sizing for mobile content — no more cramming */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
    font-size: 10px !important;
    padding: 0 0 12px !important;
    margin: 0 0 16px !important;
    letter-spacing: 0.22em !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title {
    margin: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
    font-size: 10px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.26em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 16px !important;
  }

  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price {
    margin: 0 0 24px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price-item--regular,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .price .price__regular {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }

  /* Variant pickers natural-sized */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .form__label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info legend.form__label {
    display: block !important;
    font-size: 10px !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.22em !important;
    line-height: 1 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info variant-radios fieldset > input[type="radio"] + label,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__input input[type="radio"] + label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    height: 36px !important;
    min-width: 56px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    margin: 0 6px 6px 0 !important;
    border-radius: 3px !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
  }

  /* Button natural-sized */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info product-form {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 14px 24px !important;
    font-size: 12px !important;
    letter-spacing: 0.26em !important;
    line-height: 1 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit[disabled]::before,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"][disabled]::before {
    font-size: 12px !important;
    letter-spacing: 0.26em !important;
  }

  /* Trust strip */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
    font-size: 10px !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    letter-spacing: 0.22em !important;
    line-height: 1.4 !important;
  }

  /* Description — readable, no scroll inside, just flows */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 32px 0 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid rgba(201, 169, 110, 0.18) !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    column-count: 1 !important;
    flex: none !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 0 12px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6 {
    font-size: 11px !important;
    margin: 24px 0 8px !important;
    letter-spacing: 0.24em !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    margin-right: 8px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description li {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }

  /* Restore the sticky JOIN LIST CTA */
  html:not(#z) body:not(#z):has(product-info) main#MainContent::after {
    display: block !important;
    content: '\25CF  JOIN LIST  \2192  EARLY ACCESS' !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Restore footer on PDP — it's a normal scrolling page now */
  html body:has(product-info) footer.footer,
  html body:has(product-info) .shopify-section-group-footer-group {
    display: block !important;
  }
}

/* === IMAGE CARD: thumbnail strip + main image (both viewports) === */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  position: relative !important;
  display: block !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 60px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery > slider-component:not([id*="Thumbnails"]),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info media-gallery slider-component[id*="GalleryViewer"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-list .product__media-item.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  filter:
    drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
    brightness(1.04) !important;
}

/* Thumbnail strip at bottom of image card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 60px !important;
  padding: 8px 10px !important;
  background: rgba(8, 7, 6, 0.92) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.22) !important;
  z-index: 4 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  align-items: center !important;
  -webkit-overflow-scrolling: touch !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ul.thumbnail-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ol.thumbnail-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list__item,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list > li {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail {
  position: relative !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(201, 169, 110, 0.32) !important;
  background: rgb(32, 27, 20) !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail:hover {
  opacity: 0.9 !important;
  border-color: rgb(201, 169, 110) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail.is-active,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail[aria-current="true"] {
  opacity: 1 !important;
  border-color: rgb(232, 200, 130) !important;
  box-shadow: 0 0 0 1px rgb(232, 200, 130), 0 0 10px rgba(232, 200, 130, 0.35) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
}

/* PREV / NEXT product nav buttons */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav {
  position: absolute !important;
  top: calc(50% - 30px) !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: rgb(232, 200, 130) !important;
  background: rgba(20, 17, 13, 0.92) !important;
  border: 1px solid rgba(201, 169, 110, 0.45) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  inset: calc(50% - 30px) auto auto auto !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--prev {
  left: 12px !important;
  right: auto !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav--next {
  right: 12px !important;
  left: auto !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper a.arch-pdp-nav:hover {
  background: rgb(201, 169, 110) !important;
  color: rgb(20, 17, 13) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

/* Hide product__media-toggle bg (the white overlay button) */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.product__media-toggle,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-toggle svg {
  display: none !important;
}

/* ===== INFO PANEL — clean look on both viewports ===== */

/* Status header */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
  content: '\25C9  ARCH-04  \2014  LDN 51.5074\00B0N  \00B7  0.1278\00B0W  \2014  IN STOCK' !important;
  display: block !important;
  font: 500 10px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
  padding: 0 0 12px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.18) !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
  content: '// ARCHALIGN \00B7 2026 SERIES' !important;
  display: block !important;
  font: 500 10px/1.2 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.26em !important;
  color: rgba(201, 169, 110, 0.7) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h1,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title h2,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title .h1 {
  font-family: 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: rgb(245, 234, 212) !important;
}

/* NOTIFY ME button gold */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form__submit,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button[name="add"] {
  background: linear-gradient(135deg, rgb(201, 169, 110) 0%, rgb(232, 200, 130) 50%, rgb(201, 169, 110) 100%) !important;
  background-size: 200% 200% !important;
  color: rgb(20, 17, 13) !important;
  border: 1px solid rgb(201, 169, 110) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* Trust strip via .product-form::after */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
  content: '\2605 \2605 \2605 \2605 \2605   \00B7   TRUSTPILOT   \00B7   14-DAY RETURNS   \00B7   UK SHIPPING   \00B7   FOUNDER-REVIEWED' !important;
  display: block !important;
  font: 10px/1.6 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  color: rgba(201, 169, 110, 0.7) !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Description styled */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
  font-family: -apple-system, 'Helvetica Neue', 'Inter', sans-serif !important;
  color: rgba(245, 234, 212, 0.85) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  color: rgb(201, 169, 110) !important;
  text-transform: uppercase !important;
}

/* Restore the product__tax line — natural placement */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__tax {
  display: block !important;
  font: 11px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.16em !important;
  color: rgba(245, 234, 212, 0.5) !important;
  text-transform: uppercase !important;
  margin: -16px 0 24px !important;
}

/* Reset body — sticky CTA visible again on PDP */
html body:has(product-info) .arch-sticky-cta {
  display: block !important;
}

/* ============================================================================
   END v83
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v84 — Fix damage: .product had white background 2026-05-24
   v83 left .product div with `background: rgb(255, 255, 255)` from Dawn
   defaults, so the entire info area below the image card showed cream/white
   with gold text on it (unreadable). Force transparent.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product.product--large,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product[class*="product--"],
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info > section,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent section.shopify-section:has(product-info),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Body stays dark on PDP (matches site theme) */
html:not(#z):not(#y) body:not(#z):not(#y):has(product-info) {
  background: rgb(10, 9, 8) !important;
  background-color: rgb(10, 9, 8) !important;
  color: rgb(240, 232, 212) !important;
}

/* ============================================================================
   END v84
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v85 — Fix damages: empty thumbs + white li overlay 2026-05-24
   1) `.thumbnail-list__item` <li> had `background: rgb(255, 255, 255)` white
      showing between thumb buttons.
   2) Thumb images have `loading="lazy"` and aren't in viewport intersection
      properly so they never load. JS in theme.liquid will force eager.
   3) Image card backdrop: keep dark gradient but add gold frame so white-bg
      product photos have visible boundary.
   ============================================================================ */

/* Kill white bg on thumb-list <li> wrappers */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list__item,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list > li,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ul.thumbnail-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ol.thumbnail-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .slider__slide {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  list-style: none !important;
}

/* Image card: stronger gold frame so white-bg product photos have visible boundary */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(86, 72, 50, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgb(28, 24, 18) 0%, rgb(20, 17, 13) 100%) !important;
  border: 1px solid rgba(201, 169, 110, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(232, 200, 130, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
}

/* Smaller image so dark frame visible around white-bg photos */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img {
  max-width: 80% !important;
  max-height: 75% !important;
  border-radius: 4px !important;
}

/* ============================================================================
   END v85
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v88 — Force thumbnails to align top of strip 2026-05-24
   Diagnosis: thumb buttons (.thumbnail) were rendering 43px BELOW their <li>
   parent because of vertical-align:baseline + inline-block default. Strip is
   only 60px tall — thumbs at y=43 got clipped (only 7px visible).
   Fix: force flex alignment on every container in the chain.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info slider-component[id*="GalleryThumbnails"] {
  align-items: center !important;
  justify-content: flex-start !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ul.thumbnail-list,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info ol.thumbnail-list {
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  vertical-align: middle !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list__item,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail-list > li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .thumbnail,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info button.thumbnail {
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  translate: none !important;
  vertical-align: top !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
}

/* ============================================================================
   END v88
   ============================================================================ */

/* ============================================================================
   ARCHALIGN v90 — KILL MOJIBAKE in card kickers + bespoke badges 2026-05-24
   Diagnosis: custom.css source has `„–`, `·`, `★`, `—` etc — classic
   UTF-8/CP1252 double-encoding mojibake from a past editor save. The card
   kicker on collection pages renders as `„– 01 · ARCHALIGN · LON` instead
   of `№ 01 · ARCHALIGN · LON`. Override every affected ::before/::after with
   proper CSS \uXXXX escapes which the browser parses to clean Unicode.

   Unicode reference:
     № = \002116   · = \0000B7   ★ = \002605   — = \002014   ◉ = \0025C9
     ° = \0000B0   ✓ = \002713   → = \002192
   ============================================================================ */

/* Card kicker on collection / product cards: "№ 01 · ARCHALIGN · LON" */
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper.product-card-wrapper .card__information::before,
html:not(#z):not(#y) body:not(#z):not(#y) main .card-wrapper.product-card-wrapper .card__information::before,
html body .card-wrapper.product-card-wrapper .card__information::before {
  content: '\002116 ' counters(ticket-no, '', decimal-leading-zero) '  \0000B7  ARCHALIGN  \0000B7  LON' !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  color: rgba(201, 169, 110, 0.55) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Bespoke / service badge: "AVAILABLE · INTAKE OPEN" */
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="bespoke"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="-service-"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="-service"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="growth-system"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="aiethos"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="guidelines"]) .card__badge::after,
html:not(#z):not(#y) body:not(#z):not(#y) .card-wrapper:has(a[href*="floor-plan"]) .card__badge::after {
  content: 'AVAILABLE  \0000B7  INTAKE OPEN' !important;
}

/* PDP status header — re-assert with clean escapes (redundant safety) */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__info-container::before {
  content: '\0025C9  ARCH-04  \002014  LDN 51.5074\0000B0N  \0000B7  0.1278\0000B0W  \002014  IN STOCK' !important;
}

/* PDP kicker — "// ARCHALIGN · 2026 SERIES" */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__title::before {
  content: '// ARCHALIGN  \0000B7  2026 SERIES' !important;
}

/* CSS trust strip (the pseudo, in case JS strip injector failed) */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product-form::after {
  content: '\002605 \002605 \002605 \002605 \002605  \0000B7  TRUSTPILOT  \0000B7  14-DAY RETURNS  \0000B7  UK SHIPPING  \0000B7  FOUNDER-REVIEWED' !important;
}

/* ============================================================================
   END v90
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v91 — Close gap between breadcrumb and product 2026-05-24
   Desktop showed ~100px empty void: theme's `.shopify-section { padding-block:
   max(80px, 5vw) }` + my v83's `product-info { padding-top: 24px }` stacked.
   Tighten ONLY on PDP — keep other sections' rhythm intact.
   ============================================================================ */

/* Kill section padding on PDP only */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent section.shopify-section:has(product-info) {
  padding-block: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 16px !important;
}

/* Tighten product-info / page-width padding-top on desktop */
@media (min-width: 750px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info {
    padding-top: 4px !important;
    padding-bottom: 24px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info > section {
    padding-top: 0 !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width {
    padding-top: 0 !important;
  }
}

/* Mobile already tight, but reinforce */
@media (max-width: 749px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info {
    padding-top: 4px !important;
    padding-bottom: 24px !important;
  }
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .page-width {
    padding-top: 0 !important;
  }
}

/* Breadcrumb section: also tight */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent section.shopify-section:has(.breadcrumb),
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent .breadcrumb {
  padding-block: 8px !important;
  margin-block: 0 !important;
}

/* ============================================================================
   END v91
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v92 — Fix image card aspect ratio 2026-05-24
   Desktop: card was 801px tall (aspect-ratio: 4/5 portrait) but the actual
   product image is square (~1:1), so 244px of empty space appeared below
   the vase and 183px above. Switch to 1:1 aspect-ratio so the card hugs the
   actual photo proportions. Also reduce overall card cap.
   ============================================================================ */

/* Desktop: image card uses 1:1 aspect (matches square product photos) */
@media (min-width: 750px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    aspect-ratio: 1 / 1 !important;
    max-height: 70vh !important;
    height: auto !important;
  }
  /* Image fills more of the now-correctly-sized card */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-item img {
    max-width: 88% !important;
    max-height: 80% !important;
  }
}

/* Mobile: card already stacked, also square */
@media (max-width: 749px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    aspect-ratio: 1 / 1 !important;
    max-height: 70vh !important;
    height: auto !important;
  }
}

/* ============================================================================
   END v92
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v93 — Force image card to TRUE square via explicit height
   2026-05-24. aspect-ratio:1/1 was ignored because grid row sized to info
   panel's intrinsic height (info content is taller than image). Set explicit
   height = wrapper width via container-query / aspect ratio enforced.
   ============================================================================ */

@media (min-width: 750px) {
  /* Grid cell — align media to TOP, not stretch */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__media-wrapper {
    align-self: start !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    /* Use min(...) to cap height correctly — overrides grid row stretch */
    max-height: min(60vh, 600px) !important;
    width: 100% !important;
  }

  /* The grid row should NOT stretch the media cell */
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product,
  html body main#MainContent product-info .product.product--large.grid {
    align-items: start !important;
    grid-auto-rows: min-content !important;
  }
}

/* ============================================================================
   END v93
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v94 — Pricing grid breaks out of description column layout
   2026-05-24
   ============================================================================ */

/* When pricing grid present in description, force single column */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description:has(.arch-pricing-grid) {
  column-count: 1 !important;
  -webkit-column-count: 1 !important;
  -moz-column-count: 1 !important;
  column-gap: 0 !important;
}

html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .arch-pricing-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-span: all !important;
  -webkit-column-span: all !important;
  gap: 14px !important;
  margin: 28px 0 22px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 750px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .arch-pricing-grid {
    grid-template-columns: 1fr 1.08fr 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
}

/* ============================================================================
   END v94
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v95 — Description box redesigned as proper SPEC SHEET
   2026-05-24. Was a flat 2-col text dump. Now: card with header bar +
   labeled spec rows (Material / Dimensions / Care / Shipping / Returns),
   each row using a left-aligned uppercase label + right-aligned value,
   matching IKEA/Apple product spec patterns.
   ============================================================================ */

/* Outer description card */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description {
  background: linear-gradient(180deg, rgba(20,17,13,0.6) 0%, rgba(8,7,6,0.85) 100%) !important;
  border: 1px solid rgba(201,169,110,0.22) !important;
  border-radius: 6px !important;
  padding: 28px 32px !important;
  margin-top: 32px !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* "PRODUCT DETAILS" header bar */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description::before {
  content: '\002A SPECIFICATIONS' !important;
  display: block !important;
  font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgb(201,169,110) !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(201,169,110,0.18) !important;
}

/* First <p> (the intro paragraph after the title) — gets a serif treatment */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description > p:first-of-type {
  font-family: 'EB Garamond', 'Cormorant Garamond', serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  color: rgba(245,234,212,0.92) !important;
  margin: 0 0 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(201,169,110,0.08) !important;
}

/* Subsequent paragraphs */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(245,234,212,0.78) !important;
  margin: 0 0 12px !important;
}

/* Section headings (DETAILS, SHIPPING, RETURNS) */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p > strong:only-child {
  display: block !important;
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgb(201,169,110) !important;
  margin: 24px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(201,169,110,0.15) !important;
}

/* Spec rows: "MATERIAL:  Hand-finished ceramic" → grid label + value */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p:has(strong:first-child:not(:only-child)) {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  gap: 16px !important;
  align-items: baseline !important;
  margin: 6px 0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed rgba(201,169,110,0.1) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p:has(strong:first-child:not(:only-child)) > strong {
  font: 600 9px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgb(201,169,110) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  background: none !important;
}

/* List items inside description: bullet-less, dashed-row treatment */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 16px !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul li {
  position: relative !important;
  padding: 8px 0 8px 22px !important;
  border-bottom: 1px dashed rgba(201,169,110,0.1) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(245,234,212,0.85) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul li:last-child {
  border-bottom: 0 !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul li::before {
  content: '\002013' !important; /* en-dash */
  position: absolute !important;
  left: 4px !important;
  top: 8px !important;
  color: rgb(201,169,110) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
}

/* Email links in description (admin@archalign.co.uk) styled gold */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description a[href^="mailto:"] {
  color: rgb(232,200,130) !important;
  border-bottom: 1px dotted rgba(201,169,110,0.45) !important;
  text-decoration: none !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description a[href^="mailto:"]:hover {
  color: rgb(245,234,212) !important;
  border-bottom-color: rgb(232,200,130) !important;
}

/* ============================================================================
   END v95
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v96 — Fix v95 spec sheet bugs 2026-05-24
   Bugs:
     1. Real spec rows are <li><strong>Material:</strong> value</li> inside
        <ul>, NOT <p> tags. v95's `p:has(strong:first-child)` matched nothing.
     2. `p > strong:only-child` selector treated ENTIRE bold paragraphs as
        section headings (e.g. "ETHOS IS A B2B BESPOKE SERVICE..." became
        a gold mono caps header — wrong).
   Fix: target li items for label/value grid + ONLY use h2/h3/h6 as headers.
   ============================================================================ */

/* UNDO v95's over-eager heading rule on bold paragraphs */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p > strong:only-child {
  display: inline !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: rgb(245,234,212) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
/* And don't style p as block-heading either */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description p:has(> strong:only-child) {
  display: block !important;
  font: inherit !important;
  font-family: 'EB Garamond','Cormorant Garamond',serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(245,234,212,0.92) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Spec rows inside <ul><li><strong>Label:</strong> value</li></ul> */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;
  background: rgba(8,7,6,0.4) !important;
  border: 1px solid rgba(201,169,110,0.14) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) > li {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 18px !important;
  align-items: baseline !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px dashed rgba(201,169,110,0.14) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(245,234,212,0.88) !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) > li:last-child {
  border-bottom: 0 !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) > li::before {
  content: none !important; /* kill the en-dash bullet from v95 */
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) > li > strong {
  font: 700 9px/1.4 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgb(201,169,110) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  background: none !important;
  font-weight: 700 !important;
}

/* Generic <ul> (NOT spec-grid) inside description — keep en-dash bullets */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:not(:has(li > strong:first-child)) {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:not(:has(li > strong:first-child)) > li {
  position: relative !important;
  display: list-item !important;
  padding: 8px 0 8px 22px !important;
  border-bottom: 1px dashed rgba(201,169,110,0.1) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(245,234,212,0.85) !important;
  grid-template-columns: none !important;
}
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:not(:has(li > strong:first-child)) > li::before {
  content: '\002013' !important;
  position: absolute !important;
  left: 4px !important;
  top: 8px !important;
  color: rgb(201,169,110) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
}

/* h6/h2/h3 section headings — keep styled */
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6 {
  display: block !important;
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgb(201,169,110) !important;
  margin: 24px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(201,169,110,0.18) !important;
}

/* ============================================================================
   END v96
   ============================================================================ */

/* ============================================================================
   ARCHALIGN PDP v96b — Keep spec section together (no column split)
   ============================================================================ */

@media (min-width: 750px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child),
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h2,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h3,
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description h6 {
    column-span: all !important;
    -webkit-column-span: all !important;
    break-inside: avoid !important;
    break-before: column !important;
  }
}

/* Spec-grid mobile: stack label above value */
@media (max-width: 749px) {
  html:not(#z):not(#y) body:not(#z):not(#y) main#MainContent product-info .product__description ul:has(li > strong:first-child) > li {
    grid-template-columns: 100px 1fr !important;
    gap: 12px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================================
   END v96b
   ============================================================================ */

/* ============================================================================
   ARCHALIGN v97 — UN-HIDE footer social icons 6/7/8 2026-05-24
   FIX 2026-05-22K at line 9667 was hiding `.arch-social a:nth-of-type(6/7/8)`
   from when there were duplicate icon DOM. Now footer has exactly 8 icons
   (Instagram, WhatsApp, X, Telegram, TelegramAI, Checkatrade, Maps, YouTube)
   — all should be visible.
   ============================================================================ */

html:not(#z):not(#y) body:not(#z):not(#y) .arch-social a:nth-of-type(6),
html:not(#z):not(#y) body:not(#z):not(#y) .arch-social a:nth-of-type(7),
html:not(#z):not(#y) body:not(#z):not(#y) .arch-social a:nth-of-type(8),
html:not(#z):not(#y) body:not(#z):not(#y) .arch-social a:nth-of-type(9) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: calc(var(--u) * 2) !important;
  height: calc(var(--u) * 2) !important;
}

/* ============================================================================
   END v97
   ============================================================================ */
/* v135 cache-buster 1779809646 */
/* footer-cache-buster 1779809831 */

/* ============================================================================
   v143 — QUOTE-ONLY TRADE SUPPLY MODULE
   For products tagged `quote-only` (supplier-tier-1).
   - Hide prices on PDPs and collection cards
   - Replace Add-to-Cart with Request Trade Quote gold CTA
   - Show QUOTE-ONLY badge on cards
   - Hide quantity selector + sold-out indicator
   ============================================================================ */

/* PDP — hide native price + cart button when product has quote-only tag.
   We tag the body via JS (data-quote-only="true"); the rules below apply
   to body[data-quote-only="true"] so non-quote products still show price. */
body[data-quote-only="true"] .price,
body[data-quote-only="true"] .price-item,
body[data-quote-only="true"] .price__regular,
body[data-quote-only="true"] .price__sale,
body[data-quote-only="true"] .price__container,
body[data-quote-only="true"] .price--large,
body[data-quote-only="true"] product-info .price__container,
body[data-quote-only="true"] .product__tax {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide native add-to-cart, buy-it-now, shop-pay on quote-only products */
body[data-quote-only="true"] .product-form__submit,
body[data-quote-only="true"] .shopify-payment-button,
body[data-quote-only="true"] .product-form__buttons > button {
  display: none !important;
}

/* Hide quantity selector — quote handles qty */
body[data-quote-only="true"] .product-form__quantity,
body[data-quote-only="true"] .quantity__input,
body[data-quote-only="true"] .quantity-popover-container,
body[data-quote-only="true"] quantity-popover {
  display: none !important;
}

/* The gold Quote CTA — inserted by JS before .product-form__buttons */
.arch-quote-cta {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(90deg, #d4a937 0%, #f4cc55 50%, #d4a937 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 0% !important;
  color: #14110d !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 16px 22px !important;
  border: 1px solid rgba(212, 169, 55, 0.6) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 10px rgba(212, 169, 55, 0.2) !important;
}
.arch-quote-cta:hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(212, 169, 55, 0.4) !important;
  text-decoration: none !important;
  color: #14110d !important;
}

/* Trade banner above the CTA */
.arch-quote-banner {
  display: block;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #d4a937;
  text-transform: uppercase;
  padding: 10px 0 6px;
  border-top: 1px solid rgba(212, 169, 55, 0.25);
  margin-top: 14px;
}
.arch-quote-banner b {
  color: #f4cc55;
  font-weight: 700;
}

/* Collection cards — hide price for quote-only cards (set via data attr by JS) */
.card[data-quote-only="true"] .price,
.card[data-quote-only="true"] .price-item,
.card-product[data-quote-only="true"] .price,
.card-wrapper[data-quote-only="true"] .price,
.card-wrapper[data-quote-only="true"] .price-item,
.card[data-quote-only="true"] .card-information,
.card-product[data-quote-only="true"] .card__information .price {
  display: none !important;
}

/* Add a QUOTE-ONLY badge to quote-only product cards */
.card-wrapper[data-quote-only="true"] .card-information::after,
.card[data-quote-only="true"] .card__information::after {
  content: '◉ QUOTE-ONLY · TRADE PRICING';
  display: block;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  color: #d4a937;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 169, 55, 0.25);
}

/* Style 1, Style 2 etc — make the variant picker pills look like specs */
body[data-quote-only="true"] variant-radios fieldset,
body[data-quote-only="true"] .product-form__input fieldset {
  border: 1px solid rgba(212, 169, 55, 0.15);
  padding: 12px;
  background: rgba(20, 17, 13, 0.4);
  border-radius: 2px;
}

/* End v143 quote-only module */

/* v144 — Third-party disclaimer link (on quote-only PDPs only) */
.arch-quote-disclaimer-link {
  display: block;
  font: 600 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 169, 55, 0.55) !important;
  text-decoration: none !important;
  border: none !important;
  text-align: center;
  padding: 8px 12px 14px;
  transition: color 0.2s ease;
}
.arch-quote-disclaimer-link:hover {
  color: #f4cc55 !important;
}

/* v144 — Footer disclaimer line (sitewide, always visible) */
.arch-footer-disclaimer {
  display: block;
  width: 100%;
  text-align: center;
  font: 400 10px/1.55 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(232, 225, 210, 0.42);
  letter-spacing: 0.04em;
  padding: 18px 16px 14px;
  border-top: 1px solid rgba(212, 169, 55, 0.12);
  margin-top: 22px;
}
.arch-footer-disclaimer a {
  color: rgba(212, 169, 55, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 169, 55, 0.3);
}
.arch-footer-disclaimer a:hover {
  color: #f4cc55;
  border-bottom-color: #f4cc55;
}

/* v145 — Sitewide procurement navigation strip (above footer) */
.arch-proc-strip {
  background: linear-gradient(180deg, rgba(20,17,13,0.97) 0%, rgba(14,12,9,1) 100%);
  color: #e8e1d2;
  padding: 18px clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(212,169,55,0.4);
  border-bottom: 1px solid rgba(212,169,55,0.18);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.arch-proc-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
}
.arch-proc-strip__brand {
  font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.28em;
  color: #d4a937;
  text-decoration: none;
  flex-shrink: 0;
}
.arch-proc-strip__brand:hover { color: #f4cc55; }
.arch-proc-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.arch-proc-strip__links a {
  font: 600 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232, 225, 210, 0.78);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.arch-proc-strip__links a:hover { color: #f4cc55; }
.arch-proc-strip__cta {
  background: linear-gradient(90deg, #d4a937, #f4cc55, #d4a937);
  background-size: 200% 100%;
  color: #14110d !important;
  padding: 8px 14px !important;
  border-radius: 2px;
  border: 1px solid rgba(212,169,55,0.6);
  transition: background-position 0.4s ease, transform 0.2s ease !important;
}
.arch-proc-strip__cta:hover {
  background-position: 100% 0;
  color: #14110d !important;
  transform: translateY(-1px);
}

@media (max-width: 749px) {
  .arch-proc-strip__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .arch-proc-strip__links { gap: 4px 12px; }
  .arch-proc-strip__links a { font-size: 9px; }
}

/* ===== v152 PAGE READABILITY GUARD — bulletproof against white-on-white ===== */
/* Force readable contrast on every /pages/* default-template page. */
/* Targets the .rte block that Dawn's main-page section wraps the page body in. */
html body main#MainContent .page-width .rte,
html body main#MainContent .page-width .rte *,
html body main#MainContent .main-page-title,
html body main#MainContent .page-width h1,
html body main#MainContent .page-width h2,
html body main#MainContent .page-width h3,
html body main#MainContent .page-width h4,
html body main#MainContent .page-width p,
html body main#MainContent .page-width li,
html body main#MainContent .page-width strong,
html body main#MainContent .page-width em,
html body main#MainContent .page-width a {
  color: rgb(232, 224, 212) !important;
}
html body main#MainContent .page-width a,
html body main#MainContent .page-width .rte a {
  color: rgb(232, 200, 130) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.45) !important;
}
html body main#MainContent .page-width a:hover,
html body main#MainContent .page-width .rte a:hover {
  color: rgb(245, 234, 212) !important;
  border-bottom-color: rgb(232, 200, 130) !important;
}
html body main#MainContent .page-width strong {
  color: rgb(245, 234, 212) !important;
  font-weight: 600 !important;
}
/* Dark backdrop for any default-template page section so cream text stays legible */
html body main#MainContent > .shopify-section:has(.main-page-title),
html body main#MainContent > .shopify-section:has(.rte) {
  background: #0A0908 !important;
}
html body main#MainContent .main-page-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  color: rgb(245, 234, 212) !important;
  letter-spacing: -0.015em !important;
}
/* End v152 readability guard */

/* ===== v153 — STUDIO SERVICES CARD FIX (the 5 white-box services) ===== */
/* Target any card linking to /products/arch-srv-* (the service products). */
/* Replace empty white image with branded gradient + procurement-service kicker. */

html body a[href*="/products/arch-srv-"] .card__media,
html body a[href*="/products/arch-srv-"] + .card-information .card__media,
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__media,
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__media .media,
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .media--transparent {
  background: linear-gradient(135deg, #0A0908 0%, #1a140b 35%, #14110d 70%, #0A0908 100%) !important;
  position: relative !important;
}

/* Inject the service-card overlay */
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__media::before {
  content: '◉ ARCHALIGN STUDIO';
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgb(232, 200, 130);
  text-transform: uppercase;
  pointer-events: none;
}

html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__media::after {
  content: 'SERVICE → SCOPED PER PROJECT';
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(201, 169, 110, 0.85);
  text-transform: uppercase;
  pointer-events: none;
  text-align: left;
}

/* Decorative center mark — gold radial pulse */
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .media::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 130, 0.22) 0%, rgba(201, 169, 110, 0.06) 50%, transparent 80%);
  border: 1px solid rgba(201, 169, 110, 0.35);
  box-shadow: 0 0 30px -8px rgba(232, 200, 130, 0.4), inset 0 0 20px rgba(201, 169, 110, 0.15);
  z-index: 1;
  pointer-events: none;
}

/* Hide actual <img> if any (might be a 1x1 spacer) */
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__media img {
  opacity: 0 !important;
}

/* Kill "Back in stock soon" / "Sold out" badge on service cards */
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .card__badge,
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) .badge,
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) [class*="back-in-stock"],
html body .card-wrapper:has(a[href*="/products/arch-srv-"]) [class*="sold-out"] {
  display: none !important;
}

/* The product card overlay text "IN STOCK" needs DOM context.
   Targeting via :has() selector covers most. Fallback: hide any span/div inside card-wrapper
   whose text content matches via CSS not possible — rely on Liquid edit if needed. */

/* End v153 services card fix */

/* ===== v158 — MENU SYSTEM HIERARCHY (sectors + groups + items) =====
   §§ section divider  → .arch-menu-divider (the big "HOSPITALITY" / "CATALOGUE" / etc.)
   ◉ group header     → .arch-menu-section (clickable category like "Hotel" group, or non-link "Hospitality" label)
   ↳ item             → standard link styling                                                                          */

/* Section divider — the major navigation pillars */
html body .arch-menu-divider {
  list-style: none !important;
  margin: 18px 0 4px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(201, 169, 110, 0.22) !important;
  position: relative !important;
}
html body .arch-menu-divider:first-child {
  margin-top: 0 !important;
  border-top: none !important;
}
html body .arch-menu-divider > span {
  display: block !important;
  padding: 10px 12px 4px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgb(232, 200, 130) !important;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.10), transparent 60%) !important;
}

/* Group section header (◉) — when href is # (non-link sub-category) */
html body .arch-menu-section {
  list-style: none !important;
  margin: 6px 0 2px !important;
  padding: 0 !important;
}
html body .arch-menu-section > span {
  display: block !important;
  padding: 6px 14px !important;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: rgba(245, 234, 212, 0.95) !important;
  text-transform: none !important;
}

/* Tighten link items so the menu feels DENSE (not exhausting) */
html body .mega-menu__list li:not(.arch-menu-divider):not(.arch-menu-section) > a,
html body .menu-drawer__menu li:not(.arch-menu-divider):not(.arch-menu-section) > a {
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  padding: 5px 14px 5px 28px !important;
  line-height: 1.5 !important;
  color: rgba(232, 224, 212, 0.85) !important;
  position: relative !important;
}
html body .mega-menu__list li:not(.arch-menu-divider):not(.arch-menu-section) > a:hover,
html body .menu-drawer__menu li:not(.arch-menu-divider):not(.arch-menu-section) > a:hover {
  color: rgb(232, 200, 130) !important;
  background: rgba(201, 169, 110, 0.06) !important;
}

/* On mega-menu desktop, switch to a multi-column flow so it doesn't scroll forever */
@media (min-width: 990px) {
  html body .mega-menu__list.page-width {
    column-count: 4 !important;
    column-gap: 32px !important;
    column-rule: 1px solid rgba(201, 169, 110, 0.12) !important;
    padding: 28px 32px !important;
    max-width: 1400px !important;
  }
  html body .mega-menu__list.page-width > li {
    break-inside: avoid !important;
    display: block !important;
  }
  html body .arch-menu-divider {
    break-before: column !important;
  }
  html body .arch-menu-divider:first-child {
    break-before: avoid !important;
  }
}

/* End v158 menu system */

/* ===== v159 — MENU [N] PRODUCT COUNT BADGES ===== */
/* Render the count number in a tight pill next to the menu item label */
html body .mega-menu__link .arch-menu-label,
html body .menu-drawer__menu-item .arch-menu-label,
html body .header__menu-item .arch-menu-label {
  display: inline !important;
  margin-right: 6px !important;
}
html body .mega-menu__link .arch-menu-count,
html body .menu-drawer__menu-item .arch-menu-count,
html body .header__menu-item .arch-menu-count {
  display: inline-block !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: rgb(232, 200, 130) !important;
  background: rgba(201, 169, 110, 0.10) !important;
  border: 1px solid rgba(201, 169, 110, 0.28) !important;
  padding: 1px 6px !important;
  margin-left: 6px !important;
  min-width: 28px !important;
  text-align: center !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
}
html body a:hover .arch-menu-count {
  background: rgba(232, 200, 130, 0.20) !important;
  border-color: rgb(232, 200, 130) !important;
  color: rgb(245, 234, 212) !important;
}

/* Tighten flex layout so label + count align well */
html body .mega-menu__link--level-2,
html body .menu-drawer__menu-item,
html body .header__menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

/* Featured SUPPLIER section divider gets extra emphasis (top of menu) */
html body .arch-menu-divider:first-child > span,
html body .arch-menu-divider > span[content*="CONCESSION"],
html body .mega-menu__list > .arch-menu-divider:first-child > span {
  background: linear-gradient(90deg, rgba(232, 200, 130, 0.18), rgba(201, 169, 110, 0.08) 40%, transparent 90%) !important;
  color: rgb(245, 234, 212) !important;
  border-left: 2px solid rgb(232, 200, 130) !important;
  padding-left: 12px !important;
}

/* End v159 menu counts */


/* ===== MODULE 25 \2014 MOBILE COLLECTION POLISH (2026-07-02, agent) ===== */
/* Category pages at phone width: stop kicker wrap, clamp title towers, swipeable chips, hide micro-noise. Additive only. */
@media(max-width:749px){
  /* card kicker: short form, one line, never wraps */
  html body .card-wrapper.product-card-wrapper .card__information::before{ content:'\002116 ' counters(ticket-no,'',decimal-leading-zero) '  \0000B7  LON' !important; font-size:7.5px !important; letter-spacing:.14em !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; margin-bottom:5px !important; }
  /* title: max 3 lines, ellipsis \2014 kills 6-line towers */
  html body .card-wrapper.product-card-wrapper .card__heading{ display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; font-size:10.5px !important; line-height:1.45 !important; letter-spacing:.1em !important; }
  /* price: keep tight under clamped title */
  html body .card-wrapper.product-card-wrapper .price{ font-size:11px !important; margin-top:4px !important; }
  /* IN STOCK bar: slimmer */
  html body main#MainContent .card__badge, html body main#MainContent .card .badge{ font-size:7.5px !important; padding:3px 6px !important; letter-spacing:.14em !important; }
  /* chips: single swipeable row instead of 3 wrapped rows */
  .arch-coll-nav__chips{ flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; padding-bottom:2px !important; }
  .arch-coll-nav__chips::-webkit-scrollbar{ display:none !important; }
  .arch-coll-nav__chip{ flex:0 0 auto !important; white-space:nowrap !important; }
  /* trust micro-strip: off on phones (7.5px noise) */
  .arch-coll-nav__trust{ display:none !important; }
  /* facets/sort box: full-bleed, no crowding */
  html body main#MainContent .facets-container{ padding:10px 12px !important; }
  /* grid gutters: breathing room between 2-col cards */
  html body main#MainContent .product-grid{ column-gap:10px !important; row-gap:18px !important; }
}






/* ===== MODULE 26 \2014 NEW COIN LOGO (2026-07-02, owner-supplied asset) ===== */
html:not(#z) body:not(#z) .header__heading-logo, html:not(#z) body:not(#z) header .header__heading-logo{ display:none !important; visibility:hidden !important; width:0 !important; }
html:not(#z) body:not(#z) .header__heading-link .header__heading-logo-wrapper{ display:inline-flex !important; align-items:center !important; }
html:not(#z) body:not(#z) .header__heading-link .header__heading-logo-wrapper::before{ content:'' !important; display:inline-block !important; width:52px !important; height:52px !important; background:url('/cdn/shop/t/2/assets/archalign-coin-2026b.png') center/cover no-repeat !important; border-radius:50% !important; flex:0 0 auto !important; }
@media(max-width:749px){ html:not(#z) body:not(#z) .header__heading-link .header__heading-logo-wrapper::before{ width:44px !important; height:44px !important; } }




/* ===== MODULE 28 \2014 MOBILE FILTER/SORT/MENU DRAWERS: force dark scheme via CSS VARS (root cause: theme paints .mobile-facets__inner with rgb(var(--color-background)) which the heavy customization left broken) ===== */
html:not(#z) body:not(#z) .mobile-facets,
 html:not(#z) body:not(#z) .mobile-facets__inner,
 html:not(#z) body:not(#z) .mobile-facets__main,
 html:not(#z) body:not(#z) .mobile-facets__submenu,
 html:not(#z) body:not(#z) .menu-drawer,
 html:not(#z) body:not(#z) .menu-drawer__inner-submenu,
 html:not(#z) body:not(#z) .menu-drawer__submenu{
  --color-background:15,12,9 !important;
  --color-foreground:237,231,217 !important;
  --gradient-background:#0F0C09 !important;
}
html:not(#z) body:not(#z) .mobile-facets__inner{ background:#0F0C09 !important; }
html:not(#z) body:not(#z) .mobile-facets{ background:rgba(0,0,0,.55) !important; }
html:not(#z) body:not(#z) .mobile-facets__header,
 html:not(#z) body:not(#z) .mobile-facets__footer,
 html:not(#z) body:not(#z) .mobile-facets__submenu{ background:#0F0C09 !important; border-color:rgba(201,169,110,.25) !important; }
html:not(#z) body:not(#z) .mobile-facets__heading,
 html:not(#z) body:not(#z) .mobile-facets__count,
 html:not(#z) body:not(#z) .mobile-facets__summary,
 html:not(#z) body:not(#z) .mobile-facets__label,
 html:not(#z) body:not(#z) .mobile-facets__info,
 html:not(#z) body:not(#z) .mobile-facets__sort label{ color:#EDE7D9 !important; }
html:not(#z) body:not(#z) .mobile-facets__close,
 html:not(#z) body:not(#z) .mobile-facets__close-button,
 html:not(#z) body:not(#z) .mobile-facets__clear,
 html:not(#z) body:not(#z) .mobile-facets__arrow{ color:#C9A96E !important; }
html:not(#z) body:not(#z) .mobile-facets__open,
 html:not(#z) body:not(#z) .mobile-facets__open-label{ color:#EDE7D9 !important; border-color:rgba(201,169,110,.4) !important; }
html:not(#z) body:not(#z) .mobile-facets__sort select,
 html:not(#z) body:not(#z) .mobile-facets__sort .select__select{ background:#0A0908 !important; color:#EDE7D9 !important; border:1px solid rgba(201,169,110,.4) !important; }
html:not(#z) body:not(#z) .mobile-facets__checkbox{ accent-color:#C9A96E !important; }
/* the hamburger MENU drawer + its submenus */
html:not(#z) body:not(#z) .menu-drawer{ background:#0F0C09 !important; }
html:not(#z) body:not(#z) .menu-drawer__inner-submenu,
 html:not(#z) body:not(#z) .menu-drawer__submenu{ background:#0F0C09 !important; }
html:not(#z) body:not(#z) .menu-drawer__menu-item,
 html:not(#z) body:not(#z) .menu-drawer summary,
 html:not(#z) body:not(#z) .menu-drawer a{ color:#EDE7D9 !important; }
html:not(#z) body:not(#z) .menu-drawer__menu-item:hover,
 html:not(#z) body:not(#z) .menu-drawer__menu-item--active{ color:#C9A96E !important; background:rgba(201,169,110,.08) !important; }
html:not(#z) body:not(#z) .menu-drawer__close-button, html:not(#z) body:not(#z) .menu-drawer .icon-arrow, html:not(#z) body:not(#z) .menu-drawer__back-button{ color:#C9A96E !important; }
/* desktop-facets dropdown (already fixed once) — keep dark */
html:not(#z) body:not(#z) .facets__display{ background:#14110D !important; border:1px solid rgba(201,169,110,.35) !important; }
html:not(#z) body:not(#z) .facets__header{ background:#14110D !important; color:#EDE7D9 !important; }
html:not(#z) body:not(#z) .facets__display label, html:not(#z) body:not(#z) .facets__display .facets__item, html:not(#z) body:not(#z) .facets__display span{ color:#EDE7D9 !important; }
html:not(#z) body:not(#z) .facets__display .field__input{ background:#0A0908 !important; color:#EDE7D9 !important; border:1px solid rgba(201,169,110,.4) !important; }


/* === ARCHALIGN app + a11y 2026-07-03 (safe, no visual change) === */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
a,button,summary,[role="button"],.button{touch-action:manipulation;}
*:focus-visible{outline:2px solid #b8925a;outline-offset:2px;}

/* spec-table label/value gap fix 2026-07-04 */
.arch-spec td{vertical-align:top;}
.arch-spec td:first-child{padding-right:18px;}

/* spec label wrap fix v2 2026-07-04 */
.arch-spec tr td:first-child{white-space:normal;padding-right:16px;vertical-align:top;overflow:hidden;}
.arch-spec tr td{vertical-align:top;}

/* hide orphan unit-price slash on non-unit-priced products 2026-07-04 */
.price .unit-price.hidden{display:none!important;}

/* mobile drawer submenu scroll fix 2026-07-04 */
.menu-drawer .menu-drawer__inner-submenu,.menu-drawer .menu-drawer__submenu{bottom:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:4rem!important;}

/* single arrow on drawer submenu toggles (remove doubled ::after) 2026-07-04 */
.menu-drawer summary.menu-drawer__menu-item::after{content:none!important;display:none!important;}

/* remove noisy drawer edge line 2026-07-04 */
.menu-drawer{border-right:0!important;border-inline-end:0!important;box-shadow:none!important;}

/* drawer edge line specific override 2026-07-04 */
.gradient.menu-drawer,.menu-drawer.gradient,.menu-drawer.gradient.color{border-right:0!important;border-inline-end:0!important;border-left:0!important;box-shadow:none!important;}

/* remove noisy menu-toggle vertical bar (::before band down the drawer) 2026-07-04 */
.header__icon--menu::before{display:none!important;content:none!important;}