.scHoodies-card {
  background: transparent !important;
  border: none;
}

.scHoodies-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;   
  margin: 0 auto;
  background: transparent !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}


/* Default: single column only on small screens */
.scHoodies-grid{
  display:grid;
  gap:18px;
}

/* Desktop/tablet: force two columns, right pane fixed width */
@media (min-width: 900px){
  .scHoodies-grid{
    grid-template-columns: minmax(0, 1fr) 420px; /* left grows, right stays fixed */
    align-items:start;
  }
  .scHoodies-card{ width:auto; }     /* avoid any inherited 50% widths */
}

/* If you added sticky, keep it; otherwise you can drop this block */
.scHoodies-card--preview{
  align-self:start;
  position:sticky;
  top:12px;
}



.scHoodies-card {
  border: 1px solid #007AC3;
  border-radius: 12px;
  padding: 14px;
  background: #FFFFFF;
  transition: border-color 0.3s;
}

.scHoodies-card { border: none !important; }

/* Rest of your existing styles… */
.scHoodies-h {
  font-size: 16px;
  margin: 0 0 10px;
  color: #000000;
}

.scHoodies-select,
.scHoodies-input {
  width: 50%;
  padding: 10px;
  border: 1px solid #007AC3;
  border-radius: 8px;
  background: #FFFFFF;
  color: ;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.scHoodies-select:focus,
.scHoodies-input:focus {
  outline: none;
  border-color: #F6A923;
  box-shadow: 0 0 0 3px rgba(246, 169, 35, 0.3);
}

.scHoodies-gallery {
  display: grid;
  grid-template-columns: repeat(10, minmax(50px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.scHoodies-gallery .scHoodies-thumb img {
  width: 55px;                 /* <<< control size here */
  height: 55px;                /* <<< and here */
  object-fit: contain;         /* keep full image in frame */
  display: block;
  margin: 0 auto;              /* center in the thumb */
}

.scHoodies-thumb {
  border: 2px solid #007AC3;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  background: #FFFFFF;
  transition: all 0.25s ease;
  text-align: center;
  color: #000000;
}

.scHoodies-thumb:hover {
  background-color: #007AC3;
  color: #FFFFFF;
}

.scHoodies-thumb[aria-selected="true"] {
  background-color: #007AC3;
  color: #FFFFFF;
  border-color: #F6A923;
}

.scHoodies-thumb span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #000000;
  font-weight: 500;
}

#scProductInfo {
  margin-top: 10px;
  font-size: 14px;
  color: #000000;
  border-top: 1px solid #007AC3;
  padding-top: 8px;
}

.scHoodies-preview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.scHoodies-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scHoodies-overlay img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%;
  opacity: 0.95;
}

.scHoodies-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Make Adult/Child pills match the "Upload Logo" button */
.scHoodies-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;          /* same as .scHoodies-file */
  border-radius: 8px;
  border: none;
  background-color: #007AC3;     /* blue background */
  color: #FFFFFF;                /* white text */
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover: same as Upload Logo hover */
.scHoodies-pill:hover {
  background-color: #F6A923;     /* yellow */
  color: #000000;                /* black text */
  box-shadow: 0 2px 6px white;
}

/* Selected state: look like active primary button */
.scHoodies-pill[aria-selected="true"] {
  background-color: #007AC3;
  color: #FFFFFF;
  box-shadow: 0 0 0 1px #F6A923; /* subtle focus ring in brand yellow */
}

/* Optional: keyboard focus */
.scHoodies-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #F6A923,
    0 0 8px rgba(0, 122, 195, 0.35);
}


.scHoodies-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
}

.scHoodies-size {
  display: flex;
  font-weight: bold;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.scHoodies-hr {
  height: 1px;
  background: #007AC3;
  margin: 16px 0;
}

.scHoodies-note {
  font-size: 12px;
  color: #000000;
}

.scHoodies-error {
  color: #000000;
  background: #F6A923;
  border: 1px solid #007AC3;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  font-size: 14px;
}

.scHoodies-file {
  display: inline-block;
  background-color: #007AC3;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.scHoodies-file:hover {
  background-color: #F6A923;
  color: #000000;
}

.scHoodies-file input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.scHoodies-invalid {
  border-color: #F6A923 !important;
  box-shadow: 0 0 0 3px rgba(246, 169, 35, 0.25);
  border-radius: 12px;
}

@keyframes scWarnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Gallery thumbs: remove blue border; add yellow glow when selected */
.scHoodies-thumb{
  border: none !important;
  background: #FFFFFF;
  color: #000000;
  box-shadow: none;
  transition: box-shadow .25s ease, transform .12s ease;
}

/* Hover: subtle lift, no blue fill */
.scHoodies-thumb:hover{
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  transform: translateY(-1px);
  background: #FFFFFF;
  color: #000000;
}

/* Selected: yellow glow (no border) */
.scHoodies-thumb[aria-selected="true"]{
  background: #FFFFFF;
  color: #000000;
  box-shadow:
    0 0 0 3px #F6A923,              /* crisp ring */
    0 0 14px rgba(246,169,35,.45);  /* soft glow */
}

/* Optional: keep the small label text consistent */
.scHoodies-thumb span{
  color: #000000;
}

/* Selected swatch: pink glow (override any orange ring) */
.scHoodies-thumb[aria-selected="true"]{
  border: none !important;
  background: #FFFFFF;
  color: #000000;
  box-shadow:
    0 0 0 3px #FF4DA6,                 /* hot pink ring */
    0 0 12px rgba(255, 77, 166, 0.55), /* soft glow */
    0 0 24px rgba(255, 77, 166, 0.35); /* outer glow */
}

/* Optional: keyboard focus also uses pink glow */
.scHoodies-thumb:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #FF4DA6,
    0 0 12px rgba(255, 77, 166, 0.55),
    0 0 24px rgba(255, 77, 166, 0.35);
}


