/* AO — brand layer. Tokens and utilities ported from the approved design (03-prototype/site/assets/tokens,
   css/site.css). Utilities carry an ao- prefix so they never meet the base theme's class names. Loaded after
   base/index.css, so equal-specificity rules resolve to the brand. */

:root{
  --ao-charcoal-black:#161311;--ao-ivory-white:#F2EFE8;--ao-bone-clay:#CBCBCB;--ao-ink-graphite:#2C2C2C;
  --ao-paper-white:#FFFFFF;--ao-carton:#E9E3DA;--ao-stone:#BDB6AE;
  --ao-ink-60:rgba(22,19,17,.6);--ao-ink-40:rgba(22,19,17,.4);--ao-ink-12:rgba(22,19,17,.12);
  --ao-ivory-60:rgba(242,239,232,.6);--ao-ivory-20:rgba(242,239,232,.2);
  --surface-page:var(--ao-paper-white);--surface-ivory:var(--ao-ivory-white);--surface-inverse:var(--ao-ink-graphite);
  --surface-deep:var(--ao-charcoal-black);--surface-muted:var(--ao-bone-clay);--surface-carton:var(--ao-carton);
  --text-primary:var(--ao-charcoal-black);--text-secondary:var(--ao-ink-60);--text-tertiary:var(--ao-ink-40);
  --text-inverse:var(--ao-ivory-white);--text-inverse-secondary:var(--ao-ivory-60);
  --rule:var(--ao-charcoal-black);--rule-hairline:var(--ao-ink-12);--rule-inverse:var(--ao-ivory-20);

  --font-display:"PP Eiko","Times New Roman",Times,serif;
  --font-body:Times,"Times New Roman",serif;
  --font-label:Times,"Times New Roman",serif;
  --size-body:15px;--size-small:13px;--size-label:11px;--size-micro:10px;
  --leading-body:1.45;--tracking-label:0.14em;
  --type-lede:400 24px/1.3 var(--font-display);
  --type-body:400 var(--size-body)/var(--leading-body) var(--font-body);
  --type-small:400 var(--size-small)/var(--leading-body) var(--font-body);
  --type-label:400 var(--size-label)/1.3 var(--font-label);
  --type-folio:400 var(--size-micro)/1.3 var(--font-body);

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;
  --margin-page:48px;--gutter:24px;
  --border-hairline:1px solid var(--rule-hairline);--border-rule:1px solid var(--rule);
  --ease-quiet:cubic-bezier(.25,.1,.25,1);--duration-fade:600ms;--duration-hover:240ms;

  /* the fixed header: 30px announcement + 68px bar */
  --ao-bar-h:68px;--ao-announce-h:30px;--ao-header-h:calc(var(--ao-bar-h) + var(--ao-announce-h));

  /* native components read these */
  --sort-title-font:"PP Eiko","Times New Roman",Times,serif;
  --sort-body-font:Times,"Times New Roman",serif;
}
@media(max-width:900px){:root{--margin-page:20px}}

body{background:var(--surface-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased}
body:not([data-page-type="index"]):not([data-page-type="password"]) main#main{padding-top:var(--ao-header-h)}

/* platform wrappers inside AO sections: the section wrapper carries no padding, block wrappers carry no box */
[id^="shopline-section-"]:has(> [data-ao-section]){padding:0;margin:0}
[data-ao-section] [id^="shopline-block-"]{display:contents}

/* utilities (design: .wrap .g2 .g3 .g4 .lab .eiko .disp .stmt .ttl .ital .btnu .zoom .row-h .input .hscroll) */
.ao-wrap{padding-left:var(--margin-page);padding-right:var(--margin-page)}
.ao-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.ao-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.ao-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.ao-lab{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.ao-lab--muted{color:var(--text-secondary)}
.ao-small{font:var(--type-small)}
.ao-eiko{font-family:var(--font-display);font-weight:400}
.ao-disp{font-family:var(--font-display);font-weight:400;font-size:clamp(48px,7.2vw,124px);line-height:.98;letter-spacing:-.015em;margin:0}
.ao-stmt{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.3vw,52px);line-height:1.16;margin:0;text-wrap:pretty}
.ao-ttl{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1.06;margin:0}
.ao-ital,.ao-disp em,.ao-stmt em,.ao-ttl em{font-family:var(--font-display);font-weight:300;font-style:italic}
.ao-btnu{all:unset;cursor:pointer;position:relative;display:inline-block;color:inherit;text-decoration:none}
.ao-btnu::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 450ms var(--ease-quiet)}
.ao-btnu:hover::after,.ao-btnu.on::after,.ao-btnu:focus-visible::after{transform:scaleX(1);transform-origin:left}
.ao-btnu:focus-visible{outline:1px solid currentColor;outline-offset:4px}
a.ao-btnu,a.ao-btnu:hover{color:inherit;text-decoration:none}
.ao-zoom{overflow:hidden}.ao-zoom img{transition:transform 1600ms var(--ease-quiet)}.ao-zoom:hover img{transform:scale(1.045)}
.ao-row-h{transition:background 300ms var(--ease-quiet),padding 400ms var(--ease-quiet)}
.ao-row-h:hover{background:var(--ao-ivory-white)}
.ao-input{all:unset;box-sizing:border-box;border-bottom:1px solid currentColor;padding:12px 0;width:100%;font:var(--type-body);font-size:16px}
.ao-input::placeholder{color:inherit;opacity:.5}
.ao-hscroll{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:var(--margin-page)}
.ao-hscroll::-webkit-scrollbar{display:none}
.ao-hscroll>*{scroll-snap-align:start;flex:none}

