/* SCG Configurator v7 — frontend.css */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

/* ─── Variables ─────────────────────────────── */
#scg-wrap {
  --gold:  #e8d15f;
  --black: #111111;
  --mid:   rgba(17,17,17,.65);
  --dim:   rgba(17,17,17,.22);
  --bdr:   rgba(17,17,17,.2);
  --sans:  'Work Sans',system-ui,-apple-system,sans-serif;
  --serif: 'brolimo',Georgia,'Times New Roman',serif;
  --maxw:  1440px;
  --pad:   clamp(12px,3vw,40px);
  --gap:   clamp(12px,2vw,24px);
  --r:     20px;
  --t:     .3s ease;
}

/* ─── Scope reset ────────────────────────────── */
#scg-wrap,#scg-wrap*{box-sizing:border-box!important}
#scg-wrap{display:block!important;position:relative!important;isolation:isolate;
  font-family:var(--sans)!important;font-size:16px!important;
  color:var(--black)!important;line-height:1.5!important;width:100%!important;float:none!important;
  max-width:100%!important}
#scg-wrap button{border:none!important;background:none!important;cursor:pointer!important;
  padding:0!important;font-family:inherit!important}
#scg-wrap img{display:block!important;max-width:100%!important}
#scg-wrap h2,#scg-wrap h3,#scg-wrap p,#scg-wrap span
  {margin:0!important;padding:0!important}

/* ─── Utility ────────────────────────────────── */
#scg-wrap .scg-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* ─── Nav row: back LEFT + dots CENTER ──────────── */
#scg-wrap .scg-nav-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:30px var(--pad) 0!important;
  max-width:var(--maxw)!important;
  margin:0 auto!important;
  width:100%!important;
  position:relative!important}
#scg-wrap .scg-nav-row {
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
/* Spacer mirrors the back button width so dots stay centered */
#scg-wrap .scg-nav-spacer{
  min-width:90px!important;
  flex-shrink:0!important}

/* ─── Back button — pill with border, matches ref ── */
#scg-wrap .scg-back{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 18px!important;
  border:1.5px solid var(--black)!important;
  border-radius:50px!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--black)!important;
  cursor:pointer!important;
  transition:background var(--t),color var(--t)!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
  min-width:90px!important}
#scg-wrap .scg-back:hover{background:var(--black)!important;color:#fff!important}
#scg-wrap .scg-back svg{flex-shrink:0!important;transform:scaleX(-1)!important}
#scg-wrap .scg-back.scg-hidden{visibility:hidden!important;pointer-events:none!important}

/* ─── Nav dots ─────────────────────────────────── */
#scg-wrap .scg-nav{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  flex:1!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
    padding-bottom: 25px !important;

}
#scg-wrap .scg-dot{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#111 !important;
  transition:color var(--t)!important;
  flex-shrink:0!important}
#scg-wrap .scg-dot:not(:last-child)::after{
  content:''!important;
  display:block!important;
  width:30px!important;
  height:1px!important;
  background:currentColor!important;
  flex-shrink:0!important}
#scg-wrap .scg-dot svg{width:25px!important;height:25px!important;flex-shrink:0!important}
#scg-wrap .scg-dot--on{color:var(--gold)!important}
#scg-wrap .scg-dot--on:not(:last-child)::after{background:var(--black)!important}
@media(min-width:480px){#scg-wrap .scg-dot svg{width:30px!important;height:30px!important}}
@media(min-width:768px){
  #scg-wrap .scg-dot:not(:last-child)::after{width:90px!important}
  #scg-wrap .scg-nav{gap:0!important}}

/* ─── Steps — CLASS BASED SHOW/HIDE ─────────────
   Lower rule has HIGHER specificity → always wins  */
#scg-wrap .scg-step{display:none!important}
#scg-wrap .scg-step.scg-active{display:block!important;
  animation:scg-up .4s cubic-bezier(.22,1,.36,1) both!important}
@keyframes scg-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ─── Inner container ────────────────────────── */
/* ─── Inner container (wraps all step grids) ─── */

#scg-wrap .scg-inner {
  display: block !important;
  float: none !important;
  max-width: min(var(--maxw), 100%) !important; /* --maxw = 1280px */
  margin: 0 auto !important;
  padding: 16px var(--pad) clamp(32px, 5vw, 60px) !important;
  width: 100% !important;
}

/* ─── Step heading (alignment ensured inline too) */
#scg-wrap .scg-hd{display:block!important;float:none!important;width:100%!important;
  text-align:center!important;margin-bottom:40px!important}