/* Gate panel – matches scHoodies card styling */
#scHoodiesFormGate {
  display: none;
  border: 1px solid #007AC3;
  background: #007AC3;
  border-radius: 12px;
  padding: 14px;
  margin: 0 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 122, 195, 0.06);
  width: 50% !important;
  text-align: left;
  justify-self: start;
  align-self: center;
}

#scHoodiesFormGate strong {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  margin: 0 0 6px 0;
}

#scHoodiesFormGate .scHoodies-note {
  font-size: 12px;
  color: #000000;
  margin: 0 0 6px 0;
}

#scHoodiesFormGate ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

#scHoodiesFormGate li {
  margin: 4px 0;
  line-height: 1.35;
  position: relative;
  list-style: none;
  padding-left: 18px;
}

#scHoodiesFormGate li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 2px inset;
}

#scHoodiesFormGate .hr {
  height: 1px;
  background: #007AC3;
  margin: 12px 0;
  opacity: .25;
}

#scHoodiesFormGate a {
  color: #007AC3;
  text-decoration: underline;
}

#scHoodiesFormGate a:hover {
  color: #F6A923;
  text-decoration: none;
}

#scHoodiesFormGate.is-compact {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 12px 0;
}

#scHoodiesFormGate.sc-show {
  animation: scGateFade .18s ease-out both;
}

@keyframes scGateFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

#scHoodiesClientError {
  animation: scWarnPulse 600ms;
}

.scHoodies-btn{
  /* copy the important bits from .scHoodies-file */
  display:inline-block;
  padding:0.5rem 1rem;        /* same as Upload Logo */
  font-size:1rem;
  font-weight:500;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  text-align:center;

  /* reset browser button defaults */
  border:none;
  line-height:1.2;
}

/* colours for Clear Logo */
.scHoodies-btn--ghost{
  background:#FFFFFF;
  color:#007AC3;
  border: none;
}

.scHoodies-btn--ghost:hover{
  background:#F6A923;
  color:#000000;
  box-shadow:0 2px 6px rgba(0,122,195,.25);
}

.scHoodies-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}



/* Mobile: stack layout AND hide the live preview */
@media (max-width: 768px) {
  .scHoodies-grid {
    grid-template-columns: 1fr;
  }
}

/* Ensure the preview is a positioned container for the overlay */
.scHoodies-preview{
  position: relative;
  aspect-ratio: 3 / 4;         /* keeps a stable box even before images load */
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;             /* keeps overlay inside the frame */
}

/* Make base image fill safely */
.scHoodies-preview > img#scHoodiesPreviewBase{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show whole hoodie */
}

/* Overlay layer sits above base */
.scHoodies-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Center the overlay images (logo/back) and constrain size */
.scHoodies-overlay img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* perfectly centered */
  max-width: 60%;                     /* scale down to fit horizontally */
  max-height: 60%;                    /* and vertically */
  height: auto;
  width: auto;
  opacity: 0.95;
}

/* Back overlay: centered & consistent scale */
#scHoodiesPreviewBack {
  position: absolute;
  left: 50%;
  top: 20% !important;
  transform: translate(-50%, -50%);
  max-width: 30%;     /* tweak size here */
  max-height: 30%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}


/* Optional: on small screens, reduce overlay size further */
@media (max-width: 480px){
  .scHoodies-overlay img{ max-width: 55%; max-height: 55%; }
  #scHoodiesPreviewLogo{ max-width: 45%; max-height: 45%; }
}

/* Hide the label text under swatches (Front & Back) */
/* Hide label text under all swatches: Brand, Front, Back */
#scHoodiesProductGallery .scHoodies-thumb div,
#scHoodiesProductGallery .scHoodies-thumb span,
#scHoodiesFrontGallery .scHoodies-thumb div,
#scHoodiesFrontGallery .scHoodies-thumb span,
#scHoodiesBackGallery .scHoodies-thumb div,
#scHoodiesBackGallery .scHoodies-thumb span {
  display: none !important;
}


/* Make each thumbnail box smaller/larger */
#scHoodiesFrontGallery .scHoodies-thumb-img,
#scHoodiesBackGallery .scHoodies-thumb-img {
  width: 60px;    /* change this number to what you want */
  height: 60px;   /* keep it square, or use height:auto with aspect-ratio */
  margin: 0 auto;
}

/* Adjust how many fit per row + spacing */
#scHoodiesFrontGallery.scHoodies-gallery,
#scHoodiesBackGallery.scHoodies-gallery {
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));  /* 60px matches above */
  gap: 6px;  /* tighter/looser spacing */
}


/* Optional: tighten swatch spacing since text is gone */
.scHoodies-thumb {
  padding: 6px; /* already set—adjust if you want smaller/larger */
}

/* Keep vertical spacing but hide the visual lines */
.scHoodies-hr {
  background: transparent !important; /* hide the blue line */
  height: 0 !important;               /* no visible rule */
  margin: 16px 0 !important;          /* keep the same gap */
}

/* Keep the Product Info spacing but remove the top rule */
#scProductInfo,
#scHoodiesMeta {
  border-top: none !important;  /* remove the line */
  padding-top: 8px !important;  /* keep the breathing room */
}

/* If you use a divider inside the gate panel, keep gap but hide rule */
#scHoodiesFormGate .hr {
  background: transparent !important;
  height: 0 !important;
  margin: 12px 0 !important;
}

/* Make only the "Choose Your Brand" dropdown 50% wide */
#scHoodiesProduct {
  width: 50% !important;
  display: inline-block; /* prevents it from stretching full row */
}

/* Optional: keep it full width on small screens */
@media (max-width: 600px) {
  #scHoodiesProduct {
    width: 100% !important;
  }
}

/* Row to place the Brand dropdown and the Product Info side-by-side */
.scHoodies-productRow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Keep your 50% width dropdown rule */
#scHoodiesProduct {
  width: 50% !important;
  min-width: 260px;
}

