/* ============================================================
   PDP Phase 1 — mockup palette + typography (info column),
   price, buy buttons, Pack Size swatches, and left-column
   trust blocks (assurance strip + school PO callout).
   Palette: navy #14296b / royal #1344b1 / gold #fdc700 / green #0f9447
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --eo-navy:#14296b; --eo-royal:#1344b1; --eo-gold:#fdc700;
    --eo-green:#0f9447; --eo-red:#bc1212; --eo-ink:#1f2a44;
    --eo-muted:#6b7280; --eo-line:#e6e9ef;
}

/* ---------- Info column typography ---------- */
.product-info-main {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--eo-ink);
}
.product-info-main .page-title-wrapper .page-title,
.product-info-main .page-title-wrapper .page-title > span {
    color: var(--eo-navy);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
}

/* ---------- Price ---------- */
.product-info-main .price-box .price-wrapper .price,
.product-info-main .price-box .price {
    color: var(--eo-navy);
    font-weight: 900;
}
.product-info-main .price-box .price-wrapper .price { font-size: 34px; line-height: 1; }
.product-info-main .product-info-price .special-price .price { color: var(--eo-navy); }
.product-info-main .product-info-price .old-price .price {
    color: var(--eo-muted);
    font-weight: 600;
    font-size: 19px;
}

/* ---------- Pack Size swatches → buttons ---------- */
.product-info-main .swatch-attribute-label { color: var(--eo-navy); font-weight: 700; }
.product-info-main .swatch-attribute-selected-option { color: var(--eo-muted); font-weight: 500; }
.product-info-main .swatch-option {
    min-width: 60px;
    height: auto;
    line-height: 1.2;
    padding: 11px 16px;
    border: 1.5px solid var(--eo-line);
    border-radius: 9px;
    background: #fff;
    color: var(--eo-ink);
    font-weight: 600;
    font-size: 13.5px;
}
.product-info-main .swatch-option.text { background: #fff; }
.product-info-main .swatch-option:hover {
    border-color: var(--eo-royal);
    color: var(--eo-royal);
    outline: none;
}
.product-info-main .swatch-option.selected,
.product-info-main .swatch-option.text.selected {
    border-color: var(--eo-royal) !important;
    background: #eef3ff !important;
    color: var(--eo-royal) !important;
    outline: none !important;
}

/* ---------- Buy row (qty + add to cart + wishlist) ---------- */
.product-info-main .box-tocart .field.qty .control .qty,
.product-info-main .box-tocart .input-text.qty {
    height: 50px;
    width: 64px;
    border: 1.5px solid var(--eo-line);
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    color: var(--eo-navy);
    text-align: center;
}
.product-info-main .box-tocart .action.tocart,
.product-info-main #product-addtocart-button {
    background: #fff;
    border: 2px solid var(--eo-royal); color: var(--eo-royal);
    border-radius: 10px;
    height: 50px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: none;
    transition: background .15s, transform .12s;
}
.product-info-main .box-tocart .action.tocart:hover,
.product-info-main #product-addtocart-button:hover {
    background: var(--eo-royal); color: #fff; border-color: var(--eo-royal);
    transform: translateY(-1px);
}
.product-info-main .product-social-links .action.towishlist,
.product-info-main .product-addto-links .action.towishlist {
    color: var(--eo-navy);
    font-weight: 600;
}
.product-info-main .product-social-links .action.towishlist:hover {
    color: var(--eo-red);
}

/* ============================================================
   Left column trust blocks (under the gallery)
   ============================================================ */
.eo-trust { font-family: 'Inter', system-ui, sans-serif; }

/* Assurance strip */
.eo-assure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border: 1px solid var(--eo-line);
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0 16px;
}
.eo-assure__item { display: flex; align-items: center; gap: 11px; }
.eo-assure__ic {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; flex: none;
}
.eo-assure__ic svg { width: 20px; height: 20px; }
.eo-assure__ic--g { background: var(--eo-green); }
.eo-assure__ic--b { background: var(--eo-royal); }
.eo-assure__ic--n { background: var(--eo-navy); }
.eo-assure__item h5 { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--eo-navy); }
.eo-assure__item p { margin: 1px 0 0; font-size: 11.5px; color: var(--eo-muted); }

/* School PO callout */
.eo-po {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(100deg,#eef3ff,#f7faff);
    border: 1px solid #d6e1ff;
    border-radius: 12px;
    padding: 15px 18px;
    margin-bottom: 18px;
}
.eo-po__ic {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--eo-navy); color: var(--eo-gold);
    display: grid; place-items: center; flex: none;
}
.eo-po__ic svg { width: 22px; height: 22px; }
.eo-po h5 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--eo-navy); }
.eo-po p { margin: 2px 0 0; font-size: 12.5px; color: #43506b; }
.eo-po__link { margin-left: auto; color: var(--eo-royal); font-weight: 700; font-size: 13px; white-space: nowrap; }
.eo-po__link:hover { color: var(--eo-navy); }

@media (max-width: 640px) {
    .eo-assure { grid-template-columns: 1fr; }
    .eo-po { flex-wrap: wrap; }
    .eo-po__link { margin-left: 0; }
}