/* =============================================================================
   SINGLE PRODUCT PAGE — premium storefront redesign
   =============================================================================
   Motta (the parent theme) still renders the real, working functionality on
   this page — gallery/zoom, variations, AJAX add-to-cart, wishlist/compare,
   tabs, the mobile sticky bar. Nothing here rebuilds any of that; it only
   re-skins and re-lays-out Motta's existing markup, plus one small structural
   addition: inc/single-product-buybox.php wraps price/stock/cart-form/meta
   in a `.pf-buybox` element so this stylesheet can lay it out as its own
   panel instead of one continuous column (grouping existing hook output —
   no functionality was rebuilt).

   ONE SPECIFICITY NOTE UP FRONT: every ruleset below is scoped under
   `#primary.pf-product-page`. `#primary` is the real, unique id WordPress
   already puts on this page's <main> element (see single-product.php) — it
   is used here purely as a specificity anchor. Motta's own CSS targets this
   page as `.single-product div.product .thing` (2 classes + a type
   selector), which silently out-specifies plain class selectors like
   `.pf-product-page .thing` — a class selector can never out-rank a rule
   that also carries a type selector at equal class-count. Anchoring on the
   id sidesteps that fight entirely instead of chasing it rule-by-rule (that
   was tried first and reliably lost). Every property still reads cleanly at
   two class-equivalent selectors past the anchor; it's the one deliberate
   exception to "keep specificity low," made once, for a documented reason,
   rather than repeated ad hoc as `!important`.
   ========================================================================= */


/* =============================================================================
   1. VARIABLES
   ========================================================================= */
#primary.pf-product-page {
    /* Color */
    --pdp-bg: #FAFAFA;
    --pdp-card: #FFFFFF;
    --pdp-primary: #2563EB;
    --pdp-primary-dark: #1D4ED8;
    --pdp-primary-rgb: 37, 99, 235;
    --pdp-text: #111827;
    --pdp-text-secondary: #6B7280;
    --pdp-border: #E5E7EB;
    --pdp-success: #16A34A;
    --pdp-success-bg: #ECFDF5;
    --pdp-warning: #F59E0B;
    --pdp-warning-bg: #FFFBEB;
    --pdp-danger: #B91C1C;
    --pdp-danger-bg: #FEF2F2;

    /* Type */
    --pdp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Shape */
    --pdp-radius: 14px;
    --pdp-radius-sm: 8px;
    --pdp-radius-btn: 12px;
    --pdp-radius-pill: 999px;

    /* Elevation — soft, used sparingly (cards mostly rely on a 1px border;
       shadow is reserved for the buy-box and hover states). */
    --pdp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
    --pdp-shadow-hover: 0 4px 10px rgba(17, 24, 39, .07), 0 16px 32px rgba(17, 24, 39, .09);

    /* Motion */
    --pdp-transition: all .25s ease;

    /* Spacing */
    --pdp-gap-lg: clamp(24px, 3vw, 48px);
    --pdp-gap-md: 20px;
    --pdp-gap-sm: 12px;

    /* Gallery */
    --pdp-image-size: 700px;
    --pdp-thumb-w: 84px;

    background: var(--pdp-bg);
    font-family: var(--pdp-font);
}

#primary.pf-product-page .pf-commerce-page__content { padding-bottom: clamp(20px, 3vw, 40px); }


/* =============================================================================
   2. LAYOUT — fixed-width gallery, details column takes all remaining space
   =============================================================================
   `.motta-product-gallery` and `.summary.entry-summary` are the only two
   direct children WooCommerce/Motta gives us at the top level. The gallery
   is now a fixed content-sized column (700px image + thumbnail rail); the
   details column is a single flowing block (no inner grid split) so price,
   options and the buy-box get the full remaining width instead of being
   squeezed into a fraction of it.
   ========================================================================= */
#primary.pf-product-page .product-gallery-summary {
    align-items: flex-start;
    display: flex;
    gap: var(--pdp-gap-lg);
    margin-bottom: var(--pdp-gap-md);
}

#primary.pf-product-page .product-gallery-summary > * { min-width: 0; }

#primary.pf-product-page .motta-product-gallery {
    flex: 0 0 auto;
    max-width: 100%;
    position: sticky;
    top: var(--pdp-gap-md);
}

#primary.pf-product-page .summary.entry-summary {
    align-items: start;
    display: block;
    flex: 1 1 0%;
    /* Motta's base rule sets width: 51.052% + padding-left: 60px on this
       exact element for its own layout — reset both now that this is a
       flex track sized by the parent instead. */
    padding-left: 0;
    width: auto;
}

#primary.pf-product-page .woocommerce-badges { margin-bottom: var(--pdp-gap-sm); }
#primary.pf-product-page .product-meta-wrapper { margin-bottom: var(--pdp-gap-sm); }
#primary.pf-product-page .pf-buybox { margin-top: var(--pdp-gap-sm); }