#scg-wrap .scg-hd-title{display:block!important;float:none!important;width:100%!important;
  text-align:center!important;font-family:var(--serif)!important;
  font-size:clamp(32px,5vw,60px)!important;font-weight:400!important;line-height:1.05!important;
  letter-spacing:-.01em!important;color:var(--black)!important;margin:0 0 .35em!important}
#scg-wrap .scg-hd-sub{display:block!important;float:none!important;width:100%!important;
  text-align:center!important;font-size:clamp(15px,1.8vw,24px)!important;
  color:#111 !important;max-width:840px!important;
  margin:0 auto!important;line-height:1.3 !important}

/* ─── Card grid ──────────────────────────────── */
/* ─── Card grid (category / subcategory / product) ─── */
#scg-wrap .scg-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--gap) !important;
  width: 100% !important;
  max-width: var(--maxw) !important; /* 1280px cap on the grid itself */
  margin: 0 auto !important;         /* centres it if inner is wider */
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}
/* ─── Card sizing (2-col → 3-col → 4-col) ────── */
/* Base: 2 columns */
#scg-wrap .scg-grid .scg-card {
  flex: 0 0 calc(50% - var(--gap)) !important;
  min-width: 0 !important;
  max-width: 360px !important;
}


/* 768px+: 3-col and 4-col grids kick in */
@media (min-width: 768px) {
  #scg-wrap .scg-grid--3 .scg-card {
    flex: 0 0 calc(33.333% - var(--gap)) !important;
    max-width: 320px !important;
  }
  #scg-wrap .scg-grid--4 .scg-card {
    flex: 0 0 calc(50% - var(--gap)) !important;
    max-width: 320px !important;
  }
}

/* 1024px+: full desktop widths, capped inside 1280px */
@media (min-width: 1024px) {
  #scg-wrap .scg-grid--3 .scg-card {
    flex: 0 0 calc(33.333% - var(--gap)) !important;
    max-width: 33.33% !important;
  }
  #scg-wrap .scg-grid--4 .scg-card {
    flex: 0 0 calc(23% - var(--gap)) !important;
    max-width: 360px !important;
  }
}

/* ─── Card ────────────────────────────────────── */
#scg-wrap .scg-card{display:block!important;overflow:hidden!important;min-width:0!important}
#scg-wrap .scg-card-btn{display:block!important;width:100%!important;
  text-align:center!important;cursor:pointer!important;overflow:hidden!important;min-width:0!important}
#scg-wrap .scg-card-btn:focus{outline:none!important}
#scg-wrap .scg-card-btn:focus-visible .scg-card-img{border-color:var(--black)!important;border-width:2px!important}

/* Square image using padding-top hack (100% aspect ratio, works on div+all browsers) */
#scg-wrap .scg-card-img{display:block!important;width:100%!important;
  position:relative!important;padding-top:100%!important;
  overflow:hidden!important;border-radius:var(--r)!important;
  border:1px solid transparent!important;background:#ffffff!important;
  margin-bottom:14px!important;transition:border-color var(--t)!important}
#scg-wrap .scg-card-img img{position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;object-fit:cover!important;
  object-position:center!important;display:block!important}
#scg-wrap .scg-card-ph{position:absolute!important;inset:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important}

/* Bordered (Step 3 products — contain) */
#scg-wrap .scg-card-img--bd{
  border:1px solid rgba(17,17,17,.15)!important;
  border-radius:var(--r)!important;
  background:#ffffff!important}
#scg-wrap .scg-card-img--bd img{object-fit:contain!important}

@media(min-width:768px){
  #scg-wrap .scg-card-img{margin-bottom:18px!important}
  #scg-wrap .scg-card-btn:hover .scg-card-img,
  #scg-wrap .scg-card-btn:focus-within .scg-card-img{border-color:var(--black)!important}}

/* Card label */
#scg-wrap .scg-card-lbl{display:block!important;width:100%!important;max-width:100%!important;
  text-align:center!important;
  font-family:var(--serif)!important;
  font-size:clamp(16px,2vw,26px)!important;
  font-weight:400!important;
  color:var(--black)!important;
  line-height:1.25!important;
  word-wrap:break-word!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
  overflow:hidden!important;
  padding:0 6px!important;
  box-sizing:border-box!important}
#scg-wrap .scg-card-sub{display:block!important;width:100%!important;max-width:100%!important;
  text-align:center!important;
  font-family:var(--serif)!important;
  font-size:clamp(14px,1.6vw,22px)!important;
  font-weight:400!important;
  color:#111 !important;
  margin-top:4px!important;
  word-wrap:break-word!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
  overflow:hidden!important;
  padding:0 6px!important;
  box-sizing:border-box!important}

