/* ==========================================================================
   Product Landing Page — Design Tokens & Components
   Loaded ONLY on the product detail page (frontend.product.product_details).
   Layered on top of the existing Wolmart/Bootstrap storefront styles —
   not a replacement framework. Palette matches
   public/frontend_assets/css/custom-theme.css (Sunan Sweets — Burgundy &
   Bronze Gold).
   ========================================================================== */

:root {
    --pl-radius: 14px;
    --pl-radius-sm: 10px;
    --pl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --pl-shadow-md: 0 4px 16px rgba(0, 0, 0, .08);

    /* Brand primary — Burgundy (headings, body text on this page's cards).
       Aliased to the site-wide theme variables (Admin > Settings > Theme
       Colors, see docs/site-theme-settings/) so this page's palette stays
       in sync with the rest of the storefront. --pl-primary-dark stays a
       hardcoded shade of primary, not a separate admin field. */
    --pl-primary: var(--theme-primary, #5C1420);
    --pl-primary-dark: #3E0D16;

    /* Single sparingly-used accent — Soft Gold (buy button, discount badge,
       trust icons), matching CLAUDE.md's design direction and the existing
       .btn-primary gold used elsewhere on the storefront */
    --pl-accent: var(--theme-accent, #C9A227);
    --pl-accent-hover: var(--theme-accent-hover, #B08D1F);
    --pl-accent-soft: rgba(201, 162, 39, .12);

    --pl-danger: #EF4444;
    --pl-success: #22C55E;
    --pl-bg-soft: var(--theme-soft-bg, #F7EFE3);
    /* Ivory, matches brand palette. Aliased to the site-wide theme
       variable (Admin > Settings > Theme Colors) so cream note boxes
       (e.g. Cash on Delivery) are admin-editable. */
    --pl-border: #E5E7EB;

    /* Poppins is loaded via Google Fonts link in frontend/master.blade.php;
       Inter kept as a secondary fallback in case it's ever added */
    --pl-font: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Scope wrapper for the product landing sections built in prompt 04 */
.product-landing-page {
    font-family: var(--pl-font);
}

/* ---- Soft card (benefit cards, spec table wrapper, FAQ wrapper) ---- */
.card-soft {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-sm);
    font-family: var(--pl-font);
}

/* ---- Trust badge chip ---- */
.badge-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--pl-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pl-primary);
    background: var(--pl-accent-soft);
    border: 1px solid rgba(201, 162, 39, .35);
    border-radius: 999px;
}

.badge-trust i,
.badge-trust svg {
    color: var(--pl-accent-hover);
    font-size: 14px;
}

/* ---- Price block ---- */
.price-current {
    font-family: var(--pl-font);
    font-weight: 700;
    font-size: 28px;
    color: var(--pl-primary);
}

.price-old {
    font-family: var(--pl-font);
    font-size: 16px;
    color: #9CA3AF;
    text-decoration: line-through;
    margin-left: 8px;
}

.badge-discount {
    display: inline-block;
    padding: 3px 10px;
    margin-left: 8px;
    font-family: var(--pl-font);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--pl-accent);
    border-radius: 999px;
    vertical-align: middle;
}

.pl-offer-badge {
    display: inline-block;
    margin: 8px 0;
    padding: 8px 14px;
    font-family: var(--pl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-primary);
    background: var(--pl-accent-soft);
    border: 1px dashed var(--pl-accent);
    border-radius: var(--pl-radius-sm);
}

/* ---- Sticky buy button (desktop right rail / mobile bottom bar) ----
   Actual sticky positioning is built in prompt 04/05; this only styles
   the button surface itself. */
.btn-buy-sticky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    font-family: var(--pl-font);
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background: var(--pl-accent);
    border: none;
    border-radius: var(--pl-radius-sm);
    box-shadow: var(--pl-shadow-md);
    transition: background-color .2s ease, transform .15s ease;
}

.btn-buy-sticky:hover,
.btn-buy-sticky:focus {
    background: var(--pl-accent-hover);
    color: #fff;
}

.btn-buy-sticky:active {
    transform: scale(.98);
}

/* ---- Gallery thumbnail selected state ---- */
.gallery-thumb {
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s ease;
}

.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--pl-accent);
}

/* ---- Color/size variant selector ---- */
.variant-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-family: var(--pl-font);
    font-size: 14px;
    color: var(--pl-primary);
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.variant-swatch.selected {
    border-color: var(--pl-accent);
    background: var(--pl-accent-soft);
    box-shadow: inset 0 0 0 1px var(--pl-accent);
}

