:root {
    --pd-primary: #e11d2e;
    --pd-primary-dark: #b80f21;
    --pd-ink: #172033;
    --pd-muted: #667085;
    --pd-line: #e6e9ef;
    --pd-soft: #f7f8fa;
    --pd-success: #12805c;
    --pd-radius: 16px;
    --pd-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}

.product-detail-page {
    background: #f5f6f8;
    color: var(--pd-ink);
    padding: 18px 0 54px;
}

.product-detail-container { max-width: 1280px; }

.product-breadcrumb {
    align-items: center;
    color: var(--pd-muted);
    display: flex;
    font-size: 13px;
    gap: 9px;
    margin-bottom: 14px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.product-breadcrumb a { color: #475467; }
.product-breadcrumb a:hover { color: var(--pd-primary); }
.product-breadcrumb i { color: #b0b7c3; font-size: 9px; }
.product-breadcrumb span { overflow: hidden; text-overflow: ellipsis; }

.product-buy-box {
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    overflow: hidden;
}

.product-gallery-panel {
    border-right: 1px solid var(--pd-line);
    min-width: 0;
    padding: 24px;
    position: relative;
}

.product-gallery-badge {
    background: var(--pd-primary);
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    left: 24px;
    padding: 7px 10px;
    position: absolute;
    top: 24px;
    z-index: 3;
}

.product-gallery-main { margin: 0 auto 14px; max-width: 570px; }
.product-gallery-slide { background: #fff; }
.product-gallery-slide img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    margin: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.product-gallery-empty {
    align-items: center;
    aspect-ratio: 1;
    background: var(--pd-soft);
    color: #c4c9d2;
    display: flex;
    font-size: 60px;
    justify-content: center;
}

.product-gallery-thumbs { margin: 0 auto; max-width: 500px; }
.product-gallery-thumb { aspect-ratio: 1 / 1; cursor: pointer; padding: 4px; }
.product-gallery-thumb img {
    aspect-ratio: 1;
    border: 1px solid var(--pd-line);
    border-radius: 9px;
    display: block;
    height: 100% !important;
    object-fit: contain;
    padding: 3px;
    width: 100%;
}
.product-gallery-thumbs .slick-current img { border: 2px solid var(--pd-primary); }
.gallery-assurance { color: var(--pd-muted); font-size: 12px; margin-top: 13px; text-align: center; }
.gallery-assurance i { margin-right: 5px; }

.product-purchase-panel { min-width: 0; padding: 28px 30px; }
.product-status-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }
.product-stock { border-radius: 99px; font-size: 12px; font-weight: 700; padding: 6px 10px; }
.product-stock.is-in-stock { background: #eaf8f2; color: var(--pd-success); }
.product-stock.is-preorder { background: #fff8e8; color: #9a5b00; }
.product-stock.is-out-of-stock { background: #fff0f1; color: var(--pd-primary); }
.product-code { color: var(--pd-muted); font-size: 12px; }

.product-detail-title {
    color: var(--pd-ink);
    font-size: clamp(22px, 2.1vw, 32px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.3;
    margin: 0 0 9px;
}

.product-meta-row { color: var(--pd-muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 9px 18px; }
.product-meta-row strong { color: #344054; font-weight: 600; }
.product-price-block {
    background: linear-gradient(100deg, #fff4f4 0%, #fff 75%);
    border-left: 3px solid var(--pd-primary);
    margin: 19px 0;
    padding: 13px 16px;
}
.product-price-line { align-items: baseline; display: flex; flex-wrap: wrap; gap: 11px; }
.product-price-line ins { color: var(--pd-primary); font-size: 32px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.product-price-line del { color: #8b93a1; font-size: 17px; }
.product-coupons { margin-bottom: 18px; }
.product-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.product-section-heading > span { font-size: 14px; font-weight: 700; }
.product-section-heading i { color: var(--pd-primary); margin-right: 6px; }
.product-section-heading a { color: var(--pd-primary); font-size: 12px; font-weight: 700; }
.product-section-heading a i { font-size: 9px; margin-left: 4px; margin-right: 0; }
.coupon-list { display: grid; gap: 8px; }
.coupon-list-horizontal { display: flex; margin-right: -4px; overflow-x: auto; padding: 1px 4px 7px 1px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.coupon-list-horizontal .coupon-ticket { flex: 0 0 min(215px, 68vw); scroll-snap-align: start; }
.coupon-ticket {
    align-items: center;
    background: #fff8ed;
    border: 1px dashed #f0a441;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 7px 8px 7px 10px;
}
.coupon-ticket.is-product-specific { background: #fff1f2; border-color: var(--pd-primary); }
.coupon-ticket em { color: var(--pd-primary); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.coupon-ticket div { display: flex; flex-direction: column; min-width: 0; }
.coupon-ticket strong { color: #a54808; font-size: 12px; }
.coupon-ticket span { color: #7a5b3b; font-size: 9px; }
.coupon-ticket button {
    background: #fff;
    border: 1px solid #e79a37;
    border-radius: 7px;
    color: #9e4b0e;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    margin-left: 10px;
    min-height: 30px;
    padding: 4px 7px;
}
.coupon-ticket button.is-copied { background: var(--pd-success); border-color: var(--pd-success); color: #fff; }

.product-summary { color: #475467; font-size: 14px; line-height: 1.65; margin-bottom: 17px; }
.product-summary p { margin-bottom: 8px; }
.product-summary ul { margin-bottom: 8px; padding-left: 20px; }
.product-option-group { border: 0; margin: 0 0 16px; min-width: 0; padding: 0; }
.product-option-group legend { color: #344054; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.product-option-group legend span { color: var(--pd-primary); }
.product-options { display: flex; flex-wrap: wrap; gap: 8px; }
.product-option {
    align-items: center;
    background: #fff;
    border: 1px solid #d6dae1;
    border-radius: 9px;
    color: #344054;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    min-height: 42px;
    padding: 7px 13px;
    position: relative;
}
.product-option:hover, .product-option:focus { border-color: var(--pd-primary); color: var(--pd-primary); outline: 0; }
.product-option.is-selected { border: 2px solid var(--pd-primary); color: var(--pd-primary); padding: 6px 12px; }
.product-option.is-selected::after { background: var(--pd-primary); border-radius: 50%; bottom: -4px; color: #fff; content: "✓"; font-size: 8px; height: 14px; line-height: 14px; position: absolute; right: -4px; text-align: center; width: 14px; }
.product-option.has-swatch { padding: 4px 10px 4px 4px; }
.product-option.has-swatch.is-selected { padding: 3px 9px 3px 3px; }
.product-option img { border-radius: 6px; object-fit: cover; }

.product-order-row { display: grid; gap: 9px; grid-template-columns: 116px minmax(150px, 1fr) minmax(125px, .72fr); margin-top: 18px; }
.product-quantity { align-items: stretch; border: 1px solid #d6dae1; border-radius: 10px; display: grid; grid-template-columns: 34px 1fr 34px; min-height: 50px; overflow: hidden; }
.product-quantity button { background: #f8f9fb; border: 0; color: #475467; padding: 0; }
.product-quantity input { border: 0; box-shadow: none; color: var(--pd-ink); font-size: 15px; font-weight: 700; min-width: 0; padding: 0; text-align: center; width: 100%; }
.product-quantity input::-webkit-inner-spin-button, .product-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.product-cta { align-items: center; border: 0; border-radius: 10px; display: inline-flex; font-size: 14px; font-weight: 800; gap: 8px; justify-content: center; min-height: 50px; padding: 10px 14px; transition: transform .15s ease, box-shadow .15s ease; }
.product-cta:not(:disabled):hover { transform: translateY(-1px); }
.product-cta-primary { background: var(--pd-primary); color: #fff; box-shadow: 0 7px 16px rgba(225, 29, 46, .23); }
.product-cta-primary:hover, .product-cta-primary:focus { background: var(--pd-primary-dark); color: #fff; }
.product-cta-buy { background: #172033; color: #fff; }
.product-cta-buy:hover, .product-cta-buy:focus { background: #050b18; color: #fff; }
.product-cta:disabled { cursor: not-allowed; opacity: .55; }
.product-whatsapp { align-items: center; background: #edf9f3; border: 1px solid #bce7d1; border-radius: 10px; color: #087849; display: flex; font-size: 14px; font-weight: 700; justify-content: center; margin-top: 10px; min-height: 46px; }
.product-whatsapp:hover { background: #dcf5e8; color: #05643d; }
.product-whatsapp i { font-size: 20px; margin-right: 8px; }
.product-service-note { align-items: center; color: #475467; display: flex; font-size: 13px; gap: 9px; justify-content: center; margin-top: 13px; }
.product-service-note i { color: var(--pd-primary); }
.product-service-note a { color: var(--pd-ink); font-weight: 800; }
.mobile-purchase-bar { display: none; }

.product-trust-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
    margin: 16px 0;
}
.product-trust-grid article { align-items: center; background: #fff; border: 1px solid var(--pd-line); border-radius: 13px; display: flex; gap: 11px; min-width: 0; padding: 15px; }
.product-trust-grid article > span { align-items: center; background: #fff0f1; border-radius: 10px; color: var(--pd-primary); display: flex; flex: 0 0 42px; font-size: 19px; height: 42px; justify-content: center; }
.product-trust-grid article div { display: flex; flex-direction: column; min-width: 0; }
.product-trust-grid strong { color: var(--pd-ink); font-size: 13px; }
.product-trust-grid small { color: var(--pd-muted); font-size: 11px; line-height: 1.35; margin-top: 2px; }

.product-information { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); overflow: hidden; }
.product-information-nav { background: #f3f4f6; border: 0; border-radius: 11px; display: inline-flex; gap: 4px; margin: 16px 20px 0; max-width: calc(100% - 40px); overflow-x: auto; padding: 4px; white-space: nowrap; }
.product-information-nav button { background: transparent; border: 0; border-radius: 8px; color: #475467; font-size: 13px; font-weight: 700; min-height: 40px; padding: 9px 16px; }
.product-information-nav button.is-active { background: #fff; box-shadow: 0 2px 8px rgba(16,24,40,.09); color: var(--pd-primary); }
.product-information-nav button:hover { color: var(--pd-primary); }
.product-tab-panel[hidden] { display: none !important; }
.product-description-content { color: #3f4858; font-size: 15px; line-height: 1.75; padding: 28px clamp(18px, 4vw, 55px); }
.product-description-content h2 { color: var(--pd-ink); font-size: 23px; font-weight: 700; margin-bottom: 18px; }
.product-description-content img, .product-description-content iframe, .product-description-content video { height: auto; max-width: 100%; }
.product-description-content table { display: block; max-width: 100%; overflow-x: auto; width: 100% !important; }
.order-delivery-card { border-top: 1px solid var(--pd-line); display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); padding: 24px clamp(18px, 4vw, 55px); }
.order-delivery-card > div { align-items: flex-start; display: flex; gap: 12px; }
.order-delivery-card i { color: var(--pd-primary); font-size: 18px; margin-top: 3px; }
.order-delivery-card span { color: var(--pd-muted); display: flex; flex-direction: column; font-size: 13px; }
.order-delivery-card strong { color: var(--pd-ink); font-size: 14px; margin-bottom: 2px; }
.order-delivery-card a { color: var(--pd-primary); font-weight: 700; }
.product-bottom-links { display: flex; gap: 9px; justify-content: center; margin-top: 15px; }
.product-bottom-links a { background: #fff; border: 1px solid var(--pd-line); border-radius: 9px; color: #475467; font-size: 12px; font-weight: 600; padding: 9px 13px; }
.product-bottom-links a:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.product-bottom-links i { margin-right: 5px; }

@media (max-width: 991.98px) {
    .product-buy-box { grid-template-columns: minmax(0, .92fr) minmax(350px, 1fr); }
    .product-gallery-panel { padding: 18px; }
    .product-purchase-panel { padding: 22px 20px; }
    .product-order-row { grid-template-columns: 104px 1fr; }
    .product-order-row .product-cta-buy { grid-column: 1 / -1; }
    .product-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .product-detail-page { padding: 9px 0 104px; }
    .product-detail-page .container { padding-left: 10px; padding-right: 10px; }
    .product-breadcrumb { font-size: 11px; margin: 0 2px 8px; }
    .product-buy-box { border-radius: 12px; display: block; }
    .product-gallery-panel { border-bottom: 1px solid var(--pd-line); border-right: 0; padding: 10px 10px 12px; }
    .product-gallery-badge { left: 12px; top: 12px; }
    .product-gallery-main { margin-bottom: 7px; max-width: 520px; }
    .product-gallery-thumbs { max-width: 390px; }
    .product-gallery-thumb { padding: 3px; }
    .gallery-assurance { margin-top: 8px; }
    .product-purchase-panel { padding: 17px 14px 19px; }
    .product-detail-title { font-size: 21px; line-height: 1.35; }
    .product-price-block { margin: 15px 0; padding: 10px 12px; }
    .product-price-line ins { font-size: 28px; }
    .product-price-line del { font-size: 15px; }
    .product-summary { font-size: 13px; }
    .product-order-row { grid-template-columns: 110px 1fr; }
    .product-order-row > .product-cta-primary { display: none; }
    .product-order-row .product-cta-buy { grid-column: auto; }
    .product-whatsapp { font-size: 13px; }
    .product-service-note { font-size: 12px; }
    .mobile-purchase-bar {
        align-items: center;
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #dfe3e9;
        bottom: 0;
        box-shadow: 0 -8px 22px rgba(16, 24, 40, .12);
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(90px, .65fr) minmax(160px, 1.35fr);
        left: 0;
        padding: 9px max(12px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
        position: fixed;
        right: 0;
        z-index: 1035;
    }
    .mobile-purchase-price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .mobile-purchase-price small { color: var(--pd-muted); font-size: 10px; }
    .mobile-purchase-price strong { color: var(--pd-primary); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-purchase-bar .product-cta { min-height: 48px; width: 100%; }
    .product-trust-grid { gap: 8px; grid-template-columns: repeat(2, 1fr); margin: 10px 0; }
    .product-trust-grid article { align-items: flex-start; gap: 8px; padding: 11px 9px; }
    .product-trust-grid article > span { flex-basis: 34px; font-size: 15px; height: 34px; }
    .product-trust-grid strong { font-size: 12px; }
    .product-trust-grid small { font-size: 10px; }
    .product-information { border-radius: 12px; }
    .product-information-nav { display: flex; gap: 3px; margin: 11px 10px 0; max-width: calc(100% - 20px); padding: 3px; }
    .product-information-nav button { flex: 1 0 auto; font-size: 12px; min-height: 38px; padding: 8px 12px; }
    .product-description-content { font-size: 14px; line-height: 1.7; padding: 20px 15px; }
    .product-description-content h2 { font-size: 19px; }
    .order-delivery-card { grid-template-columns: 1fr; padding: 18px 15px; }
    .product-bottom-links { gap: 6px; }
    .product-bottom-links a { flex: 1 1 0; padding: 9px 5px; text-align: center; }
    .u-go-to { bottom: 88px !important; }
}

@media (max-width: 374px) {
    .product-order-row { grid-template-columns: 100px 1fr; }
    .product-cta { font-size: 12px; padding-left: 9px; padding-right: 9px; }
    .product-trust-grid article { display: block; }
    .product-trust-grid article > span { margin-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-cta { transition: none; }
}
