/*
Theme Name: Prabhu Prasad
Theme URI: https://prabhuprasad.store/
Author: Prabhu Prasad
Description: Block theme for the official store of Shree Salangpur Hanumanji Mandir. Cream, ink-brown and sindoor-red storefront built for WooCommerce.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prabhu-prasad
Tags: e-commerce, full-site-editing, block-patterns, custom-colors, custom-logo
*/

/* ---------- primitives ---------- */
.pp-eyebrow {
  font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
@keyframes pp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.pp-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(249, 232, 220, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(38, 26, 22, 0.12);
}
.pp-header a { color: var(--wp--preset--color--contrast); }
.pp-nav a {
  padding: 13px 0;
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.pp-nav a:hover { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); }

/* ---------- hero ---------- */
.pp-hero { position: relative; overflow: hidden; }
.pp-hero, .pp-hero :where(h1, p, .pp-eyebrow) { color: var(--wp--preset--color--base); }
.pp-hero .pp-eyebrow { color: var(--wp--preset--color--accent-3); }
.pp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 151, 73, 0.16);
  border: 1px solid rgba(255, 151, 73, 0.5);
  padding: 7px 14px;
}

/* ---------- service strip ---------- */
.pp-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(38, 26, 22, 0.12);
  border: 1px solid rgba(38, 26, 22, 0.12);
}
.pp-services > * {
  background: var(--wp--preset--color--base);
  padding: 22px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pp-services__num {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--accent);
  border: 1px solid rgba(191, 32, 40, 0.4);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* ---------- product cards (WooCommerce grids) ---------- */
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
  gap: 26px;
}
.wc-block-grid__product,
.wp-block-post.product {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(38, 26, 22, 0.12);
  padding-bottom: 16px;
  text-align: left;
}
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
  border-radius: 14px;
  transition: transform 0.4s ease;
  /* the design plates products at 4:5; this also stops a missing image
     from collapsing the card to its intrinsic (zero) height */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wp-block-post.product:hover .wp-block-woocommerce-product-image img {
  transform: scale(1.05);
}
.wc-block-grid__product-title,
.wp-block-woocommerce-product-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.26;
  padding: 6px 16px 0;
}
.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  padding: 12px 16px 0;
}
.wc-block-grid__product-price del { font-size: var(--wp--preset--font-size--x-small); }
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link {
  margin: 14px 16px 0;
  background: transparent;
  border: 1px solid rgba(38, 26, 22, 0.26);
  color: var(--wp--preset--color--contrast);
  padding: 12px;
  width: calc(100% - 32px);
  letter-spacing: 0.22em;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}
.wc-block-grid__product-onsale {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
}

/* ---------- category circles ---------- */
/* Woo's product-categories block emits <a><img><span name></a><span count>
   as siblings inside the <li> — restyle that exact structure to read as the
   design's circle-image / name / count stack, instead of guessing a shape. */
.pp-categories .wc-block-product-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
/* real category photography, plated as circles */
.pp-categories img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 12px;
  background: var(--wp--preset--gradient--plate);
  transition: transform 0.4s ease;
}

/* ---------- footer ---------- */
.pp-footer {
  border-top: 1px solid rgba(38, 26, 22, 0.12);
  background: var(--wp--preset--color--surface-alt);
}

/* ---------- focus / selection ---------- */
:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 3px; }
::selection { background: rgba(191, 32, 40, 0.15); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .pp-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
  .pp-services { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-grid__product-image img { transition: none; }
}

/* ==========================================================================
   Shop / archive
   ========================================================================== */
.pp-shop__band {
  background: linear-gradient(150deg, var(--wp--preset--color--surface-alt), var(--wp--preset--color--base));
  border-bottom: 1px solid rgba(38, 26, 22, 0.12);
}
.pp-shop__band .wc-block-breadcrumbs,
.pp-product .wc-block-breadcrumbs {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.pp-shop__band .wc-block-breadcrumbs a { color: var(--wp--preset--color--muted); }
.pp-shop__band .wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--accent); }

.pp-shop__layout { align-items: flex-start; }
.pp-shop__sidebar { position: sticky; top: 150px; }

/* filter groups read as the design's stacked, rule-separated lists */
.pp-filters { gap: 30px; }

.pp-shop__toolbar .wc-block-product-results-count,
.pp-shop__toolbar .wc-block-catalog-sorting {
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.pp-shop__toolbar select {
  border: 1px solid rgba(38, 26, 22, 0.18);
  border-radius: 999px;
  padding: 9px 15px;
  background: transparent;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Product cards inside product-collection / related products
   ========================================================================== */
.wp-block-woocommerce-product-template {
  --pp-card-pad: 16px;
  list-style: none;
  padding: 0;
}
.wp-block-woocommerce-product-template > li {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(38, 26, 22, 0.12);
  padding-bottom: var(--pp-card-pad);
  overflow: hidden;
}
.wp-block-woocommerce-product-template > li > * {
  padding-inline: var(--pp-card-pad);
  margin-block: 0;
}
.wp-block-woocommerce-product-template > li > .wp-block-woocommerce-product-image { padding-inline: 0; }
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 14px;
  transition: transform 0.4s ease;
}
.wp-block-woocommerce-product-template > li:hover .wp-block-woocommerce-product-image img { transform: scale(1.05); }
.wp-block-woocommerce-product-template .wp-block-post-terms {
  display: block;
  margin-top: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8562a;
}
.wp-block-woocommerce-product-template .wp-block-post-terms a { color: inherit; }
.wp-block-woocommerce-product-template .wp-block-post-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  line-height: 1.26;
  margin: 6px 0 0;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price del { font-size: var(--wp--preset--font-size--x-small); }
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button { margin-top: 14px; }
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(38, 26, 22, 0.26);
  color: var(--wp--preset--color--contrast);
  padding: 11px;
  letter-spacing: 0.22em;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}