/* =============================================================================
   3. GALLERY — fixed 700×700 image, thumbnail rail on the left, no hover zoom
   =============================================================================
   `.woocommerce-product-gallery` is WooCommerce core's own gallery wrapper;
   `.flex-control-thumbs` is the thumbnail rail its gallery script builds
   client-side (not present in server-rendered HTML — only visible once JS
   runs in an actual browser). Hover-zoom is disabled at the source by
   flipping Motta's own `mottaData.product_image_zoom` flag before its script
   runs (see assets/js/single-product.js) rather than fighting the binding
   here, so `cursor` just reflects that there's no interaction on hover.
   ========================================================================= */
#primary.pf-product-page .woocommerce-product-gallery {
    display: flex;
    flex-direction: row;
    gap: var(--pdp-gap-sm);
    width: auto;
}

#primary.pf-product-page .woocommerce-product-gallery__wrapper {
    display: block !important;
    order: 2;
    width: var(--pdp-image-size);
}

#primary.pf-product-page .woocommerce-product-gallery__image,
#primary.pf-product-page .woocommerce-product-gallery__image a {
    aspect-ratio: 1;
    background: var(--pdp-card);
    border-radius: var(--pdp-radius);
    display: block;
    height: var(--pdp-image-size);
    max-width: 100%;
    overflow: hidden;
    width: var(--pdp-image-size);
}

#primary.pf-product-page .woocommerce-product-gallery__image img,
#primary.pf-product-page .woocommerce-product-gallery img {
    cursor: default;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

#primary.pf-product-page .woocommerce-product-gallery__trigger { display: none; }

/* Thumbnail rail — left of the main image (`order: 1` vs. the image's `2`).
   Only renders on products with more than one gallery image. */
#primary.pf-product-page .flex-control-thumbs {
    display: flex;
    flex: 0 0 var(--pdp-thumb-w);
    flex-direction: column;
    gap: var(--pdp-gap-sm);
    list-style: none;
    margin: 0;
    order: 1;
    padding: 0;
}

#primary.pf-product-page .flex-control-thumbs li { margin: 0; }

#primary.pf-product-page .flex-control-thumbs img {
    aspect-ratio: 1;
    border: 1.5px solid var(--pdp-border);
    border-radius: var(--pdp-radius-sm);
    cursor: pointer;
    object-fit: cover;
    transition: var(--pdp-transition);
    width: 100%;
}

#primary.pf-product-page .flex-control-thumbs img.flex-active,
#primary.pf-product-page .flex-control-thumbs img:hover { border-color: var(--pdp-primary); }

/* Title, moved below the image — see inc/single-product-buybox.php. Small
   and secondary; it no longer needs to carry the page's main heading
   weight since it's not competing with the price/options column. */
#primary.pf-product-page .motta-product-gallery .product_title.entry-title {
    color: var(--pdp-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.4;
    margin: var(--pdp-gap-sm) 0 0;
}

/* Sale/new/"Hot" pill — a normal-flow child of .entry-summary (Motta hooks
   it there, not over the gallery), sitting above the title. */
#primary.pf-product-page .woocommerce-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--pdp-gap-sm);
}

#primary.pf-product-page .woocommerce-badges .woocommerce-badge {
    background: var(--pdp-primary);
    border-radius: var(--pdp-radius-sm);
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 6px 12px;
    text-transform: uppercase;
}

#primary.pf-product-page .woocommerce-badges .new { background: var(--pdp-text); }
#primary.pf-product-page .woocommerce-badges .featured { background: #C2410C; }
#primary.pf-product-page .woocommerce-badges .sold-out { background: var(--pdp-text-secondary); }

/*
 * Wishlist / compare. Motta renders this same block twice: once
 * absolutely-positioned over the gallery (hover-revealed, text hidden by
 * Motta's own CSS) and once again, plainly, after the Add to Cart form — the
 * second copy has no text-hiding rule scoped to it, so its label text used
 * to spill out of the circular icon buttons below. One control is enough
 * (premium PDPs only show a single heart), so the buy-box duplicate is
 * hidden, and the gallery copy is kept visible at all times instead of
 * hover-only (hover-only icons are unreachable on touch devices).
 */
#primary.pf-product-page .pf-buybox .product-featured-icons { display: none; }

#primary.pf-product-page .motta-product-gallery .product-featured-icons {
    bottom: auto !important;
    opacity: 1 !important;
    right: var(--pdp-gap-sm) !important;
    top: var(--pdp-gap-sm);
    visibility: visible !important;
    z-index: 3;
}

#primary.pf-product-page .product-featured-icons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#primary.pf-product-page .product-featured-icons a,
#primary.pf-product-page .product-featured-icons .wcboost-wishlist-button {
    align-items: center;
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: 50%;
    color: var(--pdp-text);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    transition: var(--pdp-transition);
    width: 40px;
}

