/*
  MylarBags.ca stylesheet
  Palette: graphite, film grey, paper white, dieline magenta, fold line cyan, kraft.
  Type: Archivo (variable width and weight), self hosted.
  To change the action colour, edit --magenta and --magenta-dark below.
*/

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations"),
       url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Arial tuned to Archivo's metrics so text doesn't jump when the font loads */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 87.8%;
  descent-override: 21.0%;
  line-gap-override: 0%;
}

:root {
  --graphite: #1d2228;
  --graphite-2: #2a3039;
  --film: #eceef1;
  --film-2: #dfe3e8;
  --paper: #ffffff;
  --magenta: #d1006b;
  --magenta-dark: #a80056;
  --magenta-light: #ff6fb1;
  --cyan: #0091cf;
  --kraft: #c49a6c;
  --kraft-tint: #f1e7da;

  --text: #1d2228;
  --muted: #56606b;
  --line: rgba(29, 34, 40, .13);
  --line-strong: rgba(29, 34, 40, .3);
  --on-dark: #f2f4f6;
  --on-dark-muted: #aeb6bf;
  --line-dark: rgba(242, 244, 246, .16);
  --error: #b3261e;

  --font: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 72px;
  --section-y: clamp(72px, 9vw, 128px);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .3' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .19 0 0 0 0 .09 .9 0 0 0 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: light;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

img, svg { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 .45em;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-stretch: 122%; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-stretch: 118%; }
h3 { font-size: clamp(1.2rem, 1.5vw, 1.375rem); font-stretch: 104%; font-weight: 750; line-height: 1.2; letter-spacing: 0; }
h4 { font-size: 1.0625rem; font-stretch: 100%; font-weight: 750; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: .35em; }
strong { font-weight: 700; }
small { font-size: .875em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--magenta);
  text-underline-offset: .22em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--magenta); }
