/* Page-specific: product detail, shop/facets, cart, gift finder, blog, content pages */

/* ---------- page banner (example 2 word-art style) ---------- */
.page-banner {
  background: var(--rose); position: relative; overflow: hidden;
  padding: clamp(2.4rem, 6vw, 4rem) 0; text-align: center;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/svg/daisies.svg") center/auto 190px repeat-x; opacity: 0.7;
}
.page-banner > * { position: relative; }
.page-banner .word-outline {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  font-size: clamp(0.85rem, 2vw, 1.05rem); color: var(--teal-700);
}
.page-banner .word-script {
  font-family: var(--font-script); font-size: clamp(3rem, 8vw, 5rem);
  color: var(--mauve-700); line-height: 1; display: block;
  margin: 0.2rem 0 0; font-weight: 400; /* element is an h1 — keep script styling */
}
.page-banner .banner-blurb { max-width: 40rem; margin: 0.8rem auto 0; color: var(--charcoal); }
.category-intro { max-width: 52rem; margin: 0 0 1.6rem; color: var(--text-soft); }

/* ---------- shop layout + facets ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2.2rem; align-items: start; }
.facets { position: sticky; top: calc(var(--header-h) + 1rem); }
.facet-group { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.facet-group summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 0.1rem; cursor: pointer;
  font-size: var(--step--1); font-family: var(--font-body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-700);
}
.facet-group summary::-webkit-details-marker { display: none; }
.facet-group summary svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s; }
.facet-group[open] summary svg { transform: rotate(180deg); }
.facet-group__body { padding: 0 0.1rem 0.9rem; }
.facets #clearFilters { margin-top: 1.1rem; }
.facet { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; font-size: 0.92rem; }
.facet input { accent-color: var(--mauve-700); width: 17px; height: 17px; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.shop-toolbar .result-count { font-size: var(--step--1); color: var(--text-soft); }
.shop-toolbar select { padding: 0.55rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); margin-left: auto; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.active-filters .chip { display: inline-flex; align-items: center; gap: 0.4rem; }
.active-filters .chip button { border: none; background: none; padding: 0; display: flex; color: inherit; }
.active-filters .chip svg { width: 12px; height: 12px; }
.facet-toggle { display: none; }

/* ---------- product page ---------- */
.product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6rem; align-items: start; }
.woocommerce-product-gallery { position: relative; }
.gallery-main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1; background: var(--offwhite); cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; overflow-x: auto; padding-bottom: 0.3rem; }
.gallery-thumbs button {
  flex: 0 0 74px; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  padding: 0; background: var(--offwhite); aspect-ratio: 1;
}
.gallery-thumbs button.active { border-color: var(--mauve-700); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product_title { margin-bottom: 0.4rem; }
.product-meta-tags { margin: 0.7rem 0 1.1rem; }
.summary .price-on-request { font-size: var(--step-0); color: var(--mauve-700); }
.summary .short-desc { color: var(--text-soft); margin: 0.9rem 0 1.3rem; }
.qty-row { display: flex; gap: 0.8rem; align-items: stretch; margin: 1.1rem 0; flex-wrap: wrap; }
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty-stepper button { width: 44px; height: 44px; border: none; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.qty-stepper button svg { width: 16px; height: 16px; }
.qty-stepper input { width: 52px; text-align: center; border: none; font-weight: 600; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.product-actions { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.2rem 0; }
.scripture-card {
  margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-left: 4px solid var(--gold);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head); font-style: italic; font-size: 1.08rem;
}
.scripture-card cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700); margin-top: 0.4rem; }
.share-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
.share-row .muted { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(40, 32, 30, 0.9); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.lightbox .iconbtn { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.15); color: #fff; }
.lightbox .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); color: #fff; }
.lightbox .lightbox-prev { left: 1rem; }
.lightbox .lightbox-next { right: 1rem; }