/* ─── Step 4 product detail wrap ─────────────── */
#scg-wrap .scg-s4-wrap {
  display: block !important;
  width: 100% !important;
  max-width: var(--maxw) !important; /* 1280px */
  margin: 0 auto !important;
  float: none !important;
  padding: 20px var(--pad) clamp(40px, 6vw, 80px) !important;
}

@media(min-width:1024px){
  #scg-wrap .scg-s4-wrap{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    gap:40px!important}

  /* LEFT — equal 50%, STICKY. Parent has no overflow so this works. */
  #scg-wrap .scg-s4-left{
    flex:0 0 calc(50% - 20px)!important;
    min-width:0!important;
    position:sticky!important;
    top:80px!important;
    align-self:flex-start!important}

  /* RIGHT — equal 50%, natural scroll */
  #scg-wrap .scg-s4-right{
    flex:0 0 calc(50% - 20px)!important;
    min-width:0!important;
    align-self:flex-start!important}}

#scg-wrap .scg-s4-left{padding-top:0!important}

/* Image box — clean card */
#scg-wrap .scg-s4-box{
  display:block!important;
  padding:24px!important;
  border:1px solid rgba(17,17,17,.12)!important;
  border-radius:16px!important;
  background:#fff !important}

/* Limit image height so it doesn't dominate the panel */
#scg-wrap .scg-s4-box img{
  display:block!important;width:100%!important;
  max-height:450px!important;
  object-fit:contain!important;
  border-radius:8px!important}

/* ★ Step 4 product title — large serif, matches reference site */
#scg-wrap .scg-s4-title{display:block!important;font-family:var(--serif)!important;
  font-size:clamp(24px,3vw,38px)!important;font-weight:400!important; 
  line-height:1.1!important;color:var(--black)!important;margin:0px 0 6px!important}

/* ★ Step 4 hinged/configuration label */
#scg-wrap .scg-s4-hinged{display:block!important;font-size:24px!important;
  color:#111!important;margin:0 0 24px!important;font-family:var(--sans)!important}

#scg-wrap .scg-s4-box img,
#scg-wrap .scg-s4-img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:8px!important}
#scg-wrap .scg-s4-ph{display:flex!important;align-items:center!important;
  justify-content:center!important;min-height:200px!important;
  background:#f4f4ee!important;border-radius:12px!important}

@media (max-width: 767px) {
  #scg-wrap .scg-nav-row {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
margin-bottom:34px !important;
  }

  #scg-wrap .scg-back {
    position: absolute !important;
    left:unset !important;
margin-top: 80px;
margin-bottom:10px;
  }

  #scg-wrap .scg-nav-spacer {
    display: none !important;
  }
#scg-wrap .scg-s4-box {
    margin-bottom: 20px !important;
}
div#scg-s1 {
    margin-top: -45px;
}
}

@media (min-width: 1024px) {

#scg-wrap .scg-grid--3 .scg-card:only-child,
#scg-wrap .scg-grid--3:has(.scg-card:nth-child(2)):not(:has(.scg-card:nth-child(3))) .scg-card {
  max-width: 320px !important;
}
}
/* ─── Form loading / error ───────────────────── */
#scg-wrap .scg-load{display:flex!important;align-items:center!important;
  gap:12px!important;padding:32px 0!important;color:var(--mid)!important;font-size:15px!important}
#scg-wrap .scg-load.scg-hidden{display:none!important}
#scg-wrap .scg-spinner{display:block!important;width:22px!important;height:22px!important;
  border:2px solid rgba(17,17,17,.1)!important;border-top-color:var(--gold)!important;
  border-radius:50%!important;animation:scg-spin .75s linear infinite!important;flex-shrink:0!important}
@keyframes scg-spin{to{transform:rotate(360deg)}}
#scg-wrap .scg-err{padding:20px 0!important;font-size:15px!important;
  color:#b00!important;line-height:1.6!important}
/* Step 4 — product title ABOVE columns, centered */
#scg-wrap .scg-s4-head{display:block!important;text-align:center!important;
  padding:0 var(--pad) 24px!important;max-width:var(--maxw)!important;margin:0 auto!important}
#scg-wrap .scg-s4-title{display:block!important;font-family:var(--serif)!important;
  font-size:clamp(28px,4vw,56px)!important;font-weight:400!important;
  line-height:1.05!important;letter-spacing:-.01em!important;
  color:var(--black)!important;margin:0 0 .25em!important;text-align:center!important}
#scg-wrap .scg-s4-hinged{display:block!important;font-size:clamp(15px,1.8vw,24px)!important;
  color:#111!important;margin:0!important;font-family:var(--sans)!important;
  text-align:center!important;font-weight:400!important}

@media (min-width:768px){
#scg-wrap .scg-dot:not(:last-child)::after {
  margin: 0 6px !important;
    margin-left: -8px !important;
}
}