/* Embedded WordPress layout
 * Keeps the configurator inside its parent and lets content determine height.
 */
.hcc-app.hcc-embedded{
  position:relative;
  display:block;
  width:100%;
  max-width:min(100%,var(--hcc-max-width,100%));
  height:auto;
  min-width:0;
  min-height:0;
  margin-inline:auto;
  overflow-x:clip;
  overflow-y:visible;
  container:hcc / inline-size;
  box-sizing:border-box;
}
.hcc-embedded .hcc-intro h2,
.hcc-embedded .hcc-panel-title h2,
.hcc-modal h2,
.hcc-info-modal h2,
.hcc-disclaimer h2{
  font-family:Styaplus,Stya,"Stya local",var(--hcc-font,Arial,sans-serif)!important;
  font-weight:100!important;
  font-variant-caps:normal!important;
  text-transform:none!important;
}
.hcc-embedded .hcc-intro h2{color:#fff!important}
.hcc-embedded .hcc-photo-info h2{
  font-family:var(--hcc-font,Arial,sans-serif)!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}
.hcc-embedded .hcc-shell,
.hcc-embedded .hcc-config-shell,
.hcc-embedded .hcc-stage,
.hcc-embedded .hcc-panel{
  position:relative;
  width:100%;
  max-width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-height:none;
}
.hcc-embedded .hcc-shell{margin:0;background:#fff}
.hcc-embedded .hcc-config-shell{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr);
  align-items:start;
}
.hcc-embedded .hcc-stage,.hcc-embedded .hcc-panel{align-self:start}
.hcc-embedded .hcc-panel{container:hcc-panel / inline-size}
.hcc-embedded .hcc-stage{width:calc(100% - 8px);margin:8px 0 8px 8px}
.hcc-embedded .hcc-panel{width:calc(100% - 16px);margin:8px;overflow:visible}
.hcc-embedded .hcc-panel-scroll{min-height:0;max-height:none;overflow:visible}
.hcc-embedded .hcc-photo{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  max-height:var(--hcc-media-max,720px);
  aspect-ratio:16 / 10;
  overflow:hidden;
}
.hcc-embedded .hcc-photo>img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
}
.hcc-embedded .hcc-photo-info{position:relative;left:auto;right:auto;bottom:auto}
.hcc-embedded .hcc-mobile-head,
.hcc-embedded .hcc-progress,
.hcc-embedded .hcc-total{position:relative!important;top:auto;bottom:auto}
.hcc-embedded .hcc-models{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.hcc-embedded .hcc-options,.hcc-embedded .hcc-total-actions{min-width:0}
.hcc-embedded .hcc-option,.hcc-embedded .hcc-group,.hcc-embedded .hcc-panel-scroll>*{max-width:100%;min-width:0}
.hcc-embedded .hcc-option>span:not(.hcc-option-check):not(.hcc-swatch),
.hcc-embedded .hcc-option strong,
.hcc-embedded .hcc-option small,
.hcc-embedded .hcc-option-desc,
.hcc-embedded .hcc-option-rule{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* Optional full-width desktop presentation. It remains a normal page section:
 * no fixed root and no overlap with the WordPress header or footer. */
@media(min-width:1181px){
  .hcc-app.hcc-embedded.hcc-layout-fullscreen{
    width:var(--hcc-full-width,100vw);
    max-width:none;
    margin-left:calc(50% - var(--hcc-full-half,50vw));
    margin-right:calc(50% - var(--hcc-full-half,50vw));
  }
}

@container hcc (min-width:1181px){
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-config-shell{
    height:calc(var(--hcc-media-max,720px) + 112px);
    min-height:520px;
    align-items:stretch;
  }
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-stage,
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-panel{
    align-self:stretch;
    height:calc(100% - 16px);
    min-height:0;
    max-height:calc(100% - 16px);
  }
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-stage,
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-panel{overflow:hidden}
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-photo{flex:1 1 auto;height:auto;max-height:none;aspect-ratio:auto}
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:auto}
  .hcc-embedded:not(.hcc-layout-fullscreen) .hcc-total{position:relative!important;bottom:auto;flex:0 0 auto;margin-top:auto}

  .hcc-layout-fullscreen .hcc-config-shell{
    grid-template-columns:minmax(0,1.65fr) minmax(480px,.72fr);
    height:var(--hcc-fullscreen-height,100dvh);
    min-height:0;
    align-items:stretch;
  }
  .hcc-layout-fullscreen .hcc-stage,
  .hcc-layout-fullscreen .hcc-panel{
    align-self:stretch;
    height:calc(var(--hcc-fullscreen-height,100dvh) - 16px);
    min-height:0;
    max-height:calc(var(--hcc-fullscreen-height,100dvh) - 16px);
  }
  .hcc-layout-fullscreen .hcc-stage{overflow:hidden}
  .hcc-layout-fullscreen .hcc-photo{flex:1 1 auto;height:auto;max-height:none;aspect-ratio:auto}
  .hcc-layout-fullscreen .hcc-panel{overflow:hidden}
  .hcc-layout-fullscreen .hcc-panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:auto}
  .hcc-layout-fullscreen .hcc-total{position:relative!important;z-index:4;bottom:auto;flex:0 0 auto;margin-top:auto}
  .hcc-layout-fullscreen .hcc-visual-colors .hcc-option{padding:12px 10px 14px}
  .hcc-layout-fullscreen .hcc-visual-colors .hcc-option>span:last-child{flex:1 1 auto;width:100%;min-width:0}
}

