/* ==========================================================================
   CORVIXAL — Design System
   Press · Wear · Repeat
   ========================================================================== */

:root {
  /* Brand palette — pulled from the Corvixal wordmark */
  --c-cyan:    #00b4ff;
  --c-blue:    #2b6dff;
  --c-violet:  #7b2ff7;
  --c-magenta: #ff2d95;
  --c-orange:  #ff8a00;
  --c-lime:    #16d97f;

  --grad-brand: linear-gradient(90deg, #00b4ff 0%, #7b2ff7 38%, #ff2d95 68%, #ff8a00 100%);
  --grad-brand-soft: linear-gradient(90deg, rgba(0,180,255,.14), rgba(123,47,247,.14), rgba(255,45,149,.14), rgba(255,138,0,.14));

  /* Neutrals */
  --bg:        #fbfaf7;
  --surface:   #ffffff;
  --surface-2: #f3f1ec;
  --ink:       #14121f;
  --ink-soft:  #3a3550;
  --muted:     #6b6880;
  --line:      #e7e3da;

  /* Type */
  --font-display: "Bricolage Grotesque", "Familjen Grotesk", system-ui, sans-serif;
  --font-body: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 14px;

  /* Layout */
  --container: 1600px;
  --gutter: clamp(16px, 3vw, 44px);

  --shadow-sm: 0 2px 10px rgba(20,18,31,.06);
  --shadow-md: 0 14px 40px rgba(20,18,31,.10);
  --shadow-brand: 0 12px 30px rgba(123,47,247,.28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;        /* clip does not make body a scroll box, so position:sticky keeps working */
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--c-violet);
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; }
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Layout helpers ---------- */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.grid { display: grid; gap: clamp(18px, 3vw, 32px); }
@media (min-width: 720px)  { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
/* a four-column grid should step down gracefully, not jump straight to one
   giant column on a smaller laptop screen */
@media (min-width: 520px)  { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .grid.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.hidden { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.7em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--brand {
  background: var(--grad-brand); color: #fff;
  background-size: 180% 100%; background-position: 0 0;
  box-shadow: var(--shadow-brand);
}
.btn--brand:hover { background-position: 100% 0; transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #26223a; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: .6em 1.1em; font-size: .85rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,247,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
}
.site-header__nav { display: flex; gap: 20px; align-items: center; flex-shrink: 0; }
.site-header__nav a, .site-header__nav .drop-toggle {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  padding: 6px 2px; position: relative; white-space: nowrap;
}
@media (min-width: 901px) and (max-width: 1120px) {
  .site-header__nav { gap: 15px; }
  .site-header__nav a, .site-header__nav .drop-toggle { font-size: .85rem; }
}
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px;
  background: var(--grad-brand); border-radius: 3px; transition: right .2s ease;
}
.site-header__nav a:hover::after, .site-header__nav a[aria-current="page"]::after { right: 0; }
.site-header__logo { justify-self: center; }
.site-header__logo img { height: 46px; width: auto; }
@media (max-width: 900px) { .site-header__logo img { height: 38px; } }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.icon-btn:hover { transform: translateY(-2px); }
.cart-count {
  position: absolute; transform: translate(14px, -14px);
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--c-magenta); color: #fff;
  border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}

/* Language switch */
.lang-switch { display: inline-flex; background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); overflow: hidden; }
.lang-switch button {
  padding: 8px 12px; font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--muted);
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Mobile nav */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .site-header__bar { grid-template-columns: auto 1fr auto; }
  .site-header__nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--surface); padding: 18px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%); transition: transform .25s ease;
  }
  .site-header__nav.open { transform: translateY(0); }
  .site-header__nav a { font-size: 1.15rem; padding: 10px 0; width: 100%; }
  .site-header__logo { justify-self: start; }
  .nav-toggle { display: grid; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 7vw, 80px); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .5em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero__art {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  background: var(--grad-brand-soft); aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.blob {
  position: absolute; filter: blur(60px); opacity: .5; z-index: -1; border-radius: 50%;
}
.blob--1 { width: 360px; height: 360px; background: var(--c-cyan); top: -80px; left: -120px; }
.blob--2 { width: 320px; height: 320px; background: var(--c-magenta); bottom: -120px; right: -100px; opacity: .35; }

/* Home hero — pulled up near the menu, fuller layout */
.hero--home { padding: clamp(20px, 3vw, 40px) 0 clamp(32px, 5vw, 56px); }
.hero__stats { display: flex; gap: clamp(18px, 4vw, 44px); margin-top: 30px; flex-wrap: wrap; }
.hero__stats b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; display: block; line-height: 1; }
.hero__stats span { font-size: .8rem; color: var(--muted); }
.hero__collage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hero__collage img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); background: var(--surface-2);
}
.hero__collage img:nth-child(1) { border-radius: var(--radius-lg) var(--radius-md) var(--radius-md) var(--radius-md); }
.hero__collage img:nth-child(2) { margin-top: 24px; }
.hero__collage img:nth-child(3) { margin-top: -24px; }
@media (max-width: 620px) { .hero__collage img:nth-child(2), .hero__collage img:nth-child(3) { margin-top: 0; } }

/* Wearing strip */
.wear-strip {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.wear-strip a { flex: 0 0 clamp(180px, 40vw, 240px); scroll-snap-align: start; }
.wear-strip img {
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--line); transition: transform .18s;
}
.wear-strip a:hover img { transform: translateY(-4px); }

/* ---------- Price paths (3 products) ---------- */
.path-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.path-card--featured { border-color: var(--c-violet) !important; box-shadow: var(--shadow-md); position: relative; }
.path-card__tier {
  align-self: flex-start; font-family: var(--font-display); font-weight: 800;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.path-card__tier--hot { color: #fff; background: var(--grad-brand); border-color: transparent; }
.path-card__price { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; }
.path-card__price small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.path-card ul { display: grid; gap: 8px; font-size: .95rem; color: var(--ink-soft); }
.path-card li::before { content: "✦ "; color: var(--c-violet); font-weight: 700; }
.path-card .btn { margin-top: auto; }

/* ---------- Product grid ---------- */
.product-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card__media {
  border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1;
  background: var(--surface-2);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.product-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.product-card__price { font-family: var(--font-display); font-weight: 800; }
.tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--grad-brand-soft); color: var(--c-violet);
}

/* ---------- Toolbar (filter/sort) ---------- */
.toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.pill-select {
  appearance: none; padding: .7em 2.4em .7em 1.2em;
  border-radius: var(--radius-pill); border: 2px solid var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314121f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1.1em center;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}

/* ---------- Section headers ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-head p { color: var(--muted); }

/* ---------- How it works ---------- */
.step { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step__num {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-weight: 800; margin-bottom: 14px;
}

/* ---------- Trust bar ---------- */
.trust { background: var(--ink); color: #fff; }
.trust .grid { align-items: start; }
.trust h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.trust p { color: rgba(255,255,255,.72); font-size: .92rem; }
.trust .step__num { margin-bottom: 12px; }

/* ---------- Testimonials ---------- */
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.quote__stars { color: var(--c-orange); letter-spacing: 2px; margin-bottom: 10px; }
.quote__who { font-family: var(--font-display); font-weight: 700; margin-top: 14px; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--grad-brand); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 56px); text-align: center; }
.newsletter h2 { color: #fff; }
.newsletter form { display: flex; gap: 10px; max-width: 480px; margin: 22px auto 0; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 220px; padding: .95em 1.2em; border-radius: var(--radius-pill); border: 0;
  background: rgba(255,255,255,.16); color: #fff;
}
.newsletter input::placeholder { color: rgba(255,255,255,.75); }
.newsletter .btn--dark { background: #fff; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.78); padding-top: clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: 36px; }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 9px; font-size: .95rem; }
.site-footer__blurb { max-width: 34ch; font-size: .95rem; }
.site-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.site-footer__social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.pay-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.pay-icons img { height: 30px; width: auto; border-radius: 4px; display: block; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px;
  /* the WhatsApp button floats in the bottom right corner and would otherwise
     sit on top of this last row once the page is scrolled to the end */
  padding: 22px 0 96px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}
.footer-wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4rem, 20vw, 16rem); line-height: .8;
  letter-spacing: -.04em; color: transparent;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  opacity: .16; margin: 10px 0 -.18em; user-select: none; white-space: nowrap;
  text-align: center;            /* stay centred now the page is wider */
  /* line-height is smaller than the letters, so the text bleeds up over the
     links above it. It is decoration - it must never swallow a click. */
  pointer-events: none;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(48px, 8vw, 90px) 0 clamp(24px, 4vw, 44px); text-align: center; }
.page-hero .lead { margin: 14px auto 0; }

/* ---------- Prose (legal / about) ---------- */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 1.8em 0 .5em; }
.prose h3 { margin: 1.4em 0 .4em; }
.prose p + p { margin-top: 1em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin: .6em 0; }
.prose li { margin: .3em 0; }
.prose strong { color: var(--ink); }
.prose a { color: var(--c-blue); text-decoration: underline; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: 20px 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--c-violet); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 20px; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.field input, .field textarea, .field select {
  padding: .85em 1em; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-violet); outline: none; }

