/* ============================================================
   VISVA EXIM — PRODUCT DETAILS PAGE
   All colors driven by design tokens (css/base.css :root).
   ============================================================ */

/* ── PAGE HERO (Product Details — banner-4) ── */
.page-hero {
    background-image: url('../images/banners/product-banner.webp');
}

/* GALLERY — the main shot with its thumbnail strip underneath.
   .product-gallery sets the width BOTH share, so the strip always lines up with
   the image above it. It FILLS its column, so the shot and the text below sit a
   normal gutter apart instead of leaving a band of dead space between them, and
   the thumbnails scale up with it. Left-aligned to the page's content edge
   (breadcrumb above, specs table below). */
.product-gallery {
    width: 100%;
}

.gallery-main {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-card);
}

/* Full column WIDTH, but a SHORTER frame: the shot is cover-cropped to 3:2, so it
   is clearly less tall than it is wide and the product name/specs come up sooner.
   `height: auto` is load-bearing — drop it and the <img width="500" height="500">
   attribute takes over, which both overrides aspect-ratio AND makes the shot a
   tall fixed 500px. The source photos are square, so the crop trims top and
   bottom only; nothing is cut from the sides. */
.gallery-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.gallery-main:hover img {
    transform: scale(1.03);
}

/* Thumbnail strip — the shots NOT currently in the frame, four equal thumbs per row.
   The shot in the frame above is dropped from the strip (see .thumb.active below),
   so with the usual five shots the row holds exactly the four you are NOT looking at:
   one image up top, the other four underneath. The strip is exactly as wide as the
   image above it, so the two line up. pro_details.php renders no strip at all for a
   single-image product, so this strip always holds at least two thumbs. */
.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.thumb {
    flex: 0 0 calc((100% - 30px) / 4);
    display: block;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-card);
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow), opacity var(--transition-base);
    opacity: 0.82;
}

.thumb:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

.thumb:hover img {
    opacity: 1;
}

/* The shot currently in the frame above leaves the strip, so the row always shows
   the images that are NOT on screen (js/custom.js marks the current one .active).
   With scripting off nothing gets the class — all thumbs stay, and each is still a
   plain link to the full picture. A single-image product renders no strip at all
   (pro_details.php), so this strip always holds at least two thumbs. */
.thumb.active {
    display: none;
}

.thumb:focus-visible {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 2px;
}

.gallery-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--gradient-gold);
    color: var(--color-primary-deep);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
}

/* PRODUCT INFO */

/* Slug label above the title — "cumin-seeds".
   Kept lower-case on purpose so it reads as the product's URL slug, not a heading. */
.product-slug {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-gold-text);
    margin-bottom: 8px;
    word-break: break-word;
}

.product-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 14px;
}

/* Short description — shown once under the title (live from DB) */
.product-desc {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-body);
    margin-bottom: 0;
}

/* At a Glance — 4 key highlights (2x2 grid) after the description */
.glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.glance-item {
    background: var(--surface-ivory);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 0;
}

.glance-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 4px;
}

.glance-val {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.4;
    word-break: break-word;
}

/* Specs table (tab) */
.spec-table {
    font-size: 14px;
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.spec-table th {
    width: 38%;
    background: var(--surface-cream);
    color: var(--text-body);
    font-weight: 600;
    border-color: var(--border-color);
    vertical-align: top;
}

.spec-table td {
    color: var(--text-strong);
    border-color: var(--border-color);
}

/* ACTION BUTTONS */
.btn-enquire-big {
    background: var(--color-primary);
    color: var(--text-on-dark);
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-enquire-big:hover {
    background: var(--color-primary-deep);
    color: var(--text-on-dark);
}

.btn-whatsapp {
    background: var(--color-whatsapp);
    color: var(--text-on-dark);
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-whatsapp:hover {
    background: var(--color-whatsapp-dark);
    color: var(--text-on-dark);
}