/* AGT — Abdul Ghani Trading — website theme (website #4 "tarek" only)
   White grounds, near-black ink, the logo's rose (#AE5164) as the only accent.
   Fraunces (display) + Jost (text). */

@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(/web/content/122585?unique=d1b3fd7a32) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(/web/content/122586?unique=8fb2c545d1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(/web/content/122587?unique=89349bb956) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(/web/content/122588?unique=e75e106b9d) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:italic;font-weight:300 600;font-display:swap;src:url(/web/content/122589?unique=082c9c5eea) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:italic;font-weight:300 600;font-display:swap;src:url(/web/content/122590?unique=2441fd01af) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/web/content/122591?unique=2b2ae750b2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/web/content/122592?unique=d3fc5b412c) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --agt-paper: #ffffff;
  --agt-ink: #141112;
  --agt-ink-2: #4a4446;
  --agt-mute: #8b8486;
  --agt-faint: #d3cdce;
  --agt-line: #ebe6e6;
  --agt-soft: #f7f5f4;
  --agt-rose: #ae5164;
  --agt-night: #0f0d0e;
  --agt-serif: 'Fraunces', 'Iowan Old Style', 'Times New Roman', serif;
  --agt-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --agt-ease: cubic-bezier(.22, .61, .36, 1);
  --agt-ease-io: cubic-bezier(.76, 0, .24, 1);
  --agt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --agt-g: clamp(20px, 3.6vw, 64px);
  --agt-top: 34px;
  --agt-bar: 92px;
  --agt-hdr: calc(var(--agt-top) + var(--agt-bar));
  --agt-max: 1680px;
}

/* ---------- base ---------- */
html, body { background: var(--agt-paper); }
body {
  font-family: var(--agt-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--agt-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}
#wrapwrap { background: var(--agt-paper); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--agt-serif); font-weight: 400; font-variation-settings: 'opsz' 72, 'SOFT' 100; letter-spacing: -.01em; }
#wrapwrap ::selection { background: var(--agt-ink); color: #fff; }
.agt-skip { position: absolute; left: -9999px; }
#wrapwrap main a { text-decoration: none; }

.agt-kicker {
  font: 500 11px/1.2 var(--agt-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--agt-mute);
  margin: 0 0 18px;
}
.agt-kicker--rose { color: var(--agt-rose); }
.agt-h2 {
  font-family: var(--agt-serif);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
  font-size: clamp(36px, 4.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--agt-ink);
}
.agt-h2 em, .agt-em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--agt-ink);
}
.agt-lead { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--agt-ink-2); max-width: 46ch; margin: 0; }

/* buttons: sharp, black, arrow that travels */
.agt-btn {
  --c: var(--agt-ink); --t: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 26px 0 28px;
  background: var(--c); color: var(--t) !important;
  font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--c); border-radius: 0; cursor: pointer; overflow: hidden;
  transition: color .5s var(--agt-ease), background .5s var(--agt-ease);
  isolation: isolate;
}
.agt-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--agt-rose);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--agt-ease-io);
}
.agt-btn:hover::before, .agt-btn:focus-visible::before { transform: scaleY(1); }
.agt-btn:hover { border-color: var(--agt-rose); }
.agt-btn .agt-arw { width: 18px; height: 10px; transition: transform .5s var(--agt-ease-out); }
.agt-btn:hover .agt-arw { transform: translateX(5px); }
.agt-btn--ghost { --c: transparent; --t: var(--agt-ink); border-color: var(--agt-ink); }
.agt-btn--ghost:hover { color: #fff !important; }
.agt-btn--light { --c: #fff; --t: var(--agt-ink); }
.agt-btn--light:hover { color: #fff !important; }
.agt-btn--line { --c: transparent; --t: #fff; border-color: rgba(255,255,255,.5); }

.agt-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--agt-ink) !important; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--agt-ease-io), color .3s;
}
.agt-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.agt-link .agt-arw { width: 16px; height: 9px; transition: transform .5s var(--agt-ease-out); }
.agt-link:hover .agt-arw { transform: translateX(4px); }

.agt-arw { width: 18px; height: 10px; flex-shrink: 0; vertical-align: middle; }

/* ---------- reveal motion ---------- */
.agt-js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--agt-ease), transform 1.2s var(--agt-ease-out); transition-delay: var(--d, 0s); }
.agt-js [data-reveal].is-in { opacity: 1; transform: none; }
.agt-js [data-reveal="fade"] { transform: none; }
/* the observed figure stays unclipped (Chrome counts a clip-path in IntersectionObserver ratios); the picture inside is clipped */
.agt-js [data-reveal="img"] { opacity: 1; transform: none; background: transparent !important; }
.agt-js [data-reveal="img"] img { clip-path: inset(0 0 100% 0); transform: scale(1.14); transition: clip-path 1.4s var(--agt-ease-io), transform 2.2s var(--agt-ease-out); transition-delay: var(--d, 0s); }
.agt-js [data-reveal="img"].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
/* room around each word so italic overhangs and tall letters are not cut by the mask */
.agt-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .12em .1em .04em; margin: -.14em -.12em -.1em -.04em; }
.agt-split .w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--agt-ease-out); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 45ms); }
.agt-split.is-in .w > span { transform: none; }

/* ---------- header ---------- */
#top.agt-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .97);
  transition: transform .5s var(--agt-ease), box-shadow .4s;
}
#top.agt-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--agt-line); }
.agt-topbar {
  height: var(--agt-top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--agt-g); border-bottom: 1px solid var(--agt-line);
  font: 500 10.5px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2);
  transition: margin .5s var(--agt-ease), opacity .3s;
}
.agt-topbar a { color: var(--agt-ink-2) !important; }
.agt-topbar a:hover { color: var(--agt-ink) !important; }
.agt-topbar__msgs { grid-column: 2; position: relative; height: 12px; min-width: 420px; text-align: center; overflow: hidden; }
.agt-topbar__msgs span { position: absolute; inset: 0; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity .6s, transform .8s var(--agt-ease-out), visibility 0s .8s; }
.agt-topbar__msgs span.is-on, .agt-topbar__msgs span.is-out { visibility: visible; transition: opacity .6s, transform .8s var(--agt-ease-out), visibility 0s; }
.agt-topbar__msgs span.is-on { opacity: 1; transform: none; }
.agt-topbar__msgs span.is-out { opacity: 0; transform: translateY(-100%); }
.agt-topbar__side { grid-column: 3; justify-self: end; display: flex; gap: 22px; align-items: center; }
.agt-topbar__left { grid-column: 1; display: flex; gap: 22px; align-items: center; }

.agt-bar {
  position: relative; height: var(--agt-bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--agt-g);
  transition: height .5s var(--agt-ease);
}
.agt-logo { grid-column: 2; display: block; line-height: 0; }
.agt-logo img { height: 70px; width: auto; display: block; transition: height .5s var(--agt-ease); }
.agt-nav { grid-column: 1; justify-self: start; }
.agt-nav ul { display: flex; gap: clamp(18px, 2.2vw, 40px); list-style: none; margin: 0; padding: 0; }
.agt-nav a {
  position: relative; display: inline-block; padding: 12px 0;
  font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-ink) !important;
}
.agt-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--agt-ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--agt-ease-io); }
.agt-nav li:hover > a::after, .agt-nav li.is-open > a::after, .agt-nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.agt-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); list-style: none; margin: 0; padding: 0; }
.agt-actions li { list-style: none; }
.agt-act {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0;
  background: none; border: 0; color: var(--agt-ink) !important; cursor: pointer;
  font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase;
}
.agt-act svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.agt-act:hover { color: var(--agt-rose) !important; }
.agt-act .agt-act__t { display: inline; }
.agt-count, #top .my_cart_quantity {
  position: absolute; top: 2px; left: 13px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--agt-rose) !important; color: #fff; font: 600 10px/17px var(--agt-sans); letter-spacing: 0; text-align: center;
}
.agt-burger { display: none; }

/* condensed header after scrolling. It keeps its height in the page and only slides up (top bar out of view, the bar's
   content nudged down, the logo scaled): when the header used to shrink, the page moved up 56px at the threshold and,
   near the top, the browser's scroll correction toggled it back and forth (the page "going crazy up and down", 26 Oct) */
#top.agt-header { --agt-shrink: 22px; }
#top.agt-header.is-scrolled { transform: translateY(calc((var(--agt-top) + var(--agt-shrink)) * -1)); }
#top.agt-header.is-scrolled .agt-topbar { opacity: 0; }
#top.agt-header .agt-bar > * { transition: transform .5s var(--agt-ease); }
#top.agt-header.is-scrolled .agt-bar > * { transform: translateY(calc(var(--agt-shrink) / 2)); }
#top.agt-header.is-scrolled .agt-logo img { transform: scale(.72); }
.agt-logo img { transform-origin: 50% 50%; transition: height .5s var(--agt-ease), transform .5s var(--agt-ease); }
#top.agt-header.is-hidden { transform: translateY(-100%); }
#top.agt-header.has-layer { transform: none !important; }

/* mega menu */
.agt-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--agt-line);
  box-shadow: 0 30px 60px -30px rgba(20, 17, 18, .18);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .35s var(--agt-ease), transform .45s var(--agt-ease), visibility 0s .45s;
}
.agt-mega.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--agt-ease), transform .45s var(--agt-ease), visibility 0s; }
.agt-mega__panel { display: none; grid-template-columns: 1.1fr 1.1fr .9fr; gap: clamp(24px, 4vw, 72px); padding: 44px var(--agt-g) 52px; max-width: var(--agt-max); margin: 0 auto; }
.agt-mega__panel.is-on { display: grid; }
.agt-mega__title { font: 300 clamp(34px, 3vw, 52px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; margin: 0 0 10px; }
.agt-mega__count { color: var(--agt-mute); font-size: 14px; margin: 0 0 26px; }
.agt-mega__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.agt-mega__list li { break-inside: avoid; }
.agt-mega__list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--agt-line); color: var(--agt-ink) !important; font-size: 15px; transition: padding .4s var(--agt-ease), color .3s; }
.agt-mega__list a small { color: var(--agt-mute); font-size: 12px; }
.agt-mega__list a:hover { padding-left: 8px; color: var(--agt-rose) !important; }
.agt-mega__brands { font-size: 15px; line-height: 2; color: var(--agt-ink-2); }
.agt-mega__brands a { color: var(--agt-ink) !important; }
.agt-mega__brands a:hover { color: var(--agt-rose) !important; }
.agt-mega__fig { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 380px; overflow: hidden; background: var(--agt-soft); }
.agt-mega__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--agt-ease-out); }
.agt-mega__fig:hover img { transform: scale(1.05); }
.agt-mega__fig figcaption { position: absolute; left: 14px; bottom: 14px; background: #fff; padding: 10px 14px; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-scrim { position: fixed; inset: 0; top: var(--agt-hdr); background: rgba(20, 17, 18, .18); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; z-index: 1020; }
.agt-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .4s; }

/* search overlay */
.agt-search {
  position: fixed; inset: 0; z-index: 1060; background: #fff;
  display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); visibility: hidden; opacity: 0; overflow-x: hidden; overflow-y: auto;
  transition: opacity .4s var(--agt-ease), visibility 0s .4s;
}
.agt-search.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--agt-ease); }
.agt-search__top { display: flex; justify-content: space-between; align-items: center; padding: 26px var(--agt-g); }
.agt-search form { align-self: start; padding: 8vh var(--agt-g) 0; max-width: 1200px; width: 100%; margin: 0 auto; }
.agt-search label { display: block; margin-bottom: 18px; }
.agt-search__field { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--agt-ink); }
.agt-search input[type=search] {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; padding: 10px 0 18px;
  font: 300 clamp(36px, 5vw, 80px)/1.1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; color: var(--agt-ink);
}
.agt-search input::placeholder { color: var(--agt-faint); }
.agt-search__hints { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.agt-chip { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--agt-line); border-radius: 40px; color: var(--agt-ink) !important; font-size: 14px; transition: border-color .3s, background .3s; }
.agt-chip:hover { border-color: var(--agt-ink); }
.agt-x { width: 44px; height: 44px; border: 1px solid var(--agt-line); border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .5s var(--agt-ease-out), border-color .3s; }
.agt-x:hover { transform: rotate(90deg); border-color: var(--agt-ink); }
.agt-x svg { width: 14px; height: 14px; stroke: var(--agt-ink); stroke-width: 1.4; }

/* mobile drawer */
.agt-drawer {
  position: fixed; inset: 0; z-index: 1070; background: #fff; display: flex; flex-direction: column;
  transform: translateX(-100%); visibility: hidden; transition: transform .7s var(--agt-ease-io), visibility 0s .7s;
}
.agt-drawer.is-open { transform: none; visibility: visible; transition: transform .7s var(--agt-ease-io); }
.agt-drawer__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--agt-line); }
.agt-drawer__top img { height: 46px; }
.agt-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
.agt-drawer details { border-bottom: 1px solid var(--agt-line); }
.agt-drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; cursor: pointer; font: 300 38px/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; }
.agt-drawer summary::-webkit-details-marker { display: none; }
.agt-drawer summary sup { font: 400 12px var(--agt-sans); color: var(--agt-mute); letter-spacing: 0; }
.agt-drawer details ul { list-style: none; margin: 0 0 18px; padding: 0; }
.agt-drawer details li a { display: block; padding: 9px 0; color: var(--agt-ink-2) !important; font-size: 16px; }
.agt-drawer__links { display: grid; gap: 14px; margin-top: 26px; }
.agt-drawer__links a { font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-ink) !important; }

/* ---------- hero: the four worlds ---------- */
.agt-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  height: calc(100vh - var(--agt-hdr)); height: calc(100svh - var(--agt-hdr)); min-height: 560px; max-height: 1040px;
  overflow: hidden;
}
.agt-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(26px, 5vh, 64px) var(--agt-g) clamp(26px, 5vh, 56px); }
.agt-hero__meta { display: flex; justify-content: space-between; align-items: center; }
.agt-hero__idx { font: 400 13px/1 var(--agt-sans); letter-spacing: .1em; color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-hero__idx b { color: var(--agt-ink); font-weight: 500; }
.agt-worlds { list-style: none; margin: 0; padding: 0; }
.agt-world { position: relative; }
.agt-world a {
  position: relative; display: inline-flex; align-items: flex-start; gap: 10px;
  font-family: var(--agt-serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
  font-size: clamp(44px, min(6vw, 12.2vh), 112px); line-height: 1.02; letter-spacing: -.035em;
  color: var(--agt-faint) !important; padding: .02em 0;
  transition: color .7s var(--agt-ease), transform .9s var(--agt-ease-out);
}
/* the active word moves right; the dash it leaves is the progress line of the slide */
.agt-world a { --dash: clamp(28px, 3.2vw, 64px); --gap: clamp(12px, 1.3vw, 24px); }
.agt-world a sup { font: 400 12px/1 var(--agt-sans); letter-spacing: .06em; color: var(--agt-mute); margin-top: .5em; opacity: 0; transition: opacity .6s; font-variant-numeric: tabular-nums; }
.agt-world a:hover { color: var(--agt-ink-2) !important; }
.agt-world.is-on a { color: var(--agt-ink) !important; }
.agt-world.is-on a { padding-left: calc(var(--dash) + var(--gap)); }
.agt-world a { transition: color .7s var(--agt-ease), padding .9s var(--agt-ease-out), transform .9s var(--agt-ease-out); }
.agt-world.is-on a sup { opacity: 1; }
.agt-world__bar { position: absolute; left: 0; top: 54%; width: clamp(28px, 3.2vw, 64px); height: 1px; background: var(--agt-faint); overflow: hidden; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; transition: opacity .4s, transform .9s var(--agt-ease-out); pointer-events: none; }
.agt-world.is-on .agt-world__bar { opacity: 1; transform: none; }
.agt-world__bar i { position: absolute; inset: 0; background: var(--agt-rose); transform: scaleX(0); transform-origin: 0 50%; }
.agt-world.is-on .agt-world__bar i { animation: agtFill var(--agt-cycle, 6s) linear forwards; }
.agt-hero.is-paused .agt-world.is-on .agt-world__bar i { animation-play-state: paused; }
@keyframes agtFill { to { transform: scaleX(1); } }
.agt-hero__foot { display: grid; gap: 22px; }
.agt-hero__foot .agt-lead { max-width: 42ch; }
.agt-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.agt-hero__cta .agt-btn span[data-world-label] { display: inline-block; min-width: 9ch; }

.agt-stage { position: relative; overflow: hidden; background: var(--agt-soft); }
.agt-slide { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); z-index: 1; }
.agt-slide.is-on { clip-path: inset(0 0 0 0); z-index: 3; transition: clip-path 1.25s var(--agt-ease-io); }
.agt-slide.is-prev { clip-path: inset(0 0 0 0); z-index: 2; }
.agt-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--agt-ease-out); }
.agt-slide.is-on img { transform: scale(1); }
.agt-slide.is-prev img { transform: scale(1); }
.agt-slide__cap {
  position: absolute; left: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px); z-index: 4;
  display: grid; gap: 6px; min-width: 250px; max-width: min(380px, 80%);
  background: #fff; padding: 16px 20px 18px; color: var(--agt-ink) !important;
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--agt-ease) .5s, transform .9s var(--agt-ease-out) .5s;
}
.agt-slide.is-on .agt-slide__cap { opacity: 1; transform: none; }
.agt-slide__cap small { font: 500 10px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-mute); }
.agt-slide__cap strong { font: 400 16px/1.3 var(--agt-sans); }
.agt-slide__cap span { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; }
.agt-slide__cap span em { font-style: normal; font-weight: 500; }
.agt-slide__cap:hover strong { color: var(--agt-rose); }

/* load choreography */
.agt-js .agt-hero .agt-world a { transform: translate3d(0, 40px, 0); opacity: 0; }
.agt-js .agt-hero.is-ready .agt-world a { transform: none; opacity: 1; transition: color .7s var(--agt-ease), padding .9s var(--agt-ease-out), transform 1.2s var(--agt-ease-out), opacity 1s var(--agt-ease); transition-delay: 0s, 0s, calc(.12s + var(--i) * .09s), calc(.12s + var(--i) * .09s); }
.agt-js .agt-hero .agt-hero__meta, .agt-js .agt-hero .agt-hero__foot { opacity: 0; transform: translateY(16px); }
.agt-js .agt-hero.is-ready .agt-hero__meta, .agt-js .agt-hero.is-ready .agt-hero__foot { opacity: 1; transform: none; transition: opacity 1s var(--agt-ease) .55s, transform 1.2s var(--agt-ease-out) .55s; }
.agt-js .agt-hero .agt-stage { clip-path: inset(0 0 0 100%); }
.agt-js .agt-hero.is-ready .agt-stage { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--agt-ease-io) .05s; }

/* =====================================================================
   HOME HERO: "Every great house, under one roof"
   an editorial table of real products in real light, each picture at its own depth
   ===================================================================== */
.agt-hx { position: relative; height: calc(100vh - var(--agt-hdr)); height: calc(100svh - var(--agt-hdr)); min-height: 470px; max-height: 1080px; overflow: hidden; background: #fff; --mx: 0; --my: 0; --sy: 0; }
.agt-hx__table { position: absolute; inset: 0; }
.agt-tile { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: block; z-index: 1; color: var(--agt-ink) !important;
  transform: translate3d(0, calc(var(--sy) * var(--speed) * 1px), 0); }
.agt-tile__float { display: block; width: 100%; height: 100%; animation: agtFloat var(--float, 10s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
@keyframes agtFloat { from { transform: translate3d(0, -7px, 0); } to { transform: translate3d(0, 7px, 0); } }
.agt-tile__move { position: relative; display: block; width: 100%; height: 100%; transform: translate3d(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * 1px), 0); }
.agt-tile__frame { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--agt-soft); box-shadow: 0 34px 60px -40px rgba(20, 17, 18, .5); }
.agt-tile__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--agt-ease-out); }
.agt-hx.is-settled .agt-tile:hover .agt-tile__frame img { transform: scale(1.07); transition-delay: 0s; }
.agt-tile__cap { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: grid; gap: 4px; padding: 10px 12px 11px; background: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--agt-ease), transform .6s var(--agt-ease-out); pointer-events: none; }
.agt-tile:hover .agt-tile__cap, .agt-tile:focus-visible .agt-tile__cap { opacity: 1; transform: none; }
.agt-tile__cap small { font: 500 9.5px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-mute); }
.agt-tile__cap b { font: 400 14px/1.25 var(--agt-sans); }
.agt-tile__cap em { font: 500 13px/1 var(--agt-sans); font-style: normal; }
.agt-hx__copy { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(40vw, 700px); text-align: center;
  transform: translate(-50%, -50%) translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px + var(--sy) * .2px), 0); opacity: calc(1 - var(--sy) / 620); }
