/* ==========================================================================
   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;
}

/* ---- 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-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;
}

.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: #555;
    padding-right: 12px;
}

.pl-summary-variant-name {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
}

.pl-summary-unit-price {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
}

.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 */
    }
}

.pl-review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pl-review-card {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-sm);
}

.pl-review-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pl-accent-soft);
    color: var(--pl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pl-font);
    font-weight: 700;
    font-size: 20px;
}

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

.pl-review-content {
    flex: 1 1 auto;
    min-width: 0;
}

.pl-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pl-review-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pl-review-name {
    font-family: var(--pl-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--pl-primary);
    margin: 0;
}

.pl-review-verified {
    padding: 3px 10px;
    font-size: 11px;
}

.pl-review-date {
    font-size: 12px;
    color: #9CA3AF;
    white-space: nowrap;
}

.pl-review-stars {
    margin: 6px 0 8px;
    color: var(--pl-accent);
    font-size: 13px;
    letter-spacing: 2px;
}

.pl-review-text {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.pl-review-screenshot {
    display: inline-flex;
    margin-top: 12px;
    border: 1px solid var(--pl-border);
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.pl-review-screenshot img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

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