/* ============================================================
   BLISS ROAD STUDIOS — Design System v1 (Redesign 2026)
   Palette drawn from Gay's artwork, locked 2026-07-06.
   Rifle Paper Co. inspired: painterly, warm, whimsical, classic.
   This stylesheet is the blueprint for the custom Shopify theme.
   ============================================================ */

:root {
  /* Palette */
  --cream:        #F7F1E3;  /* Cream canvas — page ground */
  --cream-deep:   #F1E8D2;  /* darker cream for alt bands */
  --ink:          #2C352B;  /* Garden ink — text, deep green-black */
  --sage:         #7C8154;  /* Sage leaf */
  --hydrangea:    #4E6B44;  /* Hydrangea green */
  --rose:         #CE4A3E;  /* June rose — primary accent / CTA */
  --rose-deep:    #B23D33;  /* hover */
  --blush:        #F0BFB4;  /* Blush */
  --butter:       #FBDE74;  /* Butter sun */
  --gold:         #C09A3E;  /* Old gold */
  --line:         rgba(44, 53, 43, 0.16);

  /* Type */
  --serif:  "Playfair Display", "Georgia", serif;
  --sans:   "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --script: "Caveat", cursive;

  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.announce em { font-style: normal; color: var(--butter); }

/* ---------- Header ---------- */
header.site {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; padding: 18px 24px; max-width: var(--maxw); margin: 0 auto;
}
.logo {
  font-family: var(--serif);
  font-size: 24px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap; flex-shrink: 0;
}
.logo img { height: 30px; width: auto; display: block; }
.logo .amp { color: var(--rose); }
.logo small {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sage); margin-top: 1px;
}
nav.main { display: flex; gap: 22px; flex-wrap: nowrap; }
nav.main a {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease; white-space: nowrap;
}
nav.main a:hover, nav.main a.active { border-bottom-color: var(--rose); color: var(--rose-deep); }
.header-tools { display: flex; gap: 18px; align-items: center; font-size: 14px; letter-spacing: 0.08em; }
.header-tools a:hover { color: var(--rose-deep); }
.cart-count {
  background: var(--rose); color: #fff; border-radius: 50%;
  font-size: 11px; width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; margin-left: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--rose); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 34px; border: none; border-radius: 2px;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--rose-deep); transform: translateY(-1px); }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--cream); }
.btn.on-dark { background: var(--cream); color: var(--ink); }
.btn.on-dark:hover { background: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 560px; display: flex; align-items: center;
}
.hero .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
}
.hero .bg::after {  /* soft cream veil on the text side */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(247, 241, 227, 0.92) 0%,
    rgba(247, 241, 227, 0.55) 34%,
    rgba(247, 241, 227, 0) 58%);
}
.hero-content { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: 90px 24px; width: 100%; }
.hero-content .kicker {
  font-family: var(--script); font-size: 26px; color: var(--hydrangea);
  margin-bottom: 6px;
}
.hero-content h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.08;
  max-width: 10em; margin-bottom: 18px;
}
.hero-content p {
  font-size: 19px; max-width: 25em; margin-bottom: 30px; color: var(--ink);
}

/* ---------- Section scaffolding ---------- */
section { padding: 72px 0; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .over {
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 10px;
}
.section-head h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15;
}
.section-head .sub { max-width: 46em; margin: 12px auto 0; color: rgba(44,53,43,.8); }

/* scalloped divider — the whimsy detail */
.scallop {
  height: 16px;
  background-image: radial-gradient(circle at 8px -4px, transparent 12px, var(--cream) 13px);
  background-size: 16px 16px;
  background-repeat: repeat-x;
}
.scallop.flip { transform: scaleY(-1); }
.scallop.on-ink   { background-image: radial-gradient(circle at 8px -4px, transparent 12px, var(--ink) 13px); }
.scallop.on-deep  { background-image: radial-gradient(circle at 8px -4px, transparent 12px, var(--cream-deep) 13px); }
.scallop.on-blush { background-image: radial-gradient(circle at 8px -4px, transparent 12px, var(--blush) 13px); }