.agt-hx__copy .agt-kicker { margin-bottom: 22px; }
.agt-hx__title { margin: 0 0 24px; font: 300 clamp(46px, min(5.4vw, 10.6vh), 108px)/.96 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.04em; color: var(--agt-ink); }
.agt-hx__title em { display: block; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-hx .agt-lead { margin: 0 auto 30px; max-width: 44ch; }
.agt-hx .agt-hero__cta { justify-content: center; }
.agt-hx__foot { position: absolute; left: var(--agt-g); right: var(--agt-g); bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 14px;
  font: 500 10.5px/1 var(--agt-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--agt-mute); }
.agt-hx__foot i { width: 4px; height: 4px; border-radius: 50%; background: var(--agt-rose); }
.agt-hx__scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.agt-hx__scroll::after { content: ''; width: 1px; height: 28px; background: linear-gradient(var(--agt-ink), rgba(20, 17, 18, 0)); transform-origin: 50% 0; animation: agtCue 2.4s var(--agt-ease-io) infinite; }
@keyframes agtCue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* entrance: pictures open from the bottom one after another, the line rises letter by letter */
.agt-js .agt-hx .agt-tile__frame { clip-path: inset(100% 0 0 0); }
.agt-js .agt-hx .agt-tile__frame img { transform: scale(1.2); }
.agt-js .agt-hx.is-ready .agt-tile__frame { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--agt-ease-io) calc(.12s + var(--i) * .09s); }
.agt-js .agt-hx.is-ready .agt-tile__frame img { transform: scale(1); transition: transform 2.4s var(--agt-ease-out) calc(.12s + var(--i) * .09s); }
.agt-js .agt-hx .agt-kicker, .agt-js .agt-hx .agt-lead, .agt-js .agt-hx .agt-hero__cta, .agt-js .agt-hx .agt-hx__foot { opacity: 0; transform: translateY(14px); }
.agt-js .agt-hx.is-ready .agt-kicker, .agt-js .agt-hx.is-ready .agt-lead, .agt-js .agt-hx.is-ready .agt-hero__cta, .agt-js .agt-hx.is-ready .agt-hx__foot {
  opacity: 1; transform: none; transition: opacity 1s var(--agt-ease) .65s, transform 1.2s var(--agt-ease-out) .65s; }
@media (max-width: 991px) {
  .agt-hx { height: auto; min-height: 0; max-height: none; padding: 30px 0 0; }
  .agt-hx__copy { position: relative; left: auto; top: auto; width: auto; padding: 0 20px; transform: none; opacity: 1; }
  .agt-hx__title { font-size: clamp(42px, 11.5vw, 72px); }
  .agt-hx { display: flex; flex-direction: column-reverse; padding-top: 18px; }
  .agt-hx__copy .agt-kicker { letter-spacing: .14em; font-size: 10px; }
  .agt-hx__table { position: relative; inset: auto; height: 108vw; max-height: 680px; margin: 0 0 26px; }
  .agt-tile { transform: none; }
  .agt-tile:nth-child(3), .agt-tile:nth-child(4), .agt-tile:nth-child(6), .agt-tile:nth-child(8) { display: none; }
  .agt-tile:nth-child(1) { left: 5%; top: 0; width: 45%; height: 50%; }
  .agt-tile:nth-child(5) { left: 54%; top: 7%; width: 41%; height: 45%; }
  .agt-tile:nth-child(2) { left: 9%; top: 54%; width: 37%; height: 42%; }
  .agt-tile:nth-child(7) { left: 51%; top: 57%; width: 43%; height: 39%; }
  .agt-hx__foot { display: none; }
}

/* =====================================================================
   HOME HERO: THE FILM
   A giant word with the film inside its letters (white layer + black type, blend "screen").
   Scrolling flies through the word into the full-screen film; then the line, the buttons
   and the chapters appear. Grain, shade and a slow push keep it cinematic.
   ===================================================================== */
/* the section slides up under the sticky header, so the film runs behind it and the word centres in what is left */
.agt-film { position: relative; height: 250vh; height: 250svh; margin-top: calc(-1 * var(--agt-hdr)); background: #fff; --p: 0; --ui: 0; --mx: 0; --my: 0; }
.agt-film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0d0b0c; }
.agt-film__media { position: absolute; inset: 0; }
/* the film drifts against the pointer while it is inside the letters (none once it is full screen) */
.agt-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(calc(var(--mx) * -26px * (1 - var(--ui))), calc(var(--my) * -16px * (1 - var(--ui))), 0) scale(calc(1.16 - var(--p) * .16));
  filter: brightness(calc(.85 + var(--ui) * .15)) contrast(1.12) saturate(1.1); }
.agt-film__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 6, 7, .72) 0%, rgba(8, 6, 7, .28) 38%, rgba(8, 6, 7, 0) 62%), linear-gradient(to bottom, rgba(8, 6, 7, .35), rgba(8, 6, 7, 0) 22%); opacity: var(--ui); }
.agt-film__grain { position: absolute; inset: -40px; opacity: .11; mix-blend-mode: overlay; pointer-events: none; animation: agtGrain .9s steps(6) infinite; background-size: 256px 256px; }
@keyframes agtGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-18px, 12px); } 40% { transform: translate(14px, -20px); } 60% { transform: translate(-10px, -8px); } 80% { transform: translate(20px, 16px); } 100% { transform: translate(0, 0); } }
.agt-film__mask { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding-top: var(--agt-hdr); background: #fff; mix-blend-mode: screen; pointer-events: none; will-change: transform, opacity; }
.agt-film__word { display: block; color: #000; font: 600 clamp(96px, min(34.5vw, calc((100vh - var(--agt-hdr)) * .8)), 760px)/.8 var(--agt-serif); font-size: clamp(96px, min(34.5vw, calc((100svh - var(--agt-hdr)) * .8)), 760px); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0; letter-spacing: -.055em; padding: 0 .04em .06em; transform: translateY(-2%); }
.agt-film__intro { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(1 - var(--p) * 5); }
.agt-film__intro .agt-kicker { position: absolute; left: var(--agt-g); bottom: 5vh; margin: 0; }
.agt-film__cue { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 500 10.5px/1 var(--agt-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--agt-ink); }
.agt-film__cue::after { content: ''; width: 1px; height: 34px; background: linear-gradient(var(--agt-ink), rgba(20, 17, 18, 0)); transform-origin: 50% 0; animation: agtCue 2.4s var(--agt-ease-io) infinite; }
/* now playing: chapter number, name (slides in on change) and a line that fills with the chapter */
.agt-film__now { position: absolute; right: var(--agt-g); bottom: 5vh; margin: 0; display: flex; align-items: center; gap: 14px; font: 500 10.5px/1 var(--agt-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--agt-ink); }
.agt-film__now [data-film-no] { color: var(--agt-mute, #8a8486); font-variant-numeric: tabular-nums; }
.agt-film__now b { display: inline-block; overflow: hidden; font-weight: 500; padding: 2px 0; }
.agt-film__now b span { display: inline-block; }
.agt-film__now b.is-swap span { animation: agtNow .7s var(--agt-ease-out); }
@keyframes agtNow { from { transform: translateY(105%); } to { transform: none; } }
.agt-film__now i { position: relative; width: 72px; height: 1px; background: rgba(20, 17, 18, .18); }
.agt-film__now u { position: absolute; inset: 0; background: var(--agt-ink); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); transition: transform .3s linear; }
.agt-film__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; color: #fff; padding: 0 var(--agt-g) clamp(22px, 4vh, 44px); opacity: var(--ui); transform: translateY(calc((1 - var(--ui)) * 40px)); pointer-events: none; }
.agt-film.is-open .agt-film__ui { pointer-events: auto; }
.agt-film__ui .agt-kicker { color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.agt-film__title { margin: 0 0 24px; color: #fff; font: 300 clamp(48px, min(7vw, 13vh), 150px)/.92 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.045em; max-width: 14ch; }
.agt-film__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-film__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(22px, 4vh, 40px); }
.agt-film__lead { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .82); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; }
.agt-film__chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 14px; }
.agt-film__chapters li { position: relative; padding-top: 12px; font: 500 11px/1.2 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: color .5s; }
.agt-film__chapters li span { margin-right: 10px; color: rgba(255, 255, 255, .4); }
.agt-film__chapters li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .28); }
.agt-film__chapters li i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--t, 0) * 100%); background: #fff; }
.agt-film__chapters li.is-on { color: #fff; }
@media (max-width: 991px) {
  /* !important: under 768px Odoo sets "section { height: auto !important }", which removed the scroll length */
  .agt-film { height: 210vh !important; height: 210svh !important; }
  .agt-film__word { font-size: min(34vw, 40vh); }
  .agt-film__intro .agt-kicker { left: 0; right: 0; text-align: center; bottom: 14vh; }
  .agt-film__now { left: 0; right: 0; justify-content: center; bottom: calc(14vh + 34px); }
  .agt-film__title { font-size: clamp(42px, 12vw, 72px); }
  .agt-film__chapters { grid-template-columns: repeat(var(--n, 5), max-content); overflow: hidden; }
  .agt-film__chapters li:not(.is-on) { display: none; }
  .agt-film__row { margin-bottom: 18px; }
}
/* the tail of the y hangs below the tight line box: room for it inside the letter clip */
.agt-film__word.agt-chars .w { padding-bottom: .34em; margin-bottom: -.34em; }
.agt-film__word.agt-chars .c { transform: translate3d(0, 150%, 0); } /* start below the deeper clip */
/* phones held upright: the word runs down the screen like a book spine, so the film fills the height */
@media (max-width: 767.98px) and (orientation: portrait) {
  .agt-film__mask { padding-bottom: 132px; }
  .agt-film__word { writing-mode: vertical-rl; font-size: min(calc((100vh - var(--agt-hdr) - 196px) / 2.62), 62vw); font-size: min(calc((100svh - var(--agt-hdr) - 196px) / 2.62), 62vw); padding: .04em 0; transform: none; animation: agtSpineIn 1.6s var(--agt-ease-out) .15s both; }
  .agt-film__word.agt-chars .w { display: inline; overflow: visible; padding: 0; margin: 0; }
  .agt-film__word .c { transform: none !important; transition: none !important; }
  .agt-film__intro .agt-kicker { display: none; }
  .agt-film__now { bottom: calc(5vh + 66px); }
}
@keyframes agtSpineIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .agt-film { height: auto !important; }
  .agt-film__sticky { position: relative; }
  .agt-film__mask, .agt-film__intro { display: none; }
  .agt-film__ui, .agt-film__shade { opacity: 1; transform: none; pointer-events: auto; }
  .agt-film__grain { animation: none; }
}

/* =====================================================================
   HOME HERO: THE WHOLE HOUSE (theme/src/field.js)
   Every product picture of the shop, cut from its white ground and sorted by colour into one long shelf.
   It opens on the whole shelf folded like a page of type, dives in, then drifts and parts around the
   headline. Pointer: products swell, the nearest one lifts with its label; drag to browse.
   ===================================================================== */
