/* Camisetas Personalizadas — shared tokens, tenant editor (#apparel-editor) and guided storefront (.ap-store). */
.ap{--ap-bg:var(--ui-surface,#fff);--ap-soft:var(--ui-surface-subtle,#f4f6f9);--ap-line:var(--ui-border,#dce2e9);--ap-text:var(--ui-text-primary,#1f2a3d);--ap-muted:var(--ui-text-secondary,#64748b);--ap-accent:var(--ui-action-blue,#1d4ed8);--ap-link:var(--ap-accent);--ap-accent-soft:color-mix(in srgb,var(--ap-accent) 9%,var(--ap-bg));--ap-ok:#15803d;--ap-warn:#b45309;--ap-danger:#b42318;color:var(--ap-text);font-size:14px;line-height:1.5}
.dark .ap{--ap-bg:var(--ui-surface,var(--dark-bg,#172033));--ap-soft:var(--ui-surface-subtle,#111a2b);--ap-line:var(--ui-border,#303b50);--ap-text:var(--ui-text-primary,#e4eaf5);--ap-muted:var(--ui-text-secondary,#9ba9bf);--ap-link:#8ab4ff;--ap-accent-soft:color-mix(in srgb,var(--ap-accent) 26%,var(--ap-bg));--ap-ok:#4ade80;--ap-warn:#fbbf24;--ap-danger:#f87171}
.ap *,.ap-customer-preview *{box-sizing:border-box}
.ap [hidden]{display:none!important}
.ap h3{font-size:20px;font-weight:650;margin:0 0 6px}
.ap p{margin:6px 0 14px}
.ap small,.ap .ap-muted{color:var(--ap-muted)}
.ap button{cursor:pointer;font:inherit}
.ap button:disabled{opacity:.5;cursor:not-allowed}
.ap button:focus-visible,.ap select:focus-visible,.ap summary:focus-visible{outline:2px solid var(--ap-accent);outline-offset:2px}
.ap-error{color:var(--ap-danger);min-height:0;font-size:13px}
.ap-error:empty{display:none}

/* The garment stage: a soft studio backdrop for illustrations, pure white behind real photos. */
.ap-stage{position:relative;aspect-ratio:400/360;width:100%;background:radial-gradient(ellipse at 50% 42%,#fff 0%,#f4f5f8 62%,#eceef3 100%);border-radius:18px;overflow:hidden;isolation:isolate}
.ap-stage.ap-has-photo{background:#fff}
.ap-stage>svg,.ap-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.ap-note{font-size:12px;text-align:center;color:var(--ap-muted);margin:10px 0 0}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ap-line);border-radius:10px;background:var(--ap-bg);color:var(--ap-text);padding:9px 14px;font-size:13px;font-weight:550;transition:border-color .15s,background .15s}
.ap-btn:hover:not(:disabled){border-color:var(--ap-link);color:var(--ap-link)}
.ap-btn svg{width:16px;height:16px;flex:none}
.ap-btn-sm{padding:7px 11px;font-size:12px;border-radius:9px}

/* ── Tenant editor ─────────────────────────────────────────────────────────── */
#apparel-editor{display:flex;flex-direction:column;gap:16px}
.ape-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.ape-head h3{font-size:19px;letter-spacing:-.2px}
.ape-head p{margin:0;max-width:56ch;font-size:13px}
.ape-status{display:flex;flex-wrap:wrap;gap:6px}
.ape-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:999px;font-size:11.5px;font-weight:550;line-height:1.4;white-space:nowrap}
.ape-chip svg{width:14px;height:14px;flex:none}
.ape-chip.is-ok{background:color-mix(in srgb,var(--ap-ok) 11%,var(--ap-bg));color:var(--ap-ok)}
.ape-chip.is-warn{background:color-mix(in srgb,var(--ap-warn) 13%,var(--ap-bg));color:var(--ap-warn)}
.ape-card{border:1px solid var(--ap-line);border-radius:16px;background:var(--ap-bg);padding:20px}
.ape-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ape-step{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ap-accent-soft);color:var(--ap-link);font-size:12px;font-weight:700;margin-top:1px}
.ape-step-sim{font-size:10px;letter-spacing:-.3px}
.ape-card-head h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.1px;color:var(--ap-text)}
.ape-card-head h4 em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--ap-muted);background:var(--ap-soft);border-radius:999px;padding:2px 8px}
.ape-card-head p{margin:2px 0 0;font-size:12.5px;color:var(--ap-muted);max-width:68ch}
.ape-hint{font-size:12px;color:var(--ap-muted);margin:0}
.ap p.ape-hint{margin:10px 0 0}
.ape-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px}
.ape-link{border:0;background:transparent;padding:4px 0;color:var(--ap-link);font-size:12.5px;font-weight:550;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.ape-link:hover{text-decoration-color:currentColor}
.ape-link.ape-danger{color:var(--ap-danger)}
.ape-confirm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--ap-warn)}

