/* ============================================================
   SHOP THE STORY — curated vintage
   Prototype stylesheet — design tokens from TTF_STSWEB_260527
   ============================================================ */

@font-face {
  font-family: 'Pitch Sans';
  src: url('../assets/font/PitchSans-Medium.woff2') format('woff2'),
       url('../assets/font/PitchSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #B9D2F1;
  --red: #E43C35;
  --black: #0E0E0E;
  --white: #FFFFFF;
  --side-w: 300px;
  --footer-h: 34px;
  --gap: 14px;
  --fs-ui: 12px;
  --fs-small: 10px;
  --ls: 0.08em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pitch Sans', 'Courier New', monospace;
  font-weight: 500;
  font-size: var(--fs-ui);
  letter-spacing: var(--ls);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
button { font: inherit; letter-spacing: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input { font: inherit; letter-spacing: inherit; color: inherit; }
img { display: block; }

::selection { background: var(--red); color: var(--white); }

/* ============ SIDEBAR ============ */

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: var(--footer-h);
  width: var(--side-w);
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 40;
}
.sidebar::-webkit-scrollbar { display: none; }

.side-box {
  background: var(--blue);
  padding: 14px 16px;
  flex-shrink: 0;
}

/* brand box */
.brand-box {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
}
.brand-box .logo img { width: 100%; height: auto; }
.brand-box .curated {
  position: absolute;
  top: 56%; left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  color: var(--red);
  font-size: 13px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.brand-box .shop-link {
  color: var(--red);
  font-size: 13px;
  width: max-content;
}
.brand-box .shop-link:hover { color: var(--black); }

/* search */
.search-box { padding: 0; }
.search-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  text-transform: uppercase;
  color: var(--black);
}
.search-box input::placeholder { color: var(--black); opacity: 1; }
.search-box input:focus::placeholder { color: var(--red); }

/* filters */
.filters-box { padding: 0; }
.filters-box details { border-bottom: 0; }
.filters-box summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px 10px;
  color: var(--red);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.filters-box summary::-webkit-details-marker { display: none; }
.filters-box summary .ind::after { content: '+'; }
.filters-box details[open] > summary .ind::after { content: '\2013'; }

.filter-list {
  max-height: 218px;
  overflow-y: auto;
  padding: 0 12px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}
.filter-list::-webkit-scrollbar { width: 3px; }
.filter-list::-webkit-scrollbar-thumb { background: var(--red); }
.filter-list::-webkit-scrollbar-track { background: transparent; }

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.filter-item:hover { color: var(--red); }
.filter-item input { display: none; }
.filter-item .tick {
  width: 9px; height: 9px;
  border: 1px solid var(--black);
  flex-shrink: 0;
  position: relative;
}
.filter-item:hover .tick { border-color: var(--red); }
.filter-item input:checked + .tick { background: var(--red); border-color: var(--red); }
.filter-item input:checked ~ .lbl { color: var(--red); }

/* milan shop box */
.milan-wrap { margin-top: auto; position: relative; flex-shrink: 0; }
.milan-box {
  display: block;
  background: var(--blue);
  color: var(--red);
  padding: 13px 16px;
  font-size: 13px;
}
.milan-box:hover { color: var(--black); }

.milan-pop {
  position: absolute;
  left: 0; bottom: calc(100% + 10px);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.milan-wrap:hover .milan-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.milan-pop img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.milan-pop .addr {
  position: absolute;
  top: 12px; left: 14px;
  color: var(--white);
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ============ TOP ICONS ============ */

.top-icons {
  position: fixed;
  top: var(--gap); right: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}
.icon-btn {
  width: 34px; height: 34px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  position: relative;
}
.icon-btn:hover { border-color: var(--black); }
.icon-btn svg { width: 16px; height: 16px; stroke: var(--black); fill: none; stroke-width: 1.4; }
.icon-btn.has-items { border-color: var(--red); }
.icon-btn .count {
  position: absolute;
  bottom: -4px; right: -4px;
  background: var(--red);
  color: var(--white);
  font-size: 9px;
  min-width: 14px; height: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.icon-btn.has-items .count { display: flex; }

/* ============ FOOTER ============ */

.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  font-size: var(--fs-small);
  text-transform: uppercase;
  z-index: 50;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-footer::-webkit-scrollbar { display: none; }
.site-footer a { white-space: nowrap; }

/* ============ HOMEPAGE ============ */

body.home { background: var(--black); }

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - var(--footer-h));
}
.hero a { overflow: hidden; }
.hero img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* on home, sidebar floats over the photos: only brand + milan boxes */
body.home .sidebar { background: transparent; }

/* ============ PAGE SHELL (inner pages) ============ */

.page {
  margin-left: var(--side-w);
  padding-bottom: calc(var(--footer-h) + 40px);
  min-height: 100vh;
}

/* ============ SHOP GRID ============ */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: block;
  overflow: hidden;
}
.card:hover {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.card .tag {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.card:hover .tag { opacity: 1; transform: translateY(0); }

.grid-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  color: var(--red);
  text-transform: uppercase;
}

/* ============ PRODUCT PAGE ============ */

body.product { background: var(--blue); }

/* Acne-style PDP: tall scrolling images, info column right beside the
   gallery, leftover empty space on the far right */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(300px, 380px) 1fr;
  gap: 0;
}
.p-gallery { display: flex; flex-direction: column; }
.p-gallery img {
  width: 100%;
  height: auto;
}

.p-info { padding: 34px 38px; }
.p-info-inner { position: sticky; top: 34px; display: flex; flex-direction: column; }
.p-title { font-size: 14px; line-height: 1.55; text-transform: uppercase; }
.p-price { font-size: 14px; margin-top: 38px; }
.p-size  { font-size: 14px; margin-top: 38px; text-transform: uppercase; }
.p-desc  { font-size: 13px; line-height: 1.6; margin-top: 38px; text-transform: uppercase; }
.p-meas  { font-size: 13px; line-height: 1.6; margin-top: 30px; text-transform: uppercase; }

.p-actions { margin-top: 56px; display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.btn-black {
  display: block;
  width: 100%;
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 15px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--black);
  transition: background .2s, color .2s;
}
.btn-black:hover { background: var(--red); border-color: var(--red); color: var(--white); }

.gpay-row {
  background: var(--black);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gpay-pill {
  background: var(--white);
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 12px;
  color: #3c4043;
  display: flex;
  align-items: center;
  gap: 3px;
}
.gpay-pill .g { font-weight: 700; }
.gpay-pill .g span:nth-child(1) { color: #4285F4; }
.gpay-pill .g span:nth-child(2) { color: #EA4335; }
.gpay-cards { display: flex; gap: 4px; align-items: center; }
.gpay-cards i {
  width: 28px; height: 18px;
  background: #2a4fa0;
  border-radius: 2px;
  display: block;
}
.gpay-cards i + i { background: #7a2aa0; }
.gpay-cards b {
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 2px;
  font-weight: 400;
  width: 22px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

/* related strip */
.p-related { padding: 6px 0; }
.p-related .grid { grid-template-columns: repeat(4, 1fr); }

/* ============ ABOUT ============ */

body.about { background: var(--blue); }

.about-cols {
  columns: 2;
  column-gap: 60px;
  padding: 48px 56px;
  max-width: 1150px;
  font-size: 13px;
  line-height: 1.65;
  text-transform: uppercase;
}
.about-cols p { margin-bottom: 1.4em; break-inside: avoid-column; }
.about-sign { margin-top: 3em; color: var(--red); }

/* ============ ACCOUNT / LOGIN ============ */

body.account { background: var(--blue); }

.account-form {
  padding: 60px 70px;
  max-width: 860px;
}
.form-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 44px;
  font-size: 14px;
  text-transform: uppercase;
}
.form-row label { white-space: nowrap; }
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black);
  outline: none;
  padding: 4px 2px;
  font-size: 14px;
}
.form-row input:focus { border-bottom-color: var(--red); }

.checkbox-row { display: flex; align-items: center; gap: 14px; }
.checkbox-row .box {
  width: 14px; height: 14px;
  border: 1px solid var(--black);
  display: inline-block;
  cursor: pointer;
}
.checkbox-row input { display: none; }
.checkbox-row input:checked + .box { background: var(--red); border-color: var(--red); }

.account-form .btn-black { max-width: 220px; }

.register-note {
  font-size: 11px;
  line-height: 1.7;
  text-transform: uppercase;
  margin: 18px 0 30px;
  max-width: 560px;
}
.divider { height: 90px; }

/* ============ CART DRAWER ============ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 70;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--black);
  color: var(--white);
  z-index: 80;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.3,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 26px;
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.cart-close {
  color: var(--white);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.cart-close:hover { color: var(--red); }

.cart-items { flex: 1; overflow-y: auto; }
.cart-item {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}
.cart-item img { width: 58px; aspect-ratio: 2/3; object-fit: cover; }
.cart-item .ci-tit { font-size: 12px; line-height: 1.6; text-transform: uppercase; }
.cart-item .ci-rm {
  color: #888;
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 8px;
  display: inline-block;
}
.cart-item .ci-rm:hover { color: var(--red); }
.cart-empty { color: #888; text-transform: uppercase; font-size: 11px; }

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  text-transform: uppercase;
  margin: 26px 0 40px;
}

.cart-actions { display: flex; flex-direction: column; gap: 12px; }
.btn-outline {
  display: block;
  text-align: center;
  border: 1px solid var(--white);
  color: var(--white);
  padding: 14px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: transparent;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--white); color: var(--black); }

/* toast */
.toast {
  position: fixed;
  bottom: calc(var(--footer-h) + 16px);
  right: 16px;
  background: var(--red);
  color: var(--white);
  padding: 12px 18px;
  font-size: 11px;
  text-transform: uppercase;
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ============ MOBILE HEADER ============ */

.m-header { display: none; }
.m-menu { display: none; }
.m-milan { display: none; }

/* shop mobile toolbar */
.shop-toolbar { display: none; }
.m-filters { display: none; }

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  :root { --side-w: 0px; }

  .sidebar { display: none; }
  .top-icons { display: none; }
  .site-footer { display: none; }

  /* header identical on every page (home included): floating boxes,
     never glued to the edges */
  .m-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px;
    z-index: 60;
    pointer-events: none;
  }
  .m-header .logo,
  .m-header .m-burger { pointer-events: auto; }
  .m-header .logo {
    background: var(--blue);
    padding: 16px 18px;
    display: block;
  }
  .m-header .logo img { height: 17px; width: auto; }
  .m-burger {
    background: var(--blue);
    width: 52px; height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  .m-burger span {
    width: 24px; height: 2px;
    background: var(--red);
    display: block;
    transition: transform .3s, opacity .3s;
  }
  .m-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .m-burger.open span:nth-child(2) { opacity: 0; }
  .m-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* full-screen menu, as in the mobile mockup */
  .m-menu {
    position: fixed;
    inset: 0;
    background: var(--blue);
    z-index: 55;
    padding: 84px 22px 26px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
  }
  .m-menu.open { display: flex; }
  .m-curated {
    align-self: center;
    margin: 12vh 0 10vh;
    transform: rotate(-32deg);
    color: var(--red);
    font-size: 21px;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .m-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 19px;
    text-transform: uppercase;
  }
  .m-links a { color: var(--red); }
  .m-search {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-size: 19px;
    text-transform: uppercase;
    color: var(--red);
    width: 100%;
  }
  .m-search::placeholder { color: var(--red); opacity: 1; }
  .m-menu-footer {
    margin-top: auto;
    padding-top: 50px;
    text-align: center;
    font-size: 10px;
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--black);
  }
  .m-menu-footer a { color: var(--black); }

  .page { margin-left: 0; padding-top: 56px; padding-bottom: 30px; }

  /* home: single full-bleed hero, milan box bottom-left */
  body.home .hero {
    grid-template-columns: 1fr;
    height: auto;
    margin-top: 0;
  }
  body.home .hero a { display: block; height: 100svh; }
  body.home .hero img { height: 100%; }
  body.home .sidebar { display: none; }

  body.home .m-milan {
    display: block;
    position: fixed;
    left: 14px; bottom: 14px;
    background: var(--blue);
    color: var(--red);
    padding: 13px 16px;
    font-size: 13px;
    z-index: 45;
  }

  .shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 16px 24px;
    color: var(--red);
    font-size: 13px;
  }
  .shop-toolbar .rot { transform: rotate(-18deg); transform-origin: left center; }

  /* full-screen filters panel, as in the mobile mockup */
  .m-filters {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--blue);
    z-index: 55;
    padding: 84px 22px 26px;
    overflow-y: auto;
  }
  .m-filters.open { display: block; }
  .m-filters .side-box { background: transparent; padding: 0; }
  .m-filters .filters-box summary { padding: 14px 0 12px; font-size: 16px; }
  .m-filters .filter-list { padding: 0 6px 12px 0; max-height: none; }
  .m-filters .filter-item { font-size: 13px; padding: 5px 0; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; }
  .card .tag { opacity: 1; transform: none; }

  .product-layout { grid-template-columns: 1fr; }
  .p-gallery { padding: 0; }
  .p-info { padding: 26px 18px; }
  .p-related .grid { grid-template-columns: repeat(2, 1fr); }

  .about-cols { columns: 1; padding: 30px 20px; }
  .account-form { padding: 30px 20px; }
  .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
}