/* !important: under 768px Odoo sets "section { height: auto !important }" */
.agt-field { position: relative; height: calc(100vh - var(--agt-hdr)) !important; height: calc(100svh - var(--agt-hdr)) !important; min-height: 540px; max-height: 1100px; overflow: hidden; background: #fff; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.agt-field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.agt-field.is-drag, .agt-field.is-drag * { cursor: grabbing !important; }
.agt-field__still { position: absolute; inset: 0; background: #fff center / cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .8s; }
.agt-field.is-still .agt-field__still { opacity: 1; }
.agt-field.is-still .agt-field__canvas { display: none; }
.agt-field__copy { position: absolute; left: 50%; top: 50%; z-index: 2; width: max-content; max-width: min(780px, calc(100% - 2 * var(--agt-g))); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.agt-field__copy::before { content: ''; position: absolute; inset: -46px -70px; z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0)); transition: opacity 1s var(--agt-ease); }
.agt-field.is-live:not(.is-in) .agt-field__copy::before { opacity: 0; }
.agt-field__copy a, .agt-field__copy button { pointer-events: auto; }
.agt-field.is-still .agt-field__copy { padding: 34px 40px; border-radius: 22px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.agt-field__copy .agt-kicker { margin-bottom: 20px; }
.agt-field__title { margin: 0 0 22px; font: 300 clamp(44px, min(5.5vw, 10.4vh), 104px)/.98 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.035em; color: var(--agt-ink); }
.agt-field__title > span, .agt-field__title > em { display: block; }
.agt-field__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-field__lead { margin: 0 auto 28px; max-width: 44ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--agt-ink-2); }
.agt-field__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* the copy rises once the camera has landed (field.js adds .is-in); without the script it rises on its own */
.agt-field__copy > :not(.agt-field__title), .agt-field__title > * { animation: agtFieldUp 1.2s var(--agt-ease-out) both; animation-delay: calc(3.2s + var(--d, 0s)); }
.agt-field.is-live .agt-field__copy > :not(.agt-field__title), .agt-field.is-live .agt-field__title > * { animation: none; opacity: 0; transform: translate3d(0, 28px, 0); }
.agt-field.is-live.is-in .agt-field__copy > :not(.agt-field__title), .agt-field.is-live.is-in .agt-field__title > * { opacity: 1; transform: none; transition: opacity 1s var(--agt-ease) var(--d, 0s), transform 1.3s var(--agt-ease-out) var(--d, 0s); }
@keyframes agtFieldUp { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
.agt-field__copy .agt-kicker { --d: 0s; }
.agt-field__title > span { --d: .08s; }
.agt-field__title > em { --d: .18s; }
.agt-field__lead { --d: .32s; }
.agt-field__cta { --d: .44s; }
/* the label of the lifted product */
.agt-field__tag { position: absolute; left: 0; top: 0; z-index: 3; width: 240px; display: grid; gap: 6px; padding: 13px 15px 12px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(20, 17, 18, .08); border-radius: 14px; box-shadow: 0 24px 46px -24px rgba(40, 20, 28, .38);
  color: var(--agt-ink) !important; opacity: 0; visibility: hidden; pointer-events: none; translate: 0 8px; will-change: transform;
  transition: opacity .3s var(--agt-ease), translate .5s var(--agt-ease-out), visibility 0s .3s; }
.agt-field__tag.is-on { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition: opacity .35s var(--agt-ease), translate .6s var(--agt-ease-out); }
.agt-field__tag-b { font: 500 10px/1.2 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-rose); }
.agt-field__tag-n { font: 400 16px/1.25 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 50; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agt-field__tag-p { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--agt-line); font: 500 13px/1 var(--agt-sans); letter-spacing: .04em; }
.agt-field__tag-p svg { width: 18px; height: 10px; transition: transform .5s var(--agt-ease-out); }
.agt-field__tag:hover .agt-field__tag-p svg { transform: translateX(4px); }
/* the line along the bottom: a hint, and the shelf's colours with a mark for where you are (click to jump) */
.agt-field__ui { position: absolute; left: var(--agt-g); right: var(--agt-g); bottom: 16px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; animation: agtFieldUp 1s var(--agt-ease-out) 3.6s both; }
.agt-field.is-live .agt-field__ui { animation: none; opacity: 0; transition: opacity 1s var(--agt-ease) .7s; }
.agt-field.is-live.is-in .agt-field__ui { opacity: 1; }
.agt-field__hint { margin: 0; padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, .86); font: 500 10px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-field__hint-touch { display: none; }
@media (hover: none) { .agt-field__hint-fine { display: none; } .agt-field__hint-touch { display: inline; } }
.agt-field__bar { pointer-events: auto; position: relative; width: clamp(150px, 16vw, 260px); height: 26px; padding: 0; border: 0; background: rgba(255, 255, 255, .86); border-radius: 13px; cursor: pointer; }
.agt-field__bar::before { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--grad, linear-gradient(90deg, #c9a46a, #d8c14a, #6aa36f, #4f7bc0, #8a5cb0, #d06a9a, #c43c3c, #eee, #888, #222)); }
.agt-field__bar i { position: absolute; top: 50%; left: 0; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 2px; background: var(--agt-ink); box-shadow: 0 0 0 2px #fff; }
.agt-field__bar span { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; }
@media (max-width: 767.98px) {
  .agt-field { min-height: 560px; }
  .agt-field__copy { max-width: calc(100% - 32px); }
  .agt-field__copy::before { inset: -30px -16px; }
  .agt-field__copy .agt-kicker { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; }
  .agt-field__title { font-size: clamp(38px, 10.6vw, 58px); margin-bottom: 16px; text-wrap: balance; }
  .agt-field__lead { font-size: 15px; max-width: 32ch; margin-bottom: 22px; }
  .agt-field__cta .agt-btn--ghost { display: none; }
  .agt-field__ui { left: 16px; right: 16px; bottom: 12px; justify-content: center; }
  .agt-field__hint { font-size: 9.5px; letter-spacing: .18em; white-space: nowrap; }
  .agt-field__bar { display: none; }
  .agt-field__tag { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-field__copy > *, .agt-field__title > *, .agt-field__ui { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   HOME HERO: THE HOUSES IN DAYLIGHT (v7, AGT)
   Skin & Scent keeps the black stage; AGT is bright. One house at a time on a light stage tinted from its own bottle
   (--tint): a real daylight photograph (the plate, lifted towards the tint around the bottle, its edges dying into
   it), the house name in giant serif letters in a deep tone of the bottle (--ink) behind the bottle (the same
   photograph once more, cut out, in front), and a white glass card with the price and Add to bag. Every 6 s, or by
   the arrows, the thumbnails, a swipe or the keys. The pointer moves the bottle and the name against each other.
   ===================================================================== */
/* !important: under 768px Odoo sets "section { height: auto !important }" */
.agt-hs { position: relative; height: calc(100vh - var(--agt-hdr)) !important; height: calc(100svh - var(--agt-hdr)) !important; min-height: 560px; max-height: 1000px;
  overflow: hidden; background: #f4f0ea; color: var(--agt-ink); isolation: isolate; outline: none; --mx: 0; --my: 0; --dwell: 6s; }
.agt-hs__stage { position: absolute; inset: 0; }
.agt-hs__slide { position: absolute; inset: 0; background: var(--tint, #f4f0ea); opacity: 0; visibility: hidden; transition: opacity 1.1s var(--agt-ease), visibility 0s 1.1s; }
/* a dip through the light: the old house fades first, the new one rises out of it */
.agt-hs__slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s var(--agt-ease) .32s; z-index: 1; }
.agt-hs__slide.is-first { transition: none; }
.agt-hs__slide.is-out { opacity: 0; visibility: visible; transition: opacity .55s var(--agt-ease); z-index: 0; }
/* the plate and the cut-out bottle: same box, same moves, so the bottle always sits exactly on its photograph */
.agt-hs__img { position: absolute; top: 0; left: 58%; height: 100%; width: auto; aspect-ratio: 3 / 4; max-width: none; transform: translateX(-50%);
  translate: calc(var(--mx) * -16px) calc(var(--my) * -8px); scale: 1.06;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; will-change: scale, translate; }
.agt-hs__plate { z-index: 1; filter: saturate(1.04); }
.agt-hs__cut { z-index: 3; pointer-events: none; }
.agt-js .agt-hs:not(.is-laid) .agt-hs__word, .agt-js .agt-hs:not(.is-laid) .agt-hs__cut { visibility: hidden; }
.agt-js .agt-hs:not(.is-laid) .agt-hs__word > span { animation: none !important; }
.agt-hs__slide.is-on .agt-hs__img { animation: agtHsPush calc(var(--dwell) + 1.6s) both; }
.agt-hs__slide.is-out .agt-hs__img { scale: 1.02; transition: scale 1s var(--agt-ease); }
@keyframes agtHsPush { 0% { scale: 1.14; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 24% { scale: 1.02; animation-timing-function: linear; } 100% { scale: 1.07; } }
/* the giant name, centred on the bottle, behind it */
.agt-hs__word { position: absolute; z-index: 2; left: 0; right: 0; height: 0; top: var(--wtop, calc(var(--wy, .55) * 100%));
  translate: calc(var(--mx) * 24px) calc(var(--my) * 10px); white-space: nowrap; pointer-events: none;
  font: 300 clamp(96px, min(19vw, 30vh, 112vw / var(--len, 5)), 330px)/.8 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--ink, #2b2320);
  --wls: -.025em; letter-spacing: var(--wls); }
.agt-hs__word.is-split { font-size: var(--wfs, 160px); }
.agt-hs__word.is-split > span { position: absolute; top: 0; translate: 0 -54%; }
.agt-hs__wl { right: var(--wl-r, 50%); }
.agt-hs__wr { left: var(--wr-l, 50%); }
.agt-hs, .agt-hs *, .agt-hs *::before, .agt-hs *::after { box-sizing: border-box; }
.agt-hs__word > span { display: block; padding: .06em .02em .16em; }
.agt-hs__slide.is-on .agt-hs__word > span { animation: agtHsWord 1.5s var(--agt-ease-out) .2s both; }
.agt-hs__slide.is-out .agt-hs__word > span { opacity: 0; transform: translateY(-.12em); transition: opacity .7s var(--agt-ease), transform 1s var(--agt-ease); }
@keyframes agtHsWord { from { opacity: 0; transform: translateY(.22em); letter-spacing: calc(var(--wls) + .1em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; letter-spacing: var(--wls); clip-path: inset(0 0 0 0); } }
/* a soft shade at the left and the foot, so the headline and the card read on any photograph */
.agt-hs__stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .26) 30%, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 26%); }
/* headline */
.agt-hs__head { position: absolute; z-index: 5; left: var(--agt-g); top: clamp(26px, 6vh, 64px); max-width: 520px; }
.agt-hs__head .agt-kicker { margin-bottom: 16px; }
.agt-hs__title { margin: 0 0 22px; color: var(--agt-ink); font: 300 clamp(36px, min(3.8vw, 7.4vh), 64px)/1.02 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; }
.agt-hs__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-hs__all { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(20, 17, 18, .3); color: var(--agt-ink) !important; font: 500 11.5px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; transition: border-color .4s, gap .5s var(--agt-ease-out); }
.agt-hs__all:hover { border-color: var(--agt-ink); gap: 18px; }
.agt-hs__all .agt-arw { width: 18px; height: 10px; }
/* the dock: the glass card (left) and the houses + arrows (right) */
.agt-hs__dock { position: absolute; z-index: 6; left: var(--agt-g); right: var(--agt-g); bottom: clamp(18px, 4vh, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.agt-hs__cards { position: relative; width: min(400px, 100%); min-height: 148px; padding: 18px 20px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, .64); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 30px 60px -32px rgba(46, 26, 32, .35); overflow: hidden; }
.agt-hs__card { position: absolute; left: 20px; right: 20px; top: 18px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--agt-ease), transform .7s var(--agt-ease-out), visibility 0s .5s; }
.agt-hs__card.is-on { position: relative; left: auto; right: auto; top: auto; opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--agt-ease) .35s, transform .9s var(--agt-ease-out) .35s; }
.agt-hs__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.agt-hs__house { font: 500 10.5px/1.2 var(--agt-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--agt-rose); }
.agt-hs__count { font: 500 10.5px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-hs__count b { color: var(--agt-ink); font-weight: 500; }
.agt-hs__name { display: block; margin: 10px 0 14px; color: var(--agt-ink) !important; font: 400 clamp(18px, 1.5vw, 22px)/1.25 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 50; }
.agt-hs__name:hover { color: var(--agt-rose) !important; }
.agt-hs__price { font: 500 18px/1 var(--agt-sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.agt-hs__btns { display: inline-flex; align-items: center; gap: 16px; }
.agt-hs .agt-add.agt-hs__add { width: auto; height: 42px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--agt-ink); color: #fff !important; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-hs .agt-add.agt-hs__add:hover { background: var(--agt-rose); color: #fff !important; }
.agt-hs .agt-add.agt-hs__add.is-done { background: var(--agt-rose); color: #fff !important; }
.agt-hs__view { display: inline-flex; align-items: center; gap: 10px; color: var(--agt-ink) !important; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-hs__view .agt-arw { width: 16px; height: 9px; transition: transform .5s var(--agt-ease-out); }
.agt-hs__view:hover .agt-arw { transform: translateX(4px); }
/* the line that fills while a house is on show */
.agt-hs__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(20, 17, 18, .08); }
.agt-hs__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--agt-rose), var(--agt-ink)); transform-origin: 0 50%; transform: scaleX(0); }
.agt-hs.is-run .agt-hs__bar i { animation: agtHsBar var(--dwell) linear both; }
.agt-hs.is-hold .agt-hs__bar i { animation-play-state: paused; }
@keyframes agtHsBar { to { transform: scaleX(1); } }
.agt-hs__nav { display: flex; align-items: flex-end; gap: 18px; }
.agt-hs__thumbs { display: flex; gap: 10px; }
.agt-hs__thumb { position: relative; width: 62px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: rgba(20, 17, 18, .5); transition: color .4s; }
.agt-hs__thumb img { display: block; width: 62px; height: 82px; object-fit: cover; border-radius: 10px; opacity: .62; filter: saturate(.5); outline: 1px solid rgba(20, 17, 18, .1); outline-offset: -1px; transition: opacity .5s, filter .5s, transform .6s var(--agt-ease-out), outline-color .4s; }
.agt-hs__thumb span { display: block; margin-top: 8px; font: 500 9.5px/1.2 var(--agt-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-hs__thumb:hover img { opacity: .8; filter: none; transform: translateY(-3px); }
.agt-hs__thumb.is-on { color: var(--agt-ink); }
.agt-hs__thumb.is-on img { opacity: 1; filter: none; outline: 1.5px solid var(--agt-ink); }
.agt-hs__arrows { display: flex; gap: 10px; padding-bottom: 22px; }
.agt-hs__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(20, 17, 18, .16); background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; transition: background .4s, border-color .4s; }
.agt-hs__arrow svg { width: 18px; height: 10px; fill: none; stroke: var(--agt-ink); stroke-width: 1.3; }
.agt-hs__arrow:hover { background: var(--agt-ink); border-color: var(--agt-ink); }
.agt-hs__arrow:hover svg { stroke: #fff; }
.agt-hs .agt-kicker--rose { color: var(--agt-rose); }
/* entrance of the first screen */
.agt-hs__head > *, .agt-hs__dock { animation: agtFieldUp 1.2s var(--agt-ease-out) both; }
.agt-hs__head .agt-kicker { animation-delay: .5s; }
.agt-hs__title { animation-delay: .62s; }
.agt-hs__all { animation-delay: .78s; }
.agt-hs__dock { animation-delay: .95s; }
@media (max-width: 1100px) { .agt-hs__thumb span { display: none; } .agt-hs__thumb, .agt-hs__thumb img { width: 50px; } .agt-hs__thumb img { height: 66px; } .agt-hs__arrows { padding-bottom: 8px; } }
@media (max-width: 767.98px) {
  .agt-hs { min-height: 580px; }
  /* phones: the bottle stands lower, between the headline and the card; its name across the top of the bottle */
  .agt-hs__img { left: 50%; top: var(--ptop, auto); bottom: auto; height: var(--ph, 72%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%); }
  .agt-hs__word { top: var(--wtop, calc(28% - 118px + (var(--by0) + .1) * 72%)); }
  .agt-hs__stage::after { background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 26%), linear-gradient(0deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .3) 26%, rgba(255, 255, 255, 0) 44%); }
  .agt-hs__head { left: 18px; right: 18px; top: 18px; }
  .agt-hs__head .agt-kicker { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 10px; }
  .agt-hs__title { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 0; }
  .agt-hs__all { display: none; }
  .agt-hs__dock { left: 12px; right: 12px; bottom: 12px; display: block; }
  .agt-hs__cards { width: 100%; min-height: 0; padding: 14px 16px 18px; border-radius: 16px; }
  .agt-hs__card { left: 16px; right: 16px; top: 14px; }
  .agt-hs__name { margin: 8px 0 12px; font-size: 17px; }
  .agt-hs__price { font-size: 16px; }
  .agt-hs .agt-add.agt-hs__add { height: 40px; padding: 0 16px; }
  .agt-hs__nav { position: absolute; right: 16px; top: -58px; }
  .agt-hs__thumbs { display: none; }
  .agt-hs__arrows { padding: 0; }
  .agt-hs__arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-hs__img, .agt-hs__word > span, .agt-hs__head > *, .agt-hs__dock, .agt-hs__bar i { animation: none !important; }
  .agt-hs__img { scale: 1; }
}

/* =====================================================================
   HOME HERO: THE MAISON (v6) — AGT's own, white and bright (Skin & Scent keeps the black stage)
   A white page, an arched window ("under one roof") onto one daylight photograph at a time of a product the shop
   sells; the headline beside it; the product's glass card over the foot of the arch. A new photograph rises into
   the arch like a curtain and keeps drifting closer while it is on show.
   ===================================================================== */
/* !important: under 768px Odoo sets "section { height: auto !important }" (and on phones it is meant to be auto) */
.agt-mh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 5vw, 96px);
  height: calc(100vh - var(--agt-hdr)) !important; height: calc(100svh - var(--agt-hdr)) !important; min-height: 560px; max-height: 940px;
  padding: clamp(18px, 3.4vh, 40px) var(--agt-g); background: #fff; overflow: hidden; outline: none; --dwell: 6s; --mx: 0; --my: 0; }
.agt-mh, .agt-mh *, .agt-mh *::before, .agt-mh *::after { box-sizing: border-box; }
.agt-mh__copy { max-width: 600px; padding-left: clamp(0px, 2vw, 32px); }
.agt-mh__copy .agt-kicker { margin-bottom: 22px; }
.agt-mh__title { margin: 0 0 24px; font: 300 clamp(46px, min(5.4vw, 10.4vh), 104px)/.97 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.04em; color: var(--agt-ink); }
.agt-mh__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-mh__lead { margin: 0 0 30px; max-width: 40ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--agt-ink-2); }
.agt-mh__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(26px, 6vh, 60px); }
.agt-mh__index { display: flex; align-items: center; gap: 16px; }
.agt-mh__no { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-mh__no b { color: var(--agt-ink); font-weight: 500; }
.agt-mh__bar { position: relative; width: clamp(80px, 9vw, 140px); height: 1px; background: var(--agt-line); overflow: hidden; }
.agt-mh__bar i { position: absolute; inset: 0; background: var(--agt-ink); transform-origin: 0 50%; transform: scaleX(0); }
.agt-mh.is-run .agt-mh__bar i { animation: agtHsBar var(--dwell) linear both; }
.agt-mh.is-hold .agt-mh__bar i { animation-play-state: paused; }
.agt-mh__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--agt-line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .35s, background .35s; }
.agt-mh__arrow svg { width: 16px; height: 9px; fill: none; stroke: var(--agt-ink); stroke-width: 1.3; }
.agt-mh__arrow:hover { background: var(--agt-ink); border-color: var(--agt-ink); }
.agt-mh__arrow:hover svg { stroke: #fff; }
/* the arch: a 3:4 window with a round top, the height of the hero */
.agt-mh__frame { position: relative; height: 100%; display: flex; align-items: center; }
.agt-mh__arch { position: relative; height: 100%; aspect-ratio: 3 / 4; max-height: 860px; overflow: hidden; isolation: isolate; background: #f3efe9;
  border-radius: 50% 50% 26px 26px / 37.5% 37.5% 26px 26px; box-shadow: 0 50px 90px -60px rgba(46, 26, 32, .45); }
.agt-mh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden;
  translate: calc(var(--mx) * -10px) calc(var(--my) * -8px); }
.agt-mh__img.is-on { opacity: 1; visibility: visible; z-index: 2; animation: agtMhIn calc(var(--dwell) + 1.4s) both; }
.agt-mh__img.is-first { animation-name: agtMhFirst; }
.agt-mh__img.is-out { opacity: 1; visibility: visible; z-index: 1; scale: 1.06; transition: scale 1.2s var(--agt-ease); }
@keyframes agtMhIn {
  0% { clip-path: inset(100% 0 0 0); scale: 1.16; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  20% { clip-path: inset(0 0 0 0); scale: 1.03; animation-timing-function: linear; }
  100% { clip-path: inset(0 0 0 0); scale: 1.08; }
}
@keyframes agtMhFirst { 0% { scale: 1.1; opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 22% { scale: 1.03; opacity: 1; animation-timing-function: linear; } 100% { scale: 1.08; opacity: 1; } }
.agt-mh__chip { position: absolute; z-index: 3; top: 15%; right: 7%; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .7);
  font: 500 10px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-ink); }
/* the product's card over the foot of the arch, half on the photograph, half on the page */
.agt-mh__cards { position: absolute; z-index: 4; left: 0; bottom: 7%; width: min(320px, 70%); transform: translateX(-42%); }
.agt-mh__card { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 18px 20px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(20, 17, 18, .06); box-shadow: 0 30px 60px -32px rgba(46, 26, 32, .38);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s var(--agt-ease), transform .7s var(--agt-ease-out), visibility 0s .45s; }
.agt-mh__card.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--agt-ease) .45s, transform 1s var(--agt-ease-out) .45s; }
.agt-mh__house { font: 500 10.5px/1.2 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-rose); }
.agt-mh__name { color: var(--agt-ink) !important; font: 400 18px/1.25 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 50; }
.agt-mh__name:hover { color: var(--agt-rose) !important; }
.agt-mh__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.agt-mh__price { font: 500 16px/1 var(--agt-sans); font-variant-numeric: tabular-nums; }
.agt-mh .agt-add.agt-mh__add { width: auto; height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--agt-ink); color: #fff !important; font: 500 10.5px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-mh .agt-add.agt-mh__add:hover, .agt-mh .agt-add.agt-mh__add.is-done { background: var(--agt-rose); }
/* entrance */
.agt-mh__copy > * { animation: agtFieldUp 1.1s var(--agt-ease-out) both; }
.agt-mh__copy .agt-kicker { animation-delay: .15s; }
.agt-mh__title { animation-delay: .25s; }
.agt-mh__lead { animation-delay: .38s; }
.agt-mh__cta { animation-delay: .5s; }
.agt-mh__index { animation-delay: .62s; }
.agt-mh__chip { animation: agtFieldUp 1s var(--agt-ease-out) .9s both; }
@media (max-width: 1100px) and (min-width: 768px) { .agt-mh__cards { transform: translateX(-24%); } }
@media (max-width: 767.98px) {
  .agt-mh { display: flex; flex-direction: column; align-items: stretch; gap: 22px; height: auto !important; min-height: 0; max-height: none; padding: 14px 16px 34px; }
  .agt-mh__frame { order: -1; height: auto; display: block; }
  .agt-mh__arch { width: 100%; height: auto; max-height: none; margin: 0 auto; border-radius: 50% 50% 22px 22px / 37.5% 37.5% 22px 22px; }
  .agt-mh__cards { left: 10px; right: 10px; bottom: 10px; width: auto; transform: none; }
  .agt-mh__card { padding: 14px 16px; }
  .agt-mh__name { font-size: 16px; }
  .agt-mh__chip { top: 7%; right: 50%; translate: 50% 0; white-space: nowrap; font-size: 9px; padding: 8px 12px; }
  .agt-mh__copy { padding: 0 4px; }
  .agt-mh__copy .agt-kicker { font-size: 9.5px; letter-spacing: .15em; margin-bottom: 16px; }
  .agt-mh__title { font-size: clamp(38px, 11vw, 54px); margin-bottom: 16px; }
  .agt-mh__cta { margin-bottom: 26px; }
  .agt-mh__cta .agt-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-mh__img, .agt-mh__copy > *, .agt-mh__chip, .agt-mh__bar i { animation: none !important; }
  .agt-mh__img.is-on { clip-path: none; scale: 1; }
}

/* ---------- houses marquee ---------- */
.agt-houses { border-top: 1px solid var(--agt-line); border-bottom: 1px solid var(--agt-line); padding: 26px 0; overflow: hidden; }
.agt-houses__track { display: flex; width: max-content; animation: agtMarq 70s linear infinite; }
.agt-houses:hover .agt-houses__track { animation-play-state: paused; }
.agt-houses__set { display: flex; align-items: center; flex-shrink: 0; }
.agt-houses a {
  display: inline-flex; align-items: center; padding: 0 clamp(18px, 2vw, 34px);
  font: 300 clamp(30px, 3.4vw, 58px)/1.1 var(--agt-serif); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  letter-spacing: -.02em; color: var(--agt-ink) !important; white-space: nowrap; transition: color .35s;
}
.agt-houses a:hover { color: var(--agt-rose) !important; }
.agt-houses i { width: 6px; height: 6px; border-radius: 50%; background: var(--agt-rose); flex-shrink: 0; }
@keyframes agtMarq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.agt-sec { padding: clamp(72px, 10vw, 150px) 0; }
.agt-wrap { max-width: var(--agt-max); margin: 0 auto; padding: 0 var(--agt-g); }
.agt-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.agt-sechead__end { display: flex; align-items: center; gap: 28px; }

/* tabs */
.agt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.agt-tab { height: 40px; padding: 0 18px; border: 1px solid var(--agt-line); border-radius: 40px; background: #fff; color: var(--agt-ink-2); font: 400 14px/1 var(--agt-sans); cursor: pointer; transition: all .35s var(--agt-ease); }
.agt-tab:hover { border-color: var(--agt-ink); color: var(--agt-ink); }
.agt-tab.is-on { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff; }
.agt-arrows { display: flex; gap: 8px; }
.agt-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--agt-line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .3s, background .3s; }
.agt-arrow svg { width: 18px; height: 10px; stroke: var(--agt-ink); fill: none; stroke-width: 1.3; }
.agt-arrow:hover { border-color: var(--agt-ink); }
.agt-arrow:disabled { opacity: .35; cursor: default; }

/* product rail */
.agt-rail { display: none; }
.agt-rail.is-on { display: block; }
.agt-rail__track {
  --card: clamp(230px, 20.5vw, 330px);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: clamp(16px, 1.6vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--agt-g) 6px; scroll-padding: 0 var(--agt-g); cursor: grab;
}
.agt-rail__track::-webkit-scrollbar { display: none; }
.agt-rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.agt-rail__track.is-drag a { pointer-events: none; }
.agt-rail__track > * { scroll-snap-align: start; }
.agt-progress { position: relative; height: 1px; background: var(--agt-line); margin: 36px var(--agt-g) 0; overflow: hidden; }
.agt-progress i { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: var(--agt-ink); transition: transform .25s linear, width .25s; }

/* product card */
.agt-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.agt-card__media { position: relative; display: block; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.agt-card__media img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; transition: opacity .7s var(--agt-ease), transform 1.4s var(--agt-ease-out); }
.agt-card__media .agt-card__img2 { opacity: 0; }
.agt-card:hover .agt-card__media img { transform: scale(1.045); }
.agt-card:hover .agt-card__media.has-2 .agt-card__img1 { opacity: 0; }
.agt-card:hover .agt-card__media.has-2 .agt-card__img2 { opacity: 1; }
.agt-card__badge { position: absolute; top: 12px; left: 12px; font: 500 10px/1 var(--agt-sans); letter-spacing: .18em; text-transform: uppercase; background: #fff; border: 1px solid var(--agt-line); padding: 7px 9px; color: var(--agt-ink); }
.agt-card__badge--rose { color: var(--agt-rose); border-color: currentColor; }
.agt-card__body { padding: 16px 2px 0; display: grid; gap: 10px; }
.agt-card__name { color: var(--agt-ink) !important; font: 400 15px/1.38 var(--agt-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em; }
.agt-card__name:hover { color: var(--agt-rose) !important; }
.agt-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agt-price { font: 500 15px/1 var(--agt-sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.agt-price del { color: var(--agt-mute); font-weight: 400; margin-left: 8px; font-size: 13px; }
.agt-price.is-sale { color: var(--agt-rose); }
.agt-add {
  position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--agt-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--agt-ink) !important;
  transition: background .35s var(--agt-ease), border-color .35s, color .35s, transform .35s;
}
.agt-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.agt-add:hover { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff !important; }
.agt-add.is-busy { pointer-events: none; opacity: .6; }
.agt-add.is-done { background: var(--agt-rose); border-color: var(--agt-rose); color: #fff !important; }

/* add-to-bag toast */
.agt-toast { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 1080; display: grid; gap: 6px; width: min(360px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--agt-line); box-shadow: 0 24px 60px -24px rgba(20,17,18,.25); padding: 18px 20px;
  transform: translateY(20px); opacity: 0; visibility: hidden; transition: transform .6s var(--agt-ease-out), opacity .4s, visibility 0s .6s; }
.agt-toast.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .6s var(--agt-ease-out), opacity .4s; }
.agt-toast__k { font: 500 10px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-rose); }
.agt-toast__n { font-size: 15px; line-height: 1.35; }
.agt-toast .agt-link { justify-self: start; margin-top: 6px; }

/* ---------- editorial icons ---------- */
.agt-icons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }
.agt-icon { display: grid; gap: 18px; color: var(--agt-ink) !important; }
.agt-icon__fig { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--agt-soft); }
.agt-icon__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--agt-ease-out) !important; }
.agt-icon:hover .agt-icon__fig img { transform: scale(1.04); }
.agt-icon__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.agt-icon__meta h3 { margin: 0; font: 300 clamp(24px, 2.2vw, 36px)/1.1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.015em; }
.agt-icon__meta p { margin: 6px 0 0; color: var(--agt-mute); font-size: 14px; }
.agt-icon__meta .agt-price { font-size: 16px; }
.agt-icon:nth-child(2) { margin-top: clamp(40px, 8vw, 140px); }

/* ---------- Korean skincare ---------- */
.agt-kb { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.agt-kb__fig { position: sticky; top: calc(var(--agt-hdr) + 20px); margin: 0; aspect-ratio: 4 / 5.4; overflow: hidden; background: var(--agt-soft); }
.agt-kb__fig img { width: 100%; height: 100%; object-fit: cover; }
.agt-kb__copy { padding-top: clamp(0px, 4vw, 60px); }
.agt-kb__copy .agt-lead { margin: 26px 0 40px; }
.agt-kb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; margin-bottom: 44px; }