#primary.pf-product-page .product-featured-icons a:hover,
#primary.pf-product-page .product-featured-icons .wcboost-wishlist-button:hover,
#primary.pf-product-page .product-featured-icons .wcboost-wishlist-button.added {
    background: var(--pdp-primary);
    border-color: var(--pdp-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* Expand (fullscreen) + share toolbar: bottom-left over the *image* —
   offset by the thumbnail rail's width since that rail now sits to the left
   of the image inside the same positioning context (`.motta-product-gallery`).
   Reverts to a plain gap in the mobile breakpoint, where thumbs move below
   the image instead of beside it. */
#primary.pf-product-page .motta-product-images-buttons {
    bottom: var(--pdp-gap-sm) !important;
    left: calc(var(--pdp-thumb-w) + var(--pdp-gap-sm) + var(--pdp-gap-sm)) !important;
    z-index: 3;
}

#primary.pf-product-page .product-gallery-summary .motta-button--icon {
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    transition: var(--pdp-transition);
}

#primary.pf-product-page .product-gallery-summary .motta-button--icon:hover {
    border-color: var(--pdp-primary);
    color: var(--pdp-primary);
}


/* =============================================================================
   4. DETAILS — breadcrumb, title, rating, category
   ========================================================================= */
#primary.pf-product-page .motta-breadcrumb-social-wrapper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
    margin-bottom: var(--pdp-gap-md);
}

#primary.pf-product-page .woocommerce-breadcrumb.site-breadcrumb {
    color: var(--pdp-text-secondary);
    font-size: 13px;
}

#primary.pf-product-page .woocommerce-breadcrumb.site-breadcrumb a { color: var(--pdp-text-secondary); transition: var(--pdp-transition); }
#primary.pf-product-page .woocommerce-breadcrumb.site-breadcrumb a:hover { color: var(--pdp-primary); }
#primary.pf-product-page .woocommerce-breadcrumb.site-breadcrumb .motta-svg-icon { height: 10px; margin: 0 4px; opacity: .5; vertical-align: middle; width: 10px; }

#primary.pf-product-page .motta-product-quick-links { display: flex; gap: 16px; }

#primary.pf-product-page .motta-product-quick-links .motta-button {
    align-items: center;
    color: var(--pdp-text-secondary);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    transition: var(--pdp-transition);
}

#primary.pf-product-page .motta-product-quick-links .motta-button:hover { color: var(--pdp-primary); }

/* The h1.product_title.entry-title itself now renders inside
   .motta-product-gallery (see §3) — moved there via inc/single-product-buybox.php
   — so there's no title rule left in this "details" section. */

#primary.pf-product-page .product-meta-wrapper {
    align-items: flex-start;
    color: var(--pdp-text-secondary);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 8px;
    /* Motta's base rule sets align-items: center + margin-bottom: 25px,
       both tuned for its own single-row layout of this element. */
    margin-bottom: 0;
}

#primary.pf-product-page .product-meta-wrapper .meta.meta-cat { color: var(--pdp-text-secondary); }
#primary.pf-product-page .product-meta-wrapper a { color: var(--pdp-primary); transition: var(--pdp-transition); }
#primary.pf-product-page .product-meta-wrapper a:hover { color: var(--pdp-primary-dark); text-decoration: underline; }
#primary.pf-product-page .product-meta-wrapper .sku { color: var(--pdp-text); font-weight: 600; }

#primary.pf-product-page .woocommerce-product-rating {
    align-items: center;
    display: flex;
    gap: 8px;
}

#primary.pf-product-page .woocommerce-product-rating .star-rating { color: #F59E0B; }
#primary.pf-product-page .woocommerce-product-rating a { color: var(--pdp-primary); font-size: 13px; transition: var(--pdp-transition); }
#primary.pf-product-page .woocommerce-product-rating a:hover { text-decoration: underline; }

#primary.pf-product-page .woocommerce-product-details__short-description {
    border-top: 1px solid var(--pdp-border);
    color: var(--pdp-text);
    font-size: 14px;
    line-height: 1.75;
    margin: var(--pdp-gap-md) 0 0;
    padding-top: var(--pdp-gap-md);
}


/* =============================================================================
   5. BUY BOX
   ========================================================================= */
#primary.pf-product-page .pf-buybox {
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius);
    box-shadow: var(--pdp-shadow);
    padding: var(--pdp-gap-md);
}

#primary.pf-product-page .motta-price-stock {
    /* Motta's base rule makes this a flex row with a bottom border/padding
       for a price+stock-on-one-line layout; reset for a simple stacked
       block (price, then stock, underneath). */
    border-bottom: 0;
    display: block;
    margin-bottom: 4px;
    padding-bottom: 0;
}

