/* ============ SHOPLINE theme layer: settings-driven tokens + platform elements ============ */

/* product-line palettes follow Theme settings > Colors */
.t-ps{--g:var(--ps-g);--sun:var(--ps-s);--ink:var(--ps-ink);--paper:var(--ps-w);background:var(--ps-w);color:var(--ps-ink)}
.t-lbo{--r:var(--lbo-r);--y:var(--lbo-y);--w:var(--lbo-w);--k:var(--lbo-k);background:var(--lbo-k);color:var(--lbo-w)}
.t-tar{--iv:var(--ivory);--bt:var(--butter);background:var(--iron);color:var(--ivory)}

/* page background behind sections (matches body.pg-* classes of the HTML) */
body:has(main .t-ps){background:var(--ps-w)}
body:has(main .t-lbo){background:var(--lbo-k)}
body:has(main .t-tar),body:has(main .t-info){background:var(--iron)}
#main{display:block}
#main>.section,#main>div{position:relative}

/* home: header + hero share one continuous gradient (the HTML wraps both in .first) */
:root{--first-h:max(calc(640px + var(--promo) + var(--head)),100svh)}
.top-shell.first{background:radial-gradient(ellipse 60% 70% at 72% 58%,#2b2a28 0%,#1b1b1a 38%,#151515 58%,#0b0b0b 100%) 0 0/100% var(--first-h) no-repeat}
.first-hero{position:relative;background:radial-gradient(ellipse 60% 70% at 72% 58%,#2b2a28 0%,#1b1b1a 38%,#151515 58%,#0b0b0b 100%) 0 calc(-1 * (var(--promo) + var(--head)))/100% var(--first-h) no-repeat}
.top-shell .section{position:relative;z-index:1}
.promo a{color:inherit}

/* cart button + count */
.cart-btn{position:relative}

/* search popup */
.search-pop{position:fixed;inset:0;z-index:96;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.search-pop.open{visibility:visible;opacity:1;transition:opacity .25s}
.search-dim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.search-box{position:relative;background:var(--iron);color:var(--ivory);padding:48px var(--gutter);border-bottom:1px solid var(--line);transform:translateY(-16px);transition:transform .3s var(--ease)}
.search-pop.open .search-box{transform:none}
.search-box form{max-width:var(--safe);margin:0 auto;display:flex;gap:16px}
.search-box input{flex:1;min-width:0;height:56px;background:#101010;border:1px solid rgba(241,238,231,.24);color:var(--ivory);font:400 calc(16px * var(--fs-b))/calc(24px * var(--fs-b)) var(--f-body);padding:0 16px}
.search-box .x{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center}
.search-box .x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5}
@media (max-width:767px){.search-box form{flex-direction:column}.search-box .btn{width:100%}}

/* cart drawer extras */
.cd-root{display:contents}
.cd-opt{font-size:calc(13px * var(--fs-b));opacity:.7}
.cd-noimg{width:72px;height:72px;background:#222;border-radius:8px}
.cd-view-cart{display:block;text-align:center;margin-top:16px;font:800 calc(12px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;opacity:.75}
.cd form{display:block}
.cd-go{width:100%}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.btn:disabled,.add:disabled{opacity:.5;cursor:not-allowed}

/* product page additions */
.buy h1.h1-spaced{margin-top:20px}
.addon-off{opacity:.5;cursor:not-allowed}
.buy-err{margin:-16px 0 20px;font:600 calc(13px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);color:#e07a5f}
.buy-note{margin:-16px 0 24px;font:400 calc(13px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);opacity:.75}
.vpick{margin-bottom:24px}
.vpick .eyebrow{display:block;margin:0 0 12px}
.vpick .pk{margin-bottom:20px}
.vp-error{font:600 calc(13px * var(--fs-b))/1.4 var(--f-body);color:#e07a5f}
.desc p+p{margin-top:12px}
.ab p+p,.ab p+table,.ab table+p{margin-top:12px}
.upgrade p{display:inline}

/* forms (SHOPLINE contact/customer forms) */
.form-msg{margin:0 0 16px;font:600 calc(14px * var(--fs-b))/calc(20px * var(--fs-b)) var(--f-body)}
.form-msg.ok{color:#8ca882}.form-msg.bad{color:#e07a5f}

/* theme editor: keep fixed UI visible while editing */
.shopline-editor .fly{transition:none}

/* ============ product page on the stock product structure (stock Fashion 1.1.11 blocks, restyled) ============ */
/* base/index.css is imported into the cascade layer "stock-base" (layout/theme.html). Its element defaults are put back to
   the browser defaults the theme was designed on; :where() keeps every theme rule above these. */
/* list markers only on plain content lists (no class: rich text in theme blocks such as the product accordion, customer
   page notes). Every stock component list carries a class (media-gallery__list, pagination-standard__parts, facets,
   cart lists) and keeps the stock reset. */
:where(ul:not([class]),ol:not([class])){list-style:revert}
:where(button:disabled){opacity:revert;cursor:revert}
:where(a:not([href])){cursor:revert}
:where(h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,section:empty,article:empty,p:empty,a:empty,ol:empty,ul:empty,dl:empty,summary:empty){display:revert}
:where(summary){display:revert;position:revert;user-select:revert}
:where(html){color:revert;background-color:revert}

/* container: components/product/detail (product-detail-wrapper > page-width > theme-product-detail) adds no box of its own */
.product-detail-wrapper:has(.ca-pdp),.product-detail-wrapper:has(.ca-pdp)>.page-width{max-width:none;padding:0;margin:0;background:none}
theme-product-detail.product-detail:has(.ca-pdp){display:block;background:none}
.ca-btn-total{display:none}
/* components/ca-add-form (stock product form behind the theme's own add buttons): the form adds no box of its own, the
   stock spinner (base/index.css .loading > .loading--rotator) shows beside the label while adding */
theme-product-form.ca-af,theme-product-form.ca-af>form{display:contents}
.ca-af .loading--rotator{width:16px;height:16px}
.ca-af .loading--rotator svg{width:16px;height:16px}
.ca-af button.loading .ca-add-t{opacity:.6}
.ca-pdp .ca-btn-total{display:inline}

/* gallery column: $product-media-group > $product-media > stock components/product/media */
.ca-pdp .pdp .ca-media-group{position:sticky;top:24px;min-width:0;width:auto}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery{overflow:visible;--aspect-ratio:4/5;--image-fill-type:cover;--gap:0px;width:100%;margin:0}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__content{display:flex;flex-direction:row;align-items:flex-start;gap:16px;--aspect-ratio:4/5}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame{flex:1 1 0;min-width:0;aspect-ratio:4/5}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame .wp,
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame .wi,
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame .lf-in,
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame .tf-in{height:100%}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__list-wrapper{height:100%;overflow:hidden;flex:none}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__list{height:100%;aspect-ratio:auto}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__list::before{display:none}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__item{height:100%;cursor:default}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__media{height:100%;background:none}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__image{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__indicator,
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail-arrows{display:none}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnails{order:-1;flex:0 0 88px;width:88px;padding:0;align-self:flex-start}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail-list{position:static;display:flex;flex-direction:column;gap:12px;width:100%;height:auto;overflow:visible}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail{width:88px;height:110px;aspect-ratio:auto;border-radius:8px;overflow:hidden;opacity:.6;outline-offset:2px;background:none;transition:opacity .3s,box-shadow .3s}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail.is-select,
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail:hover{opacity:1}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail::after{display:none}
.ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail-image{width:100%;height:100%;object-fit:cover}
.t-ps .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail{border-radius:16px 0 16px 0}
.t-lbo .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail{border-radius:0}
.t-tar .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail{border-radius:8px}
.ca-pdp .ca-gal-theme{position:static}
@media (max-width:1023px){.ca-pdp .pdp .ca-media-group{position:static}}
@media (max-width:767px){
  .ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__content{flex-direction:column;align-items:stretch}
  .ca-pdp .pdp .ca-media-group .product-detail__media-gallery .ca-frame{flex:none;width:100%}
  .ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnails{order:2;flex:none;width:100%}
  .ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail-list{flex-direction:row;overflow-x:auto}
  .ca-pdp .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnail{flex:0 0 64px;width:64px;height:80px}
}
/* section setting "Single large image (no thumbnails)" (gallery_solo): the stock thumbnail carousel stays in the DOM, hidden; the main viewer takes the full column, as on the old .gal.solo */
.ca-pdp.ca-solo .pdp .ca-media-group .product-detail__media-gallery .media-gallery__thumbnails{display:none}

/* variant picker: $variant-picker wraps the stock product/_detail-variant-picker */
.ca-pdp .vpick .product-detail__variant-picker-form{display:block}
.ca-pdp .vpick .variant-picker__group{border:0;margin:0 0 20px;padding:0;min-width:0}
.ca-pdp .vpick .variant-picker__group-label,.ca-pdp .vpick .variant-picker__group-head{display:block;margin:0 0 12px;padding:0;font:800 calc(12px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ca-vp-label,inherit)}
.ca-pdp .vpick .variant-picker__options{display:flex;flex-wrap:wrap;gap:8px}
.ca-pdp .vpick .variant-picker__option{position:relative;cursor:pointer}
.ca-pdp .vpick .variant-picker__input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ca-pdp .vpick .variant-picker__button{display:inline-block;font:700 calc(13px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);padding:12px 16px;border:1.5px solid currentColor;border-radius:0;opacity:.75;transition:background .2s,color .2s,opacity .2s}
.ca-pdp .vpick .variant-picker__input:checked+.variant-picker__button{opacity:1;background:rgba(127,127,127,.25)}
.ca-pdp .vpick .variant-picker__option.disabled .variant-picker__button{opacity:.4;text-decoration:line-through}
.ca-pdp .vpick .variant-picker__input:focus-visible+.variant-picker__button{outline:2px solid var(--butter);outline-offset:2px}
.t-ps .vpick .variant-picker__button{border-radius:0 12px 0 0;border-color:rgba(57,96,52,.35);color:#2a3527;opacity:1}
.t-ps .vpick .variant-picker__input:checked+.variant-picker__button{background:#396034;border-color:#396034;color:#fdfaf5}
.t-lbo .vpick .variant-picker__input:checked+.variant-picker__button{background:#f2db33;border-color:#f2db33;color:#161313}
.t-tar .vpick .variant-picker__input:checked+.variant-picker__button{background:#dea414;border-color:#dea414;color:#151515}

/* buy area: $buy-row wraps the stock product/_detail-buy-button-group (bundle: stepper + add to cart; payment button) */
.ca-pdp .buy-area{display:flex;flex-direction:column}
.ca-pdp .buy-area .block-product-buy-button-group{display:contents}
.ca-pdp .buy-area .buyrow{order:1;display:flex;flex-direction:row;flex-wrap:nowrap;gap:16px;align-items:stretch;margin-bottom:28px;width:100%}
.ca-pdp .buy-area .buy-note{order:2}
.ca-pdp .buy-area .payment-button-wrapper{order:3;width:100%;padding:0}
.ca-pdp .buy[data-express="hide"] .payment-button-wrapper,.ca-pdp .buy-area .payment-button-wrapper[hidden]{display:none}
.ca-pdp .buy-area .payment-button-wrapper .shopline-payment-button-wrapper:empty{display:none}
/* the -12px pull-up sits on the outer wrapper: the stock form around the buttons is overflow:hidden (group.css), so a negative margin inside it clipped the top of the PayPal frame (40px showed as 33px) */
.ca-pdp .buy-area .payment-button-wrapper:has(.shopline-payment-button-wrapper:not(:empty)){margin-top:-12px}
.ca-pdp .buy-area .payment-button-wrapper .shopline-payment-button-wrapper:not(:empty){margin:0 0 28px}
.ca-pdp .buy-area .payment-button-wrapper .pay-button-common-item{min-height:56px}
.t-ps .buy-area .payment-button-wrapper .pay-button-common-item{border-radius:999px !important;overflow:hidden}
/* quantity stepper: stock <theme-input-number class="quantity-selector__input qty"> */
.ca-pdp .buyrow theme-input-number.qty{display:flex;align-items:center;width:auto;height:56px;background:none}
.ca-pdp .buyrow theme-input-number.qty::before,.ca-pdp .buyrow theme-input-number.qty::after{display:none}
.ca-pdp .buyrow theme-input-number.qty button{position:static;display:grid;place-items:center;width:44px;height:100%;padding:0;margin:0;background:none;border:0;color:inherit;opacity:1;transform:none}
.ca-pdp .buyrow theme-input-number.qty button:disabled{opacity:1;cursor:default}
.ca-pdp .buyrow theme-input-number.qty button .icon{width:12px;height:12px}
.ca-pdp .buyrow theme-input-number.qty input{width:40px;height:100%;padding:0;margin:0;text-align:center;background:none;border:0;color:inherit;font:700 calc(16px * var(--fs-b))/1 var(--f-body);-moz-appearance:textfield;appearance:textfield}
.ca-pdp .buyrow theme-input-number.qty input::-webkit-outer-spin-button,.ca-pdp .buyrow theme-input-number.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* stock product-info blocks the merchant can add next to ours (heading, price, quantity, inventory, buy buttons, share,
   additional info, sell info, popups/size chart, custom Sline, SKU, breadcrumb, text, icon, image, logo, rich text):
   our vertical rhythm, and the stock buttons in our button face (butter fill / outline, uppercase body type) */
.ca-pdp .buy>:is(.product-detail__title,.product-detail__price,.product-detail__quantity-selector,.product-inventory,theme-sticky-position,.product-detail__additional,.product-detail__sell-info,.product-detail__popup,.block-popup,.block-popup-with-text,.custom-sline-block,.product-detail__dividing-line,.product-variant-sku,.block-text,.block-icon,.block-image,.block-logo,.block-heading,.rte,[class*="layout:block:share"],[class*="breadcrumb"]){margin-top:16px}
/* not inside .shopline-payment-button-wrapper: the payment SDK sizes PayPal from a hidden stock .button--secondary it measures there (getPayButtonStyle); our 48px face made PayPal 48px instead of the stock 40px */
.ca-pdp .buy .button:not(.btn,.shopline-payment-button-wrapper *):is(.button--fill,.button--secondary){display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:0 24px;border:1px solid var(--butter);border-radius:0;background:var(--butter);color:#151515;font:800 calc(14px * var(--fs-b))/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;box-shadow:none;cursor:pointer}
.ca-pdp .buy .button.button--secondary:not(.btn,.shopline-payment-button-wrapper *){background:transparent;color:inherit;border-color:currentColor}
.ca-pdp .buy .button:not(.btn,.shopline-payment-button-wrapper *)::after{display:none}
.ca-pdp .buy .button:not(.btn,.shopline-payment-button-wrapper *):disabled{opacity:.5;cursor:not-allowed}
/* add to cart: stock <theme-product-form class="block-product-buy-button-wrapper"> + button.block-product-buy-button */
.ca-pdp .buyrow .block-product-buy-button-wrapper{flex:1;display:flex;min-width:0;padding:0}
.ca-pdp .buyrow .block-product-buy-button-wrapper form{display:flex;flex:1;min-width:0}
.ca-pdp .buyrow .block-product-buy-button.btn{flex:1;width:100%;height:56px;padding:0 24px;border-radius:0;box-shadow:none}
/* apparel line: pill, as the old .t-ps .btn (pages.css) */
.t-ps .buyrow .block-product-buy-button.btn{padding:0 28px;border-radius:999px}
.ca-pdp .buyrow .block-product-buy-button.btn::after{display:none}
/* tarot line: our inner 1px rule (pages.css .t-tar .btn::after), drawn on the stock button in place of the stock border pseudo */
/* lbo line: our yellow face (pages.css .t-lbo .btn::after), drawn on the stock button in place of the stock border pseudo */
.t-lbo .buyrow .block-product-buy-button.btn::after{display:block;content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;border:0;border-radius:0;box-shadow:none;background:var(--face);animation:none;pointer-events:none}
.t-tar .buyrow .block-product-buy-button.btn::after{display:block;content:"";position:absolute;inset:5px;width:auto;height:auto;z-index:auto;border:1px solid rgba(21,21,21,.35);border-radius:0;box-shadow:none;background:none;animation:none;pointer-events:none}
.ca-pdp .buyrow .block-product-buy-button.loading{color:transparent}
.ca-pdp .buyrow .block-product-buy-button .loading--rotator{color:#151515}
@media (max-width:767px){
  .ca-pdp .buy-area .buyrow{flex-wrap:wrap}
  /* as the old .buyrow .btn (a plain flex item): its no-wrap label sets the minimum width, so a long label wraps the button below the stepper */
  .ca-pdp .buyrow .block-product-buy-button-wrapper,.ca-pdp .buyrow .block-product-buy-button-wrapper form{min-width:auto}
  .ca-pdp .buyrow .block-product-buy-button.btn{padding:0 16px;font-size:calc(12px * var(--fs-b));letter-spacing:.1em;white-space:nowrap !important}
  /* old .t-ps .buyrow .btn{padding:0 28px} outranked the mobile 16px: with it the label no longer fits beside the stepper and the pill wraps below, full width */
  .t-ps .buyrow .block-product-buy-button.btn{padding:0 28px}
}