/* "Complete the look" (inc/pdp.php): the merchant's pieces as a set with a live total and one button. Linked right before
   the section rather than in the head, so this part under the purchase box adds nothing to the product page's critical
   CSS, and the section is still never drawn unstyled. Wider screens: the pieces as cards in a row with "+" between them;
   phones: one tidy row per piece (photo, then name, price and option pickers). Kits restyle it in their own sheets
   (Atölye: a compact list beside the photos). */
.sr-pdp-set{clear:both;margin:clamp(48px,6vw,88px) 0 0;padding:clamp(20px,3vw,40px);border-radius:var(--sr-radius-lg,var(--sr-radius,16px));background:var(--sr-surface)}
.sr-pdp-set__head p{margin:8px 0 0;color:var(--sr-muted)}
.sr-pdp-set__body{display:grid;gap:20px;margin-top:24px}

/* ---------- Pieces ---------- */
.sr-pdp-set__items{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:28px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.sr-pdp-set__items::-webkit-scrollbar{display:none}
.sr-pdp-set__item{position:relative;display:grid;align-content:start;gap:12px;min-width:0;container-type:inline-size;transition:opacity .2s}
.sr-pdp-set__item.is-off{opacity:.5}
.sr-pdp-set__item[data-variable].is-off:not(.is-chosen){opacity:1}
/* The "+" sits halfway down the square photo (half the card's width) */
.sr-pdp-set__plus{position:absolute;left:-23px;top:calc(50cqw - 9px);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sr-canvas);color:var(--sr-ink);box-shadow:0 1px 3px rgb(0 0 0 / .12)}
.sr-pdp-set__media{position:relative;display:block;aspect-ratio:1;border-radius:var(--sr-radius,12px);background:var(--sr-canvas);overflow:hidden}
.sr-pdp-set__media img,.sr-pdp-set__media .sr-pc__placeholder{display:block;width:100%;height:100%;object-fit:cover}
/* Name, price and option boxes over the card's full width; the include box sits on the photo's corner */
.sr-pdp-set__info{display:grid;align-content:start;gap:4px;min-width:0}
.sr-pdp-set__pick{position:absolute;left:8px;top:8px;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--sr-canvas);box-shadow:0 1px 3px rgb(0 0 0 / .14)}
.sr-pdp-set__pick input{width:18px;height:18px;margin:0;accent-color:var(--sr-ink);cursor:pointer}
.sr-pdp-set__label{overflow:hidden;color:var(--sr-muted);font-size:12px;line-height:18px;white-space:nowrap;text-overflow:ellipsis}
.sr-pdp-set__name{display:-webkit-box;overflow:hidden;color:var(--sr-ink);font-size:14px;font-weight:600;line-height:1.35;text-decoration:none;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.sr-pdp-set__price{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.sr-pdp-set__price del{color:var(--sr-muted);font-weight:400}
.sr-pdp-set__price ins{text-decoration:none}
.sr-pdp-set__choose{justify-self:start;margin:0;padding:0;border:0;background:none;color:var(--sr-ink);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sr-pdp-set__choose[hidden]{display:none}
.sr-pdp-set__options{justify-self:start;color:var(--sr-ink);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* ---------- A piece's options (storeruler_set_option_sheet; also the "Complete the look" home section) ----------
   On the piece: one pill button, "Choose Size" until complete, then the choice ("M · Black"). It opens a panel:
   rising from the bottom on phones, centred on wider screens. */
.sr-set-pill{display:inline-flex;align-items:center;justify-self:start;gap:6px;max-width:100%;height:34px;margin:8px 0 0;padding:0 12px 0 14px;border:1px solid var(--sr-line);border-radius:999px;background:var(--sr-canvas);box-shadow:none;color:var(--sr-ink);font:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .15s}
.sr-set-pill span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sr-set-pill svg{flex:none;color:var(--sr-muted)}
.sr-set-pill:hover,.sr-set-pill.is-set{border-color:var(--sr-ink)}
.sr-set-pill:focus-visible{outline:2px solid var(--sr-ink);outline-offset:2px}
.sr-set-sheet{width:min(440px,calc(100% - 32px));max-width:none;max-height:min(680px,calc(100% - 48px));margin:auto;padding:0;overflow:auto;border:0;border-radius:var(--sr-radius-lg,16px);background:var(--sr-canvas);box-shadow:0 24px 64px rgb(0 0 0 / .22);color:var(--sr-ink);overscroll-behavior:contain}
.sr-set-sheet::backdrop{background:rgb(0 0 0 / .45)}
.sr-set-sheet[open]{animation:sr-set-in .2s ease-out}
html:has(.sr-set-sheet[open]){overflow:hidden;scrollbar-gutter:stable}
.sr-set-sheet__panel{display:grid;gap:20px;padding:20px}
.sr-set-sheet__grip{display:none}
.sr-set-sheet__head{display:grid;grid-template-columns:56px minmax(0,1fr) 36px;align-items:center;gap:14px}
.sr-set-sheet__media{display:block;width:56px;height:70px;overflow:hidden;border-radius:var(--sr-radius-sm,8px);background:var(--sr-surface)}
.sr-set-sheet__media img,.sr-set-sheet__media .sr-pc__placeholder{display:block;width:100%;height:100%;object-fit:cover}
.sr-set-sheet__name{margin:0;font-size:15px;font-weight:600;line-height:1.3}
.sr-set-sheet__price{margin:4px 0 0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.sr-set-sheet__price del{color:var(--sr-muted);font-weight:400}
.sr-set-sheet__price ins{text-decoration:none}
.sr-set-sheet__close{align-self:start;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:var(--sr-surface);box-shadow:none;color:var(--sr-ink);cursor:pointer}
.sr-set-sheet__close:focus-visible{outline:2px solid var(--sr-ink);outline-offset:2px}
.sr-set-sheet__opts{display:grid;gap:18px}
.sr-set-sheet__hint{margin:-8px 0 0;color:#b42318;font-size:13px}
.sr-set-sheet__hint[hidden]{display:none}
.sr-set-sheet__done{width:100%;min-height:52px;margin:0}
@keyframes sr-set-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes sr-set-up{from{transform:translateY(100%)}}
@media (max-width:767px){
  .sr-set-sheet{width:100%;max-height:88vh;margin:auto 0 0;border-radius:var(--sr-radius-lg,16px) var(--sr-radius-lg,16px) 0 0}
  .sr-set-sheet[open]{animation:sr-set-up .25s cubic-bezier(.2,.8,.2,1)}
  .sr-set-sheet__panel{gap:18px;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .sr-set-sheet__grip{display:block;justify-self:center;width:40px;height:4px;border-radius:2px;background:var(--sr-line)}
}
@media (prefers-reduced-motion:reduce){.sr-set-sheet[open]{animation:none}}

/* ---------- Option boxes in the panel (storeruler_set_option_picker) ----------
   One row of boxes per option, the chosen value named after the option ("Size M"); colours as round swatches.
   Sold out: struck through; a box that clashes with the other choice: dashed (tapping it clears that choice). */
.sr-set-opt{display:grid;gap:10px;min-width:0}
.sr-set-opt select[hidden]{display:none!important}
.sr-set-opt__name{color:var(--sr-muted);font-size:13px;line-height:18px}
.sr-set-opt__name b{margin-left:6px;color:var(--sr-ink);font-weight:600}
.sr-set-opt__chips{display:flex;flex-wrap:wrap;gap:8px}
.sr-set-opt__chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:44px;margin:0;padding:0 14px;border:1px solid var(--sr-line);border-radius:var(--sr-radius-sm,8px);background:var(--sr-canvas);box-shadow:none;color:var(--sr-ink);font:inherit;font-size:14px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}
.sr-set-opt__chip:not(:disabled):hover{border-color:var(--sr-ink)}
.sr-set-opt__chip[aria-pressed="true"]{border-color:var(--sr-ink);background:var(--sr-ink);color:var(--sr-canvas)}
/* Sold out or not with the chosen size: the product page's look (pdp.css), a paler box with a thin diagonal line. */
.sr-set-opt__chip:is(.is-clash,:disabled){border-color:color-mix(in srgb,var(--sr-ink) 12%,var(--sr-canvas,#fff));background:var(--sr-canvas,#fff);color:color-mix(in srgb,var(--sr-ink) 38%,var(--sr-canvas,#fff));text-decoration:none}
.sr-set-opt:not(.is-color) .sr-set-opt__chip:is(.is-clash,:disabled)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top right,transparent calc(50% - .75px),color-mix(in srgb,var(--sr-ink) 42%,transparent) calc(50% - .75px),color-mix(in srgb,var(--sr-ink) 42%,transparent) calc(50% + .75px),transparent calc(50% + .75px));pointer-events:none}
.sr-set-opt__chip:disabled{cursor:not-allowed}
.sr-set-opt__chip:focus-visible{outline:2px solid var(--sr-ink);outline-offset:2px}
.sr-set-opt.is-color .sr-set-opt__chips{gap:12px;padding:3px}
.sr-set-opt.is-color .sr-set-opt__chip{width:36px;min-width:0;height:36px;padding:0;border-color:color-mix(in srgb,var(--sr-ink) 16%,transparent);border-radius:50%;background:var(--sr-swatch)}
.sr-set-opt.is-color .sr-set-opt__chip[aria-pressed="true"]{border-color:transparent;background:var(--sr-swatch);box-shadow:0 0 0 2px var(--sr-canvas),0 0 0 3.5px var(--sr-ink)}
.sr-set-opt.is-color .sr-set-opt__chip.is-clash{opacity:.55}
.sr-set-opt.is-color .sr-set-opt__chip:disabled{opacity:.4}
.sr-set-opt.is-color .sr-set-opt__chip:is(:disabled,.is-clash)::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:1.5px;background:var(--sr-ink);transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.sr-set-opt__chip{transition:none}}

/* ---------- Total ---------- */
.sr-pdp-set__total{display:grid;align-content:center;gap:4px;padding:20px;border-radius:var(--sr-radius,12px);background:var(--sr-canvas)}
.sr-pdp-set__sum{color:var(--sr-ink);font:650 30px/1.1 var(--sr-heading-font);letter-spacing:-.02em}
.sr-pdp-set__sum del{margin-right:6px;color:var(--sr-muted);font-size:.6em;font-weight:400;letter-spacing:0}
.sr-pdp-set__note{color:var(--sr-muted);font-size:13px}
.sr-pdp-set__deal{color:var(--sr-muted);font-size:13px}
.sr-pdp-set__deal.is-on{color:var(--sr-positive,var(--sr-ink));font-weight:600}
.sr-pdp-set__add{margin-top:12px;min-height:52px;width:100%}
.sr-pdp-set__hint{margin:0;color:var(--sr-muted);font-size:13px}
.sr-pdp-set__hint[hidden]{display:none}
.sr-pdp-set__status:empty{display:none}
.sr-pdp-set__status.is-error{color:#b42318}
@media (min-width:1001px){.sr-pdp-set__body{grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:40px}}

/* ---------- Phones: one row per piece ---------- */
@media (max-width:767px){
  .sr-pdp-set{padding:20px 16px}
  .sr-pdp-set__body{margin-top:16px}
  .sr-pdp-set__items{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);gap:0;overflow:visible}
  .sr-pdp-set__item{grid-template-columns:88px minmax(0,1fr);gap:0 14px;padding:14px 0;border-top:1px solid var(--sr-line);container-type:normal}
  .sr-pdp-set__item:first-child{padding-top:0;border-top:0}
  .sr-pdp-set__plus{display:none}
  .sr-pdp-set__media{aspect-ratio:4/5;border-radius:var(--sr-radius-sm,8px)}
  .sr-pdp-set__pick{left:6px;top:20px}
  .sr-pdp-set__item:first-child .sr-pdp-set__pick{top:6px}
  .sr-pdp-set__total{padding:16px}
  .sr-pdp-set__sum{font-size:26px}
}

/* ---------- Atölye (moved from kits/atolye/kit.css so the product page's critical CSS stays small) ----------
   Complete the look: a compact list in the information column, nothing faded, round checkboxes */
.sr-kit-atolye.single-product .sr-pdp-set{margin:32px 0 0;padding:0;border-radius:0;background:none}
.sr-kit-atolye.single-product .sr-pdp-set__head{display:block}
.sr-kit-atolye.single-product .sr-pdp-set__head .sr-pdp-h2{margin:0;font:600 13px/1.2 var(--sr-body-font);letter-spacing:.06em;text-transform:uppercase}
.sr-kit-atolye.single-product .sr-pdp-set__head p{margin:6px 0 0;color:var(--sr-muted);font-size:13px;line-height:1.4}
.sr-kit-atolye.single-product .sr-pdp-set__body{display:block;margin-top:12px}
.sr-kit-atolye.single-product .sr-pdp-set__items{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:0;overflow:visible}
.sr-kit-atolye.single-product .sr-pdp-set__item{grid-template-columns:64px minmax(0,1fr);align-items:center;gap:0 14px;padding:12px 0;border-top:1px solid var(--ak-hair);opacity:1}
.sr-kit-atolye.single-product .sr-pdp-set__plus{display:none}
.sr-kit-atolye.single-product .sr-pdp-set__media{width:64px;height:80px;aspect-ratio:auto;border-radius:8px;background:var(--sr-field2)}
.sr-kit-atolye.single-product .sr-pdp-set__info{position:relative;gap:2px;align-content:center;padding-left:32px}
.sr-kit-atolye.single-product .sr-pdp-set__pick{left:0;top:50%;display:grid;place-items:center;width:24px;height:24px;border-radius:0;background:none;box-shadow:none;transform:translateY(-50%)}
.sr-kit-atolye.single-product .sr-pdp-set__pick input{appearance:none;-webkit-appearance:none;display:block;width:24px;height:24px;margin:0;border-radius:50%;background:var(--sr-canvas) center/14px no-repeat;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sr-ink) 28%,transparent);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.sr-kit-atolye.single-product .sr-pdp-set__pick input:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--sr-ink)}
.sr-kit-atolye.single-product .sr-pdp-set__pick input:checked{background-color:var(--sr-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");box-shadow:none}
.sr-kit-atolye.single-product .sr-pdp-set__pick input:disabled{cursor:not-allowed;background-color:color-mix(in srgb,var(--sr-ink) 4%,var(--sr-canvas))}
.sr-kit-atolye.single-product .sr-pdp-set__pick input:focus-visible{outline:2px solid var(--sr-ink);outline-offset:2px}
.sr-kit-atolye.single-product .sr-pdp-set__label{color:var(--sr-muted);font-size:12px;line-height:16px}
.sr-kit-atolye.single-product .sr-pdp-set__name{color:var(--sr-ink);font:600 14px/1.3 var(--sr-body-font)}
.sr-kit-atolye.single-product .sr-pdp-set__price{font-size:14px;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums}
.sr-kit-atolye.single-product .sr-pdp-set__price del{font-size:12px}
.sr-kit-atolye.single-product :is(.sr-pdp-set__choose,.sr-pdp-set__options){justify-self:start;color:var(--sr-ink);font-size:12px;line-height:16px;text-underline-offset:3px}
.sr-kit-atolye.single-product .sr-pdp-set__total{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 16px;margin-top:0;padding:14px 0 0;border-top:1px solid var(--ak-hair);border-radius:0;background:none}
.sr-kit-atolye.single-product .sr-pdp-set__total>*{grid-column:1}
.sr-kit-atolye.single-product .sr-pdp-set__count:empty{display:none}
.sr-kit-atolye.single-product .sr-pdp-set__count{color:var(--sr-muted);font-size:12px}
.sr-kit-atolye.single-product .sr-pdp-set__sum{font:600 16px/1.3 var(--sr-body-font);letter-spacing:0}
.sr-kit-atolye.single-product .sr-pdp-set__note{color:var(--sr-muted);font-size:12px;line-height:16px}
.sr-kit-atolye.single-product .sr-pdp-set__total .sr-pdp-set__add{grid-column:2;grid-row:1/span 3;width:auto;min-height:44px;height:44px;margin:0;padding:0 22px!important;background:transparent!important;color:var(--sr-ink)!important;box-shadow:inset 0 0 0 1px var(--sr-ink);font:600 14px/1 var(--sr-body-font)!important}
.sr-kit-atolye.single-product .sr-pdp-set__total .sr-pdp-set__add:not(:disabled):hover{background:var(--sr-ink)!important;color:var(--sr-canvas)!important}
.sr-kit-atolye.single-product .sr-pdp-set__status{grid-column:1/-1;margin:8px 0 0;font-size:13px}
/* A variable piece's options in the set: the "Choose Size" button and the panel's boxes as pills in the kit's hairline
   (the button and panel themselves: assets/pdp-set.css) */
.sr-kit-atolye.single-product .sr-set-pill{margin-top:6px;border-color:var(--ak-hair);font:500 12px/1 var(--sr-body-font)}
.sr-kit-atolye.single-product .sr-set-pill:is(:hover,.is-set){border-color:var(--sr-ink)}
.sr-kit-atolye.single-product .sr-set-opt__chip{border-color:var(--ak-hair);border-radius:999px}
.sr-kit-atolye.single-product .sr-set-opt__chip[aria-pressed="true"]{border-color:var(--sr-ink)}
.sr-kit-atolye.single-product .sr-set-opt.is-color .sr-set-opt__chip{border-color:color-mix(in srgb,var(--sr-ink) 16%,transparent)}
.sr-kit-atolye.single-product .sr-pdp-set__sum del{font-size:13px}
.sr-kit-atolye.single-product .sr-pdp-set__deal{font-size:12px;line-height:16px}
.sr-kit-atolye.single-product .sr-pdp-set__hint{grid-column:1/-1;margin:8px 0 0;font-size:12px;line-height:16px}
.sr-kit-atolye.single-product .sr-pdp-set__status.is-error{color:#b42318}