/* ---------- Utility ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge-row span { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 14px; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow-sm); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 16px; border-radius: 8px; z-index: 999; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Custom design editor
   ========================================================================== */
.designer { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .designer { grid-template-columns: 1fr 420px; } }

.designer__stage {
  position: sticky; top: 90px;
  background: radial-gradient(130% 100% at 50% 10%, #f0eee7 0%, #ddd9cf 100%);
  border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--line);
}
.tee { filter: drop-shadow(0 22px 30px rgba(20,18,31,.22)); }
#tee-body { paint-order: stroke; }
.tee-wrap { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1; }
.tee { width: 100%; height: 100%; }
.tee.tee--transfer { opacity: .1; }
.seg--wrap { flex-wrap: wrap; border-radius: var(--radius-lg); }
.seg--wrap button { flex: 1 0 44%; }

.print-area {
  position: absolute; border: 1.5px dashed rgba(123,47,247,.5); border-radius: 6px;
  display: grid; place-items: center; overflow: visible;
}
.tee--transfer + .print-area {
  left: 8% !important; top: 8% !important; width: 84% !important; height: 84% !important;
  border-color: rgba(123,47,247,.7); background: rgba(255,255,255,.6);
}
.print-area__hint {
  position: absolute; bottom: -26px; left: 0; right: 0; text-align: center;
  font-size: .7rem; color: var(--muted); pointer-events: none;
}
#art {
  position: absolute; max-width: none; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
#art:active { cursor: grabbing; }
.muted-note { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 34px; }

.designer__panel { display: grid; gap: 20px; }
.ctl { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.ctl > legend, .ctl__label { font-family: var(--font-display); font-weight: 700; font-size: .92rem; padding: 0; }
.ctl--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; }

.radio { display: flex; align-items: center; gap: 10px; font-size: .95rem; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.radio:has(input:checked) { border-color: var(--c-violet); background: var(--grad-brand-soft); }

.dropzone {
  display: grid; place-items: center; gap: 6px; text-align: center;
  padding: 26px 18px; border: 2px dashed var(--line); border-radius: var(--radius-md);
  color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--c-violet); background: var(--grad-brand-soft); }
.dropzone small { font-size: .72rem; }

.upload-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; }
.file-name { font-size: .82rem; color: var(--ink-soft); word-break: break-all; }
.link-btn { font-size: .82rem; font-weight: 700; color: var(--c-blue); text-decoration: underline; }
.upload-status { font-size: .8rem; color: var(--muted); margin: 0; }

