/* ==========================================================================
   Arizone International LLP — Product detail page stylesheet
   Loaded only on individual product pages (see includes/header.php,
   $isProductDetailPage). Keeps product-only styling out of custom.css so
   the two can evolve independently.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Consistent vertical rhythm between product-page sections — the hero,
   tabs, spec/applications block and related-products strip all use the
   same breathing room instead of whatever each section's own default was.
   -------------------------------------------------------------------------- */
.product-hero-section { padding-top: 48px; padding-bottom: 8px; }
.product-article-section { padding-top: 8px; padding-bottom: 8px; }
.product-detail-section { padding-top: 40px; padding-bottom: 8px; }
.product-related-section { padding-top: 40px; padding-bottom: 48px; }

/* --------------------------------------------------------------------------
   Related-products cards — image zoom-on-hover, and a small "Category"
   corner tag on cards that fall back to a representative category photo
   (rather than the product's own), so a repeated stock photo never reads
   as a mistake.
   -------------------------------------------------------------------------- */
.product-related__card-media { position: relative; overflow: hidden; }
.product-related__card-media img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.product-related__card:hover .product-related__card-media img { transform: scale(1.08); }

.product-related__card--fallback .product-related__card-media::after {
    content: "Category Photo";
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Tab underline motion — a sliding accent bar tracks the active tab
   instead of the border just snapping between buttons.
   -------------------------------------------------------------------------- */
.product-tabs__nav {
    position: relative;
}
.product-tabs__nav button {
    transition: color .2s ease;
}

/* --------------------------------------------------------------------------
   Spec table rows — subtle highlight on hover so a buyer scanning the
   sheet can track which row their eye is on.
   -------------------------------------------------------------------------- */
.product-spec-table__row {
    transition: background-color .15s ease;
}
.product-spec-table__row:hover {
    background: var(--color-surface-alt);
}

/* --------------------------------------------------------------------------
   Hero media — soften the entrance with a gentle scale-in, and give the
   quick-facts strip a slightly stronger presence.
   -------------------------------------------------------------------------- */
.product-hero__media-main img {
    animation: productHeroImageIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes productHeroImageIn {
    from { opacity: 0; transform: scale(1.03); }
    to { opacity: 1; transform: scale(1); }
}
.product-hero__quickfacts div:not(:last-child) {
    border-right: 1px solid var(--color-border);
    padding-right: 18px;
}

/* --------------------------------------------------------------------------
   FAQ accordion when reused on a product page — align its width and
   spacing with the rest of the tab content instead of the certificates
   page's own max-width.
   -------------------------------------------------------------------------- */
.product-tabs__panel .cert-accordion { max-width: none; margin: 0; }

/* --------------------------------------------------------------------------
   Hero placeholder — used instead of a photo when a product has no real
   photography yet. A generic category stock photo (e.g. turmeric root/
   powder) reads as a wrong/mismatched product when shown on an unrelated
   product's page, so an honest icon placeholder is used instead until real
   photography is available.
   -------------------------------------------------------------------------- */
.product-hero__media-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(150deg, var(--color-surface-alt), #eef5f0);
}
.product-hero__media-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(8,145,178,.05) 0 2px, transparent 2px 88px);
}
.product-hero__media-placeholder-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--color-muted);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.product-hero__media-placeholder-badge i { font-size: 13px; color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
    .product-hero__media-main img { animation: none; }
    .product-related__card-media img { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero compliance-badges-to-buttons spacing — these two rows had no gap
   defined between them (both are bare flex containers), so on narrow
   viewports where the badges wrap to two lines they sit flush against the
   button row below. Scoped to the hero only so the same .product-compliance
   markup reused inside the Applications tab is unaffected.
   -------------------------------------------------------------------------- */
.product-hero__info .product-compliance { margin-bottom: 18px; }
.product-hero__actions { margin-top: 4px; }

@media (max-width: 720px) {
    .product-hero-section { padding-top: 28px; }
    .product-hero__quickfacts div:not(:last-child) { border-right: none; padding-right: 0; }
    /* The 100px min-width on each quickfact (set for the 4-across desktop
       layout) never fits four items on a phone screen, forcing the whole
       hero column to overflow horizontally. Switch to two items per row
       instead of a fixed min-width so it wraps within the viewport. */
    .product-hero__quickfacts div { min-width: calc(50% - 5px); }
}