/* The Stubby Hut — stubby cooler designer.
   Ported from the standalone editor's designer.css. The standalone's base.css is
   deliberately NOT shipped: it set :root font/colour/background, reset body margin,
   capped main at 1800px and defined a lime .button, all of which fight main.css.
   Everything base.css supplied that the editor genuinely needs is reproduced below.
   The element resets are scoped to .cooler-studio so nothing leaks into site chrome.
   --plum / --pink / --paper are the editor's own token names, remapped to brand
   colours so designer.css below can stay byte-close to the supplied source. They sit
   on :root because the enquiry panel that uses them renders outside .cooler-studio;
   this file is only ever loaded on /stubby-cooler-designer/. */
:root {
  --plum: var(--bark);
  --pink: var(--bg-sand);
  --paper: var(--white);
  --studio-border: #BFA07A;
  --studio-border-soft: #E0CDB0;
}
.cooler-studio { color: var(--plum); }
.cooler-studio h1,
.cooler-studio h2,
.cooler-studio h3,
.cooler-studio p { margin: 0; }
.cooler-studio button,
.cooler-studio input,
.cooler-studio select { font: inherit; }
.cooler-studio button { cursor: pointer; border: 0; }
.cooler-studio button:disabled { opacity: .6; cursor: not-allowed; }
.cooler-studio input[type=file] { border: 1px solid var(--studio-border); border-radius: 6px; }
.cooler-studio canvas,
.cooler-studio summary { outline-offset: 4px; }

.studio-heading{padding:35px 5% 38px;display:flex;align-items:end;justify-content:space-between;gap:32px}.studio-heading h1{font-size:clamp(40px,4.5vw,70px);line-height:1.02;letter-spacing:-.04em;font-weight:900}.studio-heading h1 em{font-style:normal;color:var(--sunset-deep)}.studio-heading p{margin-top:18px;line-height:1.55;max-width:54ch}.studio-heading .studio-disclaimer{max-width:32ch;font-size:14px}.product-studio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);margin:0 5% 64px;align-items:start;background:#fff}.studio-stage{position:sticky;top:24px;background:var(--pink);overflow:hidden;min-width:0}.stage-label{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px 28px 0;font-size:14px}.stage-label span{font-size:13px}#product-view{height:clamp(360px,43vw,620px);position:relative;cursor:grab;touch-action:pan-y;outline-offset:-5px}#product-view:active{cursor:grabbing}#product-view canvas{display:block;width:100%;height:100%;touch-action:none}#render-status{position:absolute;inset:40% 30px auto;text-align:center;line-height:1.6}#render-status:empty{display:none}.view-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 12px}.view-controls button,.placement-presets button{padding:11px 15px;min-height:44px;color:var(--plum);background:transparent;border:1px solid var(--studio-border);border-radius:6px;font-size:14px}.view-controls button[aria-pressed=true]{background:var(--plum);color:var(--pink);border-color:var(--plum)}.preview-zoom-control{width:min(340px,calc(100% - 40px));margin:12px auto 0}.preview-zoom-control label{display:flex;justify-content:space-between;font-size:13px;font-weight:700}.preview-zoom-control output{font-weight:400;font-variant-numeric:tabular-nums}.preview-zoom-control input{width:100%;height:25px;margin:4px 0 0;accent-color:var(--plum);cursor:pointer}.rotate-hint{text-align:center;font-size:13px;line-height:1.6;padding:10px 20px 20px}.rotate-hint strong{font-size:16px}.studio-tools{padding:28px 32px;min-width:0}.studio-tools h2{font-size:32px;font-weight:900;letter-spacing:-.03em;margin-bottom:22px}.upload-label{display:block;font-weight:700;font-size:17px}.upload-label input{display:block;max-width:100%;width:100%;margin-top:10px;font-size:14px;padding:10px 0}.upload-label input::file-selector-button{border:0;background:var(--plum);color:var(--pink);padding:12px 16px;border-radius:6px;font:700 14px Arial,sans-serif;cursor:pointer;margin-right:10px}.file-help{font-size:12px;line-height:1.6;margin-top:8px;color:var(--text-mid)}#artwork-status{font-size:13px;line-height:1.5;margin-top:12px;overflow-wrap:anywhere;min-height:40px}.placement-presets{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0 20px}.placement-presets button{font-size:12px;padding:9px 12px}.studio-sliders{display:grid;grid-template-columns:1fr;gap:9px}.studio-sliders label{display:flex;justify-content:space-between;font-size:14px;font-weight:700}.studio-sliders output{font-weight:400;font-variant-numeric:tabular-nums}.studio-sliders input{width:100%;height:25px;accent-color:var(--plum);margin:0 0 9px;cursor:pointer}.wrap-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.wrap-heading h3{font-size:16px}.map-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.guide-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--plum);min-height:44px;cursor:pointer}.guide-toggle input{width:17px;height:17px;accent-color:var(--plum)}.wrap-heading button{background:transparent;color:var(--plum);font-size:12px;min-height:44px;text-decoration:underline}#artwork-map{display:block;width:100%;height:auto;border:1px solid var(--studio-border-soft);border-radius:6px;touch-action:none;cursor:move;background:#fff}.studio-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}.studio-actions .quote-primary{font-size:17px;padding:15px}.studio-actions a{text-align:center;font-size:15px}.studio-explainer{padding:10px 7.3% 80px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.studio-explainer h2{font-size:clamp(32px,3vw,48px);letter-spacing:-.03em;line-height:1.1}.studio-explainer p{line-height:1.7;margin-bottom:16px;max-width:65ch}.studio-tools button:disabled{cursor:not-allowed}.studio-tools button:hover,.view-controls button:hover{filter:brightness(.96)}@media(max-width:800px){.studio-heading{padding:24px 24px 30px;display:block}.studio-heading .studio-disclaimer{max-width:60ch}.product-studio{grid-template-columns:1fr;margin:0 16px 40px}.studio-stage{position:relative;top:0}#product-view{height:350px}.studio-tools{padding:26px 22px}.stage-label{padding:20px 20px 0}.studio-explainer{grid-template-columns:1fr;gap:25px;padding:10px 24px 60px}.wrap-heading{align-items:flex-start}.map-controls{gap:4px 10px}}