.dpi { font-size: .8rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin: 0; }
.dpi--ok { background: rgba(22,217,127,.14); color: #0c7a49; }
.dpi--warn { background: rgba(255,138,0,.15); color: #a55600; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px #fff; transition: transform .12s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--c-violet); outline-offset: 2px; }

.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--radius-pill); overflow: hidden; }
.seg button { padding: .55em 1em; font-family: var(--font-display); font-weight: 700; font-size: .82rem; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

input[type="range"] { width: 100%; accent-color: var(--c-violet); }
.qty { width: 100%; padding: .7em 1em; border-radius: var(--radius-md); border: 2px solid var(--line); }
#notes-input { width: 100%; padding: .8em 1em; border-radius: var(--radius-md); border: 2px solid var(--line); resize: vertical; }
#notes-input:focus, .qty:focus { border-color: var(--c-violet); outline: none; }

.price-box { display: grid; text-align: right; }
.price-box strong { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
.muted { color: var(--muted); }
.muted.center { text-align: center; }

/* ---------- Catalogue chips ---------- */
.chip {
  padding: .5em 1.1em; border-radius: var(--radius-pill); border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.catalog-filters { display: grid; gap: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row:first-child .chip { border-color: var(--c-violet); }
.chip-row:first-child .chip[aria-pressed="true"] { background: var(--c-violet); border-color: var(--c-violet); }

/* ---------- DTF product page ---------- */
.product-hero { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .product-hero { grid-template-columns: 1fr 1fr; } }
.product-hero__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 1; }
.product-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.price-lg { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.info-cards { display: grid; gap: 14px; margin-top: 22px; }
.info-cards div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
.info-cards strong { font-family: var(--font-display); }

/* ==========================================================================
   Dropdown mega-menu
   ========================================================================== */
.has-drop { position: relative; }
.drop-toggle {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px;
}
.drop-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.has-drop:hover .drop-toggle::after, .has-drop.open .drop-toggle::after { transform: rotate(225deg) translateY(-2px); }
/* The menu used to be centred on the "Butik" button, which sits well left of
   centre — so with three columns it ran off the left edge of the screen. It
   now opens from the left edge of the button and is kept inside the window by
   a small nudge in main.js. */
.drop {
  position: absolute; top: 100%; left: 0; transform: translateY(8px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 22px 26px; display: flex; gap: 36px;
  flex-wrap: nowrap; max-width: min(94vw, 660px);
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; z-index: 120;
}
.has-drop:hover .drop, .has-drop.open .drop { opacity: 1; visibility: visible; transform: translateY(6px); }
.drop__col { display: grid; gap: 8px; min-width: 124px; align-content: start; }
#nav-cats { display: contents; }
.drop__head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.drop a { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.drop a:hover { color: var(--c-violet); }
@media (max-width: 900px) {
  .drop {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 6px 0 6px 16px;
    display: none; gap: 20px; flex-direction: column;
  }
  .has-drop.open .drop { display: flex; transform: none; max-width: none; margin-left: 0 !important; }
  .drop-toggle { width: 100%; justify-content: space-between; font-size: 1.15rem; padding: 10px 0; }
}

/* ==========================================================================
   Swatch dots on product cards
   ========================================================================== */
.swatch-dots { display: inline-flex; gap: 5px; }
.swatch-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
a.product-card { color: inherit; }

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cx-drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.cx-drawer.open { pointer-events: auto; }
.cx-drawer__scrim { position: absolute; inset: 0; background: rgba(20,18,31,.45); opacity: 0; transition: opacity .2s; }
.cx-drawer.open .cx-drawer__scrim { opacity: 1; }
.cx-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--surface); box-shadow: var(--shadow-md);
  transform: translateX(100%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.cx-drawer.open .cx-drawer__panel { transform: translateX(0); }
.cx-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cx-drawer__top strong { font-family: var(--font-display); font-size: 1.1rem; }
.cx-drawer__body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.cx-drawer__empty { color: var(--muted); text-align: center; padding: 40px 0; }
.cx-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cx-line__img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.cx-line__info strong { font-family: var(--font-display); font-size: .92rem; display: block; }
.cx-line__meta { font-size: .74rem; color: var(--muted); display: block; margin: 2px 0 6px; }
.cx-qty { display: flex; align-items: center; gap: 8px; }
.cx-qty > button[data-act="inc"], .cx-qty > button[data-act="dec"] {
  width: 26px; height: 26px; border: 1.5px solid var(--line); border-radius: 7px;
  font-weight: 700; font-size: .95rem; line-height: 1; background: var(--surface);
  display: grid; place-items: center; color: var(--ink);
}
.cx-qty > button[data-act="inc"]:hover, .cx-qty > button[data-act="dec"]:hover { border-color: var(--c-violet); }
.cx-qty__n { min-width: 18px; text-align: center; font-weight: 700; font-size: .9rem; }
.cx-line__rm {
  border: 0 !important; background: none !important; padding: 0 !important;
  color: var(--c-blue); text-decoration: underline; font-size: .76rem;
  margin-left: 8px; width: auto; height: auto;
}
.cx-line__price { font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.cx-drawer__foot { padding: 16px 20px 22px; border-top: 1px solid var(--line); }
.cx-drawer__row { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; margin-bottom: 6px; }
.cx-drawer__subtotal { font-size: 1.15rem; }
.cx-drawer__note { font-size: .76rem; color: var(--muted); margin: 0 0 12px; }
.cx-drawer__foot .btn { margin-top: 8px; }

/* Toast */
.cx-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 400;
}
.cx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* First-visit welcome banner */
.cvx-welcome {
  position: fixed; left: 18px; bottom: 18px; z-index: 260; width: min(320px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 18px 18px 16px;
  transform: translateY(140%); transition: transform .3s ease;
}
.cvx-welcome.show { transform: translateY(0); }
.cvx-welcome strong { font-family: var(--font-display); font-size: 1.05rem; display: block; }
.cvx-welcome p { font-size: .85rem; color: var(--muted); margin: 6px 0 12px; }
.cvx-welcome__code { display: flex; align-items: center; gap: 10px; }
.cvx-welcome__code code {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .06em;
  background: var(--grad-brand-soft); color: var(--c-violet); padding: 8px 12px; border-radius: 8px;
}
.cvx-welcome__x { position: absolute; top: 8px; right: 12px; font-size: 1.3rem; color: var(--muted); line-height: 1; }
@media (max-width: 560px) { .cvx-welcome { left: 12px; bottom: 74px; } }

/* WhatsApp floating button */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center; box-shadow: var(--shadow-md); z-index: 250;
  transition: transform .15s;
}
.wa-fab:hover { transform: scale(1.06); }
@media (max-width: 560px) { .wa-fab { width: 48px; height: 48px; right: 14px; bottom: 14px; } }

/* ==========================================================================
   Product detail page (PDP)
   ========================================================================== */
.pdp { display: grid; gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; } }
.pdp__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 1; position: sticky; top: 96px; }
.pdp__media img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info h1 { margin: 6px 0 10px; }
.pdp__info .ctl { margin-top: 20px; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout { display: grid; gap: clamp(24px, 4vw, 44px); align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1.3fr .9fr; } }
.checkout__form h3 { font-size: 1.05rem; margin-bottom: 12px; }
.checkout__summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; position: sticky; top: 96px;
}
.checkout__summary h3 { font-size: 1.05rem; margin-bottom: 14px; }
.co-line { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.co-line img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.co-line strong { font-family: var(--font-display); font-size: .86rem; display: block; }
.co-line small { color: var(--muted); font-size: .74rem; display: block; }
.co-line > span { font-family: var(--font-display); font-weight: 700; font-size: .86rem; }
.co-qty { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.co-qty > button[data-co="inc"], .co-qty > button[data-co="dec"] {
  width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 6px;
  font-weight: 700; background: var(--surface); display: grid; place-items: center; color: var(--ink);
}
.co-qty > span { min-width: 16px; text-align: center; font-weight: 700; font-size: .82rem; }
.co-rm { border: 0; background: none; padding: 0; margin-left: 6px; color: var(--c-blue); text-decoration: underline; font-size: .72rem; }
.co-discount { display: flex; gap: 8px; margin: 16px 0 0; }
.co-discount input { flex: 1; padding: .7em 1em; border: 2px solid var(--line); border-radius: var(--radius-md); text-transform: uppercase; }
.co-totals { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.co-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .92rem; }
.co-row--disc { color: #0c7a49; }
.co-row--total { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.ship-list { display: grid; gap: 10px; }
.ship-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 2px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; font-size: .9rem; }
.ship-opt:has(input:checked) { border-color: var(--c-violet); background: var(--grad-brand-soft); }
.ship-opt strong { font-family: var(--font-display); }

/* ==========================================================================
   Coming soon
   ========================================================================== */
.soon { min-height: calc(100vh - 78px); display: grid; place-items: center; text-align: center; color: #fff; position: relative; overflow: hidden; padding: 40px 20px; }
.soon__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.soon::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,10,20,.60) 0%, rgba(12,10,20,.42) 42%, rgba(12,10,20,.78) 100%); }
.soon h1 { color: #fff; font-size: clamp(2.6rem, 8vw, 5.5rem); }
.soon__count { display: flex; gap: clamp(14px, 4vw, 40px); justify-content: center; margin: 32px 0; }
.soon__count div { min-width: 64px; }
.soon__count b { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); display: block; }
.soon__count span { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.soon form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; }
.soon input { flex: 1 1 200px; padding: .95em 1.2em; border-radius: var(--radius-pill); border: 0; }
.soon .brand-logo { height: 54px; width: auto; margin-bottom: 20px; }


/* ==========================================================================
   Full-bleed hero banner (edge to edge)
   ========================================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 46vw, 620px);
  background: #cfcac4 url("../img/hero-banner.webp") 92% center / cover no-repeat;
  display: flex; align-items: center;
}
@media (max-width: 700px) {
  .hero-banner { background-image: url("../img/hero-banner-sm.webp"); background-position: 72% center; min-height: 460px; }
}
.hero-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(248,247,244,.97) 0%, rgba(248,247,244,.93) 30%, rgba(248,247,244,.60) 44%, rgba(248,247,244,.05) 60%, rgba(248,247,244,0) 70%);
}
@media (max-width: 700px) {
  .hero-banner::before { background: linear-gradient(180deg, rgba(248,247,244,.95) 0%, rgba(248,247,244,.72) 45%, rgba(248,247,244,.10) 100%); }
}
.hero-banner__inner { position: relative; z-index: 1; padding: clamp(34px,5vw,70px) 0; }
.hero-banner__copy { max-width: 46ch; }
.hero-banner h1 { margin: .18em 0 .45em; }
@media (max-width: 700px) { .hero-banner__copy { max-width: none; } }

/* ==========================================================================
   Scrollable colour palette
   ========================================================================== */
.swatch-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.swatch-scroll::-webkit-scrollbar { height: 6px; }
.swatch-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.swatch-scroll .swatch { flex: 0 0 auto; scroll-snap-align: start; }

/* colour picker used in the designer */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px,1fr)); gap: 10px; max-height: 132px; overflow-y: auto; padding: 4px; }
.palette::-webkit-scrollbar { width: 6px; }
.palette::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.palette__name { font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* product-page thumbnails */
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp__thumb { width: 74px; height: 92px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); padding: 0; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-violet); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__media { aspect-ratio: 1/1; background: var(--surface-2); }
.pdp__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* product cards show taller (model) photos nicely */
.product-card__media { aspect-ratio: 4/5; }



/* ---------- Coming soon (rebuilt) ---------- */
.soon__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.soon__lead { color: rgba(255,255,255,.92); margin: 12px auto 0; max-width: 48ch; }
.soon__count div b { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.soon__foot { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
              font-size: .88rem; color: rgba(255,255,255,.8); }
.soon__foot a { color: #fff; text-decoration: underline; }
.soon .brand-logo { filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); }


/* ---------- Swatches: always perfectly round, never squashed ---------- */
.swatch, .swatch-scroll .swatch, .palette .swatch {
  flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px; min-height: 34px;
  aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; box-sizing: border-box;
  border: 2px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 2px #fff;
}
.swatch[aria-pressed="true"] { outline: 3px solid var(--c-violet); outline-offset: 2px; }
.swatch-scroll { padding: 6px 2px 12px; gap: 12px; align-items: center; }
.palette { grid-template-columns: repeat(auto-fill, 34px); justify-content: start; gap: 12px; padding: 6px 2px; }


/* ---------- Four featured tees under the hero ---------- */
.four-up { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center; }
@media (min-width: 900px) { .four-up { grid-template-columns: minmax(260px, 1fr) 2fr; } }
.four-up__copy .lead { margin: 12px 0 20px; }
.four-up__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .four-up__grid { grid-template-columns: repeat(4, 1fr); } }
.four-up__grid a { display: block; }
.four-up__grid img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg);
  background: var(--surface-2); box-shadow: var(--shadow-sm); transition: transform .18s;
}
.four-up__grid a:hover img { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.four-up__grid span { display: block; margin-top: 9px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; }


/* ---------- DTF garment-colour preview ---------- */
.dtf-colours { margin-top: 16px; }
.dtf-colours .ctl__label { display: block; margin-bottom: 8px; }
.product-hero__media { aspect-ratio: 4/5; }
.product-hero__media img { object-fit: contain; padding: 8px; }


/* ---------- Print-quality meter ---------- */
.quality { display: grid; gap: 6px; }
.quality__head { display: flex; justify-content: space-between; font-size: .84rem; font-family: var(--font-display); font-weight: 600; }
.quality__bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.quality__bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s ease, background .25s ease; }

