/* Shared building blocks reused across the homepage, shop, and product pages. */

/* Generic "kicker + title" section header with an optional right-aligned link. */
.pf-section-header {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 25px;
}

.pf-section-header h2 { color: var(--text); font-size: clamp(26px, 3vw, 34px); margin: 0; }

@media (max-width: 640px) {
    .pf-section-header { align-items: start; flex-direction: column; gap: 13px; }
}

/* Product card: image, price, rating, add-to-cart. Used by the homepage grids,
   the shop/category archive (woocommerce/content-product.php), and related products. */
.pf-product-grid,
.woocommerce ul.products {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

/* Motta (parent theme, loaded after this theme's CSS) ships its own
   `ul.products.columns-4 li.product { width: 25% }` / `.mobile-col-2 { width: 50% }`
   rules for WooCommerce's old float-based grid. With ul.products overridden to
   CSS Grid above, those percentages apply *inside* our grid cell instead of the
   old float container — shrinking every card to a quarter (or half) of its
   column and leaving the rest of the row blank, which is what read as a
   "crisscross" misaligned shop grid. !important is deliberate here: it's the
   only thing that reliably wins against a same-specificity rule from a
   later-loaded stylesheet we don't control the enqueue order of. */
.woocommerce ul.products li.product { width: 100% !important; }

.pf-product-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    float: none;
    height: 100%;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    transition: box-shadow 220ms ease, transform 220ms ease;
    width: auto;
}

.pf-product-card:hover { box-shadow: 0 16px 30px rgba(43, 30, 120, 0.14); transform: translateY(-4px); }
.pf-product-card:focus-within { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2), 0 16px 30px rgba(43, 30, 120, 0.14); }