.studio-guide{margin:0 5% 28px;padding:22px 26px;border:1px solid var(--studio-border-soft);border-radius:6px;color:var(--plum)}.studio-guide h2{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}.studio-quick-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;padding-left:22px}.studio-quick-start li{padding-left:3px;font-size:14px;line-height:1.6}.studio-quick-start li::marker,.studio-help li::marker{font-weight:700}.studio-quick-start strong,.studio-quick-start span{display:block}.studio-help{margin-top:18px;border-top:1px solid var(--studio-border-soft);padding-top:6px}.studio-help summary{cursor:pointer;padding:12px 0;min-height:44px;font-size:15px;font-weight:700}.studio-help summary:focus-visible{outline:3px solid var(--plum);outline-offset:4px}.studio-help ol{padding-left:22px;max-width:85ch}.studio-help li,.studio-help p{font-size:14px;line-height:1.65;margin-bottom:12px}.studio-help p{max-width:85ch;margin-top:14px}@media(max-width:800px){.studio-guide{margin:0 16px 24px;padding:20px 22px}.studio-quick-start{grid-template-columns:1fr;gap:12px}}

.colour-control>label{display:block;font-size:15px;font-weight:700;margin-bottom:8px}.colour-input-row{display:flex;align-items:center;gap:12px}.colour-input-row input[type=color]{width:64px;height:48px;padding:3px;border:1px solid var(--studio-border);border-radius:6px;background:var(--paper);cursor:pointer}.colour-input-row output{font-size:14px;font-variant-numeric:tabular-nums}.colour-help{margin-bottom:22px}