@supports not (overflow:clip){.hcc-app.hcc-embedded{overflow-x:hidden}}

@container hcc (max-width:1180px){
  .hcc-embedded .hcc-config-shell{display:block}
  .hcc-embedded .hcc-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border-bottom:1px solid var(--hcc-line)}
  .hcc-embedded .hcc-mobile-head>div{flex:1;min-width:0;margin-left:10px}
  .hcc-embedded .hcc-mobile-head small,.hcc-embedded .hcc-mobile-head strong{display:block}
  .hcc-embedded .hcc-mobile-head small{font-size:11px;color:#66818b}
  .hcc-embedded .hcc-mobile-head strong,.hcc-embedded .hcc-mobile-head>span{font-size:18px}
  .hcc-embedded .hcc-stage-top{display:none}
  .hcc-embedded .hcc-stage,.hcc-embedded .hcc-panel{width:100%;margin:0;border-radius:0}
  .hcc-embedded .hcc-photo{aspect-ratio:16 / 9}
  .hcc-embedded .hcc-photo-info{margin:0 18px 18px}
  .hcc-embedded .hcc-panel{border:0;box-shadow:none}
  .hcc-embedded .hcc-panel-title{display:none}
  .hcc-embedded .hcc-panel-scroll{padding:28px 22px}
  .hcc-embedded .hcc-progress{overflow-x:auto;scrollbar-width:none}
  .hcc-embedded .hcc-progress::-webkit-scrollbar{display:none}
  .hcc-embedded .hcc-progress>div{flex:0 0 auto}
  .hcc-embedded .hcc-progress i{min-width:28px}
  .hcc-embedded .hcc-total{display:block;padding:11px 14px;background:#fff;border-top:4px solid #a9d0eb;box-shadow:0 -8px 24px rgba(10,55,73,.16)}
  .hcc-embedded .hcc-total>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
  .hcc-embedded .hcc-total>div:first-child span{display:none}
  .hcc-embedded .hcc-total-actions{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);gap:7px;align-items:stretch!important}
  .hcc-embedded .hcc-mobile-view{position:static!important;display:flex!important;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 12px;border:1px solid #0a3749!important;border-radius:2px;background:#fff!important;color:#0a3749!important;box-shadow:none!important;font-weight:700}
  .hcc-embedded .hcc-stage-prev,.hcc-embedded .hcc-next,.hcc-embedded .hcc-request{min-height:46px}
}

@container hcc (max-width:620px){
  .hcc-embedded .hcc-intro{padding:45px 18px 28px}
  .hcc-embedded .hcc-models{grid-template-columns:minmax(0,1fr);padding:0 16px 40px}
  .hcc-embedded .hcc-photo{aspect-ratio:4 / 3}
  .hcc-embedded .hcc-photo-info{display:block;margin:0 12px 12px;padding:18px}
  .hcc-embedded .hcc-photo-info dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .hcc-embedded .hcc-panel-scroll{padding:22px 16px}
  .hcc-embedded .hcc-options,.hcc-embedded .hcc-visual-tiles .hcc-options{grid-template-columns:minmax(0,1fr)}
  .hcc-embedded .hcc-visual-brand .hcc-options,.hcc-embedded .hcc-visual-colors .hcc-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hcc-embedded .hcc-total-actions{grid-template-columns:auto minmax(0,1fr)}
  .hcc-embedded .hcc-stage-prev{grid-column:1/-1;grid-row:2;justify-content:center}
}

@container hcc (max-width:420px){
  .hcc-embedded .hcc-visual-brand .hcc-options,
  .hcc-embedded .hcc-visual-colors .hcc-options{grid-template-columns:minmax(0,1fr)}
}

/* The options panel can become narrow on high-DPI desktops even while the
 * overall browser viewport remains wide. Respond to the real panel width. */
@container hcc-panel (max-width:720px){
  .hcc-embedded .hcc-visual-tiles .hcc-options{grid-template-columns:minmax(0,1fr)}
  .hcc-embedded .hcc-visual-colors .hcc-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hcc-embedded .hcc-panel-title h2{font-size:clamp(28px,5.2cqi,34px)}
}
@container hcc-panel (max-width:430px){
  .hcc-embedded .hcc-visual-brand .hcc-options,
  .hcc-embedded .hcc-visual-colors .hcc-options{grid-template-columns:minmax(0,1fr)}
}