/* Inline product info box */
#scHoodiesMetaInline {
  flex: 1 1 0;
  border: 1px solid #007AC3;
  border-radius: 8px;
  padding: 10px;
  background: #FFFFFF;
  font-size: 14px;
}

/* Hide the entire Product Info section */
.scHoodies-note:has(#scHoodiesMeta){
  display:none !important;
}

#scHoodiesCrestText,
#scHoodiesInitialsText {
  width: 50%;
  font-size: 14px;
  padding: 12px;
  border: 0px solid #007AC3;
  border-radius: 8px;
}

/* Hide the native dropdown without blowing out layout width */
#scHoodiesProduct {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}


/* Product gallery layout – same style as front gallery, but nicer columns */
#scHoodiesProductGallery.scHoodies-gallery {
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}

/* Style borders for the size quantity fields only */
#scHoodiesSizes .scHoodies-input {
  width: 100%;                   /* keeps them a bit wider in the box */
  border: 1px solid #007AC3;    /* thicker border */
  border-radius: 6px;           /* tweak radius */
  background: #FFFFFF;
}

/* Back design thumbnails: force consistent tile + image size */
#scHoodiesBackGallery .scHoodies-thumb {
  padding: 6px;                 /* keep your glow style */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;          /* square tile */
  min-height: 70px;             /* consistent thumb box height */
}

/* Back design image sizing */
#scHoodiesBackGallery .scHoodies-thumb img {
  width: 60px;                  /* pick your size */
  height: 60px;                 /* same as width for consistency */
  object-fit: contain;          /* no cropping */
  display: block;
}

/* Resize ONLY the back design on the preview */
#scHoodiesPreviewBack{
  max-width: 40% !important;   /* make bigger/smaller */
  max-height: 40% !important;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}

/* Change where the back design appears on the preview */
#scHoodiesPreviewBack{
  top: 40% !important;   /* push down a bit */
  left: 50% !important;
  transform: translate(-50%, -50%);
}

#scHoodiesPreviewBack.is-mono{
  filter: invert(1) brightness(1.2) contrast(1.4);

}

/* Primary button style (same vibe as Upload Logo) */
.scHoodies-btn--primary{
  background:#007AC3;
  color:#FFFFFF;
  border:none;
}

.scHoodies-btn--primary:hover{
  background:#F6A923;
  color:#000000;
  box-shadow:0 2px 6px rgba(0,122,195,.25);
}

/* Bigger images ONLY for "Choose Your Style" */
#scHoodiesProductGallery .scHoodies-thumb img {
  width: 150px;      /* adjust as needed */
  max-width: 150px;
  height: auto;
}

/* Optional: give product thumbs extra padding so they breathe */
#scHoodiesProductGallery .scHoodies-thumb {
  padding: 8px;
}

/* Layout: max 4 items per row in "Choose Your Style" */
#scHoodiesProductGallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; /* or whatever you’re using */
}

/* Bigger images ONLY for "Choose Your Style" */
#scHoodiesProductGallery .scHoodies-thumb img {
  width: 150px;
  max-width: 150px;
  height: auto;
}

#scHoodiesProductGallery .scHoodies-thumb {
  padding: 8px;
}

/* === Choose Your Style: bigger thumbs + max 4 per row === */
#scHoodiesProductGallery.scHoodies-gallery {
  display: grid !important;                 /* override flex */
  grid-template-columns: repeat(4, 1fr);    /* max 4 per row */
  gap: 12px;
  overflow-x: visible !important;           /* kill horizontal scroll */
}

/* Make the product images bigger (ONLY here) */
#scHoodiesProductGallery .scHoodies-thumb {
  padding: 8px;
}

#scHoodiesProductGallery .scHoodies-thumb img {
  width: 150px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Show product names under "Choose Your Style" only */
#scHoodiesProductGallery .scHoodies-thumb div {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  color: black;
}

/* --- Choose Your Style: show product names under images --- */
#scHoodiesProductGallery .scHoodies-thumb {
  display: flex;
  flex-direction: column;      /* stack image over text */
  align-items: center;
  justify-content: flex-start;
  overflow: visible;           /* don't clip the label */
}

#scHoodiesProductGallery .scHoodies-thumb img {
  margin-bottom: 6px;          /* little gap above the name */
}

#scHoodiesProductGallery .scHoodies-thumb div {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
  color: #030c24;              /* tweak if needed */
}

/* --- Force product names to show under "Choose Your Style" thumbs --- */
#scHoodiesProductGallery .scHoodies-thumb {
  display: flex !important;           /* stack content vertically */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

/* Image stays on top */
#scHoodiesProductGallery .scHoodies-thumb img {
  flex: 0 0 auto;
  display: block;
  margin-bottom: 6px;
}

/* Product name text */
#scHoodiesProductGallery .scHoodies-thumb > div {
  display: block !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  white-space: normal;
  color: #030c24 !important;         /* dark navy, tweak if needed */
}

/* Position uploaded logo the same way as the crest */
#scHoodiesPreviewLogo {
  position: absolute;
  top: 37%;              /* vertical position on hoodie */
  left: 62%;             /* horizontal position – same as crest */
  transform: translate(-50%, -50%);
  
  width: 15%;            /* same visual size logic as crest */
  height: auto;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  pointer-events: none;
}


/* Make the top "Choose Your Style" section span both columns */
.scHoodies-styleFull {
  grid-column: 1 / -1;      /* full width across the grid */
  margin-bottom: 12px;
}

/* Force Adult / Child row to hug the left */
#scHoodiesAudience {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Just in case something pushed the first pill across with auto margin */
#scHoodiesAudience .scHoodies-pill:first-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================
   TOP CONTROL BAR LAYOUT
   Match mockup:
   Row 1: "Choose Adult or Child Styles" + Adult/Child buttons
   Row 2: "What is this hoodie for?" + select
   Everything else full-width under that.
   ============================ */