/* ---------- numbers ---------- */
.agt-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--agt-line); }
.agt-num { padding: 40px 28px 10px 0; border-right: 1px solid var(--agt-line); margin-right: 28px; }
.agt-num:last-child { border-right: 0; margin-right: 0; }
.agt-num b { display: block; font: 300 clamp(48px, 5.4vw, 96px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.agt-num span { display: block; margin-top: 14px; color: var(--agt-ink-2); font-size: 15px; max-width: 22ch; }

/* ---------- wholesale ---------- */
.agt-b2b { background: var(--agt-night); color: #fff; }
.agt-b2b .agt-kicker { color: rgba(255,255,255,.55); }
.agt-b2b .agt-h2, .agt-b2b .agt-h2 em { color: #fff; }
.agt-b2b__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 120px); align-items: end; }
.agt-b2b .agt-lead { color: rgba(255,255,255,.72); margin: 28px 0 38px; }
.agt-b2b__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.agt-b2b__list li { display: flex; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 17px; }
.agt-b2b__list li span { font: 400 12px var(--agt-sans); color: rgba(255,255,255,.45); letter-spacing: .1em; min-width: 2.4em; }
.agt-b2b__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- services ---------- */
.agt-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.agt-service svg { width: 34px; height: 34px; stroke: var(--agt-ink); fill: none; stroke-width: 1.1; margin-bottom: 22px; }
.agt-service h3 { margin: 0 0 8px; font: 400 21px/1.2 var(--agt-serif); font-variation-settings: 'opsz' 72, 'SOFT' 100; }
.agt-service p { margin: 0; color: var(--agt-ink-2); font-size: 15px; max-width: 30ch; }
.agt-service a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }

/* ---------- reviews ---------- */
.agt-reviews { text-align: center; }
.agt-stars { display: inline-flex; gap: 4px; color: var(--agt-rose); margin-bottom: 18px; }
.agt-stars svg { width: 16px; height: 16px; fill: currentColor; }
.agt-quotes { position: relative; min-height: 220px; margin-top: 30px; }
.agt-quote { position: absolute; inset: 0; margin: 0 auto; border: 0 !important; padding: 0 !important; max-width: 980px; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--agt-ease), transform 1s var(--agt-ease-out); pointer-events: none; }
.agt-quote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.agt-quote p { font: 300 clamp(24px, 2.6vw, 42px)/1.25 var(--agt-serif); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; letter-spacing: -.01em; margin: 0 0 22px; }
.agt-quote cite { font: 500 11px/1 var(--agt-sans); letter-spacing: .24em; text-transform: uppercase; font-style: normal; color: var(--agt-mute); }
.agt-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.agt-dots button { width: 34px; height: 18px; border: 0; background: none; cursor: pointer; position: relative; }
.agt-dots button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--agt-faint); transition: background .3s; }
.agt-dots button.is-on::after { background: var(--agt-ink); }

/* ---------- footer ---------- */
#bottom.agt-footer { background: #fff; color: var(--agt-ink); border-top: 1px solid var(--agt-line); }
.agt-footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); padding: clamp(56px, 7vw, 110px) var(--agt-g) clamp(40px, 5vw, 70px); max-width: var(--agt-max); margin: 0 auto; }
.agt-footer__brand img { height: 128px; width: auto; display: block; margin-bottom: 26px; }
.agt-footer__brand p { color: var(--agt-ink-2); font-size: 15px; max-width: 32ch; margin: 0 0 24px; }
.agt-footer h4 { font: 500 11px/1 var(--agt-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--agt-mute); margin: 8px 0 22px; }
.agt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.agt-footer li, .agt-footer address { font-size: 15px; line-height: 1.5; color: var(--agt-ink-2); font-style: normal; }
.agt-footer a { color: var(--agt-ink) !important; transition: color .3s; }
.agt-footer a:hover { color: var(--agt-rose) !important; }
.agt-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px var(--agt-g); border-top: 1px solid var(--agt-line); max-width: var(--agt-max); margin: 0 auto; font-size: 13px; color: var(--agt-mute); }
/* the site credit (his ask, 28 Oct): "Website built by Alpha Expansion", linked */
.agt-footer__bottom a { position: relative; color: var(--agt-ink); text-decoration: underline; text-decoration-color: var(--agt-line); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.agt-footer__bottom a:hover { text-decoration-color: currentColor; }
.agt-footer__bottom a::after { content: ''; position: absolute; inset: -10px -4px; }
.agt-social { display: flex; gap: 10px; }
.agt-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--agt-line); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.agt-social a:hover { border-color: var(--agt-ink); }
.agt-social svg { width: 16px; height: 16px; fill: var(--agt-ink); }
.agt-social svg.s { fill: none; stroke: var(--agt-ink); stroke-width: 1.4; }
.agt-wa { display: inline-flex; align-items: center; gap: 10px; }

/* =====================================================================
   SHOP: category / search header + grid (Odoo website_sale markup)
   ===================================================================== */
.agt-shophead {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 80px);
  max-width: var(--agt-max); margin: 0 auto; padding: clamp(28px, 4vw, 64px) var(--agt-g) clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--agt-line);
}
.agt-shophead.has-pic { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; }
.agt-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(18px, 3vw, 40px); font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-crumbs a { color: var(--agt-mute) !important; }
.agt-crumbs a:hover { color: var(--agt-ink) !important; }
.agt-crumbs a + a::before { content: '/'; margin-right: 10px; color: var(--agt-faint); }
.agt-shophead__title {
  margin: 0; font-family: var(--agt-serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: clamp(48px, 7vw, 128px); line-height: .98; letter-spacing: -.04em; color: var(--agt-ink);
}
.agt-shophead.is-search .agt-shophead__title { font-size: clamp(38px, 4.6vw, 80px); }
.agt-shophead__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-shophead__count { margin: 14px 0 0; color: var(--agt-mute); font-size: 14px; letter-spacing: .04em; }
.agt-shophead__count a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }
.agt-shophead .agt-lead { margin-top: 18px; max-width: 52ch; }
.agt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.agt-chip.is-on { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff !important; }
.agt-shophead__fig { margin: 0; aspect-ratio: 4 / 4.6; max-height: 440px; overflow: hidden; background: var(--agt-soft); justify-self: end; width: 100%; }
.agt-shophead__fig img { width: 100%; height: 100%; object-fit: cover; }

.o_wsale_products_page #o_wsale_container { max-width: var(--agt-max); width: 100%; padding: 0 var(--agt-g); }
.o_wsale_products_page #o_wsale_products_header .breadcrumb,
.o_wsale_products_page #o_wsale_products_header h1,
.o_wsale_products_page #category_header { display: none !important; }
.o_wsale_products_page #o_wsale_products_header { padding-top: 22px !important; padding-bottom: 22px !important; }
.o_wsale_products_page .products_header .btn, .o_wsale_products_page .o_sortby_dropdown .btn {
  height: 42px; border: 1px solid var(--agt-line) !important; border-radius: 40px !important; padding: 0 18px !important;
  background: #fff !important; color: var(--agt-ink) !important; font: 400 14px/40px var(--agt-sans) !important; box-shadow: none !important;
}
.o_wsale_products_page .products_header .btn:hover { border-color: var(--agt-ink) !important; }
.o_wsale_products_page .o_wsale_products_header_search_form_container .input-group,
.o_wsale_products_page .o_wsale_products_header_search_form_container .search-query {
  height: 42px; border-radius: 40px !important; border-color: var(--agt-line) !important; font-family: var(--agt-sans); box-shadow: none !important;
}
.o_wsale_products_page .o_wsale_products_header_search_form_container .input-group { border: 1px solid var(--agt-line); overflow: hidden; background: #fff; }
.o_wsale_products_page .o_wsale_products_header_search_form_container .input-group > * { border: 0 !important; background: transparent !important; }
.dropdown-menu { border: 1px solid var(--agt-line); border-radius: 0; box-shadow: 0 24px 48px -24px rgba(20,17,18,.2); padding: 8px 0; font-family: var(--agt-sans); }
.dropdown-item { padding: 9px 20px; font-size: 14px; }
.dropdown-item.active, .dropdown-item:active { background: var(--agt-ink); color: #fff; }

/* sidebar filters */
#products_grid_before { padding-right: clamp(16px, 2vw, 40px) !important; padding-top: 22px !important; }
#products_grid_before .o_wsale_products_grid_before_rail { height: auto !important; max-height: calc(100vh - 120px); }
#products_grid_before h6, #products_grid_before h6 b { font: 500 11px/1 var(--agt-sans) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--agt-mute); margin: 26px 0 14px !important; }
#products_grid_before .form-check { padding-left: 1.9em; margin-bottom: 8px !important; }
#products_grid_before .form-check-label { font-size: 15px; color: var(--agt-ink-2); cursor: pointer; }
#products_grid_before .form-check-input { width: 16px; height: 16px; border-radius: 0; border-color: var(--agt-faint); margin-top: .25em; }
#products_grid_before .form-check-input:checked { background-color: var(--agt-ink); border-color: var(--agt-ink); }
#products_grid_before .o_wsale_view_more_btn, #products_grid_before .btn-link { color: var(--agt-ink) !important; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
#products_grid_before .o_wsale_attribute_search_bar, #products_grid_before input[type=text] { border-radius: 0; border-color: var(--agt-line); font-size: 14px; }
#products_grid_before .nav-item { border: 0 !important; background: none !important; }

/* grid */
#o_wsale_products_grid.grid { gap: clamp(30px, 3.4vw, 56px) clamp(14px, 1.6vw, 28px) !important; }
#o_wsale_products_grid .oe_product { grid-column: span 3 !important; height: auto !important; }
.o_wsale_has_sidebar #o_wsale_products_grid .oe_product { grid-column: span 4 !important; }
#o_wsale_products_grid .o_wsale_product_grid_wrapper { height: auto !important; }
#o_wsale_products_grid .agt-card { height: 100%; }

/* pager */
#o_wsale_pager .pagination { gap: 6px; }
#o_wsale_pager .page-link { border: 1px solid var(--agt-line) !important; border-radius: 40px !important; min-width: 42px; height: 42px; display: grid; place-items: center; color: var(--agt-ink) !important; font: 400 14px var(--agt-sans); background: #fff; box-shadow: none !important; }
#o_wsale_pager .page-item.active .page-link { background: var(--agt-ink) !important; border-color: var(--agt-ink) !important; color: #fff !important; }
#o_wsale_pager .page-item.disabled .page-link { opacity: .4; }

/* offcanvas filters on phones */
#o_wsale_offcanvas { font-family: var(--agt-sans); }
#o_wsale_offcanvas .offcanvas-title, #o_wsale_offcanvas .o_wsale_offcanvas_title b { font-family: var(--agt-serif); font-weight: 400; font-size: 20px; }

/* =====================================================================
   CATEGORY HERO: giant title + tall "stages" with a moving spotlight
   ===================================================================== */
.agt-chero { position: relative; z-index: 0; background: #fff; padding: clamp(16px, 2.6vh, 34px) var(--agt-g) clamp(18px, 3vh, 38px); transform-origin: 50% 0; }
.agt-chero__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36ch); align-items: end; gap: clamp(20px, 4vw, 80px); margin-bottom: clamp(16px, 2.6vh, 32px); }
.agt-chero .agt-crumbs { margin-bottom: clamp(10px, 1.8vh, 22px); }
.agt-chero__title {
  margin: 0; font-family: var(--agt-serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
  font-size: clamp(54px, min(calc(150vw / var(--len, 8)), 14vw, 21vh), 230px); line-height: .9; letter-spacing: -.045em; color: var(--agt-ink); white-space: nowrap;
}
.agt-chero__title.is-search { white-space: normal; font-size: clamp(40px, min(6vw, 12vh), 110px); line-height: 1; }
.agt-chero__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-chero__side { padding-bottom: .4em; }
.agt-chero__count { margin: 0 0 10px; font: 400 13px/1.2 var(--agt-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--agt-mute); }
.agt-chero__count b { font: 300 36px/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; text-transform: none; color: var(--agt-ink); margin-right: 8px; font-variant-numeric: lining-nums tabular-nums; }
.agt-chero .agt-lead { font-size: 15.5px; margin: 0; max-width: 40ch; }
.agt-chero .agt-chips { margin-top: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.agt-chero .agt-chips::-webkit-scrollbar { display: none; }
.agt-chero .agt-chip { flex-shrink: 0; }
.agt-chero .agt-chip { height: 34px; padding: 0 14px; font-size: 13px; }

.agt-stages { display: flex; gap: clamp(6px, .6vw, 12px); height: clamp(250px, calc(100vh - var(--agt-hdr) - 290px), 540px); }
.agt-stage { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: block; background: #fff; box-shadow: inset 0 0 0 1px var(--agt-line); color: var(--agt-ink) !important; isolation: isolate;
  transition: flex-grow 1.05s var(--agt-ease-io), background .6s var(--agt-ease), opacity .9s var(--agt-ease), transform 1.2s var(--agt-ease-out); }
.agt-stage.is-on { flex-grow: 2.9; }
.agt-stage__img { position: absolute; inset: 0; }
.agt-stage__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: grayscale(.6) contrast(.94) brightness(.98);
  transition: transform 1.8s var(--agt-ease-out), filter 1s var(--agt-ease); }
.agt-stage.is-on .agt-stage__img img { transform: scale(1); filter: none; }
.agt-stage.is-pack .agt-stage__img { inset: 8% 7% 23%; }
.agt-stage.is-pack:not(.is-on) .agt-stage__img { inset: 14% 10% 18%; }
.agt-stage.is-pack .agt-stage__img img { object-fit: contain; mix-blend-mode: multiply; }
.agt-stage.is-pack.is-on { background: #fff; box-shadow: inset 0 0 0 1px #ddd6d6; }
.agt-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s var(--agt-ease);
  background: radial-gradient(90% 60% at 50% -5%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); }
.agt-stage.is-pack.is-on::before { opacity: 1; }
.agt-stage__no { position: absolute; top: 14px; left: 16px; z-index: 3; font: 400 12px/1 var(--agt-sans); letter-spacing: .12em; color: var(--agt-ink); }
.agt-stage.is-photo .agt-stage__no { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.agt-stage__label { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 6px; padding: 14px 16px 15px; background: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--agt-ease), transform .8s var(--agt-ease-out); }
.agt-stage.is-on .agt-stage__label { opacity: 1; transform: none; transition-delay: .25s; }
.agt-stage__label b { font: 300 clamp(20px, 1.8vw, 32px)/1.08 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-stage.is-product .agt-stage__label b { font: 400 15px/1.35 var(--agt-sans); letter-spacing: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agt-stage__label small { font: 500 10px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-mute); }
.agt-stage__label::after { content: ''; position: absolute; right: 16px; bottom: 17px; width: 18px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s var(--agt-ease-out); }
.agt-stage:hover .agt-stage__label::after { transform: translateX(4px); }
/* the name of a stage that is not in the light, written up its edge */
.agt-stage__v { position: absolute; left: 14px; bottom: 16px; z-index: 3; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 80%; overflow: hidden; text-overflow: ellipsis;
  font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink); transition: opacity .4s var(--agt-ease); }
.agt-stage.is-photo .agt-stage__v { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.agt-stage.is-on .agt-stage__v { opacity: 0; }

/* typographic stages (contact channels): the stage in the light turns black */
.agt-stage.is-type { background: #fff; }
.agt-stage.is-type.is-on { background: var(--agt-ink); color: #fff !important; box-shadow: none; }
.agt-stage__icon { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.82); z-index: 2; transition: transform 1s var(--agt-ease-out); }
.agt-stage.is-type.is-on .agt-stage__icon { transform: translate(-50%, -50%) scale(1.25); }
.agt-stage__icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.agt-stage.is-type.is-on .agt-stage__no, .agt-stage.is-type.is-on .agt-stage__label b { color: #fff; }
.agt-stage.is-type .agt-stage__label { background: transparent; }
.agt-stage.is-type.is-on .agt-stage__label small { color: rgba(255,255,255,.6); }
.agt-stage.is-type .agt-stage__label b { white-space: normal; }
/* pack shots: lift their light grey photo backgrounds to white */
.agt-stage.is-pack .agt-stage__img img { filter: grayscale(.6) brightness(1.05) contrast(1.06); }
.agt-stage.is-pack.is-on .agt-stage__img img { filter: brightness(1.05) contrast(1.06); }

/* entrance */
.agt-js .agt-chero .agt-stage { opacity: 0; transform: translateY(46px); }
.agt-js .agt-chero.is-ready .agt-stage { opacity: 1; transform: none; transition-delay: 0s, 0s, calc(.2s + var(--i) * .09s), calc(.2s + var(--i) * .09s); }
.agt-js .agt-chero.is-settled .agt-stage { transition-delay: 0s; }
.agt-js .agt-chero .agt-chero__side { opacity: 0; transform: translateY(14px); }
.agt-js .agt-chero.is-ready .agt-chero__side { opacity: 1; transform: none; transition: opacity 1s var(--agt-ease) .35s, transform 1.2s var(--agt-ease-out) .35s; }
.agt-chars .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .08em .12em .02em; margin: -.12em -.08em -.12em -.02em; }
.agt-chars .c { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.15s var(--agt-ease-out); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 32ms); }
.agt-chars.is-in .c { transform: none; }

/* the products slide over the hero like a sheet (desktop) */
@media (min-width: 992px) {
  .o_wsale_products_page .agt-chero { position: sticky; top: 0; transform: scale(calc(1 - var(--p, 0) * .045)); }
  .o_wsale_products_page .agt-chero > * { opacity: calc(1 - var(--p, 0) * .5); }
  .o_wsale_products_page #o_wsale_container { position: relative; z-index: 1; background: #fff; max-width: none !important;
    padding: 6px max(var(--agt-g), calc((100vw - var(--agt-max)) / 2 + var(--agt-g))) 0 !important;
    border-radius: 28px 28px 0 0; box-shadow: 0 -40px 80px -46px rgba(20, 17, 18, .32); }
  .o_wsale_products_page #wrap > .oe_structure:last-child { position: relative; z-index: 1; background: #fff; }
}

/* =====================================================================
   WALL HERO: a slow moving wall of the real catalogue (B2B)
   ===================================================================== */
.agt-wallhero { position: relative; height: calc(100vh - var(--agt-hdr)); min-height: 560px; max-height: 1000px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--agt-line); }
.agt-wall { position: absolute; top: -4%; bottom: -4%; right: 0; left: 30%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, .9vw, 16px); }
.agt-wall__col { overflow: hidden; }
.agt-wall__track { display: flex; flex-direction: column; gap: clamp(8px, .9vw, 16px); animation: agtWall var(--dur, 80s) linear infinite; animation-direction: var(--dir, normal); will-change: transform; }
.agt-wall__col:nth-child(even) { margin-top: -12vh; }
@keyframes agtWall { to { transform: translate3d(0, -50%, 0); } }
.agt-wall__tile { display: grid; place-items: center; aspect-ratio: 4 / 5; background: #fff; box-shadow: inset 0 0 0 1px var(--agt-line); flex-shrink: 0; }
.agt-wall__tile img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.agt-wallhero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #fff 0%, #fff 33%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.35) 56%, rgba(255,255,255,0) 70%); }
.agt-wallhero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 1; pointer-events: none; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); }
.agt-wallhero__panel { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 0 var(--agt-g); max-width: min(46%, 720px); }
.agt-wallhero__title { margin: 0 0 22px; font: 300 clamp(56px, min(7.6vw, 15vh), 150px)/.92 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.045em; color: var(--agt-ink); }
.agt-wallhero__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-wallhero .agt-lead { margin-bottom: 30px; }
.agt-wallhero:hover .agt-wall__track { animation-play-state: paused; }
.agt-chero--page { padding-bottom: clamp(40px, 6vw, 90px); border-bottom: 1px solid var(--agt-line); }

/* =====================================================================
   PRODUCT PAGE
   ===================================================================== */