/* ---------- "See it on every colour" strip ---------- */
.cstrip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; margin-top: 8px; }
.cstrip { display: grid; gap: 4px; justify-items: center; padding: 0; }
.cstrip__tee {
  position: relative; width: 100%; aspect-ratio: 1/1; display: block; border-radius: 6px;
  clip-path: polygon(36% 2%,30% 6%,12% 18%,20% 32%,28% 26%,28% 98%,72% 98%,72% 26%,80% 32%,88% 18%,70% 6%,64% 2%,60% 11%,40% 11%);
  transition: transform .15s ease;
}
.cstrip:hover .cstrip__tee { transform: translateY(-3px); }
.cstrip[aria-pressed="true"] .cstrip__tee { outline: 3px solid var(--c-violet); outline-offset: 2px; border-radius: 8px; }
.cstrip__tee img { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 46%; }
.cstrip__label { font-size: .64rem; color: var(--muted); line-height: 1.1; text-align: center; }


/* coming-soon sits under the normal header now */
.soon .brand-logo { transition: transform .15s ease; }
.soon a:hover .brand-logo { transform: scale(1.04); }


/* ---------- Coming-soon: logo is a real, obviously clickable link ---------- */
.soon__logo {
  display: inline-block;          /* wraps the block-level <img> exactly */
  line-height: 0; cursor: pointer;
  border-radius: 12px; padding: 6px 10px; margin-bottom: 4px;
  transition: transform .15s ease, background .15s ease;
}
.soon__logo:hover { transform: scale(1.05); background: rgba(255,255,255,.10); }
.soon__logo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.soon__logo .brand-logo { margin: 0; }
@media (max-width: 700px) {
  .soon__bg { background-image: url("../img/coming-soon-bg-sm.webp") !important; }
}


/* keep the coming-soon copy readable over the photo */
.soon h1, .soon__lead, .soon__count b, .soon__count span { text-shadow: 0 2px 16px rgba(0,0,0,.75); }
.soon .eyebrow { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.soon__foot a, .soon__foot span { text-shadow: 0 1px 8px rgba(0,0,0,.8); }




/* ==========================================================================
   Featured four — t-shirts fanning up out of a "bucket"
   ========================================================================== */
.section--compact { padding: clamp(26px, 3.5vw, 48px) 0; }

.four-up { display: grid; gap: clamp(18px, 2.5vw, 36px); align-items: center; }
@media (min-width: 900px) { .four-up { grid-template-columns: minmax(220px, 0.8fr) 1.2fr; } }
.four-up__copy h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.four-up__copy .lead { font-size: .95rem; margin: 8px 0 16px; max-width: 34ch; }

.tee-fan { position: relative; height: clamp(258px, 23vw, 320px); }
.tee-fan__item {
  position: absolute; bottom: 44px; width: 32%;
  transform-origin: 50% 100%;
  transition: transform .22s ease, filter .22s ease;
  filter: drop-shadow(0 10px 18px rgba(20,18,31,.18));
}
.tee-fan__item img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: transparent; display: block;
}
/* the arc: outer tees lean out and sit lower, inner tees stand tallest */
.tee-fan__item:nth-child(1) { left:  1%;  transform: rotate(-15deg) translateY(8px); z-index: 1; }
.tee-fan__item:nth-child(2) { left: 22%;  transform: rotate(-5deg)  translateY(-2px); z-index: 2; }
.tee-fan__item:nth-child(3) { left: 43%;  transform: rotate(5deg)   translateY(-2px); z-index: 2; }
.tee-fan__item:nth-child(4) { left: 62%;  transform: rotate(15deg)  translateY(8px); z-index: 1; }
.tee-fan__item:hover { z-index: 5; filter: drop-shadow(0 16px 26px rgba(20,18,31,.30)); }
.tee-fan__item:nth-child(1):hover { transform: rotate(-15deg) translateY(-6px) scale(1.05); }
.tee-fan__item:nth-child(2):hover { transform: rotate(-5deg)  translateY(-16px) scale(1.05); }
.tee-fan__item:nth-child(3):hover { transform: rotate(5deg)   translateY(-16px) scale(1.05); }
.tee-fan__item:nth-child(4):hover { transform: rotate(15deg)  translateY(-6px) scale(1.05); }

/* soft base the shirts appear to rise out of */
.tee-fan__base {
  position: absolute; bottom: 26px; left: 14%; right: 14%; height: 24px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(20,18,31,.20), rgba(20,18,31,0) 72%);
  border-radius: 50%; z-index: 0; pointer-events: none;
}

@media (max-width: 620px) {
  .tee-fan { height: 200px; }
  .tee-fan__item { width: 38%; }
  .tee-fan__item:nth-child(1) { left: -2%; }
  .tee-fan__item:nth-child(2) { left: 20%; }
  .tee-fan__item:nth-child(3) { left: 42%; }
  .tee-fan__item:nth-child(4) { left: 64%; }
}


/* ==========================================================================
   PRODUCT PAGE — thumbnails down the LEFT side, big photo on the right
   ========================================================================== */
.pdp__gallery { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: start; }
/* designs with no extra photos have no thumbnail strip — give the photo the whole width */
.pdp__gallery:not(:has(.pdp__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.pdp__gallery > .pdp__media:only-child { grid-column: 1 / -1; }
.pdp__thumbs {
  display: flex; flex-direction: column; gap: 10px; margin-top: 0;
  max-height: 620px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px;
}
.pdp__thumb { width: 100%; height: 96px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); padding: 0; cursor: pointer; flex: 0 0 auto; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-violet); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; max-height: none; overflow-x: auto; order: 2; margin-top: 12px; }
  .pdp__thumb { width: 74px; height: 92px; }
  .pdp__media { order: 1; }
}

/* ==========================================================================
   FULL-WIDTH PHOTO BAND (home page)
   ========================================================================== */
