/* ======================================================================
   Glide Market — inner pages (brand · product · blog · contact · about)
   Built on the same tokens/components as style.css; loaded after it.
   ====================================================================== */

/* ========================= PAGE HERO ========================= */
.page-hero { position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden; /* the decorative watermark may bleed past the edges */
  grid-template-columns: minmax(0, 1fr); /* keep the auto track from growing to the text's max-content on phones */
  min-block-size: clamp(360px, 52vh, 560px); padding-block: 120px clamp(40px, 6vh, 72px); }
.page-hero.compact { min-block-size: clamp(300px, 40vh, 430px); }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,15,16,.62) 0%, rgba(14,15,16,.25) 30%, rgba(14,15,16,.55) 70%, var(--bg) 100%); }
.page-hero.no-img { background:
    radial-gradient(90% 120% at 50% -20%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.page-hero.no-img::after { content: none; }
.page-hero-inner { display: grid; gap: .9rem; justify-items: start;
  grid-template-columns: minmax(0, 1fr); } /* auto track would grow to the lede's max-content (62ch) and overflow phones */
.page-hero-inner h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.page-hero-inner .lede { max-inline-size: 62ch; }
.page-hero-inner .hero-actions { justify-content: flex-start; margin-block-start: .6rem; }

/* ========================= BREADCRUMBS ======================= */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55em;
  font-size: .74rem; letter-spacing: .08em; color: var(--muted-2); }
.breadcrumbs a { color: var(--muted); transition: color .3s; }
.breadcrumbs a:hover { color: var(--gold-soft); }
.breadcrumbs .sep { color: var(--line-2); }
.breadcrumbs [aria-current] { color: var(--gold-soft); }

/* ========================= PROSE (WYSIWYG) =================== */
.prose { max-inline-size: 760px; margin-inline: auto; color: var(--text);
  font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.9; display: grid; gap: 1.15em; }
.prose h2, .prose h3 { margin-block-start: .7em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose a { color: var(--gold-soft); border-block-end: 1px solid rgba(201,162,39,.35); }
.prose a:hover { border-color: var(--gold); }
.prose ul { list-style: none; display: grid; gap: .55em; padding-inline-start: 0; }
.prose ul li { position: relative; padding-inline-start: 1.5em; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: .2em; inset-block-start: .68em;
  inline-size: .55em; block-size: .55em; border-radius: 50%; background: var(--gold-grad); opacity: .8; }
.prose ol { padding-inline-start: 1.4em; display: grid; gap: .55em; }
.prose blockquote { border-inline-start: 2px solid var(--gold); padding-inline-start: 1.2em;
  font-family: var(--serif); font-style: italic; font-size: 1.15em; color: var(--text); }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose figure { margin: 0; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: .92em; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6em .8em; text-align: start; }
.prose th { color: var(--gold-soft); background: var(--surface); }
.prose-band { background: var(--bg); }
.prose-band .section-head { margin-block-end: clamp(1.4rem, 3vw, 2.2rem); }

/* ========================= FEATURE CARDS ===================== */
.feature-band { background: var(--bg-2); }
.feature-band.alt { background: var(--bg); }
.feature-grid { display: grid; gap: clamp(.9rem, 2vw, 1.4rem); grid-template-columns: 1fr;
  margin-block-start: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 720px){ .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px){ .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { position: relative; padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: grid; gap: .5rem; align-content: start;
  transition: transform .5s var(--ease), border-color .5s var(--ease); }
.feature-card:hover { transform: translateY(-6px); border-color: var(--gold-deep); }
.feature-card h3 { font-size: 1.2rem; }
.feature-card p { color: var(--muted); font-size: .92rem; }
.feature-mark { inline-size: 34px; block-size: 34px; border-radius: 10px; background: var(--gold-grad);
  display: grid; place-items: center; margin-block-end: .3rem; }
.feature-mark::after { content: ""; inline-size: 12px; block-size: 7px;
  border-inline-start: 2.5px solid #1A1407; border-block-end: 2.5px solid #1A1407;
  transform: rotate(-45deg) translateY(-1px); }

/* ========================= PRODUCTS on brand page ============ */
.products-band { background: var(--bg); border-block-start: 1px solid var(--line); }
.product-grid.detail-grid { margin-block-start: clamp(1.6rem, 4vw, 2.6rem); }
.product-grid.detail-grid .product-card h3 { font-size: 1.18rem; }
.product-grid.detail-grid .product-card p { font-size: .88rem; }
.card-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  padding: .3em .8em; border-radius: 100px; font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft);
  background: rgba(14,15,16,.72); border: 1px solid rgba(201,162,39,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-block-start: .35rem; }
.card-meta .price { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--gold-soft); }
.product-card .thumb { position: relative; }

/* category filter */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-block-start: clamp(1.2rem, 3vw, 2rem); }
.filter-btn { padding: .55em 1.3em; border-radius: 100px; border: 1px solid var(--line-2);
  color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  transition: .3s var(--ease); }