.o_wsale_product_page #product_detail { max-width: var(--agt-max) !important; width: 100%; padding: 0 var(--agt-g); margin-top: 0 !important; }
.o_wsale_product_page #product_detail > .o_wsale_content_contained { max-width: none; padding: 22px 0 !important; }
.o_wsale_product_page .o_wsale_breadcrumb { font: 500 11px/1.4 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.o_wsale_product_page .o_wsale_breadcrumb a { color: var(--agt-mute) !important; }
.o_wsale_product_page .o_wsale_breadcrumb .active, .o_wsale_product_page .o_wsale_breadcrumb .active span { color: var(--agt-ink); text-transform: none; letter-spacing: 0; font-size: 13px; }
.o_wsale_product_page .breadcrumb-item + .breadcrumb-item::before { color: var(--agt-faint); }
#product_detail_main { --bs-gutter-x: clamp(24px, 4vw, 80px); }
#product_detail_main .o_wsale_product_images { flex: 0 0 56%; max-width: 56%; }
#product_detail_main #product_details { flex: 1 1 0; max-width: none; top: calc(var(--agt-hdr) + 12px) !important; }
#o_wsale_product_details_content { padding: 0 !important; max-width: 560px; }
#o-carousel-product, #o-carousel-product .carousel-outer { background: #fff; }
#o-carousel-product .carousel-outer { aspect-ratio: 1 / 1; max-height: 78vh; border: 1px solid var(--agt-line); }
#o-carousel-product .product_detail_img { object-fit: contain !important; padding: 6%; }
#o-carousel-product .carousel-control-prev i, #o-carousel-product .carousel-control-next i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border-color: var(--agt-line) !important; }
.o_carousel_product_indicators .carousel-indicators li, .o_carousel_product_indicators .carousel-indicators button { border: 1px solid var(--agt-line) !important; border-radius: 0; opacity: .7; }
.o_carousel_product_indicators .carousel-indicators .active { border-color: var(--agt-ink) !important; opacity: 1; }
.agt-pkicker { display: inline-block; margin-bottom: 16px; color: var(--agt-rose) !important; }
#product_details h1 {
  font-family: var(--agt-serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: clamp(32px, 2.9vw, 50px) !important; line-height: 1.06; letter-spacing: -.025em; margin-bottom: 18px !important; color: var(--agt-ink);
}
#product_details [itemprop="description"], #product_details .o_wsale_product_details_content_section_title .text-muted { color: var(--agt-ink-2) !important; font-size: 15.5px; line-height: 1.65; }
#product_details .product_price .oe_price, #product_details .product_price .h5, #product_details .oe_price .oe_currency_value { font: 500 26px/1.1 var(--agt-sans) !important; letter-spacing: .01em; color: var(--agt-ink); }
#product_details .oe_default_price, #product_details .oe_compare_list_price { font: 400 17px var(--agt-sans) !important; color: var(--agt-mute) !important; }
#product_details .discount .oe_price, .discount #product_details .oe_price { color: var(--agt-rose); }
#product_details .variant_attribute .attribute_name, #product_details .o_wsale_product_attribute strong { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-mute); }
#product_details .css_quantity { height: 54px; border: 1px solid var(--agt-ink) !important; border-radius: 0; background: #fff; }
#product_details .css_quantity .btn { color: var(--agt-ink) !important; }
#product_details .css_quantity input { font: 500 15px var(--agt-sans); width: 3.2em; }
#product_details #add_to_cart_wrap .btn-primary, #product_details #contact_us_wrapper .btn-primary {
  height: 54px; border-radius: 0 !important; border: 1px solid var(--agt-ink) !important; background: var(--agt-ink) !important; color: #fff !important;
  font: 500 12px/1 var(--agt-sans) !important; letter-spacing: .22em; text-transform: uppercase; box-shadow: none !important; transition: background .4s, border-color .4s;
}
#product_details #add_to_cart_wrap .btn-primary:hover { background: var(--agt-rose) !important; border-color: var(--agt-rose) !important; }
#product_details #add_to_cart_wrap .btn-primary .fa { display: none; }
#product_details .availability_messages .alert { border-radius: 0; font-size: 14px; }
.agt-pnotes { list-style: none; margin: 4px 0 30px; padding: 22px 0 0; border-top: 1px solid var(--agt-line); display: grid; gap: 14px; }
.agt-pnotes li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--agt-ink-2); }
.agt-pnotes svg { width: 24px; height: 24px; flex-shrink: 0; stroke: var(--agt-ink); fill: none; stroke-width: 1.3; }
.agt-pnotes a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }
#product_details .accordion-item { border-color: var(--agt-line); }
#product_details .accordion-button { font: 500 12px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; padding: 20px 0; background: none; box-shadow: none; color: var(--agt-ink); }
#product_full_description { max-width: var(--agt-max); margin: 0 auto; }
/* the description is shown under the price and buttons (moved by agt.product), not above them */
#product_details .o_wsale_product_details_content_section_title > div.oe_structure.text-muted { display: none !important; }
.agt-crumbs--product { margin-bottom: 0; }
/* Odoo's stock "30-day money-back guarantee / 2-3 days" lines contradict AGT's own policy: not shown on this site */
#o_wsale_product_cta_section > small.text-muted { display: none !important; }
#product_details .o_product_tags { margin: 0 0 18px !important; }
#product_details .o_product_tags a span, #product_details .o_product_tags .badge {
  background: #fff !important; color: var(--agt-ink) !important; border: 1px solid var(--agt-line); border-radius: 40px !important;
  font: 500 10px/1 var(--agt-sans) !important; letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px !important; }
#product_details .o_product_tags a:hover span { border-color: var(--agt-ink); }
#product_details #o_wsale_cta_wrapper .btn:not(.btn-primary) { width: 54px; height: 54px; border: 1px solid var(--agt-line) !important; border-radius: 0 !important; background: #fff !important; color: var(--agt-ink) !important; }
#product_details #o_wsale_cta_wrapper .btn:not(.btn-primary):hover { border-color: var(--agt-ink) !important; }
.agt-pdesc { font-size: 15.5px; line-height: 1.7; color: var(--agt-ink-2); }
.agt-pdesc p { margin: 0 0 1em; }
.agt-pdesc .accordion, .agt-pdesc .accordion-item, .agt-pdesc .card, .agt-pdesc .border, .agt-pdesc .rounded, .agt-pdesc [class*="rounded-"] { border-radius: 0 !important; }
.agt-pdesc .accordion { --bs-accordion-border-color: var(--agt-line); --bs-accordion-bg: transparent; border: 0; }
.agt-pdesc .accordion-item { border: 0 !important; border-top: 1px solid var(--agt-line) !important; background: none !important; }
.agt-pdesc .accordion-item:last-child { border-bottom: 1px solid var(--agt-line) !important; }
.agt-pdesc .accordion-button { font: 500 11px/1.4 var(--agt-sans) !important; letter-spacing: .2em; text-transform: uppercase; padding: 18px 0 !important; background: none !important; box-shadow: none !important; color: var(--agt-ink) !important; }
.agt-pdesc .accordion-body { padding: 0 0 18px !important; }
.agt-pdesc .nav-tabs { border-bottom: 1px solid var(--agt-line); gap: 18px; }
.agt-pdesc .nav-tabs .nav-link { border: 0 !important; background: none !important; padding: 12px 0 !important; font: 500 11px/1 var(--agt-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agt-mute) !important; }
.agt-pdesc .nav-tabs .nav-link.active { color: var(--agt-ink) !important; box-shadow: inset 0 -1px 0 var(--agt-ink); }
.agt-pdesc table { width: 100%; font-size: 14px; }
.agt-pdesc td, .agt-pdesc th { border-color: var(--agt-line) !important; padding: 10px 8px 10px 0; }
.agt-more { border-top: 1px solid var(--agt-line); }

/* =====================================================================
   CART / CHECKOUT / PORTAL / LOGIN: same type, buttons and fields
   ===================================================================== */
.oe_website_sale h1, .oe_website_sale h2, .oe_website_sale h3, .oe_website_sale h4,
.o_portal h1, .o_portal h2, .o_portal h3, .oe_login_form h1, #wrap .o_page_header h1 {
  font-family: var(--agt-serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em;
}
#wrap .btn-primary { color: #fff !important; background: var(--agt-ink); border-color: var(--agt-ink); border-radius: 0; font: 500 12px/1 var(--agt-sans); letter-spacing: .18em; text-transform: uppercase; padding: 16px 26px; box-shadow: none; }
#wrap .btn-primary:hover, #wrap .btn-primary:focus { background: var(--agt-rose); border-color: var(--agt-rose); }
#wrap .btn-secondary, #wrap .btn-light, #wrap .btn-outline-primary { border-radius: 0; font-family: var(--agt-sans); }
#wrap .btn-outline-primary { border-color: var(--agt-ink); color: var(--agt-ink); }
#wrap .btn-outline-primary:hover { background: var(--agt-ink); color: #fff; }
#wrap .form-control, #wrap .form-select { border-radius: 0; border-color: var(--agt-line); font-family: var(--agt-sans); font-size: 15px; min-height: 48px; box-shadow: none; }
#wrap .form-control:focus, #wrap .form-select:focus { border-color: var(--agt-ink); }
#wrap .form-label, #wrap label.col-form-label { font: 500 11px/1.3 var(--agt-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--agt-ink-2); }
#wrap .card { border-radius: 0; border-color: var(--agt-line); }
#wrap a { color: var(--agt-ink); }
#wrap .text-primary, #wrap a.text-primary { color: var(--agt-rose) !important; }
#wrap .badge.bg-primary, #wrap .bg-primary { background-color: var(--agt-ink) !important; }
.o_wsale_cart_page #wrap, #shop_cart { font-family: var(--agt-sans); }
.oe_login_form, .oe_signup_form, .oe_reset_password_form { max-width: 440px !important; padding: clamp(40px, 6vw, 90px) 0 !important; }

.o_wsale_products_page .o_wsale_filmstrip_container { display: none !important; }
#products_grid_before .accordion-item { border: 0 !important; border-bottom: 1px solid var(--agt-line) !important; background: none !important; margin: 0 !important; }
#products_grid_before .accordion-header, #products_grid_before .accordion-button, #products_grid_before .accordion-button b {
  font: 500 11px/1.2 var(--agt-sans) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink) !important; }
#products_grid_before .accordion-button { padding: 18px 0 !important; }
#products_grid_before .accordion-button::after { transform-origin: 50% 50%; opacity: .6; }
#products_grid_before .accordion-collapse .flex-column { padding-bottom: 8px; }

/* =====================================================================
   CONTENT PAGES (about, contact, B2B, returns, thank you)
   ===================================================================== */