/* ---------- Collection tiles ---------- */
.collections-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.collection-tile { position: relative; }
.collection-tile .frame {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--line); background: #fff;
}
.collection-tile.square .frame { aspect-ratio: 1 / 1; }
.collections-grid + .collections-grid { margin-top: 26px; }
.feature-band .collection-tile .frame { border-color: rgba(44,53,43,.22); }
.collection-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.collection-tile:hover img { transform: scale(1.045); }
.collection-tile h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  text-align: center; margin-top: 14px;
}
.collection-tile .count {
  display: block; text-align: center; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage);
  margin-top: 2px;
}

/* ---------- Featured pattern band ---------- */
.feature-band { background: var(--cream-deep); }
.feature-grid {
  /* Gay 2026-08-11: feature-blooming-bird.jpg was re-cropped from a wide 1.79:1
     frame (an AI-edit had padded it with blank wall) down to a clean ~7:6 shot.
     Text column widened to balance the now-narrower, squarer image. */
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 54px; align-items: center;
}
.feature-grid .art { border-radius: 3px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 7 / 6; }
.feature-grid .art img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy .over {
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.feature-copy h2 {
  font-family: var(--serif); font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15; margin-bottom: 16px;
}
.feature-copy p { margin-bottom: 26px; color: rgba(44,53,43,.85); }
.feature-copy .script-note {
  font-family: var(--script); font-size: 24px; color: var(--rose);
  display: block; margin-bottom: 6px;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px;
}
.product-card .frame {
  aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; position: relative;
}
.product-card img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease;
}
.product-card:hover img { transform: scale(1.04); }
.product-card .badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--butter); color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}
.product-card .badge.rose { background: var(--rose); color: #fff; }
.product-card h3 {
  font-family: var(--serif); font-size: 18.5px; font-weight: 700;
  margin-top: 13px; line-height: 1.25;
}
.product-card .ptype {
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage); margin-top: 3px;
}
.product-card .price { margin-top: 5px; font-weight: 600; }

/* ---------- Capsules band ---------- */
.capsules { background: var(--ink); color: var(--cream); }
.capsules .section-head .over { color: var(--butter); }
.capsules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.capsule-card { position: relative; border-radius: 3px; overflow: hidden; }
.capsule-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.capsule-card .plate {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg,
    rgba(24,29,23,.90) 0%, rgba(24,29,23,.62) 55%, rgba(24,29,23,0) 100%);
  padding: 120px 28px 24px;
}
.capsule-card h3 { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); margin-bottom: 4px; }
.capsule-card p  { font-size: 15.5px; opacity: .92; max-width: 34em; }
.capsule-card .go {
  margin-top: 12px; display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--butter);
  border-bottom: 1px solid var(--butter); padding-bottom: 2px;
}
.capsule-card:hover .go { color: #fff; border-color: #fff; }

/* ---------- Story band ---------- */
.story { background: var(--blush); }
.story-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; align-items: center; }
.story .art { border-radius: 3px; overflow: hidden; border: 1px solid rgba(44,53,43,.2); }
.story h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 38px); line-height: 1.18; margin-bottom: 16px; }
.story p { margin-bottom: 14px; color: rgba(44,53,43,.88); }
.story .sig { font-family: var(--script); font-size: 30px; color: var(--rose-deep); margin-top: 8px; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--cream-deep); text-align: center; }
.newsletter h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.newsletter p { max-width: 40em; margin: 0 auto 26px; color: rgba(44,53,43,.8); }
.news-form { display: flex; gap: 10px; justify-content: center; max-width: 520px; margin: 0 auto; }
.news-form input {
  flex: 1; padding: 14px 18px; font-size: 15.5px; font-family: var(--sans);
  border: 1.5px solid var(--ink); border-radius: 2px; background: var(--cream);
  color: var(--ink);
}
.news-form input::placeholder { color: rgba(44,53,43,.5); }

