/* AO product page — a skin over the native main-product (values from the design's product.jsx). Loaded on
   product pages only. The native form, picker, price and buttons keep their DOM; only their look changes. */

body .product-detail-wrapper,body .product-detail-wrapper .product-detail{background:var(--surface-page)}
/* layout: two equal columns, gallery left, sticky info right */
body .product-detail-wrapper .page-width{max-width:none;padding-left:var(--margin-page);padding-right:var(--margin-page)}
body theme-product-detail.product-detail{--detail-padding-block-start:0;padding-top:0}
body .product-detail{column-gap:calc(var(--gutter) * 2)!important;align-items:flex-start}
body .product-detail__media-group,body .product-detail__info{flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0}
body .product-detail__info{position:sticky;top:120px;gap:28px!important;padding-bottom:40px;color:var(--text-primary)}

/* gallery: stacked 4:5 images (native "flatten"), swipe on phones (native "hide-thumbnail") */
body .product-detail__media-gallery .media-gallery__list{gap:var(--gutter)}
body .product-detail__media-gallery .media-gallery__item,body .product-detail__media-gallery .media-gallery__media{aspect-ratio:4/5;overflow:hidden;background:var(--ao-carton)}
body .product-detail__media-gallery .media-gallery__image img,body .product-detail__media-gallery .media-gallery__media img{width:100%;height:100%;object-fit:cover}
body .product-detail__media-gallery .media-gallery__thumbnails{display:none}

/* AO lines in the info column */
.ao-pdp__crumb{display:flex;gap:8px;color:var(--text-secondary);margin-bottom:-8px}
.ao-pdp__crumb-here{color:var(--text-primary)}
.ao-pdp__kicker{font:var(--type-small);font-size:15px}
.ao-pdp__title{font-size:clamp(48px,5.4vw,88px)}
.ao-pdp__study{font-size:24px;margin-top:-18px}
.ao-pdp__line{margin:0;font:var(--type-body);font-size:16px;max-width:46ch;text-wrap:pretty}
.ao-pdp__read{align-self:flex-start}
.ao-pdp__note{margin:-16px 0 0;color:var(--text-secondary)}

/* the native variant picker as the design's size buttons, each with its price */
body .product-detail__variant-picker .variant-picker__group-head{display:none}
body .product-detail__variant-picker .variant-picker__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
body .product-detail__variant-picker .variant-picker__option{position:relative;margin:0}
body .product-detail__variant-picker .variant-picker__option input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
body .product-detail__variant-picker .variant-picker__button{display:flex!important;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--rule-hairline)!important;border-radius:0!important;background:transparent!important;color:var(--text-primary)!important;font:var(--type-small)!important;transition:border-color 300ms;min-width:0;width:100%;box-sizing:border-box}
body .product-detail__variant-picker .variant-picker__option input:checked + .variant-picker__button,body .product-detail__variant-picker .variant-picker__option input:checked ~ .variant-picker__button{border-color:var(--rule)!important}
body .product-detail__variant-picker .variant-picker__option input:focus-visible ~ .variant-picker__button{outline:1px solid currentColor;outline-offset:2px}
.ao-opt-price{font:var(--type-small)}

/* price: the add button and the sizes carry it, as designed */
body .product-detail__info .product-detail__price{display:none}

/* add to bag: full-width charcoal, "Add to bag — £135"; sold out reads sold out with no price */
body .product-detail__buy-buttons .form__buttons{display:flex;flex-direction:column;gap:12px}
body .product-detail__buy-buttons button[name="add"]{all:unset;position:relative;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:18px 28px;background:var(--ao-charcoal-black)!important;color:var(--ao-ivory-white);border:1px solid var(--ao-charcoal-black);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;transition:opacity var(--duration-hover) var(--ease-quiet)}
body .product-detail__buy-buttons button[name="add"]:hover{opacity:.7}
body .product-detail__buy-buttons button[name="add"]>span::after{content:" — " var(--ao-price,"")}
body .product-detail__buy-buttons button[name="add"]:disabled{opacity:.4;cursor:default}
body .product-detail__buy-buttons button[name="add"]:disabled>span::after{content:none}
body .product-detail__buy-buttons button[name="add"].loading>span::after{content:none}
body .product-detail__buy-buttons .shopline-payment-button,body .product-detail__buy-buttons [class*="payment-button"],body .product-detail__buy-buttons .button--dynamic-checkout{display:none!important}

/* the native accordions (Ingredients, How to wear, Delivery & returns) */
body .product-detail__additional{border-bottom:var(--border-hairline);margin-top:-28px}
body .product-detail__additional:first-of-type,body .product-detail__info>.product-detail__additional:first-child{margin-top:0}
body .product-detail__additional summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer}
body .product-detail__additional summary::-webkit-details-marker{display:none}
body .product-detail__additional .additional__title{font:var(--type-label)!important;letter-spacing:var(--tracking-label);text-transform:uppercase}
body .product-detail__additional .additional__arrow{display:none}
body .product-detail__additional summary::after{content:"+";font:var(--type-body);transition:transform 400ms var(--ease-quiet)}
body .product-detail__additional details[open] summary::after{transform:rotate(45deg)}
body .product-detail__additional .additional__content{padding-bottom:18px;font:var(--type-small)!important;font-size:14px!important;color:var(--text-primary)}
body .product-detail__additional svg{display:none}