/* Make ONLY the main (left) card a 2-column grid */
.scHoodies-card:not(.scHoodies-card--preview) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  column-gap: 16px;
}

/* By default, everything spans full width (1st + 2nd column) */
.scHoodies-card:not(.scHoodies-card--preview) > * {
  grid-column: 1 / -1;
}

/* --- ROW 1: Adult/Child heading + buttons --- */

/* Heading that sits directly before the Adult/Child buttons */
.scHoodies-card:not(.scHoodies-card--preview)
  > h3.scHoodies-h:has(+ #scHoodiesAudience) {
  grid-column: 1 / 2;
  grid-row: 1;
  align-self: center;
  margin-bottom: 0; /* tighten gap to buttons */
}

/* Adult/Child pill row */
#scHoodiesAudience {
  grid-column: 2 / 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-start; /* buttons start at left of column */
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* --- ROW 2: "What is this hoodie for?" + select --- */

/* Heading directly before hoodie type select */
.scHoodies-card:not(.scHoodies-card--preview)
  > h3.scHoodies-h:has(+ #scHoodiesType) {
  grid-column: 1 / 2;
  grid-row: 2;
  align-self: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Hoodie type dropdown */
#scHoodiesType {
  grid-column: 2 / 3;
  grid-row: 2;
  width: 100% !important;      /* fill right column */
  max-width: 100% !important;
}

/* The HR after the top controls should sit full-width as a separator */
.scHoodies-card:not(.scHoodies-card--preview) > .scHoodies-hr {
  grid-column: 1 / -1;
}

/* Everything from "Choose Your Style" downward already spans full width
   because of the generic rule above, so no extra layout changes needed. */

/* Small screens: fall back to single column to avoid squashing */
@media (max-width: 768px) {
  .scHoodies-card:not(.scHoodies-card--preview) {
    grid-template-columns: 1fr;
  }

  .scHoodies-card:not(.scHoodies-card--preview) > *,
  #scHoodiesAudience,
  #scHoodiesType {
    grid-column: 1 / -1;
  }
}

/* =====================================
   CLEAN LAYOUT FOR NEW STRUCTURE (Dec 2025)
   ===================================== */

/* Overall two-column layout */
.scHoodies-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: flex-start;
}

/* Full width section across both columns (used for Choose Your Style) */
.scHoodies-styleFull {
  grid-column: 1 / -1;
}

/* Adult / Child row at top */
#scHoodiesAudience {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

#scHoodiesAudience .scHoodies-pill {
  min-width: 90px;
  text-align: center;
}

/* ========== Adult / Child pills ========== */
.scHoodies-audience .scHoodies-pill {
  font-size: 14px;        /* smaller text */
  padding: 8px 18px;      /* a bit less tall/wide */
  line-height: 1.2;
}


/* Choose Your Style gallery */
#scHoodiesProductGallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  justify-content: center;
}

#scHoodiesProductGallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Make the product name visible and centered */
#scHoodiesProductGallery .scHoodies-thumb div {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin-top: 4px;
}

/* Normal left column card */
.scHoodies-card {
  background: transparent;
  border: none;
  padding: 0;
}

/* Right-side preview */
.scHoodies-card--preview {
  background: transparent;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .scHoodies-grid {
    grid-template-columns: 1fr;
  }

  .scHoodies-styleFull {
    order: 2; /* keep Choose Your Style below audience if needed */
  }

  .scHoodies-card--preview {
    order: 3;
  }
}
/* === TOP HEADER LAYOUT ===================================== */

/* Container for the new top section */
.scHoodies-topHeader{
  margin-bottom: 18px;
}

/* Row 1: [Adult] [Child]    [What is this hoodie for?] */
.scHoodies-topRow1{
  display: flex;
  justify-content: space-between;   /* left + right, like the mockup */
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;                  /* stack nicely on small screens */
}

/* Left + right blocks in row 1 */
.scHoodies-topLeft,
.scHoodies-topRight{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Make sure Adult/Child buttons are left-aligned */
#scHoodiesAudience{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;      /* <— force left alignment */
}

/* Hoodie type dropdown should fill its column */
.scHoodies-topRight .scHoodies-select{
  width: 100%;
}

/* Row 2: "Choose Your Style" + gallery under the full width header */
.scHoodies-topRow2{
  margin-top: 14px;
}

.scHoodies-topRow2 .scHoodies-h{
  margin-bottom: 8px;
}

/* Keep product gallery full width under the header (we already
   control columns elsewhere, so just ensure it stretches) */
.scHoodies-topRow2 #scHoodiesProductGallery{
  width: 100%;
}

/* === RESPONSIVE TWEAKS ===================================== */
@media (max-width: 900px){
  .scHoodies-topRow1{
    flex-direction: column;
    align-items: flex-start;   /* stack Adult/Child over dropdown */
  }

  .scHoodies-topRight{
    width: 100%;
  }
}

.scHoodies-occasion-group {
  font-size: 13px;
}

.scHoodies-occasion-label {
  font-weight: 600;
  margin-bottom: 6px;
}

.scHoodies-occasion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scHoodies-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: 18px;
  line-height: 1.2;
}

.scHoodies-radio input[type="radio"] {
  margin: 0;
}

.scHoodies-radio input[type="radio"]:focus-visible + span {
  outline: 2px solid #000;
  outline-offset: 1px;
}

/* Optional: highlight the checked one with a soft glow similar to your other selections */
.scHoodies-radio input[type="radio"]:checked + span {
  font-weight: 800;
}

/* Base radio pill styling */
.scHoodies-occasion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* general style */
.scHoodies-occasion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.scHoodies-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scHoodies-radio:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.scHoodies-radio input[type="radio"] {
  display: none;
}
.scHoodies-radio input[type="radio"]:checked + span {
  text-decoration: underline;
}