.agt-pagehead { border-bottom: 1px solid var(--agt-line); }
.agt-pagehead .agt-shophead__title { font-size: clamp(46px, 6.4vw, 116px); }
.agt-h3 { font: 300 clamp(28px, 2.4vw, 40px)/1.08 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; margin: 0 0 28px; }
.agt-mute { color: var(--agt-mute); }
.agt-split2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 120px); align-items: start; }
.agt-prose { font-size: 17px; line-height: 1.75; color: var(--agt-ink-2); max-width: 70ch; }
.agt-prose p { margin: 0 0 1.1em; }
.agt-prose__intro { font-size: 19px; color: var(--agt-ink); }
.agt-prose h2 { display: flex; gap: 16px; align-items: baseline; margin: 2.4em 0 .8em; font: 300 clamp(26px, 2.2vw, 34px)/1.15 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.015em; color: var(--agt-ink); scroll-margin-top: calc(var(--agt-hdr) + 20px); }
.agt-prose h2 span { font: 400 12px var(--agt-sans); letter-spacing: .14em; color: var(--agt-rose); }
.agt-prose ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.agt-prose li { position: relative; padding-left: 26px; margin-bottom: .55em; }
.agt-prose li::before { content: ''; position: absolute; left: 0; top: .82em; width: 12px; height: 1px; background: var(--agt-ink); }
.agt-prose a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }
.agt-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--agt-line); }
.agt-value { padding-top: 30px; }
.agt-value span { font: 400 12px var(--agt-sans); letter-spacing: .14em; color: var(--agt-rose); }
.agt-value h3 { margin: 16px 0 10px; font: 300 28px/1.15 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.015em; }
.agt-value p { margin: 0; color: var(--agt-ink-2); font-size: 16px; max-width: 34ch; }
.agt-mv { background: var(--agt-soft); }
.agt-mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px); }
.agt-mv blockquote { margin: 0; padding: 0; border: 0; }
.agt-mv__q { margin: 0; font: 300 clamp(24px, 2.4vw, 38px)/1.28 var(--agt-serif); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; letter-spacing: -.01em; color: var(--agt-ink); }
.agt-branches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.agt-branch { border-top: 1px solid var(--agt-ink); padding-top: 28px; }
.agt-branch h3 { margin: 0 0 14px; font: 300 clamp(40px, 4vw, 64px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; }
.agt-branch p { margin: 0 0 6px; color: var(--agt-ink-2); font-size: 16px; }
.agt-branch .agt-link { margin-top: 18px; }
.agt-contact__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.agt-formbox .s_website_form_label { font: 500 11px/1.3 var(--agt-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--agt-ink-2); margin-bottom: 8px; width: auto !important; }
.agt-formbox .s_website_form_mark { color: var(--agt-rose); }
.agt-formbox .form-control { border-width: 0 0 1px; padding-left: 0; padding-right: 0; background: transparent; }
.agt-formbox .form-control:focus { border-color: var(--agt-ink); }
.agt-formbox textarea.form-control { border-width: 1px; padding: 14px; }
.agt-formbox .s_website_form_send { margin-top: 10px; }
.agt-formbox #s_website_form_result { display: block; margin-top: 14px; font-size: 14px; }
.agt-contact__side { display: grid; gap: 34px; position: sticky; top: calc(var(--agt-hdr) + 20px); }
.agt-cblock p { margin: 0 0 10px; color: var(--agt-ink-2); font-size: 16px; line-height: 1.6; }
.agt-cblock a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }
.agt-cblock .agt-btn, .agt-cblock .agt-btn:hover { border-bottom: 1px solid var(--agt-ink); }
.agt-cblock .agt-btn { color: #fff !important; }
.agt-cblock .agt-btn--ghost { color: var(--agt-ink) !important; }
.agt-cblock .agt-btn--ghost:hover { color: #fff !important; }
.agt-b2b__list--light { border-top-color: var(--agt-line); }
.agt-b2b__list--light li { border-bottom-color: var(--agt-line); color: var(--agt-ink); font-size: 16px; padding: 14px 0; }
.agt-b2b__list--light li span { color: var(--agt-rose); }
.agt-faq details { border-top: 1px solid var(--agt-line); }
.agt-faq details:last-child { border-bottom: 1px solid var(--agt-line); }
.agt-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 400 19px/1.35 var(--agt-serif); font-variation-settings: 'opsz' 72, 'SOFT' 100; }
.agt-faq summary::-webkit-details-marker { display: none; }
.agt-faq summary::after { content: '+'; font: 300 24px/1 var(--agt-sans); transition: transform .4s var(--agt-ease-out); }
.agt-faq details[open] summary::after { transform: rotate(45deg); }
.agt-faq details p { margin: 0 0 22px; color: var(--agt-ink-2); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.agt-faq details a { color: var(--agt-ink) !important; border-bottom: 1px solid var(--agt-faint); }
.agt-legal__grid { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.agt-legal__toc { position: sticky; top: calc(var(--agt-hdr) + 20px); display: grid; gap: 4px; border-left: 1px solid var(--agt-line); padding-left: 20px; }
.agt-legal__toc a { color: var(--agt-ink-2) !important; font-size: 15px; padding: 6px 0; transition: color .3s, transform .4s var(--agt-ease-out); }
.agt-legal__toc a:hover { color: var(--agt-ink) !important; transform: translateX(4px); }
.agt-thanks { min-height: calc(100vh - var(--agt-hdr)); display: grid; place-items: center; text-align: center; padding: 60px var(--agt-g); }
.agt-thanks__box { max-width: 820px; }
.agt-thanks .agt-lead { margin: 22px auto 0; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .agt-nav ul { gap: 18px; }
  .agt-act .agt-act__t { display: none; }
  .agt-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .agt-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
  :root { --agt-top: 30px; --agt-bar: 68px; }
  .agt-topbar { grid-template-columns: 1fr; }
  .agt-topbar__msgs { grid-column: 1; min-width: 0; }
  .agt-topbar__side, .agt-topbar__left { display: none; }
  .agt-nav { display: none; }
  .agt-burger { display: inline-flex; grid-column: 1; justify-self: start; }
  .agt-burger svg { width: 24px; height: 24px; }
  .agt-logo img { height: 50px; }
  #top.agt-header { --agt-shrink: 8px; }
  #top.agt-header.is-scrolled .agt-logo img { transform: scale(.84); }
  .agt-actions .agt-act--acc { display: none; }
  .agt-mega, .agt-scrim { display: none; }

  .agt-hero { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: auto; min-height: 0; max-height: none; }
  .agt-stage { order: -1; height: 56svh; min-height: 340px; }
  .agt-hero__copy { padding: 26px 20px 34px; gap: 22px; }
  .agt-world a { font-size: clamp(40px, 11vw, 64px); }
  .agt-slide__cap { min-width: 0; left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .agt-icons__grid { grid-template-columns: 1fr; }
  .agt-icon:nth-child(2) { margin-top: 0; }
  .agt-kb { grid-template-columns: 1fr; }
  .agt-kb__fig { position: relative; top: 0; aspect-ratio: 4 / 4.6; }
  .agt-kb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agt-nums { grid-template-columns: 1fr 1fr; }
  .agt-num { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--agt-line); padding: 28px 0 24px; }
  .agt-b2b__grid { grid-template-columns: 1fr; }
  .agt-services { grid-template-columns: 1fr 1fr; }
  .agt-footer__top { grid-template-columns: 1fr 1fr; }
  .agt-sechead__end .agt-arrows { display: none; }
  .agt-shophead.has-pic { grid-template-columns: 1fr; }
  .agt-chero__top { grid-template-columns: 1fr; gap: 14px; }
  .agt-chero__title { font-size: clamp(44px, calc(118vw / var(--len, 8)), 104px); white-space: normal; }
  .agt-stages { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--agt-g) * -1); padding: 0 var(--agt-g); scroll-padding: 0 var(--agt-g); }
  .agt-stages::-webkit-scrollbar { display: none; }
  .agt-stage, .agt-stage.is-on { flex: 0 0 64vw; height: min(54svh, 440px); scroll-snap-align: start; }
  .agt-stage .agt-stage__img img { filter: none; transform: none; }
  .agt-stage .agt-stage__label { opacity: 1; transform: none; }
  .agt-stage__v { display: none; }
  .agt-wallhero { height: auto; min-height: 0; max-height: none; padding-top: 52svh; }
  .agt-wall { left: 0; top: 0; bottom: auto; height: 60svh; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agt-wall__col:nth-child(n+4) { display: none; }
  .agt-wallhero::before { background: linear-gradient(to bottom, rgba(255,255,255,0) 30%, #fff 60%); }
  .agt-wallhero__panel { max-width: none; height: auto; padding: 0 20px 44px; }
  .agt-split2, .agt-contact__grid, .agt-legal__grid, .agt-mv__grid, .agt-branches { grid-template-columns: 1fr; }
  .agt-values { grid-template-columns: 1fr; }
  .agt-contact__side, .agt-legal__toc { position: relative; top: 0; }
  .agt-legal__toc { display: none; }
  .agt-shophead__fig { display: none; }
  #o_wsale_products_grid .oe_product, .o_wsale_has_sidebar #o_wsale_products_grid .oe_product { grid-column: span 6 !important; }
  #product_detail_main .o_wsale_product_images { flex: 0 0 100%; max-width: 100%; }
  #product_detail_main #product_details { position: relative !important; top: 0 !important; }
}
@media (max-width: 575px) {
  .agt-topbar { font-size: 10.5px; letter-spacing: .1em; padding: 0 12px; }
  .agt-hero__idx { display: none; }
  .agt-rail__track { --card: 72vw; }
  .agt-services { grid-template-columns: 1fr; }
  .agt-footer__top { grid-template-columns: 1fr; }
  .agt-btn { height: 50px; padding: 0 20px 0 22px; }
  .agt-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .agt-tabs::-webkit-scrollbar { display: none; }
  .agt-tab { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agt-js [data-reveal], .agt-js [data-reveal] img, .agt-split .w > span, .agt-js .agt-hero * { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .agt-houses__track { animation: none; }
  .agt-wall__track { animation: none; }
  .agt-tile__float, .agt-hx__scroll::after { animation: none; }
}

/* =====================================================================
   HOMEPAGE v2 (24 Oct 2026): every part sells. Bright grounds tinted per part, Fraunces + Jost,
   motion everywhere it helps: running trust line, bento of the worlds, price fans, an index of the houses
   with a photograph that follows the pointer, a pinned Korean routine, a running wall of reviews, a cursor
   that says "Shop" over what can be bought, magnetic buttons, pictures that drift with the scroll.
   ===================================================================== */
.agt-home2 { --tint-champagne: #f3ece1; --tint-blush: #f5e9e6; --tint-sage: #e9efe7; --tint-sky: #e6edf2; --tint-ivory: #f7f3ee; }
.agt-home2 .agt-sec { position: relative; }
.agt-home2 [data-parallax] { translate: 0 calc(var(--py, 0) * 1px); will-change: translate; }

/* ---------- the running trust line ---------- */
.agt-xt { position: relative; overflow: hidden; border-top: 1px solid var(--agt-line); border-bottom: 1px solid var(--agt-line); background: #fff; }
.agt-xt__track { display: flex; width: max-content; animation: agtTick 48s linear infinite; }
.agt-xt:hover .agt-xt__track { animation-play-state: paused; }
.agt-xt__set { display: flex; align-items: center; gap: 34px; padding: 17px 17px; flex-shrink: 0; }
.agt-xt__set span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font: 500 11.5px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-ink); }
.agt-xt__set svg { width: 18px; height: 18px; fill: none; stroke: var(--agt-rose); stroke-width: 1.4; stroke-linejoin: round; }
.agt-xt__set i { width: 5px; height: 5px; border-radius: 50%; background: var(--agt-faint); flex-shrink: 0; }
@keyframes agtTick { to { transform: translateX(-50%); } }

/* ---------- the four worlds: a bento ---------- */
.agt-xw__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, minmax(300px, 34vh)); gap: clamp(12px, 1.4vw, 20px); }
.agt-xw__tile { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--tint-ivory); color: var(--agt-ink) !important; isolation: isolate; }
.agt-xw__tile--0 { grid-row: 1 / span 2; }
.agt-xw__tile--3 { grid-column: 2 / span 2; }
.agt-xw__fig { position: absolute; inset: 0; margin: 0; }
.agt-xw__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--agt-ease-out) !important; }
.agt-xw__tile:hover .agt-xw__fig img { transform: scale(1.06) !important; }
.agt-xw__tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%); pointer-events: none; }
.agt-xw__meta { position: absolute; z-index: 2; left: clamp(12px, 1.4vw, 20px); right: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); padding: 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .8);
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'no title count' 'line line line' 'aisles aisles aisles' 'go go go'; align-items: baseline; column-gap: 12px; }
.agt-xw__no { grid-area: no; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-rose); }
.agt-xw__meta h3 { grid-area: title; margin: 0; font: 400 clamp(24px, 2.2vw, 34px)/1 var(--agt-serif); font-variation-settings: 'opsz' 96, 'SOFT' 100; letter-spacing: -.02em; }
.agt-xw__count { grid-area: count; margin: 0; font: 400 13px/1 var(--agt-sans); color: var(--agt-ink-2); white-space: nowrap; }
.agt-xw__count b { font-weight: 500; color: var(--agt-ink); font-variant-numeric: tabular-nums; }
.agt-xw__line { grid-area: line; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--agt-ink-2); max-width: 46ch; }
.agt-xw__aisles { grid-area: aisles; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--agt-ease-out), opacity .5s var(--agt-ease), margin .7s var(--agt-ease-out); }
.agt-xw__aisles li { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--agt-line); font: 400 12.5px/1 var(--agt-sans); }
.agt-xw__tile:hover .agt-xw__aisles, .agt-xw__tile:focus-visible .agt-xw__aisles { max-height: 90px; opacity: 1; margin-top: 12px; }
.agt-xw__go { grid-area: go; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-xw__go .agt-arw { transition: transform .5s var(--agt-ease-out); }
.agt-xw__tile:hover .agt-xw__go .agt-arw { transform: translateX(6px); }

/* ---------- best sellers: a softer ground ---------- */
.agt-xe { background: var(--tint-ivory); }

/* ---------- shop by budget: four price bands with a fan of bottles ---------- */
.agt-xb__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.agt-xb__card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; min-height: clamp(360px, 46vh, 460px); padding: 26px 24px 22px; border-radius: 22px; overflow: hidden; color: var(--agt-ink) !important; isolation: isolate; transition: transform .7s var(--agt-ease-out), box-shadow .7s var(--agt-ease-out); }
.agt-xb__card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(46, 26, 32, .4); }
.agt-xb__card--champagne { background: var(--tint-champagne); }
.agt-xb__card--blush { background: var(--tint-blush); }
.agt-xb__card--sage { background: var(--tint-sage); }
.agt-xb__card--sky { background: var(--tint-sky); }
.agt-xb__label { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-xb__price { margin-top: 8px; font: 300 clamp(56px, 6vw, 96px)/.9 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.04em; }
.agt-xb__count { margin-top: 12px; font: 400 14px/1 var(--agt-sans); color: var(--agt-ink-2); }
.agt-xb__fan { position: relative; display: block; min-height: 150px; margin: 10px 0; }
.agt-xb__fan img { position: absolute; left: 50%; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 100%; transition: transform .8s var(--agt-ease-out); }
.agt-xb__fan img:nth-child(1) { transform: translateX(-108%) rotate(-10deg); }
.agt-xb__fan img:nth-child(2) { transform: translateX(-50%) translateY(-6%); z-index: 2; }
.agt-xb__fan img:nth-child(3) { transform: translateX(8%) rotate(10deg); }
.agt-xb__card:hover .agt-xb__fan img:nth-child(1) { transform: translateX(-122%) rotate(-16deg) translateY(-4%); }
.agt-xb__card:hover .agt-xb__fan img:nth-child(2) { transform: translateX(-50%) translateY(-14%) scale(1.06); }
.agt-xb__card:hover .agt-xb__fan img:nth-child(3) { transform: translateX(22%) rotate(16deg) translateY(-4%); }
.agt-xb__go { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-xb__card:hover .agt-xb__go .agt-arw { transform: translateX(6px); }
.agt-xb__go .agt-arw { transition: transform .5s var(--agt-ease-out); }

/* ---------- the houses: an index, a photograph follows the pointer ---------- */
.agt-xh { overflow: hidden; }
.agt-xh__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 72px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--agt-line); }
.agt-xh__list li { border-bottom: 1px solid var(--agt-line); }
.agt-xh__list a { position: relative; z-index: 2; display: grid; grid-template-columns: 42px 1fr auto 20px; align-items: baseline; gap: 16px; padding: clamp(14px, 1.6vw, 22px) 0; color: var(--agt-ink) !important; }
.agt-xh__no { font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-mute); }
.agt-xh__name { font: 300 clamp(30px, 3.6vw, 58px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; transition: transform .7s var(--agt-ease-out), font-style .3s; transform-origin: 0 50%; }
.agt-xh__count { font: 400 13px/1 var(--agt-sans); color: var(--agt-ink-2); white-space: nowrap; }
.agt-xh__list a .agt-arw { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .6s var(--agt-ease-out); }
.agt-xh__list a:hover .agt-xh__name { transform: translateX(14px); font-style: italic; }
.agt-xh__list a:hover .agt-xh__no { color: var(--agt-rose); }
.agt-xh__list a:hover .agt-arw { opacity: 1; transform: none; }
.agt-xh__float { position: fixed; z-index: 1; left: 0; top: 0; width: clamp(200px, 18vw, 280px); aspect-ratio: 3 / 4; margin: 0; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; scale: .7;
  translate: calc(var(--fx, 0) * 1px - 50%) calc(var(--fy, 0) * 1px - 50%); rotate: calc(var(--fr, 0) * 1deg); transition: opacity .35s var(--agt-ease), scale .6s var(--agt-ease-out); box-shadow: 0 40px 80px -40px rgba(46, 26, 32, .45); }
.agt-xh__float img { width: 100%; height: 100%; object-fit: cover; }
.agt-xh.is-showing .agt-xh__float { opacity: 1; scale: 1; }

/* ---------- the Korean routine: the picture stays while the steps pass ---------- */
.agt-xr { background: var(--tint-sage); }
.agt-xr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.agt-xr__stick { position: sticky; top: calc(var(--agt-hdr) + 24px); }
.agt-xr__stick .agt-lead { margin: 22px 0 26px; }
.agt-xr__fig { position: relative; margin: 0 0 26px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; max-height: 40vh; width: 100%; background: #fff; }
.agt-xr__fig img { width: 100%; height: 112%; object-fit: cover; }
.agt-xr__now { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-xr__now b { font-weight: 500; color: var(--agt-rose); font-variant-numeric: tabular-nums; }
.agt-xr__now i { position: relative; width: 80px; height: 2px; background: rgba(20, 17, 18, .12); border-radius: 2px; overflow: hidden; }
.agt-xr__now u { position: absolute; inset: 0; background: var(--agt-ink); transform-origin: 0 50%; transform: scaleX(var(--t, .2)); transition: transform .6s var(--agt-ease-out); }
.agt-xr__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.agt-xr__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(48px, 9vh, 110px); padding-top: clamp(20px, 6vh, 80px); padding-bottom: clamp(20px, 10vh, 120px); }
.agt-xr__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; transition: opacity .6s var(--agt-ease); }
.agt-xr__n { display: block; font: 300 clamp(56px, 6vw, 92px)/.85 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.04em; color: var(--agt-rose); }
.agt-xr__txt h3 { margin: 14px 0 10px; font: 400 clamp(26px, 2.4vw, 36px)/1.05 var(--agt-serif); font-variation-settings: 'opsz' 96, 'SOFT' 100; }
.agt-xr__txt p { margin: 0; color: var(--agt-ink-2); max-width: 30ch; }
.agt-xr__step .agt-card { width: 100%; }

/* ---------- icons + gifts ---------- */
.agt-xi { padding-top: 0; }
.agt-xg { background: var(--tint-blush); }

/* ---------- skincare landing (shop page of the Skincare world): by concern + by skin type, and the skin filter bar ---------- */
.agt-skland { --tint-champagne: #f3ece1; --tint-blush: #f5e9e6; --tint-sage: #e9efe7; --tint-sky: #e6edf2; --tint-ivory: #f7f3ee;
  position: relative; z-index: 1; background: #fff; padding: clamp(56px, 7vw, 110px) 0 clamp(48px, 6vw, 96px); }
@media (min-width: 992px) {
  .agt-skland { border-radius: 28px 28px 0 0; box-shadow: 0 -40px 80px -46px rgba(20, 17, 18, .32); }
  .o_wsale_products_page .agt-skland + #o_wsale_container { border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--agt-line); }
}
.agt-skc { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 90px); align-items: start; margin-bottom: clamp(84px, 10vw, 150px); }
.agt-skc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--agt-line); }
.agt-skc__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--agt-line); color: var(--agt-ink) !important; }
.agt-skc__no { font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-mute); transition: color .3s; }
.agt-skc__thumb { display: none; }
.agt-skc__name { font: 300 clamp(26px, 2.4vw, 40px)/1.05 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0; letter-spacing: -.02em; transition: transform .6s var(--agt-ease-out); }
.agt-skc__count { font: 400 13px/1 var(--agt-sans); color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-skc__item .agt-arw { width: 18px; height: 10px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--agt-ease-out); }
.agt-skc__item.is-on .agt-skc__no { color: var(--agt-rose); }
.agt-skc__item.is-on .agt-skc__name { transform: translateX(10px); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-skc__item.is-on .agt-arw, .agt-skc__item:focus-visible .agt-arw { opacity: 1; transform: none; }
.agt-skc__stage { position: sticky; top: calc(var(--agt-hdr, 90px) + 24px); aspect-ratio: 5 / 4.6; border-radius: 26px; overflow: hidden; isolation: isolate; }
.agt-skc__panel { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; padding: clamp(22px, 2.4vw, 38px); background: var(--sk-tint, var(--tint-champagne)); opacity: 0; visibility: hidden; transition: opacity .55s var(--agt-ease), visibility 0s .55s; }
.agt-skc__panel.is-on { opacity: 1; visibility: visible; transition: opacity .55s var(--agt-ease); }
.agt-skc__panel--0 { --sk-tint: var(--tint-champagne); }
.agt-skc__panel--1 { --sk-tint: var(--tint-blush); }
.agt-skc__panel--2 { --sk-tint: var(--tint-sage); }
.agt-skc__panel--3 { --sk-tint: var(--tint-sky); }
.agt-skc__panel--4 { --sk-tint: var(--tint-ivory); }
.agt-skc__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); align-content: center; }
.agt-skc__pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: #fff; box-shadow: 0 26px 44px -32px rgba(46, 26, 32, .4); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--agt-ease), transform .9s var(--agt-ease-out); }
.agt-skc__pic:nth-child(2) { transition-delay: .07s; }
.agt-skc__pic:nth-child(3) { transition-delay: .14s; }
.agt-skc__panel.is-on .agt-skc__pic { opacity: 1; transform: none; }
.agt-skc__pic:hover { transform: translateY(-6px) !important; }
.agt-skc__pic img { width: 84%; height: 84%; object-fit: contain; }
.agt-skc__meta { display: grid; justify-items: start; }
.agt-skc__kicker { margin: 0; font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-skc__meta h3 { margin: 12px 0 8px; font: 300 clamp(40px, 4.4vw, 74px)/.95 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; color: var(--agt-ink); }
.agt-skc__line { margin: 0 0 20px; color: var(--agt-ink-2); max-width: 36ch; }
.agt-skt__head { margin-top: 0; }
.agt-skt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.agt-skt__card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto auto; min-height: clamp(400px, 50vh, 480px); padding: 24px 22px 22px; border-radius: 22px; color: var(--agt-ink) !important; overflow: hidden; transition: transform .7s var(--agt-ease-out), box-shadow .7s var(--agt-ease-out); }
.agt-skt__card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(46, 26, 32, .4); }
.agt-skt__card--champagne { background: var(--tint-champagne); }
.agt-skt__card--sage { background: var(--tint-sage); }
.agt-skt__card--sky { background: var(--tint-sky); }
.agt-skt__card--blush { background: var(--tint-blush); }
.agt-skt__card--ivory { background: var(--tint-ivory); }
.agt-skt__label { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-skt__name { margin-top: 10px; font: 300 clamp(36px, 3.2vw, 56px)/.95 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; }
.agt-skt__line { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--agt-ink-2); }
.agt-skt__fan { position: relative; display: block; min-height: 140px; margin: 14px 0 8px; }
.agt-skt__fan img { position: absolute; left: 50%; bottom: 0; width: 42%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 100%; transition: transform .8s var(--agt-ease-out); }
.agt-skt__fan img:nth-child(1) { transform: translateX(-104%) rotate(-8deg); }
.agt-skt__fan img:nth-child(2) { transform: translateX(-50%) translateY(-6%); z-index: 2; }
.agt-skt__fan img:nth-child(3) { transform: translateX(4%) rotate(8deg); }
.agt-skt__card:hover .agt-skt__fan img:nth-child(1) { transform: translateX(-112%) rotate(-13deg) translateY(-4%); }
.agt-skt__card:hover .agt-skt__fan img:nth-child(2) { transform: translateX(-50%) translateY(-14%) scale(1.06); }
.agt-skt__card:hover .agt-skt__fan img:nth-child(3) { transform: translateX(12%) rotate(13deg) translateY(-4%); }
.agt-skt__count { font-size: 13px; line-height: 1.5; color: var(--agt-ink-2); }
.agt-skt__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; }
.agt-skt__go .agt-arw { width: 18px; height: 10px; transition: transform .5s var(--agt-ease-out); }
.agt-skt__card:hover .agt-skt__go .agt-arw { transform: translateX(6px); }
/* the skin filter bar over the products of every skincare page */
.agt-skbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0 22px; margin-bottom: 8px; border-bottom: 1px solid var(--agt-line); }
.agt-skbar__group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.agt-skbar__label { flex: none; width: 82px; font: 500 10.5px/1.2 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-mute); }
.agt-skbar__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px 0; }
.agt-skbar__chips::-webkit-scrollbar { display: none; }
.agt-skbar__chip { flex: none; padding: 9px 15px; border: 1px solid var(--agt-line); border-radius: 999px; background: #fff; color: var(--agt-ink) !important; font: 400 13px/1 var(--agt-sans); white-space: nowrap; transition: border-color .3s, background .3s, color .3s; }
.agt-skbar__chip:hover { border-color: var(--agt-ink); }
.agt-skbar__chip.is-on { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff !important; }
.agt-skbar__clear { justify-self: start; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-rose) !important; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (max-width: 991px) {
  .agt-skc { grid-template-columns: minmax(0, 1fr); }
  .agt-skc__stage { display: none; }
  .agt-skc__item { grid-template-columns: 28px 52px minmax(0, 1fr) auto; gap: 12px; padding: 10px 2px; }
  .agt-skc__thumb { display: block; width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--agt-line); }
  .agt-skc__item .agt-arw { display: none; }
  .agt-skc__item.is-on .agt-skc__name { transform: none; font-style: normal; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0; }
  .agt-skc__item.is-on .agt-skc__no { color: var(--agt-mute); }
  .agt-skt { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--agt-g) * -1); padding: 0 var(--agt-g) 6px; scroll-padding: 0 var(--agt-g); }
  .agt-skt::-webkit-scrollbar { display: none; }
  .agt-skt__card { scroll-snap-align: start; min-height: 420px; }
  .agt-skt__fan { min-height: 150px; margin-top: 30px; }
  .agt-skt__fan img { width: 36%; }
  .agt-skbar__group { flex-direction: column; align-items: stretch; gap: 8px; }
  .agt-skbar__chips { margin: 0 calc(var(--agt-g) * -1); padding: 2px var(--agt-g); }
}

/* ---------- L'Orientale: the house AGT distributes, on its own sand band (the tint + ink of its category page) ---------- */
.agt-xl { --lo-tint: #efe9df; --lo-ink: #3b2f1f; --lo-line: rgba(59, 47, 31, .2); background: var(--lo-tint); }
.agt-xl .agt-kicker { color: var(--lo-ink); opacity: .72; }
.agt-xl .agt-h2, .agt-xl .agt-h2 em, .agt-xl .agt-lead, .agt-xl .agt-link { color: var(--lo-ink); }
.agt-xl__head { align-items: flex-end; margin-bottom: clamp(26px, 3vw, 40px); }
.agt-xl__title { font-size: clamp(52px, 7.4vw, 124px); line-height: .92; letter-spacing: -.035em; }
.agt-xl__side { display: grid; gap: 18px; justify-items: start; max-width: 40ch; }
.agt-xl__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.agt-xl__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.agt-xl__chips::-webkit-scrollbar { display: none; }
.agt-xl__chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border: 1px solid var(--lo-line); border-radius: 999px; background: transparent; color: var(--lo-ink); font: 400 13px/1 var(--agt-sans); cursor: pointer; transition: background .35s var(--agt-ease), color .35s var(--agt-ease), border-color .35s var(--agt-ease); }
.agt-xl__chip i { font-style: normal; font-size: 11px; opacity: .55; }
.agt-xl__chip:hover { border-color: var(--lo-ink); }
.agt-xl__chip.is-on { background: var(--lo-ink); border-color: var(--lo-ink); color: var(--lo-tint); }
.agt-xl .agt-arrow { background: transparent; border-color: var(--lo-line); }
.agt-xl .agt-arrow svg { stroke: var(--lo-ink); }
.agt-xl .agt-arrow:hover { border-color: var(--lo-ink); }
.agt-xl__track { position: relative; display: flex; }
.agt-xl__track > .agt-card { flex: 0 0 var(--card); }
.agt-xl__line { flex: 0 0 calc(var(--card) * .6); display: flex; flex-direction: column; justify-content: flex-start; padding: 6px 0 0 18px; border-left: 1px solid var(--lo-line); color: var(--lo-ink); }
.agt-xl__no { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; opacity: .6; }
.agt-xl__line h3 { margin: 16px 0 10px; font: 300 clamp(30px, 2.7vw, 46px)/.98 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; color: var(--lo-ink); }
.agt-xl__line p { margin: 0; font-size: 13px; opacity: .7; }
.agt-xl .agt-progress { background: var(--lo-line); }
.agt-xl .agt-progress i { background: var(--lo-ink); }
@media (max-width: 767px) {
  .agt-xl__bar { flex-direction: column; align-items: stretch; }
  .agt-xl__bar .agt-arrows { display: none; }
  .agt-xl__chips { margin: 0 calc(var(--agt-g) * -1); padding: 0 var(--agt-g); }
  .agt-xl__line { flex-basis: 40vw; padding-left: 14px; }
}

/* ---------- proof: the rating, the wall of reviews, the numbers ---------- */
.agt-xs__top { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 110px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.agt-xs__score b { display: block; font: 300 clamp(96px, 12vw, 190px)/.8 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.05em; font-variant-numeric: lining-nums tabular-nums; }
.agt-xs__stars { display: flex; gap: 6px; margin: 18px 0 8px; }
.agt-xs__stars svg { width: 22px; height: 22px; fill: var(--agt-rose); }
.agt-xs__score p { margin: 0; font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-xs__quotes { overflow: hidden; margin-bottom: clamp(48px, 6vw, 90px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.agt-xs__track { display: flex; width: max-content; animation: agtTick 60s linear infinite; }
.agt-xs__quotes:hover .agt-xs__track { animation-play-state: paused; }
.agt-xs__set { display: flex; gap: 18px; padding-right: 18px; }
.agt-xs__set blockquote { width: clamp(300px, 30vw, 440px); margin: 0; padding: 28px 28px 24px; border-radius: 22px; background: var(--tint-ivory); border: 1px solid var(--agt-line); }
.agt-xs__set blockquote p { margin: 0 0 18px; font: 400 clamp(17px, 1.3vw, 20px)/1.45 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 100; }
.agt-xs__set cite { font: 500 11px/1 var(--agt-sans); letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--agt-rose); }

/* ---------- wholesale, bright ---------- */
.agt-xp { padding-top: 0; }
.agt-xp__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 6vw, 110px); align-items: center; padding: clamp(36px, 5vw, 80px); border-radius: 28px; background: var(--tint-champagne); }
.agt-xp__panel .agt-lead { margin: 22px 0 30px; }
.agt-xp__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.agt-xp__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(20, 17, 18, .12); }
.agt-xp__list li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(20, 17, 18, .12); font: 400 clamp(18px, 1.5vw, 22px)/1.3 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 100; }
.agt-xp__list span { font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-rose); }

