/* =========================================================
   SHAATIR MODE — Normal Hona Mana Hai
   Clean store theme. Shared by every page.
   ========================================================= */

:root {
  --bg: #ffffff;
  --surface: #f4f4f2;      /* product image backgrounds, panels */
  --surface-2: #ebebe8;
  --ink: #111111;
  --ink-2: #3d3d3d;
  --muted: #74746f;
  --line: #e4e4e0;
  --orange: #ffa100;
  --orange-hover: #df8b00;
  --dark: #0d0d0d;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-print: "Anton", "Impact", sans-serif;   /* only for text printed on tee mockups */

  --wrap: 1240px;
  --gutter: 20px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 80px 0; }
.section--sm { padding: 48px 0; }
.section--grey { background: var(--surface); }
.center { text-align: center; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--ink-2); max-width: 560px; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.muted { color: var(--muted); }
.hl { background: linear-gradient(transparent 62%, rgba(245,163,0,.55) 62%); padding: 0 .08em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 8px; border: 1.5px solid var(--orange);
  background: var(--orange); color: var(--ink);
  font-weight: 700; font-size: .95rem; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: #333; border-color: #333; }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--sm { padding: 10px 16px; font-size: .85rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.link-arrow:hover { color: var(--orange-hover); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--dark); color: #fff; font-size: .82rem; text-align: center; padding: 9px var(--gutter); }
.topbar a { color: var(--orange); font-weight: 700; }

.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand__name { font-family: var(--font-head); font-weight: 900; font-size: 1.2rem; letter-spacing: -.01em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-weight: 600; font-size: .93rem; color: var(--ink-2); white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.header__cta { flex-shrink: 0; }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); content: ""; transition: .2s; }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 20px;
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: 0 20px 40px rgba(0,0,0,.08);
  }
  .nav-open .nav { transform: none; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav a.is-active { border-bottom-color: var(--line); color: var(--orange-hover); }
  .nav .nav__wa { display: flex; margin-top: 16px; border: 0; color: var(--ink); }
}
.nav .nav__wa { display: none; }

/* ---------- Hero ---------- */
.hero { padding: 24px 0 0; }
.hero__box {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px;
  background: var(--surface); border-radius: 20px; overflow: hidden; min-height: 540px;
}
.hero__text { padding: clamp(32px, 6vw, 72px); }
.hero__text h1 { margin-bottom: 18px; }
.hero__media { position: relative; height: 100%; min-height: 380px; display: grid; place-items: center; background: var(--surface-2); }
.hero__media img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__tees { position: relative; width: 82%; max-width: 520px; aspect-ratio: 1 / .9; }
.hero__tees .tee { position: absolute; width: 64%; }
.hero__tees .tee:first-child { left: 0; top: 4%; transform: rotate(-6deg); }
.hero__tees .tee:last-child { right: 0; bottom: 0; transform: rotate(5deg); }
.hero__note { margin-top: 26px; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
  .hero__box { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; min-height: 300px; }
}