#primary.pf-product-page .price {
    color: var(--pdp-text);
    display: block;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
    padding-right: 0;
}

#primary.pf-product-page .price del {
    color: var(--pdp-text-secondary);
    display: inline-block;
    float: none;
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 0 8px;
    order: 2;
}

#primary.pf-product-page .price ins {
    float: none;
    margin-right: 0;
    text-decoration: none;
    width: auto;
}

/* "Save ₹X (Y%)" chip Motta appends whenever a product is on sale, shown
   next to the M.R.P. strike-through. */
#primary.pf-product-page .price__save {
    color: var(--pdp-success);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 4px;
    margin-right: 8px;
    order: 1;
}

#primary.pf-product-page .price__save .text { display: none; }
#primary.pf-product-page .price__save::before { content: "-"; }

#primary.pf-product-page .motta-price-stock .stock {
    color: var(--pdp-text-secondary);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0 0;
}

/* WooCommerce also prints its low-stock wording ("Only 2 left in stock")
   through the plain `.in-stock` class — no separate low-stock class exists
   to hook a distinct warning color to, so that stays green like any other
   in-stock message rather than guessing at a threshold here. */
#primary.pf-product-page .motta-price-stock .stock.in-stock { color: var(--pdp-success); }
#primary.pf-product-page .motta-price-stock .stock.on-backorder { color: var(--pdp-warning); }
#primary.pf-product-page .motta-price-stock .stock.out-of-stock { color: var(--pdp-danger); }

#primary.pf-product-page .product_meta {
    border-top: 1px solid var(--pdp-border);
    color: var(--pdp-text-secondary);
    font-size: 12px;
    margin-top: var(--pdp-gap-sm);
    padding-top: var(--pdp-gap-sm);
}

#primary.pf-product-page .product_meta > span { display: block; margin-bottom: 4px; }
#primary.pf-product-page .product_meta a { color: var(--pdp-text-secondary); transition: var(--pdp-transition); }
#primary.pf-product-page .product_meta a:hover { color: var(--pdp-primary); }

/* Delivery / returns / secure-checkout row — inc/single-product-buybox.php */
#primary.pf-product-page .pf-buybox__trust {
    border-top: 1px solid var(--pdp-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: var(--pdp-gap-sm) 0 0;
    padding: var(--pdp-gap-sm) 0 0;
}

#primary.pf-product-page .pf-buybox__trust li {
    align-items: center;
    color: var(--pdp-text-secondary);
    display: flex;
    font-size: 13px;
    gap: 10px;
    margin: 0;
}

#primary.pf-product-page .pf-buybox__trust a { color: var(--pdp-text); font-weight: 500; transition: var(--pdp-transition); }
#primary.pf-product-page .pf-buybox__trust a:hover { color: var(--pdp-primary); }

#primary.pf-product-page .pf-buybox__trust-icon {
    align-items: center;
    color: var(--pdp-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

#primary.pf-product-page .pf-buybox__trust-icon svg { height: 100%; width: 100%; }

/* Accepted payment methods — reuses the same fa-brands icons the footer
   already shows, so this isn't asserting anything new about what's accepted. */
#primary.pf-product-page .pf-buybox__payments {
    color: var(--pdp-text-secondary);
    display: flex;
    font-size: 22px;
    gap: 12px;
    margin-top: var(--pdp-gap-sm);
}


/* =============================================================================
   6. FORMS — variations, quantity stepper
   ========================================================================= */
#primary.pf-product-page .variations td,
#primary.pf-product-page .variations th { border: 0; padding: 8px 0; }
#primary.pf-product-page .variations label { color: var(--pdp-text); font-weight: 600; }

#primary.pf-product-page select {
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius-sm);
    color: var(--pdp-text);
    min-height: 46px;
    padding: 0 14px;
    transition: var(--pdp-transition);
}

#primary.pf-product-page select:focus-visible { border-color: var(--pdp-primary); outline: 0; }

/* PPOM custom fields ("Process & Delivery" select, "Your WhatsApp No."
   input, etc. — added via the PPOM plugin's own hooks into this form).
   PPOM renders these as Bootstrap-style `.form-group`/`.form-control`
   markup with no matching size rule anywhere in this stylesheet, so a
   plain text/tel input fell back to Bootstrap's (or the bare browser's)
   own box — a different height/padding than the `<select>` rule just
   above — instead of matching it. Normalize every PPOM field to the same
   box as the select. */
#primary.pf-product-page .ppom-field-wrapper { margin-bottom: var(--pdp-gap-sm); max-width: 100%; }
#primary.pf-product-page .ppom-field-wrapper .form-group { margin: 0; }

#primary.pf-product-page .ppom-field-wrapper label,
#primary.pf-product-page .ppom-field-wrapper .form-control-label {
    color: var(--pdp-text);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