/* ---------- closing: WhatsApp help + the promises ---------- */
.agt-xc { padding-top: 0; }
.agt-xc__band { text-align: center; padding: clamp(48px, 7vw, 110px) clamp(20px, 5vw, 80px); margin-bottom: clamp(48px, 6vw, 90px); border-radius: 28px; background: var(--tint-blush); }
.agt-xc__band .agt-h2 { max-width: 16ch; margin: 0 auto; }
.agt-xc__band .agt-lead { margin: 22px auto 30px; }
.agt-xc__wa svg { width: 18px; height: 18px; }

/* ---------- the cursor that says what a click does (pointer devices) ---------- */
.agt-cursor { position: fixed; z-index: 1100; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; pointer-events: none; display: grid; place-items: center;
  background: var(--agt-ink); color: #fff; font: 500 11px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; opacity: 0; scale: .3;
  translate: calc(var(--cx, -200) * 1px) calc(var(--cy, -200) * 1px); transition: opacity .3s var(--agt-ease), scale .5s var(--agt-ease-out); }
.agt-cursor.is-on { opacity: 1; scale: 1; }
@media (hover: none), (pointer: coarse) { .agt-cursor { display: none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 991px) {
  .agt-xr__step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .agt-xr__step .agt-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; }
  .agt-xr__step .agt-card__media { aspect-ratio: 1; border-radius: 12px; }
  .agt-xr__step .agt-card__body { padding: 0; }
  .agt-xw__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(300px, 46vw); }
  .agt-xw__tile--0 { grid-row: auto; grid-column: 1 / span 2; }
  .agt-xw__tile--3 { grid-column: 1 / span 2; }
  .agt-xb__grid { grid-template-columns: 1fr 1fr; }
  .agt-xh__list { grid-template-columns: 1fr; }
  .agt-xr__grid { grid-template-columns: 1fr; }
  .agt-xr__stick { position: relative; top: auto; }
  .agt-xs__top { grid-template-columns: 1fr; }
  .agt-xp__panel { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .agt-xw__grid { grid-template-columns: 1fr; grid-auto-rows: 420px; }
  .agt-xw__tile--0, .agt-xw__tile--3 { grid-column: auto; }
  .agt-xw__aisles { max-height: 90px; opacity: 1; margin-top: 12px; }
  .agt-xb__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .agt-xb__card { min-height: 300px; padding: 20px 16px 16px; }
  .agt-xb__fan { min-height: 110px; }
  .agt-xr__step { grid-template-columns: 1fr; }
  .agt-xh__list a { grid-template-columns: 30px 1fr auto; }
  .agt-xh__list a .agt-arw { display: none; }
  .agt-xt__set { gap: 24px; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-xt__track, .agt-xs__track { animation: none; }
  .agt-home2 [data-parallax] { translate: none; }
}

/* ---------- phones: fixes from the 24 Oct audit ---------- */
@media (max-width: 575.98px) {
  .agt-search__top { padding: 16px; }
  .agt-search__top img { height: 42px !important; }
  .agt-search form { padding: 4vh 16px 0; }
  .agt-search input[type=search] { font-size: 28px; }
  .agt-search__field { gap: 10px; }
  .agt-search__field .agt-btn { height: 46px; padding: 0 14px; font-size: 10.5px; letter-spacing: .14em; }
  .agt-search__field .agt-btn .agt-arw { display: none; }
  .agt-sechead__end { width: 100%; flex-wrap: wrap; gap: 14px; }
  .agt-sechead__end .agt-arrows { display: none; }
  .agt-tabs { max-width: 100%; }
  .agt-hs__house, .agt-hs__count { font-size: 11px; }
  .agt-xw__grid { grid-auto-rows: 380px; }
  /* the routine: each step's product as a compact row, picture beside its name */
  .agt-xr__steps { gap: 34px; padding-top: 6px; padding-bottom: 0; }
  .agt-xr__step { gap: 14px; }
  .agt-xr__n { font-size: 52px; }
  .agt-xr__txt h3 { margin: 8px 0 6px; }
  .agt-xr__step .agt-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; }
  .agt-xr__step .agt-card__media { aspect-ratio: 1; border-radius: 12px; }
  .agt-xr__step .agt-card__body { padding: 0; }
  .agt-xr__fig { aspect-ratio: 4 / 3; max-height: none; }
}

/* =====================================================================
   PAGE HEROES (24 Oct 2026): every page opens like the homepage. One daylight photograph on a stage tinted from its
   subject (theme/phero), the page's word in giant letters on each side of the subject (agt.js places the halves, so no
   letter ever hides behind it), crumbs at the top, title, lead and actions bottom left, and a dock bottom right: the
   page's doors (sub-aisles, houses; a door's photograph takes the stage while the pointer rests on it), or numbers,
   channels, steps. Search and the houses without photographs: the word across the top, the products running under it.
   ===================================================================== */