.variant-swatch.out-of-stock {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ==========================================================================
   Landing page (frontend.product.landing) — extra sections not shared
   with product_details: hero/buy-box layout, variant picker cards,
   shipping/order form, mobile sticky bar, reviews.
   ========================================================================== */

.pl-hero-gallery {
    padding: 16px;
}

/* Theme's .product-single-swiper img only sets display:block, so the
   hardcoded width/height attrs on the <img> keep it at a fixed 800x900
   box on every screen. Force it to fill its slide and scale with the
   container instead. */
.pl-hero-gallery .product-image img,
.pl-hero-gallery .product-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.pl-buy-box {
    padding: 24px;
}

@media (min-width: 768px) {
    .pl-buy-box-sticky {
        position: sticky;
        top: 100px;
    }
}

.pl-rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.pl-short-desc {
    color: #555;
    margin: 14px 0;
}

.pl-section {
    margin-top: 40px;
}

.pl-section-title {
    font-family: var(--pl-font);
    font-weight: 700;
    color: var(--pl-primary);
    margin-bottom: 20px;
}

.pl-benefit-card {
    padding: 20px;
    text-align: center;
    height: 100%;
}

.pl-benefit-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pl-accent-soft);
    color: var(--pl-accent-hover);
    font-size: 18px;
    margin-bottom: 12px;
}

.pl-benefit-card p {
    font-family: var(--pl-font);
    font-weight: 600;
    color: var(--pl-primary);
    margin: 0;
}

/* Pre-BS5 storefront (prompt 03): plain flexbox padding-bottom
           technique instead of the BS5-only .ratio helper. */
.pl-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.pl-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pl-faq-item {
    border-bottom: 1px solid var(--pl-border);
}

.pl-faq-item:last-child {
    border-bottom: none;
}

.pl-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px;
    cursor: pointer;
    font-family: var(--pl-font);
    font-weight: 600;
    color: var(--pl-primary);
}

.pl-faq-question i {
    color: var(--pl-accent-hover);
    transition: transform .2s ease;
}

.pl-faq-item.pl-open .pl-faq-question i {
    transform: rotate(180deg);
}

.pl-faq-answer {
    display: none;
    padding: 0 4px 16px;
    color: #555;
}

.pl-trust-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pl-border);
}

.pl-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.pl-trust-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pl-accent-soft);
    color: var(--pl-accent-hover);
    font-size: 15px;
}

.pl-trust-item span {
    font-family: var(--pl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--pl-primary);
    line-height: 1.3;
}

/* Variant selection cards (image + radio + own qty stepper + price) */
.pl-variant-heading {
    margin-bottom: 10px;
    font-family: var(--pl-font);
    font-weight: 700;
    color: var(--pl-primary);
}

.pl-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .pl-variant-grid {
        grid-template-columns: 1fr;
    }
}

.pl-variant-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--pl-border);
    border-radius: var(--pl-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    margin: 0;
}

.pl-variant-card:hover {
    border-color: var(--pl-accent);
    box-shadow: var(--pl-shadow-sm);
}

.pl-variant-card.selected {
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 1px var(--pl-accent), var(--pl-shadow-sm);
    background: var(--pl-accent-soft);
}

.pl-variant-card.out-of-stock {
    opacity: .5;
    cursor: not-allowed;
}

.pl-variant-card.out-of-stock:hover {
    border-color: var(--pl-border);
    box-shadow: none;
}

.pl-variant-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--pl-accent);
    margin: 0;
}

.pl-variant-info {
    flex: 1 1 auto;
    min-width: 0;
}

.pl-variant-title {
    font-family: var(--pl-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--pl-primary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-variant-qty-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pl-variant-qty-stepper button {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.pl-variant-qty-stepper input {
    width: 32px;
    height: 26px;
    font-size: 12px;
}

.pl-variant-price {
    font-family: var(--pl-font);
    font-size: 13px;
    white-space: nowrap;
}

.pl-variant-price-current {
    font-weight: 700;
    color: var(--pl-primary);
}

.pl-variant-price-old {
    color: #9CA3AF;
    text-decoration: line-through;
    margin-right: 4px;
}

.pl-variant-oos-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--pl-danger);
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: var(--pl-shadow-sm);
}

/* Shipping list (radio left, price right) */
.pl-shipping-box {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
}

.pl-shipping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin: 0;
    font-family: var(--pl-font);
    font-size: 14px;
    color: var(--pl-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--pl-border);
}