.pf-product-card__media { aspect-ratio: 1 / 1; background: #f6f3f5; overflow: hidden; position: relative; }
/* :not() here matters: the wishlist button (WCBoost Wishlist's markup, see
   woocommerce/loop/add-to-wishlist.php) is also a direct <a> child of
   .pf-product-card__media. Without excluding it, this rule's higher
   specificity (class + element vs. .pf-product-card__wishlist's single
   class) stretched the 36px heart icon to height:100% of the image box —
   a full-height bar instead of a small circle. */
.pf-product-card__media > a:not(.pf-product-card__wishlist) { display: block; height: 100%; }
.pf-product-card__media img { height: 100%; margin: 0; object-fit: cover; transition: transform 300ms ease; width: 100%; }
.pf-product-card:hover .pf-product-card__media img { transform: scale(1.06); }

.pf-product-card__badge {
    background: var(--primary);
    border-radius: 0 0 7px 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    left: 0;
    padding: 6px 9px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
}

.pf-product-card__wishlist {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 0;
    border-radius: 50%;
    color: var(--text);
    display: inline-flex;
    font-size: 16px;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    width: 36px;
}

.pf-product-card__wishlist:hover,
.pf-product-card__wishlist[aria-pressed="true"] { background: var(--primary); color: #fff; transform: scale(1.08); }
.pf-product-card__wishlist:focus-visible { outline: 3px solid rgba(var(--primary-rgb), 0.35); outline-offset: 2px; }

/* Higher specificity than the WCBoost Wishlist plugin's own ".wcboost-wishlist-button.button"
   base styles, so its default button chrome never leaks through our circular icon design.
   Both states are repeated here (not just the default) so this doesn't win the specificity
   tie against the hover/pressed rule above and silently force the icon invisible on hover. */
.pf-product-card__media > .pf-product-card__wishlist {
    background: rgba(255, 255, 255, 0.94);
    border: 0;
    color: var(--text);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.pf-product-card__media > .pf-product-card__wishlist:hover,
.pf-product-card__media > .pf-product-card__wishlist[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
}

.pf-product-card__wishlist .wcboost-wishlist-button__text { display: none; }
.pf-product-card__wishlist .wcboost-wishlist-button__icon { display: none; }

/* Motta's own heart SVG (wrapped in .motta-svg-icon, not the WCBoost markup
   above) renders as a blank filled circle without this: the global
   `svg { max-width: 100% }` reset in layout.css resolves that percentage
   against this button's flex-item container, which has an indefinite width,
   so Chromium collapses it to max-width:0 and the icon disappears entirely. */
.pf-product-card__wishlist svg { max-width: none; width: 18px; height: 18px; }

/* flex column (not grid) so .pf-product-card__cart can be pinned to the
   bottom via margin-top:auto below — otherwise a card without a rating row
   (many products have none) sits its button higher than a card with one,
   staggering every row of "Select options" buttons out of alignment. */
.pf-product-card__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 15px; }
.pf-product-card__title { font-size: 15px; line-height: 1.4; margin: 0; overflow-wrap: break-word; }
.pf-product-card__title a:hover { color: var(--primary); }

.pf-product-card__badge--discount { background: var(--secondary, var(--primary)); }
.pf-product-card__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; min-height: 25px; }
.pf-product-card__price--muted ins { color: var(--text); font-size: 14px; font-weight: 600; }
.pf-product-card__price del,
.pf-product-card .price del,
.pf-product-card__price ins,
.pf-product-card .price ins { text-decoration: none; }
.pf-product-card__price del { color: var(--text-light); font-size: 13px; }
.pf-product-card__price ins { color: var(--primary); font-size: 16px; font-weight: 700; }
.pf-product-card .price { color: var(--primary); font-weight: 700; }

.pf-product-card__rating,
.star-rating-row { align-items: center; color: #f0a400; display: flex; font-size: 13px; gap: 5px; min-height: 20px; }
.pf-product-card__rating .star-rating { font-size: 13px; }
.pf-product-card__reviews { color: var(--text-light); font-size: 12px; }

/* WooCommerce star ratings: Motta (the parent theme) disables WooCommerce's own
   stylesheet, which is where the star icon font normally comes from, so ratings
   rendered as blank space. Rebuilt here with our self-hosted Font Awesome instead. */
.star-rating {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    height: 1em;
    letter-spacing: 2px;
    line-height: 1;
    overflow: hidden;
    position: relative;
    width: 5.4em;
}

.star-rating::before {
    color: #e2dfe6;
    content: "\f005\f005\f005\f005\f005";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}

.star-rating span {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.star-rating span::before {
    color: #f0a400;
    content: "\f005\f005\f005\f005\f005";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}

.pf-product-card__cart {
    align-items: center;
    background: var(--text);
    border-radius: 7px;
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: space-between;
    margin-top: auto;
    overflow: hidden;
    padding: 11px 13px;
}

.pf-product-card__cart i { transition: transform 180ms ease; }
.pf-product-card__cart:hover { background: var(--primary); color: #fff; }
.pf-product-card__cart:hover i { transform: translateX(4px); }
.pf-product-card__cart:focus-visible { outline: 3px solid rgba(var(--primary-rgb), 0.35); outline-offset: 2px; }
.pf-product-card__cart.loading { opacity: 0.7; pointer-events: none; }

@media (max-width: 980px) {
    .pf-product-grid,
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* Two columns even on phones (the dense catalog-browse pattern most
       shoppers expect) rather than one giant full-width card at a time. */
    .pf-product-grid,
    .woocommerce ul.products { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pf-product-card__content { gap: 8px; padding: 11px; }
    .pf-product-card__title { font-size: 13px; }
    .pf-product-card__price ins { font-size: 14px; }
    .pf-product-card__cart { font-size: 12px; padding: 9px 11px; }
}

/* Badges (sale / new / bestseller tags outside the product card, e.g. list headers). */
.pf-badge {
    background: var(--surface-tint);
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    text-transform: uppercase;
}

.pf-badge-dark { background: var(--surface-dark); color: #fff; }
.pf-badge-gold { background: #fff4cd; color: #a66a00; }

/* Quantity stepper, shared by product cards and the single-product page. */
.pf-qty-stepper { align-items: center; border: 1px solid var(--border); border-radius: 8px; display: inline-flex; }
.pf-qty-stepper button { background: transparent; border: 0; color: var(--text); font-size: 16px; height: 44px; width: 40px; }
.pf-qty-stepper button:hover { color: var(--primary); }
.pf-qty-stepper input { border: 0; height: 44px; text-align: center; width: 44px; }

/* Empty state, reused wherever a query can legitimately return nothing. */
.pf-empty-state {
    color: var(--text-light);
    padding: 32px 0;
    text-align: center;
}

/* Shared form fields (newsletter, checkout extras). */
.pf-field { display: grid; gap: 6px; text-align: left; }
.pf-field label { color: var(--text); font-size: 13px; font-weight: 600; }
.pf-input {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    min-height: 46px;
    padding: 0 14px;
    width: 100%;
}
.pf-input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); outline: 0; }

.pf-form-message { border-radius: 8px; font-size: 13px; padding: 10px 14px; }
.pf-form-message-success { background: #e9f9ee; color: #1a7d3d; }
.pf-form-message-error { background: #fdeaea; color: #b3261e; }

/* Horizontal slider (best-sellers, shop-the-look, reviews). Falls back to a
   plain scrollable row with no JS; assets/js/slider.js only adds the
   prev/next buttons' click behaviour and hides them at the scroll ends. */
.pf-slider { position: relative; }

.pf-slider__track {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0 2px 6px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pf-slider__track::-webkit-scrollbar { display: none; }
.pf-slider__track > * { flex: 0 0 clamp(210px, 24vw, 270px); scroll-snap-align: start; }

.pf-slider__nav {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: absolute;
    top: 38%;
    width: 42px;
    z-index: 2;
}

.pf-slider__nav:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-slider__prev { left: -10px; }
.pf-slider__next { right: -10px; }
.pf-slider__nav[hidden] { display: none; }

@media (max-width: 780px) {
    .pf-slider__nav { display: none; }
}

/* Review card, used inside the reviews slider. */
.pf-review-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.pf-review-card__rating .star-rating { color: #f0a400; font-size: 14px; }
.pf-review-card__excerpt { color: var(--text); flex: 1; line-height: 1.6; margin: 0; }
.pf-review-card__meta { display: flex; flex-direction: column; gap: 3px; }
.pf-review-card__author { color: var(--text); font-size: 13px; font-weight: 700; }
.pf-review-card__meta a { color: var(--text-light); font-size: 12px; }
.pf-review-card__meta a:hover { color: var(--primary); }