/* =====================================================================
   ROCCO · inner.css
   Shared by every page except the homepage: HeaderCompact, inline search,
   full screen menu, FooterMinimal, page title band, form fields, text
   columns, accordions, 404. Tokens come from main.css.
   Specs: clothing-store-product-page-spec.md sections 2 and 9,
          clothing-store-remaining-pages-spec.md sections 0 to 2 and 17 to 20
   ===================================================================== */

/* ---------- 1. HeaderCompact ---------- */
.hc {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-bg); border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.hc.is-stuck { border-bottom-color: var(--c-line); }
.hc__row {
  position: relative; height: 70px; padding: 0 50px;
  display: flex; align-items: center; justify-content: space-between;
}
.hc__nav { height: 100%; }
.hc .nav__list { height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.hc .nav__item { height: 100%; }
.hc .nav__link { padding: 0; }
.hc .mega { padding-left: 50px; padding-right: 50px; }
.hc .dropdown { left: -24px; }

/* Centre zone: logo, swapped for the inline search (remaining-pages spec 1.4) */
.hc__centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 442px; max-width: calc(100% - 420px); height: 51px;
  display: flex; align-items: center; justify-content: center;
}
.hc__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity var(--t), visibility var(--t); }
.hc__centre .search--inline {
  position: absolute; inset: 0; width: 100%; display: flex;
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
.hc__centre.is-open .hc__logo { opacity: 0; visibility: hidden; }
.hc__centre.is-open .search--inline { opacity: 1; visibility: visible; }
.search--inline .search__input { padding-right: 44px; }
.search__cancel { position: absolute; right: -8px; top: 3px; }

/* Icon row */
.hc__icons { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hc__icons .icon-btn { width: 32px; }
.hc__icons .hc__cart { width: 32px; }
.hc__burger--left { display: none; margin-left: -8px; }
.burger { display: block; width: 26px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }

/* ---------- 2. Full screen menu (remaining-pages spec 1.2) ---------- */
.drawer--fsm {
  inset: 0; width: 100vw; max-width: none; flex-direction: row;
  transform: none; opacity: 0;
  transition: opacity .4s ease, visibility .4s;
}
.drawer--fsm.is-open { opacity: 1; }
.fsm__photo { flex: 0 0 50%; background: var(--c-warm); }
.fsm__photo .img-slot__shade { align-items: center; justify-content: center; }
.fsm__photo img { object-position: center; }
.fsm__panel { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; padding: 30px 50px; overflow-y: auto; }
.fsm__top { display: flex; align-items: center; justify-content: space-between; }
.fsm__top .icon-btn { margin-right: -10px; }
.fsm__mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.search--drawer, .fsm__tree { display: none; }
.fsm__big a {
  display: block; font-size: 46px; font-weight: 400; line-height: 68px; text-transform: uppercase;
  text-decoration: none; color: var(--c-accent-6);
}
.fsm__feat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 36px; text-decoration: none; }
.fsm__feat-img { width: 100px; height: 150px; background: var(--c-accent-2); }
.fsm__feat-img .ph { font-size: 8px; letter-spacing: 0; }
.fsm__feat-img .img-slot__shade { align-items: center; justify-content: center; padding: 0; }
.fsm__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.fsm__links a {
  display: block; font-size: 10px; font-weight: 500; line-height: 24px; letter-spacing: .8px; text-transform: uppercase;
  text-decoration: none; color: var(--c-accent-6);
}
.fsm__links--right { text-align: right; }

/* ---------- 3. Page title band (remaining-pages spec 2) ---------- */
.band { border-bottom: 1px solid var(--c-line); padding: 30px 16px 36px; text-align: center; }
.band__eyebrow { font-size: 10px; line-height: 1.4; color: var(--c-muted); }
.band__title { margin-top: 10px; font-size: 30px; font-weight: 400; line-height: 1.3; text-transform: uppercase; }

/* ---------- 3b. Breadcrumb (PDP spec 3, shop spec 3.1) ---------- */
.crumb { height: 32px; padding: 8px 50px; display: flex; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.crumb::-webkit-scrollbar { display: none; }
.crumb__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumb__list li { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .8px; text-transform: uppercase; color: var(--c-accent-6); }
.crumb__list li + li::before { content: "/"; margin: 0 6px; color: var(--c-muted); }
.crumb__list a { display: inline-block; padding: 4px 0; min-height: 24px; color: var(--c-muted); text-decoration: none; }
.crumb__list a:hover { color: var(--c-accent-6); }

/* ---------- 4. Layout helpers ---------- */
.inner main { display: block; }
.wrap { padding-left: 50px; padding-right: 50px; }
.col { margin-left: auto; margin-right: auto; max-width: calc(100% - 32px); }
.col--712 { width: 712px; }
.col--748 { width: 748px; }
.col--776 { width: 776px; }
.col--790 { width: 790px; }
.col--796 { width: 796px; }
.col--806 { width: 806px; }
.col--896 { width: 896px; }
.t-h2 { font-size: 48px; font-weight: 300; line-height: 1.2; text-transform: uppercase; }
.t-h3 { font-size: 38px; font-weight: 300; line-height: 1.3; text-transform: uppercase; }
.t-h6 { font-size: 16px; font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.lead { font-size: 20px; line-height: 1.35; }
.muted { color: var(--c-muted); }
.center { text-align: center; }
.hero-img { position: relative; margin: 20px 12px 0; height: 650px; background: var(--c-accent-2); }
.hero-img .img-slot__shade { align-items: center; justify-content: center; }
.hero-img img { object-position: center; }
.rule { border: 0; border-top: 1px solid var(--c-line); margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn--form { padding: 18px 40px; }
.btn--cat { padding: 18px 32px; }

/* ---------- 5. Form fields (remaining-pages spec 0.3) ---------- */
.f { display: block; min-width: 0; }
.f__label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: var(--c-accent-6); }
.f__input, .f__select, .f__textarea {
  display: block; width: 100%; height: 44px; padding: 10px 15px;
  border: 1px solid var(--c-line); border-radius: 0; background: var(--c-accent-5);
  font-size: 14px; line-height: 1.4; color: var(--c-accent-6); outline: none;
  appearance: none; -webkit-appearance: none; transition: border-color var(--t);
}
.f__textarea { height: 160px; resize: vertical; }
.f__select-wrap { position: relative; }
.f__select { padding-right: 40px; cursor: pointer; }
.f__select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.f__input:focus, .f__select:focus, .f__textarea:focus { border-color: var(--c-accent-6); }
.f__input:focus-visible, .f__select:focus-visible, .f__textarea:focus-visible { outline: none; }
.f.is-error .f__input, .f.is-error .f__select, .f.is-error .f__textarea { border-color: #CC1818; }
.f__err { display: none; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #CC1818; }
.f.is-error .f__err { display: block; }
.f__check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.f__check input { width: 16px; height: 16px; margin: 0; accent-color: #000; flex: 0 0 16px; }
.f__pw { position: relative; }
.f__pw .f__input { padding-right: 44px; }
.f__eye { position: absolute; right: 0; top: 0; width: 44px; height: 44px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .f--full { grid-column: 1 / -1; }
.form__actions { margin-top: 24px; }
.note { font-size: 14px; line-height: 1.5; }
.note--ok { color: #1E7A3C; }
.note--small { font-size: 12px; color: var(--c-muted); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.checkbox input { width: 12px; height: 12px; margin: 4px 0 0; flex: 0 0 12px; accent-color: #000; }

/* ---------- 6. Accordions (PDP spec 5.10, FAQ spec 14) ---------- */
.acc__item { border-bottom: 1px solid var(--c-line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 16px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--c-accent-6);
}
.acc__btn svg { flex: 0 0 16px; transition: transform var(--t); }
.acc__item.is-open .acc__btn .ico-plus { transform: rotate(45deg); }
.acc__item.is-open .acc__btn .ico-chev { transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body { padding: 0 0 20px; font-size: 14px; line-height: 1.4; }
.acc__body p + p { margin-top: 10px; }
.acc__lines { line-height: 1.6; }
.acc__body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 7. Text template pages (remaining-pages spec 17) ---------- */
.textpage { padding: 40px 0 100px; }
.textpage h2 { font-size: 16px; font-weight: 400; line-height: 1.5; text-transform: uppercase; margin: 48px 0 16px; }
.textpage h2:first-child { margin-top: 0; }
.textpage p { font-size: 14px; line-height: 1.5; }
.textpage p + p { margin-top: 16px; }
.textpage a { text-decoration: underline; text-underline-offset: 3px; }
.textpage .addr { white-space: pre-line; }

/* ---------- 8. Empty state block (cart, checkout) + 404 ---------- */
.empty { padding: 160px 16px 200px; text-align: center; }
.empty__title { font-size: 30px; font-weight: 400; line-height: 1.3; text-transform: uppercase; }
.empty__text { max-width: 480px; margin: 14px auto 0; font-size: 14px; line-height: 1.5; }
.empty .btn-row { margin-top: 36px; }
.nf { padding: 100px 16px 200px; text-align: center; }
.nf__code { font-size: 160px; font-weight: 300; line-height: 1; }
.nf__title { margin-top: 10px; font-size: 20px; font-weight: 400; line-height: 1.4; text-transform: uppercase; }
.nf__text { max-width: 540px; margin: 16px auto 0; font-size: 14px; line-height: 1.5; }
.nf .btn-row { margin-top: 30px; }

/* ---------- 9. FooterMinimal (PDP spec 9) ---------- */
.fm {
  margin-top: 0; text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
}
.fm__logo { padding-top: 90px; display: flex; justify-content: center; }
.fm__logo-link { display: block; }
.fm__logo img { width: 800px; max-width: 90vw; height: auto; }
.fm__nl {
  width: 896px; max-width: calc(100% - 48px); height: 80px; margin: 36px auto 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  display: grid; grid-template-columns: 1fr 1fr;
}
.fm__nl-txt {
  display: flex; align-items: center; text-align: left;
  font-size: 16px; line-height: 1.4; text-transform: uppercase;
  border-right: 1px solid var(--c-line);
}
.fm__nl-form { position: relative; width: auto; display: flex; align-items: center; }
.fm .nl__input { height: 100%; padding: 10px 56px 10px 40px; border: 0; background: transparent; }
.fm .nl__submit { right: 8px; top: 50%; transform: translateY(-50%); }
.fm .nl__success { padding-left: 40px; height: 100%; justify-content: flex-start; font-weight: 400; }
.fm .nl__error { position: absolute; left: 40px; bottom: 2px; margin: 0; }
.fm__links { margin-top: 60px; display: flex; justify-content: center; flex-wrap: wrap; gap: 36px; }
.fm__links a { display: inline-block; padding: 4px 0; font-size: 14px; line-height: 1.4; text-decoration: none; }
.fm__bar {
  margin-top: 70px; padding: 26px 50px; border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fm__copy { font-size: 12px; line-height: 1.4; }
.fm__copy a { text-decoration: none; }
.fm__social { display: flex; gap: 56px; }
.fm__social a { display: inline-block; padding: 4px 0; font-size: 14px; line-height: 1.4; text-decoration: none; }
.fm__legal { display: flex; gap: 56px; }
.fm__legal a { display: inline-block; padding: 4px 0; font-size: 12px; line-height: 1.4; text-decoration: none; }
.fm__copy a { display: inline-block; padding: 4px 0; }

/* =====================================================================
   10. Responsive (remaining-pages spec 20)
   ===================================================================== */
@media (max-width: 1024px) {
  .hc__row { padding: 0 24px; }
  .hc__nav { display: none; }
  .hc__centre { max-width: calc(100% - 300px); }
  .hc .mega, .hc .dropdown { display: none; }
  .search--inline, .search--drawer { display: flex; }
  .col { max-width: 90vw; }
  .hero-img { height: 480px; }
  .fm__nl { grid-template-columns: 1fr; height: auto; }
  .fm__nl-txt { height: 60px; justify-content: center; text-align: center; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .fm__nl-form { height: 60px; }
  .fm__bar { padding: 26px 24px; }
}

@media (max-width: 767px) {
  .hc__row { height: 60px; padding: 0 16px; }
  .hc__burger--left { display: inline-flex; }
  .hc__search, .hc__account, .hc__wish, .hc__icons .hc__burger { display: none; }
  .hc__icons { gap: 0; }
  .hc__icons .hc__cart { margin-right: -8px; }
  .hc__centre { width: 130px; max-width: 130px; }
  .hc__logo img { width: 130px; height: auto; }
  .hc__centre .search--inline { display: none; }

  .drawer--fsm { flex-direction: column; }
  .fsm__photo { display: none; }
  .fsm__panel { padding: 16px 16px 24px; }
  .fsm__mid { justify-content: flex-start; padding: 24px 0; }
  .search--drawer { width: 100%; height: 44px; margin-bottom: 8px; }
  .search--drawer .search__input { height: 44px; padding: 10px 24px 10px 30px; font-size: 14px; }
  .search--drawer .search__icon { top: 13px; left: 4px; }
  .fsm__tree { display: block; margin-bottom: 24px; }
  .fsm__big a { font-size: 28px; line-height: 48px; }
  .fsm__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fsm__links--right { text-align: left; }

  .band { padding: 20px 16px 26px; }
  .band__title { font-size: 24px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .t-h2 { font-size: 34px; }
  .t-h3 { font-size: 28px; }
  .lead { font-size: 17px; }
  .hero-img { height: 320px; }
  .form-grid { grid-template-columns: 1fr; }
  .empty { padding: 80px 16px 100px; }
  .nf { padding: 60px 16px 100px; }
  .nf__code { font-size: 110px; }

  .fm__logo { padding-top: 60px; }
  .fm__links { margin-top: 40px; gap: 20px; }
  .fm__bar { margin-top: 48px; padding: 24px 16px; flex-direction: column; gap: 16px; }
  .fm__social, .fm__legal { gap: 24px; justify-content: center; }
}

/* =====================================================================
   11. Page styles (remaining-pages spec 4 to 16)
   ===================================================================== */
/* Contact (12) */
.contact-info { padding: 40px 50px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.contact-info .t-h6 { margin-bottom: 16px; }
.contact-info p { font-size: 12px; line-height: 20px; }
.contact-info a { text-decoration: none; }
.contact-form { margin-top: 60px; padding-bottom: 100px; }
.contact-form__title { font-size: 20px; font-weight: 400; line-height: 1.4; text-transform: uppercase; text-align: center; }
.contact-form__form { margin-top: 40px; }
.form-grid--14 { gap: 14px; }
.btn--submit { padding: 18px 56px; }

/* Order status (16) */
.order { padding: 40px 0 80px; }
.order__intro { font-size: 14px; line-height: 1.5; text-align: center; }
.order__form { width: 336px; max-width: 100%; margin: 40px auto 0; }
.order__form .f + .f { margin-top: 20px; }
.order__form[hidden] { display: none; }
.btn--track { padding: 18px 36px; }
.order__result { width: 336px; max-width: 100%; margin: 40px auto 0; border: 1px solid var(--c-line); padding: 24px; font-size: 14px; line-height: 1.5; }
.order__result[hidden] { display: none; }
.pill { display: inline-block; margin-left: 8px; padding: 4px 10px; border: 1px solid var(--c-line); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; vertical-align: middle; }

/* About (10) */
.img-slot--tile .img-slot__shade { align-items: center; justify-content: center; }
.img-slot--tile img { object-position: center; }
.story { display: grid; grid-template-columns: 228px minmax(0, 556px) 228px; justify-content: space-between; gap: 40px; padding: 110px 50px; align-items: start; }
.story__img { width: 228px; height: 325px; background: var(--c-accent-2); }
.story__img--right { margin-top: 275px; }
.story__txt .t-h3 { margin-bottom: 32px; }
.story__txt .lead + .lead { margin-top: 24px; }
.cutout { position: relative; height: 380px; background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%); }
.cutout .img-slot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 760px; max-width: 100%; height: 380px; overflow: visible; }
.cutout .img-slot img { object-fit: contain; object-position: center bottom; }
.cutout .img-slot__shade { align-items: center; justify-content: center; }
.beginning { padding: 80px 50px 0; max-width: 700px; }
.beginning .t-h2 { margin-bottom: 24px; }
.timeline { margin-top: 100px; padding: 0 50px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tick { position: relative; border-top: 1px solid var(--c-line); padding-top: 24px; }
.tick::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 32px; background: var(--c-line); }
.tick__year { font-size: 14px; line-height: 1.4; color: var(--c-muted); margin-bottom: 12px; }
.tick p:not(.tick__year) { font-size: 16px; line-height: 1.5; color: var(--c-muted); transition: color .6s ease; }
.tick.is-in p { color: var(--c-accent-6); }
.collage { position: relative; height: 1140px; margin: 0 12px; }
.collage__a { position: absolute; left: 0; top: 120px; width: 496px; height: 900px; background: var(--c-accent-2); }
.collage__b { position: absolute; left: 414px; top: 200px; width: 208px; height: 282px; background: var(--c-accent-2); }
.collage__c { position: absolute; right: 0; top: 120px; width: 330px; height: 190px; background: var(--c-accent-2); }
.collage__txt { position: absolute; left: 756px; top: 740px; width: 580px; max-width: calc(100% - 756px); }
.collage__txt .t-h2 { color: #E8E8E8; }
.collage__txt p { margin-top: 24px; font-size: 16px; line-height: 1.5; }
.collage__txt .tl { margin-top: 24px; }

/* Sustainability (11) */
.sus-intro { padding: 100px 0; text-align: center; }
.sus-block { padding: 0 50px; }
.sus-block + .sus-block { margin-top: 100px; }
.sus-block .t-h3 { margin-bottom: 24px; }
.lead-16 { font-size: 16px; line-height: 1.5; max-width: 776px; }
.commit { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.commit .tick p { color: var(--c-accent-6); }
.sus-close { margin-top: 40px; font-size: 16px; line-height: 1.5; max-width: 776px; }
.materials { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-bottom: 100px; }
.mat { border-top: 1px solid var(--c-line); padding-top: 24px; }
.mat svg { width: 40px; height: 40px; margin-bottom: 16px; }
.mat__title { font-size: 14px; font-weight: 500; line-height: 1.3; text-transform: uppercase; margin-bottom: 10px; }
.mat p { font-size: 14px; line-height: 1.5; }

/* FAQ (14) */
.faq { width: 790px; max-width: calc(100% - 32px); margin: 0 auto; padding: 80px 0 100px; display: grid; grid-template-columns: 200px 490px; justify-content: space-between; gap: 40px; }
.faq__nav { position: sticky; top: 110px; align-self: start; }
.faq__nav .t-h4 { margin-bottom: 20px; }
.faq__list { counter-reset: faq; margin: 0; padding: 0; list-style: none; }
.faq__list li { counter-increment: faq; display: flex; gap: 8px; font-size: 10px; font-weight: 500; line-height: 24px; letter-spacing: .8px; text-transform: uppercase; }
.faq__list li::before { content: counter(faq) "."; color: var(--c-accent-6); }
.faq__list a { text-decoration: none; }
.faq__list a.is-active { color: var(--c-muted); }
.faq__group + .faq__group { margin-top: 60px; }
.faq__group .t-h5 { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 20px; }
.faq .acc__btn { padding: 18px 0; font-size: 10px; font-weight: 500; letter-spacing: .8px; }
.faq .acc__body { line-height: 1.5; }

/* Stores (15) */
.hero-img--stores { height: 630px; }
.store { display: grid; grid-template-columns: 674px minmax(0, 1fr); gap: 60px; padding: 100px 50px; border-top: 1px solid var(--c-line); align-items: center; }
.store:first-of-type { border-top: 0; }
.store__imgs { position: relative; height: 440px; }
.store__img-a { position: absolute; left: 0; top: 195px; width: 330px; height: 240px; background: var(--c-accent-2); }
.store__img-b { position: absolute; left: 344px; top: 0; width: 330px; height: 440px; background: var(--c-accent-2); }
.store--alt .store__imgs { order: 2; }
.store__txt p { font-size: 16px; line-height: 1.35; }
.store__addr { margin-top: 30px; }
.store__phone { margin-top: 16px; }
.store__phone a { text-decoration: none; }
.store__txt .tl { margin-top: 24px; }

/* Brands (13) */
.brands { padding: 40px 50px; }
.brands__block { padding-bottom: 60px; border-bottom: 1px solid var(--c-line); }
.brands__block + .brands__block { padding-top: 60px; }
.brands__block .t-h6 { margin-bottom: 30px; }
.t-h6--deco { color: #E8E8E8; }
.brands__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.brands__letter { font-size: 16px; line-height: 30px; }
.brands__grid a { display: block; font-size: 12px; line-height: 30px; text-decoration: none; }
.brands__grid--plain a { font-size: 14px; line-height: 38px; }

/* Press (8, 9) */
.posts { padding: 24px 12px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post { padding-bottom: 60px; }
.post__img { display: block; aspect-ratio: 466 / 570; background: var(--c-accent-2); }
.post__img img { transition: transform .5s ease; }
.post:hover .post__img img { transform: scale(1.03); }
.post__title { margin-top: 22px; font-size: 20px; font-weight: 400; line-height: 1.3; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__title a { text-decoration: none; }
.post .tl { margin-top: 14px; }
.loadmore { display: flex; justify-content: center; padding: 0 0 80px; }
.loadmore .tl[hidden] { display: none; }
.article__hero { width: 560px; max-width: calc(100% - 32px); aspect-ratio: 560 / 760; margin: 20px auto 60px; background: var(--c-accent-2); }
.article { padding-bottom: 60px; }
.article p { font-size: 16px; line-height: 1.5; }
.article p + p { margin-top: 20px; }
.article h2.t-h5 { margin: 48px 0 20px; }
.article__carousel { margin: 0 0 40px; }
.article__carousel .arrow--prev { left: 12px; }
.article__carousel .arrow--next { right: 12px; }
.quote { margin: 40px 0; padding: 60px 80px; background: var(--c-accent-2); text-align: center; }
.quote p { font-size: 16px; line-height: 1.6; text-transform: uppercase; color: var(--c-muted); }
.quote svg { margin: 20px auto 0; color: var(--c-muted); }
.article__tags { margin-top: 48px; text-align: center; font-size: 14px; }
.article__tags a { text-decoration: none; }
.comments { margin-top: 48px; padding: 40px 80px; background: var(--c-accent-2); text-align: center; }
.comments .t-h5 { padding-bottom: 16px; border-bottom: 1px solid var(--c-line); margin-bottom: 16px; }
.comments__links { display: flex; justify-content: center; gap: 24px; }
.comments__links button { min-height: 24px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--c-accent-6); }
.comments__links button:hover { color: var(--c-muted); }
.comments__body { margin-top: 24px; text-align: left; }
.comments__body[hidden] { display: none; }
.more-press { padding: 100px 50px 0; }
.more-press .t-h4 { margin-bottom: 24px; }
.more-press .posts { padding: 0; }
.more-press[hidden] { display: none; }

/* Wishlist (7) */
.wish-sub { padding: 40px 50px 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.wish-empty { padding: 60px 16px 80px; text-align: center; font-size: 14px; line-height: 1.5; }
.wish-empty svg { margin: 30px auto; }
.wish-empty .btn { margin-top: 30px; }
.wish-empty[hidden], .wish-table[hidden] { display: none; }
.wish-table { padding: 24px 50px 100px; }
.wrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px 90px 140px 174px 44px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.wrow__thumb { display: block; width: 90px; height: 135px; background: var(--c-accent-2); }
.wrow__thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; letter-spacing: 0; }
.wrow__name a { text-decoration: none; }
.wrow__price { font-weight: 500; }
.wrow__price s { font-weight: 400; margin-left: 6px; }
.wrow__stock, .wrow__date { font-size: 12px; color: var(--c-muted); }
.wrow .btn--outline { width: 100%; max-width: 174px; }
.wish-share { padding-top: 24px; font-size: 12px; line-height: 1.5; color: var(--c-muted); }

/* My account (6) */
.account { width: 392px; max-width: calc(100% - 32px); margin: 0 auto; padding: 80px 0 100px; text-align: center; }
.toggle-tabs { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; height: 50px; border: 1px solid var(--c-accent-6); }
.toggle-tabs .tab { height: 100%; min-height: 0; font-size: 10px; letter-spacing: .8px; color: var(--c-accent-6); background: var(--c-accent-5); transition: background-color var(--t), color var(--t); }
.toggle-tabs .tab[aria-selected="true"] { background: var(--c-accent-6); color: var(--c-accent-5); }
.account__panel { margin-top: 32px; text-align: left; transition: opacity .2s ease; }
.account__panel.is-fading { opacity: 0; }
.account__panel[hidden] { display: none; }
.account__welcome { text-align: center; }
.account__sub { margin-top: 8px; font-size: 12px; line-height: 1.4; text-transform: uppercase; text-align: center; }
.account__form { margin-top: 32px; }
.account__form .f + .f, .account__form .f + .f__check, .account__form .f__check + .form__actions, .account__form .note + .form__actions { margin-top: 20px; }
.account__form .form__actions { margin-top: 20px; }
.account__form .note { margin-top: 20px; }
.btn--full { width: 100%; height: 50px; }
.account__lost { display: block; margin-top: 24px; text-align: center; font-size: 10px; font-weight: 400; }

/* Cart (4) */
.cart-page { padding: 40px 50px 100px; display: grid; grid-template-columns: 66fr 34fr; gap: 40px; align-items: start; }
.crow { display: grid; grid-template-columns: 100px minmax(0, 1fr) 80px 120px 90px 44px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.crow__thumb { display: block; width: 100px; height: 150px; background: var(--c-accent-2); }
.crow__thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; letter-spacing: 0; }
.crow__title a { text-decoration: none; }
.crow__var { margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.crow__total { font-weight: 500; }
.crow .stepper { height: 40px; }
.cart-page__coupon { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.coupon { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.coupon .f { width: 220px; max-width: 100%; }
.coupon .f__input { height: 50px; }
.coupon .btn--form, .cart-page__coupon .btn--form { padding: 17px 24px; }
#coupon-note { margin-top: 12px; }
#coupon-note[hidden] { display: none; }
.totals { border: 1px solid var(--c-line); padding: 32px; }
.totals .t-h5 { margin-bottom: 20px; }
.trow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; line-height: 1.5; }
.trow--total { font-size: 16px; font-weight: 500; border-bottom: 0; }
.totals .btn { width: 100%; margin-top: 24px; }
.ship-opts label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ship-opts label + label { margin-top: 8px; }
.ship-opts input { margin: 0; accent-color: #000; }

/* Checkout (5) */
.checkout { padding: 40px 50px 100px; }
.checkout__toggles { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; font-size: 14px; line-height: 1.5; }
.checkout__box { margin-bottom: 24px; }
.checkout__box[hidden] { display: none; }
.checkout__grid { display: grid; grid-template-columns: 58fr 42fr; gap: 40px; align-items: start; margin: 0; }
.checkout .t-h5 { margin-bottom: 20px; }
.checkout__shipdiff { margin: 32px 0; }
.checkout__billing .t-h5 { margin-top: 0; }
#shipping-box { margin-bottom: 32px; }
#shipping-box[hidden] { display: none; }
.order-box { position: sticky; top: 90px; border: 1px solid var(--c-line); padding: 32px; }
.pay { margin-top: 16px; }
.pay label { display: block; padding: 10px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.pay input { margin: 0 8px 0 0; accent-color: #000; }
.pay small { display: block; margin: 6px 0 0 24px; font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.order-box .note { margin-top: 16px; }
.order-box .form__actions { margin-top: 20px; }

@media (max-width: 1024px) {
  .contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 24px; }
  .story { grid-template-columns: minmax(0, 1fr); padding: 60px 24px; }
  .story__img--right { margin-top: 0; }
  .story__imgs-row { display: flex; gap: 24px; }
  .beginning { padding: 60px 24px 0; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 24px; margin-top: 60px; }
  .collage { height: auto; margin: 0 24px; padding: 80px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .collage__a, .collage__b, .collage__c, .collage__txt { position: static; width: auto; max-width: none; }
  .collage__a { height: 520px; grid-row: span 2; }
  .collage__b { height: 282px; }
  .collage__c { height: 190px; }
  .collage__txt { grid-column: 1 / -1; }
  .sus-block { padding: 0 24px; }
  .commit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 80px; }
  .faq__nav { position: static; }
  .faq__list { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .faq__list::-webkit-scrollbar { display: none; }
  .faq__list li { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--c-line); }
  .store { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 60px 24px; }
  .store--alt .store__imgs { order: 0; }
  .brands { padding: 40px 24px; }
  .brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account { max-width: min(90vw, 480px); }
  .cart-page { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 80px; }
  .crow { grid-template-columns: 80px minmax(0, 1fr) 110px 44px; }
  .crow__thumb { width: 80px; height: 120px; }
  .crow > div:nth-child(3), .crow__total { display: none; }
  .checkout { padding: 32px 24px 80px; }
  .checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .order-box { position: static; }
  .more-press { padding: 60px 24px 0; }
  .wish-table { padding: 24px 24px 80px; }
  .wrow { grid-template-columns: 90px minmax(0, 1fr) 174px 44px; }
  .wrow__stock, .wrow__date { display: none; }
}

@media (max-width: 767px) {
  .contact-info { grid-template-columns: minmax(0, 1fr); padding: 32px 16px; }
  .contact-form { margin-top: 40px; padding-bottom: 60px; }
  .contact-form__title { font-size: 16px; }
  .btn--submit { width: 100%; }
  .order { padding: 32px 0 60px; }
  .story__img { width: 100%; max-width: 228px; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .collage { grid-template-columns: minmax(0, 1fr); margin: 0 16px; padding: 60px 0; }
  .collage__a { height: 420px; }
  .cutout { height: 260px; }
  .cutout .img-slot { height: 260px; }
  .sus-intro { padding: 60px 0; }
  .sus-block + .sus-block { margin-top: 60px; }
  .commit, .materials { grid-template-columns: minmax(0, 1fr); }
  .hero-img--stores { height: 320px; }
  .store__imgs { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .store__img-a, .store__img-b { position: static; width: 100%; height: 240px; }
  .brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; }
  .post { padding-bottom: 40px; }
  .post__img { aspect-ratio: 4 / 5; }
  .quote { padding: 40px 24px; }
  .comments { padding: 32px 16px; }
  .more-press { padding: 48px 16px 0; }
  .wish-sub { padding: 24px 16px 0; }
  .wish-table { padding: 16px 16px 60px; }
  .wrow { grid-template-columns: 72px minmax(0, 1fr) 44px; }
  .wrow__thumb { width: 72px; height: 108px; }
  .wrow > div:nth-child(6) { grid-column: 2 / -1; }
  .wrow .btn--outline { max-width: none; }
  .cart-page { padding: 24px 16px 60px; gap: 24px; }
  .crow { grid-template-columns: 72px minmax(0, 1fr) 44px; }
  .crow__thumb { width: 72px; height: 108px; }
  .crow .stepper { grid-column: 2; }
  .cart-page__coupon, .coupon { flex-direction: column; }
  .coupon .f, .coupon .btn, .cart-page__coupon .btn { width: 100%; }
  .totals { padding: 24px 16px; }
  .checkout { padding: 24px 16px 60px; }
  .order-box { padding: 24px 16px; }
}