/* PIN Product Page — FNP-style layout
 *
 * All selectors use the `pinpp-` prefix so they cannot collide with any
 * existing site CSS, theme, or other plugin. Layout/spacing/colors only —
 * fonts inherit from the active theme.
 */

/* Smooth scroll behaviour for in-page anchor jumps (e.g. "(N customer
 * reviews)" → #reviews). Scoped to single-product pages so we don't
 * change the global page-level scroll feel. */
body.single-product { scroll-behavior: smooth; }
html:has(body.single-product) { scroll-behavior: smooth; }

/* ── Container — full width with even side spacing ────────────────────
 *
 * The site's customizer CSS sets asymmetric rules on small screens
 * (`#content-wrap { padding-right: 4px }`, `.site-main { margin-right: -33px }`)
 * that pull the entire single-product layout past the viewport's right edge.
 * We chain two body classes (`body.single-product.content-full-screen` etc.)
 * so our selectors out-specify the customizer's single-class selectors and
 * win even though we load earlier in source order. */
body.single-product #content-wrap,
body.single-product #content-wrap.container,
body.single-product.content-full-screen #content-wrap,
body.single-product.content-full-width #content-wrap,
body.single-product.has-grid-list #content-wrap,
body.single-product .container.entries,
body.single-product #main > .container,
body.single-product .site-main > .container,
body.single-product .page-header-inner.container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    float: none !important;
    box-sizing: border-box;
}
/* Cancel customizer's negative right-margin on `.site-main` for product
 * pages — that rule pulls the whole layout 33px past the right edge on
 * mobile and 150px on desktop, which is what was clipping every section. */
body.single-product .site-main,
body.single-product #main .site-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.pinpp-root {
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Inherit the active theme's font stack rather than letting plugin
     * widgets (PPOM, Customer-Reviews, dnd-upload-wc, etc.) bring in
     * their own font-family. We intentionally only set `inherit` on the
     * root and on `*` so the cascade hands the body's font down to
     * every nested element regardless of plugin defaults. */
    font-family: inherit;
}
.pinpp-root,
.pinpp-root input,
.pinpp-root textarea,
.pinpp-root select,
.pinpp-root button,
.pinpp-root label {
    font-family: inherit;
}
/* Hard containment: any descendant that misbehaves (long words, fixed
 * widths, plugin tables) gets clamped instead of pushing past the right
 * edge. min-width:0 on every element neutralises flex/grid items that
 * would otherwise refuse to shrink below their content size. */
.pinpp-root *,
.pinpp-root *::before,
.pinpp-root *::after {
    box-sizing: border-box;
    max-width: 100%;
}
.pinpp-root img,
.pinpp-root video,
.pinpp-root iframe,
.pinpp-root table {
    max-width: 100%;
}
.pinpp-root table {
    width: 100% !important;
    table-layout: auto;
}
.pinpp-root .pinpp-grid > *,
.pinpp-root .pinpp-summary > *,
.pinpp-root .pinpp-cart > *,
.pinpp-root .pinpp-cart form > *,
.pinpp-root .pinpp-cart .cart > *,
.pinpp-root .pinpp-cart .woocommerce-variation-add-to-cart > * {
    min-width: 0;
}

/* ── Hide OceanWP's previous/next product navigation arrows ─────────
 * They sit at the top-right of the product card and don't fit FNP's UI. */
.pinpp-root .owp-product-nav-wrap,
body.single-product .owp-product-nav-wrap,
body.single-product .owp-product-nav {
    display: none !important;
}

/* ── Two-column grid (6/6 split) ──────────────────────────────────── */
/* Equal 50/50 columns — the gallery and summary each take half of the
 * container width. The gallery plugin's natural 650px max-width is
 * overridden so the gallery fills its half. */
.pinpp-root .pinpp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: flex-start;
    margin: 16px 0 32px;
}
.pinpp-root .pinpp-gallery .images.nickx_product_images_with_video {
    max-width: 100% !important;
    width: 100%;
}

/* ── Gallery column (custom gallery) ──────────────────────────────── */
/* The right column (summary, charms, cart, tabs) is much taller than
 * the gallery, which left a big empty area to the left of the
 * personalisation block. Sticking the gallery to the top of the
 * viewport while the user scrolls fixes the dead space without
 * breaking the layout when the right column is short. */
.pinpp-root .pinpp-gallery {
    position: sticky;
    top: 24px;
    align-self: flex-start;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    float: none !important;
}

/* Custom gallery: small vertical thumb column on the left, big square
 * main image on the right. We render this ourselves (no Swiper, no
 * elevateZoom, no theme-CSS dependencies) so we have full control. */
.pinpp-root .pinpp-mygallery {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}
.pinpp-root .pinpp-mygallery-thumbs {
    flex: 0 0 88px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}
.pinpp-root .pinpp-mygallery-thumbs::-webkit-scrollbar { width: 4px; }
.pinpp-root .pinpp-mygallery-thumbs::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 2px; }
.pinpp-root .pinpp-mygallery-thumb {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}
.pinpp-root .pinpp-mygallery-thumb:hover { border-color: #f3a4ab; }
.pinpp-root .pinpp-mygallery-thumb.is-active { border: 2px solid #e63946; }
.pinpp-root .pinpp-mygallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px;
    box-sizing: border-box;
    background: #fafafa;
    display: block;
    margin: 0 !important;
    border: 0 !important;
}

.pinpp-root .pinpp-mygallery-main {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 1 / 1;
    max-height: 600px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.pinpp-root .pinpp-mygallery-slide {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}
.pinpp-root .pinpp-mygallery-slide.is-active {
    display: flex;
}
.pinpp-root .pinpp-mygallery-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.pinpp-root .pinpp-mygallery-slide img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Sale flash bubble (kept from the original WC rendering). */
.pinpp-root .pinpp-gallery .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}
/* Thumbnails — force square, equal-size cells so every thumb shows the
 * full image without crop or letterboxing.
 *
 * The gallery plugin's Swiper-JS sets `height: 101.5px` inline on each
 * slide, but slide widths are calculated from the parent (~83px). That
 * produces a portrait rectangle while the source images are 100×100
 * squares — visually that reads as cropped/squished. Force every thumb
 * to a square box with aspect-ratio 1:1 and let the image fill on contain. */
.pinpp-root .pinpp-gallery .nickx-slider-nav .nswiper-slide,
.pinpp-root .pinpp-gallery .thumbnail-slider .nswiper-slide,
.pinpp-root .pinpp-gallery .nickx-thumbnail {
    width: 96px !important;
    height: 96px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    flex: 0 0 96px;
}
.pinpp-root .pinpp-gallery .nickx-slider-nav .nswiper-slide img,
.pinpp-root .pinpp-gallery .thumbnail-slider .nswiper-slide img,
.pinpp-root .pinpp-gallery .nickx-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 2px;
    box-sizing: border-box;
    background: #fafafa;
}
.pinpp-root .pinpp-gallery .nickx-slider-nav .nswiper-slide-thumb-active,
.pinpp-root .pinpp-gallery .nickx-thumbnail.nswiper-slide-thumb-active {
    border: 2px solid #e63946 !important;
}
/* Disable the broken hover-zoom overlay that renders a giant blurred crop. */
.pinpp-root .pinpp-gallery .zoomContainer {
    pointer-events: none;
}