#primary.pf-product-page .ppom-field-wrapper input.form-control,
#primary.pf-product-page .ppom-field-wrapper select.form-control,
#primary.pf-product-page .ppom-field-wrapper textarea.form-control {
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius-sm);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--pdp-text);
    display: block;
    font-size: 14px;
    height: 46px;
    line-height: normal;
    max-width: 100%;
    padding: 0 14px;
    width: 100%;
}

#primary.pf-product-page .ppom-field-wrapper textarea.form-control {
    height: auto;
    min-height: 90px;
    padding: 12px 14px;
}

#primary.pf-product-page .ppom-field-wrapper input.form-control:focus,
#primary.pf-product-page .ppom-field-wrapper select.form-control:focus,
#primary.pf-product-page .ppom-field-wrapper textarea.form-control:focus {
    border-color: var(--pdp-primary);
    outline: 0;
}

#primary.pf-product-page .cart {
    border-top: 1px solid var(--pdp-border);
    display: flex;
    flex-direction: column;
    gap: var(--pdp-gap-sm);
    margin-top: var(--pdp-gap-md);
    padding-top: var(--pdp-gap-md);
}

#primary.pf-product-page .quantity {
    align-items: center;
    align-self: flex-start;
    background: var(--pdp-bg);
    border-radius: var(--pdp-radius-sm);
    display: inline-flex !important;
    margin: 0 0 4px;
    padding: 4px;
}

#primary.pf-product-page .quantity .qty {
    background: transparent;
    border: 0;
    color: var(--pdp-text);
    font-weight: 600;
    height: 38px;
    text-align: center;
    width: 44px;
}

/* Motta's base rule (.woocommerce .quantity .motta-qty-button) sets
   `padding: 0 16px` and a bordered/padded `svg` child sized for its own
   56px-tall button — with this theme's global `box-sizing: border-box`,
   that inherited padding eats almost the entire 38px box this ruleset
   sizes the button to, squeezing the icon down to a sliver. Every
   property Motta sets on the button and its svg is reset explicitly here
   rather than relying on the cascade, so the icon renders at full size
   regardless of what the parent theme's rule declares. */
#primary.pf-product-page .quantity .motta-qty-button {
    align-items: center;
    border-radius: 6px;
    color: var(--pdp-text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    padding: 0;
    transition: var(--pdp-transition);
    width: 38px;
}

#primary.pf-product-page .quantity .motta-qty-button svg {
    background: none;
    border: 0;
    color: inherit;
    height: 16px;
    padding: 0;
    width: 16px;
}

#primary.pf-product-page .quantity .motta-qty-button:hover { background: var(--pdp-card); color: var(--pdp-primary); }


/* =============================================================================
   7. BUTTONS
   ========================================================================= */

/*
 * Motta's base rule floats .single_add_to_cart_button right at
 * `width: calc(100% - 185px)` (a layout where the quantity box floats left
 * beside it), and once .has-buy-now applies, .motta-buy-now-button gets
 * `width: calc(50% - 10px); margin-left: 19px` for a side-by-side pair.
 * Both are direct children of .cart (a flex column now), which computes
 * float to none for flex items automatically — but width/margin-left were
 * still winning and pushing the button past the buy-box's edge. Reset both
 * explicitly rather than relying on the flex-item float behavior alone.
 */
#primary.pf-product-page .single_add_to_cart_button,
#primary.pf-product-page .motta-buy-now-button {
    align-items: center;
    border-radius: var(--pdp-radius-btn);
    display: flex;
    float: none;
    font-size: 15px;
    font-weight: 600;
    height: 54px;
    justify-content: center;
    margin: 0;
    min-width: 0;
    padding: 0 20px;
    text-align: center;
    transition: var(--pdp-transition);
    width: 100%;
}

#primary.pf-product-page .single_add_to_cart_button {
    background: var(--pdp-primary);
    border: 0;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
    color: #fff;
}

#primary.pf-product-page .single_add_to_cart_button:hover {
    background: var(--pdp-primary-dark);
    box-shadow: 0 4px 12px rgba(var(--pdp-primary-rgb), .28);
    transform: translateY(-1px);
}

#primary.pf-product-page .single_add_to_cart_button:active { transform: translateY(0); }

#primary.pf-product-page .motta-buy-now-button {
    background: var(--pdp-card);
    border: 1.5px solid var(--pdp-text);
    color: var(--pdp-text);
    /* Relying on `.cart`'s flex `gap` alone isn't reliable here — for
       variable products this button and the add-to-cart button end up
       as siblings inside WooCommerce's own `.woocommerce-variation-add-to-cart`
       wrapper rather than direct children of `.cart`, so the gap has
       nothing to apply between. Give this button its own top margin so
       the spacing holds regardless of which wrapper WooCommerce renders. */
    margin-top: var(--pdp-gap-sm);
}

#primary.pf-product-page .motta-buy-now-button:hover {
    background: var(--pdp-text);
    border-color: var(--pdp-text);
    color: #fff;
    transform: translateY(-1px);
}

