/* All layout text inherits the host site's approved font. No new fonts or decorative artwork. */
:root { --ss-ink: var(--ink, #232323); --ss-teal: var(--teal, #049b98); --ss-coral: var(--coral, #ff6f61); --ss-cream: var(--cream-2, #fbf7f1); --ss-border: #d9dddc; --ss-mist: #f3f6f3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: var(--ss-cream); color: var(--ss-ink); line-height: 1.55; }
button,select,input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .ss-carousel:focus-visible { outline: 3px solid var(--ss-teal); outline-offset: 3px; }
.ss-skip { position: absolute; left: -9999px; top: 0; } .ss-skip:focus{left:1rem;top:1rem;background:white;z-index:22;padding:1rem}
.ss-header { background: var(--ss-ink); color: white; } .ss-header nav { max-width: 1200px; padding: 1rem 1.5rem; margin:auto; display:flex; gap:1.5rem; justify-content:flex-start; align-items:center; flex-wrap:wrap; }
.ss-header a { color:white; text-decoration:none; } .ss-header a:hover,.ss-header a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.ss-home { font-weight: 700; margin-right:auto; }
.ss-hero { background-color: #fffaf2; background-image:url('./brand-background.jpg'); background-position:center; background-size:cover; display:grid; grid-template-columns: 1fr .9fr; align-items:center; gap:3rem; padding:clamp(2rem,4vw,4rem) max(1.5rem, calc((100vw - 1200px)/2)); }
.ss-hero-copy { max-width:650px; }
.ss-hero h1 { font:inherit; font-size: clamp(3rem,7vw,5.5rem); letter-spacing:-.04em; line-height:1.04; margin:0 0 .5rem; font-weight:850; }
.ss-tagline{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:780;color:var(--ss-teal);margin-top:.5rem}
.ss-eyebrow { text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.72rem; }
.ss-intro{font-weight:650}
.ss-hero-photo img { display:block; max-width:100%; width:100%; height:auto; object-fit:contain; }
.ss-image-button { border:0; background:transparent; padding:0; display:block; }
.ss-primary-link,.ss-primary-button,.ss-secondary-button{border-radius:.65rem;display:inline-block;text-align:center;padding:.8rem 1.2rem;text-decoration:none;font-weight:700;border:2px solid var(--ss-ink);background:var(--ss-ink);color:white}
.ss-primary-link:hover,.ss-primary-button:hover { background:#244859; }
.ss-secondary-button{background:var(--ss-cream);color:var(--ss-ink)}.ss-secondary-button:hover{background:var(--ss-mist)}
.ss-shell{max-width:1200px;margin:auto;padding:clamp(2rem,4vw,4rem) 1.5rem}
.ss-main h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2;margin:0 0 .8rem;}.ss-main h3{font-size:1.35rem}
.ss-showcase img { width:100%;height:100%;object-fit:contain; }
.ss-product-strip { display:flex;gap:1rem;overflow:auto;scroll-snap-type:x mandatory;padding:1rem 0; }
.ss-product-strip button { flex:0 0 min(70vw,360px);height:250px;scroll-snap-align:start;border:1px solid var(--ss-border);border-radius:.85rem;overflow:hidden;background:#fff; }
.ss-order { scroll-margin-top:1rem; }
.ss-section-heading p{margin-top:-.4rem}
.ss-order-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);gap:2rem;align-items:start}
.ss-form-panel,.ss-summary-panel,.ss-extra-grid>fieldset,.ss-extra-grid>div{border:1px solid var(--ss-border);border-radius:1rem;background:white;padding:1.35rem}
.ss-summary-panel{position:sticky;top:1rem}
.ss-form-panel fieldset,.ss-extra fieldset{border:0;border-top:1px solid var(--ss-border);margin:1.5rem 0 0;padding:1.1rem 0 0;min-width:0}
.ss-form-panel fieldset legend,.ss-extra fieldset legend {font-weight:760;font-size:1.12rem;padding:0 .4rem 0 0}
.ss-help,.ss-small,.ss-disclaimer{font-size:.88rem;opacity:.88}
.ss-two-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:.9rem}
.ss-form-panel label:not(.ss-check):not(.ss-variation),.ss-extra label{font-weight:650;font-size:.92rem;display:flex;flex-direction:column;gap:.35rem}
.ss-form-panel select,.ss-extra select,.ss-extra input{display:block;width:100%;min-height:44px;border:1px solid #a7b4b9;border-radius:.5rem;background:white;color:var(--ss-ink);padding:.5rem .7rem;font-weight:400;}
.ss-choice-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.ss-variation {display:block;cursor:pointer}.ss-variation input{position:absolute;opacity:0}.ss-variation span{display:flex;flex-direction:column;align-items:center;border:2px solid #b5c0c1;padding:.8rem;border-radius:.8rem;gap:.2rem}
.ss-variation input:checked+span{border-color:var(--ss-teal);background:#edfaf9}.ss-variation input:focus-visible+span{outline:3px solid var(--ss-teal);outline-offset:2px}
.ss-variation em{font-style:normal;font-size:1.3rem;font-weight:800;color:var(--ss-coral)}
.ss-ring-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.ss-ring-entry{display:grid;grid-template-columns:1fr 100px;gap:.5rem;align-items:end;border:1px solid var(--ss-border);padding:.65rem;border-radius:.5rem}
.ss-ring-entry label{min-width:0}
.ss-ring-entry .ss-ring-color {min-width:0}
.ss-ring-entry.ss-extra-ring{grid-template-columns:1fr}
.ss-link-button{border:0;background:none;text-decoration:underline;color:var(--ss-ink);padding:.25rem 0;}
.ss-summary-row{display:flex;justify-content:space-between;gap:.8rem;margin-bottom:.65rem}.ss-summary-total{border-top:2px solid var(--ss-ink);margin-top:1rem;padding-top:1rem;font-size:1.3rem;font-weight:800}
.ss-primary-button{width:100%;margin:1rem 0 .4rem}.ss-alert{color:#84231e;background:#fff1ed;border:1px solid #f19a89;padding:.75rem;border-radius:.5rem}
.ss-extra{scroll-margin-top:1rem}.ss-extra-grid{display:grid;grid-template-columns: 1.2fr 1fr;gap:1.5rem}.ss-extra-grid>fieldset{margin:0;}
.ss-pack{background:#f4f6f5;border:1px solid var(--ss-border);padding:.85rem;border-radius:.6rem;margin-bottom:.7rem}.ss-pack button{background:none;border:0;color:#7d241a;text-decoration:underline;padding:0}
.ss-gallery-section h3 {margin-top:2rem}.ss-gallery-section p{max-width:850px}
.ss-carousel {overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:.6rem .2rem 1.3rem;overscroll-behavior-x:contain}
.ss-carousel-track{display:flex;gap:1rem;width:max-content}.ss-catalog-card{background:white;border:1px solid var(--ss-border);border-radius:.8rem;padding:.8rem;display:flex;flex-direction:column;gap:.55rem;align-items:center;scroll-snap-align:start;width:min(68vw,430px);color:var(--ss-ink);font-weight:700}.ss-catalog-card:hover{border-color:var(--ss-teal)}
.ss-catalog-card img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain}.ss-catalog-card span{display:block}
.ss-footer{text-align:center;background:var(--ss-ink);color:white;padding:2.5rem 1rem}.ss-footer a{color:white}
.ss-lightbox{width:min(96vw,1400px);max-height:95vh;padding:1rem;border:0;border-radius:.75rem;box-shadow:0 6px 40px #0007;overscroll-behavior:contain}
.ss-lightbox::backdrop,.ss-review-dialog::backdrop {background:#09131cbb}
.ss-lightbox figure{margin:0;text-align:center;}.ss-lightbox img{width:100%;height:auto;max-height:82vh;object-fit:contain;}.ss-lightbox figcaption{font-size:.9rem;font-weight:650;margin-top:.4rem}
#ss-lightbox-close,.ss-modal-close{float:right;border:0;padding:.5rem;background:var(--ss-ink);color:white;border-radius:.35rem}
.ss-review-dialog{border:0;border-radius:1rem;width:min(92vw,650px);max-height:90vh;overflow:auto}.ss-review-content{padding:1rem}.ss-review-content h2{padding-right:6rem}.ss-review-content pre{white-space:pre-wrap;word-break:break-word}
@media(max-width:850px){.ss-hero{grid-template-columns:1fr;gap:1rem;background-position:55% center}.ss-hero-photo{max-width:450px}.ss-order-grid,.ss-extra-grid{grid-template-columns:1fr}.ss-summary-panel{position:static}.ss-header nav{gap:1rem}.ss-catalog-card{width:min(82vw,420px)}}
@media(max-width:500px){.ss-two-fields,.ss-ring-fields{grid-template-columns:1fr}.ss-choice-row{gap:.35rem}.ss-variation span{padding:.65rem .2rem}.ss-catalog-card{width:84vw}.ss-ring-entry{grid-template-columns:1fr 110px}}

/* Integration: keep approved site's font, logo, navigation, and footer; no added decorative graphics. */
.ss-main h1,.ss-main h2,.ss-main h3{line-height:1.15}
.ss-main .ss-hero {scroll-margin-top:90px}
.ss-fulfillment{display:flex;flex-direction:column;gap:.65rem;border:1px solid var(--ss-border);border-radius:.65rem;padding:1rem;margin:1rem 0}
.ss-fulfillment legend{font-weight:750;padding:0 .25rem}.ss-fulfillment label{display:flex;gap:.5rem;align-items:baseline}
.ss-review-dialog .ss-primary-button{margin:.5rem 0 1rem}
.ss-summary-panel{top:105px}
.ss-main .ss-primary-link,.ss-main .ss-primary-button{background:var(--coral);border-color:var(--coral);color:#fff;border-radius:999px}
.ss-main .ss-secondary-button{border-radius:999px}
.ss-main .ss-hero-photo{min-width:0}
.ss-main .ss-hero-photo img{max-height:540px;object-fit:contain}
.ss-catalog-card{width:min(80vw,600px)}
@media(max-width:850px){.ss-catalog-card{width:min(85vw,520px)}}
@media(max-width:520px){.ss-catalog-card{width:90vw}}

.ss-open-original{display:inline-block;margin-top:.6rem;color:var(--teal-dark);text-decoration:underline;font-weight:700}


/* StimStack selections: approved Atypically Made cream, coral, and teal only. */
.ss-order, .ss-extra { padding-top: clamp(1.5rem,3vw,3rem); }
.ss-main .ss-section-heading h2, .ss-main .ss-extra h2 { color:var(--teal-dark); }
.ss-form-panel {
  background:var(--cream-2);
  border:2px solid var(--teal);
  border-radius:28px;
  padding:clamp(.9rem,2vw,1.4rem);
  box-shadow:0 14px 34px rgba(35,35,35,.10);
}
.ss-summary-panel {
  background:var(--teal-soft);
  border:2px solid var(--teal);
  border-top:7px solid var(--coral);
  border-radius:28px;
  box-shadow:0 14px 34px rgba(35,35,35,.08);
}
.ss-main .ss-form-panel fieldset {
  border:2px solid var(--line);
  border-radius:22px;
  background:var(--teal-soft);
  margin:1.2rem 0 0;
  padding:1.25rem;
}
.ss-main .ss-form-panel fieldset:nth-of-type(even) { background:var(--coral-soft); }
.ss-main .ss-form-panel fieldset legend {
  color:var(--ink);
  background:var(--cream-2);
  padding:.3rem .8rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:850;
}
.ss-extra-grid>fieldset {
  background:var(--teal-soft);
  border:2px solid var(--teal);
  border-radius:28px;
  padding:1.3rem;
}
.ss-extra-grid>div {
  background:var(--coral-soft);
  border:2px solid var(--coral);
  border-radius:28px;
}
.ss-main .ss-form-panel select, .ss-main .ss-extra select, .ss-main .ss-extra input {
  background:var(--cream-2);
  border:2px solid var(--line);
  border-radius:12px;
  color:var(--ink);
}
.ss-main .ss-form-panel select:focus, .ss-main .ss-extra select:focus {border-color:var(--teal);}
.ss-main .ss-ring-entry {
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.75rem;
}
.ss-main .ss-variation span { background:var(--cream-2);border-color:var(--line);border-radius:16px; }
.ss-main .ss-variation input:checked+span { background:var(--coral-soft);border-color:var(--coral); }
.ss-main .ss-check {display:flex;align-items:center;gap:.5rem;font-size:1.1rem;}
.ss-main .ss-check input {width:1.15rem;height:1.15rem;accent-color:var(--teal);}
.ss-main .ss-summary-total { border-top-color:var(--teal); }
.ss-pack {background:var(--cream-2);border-color:var(--line);}
.ss-main .ss-secondary-button {background:var(--cream-2);border-color:var(--teal);color:var(--ink);}
.ss-main .ss-secondary-button:hover {background:var(--coral-soft);}
.ss-color-reference {background:var(--cream-2);border:2px solid var(--line);padding:.8rem;border-radius:20px;margin-top:1.15rem;}
.ss-reference-label {font-weight:800;margin:.15rem 0 .7rem;}
.ss-color-sheet-button {max-width:620px;width:100%;margin:auto;}
.ss-color-sheet-button img {width:100%;height:auto;display:block;border-radius:12px;}
.ss-image-hint {text-align:center;font-size:.84rem;margin:.5rem 0 .15rem;color:var(--muted);}
.ss-selection-gallery {
  background:var(--cream-2);
  border:2px solid var(--line);
  padding:.9rem;
  border-radius:20px;
  margin:.95rem 0 1.15rem;
  max-width:100%;
}
.ss-gallery-head {display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.95rem;font-weight:800;margin:0 0 .7rem;}
.ss-gallery-counter {background:var(--teal-soft);border-radius:999px;color:var(--teal-dark);font-weight:900;padding:.1rem .7rem;white-space:nowrap;}
.ss-gallery-stage {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:.5rem;max-width:100%;}
.ss-gallery-arrow {
  display:grid;place-items:center;
  width:44px;height:54px;
  font-size:1.5rem;font-weight:900;
  border-radius:14px;
  border:2px solid var(--teal);
  background:var(--teal-soft);
  color:var(--ink);
}
.ss-gallery-arrow:hover {background:var(--coral-soft);border-color:var(--coral);}
.ss-gallery-image { width:100%; min-width:0;max-width:590px; margin:0 auto;border-radius:12px;overflow:hidden; }
.ss-gallery-image img {width:100%;height:auto;object-fit:contain;display:block;}
.ss-gallery-footer {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;font-size:.9rem;}
.ss-gallery-title {color:var(--teal-dark);font-size:1rem;}
.ss-gallery-footer span{color:var(--muted);}
.ss-gallery-arrow:focus-visible,.ss-gallery-image:focus-visible {outline:3px solid var(--coral);outline-offset:3px;}
@media(max-width:700px){
  .ss-form-panel,.ss-summary-panel,.ss-extra-grid>fieldset,.ss-extra-grid>div {padding:.9rem;}
  .ss-main .ss-form-panel fieldset {padding:.85rem;}
  .ss-gallery-stage {grid-template-columns:34px minmax(0,1fr) 34px;gap:.3rem;}
  .ss-gallery-arrow {width:34px;height:50px;font-size:1.2rem;border-radius:10px;}
  .ss-selection-gallery{padding:.55rem;}
  .ss-gallery-image{max-width:100%;}
  .ss-gallery-footer{display:block;}
}
