.elementor-233 .elementor-element.elementor-element-a6a51a2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-233 .elementor-element.elementor-element-a6a51a2:not(.elementor-motion-effects-element-type-background), .elementor-233 .elementor-element.elementor-element-a6a51a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEF9;}.elementor-233 .elementor-element.elementor-element-d020c58{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-233 .elementor-element.elementor-element-d020c58:not(.elementor-motion-effects-element-type-background), .elementor-233 .elementor-element.elementor-element-d020c58 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEF9;}.elementor-233 .elementor-element.elementor-element-07c0c73{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -35px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for shortcode, class: .elementor-element-d65108c */@import url('https://fonts.googleapis.com/css2?family=Ysabeau:wght@400;500;600;700;800&display=swap');

/* ================================================================
   PRODUCT HERO  [pickle_product_hero_v8]
   Paste in Elementor → Shortcode widget → Advanced → Custom CSS
   ================================================================ */

/* ── LAYOUT ─────────────────────────────────────────────────── */
.pickle-product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 32px;
    font-family: 'Ysabeau', sans-serif;
    align-items: start;
}

/* ── GALLERY ─────────────────────────────────────────────────── */
.pp-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }

.pp-main-img {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f4f2;
    border: 1px solid #ebebeb;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.pp-main-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}
.pp-main-img:hover img { transform: scale(1.03); }

/* Stock badge overlaid on image */
.pp-img-stock-badge {
    position: absolute;
    bottom: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Ysabeau', sans-serif;
    backdrop-filter: blur(6px);
}
.pp-img-stock-badge.is-stock  { background: rgba(212,237,218,0.92); color: #155724; border: 1px solid #c3e6cb; }
.pp-img-stock-badge.oos-stock { background: rgba(248,215,218,0.92); color: #721c24; border: 1px solid #f5c6cb; }
.pp-img-stock-badge .blink-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.is-stock  .blink-dot { background: #28a745; animation: pulse-green 2s ease-out infinite; }
.oos-stock .blink-dot { background: #dc3545; animation: pulse-red   2s ease-out infinite; }

@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(40,167,69,.6)} 50%{box-shadow:0 0 0 5px rgba(40,167,69,0)} }
@keyframes pulse-red   { 0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,.6)} 50%{box-shadow:0 0 0 5px rgba(220,53,69,0)} }

/* Thumbnails */
.pp-thumbs {
    display: flex; gap: 10px;
    overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
}
.pp-thumbs::-webkit-scrollbar { display: none; }

.pp-thumb {
    width: 68px; height: 68px; flex-shrink: 0;
    border-radius: 10px;
    border: 2px solid transparent;
    overflow: hidden; cursor: pointer;
    opacity: 0.65;
    background: #f4f4f2;
    transition: all 0.2s;
}
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb:hover { opacity: 1; border-color: #ccc; }
.pp-thumb.active { opacity: 1; border-color: #000; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* ── RIGHT COLUMN ────────────────────────────────────────────── */
.pp-right { display: flex; flex-direction: column; gap: 0; }

.pp-title {
    font-size: 28px; font-weight: 800;
    color: #0a0a0a;
    line-height: 1.15;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: 'Ysabeau', sans-serif;
}

.pp-desc {
    font-size: 14px; line-height: 1.65;
    color: #555;
    font-weight: 500;
    margin: 0 0 16px;
    font-family: 'Ysabeau', sans-serif;
}
.pp-desc p { margin: 0 0 8px; }
.pp-desc p:last-child { margin: 0; }

/* Divider */
.pp-divider { height: 1px; background: #ebebeb; margin: 0 0 16px; }

/* Stock text row (hidden — badge on image handles it visually) */
.pp-stock-area { margin-bottom: 16px; }
.live-stock-indicator {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800;
    padding: 5px 12px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-family: 'Ysabeau', sans-serif;
}
.in-stock  { color: #155724; background: #d4edda; border: 1px solid #c3e6cb; }
.out-stock { color: #721c24; background: #f8d7da; border: 1px solid #f5c6cb; }
.in-stock  .blink-dot { background: #28a745; width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: pulse-green 2s ease-out infinite; }
.out-stock .blink-dot { background: #dc3545; width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: pulse-red   2s ease-out infinite; }

/* ── WEIGHT SELECTION ────────────────────────────────────────── */
.pp-weight-section { margin-bottom: 20px; }
.pp-lbl {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: #888; display: block; margin-bottom: 8px;
    font-family: 'Ysabeau', sans-serif;
}
.pp-weight-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-wt-btn {
    background: #fff; border: 1.5px solid #d0d0d0;
    color: #222; padding: 8px 18px;
    font-size: 13px; font-weight: 700;
    border-radius: 6px; cursor: pointer;
    transition: all 0.2s;
    font-family: 'Ysabeau', sans-serif;
    min-width: 72px;
}
.pp-wt-btn:hover  { border-color: #888; }
.pp-wt-btn.selected {
    border-color: #000; background: #000; color: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}

/* ── PRODUCT PROFILE + IDEAL WITH ───────────────────────────── */
.pp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.pp-section.compact { padding: 14px 16px; margin: 0; }
.border-left { border-left: 1px solid #ebebeb; }

.pp-sec-lbl {
    display: block;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: #bbb; margin-bottom: 10px;
    font-family: 'Ysabeau', sans-serif;
}

/* Profile split */
.pp-split { display: flex; align-items: center; gap: 10px; }
.pp-f-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pp-f-row {
    font-size: 11px; color: #222; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    font-family: 'Ysabeau', sans-serif;
}
.pp-f-row .dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.1);
}
.pp-f-row b {
    margin-left: auto; font-size: 10px;
    font-weight: 800; color: #000;
    min-width: 28px; text-align: right;
}
.pp-chart {
    width: 52px; height: 52px; flex-shrink: 0;
    transform: rotate(-90deg);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}
.pp-chart svg { width: 100%; height: 100%; display: block; }

/* Ideal With */
.pp-ideal-col { display: flex; flex-direction: column; gap: 6px; }
.pp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: #333;
    font-family: 'Ysabeau', sans-serif;
}

/* ── ACTION BAR ─────────────────────────────────────────────── */
.pp-action-bar { display: flex; flex-direction: column; gap: 16px; }

/* Price row */
.pp-price-row { }
.pp-price-area { }
.pp-price {
    font-family: 'Ysabeau', sans-serif;
    font-size: 30px; font-weight: 800; color: #000;
    line-height: 1;
    margin: 4px 0 2px;
}
.pp-price del { font-size: 18px; color: #999; font-weight: 400; margin-right: 6px; }
.pp-price ins { text-decoration: none; color: #bc2d3c; }
.pp-price-hint {
    font-size: 12px; color: #bc2d3c;
    font-weight: 700; margin-top: 4px;
    font-family: 'Ysabeau', sans-serif;
}

/* Cart actions row */
.pp-cart-actions {
    display: flex; gap: 12px; align-items: flex-end;
}

.pp-qty-section { display: flex; flex-direction: column; gap: 6px; }
.pp-qty-wrap {
    display: flex; align-items: center;
    border: 1.5px solid #d0d0d0; border-radius: 8px;
    overflow: hidden; height: 50px; width: 120px;
    background: #fff;
}
.qty-btn {
    width: 38px; height: 100%;
    background: #f5f5f5; border: none;
    font-weight: 800; cursor: pointer;
    color: #000; font-size: 20px;
    transition: background 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: #ebebeb; }
#ppQtyInput {
    flex: 1; height: 100%; text-align: center;
    border: none; font-weight: 700; font-size: 17px;
    background: #fff !important; color: #000 !important;
    outline: none; padding: 0;
    font-family: 'Ysabeau', sans-serif;
}

.pp-btn-section { flex: 1; display: flex; flex-direction: column; }

.pp-btn-wrapper { position: relative; width: 100%; }

.pp-add-btn {
    width: 100%; height: 50px;
    background: #000; color: #fff;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.22s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Ysabeau', sans-serif;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.pp-add-btn:hover:not(.disabled) { background: #bc2d3c; box-shadow: 0 6px 20px rgba(188,45,60,0.3); transform: translateY(-1px); }
.pp-add-btn.disabled { background: #d0d0d0; color: #999; cursor: not-allowed; box-shadow: none; transform: none; }

/* Tooltip */
.pp-tooltip-text {
    visibility: hidden; width: 160px;
    background: #111; color: #fff;
    text-align: center; border-radius: 6px;
    padding: 8px 0; position: absolute;
    z-index: 10; bottom: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity 0.2s;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    font-family: 'Ysabeau', sans-serif;
}
.pp-tooltip-text::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    margin-left: -5px; border: 5px solid transparent;
    border-top-color: #111;
}
.pp-btn-wrapper.tooltip-active:hover .pp-tooltip-text { visibility: visible; opacity: 1; }

.hidden-cart-form, .simple-cart-form { display: contents; }

/* ── TRUST BADGES ────────────────────────────────────────────── */
.pp-trust-row {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 12px 14px;
    background: #f8f8f6;
    border: 1px solid #ebebeb;
    border-radius: 10px;
}
.pp-trust-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700;
    color: #444; text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: 'Ysabeau', sans-serif;
}

/* ================================================================
   UPSELLS  "You May Also Like"
   ================================================================ */
.pp-upsells-wrapper {
    max-width: 1200px; margin: 40px auto 0;
    padding: 0 24px 40px;
    font-family: 'Ysabeau', sans-serif;
    border-top: 1px solid #ebebeb;
    padding-top: 36px;
}

/* Header row */
.pp-upsells-head {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.pp-upsells-title {
    font-size: 20px; font-weight: 800; color: #0a0a0a;
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 0; font-family: 'Ysabeau', sans-serif;
}

/* Arrow buttons */
.pp-upsells-arrows { display: flex; gap: 8px; }
.pp-uparr {
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: #1a1a1a;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s; flex-shrink: 0;
    font-size: 22px; font-weight: 300; line-height: 1;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    padding: 0 0 2px 0;
}
.pp-uparr:hover { background: #bc2d3c; transform: scale(1.08); }
.pp-uparr.pp-arr-hidden { opacity: 0; pointer-events: none; }

/* Scrollable track */
.pp-upsells-track {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
}
.pp-upsells-track::-webkit-scrollbar { display: none; }

/* ── UPSELL CARD ─────────────────────────────────────────────── */
.pp-up-card {
    flex: 0 0 calc(25% - 12px); /* 4 cards visible */
    scroll-snap-align: start;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ebebeb;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pp-up-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.09);
    border-color: #d8d8d8;
}

/* Card image */
.pp-up-img-wrap {
    display: block; position: relative;
    aspect-ratio: 1/1; overflow: hidden;
    background: #f4f4f2; flex-shrink: 0;
}
.pp-up-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.35s ease;
}
.pp-up-card:hover .pp-up-img-wrap img { transform: scale(1.05); }

.pp-up-cat {
    position: absolute; top: 8px; left: 8px;
    background: rgba(10,10,10,0.65); color: #fff;
    font-size: 9px; font-weight: 800;
    padding: 3px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 0.6px;
    font-family: 'Ysabeau', sans-serif;
}

/* Card info */
.pp-up-info {
    padding: 12px 14px 14px;
    display: flex; flex-direction: column;
    gap: 8px; flex: 1;
}
.pp-up-name {
    font-size: 13px; font-weight: 700; color: #111;
    text-decoration: none; line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Ysabeau', sans-serif;
    transition: color 0.18s;
    flex: 1;
}
.pp-up-name:hover { color: #bc2d3c; }

/* Footer row inside card */
.pp-up-footer {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.pp-up-price {
    font-size: 15px; font-weight: 800; color: #bc2d3c;
    font-family: 'Ysabeau', sans-serif; line-height: 1;
}
.pp-up-price del { font-size: 11px; color: #bbb; font-weight: 400; margin-right: 2px; }
.pp-up-price ins { text-decoration: none; color: #bc2d3c; }
.up-from { font-size: 9px; color: #aaa; font-weight: 600; display: block; margin-bottom: 1px; }

/* Controls (select + button together for variable) */
.pp-up-controls {
    display: flex; gap: 6px; align-items: center;
    flex-wrap: nowrap;
}
.pp-up-select {
    flex: 1; min-width: 0;
    padding: 6px 8px;
    border: 1.5px solid #ddd; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: #333; background: #fafafa;
    font-family: 'Ysabeau', sans-serif;
    cursor: pointer; outline: none;
    transition: border-color 0.18s;
}
.pp-up-select:focus { border-color: #000; }

.pp-up-btn {
    padding: 8px 14px;
    background: #111; color: #fff;
    border: 1.5px solid #111;
    border-radius: 6px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Ysabeau', sans-serif;
}
.pp-up-btn:hover:not(.disabled) { background: #bc2d3c; border-color: #bc2d3c; }
.pp-up-btn.disabled { background: #f0f0f0; color: #bbb; border-color: #e8e8e8; cursor: not-allowed; }
.pp-up-btn.pp-up-btn-added { background: #155724; border-color: #155724; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Large tablet */
@media (max-width: 1100px) {
    .pp-up-card { flex: 0 0 calc(33.33% - 11px); }
}

/* Tablet */
@media (max-width: 900px) {
    .pickle-product-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
    .pp-gallery { position: static; }
    .pp-title { font-size: 22px; }
    .pp-price { font-size: 26px; }
    .pp-info-grid { grid-template-columns: 1fr 1fr; }
    .pp-upsells-wrapper { padding: 28px 20px 32px; }
    .pp-up-card { flex: 0 0 calc(50% - 8px); }
}

/* Mobile */
@media (max-width: 640px) {
    .pickle-product-hero { padding: 16px; gap: 20px; }
    .pp-title { font-size: 19px; }
    .pp-desc  { font-size: 13px; }
    .pp-price { font-size: 22px; }

    .pp-info-grid { grid-template-columns: 1fr; }
    .border-left  { border-left: none; border-top: 1px solid #ebebeb; }

    .pp-cart-actions { flex-direction: row; align-items: flex-end; }
    .pp-qty-wrap { width: 108px; }

    .pp-trust-row { gap: 10px; }
    .pp-trust-item { font-size: 10px; }

    .pp-upsells-wrapper { padding: 24px 16px 28px; }
    .pp-upsells-title { font-size: 17px; }
    .pp-up-card { flex: 0 0 calc(50% - 8px); }
    .pp-up-name { font-size: 12px; }
    .pp-up-price { font-size: 13px; }
    .pp-up-btn { padding: 7px 10px; font-size: 10px; }
    .pp-up-select { font-size: 10px; padding: 5px 6px; }
    .pp-up-controls { flex-wrap: wrap; }
}

/* Very small screens */
@media (max-width: 380px) {
    .pp-up-card { flex: 0 0 calc(50% - 6px); }
    .pp-upsells-track { gap: 12px; }
    .pp-weight-grid { gap: 6px; }
    .pp-wt-btn { padding: 7px 12px; font-size: 12px; min-width: 60px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-07c0c73 */@import url('https://fonts.googleapis.com/css2?family=Ysabeau:wght@400;500;600;700;800&display=swap');

/* --- BRANDED SECTION HEADING --- */
.ph-section-heading-wrapper {
    margin-bottom: 40px;
    font-family: 'Ysabeau', sans-serif;
    width: 100%;
}

/* The small red text above the main title */
.ph-heading-sub {
    display: block;
    color: #bc2d3c; /* Brand Red */
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* The main big title */
.ph-heading-main {
    color: #000;
    font-size: 40px;
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.2;
    text-transform: capitalize;
}

/* The red accent underline */
.ph-heading-accent {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: #bc2d3c; /* Brand Red */
    border-radius: 4px;
}

/* Handle alignments for the accent line */
.ph-section-heading-wrapper[style*="text-align: left"] .ph-heading-accent { margin-left: 0; }
.ph-section-heading-wrapper[style*="text-align: center"] .ph-heading-accent { margin: 0 auto; }
.ph-section-heading-wrapper[style*="text-align: right"] .ph-heading-accent { margin-right: 0; }

/* Mobile Optimization */
@media (max-width: 768px) {
    .ph-heading-main { font-size: 32px; }
    .ph-heading-sub { font-size: 12px; }
    .ph-section-heading-wrapper { margin-bottom: 30px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-0fb7d5c */@import url('https://fonts.googleapis.com/css2?family=Ysabeau:wght@400;500;600;700;800&display=swap');

/* ============================================================
   [pickle_related_products] & [pickle_budget_picks]
   Paste in Elementor → Shortcode Widget → Advanced → Custom CSS
   OR in Elementor → Site Settings → Custom CSS (loads globally)
   ============================================================ */

.prp-wrapper { margin: 56px 0; font-family: 'Ysabeau', sans-serif; }
.prp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 0 2px; }
.prp-title { font-size: 22px; font-weight: 800; color: #0a0a0a; margin: 0; text-transform: uppercase; letter-spacing: 0.8px; font-family: 'Ysabeau', sans-serif; }
.prp-title span { color: #bc2d3c; }
.pbp-wrapper .prp-title span { color: #1b7a34; }

/* Arrows */
.prp-arrows { display: flex; gap: 8px; }
.prp-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: #1a1a1a;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s; flex-shrink: 0;
    font-size: 22px; font-weight: 300; line-height: 1;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    padding: 0 0 2px 0;
}
.prp-arrow:hover { background: #bc2d3c; transform: scale(1.08); }
.prp-arrow.prp-arr-hidden { opacity: 0; pointer-events: none; }
.pbp-wrapper .prp-arrow:hover { background: #1b7a34; }

/* Track */
.prp-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.prp-track::-webkit-scrollbar { display: none; }

/* Card */
.prp-card { flex: 0 0 calc(20% - 13px); scroll-snap-align: start; background: #fff; border-radius: 14px; border: 1px solid #ebebeb; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: relative; }
.prp-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); border-color: #d8d8d8; }

/* Image */
.prp-img-wrap { display: block; position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f6f6f6; flex-shrink: 0; }
.prp-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.38s ease; display: block; }
.prp-card:hover .prp-img-wrap img { transform: scale(1.06); }
.prp-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.18) 0%, transparent 45%); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.prp-card:hover .prp-img-overlay { opacity: 1; }

/* Badges */
.prp-cat { position: absolute; top: 9px; left: 9px; background: rgba(15,15,15,0.70); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.7px; font-family: 'Ysabeau', sans-serif; }
.prp-badge { position: absolute; top: 9px; right: 9px; font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Ysabeau', sans-serif; }
.prp-badge.value { background: #e6f4ea; color: #1b5e20; border: 1px solid #a5d6a7; }

/* Card body */
.prp-card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prp-top { display: flex; flex-direction: column; gap: 3px; }
.prp-card-title { font-size: 13px; font-weight: 700; color: #111; text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Ysabeau', sans-serif; transition: color 0.18s; }
.prp-card-title:hover { color: #bc2d3c; }
.prp-wt { font-size: 11px; color: #999; font-weight: 600; }

/* Info block */
.prp-info-block { background: #f8f8f8; border: 1px solid #eeeeee; border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 0; flex: 1; }
.prp-lbl { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; color: #aaa; margin-bottom: 6px; font-family: 'Ysabeau', sans-serif; }

/* Product Profile */
.prp-split { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prp-f-list { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prp-f-row { display: flex; align-items: center; gap: 5px; font-size: 10px; font-family: 'Ysabeau', sans-serif; color: #333; font-weight: 600; }
.prp-f-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: #333; }
.prp-f-row b { font-size: 10px; font-weight: 800; color: #111; min-width: 28px; text-align: right; }
.prp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.08); }

/* Pie chart */
.prp-chart-wrap { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.prp-pie { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }

/* Ideal With */
.prp-ideal-sec { border-top: 1px dashed #e4e4e4; margin-top: 8px; padding-top: 8px; }
.prp-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.prp-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 3px 8px; font-family: 'Ysabeau', sans-serif; border: 1px solid; }
.prp-pill-bf { background: #fffbf0; color: #7a5000; border-color: #f5d78e; }
.prp-pill-ln { background: #f5f5f5; color: #333; border-color: #ddd; }
.prp-pill-sn { background: #fff0f0; color: #7a1a1a; border-color: #f5b8b8; }

/* Footer */
.prp-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0; margin-top: auto; }
.prp-price { font-size: 15px; font-weight: 800; color: #bc2d3c; font-family: 'Ysabeau', sans-serif; line-height: 1; }
.prp-price del { font-size: 11px; color: #bbb; font-weight: 400; margin-right: 2px; }
.prp-price ins { text-decoration: none; color: #bc2d3c; }
.prp-from { font-size: 9px; font-weight: 600; color: #aaa; margin-right: 1px; display: block; }
.pbp-wrapper .prp-price,
.pbp-wrapper .prp-price ins { color: #1b7a34; }

/* Buttons */
.prp-btn { font-size: 11px; font-weight: 800; padding: 8px 12px; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.2s; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; font-family: 'Ysabeau', sans-serif; display: inline-flex; align-items: center; gap: 3px; }
.prp-btn-ajax { background: #111; color: #fff; border-color: #111; }
.prp-btn-ajax:hover { background: #bc2d3c; border-color: #bc2d3c; }
.prp-btn-ajax.prp-added { background: #155724; border-color: #155724; }
.prp-btn-var { background: #fff; color: #111; border-color: #bbb; }
.prp-btn-var:hover { background: #111; color: #fff; border-color: #111; }
.pbp-wrapper .prp-btn-ajax:hover { background: #1b7a34; border-color: #1b7a34; }

/* View All */
.prp-view-all { text-align: center; margin-top: 28px; }
.prp-view-btn { display: inline-block; padding: 12px 36px; border: 1.5px solid #bc2d3c; color: #bc2d3c; border-radius: 7px; font-size: 12px; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 0.8px; transition: all 0.22s; font-family: 'Ysabeau', sans-serif; }
.prp-view-btn:hover { background: #bc2d3c; color: #fff; }
.pbp-wrapper .prp-view-btn { border-color: #1b7a34; color: #1b7a34; }
.pbp-wrapper .prp-view-btn:hover { background: #1b7a34; color: #fff; }

/* Responsive */
@media (max-width: 1100px) { .prp-card { flex: 0 0 calc(25% - 12px); } }
@media (max-width: 900px)  { .prp-card { flex: 0 0 calc(33.33% - 11px); } .prp-title { font-size: 19px; } }
@media (max-width: 640px)  {
    .prp-wrapper { margin: 36px 0; }
    .prp-card { flex: 0 0 calc(50% - 8px); }
    .prp-title { font-size: 16px; }
    .prp-card-body { padding: 10px 11px 12px; gap: 8px; }
    .prp-card-title { font-size: 12px; }
    .prp-price { font-size: 13px; }
    .prp-btn { font-size: 10px; padding: 7px 9px; }
    .prp-info-block { padding: 8px 9px; }
    .prp-chart-wrap { width: 38px; height: 38px; }
    .prp-view-btn { font-size: 11px; padding: 10px 24px; }
    .prp-arrow { width: 32px; height: 32px; }
    .prp-arrow svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) { .prp-card { flex: 0 0 calc(50% - 6px); } .prp-track { gap: 12px; } }/* End custom CSS */