/* buttons (design system Button: primary / secondary / text) */
.ao-button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:14px 28px;border:1px solid var(--ao-charcoal-black);background:var(--ao-charcoal-black);color:var(--ao-ivory-white);transition:opacity var(--duration-hover) var(--ease-quiet);text-align:center}
.ao-button:hover{opacity:.7;color:var(--ao-ivory-white)}
.ao-button--secondary{background:transparent;color:var(--ao-charcoal-black)}
.ao-button--secondary:hover{color:var(--ao-charcoal-black)}
.ao-button--inverse{background:var(--ao-ivory-white);color:var(--ao-charcoal-black);border-color:var(--ao-ivory-white)}
.ao-button--inverse:hover{color:var(--ao-charcoal-black)}
.ao-button[disabled],.ao-button.is-disabled{opacity:.4;cursor:default}
a.ao-button,a.ao-button:hover{text-decoration:none}

/* the logo mark (inline SVG, takes currentColor) */
.ao-logo{display:block;width:100%;height:auto}

/* motion */
@keyframes ao-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ao-fade{from{opacity:0}to{opacity:1}}
@keyframes ao-fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ao-stagger>*{animation:ao-rise 800ms var(--ease-quiet) both}
.ao-stagger>*:nth-child(2){animation-delay:60ms}.ao-stagger>*:nth-child(3){animation-delay:120ms}.ao-stagger>*:nth-child(4){animation-delay:180ms}.ao-stagger>*:nth-child(5){animation-delay:240ms}.ao-stagger>*:nth-child(6){animation-delay:300ms}.ao-stagger>*:nth-child(7){animation-delay:360ms}.ao-stagger>*:nth-child(8){animation-delay:420ms}.ao-stagger>*:nth-child(9){animation-delay:480ms}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1000ms var(--ease-quiet),transform 1000ms var(--ease-quiet)}
[data-reveal].in{opacity:1;transform:none}
main#main,.ao-footer{transition:opacity 280ms var(--ease-quiet)}
body.ao-leaving main#main,body.ao-leaving .ao-footer{opacity:0}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.ao-stagger>*{animation:none}}

@media(max-width:1100px){.ao-g4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ao-g2,.ao-g3{grid-template-columns:1fr}.ao-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1080px){.ao-hide-m{display:none!important}}
@media(min-width:1081px){.ao-show-m{display:none!important}}

.skip-to-content-link:not(:focus){position:absolute;left:-9999px}

/* the essence carton (design system PackFront); every size a multiple of --w */
.ao-carton{width:calc(var(--w) * 1px);aspect-ratio:.56;background:var(--surface-carton);color:var(--text-primary);padding:calc(var(--w) * .09px);box-sizing:border-box;display:flex;flex-direction:column;gap:calc(var(--w) * .05px);text-align:left}
.ao-carton__logo{display:block;width:calc(var(--w) * .34px);color:var(--ao-charcoal-black);line-height:0}
.ao-carton__num{font:var(--type-small);font-size:calc(var(--w) * .042px)}
.ao-carton__name{font-family:var(--font-display);font-size:calc(var(--w) * .075px);line-height:1.05}
.ao-carton__visual{aspect-ratio:1;overflow:hidden;background:var(--surface-ivory)}
.ao-carton__visual img{width:100%;height:100%;object-fit:cover;display:block}
.ao-carton__meta{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .04px);font-family:var(--font-body);font-size:calc(var(--w) * .033px);line-height:1.25}
.ao-carton__meta span:last-child{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ao-carton__study{margin-top:auto;font-family:var(--font-display);font-size:calc(var(--w) * .07px);line-height:1.08}

/* accordion (design: Accordion) */
.ao-acc{border-bottom:var(--border-hairline)}
.ao-acc__btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.ao-acc__btn:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.ao-acc__plus{font:var(--type-body);transition:transform 400ms var(--ease-quiet)}
.ao-acc.is-open .ao-acc__plus{transform:rotate(45deg)}
.ao-acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 500ms var(--ease-quiet)}
.ao-acc.is-open .ao-acc__body{grid-template-rows:1fr}
.ao-acc__body>div{overflow:hidden}
.ao-acc__inner{padding-bottom:18px;font:var(--type-small);font-size:14px}
.ao-acc__inner p{margin:0 0 10px}.ao-acc__inner p:last-child{margin:0}