.pl-shipping-row:last-child {
    border-bottom: none;
}

.pl-shipping-row.pl-selected {
    background: var(--pl-accent-soft);
}

.pl-shipping-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-shipping-radio-label input {
    accent-color: var(--pl-accent);
    margin: 0;
}

.pl-shipping-price {
    font-weight: 600;
    white-space: nowrap;
}

/* Cash-on-delivery note */
.pl-cod-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--pl-radius-sm);
    background: var(--pl-bg-soft);
    font-family: var(--pl-font);
}

.pl-cod-note strong {
    display: block;
    color: var(--pl-primary);
    font-size: 13px;
    margin-bottom: 2px;
}

.pl-cod-note p {
    margin: 0;
    font-size: 12.5px;
    color: #555;
}

/* Order section (delivery + form + live summary + Place Order) */
.pl-order-card {
    padding: 28px;
}

.pl-order-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.pl-order-fields {
    flex: 1 1 380px;
    min-width: 280px;
}

.pl-order-summary-col {
    flex: 1 1 300px;
    min-width: 260px;
}

.pl-form-group {
    margin-bottom: 16px;
}

.pl-order-card .form-control,
.pl-order-card .form-control:focus {
    color: #000 !important;
    font-weight: 300 !important;
}

.pl-order-card .form-control::placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
}

.pl-form-group label {
    display: block;
    font-family: var(--pl-font);
    font-weight: 600;
    color: var(--pl-primary);
    margin-bottom: 6px;
}

.pl-delivery-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pl-delivery-option {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    font-family: var(--pl-font);
}

.pl-delivery-option input {
    margin: 0;
}

.pl-delivery-option.pl-selected {
    border-color: var(--pl-accent);
    background: var(--pl-accent-soft);
}

.pl-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
}

.pl-qty-stepper button {
    border: 0;
    background: var(--pl-bg-soft);
    width: 38px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
}

.pl-qty-stepper input {
    width: 54px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--pl-border);
    border-right: 1px solid var(--pl-border);
    height: 38px;
}

.pl-summary-table {
    width: 100%;
    font-family: var(--pl-font);
}

.pl-summary-table td {
    padding: 8px 0;
    color: #000;
    font-weight: 500;
}

.pl-summary-table thead td {
    font-weight: 700;
    color: var(--pl-primary);
    border-bottom: 1px solid var(--pl-border);
    padding-bottom: 10px;
}

.pl-summary-product-name {
    color: #000;
    font-weight: 500;
    padding-right: 12px;
}

.pl-summary-variant-name {
    display: block;
    font-size: 12px;
    color: #000;
    font-weight: 400;
}

.pl-summary-unit-price {
    display: block;
    font-size: 12px;
    color: #000;
    font-weight: 400;
}

.pl-summary-product-line {
    white-space: nowrap;
}

.pl-summary-table tr.pl-summary-total td {
    border-top: 1px solid var(--pl-border);
    padding-top: 14px;
    font-weight: 700;
    font-size: 18px;
    color: var(--pl-primary);
}

.pl-summary-table td:last-child {
    text-align: right;
}

/* Mobile sticky bottom bar */
.pl-mobile-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
}

.pl-mobile-buy-bar .pl-mobile-price {
    font-family: var(--pl-font);
    font-weight: 700;
    color: var(--pl-primary);
    white-space: nowrap;
    flex: 1 1 auto;
}

.pl-mobile-buy-bar .btn-buy-sticky {
    padding: 10px 18px;
    font-size: 14px;
    width: auto;
}

@media (min-width: 768px) {
    .pl-mobile-buy-bar {
        display: none;
    }
}

@media (max-width: 767px) {
    main.pl-main {
        padding-bottom: 74px;
        /* room for the fixed mobile bar */
    }

    /* The site <footer> renders as a sibling AFTER </main>, so the padding
       above never reaches it — the fixed bar was pinned right over the
       footer's last line (the "Developed by ..." copyright), hiding it at
       the true bottom of the page. :has() scopes this to only the landing
       page (where .pl-mobile-buy-bar actually exists), so no other page's
       footer is affected. */
    body:has(.pl-mobile-buy-bar) footer.footer {
        padding-bottom: 74px;
    }
}

.pl-review-slider {
    padding: 0 4px;
}