/* ---------- cart page ---------- */
.cart-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.4rem; align-items: start; }
.cart-line { display: grid; grid-template-columns: 90px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 90px; height: 90px; border-radius: 12px; object-fit: cover; }
.cart-line .cl-name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.cart-line .cl-name a { color: var(--charcoal); }
.cart-line .cl-remove { border: none; background: none; color: var(--rust-700); display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--step--1); padding: 0.3rem 0; }
.cart-line .cl-remove svg { width: 15px; height: 15px; }
.order-panel { position: sticky; top: calc(var(--header-h) + 1rem); }
.order-panel .card { padding: 1.4rem; }
.fulfilment-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; }
.fulfilment-opts label {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em;
}
.fulfilment-opts input { accent-color: var(--mauve-700); }
.fulfilment-opts label:has(input:checked) { border-color: var(--mauve-700); background: var(--salmon); }
.fulfilment-opts svg { width: 20px; height: 20px; color: var(--teal-700); }
.cart-note { font-size: var(--step--1); color: var(--text-soft); margin: 0.8rem 0; }
.cart-empty { text-align: center; padding: 4rem 1rem; }
.cart-empty svg { width: 60px; height: 60px; color: var(--gold); margin: 0 auto 1rem; }

/* ---------- gift finder ---------- */
.finder { max-width: 760px; margin: 0 auto; }
.finder__progress { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; }
.finder__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.finder__dot.active { background: var(--mauve-700); }
.finder__step { display: none; }
.finder__step.active { display: block; }
.finder__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.9rem; margin: 1.6rem 0; }
.finder__tile {
  padding: 1.2rem 0.8rem; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-align: center; font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 600; transition: all 0.15s;
}
.finder__tile:hover { border-color: var(--mauve); transform: translateY(-2px); }
.finder__tile.selected { border-color: var(--mauve-700); background: var(--salmon); }
.finder__nav { display: flex; justify-content: space-between; margin-top: 1.4rem; }
.finder__results { margin-top: 2rem; }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.6rem; }
.post-card { overflow: hidden; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card .post-body { padding: 1.2rem 1.3rem 1.4rem; }
.post-card .post-title { font-size: 1.3rem; margin-bottom: 0.4rem; }
.post-card .post-title a { color: var(--charcoal); }
.post-card .post-meta { font-size: var(--step--1); color: var(--text-soft); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.post-content { max-width: 46rem; margin: 0 auto; }
.post-content h2 { margin: 1.8rem 0 0.6rem; }
.post-content p { margin-bottom: 1.1rem; }
.post-content ul { margin: 0 0 1.1rem 1.4rem; }

/* ---------- content pages ---------- */
.page-content { max-width: 46rem; margin: 0 auto; }
.page-content h2 { margin: 1.6rem 0 0.5rem; font-size: var(--step-2); }
.page-content h3 { margin: 1.4rem 0 0.4rem; font-size: var(--step-1); }
.page-content p, .page-content ul { margin-bottom: 1rem; }
.page-content ul { padding-left: 1.4rem; }
.open-note {
  border: 1.5px dashed var(--gold); background: var(--offwhite); border-radius: 12px;
  padding: 0.9rem 1.1rem; font-size: var(--step--1); color: var(--text-soft); margin: 1rem 0;
}

/* ---------- styleguide ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.sg-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.sg-swatch .sw { height: 74px; }
.sg-swatch .sw-label { padding: 0.5rem 0.7rem; font-size: 0.72rem; background: #fff; }
.sg-block { margin-bottom: 2.6rem; }
.sg-block > h3 { margin-bottom: 0.9rem; }

/* ---------- newsletter ---------- */
.newsletter-form { display: flex; gap: 0.6rem; max-width: 460px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 0.85rem 1.2rem; border-radius: var(--radius-pill); border: 1.5px solid var(--gold); }
.newsletter-form input:focus { border-color: var(--mauve); outline: none; }

/* ---------- instagram strip ---------- */
.insta-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; }
.insta-strip a { border-radius: 12px; overflow: hidden; aspect-ratio: 1; position: relative; }
.insta-strip picture { display: contents; }
.insta-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.insta-strip a:hover img { transform: scale(1.07); }
.insta-strip a::after {
  content: ""; position: absolute; inset: 0; background: rgba(58,58,58,0); transition: background 0.2s;
}
.insta-strip a:hover::after { background: rgba(58,58,58,0.18); }

/* ---------- 404 ---------- */
.page-404 { text-align: center; padding: 5rem 0; }
.page-404 .script { font-size: clamp(3rem, 9vw, 5.5rem); display: block; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .product-layout, .cart-layout { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .facets { position: static; display: none; }
  .facets.open { display: block; }
  .facet-toggle { display: inline-flex; }
  .insta-strip { grid-template-columns: repeat(3, 1fr); }
}