/* ---------- Footer ---------- */
footer.site {
  background: var(--ink); color: var(--cream);
  padding: 60px 0 34px; font-size: 15px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px;
}
.footer-grid h4 {
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--butter); margin-bottom: 14px; font-weight: 600;
}
.footer-grid a { display: block; padding: 4px 0; opacity: .88; }
.footer-grid a:hover { opacity: 1; color: var(--butter); }
.footer-brand .logo { color: var(--cream); font-size: 24px; }
/* Gay 9/8: fixed height + max-width:100% squished the logo at phone widths;
   cap the width and let height follow so it scales in proportion. */
.footer-brand .footer-logo { width: min(311px, 100%); height: auto; display: block; }
.footer-brand p { opacity: .8; margin-top: 12px; max-width: 26em; }
.fine {
  border-top: 1px solid rgba(247,241,227,.2); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13.5px; opacity: .75;
}
.fine-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.social-links { display: flex; align-items: center; gap: 16px; }
.social-links a { display: flex; padding: 0; opacity: .88; color: inherit; }
.social-links a:hover { opacity: 1; color: var(--butter); }
.social-icon { width: 24px; height: 24px; display: block; }

/* ---------- Collection page ---------- */
.collection-hero { position: relative; }
.collection-hero img {
  width: 100%;
  /* Gay 2026-08-11 (Shoes & Scarves): this was a FIXED height:380px at every width,
     which turned a 2.36:1 hero into a 5:1 letterbox on a wide monitor — at 1920px only
     47% of the image height survived the crop, so the sneakers and the dog fell outside
     the frame. The band now takes the heroes' own native ratio and only caps its height,
     so a wide screen gets a taller band instead of a harder crop. */
  height: auto;
  aspect-ratio: 1472 / 624;
  max-height: 700px;
  min-height: 340px;
  object-fit: cover;
}
.collection-hero .plate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: #fff; padding: 24px;
}
.collection-hero h1, .collection-hero .plate .crumbs { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 4px 26px rgba(0,0,0,.5); }
.collection-hero .plate p { text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.5); }
.collection-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 54px); }
.collection-hero p { max-width: 38em; margin-top: 10px; font-size: 18px; }
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 26px 0 0;
}
.filter-bar a {
  font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 20px; padding: 8px 18px;
}
.filter-bar a.active, .filter-bar a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 56px 0; }
.pdp-gallery .main {
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #fff;
  aspect-ratio: 1 / 1; /* Printify mockups are square -- Gay 7/12: square frame, no white gutters */
  display: flex; align-items: center; justify-content: center;
}
.pdp-gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp-gallery .thumbs .t {
  width: 84px; height: 84px; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; background: #fff; cursor: pointer;
}
.pdp-gallery .thumbs .t.active { border-color: var(--rose); border-width: 2px; }
.pdp-gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info .crumbs { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-bottom: 14px; }
.pdp-info h1 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }
.pdp-info .design-line { font-family: var(--script); font-size: 23px; color: var(--hydrangea); margin: 6px 0 14px; }
.pdp-info .price { font-size: 24px; font-weight: 600; margin-bottom: 22px; }
.pdp-info .opt-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.size-row { display: flex; gap: 10px; margin-bottom: 26px; }
.size-row .size {
  border: 1.5px solid var(--line); border-radius: 2px; padding: 10px 16px;
  font-size: 15px; cursor: pointer;
}
.size-row .size.active { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.size-row .size .size-dim { display: block; font-size: 11px; color: rgba(44,53,43,.6); margin-top: 3px; letter-spacing: .01em; }
.size-row .size.active .size-dim { color: rgba(247,241,227,.75); }
.pdp-info .btn { width: 100%; text-align: center; }
.trust-row {
  display: flex; gap: 18px; justify-content: space-between; margin-top: 18px;
  font-size: 13.5px; color: rgba(44,53,43,.75); flex-wrap: wrap;
}
.accordion { border-top: 1px solid var(--line); margin-top: 30px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  padding: 16px 0; cursor: pointer; list-style: none; position: relative;
}
.accordion summary::after { content: "+"; position: absolute; right: 4px; color: var(--rose); }
.accordion details[open] summary::after { content: "–"; }
.accordion .body { padding: 0 0 18px; color: rgba(44,53,43,.85); }

/* ---------- About page ---------- */
.about-hero { text-align: center; padding: 80px 24px 56px; }
.about-hero .kicker { font-family: var(--script); font-size: 28px; color: var(--hydrangea); }
.about-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 56px); max-width: 16em; margin: 8px auto 0; line-height: 1.12; }
.prose { max-width: 680px; margin: 0 auto; padding: 0 24px 72px; font-size: 18.5px; }
.prose p { margin-bottom: 22px; }
.prose .drop::first-letter {
  font-family: var(--serif); font-size: 64px; float: left; line-height: .9;
  padding: 4px 10px 0 0; color: var(--rose);
}
.prose .art { border-radius: 3px; overflow: hidden; border: 1px solid var(--line); margin: 34px 0; }
.prose h2 { font-family: var(--serif); font-size: 28px; margin: 36px 0 14px; }
.prose .sig { font-family: var(--script); font-size: 34px; color: var(--rose-deep); }

