/* ============================================================
   PRODUCT PAGE — sections & components
   Reuses tokens from styles.css
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb { padding: 18px 0 0; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 0; font-size: 13px; color: var(--ink-faint); }
.crumb a { color: var(--ink-soft); font-weight: 500; transition: color .2s; }
.crumb a:hover { color: var(--agave); }
.crumb li::after { content: "›"; margin-left: 9px; color: var(--ink-faint); }
.crumb li:last-child::after { content: none; }
.crumb li[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- product hero ---------- */
.phero { padding: clamp(26px,4vw,46px) 0 clamp(48px,6vw,82px); overflow: hidden; position: relative; }
.phero-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 50% at 82% 14%, rgba(189,138,62,0.13), transparent 70%),
              radial-gradient(50% 55% at 6% 92%, rgba(47,107,79,0.09), transparent 70%); }
.phero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(30px,5vw,72px); align-items: center; }
.phero-copy .eyebrow { margin-bottom: 20px; }
.phero-copy h1 { font-size: clamp(34px,5vw,64px); line-height: 1.0; letter-spacing: -0.035em; margin-bottom: 22px; }
.phero-copy h1 .serif-accent { color: var(--agave); }
.phero-lede { font-size: clamp(16px,1.5vw,19px); color: var(--ink-soft); line-height: 1.6; max-width: 52ch; margin-bottom: 30px; }
.phero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.phero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
.phero-stats { list-style: none; margin: 0; padding: 26px 0 0; display: flex; gap: clamp(22px,3vw,44px); border-top: 1px solid var(--line); }
.phero-stats li { display: flex; flex-direction: column; gap: 4px; }
.phero-stats b { font-size: clamp(22px,2.4vw,30px); font-weight: 700; letter-spacing: -0.03em; color: var(--agave-deep); }
.phero-stats span { font-size: 12.5px; color: var(--ink-faint); max-width: 15ch; line-height: 1.3; }

.phero-visual { position: relative; }
.phero-stage { position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(78% 70% at 50% 38%, #fffdf8 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-lg); aspect-ratio: 4/4.2; display: grid; place-items: center; }
.phero-stage img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 26px 40px rgba(29,40,30,0.18)); }
.phero-stage.is-photo { background: none; }
.phero-stage.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.phero-badge { position: absolute; display: flex; align-items: center; gap: 11px; background: var(--surface);
  padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-md); border: 1px solid var(--line-soft); }
.phero-badge b { font-size: 14px; display: block; }
.phero-badge small { font-size: 11.5px; color: var(--ink-faint); }
.phero-badge .hb-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 15px; background: var(--gold-soft); color: var(--gold); }
.phero-badge.b-gi { top: 24px; right: -22px; }
.phero-badge.b-gi .hb-mark { background: var(--agave-soft); color: var(--agave-deep); }
.phero-badge.b-org { bottom: 26px; left: -22px; }

/* ---------- description / benefits ---------- */
.pdesc { background: var(--bg-2); }
.pdesc-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,70px); align-items: start; }
.pdesc-left .eyebrow { margin-bottom: 18px; }
.pdesc-left h2 { margin-bottom: 20px; }
.pdesc-left p + p { margin-top: 16px; }
.pdesc-left .lede { max-width: none; }
.benefit-grid { display: grid; gap: 12px; }
.benefit { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.benefit .bn-ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--agave-soft); color: var(--agave-deep); font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 600; }
.benefit b { font-size: 16.5px; display: block; margin-bottom: 4px; }
.benefit p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- specifications table ---------- */
.pspec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(28px,4vw,44px); }
.pspec-head .block-head { margin-bottom: 0; }
.spec-wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(20px,3vw,40px); align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.spec-table caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--ink-faint); padding: 14px 4px 0; line-height: 1.5; }
.spec-table tr { border-bottom: 1px solid var(--line-soft); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table tr:nth-child(even) { background: var(--surface-2); }
.spec-table th { text-align: left; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); padding: 15px 22px; width: 48%; vertical-align: top; }
.spec-table td { font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 15px 22px; vertical-align: top; }
.spec-table td .unit { font-weight: 500; color: var(--ink-faint); font-size: 13px; }