/* Colour schemes 1–3 in the brand's colours. The live store keeps scheme values in the editor's saved
   settings, which a push cannot change (playbook fact 31; theme.config.json carries the same values for a
   fresh install). Open item: set them once in Theme settings › Colours, then drop this block. */
body .color-scheme-1{--color-background:255,255,255;--color-media-background:233,227,218;--color-text:22,19,17;--color-light-text:115,112,109;--color-entry-line:226,225,224;--color-button-background:22,19,17;--color-button-text:242,239,232;--color-button-secondary-background:255,255,255;--color-button-secondary-text:22,19,17;--color-button-secondary-border:22,19,17;--color-button-text-link:22,19,17}
body .color-scheme-2{--color-background:242,239,232;--color-media-background:233,227,218;--color-text:22,19,17;--color-light-text:115,112,109;--color-entry-line:217,214,208;--color-button-background:22,19,17;--color-button-text:242,239,232;--color-button-secondary-background:242,239,232;--color-button-secondary-text:22,19,17;--color-button-secondary-border:22,19,17;--color-button-text-link:22,19,17}
body .color-scheme-3{--color-background:22,19,17;--color-media-background:44,44,44;--color-text:242,239,232;--color-light-text:169,166,161;--color-entry-line:69,65,62;--color-button-background:242,239,232;--color-button-text:22,19,17;--color-button-secondary-background:22,19,17;--color-button-secondary-text:242,239,232;--color-button-secondary-border:242,239,232;--color-button-text-link:242,239,232}
:root{--color-page-background:255,255,255}

/* the bag: the native cart drawer and cart page in the AO look (design: shell.jsx CartDrawer) */
body .cart-drawer__body{background:#fff;color:var(--text-primary);width:min(460px,100vw)}
body .cart-drawer__header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:var(--border-hairline)}
body .cart-drawer__header h2{font:var(--type-label)!important;letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0}
body .cart-drawer__close svg{width:14px;height:14px}
body .cart-drawer__items{padding:8px 28px}
body .cart-item{border-bottom:var(--border-hairline);padding:20px 0}
body .cart-item img{object-fit:cover}
body .cart-item [class*="title"],body .cart-item [class*="name"]{font-family:var(--font-display)!important;font-weight:400!important;font-size:22px!important;line-height:1.15}
body .cart-drawer__payment{padding:24px 28px 0;border-top:var(--border-rule)}
body .cart-amount{font:var(--type-body)}
body .cart-amount__total,body .cart-amount__subtotal{font-family:var(--font-display)}
body .cart-fixed-checkout .button,body .cart-checkout .button,body .main-cart-footer .button--fill{all:unset;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;padding:16px 28px;cursor:pointer;background:var(--ao-charcoal-black)!important;color:var(--ao-ivory-white);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;transition:opacity var(--duration-hover)}
body .cart-fixed-checkout .button:hover,body .cart-checkout .button:hover,body .main-cart-footer .button--fill:hover{opacity:.7}
/* quantity and remove as text controls (design: CartDrawer "− 1 +  Remove"), not the base ringed stepper */
body .cart-item__amount-operator{gap:12px}
body .cart-item theme-input-number{width:auto;gap:14px;align-items:center;background:transparent;font:var(--type-small)}
body .cart-item theme-input-number::before,body .cart-item theme-input-number::after{box-shadow:none!important}
body .cart-item theme-input-number button[name="minus"],body .cart-item theme-input-number button[name="plus"]{width:auto;cursor:pointer;transition:opacity var(--duration-hover) var(--ease-quiet)}
body .cart-item theme-input-number button[name="minus"]:hover,body .cart-item theme-input-number button[name="plus"]:hover{opacity:.7}
body .cart-item theme-input-number input[type="number"]{flex:none;width:3ch;padding:0;font:var(--type-small)}
body .cart-item__remove{font:var(--type-small);color:var(--text-secondary)}
body .cart-empty__tips{font-family:var(--font-display);font-size:clamp(30px,3vw,44px);line-height:1.06}
body .cart-empty__button{background:transparent!important;color:var(--ao-charcoal-black);border:1px solid var(--ao-charcoal-black);border-radius:0;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;transition:opacity var(--duration-hover) var(--ease-quiet)}
body .cart-empty__button:hover{opacity:.7;color:var(--ao-charcoal-black)}