/* ---------- Hamburger button (Gay 2026-08-11) ----------
   Declared BEFORE the media queries so the query's display:inline-flex wins
   the cascade — putting this block after them silently hid the button. */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 36px; padding: 6px 8px; margin-left: 6px;
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
header.site { position: relative; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid, .story-grid, .pdp { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pdp > * { min-width: 0; }
  .pdp-gallery .thumbs { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .size-row { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  nav.main { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .logo img { width: min(180px, 45vw); height: auto; }
  /* Gay 2026-08-11: at phone width the header overflowed and pushed the
     hamburger off-screen. Tighten the row and drop the tagline + "Search"
     word so the logo, cart and burger all fit. */
  .header-inner { width: 100%; gap: 8px; padding: 14px 16px; }
  .logo small { display: none; }
  .header-tools { min-width: 0; flex-shrink: 0; gap: 8px; font-size: 13px; }
  .header-tools a[aria-label="Search"] { font-size: 0; }
  .header-tools a[aria-label="Search"]::before { content: "⌕"; font-size: 22px; line-height: 1; }
  .nav-toggle { margin-left: 0; flex-shrink: 0; }
  .collection-hero .plate { padding: 20px; }
  .collection-hero h1 { max-width: 100%; font-size: 34px; line-height: 1.08; }
  .collection-hero p { max-width: 100%; font-size: 16px; line-height: 1.45; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .capsules-grid { grid-template-columns: 1fr; }
  .hero { min-height: 480px; }
  .hero .bg::after {
    background: linear-gradient(0deg,
      rgba(247,241,227,.94) 0%, rgba(247,241,227,.55) 45%, rgba(247,241,227,.12) 75%);
  }
  .news-form { flex-direction: column; }
  section { padding: 52px 0; }
}

/* ---------- Mega-menu dropdowns ---------- */
nav.main { align-items: center; }
.nav-item { position: relative; }
.nav-item > a { display: inline-block; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--cream); border: 1px solid var(--line);
  border-top: 2px solid var(--rose);
  box-shadow: 0 14px 34px rgba(44,53,43,.14);
  padding: 22px 26px; display: flex; gap: 38px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 60; text-align: left;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* invisible hover bridge so the mouse can travel from link to panel */
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.dd-col { min-width: 168px; }
.dd-col img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); margin-bottom: 8px; }
.dd-col h5 {
  font-family: var(--serif); font-size: 15.5px; font-weight: 700;
  margin-bottom: 8px; color: var(--ink); white-space: nowrap;
}
.dd-col a {
  display: block; padding: 4px 0; font-size: 13.5px; letter-spacing: .02em;
  text-transform: none; border-bottom: none !important; color: rgba(44,53,43,.85);
  white-space: nowrap;
}
.dd-col a:hover { color: var(--rose-deep); }
/* right-edge dropdowns shouldn't overflow the viewport */
.nav-item:nth-last-child(-n+2) .dropdown { left: auto; right: 0; transform: translateY(6px); }
.nav-item:nth-last-child(-n+2):hover .dropdown, .nav-item:nth-last-child(-n+2).open .dropdown { transform: translateY(0); }

/* ---------- Category type-section headers ---------- */
.type-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 46px 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px;
  /* Gay 2026-09-07: chapter quick-links (e.g. "The Garden", "Salt & Shore")
     and the All-Designs index both jump to this element's id. Without this,
     the sticky header (65px) lands flush over the heading, so the click
     appears to drop you on top of / just past the section you asked for. */
  scroll-margin-top: 90px;
}
.type-head h2 { font-family: var(--serif); font-size: 26px; }
.type-head .count { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }

/* ---------- Editorial lifestyle grid (Gay 8/9: WS-style apron presentation) ---------- */
.product-grid.editorial { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.product-grid.editorial .frame { aspect-ratio: 4 / 5; }
.product-grid.editorial .product-card.wide { grid-column: span 2; }
.product-grid.editorial .product-card.wide .frame { aspect-ratio: 8 / 5; }
.product-grid.editorial h3 { font-size: 20px; }

/* Indoor pillow families: each Square and its true Lumbar mate share one row. */
.product-grid.editorial.pillow-families {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pillow-family {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.pillow-family.single .product-card { max-width: calc((100% - 26px) / 2); }
@media (max-width: 1080px) {
  .product-grid.editorial { grid-template-columns: repeat(2, 1fr); }
  .product-grid.editorial .product-card.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .product-grid.editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .product-grid.editorial .product-card.wide { grid-column: auto; }
  .product-grid.editorial .product-card.wide .frame { aspect-ratio: 4 / 5; }
  .pillow-family { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .pillow-family.single .product-card { max-width: none; }
}

/* Editorial interlude (Gay 8/17): the room scene, full width, with copy beside
   it — "only occasionally", to break the sameness of a straight product grid. */
.product-grid.editorial .interlude {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: 34px; align-items: center;
  margin: 16px 0 10px;
}
.product-grid.editorial .interlude .shot { display: block; overflow: hidden; border-radius: 2px; }
.product-grid.editorial .interlude .shot img {
  width: 100%; height: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.product-grid.editorial .interlude .shot:hover img { transform: scale(1.03); }
.product-grid.editorial .interlude .say { padding-right: 8px; }
.product-grid.editorial .interlude .say h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; line-height: 1.15; margin: 0 0 12px;
}
.product-grid.editorial .interlude .say p { margin: 0 0 16px; line-height: 1.65; opacity: .86; }
.product-grid.editorial .interlude .say .more {
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px; text-decoration: none;
}
@media (max-width: 1080px) {
  .product-grid.editorial .interlude { grid-template-columns: 1fr; gap: 20px; }
  .product-grid.editorial .interlude .say h3 { font-size: 26px; }
}

/* story paragraphs (Gay 8/9: no more wall of text) */
.accordion .body p { margin: 0 0 12px; }
.accordion .body p:last-child { margin-bottom: 0; }
.accordion .body ul { margin: 8px 0 12px 18px; }
.accordion .body li { margin-bottom: 7px; line-height: 1.5; }

/* ================= MOBILE NAV DRAWER (Gay 2026-08-11) =================
   Appended at the END on purpose: the desktop mega-menu rules above use
   transform: translateX(-50%) on :hover/:focus-within, and because they come
   later in the file they were overriding the drawer and sliding each panel
   off to the left the moment the cursor touched it. Last-in-file + !important
   on the transform makes the drawer authoritative at small widths. */
@media (max-width: 1020px) {
  body.nav-open nav.main {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(44,53,43,.16);
    max-height: calc(100vh - 110px); overflow-y: auto;
    padding: 6px 20px 26px; z-index: 80;
  }
  body.nav-open nav.main .nav-item { position: static; display: block; }
  body.nav-open nav.main .nav-item > a {
    display: block; padding: 14px 0; font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  body.nav-open nav.main .nav-item::after { display: none; }

  /* the panels: always in flow, never transformed, always visible */
  body.nav-open nav.main .dropdown,
  body.nav-open nav.main .nav-item:hover .dropdown,
  body.nav-open nav.main .nav-item:focus-within .dropdown,
  body.nav-open nav.main .nav-item.open .dropdown,
  body.nav-open nav.main .nav-item:nth-last-child(-n+2) .dropdown,
  body.nav-open nav.main .nav-item:nth-last-child(-n+2):hover .dropdown {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    transform: none !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    display: block !important;
    background: transparent; border: none; box-shadow: none;
    padding: 2px 0 10px 12px; margin: 0;
    max-width: none; width: auto;
  }
  body.nav-open nav.main .dd-col { min-width: 0; margin-bottom: 12px; }
  body.nav-open nav.main .dd-col img { display: none; }
  body.nav-open nav.main .dd-col h5 { margin: 10px 0 4px; white-space: normal; }
  body.nav-open nav.main .dd-col a { white-space: normal; padding: 7px 0; }
}

/* ============================================================================
   PORTRAIT HERO ON PHONES — Gay 2026-08-11 (Shoes & Scarves)
   The bug: .collection-hero img is height:380px at EVERY width. A portrait
   mobile hero (3:4) served into a 380px-tall full-width band gets sliced into
   a horizontal strip, so the dog, the flowers, the second pair of sneakers and
   the bench scarf all fell outside the frame on a phone — the exact elements
   the mobile variant exists to preserve.
   The fix: where a portrait variant exists (.hero-pic--mobile), let the band
   take the image's own 3:4 shape on phones instead of a fixed height. The
   .hero-loop video is already position:absolute inset:0, so it fills the taller
   box automatically. Scoped to .hero-pic--mobile so landscape-only heroes and
   the magazine covers are untouched.
   ========================================================================= */
@media (max-width: 640px) {
  .collection-hero .hero-pic--mobile,
  .collection-hero .hero-pic--mobile img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  /* the title plate has more room to breathe in a taller frame */
  .collection-hero .plate { padding: 0 18px; }
}

/* Gay + Ray 8/27 (the compromise): no pink, no floating — a quiet linen band.
   Barely-there warm tint from the site's own ink, hairlines above and below. */
.note { color: rgba(44,53,43,.85); line-height: 1.72; font-size: 16.5px;
  background: rgba(96,116,88,.12);
  border-top: 1px solid rgba(96,116,88,.32); border-bottom: 1px solid rgba(96,116,88,.32);
  padding: 16px 22px; }
.note--intro { font-size: 17.5px; padding: 20px 26px; }

/* ---------- Back to top (Gay 2026-09-07: long category/design pages) ---------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--cream); border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--rose); }
@media (max-width: 640px) {
  .back-to-top { right: 14px; bottom: 18px; width: 42px; height: 42px; font-size: 18px; }
}

/* Gay 9/6: One-Size jewelry (birth-month pendants) must state pendant dimensions + chain length; option chips don't exist for One Size so this line carries them. */
.pdp-info .spec-line { font-size: 14px; letter-spacing: .04em; color: var(--ink-soft, #555); margin: -6px 0 14px; }