.product-controls{display:grid;gap:8px;margin-bottom:22px}.product-controls>label,.product-controls legend{font-size:15px;font-weight:700}.product-controls select{width:100%;min-height:44px;padding:9px 38px 9px 12px;border:1px solid var(--studio-border);border-radius:6px;background:#fff;color:var(--plum);font:inherit;font-size:14px}.product-controls fieldset{border:0;padding:6px 0 0;margin:0}.edge-options{display:block}.option-buttons{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.option-buttons label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 14px;border:1px solid var(--studio-border);border-radius:6px;cursor:pointer;flex:1 1 auto;white-space:nowrap}.option-buttons input{accent-color:var(--plum)}.product-controls .file-help{margin-top:0}@media(max-width:520px){.option-buttons label{white-space:normal}}

.design-select,.design-actions{display:flex;gap:8px;flex-wrap:wrap}.design-select button{min-height:44px;padding:10px 16px;border:1px solid var(--studio-border);border-radius:6px;background:white;color:var(--plum)}.design-select button[aria-pressed=true]{background:var(--plum);color:var(--pink)}.design-actions button{min-height:44px;background:transparent;color:var(--plum);font-size:12px;text-decoration:underline;padding:8px 0}.design-actions{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}.design-actions button:nth-child(even){text-align:right}.design-actions button:nth-child(odd){text-align:left}#editing-design{font-weight:700;margin-top:10px}.upload-label{margin-top:16px}
@media(max-width:480px){.design-actions{grid-template-columns:1fr;gap:0}.design-actions button:nth-child(n){text-align:left}}

.studio-tools-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.studio-tools-heading h2{margin-bottom:0}.studio-tools-heading button{min-height:44px;padding:10px 14px;border:1px solid var(--studio-border);border-radius:6px;background:transparent;color:var(--plum);font:inherit;font-size:14px;cursor:pointer}#start-over-help{margin:8px 0 22px}
#artwork-status[data-tone=error]{min-height:0;padding:12px 14px;border:2px solid var(--sunset-deep);border-radius:6px;background:#FDECE4;color:#8A2200;font-weight:700}

/* Keep the export action beside the cooler and repeat it after the editing controls. */
.stage-quote{padding:0 24px 24px;text-align:center}.quote-primary,.studio-actions .quote-primary{width:100%;font-size:clamp(19px,2vw,24px);padding:20px;border-radius:16px}.product-view-mode{padding-top:8px}.quote-preview-help{color:var(--plum);font-size:13px;line-height:1.5;text-align:center;margin-top:12px}.save-options{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap;margin-top:8px}.save-mockup{background:transparent;color:var(--plum);font:700 14px Arial,sans-serif;min-height:44px;padding:9px 5px;text-align:center;text-decoration:underline;text-underline-offset:5px}.save-mockup:disabled{opacity:.5}.quote-links{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap}.quote-links:empty{display:none}.quote-links a{color:var(--plum);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.quote-status{font-size:12px;line-height:1.5;min-height:18px;margin-top:6px}.studio-actions .quote-preview-help{margin-top:0}.stage-quote .quote-primary:focus-visible{outline-color:var(--teal-deep)}
/* Reserve space for controls and the export action before sizing the 3D canvas.
   A width-based canvas height can push the action below a short desktop viewport. */
@media(min-width:801px){
 .studio-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;height:min(800px,calc(100dvh - 48px));overflow:auto}
 #product-view{height:auto;min-height:0}
}

/* Enquiry handoff panel. Sits inside the site's existing #quoteForm, outside
   .cooler-studio, so it uses the site's own tokens and radius. */
.cooler-quote-summary{border:1px solid var(--gold);background:var(--bg-warm);border-radius:var(--radius);padding:18px;margin-bottom:22px}
.cooler-quote-summary h3{font-family:var(--font-display);font-size:1.15rem;line-height:1.2;margin:0 0 12px;color:var(--bark)}
.cooler-quote-summary img{width:100%;max-width:360px;height:auto;border-radius:8px;border:1px solid var(--studio-border-soft);background:#fff}
.cooler-quote-summary .cooler-quote-flat{margin-top:10px}
.cooler-quote-summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;font-size:.9rem}
.cooler-quote-summary dt{font-weight:800;color:var(--text-mid)}
.cooler-quote-summary dd{margin:0;color:var(--text-dark);overflow-wrap:anywhere}
.cooler-quote-note{margin:12px 0 0;font-size:.8rem;color:var(--text-meta);line-height:1.5}

/* Native typography. The ported editor styled its headings as a heavy sans at
   display sizes; the site uses Lilita One at a smaller scale and never sets a
   display font on bare h1/h2/h3. These come last so they win over the ported
   rules above, which share their specificity. */
.cooler-studio h1,
.cooler-studio h2,
.cooler-studio h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--bark);
}
.cooler-studio .studio-heading h1 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.1; }
.cooler-studio .studio-tools h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cooler-studio .studio-guide h2 { font-size: clamp(20px, 2.2vw, 24px); }

/* The editor's disclaimer now lives in the site's dark hero. */
.quote-hero .studio-disclaimer{margin-top:14px;max-width:46ch;font-size:13.5px;line-height:1.6;color:rgba(255,245,224,0.72)}
.quote-hero h1{text-transform:none}

/* base.css carried a global :focus-visible outline. main.css only styles focus on
   a/button/input/textarea/select, so the two focusable non-form elements — the 3D
   preview div and the artwork canvas — would otherwise have no visible focus ring.
   Uses the site's own focus colour. */
.cooler-studio #product-view:focus-visible,
.cooler-studio #artwork-map:focus-visible,
.cooler-studio summary:focus-visible,
.cooler-studio [tabindex]:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 2px;
}