.band {
  position: relative; width: 100%;
  min-height: clamp(320px, 34vw, 520px); display: grid; align-items: center;
  overflow: hidden; margin-top: 26px; margin-bottom: 26px;
}
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.band__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,14,24,.80) 0%, rgba(16,14,24,.55) 46%, rgba(16,14,24,.12) 100%); }
.band__inner { position: relative; color: #fff; max-width: var(--container); padding-block: 54px; }
.band__inner h2 { color: #fff; margin: 6px 0 12px; max-width: 16ch; }
.band__inner .lead { color: rgba(255,255,255,.88); max-width: 46ch; margin-bottom: 22px; }
.band__inner .eyebrow { color: #fff; opacity: .8; }
@media (max-width: 640px) {
  .band__veil { background: linear-gradient(180deg, rgba(16,14,24,.35) 0%, rgba(16,14,24,.82) 62%); }
  .band__inner { padding-block: 40px; }
}

/* ==========================================================================
   CORVIXAL MERCH
   ========================================================================== */
.merch { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center; }
.merch__copy h2 { margin: 6px 0 10px; }
.merch__copy .lead { max-width: 44ch; margin-bottom: 14px; }
.merch__copy .price-lg { margin: 0 0 18px; }
.merch__copy .btn + .btn { margin-left: 10px; }
.merch__shots { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.merch__shots a { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.merch__shots a:first-child { grid-row: span 2; }
.merch__shots img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform .25s; }
.merch__shots a:first-child img { aspect-ratio: 4/5.4; }
.merch__shots a:hover img { transform: scale(1.04); }
@media (min-width: 860px) { .merch { grid-template-columns: .85fr 1.15fr; } }

/* ==========================================================================
   BUNDLE PRICE — "3 for 330 kr", shown wherever the customer is deciding
   ========================================================================== */
.bundle-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 12px 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px dashed var(--c-violet);
  font-size: .95rem; line-height: 1.45;
}
.bundle-bar__tag {
  flex: 0 0 auto; background: var(--c-violet); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.bundle-bar--sm { margin: 4px 0 14px; padding: 10px 14px; font-size: .88rem; }
.cx-bundle {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface-1); border: 1px dashed var(--c-violet);
  font-size: .85rem; line-height: 1.45;
}
.cx-bundle--on { border-style: solid; border-color: #2f7d52; background: #eef8f1; color: #1d4f34; }

/* ==========================================================================
   PDP — keep the size picker and the buy button a normal width, not the full
   width of the right-hand column
   ========================================================================== */
.pdp__info #pdp-size,
.pdp__info #pdp-add,
.pdp__info .ctl--split { max-width: 330px; }
.pdp__info .bundle-bar { max-width: 430px; }


/* ==========================================================================
   "Ur vår officiella kollektion" — a proper section title, not a small label
   ========================================================================== */
.strip-title {
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-violet);
  margin: 0 0 24px;
}

/* ==========================================================================
   PROMO BANNERS (shop page, DTF page) — the artwork carries the words, we
   only add the real buttons on top of it
   ========================================================================== */
/* full width, edge to edge, and capped in height so it does not swallow the
   screen — the artwork is 16:9, so it is cropped top and bottom            */
.promo {
  position: relative; display: block; overflow: hidden; width: 100%;
}
/* full width, full height — the whole artwork, nothing cropped */
.promo__img { display: block; width: 100%; height: auto; }
.promo__inner {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 6%, 34px);
  display: flex; gap: 12px; flex-wrap: wrap; max-width: none;
  padding-inline: clamp(18px, 5vw, 72px);
}
.promo--street .promo__inner { justify-content: flex-start; }
/* the Print-on-Demand artwork has its own icon row across the bottom, so the
   button sits in a bar underneath instead of on top of it */
.promo--pod .promo__inner {
  position: static; justify-content: center; padding-block: 16px 4px;
}
.btn--onphoto { background: rgba(255,255,255,.92); border-color: transparent; color: var(--ink); }
.btn--onphoto:hover { background: #fff; }
@media (max-width: 700px) {
  .promo__inner { position: static; padding-block: 14px; justify-content: center !important; }
  .btn--onphoto { background: transparent; border-color: var(--line); }
}
.page-hero--tight { padding-top: clamp(26px, 4vw, 48px); }

/* ==========================================================================
   SHOP PAGE — menu down the left-hand side
   ========================================================================== */
.shop-layout { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 208px minmax(0, 1fr); } }
.shop-side__toggle {
  display: block; width: 100%; text-align: left; font-family: var(--font-display);
  font-weight: 700; font-size: .95rem; padding: 12px 16px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.shop-side__toggle::after { content: " ▾"; float: right; }
.shop-side__panel { display: none; padding-top: 12px; }
.shop-side.open .shop-side__panel { display: block; }
.shop-side__head {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 6px;
}
.shop-side__head:first-of-type { margin-top: 0; }
.shop-side ul { list-style: none; margin: 0; padding: 0; }
.shop-side li a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 8px; text-decoration: none;
  color: var(--ink); font-size: .95rem; line-height: 1.3;
}
.shop-side li a span { color: var(--muted); font-size: .8rem; }
.shop-side li a:hover { background: var(--surface-2); }
.shop-side li a[aria-current="true"] { background: var(--c-violet); color: #fff; font-weight: 600; }
.shop-side li a[aria-current="true"] span { color: rgba(255,255,255,.8); }
@media (min-width: 900px) {
  .shop-side__toggle { display: none; }
  .shop-side__panel { display: block; padding-top: 0; position: sticky; top: 96px; }
}

/* ==========================================================================
   SHOP CARDS — colour buttons under the photo, hover to preview
   ========================================================================== */
.product-card__link { display: block; text-decoration: none; color: inherit; }
.card-swatches { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 62%; }
.card-sw {
  width: 15px; height: 15px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(20,18,31,.22); box-sizing: border-box;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card-sw:hover, .card-sw:focus-visible {
  transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-violet); outline: none;
}
.product-card__media img { transition: opacity .12s ease; }

/* ==========================================================================
   T-SHIRT SHAPED COLOUR PICKER (DTF page)
   ========================================================================== */
.tee-sw-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px; margin-top: 8px;
}
.tee-sw { background: none; border: 0; padding: 6px 2px; cursor: pointer; border-radius: 10px; }
.tee-sw__shape {
  display: block; width: 100%; aspect-ratio: 1 / 1.05; margin-inline: auto; max-width: 58px;
  border: 1px solid rgba(20,18,31,.18);
  clip-path: polygon(30% 0, 40% 6%, 60% 6%, 70% 0, 100% 16%, 88% 36%, 78% 30%, 78% 100%, 22% 100%, 22% 30%, 12% 36%, 0 16%);
}
.tee-sw__name { display: block; font-size: .72rem; margin-top: 5px; color: var(--muted); line-height: 1.2; }
.tee-sw[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--c-violet); }
.tee-sw[aria-pressed="true"] .tee-sw__name { color: var(--ink); font-weight: 600; }
.tee-sw:hover .tee-sw__shape { transform: translateY(-2px); }

/* ==========================================================================
   WELCOME POP-UP — e-mail first, code second
   ========================================================================== */
.cvx-welcome__form { display: flex; gap: 8px; margin-top: 12px; }
.cvx-welcome__form input {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.cvx-welcome__form input.bad { border-color: #c0392b; }
.cvx-welcome__form .btn { flex: 0 0 auto; }
.cvx-welcome__err { margin: 8px 0 0; color: #c0392b; font-size: .82rem; }
.cvx-welcome__fine { margin: 10px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }


/* ==========================================================================
   COLOUR SWATCHES — an opaque panel behind every t-shirt shape, so a white
   or sand shirt is just as visible as a black one
   ========================================================================== */
.cstrip,
.tee-sw {
  background: #e9e6dd;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 5px 6px;
}
.cstrip:hover,
.tee-sw:hover { background: #e2ded2; }
.cstrip[aria-pressed="true"],
.tee-sw[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c-violet);
}
/* the outline was drawn round the clipped t-shirt, which cut it up — the
   panel carries the selected state instead */
.cstrip[aria-pressed="true"] .cstrip__tee { outline: none; }
.cstrip__tee,
.tee-sw__shape { filter: drop-shadow(0 1px 1px rgba(20,18,31,.22)); }
.cstrip__label,
.tee-sw__name { color: var(--ink-soft); }
.cstrip[aria-pressed="true"] .cstrip__label,
.tee-sw[aria-pressed="true"] .tee-sw__name { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   DESIGNER — the exact print size and rotation, in boxes under each slider
   ========================================================================== */
.readout { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.readout input[type="number"] {
  width: 82px; padding: 7px 10px; font: inherit; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink);
}
.readout input[type="number"]:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 1px; }
.readout__x { font-size: .9rem; font-weight: 600; color: var(--ink); }
.readout__alt {
  font-size: .8rem; color: var(--muted); margin-left: auto;
  background: var(--surface-2); border-radius: 999px; padding: 3px 10px;
}
.readout__hint { font-size: .76rem; color: var(--muted); margin: 2px 0 14px; line-height: 1.35; }

/* ==========================================================================
   PHONES — the fanned-out tees are laid out with absolute positions and
   rotations that need a wide column; on a narrow screen they hang off both
   edges, so below 640 px they become a plain 2 x 2 grid instead.
   ========================================================================== */
@media (max-width: 640px) {
  .tee-fan {
    height: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 4px 0 8px;
  }
  .tee-fan__item,
  .tee-fan__item:nth-child(1),
  .tee-fan__item:nth-child(2),
  .tee-fan__item:nth-child(3),
  .tee-fan__item:nth-child(4) {
    position: static; width: 100%; left: auto; transform: none;
  }
  .tee-fan__item:hover,
  .tee-fan__item:nth-child(1):hover,
  .tee-fan__item:nth-child(2):hover,
  .tee-fan__item:nth-child(3):hover,
  .tee-fan__item:nth-child(4):hover { transform: translateY(-4px); }
  .tee-fan__base { display: none; }
}

/* Footer links are only ~19 px tall, which is a small target on a phone.
   Give them room to be tapped without changing how they look on desktop. */
@media (max-width: 760px) {
  .site-footer__grid ul li { margin: 0; }
  .site-footer__grid ul li a { display: inline-block; padding: 8px 0; }
  .site-footer__legal a { display: inline-block; padding: 6px 0; }
}

/* ==========================================================================
   NARROW SCREENS — a grid track is allowed to grow to its content's natural
   size, and an <img> with width/height attributes reports its full pixel
   width as that minimum. On a 360 px phone that pushed the DTF page 26 px
   wider than the screen. Clamp the tracks and let pictures and form fields
   shrink.
   ========================================================================== */
.product-hero,
.pdp,
.designer,
.checkout,
.shop-layout,
.merch,
.four-up { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .product-hero, .pdp { grid-template-columns: 1fr 1fr; }
  .checkout { grid-template-columns: 1.3fr .9fr; }
  .shop-layout { grid-template-columns: 208px minmax(0, 1fr); }
}
@media (min-width: 960px) { .designer { grid-template-columns: minmax(0,1fr) 420px; } }
@media (min-width: 860px) { .merch { grid-template-columns: .85fr 1.15fr; } }
@media (min-width: 900px) { .four-up { grid-template-columns: minmax(220px, 0.8fr) 1.2fr; } }

img, svg, video { max-width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   ITEM 5 — the three figures under the hero were too faint to read on a
   phone, because the labels sit on a photo. Darken them there.
   ========================================================================== */
@media (max-width: 760px) {
  .hero__stats span {
    color: var(--ink);
    font-weight: 600;
    opacity: .92;
    text-shadow: 0 1px 2px rgba(255,255,255,.65);
  }
  .hero__stats b { text-shadow: 0 1px 2px rgba(255,255,255,.55); }
}

/* ==========================================================================
   ITEM 1 — the 10 % pop-up on a phone. It was anchored bottom-left at a
   fixed 320 px, which left it tucked behind the WhatsApp button and easy to
   miss. On a phone it now spans the width, just above that button.
   ========================================================================== */
@media (max-width: 560px) {
  .cvx-welcome {
    left: 10px; right: 10px; bottom: 86px;
    width: auto; max-width: none;
    padding: 16px 16px 14px;
  }
  .cvx-welcome__form { flex-wrap: wrap; }
  .cvx-welcome__form input { flex: 1 1 100%; }
  .cvx-welcome__form .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   ITEM 6 — on a phone the colour circles sat below the price and the bundle
   box, so you had to scroll to reach them. Put the colour row directly under
   the photo, and let all twelve wrap into view instead of scrolling sideways.
   ========================================================================== */
@media (max-width: 760px) {
  .pdp__info { display: flex; flex-direction: column; }
  .pdp__info .eyebrow          { order: 1; }
  .pdp__info h1                { order: 2; }
  .pdp__info .pdp-rating       { order: 3; }
  .pdp__info .ctl              { order: 8; }      /* the generic rule first … */
  .pdp__info .ctl.ctl--colour  { order: 4; margin-top: 2px; }  /* … so this wins */
  .pdp__info .price-lg         { order: 5; }
  .pdp__info .bundle-bar       { order: 6; }
  .pdp__info > .muted          { order: 7; }
  .pdp__info .ctl.ctl--split   { order: 9; }
  .pdp__info #pdp-add          { order: 10; }
  .pdp__info #pdp-hint         { order: 11; }

  /* all twelve visible at once, no sideways scrolling */
  #pdp-swatches {
    display: flex; flex-wrap: wrap; gap: 10px;
    overflow: visible; padding-right: 0;
  }
  #pdp-swatches .swatch { flex: 0 0 auto; }
}

/* ==========================================================================
   ITEM 9 — the small buy card that appears once the real Add-to-cart button
   has scrolled out of sight
   ========================================================================== */
.buy-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 250;
  display: flex; align-items: center; gap: 12px;
  width: min(360px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 10px 12px;
  transform: translateY(140%); transition: transform .25s ease;
}
.buy-bar.show { transform: translateY(0); }
.buy-bar__img {
  width: 48px; height: 60px; object-fit: cover; border-radius: 8px;
  background: var(--surface-2); flex: 0 0 auto;
}
.buy-bar__info { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.buy-bar__info strong {
  display: block; font-family: var(--font-display); font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buy-bar__info span { font-size: .8rem; color: var(--muted); }
.buy-bar .btn { flex: 0 0 auto; }
.buy-bar__x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  font-size: 1rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0;
}
/* on a phone the WhatsApp button lives bottom-right, so sit above it */
@media (max-width: 640px) {
  .buy-bar { right: 10px; left: 10px; width: auto; bottom: 84px; }
}

/* ==========================================================================
   ITEM 10 — the strip of products you looked at before this one
   ========================================================================== */
.recent-row {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.recent-card {
  flex: 0 0 clamp(132px, 30vw, 168px); scroll-snap-align: start;
  text-decoration: none; color: inherit;
}
.recent-card img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-md); background: var(--surface-2);
  border: 1px solid var(--line); transition: transform .18s;
}
.recent-card:hover img { transform: translateY(-4px); }
.recent-card__name {
  display: block; margin-top: 8px; font-family: var(--font-display);
  font-weight: 600; font-size: .86rem; line-height: 1.25;
}
.recent-card__price { display: block; font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   DTF MODEL STUDIO — pick a model, a shirt colour, and drop your design on
   the chest. The chest area itself is the upload button until a design is on
   it, exactly like the reference you sent.
   ========================================================================== */
.dtf-studio { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; align-items: start; }
.dtf-studio__models {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 620px; overflow-y: auto; padding-right: 2px;
}
.dtf-model {
  display: grid; gap: 3px; justify-items: center; padding: 5px 3px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: 10px;
}
.dtf-model img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.dtf-model span { font-size: .66rem; color: var(--muted); line-height: 1.1; }
.dtf-model[aria-pressed="true"] { border-color: var(--c-violet); }
.dtf-model[aria-pressed="true"] span { color: var(--ink); font-weight: 600; }

.dtf-studio__stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.dtf-studio__stage > img { display: block; width: 100%; height: auto; }

/* the print area on the chest */
.dtf-plate { position: absolute; }
.dtf-plate__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 6px;
  background: rgba(255,255,255,.55); color: #14121f;
  border: 2px dashed rgba(20,18,31,.55); border-radius: 6px;
  transition: background .15s ease;
}
.dtf-plate__btn:hover { background: rgba(255,255,255,.75); }
.dtf-plate__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .04em;
  font-size: clamp(.7rem, 1.6vw, 1rem); line-height: 1;
}
.dtf-plate__sub { font-size: clamp(.55rem, 1.1vw, .72rem); line-height: 1.15; text-align: center; }
.dtf-plate.has-art .dtf-plate__btn { display: none; }
.dtf-plate .dtf-art {
  position: absolute; left: 50%; top: 0;
  max-width: none; max-height: none; object-fit: fill;
  transform: translateX(-50%);
  transform-origin: center center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
#dtf-add[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
  .dtf-studio { grid-template-columns: 1fr; }
  .dtf-studio__models { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .dtf-model { flex: 0 0 74px; }
}

/* ==========================================================================
   Accounts — header icon + sign-in window
   ========================================================================== */
.acct-btn { position: relative; }
.acct-btn__dot { position: absolute; right: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-lime); border: 2px solid var(--surface); }
.acct-lock, .acct-lock body { overflow: hidden; }
.acct-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; }
.acct-modal.show { display: flex; }
.acct-modal__scrim { position: absolute; inset: 0; background: rgba(20,18,31,.55); }
.acct-modal__box { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-lg); padding: 28px 24px 22px; box-shadow: 0 24px 60px rgba(20,18,31,.25); }
.acct-modal__box h2 { font-size: 1.5rem; margin: 0 0 8px; padding-right: 30px; }
.acct-x { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted); }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface-2); border-radius: var(--radius-pill);
  padding: 4px; margin: 0 30px 18px 0; }