/* 1) Leaving Cert */
.scHoodies-occasion-options .scHoodies-radio:nth-child(1) {
  background: #6A1B9A; /* purple */
}

/* 2) 6th Class */
.scHoodies-occasion-options .scHoodies-radio:nth-child(2) {
  background: #E91E63; /* pink/red */
}

/* 3) Transition Years */
.scHoodies-occasion-options .scHoodies-radio:nth-child(3) {
  background: #1976D2; /* blue */
}

/* 4) School Trips */
.scHoodies-occasion-options .scHoodies-radio:nth-child(4) {
  background: #FBC02D; /* yellow/gold */
  color: #000;
}

/* 5) School Shows */
.scHoodies-occasion-options .scHoodies-radio:nth-child(5) {
  background: #E91E63; /* pink/red */
}

/* 6) College */
.scHoodies-occasion-options .scHoodies-radio:nth-child(6) {
  background: #1976D2; /* blue */
}

/* 7) Companies */
.scHoodies-occasion-options .scHoodies-radio:nth-child(7) {
  background: #FBC02D; /* yellow/gold */
  color: #000;
}

/* 8) Promotions */
.scHoodies-occasion-options .scHoodies-radio:nth-child(8) {
  background: #E91E63; /* pink/red */
}

/* 9) Teams */
.scHoodies-occasion-options .scHoodies-radio:nth-child(9) {
  background: #6A1B9A; /* purple */
}

/* 10) Societies */
.scHoodies-occasion-options .scHoodies-radio:nth-child(10) {
  background: #1976D2; /* blue */
}

.scHoodies-logoSize-group {
  margin-top: 10px;
  margin-bottom: 10px;
}

.scHoodies-logoSize-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Logo size / type pills: Embroidery / Small / Large */
.scHoodies-logoSize-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scHoodies-logoSize-options .scHoodies-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: #E91E63;          /* default (first pill) */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.scHoodies-logoSize-options .scHoodies-radio:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* hide the native radio dot */
.scHoodies-logoSize-options .scHoodies-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* underline when selected (like your other pills) */
.scHoodies-logoSize-options .scHoodies-radio input[type="radio"]:checked + span {
  text-decoration: underline;
}

/* Colours per option to match the screenshot: 
   1 = pink, 2 = blue, 3 = yellow */
.scHoodies-logoSize-options .scHoodies-radio:nth-child(1) {
  background: #E91E63;  /* pink */
  color: #fff;
}
.scHoodies-logoSize-options .scHoodies-radio:nth-child(2) {
  background: #1976D2;  /* blue */
  color: #fff;
}
.scHoodies-logoSize-options .scHoodies-radio:nth-child(3) {
  background: #FBC02D;  /* yellow */
  color: #000;          /* black text for contrast */
}

/* Logo size / crest size / initials / back colour pills */
.scHoodies-logoSize-options,
.scHoodies-crestSize-options,
.scHoodies-initials-options,
.scHoodies-backColour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* base pill style */
.scHoodies-logoSize-options .scHoodies-radio,
.scHoodies-crestSize-options .scHoodies-radio,
.scHoodies-initials-options .scHoodies-radio,
.scHoodies-backColour-options .scHoodies-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: #E91E63;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.scHoodies-logoSize-options .scHoodies-radio:hover,
.scHoodies-crestSize-options .scHoodies-radio:hover,
.scHoodies-initials-options .scHoodies-radio:hover,
.scHoodies-backColour-options .scHoodies-radio:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* hide native radio */
.scHoodies-logoSize-options .scHoodies-radio input[type="radio"],
.scHoodies-crestSize-options .scHoodies-radio input[type="radio"],
.scHoodies-initials-options .scHoodies-radio input[type="radio"],
.scHoodies-backColour-options .scHoodies-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* underline selected */
.scHoodies-logoSize-options .scHoodies-radio input[type="radio"]:checked + span,
.scHoodies-crestSize-options .scHoodies-radio input[type="radio"]:checked + span,
.scHoodies-initials-options .scHoodies-radio input[type="radio"]:checked + span,
.scHoodies-backColour-options .scHoodies-radio input[type="radio"]:checked + span {
  text-decoration: underline;
}