.wc-block-components-product-sale-badge {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
}

.pp-pagination .page-numbers,
.pp-pagination .wp-block-query-pagination-numbers a,
.pp-pagination .wp-block-query-pagination-numbers span {
  border: 1px solid rgba(38, 26, 22, 0.18);
  padding: 9px 15px;
  font-size: var(--wp--preset--font-size--x-small);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--muted);
}
.pp-pagination .current {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Woo's add-to-cart form, restyled to the design's pill controls */
.pp-product__info form.cart { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }

/* ==========================================================================
   Cart / checkout / account — inherit the store's shapes
   ========================================================================== */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  border-radius: 999px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--eyebrow);
}
.wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: rgba(38, 26, 22, 0.14); }
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
  border-radius: 14px;
  border-color: rgba(38, 26, 22, 0.18);
  background: var(--wp--preset--color--surface);
}

/* ==========================================================================
   Editorial pages (about, FAQ, policies)
   ========================================================================== */
.pp-facts { border-top: 1px solid rgba(38, 26, 22, 0.1); }

.pp-lede { font-family: var(--wp--preset--font-family--display); font-size: 26px; line-height: 1.5; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 781px) {
  .pp-shop__sidebar,
  .pp-product__info { position: static; }
  .pp-shop__layout,
  .pp-product__layout { gap: 30px; }
  .pp-shop__toolbar { gap: 12px; }
}

/* Woo's default sale flash is olive; the store's is sindoor red */
.woocommerce span.onsale,
.pp-product span.onsale {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border-radius: 999px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 6px 12px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}

/* product tabs */
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  border-bottom: 1px solid rgba(38, 26, 22, 0.14);
}
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wp--preset--font-family--display);
  font-size: 18px;
  font-weight: 400;
  padding: 0;
  color: var(--wp--preset--color--muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--wp--preset--color--accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel { color: var(--wp--preset--color--muted); max-width: 76ch; }

/* related products heading, whichever markup Woo emits */
.wp-block-woocommerce-related-products h2,
.related.products > h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 30px;
}

/* ==========================================================================
   Product grid columns — set explicitly so the shop matches the design's 3-up
   (Woo's own responsive class resolves to 2 in a sidebar layout)
   ========================================================================== */
.pp-shop .wp-block-woocommerce-product-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.wp-block-woocommerce-related-products .wp-block-woocommerce-product-template,
.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 1024px) {
  .pp-shop .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template,
  .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pp-shop .wp-block-woocommerce-product-template,
  .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template,
  .related.products ul.products { grid-template-columns: 1fr; }
}
/* Woo puts the count in a sibling <span>, so the row is the flex container */
.pp-families li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(38, 26, 22, 0.08);
}

/* ==========================================================================
   Mobile pass — the header search has a fixed 330px width that overflows a
   390px viewport, which was pushing the whole document sideways.
   ========================================================================== */
@media (max-width: 781px) {
  /* tighter gutters than the 40px desktop rhythm */
  body {
    --wp--style--root--padding-left: 20px;
    --wp--style--root--padding-right: 20px;
  }

  .pp-header > .wp-block-group {
    row-gap: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pp-header .wp-block-search {
    width: 100% !important;
    max-width: 100%;
    order: 3;
  }
  .pp-header .wp-block-search__input { width: 100%; min-width: 0; }

  .pp-shop__band { padding-left: 20px !important; padding-right: 20px !important; }

  /* nothing should be able to push the document sideways */
  .pp-shop__layout,
  .pp-product__layout,
  .wp-block-columns { margin-left: 0; margin-right: 0; }
}

/* a horizontal scrollbar on a storefront is always a bug, never a feature */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   Editorial pages — title band + long-form content
   ========================================================================== */
.pp-page__band {
  background: linear-gradient(150deg, var(--wp--preset--color--surface-alt), var(--wp--preset--color--base));
  border-bottom: 1px solid rgba(38, 26, 22, 0.12);
}
.pp-page__band .wc-block-breadcrumbs {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.pp-page__band .wc-block-breadcrumbs a { color: var(--wp--preset--color--muted); }
.pp-page__band .wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--accent); }

.pp-page__body :where(h2) {
  font-size: var(--wp--preset--font-size--large);
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}
.pp-page__body :where(h2):first-child { margin-top: 0; }
.pp-page__body :where(p, li) { color: var(--wp--preset--color--muted); }
.pp-page__body :where(p) strong { color: var(--wp--preset--color--contrast); }
.pp-page__body :where(a) {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pp-page__body :where(ul, ol) { padding-left: 1.1em; }
.pp-page__body :where(li) { margin-bottom: 0.5em; }
.pp-page__body .pp-lede { color: var(--wp--preset--color--contrast); margin-bottom: 1.4em; }

/* details/summary rendered as the design's accordion rows */
.wp-block-details {
  border-bottom: 1px solid rgba(38, 26, 22, 0.12);
  padding: 0;
  margin: 0;
  background: none;
}
.wp-block-details:first-of-type { border-top: 1px solid rgba(38, 26, 22, 0.12); }
.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--body);
  font-size: 18px;
  line-height: 1;
  color: var(--wp--preset--color--accent);
}
.wp-block-details[open] > summary::after { content: "−"; }
.wp-block-details[open] > summary { color: var(--wp--preset--color--accent); }
.wp-block-details > summary:hover { color: var(--wp--preset--color--accent); }
.wp-block-details > :not(summary) {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--wp--preset--color--muted);
}