.filter-btn:hover { color: var(--gold-soft); border-color: var(--gold-deep); }
.filter-btn.is-active { background: var(--gold-grad); color: #1A1407; border-color: transparent; }
.product-card.is-hidden { display: none; }

/* coming soon */
.coming-soon { text-align: center; padding: clamp(2.4rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem);
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg);
  background: radial-gradient(80% 120% at 50% 0%, rgba(201,162,39,.08), transparent 65%);
  margin-block-start: clamp(1.6rem, 4vw, 2.6rem); display: grid; gap: .8rem; justify-items: center; }

/* ========================= PRODUCT HERO ====================== */
.product-hero { padding-block: 118px clamp(36px, 6vh, 64px);
  background:
    radial-gradient(80% 100% at 50% -10%, rgba(201,162,39,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-block-end: 1px solid var(--line); }
.product-hero .breadcrumbs { margin-block-end: clamp(1.4rem, 3vw, 2.2rem); }
.product-hero-grid { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px){ .product-hero-grid { grid-template-columns: 1.05fr .95fr; } }

.product-media { display: grid; gap: .7rem; }
.main-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(85% 120% at 50% 0%, rgba(201,162,39,.10), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--surface)); }
.main-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.main-shot .ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem;
  color: var(--muted-2); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.main-shot .ph::before { content: ""; inline-size: 34px; block-size: 34px; opacity: .55; background: var(--gold-grad);
  -webkit-mask: url(../img/favicon-192.png) center/contain no-repeat; mask: url(../img/favicon-192.png) center/contain no-repeat; }
.thumb-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.thumb-btn { inline-size: 84px; aspect-ratio: 16 / 10; overflow: hidden; padding: 0;
  border-radius: 10px; border: 1px solid var(--line); opacity: .75;
  transition: .3s var(--ease); }
.thumb-btn img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb-btn:hover, .thumb-btn.is-active { opacity: 1; border-color: var(--gold); }

.product-info { display: grid; gap: .9rem; align-content: start; }
.product-info h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.by-brand { color: var(--muted-2); font-size: .85rem; }
.by-brand a { color: var(--gold-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { padding: .34em .95em; border-radius: 100px; font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line-2); }
.chip-gold { color: var(--gold-soft); border-color: rgba(201,162,39,.45);
  background: rgba(201,162,39,.08); }

.buy-box { margin-block-start: .6rem; padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); display: grid; gap: .9rem; }
.price-tag { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.buy-box .hero-actions { justify-content: flex-start; }
.buy-note { color: var(--muted-2); font-size: .78rem; }

/* ========================= FAQ =============================== */
.faq-band { background: var(--bg-2); }
.faq-list { max-inline-size: 760px; margin-inline: auto; display: grid; gap: .7rem;
  margin-block-start: clamp(1.6rem, 4vw, 2.4rem); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; transition: border-color .4s; }
.faq-item[open] { border-color: var(--gold-deep); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: .98rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; inline-size: 18px; block-size: 18px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; background: var(--gold-soft); transition: transform .35s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-answer { padding: 0 1.25rem 1.2rem; color: var(--muted); line-height: 1.85; }

/* ========================= CTA / RELATED ===================== */
.page-cta { background:
    radial-gradient(90% 130% at 50% 120%, rgba(201,162,39,.14), transparent 60%),
    var(--bg);
  text-align: center; padding-block: clamp(56px, 9vh, 100px); border-block-start: 1px solid var(--line); }
.page-cta h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); }
.page-cta .hero-actions { justify-content: center; }
.related-band { background: var(--bg-2); border-block-start: 1px solid var(--line); }
.showcase-more { text-align: center; margin-block-start: clamp(1.2rem, 3vw, 1.8rem); }