/* ── Summary (right column) ────────────────────────────────────────── */
.pinpp-root .pinpp-summary {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    /* Override site's max-height/scroll on .summary, in case anything still
     * adds those classes upstream. */
    max-height: none !important;
    overflow: visible !important;
    float: none !important;
    margin: 0;
    padding: 0;
    display: block;
}
.pinpp-root .pinpp-title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}
.pinpp-root .pinpp-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    min-height: 0;
}
.pinpp-root .pinpp-rating-row .star-rating {
    font-size: 16px;
    margin: 0;
    color: #f5a623;
}
.pinpp-root .pinpp-rating-row .woocommerce-product-rating {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pinpp-root .pinpp-rating-row .woocommerce-review-link {
    color: #555;
    font-size: 14px;
    text-decoration: none;
}
.pinpp-root .pinpp-rating-row .woocommerce-review-link:hover { text-decoration: underline; }
.pinpp-root .pinpp-rating-row:empty { display: none; }
.pinpp-root .pinpp-badges { margin: 0 0 14px; }
.pinpp-root .pinpp-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: #fdecee;
    color: #e63946;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.pinpp-root .pinpp-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 10px;
}
.pinpp-root .pinpp-price {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}
.pinpp-root .pinpp-price del {
    color: #999;
    font-size: 18px;
    font-weight: 400;
    margin-right: 8px;
}
.pinpp-root .pinpp-price ins {
    text-decoration: none;
    background: transparent;
}
.pinpp-root .pinpp-discount {
    color: #e63946;
    font-weight: 600;
    font-size: 17px;
}
.pinpp-root .pinpp-orders-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff8e6;
    color: #7a5a00;
    border: 1px solid #f3e2a8;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Short description (product excerpt). */
.pinpp-root .pinpp-short-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #444;
    margin: 4px 0 16px;
}
.pinpp-root .pinpp-short-desc p { margin: 0 0 8px; }
.pinpp-root .pinpp-short-desc p:last-child { margin-bottom: 0; }
.pinpp-root .pinpp-short-desc ul,
.pinpp-root .pinpp-short-desc ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

/* ── Generic section ──────────────────────────────────────────────── */
/* Sections: 20px vertical rhythm between independent blocks (offers,
 * upload card, cart row, about). Section labels get a 10px bottom
 * margin so the label sits cleanly over the field below it. */