/* Fields */
.ape-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ape-row>.ape-field{flex:1 1 150px;min-width:0}
.ape-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:550;color:var(--ap-muted)}
.ape-field>span:first-child:not(.ape-affix){line-height:1.3}
.ap .ape-field input:not([type=checkbox]):not([type=color]),.ap .ape-field select{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid var(--ap-line);border-radius:9px;background:var(--ap-bg);color:var(--ap-text);font:inherit;font-size:13.5px;font-weight:400;transition:border-color .15s}
.ap .ape-field input:focus,.ap .ape-field select:focus{outline:0;border-color:var(--ui-field-focus,var(--ap-accent))}
.ape-affix{display:flex;align-items:stretch;border:1px solid var(--ap-line);border-radius:9px;background:var(--ap-bg);overflow:hidden;transition:border-color .15s}
.ape-affix:focus-within{border-color:var(--ui-field-focus,var(--ap-accent))}
.ape-affix>i{display:flex;align-items:center;padding:0 9px;font-style:normal;font-size:12px;font-weight:550;color:var(--ap-muted);background:var(--ap-soft);white-space:nowrap}
.ap .ape-affix input:not([type=checkbox]):not([type=color]){border:0!important;border-radius:0;height:36px;appearance:textfield;-moz-appearance:textfield}
.ape-affix input::-webkit-outer-spin-button,.ape-affix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ape-row-price{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:18px}
.ape-row.ape-row-price>.ape-field-lg{flex:none;width:min(100%,240px)}
.ape-field-lg>span:first-child{font-size:12.5px}
.ap .ape-field-lg .ape-affix input:not([type=checkbox]):not([type=color]){height:44px;font-size:18px;font-weight:600}
.ape-field-lg .ape-affix>i{font-size:14px;padding:0 12px}
.ape-field-inline{flex-direction:row;align-items:center;gap:8px}
.ap .ape-field-inline select{width:auto;height:34px}
.ape-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ap-text);cursor:pointer}
.ape-check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--ap-accent);flex:none}
.ape-check small{display:block;font-size:11.5px;margin-top:1px}
.ape-icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:0;border-radius:9px;background:transparent;color:var(--ap-muted);padding:0}
.ape-icon-btn:hover{background:color-mix(in srgb,var(--ap-danger) 10%,var(--ap-bg));color:var(--ap-danger)}
.ape-icon-btn svg{width:16px;height:16px}

/* One header row instead of a label on every line. */
.ape-table{display:flex;flex-direction:column;gap:6px}
.ape-tr{display:grid;gap:8px;align-items:center}
.ape-th{font-size:11px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--ap-muted);padding:0 2px}
.ape-sizes-table .ape-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;max-width:460px}
.ape-options-table .ape-tr{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 34px}
.ape-ranges-table .ape-tr{grid-template-columns:repeat(3,minmax(0,1fr)) 34px;max-width:560px}

/* Model picker */
.ap-models{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ape-model{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--ap-line);border-radius:12px;background:var(--ap-bg);color:var(--ap-muted);padding:6px 4px 8px;font-size:11px;line-height:1.25;text-align:center;transition:border-color .15s,box-shadow .15s}
.ape-model svg{width:100%;height:auto;border-radius:8px;background:radial-gradient(ellipse at 50% 42%,#fff,#eef0f4)}
.ape-model:hover{border-color:color-mix(in srgb,var(--ap-accent) 50%,var(--ap-line))}
.ape-model.ap-active{border-color:var(--ap-accent);box-shadow:0 0 0 1px var(--ap-accent);color:var(--ap-text);font-weight:600}

/* Colours and photos */
.ap-editor-color-list{display:flex;flex-wrap:wrap;gap:8px}
.ape-color-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--ap-line);border-radius:999px;background:var(--ap-bg);color:var(--ap-text);padding:6px 13px 6px 7px;font-size:12.5px;overflow-wrap:anywhere}
.ape-color-chip>span{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000002e;flex:none}
.ape-color-chip[aria-pressed=true]{border-color:var(--ap-accent);box-shadow:0 0 0 1px var(--ap-accent);font-weight:600}
.ape-color-chip.ape-add{border-style:dashed;color:var(--ap-link);padding-left:10px;font-weight:550}
.ape-color-chip.ape-add svg{width:15px;height:15px}
.ape-color-detail{margin-top:14px;padding:16px;border-radius:12px;background:var(--ap-soft)}
.ape-color-detail>.ape-hint:first-child{margin:0 0 12px}
.ape-row-color>.ape-swatch{flex:0 0 auto}
#apparel-editor input[type=color]{display:block;width:52px;height:38px;padding:3px;border:1px solid var(--ap-line);border-radius:9px;background:var(--ap-bg);cursor:pointer}
.ape-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.ape-photo{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border:1px solid var(--ap-line);border-radius:12px;background:var(--ap-bg)}
.ape-photo.is-active{border-color:var(--ap-accent)}
.ape-photo-thumb{flex:none;width:84px;aspect-ratio:400/360;padding:0;border:0;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fff,#eef0f4)}
.ape-photo-thumb img,.ape-photo-thumb svg{display:block;width:100%;height:100%;object-fit:contain}
.ape-photo b{display:block;font-size:13px}
.ape-photo small{display:block;font-size:11.5px}
.ape-photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px}
.ape-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ap .ap-remove-color{display:block;margin-top:12px}