/* ========================= BLOG ============================== */
.post-cover { background: var(--bg); }
.post-cover-img { max-inline-size: 980px; margin-inline: auto; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--line); margin-block-start: clamp(1.4rem, 3vw, 2.2rem); }
.post-cover-img img { inline-size: 100%; block-size: auto; }
.post-nav-band { padding-block: 0 var(--section-y); }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-block-start: 1.4rem; border-block-start: 1px solid var(--line); }
.pagination { margin-block-start: clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.pagination .nav-links { display: inline-flex; gap: .4rem; }
.pagination .page-numbers { min-inline-size: 40px; padding: .5em .8em; border-radius: 10px;
  border: 1px solid var(--line-2); color: var(--muted); font-size: .85rem; display: inline-grid; place-items: center; }
.pagination .page-numbers.current { background: var(--gold-grad); color: #1A1407; border-color: transparent; }
.pagination a.page-numbers:hover { color: var(--gold-soft); border-color: var(--gold-deep); }
.article-card .thumb { position: relative; display: block; background: var(--surface-2); }

/* ========================= CONTACT =========================== */
.contact-band { background: var(--bg); }
.contact-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px){ .contact-grid { grid-template-columns: .9fr 1.1fr; } }
.contact-list { display: grid; gap: 1rem; margin-block-start: 1.4rem; }
.contact-list li { display: grid; gap: .2rem; padding: 1rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.contact-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.contact-list a { color: var(--gold-soft); }
.contact-form .wpcf7, .contact-fallback { padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.contact-form input:not([type="submit"]), .contact-form textarea {
  inline-size: 100%; padding: .9em 1.1em; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  color: var(--text); font: inherit; margin-block-end: .9rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form input[type="submit"] { display: inline-flex; padding: .95em 1.9em;
  border-radius: 100px; background: var(--gold-grad); color: #1A1407;
  font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  border: 0; cursor: pointer; transition: .35s var(--ease); }
.contact-form input[type="submit"]:hover { transform: translateY(-2px); }
.contact-fallback { display: grid; gap: 1.2rem; justify-items: start; }

/* ========================= FOOTER EXTRAS ===================== */
.footer-contact { margin-block-start: .8rem; font-size: .88rem; }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--gold-soft); }
.footer-col ul { display: grid; gap: .7rem; }

/* ========================= NEWSLETTER EMBED ================== */
.newsletter-embed { max-inline-size: 520px; margin-inline: auto; margin-block-start: 2rem; }
.newsletter-embed input:not([type="submit"]) { inline-size: 100%; padding: .95em 1.3em;
  border-radius: 100px; background: rgba(255,255,255,.06); border: 1px solid var(--line-2);
  color: var(--text); margin-block-end: .8rem; }
.newsletter-embed input[type="submit"] { padding: .95em 1.9em; border-radius: 100px;
  background: var(--gold-grad); color: #1A1407; border: 0; font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

/* ========================= SMALL SCREENS ===================== */
@media (max-width: 600px) {
  .page-hero { min-block-size: clamp(300px, 44vh, 420px); }
  .thumb-btn { inline-size: 68px; }
  .buy-box .hero-actions { flex-direction: column; align-items: stretch; }
  .buy-box .btn { justify-content: center; }
  .post-nav { flex-direction: column; }
}

/* ========================= NAV: current page ================= */
.nav-menu a.is-current { color: var(--text); }
.nav-menu a.is-current::after { inline-size: 100%; }

/* ========================= BRAND HERO extras ================= */
/* oversized outlined serif letter, anchored to the end side of the hero */
.page-hero .watermark { position: absolute; z-index: -1; inset-block-end: -.14em; inset-inline-end: -.04em;
  font-family: var(--serif); font-weight: 700; font-size: clamp(11rem, 26vw, 22rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(201,162,39,.14); pointer-events: none; user-select: none; }
.page-hero .chip-row { margin-block-start: .2rem; }
.page-hero .breadcrumbs { margin-block-end: .4rem; }

/* ========================= MISSION / GOAL pillars ============ */
.pillar-band { background: var(--bg-2); border-block: 1px solid var(--line); }
.duo-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr;
  margin-block-start: clamp(1.8rem, 4vw, 2.8rem); }
@media (min-width: 820px){ .duo-grid { grid-template-columns: 1fr 1fr; } }
.pillar { position: relative; overflow: hidden; padding: clamp(1.8rem, 3.4vw, 2.8rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: grid; gap: .85rem; align-content: start;
  transition: transform .5s var(--ease), border-color .5s var(--ease); }
.pillar:hover { transform: translateY(-6px); border-color: var(--gold-deep); }
.pillar::before { content: attr(data-mark); position: absolute; inset-block-start: -.28em; inset-inline-end: .02em;
  font-family: var(--serif); font-weight: 700; font-size: 8rem; line-height: 1;
  color: rgba(201,162,39,.08); pointer-events: none; }
.pillar h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); max-inline-size: 22ch; }
.pillar p { color: var(--muted); font-size: clamp(.95rem, 1.25vw, 1.04rem); line-height: 1.9; max-inline-size: 52ch; }

/* ========================= PRODUCT CARD meta chips =========== */
.card-meta .chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.card-meta .chip { font-size: .6rem; padding: .26em .75em; }

/* exactly four feature cards → a single balanced row on wide screens */
@media (min-width: 1020px){ .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* grid+justify-items:start makes hero children max-content → cap so long
   text never pushes past small screens */
.page-hero-inner > * { max-inline-size: 100%; }

/* ========================= TIMELINE (founder · story) ======== */
.timeline-band { background: var(--bg-2); border-block: 1px solid var(--line); }
.timeline { position: relative; max-inline-size: 720px; margin-inline: auto;
  display: grid; gap: clamp(1.6rem, 3.4vw, 2.4rem); padding-inline-start: 2.2rem;
  margin-block-start: clamp(1.8rem, 4vw, 2.8rem); }
.timeline::before { content: ""; position: absolute; inset-block: .35em; inset-inline-start: .48rem;
  inline-size: 2px; background: linear-gradient(180deg, var(--gold) 0%, rgba(201,162,39,.35) 60%, transparent 100%); }
.tl-item { position: relative; display: grid; gap: .3rem; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: -2.2rem; inset-block-start: .32em;
  inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--gold-grad);
  box-shadow: 0 0 0 5px rgba(201,162,39,.14); }
.tl-item .tl-kicker { font-size: .68rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-soft); }
.tl-item h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.tl-item p { color: var(--muted); font-size: .96rem; line-height: 1.85; max-inline-size: 58ch; }

/* ========================= NUMBERED STEPS ==================== */
.step-num { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ========================= FORMS (prototype) ================= */
.contact-form { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface); }
.contact-form label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); margin-block-end: .45rem; }
.contact-form select { inline-size: 100%; padding: .9em 1.1em; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--text);
  font: inherit; margin-block-end: .9rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--muted) 50%, transparent 60%),
                    linear-gradient(135deg, transparent 49%, var(--muted) 50%, transparent 60%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat; }
[dir="rtl"] .contact-form select { background-position: 20px 55%, 14px 55%; }
.contact-form select:focus { outline: none; border-color: var(--gold); }
.contact-form option { background: var(--surface); color: var(--text); }
.contact-form textarea { min-block-size: 140px; resize: vertical; }
.contact-form .btn { border: 0; cursor: pointer; }
.form-note { color: var(--muted-2); font-size: .78rem; margin-block-start: .8rem; }

/* ========================= QA SHOT MODE (?shot) ============== */
.shot-mode .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.shot-mode .algo-hero { min-block-size: 760px !important; }
.shot-mode .stars.tw, .shot-mode .spin { animation: none !important; }