.pl-review-slider.nav-inner > .swiper-button-prev,
.pl-review-slider.nav-inner > .swiper-button-next {
    opacity: 1;
    visibility: visible;
}

.pl-review-slider.nav-inner > .swiper-button-prev {
    left: 2rem;
}

.pl-review-slider.nav-inner > .swiper-button-next {
    right: 2rem;
}

.pl-review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-sm);
    overflow: hidden;
}

/* Aspect-ratio (not a fixed px height) so the box matches a typical portrait
   phone-screenshot shape — width stays the binding constraint under
   object-fit: contain, so the image fills 100% width with only top/bottom
   letterboxing when needed, and card height stays consistent across the row.
   Checked the actual uploaded review screenshots: most full-chat-thread
   ones run ~1920x4158 (ratio ~0.46), so the box is tuned to match that.
   Uploaded screenshots vary a lot in shape though (some near-square, some
   wide crops), and with object-fit: contain (no cropping allowed) a shape
   that doesn't match this ratio will letterbox instead — top/bottom gap for
   a wider image, side gap for a taller one. That's unavoidable without
   cropping when source images aren't a uniform shape.
   max-height caps it on desktop: columns are much wider there (3-per-row
   vs. 2 on mobile), and the 0.46 ratio scaled to that width made the card
   oversized — mobile columns stay under the cap so they're unaffected. */
.pl-review-screenshot {
    display: block;
    width: 100%;
    aspect-ratio: 0.46;
    max-height: 890px;
    line-height: 0;
    background: var(--pl-accent-soft);
}

.pl-review-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop columns are wide enough that the 420px height cap above cuts the
   box well short of the 0.46 aspect ratio's natural height, so contain
   leaves the image narrow with side gaps. Switch to cover here so the image
   fills the box edge to edge — trades a bit of top/bottom crop on tall
   screenshots for no visible gap, matching the fixed card height. */
@media (min-width: 768px) {
    .pl-review-screenshot {
        max-height: 620px;
    }

    .pl-review-screenshot img {
        object-fit: cover;
    }
}

/* All nav arrows on this page (hero gallery, thumbs, reviews): outlined
   circle (border, no fill) so the button reads as a distinct control on both
   mobile and desktop regardless of what image/screenshot is behind it,
   instead of a solid color block. Border and icon both use --pl-primary —
   same brand color as the site header (header-middle background in
   master.blade.php), replacing the theme default's hardcoded #7A1F2B.
   Scoped with .product-landing-page + .swiper-theme (5 class-selectors) so
   it beats demo1.min.css's own .swiper-theme hover/active/focus rule (4
   class-selectors, background-color: #7A1F2B) even though that stylesheet
   loads after this one — without this, the tie-specificity hover rule would
   win on load order and the solid fill would flash back in on hover. */
.product-landing-page .swiper-theme .swiper-button-prev,
.product-landing-page .swiper-theme .swiper-button-next {
    color: var(--pl-primary);
    background-color: transparent;
    border: 2px solid var(--pl-primary);
}

.product-landing-page .swiper-theme .swiper-button-prev:not(.swiper-button-disabled):hover,
.product-landing-page .swiper-theme .swiper-button-prev:not(.swiper-button-disabled):active,
.product-landing-page .swiper-theme .swiper-button-prev:not(.swiper-button-disabled):focus,
.product-landing-page .swiper-theme .swiper-button-next:not(.swiper-button-disabled):hover,
.product-landing-page .swiper-theme .swiper-button-next:not(.swiper-button-disabled):active,
.product-landing-page .swiper-theme .swiper-button-next:not(.swiper-button-disabled):focus {
    color: var(--pl-primary);
    background-color: transparent;
    border-color: var(--pl-primary);
}

/* Review nav arrows must never look/act disabled, even when loop is off
   because there are too few reviews (<=4) to loop — see the loop condition
   in landing.blade.php. Overrides both swiper-bundle's base disabled state
   (opacity .35, pointer-events: none) and demo1.min.css's theme disabled
   state (color #ccc, opacity .6). Clicking still no-ops at the true
   start/end when non-looping — this only restores the normal look. */
.product-landing-page .pl-review-slider .swiper-button-prev.swiper-button-disabled,
.product-landing-page .pl-review-slider .swiper-button-next.swiper-button-disabled {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    color: var(--pl-primary);
    border-color: var(--pl-primary);
    background-color: transparent;
}

.pl-review-empty {
    padding: 24px;
}