/* bag extras */
.ao-bagx{display:flex;flex-direction:column;gap:18px;padding:0 0 18px;margin-bottom:18px;border-bottom:var(--border-hairline)}
.ao-bagx__free{margin:0;color:var(--text-secondary)}
.ao-bagx__samples{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ao-bagx__samples legend{padding:0;margin-bottom:6px}
.ao-bagx__hint{margin:0;color:var(--text-secondary)}
.ao-bagx__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.ao-bagx__sample{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:opacity 300ms}
.ao-bagx.is-full .ao-bagx__sample[aria-pressed="false"]{opacity:.45}
.ao-bagx__sample:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.ao-bagx__img{position:relative;display:block;aspect-ratio:1;background:var(--ao-carton);overflow:hidden;border:1px solid transparent}
.ao-bagx__sample[aria-pressed="true"] .ao-bagx__img{border-color:var(--rule)}
.ao-bagx__img img{width:100%;height:100%;object-fit:cover}
.ao-bagx__badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;border-radius:50%;background:var(--ao-charcoal-black);color:var(--ao-ivory-white);font:var(--type-small);font-size:11px;display:grid;place-items:center}
.ao-bagx__badge:empty{display:none}
.ao-bagx__name{font-family:var(--font-display);font-size:14px;line-height:1.15}
.ao-bagx__gift{display:flex;flex-direction:column;gap:8px}
.ao-bagx__check{display:flex;gap:10px;align-items:center;cursor:pointer;font:var(--type-small)}
.ao-bagx__check input{accent-color:var(--ao-charcoal-black);width:16px;height:16px;margin:0}
.ao-bagx__note{font-size:14px;resize:vertical}

/* native account, search and policy pages in the AO look (the forms and their scripts stay the platform's) */
body .customer-container,body .main-search .page-width,body .shopline-policy__container,body .policy-page{max-width:640px;margin:0 auto;padding:72px var(--margin-page) 140px;box-sizing:content-box}
body .customer__title,body .main-search__header h1,body .main-search__header [class*="title"],body [class*="policy"] h1{font-family:var(--font-display)!important;font-weight:400!important;font-size:clamp(40px,4.6vw,76px)!important;line-height:1!important;letter-spacing:-.015em;text-align:left}
body .customer form,body .customer-login__form{display:flex;flex-direction:column;gap:24px}
body .field__input,body .customer input[type="email"],body .customer input[type="password"],body .customer input[type="text"],body .main-search-box__input{border:0!important;border-bottom:1px solid currentColor!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:12px 0!important;font:var(--type-body)!important;font-size:16px!important}
body .field__label{font:var(--type-label)!important;letter-spacing:var(--tracking-label);text-transform:uppercase}
body .customer__submit .button,body .customer .button--fill,body .customer button[type="submit"]{border-radius:0!important;background:var(--ao-charcoal-black)!important;color:var(--ao-ivory-white)!important;border:1px solid var(--ao-charcoal-black)!important;font:var(--type-label)!important;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:14px 28px!important}
body .customer__tab-button{font:var(--type-label)!important;letter-spacing:var(--tracking-label);text-transform:uppercase}
body .customer a,body .customer .button--link{color:var(--text-primary)}
body .main-search__count{font:var(--type-small);color:var(--text-secondary)}
body .shopline-policy__container{max-width:680px;font-size:16px;line-height:1.6}

/* Buttons that are links: the base theme colours every a:not(.button) with the scheme's link colour (playbook
   §11.3), which made primary buttons charcoal-on-charcoal. These win on specificity. */
body a.ao-button,body a.ao-button:hover,body a.ao-button:focus,body a.ao-button:visited{color:var(--ao-ivory-white)}
body a.ao-button--secondary,body a.ao-button--secondary:hover,body a.ao-button--secondary:focus,body a.ao-button--secondary:visited{color:var(--ao-charcoal-black)}
body a.ao-button--inverse,body a.ao-button--inverse:hover,body a.ao-button--inverse:visited{color:var(--ao-charcoal-black)}
body a.ao-btnu,body a.ao-btnu:hover,body a.ao-btnu:visited{color:inherit}

/* Native buttons in the design's language: a button keeps its colours and fades to .7 on hover (design system
   Button). The base theme lightens the fill on hover (white on button--secondary, so Add to bag went white), rings
   the button from ::after and animates that ring on press. The ring sits at inset 0 of the nearest positioned box,
   so on a button reset with all:unset it framed the whole product column. Size buttons keep one 1px rule. */
body .button::after,body .shopline-element-buy-now::after,body .variant-picker__button::before,body .variant-picker__button::after{box-shadow:none!important;animation:none!important}
body .customer button[type="submit"]{transition:opacity var(--duration-hover) var(--ease-quiet)}
body .customer button[type="submit"]:not([disabled]):hover{opacity:.7}