/* Specific colours for back design colour options */
/* 1) White */
.scHoodies-backColour-options .scHoodies-radio:nth-child(1) {
  background: #FFFFFF;
  color: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

/* 2) Black */
.scHoodies-backColour-options .scHoodies-radio:nth-child(2) {
  background: #000000;
  color: #fff;
}

/* 3) Red */
.scHoodies-backColour-options .scHoodies-radio:nth-child(3) {
  background: #F44336;
}

/* 4) Orange */
.scHoodies-backColour-options .scHoodies-radio:nth-child(4) {
  background: #FF9800;
}

/* 5) Yellow */
.scHoodies-backColour-options .scHoodies-radio:nth-child(5) {
  background: #FFEB3B;
  color: #000;
}

/* 6) Green */
.scHoodies-backColour-options .scHoodies-radio:nth-child(6) {
  background: #4CAF50;
}

/* 7) Blue */
.scHoodies-backColour-options .scHoodies-radio:nth-child(7) {
  background: #2196F3;
}

/* 8) Purple */
.scHoodies-backColour-options .scHoodies-radio:nth-child(8) {
  background: #9C27B0;
}

/* 9) Pink */
.scHoodies-backColour-options .scHoodies-radio:nth-child(9) {
  background: #E91E63;
}


.scHoodies-previewNote {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #000000;
  opacity: 0.8;
}

/* Occasion (What is this hoodie for?) – multi-colour pills */
.scHoodies-occasion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scHoodies-occasion-options .scHoodies-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 8px 14px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.scHoodies-occasion-options .scHoodies-radio input {
  display: none;
}

/* When selected, add a subtle pop */
.scHoodies-occasion-options .scHoodies-radio input:checked + span {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Individual colour themes */
.scHoodies-occasion-options .scHoodies-radio:nth-child(1) span { background:#2196F3; }  /* Blue */
.scHoodies-occasion-options .scHoodies-radio:nth-child(2) span { background:#8E24AA; }  /* Purple */
.scHoodies-occasion-options .scHoodies-radio:nth-child(3) span { background:#E91E63; }  /* Pink */
.scHoodies-occasion-options .scHoodies-radio:nth-child(4) span { background:#FFD600; color:#000; } /* Yellow */
.scHoodies-occasion-options .scHoodies-radio:nth-child(5) span { background:#4CAF50; }  /* Green */
.scHoodies-occasion-options .scHoodies-radio:nth-child(6) span { background:#FF9800; }  /* Orange */
.scHoodies-occasion-options .scHoodies-radio:nth-child(7) span { background:#03A9F4; }  /* Sky Blue */
.scHoodies-occasion-options .scHoodies-radio:nth-child(8) span { background:#9C27B0; }  /* Deep Purple */
.scHoodies-occasion-options .scHoodies-radio:nth-child(9) span { background:#F44336; }  /* Red */
.scHoodies-occasion-options .scHoodies-radio:nth-child(10) span { background:#000; }    /* Black */

/* === OCCASION PILLS – FORCE COLOURS BACK === */

/* Container layout */
.scHoodies-occasion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* === FINAL OVERRIDE: "What is this hoodie for?" pills === */
/* Put THIS at the very end of your CSS file */

.scHoodies-occasion-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Base pill for occasion row ONLY */
.scHoodies-occasion-options .scHoodies-radio {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #E91E63 !important;  /* default pink */
  color: #fff !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Make sure span isn't keeping an old background */
.scHoodies-occasion-options .scHoodies-radio span {
  background: transparent !important;
  color: inherit !important;
  display: inline-block;
}

/* Hide the native radio dots for this row only */
.scHoodies-occasion-options .scHoodies-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hover effect */
.scHoodies-occasion-options .scHoodies-radio:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Selected: underline text */
.scHoodies-occasion-options .scHoodies-radio input[type="radio"]:checked + span {
  text-decoration: underline;
}

/* === Individual colours – order matches your HTML === */

/* 1) Leaving Cert – purple */
.scHoodies-occasion-options .scHoodies-radio:nth-child(1) {
  background: #6A1B9A !important;
  color: #fff !important;
}

/* 2) 6th Class – pink */
.scHoodies-occasion-options .scHoodies-radio:nth-child(2) {
  background: #E91E63 !important;
  color: #fff !important;
}

/* 3) Transition Years – blue */
.scHoodies-occasion-options .scHoodies-radio:nth-child(3) {
  background: #1976D2 !important;
  color: #fff !important;
}

/* 4) School Trips – yellow (dark text) */
.scHoodies-occasion-options .scHoodies-radio:nth-child(4) {
  background: #FBC02D !important;
  color: #000 !important;
}

/* 5) School Shows – pink */
.scHoodies-occasion-options .scHoodies-radio:nth-child(5) {
  background: #E91E63 !important;
  color: #fff !important;
}

/* 6) College – blue */
.scHoodies-occasion-options .scHoodies-radio:nth-child(6) {
  background: #1976D2 !important;
  color: #fff !important;
}

/* 7) Companies – yellow */
.scHoodies-occasion-options .scHoodies-radio:nth-child(7) {
  background: #FBC02D !important;
  color: #000 !important;
}

/* 8) Promotions – pink */
.scHoodies-occasion-options .scHoodies-radio:nth-child(8) {
  background: #E91E63 !important;
  color: #fff !important;
}

/* 9) Teams – purple */
.scHoodies-occasion-options .scHoodies-radio:nth-child(9) {
  background: #6A1B9A !important;
  color: #fff !important;
}

/* 10) Societies – blue */
.scHoodies-occasion-options .scHoodies-radio:nth-child(10) {
  background: #1976D2 !important;
  color: #fff !important;
}

/* Make the front logo preview 50% smaller */
#scHoodiesPreviewLogo {
  max-width: 30% !important;   /* was effectively 60% via .scHoodies-overlay img */
  max-height: 30% !important;
}

/* Base back image */
#scHoodiesPreviewBack {
  transition: filter 0.3s ease, brightness 0.3s ease;
}

/* Red */
#scHoodiesPreviewBack.color-red {
  filter: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(7486%) hue-rotate(359deg) brightness(100%) contrast(121%);
}

/* Orange */
#scHoodiesPreviewBack.color-orange {
  filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(4400%) hue-rotate(2deg) brightness(102%) contrast(105%);
}

/* Yellow */
#scHoodiesPreviewBack.color-yellow {
  filter: brightness(0) saturate(100%) invert(82%) sepia(76%) saturate(379%) hue-rotate(356deg) brightness(105%) contrast(102%);
}

/* Green */
#scHoodiesPreviewBack.color-green {
  filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(381%) hue-rotate(88deg) brightness(96%) contrast(93%);
}

/* Blue */
#scHoodiesPreviewBack.color-blue {
  filter: brightness(0) saturate(100%) invert(35%) sepia(88%) saturate(5583%) hue-rotate(197deg) brightness(100%) contrast(101%);
}

/* Purple */
#scHoodiesPreviewBack.color-purple {
  filter: brightness(0) saturate(100%) invert(18%) sepia(91%) saturate(2694%) hue-rotate(271deg) brightness(97%) contrast(101%);
}

/* Pink */
#scHoodiesPreviewBack.color-pink {
  filter: brightness(0) saturate(100%) invert(44%) sepia(65%) saturate(2000%) hue-rotate(308deg) brightness(95%) contrast(103%);
}

/* White – fully invert black art and brighten it */
#scHoodiesPreviewBack.color-white {
  filter: invert(1) brightness(1.8) saturate(0);
}


/* Black */
#scHoodiesPreviewBack.color-black {
  filter: brightness(0%);
}

/* Hide the old Invert Back Design button from users */
#monoBtn {
  display: none !important;
}

/* Crest gallery wrapper */
#scHoodiesCrestWrap {
  margin-top: 18px;
}