/* !important: under 768px Odoo sets "section { height: auto !important }" */
.agt-ph { position: relative; height: calc(100vh - var(--agt-hdr) - var(--ph-peek, 0px)) !important; height: calc(100svh - var(--agt-hdr) - var(--ph-peek, 0px)) !important;
  min-height: 580px; max-height: 960px; overflow: hidden; background: var(--tint, #f4f0ea); color: var(--agt-ink); isolation: isolate; --mx: 0; --my: 0; }
.agt-ph, .agt-ph *, .agt-ph *::before, .agt-ph *::after { box-sizing: border-box; }
.agt-ph--shop { --ph-peek: 56px; }
.agt-ph__stage { position: absolute; inset: 0; }
.agt-ph__slide { position: absolute; inset: 0; background: var(--tint); opacity: 0; visibility: hidden; transition: opacity .75s var(--agt-ease), visibility 0s .75s; }
.agt-ph__slide.is-on { opacity: 1; visibility: visible; z-index: 1; transition: opacity .75s var(--agt-ease); }
/* the photograph: 3:4, full height, right of centre; its edges die into the tint */
.agt-ph__img { position: absolute; top: 0; left: var(--plx, 61%); height: 100%; width: auto; aspect-ratio: 3 / 4; max-width: none; transform: translateX(-50%);
  translate: calc(var(--mx) * -14px) calc(var(--my) * -8px); scale: 1.03;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; will-change: scale, translate; }
.agt-ph__slide.is-on .agt-ph__img { animation: agtPhPush 18s both; }
@keyframes agtPhPush { 0% { scale: 1.12; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 12% { scale: 1.02; animation-timing-function: linear; } 100% { scale: 1.06; } }
/* the giant word: one half on each side of the subject (or whole on one side), placed by agt.js */
.agt-ph__word { position: absolute; z-index: 2; left: 0; right: 0; height: 0; top: var(--wtop, 50%); pointer-events: none; white-space: nowrap;
  translate: calc(var(--mx) * 22px) calc(var(--my) * 9px);
  font: 300 var(--wfs, 120px)/.8 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--ink, #2b2320); --wls: -.025em; letter-spacing: var(--wls); }
.agt-ph__word > span { position: absolute; top: 0; translate: 0 -54%; display: block; padding: .06em .02em .16em; }
.agt-ph__wl { right: var(--wl-r, 50%); }
.agt-ph__wr { left: var(--wr-l, 50%); }
.agt-ph__meas { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none;
  font: 300 100px/.8 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.025em; padding: .06em .02em .16em; }
/* hidden until agt.js has placed it (it is decorative: the title says the same) */
.agt-ph__word:not(.is-laid) { visibility: hidden; }
.agt-ph__slide.is-on .agt-ph__word.is-laid > span { animation: agtPhWord 1.4s var(--agt-ease-out) .1s both; }
.agt-ph__slide.is-on .agt-ph__word.is-laid > .agt-ph__wr { animation-delay: .22s; }
/* the letters rise into place (their spacing never changes, so the word keeps its measured width while it arrives) */
@keyframes agtPhWord { from { opacity: 0; transform: translateY(.22em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
/* a soft light at the left and the foot, so the title and the dock read on any photograph */
.agt-ph__stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, 0) 46%), linear-gradient(0deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, 0) 30%); }
/* crumbs, top left */
.agt-ph__crumbs { position: absolute; z-index: 5; left: var(--agt-g); top: clamp(16px, 3.2vh, 32px); margin: 0 !important; }
.agt-ph .agt-crumbs a { color: var(--agt-ink-2) !important; }
.agt-ph .agt-crumbs a:hover { color: var(--agt-ink) !important; }
/* title block, bottom left */
.agt-ph__head { position: absolute; z-index: 5; left: var(--agt-g); bottom: clamp(24px, 5vh, 54px); width: min(500px, 38vw); }
.agt-ph__kicker { margin: 0 0 14px; }
.agt-ph__kicker b { font-weight: 500; color: var(--agt-ink); font-variant-numeric: tabular-nums; }
.agt-ph__title { margin: 0; font: 300 clamp(34px, min(3.3vw, 6.2vh), 58px)/1.04 var(--agt-serif) !important; font-variation-settings: 'opsz' 144, 'SOFT' 100 !important; letter-spacing: -.03em; color: var(--agt-ink); }
.agt-ph__title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.agt-ph__lead { margin: 14px 0 0; max-width: 42ch; font-size: 15.5px; line-height: 1.6; color: var(--agt-ink-2); }
.agt-ph__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.agt-ph .agt-btn { height: 48px; padding: 0 22px 0 24px; border-radius: 999px; }
/* the dock, bottom right */
.agt-ph__dock { position: absolute; z-index: 6; right: var(--agt-g); bottom: clamp(24px, 5vh, 54px); max-width: calc(100% - min(500px, 38vw) - var(--agt-g) * 3); display: grid; justify-items: end; gap: 12px; }
/* the doors sit on one glass shelf, under a small title */
.agt-ph__dpanel { padding: 12px 12px 8px; border-radius: 20px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 24px 50px -34px rgba(46, 26, 32, .35); }
.agt-ph__dtitle { margin: 2px 4px 11px; font: 500 10px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-ph__doors { display: flex; gap: clamp(8px, .8vw, 12px); }
.agt-ph__door { display: block; flex: 0 1 auto; width: clamp(62px, 5.6vw, 88px); min-width: 0; color: var(--agt-ink) !important; }
.agt-ph__dimg { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .55); outline: 1px solid rgba(20, 17, 18, .1); outline-offset: -1px;
  transition: transform .6s var(--agt-ease-out), outline-color .4s, box-shadow .6s; }
.agt-ph__dimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agt-ph__door.is-pack .agt-ph__dimg { background: #fff; }
.agt-ph__door.is-pack .agt-ph__dimg img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.agt-ph__door b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font: 500 9.5px/1.3 var(--agt-sans); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
.agt-ph__door small { display: block; margin-top: 3px; font: 400 11px/1 var(--agt-sans); color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-ph__door:hover .agt-ph__dimg, .agt-ph__door:focus-visible .agt-ph__dimg { transform: translateY(-5px); outline-color: var(--agt-ink); box-shadow: 0 18px 30px -18px rgba(46, 26, 32, .4); }
.agt-ph__door.is-on .agt-ph__dimg { outline: 1.5px solid var(--agt-ink); }
/* glass tiles: numbers (about, wholesale), channels (contact), steps (returns) */
.agt-ph__nums > div, .agt-ph__chan, .agt-ph__steps li { border-radius: 16px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .78); box-shadow: 0 24px 50px -34px rgba(46, 26, 32, .35); }
.agt-ph__nums { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 10px; }
.agt-ph__nums > div { padding: 16px 18px 15px; }
.agt-ph__nums b { display: block; font: 300 clamp(28px, 2.3vw, 40px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; color: var(--agt-ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.agt-ph__nums span { display: block; margin-top: 9px; font: 500 9.5px/1.35 var(--agt-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--agt-ink-2); max-width: 17ch; }
.agt-ph__chans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(560px, 46vw); }
.agt-ph__chan { display: grid; align-content: start; gap: 3px; padding: 14px 16px 15px; color: var(--agt-ink) !important; transition: background .4s, transform .5s var(--agt-ease-out), border-color .4s; }
.agt-ph__chan svg { width: 22px; height: 22px; margin-bottom: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.agt-ph__chan b { font: 400 18px/1.15 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 50; }
.agt-ph__chan small { font: 400 12px/1.4 var(--agt-sans); color: var(--agt-ink-2); overflow-wrap: anywhere; }
.agt-ph__chan.is-main { grid-column: span 2; background: var(--agt-ink); border-color: var(--agt-ink); color: #fff !important; }
.agt-ph__chan.is-main small { color: rgba(255, 255, 255, .72); }
.agt-ph__chan:hover { transform: translateY(-3px); background: #fff; }
.agt-ph__chan.is-main:hover { background: var(--agt-rose); border-color: var(--agt-rose); }
.agt-ph__open { margin: 0 2px; font: 500 10.5px/1.3 var(--agt-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--agt-ink-2); }
.agt-ph__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(620px, 48vw); counter-reset: none; }
.agt-ph__steps li { padding: 16px 18px 17px; }
.agt-ph__steps span { font: 500 11px/1 var(--agt-sans); letter-spacing: .14em; color: var(--agt-rose); }
.agt-ph__steps b { display: block; margin: 12px 0 6px; font: 400 19px/1.15 var(--agt-serif); font-variation-settings: 'opsz' 36, 'SOFT' 50; }
.agt-ph__steps small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--agt-ink-2); }
/* entrance (from the first paint, no wait for the script) */
.agt-ph__crumbs { animation: agtFieldUp 1s var(--agt-ease-out) .15s both; }
.agt-ph__head > * { animation: agtFieldUp 1.2s var(--agt-ease-out) .32s both; }
.agt-ph__head > :nth-child(2) { animation-delay: .42s; }
.agt-ph__head > :nth-child(3) { animation-delay: .52s; }
.agt-ph__head > :nth-child(4) { animation-delay: .62s; }
.agt-ph__dock { animation: agtFieldUp 1.2s var(--agt-ease-out) .72s both; }
.agt-ph__mast { animation: agtFieldUp 1.3s var(--agt-ease-out) .1s both; }
.agt-ph__rail { animation: agtFieldUp 1.3s var(--agt-ease-out) .5s both; }

/* the shop: the products slide over the hero like a sheet (desktop) */
@media (min-width: 992px) {
  .o_wsale_products_page .agt-ph { position: sticky; top: 0; z-index: 0; transform: scale(calc(1 - var(--p, 0) * .045)); transform-origin: 50% 0; }
}

/* search and houses without photographs: the word across the top, the products running under it */
.agt-ph--rail { height: auto !important; min-height: 0; max-height: none; padding: clamp(14px, 2.6vh, 28px) 0 clamp(22px, 3.6vh, 40px); }
.agt-ph--rail .agt-ph__crumbs { position: relative; left: auto; top: auto; padding: 0 var(--agt-g); }
.agt-ph__mast { padding: clamp(4px, 1.4vh, 16px) var(--agt-g) 0; overflow: hidden; }
.agt-ph__mword { display: inline-block; white-space: nowrap; padding: .04em 0 .1em; font: 300 var(--mfs, clamp(72px, 14vw, 250px))/.86 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.035em; color: var(--ink); }
.agt-ph--rail .agt-ph__head { position: relative; left: auto; bottom: auto; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 6vw, 110px); align-items: end; padding: 0 var(--agt-g); margin-top: clamp(12px, 2.2vh, 24px); }
.agt-ph--rail .agt-ph__kicker { grid-column: 1; grid-row: 1; }
.agt-ph--rail .agt-ph__title { grid-column: 1; grid-row: 2; }
.agt-ph--rail .agt-ph__lead { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.agt-ph--rail .agt-ph__acts { grid-column: 2; grid-row: 3; }
.agt-ph__rail { margin-top: clamp(18px, 3vh, 34px); overflow: hidden; padding: 8px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.agt-ph__track { display: flex; gap: 14px; width: max-content; animation: agtPhRail var(--rail-dur, 60s) linear infinite; }
.agt-ph__rail:hover .agt-ph__track { animation-play-state: paused; }
@keyframes agtPhRail { to { transform: translateX(calc(-50% - 7px)); } }
.agt-ph__tile { flex: 0 0 auto; width: clamp(140px, 11vw, 176px); display: grid; align-content: start; gap: 8px; padding: 10px 10px 14px; border-radius: 18px; background: #fff; color: var(--agt-ink) !important;
  box-shadow: 0 22px 44px -32px rgba(46, 26, 32, .38); transition: transform .6s var(--agt-ease-out), box-shadow .6s; }
.agt-ph__tile:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(46, 26, 32, .45); }
.agt-ph__tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.agt-ph__tile b { font: 400 13.5px/1.35 var(--agt-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.agt-ph__tile span { font: 500 14px/1 var(--agt-sans); font-variant-numeric: tabular-nums; }

/* ---------- the product page: the product on its own stage ----------
   tinted from the product's picture (agt.js: --ptint, --pink), a soft light behind it, its house's name in giant letters
   above it; the picture's white ground melts into the tint (multiply) */
.o_wsale_product_page #o-carousel-product { --ptint: #f3efe9; --pink: #2b2320; background: transparent; }
.o_wsale_product_page #o-carousel-product .carousel-outer { background-color: var(--ptint); background-image: radial-gradient(56% 46% at 50% 60%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 72%);
  border: 0 !important; border-radius: 26px; aspect-ratio: auto; height: min(calc(100svh - var(--agt-hdr) - 70px), 860px); min-height: 460px; max-height: none;
  transition: background-color 1s var(--agt-ease); }
.o_wsale_product_page #o-carousel-product .product_detail_img { mix-blend-mode: multiply; padding: 19% 9% 6% !important;
  translate: calc(var(--pmx, 0) * -10px) calc(var(--pmy, 0) * -6px); transition: translate .9s var(--agt-ease-out); animation: agtPRise 1.3s var(--agt-ease-out) .1s both; }
@keyframes agtPRise { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.agt-pword { position: absolute; z-index: 2; left: 0; right: 0; top: 6%; text-align: center; white-space: nowrap; pointer-events: none;
  font: 300 var(--pfs, 110px)/.9 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.03em; color: var(--pink);
  translate: calc(var(--pmx, 0) * 16px) calc(var(--pmy, 0) * 6px); transition: translate .9s var(--agt-ease-out), color 1s var(--agt-ease); }
.agt-pword:not(.is-laid) { visibility: hidden; }
.agt-pword.is-laid { animation: agtPhWord 1.4s var(--agt-ease-out) .15s both; }
.agt-pword--meas { left: -9999px; right: auto; font-size: 100px; visibility: hidden !important; animation: none !important; }
.o_wsale_product_page .o_carousel_product_indicators .carousel-indicators > * { background-color: var(--ptint) !important; border-radius: 12px !important; overflow: hidden; border-color: transparent !important; }
.o_wsale_product_page .o_carousel_product_indicators .carousel-indicators img { mix-blend-mode: multiply; }
.o_wsale_product_page .o_carousel_product_indicators .carousel-indicators .active { outline: 1.5px solid var(--agt-ink); outline-offset: -1.5px; }
/* the product's new picture (pics/compose.py, 25 Oct 2026) fills the stage; the shop's own pictures follow it */
.o_wsale_product_page #o-carousel-product .agt-pic-slide img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; animation: agtPRise 1.3s var(--agt-ease-out) .1s both; }
.o_wsale_product_page .o_carousel_product_indicators .agt-pic-thumb img { mix-blend-mode: normal; }
.agt-card__media .agt-card__img2.is-shoot { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a card picture still loading (agt.js marks it): a soft ivory shimmer instead of a white box, then the picture fades in;
   phones never hover, so they do not download the hover picture at all (a lazy image that is not displayed is not loaded) */
.agt-card__media.is-wait { background: linear-gradient(100deg, #f3efea 30%, #faf8f5 50%, #f3efea 70%) 0 0 / 220% 100%; animation: agtShimmer 1.5s linear infinite; }
.agt-card__media.is-wait .agt-card__img1 { opacity: 0; }
@keyframes agtShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .agt-card__media.is-wait { animation: none; } }
@media (hover: none) { .agt-card__media .agt-card__img2 { display: none; } }
/* the buttons beside it, round like the heroes' */
#product_details #add_to_cart_wrap .btn-primary, #product_details #contact_us_wrapper .btn-primary { border-radius: 999px !important; padding: 0 30px !important; }
#product_details .css_quantity { border-radius: 999px !important; overflow: hidden; }
#product_details #o_wsale_cta_wrapper .btn:not(.btn-primary) { border-radius: 50% !important; }
@media (max-width: 767.98px) {
  .o_wsale_product_page #o-carousel-product .carousel-outer { height: min(66svh, 128vw); min-height: 340px; border-radius: 20px; }
  .o_wsale_product_page #o-carousel-product .product_detail_img { padding: 21% 6% 5% !important; }
}
@media (prefers-reduced-motion: reduce) { .o_wsale_product_page #o-carousel-product .product_detail_img, .agt-pword.is-laid { animation: none !important; } }

/* smaller laptops: the doors and tiles shrink before they could meet the title */
@media (max-width: 1199.98px) {
  .agt-ph__head { width: min(440px, 40vw); }
  .agt-ph__lead { font-size: 14.5px; }
  .agt-ph__dock { max-width: calc(100% - min(440px, 40vw) - var(--agt-g) * 2.5); }
  .agt-ph__door b { letter-spacing: .08em; }
  .agt-ph__chans, .agt-ph__steps { width: min(500px, 50vw); }
  .agt-ph__chans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agt-ph__chan.is-main { grid-column: span 2; }
  .agt-ph__chan:nth-child(n+4) { display: none; }
  .agt-ph__steps small { display: none; }
}
/* tablets and phones: the page reads top to bottom (crumbs, the word, the photograph, the title, the dock) */
@media (max-width: 767.98px) {
  .agt-ph { height: auto !important; min-height: 0; max-height: none; display: flex; flex-direction: column; padding: 0 0 28px; }
  .agt-ph--shop { --ph-peek: 0px; }
  .agt-ph__crumbs { position: relative; left: auto; top: auto; order: 1; padding: 14px 16px 0; }
  .agt-ph__stage { position: relative; inset: auto; order: 2; height: var(--ph-sh, min(64svh, 150vw)); }
  .agt-ph__img { left: 50%; top: var(--ptop, 22%); height: calc(100% - var(--ptop, 22%)); }
  .agt-ph__stage::after { background: linear-gradient(0deg, var(--tint) 0%, rgba(255, 255, 255, 0) 16%); }
  .agt-ph__head { position: relative; left: auto; bottom: auto; width: auto; order: 3; padding: 0 16px; margin-top: 2px; }
  .agt-ph__title { font-size: clamp(30px, 8.4vw, 40px) !important; }
  .agt-ph__lead { font-size: 15px; }
  .agt-ph__dock { position: relative; right: auto; bottom: auto; max-width: none; order: 4; margin-top: 24px; padding: 0 16px; justify-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .agt-ph__dpanel { min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .agt-ph__dtitle { margin: 0 0 12px; }
  .agt-ph__doors { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; scroll-snap-type: x proximity; }
  .agt-ph__doors::-webkit-scrollbar { display: none; }
  .agt-ph__door { flex: 0 0 86px; width: 86px; scroll-snap-align: start; }
  .agt-ph__nums { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .agt-ph__chans, .agt-ph__steps { width: auto; }
  .agt-ph__chans { grid-template-columns: 1fr 1fr; }
  .agt-ph__chan:nth-child(n+4) { display: grid; }
  .agt-ph__chan:last-child { grid-column: span 2; }
  /* the three steps side by side, swiped */
  .agt-ph__steps { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; scroll-snap-type: x mandatory; }
  .agt-ph__steps::-webkit-scrollbar { display: none; }
  .agt-ph__steps li { flex: 0 0 72%; scroll-snap-align: start; }
  .agt-ph__steps small { display: block; }
  .agt-ph--rail { padding-bottom: 30px; }
  .agt-ph--rail .agt-ph__crumbs { padding: 0 16px; }
  .agt-ph__mast { padding: 8px 16px 0; }
  .agt-ph--rail .agt-ph__head { grid-template-columns: 1fr; padding: 0 16px; }
  .agt-ph--rail .agt-ph__lead { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .agt-ph--rail .agt-ph__acts { grid-column: 1; grid-row: 4; }
  .agt-ph__tile { width: 150px; }
  /* the shop's page numbers wrap instead of pushing the page sideways */
  #o_wsale_pager .pagination { flex-wrap: wrap; justify-content: center; max-width: 100%; margin: 0 !important; }
  #o_wsale_pager .page-link { min-width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-ph__img, .agt-ph__word > span, .agt-ph__head > *, .agt-ph__dock, .agt-ph__crumbs, .agt-ph__mast, .agt-ph__rail, .agt-ph__track { animation: none !important; }
  .agt-ph__img { scale: 1; }
}

/* phones: bigger tap areas, nothing moves (28 Oct, "100% mobile responsive"): invisible hit areas around the header
   icons (20-24 px wide) and the footer text links (22 px tall, 12 px apart) */
@media (max-width: 991px) {
  .agt-act::after { content: ''; position: absolute; inset: -2px -6px; }
  .agt-footer li a { position: relative; display: inline-block; }
  .agt-footer li a::after { content: ''; position: absolute; inset: -6px -4px; }
  .agt-link { position: relative; }
  .agt-link::after { content: ''; position: absolute; inset: -10px -4px; }
  .agt-crumbs a, .agt-pkicker, .agt-pnotes a { position: relative; }
  .agt-crumbs a::after, .agt-pkicker::after, .agt-pnotes a::after { content: ''; position: absolute; inset: -10px -4px; }
  /* the smallest labels read a step larger on phones */
  .agt-ph__door b { font-size: 10px; }
  .agt-ph__nums span { font-size: 10.5px; }
  .agt-ph__dtitle { font-size: 10.5px; }
  .agt-card__badge { font-size: 10.5px; }
}

/* =====================================================================
   HOME HERO WORLDS (28 Oct, his ask "upgrade the homepage hero to add skin care"): Fragrance / Skincare buttons; the
   house on stage lights its world, a button brings that world's next house. Desktop under the headline, phones beside
   the arrows above the card.
   ===================================================================== */
.agt-hs__worlds { display: flex; gap: 8px; margin: 0 0 22px; }
.agt-hs__world { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(20, 17, 18, .22);
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--agt-ink); cursor: pointer;
  font: 500 11px/1 var(--agt-sans); letter-spacing: .18em; text-transform: uppercase; transition: background .45s var(--agt-ease), color .45s var(--agt-ease), border-color .45s var(--agt-ease); }
.agt-hs__world sup { top: 0; font-size: 9.5px; letter-spacing: .04em; color: var(--agt-mute); font-variant-numeric: tabular-nums; transition: color .45s var(--agt-ease); }
@media (hover: hover) { .agt-hs__world:hover:not(.is-on) { border-color: var(--agt-ink); } }
.agt-hs__world.is-on { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff; }
.agt-hs__world.is-on sup { color: rgba(255, 255, 255, .62); }
.agt-hs__head .agt-hs__worlds { animation: agtFieldUp 1.2s var(--agt-ease-out) .7s both; }
.agt-hs__worlds--dock { display: none; }
@media (max-width: 767.98px) {
  .agt-hs__head .agt-hs__worlds { display: none; }
  .agt-hs__worlds--dock { display: flex; position: absolute; left: 4px; top: -53px; margin: 0; gap: 6px; }
  .agt-hs__world { height: 34px; padding: 0 12px; font-size: 10px; letter-spacing: .1em; }
}

/* =====================================================================
   EXPLORE (28 Oct, his ask: "under the hero explore fragrances explore skin care explore ... kill it"): the four worlds
   as doors. One door stands open (its photograph on the right, its world on the left: count, aisles, three pieces, the
   way in); the closed doors are slats of their photographs with the name standing up. The next door opens by itself
   while the band is on screen; a pointer resting on a door or a tap opens it. The title's last word rolls to the open
   world. Phones: the doors are rows and the open one grows; the band keeps one height, so nothing below moves.
   ===================================================================== */
.agt-xo { padding: clamp(56px, 7.4vw, 112px) 0 clamp(40px, 5vw, 80px); background: var(--agt-paper); overflow: hidden; }
.agt-xo__head { max-width: var(--agt-max); margin: 0 auto clamp(24px, 3vw, 44px); padding: 0 var(--agt-g); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px 48px; }
.agt-xo__head .agt-kicker { grid-column: 1 / -1; margin: 0; }
.agt-xo__title { margin: 0; color: var(--agt-ink); font: 300 clamp(44px, 6.6vw, 112px)/.98 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.035em; }
/* the rolling word: all four stacked in one grid cell, so the line keeps the width of the longest */
.agt-xo__roll { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0 .06em .12em 0; margin-bottom: -.12em; }
.agt-xo__roll em { grid-area: 1 / 1; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; color: var(--agt-rose); white-space: nowrap;
  opacity: 0; translate: 0 105%; transition: translate 1s var(--agt-ease-out), opacity .6s var(--agt-ease); }
.agt-xo__roll em.is-on { opacity: 1; translate: 0 0; }
.agt-xo__roll em.is-up { opacity: 0; translate: 0 -105%; }
.agt-xo__sum { margin: 0 0 .9em; max-width: 30ch; color: var(--agt-ink-2); font: 400 15px/1.5 var(--agt-sans); }
.agt-xo__sum b { color: var(--agt-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.agt-xo__doors { --xe-h: clamp(540px, 76vh, 740px); max-width: var(--agt-max); margin: 0 auto; padding: 0 var(--agt-g); display: flex; gap: 12px; height: var(--xe-h); }
.agt-xo__door { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--tint, #eceae8);
  clip-path: inset(0 0 0 0 round 22px); transition: flex-grow 1.05s var(--agt-ease-io), background-color .8s var(--agt-ease); }
.agt-xo__door.is-on { flex-grow: 8; background: color-mix(in srgb, var(--tint, #eceae8) 16%, #fbfaf8); }
/* the photograph: the whole slat when closed, the right 52 % when open */
.agt-xo__photo { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0; display: block; overflow: hidden; transition: left 1.05s var(--agt-ease-io); }
.agt-xo__door.is-on .agt-xo__photo { left: 48%; }
.agt-xo__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; scale: 1.12; filter: saturate(.82) brightness(1.03);
  transition: scale 1.6s var(--agt-ease-out), filter 1s var(--agt-ease); }
.agt-xo__door.is-on .agt-xo__photo img { scale: 1; filter: none; }
.agt-xo.is-run .agt-xo__door.is-on .agt-xo__photo img { scale: 1.06; transition: scale var(--xe-dwell, 7s) linear, filter 1s var(--agt-ease); }
/* a pale veil at the foot of the closed slats, under their names */
.agt-xo__door::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .7s var(--agt-ease);
  background: linear-gradient(0deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, 0) 60%); }
.agt-xo__door.is-on::after { opacity: 0; }
/* the closed slat's name, standing up */
.agt-xo__tab { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 16px; padding: 0 0 28px;
  border: 0; background: none; color: var(--agt-ink); cursor: pointer; transition: opacity .4s var(--agt-ease); }
.agt-xo__tab span { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: 300 clamp(26px, 2.3vw, 38px)/1 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.01em; }
.agt-xo__tab b { order: 2; font: 500 10.5px/1 var(--agt-sans); letter-spacing: .2em; color: var(--agt-rose); }
.agt-xo__tab i { display: none; }
.agt-xo__door.is-on .agt-xo__tab { opacity: 0; pointer-events: none; }
.agt-xo__door:not(.is-on):hover .agt-xo__photo img { filter: none; }
/* the open door's world */
.agt-xo__body { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 48%; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 44px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--agt-ease), visibility 0s .25s; }
.agt-xo__door.is-on .agt-xo__body { opacity: 1; visibility: visible; transition: opacity .7s var(--agt-ease) .5s, visibility 0s; }
.agt-xo__body > * { transform: translateY(18px); transition: transform .9s var(--agt-ease-out); }
.agt-xo__door.is-on .agt-xo__body > * { transform: none; transition-delay: .5s; }
.agt-xo__door.is-on .agt-xo__body > :nth-child(2) { transition-delay: .56s; }
.agt-xo__door.is-on .agt-xo__body > :nth-child(3) { transition-delay: .62s; }
.agt-xo__door.is-on .agt-xo__body > :nth-child(4) { transition-delay: .68s; }
.agt-xo__door.is-on .agt-xo__body > :nth-child(5) { transition-delay: .74s; }
.agt-xo__door.is-on .agt-xo__body > :nth-child(6) { transition-delay: .8s; }
.agt-xo__no { margin: 0; color: var(--agt-mute); font: 500 10.5px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.agt-xo__no b { color: var(--agt-rose); font-weight: 500; }
.agt-xo__no span { margin: 0 6px; }
.agt-xo__name { margin: auto 0 14px; font: 300 clamp(40px, 3.9vw, 70px)/.98 var(--agt-serif); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.035em; }
.agt-xo__name a { color: var(--agt-ink) !important; }
.agt-xo__line { margin: 0 0 18px; max-width: 34ch; color: var(--agt-ink-2); font: 400 15px/1.5 var(--agt-sans); }
.agt-xo__aisles { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }
.agt-xo__aisles a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(20, 17, 18, .16); background: rgba(255, 255, 255, .7);
  color: var(--agt-ink) !important; font: 400 13px/1 var(--agt-sans); transition: background .35s var(--agt-ease), color .35s var(--agt-ease), border-color .35s var(--agt-ease); }
@media (hover: hover) { .agt-xo__aisles a:hover { background: var(--agt-ink); border-color: var(--agt-ink); color: #fff !important; } }
.agt-xo__shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.agt-xo__shelf a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 18px 34px -26px rgba(46, 26, 32, .35);
  color: var(--agt-ink) !important; transition: transform .6s var(--agt-ease-out), box-shadow .6s var(--agt-ease-out); }
@media (hover: hover) { .agt-xo__shelf a:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -24px rgba(46, 26, 32, .4); } }
.agt-xo__shelf img { width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; }
.agt-xo__shelf span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 11.5px/1.35 var(--agt-sans); color: var(--agt-ink-2); }
.agt-xo__shelf b { margin-top: auto; font: 500 13px/1 var(--agt-sans); font-variant-numeric: tabular-nums; }
.agt-xo__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--agt-ink); color: #fff !important;
  font: 500 11.5px/1 var(--agt-sans); letter-spacing: .2em; text-transform: uppercase; transition: gap .5s var(--agt-ease-out), background .4s var(--agt-ease); }
@media (hover: hover) { .agt-xo__go:hover { gap: 20px; background: var(--agt-rose); } }
.agt-xo__go .agt-arw { width: 18px; height: 10px; }
/* the time the open door has left */
.agt-xo__bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(20, 17, 18, .08); opacity: 0; transition: opacity .4s; }
.agt-xo__bar i { display: block; height: 100%; background: var(--agt-ink); transform-origin: 0 50%; scale: 0 1; }
.agt-xo.is-run .agt-xo__door.is-on .agt-xo__bar { opacity: 1; }
.agt-xo.is-run .agt-xo__door.is-on .agt-xo__bar i { animation: agtXeBar var(--xe-dwell, 7s) linear forwards; }
@keyframes agtXeBar { to { scale: 1 1; } }
/* entrance: the doors rise as slats, one after another, and the head comes up */
.agt-js .agt-xo:not(.is-in) .agt-xo__door { clip-path: inset(100% 0 0 0 round 22px); }
.agt-js .agt-xo:not(.is-in) .agt-xo__head > * { opacity: 0; transform: translateY(24px); }
.agt-js .agt-xo.is-in .agt-xo__door { transition: flex-grow 1.05s var(--agt-ease-io), background-color .8s var(--agt-ease), clip-path 1.3s var(--agt-ease-out) calc(var(--i, 0) * .09s); }
.agt-js .agt-xo.is-in .agt-xo__head > * { transition: opacity .9s var(--agt-ease), transform 1.1s var(--agt-ease-out); }
.agt-js .agt-xo.is-in .agt-xo__head > :nth-child(2) { transition-delay: .08s; }
.agt-js .agt-xo.is-in .agt-xo__head > :nth-child(3) { transition-delay: .16s; }
@media (max-width: 1199.98px) {
  .agt-xo__doors { --xe-h: clamp(520px, 70vh, 640px); gap: 10px; }
  .agt-xo__door.is-on { flex-grow: 7; }
  .agt-xo__tab span { font-size: 26px; }
  .agt-xo__line { display: none; }
  .agt-xo__shelf span { -webkit-line-clamp: 1; }
}
@media (max-width: 767.98px) {
  .agt-xo { padding: 52px 0 36px; }
  .agt-xo__head { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  .agt-xo__title { font-size: clamp(40px, 11.4vw, 60px); }
  .agt-xo__sum { margin: 0; font-size: 14px; }
  .agt-xo__doors { flex-direction: column; height: auto; gap: 8px; padding: 0 12px; }
  .agt-xo__door { flex: none; height: 76px; border-radius: 18px; transition: height .9s var(--agt-ease-io), background-color .8s var(--agt-ease); }
  .agt-xo__door.is-on { height: 556px; }
  .agt-js .agt-xo.is-in .agt-xo__door { transition: height .9s var(--agt-ease-io), background-color .8s var(--agt-ease), clip-path 1.3s var(--agt-ease-out) calc(var(--i, 0) * .09s); }
  .agt-xo__door.is-on .agt-xo__photo { left: 0; bottom: auto; height: 214px; }
  .agt-xo__door::after { background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .25) 100%); }
  .agt-xo__tab { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 0 20px; }
  .agt-xo__tab span { writing-mode: horizontal-tb; rotate: none; font-size: 26px; }
  .agt-xo__tab b { order: 0; }
  .agt-xo__tab i { display: block; margin-left: auto; font: 500 10.5px/1 var(--agt-sans); font-style: normal; letter-spacing: .12em; color: var(--agt-mute); font-variant-numeric: tabular-nums; }
  .agt-xo__body { top: 214px; width: auto; right: 0; padding: 18px 18px 20px; }
  .agt-xo__no { display: none; }
  .agt-xo__name { margin: 0 0 12px; font-size: 38px; }
  .agt-xo__aisles { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 16px; padding: 0 18px; scrollbar-width: none; }
  .agt-xo__aisles::-webkit-scrollbar { display: none; }
  .agt-xo__aisles li { flex: none; }
  .agt-xo__shelf { gap: 8px; margin-bottom: 16px; }
  .agt-xo__shelf a { padding: 8px 8px 10px; border-radius: 12px; }
  .agt-xo__shelf span { -webkit-line-clamp: 2; font-size: 11px; }
  .agt-xo__go { align-self: stretch; justify-content: center; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-xo__door, .agt-xo__photo, .agt-xo__photo img, .agt-xo__body, .agt-xo__body > *, .agt-xo__roll em { transition: none !important; }
  .agt-xo__bar { display: none; }
}

/* =====================================================================
   SEARCH RESULTS WHILE TYPING (28 Oct, his ask: "make the search smarter ... show products easier ... even if some
   letters are missing"): under the search field, the mended words, the aisles most matches sit in, the best pieces
   (photo, name with the matched words marked, price) and the way to all results. agt.js fills .agt-sr.
   ===================================================================== */
.agt-sr { margin-top: 24px; padding-bottom: 48px; }
.agt-sr:empty { display: none; }
.agt-search form.has-q .agt-search__hints { display: none; }
.agt-sr__meta { margin: 0 0 16px; color: var(--agt-mute); font: 400 14px/1.4 var(--agt-sans); }
.agt-sr__meta b { color: var(--agt-ink); font-weight: 500; }
.agt-sr__meta span { color: var(--agt-mute); }
.agt-sr__aisles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.agt-sr__aisles .agt-chip { height: 34px; padding: 0 14px; font-size: 13px; }
.agt-sr__aisles .agt-chip sup { top: 0; margin-left: 7px; font-size: 10px; color: var(--agt-mute); font-variant-numeric: tabular-nums; }
.agt-sr__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.agt-sr__list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px 10px 14px; border-radius: 16px; border: 1px solid var(--agt-line); background: #fff; color: var(--agt-ink) !important;
  transition: border-color .3s var(--agt-ease), box-shadow .45s var(--agt-ease-out), transform .5s var(--agt-ease-out); animation: agtSrIn .5s var(--agt-ease-out) both; animation-delay: calc(var(--k, 0) * 30ms); }
.agt-sr__list li.is-active a { border-color: var(--agt-ink); box-shadow: 0 18px 36px -26px rgba(46, 26, 32, .45); transform: translateY(-2px); }
@media (hover: hover) { .agt-sr__list a:hover { border-color: var(--agt-ink); box-shadow: 0 18px 36px -26px rgba(46, 26, 32, .45); transform: translateY(-2px); } }
.agt-sr__img { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--agt-soft); overflow: hidden; }
.agt-sr__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.agt-sr__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 14px/1.35 var(--agt-sans); color: var(--agt-ink-2); }
.agt-sr__name mark { padding: 0; background: none; color: var(--agt-ink); font-weight: 500; box-shadow: inset 0 -.38em 0 rgba(174, 81, 100, .16); }
.agt-sr__price { margin-top: auto; font: 500 14px/1 var(--agt-sans); font-variant-numeric: tabular-nums; }
.agt-sr__all { display: inline-flex; align-items: center; gap: 12px; margin: 24px 0 0; }
.agt-sr__all .agt-arw { width: 18px; height: 10px; }
.agt-sr__empty { margin: 8px 0 0; color: var(--agt-ink-2); font: 300 clamp(20px, 2vw, 26px)/1.3 var(--agt-serif); }
@keyframes agtSrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) { .agt-sr__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .agt-sr { margin-top: 18px; }
  .agt-sr__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .agt-sr__list a { flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; }
  .agt-sr__img { flex: none; width: 64px; height: 64px; }
  .agt-sr__name { flex: 1; min-width: 0; font-size: 13.5px; }
  .agt-sr__price { flex: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .agt-sr__list a { animation: none; } }