#primary.pf-product-page .motta-buy-now-button:active { transform: translateY(0); }


/* =============================================================================
   8. TABS — description / reviews
   ========================================================================= */
#primary.pf-product-page .woocommerce-tabs {
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius);
    margin-bottom: var(--pdp-gap-md);
    padding: clamp(20px, 3vw, 36px);
}

#primary.pf-product-page ul.tabs.wc-tabs {
    border-bottom: 1px solid var(--pdp-border);
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0 0 var(--pdp-gap-md);
    padding: 0;
}

#primary.pf-product-page ul.tabs.wc-tabs li { margin: 0; padding: 0; }

#primary.pf-product-page ul.tabs.wc-tabs li a {
    color: var(--pdp-text-secondary);
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 14px;
    text-decoration: none;
    transition: var(--pdp-transition);
}

#primary.pf-product-page ul.tabs.wc-tabs li.active a,
#primary.pf-product-page ul.tabs.wc-tabs li a:hover { color: var(--pdp-primary); }

#primary.pf-product-page ul.tabs.wc-tabs li.active { position: relative; }

#primary.pf-product-page ul.tabs.wc-tabs li.active::after {
    background: var(--pdp-primary);
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
}

#primary.pf-product-page .woocommerce-Tabs-panel { color: var(--pdp-text); line-height: 1.8; }
#primary.pf-product-page .woocommerce-Tabs-panel h2 { font-size: 20px; font-weight: 600; margin-bottom: var(--pdp-gap-sm); }


/* =============================================================================
   9. RELATED PRODUCTS
   ========================================================================= */

/* Motta's own JS (single-product.js: relatedProductCarousel()) wraps this
   grid in a Swiper carousel, starting it at `opacity: 0` inline and only
   setting it to 1 from the Swiper `init` callback — on this page that
   callback never fires (a third-party plugin script elsewhere on the page
   throws before Motta's own ready-handler queue finishes), so the entire
   "Similar Products" section was rendering invisible despite the grid
   itself — and the query behind it — being correct. Forcing opacity here
   doesn't fight Swiper if it *does* init successfully elsewhere (same end
   state), and Motta's own `.products.columns-5` grid CSS already lays the
   (JS-less) `ul.products.swiper-wrapper` out as a proper responsive grid,
   so nothing else is needed to make this readable without the carousel. */
#primary.pf-product-page .related.products .swiper-container,
#primary.pf-product-page .upsells.products .swiper-container { opacity: 1 !important; }

#primary.pf-product-page .related.products,
#primary.pf-product-page .upsells.products { margin-top: var(--pdp-gap-sm); }

#primary.pf-product-page .related.products > h2,
#primary.pf-product-page .upsells.products > h2 {
    color: var(--pdp-text);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: var(--pdp-gap-md);
}

/* Trust-badge / USP strip (Appearance > Widgets > "Single Product Extra
   Content") — empty until widgets are added there. */
#primary.pf-product-page .single-product-extra-content {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: var(--pdp-gap-md);
}

#primary.pf-product-page .single-product-extra-content .widget {
    align-items: center;
    color: var(--pdp-text-secondary);
    display: flex;
    font-size: 13px;
    gap: 8px;
}

/* This sidebar currently holds one Icon Box widget with no icon/text
   configured, so Motta prints an empty <section> — hide the whole strip
   until it actually has content rather than show a dangling gap. */
#primary.pf-product-page .single-product-extra-content:has(.widget:empty) { display: none; }


/* =============================================================================
   10. MOBILE
   ========================================================================= */
@media (max-width: 900px) {
    #primary.pf-product-page .product-gallery-summary { flex-direction: column; gap: var(--pdp-gap-md); }

    #primary.pf-product-page .motta-product-gallery {
        max-width: none;
        position: static;
        width: 100%;
    }

    /* Thumbs move below the image instead of beside it — a fixed 84px rail
       plus a 700px image doesn't fit most phones/tablets. */
    #primary.pf-product-page .woocommerce-product-gallery { flex-direction: column; }

    #primary.pf-product-page .woocommerce-product-gallery__wrapper,
    #primary.pf-product-page .woocommerce-product-gallery__image,
    #primary.pf-product-page .woocommerce-product-gallery__image a {
        height: auto;
        order: 1;
        width: 100%;
    }

    #primary.pf-product-page .flex-control-thumbs {
        flex: 0 0 auto;
        flex-direction: row;
        margin-top: var(--pdp-gap-sm);
        order: 2;
        overflow-x: auto;
    }

    #primary.pf-product-page .flex-control-thumbs img { width: var(--pdp-thumb-w); }

    #primary.pf-product-page .motta-product-images-buttons { left: var(--pdp-gap-sm) !important; }

    #primary.pf-product-page .summary.entry-summary {
        display: block;
        width: 100%;
    }

    #primary.pf-product-page .product-meta-wrapper { margin-bottom: var(--pdp-gap-md); }
    #primary.pf-product-page .pf-buybox { margin-top: var(--pdp-gap-md); position: static; }
    #primary.pf-product-page .woocommerce-tabs { padding: var(--pdp-gap-md); }
}

