/* ============================================================
   AYURCALL — product.css
   Medicine detail page only. Loaded via @section Styles.
   ============================================================ */

/* ---- BREADCRUMB ---- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    border-bottom: 0.5px solid var(--color-border);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: 12px; }


/* ---- 2-COLUMN PRODUCT LAYOUT ---- */
.product-layout {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: var(--space-10);
    padding: var(--space-6) var(--space-8) var(--space-8);
    align-items: start;
}

/* ---- IMAGE COLUMN ---- */
.product-image-wrap {
    position: relative;
    background: var(--color-primary-light);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.product-image-wrap:hover .product-image { transform: scale(1.06); }
.product-image__badge    { position: absolute; top: var(--space-3); left: var(--space-3); }
.product-image__zoom-hint {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 11px;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.product-image__zoom-hint i { font-size: 13px; }

.product-share {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.product-share__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 0.5px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 8px;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition);
}
.product-share__btn:hover { background: var(--color-bg); }
.product-share__btn--wa   { border-color: #25D366; color: #25D366; }
.product-share__btn--wa:hover { background: #f0fff4; }

/* ---- INFO COLUMN ---- */
.product-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--font-size-small);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-3);
    text-decoration: none;
    transition: background var(--transition);
}
.product-brand-badge:hover { background: var(--color-primary-light); }

.product-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Heart button inside detail page name row — override the absolute positioning
   used on product cards so it sits inline as a flex child instead */
.product-name-row .btn-heart {
    position: static;
    flex-shrink: 0;
    margin-top: 4px;
}

.product-name {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text-primary);
    flex: 1;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}
.product-price__sale { font-size: 28px; font-weight: 600; color: var(--color-text-primary); }
.product-price__mrp  { font-size: 15px; color: var(--color-text-muted); text-decoration: line-through; }

.product-savings {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-small);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-4);
}
.product-savings i { font-size: 14px; }

/* Trust pills — product detail version */
.product-trust-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.trust-pill {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}
.trust-pill i { font-size: 14px; color: var(--color-primary); }

/* Pincode */
.pincode-check { margin-bottom: var(--space-4); }
.pincode-check__row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.pincode-check__input {
    flex: 1;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: var(--font-size-small);
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-surface);
    outline: none;
    transition: border-color var(--transition);
}
.pincode-check__input:focus { border-color: var(--color-primary); }
.pincode-check__btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 18px;
    font-size: var(--font-size-small);
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
}
.pincode-check__result {
    font-size: var(--font-size-small);
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.pincode-check__result--ok   { color: var(--color-primary); }
.pincode-check__result--fail { color: #DC2626; }

/* Qty + ATC */
.product-atc-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}
.qty-control {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.qty-control__btn {
    width: 40px; height: 44px;
    border: none;
    background: var(--color-bg);
    font-size: 18px;
    cursor: pointer;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    transition: background var(--transition);
}
.qty-control__btn:hover { background: var(--color-primary-light); }
.qty-control__val {
    width: 44px;
    text-align: center;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text-primary);
}
.product-atc-btn {
    flex: 1;
    height: 44px;
    font-size: var(--font-size-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    white-space: nowrap;
}
.product-atc-btn i { font-size: 18px; }

.out-of-stock-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: #FEF2F2;
    border: 0.5px solid #FECACA;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-small);
    color: #DC2626;
    width: 100%;
}
.out-of-stock-notice i { font-size: 16px; flex-shrink: 0; }

/* Consult nudge */
.consult-nudge {
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.consult-nudge i { font-size: 22px; color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.consult-nudge p { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.6; }
.consult-nudge a { color: var(--color-primary); font-weight: 500; }

/* Highlights */
.product-highlights__title {
    font-size: var(--font-size-body);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}
.product-highlights__list { list-style: none; }
.product-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 0.5px solid var(--color-border);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.product-highlights__item:last-child { border-bottom: none; }
.product-highlights__item i { font-size: 14px; color: var(--color-primary); margin-top: 2px; flex-shrink: 0; }

/* ---- TABS ---- */
.product-tabs {
    border-top: 0.5px solid var(--color-border);
    margin: 0 var(--space-8);
}
.product-tabs__nav {
    display: flex;
    border-bottom: 0.5px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.product-tabs__nav::-webkit-scrollbar { display: none; }

.product-tabs__tab {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: color var(--transition);
}
.product-tabs__tab:hover  { color: var(--color-primary); }
.product-tabs__tab.active { color: var(--color-primary); font-weight: 500; border-bottom-color: var(--color-primary); }

.product-tabs__panel { display: none; padding: var(--space-5) 0; }
.product-tabs__panel.active { display: block; }

/* ---- INGREDIENTS ---- */
.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.ingredient-card {
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-2);
    text-align: center;
}
.ingredient-card__img {
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-2);
    overflow: hidden;
}
.ingredient-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ingredient-card__name { font-size: var(--font-size-small); font-weight: 500; color: var(--color-text-primary); }
.ingredient-card__desc { font-size: var(--font-size-micro); color: var(--color-text-secondary); margin-top: 2px; }

/* Composition table */
.composition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    margin-bottom: var(--space-4);
}
.composition-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 500;
    border-bottom: 0.5px solid var(--color-border);
}
.composition-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 0.5px solid var(--color-border);
    color: var(--color-text-primary);
}
.composition-table tr:last-child td { border-bottom: none; }