/* Areas: sticky garment on the left, collapsible locations on the right. */
.ap-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:24px;align-items:start}
.ap-preview{position:sticky;top:84px}
.ap-tabs{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.ap-tabs button[data-side]{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ap-line);border-radius:999px;background:var(--ap-bg);color:var(--ap-muted);padding:6px 14px;font-size:12.5px;font-weight:550}
.ap-tabs button[data-side] em{font-style:normal;font-size:10.5px;min-width:17px;padding:0 5px;border-radius:999px;background:var(--ap-soft);color:var(--ap-muted)}
.ap-tabs button[aria-pressed=true]{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff}
.ap-tabs button[aria-pressed=true] em{background:#ffffff33;color:#fff}
.ap-tabs input[type=color]{margin-left:auto}
.ap-zone{container-type:size;position:absolute;display:flex;align-items:center;justify-content:center;border:1.5px dashed #2563eb;border-radius:6px;background:#2563eb14;color:#1e3a8a;cursor:pointer;font-size:10.5px;font-weight:600;text-align:center;padding:2px;transition:background .15s}
.ap-zone:hover{background:#2563eb26}
.ap-zone[aria-pressed=true]{background:#2563eb33;border-style:solid;box-shadow:0 0 0 3px #ffffffb3,0 6px 18px #1e3a8a33}
.ap-zone.ap-drag{touch-action:none;cursor:move}
.ap-zone-label{max-width:100%;padding:1px 6px;border-radius:999px;background:#ffffffe6;color:#1e3a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
@container (max-width:72px){.ap-zone-label{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);max-width:none;box-shadow:0 1px 4px #00000033}}
.ap-zone .ap-resize{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#2563eb;box-shadow:0 1px 4px #0000004d;cursor:se-resize}
.ap-zone:not([aria-pressed=true]) .ap-resize{display:none}
.ape-areas{display:flex;flex-direction:column;gap:10px;min-width:0}
.ape-area{border:1px solid var(--ap-line);border-radius:13px;background:var(--ap-bg);overflow:hidden}
.ape-area.is-open{border-color:color-mix(in srgb,var(--ap-accent) 55%,var(--ap-line))}
.ape-area-head{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--ap-text);padding:12px 14px;text-align:left}
.ape-area-head>svg{width:18px;height:18px;flex:none;color:var(--ap-muted);transition:transform .2s}
.ape-area.is-open .ape-area-head>svg{transform:rotate(180deg)}
.ape-area-index{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:7px;background:var(--ap-soft);color:var(--ap-muted);font-size:11.5px;font-weight:650}
.ape-area.is-open .ape-area-index{background:var(--ap-accent);color:#fff}
.ape-area-title{display:flex;flex-direction:column;flex:1;min-width:0}
.ape-area-title b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ape-area-title small{font-size:11.5px}
.ape-area-body{display:flex;flex-direction:column;gap:14px;padding:4px 14px 14px;border-top:1px solid var(--ap-line);padding-top:14px}
.ape-area-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;padding-top:12px;border-top:1px dashed var(--ap-line)}
.ape-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ape-presets>span{font-size:12px;color:var(--ap-muted);margin-right:2px}
.ape-pill{display:inline-flex;align-items:center;gap:4px;border:1px dashed color-mix(in srgb,var(--ap-accent) 45%,var(--ap-line));border-radius:999px;background:transparent;color:var(--ap-link);padding:4px 11px;font-size:12px;font-weight:550}
.ape-pill:hover{background:var(--ap-accent-soft);border-style:solid}
.ape-pill svg{width:13px;height:13px}
.ape-add-area{padding:12px 14px;border:1px dashed var(--ap-line);border-radius:13px}

/* Price simulator */
.ape-sim{background:linear-gradient(180deg,var(--ap-accent-soft),var(--ap-bg) 70%)}
.ape-sim-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:start}
.ape-sim-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ape-sim-form>.ape-row{grid-column:1/-1}
.ape-sim-result{border:1px solid var(--ap-line);border-radius:13px;background:var(--ap-bg);padding:16px}
.ape-sim-result dl{margin:0;font-size:13px}
.ape-sim-result dl>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.ape-sim-result dt{color:var(--ap-muted)}
.ape-sim-result dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.ape-sim-result .is-discount dd{color:var(--ap-ok)}
.ape-sim-total{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--ap-line)}
.ape-sim-total span{display:flex;flex-direction:column;font-size:11.5px;color:var(--ap-muted)}
.ape-sim-total b{font-size:20px;font-weight:650;letter-spacing:-.4px;color:var(--ap-text);font-variant-numeric:tabular-nums}
.ap p.ape-sim-empty{margin:0;font-size:13px;color:var(--ap-muted)}

@media(max-width:860px){
  .ap-grid,.ape-sim-grid{grid-template-columns:1fr}
  .ap-preview{position:static}
  .ap-preview .ap-stage{max-width:420px;margin:0 auto}
  .ap-models{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:600px){
  .ape-card{padding:14px;border-radius:14px}
  .ape-photos{grid-template-columns:1fr}
  .ape-options-table .ape-th{display:none}
  .ape-options-table .ape-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;padding:10px;border:1px solid var(--ap-line);border-radius:11px}
  .ape-options-table .ape-tr>:first-child{grid-column:1/3}
  .ape-options-table .ape-tr>:nth-child(4){grid-column:1/3;grid-row:3}
  .ape-options-table .ape-tr>.ape-icon-btn{grid-column:3;grid-row:1}
  .ape-row-color{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .ape-row-color>.ape-field:last-child{grid-column:1/-1}
}

/* ── Guided storefront ─────────────────────────────────────────────────────── */
.ap.ap-store{--ap-accent:var(--brand,#2563eb);--ap-bg:#fff;--ap-text:#1d1d1f;--ap-muted:#6e6e73;--ap-line:#e5e5e9;--ap-soft:#f5f5f7;--ap-selected:color-mix(in srgb,var(--ap-accent) 6%,var(--ap-bg));font-family:inherit;color:var(--ap-text);font-size:14px}
.dark .ap.ap-store{--ap-bg:var(--dark-bg,#172033);--ap-text:var(--dark-text,#e4eaf5);--ap-muted:var(--dark-text-secondary,#9ba9bf);--ap-line:var(--dark-border,#303b50);--ap-soft:#202c40}
.ap-store [hidden],.ap-customer-preview[hidden]{display:none!important}
.ap-store>h3,.ap-store>p.ap-muted{display:none}
.ap-store{margin-top:22px;scroll-margin-top:14px;min-width:0}
.ap-stepper{display:flex;align-items:center;gap:5px;margin-bottom:30px;border-bottom:1px solid var(--ap-line);padding-bottom:20px}
.ap-stepper button{flex:1;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ap-muted);padding:4px 0;font-size:12px;min-height:36px;text-align:left}
.ap-stepper button>span{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:var(--ap-soft);color:var(--ap-muted);font-size:10px;flex:none}
.ap-stepper button>span svg{width:16px;height:16px}
.ap-stepper button[aria-current=step]{color:var(--ap-text);font-weight:650}
.ap-stepper button[aria-current=step]>span{background:var(--ap-accent);color:#fff}
.ap-section-title h3{font-size:25px;line-height:1.15;letter-spacing:-.8px;font-weight:650;margin:0 0 9px}
.ap-section-title h3:focus{outline:none}
.ap-section-title p{margin:0 0 22px;font-size:14px;color:var(--ap-muted)}

/* Preview card: always light, so garment photos and illustrations keep their colours. */
.ap.ap-customer-preview{--ap-accent:var(--brand,#2563eb);--ap-bg:#fff;--ap-text:#1d1d1f;--ap-muted:#6e6e73;--ap-line:#e5e5e9;--ap-soft:#f5f5f7;background:#fff;border-radius:24px;padding:20px;color:var(--ap-text);min-width:0;border:1px solid #eeeef0}
.ap-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.ap-preview-label{font-size:12px;color:var(--ap-muted)}
.ap-side-toggle{display:flex;gap:3px;padding:3px;background:#f0f0f3;border-radius:999px;flex:none}
.ap-side-toggle button{border:0;background:transparent;color:#6e6e73;border-radius:999px;padding:7px 16px;font-size:12px;min-height:34px;display:flex;gap:6px;align-items:center}
.ap-side-toggle button[aria-pressed=true]{background:#fff;color:#1d1d1f;box-shadow:0 1px 4px #00000014;font-weight:600}
.ap-side-dot{width:6px;height:6px;border-radius:50%;background:var(--ap-accent)}
.ap-customer-preview .ap-stage{max-width:560px;margin:0 auto;border-radius:18px;overflow:visible}
.ap-customer-preview .ap-stage>svg,.ap-customer-preview .ap-stage>img{border-radius:18px}

/* On the garment: chosen prints are filled; the location open in the list is the only dashed guide,
   because locations may overlap and stacking targets would be unreadable. */
.ap-spot{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:1.5px dashed color-mix(in srgb,var(--ap-accent) 70%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ap-accent) 5%,transparent);color:var(--ap-accent);container-type:size;transition:background .15s,border-color .15s,box-shadow .15s}
.ap-spot-label{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:10.5px;font-weight:600;line-height:1.5;white-space:nowrap;box-shadow:0 1px 5px #0000002e;pointer-events:none;z-index:1}
.ap-spot.ap-print-preview{border:1.5px solid var(--ap-accent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ap-accent) 20%,transparent) 0 6px,color-mix(in srgb,var(--ap-accent) 9%,transparent) 6px 12px);box-shadow:0 0 0 3px #ffffffa6}
.ap-spot.is-ghost{border-style:dashed;opacity:.85}
.ap-spot.is-guide{border-color:var(--ap-accent);background:color-mix(in srgb,var(--ap-accent) 9%,transparent);animation:ap-guide 2.4s ease-in-out infinite}
.ap-spot.is-dimmed{opacity:.28}
.ap-spot.is-dimmed .ap-spot-label{display:none}
@keyframes ap-guide{50%{background:color-mix(in srgb,var(--ap-accent) 17%,transparent)}}
.ap-spot-art{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}
.ap-spot-art>span{font-size:clamp(7px,13cqw,13px);font-weight:650;letter-spacing:.3px;text-transform:uppercase;color:var(--ap-accent);text-align:center;line-height:1.15}
.ap-spot.ap-print-preview .ap-spot-label{background:var(--ap-accent);color:#fff}
.ap-dark-garment .ap-spot{border-color:#ffffffd9;background:#ffffff14;color:#fff}
.ap-dark-garment .ap-spot.ap-print-preview{background:repeating-linear-gradient(135deg,#ffffff38 0 6px,#ffffff1c 6px 12px);box-shadow:0 0 0 3px #00000026}
.ap-dark-garment .ap-spot-art>span{color:#fff}
.ap-stage.is-static .ap-spot:not(.ap-print-preview){display:none}
.ap-stage.is-static .ap-spot{cursor:pointer}
.ap p.ap-preview-caption{font-size:11px;text-align:center;color:#86868b;margin:26px 0 0;min-height:17px}
.ap-customer-preview p.ap-photo-kind{font-size:10px;line-height:1.4;color:#86868b;text-align:center;margin:24px 0 -18px}

/* Locations list: one card per place, sizes open inline. */
.ap-placements{display:flex;flex-direction:column;gap:10px}
.ap-place{border:1px solid var(--ap-line);border-radius:16px;background:var(--ap-bg);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ap-place.is-open{border-color:color-mix(in srgb,var(--ap-accent) 45%,var(--ap-line))}
.ap-place.is-on{border-color:var(--ap-accent);box-shadow:inset 0 0 0 .5px var(--ap-accent)}
.ap-store .ap-placement{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;border:0;background:transparent;padding:9px 16px 9px 10px;text-align:left;color:var(--ap-text)}
.ap-place.is-on>.ap-placement{background:var(--ap-selected)}
.ap-miniature{position:relative;display:block;width:64px;aspect-ratio:400/360;flex:none;background:radial-gradient(ellipse at 50% 42%,#fff,#eef0f4);border-radius:10px;overflow:hidden}
.ap-miniature>svg,.ap-miniature>img{width:100%;height:100%;object-fit:contain;display:block}
.ap-mini-print{position:absolute;background:color-mix(in srgb,var(--ap-accent) 30%,transparent);border:1px solid var(--ap-accent);border-radius:1.5px}
.ap-placement-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ap-placement-copy b{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:14.5px;font-weight:600}
.ap-placement-copy b i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--ap-muted);background:var(--ap-soft);border-radius:999px;padding:1px 7px}
.ap-placement-copy small{font-size:12px;color:var(--ap-muted)}
.ap-placement-inline-price{display:none}
.ap-placement-price{font-size:13px;font-weight:600;white-space:nowrap;color:var(--ap-accent)}
.ap-add-mark{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ap-soft);color:var(--ap-muted);flex:none}
.ap-add-mark svg{width:17px;height:17px}
.ap-place.is-on .ap-add-mark{background:var(--ap-accent);color:#fff}
.ap-place.is-open:not(.is-on) .ap-add-mark svg{transform:rotate(180deg)}
.ap-place-body{padding:2px 12px 14px}
.ap p.ap-conflict-note{margin:4px 2px 10px;padding:8px 11px;border-radius:10px;background:var(--ap-soft);font-size:12px;line-height:1.45;color:var(--ap-muted)}
.ap-conflict-note b{color:var(--ap-text);font-weight:600}
.ap p.ap-options-title{margin:6px 2px 8px;font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ap-muted)}
.ap-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ap-store .ap-option-choice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"glyph copy" "glyph price";align-items:center;column-gap:12px;row-gap:1px;text-align:left;border:1px solid var(--ap-line);border-radius:13px;background:var(--ap-bg);padding:10px 30px 10px 10px;color:var(--ap-text);transition:border-color .15s,background .15s}
.ap-store .ap-option-choice:hover{border-color:color-mix(in srgb,var(--ap-accent) 55%,var(--ap-line))}
.ap-store .ap-option-choice[aria-pressed=true]{border-color:var(--ap-accent);background:var(--ap-selected);box-shadow:inset 0 0 0 .5px var(--ap-accent)}
.ap-size-glyph{grid-area:glyph;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;background:var(--ap-soft)}
.ap-size-glyph>span{display:block;max-width:82%;max-height:82%;border:1.5px solid var(--ap-accent);border-radius:2px;background:color-mix(in srgb,var(--ap-accent) 16%,transparent)}
.ap-option-copy{grid-area:copy;display:flex;flex-direction:column;min-width:0;align-self:end}
.ap-option-copy b{font-size:14px;font-weight:600;line-height:1.3}
.ap-option-copy small{font-size:11.5px;color:var(--ap-muted);white-space:nowrap}
.ap-option-choice strong{grid-area:price;align-self:start;font-size:12.5px;font-weight:600;color:var(--ap-accent);white-space:nowrap}
.ap-choice-check{position:absolute;right:9px;top:9px;width:18px;height:18px;border:1.5px solid var(--ap-line);border-radius:50%;display:block}
.ap-option-choice[aria-pressed=true] .ap-choice-check{border-color:var(--ap-accent);background:var(--ap-accent);color:#fff}
.ap-choice-check svg{display:block;width:100%;height:100%}
.ap-store button.ap-remove-print{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:transparent;color:var(--ap-muted);text-decoration:underline;text-underline-offset:3px;font-size:12px}
.ap-store button.ap-remove-print:hover{color:var(--ap-danger)}
.ap-print-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;border-radius:14px;background:var(--ap-soft);font-size:12.5px;color:var(--ap-muted)}
.ap-print-summary b{color:var(--ap-text);font-weight:600}
.ap-print-summary strong{font-size:14px;font-weight:650;color:var(--ap-text);white-space:nowrap}
.ap-print-summary strong small{font-size:10.5px;font-weight:400;margin-left:2px}
.ap p.ap-feedback{font-size:12px;color:var(--ap-accent);margin:12px 0 0}
.ap-feedback:empty{display:none}
.ap p.ap-art-note{font-size:11px;line-height:1.5;color:var(--ap-muted);margin:12px 0 0}

/* Colours, as large stores show them: the colour's photo when it has one, otherwise its tonality, and the
   name in the heading (it follows the mouse). data-layout comes from the JS:
   swatch = tonalities only, photo = at least one photo, label = colours the pictures cannot tell apart. */
/* contain: a long colour name never widens the column around the picker; it truncates instead. */
.ap-color-picker{margin:0 0 22px;contain:inline-size}
/* One line whatever colour it names: a heading that grows on hover would move the options under the pointer. */
.ap-color-heading{display:flex;flex-wrap:nowrap;align-items:baseline;gap:6px;min-width:0;font-size:13px;margin-bottom:10px;color:var(--ap-muted)}
.ap-color-heading>span:first-child,.ap-color-heading .ap-color-extra,.ap-color-heading .ap-color-count{flex:none;white-space:nowrap}
.ap-color-heading b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ap-text);font-weight:600}
.ap-color-heading .ap-color-extra{font-size:12px;font-weight:600;color:var(--ap-accent)}
.ap-color-heading .ap-color-extra.is-off{color:var(--ap-muted);font-weight:500}
.ap-color-heading .ap-color-extra:empty{display:none}
.ap-color-heading .ap-color-count{margin-left:auto;font-size:12px}
.ap-color-options{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.ap-store .ap-color-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;padding:0;border:0;background:transparent;color:var(--ap-text);transition:box-shadow .15s,border-color .15s,background .15s}
.ap-color-fill{position:relative;display:block;flex:none;overflow:hidden;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000001f}
.ap-color-fill>img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.ap-color-fill:has(>img){box-shadow:none}
.ap-color-picker[data-layout=swatch] .ap-color-option{width:38px;height:38px;padding:3px;border-radius:50%}
.ap-color-picker[data-layout=swatch] .ap-color-fill{width:100%;height:100%;border-radius:50%}
.ap-color-picker[data-layout=swatch] .ap-color-option:hover:not(:disabled){box-shadow:0 0 0 1px color-mix(in srgb,var(--ap-text) 30%,var(--ap-line))}
.ap-color-picker[data-layout=swatch] .ap-color-option[aria-checked=true]{box-shadow:0 0 0 2px var(--ap-accent)}
.ap-color-picker[data-layout=photo] .ap-color-option{width:56px;height:56px;padding:3px;border:1px solid var(--ap-line);border-radius:12px;background:#fff}
.ap-color-picker[data-layout=photo] .ap-color-fill{width:100%;height:100%;border-radius:8px}
.ap-color-picker[data-layout=photo] .ap-color-option:hover:not(:disabled){border-color:color-mix(in srgb,var(--ap-text) 30%,var(--ap-line))}
.ap-color-picker[data-layout=photo] .ap-color-option[aria-checked=true]{border-color:var(--ap-accent);box-shadow:0 0 0 1px var(--ap-accent)}
.ap-color-picker[data-layout=label] .ap-color-option{gap:7px;max-width:100%;height:34px;padding:0 12px;border:1px solid var(--ap-line);border-radius:999px;background:var(--ap-bg);font-size:12.5px;line-height:1.2}
.ap-color-picker[data-layout=label] .ap-color-option:has(>.ap-color-fill){padding-left:4px}
.ap-color-picker[data-layout=label] .ap-color-fill{width:24px;height:24px;border-radius:50%}
.ap-color-picker[data-layout=label] .ap-color-option:hover:not(:disabled){border-color:color-mix(in srgb,var(--ap-text) 30%,var(--ap-line))}
.ap-color-picker[data-layout=label] .ap-color-option[aria-checked=true]{border-color:var(--ap-accent);box-shadow:inset 0 0 0 1px var(--ap-accent);background:var(--ap-selected);font-weight:600}
.ap-color-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The keyboard ring is dark and further out, so it never reads as the (accent) selection ring. */
.ap-store .ap-color-option:focus-visible{outline:2px solid var(--ap-text);outline-offset:3px}
/* Unavailable colours stay in the range, struck through, and are named below the swatches and photos. */
.ap-store .ap-color-option:disabled{opacity:.45;cursor:not-allowed}
.ap-color-option:disabled .ap-color-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .75px),#6e6e73 calc(50% - .75px),#6e6e73 calc(50% + .75px),transparent calc(50% + .75px))}
.ap-color-picker[data-layout=label] .ap-color-option:disabled .ap-color-label{text-decoration:line-through}
.ap p.ap-color-unavailable{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ap-muted)}
.ap-store .ap-color-more{display:inline-flex;align-items:center;gap:4px;margin:8px 0 0;padding:4px 0;border:0;background:transparent;color:var(--ap-accent);font-size:12.5px;font-weight:600}
.ap-store .ap-color-more:hover{text-decoration:underline;text-underline-offset:3px}
.ap-color-more svg{width:16px;height:16px;transition:transform .2s}
.ap-color-more[aria-expanded=true] svg{transform:rotate(180deg)}
@media(forced-colors:active){
  /* Contrast themes drop backgrounds and shadows: keep the tonalities, draw every edge and the selection as borders. */
  .ap-color-fill{forced-color-adjust:none}
  .ap-store .ap-color-option{border:1px solid ButtonText}
  .ap-color-picker[data-layout=swatch] .ap-color-option[aria-checked=true],.ap-color-picker[data-layout=photo] .ap-color-option[aria-checked=true]{border:3px solid Highlight;padding:1px}
  .ap-color-picker[data-layout=label] .ap-color-option[aria-checked=true]{border:3px solid Highlight;padding:0 10px}
  .ap-color-picker[data-layout=label] .ap-color-option[aria-checked=true]:has(>.ap-color-fill){padding-left:2px}
}

/* Sizes and quantities */
.ap-quantity-heading{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;color:var(--ap-muted)}
.ap-size-list{border:1px solid var(--ap-line);border-radius:18px;overflow:hidden;background:var(--ap-bg)}
.ap-size-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--ap-line);min-height:72px}
.ap-size-row:last-child{border-bottom:0}
.ap-size-row.is-filled{background:var(--ap-selected)}
.ap-size-row b{font-size:16px;font-weight:650}
.ap-size-row small{display:block;font-size:11px;margin-top:3px;color:var(--ap-muted)}
.ap-quantity-control{display:flex;align-items:center;border:1px solid var(--ap-line);border-radius:11px;background:var(--ap-bg);overflow:hidden;flex:none}
.ap-store .ap-quantity-control button{border:0;border-radius:0;background:transparent;color:var(--ap-accent);width:44px;height:44px;padding:0;font-size:22px}
.ap.ap-store .ap-quantity-control input[type=number]{appearance:textfield;-moz-appearance:textfield;background:transparent;color:var(--ap-text);width:54px;min-width:0;height:44px;border:0;border-radius:0;text-align:center;font:inherit;font-size:16px;font-weight:500;padding:0}
.ap-quantity-control input::-webkit-outer-spin-button,.ap-quantity-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ap-discounts{border:1px solid var(--ap-line);border-radius:14px;padding:15px 16px;margin-top:18px;font-size:12px}
.ap-discounts summary{cursor:pointer;list-style:none;font-weight:500}
.ap-discounts summary::-webkit-details-marker{display:none}
.ap-discounts summary>span{float:right;color:var(--ap-accent);font-size:11px}
.ap-discounts p{display:flex;justify-content:space-between;margin:14px 0;font-size:13px}
.ap-discounts>small{font-size:11px;color:var(--ap-muted)}
.ap p.ap-discount-hint{font-size:12px;color:var(--ap-accent);margin:14px 0}
.ap-discount-hint:empty{display:none}

/* Review and budget */
.ap-review-selection{border:1px solid var(--ap-line);border-radius:18px;padding:18px;margin-bottom:16px}
.ap-review-selection>.ap-review-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.ap-review-selection>div>button{border:0;background:transparent;color:var(--ap-accent);font-size:12px;padding:6px}
.ap-review-selection>p{font-size:12px;color:var(--ap-muted);margin:4px 0 12px}
.ap-review-print{display:flex;align-items:center;gap:12px;margin-top:8px}
.ap-review-print .ap-miniature{width:54px}
.ap-review-print b{font-size:12px;font-weight:550}
.ap-review-print small{display:block;font-size:11px;color:var(--ap-muted);margin-top:3px}
.ap-review-selection .ap-review-garment{display:flex;align-items:center;justify-content:flex-start;gap:16px;padding-bottom:16px;margin-bottom:12px;border-bottom:1px solid var(--ap-line)}
.ap-review-garment .ap-miniature{width:100px}
.ap-review-garment>span:last-child{display:flex;flex-direction:column;gap:5px;font-size:13px}
.ap-review-garment small{font-size:12px;color:var(--ap-muted)}
.ap-total{background:var(--ap-soft);border-radius:18px;padding:22px;margin:0}
.ap-budget-header{display:flex;flex-direction:column;gap:6px}
.ap-budget-header>span{font-size:12px;color:var(--ap-muted)}
.ap-budget-header>strong{font-size:36px;font-weight:650;letter-spacing:-1.3px;line-height:1.1}
.ap-budget-header>small{font-size:12px;color:var(--ap-muted)}
.ap-total dl{border-top:1px solid var(--ap-line);padding-top:14px;margin:18px 0 0;font-size:12px}
.ap-total dl>div{display:flex;justify-content:space-between;gap:12px;margin:10px 0}
.ap-total dt,.ap-total dd{margin:0}
.ap-total dd{white-space:nowrap;font-variant-numeric:tabular-nums}
.ap-total dt small{display:block;font-size:10px;color:var(--ap-muted);margin-top:3px}
.ap-total dl.ap-composition{color:var(--ap-muted)}
.ap-total dl.ap-composition+dl{margin-top:14px}
.ap p.ap-saving{display:flex;align-items:flex-start;gap:8px;color:var(--ap-accent);font-size:12px;margin:16px 0 0}
.ap-saving>svg{width:18px;height:18px;flex:none}
.ap-saving small{display:block;color:var(--ap-muted);font-size:10px;margin-top:3px}
.ap p.ap-budget-note{font-size:10px;color:var(--ap-muted);line-height:1.5;margin:16px 0 0}

/* Footer with the running price */
.ap-flow-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--ap-line);padding:20px 0 0;margin-top:24px;background:var(--ap-bg)}
.ap-footer-price{display:flex;flex-direction:column;min-width:0;gap:3px;flex-shrink:0}
.ap-footer-price small{font-size:10px;color:var(--ap-muted)}
.ap-footer-price b{font-size:22px;letter-spacing:-.6px;font-weight:650;white-space:nowrap}
.ap-flow-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:1;min-width:0}
.ap-store .ap-next,.ap-store .ap-purchase-actions>button{display:flex;align-items:center;justify-content:center;gap:12px;margin:0!important;min-height:48px;border-radius:12px;padding:12px 18px;border:0;background:var(--ap-accent);color:#fff;font-size:13px;font-weight:550;line-height:1.3;text-align:center}
.ap-store .ap-next{width:100%}
.ap-store .ap-next:disabled{background:var(--ap-soft);color:var(--ap-muted);cursor:default;opacity:1}
.ap-store .ap-back{width:38px;min-width:38px;height:44px;border:0;background:transparent;padding:0;color:var(--ap-muted);font-size:20px}
.ap-purchase-actions{display:flex;gap:8px;flex:1;min-width:0}
.ap-purchase-actions>button{flex:1;min-width:0}
.ap-store .ap-purchase-actions>button:disabled{opacity:.5;cursor:not-allowed}
.ap-store p.ap-error{font-size:12px;margin:12px 0;scroll-margin-bottom:120px}
#sf-apparel-preview{align-self:start;position:static}
#sf-apparel-preview:empty,.ap-store .ap-preview-dock:empty{display:none}
@media(min-width:768px){.sf-apparel-product>.grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px}}

@media(max-width:767px){
  .ap-store{min-height:100dvh;padding-bottom:102px;margin-top:18px;scroll-margin-top:24px}
  .ap-stepper{margin-bottom:18px;padding-bottom:12px}
  .ap-stepper button{font-size:11px;gap:6px}
  .ap-section-title h3{font-size:22px;letter-spacing:-.7px;line-height:1.25;text-wrap:balance}
  .ap-section-title p{font-size:13px;margin-bottom:12px}
  .ap.ap-customer-preview{padding:0;border:0;border-radius:0;margin:0 0 30px}
  .ap-preview-toolbar{justify-content:center;margin-bottom:8px}
  .ap-preview-label{display:none}
  .ap-customer-preview .ap-stage{width:min(100%,300px)}
  .ap-customer-preview p.ap-preview-caption{display:none}
  .ap-store .ap-placement{min-height:68px;padding:8px 12px 8px 8px;gap:11px}
  .ap-placement .ap-miniature{width:56px}
  .ap-placement-copy b{font-size:13.5px}
  .ap-placement-price{display:none}
  .ap-placement-inline-price{display:inline;color:var(--ap-accent);font-weight:600}
  .ap-options{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .ap-store .ap-option-choice{column-gap:9px;padding:9px 8px}
  .ap-option-copy b{padding-right:20px}
  .ap-size-glyph{width:36px;height:36px}
  .ap-flow-footer{position:sticky;bottom:0;z-index:30;padding:14px 0 calc(14px + env(safe-area-inset-bottom));margin-top:20px;gap:12px}
  .ap-footer-price b{font-size:20px}
  .ap-store .ap-next,.ap-store .ap-purchase-actions>button{padding:12px;font-size:12px;gap:8px}
  .ap-store .ap-back{min-width:28px;width:28px}
  .ap-flow-actions{gap:3px}
  .ap-color-picker{margin-bottom:16px}
  .ap-color-heading{margin-bottom:8px}
  .ap-color-picker[data-layout=photo] .ap-color-option{width:52px;height:52px}
  /* The toggle below already says how many colours there are; the name keeps the room. */
  .ap-color-heading .ap-color-count{display:none}
  .ap-review-garment .ap-miniature{width:82px}
  .ap-guided-page .ap-flow-footer{position:fixed;left:0;right:0;bottom:0;z-index:38;padding:14px 20px calc(14px + env(safe-area-inset-bottom));margin:0;box-shadow:0 -4px 24px #0000000d}
  .ap-guided-page .sf-bottom-nav{display:none!important}
  .ap-guided-page .whatsapp-float{bottom:110px}
  .sf-apparel-product>.grid>div:first-child:has(#sf-apparel-preview[hidden]){display:none}
  /* The garment preview moves below the title; reserve the native mobile header's space. */
  body.sf-product-page .sf-pdp-wrap.sf-apparel-product{padding-top:calc(84px + env(safe-area-inset-top))!important}
  .sf-apparel-product>.grid>div>h1{font-size:26px;line-height:1.25;letter-spacing:-.6px;overflow-wrap:anywhere;text-wrap:balance}
  .sf-apparel-product>.grid>div>h1+p{margin-top:8px}
}
@media(max-width:350px){
  .ap-footer-price b{font-size:18px}
  .ap-footer-price small{font-size:9px}
  .ap-store .ap-next,.ap-store .ap-purchase-actions>button{font-size:11px;padding:12px 9px}
  .ap-quantity-control input[type=number]{width:44px!important}
  .ap-store .ap-quantity-control button{width:40px}
  .ap-stepper button{font-size:10px}
  .ap-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ap *,.ap-customer-preview *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}