/* Design your tee (custom-tee.html), in the style of Hockerty's "personalize" studio:
   a white options panel on the left, a large preview on a light stage, icon tabs under the preview and a
   bar with the summary and a Next pill. Tokens (colours, font) come from styles.css. */
.ct [hidden]{display:none!important}
.ct-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));min-height:560px}

/* ---------- Options panel ---------- */
/* Options sit on the right of the preview */
.ct-panel{order:2;overflow-y:auto;padding:20px 28px 40px;background:#fff;border-left:1px solid var(--line);overscroll-behavior:contain}
.ct-back{display:inline-flex;align-items:center;min-height:36px;margin-bottom:8px;color:var(--muted);font-size:13px}
.ct-back:hover{color:var(--maroon)}
.ct-pane:focus,.ct-pane h2:focus{outline:none}
.ct-group{min-width:0;margin:0 0 30px;padding:0;border:0}
.ct-group legend,.ct-label,.ct-legend{display:block;margin:0 0 14px;padding:0;color:var(--ink);font-size:16px;font-weight:500;letter-spacing:-.005em}
.ct-group legend span{color:var(--muted);font-weight:400}
.ct-sub{margin:16px 0 0}
.ct-sub legend{font-size:14px}
.ct-help{margin:-6px 0 14px;color:var(--muted);font-size:13px;line-height:1.5}
.ct-group>.ct-help:last-child{margin:10px 0 0}
.ct-optional{color:var(--muted);font-weight:400}
.ct-note{margin:12px 0 0;padding:12px 14px;background:#fbf5f5;border-left:3px solid var(--brand);font-size:13px}
.ct-error{margin:0 0 16px;padding:12px 14px;background:#fdecec;border-left:3px solid var(--brand-deep);color:var(--brand-deep);font-size:14px;font-weight:500}
.ct input[type=text],.ct textarea{width:100%;min-height:46px;padding:11px 14px;border:1px solid #d9c5c8;border-radius:8px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--font)}
.ct input[type=text]:focus,.ct textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ct-tiles input,.ct-chips input,.ct-swatches input,.ct-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Tiles: a drawing or photo with a small caption under it; the chosen one gets a tick at its top-left */
.ct-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
.ct-tiles-photo{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.ct-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px 6px;border-radius:8px;text-align:center;cursor:pointer}
.ct-tile-media{display:grid;place-items:center;width:100%;max-width:86px;aspect-ratio:1;color:#3b3335;border-radius:6px;transition:background-color .2s}
.ct-tile-media svg{width:72%;height:72%}
.ct-tile-media img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.ct-tiles-photo .ct-tile-media{max-width:none;aspect-ratio:4/5;background:var(--sand)}
.ct-tile-cap{color:var(--ink);font-size:13px;font-weight:500;line-height:1.3}
.ct-tile-sub{margin-top:-3px;color:var(--muted);font-size:12px;line-height:1.35}
.ct-tile:hover .ct-tile-media{background:#f6f3ef}
.ct-tiles input:checked+.ct-tile .ct-tile-media{background:#f6f3ef;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct-tiles input:checked+.ct-tile:before{content:'';position:absolute;top:0;left:0;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%2327191b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 1px #27191b}
.ct-tiles input:checked+.ct-tile .ct-tile-cap{font-weight:600}
.ct-tiles input:focus-visible+.ct-tile{outline:3px solid var(--brand-deep);outline-offset:2px}
.ct-tiles input:disabled+.ct-tile{opacity:.38;cursor:not-allowed}
.ct-tile .ct-mark{color:var(--brand)}

/* Segmented switch (Logo / Text) */
.ct-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid #e3d6d8;border-radius:999px}
.ct-seg label{display:grid;place-items:center;min-height:42px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.ct-seg input:checked+label{background:var(--ink);color:#fff}
.ct-seg input:focus-visible+label{outline:3px solid var(--brand-deep);outline-offset:2px}

/* Swatches */
.ct-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:12px 10px}
.ct-swatch{justify-self:center;width:38px;height:38px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px #0000002a;cursor:pointer}
.ct-swatches-sm .ct-swatch{width:32px;height:32px}
.ct-swatch.is-melange{background:repeating-linear-gradient(45deg,var(--sw) 0 3px,color-mix(in srgb,var(--sw) 70%,#fff) 3px 5px)}
.ct-swatches input:checked+.ct-swatch{box-shadow:inset 0 0 0 1px #0000002a,0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.ct-swatches input:focus-visible+.ct-swatch{outline:3px solid var(--brand-deep);outline-offset:5px}

/* Size chips */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chips label{display:inline-grid;place-items:center;min-width:64px;min-height:42px;padding:0 14px;border:1px solid #e3d6d8;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.ct-chips label:hover{border-color:var(--ink)}
.ct-chips input:checked+label{border-color:var(--ink);background:var(--ink);color:#fff}
.ct-chips input:focus-visible+label{outline:3px solid var(--brand-deep);outline-offset:2px}
.ct-chips input:disabled+label{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* Design tab */
.ct-plain{display:flex;align-items:center;gap:10px;margin:0 0 26px;padding:12px 14px;background:var(--sand);border-radius:8px}
.ct-plain input{width:18px;height:18px;accent-color:var(--ink)}
.ct-plain label{font-size:14px;font-weight:500;cursor:pointer}
.ct-drop{position:relative;display:grid;place-items:center;min-height:88px;padding:14px;border:1.5px dashed #c9b3b6;border-radius:8px;color:var(--muted);font-size:13px;text-align:center}
.ct-drop:hover,.ct-drop:focus-within{border-color:var(--ink);background:#fbf9f7}
.ct-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ct-drop span{display:flex;flex-direction:column;gap:2px}
.ct-drop strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ct-designs{margin:0 0 24px;padding:0;list-style:none;border-top:1px solid var(--line)}
.ct-designs:focus{outline:none}
.ct-design{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.ct-design-btn{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;border:0;background:none;color:var(--muted);font:400 13px/1.35 var(--font);text-align:left;cursor:pointer}
.ct-design-btn svg{flex:none;width:34px;height:34px;color:#3b3335}
.ct-design.is-current .ct-design-btn{color:var(--ink);font-weight:600}
.ct-link,.ct-add{min-height:40px;padding:0;border:0;background:none;color:var(--ink);font:500 13px/1 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ct-add{display:block;margin:-10px 0 30px;font-size:14px}
.ct-link:hover,.ct-add:hover{color:var(--maroon)}
.ct-finish-group{padding-top:26px;border-top:1px solid var(--line)}

/* Sizes tab */
.ct-qty{display:grid;gap:0}
.ct-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.ct-qty-row label{font-size:15px;font-weight:500}
.ct-qty-row.has-qty label{font-weight:700}
.ct-stepper{display:flex;align-items:center;border:1px solid #d9c5c8;border-radius:999px}
.ct-stepper button{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);font-size:19px;cursor:pointer}
.ct-stepper button:hover{background:var(--sand)}
.ct .ct-stepper input{width:48px;min-height:38px;padding:0;border:0;box-shadow:none;text-align:center;font-weight:600}
.ct-total{margin:12px 0 0;font-size:14px;font-weight:600}
.ct-sum{display:grid;gap:10px;margin:0}
.ct-sum dt{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ct-sum dd{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.ct-sum .is-missing dd{color:var(--muted)}

/* ---------- Stage, tabs, bar ---------- */
.ct-main{display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-width:0;background:#f1efec}
.ct-stage{position:relative;display:grid;place-items:center;min-height:0;padding:32px 72px 44px;overflow:hidden}
.ct-view{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.ct-photo{position:relative;max-width:100%;max-height:100%}
.ct-photo img{display:block;max-width:100%;max-height:calc(100vh - var(--nav-h) - 250px);max-height:calc(100dvh - var(--nav-h) - 250px);width:auto;height:auto}
.ct-photo.is-flat img,.ct-photo.is-side img,.ct-photo.is-back img{mix-blend-mode:multiply}
.ct-photo.is-model img,.ct-photo.is-fabric img{border-radius:6px;box-shadow:0 18px 40px #27191b1f}
.ct-empty{margin:0;color:var(--muted)}
.ct-overlays{position:absolute;inset:0;pointer-events:none}
.ct-ov{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%)}
.ct-ov img,.ct-ov svg{display:block;width:100%;height:auto}
.ct-ov.is-guide{aspect-ratio:1;border:1.5px dashed #27191bb3;border-radius:3px;background:#ffffff8c;color:#27191b;font-size:11px;font-weight:600}
.ct-ov.is-current:not(.is-guide){outline:1.5px dashed #27191b80;outline-offset:5px}
.ct-arrow{position:absolute;top:50%;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid #27191b55;border-radius:50%;background:#ffffffb3;color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s}
.ct-arrow:hover{background:#fff;border-color:var(--ink)}
.ct-arrow svg{width:20px;height:20px}
.ct-arrow-prev{left:24px}
.ct-arrow-next{right:24px}
.ct-view-label{position:absolute;left:0;right:0;bottom:14px;margin:0;color:var(--muted);font-size:12px;letter-spacing:.06em;text-align:center}
.ct-stage-note{position:absolute;top:16px;left:50%;max-width:min(420px,80%);margin:0;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 4px 14px #27191b1a;color:var(--ink);font-size:12px;text-align:center;transform:translateX(-50%)}
.ct-tabs{background:#f1efec}
.ct-tabs ol{display:flex;justify-content:center;gap:clamp(12px,4vw,48px);margin:0;padding:6px 16px 10px;list-style:none}
.ct-tab{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:56px;padding:4px 6px;border:0;border-bottom:2px solid transparent;background:none;color:#8a7d7f;font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ct-tab svg{width:26px;height:26px}
.ct-tab:hover:not(:disabled),.ct-tab[aria-current=step]{color:var(--ink)}
.ct-tab[aria-current=step]{border-bottom-color:var(--ink);font-weight:600}
.ct-tab:disabled{opacity:.4;cursor:default}
.ct-tab:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
.ct-bar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,3vw,32px);background:#fff;border-top:1px solid var(--line)}
.ct-bar-text{flex:1;min-width:0}
.ct-bar-text p{margin:0}
.ct-bar-title{font-size:19px;letter-spacing:-.01em}
.ct-bar-line{color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-bar-sub{color:var(--muted);font-size:12px}
.ct-bar-back{min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink);font:500 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ct-bag{min-height:48px;padding:0 24px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:500 15px/1 var(--font);cursor:pointer;transition:background-color .2s,color .2s}
.ct-bag:hover{background:var(--ink);color:#fff}
.ct-bag:focus-visible,.ct-go:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
.ct-go{min-height:48px;padding:0 30px;border:0;border-radius:999px;background:var(--maroon);color:#fff;font:500 16px/1 var(--font);letter-spacing:.02em;cursor:pointer;transition:background-color .2s}
.ct-go:hover{background:var(--brand)}
.ct-go.is-send{background:#1f7a45}
.ct-go.is-send:hover{background:#17613a}

/* The bar's last step sends to WhatsApp, so the floating WhatsApp button is not needed here (it would cover the preview) */
body:has(.ct-app) .whatsapp{display:none}

/* ---------- Tablet and phone: preview on top, options below, bar fixed at the bottom ---------- */
@media(max-width:900px){
  .ct-app{display:flex;flex-direction:column;height:auto;min-height:0}
  .ct-main{display:contents}
  .ct-stage{order:1;height:min(52vh,460px);padding:16px 56px 34px;background:#f1efec}
  .ct-photo img{max-height:calc(min(52vh,460px) - 60px)}
  .ct-tabs{order:2;position:sticky;top:var(--nav-h);z-index:4;border-bottom:1px solid var(--line)}
  .ct-panel{order:3;overflow:visible;padding:20px 20px 120px;border-left:0}
  .ct-back{display:none}
  .ct-bar{order:4;position:fixed;left:0;right:0;bottom:0;z-index:6;box-shadow:0 -6px 18px #27191b14}
  .ct-bar-title{font-size:16px}
  .ct-bar-sub{display:none}
  .ct-arrow-prev{left:10px}
  .ct-arrow-next{right:10px}
  .ct-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ct-tiles-photo{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:has(.ct-app) .site-footer{padding-bottom:96px}
}
@media(max-width:480px){
  .ct-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ct-tiles-photo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-tab{min-width:56px;letter-spacing:.08em}
  .ct-go{padding:0 18px;font-size:14px}
  .ct-bag{padding:0 14px;font-size:14px}
  .ct-bar:has(.ct-bag:not([hidden])) .ct-bar-text,.ct-bar:has(.ct-bag:not([hidden])) .ct-bar-back{display:none}
  .ct-bar:has(.ct-bag:not([hidden])) .ct-bag,.ct-bar:has(.ct-bag:not([hidden])) .ct-go{flex:1}
}
@media(prefers-reduced-motion:reduce){.ct-tile-media,.ct-arrow,.ct-go{transition:none}}

.ct-email{margin-top:-4px}
.ct-email-btn{display:inline-block;padding:8px 0;border:0;background:none;color:var(--brand-deep);font:600 14px/1.4 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.ct-email-btn:hover{color:var(--brand)}
.ct-email-btn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
/* "See the size chart" above the size quantities (opens size-chart.js) */
.ct-chart-line{margin:0 0 12px}
.ct-chart-line[hidden]{display:none}
.ct-chart-line .ct-link{min-height:32px;font-size:inherit;font-weight:600;color:var(--brand-deep)}
/* A hint right under a text box sits below it (the -6px .ct-help margin is for hints under a heading) */
.ct input[type=text]+.ct-help,.ct textarea+.ct-help{margin-top:8px}
/* The hidden radios and checkboxes are positioned inside their own group. Without this they sit outside the
   scrolling panel, and focusing one (by clicking its tile) scrolled the whole window down to the footer. */
.ct-tiles,.ct-chips,.ct-swatches,.ct-seg{position:relative}