.page-head { padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 10px; }
.page-head .lead { margin: 0; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- USP strip ---------- */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.usp { padding: 26px 20px; border-right: 1px solid var(--line); }
.usp:last-child { border-right: 0; }
.usp b { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 2px; }
.usp span { font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
  .usps { grid-template-columns: 1fr 1fr; }
  .usp:nth-child(2) { border-right: 0; }
  .usp:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Section heads ---------- */
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.head-row h2 { margin: 0; }
.head-row p { margin: 6px 0 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .grid--2 { grid-template-columns: 1fr; } }

/* ---------- Category tiles ---------- */
.cat { display: block; }
.cat__media { aspect-ratio: 4 / 5; background: var(--surface); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; }
.cat__media .tee { width: 72%; transition: transform .35s ease; }
.cat:hover .cat__media .tee { transform: scale(1.05); }
.cat h3 { margin: 0 0 2px; }
.cat p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 760px) { .grid--3.cats { grid-template-columns: 1fr 1fr; } .grid--3.cats .cat:last-child { grid-column: 1 / -1; } .grid--3.cats .cat:last-child .cat__media { aspect-ratio: 16 / 9; } .grid--3.cats .cat:last-child .cat__media .tee { width: 34%; } }

/* ---------- Product card ---------- */
.product { display: flex; flex-direction: column; }
.product__media { position: relative; aspect-ratio: 4 / 5; background: var(--surface); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; }
.product__media .tee { width: 80%; transition: transform .35s ease; }
.product:hover .product__media .tee { transform: scale(1.04); }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.badge--orange { background: var(--orange); }
.product__name { font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0 0 2px; }
.product__meta { font-size: .86rem; color: var(--muted); margin: 0 0 6px; }
.product__price { font-weight: 700; margin: 0 0 12px; }
.product__cta { margin-top: auto; }
.product__cta .btn { width: 100%; }
@media (max-width: 480px) {
  .product__name { font-size: .92rem; }
  .product__meta { font-size: .78rem; }
  .product__cta .btn { padding: 10px 8px; font-size: .8rem; }
}

/* ---------- Tee mockup ---------- */
.tee { position: relative; }
.tee svg { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.13)); }
.tee__print {
  position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%);
  width: 44%; text-align: center; font-family: var(--font-print); text-transform: uppercase;
  line-height: 1.02; font-size: clamp(.62rem, 1.7vw, 1.05rem); letter-spacing: .02em;
}
.tee--black .tee__print { color: #f4f1ea; }
.tee--white .tee__print { color: #141414; }
.tee__print em { display: block; font-style: normal; color: var(--orange); font-size: .58em; margin-top: 5px; letter-spacing: .06em; }
.tee--oversized .tee__print { width: 46%; top: 40%; }
.hero__tees .tee__print { font-size: clamp(.8rem, 2vw, 1.4rem); }

/* ---------- Filters (shop) ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--ink-2); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.count { font-size: .9rem; color: var(--muted); }
.empty-note { display: none; padding: 48px; text-align: center; background: var(--surface); border-radius: var(--radius); }

/* ---------- Statement band ---------- */
.statement { background: var(--dark); color: #fff; padding: 88px 0; }
.statement p.big { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; max-width: 900px; margin: 0 0 18px; }
.statement p.big span { color: var(--orange); }
.statement p { color: #b9b9b4; }

/* ---------- Split / feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.feature-media { background: var(--surface); border-radius: 20px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.feature-media .tee { width: 62%; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media--pair { grid-template-columns: 1fr 1fr; gap: 0; padding: 8%; }
.feature-media--pair .tee { width: 100%; }

.ticks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg); }

/* ---------- Rules list ---------- */
.rules { list-style: none; padding: 0; margin: 0; counter-reset: rule; border-top: 1px solid var(--line); }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; color: var(--ink-2); }
.rules li::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-head); font-weight: 800; color: var(--orange-hover); font-size: 1.1rem; }
.rules li b { color: var(--ink); }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.section--grey .card { border-color: transparent; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: .95rem; }
.card__num { display: block; font-family: var(--font-head); font-weight: 800; color: var(--orange-hover); margin-bottom: 12px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { counter-increment: step; padding: 26px; background: var(--surface); border-radius: var(--radius); }
.step::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; margin-bottom: 16px; }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; font-size: .94rem; }
.step a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 4vw, 36px); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.field > label, .field > .label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: #fff; border: 1px solid #d6d6d1; border-radius: 8px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,163,0,.3); }
.options { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.options input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.options label { padding: 10px 18px; border: 1px solid #d6d6d1; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .92rem; min-width: 56px; text-align: center; }
.options label:hover { border-color: var(--ink); }
.options input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.options input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }
.form-note { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
th { background: var(--surface); font-weight: 700; font-size: .85rem; }
tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 20px; margin: 0; }

/* ---------- Contact ---------- */
.contact-card { display: block; transition: border-color .15s; }
.contact-card:hover { border-color: var(--ink); }
.contact-card .label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-card .value { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 6px 0 4px; word-break: break-word; }
.contact-card .hint { font-size: .9rem; color: var(--muted); }

/* ---------- CTA ---------- */
.cta { background: var(--orange); border-radius: 20px; padding: clamp(32px, 6vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0; color: #3a2a05; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: #d6d6d1; padding: 64px 0 28px; margin-top: 80px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
.footer h4 { color: #fff; font-size: .95rem; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.footer ul a:hover { color: var(--orange); }
.footer__brand .brand__name { color: #fff; }
.footer__brand p { color: #9d9d98; max-width: 300px; margin-top: 14px; font-size: .93rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #262626; font-size: .84rem; color: #8a8a85; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Floating WhatsApp ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 28px rgba(0,0,0,.22); transition: transform .15s; }
.wa-float:hover { transform: translateY(-2px); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   STORE: real product photos, office picker, product page
   ========================================================= */
.product__media--photo { display: block; background: #e9e9ec; }
.product__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .5s ease; }
.product__media--photo .product__alt { opacity: 0; }
@media (hover: hover) {
  .product:hover .product__media--photo .product__alt { opacity: 1; }
  .product:hover .product__media--photo img { transform: scale(1.03); }
}
.product__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.product__name a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.product__price { margin-bottom: 0; }

/* Category strip + toolbar */
.cat-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.cat-strip .chip { flex-shrink: 0; }
.cat-strip--wrap { flex-wrap: wrap; overflow: visible; margin-bottom: 26px; }
.strip-label { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.toolbar__right { display: flex; align-items: center; gap: 16px; }
.search { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; min-width: 220px; outline: none; }
.search:focus { border-color: var(--ink); }
@media (max-width: 600px) { .toolbar__right { width: 100%; } .search { flex: 1; min-width: 0; } }
a.chip--link { display: inline-block; }

/* Office profession picker */
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .jobs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .jobs { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.job { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.job:hover { border-color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.job__media { aspect-ratio: 4 / 5; overflow: hidden; background: #e9e9ec; }
.job__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.job:hover .job__media img { transform: scale(1.04); }
.job__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.job__body h3 { margin: 0 0 4px; }
.job__body p { font-size: .88rem; color: var(--muted); margin: 0 0 12px; }
.job__count { margin-top: auto; font-size: .8rem; font-weight: 700; border-bottom: 2px solid var(--orange); align-self: flex-start; }
@media (max-width: 480px) { .job__body { padding: 12px; } .job__body h3 { font-size: 1rem; } .job__body p { font-size: .8rem; } }

.job-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 22px; }
.job-switch label { font-weight: 700; font-size: .9rem; }
.job-switch select { padding: 10px 14px; border: 1px solid #d6d6d1; border-radius: 8px; background: #fff; font-weight: 600; min-width: 240px; }
.team-note { margin-top: 48px; background: var(--surface); border-radius: var(--radius); padding: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.team-note h3 { margin-bottom: 4px; }
.team-note p { margin: 0; }

/* Office band on home */
.office-band { background: var(--surface); border-radius: 20px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.office-band .chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .office-band { grid-template-columns: 1fr; gap: 24px; } }

/* Hero photo collage */
.hero__photos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hero__photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hero__media { min-height: 420px; } }

/* Shop by collection tiles */
.cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat:hover .cat__media img { transform: scale(1.04); }

/* Product page */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 28px; } }
.gallery { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.gallery__main { order: 2; aspect-ratio: 4 / 5; background: #e9e9ec; border-radius: var(--radius); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { order: 1; display: flex; flex-direction: column; gap: 10px; }
.gallery__thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #e9e9ec; aspect-ratio: 4 / 5; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__main { order: 1; }
  .gallery__thumbs { order: 2; flex-direction: row; overflow-x: auto; }
  .gallery__thumbs button { flex: 0 0 64px; }
}
.pdp__info { position: sticky; top: 96px; display: grid; gap: 20px; }
@media (max-width: 900px) { .pdp__info { position: static; } }
.pdp__info h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0; }
.pdp__info .product__cat:hover { color: var(--ink); }
.pdp__price { font-weight: 800; font-size: 1.25rem; margin: -8px 0 0; color: var(--ink); }
.pdp__lead { margin: 0; }
.pdp__info .field { margin: 0; }
.options input:disabled + label { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.size-link { font-weight: 600; font-size: .82rem; color: var(--muted); margin-left: 8px; text-decoration: underline; }
.qty { max-width: 110px; }
.btn--lg { padding: 17px 26px; font-size: 1.02rem; }
.pdp__hint { margin-top: -8px; }
.pdp__hint.is-warn { color: #b3261e; font-weight: 700; }
.pdp__ticks { margin: 0; }

/* =========================================================
   CREATIVE LAYER — streetwear look on top of the clean store
   Big condensed headlines, chunky "sticker" buttons with hard
   shadows, tilted photo cards, moving product belt, bento grid.
   ========================================================= */
:root {
  --bg: #faf8f3;
  --paper: #ffffff;
  --display: "Anton", "Impact", sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --hard: 4px 4px 0 var(--ink);
  --hard-lg: 7px 7px 0 var(--ink);
}
body { background: var(--bg); }
::selection { background: var(--orange); color: var(--ink); }

h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .95; }
h1 { font-size: clamp(2.8rem, 8vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.pdp__info h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.orange { color: var(--orange); }
.marker { font-family: var(--marker); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Buttons: pill + hard shadow, pressable */
.btn { border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--hard); transition: transform .12s ease, box-shadow .12s ease, background .15s; }
.btn:hover { background: var(--orange); border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--dark:hover { background: #222; color: #fff; }
.btn--outline { background: var(--paper); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn::after { content: "\2192"; font-weight: 800; transition: transform .15s; }
.btn:hover::after { transform: translateX(3px); }
.btn.no-arrow::after, .wa-float::after, .nav__wa::after, .header__cta::after { content: none; }
.statement .btn, .office-rail-wrap .btn { border-color: #fff; box-shadow: 4px 4px 0 var(--orange); }

.chip { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.chip.is-active { box-shadow: 3px 3px 0 var(--orange); }

/* Header */
.header { background: rgba(250,248,243,.92); border-bottom: 2px solid var(--ink); }
.brand__name { font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; }
.nav a { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; }
.topbar { letter-spacing: .04em; }

/* Page heads get a giant outlined word behind them */
.page-head { position: relative; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--bg); }
.page-head::after {
  content: attr(data-word); position: absolute; right: -2%; bottom: -18%; z-index: 0; pointer-events: none;
  font-family: var(--display); font-size: clamp(7rem, 20vw, 17rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgba(17,17,17,.09); white-space: nowrap;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head--custom-dark { background: #111; color: #faf8f2; border-bottom-color: #ffa100; }
.page-head--custom-dark .eyebrow { color: #ffa100; }
.page-head--custom-dark .lead { color: #d4d1ca; }
.page-head--custom-dark .outline { -webkit-text-stroke-color: #ffa100; }
.page-head--custom-dark::after { -webkit-text-stroke-color: rgba(255,161,0,.14); }

/* Product cards: sticker cards with lift */
.product { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 10px 10px 16px; transition: transform .18s ease, box-shadow .18s ease; }
.product:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--orange); }
.product__media { border-radius: 12px; margin-bottom: 12px; }
.product > :not(.product__media) { padding: 0 6px; }
.product__media--photo::after {
  content: "View tee \2192"; position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .78rem; padding: 7px 12px; border-radius: 999px;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
@media (hover: hover) { .product:hover .product__media--photo::after { opacity: 1; transform: none; } }
.product__name { font-family: var(--font-head); font-weight: 800; }
.product__price { color: var(--orange-hover); }
.section--grey { background: #efebe2; }

/* Office profession cards */
.job { border: 2px solid var(--ink); border-radius: 18px; position: relative; }
.job:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--orange); border-color: var(--ink); }
.job__num { position: absolute; top: 10px; left: 12px; z-index: 2; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); }
.job__body h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .01em; line-height: 1; margin-bottom: 6px; }
.job__count { border-bottom: 0; background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 999px; }
.team-note { border: 2px solid var(--ink); box-shadow: var(--hard); background: var(--paper); }

/* Product page */
.gallery__main { border: 2px solid var(--ink); box-shadow: var(--hard-lg); }
.gallery__thumbs button { border: 2px solid transparent; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--orange); }
.options label { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); }
.options input:checked + label { box-shadow: 3px 3px 0 var(--orange); }

/* CTA, cards, footer */
.cta { border: 2px solid var(--ink); box-shadow: var(--hard-lg); }
.cta h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.card, .panel, .step { border: 2px solid var(--ink); border-radius: 18px; }
.step { background: var(--paper); }
.footer { margin-top: 0; padding-bottom: 80px; overflow: hidden; }
.footer__mega {
  font-family: var(--display); text-transform: uppercase; font-size: min(14vw, 13.5rem); line-height: 1.15;
  color: transparent; -webkit-text-stroke: 2px #2c2c2c; white-space: nowrap; margin: 40px 0 0; padding: 0.04em 0 0.08em; text-align: center; user-select: none;
}
.footer__mega span { color: var(--orange); -webkit-text-stroke: 0; }
.wa-float { border: 2px solid #fff; box-shadow: 4px 4px 0 var(--orange); }

/* ---------- HOME: hero ---------- */
.hero2 { position: relative; padding: clamp(28px, 5vw, 64px) 0 40px; overflow: hidden; }
.hero2__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
.hero2__kicker { display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px 6px 6px; background: var(--paper); font-weight: 700; font-size: .85rem; box-shadow: 3px 3px 0 var(--ink); }
.hero2__kicker b { background: var(--orange); border-radius: 999px; padding: 2px 10px; }
.hero2 h1 { position: relative; z-index: 0; font-size: clamp(3.2rem, 7.6vw, 7.2rem); margin: 22px 0 26px; line-height: .9; }
.hero2 h1 .line { display: block; white-space: nowrap; }
.hero2 h1 .hl { display: inline-block; line-height: .9; background: none; position: relative; color: var(--ink); padding: 0 .06em; }
.hero2 h1 .hl::before { content: ""; position: absolute; left: 0; right: -.1em; bottom: .02em; height: .34em; background: var(--orange); z-index: -1; transform: skew(-8deg); }
.hero2 .lead { font-size: 1.15rem; }

.stack { position: relative; height: clamp(440px, 46vw, 620px); }
.polaroid { position: absolute; width: 52%; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 8px 8px 12px; box-shadow: var(--hard-lg); transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.polaroid figcaption { font-family: var(--marker); font-size: .95rem; padding: 8px 4px 0; line-height: 1.1; }
.polaroid--a { left: 0; top: 10%; --r: -8deg; transform: rotate(var(--r)); z-index: 2; }
.polaroid--b { right: 0; top: 0; --r: 6deg; transform: rotate(var(--r)); z-index: 1; }
.polaroid--c { left: 26%; bottom: -2%; width: 46%; --r: -2deg; transform: rotate(var(--r)); z-index: 3; }
.stack:hover .polaroid { transform: rotate(0deg) scale(.98); }
.stack .polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 5; }

.spin { position: absolute; left: -3%; bottom: 2%; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; z-index: 6; }
.spin svg { width: 100%; height: 100%; }
.spin text { font-family: var(--display); font-size: 15.5px; letter-spacing: 3.2px; fill: var(--ink); }
.spin img { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; padding: 6%; }

.scribble { position: absolute; font-family: var(--marker); font-size: 1.05rem; color: var(--ink); transform: rotate(-6deg); z-index: 7; background: var(--orange); padding: 4px 12px; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); }
.scribble--hero { left: 4%; top: 0; }

@media (max-width: 900px) {
  .hero2__grid { grid-template-columns: 1fr; }
  .stack { height: 118vw; max-height: 620px; }
}

/* ---------- HOME: promise strip ---------- */
.promise { background: var(--orange); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.promise__grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.3fr 1fr; }
.promise__grid > * { display: block; padding: 22px 18px; border-right: 2px solid var(--ink); }
.promise__grid > :first-child { padding-left: 0; }
.promise__grid > :last-child { border-right: 0; }
.promise b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.promise span { font-size: .86rem; color: #3a2a05; }
/* Anton draws "+" low; lift it to the middle of the capitals */
.promise b .plus, .plus { font: inherit; color: inherit; position: relative; top: -.14em; margin-left: .02em; }
.promise a b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.promise a:hover b { color: #fff; }
@media (max-width: 960px) {
  .promise__grid { grid-template-columns: 1fr 1fr; }
  .promise__grid > * { padding: 16px 14px; border-bottom: 2px solid var(--ink); }
  .promise__grid > :nth-child(odd) { padding-left: 0; }
  .promise__grid > :nth-child(even) { border-right: 0; }
  .promise__grid > :last-child { grid-column: span 2; border-bottom: 0; padding-left: 0; }
}

/* ---------- HOME: bento collections ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 18px; }
.tile { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 20px; background: #e9e9ec; display: block; transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translate(-3px, -3px); box-shadow: var(--hard-lg); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover img { transform: scale(1.06); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.tile__label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.tile__label b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: .95; }
.tile__label span { font-size: .88rem; color: #e9e6df; }
.tile__go { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; transition: transform .2s; }
.tile:hover .tile__go { transform: rotate(-45deg); }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--solid { background: var(--orange); }
.tile--solid::before { display: none; }
.tile--solid .tile__label { color: var(--ink); }
.tile--solid .tile__label span { color: #3a2a05; }
.tile--solid .tee { position: absolute; right: -6%; top: 6%; width: 58%; transform: rotate(8deg); }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 14px; }
  .tile--big { grid-column: span 2; }
  .tile--wide { grid-column: span 2; }
}

/* ---------- HOME: office rail (the one dark band) ---------- */
.office-rail-wrap { background: var(--dark); color: #fff; padding: clamp(56px, 8vw, 96px) 0; position: relative; overflow: hidden; }
.office-rail-wrap h2 { color: #fff; font-size: clamp(2.6rem, 7vw, 5.6rem); margin: 0; }
.office-rail-wrap p { color: #b9b9b4; }
.office-rail-wrap .eyebrow { color: var(--orange); }
.rail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 34px; }
.rail-nav { display: flex; gap: 10px; }
.rail-nav button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: transparent; color: #fff; font-size: 1.3rem; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.rail-nav button:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .job { flex: 0 0 clamp(220px, 24vw, 280px); scroll-snap-align: start; background: #161616; border-color: #333; color: #fff; }
.rail .job:hover { border-color: var(--orange); box-shadow: 7px 7px 0 var(--orange); }
.rail .job__body p { color: #9d9d98; }
.rail .job__count { background: var(--orange); color: var(--ink); }

/* ---------- HOME: picks with tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- HOME: Shaatir Lomdi ---------- */
.lomdi { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.lomdi__fox { width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); box-shadow: var(--hard-lg); display: grid; place-items: center; }
.lomdi__fox img { width: 78%; }
.bubble { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--hard-lg); }
.bubble::before { content: ""; position: absolute; left: -16px; top: 46%; width: 28px; height: 28px; background: var(--paper); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.bubble__line { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1; margin: 0 0 14px; color: var(--ink); min-height: 2em; transition: opacity .3s; }
.bubble__sign { font-family: var(--marker); font-size: 1.1rem; color: var(--orange-hover); margin: 0; }
@media (max-width: 700px) { .lomdi { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bubble::before { left: 46%; top: -16px; transform: rotate(135deg); } }


/* ---------- CUSTOM: tee studio ---------- */
.studio { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.studio__preview { position: sticky; top: 96px; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } .studio__preview { position: static; } }
.mock { position: relative; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: #c9c9c9; box-shadow: var(--hard-lg); }
.mock__tee { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mock__print {
  position: absolute; left: 50%; top: 27%; transform: translateX(-50%); width: 36%;
  aspect-ratio: 1 / 1.15; display: grid; place-items: center; container-type: inline-size; transition: width .2s ease;
}
.mock__print > * { grid-area: 1 / 1; }
/* hanger photo: front tee on the left, back tee on the right */
/* positions measured from the print areas the user marked on the hanger photo */
.mock.is-hanger .mock__print { aspect-ratio: 3 / 4; }
.mock.is-hanger .mock__print--front { left: 25.1%; top: 35.8%; }
.mock.is-hanger .mock__print--back { left: 73.6%; top: 34.4%; }
.mock__side { display: none; align-self: start; justify-self: center; transform: translateY(-140%); background: var(--ink); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mock.is-hanger .mock__side { display: block; }
.is-white .mock.is-hanger .mock__side { background: var(--ink); }
.mock__print img { width: 100%; height: 100%; object-fit: contain; }
[hidden] { display: none !important; }
.mock__text { font-family: var(--display); text-transform: uppercase; text-align: center; line-height: .95; font-size: 17cqw; color: #f4f1ea; word-break: break-word; }
.is-white .mock__text { color: var(--ink); }
.mock__empty { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; border: 2px dashed rgba(255,255,255,.55); border-radius: 10px; font-family: var(--marker); font-size: 11cqw; line-height: 1.15; color: rgba(255,255,255,.8); }
.is-white .mock__empty { border-color: rgba(0,0,0,.35); color: rgba(0,0,0,.55); }
.mock__tag { position: absolute; left: 14px; bottom: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: .78rem; padding: 6px 12px; border-radius: 999px; }
.studio__note { font-size: .85rem; color: var(--muted); margin: 18px 0 0; }

.studio__steps { display: grid; gap: 22px; }
.cstep { background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 18px; }
.cstep--last { background: var(--orange); box-shadow: var(--hard-lg); }
.cstep__head { display: flex; align-items: center; gap: 14px; }
.cstep__head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; }
.cstep__num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--orange); font-family: var(--display); font-size: 1.5rem; }
.cstep--last .cstep__num { color: #fff; }
.cstep .field { margin: 0; }
.cstep--last .btn { background: var(--ink); color: #fff; }
.cstep--last .form-note { color: #3a2a05; }
.summary { margin: 0; font-weight: 600; color: var(--ink); }

.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; padding: 3px; background: var(--bg); justify-self: start; }
.seg__btn { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.seg__btn.is-active { background: var(--ink); color: #fff; }

.drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px 18px; border: 2px dashed var(--ink); border-radius: 16px; background: var(--bg); cursor: pointer; transition: background .15s, border-color .15s; }
.drop:hover, .drop.is-over { background: #fff4dc; border-color: var(--orange-hover); }
.drop b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; word-break: break-all; }
.drop span { font-size: .85rem; color: var(--muted); }
.drop.has-file { border-style: solid; background: #fff4dc; }

.swatches { display: flex; gap: 12px; position: relative; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; cursor: pointer; background: var(--paper); }
.sw::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); }
.sw--black::before { background: #111; }
.sw--white::before { background: #fff; }
.swatches input:checked + .sw { box-shadow: 3px 3px 0 var(--orange); background: var(--ink); color: #fff; }
.swatches input:focus-visible + .sw { outline: 2px solid var(--orange); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.stepper button:hover { background: var(--orange); }
.stepper input { width: 52px; height: 44px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; background: transparent; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-4 { margin-top: 40px; } .mb-0 { margin-bottom: 0; }

/* Colour dots (product cards + product page colour picker) */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); vertical-align: middle; }
.dot--black { background: #111; }
.dot--white { background: #fff; }
.product__colours { display: flex; gap: 8px; margin: 0 0 6px; }
/* clickable colour dots on cards */
button.dot { padding: 0; width: 20px; height: 20px; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .15s; }
button.dot:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #999; }
button.dot.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--orange); }
button.dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.options--colour label { display: inline-flex; align-items: center; gap: 8px; }
.options--colour input:checked + label .dot--black { border-color: #fff; }
.pdp__colour-name { font-weight: 500; color: var(--muted); margin-left: 4px; }

/* Small usability fixes; original Claude layout and components retained. */
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; background:var(--orange); color:var(--ink); padding:10px 18px; border:2px solid var(--ink); border-radius:999px; font-weight:700; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--orange-hover); outline-offset:4px; }
.is-warn { color:#a42e16; }
.tile--custom { display:flex; align-items:center; padding:24px; isolation:isolate; }
.custom-tile__copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; width:56%; gap:10px; }
.custom-tile__eyebrow { font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.custom-tile__copy > b { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; }
.custom-tile__description { font-size:.82rem; color:var(--ink); line-height:1.4; }
.custom-tile__action { display:inline-flex; align-items:center; gap:14px; background:var(--ink); color:#fff; border:2px solid var(--ink); border-radius:999px; padding:9px 15px; font-size:.75rem; font-weight:700; margin-top:3px; white-space:nowrap; }
.tile--custom .tee { right:3%; top:50%; width:37%; height:82%; transform:translateY(-50%) rotate(5deg); display:flex; align-items:center; justify-content:center; }
.tile--custom .tee svg { width:100%; max-height:100%; height:auto; }
.tile--custom:hover .custom-tile__action { background:#fff; color:var(--ink); }
@media(max-width:480px) { .tile--custom { padding:18px; } .custom-tile__copy { gap:8px; } .custom-tile__action { padding:8px 10px; font-size:.68rem; gap:8px; } }
.empty-note button { margin-top:14px; }
.cart-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr); gap:30px; align-items:start; }
.cart-item { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.cart-item:first-child { padding-top:0; }.cart-item>img { width:110px; aspect-ratio:4/5; object-fit:cover; border:1.5px solid var(--ink); border-radius:12px; }
.cart-item h2 { font-family:var(--font-head); font-size:1rem; text-transform:none; line-height:1.35; letter-spacing:0; margin-bottom:8px; }
.cart-item p { font-size:.77rem; margin-bottom:8px; overflow-wrap:anywhere; }.cart-item>strong { white-space:nowrap; font-size:.95rem; }
.cart-item-controls { display:flex; gap:15px; align-items:center; flex-wrap:wrap; }.cart-item-controls label { font-size:.75rem; }.cart-item-controls input { width:64px; padding:6px; margin-left:6px; border:1px solid #aaa; border-radius:5px; background:#fff; }.cart-remove { border:0; padding:6px 0; background:transparent; text-decoration:underline; font-size:.75rem; cursor:pointer; }
.cart-summary { border:2px solid var(--ink); border-radius:18px; background:#fff; box-shadow:5px 5px 0 var(--orange); padding:25px; }.cart-summary h2 { font-size:1.9rem; }.cart-summary .btn { margin:18px 0 10px; }.cart-summary .link-arrow { font-size:.8rem; }
.cart-total-row { display:flex; justify-content:space-between; gap:15px; padding:10px 0; font-size:.85rem; }.cart-total-row--final { border-top:1px solid var(--line); margin-top:8px; padding-top:18px; font-size:1.1rem; }
.checkout-pending { background:#fff3d6; border:1px solid #ddaf54; border-radius:10px; padding:15px; margin:20px 0; }.checkout-pending p { font-size:.8rem; margin:10px 0 0; }.checkout-pending button:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }.checkout-list { list-style:none; margin:25px 0; padding:0; }.checkout-list li { border-bottom:1px solid var(--line); padding:16px 0; display:grid; grid-template-columns:1fr auto; gap:6px 20px; font-size:.85rem; }.checkout-list li>span { grid-column:1; font-size:.75rem; color:var(--muted); }.checkout-list li>strong { grid-column:2; grid-row:1/3; align-self:center; }.cart-empty { text-align:center; padding:30px 0 60px; }.cart-empty h2 { font-size:clamp(2rem,5vw,3rem); }.cart-empty .btn { margin-top:15px; }
.pdp__order:disabled,[data-send]:disabled { opacity:.6; cursor:wait; }.nav__cart { white-space:nowrap; }
@media(min-width:961px){.nav .nav__cart{display:none}}
@media(max-width:760px){.cart-layout{grid-template-columns:1fr}.cart-item{grid-template-columns:80px minmax(0,1fr);gap:14px}.cart-item>img{width:80px}.cart-item>strong{grid-column:2}.cart-summary{padding:20px}.topbar{font-size:.68rem}.topbar>span{display:block}.checkout-list li{gap:6px 10px}}
.product__price,.pdp__price,.custom-price { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; color:var(--ink); }
.sale-price { font-family:var(--font-head); font-size:1.35rem; font-weight:900; line-height:1.2; color:var(--ink); }
.before-price { font-size:.82rem; color:#6c6c65; font-weight:400; }
.discount-badge { background:var(--orange); color:#111; border:1px solid #111; border-radius:999px; padding:3px 8px; font-size:.62rem; font-weight:800; letter-spacing:.025em; white-space:nowrap; }
.price-caption { display:block; flex-basis:100%; font-size:.72rem; font-weight:500; color:var(--muted); line-height:1.5; }
.pdp__price .sale-price,.custom-price .sale-price { font-size:2rem; }
.pdp__price .before-price,.custom-price .before-price { font-size:1rem; }
.pdp__price .discount-badge,.custom-price .discount-badge { font-size:.72rem; }
.custom-price { margin:12px 0; }
.office-intro { padding:40px 0 55px; }
.office-intro::after { display:none; }
.office-intro--dark { background:#111; color:#faf8f2; border-bottom-color:var(--orange); }
.office-intro--dark .lead { color:#d4d1ca; }
.office-intro--dark .office-intro__kicker>span, .office-intro--dark .office-pass { color:#111; }
.office-intro--dark .office-intro__price small { color:#bcb7ad; }
.office-intro--dark .office-intro__tags span::before { color:var(--orange); }
.office-intro--dark .office-pass { box-shadow:8px 8px 0 var(--orange); }
.office-intro.office-intro--dark h1 { line-height:1.18; margin-bottom:24px; }
.office-intro.office-intro--dark h1>span { display:inline-block; background:none; color:var(--orange); padding:0; }
.office-intro .crumbs { margin-bottom:28px; }
.office-intro__grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(230px,.8fr); align-items:center; gap:55px; }
.office-intro__kicker { display:flex; flex-wrap:wrap; align-items:center; gap:12px; text-transform:uppercase; font-size:.68rem; font-weight:800; letter-spacing:.09em; margin-bottom:22px; }
.office-intro__kicker>span { background:var(--orange); padding:4px 9px; border:1.5px solid #111; border-radius:4px; transform:rotate(-3deg); }
.office-intro h1 { font-size:clamp(2.5rem,5.2vw,5rem); line-height:1.02; margin-bottom:22px; }
.office-intro h1>span { background:linear-gradient(transparent 60%,var(--orange) 60%); padding:0 .03em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.office-intro .lead { max-width:570px; font-size:1rem; line-height:1.7; }
.office-intro__actions { display:flex; gap:25px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.office-intro__price { font-size:.75rem; font-weight:700; }.office-intro__price>span{color:#a59b8c;padding:0 3px}.office-intro__price small{display:block;font-size:.64rem;color:var(--muted);font-weight:400;margin-top:3px}
.office-intro__tags { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; font-family:var(--marker); font-size:.77rem; }.office-intro__tags span::before{content:'✳';margin-right:7px;color:#a46200}
.office-pass { position:relative; max-width:300px; width:100%; justify-self:center; border:2px solid #111; background:#fff; border-radius:16px; box-shadow:8px 8px 0 #111; transform:rotate(5deg); margin:14px 9px; }
.office-pass__clip { position:absolute; width:48px; height:12px; background:#111; border-radius:12px; top:10px; left:50%; transform:translateX(-50%); }
.office-pass__note { position:absolute; top:-27px; left:-30px; z-index:2; font-family:var(--marker); font-size:.78rem; background:#fff; color:#111; border:2px solid #111; padding:7px 12px; box-shadow:3px 3px 0 var(--orange); transform:rotate(-12deg); white-space:nowrap; }
.office-pass__top { display:flex; justify-content:space-between; gap:10px; background:var(--orange); padding:32px 18px 12px; border-radius:14px 14px 0 0; border-bottom:2px solid #111; font-size:.55rem; letter-spacing:.07em; font-weight:800; }
.office-pass__body { display:flex; flex-direction:column; align-items:center; padding:20px 16px; text-align:center; }.office-pass__body img{width:85px;height:85px;object-fit:contain;margin-bottom:14px}.office-pass__label{font-size:.65rem;letter-spacing:.2em;font-weight:700}.office-pass__body strong{font-family:var(--display);font-size:3.3rem;line-height:1.15;font-weight:400}.office-pass__role{font-size:.7rem;color:#6f6556;margin-top:6px}.office-pass__status{border:1px solid #d8d1c4;border-radius:999px;padding:5px 12px;margin-top:16px;font-size:.65rem;font-weight:700}.office-pass__status i{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:6px}.office-pass__bottom{border-top:1px dashed #bcb3a3;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:.55rem;font-weight:700;letter-spacing:.06em}.office-pass__barcode{width:78px;height:24px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px)}
@media(max-width:760px){.office-intro{padding:26px 0 40px}.office-intro__grid{grid-template-columns:1fr;gap:32px}.office-intro h1{font-size:clamp(2rem,7.8vw,3.3rem)}.office-intro .lead{font-size:.9rem}.office-pass{max-width:240px;transform:rotate(3deg)}.office-pass__body{padding:15px}.office-pass__body img{width:64px;height:64px;margin-bottom:10px}.office-pass__body strong{font-size:2.8rem}.office-intro__actions{gap:18px}.office-intro__tags{gap:9px;font-size:.68rem}}
[hidden] { display:none!important; }
.lomdi-manifesto { background:#111; color:#fff; position:relative; overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.lomdi-manifesto::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(#ffffff15 1px,transparent 1px); background-size:22px 22px; }
.lomdi-manifesto .lomdi { position:relative; grid-template-columns:minmax(200px,280px) minmax(0,1fr); gap:48px; }
.lomdi__character { position:relative; display:flex; align-items:center; flex-direction:column; padding:14px 0 25px; }
.lomdi__intro { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; margin-bottom:22px; color:#fff; }
.lomdi-manifesto .lomdi__fox { width:min(100%,250px); border:2px solid var(--orange); box-shadow:8px 8px 0 #ffffff; transform:rotate(-5deg); }
.lomdi-manifesto .lomdi__fox img { transform:rotate(5deg); }
.lomdi__sticker { margin-top:-9px; position:relative; z-index:1; padding:7px 19px; background:#fff; color:#111; border:2px solid #111; box-shadow:4px 4px 0 var(--orange); font-family:var(--marker); font-size:1.05rem; transform:rotate(-7deg); }
.lomdi__spark { position:absolute; right:0; top:34px; color:var(--orange); font-size:50px; line-height:1; transform:rotate(14deg); }
.lomdi-manifesto .bubble { background:var(--bg); padding:32px; box-shadow:8px 8px 0 var(--orange); border-color:#111; transform:rotate(1deg); }
.lomdi-manifesto .bubble::before { background:var(--bg); }
.lomdi__eyebrow { display:inline-block; color:#675a45; text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.65rem; margin-bottom:18px; }
.lomdi-manifesto .bubble__line { display:flex; flex-direction:column; align-items:flex-start; gap:.2em; min-height:0; font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.22; margin:0 0 28px; overflow-wrap:normal; }
.lomdi-manifesto .bubble__question { display:block; max-width:100%; }
.lomdi-manifesto .bubble__answer { display:block; max-width:100%; background:var(--orange); padding:.06em .14em .1em; }
.lomdi__description { font-size:.95rem; color:#514c43; line-height:1.7; margin-bottom:24px; }
.lomdi__bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding-top:20px; border-top:1px dashed #b8ad9c; }
.lomdi-manifesto .bubble__sign { color:#7b4d00; font-size:.95rem; }
.lomdi__bottom .btn { font-size:.78rem; padding:11px 18px; }
@media(max-width:700px) { .lomdi-manifesto .lomdi { grid-template-columns:1fr; gap:28px; } .lomdi__character { width:220px; padding-bottom:12px; } .lomdi-manifesto .lomdi__fox { width:170px; } .lomdi__intro { margin-bottom:16px; } .lomdi__spark { top:28px; right:4px; font-size:38px; } .lomdi-manifesto .bubble { width:100%; padding:24px 20px; transform:none; } .lomdi-manifesto .bubble__line { font-size:clamp(1.9rem,6vw,2.7rem); } .lomdi__bottom { justify-content:center; } .lomdi__description { font-size:.85rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none!important; transition:none!important; } }

/* Shaatir Mode accounts */
@media(min-width:961px){.header__inner{gap:16px}.nav{gap:18px}.nav a{font-size:.75rem;letter-spacing:.04em}}
@media(min-width:961px) and (max-width:1150px){.nav{gap:11px}.nav a{font-size:.66rem}.header__inner{gap:12px}.brand__name{font-size:1.25rem}.header__cta{padding:10px 14px}}
.account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);gap:65px;align-items:center;max-width:1100px;padding-top:25px;padding-bottom:40px}
.account-intro h1{font-size:clamp(3rem,6vw,5.5rem);line-height:1.08;margin:20px 0}.account-intro>.lead{margin-bottom:20px}.account-intro>.link-arrow{display:inline-block;margin-top:22px}.account-intro>.form-note{max-width:390px;margin-top:18px}
.account-card{background:#fff;border:2px solid var(--ink);border-radius:22px;padding:30px;box-shadow:7px 7px 0 var(--orange)}.account-tabs{display:flex;gap:8px;margin-bottom:25px}.account-tabs button{flex:1;border:1px solid var(--ink);border-radius:999px;padding:12px;background:#fff;font:inherit;cursor:pointer;font-weight:700}.account-tabs button[aria-pressed=true]{background:var(--orange)}
.account-card label{display:block;font-size:.85rem;font-weight:700;margin:18px 0}.account-card input{display:block;width:100%;min-height:48px;margin-top:8px;border:1px solid #777;border-radius:9px;padding:10px 12px;font:inherit}.account-card input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.account-card .btn{margin:20px 0 14px}.account-card [data-auth-status]{font-size:.85rem;line-height:1.6;overflow-wrap:anywhere}.account-card [data-auth-status]:empty{display:none}.account-card .cart-remove{margin-top:14px}.account-card button:disabled{opacity:.6;cursor:wait}.account-card h2{font-size:2rem;margin-top:15px}.account-card [data-account-email]{overflow-wrap:anywhere}
@media(max-width:760px){.account-layout{grid-template-columns:1fr;gap:32px}.account-card{padding:24px}.account-intro h1{font-size:3.2rem}}

.google-login{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:1px solid #747775;border-radius:999px;background:#fff;color:#1f1f1f;font:500 .9rem Inter,Arial,sans-serif;cursor:pointer;padding:12px 18px}.google-login svg{flex-shrink:0}.google-login:hover:not(:disabled){background:#f4f6fa;box-shadow:0 1px 3px #0002}.google-login:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.account-card .google-login:disabled{opacity:.6;cursor:not-allowed}.google-entry>.form-note{font-size:.72rem;text-align:center;margin:12px 0 18px}.account-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.72rem;margin:22px 0}.account-divider::before,.account-divider::after{content:'';height:1px;background:var(--line);flex:1}

/* Keep the cart promise aligned with the other single-line labels. */
.promise__grid > :nth-child(4) b { white-space: nowrap; }
.promise__grid > :nth-child(4) > span { white-space: nowrap; }

@media (max-width: 980px) { .promise__grid > :nth-child(4) { grid-column: 1 / -1; border-right: 0; padding-left: 0; } }

.hero-print-detail { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; }
.hero-print-detail img { height: 100%; transform: scale(1.85); transform-origin: 50% 49%; }

/* Shop category cards */
.shop-category-picker{margin-bottom:38px}.shop-category-picker h2{margin:0 0 24px}.shop-category-card{padding:0;color:inherit;text-align:left;font:inherit;cursor:pointer}.shop-category-card .job__media{display:block;width:100%}.shop-category-card .job__body{width:100%}.shop-category-line{font-size:.88rem;color:var(--muted);margin:3px 0 16px}.shop-category-card:hover{border-color:var(--orange)}

.size-guide-table{border-collapse:collapse;width:100%;margin:24px 0;border:2px solid #111;background:#fff}.size-guide-table th{background:#111;color:white;text-align:left}.size-guide-table td,.size-guide-table th{padding:16px 20px;border-bottom:1px solid #ddd}.size-guide-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-top:50px}.size-guide-layout li{margin:14px 0;line-height:1.7}.size-guide-layout svg{width:100%;max-width:440px}@media(max-width:700px){.size-guide-layout{grid-template-columns:1fr;gap:16px}.size-guide-table td,.size-guide-table th{padding:12px}}