/* the study */
.ao-study{padding-top:120px;padding-bottom:40px;scroll-margin-top:100px}
.ao-study__head{align-items:end;margin-bottom:56px}
.ao-study__headline{display:flex;flex-direction:column;gap:16px}
.ao-study__title{font-size:clamp(40px,4.6vw,76px)}
.ao-study__intro{margin:0;max-width:44ch;font-size:16px;color:var(--text-secondary)}
.ao-study__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding:56px 0;border-top:var(--border-hairline)}
.ao-study__label{display:flex;flex-direction:column;gap:12px;align-self:start}
.ao-study__h{font-size:clamp(28px,2.6vw,40px)}
.ao-study__i{color:var(--text-secondary);max-width:30ch}
.ao-study__composition{display:flex;flex-direction:column;gap:14px}
.ao-study__composition p{margin:0;font-family:var(--font-display);font-size:clamp(21px,1.75vw,27px);line-height:1.35;text-wrap:pretty}
.ao-study__3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.ao-study__col{display:flex;flex-direction:column;gap:12px;border-top:var(--border-rule);padding-top:16px}
.ao-study__colhead{display:flex;flex-direction:column;gap:2px}
.ao-study__notes{display:flex;flex-direction:column;gap:4px}
.ao-study__notes .ao-eiko{font-size:22px;line-height:1.2}
.ao-study__ing{display:flex;flex-direction:column;gap:10px}
.ao-study__ingimg{aspect-ratio:1/1;position:relative;background:var(--ao-carton)}
.ao-study__ingimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ao-study__ing>.ao-small:first-of-type{margin-top:6px}
.ao-study__ingname{font-size:26px;line-height:1.1}
.ao-study__skin{display:flex;flex-direction:column;gap:40px}
.ao-study__stage{display:flex;flex-direction:column;gap:12px}
.ao-study__dot{display:flex;align-items:center;gap:10px}
.ao-study__dot span:first-child{width:9px;height:9px;border-radius:50%;border:1px solid var(--ao-charcoal-black);flex:none}
.ao-study__dot span:first-child.is-on{background:var(--ao-charcoal-black)}
.ao-study__dot span:last-child{flex:1;height:1px;background:var(--rule)}
.ao-study__sname{font-size:24px}
.ao-study__stext{font:var(--type-small);font-size:15px}
.ao-study__scales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.ao-scale{display:flex;flex-direction:column;gap:10px}
.ao-scale__head{display:flex;justify-content:space-between;align-items:baseline}
.ao-scale__bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ao-scale__bar span{height:6px;border:1px solid var(--rule-hairline)}
.ao-scale[data-ao-scale="1"] .ao-scale__bar span:nth-child(-n+1),.ao-scale[data-ao-scale="2"] .ao-scale__bar span:nth-child(-n+2),
.ao-scale[data-ao-scale="3"] .ao-scale__bar span:nth-child(-n+3),.ao-scale[data-ao-scale="4"] .ao-scale__bar span:nth-child(-n+4),
.ao-scale[data-ao-scale="5"] .ao-scale__bar span{background:var(--ao-charcoal-black);border-color:var(--ao-charcoal-black)}
.ao-scale__ends{display:flex;justify-content:space-between;color:var(--text-secondary)}
.ao-study__obs{display:flex;flex-direction:column;gap:16px;max-width:60ch;white-space:pre-line;font-size:18px;line-height:1.6}
.ao-study__obs p{margin:0;white-space:normal;text-wrap:pretty}
.ao-study__obs .ao-study__end{font-size:24px}

/* next study */
.ao-next{position:relative;display:block;height:min(60vh,520px);margin-top:100px;color:var(--text-primary);text-decoration:none}
.ao-next:hover{color:var(--text-primary)}
.ao-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ao-next__copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px}

/* continue the study */
.ao-related{padding-top:100px;padding-bottom:120px}
.ao-related__title{margin-bottom:40px}
.ao-related__grid{row-gap:48px}

/* phones: the buy bar */
.ao-buybar{display:none}
@media(max-width:700px){
  .ao-buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:var(--border-hairline);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(110%);transition:transform 450ms var(--ease-quiet)}
  .ao-buybar.is-on{transform:none}
  body.ao-has-buybar{padding-bottom:76px}
  .ao-buybar__txt{display:flex;flex-direction:column;min-width:0}
  .ao-buybar__name{font-size:19px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ao-buybar__variant{color:var(--text-secondary)}
  .ao-buybar__btn{white-space:nowrap;padding:14px 20px}
}

@media(max-width:959px){
  .product-detail__info{position:static}
  .ao-study__row{grid-template-columns:1fr;padding:40px 0}
}
@media(max-width:700px){
  .ao-study__3,.ao-study__scales{grid-template-columns:1fr;gap:28px}
  .ao-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}