@media (max-width: 600px) {
    #primary.pf-product-page .motta-breadcrumb-social-wrapper { align-items: flex-start; flex-direction: column; gap: 8px; }
    #primary.pf-product-page .motta-product-quick-links { display: none; }
    #primary.pf-product-page .pf-buybox { padding: var(--pdp-gap-sm); }
    #primary.pf-product-page ul.tabs.wc-tabs { gap: 18px; overflow-x: auto; }
    #primary.pf-product-page ul.tabs.wc-tabs li a { font-size: 14px; white-space: nowrap; }
    #primary.pf-product-page .related.products > h2,
    #primary.pf-product-page .upsells.products > h2 { font-size: 22px; }
}

@media (max-width: 380px) {
    #primary.pf-product-page .price { font-size: 26px; }
}


/* =============================================================================
   11. UTILITIES
   ========================================================================= */

/* Mobile sticky add-to-cart bar, built into the motta-addons plugin
   (appears once the main Add to Cart button scrolls out of view). Lives
   outside #primary.pf-product-page (appended at the body level), so it's
   re-skinned on its own root class instead of nested under that anchor. */
.motta-sticky-add-to-cart {
    background: var(--pdp-card, #fff);
    border-top: 1px solid var(--pdp-border, #E5E7EB);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, .08);
}

.motta-sticky-add-to-cart .price { color: var(--pdp-primary, #2563EB); font-weight: 700; }

.motta-sticky-add-to-cart .motta-sticky-add-to-cart__button {
    background: var(--pdp-primary, #2563EB);
    border-radius: 8px;
    color: #fff;
    transition: all .25s ease;
}

.motta-sticky-add-to-cart .motta-sticky-add-to-cart__button:hover { background: var(--pdp-primary-dark, #1D4ED8); color: #fff; }

.motta-sticky-add-to-cart .motta-buy-now-button {
    background: #fff;
    border: 1.5px solid var(--pdp-text, #111827);
    border-radius: 8px;
    color: var(--pdp-text, #111827);
}


/* =============================================================================
   12. PRODUCT RIBBONS — Best Seller / Handmade, over the gallery image
   ========================================================================= */
#primary.pf-product-page .pf-product-ribbons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    left: var(--pdp-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: var(--pdp-gap-sm);
    z-index: 3;
}

#primary.pf-product-page .pf-product-ribbons li {
    background: var(--pdp-text);
    border-radius: var(--pdp-radius-sm);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 12px;
    text-transform: uppercase;
    width: fit-content;
}


/* =============================================================================
   13. DELIVERY / PINCODE CHECK
   ========================================================================= */
#primary.pf-product-page .pf-delivery-check {
    border-top: 1px solid var(--pdp-border);
    margin-top: var(--pdp-gap-sm);
    padding-top: var(--pdp-gap-sm);
}

#primary.pf-product-page .pf-delivery-check__label {
    align-items: center;
    color: var(--pdp-text);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 8px;
}

#primary.pf-product-page .pf-delivery-check__icon {
    color: var(--pdp-text-secondary);
    display: inline-flex;
    height: 16px;
    width: 16px;
}

#primary.pf-product-page .pf-delivery-check__icon svg { height: 100%; width: 100%; }

#primary.pf-product-page .pf-delivery-check__row { display: flex; gap: 8px; }

#primary.pf-product-page .pf-delivery-check__row input {
    background: var(--pdp-bg);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius-sm);
    color: var(--pdp-text);
    flex: 1 1 auto;
    font-size: 14px;
    height: 42px;
    min-width: 0;
    padding: 0 12px;
}

#primary.pf-product-page .pf-delivery-check__row input:focus-visible { border-color: var(--pdp-primary); outline: 0; }

#primary.pf-product-page .pf-delivery-check__btn {
    background: var(--pdp-text);
    border: 0;
    border-radius: var(--pdp-radius-sm);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    padding: 0 18px;
    transition: var(--pdp-transition);
}

#primary.pf-product-page .pf-delivery-check__btn:hover { background: var(--pdp-primary); }

#primary.pf-product-page .pf-delivery-check__result {
    font-size: 13px;
    margin: 8px 0 0;
}

#primary.pf-product-page .pf-delivery-check__result.is-success { color: var(--pdp-success); }
#primary.pf-product-page .pf-delivery-check__result.is-error { color: var(--pdp-danger); }


/* =============================================================================
   14. LIVE PERSONALIZATION SUMMARY
   ========================================================================= */