/* Crest gallery uses same layout as other galleries */
#scHoodiesCrestGallery {
  margin-top: 10px;
}

/* Add-ons block */
#scHoodiesAddons {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* Individual add-on row */
.scHoodies-addon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Make add-on checkboxes sit at the end */
.scHoodies-addon input[type="checkbox"] {
  margin-left: auto;
}

/* Hide text labels under images in "Choose a Front Crest Design" only */
#scHoodiesCrestGallery .scHoodies-thumb div {
  display: none;
}
/* Make crest gallery images larger */
#scHoodiesCrestGallery .scHoodies-thumb img {
  width: 120px;       /* increase from ~80px default */
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

/* Slight zoom on hover for a better UX */
#scHoodiesCrestGallery .scHoodies-thumb:hover img {
  transform: scale(1.05);
}

/* Make back design images larger */
#scHoodiesBackGallery .scHoodies-thumb img {
  width: 120px;      /* tweak this up/down as you like */
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

/* Slight zoom on hover */
#scHoodiesBackGallery .scHoodies-thumb:hover img {
  transform: scale(1.05);
}

/* Neat spacing between back design thumbnails */
#scHoodiesBackGallery {
  display: flex;        /* keep them in a row that wraps */
  flex-wrap: wrap;
  gap: 10px;            /* space between the images */
}

/* Remove extra margins so the gap does the work */
#scHoodiesBackGallery .scHoodies-thumb {
  margin: 0;
}

/* Smooth transition when changing back design colour */
#scHoodiesPreviewBack {
  transition: filter 0.2s ease;
}

/* Approximate tints for each back design colour option */
#scHoodiesPreviewBack.scBackColour-Red {
  filter: invert(17%) sepia(86%) saturate(7479%) hue-rotate(-2deg) brightness(96%) contrast(108%);
}
#scHoodiesPreviewBack.scBackColour-Orange {
  filter: invert(53%) sepia(94%) saturate(1658%) hue-rotate(-1deg) brightness(101%) contrast(103%);
}
#scHoodiesPreviewBack.scBackColour-Yellow {
  filter: invert(79%) sepia(96%) saturate(749%) hue-rotate(-14deg) brightness(104%) contrast(103%);
}
#scHoodiesPreviewBack.scBackColour-Green {
  filter: invert(54%) sepia(98%) saturate(457%) hue-rotate(88deg) brightness(95%) contrast(96%);
}
#scHoodiesPreviewBack.scBackColour-Blue {
  filter: invert(32%) sepia(97%) saturate(1862%) hue-rotate(186deg) brightness(95%) contrast(98%);
}
#scHoodiesPreviewBack.scBackColour-Purple {
  filter: invert(29%) sepia(81%) saturate(1066%) hue-rotate(261deg) brightness(93%) contrast(104%);
}
#scHoodiesPreviewBack.scBackColour-Pink {
  filter: invert(53%) sepia(88%) saturate(1189%) hue-rotate(311deg) brightness(104%) contrast(104%);
}
#scHoodiesPreviewBack.scBackColour-White {
  /* turn the design white */
  filter: invert(100%) brightness(200%);
}
#scHoodiesPreviewBack.scBackColour-Black {
  /* original black design */
  filter: none;
}

/* Make gallery images square (don’t affect pill / card backgrounds) */
.scHoodies-thumb img {
  border-radius: 0 !important;  /* remove rounding from the image itself */
}

/* Make sure the parent isn't clipping the image corners */
.scHoodies-thumb {
  overflow: visible;
}

/* Layout + spacing for "Choose a Front Crest Design" */
#scHoodiesCrestGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;              /* space BETWEEN each image */
  padding: 8px 10px;      /* space inside the white container */
  justify-content: flex-start;  /* ⬅ left-align the gallery */
}

/* Make each crest tile a neat, uniform box */
#scHoodiesCrestGallery .scHoodies-thumb {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

/* Ensure all crest images fit perfectly inside the box */
#scHoodiesCrestGallery .scHoodies-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 0 !important;
}

.scHoodies-addons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.scHoodies-addonRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scHoodies-addonPreview img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.scHoodies-addons{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.scHoodies-addonCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
  cursor:pointer;
}

.scHoodies-addonImgWrap{
  flex:0 0 150px;
}

.scHoodies-addonImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

.scHoodies-addonText{
  flex:1 1 auto;
  font-size:13px;
}

.scHoodies-addonTitle{
  font-weight:600;
  margin-bottom:2px;
}

.scHoodies-addonPrice{
  font-size:12px;
  opacity:0.8;
}

.scHoodies-addonCheckbox{
  flex:0 0 auto;
  width:18px;
  height:18px;
}

.scHoodies-addonDesc{
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
  line-height: 1.3;
}

.scHoodies-addonCard{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.scHoodies-addonImgWrap img{
  max-width:70px;
  display:block;
}

.scHoodies-addonText{
  flex:1;
  font-size:13px;
}

.scHoodies-addonTitle{
  font-weight:600;
  margin-bottom:2px;
}

.scHoodies-addonDesc{
  font-size:12px;
  opacity:0.8;
  line-height:1.3;
}

/* Add-ons grid: 4 columns on desktop */
.scHoodies-addonsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Stack on smaller screens */
@media (max-width: 900px){
  .scHoodies-addonsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .scHoodies-addonsGrid{
    grid-template-columns: 1fr 1fr;
  }
}

.scHoodies-addonCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

/* Hide raw checkbox, we’ll still use it for state */
.scHoodies-addonCard input.scHoodies-addonCheckbox{
  margin-top: 4px;
}

/* Image wrapper */
.scHoodies-addonImgWrap{
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.scHoodies-addonImg{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Text */
.scHoodies-addonTitle{
  font-size: 13px;
  font-weight: 600;
}

/* Make add-on thumbnails bigger */
#scHoodiesAddons .scHoodies-addonImgWrap{
  width: 120px;   /* was 70px or similar */
  height: 120px;
}

#scHoodiesAddons .scHoodies-addonImg{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Back designs → 6 per row */
#scHoodiesBackGallery{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; /* adjust if you want tighter/looser spacing */
}


/* Make sure the images look normal */
#scHoodiesBackGallery .scHoodies-thumb img{
  width: 100%;
  height: auto;           /* important: no fixed height */
  object-fit: contain;    /* or 'cover' if you prefer */
}