.spec-aside { display: grid; gap: 14px; }
.spec-doc { background: var(--agave-deep); color: #eef3ea; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-md); }
.spec-doc .eyebrow { color: #a9d8b6; margin-bottom: 14px; }
.spec-doc .eyebrow::before { background: #a9d8b6; }
.spec-doc h3 { color: #fff; font-size: 21px; margin-bottom: 10px; }
.spec-doc p { font-size: 14px; color: rgba(238,243,234,0.82); line-height: 1.55; margin-bottom: 20px; }
.spec-doc .btn { width: 100%; }
.spec-note-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.spec-note-card b { font-size: 15px; display: block; margin-bottom: 6px; }
.spec-note-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- packaging ---------- */
.ppack { background: var(--bg-2); }
.pack-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.4vw,26px); }
.pack-card { background: var(--surface); border-radius: var(--r-lg); padding: 30px 28px; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.pack-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pack-ic { font-family: var(--font-serif); font-style: italic; font-size: 34px; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: 18px; }
.pack-card h3 { font-size: 21px; margin-bottom: 7px; }
.pack-card .pack-w { font-size: 14px; font-weight: 600; color: var(--agave); margin-bottom: 12px; }
.pack-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- FAQ ---------- */
.pfaq-in { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px,5vw,64px); align-items: start; }
.pfaq-intro .eyebrow { margin-bottom: 18px; }
.pfaq-intro h2 { margin-bottom: 18px; }
.pfaq-intro .lede { margin-bottom: 24px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: var(--agave-line); box-shadow: var(--shadow-md); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; font-size: 17px; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--agave-line); display: grid; place-items: center; color: var(--agave); position: relative; transition: transform .3s ease, background .25s; }
.faq-q-ic::before, .faq-q-ic::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq-q-ic::before { width: 12px; height: 2px; }
.faq-q-ic::after { width: 2px; height: 12px; transition: transform .3s ease; }
.faq-item[open] .faq-q-ic { background: var(--agave-soft); }
.faq-item[open] .faq-q-ic::after { transform: scaleY(0); }
.faq-a { padding: 0 24px 24px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 64ch; }
.faq-a strong { color: var(--agave-deep); }

/* ---------- nav dropdown (products menu) ---------- */
.has-drop { position: relative; }
.drop-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.drop-trigger .caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .25s; opacity: .7; }
.has-drop:hover .drop-trigger .caret { transform: rotate(225deg); margin-top: 1px; }
.drop-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 230px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 60; }
.has-drop:hover .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.drop-menu a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: var(--r-sm); transition: background .18s; }
.drop-menu a:hover { background: var(--surface-2); }
.drop-menu a b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.drop-menu a small { font-size: 12px; color: var(--ink-faint); }
.drop-menu a::after { content: none; }

/* ---------- back-to-products strip on index products ---------- */
.prod-card.is-link { cursor: pointer; }

/* ---------- symmetric applications (2 rows of 3) ---------- */
.apply-grid.cols-3 { grid-template-columns: repeat(3,1fr); }

/* ---------- DELIVERY / WAREHOUSE ---------- */
.delivery-in { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px,5vw,64px); align-items: center; }
.delivery-copy .eyebrow { margin-bottom: 18px; }
.delivery-copy h2 { margin-bottom: 18px; }
.delivery-copy .lede { margin-bottom: 28px; }
.delivery-now { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 100px;
  background: var(--agave-soft); border: 1px solid var(--agave-line); color: var(--agave-deep); font-weight: 600; font-size: 14.5px; }
.delivery-now i { width: 9px; height: 9px; border-radius: 50%; background: #3fae6a; box-shadow: 0 0 0 0 rgba(63,174,106,0.55); animation: pulse 2s infinite; flex: none; }
.delivery-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.delivery-now.gold { background: var(--gold-soft); border-color: #e6cd8f; color: var(--gold-deep); }
.delivery-now.gold i { background: var(--gold); box-shadow: none; animation: none; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 24px 22px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
.dcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.dc-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--gold-soft); color: var(--gold-deep); font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 700; }
.dcard b { font-size: 16.5px; display: block; margin-bottom: 6px; }
.dcard p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 980px) {
  .delivery-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .delivery-grid { grid-template-columns: 1fr; }
  .apply-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- distributor letter (trust section) ---------- */
.trust-photo.letter-figure { aspect-ratio: auto; background: #f4ede1; }
.trust-photo.letter-figure a { display: block; line-height: 0; }
.trust-photo.letter-figure img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }
.trust-photo.letter-figure figcaption { background: linear-gradient(transparent, rgba(18,32,24,0.82)); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .phero-in, .pdesc-in, .spec-wrap, .pfaq-in { grid-template-columns: 1fr; }
  .phero-visual { max-width: 440px; margin: 6px auto 0; }
  .phero-badge.b-gi { right: 0; } .phero-badge.b-org { left: 0; }
  .pack-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .drop-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }
}
@media (max-width: 560px) {
  .phero-stats { flex-wrap: wrap; gap: 18px; }
  .spec-table th, .spec-table td { padding: 13px 16px; }
}