#primary.pf-product-page .pf-summary {
    background: var(--pdp-success-bg);
    border: 1px dashed var(--pdp-success);
    border-radius: var(--pdp-radius-sm);
    margin-top: var(--pdp-gap-sm);
    padding: var(--pdp-gap-sm);
}

#primary.pf-product-page .pf-summary__title {
    color: var(--pdp-text);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#primary.pf-product-page .pf-summary__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary.pf-product-page .pf-summary__list li {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
}

#primary.pf-product-page .pf-summary__check { color: var(--pdp-success); font-weight: 700; }
#primary.pf-product-page .pf-summary__label { color: var(--pdp-text-secondary); }
#primary.pf-product-page .pf-summary__value { color: var(--pdp-text); font-weight: 600; }

#primary.pf-product-page .pf-summary__empty {
    color: var(--pdp-text-secondary);
    font-size: 13px;
    font-style: italic;
}


/* =============================================================================
   15. FLOATING ACTION BUTTONS (desktop only)
   ========================================================================= */
#primary.pf-product-page .pf-floating-actions {
    display: none;
}

@media (min-width: 1101px) {
    #primary.pf-product-page .pf-floating-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: fixed;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 40;
    }
}

#primary.pf-product-page .pf-floating-actions__btn {
    align-items: center;
    background: var(--pdp-card);
    border: 1px solid var(--pdp-border);
    border-radius: 50%;
    box-shadow: var(--pdp-shadow);
    color: var(--pdp-text);
    cursor: pointer;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    position: relative;
    transition: var(--pdp-transition);
    width: 46px;
}

#primary.pf-product-page .pf-floating-actions__btn svg { height: 18px; width: 18px; }

#primary.pf-product-page .pf-floating-actions__btn:hover {
    background: var(--pdp-primary);
    border-color: var(--pdp-primary);
    color: #fff;
    transform: translateY(-1px);
}

#primary.pf-product-page .pf-floating-actions__btn--whatsapp:hover { background: #25D366; border-color: #25D366; }

#primary.pf-product-page .pf-floating-actions__btn[data-copied]::after {
    background: var(--pdp-text);
    border-radius: 6px;
    bottom: 50%;
    color: #fff;
    content: "Link copied";
    font-size: 12px;
    padding: 4px 8px;
    position: absolute;
    right: calc(100% + 10px);
    transform: translateY(50%);
    white-space: nowrap;
}


/* =============================================================================
   16. HOW IT WORKS TAB
   ========================================================================= */
#primary.pf-product-page .pf-how-it-works {
    counter-reset: none;
    display: grid;
    gap: var(--pdp-gap-md);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary.pf-product-page .pf-how-it-works li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#primary.pf-product-page .pf-how-it-works__num {
    align-items: center;
    background: var(--pdp-primary);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    width: 32px;
}

@media (max-width: 700px) {
    #primary.pf-product-page .pf-how-it-works { grid-template-columns: 1fr 1fr; }
}


/* =============================================================================
   17. REVIEWS SUMMARY
   ========================================================================= */
#primary.pf-product-page .pf-reviews-summary {
    align-items: center;
    border-bottom: 1px solid var(--pdp-border);
    display: flex;
    gap: 10px;
    margin-bottom: var(--pdp-gap-md);
    padding-bottom: var(--pdp-gap-md);
}

#primary.pf-product-page .pf-reviews-summary__stars .star-rating { color: #F59E0B; }
#primary.pf-product-page .pf-reviews-summary__avg { color: var(--pdp-text); font-size: 20px; font-weight: 700; }
#primary.pf-product-page .pf-reviews-summary__count { color: var(--pdp-text-secondary); font-size: 13px; }


/* =============================================================================
   18. RECENTLY VIEWED
   ========================================================================= */
#primary.pf-product-page .pf-recently-viewed { margin-top: var(--pdp-gap-md); }

#primary.pf-product-page .pf-recently-viewed h2 {
    color: var(--pdp-text);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: var(--pdp-gap-md);
}

#primary.pf-product-page .pf-recently-viewed__track {
    display: grid;
    gap: var(--pdp-gap-md);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

#primary.pf-product-page .pf-recently-viewed__item {
    color: var(--pdp-text);
    display: block;
    text-decoration: none;
}

#primary.pf-product-page .pf-recently-viewed__item img {
    aspect-ratio: 1;
    background: var(--pdp-bg);
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius-sm);
    object-fit: contain;
    transition: var(--pdp-transition);
    width: 100%;
}

#primary.pf-product-page .pf-recently-viewed__item:hover img { border-color: var(--pdp-primary); }

#primary.pf-product-page .pf-recently-viewed__title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
}

#primary.pf-product-page .pf-recently-viewed__price {
    color: var(--pdp-text-secondary);
    display: block;
    font-size: 13px;
    margin-top: 2px;
}