.on-dark a:hover { color: var(--magenta-light); }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--magenta-light); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--graphite);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--muted); max-width: 40em; }
.on-dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--muted); }
.on-dark { color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.35em;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 700; font-stretch: 104%; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: var(--magenta-dark); color: #fff; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--text); color: var(--text); }
.btn-light { background: #fff; color: var(--graphite); }
.btn-light:hover { background: var(--film); color: var(--graphite); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-small { min-height: 40px; padding: .5em 1em; font-size: .9375rem; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Top bar and header ---------- */
.topbar { background: var(--graphite); color: var(--on-dark-muted); font-size: .8125rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.topbar p { margin: 0; }
.topbar ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.topbar li + li { margin-top: 0; }
.topbar a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--magenta-light); }
@media (max-width: 680px) { .topbar p { display: none; } .topbar-inner { justify-content: center; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; flex: none; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-logo { display: block; height: 40px; width: auto; max-width: 170px; object-fit: contain; }
.brand-fallback { font-weight: 800; font-stretch: 120%; font-size: 1.0625rem; letter-spacing: .01em; white-space: nowrap; }
.brand-divider { width: 1px; height: 28px; background: var(--line-strong); }
.brand-site { font-size: .9375rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list li + li { margin-top: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: .96875rem; font-weight: 600; color: var(--text);
  text-decoration: none; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--film); color: var(--text); }
.nav-toggle::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: -8px; width: 340px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: 0 28px 50px -24px rgba(29, 34, 40, .45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-menu li + li { margin-top: 2px; }
.has-menu.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.nav-menu a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; color: var(--text); text-decoration: none; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--film); color: var(--text); }
.nav-menu strong { font-size: 1rem; }
.nav-menu span { font-size: .875rem; color: var(--muted); }
.header-cta { flex: none; }
.menu-button {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-left: auto;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  color: var(--text); cursor: pointer;
}
.menu-button svg { width: 22px; height: 22px; }
.menu-button .i-close { display: none; }
.menu-button[aria-expanded="true"] .i-open { display: none; }
.menu-button[aria-expanded="true"] .i-close { display: block; }
.mobile-nav { border-top: 1px solid var(--line); background: var(--paper); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 0; }
.mobile-nav li + li { margin-top: 0; }
.mobile-nav a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 1.25rem; font-weight: 700; font-stretch: 110%; color: var(--text); text-decoration: none;
}
.mobile-nav .m-sub a { padding-left: 18px; font-size: 1.0625rem; font-weight: 600; font-stretch: 100%; }
.mobile-nav .btn { width: 100%; margin: 20px 0 28px; }
@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .menu-button { display: inline-flex; }
}
@media (min-width: 1024px) {
  .mobile-nav { display: none !important; }
  .has-menu:hover .nav-menu, .has-menu:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
}
@media (max-width: 420px) { .brand-divider, .brand-site { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.bg-film { background: var(--film); }
.bg-paper { background: var(--paper); }
.bg-kraft { background: var(--kraft-tint); }
.bg-graphite { background: var(--graphite); color: var(--on-dark); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { margin: 0; font-size: 1.125rem; color: var(--muted); }
.section-head p + p { margin-top: .8em; }
.bg-graphite .section-head p { color: var(--on-dark-muted); }
.text-link { font-weight: 700; }

/* ---------- Home hero and bag builder ---------- */
.hero { position: relative; background: var(--film); padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%), var(--grain);
}
.hero-grid { position: relative; display: grid; gap: 28px; grid-template-areas: "copy" "stage" "controls"; }
.hero-copy { grid-area: copy; }
.hero-stage { grid-area: stage; position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; }
.builder { grid-area: controls; }
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-areas: "copy stage" "controls stage";
    column-gap: clamp(36px, 4.5vw, 72px); row-gap: 36px; align-items: start;
  }
  .hero-copy { padding-top: clamp(8px, 2vw, 28px); }
  .hero-stage { top: calc(var(--header-h) + 20px); }
}
.hero-title {
  font-size: clamp(3rem, 6.3vw, 5.5rem);
  font-weight: 850; font-stretch: 125%;
  line-height: .9; letter-spacing: -0.028em;
  margin-bottom: .34em;
}
.hero-lead { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: #3a424c; max-width: 33em; margin-bottom: 28px; }
.hero-actions, .cta-actions, .tp-actions, .page-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 28px 0 0; font-size: .9375rem; font-weight: 600; color: #3a424c; }
.hero-points li { display: flex; align-items: center; gap: 8px; margin: 0; }
.hero-points li::before, .checklist li::before {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--magenta);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 14px; border-radius: var(--r-l);
  background: var(--graphite); color: var(--on-dark);
  box-shadow: 0 34px 60px -34px rgba(29, 34, 40, .6);
}
.stage::before, .plate::before, .tp-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center;
}
.stage::after, .plate::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 45% at 50% 42%, rgba(255, 255, 255, .13), transparent 72%);
}
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark); }
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--on-dark-muted);
}
.seg button[aria-pressed="true"] { background: var(--on-dark); color: var(--graphite); }
.seg--light { background: var(--paper); border-color: var(--line); }
.seg--light button { color: var(--muted); }
.seg--light button[aria-pressed="true"] { background: var(--graphite); color: #fff; }
.stage-shuffle {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--on-dark);
}
.stage-shuffle:hover { background: rgba(255, 255, 255, .08); }
.stage-shuffle svg { width: 16px; height: 16px; }
.stage-art { position: relative; width: min(100%, 480px); aspect-ratio: 400 / 440; margin: 6px auto 0; }
.stage-art > div { position: absolute; inset: 0; }
.stage-bag { transition: opacity .35s ease, filter .35s ease; }
.stage-dieline { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.stage.is-dieline .stage-dieline { opacity: 1; }
.stage.is-dieline .stage-bag { opacity: .5; filter: saturate(.5); }
.stage.is-intro .stage-dieline { animation: dlFlash 2.3s ease both; }
.stage.is-intro .stage-bag { animation: inkDown 1.05s cubic-bezier(.65, 0, .25, 1) .6s both; }
@keyframes dlFlash { 0% { opacity: 0; } 16% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes inkDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 4px 4px 2px; }
.stage-summary { margin: 0; max-width: 36ch; font-size: .9375rem; line-height: 1.45; color: var(--on-dark); }
@media (max-width: 1023px) {
  .stage { padding: 10px; }
  .stage-art { width: min(100%, calc(32vh * 400 / 440)); }
  .stage-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stage-foot { justify-content: center; }
}

.builder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 32px); }
.builder-title { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: .3em; }
.builder-intro { margin-bottom: 20px; font-size: 1rem; color: var(--muted); }
.opt-group { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.opt-group legend, .sizer legend { display: flex; align-items: baseline; gap: .5em; padding: 0; margin-bottom: 10px; font-size: .9375rem; font-weight: 700; }
.opt-current { font-weight: 500; color: var(--muted); }
.opt-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opt-style, .sw-opt, .col-opt, .chip, .q-card { position: relative; }
.opt-style input, .sw-opt input, .col-opt input, .chip input, .q-card input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.opt-style span {
  display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 14px;
  font-size: .8125rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.opt-style svg { width: 30px; height: 36px; }
.opt-style input:checked + span { border-color: var(--graphite); background: var(--film); color: var(--text); }
.opt-style input:focus-visible + span, .sw-opt input:focus-visible + .sw, .col-opt input:focus-visible + span,
.chip input:focus-visible + span, .q-card input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sw-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; line-height: 1.15; text-align: center; color: var(--muted); }
.sw { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: box-shadow .2s ease; }
.sw-opt input:checked + .sw { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--graphite); }
.sw-opt input:checked ~ .sw-label { color: var(--text); }
.sw-matte { background: #7d838b; }
.sw-soft { background: radial-gradient(circle at 34% 28%, #9a96a6, #5b5668 72%); }
.sw-gloss { background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, 0) 26%), linear-gradient(140deg, #c2223b, #7a0f20); }
.sw-metallic { background: linear-gradient(135deg, #8a9099, #f4f6f8 34%, #7d838c 56%, #e6e9ed 80%, #9aa0a8); }
.sw-holo { background: linear-gradient(135deg, #a8f0ff, #cdb8ff 30%, #ffc0e3 55%, #ffe8a8 78%, #b3ffe0); }
.sw-kraft { background: var(--noise), #b88a5a; }
.colours { display: flex; flex-wrap: wrap; gap: 10px; transition: opacity .2s ease; }
.colours.is-off { opacity: .35; }
.col-opt span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: box-shadow .2s ease; }
.col-opt input:checked + span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip span {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px;
  padding: .45em .95em; border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-size: .9375rem; font-weight: 600; line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip input:checked + span { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.chip input[type="checkbox"] + span::before {
  content: ""; width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; border-radius: 4px; opacity: .55;
}
.chip input[type="checkbox"]:checked + span::before {
  opacity: 1; border: 0; border-radius: 0; background: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.builder-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff0f7; color: #6b0037; font-size: .9375rem; line-height: 1.5; }

/* ---------- Product lines ---------- */
.lines { display: grid; gap: 16px; }
@media (min-width: 860px) {
  .lines { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .line:nth-child(1), .line:nth-child(4) { grid-column: span 7; }
  .line:nth-child(2), .line:nth-child(3) { grid-column: span 5; }
}
.line {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 16px;
  min-height: 380px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); overflow: hidden;
  color: var(--text); text-decoration: none;
}
.line:hover, .line:focus-visible { color: var(--text); outline: 2px dashed var(--magenta); outline-offset: -12px; border-radius: var(--r-l); }
.line h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-stretch: 120%; margin-bottom: .35em; }
.line p { max-width: 30ch; margin-bottom: 18px; font-size: 1rem; color: #3a424c; }
.line-link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.line-art { align-self: center; }
.line-art svg { max-width: 300px; margin-inline: auto; }
.line--holo { background: linear-gradient(135deg, #e3f9ff 0%, #ece4ff 38%, #ffe6f3 68%, #fff4d6 100%); }
.line--cr { background: var(--graphite); color: var(--on-dark); }
.line--cr p { color: var(--on-dark-muted); }
.line--cr:hover, .line--cr:focus-visible { color: var(--on-dark); outline-color: var(--magenta-light); }
.line--cr .line-link { text-decoration-color: var(--magenta-light); }
.line--coffee { background: var(--noise), #d4b088; }
.line--coffee p { color: #2f2a24; }
.line--food { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 540px) {
  .line { grid-template-columns: 1fr; min-height: 0; }
  .line-art { order: -1; }
  .line-art svg { max-width: 170px; }
}

/* ---------- In one minute ---------- */
.minute { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px) { .minute { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.minute-lead { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.45; font-weight: 500; color: var(--text); }
.facts { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.facts > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: #3a424c; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Industry tabs ---------- */
.tab-list { display: flex; gap: 4px; margin-bottom: 36px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  flex: none; appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px; padding: 12px 16px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--magenta); }
html:not(.js) .tab-list { display: none; }
html:not(.js) .tab-panel + .tab-panel { margin-top: 64px; }
.tab-panel { display: grid; gap: 28px; }
@media (min-width: 900px) { .tab-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 56px; } }
.tp-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-stretch: 116%; }
.tp-text p { max-width: 58ch; color: #3a424c; }
.setup { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 26px; }
.setup li { margin: 0; padding: .4em .85em; border-radius: 999px; background: var(--film); font-size: .9375rem; font-weight: 600; }
.tp-art { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border-radius: var(--r-l); background: var(--graphite); }
.tp-art svg { max-width: 330px; margin-inline: auto; }

/* ---------- Finish swatch book ---------- */
.swatchbook { display: flex; gap: 8px; height: clamp(360px, 40vw, 460px); }
.sb-item {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  margin: 0; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: flex-grow .55s cubic-bezier(.3, .1, .2, 1);
}
.sb-item[aria-expanded="true"] { flex-grow: 6; cursor: default; }
.sb-face { position: absolute; inset: 0; }
.sb-name {
  position: absolute; left: 50%; bottom: 18px;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-size: 1rem; font-weight: 800; font-stretch: 112%; white-space: nowrap;
  color: var(--sb-ink, #fff); transition: opacity .2s ease;
}
.sb-item[aria-expanded="true"] .sb-name { opacity: 0; }
.sb-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 28rem;
  padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--text);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease .2s, transform .25s ease .2s;
}
.sb-item[aria-expanded="true"] .sb-card { opacity: 1; transform: none; }
.sb-card strong { display: block; margin-bottom: 4px; font-size: 1.25rem; font-weight: 800; font-stretch: 114%; }
.sb-card span { display: block; font-size: .9375rem; line-height: 1.45; color: #3a424c; }
.sb-light { --sb-ink: var(--graphite); }
.sb-matte .sb-face { background: var(--grain), #3a4048; }
.sb-soft .sb-face { background: radial-gradient(90% 70% at var(--mx, 30%) var(--my, 25%), #7a7088, #3a3344 70%); }
.sb-gloss .sb-face {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--mx, 40%) - 9%), rgba(255, 255, 255, .6) var(--mx, 40%), rgba(255, 255, 255, 0) calc(var(--mx, 40%) + 7%)),
    linear-gradient(160deg, #c2223b, #6d0f1e);
}
.sb-metallic .sb-face { background: linear-gradient(100deg, #6f757e 0%, #f5f7f9 calc(var(--mx, 40%) - 14%), #8a9099 var(--mx, 40%), #eef1f4 calc(var(--mx, 40%) + 16%), #7d838c 100%); }
.sb-holo .sb-face { background: linear-gradient(115deg, #a8f0ff, #cdb8ff, #ffc0e3, #ffe8a8, #b3ffe0, #a8f0ff, #cdb8ff); background-size: 300% 100%; background-position: var(--mx, 40%) 50%; }
.sb-kraft .sb-face, .sb-window .sb-face { background: var(--noise), #c0915f; }
.sb-spot .sb-face { background: var(--grain), #2c3138; }
.sb-spot .sb-face::after {
  content: ""; position: absolute; left: 50%; top: 38%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%;
  background: linear-gradient(112deg, #2a2e35 calc(var(--mx, 40%) - 18%), #a3aab4 var(--mx, 40%), #2a2e35 calc(var(--mx, 40%) + 18%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.sb-window .sb-face::after {
  content: ""; position: absolute; left: 50%; top: 38%; width: 64%; max-width: 220px; aspect-ratio: 1.4; translate: -50% -50%; border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle, #8a4b1f 0 5px, transparent 6px) 0 0 / 22px 18px,
    radial-gradient(circle, #e2b05a 0 6px, transparent 7px) 9px 8px / 24px 20px,
    #f0e3c9;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
}
@media (max-width: 760px) {
  .swatchbook { flex-direction: column; height: auto; }
  .sb-item { flex: none; height: 64px; transition: height .45s cubic-bezier(.3, .1, .2, 1); }
  .sb-item[aria-expanded="true"] { height: 270px; }
  .sb-name { writing-mode: horizontal-tb; transform: none; left: 18px; top: 20px; bottom: auto; }
}
html:not(.js) .swatchbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); height: auto; }
html:not(.js) .sb-item { height: 280px; }
html:not(.js) .sb-card { opacity: 1; transform: none; }
html:not(.js) .sb-name { display: none; }

/* ---------- Steps ---------- */
.steps-list { display: grid; gap: 32px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.steps-list li { position: relative; margin: 0; padding-top: 84px; }
.step-n { position: absolute; top: 0; left: 0; font-size: 4.25rem; font-weight: 800; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .steps-list li:not(:last-child)::after { content: ""; position: absolute; top: 34px; left: 76px; right: -14px; border-top: 2px dashed var(--cyan); opacity: .75; }
}
.steps-list h3 { margin-bottom: .4em; }
.steps-list p { margin: 0; font-size: 1rem; color: #3a424c; }

/* ---------- Size finder ---------- */
.sizer { display: grid; gap: 24px; padding: clamp(18px, 3vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
@media (min-width: 980px) { .sizer { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; } }
.sizer fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.sizer-result { display: grid; gap: 20px; align-content: start; padding: clamp(16px, 2.5vw, 28px); border-radius: var(--r-m); background: var(--film); }
@media (min-width: 640px) { .sizer-result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.sizer-drawing svg { display: block; width: 100%; height: auto; max-height: 320px; }
.sz-style { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; color: var(--muted); }
.sz-dims { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; font-stretch: 116%; line-height: 1.1; }
.sz-alt { margin: 6px 0 14px; color: var(--muted); }
.sz-extra { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; }
.sz-tip { margin-bottom: 16px; font-size: .9375rem; color: #3a424c; }
.szd-bag { fill: #fff; stroke: var(--graphite); stroke-width: 1.5; }
.szd-zip { stroke: var(--graphite); stroke-opacity: .4; stroke-width: 1.5; }
.szd-gusset { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 3 4; }
.szd-card { fill: #cdd4db; stroke: #9aa3ad; stroke-width: 1; }
.szd-dim { fill: none; stroke: var(--graphite); stroke-width: 1; }
.szd-text { font-family: var(--font); font-size: 11px; font-weight: 600; fill: var(--graphite); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; } }
.faq-head p { color: var(--muted); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-size: 1.125rem; font-weight: 700; font-stretch: 100%; line-height: 1.35; }
.faq-item summary::after {
  content: ""; flex: none; width: 24px; height: 24px; background: var(--magenta);
  -webkit-mask: var(--icon-plus) center / contain no-repeat; mask: var(--icon-plus) center / contain no-repeat;
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { max-width: 62ch; padding: 0 0 22px; color: #3a424c; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Call to action and family ---------- */
.cta { padding-block: clamp(56px, 7vw, 96px); background: var(--graphite); color: var(--on-dark); }
.cta-inner { position: relative; padding: clamp(32px, 5vw, 64px); border: 2px dashed rgba(255, 111, 177, .75); border-radius: var(--r-l); }
.cta-cut { position: absolute; top: -13px; left: 44px; width: 32px; height: 24px; padding: 0 4px; background: var(--graphite); color: var(--magenta-light); }
.cta h2 { max-width: 18ch; }
.cta p { max-width: 46ch; font-size: 1.125rem; color: var(--on-dark-muted); }
.cta-actions { margin-top: 28px; }
.family { padding-block: clamp(48px, 6vw, 80px); }
.family h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.family > .container > p { max-width: 60ch; color: var(--muted); }
.family-grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 760px) { .family-grid { grid-template-columns: 1fr 1fr; } }
.family-card { display: grid; gap: 6px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); color: var(--text); text-decoration: none; transition: border-color .2s ease; }
.family-card:hover { border-color: var(--graphite); color: var(--text); }
.family-card strong { font-size: 1.25rem; font-weight: 800; font-stretch: 112%; }
.family-card span { font-size: 1rem; color: var(--muted); }
.family-card .family-url { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--magenta); }
.family-url::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon-external) center / contain no-repeat; mask: var(--icon-external) center / contain no-repeat;
}

/* ---------- Footer ---------- */
.site-footer { padding-top: clamp(56px, 7vw, 88px); background: var(--graphite); color: var(--on-dark-muted); font-size: .96875rem; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }
.logo-plate { text-decoration: none; display: inline-flex; align-items: center; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: #fff; color: var(--graphite); }
.logo-plate img { display: block; height: 40px; width: auto; max-width: 180px; }
.footer-brand p { max-width: 36ch; }
.footer-col h2 { margin-bottom: 14px; font-size: 1rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: var(--on-dark); }
.footer-col ul { list-style: none; margin: 0 0 26px; padding: 0; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { color: var(--on-dark-muted); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--magenta-light); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-block: 24px 32px; border-top: 1px solid var(--line-dark); font-size: .875rem; }
.footer-base p { margin: 0; max-width: 62ch; }

.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: block; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateY(160%); transition: transform .3s ease;
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta .btn { width: 100%; box-shadow: 0 12px 30px rgba(29, 34, 40, .35); }
  .has-mobile-cta .site-footer { padding-bottom: 84px; }
}

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; background: var(--film); padding-block: clamp(24px, 3.5vw, 44px) clamp(48px, 6vw, 80px); }
.page-hero-grid { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .page-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; } }
.page-hero .lead { color: #3a424c; margin-bottom: 28px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: .875rem; color: var(--muted); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.plate {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 30px 16px 12px; border-radius: var(--r-l); background: var(--graphite);
}
.plate .mb-bag { width: 66%; flex: none; }
.plate .mb-bag + .mb-bag { width: 56%; margin-left: -22%; }
.plate--single .mb-bag { width: 92%; }

/* ---------- Content building blocks ---------- */
.split { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .split--lean { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.prose > * + h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: #343b44; }
.prose ol li::marker { font-weight: 700; color: var(--magenta); }
.table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .96875rem; }
th, td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--graphite); color: var(--on-dark); font-size: .9375rem; font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 700; }
caption { caption-side: bottom; padding: 10px 18px 14px; text-align: left; font-size: .875rem; color: var(--muted); }
.features { display: grid; gap: 32px 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.feature svg { width: 28px; height: 28px; color: var(--magenta); }
.feature h3 { margin: 12px 0 8px; font-size: 1.1875rem; }
.feature p { margin: 0; font-size: 1rem; color: #3a424c; }
.bg-graphite .feature svg { color: var(--magenta-light); }
.bg-graphite .feature p { color: var(--on-dark-muted); }
.style-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.style-card { padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.plate-sm { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 16px; padding: 16px 10px 4px; border-radius: 12px; background: var(--graphite); }
.plate-sm svg { max-width: 210px; margin-inline: auto; }
.style-card h3 { margin: 0 6px 6px; font-size: 1.1875rem; }
.style-card p { margin: 0 6px; font-size: .96875rem; color: #3a424c; }
.callout { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.callout--compliance { background: #fff4f9; border-color: rgba(209, 0, 107, .3); }
.callout h2, .callout h3 { margin-bottom: .5em; }
.callout h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.callout > :last-child { margin-bottom: 0; }
.callout-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .callout-grid { grid-template-columns: 1fr 1fr; } }
.fine { font-size: .875rem; color: var(--muted); }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 12px; }
.checklist li::before { margin-top: .3em; }
.guide-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; }
  .toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
}
.toc { font-size: .9375rem; }
.toc h2 { margin-bottom: 12px; font-size: 1rem; font-stretch: 100%; letter-spacing: 0; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li + li { margin-top: 6px; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: underline; }
.byline { font-size: .9375rem; color: var(--muted); }
.glossary { margin: 0; }
.glossary div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 4px 0 0; color: #343b44; }
.measure svg { width: 100%; max-width: 520px; height: auto; }
.center-page { padding-block: clamp(64px, 10vw, 140px); }
.center-page .lead { margin-bottom: 28px; }
.nf-art { width: 200px; margin-bottom: 24px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field label, .field .label { font-size: .9375rem; font-weight: 700; }
.field .opt { font-weight: 500; color: var(--muted); }
.field-hint { font-size: .875rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-s); background: #fff;
  font: inherit; font-size: 1rem; color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 128px; resize: vertical; }
select {
  appearance: none; padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2228' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(209, 0, 107, .2); }
input[type="file"] { font: inherit; font-size: .9375rem; max-width: 100%; }
::placeholder { color: #8a929b; }
.is-invalid { border-color: var(--error) !important; }
.field-error { font-size: .875rem; font-weight: 600; color: var(--error); }

.quote-layout { display: grid; gap: 28px; }
@media (min-width: 1080px) { .quote-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; } }
.qform { padding: clamp(20px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); }
.q-progress ol { display: flex; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; font-size: .875rem; font-weight: 600; color: var(--muted); }
.q-progress li { flex: 1; margin: 0; }
.q-progress li.is-current, .q-progress li.is-done { color: var(--text); }
.q-bar { height: 4px; overflow: hidden; border-radius: 4px; background: var(--film-2); }
.q-bar span { display: block; width: 25%; height: 100%; background: var(--magenta); transition: width .4s ease; }
.q-step { min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.q-step > legend { padding: 0; margin-bottom: 6px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 800; font-stretch: 112%; line-height: 1.15; }
.q-step > legend:focus { outline: none; }
.q-hint { margin: 0 0 22px; color: var(--muted); }
.q-sub { margin: 26px 0 10px; font-size: 1rem; font-weight: 700; }
.q-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.q-card span {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 16px; border: 1.5px solid var(--line-strong); border-radius: 14px;
  font-weight: 700; line-height: 1.25; transition: border-color .2s ease, background-color .2s ease;
}
.q-card svg { width: 24px; height: 24px; color: var(--magenta); }
.q-card small { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.q-card input:checked + span { border-color: var(--graphite); background: var(--film); box-shadow: inset 0 0 0 1px var(--graphite); }
.q-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .q-row { grid-template-columns: 1fr 1fr; } }
.q-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff0f7; color: #6b0037; font-size: .9375rem; }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.q-nav .q-next, .q-nav .q-submit { margin-left: auto; }
.q-privacy { margin: 16px 0 0; font-size: .875rem; color: var(--muted); }
.honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.js .qform .q-step:not(.is-active) { display: none; }
html:not(.js) .q-back, html:not(.js) .q-next, html:not(.js) .q-progress { display: none; }
.q-aside { display: grid; gap: 16px; }
@media (min-width: 1080px) { .q-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.q-summary { padding: 24px; border-radius: var(--r-l); background: var(--graphite); color: var(--on-dark); }
.q-summary h2, .q-next-steps h2 { margin-bottom: 14px; font-size: 1.25rem; font-stretch: 108%; }
.q-summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: .9375rem; }
.q-summary dt { color: var(--on-dark-muted); }
.q-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.q-next-steps { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); }
.q-next-steps ol { margin: 0; padding-left: 1.2em; font-size: .96875rem; color: #3a424c; }
.q-next-steps li + li { margin-top: 8px; }

/* Small additions */
.dl-stack { position: relative; width: 92%; }
.plate .dl-stack .mb-bag { width: 100%; margin: 0; }
.dl-stack .mb-dieline { position: absolute; inset: 0; }
.q-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.q-group > legend { padding: 0; }
.q-step .q-group { margin-top: 22px; }
.q-step .q-group > legend.q-sub { margin: 0 0 10px; }

/* ---------- Bag illustrations ---------- */
.mb-bag { display: block; width: 100%; height: auto; overflow: visible; }
.mb-bag .lay-base { fill: var(--bag); transition: fill .45s ease; }
.mb-bag .lay-metal,
.mb-bag .lay-holo,
.mb-bag .lay-kraft,
.mb-bag .lay-kraft-tex,
.mb-bag .lay-soft,
.mb-bag .lay-gloss { opacity: 0; transition: opacity .45s ease; }
.mb-bag.fin-metallic .lay-metal,
.mb-bag.fin-holo .lay-holo,
.mb-bag.fin-kraft .lay-kraft,
.mb-bag.fin-kraft .lay-kraft-tex,
.mb-bag.fin-soft .lay-soft,
.mb-bag.fin-gloss .lay-gloss { opacity: 1; }
.mb-bag .lay-shade { opacity: .9; transition: opacity .45s ease; }
.mb-bag.fin-soft .lay-shade { opacity: .7; }
.mb-bag.fin-holo .lay-shade { opacity: .5; }
.mb-bag.fin-metallic .lay-shade { opacity: .55; }
.mb-bag .lay-sweep { opacity: 0; }
.mb-bag.fin-holo.is-sweeping .lay-sweep { animation: mbSweep 1.5s cubic-bezier(.3, .1, .2, 1); }
@keyframes mbSweep {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(460px); }
}

.mb-bag .f-valve,
.mb-bag .f-window,
.mb-bag .f-hang,
.mb-bag .c-zip,
.mb-bag .c-cr,
.mb-bag .c-tin { opacity: 0; transition: opacity .3s ease; }
.mb-bag.has-valve .f-valve,
.mb-bag.has-window .f-window,
.mb-bag.has-hang .f-hang,
.mb-bag.cl-zipper .c-zip,
.mb-bag.cl-cr .c-cr,
.mb-bag.cl-tin .c-tin { opacity: 1; }

.mb-bag .valve-ring { fill: var(--valve-ring); transition: fill .45s; }
.mb-bag .valve-face { fill: var(--valve-face); transition: fill .45s; }
.mb-bag .label-panel { fill: transparent; stroke: var(--label-ink); stroke-opacity: .32; transition: fill .45s ease, stroke .45s ease; }
.mb-bag.fin-kraft .label-panel { fill: var(--bag); stroke-opacity: 0; }
.mb-bag .emblem { fill: none; stroke: var(--label-ink); opacity: .8; transition: stroke .45s; }
.mb-bag .emblem-dot { fill: var(--label-ink); opacity: .8; transition: fill .45s; }
.mb-bag .label-rule { stroke: var(--label-ink); opacity: .45; }
.mb-bag .brand {
  fill: var(--label-ink);
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .02em;
  transition: fill .45s ease;
}
.mb-bag .sub {
  fill: var(--label-ink);
  opacity: .78;
  font-family: var(--font);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: .16em;
}
.mb-bag .cr-hint {
  fill: var(--surf-ink);
  opacity: .72;
  font-family: var(--font);
  font-weight: 600;
  font-stretch: 87.5%;
  font-size: 7px;
  letter-spacing: .02em;
}
.mb-bag .notch,
.mb-bag .hole { fill: var(--stage); }

/* Dieline overlay */
.mb-dieline { display: block; width: 100%; height: auto; overflow: visible; }
.mb-dieline .dl-cut { fill: none; stroke: #ff3d9a; stroke-width: 1.6; stroke-dasharray: 8 5; }
.mb-dieline .dl-fold { fill: none; stroke: #34c8ff; stroke-width: 1.4; stroke-dasharray: 3 4; }
.mb-dieline .dl-zip { fill: none; stroke: #34c8ff; stroke-width: 1.6; stroke-dasharray: 1 3; stroke-linecap: round; }
.mb-dieline .dl-safe { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-dasharray: 2 3; }
.mb-dieline .dl-hatch { fill: rgba(255, 255, 255, .28); }
.mb-dieline .dl-reg circle,
.mb-dieline .dl-reg path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.mb-dieline .dl-dim path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.mb-dieline .dl-text {
  fill: #e9eef3;
  font-family: var(--font);
  font-weight: 600;
  font-stretch: 87.5%;
  font-size: 10.5px;
}
.mb-dieline .dl-t-cut { fill: #ff7bbb; }
.mb-dieline .dl-t-fold,
.mb-dieline .dl-t-zip { fill: #7fdcff; }

/* Hero product photos */
.plate .hero-photo{margin:0;width:100%;position:relative;z-index:1}
.plate .hero-photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.plate .hero-cap{margin-top:10px;font-size:.85rem;color:#f7f6f2;opacity:.85;text-align:center}
.plate .hero-cap a{color:inherit;text-decoration:underline}