.pinpp-root .pinpp-section {
    margin: 20px 0;
    max-width: 100%;
}
.pinpp-root .pinpp-section + .pinpp-section { margin-top: 20px; }
.pinpp-root .pinpp-section-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
    font-size: 16px;
    line-height: 1.4;
}
.pinpp-root .pinpp-muted { color: #888; font-size: 0.9em; }

/* ── Location picker ──────────────────────────────────────────────── */
.pinpp-root .pinpp-location-row {
    display: flex;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.pinpp-root .pinpp-country {
    border: 0;
    border-right: 1px solid #e5e5e5;
    padding: 12px 36px 12px 14px;
    background-color: #f7f7f7;
    background-image: linear-gradient(45deg, transparent 50%, #888 50%),
                      linear-gradient(135deg, #888 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
    min-width: 150px;
    max-width: 240px;
    height: auto;
    line-height: 1.5 !important;
    font-size: 1.05rem !important;
    font-weight: 500;
    color: #222;
    box-sizing: border-box !important;
    outline: none;
    overflow: visible;
    cursor: pointer;
}
.pinpp-root .pinpp-pincode {
    border: 0;
    flex: 1;
    padding: 10px 12px;
    outline: none;
    min-width: 0;
}
.pinpp-root .pinpp-location-result { margin-top: 6px; font-size: 0.85em; }
.pinpp-root .pinpp-location-result.is-ok    { color: #e63946; }
.pinpp-root .pinpp-location-result.is-error { color: #b3261e; }

/* ── Personalisation block — FNP-style upload card ────────────────── */
.pinpp-root .pinpp-upload-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
}
.pinpp-root .pinpp-upload-art {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pinpp-root .pinpp-upload-art svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pinpp-root .pinpp-upload-info {
    flex: 1 1 auto;
    min-width: 0;
}
.pinpp-root .pinpp-upload-line {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}
.pinpp-root .pinpp-upload-line strong {
    color: #333;
    font-weight: 600;
    margin-right: 4px;
}
.pinpp-root .pinpp-upload-btn {
    flex: 0 0 auto;
    background: #fdecee;
    color: #e63946;
    border: 1.5px solid #f3a4ab;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.pinpp-root .pinpp-upload-btn:hover {
    background: #fad7da;
    border-color: #e6707a;
}
.pinpp-root .pinpp-upload-btn.is-active {
    background: #e63946;
    color: #fff;
    border-color: #e63946;
}

/* The native dnd-upload-wc dropzone label is hidden, but the wrapper
 * stays visible because the plugin appends each uploaded file's
 * `.dnd-upload-status` row INSIDE the wrapper. Hiding the wrapper
 * would also hide the file rows.
 *
 * Strategy: strip every styling property (border, padding, background,
 * min-height) from the wrappers so they have zero visual presence,
 * then `display: none` only the dropzone *label* (`.codedropz-upload-inner`,
 * `.codedropz-label`, `.dnd-upload-counter`) — the parts the user
 * shouldn't see. The file rows that the plugin renders sit alongside
 * those hidden labels and remain visible. */
.pinpp-root .pinpp-upload-engine,
.pinpp-root .pinpp-upload-engine .codedropz-upload-wrapper,
.pinpp-root .pinpp-upload-engine .codedropz-upload-handler,
.pinpp-root .pinpp-upload-engine .codedropz-upload-handler.wc-upload-wrap,
.pinpp-root .pinpp-upload-engine .wc-dnd-file-upload,
.pinpp-root .pinpp-personalise .wc-dnd-file-upload,
.pinpp-root .pinpp-personalise .codedropz-upload-handler,
.pinpp-root .pinpp-personalise .codedropz-upload-handler.wc-upload-wrap {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}
/* Hide ONLY the dropzone label/UI — keep the wrapper above visible so
 * the file rows the plugin appends are still in the DOM tree. */
.pinpp-root .pinpp-upload-engine .codedropz-upload-container,
.pinpp-root .pinpp-upload-engine .codedropz-upload-inner,
.pinpp-root .pinpp-upload-engine .codedropz-label,
.pinpp-root .pinpp-upload-engine .dnd-upload-counter,
.pinpp-root .pinpp-personalise .codedropz-upload-container,
.pinpp-root .pinpp-personalise .codedropz-upload-inner,
.pinpp-root .pinpp-personalise .codedropz-label {
    display: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}
/* Keep file input accessible for the JS click proxy, but visually hidden. */
.pinpp-root .pinpp-upload-engine input[type="file"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}
/* Each uploaded-file row that appears under the card.
 *
 * The site customizer styles `.dnd-upload-status` with
 * `position: absolute; margin-left: 40%; margin-top: -21%` (legacy hack
 * to float the file row over the original dropzone). Inside our
 * scoped layout that pulls the row over the cart buttons. We force it
 * back to static flow with stronger specificity + !important so the
 * uploaded-file row always sits cleanly under the upload card. */
.pinpp-root .pinpp-personalise .dnd-upload-status,
.pinpp-root .pinpp-upload-engine .dnd-upload-status {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #fdf0f1 !important;
    border: 1px solid #fad7da !important;
    border-radius: 8px !important;
    margin: 10px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    color: #333 !important;
    box-sizing: border-box !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
}
/* Inner pieces of the file row: thumbnail/icon, file name, size, dot,
 * progress bar, remove (×) button. Constrain widths so long file
 * names don't push the layout. */
.pinpp-root .pinpp-personalise .dnd-upload-status > *,
.pinpp-root .pinpp-upload-engine .dnd-upload-status > * {
    max-width: 100%;
    box-sizing: border-box;
}
.pinpp-root .pinpp-personalise .dnd-upload-image,
.pinpp-root .pinpp-upload-engine .dnd-upload-image {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
}
.pinpp-root .pinpp-personalise .dnd-upload-details,
.pinpp-root .pinpp-upload-engine .dnd-upload-details {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
}
.pinpp-root .pinpp-personalise .name,
.pinpp-root .pinpp-upload-engine .name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #222;
    word-break: break-all;
}
.pinpp-root .pinpp-personalise .name a,
.pinpp-root .pinpp-upload-engine .name a {
    color: #e63946;
    text-decoration: none;
    word-break: break-all;
}
.pinpp-root .pinpp-personalise .name span,
.pinpp-root .pinpp-upload-engine .name span {
    color: #777;
    font-size: 13px;
    font-weight: 400;
}
.pinpp-root .pinpp-personalise .dnd-progress-bar,
.pinpp-root .pinpp-upload-engine .dnd-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.pinpp-root .pinpp-personalise .dnd-progress-bar > span,
.pinpp-root .pinpp-upload-engine .dnd-progress-bar > span {
    display: block;
    height: 100%;
    background: #2ecc71;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.pinpp-root .pinpp-personalise .remove-file,
.pinpp-root .pinpp-upload-engine .remove-file,
.pinpp-root .pinpp-personalise a.remove-file,
.pinpp-root .pinpp-upload-engine a.remove-file {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}
.pinpp-root .pinpp-personalise .remove-file:hover,
.pinpp-root .pinpp-upload-engine .remove-file:hover {
    background: #e63946;
    color: #fff;
}
.pinpp-root .pinpp-upload-engine .dnd-upload-counter {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    text-align: right;
}
/* Plugin markup (legacy selectors kept for reference):
 *   .codedropz-upload-wrapper > .codedropz-upload-handler > .codedropz-upload-container
 *     > .codedropz-upload-inner > .codedropz-label
 *         > .cd-icon, .text, .cd-separator, a.cd-upload-btn
 *   > .dnd-upload-counter (0 of 5)
 */
.pinpp-root .pinpp-personalise .codedropz-upload-wrapper {
    margin: 0;
    width: 100%;
}
.pinpp-root .pinpp-personalise .codedropz-upload-handler {
    border: 2px dashed #c8d8f0 !important;
    border-radius: 10px !important;
    background: #f7faff;
    padding: 12px 16px !important;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 0 !important;
    height: auto !important;
}
.pinpp-root .pinpp-personalise .codedropz-upload-handler:hover {
    border-color: #e63946 !important;
    background: #fdf0f1;
}
.pinpp-root .pinpp-personalise .codedropz-upload-container,
.pinpp-root .pinpp-personalise .codedropz-upload-inner {
    padding: 0 !important;
    margin: 0 !important;
}
.pinpp-root .pinpp-personalise .codedropz-label {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}
.pinpp-root .pinpp-personalise .codedropz-label .text {
    color: #444;
    font-size: 0.95rem;
    margin: 0 !important;
}
.pinpp-root .pinpp-personalise .codedropz-label .cd-separator {
    color: #777;
    font-size: 0.9rem;
    margin: 0 !important;
}
/* The plugin's icon font is missing — it renders the literal text "1F4E5"
 * (the codepoint) at huge size. Foolproof fix: hide everything inside the
 * label except the visible elements we care about (.text, .cd-separator,
 * .cd-upload-btn), then prepend our own SVG upload icon to the label. */
.pinpp-root .pinpp-personalise .codedropz-label > *:not(.text):not(.cd-separator):not(.cd-upload-btn) {
    display: none !important;
}
.pinpp-root .pinpp-personalise .codedropz-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8e23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}
.pinpp-root .pinpp-personalise .dnd-upload-counter {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    color: #888;
    margin-top: 4px;
}
.pinpp-root .pinpp-personalise .cd-upload-btn,
.pinpp-root .pinpp-personalise .codedropz-btn {
    background: #e63946 !important;
    color: #fff !important;
    border: 1px solid #e63946 !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    margin-left: 8px !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}
.pinpp-root .pinpp-personalise .cd-upload-btn:hover,
.pinpp-root .pinpp-personalise .codedropz-btn:hover {
    background: #c12839 !important;
    border-color: #c12839 !important;
}
.pinpp-root .pinpp-personalise .codedropz-upload-handler small,
.pinpp-root .pinpp-personalise .codedropz-upload-status {
    font-size: 0.8em;
    color: #888;
    display: block;
    margin-top: 8px;
}

/* ── Offers list ──────────────────────────────────────────────────── */
.pinpp-root .pinpp-offers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pinpp-root .pinpp-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
}
.pinpp-root .pinpp-offer:nth-child(4n+1) { background: #eaf3ff; border-color: #d9e7f7; }
.pinpp-root .pinpp-offer:nth-child(4n+2) { background: #fbf3e6; border-color: #ecdcc4; }
.pinpp-root .pinpp-offer:nth-child(4n+3) { background: #fff0ef; border-color: #fbd9d6; }
.pinpp-root .pinpp-offer:nth-child(4n+4) { background: #eef0fb; border-color: #d9dcef; }
.pinpp-root .pinpp-offer-logo {
    width: 64px;
    height: auto;
    flex: 0 0 64px;
    object-fit: contain;
}
.pinpp-root .pinpp-offer-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* ── About + Tabs ─────────────────────────────────────────────────── */
.pinpp-root .pinpp-about-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-bottom: 12px;
}
.pinpp-root .pinpp-about-title { font-weight: 600; color: #222; font-size: 17px; }
.pinpp-root .pinpp-sku { color: #999; font-size: 13px; letter-spacing: 0.02em; }

.pinpp-root .pinpp-tab-headers {
    display: flex;
    gap: 0;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.pinpp-root .pinpp-tab-header {
    flex: 1 1 0;
    background: #fff;
    border: 0;
    border-right: 1px solid #d9d9d9;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 15px;
}
.pinpp-root .pinpp-tab-header:last-child { border-right: 0; }
.pinpp-root .pinpp-tab-header.is-active {
    background: #fdecee;
    color: #aa1f2c;
    font-weight: 600;
}
.pinpp-root .pinpp-tab-panels {
    padding: 14px 0;
    max-width: 100%;
    overflow-x: auto;
}
.pinpp-root .pinpp-tab-panel { display: none; max-width: 100%; }
.pinpp-root .pinpp-tab-panel.is-active { display: block; }
.pinpp-root .pinpp-tab-body {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    max-width: 100%;
    word-break: break-word;
}
.pinpp-root .pinpp-tab-body table {
    max-width: 100%;
    table-layout: auto;
    word-break: break-word;
}
.pinpp-root .pinpp-tab-body img {
    max-width: 100%;
    height: auto;
}
.pinpp-root .pinpp-tab-empty {
    color: #888;
    font-style: italic;
    font-size: 0.92em;
    padding: 6px 0;
}

/* The default WC description tab callback prints its own H2 ("Description").
 * Hide it — the active pill above already labels the panel. */
.pinpp-root .pinpp-tab-panel > h2:first-child {
    display: none;
}

/* ── Reviews (full-width below the grid) ─────────────────────────────
 *
 * Layout: top row with a "Customer Reviews" heading on the left and a
 * "Show All Reviews" pill button on the right. Below it, a horizontal
 * card carousel with paddle arrows. Clicking "Show All Reviews"
 * expands the full WooCommerce comments_template list underneath. */
.pinpp-root .pinpp-reviews-wrap {
    margin: 24px 0 32px;
    padding-top: 24px;
    border-top: 1px solid #eee;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.pinpp-root .pinpp-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}
.pinpp-root .pinpp-reviews-h {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #111;
}
.pinpp-root .pinpp-reviews-toggle {
    background: #fff;
    border: 1px solid #e63946;
    color: #e63946;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.pinpp-root .pinpp-reviews-toggle:hover {
    background: #fdecee;
}
.pinpp-root .pinpp-reviews-toggle .pinpp-reviews-toggle-arrow {
    font-size: 1.05rem;
    line-height: 1;
}

/* Carousel */
.pinpp-root .pinpp-reviews-carousel {
    position: relative;
    width: 100%;
}
.pinpp-root .pinpp-reviews-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: #d8d8d8 transparent;
}
.pinpp-root .pinpp-reviews-track::-webkit-scrollbar { height: 6px; }
.pinpp-root .pinpp-reviews-track::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 3px;
}

/* Show exactly 5 cards across at desktop width, with the inter-card
 * gap accounted for in the calc(). The track holds 5 cards in view;
 * any additional cards spill into the horizontal scroll and the
 * paddle arrow paginates one card at a time. All typography inherits
 * from the active theme (`font: inherit`) so the cards match the
 * website's font family by default. */
.pinpp-root .pinpp-rev-card {
    flex: 0 0 calc((100% - 4 * 14px) / 5);
    min-width: 0;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    scroll-snap-align: start;
    font-family: inherit;
}
.pinpp-root .pinpp-rev-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.pinpp-root .pinpp-rev-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #4a5567;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: inherit;
}
.pinpp-root .pinpp-rev-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.pinpp-root .pinpp-rev-name {
    font-weight: 600;
    color: #111;
    font-size: 16px;
    line-height: 1.3;
    font-family: inherit;
}
.pinpp-root .pinpp-rev-time {
    color: #666;
    font-size: 14px;
    line-height: 1.3;
    font-family: inherit;
}
.pinpp-root .pinpp-rev-stars {
    margin: 0 0 12px;
    letter-spacing: 2px;
    line-height: 1;
}
.pinpp-root .pinpp-rev-star {
    color: #d4d4d4;
    font-size: 20px;
}
.pinpp-root .pinpp-rev-star.is-on { color: #e63946; }
.pinpp-root .pinpp-rev-text {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
    font-family: inherit;
}

/* Paddle arrows. */
.pinpp-root .pinpp-rev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: #444;
    z-index: 2;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pinpp-root .pinpp-rev-arrow:hover {
    background: #fafafa;
    border-color: #bbb;
}
.pinpp-root .pinpp-rev-arrow-prev { left: -8px; }
.pinpp-root .pinpp-rev-arrow-next { right: -8px; }

/* `.pinpp-reviews-tail` always renders comments_template() — but the
 * comment LIST (#reviews #comments + the Customer Reviews summary box)
 * is hidden until the user clicks "Show All Reviews". The review FORM
 * (#review_form_wrapper) stays visible so customers can post a review
 * without first expanding the list. */
.pinpp-root .pinpp-reviews-tail {
    margin-top: 24px;
}
.pinpp-root .pinpp-reviews-tail #comments {
    display: none;
}
.pinpp-root .pinpp-reviews-tail.is-list-open #comments {
    display: block;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed #e5e5e5;
}
.pinpp-root .pinpp-reviews-tail #review_form_wrapper {
    display: block !important;
}

.pinpp-root .pinpp-reviews-wrap #reviews { padding: 0; margin: 0; }
.pinpp-root .pinpp-reviews-wrap .woocommerce-Reviews-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: #111;
}
.pinpp-root .pinpp-reviews-wrap #comments {
    margin: 0;
    padding: 0;
}

/* Customer-Reviews-for-WooCommerce (Ivole) summary box: average + histogram. */
.pinpp-root .pinpp-reviews-wrap .cr-summaryBox-wrap {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 24px;
    align-items: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 20px;
}
.pinpp-root .pinpp-reviews-wrap .cr-average-rating {
    text-align: center;
}
.pinpp-root .pinpp-reviews-wrap .cr-average-rating span:first-child {
    font-size: 2.4rem;
    font-weight: 700;
    color: #111;
    line-height: 1.1;
    display: block;
}
.pinpp-root .pinpp-reviews-wrap .cr-average-rating .cr-rating-stars {
    display: inline-flex;
    margin: 4px 0 0;
}
.pinpp-root .pinpp-reviews-wrap .cr-total-rating-count {
    color: #555;
    font-size: 0.88em;
    margin-top: 4px;
    display: block;
}
.pinpp-root .pinpp-reviews-wrap .cr-histogramTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}
.pinpp-root .pinpp-reviews-wrap .cr-histogramTable td {
    padding: 4px 8px;
    border: 0;
}
.pinpp-root .pinpp-reviews-wrap .ivole-histogramCell1 { width: 22%; white-space: nowrap; color: #555; }
.pinpp-root .pinpp-reviews-wrap .ivole-histogramCell2 { width: 56%; }
.pinpp-root .pinpp-reviews-wrap .ivole-histogramCell3 { width: 22%; text-align: right; color: #555; }

/* Comment list — avatar + text two-column row.
 *
 * The stacking order inside `.comment-text` is: stars → meta line
 * (author + date) → review body. We deliberately leave the WC
 * `.star-rating` element's internal `position: relative` alone — that
 * relative anchor is what positions the gold-star span over the grey
 * star track. We only neutralise WC's default `float: right` which is
 * what was making the stars overlap the meta line. */
.pinpp-root .pinpp-reviews-wrap ol.commentlist,
.pinpp-root .pinpp-reviews-wrap ul.commentlist {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pinpp-root .pinpp-reviews-wrap .commentlist > li {
    list-style: none;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}
.pinpp-root .pinpp-reviews-wrap .commentlist > li:last-child {
    border-bottom: 0;
}
.pinpp-root .pinpp-reviews-wrap .comment_container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
}
.pinpp-root .pinpp-reviews-wrap .comment_container img.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 48px;
    object-fit: cover;
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    position: static;
}
.pinpp-root .pinpp-reviews-wrap .comment-text {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
/* Stars first, on their own line. We cancel WC's float and the offset
 * theme styles add, but keep `position: relative` and the inner
 * `.star-rating span` in place so the gold-overlay still works. */
.pinpp-root .pinpp-reviews-wrap .comment-text .star-rating,
.pinpp-root .pinpp-reviews-wrap .commentlist .star-rating {
    float: none !important;
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 16px !important;
    color: #f5a623 !important;
}
/* Meta line: bold author, then verified-owner badge, then date. */
.pinpp-root .pinpp-reviews-wrap .comment-text .meta {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: #666;
}
.pinpp-root .pinpp-reviews-wrap .comment-text .meta strong {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    margin-right: 8px;
}
.pinpp-root .pinpp-reviews-wrap .comment-text .meta .verified {
    color: #1f7a3a;
    font-size: 13px;
    font-weight: 500;
    margin: 0 6px;
}
.pinpp-root .pinpp-reviews-wrap .comment-text .description {
    color: #333;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}
.pinpp-root .pinpp-reviews-wrap .comment-text .description p {
    margin: 0 0 8px;
}
.pinpp-root .pinpp-reviews-wrap .comment-text .description p:last-child {
    margin-bottom: 0;
}

/* ── Review form — clean, card-style, with hover-star rating ──────── */
.pinpp-root .pinpp-reviews-wrap #review_form_wrapper {
    margin-top: 24px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 22px 24px;
}
.pinpp-root .pinpp-reviews-wrap #review_form #respond {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
.pinpp-root .pinpp-reviews-wrap #reply-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #111;
    display: block;
}
.pinpp-root .pinpp-reviews-wrap #reply-title small { display: none; }
.pinpp-root .pinpp-reviews-wrap .must-log-in,
.pinpp-root .pinpp-reviews-wrap .comment-notes,
.pinpp-root .pinpp-reviews-wrap .logged-in-as {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px;
}
.pinpp-root .pinpp-reviews-wrap .logged-in-as a { color: #e63946; }

/* Each form field row. */
.pinpp-root .pinpp-reviews-wrap .comment-form-rating,
.pinpp-root .pinpp-reviews-wrap .comment-form-comment,
.pinpp-root .pinpp-reviews-wrap .comment-form-author,
.pinpp-root .pinpp-reviews-wrap .comment-form-email,
.pinpp-root .pinpp-reviews-wrap .comment-form-cookies-consent {
    margin: 0 0 14px;
    padding: 0;
}
.pinpp-root .pinpp-reviews-wrap .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.pinpp-root .pinpp-reviews-wrap .comment-form-rating label,
.pinpp-root .pinpp-reviews-wrap .comment-form-comment label,
.pinpp-root .pinpp-reviews-wrap .comment-form-author label,
.pinpp-root .pinpp-reviews-wrap .comment-form-email label {
    display: block;
    font-weight: 600;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.4;
    color: #222;
}
.pinpp-root .pinpp-reviews-wrap .required {
    color: #e63946;
    margin-left: 2px;
}

/* Author + email side-by-side on wider screens. OceanWP's
 * `#respond .comment-form-author { float:left; width:33.33% }` rule
 * would otherwise pin the inputs to ~33% width inside our grid cell —
 * override width/float so each <p> fills its grid column. */
.pinpp-root .pinpp-reviews-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pinpp-root .pinpp-reviews-wrap .pinpp-reviews-form-row .comment-form-author,
.pinpp-root .pinpp-reviews-wrap .pinpp-reviews-form-row .comment-form-email {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 0;
}

/* Inputs — consistent height, rounded, focus ring matches brand. */
.pinpp-root .pinpp-reviews-wrap .comment-form-comment textarea,
.pinpp-root .pinpp-reviews-wrap textarea.cr-review-form-textbox,
.pinpp-root .pinpp-reviews-wrap .comment-form-author input[type="text"],
.pinpp-root .pinpp-reviews-wrap .comment-form-email input[type="email"] {
    width: 100% !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: #222 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0 !important;
}
.pinpp-root .pinpp-reviews-wrap .comment-form-comment textarea,
.pinpp-root .pinpp-reviews-wrap textarea.cr-review-form-textbox {
    min-height: 110px;
    resize: vertical;
}
.pinpp-root .pinpp-reviews-wrap .comment-form-comment textarea:focus,
.pinpp-root .pinpp-reviews-wrap textarea.cr-review-form-textbox:focus,
.pinpp-root .pinpp-reviews-wrap .comment-form-author input[type="text"]:focus,
.pinpp-root .pinpp-reviews-wrap .comment-form-email input[type="email"]:focus {
    outline: none !important;
    border-color: #e63946 !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
}

/* Star rating — hide the native <select> WooCommerce ships and replace
 * with a hover/click row of clickable stars. The native control still
 * holds the value (kept off-screen for accessibility).
 *
 * WooCommerce wires this up itself: clicking `<a class="star-N">` toggles
 * `.active` on that anchor and `.selected` on the parent `<p class="stars">`.
 * The fill-from-left effect uses the CSS sibling combinator: paint all
 * stars gold in the active state, then revert later siblings of the
 * `.active` star back to grey. */
.pinpp-root .pinpp-reviews-wrap .comment-form-rating select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}
.pinpp-root .pinpp-reviews-wrap p.stars {
    margin: 6px 0 0 !important;
    display: inline-flex;
    gap: 4px;
}
.pinpp-root .pinpp-reviews-wrap p.stars a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d4d4d4;
    font-size: 0;
    border: 0;
    text-decoration: none;
    transition: color 0.12s ease, transform 0.12s ease;
}
.pinpp-root .pinpp-reviews-wrap p.stars a::before {
    content: "\2605";
    font-size: 24px;
    line-height: 1;
}
.pinpp-root .pinpp-reviews-wrap p.stars a:hover {
    transform: scale(1.1);
}
/* Hover: light up everything until the user passes a star. */
.pinpp-root .pinpp-reviews-wrap p.stars:hover a { color: #f5a623; }
.pinpp-root .pinpp-reviews-wrap p.stars:hover a:hover ~ a { color: #d4d4d4; }
/* Selected: light up everything from the start through the .active star. */
.pinpp-root .pinpp-reviews-wrap p.stars.selected a { color: #f5a623; }
.pinpp-root .pinpp-reviews-wrap p.stars.selected a.active ~ a { color: #d4d4d4; }

/* Submit. */
.pinpp-root .pinpp-reviews-wrap .form-submit { margin: 4px 0 0; }
.pinpp-root .pinpp-reviews-wrap .form-submit input[type="submit"] {
    background: #e63946 !important;
    color: #fff !important;
    border: 1px solid #e63946 !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.pinpp-root .pinpp-reviews-wrap .form-submit input[type="submit"]:hover {
    background: #c12839 !important;
    border-color: #c12839 !important;
}
.pinpp-root .pinpp-reviews-wrap .form-submit input[type="submit"]:active {
    transform: translateY(1px);
}

/* Show 4 cards across at large-tablet width. */
@media (max-width: 1280px) {
    .pinpp-root .pinpp-rev-card {
        flex: 0 0 calc((100% - 3 * 14px) / 4);
    }
}
/* Show 3 cards across at small-tablet width. */
@media (max-width: 991px) {
    .pinpp-root .pinpp-rev-card {
        flex: 0 0 calc((100% - 2 * 14px) / 3);
    }
}
/* Tablet / phone — collapse the summary grid, tighten cards. */
@media (max-width: 768px) {
    .pinpp-root .pinpp-reviews-h { font-size: 1.1rem; }
    .pinpp-root .pinpp-reviews-toggle {
        padding: 6px 12px;
        font-size: 0.86rem;
    }
    /* 2 cards across on tablets, with snap so swipes feel paged. */
    .pinpp-root .pinpp-rev-card {
        flex: 0 0 calc((100% - 14px) / 2);
        padding: 14px 16px;
    }
    .pinpp-root .pinpp-rev-arrow { display: none; }

    .pinpp-root .pinpp-reviews-wrap .cr-summaryBox-wrap {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 14px;
    }
    .pinpp-root .pinpp-reviews-wrap .cr-average-rating span:first-child {
        font-size: 2rem;
    }
    .pinpp-root .pinpp-reviews-wrap .commentlist > li {
        padding: 14px 0;
    }
    .pinpp-root .pinpp-reviews-wrap .comment_container {
        gap: 12px;
    }
    .pinpp-root .pinpp-reviews-wrap .comment_container img.avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
    .pinpp-root .pinpp-reviews-wrap .comment-text .meta strong {
        font-size: 15px;
    }
    .pinpp-root .pinpp-reviews-wrap .comment-text .meta {
        font-size: 13px !important;
    }
    .pinpp-root .pinpp-reviews-wrap .comment-text .description {
        font-size: 14px;
        line-height: 1.6;
    }
    .pinpp-root .pinpp-reviews-wrap .comment-text .star-rating {
        font-size: 15px !important;
    }
    .pinpp-root .pinpp-reviews-wrap .cr-histogramTable {
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    .pinpp-root .pinpp-reviews-wrap {
        padding-top: 16px;
        margin: 16px 0 24px;
    }
    .pinpp-root .pinpp-reviews-wrap .woocommerce-Reviews-title {
        font-size: 1rem;
    }
    /* Single card per view on phones, with a peek of the next card. */
    .pinpp-root .pinpp-rev-card {
        flex: 0 0 86%;
    }
    .pinpp-root .pinpp-reviews-form-row {
        grid-template-columns: 1fr !important;
    }
    .pinpp-root .pinpp-reviews-wrap .form-submit input[type="submit"] {
        width: 100% !important;
    }
}

/* ── Cart row ─────────────────────────────────────────────────────── */
/* Two button-row containers depending on product type:
 *   - simple:    buttons sit directly inside <form class="cart">
 *   - variable:  buttons sit inside .woocommerce-variation-add-to-cart
 * Both need to be flex so quantity + Add-to-Cart + Buy-Now stay side-by-side. */
.pinpp-root .pinpp-cart .cart,
.pinpp-root .pinpp-cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
}
/* PPOM fields and the variation table take a full-width row above the buttons. */
.pinpp-root .pinpp-cart .ppom-wrapper,
.pinpp-root .pinpp-cart table.variations,
.pinpp-root .pinpp-cart .single_variation_wrap {
    flex: 1 1 100%;
    width: 100%;
}
/* Shared height + vertical alignment so quantity / Add to Cart / Buy Now
 * all sit on the same baseline with identical visual height. */
.pinpp-root .pinpp-cart .quantity,
.pinpp-root .pinpp-cart .single_add_to_cart_button,
.pinpp-root .pinpp-cart .pisol_buy_now_button,
.pinpp-root .pinpp-cart .pisol_single_buy_now {
    min-height: 50px;
    height: 50px;
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pinpp-root .pinpp-cart .quantity {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.pinpp-root .pinpp-cart .quantity input.qty,
.pinpp-root .pinpp-cart .quantity .minus,
.pinpp-root .pinpp-cart .quantity .plus {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.pinpp-root .pinpp-cart .quantity input.qty {
    padding: 0 6px;
}
.pinpp-root .pinpp-cart .single_add_to_cart_button,
.pinpp-root .pinpp-cart .pisol_buy_now_button,
.pinpp-root .pinpp-cart .pisol_single_buy_now {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center;
    border-radius: 6px !important;
    padding: 0 18px !important;
    font-size: 1.3rem !important;
    font-weight: 600;
    border: 1.5px solid #e63946 !important;
    margin: 0 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    line-height: 1 !important;
}
.pinpp-root .pinpp-cart .cart .single_add_to_cart_button {
    background: #fff !important;
    color: #e63946 !important;
}
.pinpp-root .pinpp-cart .cart .single_add_to_cart_button::before {
    content: "🛒";
    margin-right: 8px;
}
.pinpp-root .pinpp-cart .cart .single_add_to_cart_button:hover {
    background: #fdf0f1 !important;
}
.pinpp-root .pinpp-cart .cart .pisol_buy_now_button,
.pinpp-root .pinpp-cart .cart .pisol_single_buy_now {
    background: #e63946 !important;
    color: #fff !important;
}
.pinpp-root .pinpp-cart .cart .pisol_buy_now_button:hover,
.pinpp-root .pinpp-cart .cart .pisol_single_buy_now:hover {
    background: #c12839 !important;
}

/* PPOM (product addons) — let it span full width above the cart buttons. */
.pinpp-root .pinpp-cart .ppom-wrapper { flex: 1 1 100%; }

/* ── PPOM field styling ──────────────────────────────────────────── */
.pinpp-root .pinpp-cart .ppom-rendering-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
/* PPOM v2 conditional logic hides fields with `.ppom-c-hide`
 * (visibility:hidden + position:absolute + height:0). In a flex column
 * with `gap`, the absolutely-positioned item still leaves a visible gap
 * between its in-flow neighbours. Force a real layout removal. */
.pinpp-root .pinpp-cart .ppom-c-hide {
    display: none !important;
}
.pinpp-root .pinpp-cart .ppom-field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pinpp-root .pinpp-cart .ppom-field-wrapper .form-group {
    margin: 0 !important;
}
/* PPOM and Bootstrap-style row containers ship with `margin: 0 -10px` to
 * cancel the matching `padding: 0 10px` on their cells. Inside our
 * scoped layout the cells don't carry that padding, so the negative
 * margin drags labels and inputs ~10px past our left padding — exactly
 * what was clipping the first letter of every section label. Zero the
 * negative gutters on every container PPOM might use. */
.pinpp-root .pinpp-cart .ppom-wrapper,
.pinpp-root .pinpp-cart .ppom-rendering-fields,
.pinpp-root .pinpp-cart .ppom-field,
.pinpp-root .pinpp-cart .ppom-fields,
.pinpp-root .pinpp-cart .form-group,
.pinpp-root .pinpp-cart .form-row,
.pinpp-root .pinpp-cart .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pinpp-root .pinpp-cart .form-control-label,
.pinpp-root .pinpp-cart label.form-label,
.pinpp-root .pinpp-cart .ppom-field label,
.pinpp-root .pinpp-cart .ppom-field-wrapper > label,
.pinpp-root .pinpp-cart .ppom-field-wrapper .form-group > label {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}
.pinpp-root .pinpp-cart .form-control-label {
    display: block;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.4;
}
.pinpp-root .pinpp-cart .show_required {
    color: #b3261e;
    margin-left: 2px;
}

/* Text inputs and selects — consistent with the rest of the page. */
.pinpp-root .pinpp-cart input.ppom-input[type="text"],
.pinpp-root .pinpp-cart .form-control.text,
.pinpp-root .pinpp-cart select.ppom-input,
.pinpp-root .pinpp-cart .form-select {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    color: #222 !important;
    background: #fff;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease;
    margin: 0 !important;
}
.pinpp-root .pinpp-cart input.ppom-input[type="text"]:focus,
.pinpp-root .pinpp-cart .form-control.text:focus,
.pinpp-root .pinpp-cart select.ppom-input:focus,
.pinpp-root .pinpp-cart .form-select:focus {
    outline: none !important;
    border-color: #e63946 !important;
    box-shadow: 0 0 0 2px rgba(107, 142, 35, 0.12);
}

/* Checkbox group — clean 2-column grid layout at every breakpoint
 * (charm list reads cleaner in two columns than three on the right rail
 * and never collapses to a single column on phones). The parent
 * `.form-group` becomes a 2-col grid; the heading label, injected note,
 * and any validation message span the full row, while option boxes
 * (.form-check-inline / .form-check) take a single column each. */
.pinpp-root .pinpp-cart .ppom-field-wrapper[data-type="checkbox"] .form-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pinpp-root .pinpp-cart .ppom-field-wrapper[data-type="checkbox"] .form-group > *:not(.form-check-inline):not(.form-check) {
    grid-column: 1 / -1;
}
.pinpp-root .pinpp-cart .ppom-field-wrapper[data-type="checkbox"] .form-check-inline,
.pinpp-root .pinpp-cart .ppom-field-wrapper[data-type="checkbox"] .form-check {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Hide the per-option "[+₹30.00]" tag — the per-charm price is
 * communicated once via the .pinpp-charm-note injected above the list. */
.pinpp-root .pinpp-cart .ppom-option-label-price {
    display: none !important;
}

/* Note injected above any priced PPOM checkbox group (see pin-product-page.js). */
.pinpp-root .pinpp-cart .pinpp-charm-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #fdecee;
    border-left: 3px solid #e63946;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #6a1a23;
}
.pinpp-root .pinpp-cart .form-check-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.45;
    color: #333;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}
.pinpp-root .pinpp-cart .form-check-label:hover {
    border-color: #f3a4ab;
    background: #fffafa;
}
.pinpp-root .pinpp-cart input.ppom-check-input[type="checkbox"],
.pinpp-root .pinpp-cart input[type="checkbox"].ppom-input {
    width: 16px !important;
    height: 16px !important;
    accent-color: #e63946;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
}
.pinpp-root .pinpp-cart input.ppom-check-input:checked + .ppom-input-option-label,
.pinpp-root .pinpp-cart input.ppom-check-input[type="checkbox"]:checked ~ .ppom-input-option-label {
    color: #aa1f2c;
    font-weight: 600;
}
.pinpp-root .pinpp-cart .form-check-label:has(input:checked) {
    border-color: #e63946;
    background: #fdecee;
}
.pinpp-root .pinpp-cart .ppom-input-option-label {
    line-height: 1.3;
    flex: 1;
}
.pinpp-root .pinpp-cart .ppom-option-label-price {
    color: #e63946;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    margin-left: auto;
}

/* Tooltip ('?') icon next to the Charms label. */
.pinpp-root .pinpp-cart .ppom-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    vertical-align: middle;
}
.pinpp-root .pinpp-cart .ppom-tooltip-icon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    display: inline-block;
}

/* Price summary table (PRODUCT PRICE / TOTAL). */
.pinpp-root .pinpp-cart .ppom-price-container { margin: 8px 0 0; }
.pinpp-root .pinpp-cart .ppom-price-container table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: #fafafa;
    border-radius: 6px;
    overflow: hidden;
}
.pinpp-root .pinpp-cart .ppom-price-container table.table tr {
    background: transparent !important;
}
.pinpp-root .pinpp-cart .ppom-price-container table.table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #eee !important;
    font-size: 15px;
    color: #333;
    background: transparent;
}
.pinpp-root .pinpp-cart .ppom-price-container table.table td:last-child {
    text-align: right;
    font-weight: 600;
    color: #111;
}
.pinpp-root .pinpp-cart .ppom-price-container table.table tr:last-child td {
    border-bottom: 0 !important;
    font-weight: 700;
    background: #fdecee !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* Desktop large → reduce side padding slightly. */
@media (max-width: 1280px) {
    body.single-product #content-wrap,
    body.single-product #content-wrap.container,
    body.single-product.content-full-screen #content-wrap,
    body.single-product.content-full-width #content-wrap {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Tablet+ → collapse the two-column grid into a single stack. */
@media (max-width: 991px) {
    body.single-product #content-wrap,
    body.single-product #content-wrap.container,
    body.single-product.content-full-screen #content-wrap,
    body.single-product.content-full-width #content-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .pinpp-root .pinpp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pinpp-root .pinpp-mygallery-main {
        max-height: 480px;
    }
}

/* Tablet narrow / phone landscape — out-specify customizer's
 * `body.content-full-screen #content-wrap { padding-right: 4px }`. */
@media (max-width: 768px) {
    body.single-product #content-wrap,
    body.single-product #content-wrap.container,
    body.single-product.content-full-screen #content-wrap,
    body.single-product.content-full-width #content-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Phone → tight, equal side margins. */
@media (max-width: 480px) {
    body.single-product #content-wrap,
    body.single-product #content-wrap.container,
    body.single-product.content-full-screen #content-wrap,
    body.single-product.content-full-width #content-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Tablet → smaller widths, more compact form fields. */
@media (max-width: 768px) {
    .pinpp-root .pinpp-title { font-size: 1.25rem; }
    .pinpp-root .pinpp-price { font-size: 1.35em; }

    /* Gallery: thumbs go below the main image, scroll horizontally. */
    .pinpp-root .pinpp-mygallery {
        flex-direction: column;
    }
    .pinpp-root .pinpp-mygallery-thumbs {
        flex-direction: row;
        flex: 0 0 auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        order: 2;
    }
    .pinpp-root .pinpp-mygallery-thumb {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }
    .pinpp-root .pinpp-mygallery-main {
        order: 1;
        max-height: 420px;
    }

    /* Tabs shrink and wrap. */
    .pinpp-root .pinpp-tab-header {
        padding: 10px 6px;
        font-size: 0.85em;
    }

    /* Cart row: keep quantity inline with Add-to-Cart on the first row,
     * Buy Now on a second row across full width. Quantity stays compact. */
    .pinpp-root .pinpp-cart .cart,
    .pinpp-root .pinpp-cart .woocommerce-variation-add-to-cart {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }
    .pinpp-root .pinpp-cart .quantity {
        flex: 0 0 auto !important;
        max-width: 50% !important;
    }
    /* `flex: 1 1 0` lets the button absorb whatever space remains after
     * the quantity widget, regardless of its actual rendered width.
     * `min-width: 0` is the magic that allows it to shrink below content
     * size — without it the button overflows on narrow viewports. */
    .pinpp-root .pinpp-cart .single_add_to_cart_button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 8px !important;
        font-size: 0.92rem !important;
    }
    .pinpp-root .pinpp-cart .pisol_buy_now_button,
    .pinpp-root .pinpp-cart .pisol_single_buy_now {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* PPOM price summary table: tighten cell padding so values don't push
     * past the right edge on narrow viewports. */
    .pinpp-root .pinpp-cart .ppom-price-container table.table td {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Upload card: stack art/text/button so the Upload Photo button is
     * always visible and full-width on phones. */
    .pinpp-root .pinpp-upload-card {
        flex-direction: column !important;
        text-align: center;
        gap: 10px;
        align-items: center;
    }
    .pinpp-root .pinpp-upload-info {
        text-align: center;
        width: 100%;
    }
    .pinpp-root .pinpp-upload-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        display: block;
    }

    /* Location row: keep flag picker compact. */
    .pinpp-root .pinpp-country {
        min-width: 110px;
        max-width: 130px;
        font-size: 1rem !important;
    }

}

/* Phone → tighter spacing, compact summary. */
@media (max-width: 480px) {
    .pinpp-root .pinpp-grid { gap: 14px; }
    .pinpp-root .pinpp-section { margin: 12px 0; }

    .pinpp-root .pinpp-title { font-size: 1.1rem; }
    .pinpp-root .pinpp-price { font-size: 1.2em; }

    /* On the smallest screens, stack quantity + Add-to-Cart vertically so
     * neither one is forced to a width that overflows the container. */
    .pinpp-root .pinpp-cart .quantity {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        justify-content: flex-start;
    }
    .pinpp-root .pinpp-cart .single_add_to_cart_button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    /* Upload card padding/icon already tightened above; also ensure
     * the offers list and tabs never push out. */
    .pinpp-root .pinpp-tab-headers { flex-wrap: wrap; }
    .pinpp-root .pinpp-tab-header {
        flex: 1 1 50%;
        border-right: 0;
        border-bottom: 1px solid #d9d9d9;
    }
    .pinpp-root .pinpp-tab-header:last-child { border-bottom: 0; }

    /* Gallery thumbs slightly smaller. */
    .pinpp-root .pinpp-mygallery-thumb {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }
    .pinpp-root .pinpp-mygallery-main { max-height: 360px; }

    /* Offer cards. */
    .pinpp-root .pinpp-offer { padding: 6px 10px; gap: 10px; }
    .pinpp-root .pinpp-offer-logo { width: 48px; flex: 0 0 48px; }
    .pinpp-root .pinpp-offer-text { font-size: 0.82em; }

    /* Upload card – tighter padding. */
    .pinpp-root .pinpp-upload-card { padding: 12px; }
    .pinpp-root .pinpp-upload-art { flex: 0 0 56px; width: 56px; height: 56px; }

    /* Location pincode + country: stack vertically when very narrow. */
    .pinpp-root .pinpp-location-row {
        flex-wrap: wrap;
    }
    .pinpp-root .pinpp-country {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
    }
    .pinpp-root .pinpp-pincode {
        flex: 1 1 100%;
    }

    /* About header: SKU under title on phones. */
    .pinpp-root .pinpp-about-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Add-to-Cart success modal ──────────────────────────────────────
 * Centered card with a checkmark icon, message, and two CTAs.
 * Lives outside `.pinpp-root` (in the template's footer block) so the
 * fixed positioning escapes any `transform`/`overflow` ancestors and
 * always renders flush to the viewport. */
.pinpp-cart-modal[hidden] { display: none !important; }
.pinpp-cart-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: inherit;
}
.pinpp-cart-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    animation: pinppFade 0.18s ease-out;
}
.pinpp-cart-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: pinppPop 0.2s ease-out;
    box-sizing: border-box;
}
.pinpp-cart-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}
.pinpp-cart-modal-close:hover {
    background: #f1f1f1;
    color: #222;
}
.pinpp-cart-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #e8f7ec;
    color: #1f7a3a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pinpp-cart-modal-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}
.pinpp-cart-modal-msg {
    margin: 0 0 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}
.pinpp-cart-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pinpp-cart-modal-actions > * {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pinpp-cart-modal-shop {
    background: #fff;
    color: #e63946;
    border: 1.5px solid #e63946;
}
.pinpp-cart-modal-shop:hover {
    background: #fdecee;
}
.pinpp-cart-modal-checkout {
    background: #e63946;
    color: #fff !important;
    border: 1.5px solid #e63946;
}
.pinpp-cart-modal-checkout:hover {
    background: #c12839;
    border-color: #c12839;
}
body.pinpp-modal-open {
    overflow: hidden;
}
@keyframes pinppFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pinppPop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
    .pinpp-cart-modal-card {
        padding: 22px 18px 18px;
        max-width: 100%;
    }
    .pinpp-cart-modal-actions {
        flex-direction: column;
    }
    .pinpp-cart-modal-actions > * {
        width: 100%;
    }
}

/* Inline error notice prepended to the cart form when add-to-cart
 * AJAX fails server-side (e.g. PPOM required field missing). */
.pinpp-root form.cart .pinpp-cart-error {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fdecee;
    border: 1px solid #f5c2c7;
    color: #842029;
    font-size: 14px;
    line-height: 1.45;
}

/* The Add-to-Cart button shows a small spinner while the AJAX request
 * is in flight (jQuery toggles `.loading` for us). */
.pinpp-root .single_add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.pinpp-root .single_add_to_cart_button.loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    margin-left: 8px;
    display: inline-block;
    animation: pinppSpin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes pinppSpin {
    to { transform: rotate(360deg); }
}

/* Mobile sticky CTA bar */
.pinpp-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .pinpp-sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--pinpp-nav-offset, 0px);
        z-index: 9998;
        display: flex;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
    }
    body.single-product {
        padding-bottom: calc(78px + var(--pinpp-nav-offset, 0px));
    }
    .pinpp-sticky-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 54px;
        border-radius: 6px;
        border: 1.5px solid #e63946;
        background: #fff;
        color: #e63946;
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        line-height: 1;
        padding: 0 12px;
        box-sizing: border-box;
        white-space: nowrap;
        text-transform: none;
        -webkit-tap-highlight-color: transparent;
    }
    .pinpp-sticky-btn:hover,
    .pinpp-sticky-btn:focus {
        background: #fdf0f1;
        outline: none;
    }
    .pinpp-sticky-buy {
        background: #e63946;
        color: #fff;
    }
    .pinpp-sticky-buy:hover,
    .pinpp-sticky-buy:focus {
        background: #c12839;
    }
    .pinpp-sticky-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .pinpp-sticky-btn.loading {
        opacity: 0.7;
        pointer-events: none;
    }
    .pinpp-root .pinpp-cart .single_add_to_cart_button,
    .pinpp-root .pinpp-cart .pisol_single_buy_now,
    .pinpp-root .pinpp-cart .pisol_buy_now_button {
        display: none !important;
    }
    body.single-product .gsb-buttons,
    body.single-product .gsb-buttons.right-side,
    body.single-product .gsb-buttons.left-side {
        bottom: calc(var(--pinpp-nav-offset, 0px) + 50px) !important;
    }
}

@media (max-width: 480px) {
    .pinpp-sticky-btn {
        font-size: 1.15rem;
        padding: 0 8px;
    }
    .pinpp-sticky-icon svg {
        width: 22px;
        height: 22px;
    }
    body.single-product {
        padding-bottom: calc(74px + var(--pinpp-nav-offset, 0px));
    }
}