/* FINAL OVERRIDE: Back designs – 6 per row */
#scHoodiesBackGallery{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#scHoodiesBackGallery .scHoodies-thumb{
  max-width: none !important;
}

/* === Logo style pills – match Upload / Clear Logo buttons === */

/* Base pill – looks like Clear Logo (unselected) */
.scHoodies-logoSize-options .scHoodies-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;      /* bigger button */
  border-radius: 6px;
  border: 1px solid #007AC3;
  background: #FFFFFF;         /* Clear Logo look */
  color: #007AC3;
  font-size: 1rem;             /* larger text */
  font-weight: 600;
  cursor: pointer;
  gap: 6px;
  transition: all 0.25s ease;
}

/* Hide the native radio dot */
.scHoodies-logoSize-options .scHoodies-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selected pill – match Upload Logo button */
.scHoodies-logoSize-options .scHoodies-radio:has(input[type="radio"]:checked) {
  background: #007AC3;         /* blue */
  color: #FFFFFF;              /* white text */
  border-color: #007AC3;
  box-shadow: 0 2px 6px rgba(0,122,195,0.25);
}

/* Hover state */
.scHoodies-logoSize-options .scHoodies-radio:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* When one is selected, all the others look like Clear Logo */
.scHoodies-logoSize-options:has(input[type="radio"]:checked)
  .scHoodies-radio:not(:has(input[type="radio"]:checked)) {
  background: #FFFFFF;
  color: #007AC3;
  border-color: rgba(0,0,0,0.12);  /* softer border */
  box-shadow: none;
}

/* Front Crest gallery – 6 across on desktop */
#scHoodiesCrestGallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* mobile / small screens */
}

@media (min-width: 900px) {
  #scHoodiesCrestGallery {
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 across on desktop */
  }
}

/* Disable state for Child button when occasion is not Sixth Class */
.scHoodies-pill.scHoodies-pill--disabled,
.scHoodies-pill[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none; /* JS still keeps state correct, this just blocks clicks */
}

.scHoodies-note--noCrest {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
  display: inline-block;
}

/* Wrap row nicely */
#scHoodiesOccasion {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Base pill */
#scHoodiesOccasion .scHoodies-pill--occasion {
  --pill-bg: #007acc;                 /* fallback */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  min-width: 190px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  background: var(--pill-bg);
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* hide native radio */
#scHoodiesOccasion .scHoodies-pill--occasion input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#scHoodiesOccasion .scHoodies-pill--occasion span {
  pointer-events: none;
}

/* colours per option */
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(1) { --pill-bg:#e91e63; } /* 6th Class */
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(2),
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(6) { --pill-bg:#007acc; } /* Transition / College */
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(3) { --pill-bg:#673ab7; } /* Leaving Cert */
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(4) { --pill-bg:#e91e63; } /* School Shows */
#scHoodiesOccasion .scHoodies-pill--occasion:nth-child(5) { --pill-bg:#ffc107; } /* School Trips */

#scHoodiesOccasion .scHoodies-pill--occasion:hover {
  filter: brightness(1.05);
}

/* INVERTED when selected */
#scHoodiesOccasion .scHoodies-pill--occasion.is-selected {
  background: #fff;
  color: var(--pill-bg);
  border-color: var(--pill-bg);
}

/* Heading: "Choose Adult or Child Styles" */
.scHoodies-toprow-right h3 {
  font-size: 16px;   
  font-weight: 500;  
  color: black;
}

.scHoodies-previewColour {
  text-align: center;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
}

#scHoodiesPreviewColourLabel {
  font-weight: 600;
  color: #000;
}


/* Embroidery + Small front print – same sizing/position */
#scHoodiesPreviewCrest.crestPos-embroidery,
#scHoodiesPreviewCrest.crestPos-small {
  top: 37%;
  left: 62%;
  width: 10%;
  transform: translate(-30%, -30%);
}

/* Large front print – big centre chest print */
#scHoodiesPreviewCrest.crestPos-large {
  width: 200px;           
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Nudge back design lower on the hoodie */
#scHoodiesPreviewBack {
  transform: translate(-50%, -35%) scale(1);
}

label[for="scHoodiesLogo"].scHoodies-uploadDisabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ONLY for The Classic */
.is-classic #scHoodiesPreviewCrest.crestPos-embroidery,
.is-classic #scHoodiesPreviewCrest.crestPos-small{
  top: 42% !important;
  left: 62% !important;
  width: 10% !important;
  transform: translate(-50%, -50%) !important;
}

/* ONLY for The Classic */
.is-classic #scHoodiesPreviewCrest.crestPos-large{
 width: 200px;           
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ONLY for The Sweatshirt */
.scHoodies-wrap.is-sweatshirt #scHoodiesPreviewCrest.crestPos-embroidery,
.scHoodies-wrap.is-sweatshirt #scHoodiesPreviewCrest.crestPos-small{
  top: 34% !important;        /* adjust up/down */
  left: 62% !important;
  width: 10% !important;
  transform: translate(-50%, -50%) !important;
}

/* ONLY for The Sweatshirt */
.scHoodies-wrap.is-sweatshirt #scHoodiesPreviewCrest.crestPos-large{
  top: 38% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}