.acct-tabs button { border: 0; background: none; padding: 9px 8px; border-radius: var(--radius-pill); font: 600 .92rem var(--font-body); cursor: pointer; color: var(--ink-soft); }
.acct-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.acct-google { display: flex; justify-content: center; min-height: 44px; }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 16px 0; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acct-form .field { margin-bottom: 12px; }
.acct-foot { text-align: center; font-size: .88rem; color: var(--muted); margin: 14px 0 0; }
.acct-foot a { color: var(--c-violet); }
.acct-sub { color: var(--muted); margin: 0 0 18px; }
.acct-msg { background: #eef8f2; color: #0c7a49; border-radius: var(--radius-md); padding: 10px 12px; font-size: .9rem; margin: 0 0 14px; }
.acct-msg--err { background: #fdeeee; color: #b42318; }
.acct-page h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 12px; }
.acct-page .btn { margin-top: 8px; }

/* Mitt konto -> the customer's own order history */
.acct-orders { margin-top: 26px; }
.acct-orders h2 { font-size: 1.05rem; margin: 22px 0 10px; letter-spacing: .01em; }
.acct-orders h2:first-child { margin-top: 0; }
.acct-order {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 12px;
}
.acct-order > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.acct-order__no { font-family: var(--font-display); font-weight: 700; }
.acct-order__date { color: var(--muted); font-size: .86rem; }
.acct-pill {
  margin-left: auto; font-size: .74rem; font-weight: 600; padding: 3px 11px; border-radius: 999px;
  background: rgba(255,138,0,.14); color: #a35b00;
}
.acct-pill--sent { background: rgba(22,217,127,.16); color: #0c7a49; }
.acct-items { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.acct-items > li { padding: 7px 0; border-top: 1px solid var(--line); }
.acct-items > li:first-child { border-top: 0; }
.acct-meta { list-style: none; margin: 4px 0 0; padding: 0; color: var(--muted); font-size: .82rem; }
.acct-meta a { text-decoration: underline; }
.acct-order > footer {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem;
}
.acct-order__total { margin-left: auto; color: var(--ink); font-size: 1rem; }
@media (max-width: 520px) {
  .acct-pill { margin-left: 0; }
  .acct-order__total { margin-left: 0; }
}

/* ==========================================================================
   Reviews — stars under the product title + review section
   ========================================================================== */
.stars { display: inline-flex; gap: 1px; font-size: 1.05rem; line-height: 1; vertical-align: -2px; }
.star { position: relative; color: #ddd8cc; }
.star::after { content: "★"; position: absolute; left: 0; top: 0; width: var(--fill, 0%); overflow: hidden; color: #f5a623; }
.pdp-rating { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 10px; color: var(--ink-soft); font-size: .92rem; text-decoration: none; }
.pdp-rating:hover span { text-decoration: underline; }
.reviews { margin-top: 64px; scroll-margin-top: 90px; }
.reviews h2 { margin-bottom: 22px; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 40px; align-items: start; }
.rv-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.rv-avg { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.rv-avg--empty { color: var(--muted); }
.rv-summary .stars { font-size: 1.3rem; }
.rv-summary p { margin: 8px 0 16px; }
.rv-bar { display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); margin: 5px 0; }
.rv-bar i { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rv-bar b { display: block; height: 100%; background: #f5a623; border-radius: 99px; }
.rv-bar span:last-child { text-align: right; }
.rv-action { margin-bottom: 22px; }
.rv-note { color: var(--ink-soft); margin: 0 0 10px; }
.rv-empty { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--muted); }
.rv-item { border-top: 1px solid var(--line); padding: 18px 0; }
.rv-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.rv-item__head time { color: var(--muted); font-size: .85rem; margin-left: auto; }
.rv-item p { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.rv-verified { font-size: .78rem; font-weight: 600; color: #0c7a49; background: #e3f6ea; border-radius: 99px; padding: 2px 8px; }
.rv-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.rv-form h3 { font-size: 1.15rem; margin-bottom: 10px; }
.rv-pick { display: flex; gap: 4px; margin-bottom: 14px; }
.rv-pick button { border: 0; background: none; font-size: 2rem; line-height: 1; color: #ddd8cc; cursor: pointer; padding: 0 2px; }
.rv-pick button.on { color: #f5a623; }
.rv-pick button:focus-visible { outline: 2px solid var(--c-violet); border-radius: 6px; }
.rv-err { color: #b42318; font-size: .88rem; min-height: 1em; margin: 0 0 8px; }
@media (max-width: 760px) {
  .rv-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .reviews { margin-top: 44px; }
}

/* DTF studio: the two dropdowns line up — label on top, both full width like the buttons below */
.dtf-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 18px; }
.dtf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dtf-field .ctl__label { display: block; line-height: 1.25; }
.dtf-field .pill-select { width: 100%; max-width: none; margin: 0; }

/* DIN LOGGA placeholder: colour ring + text, like a print-area marker */
.dtf-plate__icon { width: 42%; max-width: 92px; height: auto; margin-bottom: 4px; }
.dtf-plate__title { font-size: clamp(.8rem, 2vw, 1.35rem); letter-spacing: .02em; line-height: 1.05; text-align: center; }
.dtf-plate__btn { background: rgba(255,255,255,.35); }

/* DTF studio: placement + front/back tabs, and the "which tool is which" note */
.dtf-field--place { margin: 22px 0 0; }
.dtf-field--place .seg { display: flex; width: 100%; }
.dtf-field--place .seg button { flex: 1 1 0; padding: 10px 6px; font-weight: 600; }
.dtf-side-tabs { display: flex; gap: 8px; margin: 0 0 10px 96px; }
.dtf-side-tabs button { padding: 8px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; }
.dtf-side-tabs button[aria-pressed="true"] { border-color: var(--c-violet); color: var(--c-violet); }
.dtf-side-tabs button.has-art::after { content: " ✓"; color: #0c7a49; }
.dtf-studio__models.is-off { opacity: .45; }
.dtf-back-note { position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: .78rem; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 999px; }
.tool-explain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 16px; font-size: .88rem; color: var(--ink-soft); }
.tool-explain p { margin: 0 0 6px; } .tool-explain p:last-child { margin: 0; }
.tool-explain--row { display: flex; gap: 14px; align-items: center; justify-content: space-between; max-width: 900px; }
@media (max-width: 700px) {
  .dtf-side-tabs { margin-left: 0; }
  .tool-explain--row { flex-direction: column; align-items: stretch; }
}
.dtf-field--place .seg--pos { display: flex; width: 100%; margin-top: 6px; }
.dtf-field--place .seg--pos button { flex: 1 1 0; padding: 9px 6px; font-weight: 600; font-size: .9rem; }

/* DTF studio: front and back side by side when "Fram + bak" is chosen */
.dtf-stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.dtf-stages.is-split { grid-template-columns: 1fr 1fr; }
.dtf-studio__stage { position: relative; align-self: start; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.dtf-stage__tag {
  position: absolute; left: 10px; top: 10px; font-size: .74rem; font-weight: 700;
  background: rgba(255,255,255,.88); color: var(--ink); padding: 3px 10px; border-radius: 999px; display: none;
}
.dtf-stages.is-split .dtf-stage__tag { display: block; }
.dtf-stages.is-split .dtf-studio__stage.is-active { outline: 3px solid var(--c-violet); outline-offset: 2px; border-radius: var(--radius-lg); }
.dtf-plate { cursor: pointer; }
.pill-tag { background: var(--surface-2); border-radius: 999px; padding: 3px 12px; font-size: .8rem; }
@media (max-width: 520px) { .dtf-stages.is-split { gap: 6px; } .dtf-stage__tag { font-size: .62rem; padding: 2px 7px; } }
.dtf-both {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px;
}
.dtf-both:hover { border-color: var(--c-violet); }
.dtf-both input { width: 20px; height: 20px; accent-color: var(--c-violet); flex: 0 0 auto; }
.dtf-both b { display: block; font-size: .92rem; font-family: var(--font-display); }
.dtf-both em { display: block; font-style: normal; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.dtf-both:has(input:checked) { border-color: var(--c-violet); background: rgba(123,47,247,.06); }
/* the note that a chest or neck print has a fixed size */
.dtf-fixed-note { background: var(--surface-2); border-left: 3px solid var(--c-violet); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }

/* On a computer the studio controls were running the full width of the column.
   Keep them to a comfortable reading width; on a phone they stay full width. */
@media (min-width: 900px) {
  /* The right-hand column is wider than the controls need, so the block sits
     in the middle of it instead of hugging the left edge. */
  [data-page="dtf"] .product-hero > div:last-child { display: flex; flex-direction: column; align-items: center; }
  [data-page="dtf"] .product-hero > div:last-child > * { width: 100%; max-width: 460px; }
  .product-hero .dtf-field--place .seg,
  .product-hero .dtf-field--place .seg--pos,
  .product-hero .dtf-fields,
  .product-hero .dtf-field .pill-select,
  .product-hero .dtf-both,
  .product-hero #dtf-to-designer,
  .product-hero #dtf-add,
  .product-hero #dtf-add-note,
  .product-hero .tool-explain,
  .product-hero #dtf-art-tools { max-width: 460px; }
  .product-hero #dtf-art-tools input[type="range"] { max-width: 460px; }
}

/* Designer: write your own text, or pick one of our ready-made lines */
.text-input { width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-md);
  font: 600 1rem var(--font-body); resize: vertical; }
.text-input:focus { border-color: var(--c-violet); outline: none; }
.text-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.text-row__lab { font-family: var(--font-display); font-weight: 700; font-size: .9rem; min-width: 74px; }
.text-row .pill-select { flex: 1; }
.text-colours { display: flex; gap: 8px; flex-wrap: wrap; }
.text-colours button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.text-colours button[aria-pressed="true"] { outline: 3px solid var(--c-violet); outline-offset: 2px; }
.text-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.text-quotes button {
  border: 2px solid var(--line); background: var(--surface); border-radius: var(--radius-md);
  padding: 12px 10px; cursor: pointer; font: 700 .78rem/1.25 var(--font-display);
  letter-spacing: .02em; color: var(--ink); text-align: center; min-height: 64px;
}
.text-quotes button:hover { border-color: var(--c-violet); color: var(--c-violet); }
#text-apply { margin-top: 12px; }

/* Cookie question — only shown when Google Analytics is switched on */
.cvx-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 560px;
  margin: 0 auto; background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: 0 16px 40px rgba(20,18,31,.18);
  transform: translateY(140%); transition: transform .28s ease;
}
.cvx-cookies.show { transform: translateY(0); }
.cvx-cookies p { margin: 0 0 12px; font-size: .92rem; color: var(--ink-soft); }
.cvx-cookies__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cvx-cookies a { font-size: .82rem; color: var(--muted); }
/* the ready-made line you picked is outlined so it is obvious which one it is */
.text-quotes button[aria-pressed="true"] { border-color: var(--c-violet); color: var(--c-violet); background: rgba(123,47,247,.06); box-shadow: 0 0 0 2px rgba(123,47,247,.25); }

/* ==========================================================================
   DTF studio on a computer: keep the model in view while the controls are used
   ========================================================================== */
@media (min-width: 900px) {
  /* the picture stays put as you scroll down to the settings, so every change
     to the typeface, colour or size can be seen as it is made */
  [data-page="dtf"] .product-hero > div:first-child {
    position: sticky; top: 84px; align-self: start;
  }
  /* the row of models is the only part that shrinks, so the picture, the print
     box and the colour buttons all stay inside the window at the same time */
  [data-page="dtf"] .dtf-studio__models { max-height: calc(100vh - 380px); min-height: 220px; }
  /* the photo is held to the height of the window so the colour buttons under
     it stay visible too - the print box moves with it, it is a % of the photo */
  [data-page="dtf"] .dtf-studio__stage { max-width: calc((100vh - 372px) * 0.75); margin: 0 auto; }
}
/* While the print is being dragged, show where the print area actually is */
.dtf-plate.is-dragging, .print-area.is-dragging {
  outline: 2px dashed var(--c-violet); outline-offset: 3px; border-radius: 6px;
  background: rgba(123,47,247,.05);
}
.dtf-plate .dtf-art, .print-area #art { cursor: grab; }
.dtf-plate.is-dragging .dtf-art, .print-area.is-dragging #art { cursor: grabbing; }

/* ==========================================================================
   Press guide (FAQ) — how the customer applies the transfer themselves
   ========================================================================== */
.press-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 6px 0 10px; }
.press-intro { color: var(--ink-soft); max-width: 62ch; margin-bottom: 26px; }
.press-cols { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .press-cols { grid-template-columns: 1fr 1fr; } }
.press-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 22px 20px;
}
.press-card h3 { font-size: 1.15rem; margin: 0 0 4px; }
.press-card__sub { color: var(--muted); font-size: .86rem; margin: 0 0 16px; }
.press-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.press-steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 16px 42px; font-size: .93rem; line-height: 1.55;
}
.press-steps > li:last-child { padding-bottom: 0; }
.press-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-violet); color: #fff;
  font: 700 .82rem/1 var(--font-display);
}
.press-steps b { display: block; }
.press-note {
  margin-top: 20px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.press-note h3 { font-size: 1rem; margin: 0 0 10px; }
.press-note ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }
.press-note a { text-decoration: underline; }

/* the short pointer to the guide, on the DTF page */
.press-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-size: .88rem; color: var(--ink-soft);
}
.press-link a { color: var(--c-violet); font-weight: 600; text-decoration: underline; }

/* the one-line summary of the settings, above the two cards */
.press-spec {
  background: linear-gradient(120deg, rgba(123,47,247,.10), rgba(0,180,255,.10));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; margin: 0 0 22px; font-size: .95rem; line-height: 1.6;
}
/* "if something did not come out right" */
.press-fix { margin-top: 20px; }
.press-fix h3 { font-size: 1rem; margin: 0 0 10px; }
.press-fix .faq-item { margin-bottom: 8px; }

/* the delivery-zone table on the Leverans page */
.ship-table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: .92rem; }
.ship-table th, .ship-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ship-table th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ship-table td .muted { display: block; font-size: .82rem; }
@media (max-width: 620px) {
  .ship-table, .ship-table tr, .ship-table td, .ship-table th { display: block; }
  .ship-table th { display: none; }
  .ship-table tr { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 10px; padding: 4px 0; }
  .ship-table td { border: 0; padding: 6px 12px; }
  .ship-table td:first-child { font-weight: 700; }
}

/* "we picked a colour and size for you" - shown when someone arrives from
   a product tag on Instagram or Facebook */
.meta-pick {
  background: rgba(123,47,247,.06); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 12px 14px; margin: 18px 0 0;
  font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
}
.meta-pick a { color: var(--c-violet); font-weight: 600; text-decoration: underline; }