.page-header { padding: 92px 0 58px; text-align: center; background: var(--cream); }
.page-header h1 { margin-bottom: 14px; font-size: clamp(48px, 6vw, 78px); }
.page-header p { max-width: 600px; margin: 0 auto; color: #666860; line-height: 1.7; }
.breadcrumb { padding-block: 20px; color: #777970; font-size: 11px; }
.breadcrumb a:hover { color: var(--ink); }
.sub-header { position: sticky; top: 0; z-index: 20; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding-block: 26px; border-bottom: 1px solid var(--line); }
.filter-group { display: flex; gap: 26px; }
.filter-button, .sort-select { padding: 0; border: 0; background: transparent; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sort-select { outline: 0; }
.result-count { color: #777970; font-size: 11px; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 16px; padding-block: 48px 110px; }
.shop-grid .product-card:nth-child(3n) .product-image { background: #ddd8cf; }
.shop-grid .product-card:nth-child(2n) .product-image { background: #e2e1dc; }
.pagination { display: flex; justify-content: center; gap: 8px; padding-bottom: 100px; }
.pagination a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); }
.pagination a.active { color: var(--white); background: var(--ink); border-color: var(--ink); }

.product-detail { display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; padding-bottom: 110px; }
.product-gallery { display: grid; grid-template-columns: 1fr; }
.product-gallery .image-placeholder { aspect-ratio: 3 / 4; }
.product-panel { position: sticky; top: 110px; align-self: start; padding-top: 30px; }
.product-panel .eyebrow { color: #73756d; }
.product-panel h1 { margin-bottom: 14px; font-size: clamp(40px, 4vw, 58px); line-height: 1.05; }
.product-price { margin-bottom: 34px; font-size: 15px; }
.option-head { display: flex; justify-content: space-between; margin-bottom: 13px; font-size: 11px; text-transform: uppercase; }
.swatches { display: flex; gap: 10px; margin-bottom: 28px; }
.swatch { width: 28px; height: 28px; border: 5px solid var(--paper); border-radius: 50%; outline: 1px solid var(--line); cursor: pointer; }
.swatch.active { outline-color: var(--ink); }
.size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 24px; }
.size-grid button { height: 45px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.size-grid button.active { color: var(--white); background: var(--ink); border-color: var(--ink); }
.inquiry-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-bottom: 24px; border: 1px solid var(--ink); color: var(--white); background: var(--ink); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.inquiry-cta:hover { color: var(--ink); background: transparent; }
.product-copy { color: #63655f; line-height: 1.8; }
.detail-row { border-top: 1px solid var(--line); }
.detail-row:last-child { border-bottom: 1px solid var(--line); }
.detail-row summary { padding: 18px 0; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.detail-row p { padding-bottom: 18px; margin: 0; color: #63655f; line-height: 1.7; }
.related { padding: 90px 0; background: var(--cream); }

.content-page { padding-block: 80px 120px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin: 58px 0 18px; font-size: 36px; }
.prose h3 { margin: 35px 0 12px; font-size: 16px; }
.prose p, .prose li { color: #575952; line-height: 1.85; }
.prose ul { padding-left: 20px; }
.prose a { border-bottom: 1px solid; }
.content-image { aspect-ratio: 16 / 8; max-width: 1050px; margin: 0 auto 72px; }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; }
.split-feature .image-placeholder { min-height: 600px; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vw; background: var(--cream); }
.split-copy h1 { margin-bottom: 28px; font-size: clamp(48px, 6vw, 76px); line-height: 1; }
.split-copy p { max-width: 520px; color: #5d5f58; line-height: 1.85; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; padding-block: 110px; text-align: center; }
.value-number { display: block; margin-bottom: 20px; font-family: "Italiana", serif; font-size: 46px; }
.values h2 { font-size: 27px; }
.values p { color: #666860; line-height: 1.7; }

.journal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 24px; padding-block: 70px 120px; }
.journal-list article:first-child { grid-column: span 2; }
.journal-list article:first-child .journal-card-image { aspect-ratio: 16 / 7; }
.journal-card-image { aspect-ratio: 16 / 10; margin-bottom: 24px; }
.journal-list h2 { margin-bottom: 12px; font-size: 32px; }
.journal-list p:not(.eyebrow) { color: #686a63; }
.article-hero { width: min(100% - 48px, 1100px); margin: 52px auto; text-align: center; }
.article-hero h1 { max-width: 850px; margin: 0 auto 20px; font-size: clamp(48px, 7vw, 88px); line-height: 1; }
.article-meta { color: #777970; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.article-image { aspect-ratio: 16 / 8; margin-top: 50px; }

.account-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; max-width: 1000px; padding-block: 100px 130px; }
.account-card h2, .contact-form h2 { font-size: 38px; }
.account-card > p { color: #676960; line-height: 1.7; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 9px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea, .field select { width: 100%; padding: 14px; border: 1px solid var(--line); outline: 0; background: transparent; }
.field textarea { min-height: 140px; resize: vertical; }
.form-button { min-width: 150px; min-height: 48px; border: 1px solid var(--ink); color: var(--white); background: var(--ink); cursor: pointer; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.form-button:hover { color: var(--ink); background: transparent; }
.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; padding-block: 90px 120px; }
.contact-details h2 { margin-top: 45px; font-size: 28px; }
.contact-details p, .contact-details a { color: #62645d; line-height: 1.8; }
.faq-list { max-width: 850px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button { position: relative; width: 100%; padding: 24px 40px 24px 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.faq-item button::after { position: absolute; right: 5px; content: "+"; font-size: 20px; }
.faq-item.is-open button::after { content: "−"; }
.faq-answer { display: none; padding: 0 40px 24px 0; color: #60625b; line-height: 1.8; }
.faq-item.is-open .faq-answer { display: block; }
.size-table { width: 100%; margin: 35px 0; border-collapse: collapse; text-align: center; }
.size-table th, .size-table td { padding: 15px; border-bottom: 1px solid var(--line); }
.size-table th { background: var(--cream); font-size: 11px; text-transform: uppercase; }

@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .product-detail { grid-template-columns: 1fr; gap: 35px; }
  .product-panel { position: static; max-width: 620px; padding-top: 0; }
  .split-feature { grid-template-columns: 1fr; }
  .split-feature .image-placeholder { min-height: 70vw; }
  .values { grid-template-columns: 1fr; gap: 40px; }
  .account-wrap, .contact-grid { grid-template-columns: 1fr; gap: 70px; }
}
@media (max-width: 600px) {
  .page-header { padding: 65px 20px 45px; }
  .filter-group { gap: 12px; }
  .filter-group .filter-button:nth-child(n+3) { display: none; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 38px 10px; }
  .product-gallery { gap: 6px; }
  .product-gallery .image-placeholder:nth-child(n+3) { display: none; }
  .split-copy { padding: 65px 22px; }
  .journal-list { grid-template-columns: 1fr; }
  .journal-list article:first-child { grid-column: auto; }
  .article-hero { width: min(100% - 24px, 1100px); }
  .account-wrap, .contact-grid { padding-block: 70px 90px; }
  .size-table { font-size: 11px; }
  .size-table th, .size-table td { padding: 10px 5px; }
}