/* ---- HOW TO USE ---- */
.how-to-use { max-width: 560px; }
.how-to-use__step {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    align-items: flex-start;
}
.how-to-use__num {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-small);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.how-to-use__step p { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.6; padding-top: 4px; }
.how-to-use__note {
    display: flex;
    gap: var(--space-2);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-small);
    color: var(--color-primary);
}
.how-to-use__note i { font-size: 16px; flex-shrink: 0; }

/* ---- ARTICLE (about tab) ---- */
.product-article { max-width: 720px; }
.product-article h1,
.product-article h2,
.product-article h3 { font-size: var(--font-size-body); font-weight: 500; margin: var(--space-4) 0 var(--space-2); color: var(--color-text-primary); }
.product-article p  { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-3); }
.product-article ul,
.product-article ol { margin: 0 0 var(--space-3) var(--space-5); }
.product-article li { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-1); }
.product-article table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); margin-bottom: var(--space-4); }
.product-article th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--color-bg); font-weight: 500; border-bottom: 0.5px solid var(--color-border); }
.product-article td { padding: var(--space-2) var(--space-3); border-bottom: 0.5px solid var(--color-border); }

/* ---- MOBILE STICKY BOTTOM BAR ---- */
.mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 0.5px solid var(--color-border);
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    align-items: center;
    z-index: var(--z-nav);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.mobile-sticky-bar__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.mobile-sticky-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-sticky-bar__name {
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 480px;
}
.mobile-sticky-bar__price { font-weight: 700; font-size: var(--font-size-body); color: var(--color-primary); }
.mobile-sticky-bar__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.mobile-sticky-bar__atc,
.mobile-sticky-bar__view {
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    padding: 0 24px;
    font-size: var(--font-size-small);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border-radius: var(--radius-md);
    white-space: nowrap;
    text-decoration: none;
}
.mobile-sticky-bar__view { font-weight: 700; padding: 0 28px; }
.mobile-sticky-bar__atc i,
.mobile-sticky-bar__view i { font-size: 16px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .product-layout { grid-template-columns: 360px 1fr; gap: var(--space-6); }
    .ingredients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .breadcrumb         { padding: var(--space-2) var(--space-4); }
    body                { padding-bottom: 72px; }

    .product-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    /* Image goes full bleed on mobile */
    .product-image-col  { order: -1; }
    .product-image-wrap {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        aspect-ratio: 4 / 3;
    }

    .product-info-col   { padding: var(--space-4); }
    .product-name       { font-size: var(--font-size-card); }
    .product-price__sale { font-size: 22px; }
    .product-trust-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .product-trust-pills::-webkit-scrollbar { display: none; }

    .product-tabs       { margin: 0; border-top: none; }
    .product-tabs__panel { padding: var(--space-3) var(--space-4); }

    .ingredients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .product-atc-row    { position: sticky; bottom: 64px; } /* above mobile bar */
    /* Mobile sticky bar: hide the product info, let the action fill the width */
    .mobile-sticky-bar__info { display: none; }
    .mobile-sticky-bar__actions { flex: 1; }
    .mobile-sticky-bar__atc,
    .mobile-sticky-bar__view { flex: 1; padding: 0 16px; }

    .product-share      { padding: var(--space-2) var(--space-4); }
}

/* PRODUCT SLIDER + .slider-btn rules now consolidated in components.css (single source of truth). */

/* Slider wrap inherits max-width from .section > * rule in layout.css */