/* =========================================
   PAGE HEADER / BREADCRUMBS
   (verbatim from the original — same pattern as the catalog page)
   ========================================= */
.product-section { padding: 10px 0 100px; }

.page-header { padding: 10px 0 20px; border-bottom: 1px solid var(--border-light); margin-bottom: 30px; }

.breadcrumbs {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #888;
    margin-bottom: 15px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs > * { flex-shrink: 0; }
.breadcrumbs a { color: #888; transition: 0.3s; }
.breadcrumbs a:hover { color: var(--accent-gold); }
.breadcrumbs i { font-size: 9px; color: #555; }
.breadcrumbs span { color: #ccc; }

.product-title { font-size: 32px; font-weight: 500; line-height: 1.4; color: #fff; margin-bottom: 20px; max-width: 800px; }
.title-meta { display: flex; justify-content: flex-end; margin-top: -10px; width: 100%; }

/* =========================================
   PRODUCT LAYOUT: GALLERY + DETAILS
   ========================================= */
.product-container { display: grid; grid-template-columns: 35% 1fr; gap: 60px; align-items: flex-start; }

.product-gallery { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }
.main-image-wrapper {
    width: 100%; aspect-ratio: 1 / 1; background: #0d0d0d; border-radius: 4px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light);
    position: relative; cursor: pointer; touch-action: pan-y;
}
.main-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.main-image-wrapper:hover img { transform: scale(1.03); }

.thumbnails { display: flex; gap: 15px; }
.thumb-btn { width: 80px; height: 80px; border-radius: 4px; background: #0d0d0d; border: 1px solid var(--border-light); overflow: hidden; cursor: pointer; opacity: 0.6; transition: all 0.3s ease; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn:hover, .thumb-btn.active { opacity: 1; border-color: var(--accent-gold); }

.mobile-gallery-dots { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); gap: 8px; z-index: 10; }
.mg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: 0.3s; }
.mg-dot.active { background: var(--accent-gold); width: 24px; border-radius: 4px; }

/* =========================================
   PRODUCT DETAILS / PURCHASE AREA
   ========================================= */
.product-details { display: flex; flex-direction: column; }

.meta-tags { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.meta-left { display: flex; align-items: center; gap: 20px; }
.status-badge {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(102, 187, 106, 0.1); color: #66bb6a;
    padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
}
.status-badge.out-of-stock { background: rgba(239, 83, 80, 0.1); color: #ef5350; }
.tea-badge {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(194, 160, 93, 0.1); color: var(--accent-gold);
    padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: default;
}
.sku { font-size: 12px; color: #666; font-weight: 500; }

.price-block { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 25px; }
.current-price { font-size: 33px; font-weight: 700; color: var(--accent-gold); line-height: 1; }
.price-unit { font-size: 16px; color: #666; font-weight: 500; padding-bottom: 6px; }

.purchase-area-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.weight-options { display: inline-flex; gap: 6px; }
.w-btn { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #888; border-radius: 4px; background: #141414; border: 1px solid #222; transition: 0.3s; cursor: pointer; }
.w-btn.active, .w-btn:hover { background: transparent; color: var(--accent-gold); border-color: var(--accent-gold); }

.secondary-actions { display: flex; gap: 20px; }
.action-link { display: flex; align-items: center; gap: 8px; color: #888; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: color 0.3s; background: none; border: none; }
.action-link i { font-size: 14px; }
.action-link:hover { color: #fff; }
.action-link.w-active { color: var(--accent-gold); }

.action-row { display: flex; gap: 20px; margin-bottom: 30px; height: 48px; }
.qty-selector { display: flex; align-items: center; background: #0a0a0a; border: 1px solid #333; border-radius: 4px; height: 100%; padding: 0; width: 120px; }
.qty-action { width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 18px; cursor: pointer; transition: 0.2s; background: transparent; }
.qty-action:hover { color: #fff; background: #1a1a1a; }
.qty-number { flex: 1; text-align: center; font-size: 15px; font-weight: 500; color: #fff; border-left: 1px solid #333; border-right: 1px solid #333; height: 100%; display: flex; align-items: center; justify-content: center; }
.btn-add-to-cart { flex: 1; height: 100%; background: var(--accent-gold); color: #000; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; border: none; cursor: pointer; }
.btn-add-to-cart:hover { background: #fff; }
.btn-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================
   TABS: DESCRIPTION / SPECS / REVIEWS
   ========================================= */
.tabs-section { margin-top: 80px; border-top: 1px solid #1a1a1a; padding-top: 60px; }
.tabs-header { display: flex; gap: 60px; margin-bottom: 40px; }
.tab-btn { font-size: 15px; font-weight: 500; color: #666; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.3s; background: none; border-top: none; border-left: none; border-right: none; }
.tab-btn.active, .tab-btn:hover { color: #fff; border-bottom-color: var(--accent-gold); }
.tab-body { max-width: 900px; font-size: 14px; line-height: 1.8; color: #aaa; }
.tab-body p { margin-bottom: 20px; }
.tab-body h4 { color: #fff; font-size: 16px; margin: 30px 0 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.spec-table { width: 100%; max-width: 600px; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid #1a1a1a; }
.spec-table td { padding: 14px 0; font-size: 14px; }
.spec-table td:first-child { color: #666; width: 40%; }
.spec-table td:last-child { color: #ddd; font-weight: 500; }

/* =========================================
   REVIEWS TAB
   Reuses css/reviews.css's own components (.review-card/.rc-*, .rf-*,
   .btn-primary) so a review posted from here looks identical to one on
   the main Reviews page — it's the same Supabase table, just filtered
   client-side to this product's name (see renderReviewsTab() in
   js/pages/product.js). No rating-summary block above the form — just
   the form, then the list.
   ========================================= */
.pr-reviews-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pr-reviews-title { font-size: 18px; font-weight: 500; color: #fff; margin: 0; }
.pr-reviews-badge {
    background: #2b4a63; color: #7ec1f0; font-size: 12px; font-weight: 500;
    width: 22px; height: 22px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-reviews-list { display: flex; flex-direction: column; gap: 16px; max-width: 700px; margin-bottom: 28px; }
.pr-reviews-empty { color: #888; font-size: 14px; line-height: 1.8; max-width: 600px; margin-bottom: 28px; }
.pr-reviews-viewall {
    display: inline-block; color: var(--accent-gold); font-size: 14px; font-weight: 500;
    text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: 40px; transition: 0.2s;
}
.pr-reviews-viewall:hover { border-bottom-color: var(--accent-gold); }

/* Inline "write a review" form — plain, always in the page's own flow
   (not a modal), laid out to match the reference the shop owner sent
   (name + social sign-in on one row, email, comment, star rating,
   submit) but reskinned in the site's own dark/gold palette, and sized
   to the tab's own content width (.tab-body's own 900px cap) rather
   than a narrower box of its own. Reuses css/reviews.css's .rf-*
   field/textarea/star-picker/button styling. reviews.html's own
   write-a-review form (no product thumbnail/name) reuses this exact
   same component — see .pr-reviews-write-section in css/reviews.css. */
.pr-review-form {
    margin-bottom: 40px;
    position: relative;
}
/* Desktop: neutral wrapper, form lays out in-flow, always open (the
   trigger button below stays hidden). Mobile (<=600px): becomes a
   fixed-position bottom-sheet overlay — same visual pattern as
   css/reviews.css's .mobile-sort-overlay/.mobile-sort-sheet — toggled
   via window.alfToggleReviewSheet(). */
.pr-review-sheet-overlay { display: contents; }
.pr-write-review-btn { display: none; }
.pr-review-sheet-close { display: none; }
.pr-review-form-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 20px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border-light); }
.pr-review-form-title { font-size: 15px; font-weight: 500; color: #fff; }
.pr-review-form-title-row .rf-rating-select { gap: 8px; }
.pr-review-form-title-row .rf-rating-select i { font-size: 18px; }

/* Product mini-preview (thumbnail + name) to the left of the fields —
   same pairing the combo-card below already uses (.combo-img is 70px),
   just sized a touch larger since it's the sole visual anchor here. */
.pr-review-body { display: flex; align-items: flex-start; gap: 28px; }
.pr-review-product { flex-shrink: 0; width: 90px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pr-review-product-img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-light); background: #0d0d0d; }
.pr-review-product-name { display: none; font-size: 12px; color: var(--accent-gold); line-height: 1.4; text-align: left; align-self: flex-start; }
.pr-review-fields { flex: 1; min-width: 0; }

.rf-stack { display: flex; flex-direction: column; gap: 20px; }
.rf-stack .rf-label { margin-bottom: 10px; }

/* Desktop: name field + social-login row share one line (name a touch
   narrower to leave room); mobile stacks them via display:contents +
   order further down, .pr-review-name gets width:100% there instead. */
.pr-review-row { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.pr-review-name { flex: 1 1 auto; min-width: 0; max-width: 68%; }

/* Small person-icon prefix inside the name field, matching the
   reference's avatar-glyph — reuses .rf-input for the field itself. */
.rf-input-icon { position: relative; width: 100%; }
.rf-input-icon i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #555; font-size: 13px; pointer-events: none; }
.rf-input-icon .rf-input { padding-left: 42px; }
.rf-input-icon .rf-input--locked ~ i { color: var(--accent-gold); }

/* The site's real Google/Facebook OAuth (see reviewFormHTML()'s comment) —
   small round icon buttons rather than the full-width .btn-social-auth
   bars used on the login modal, since here they're a secondary shortcut
   next to the name field, not the primary way in. */
.pr-review-social { display: flex; align-items: center; gap: 18px; padding-top: 0; flex-shrink: 0; }
.pr-review-social span { font-size: 12px; color: #777; margin-right: 4px; }
.pr-social-btn {
    width: auto; height: auto; border-radius: 0; border: none;
    background: transparent; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; padding: 0; cursor: pointer; transition: 0.25s;
}
.pr-social-btn:hover { color: var(--accent-gold); }

.pr-review-submit { text-align: right; }
.pr-review-submit .btn-primary { width: auto; padding: 14px 34px; }
.pr-rf-login-btn {
    display: none; width: 100%; background: transparent; border: 1px solid var(--border-light);
    color: #fff; padding: 14px; border-radius: 6px; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: 0.25s; align-items: center; justify-content: center; gap: 10px;
}
.pr-rf-login-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.pr-rf-login-btn i { font-size: 13px; }

/* Network-failure banner only (see showReviewFeedback() in
   product.js) — the success case doesn't use this, see
   .pr-review-done below. max-height/opacity (not display) so it can
   fade in AND back out smoothly. */
.pr-review-feedback {
    display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.5;
    padding: 0 16px; border-radius: 6px; max-height: 0; margin-top: 0; opacity: 0;
    overflow: hidden; pointer-events: none; border: 1px solid transparent;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease, padding 0.3s ease;
}
.pr-review-feedback.active { max-height: 80px; margin-top: 16px; padding: 14px 16px; opacity: 1; pointer-events: auto; }
.pr-review-feedback i { font-size: 15px; flex-shrink: 0; }
.pr-review-feedback--error { background: rgba(217,83,79,0.1); border-color: rgba(217,83,79,0.35); color: #e0847e; }
/* Not currently used - both showReviewFeedback() call sites (product.js,
   reviews.js) only ever pass 'error' (a success submit uses
   celebrateSubmitSuccess() instead) - kept defined so the function's
   'success' branch doesn't render unstyled if that ever changes. */
.pr-review-feedback--success { background: rgba(194,160,93,0.1); border-color: rgba(194,160,93,0.35); color: var(--accent-gold); }

/* Success case (see celebrateSubmitSuccess() in product.js): nothing
   collapses — the stars the person picked pop in place (reuses
   .rf-star-pop, the same animation the empty-rating case plays, just
   as a celebration instead of an error cue) and this plain caption
   fades in directly under the star row once they're done — it lives
   right inside .pr-review-form-title-row, right after #formStars, and
   flex-basis:100% (below) drops it onto its own line under the stars
   on desktop. No card, no border, no icon — just quiet grey text,
   self-fading. */
.pr-review-done {
    flex: 0 0 100%; text-align: right; color: #888; font-size: 12.5px; font-weight: 500;
    max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}
.pr-review-done.active { max-height: 24px; opacity: 1; margin-top: 12px; }

@media (max-width: 600px) {
    .pr-review-submit .btn-primary { width: 100%; }

    /* Mobile sheet gets its own item order, distinct from desktop's
       nested two-column layout — rather than duplicating the form,
       every intermediate wrapper along the path from .pr-review-form to
       each item collapses via `display: contents`, promoting the item
       itself (title, stars, product name, each field, submit, the
       client-login button) to a direct flex child of .pr-review-form so
       it can be freely reordered with `order`. Desktop is untouched —
       none of this fires outside this media query. */
    .pr-review-form { display: flex; flex-direction: column; gap: 18px; }
    .pr-review-form-title-row,
    .pr-review-body,
    .pr-review-product,
    .pr-review-fields,
    .rf-stack,
    .pr-review-row { display: contents; }

    .pr-review-form-title {
        order: 1; padding-bottom: 14px; margin-bottom: 0;
        border-bottom: 1px solid var(--border-light);
    }
    .pr-review-product-img { display: none; }
    .pr-review-product-name { display: block; order: 2; font-size: 14px; color: var(--accent-gold); text-align: left; }
    .pr-review-name { order: 3; flex: 0 0 auto; min-width: 0; width: 100%; }
    .pr-review-social { display: none; }
    .pr-review-email { order: 4; }
    .pr-review-text { order: 5; }
    #formStars { order: 6; align-self: center; gap: 14px; }
    #formStars i { font-size: 22px; }
    .pr-review-done { order: 7; flex-basis: auto; text-align: center; }
    .pr-review-submit { order: 8; text-align: center; }
    .pr-review-feedback { order: 9; }
    .pr-rf-login-btn { order: 10; display: flex; }

    /* List -> "Написати відгук" button -> bottom sheet with the form,
       per the shop owner's reference screenshots. */
    .pr-write-review-btn {
        display: block; width: 100%; background: var(--accent-gold); color: #000; border: none;
        border-radius: 6px; padding: 16px; font-size: 15px; font-weight: 500; cursor: pointer;
        margin-bottom: 40px; transition: 0.25s;
    }
    .pr-write-review-btn:active { background: var(--accent-gold-hover); }

    .pr-review-sheet-overlay {
        display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
        z-index: 7000; align-items: flex-end; justify-content: center;
        opacity: 0; pointer-events: none; transition: 0.3s ease;
    }
    .pr-review-sheet-overlay.active { opacity: 1; pointer-events: all; }
    .pr-review-sheet-overlay .pr-review-form {
        width: 100%; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: #151515; border-radius: 16px 16px 0 0; border-top: 1px solid #333;
        transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 0; padding: 24px 20px 30px;
    }
    .pr-review-sheet-overlay.active .pr-review-form { transform: translateY(0); }
    .pr-review-sheet-close {
        display: flex; position: absolute; top: 18px; right: 18px; width: 30px; height: 30px;
        align-items: center; justify-content: center; background: transparent; border: none;
        color: #888; font-size: 16px; cursor: pointer; z-index: 1;
    }
}

.separator-line { width: 100%; height: 1px; background: #1a1a1a; margin-bottom: 30px; }

/* COMBO CARD */
.combo-card {
    background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
    border: 1px solid #222;
    border-radius: 6px;
    padding: 25px 28px;
}
.combo-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;
    color: var(--accent-gold); margin-bottom: 22px;
}
.combo-header i { font-size: 12px; }

.combo-content { display: flex; align-items: center; gap: 24px; }

.combo-products { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.combo-item { display: block; border-radius: 6px; }
.combo-img {
    width: 64px; height: 64px; border-radius: 6px; object-fit: cover;
    background: #0d0d0d; border: 1px solid #262626; transition: border-color 0.2s;
}
.combo-companion-link:hover .combo-img { border-color: var(--accent-gold); }
.combo-plus {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(194, 160, 93, 0.12); color: var(--accent-gold);
    display: flex; align-items: center; justify-content: center; font-size: 10px;
}

.combo-divider { align-self: stretch; width: 1px; background: #1e1e1e; }

.combo-total { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.combo-name {
    font-size: 13px; color: #999; text-decoration: none; margin-bottom: 8px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.2s;
}
.combo-name:hover { color: var(--accent-gold); }
.combo-total-val { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.combo-buy {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold);
    border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.3s; cursor: pointer;
}
.combo-buy i { font-size: 12px; }
.combo-buy:hover { background: var(--accent-gold); color: #000; }

/* FEATURES GRID (delivery / payment / returns) */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; border-top: 1px solid #1a1a1a; padding-top: 60px; }
.feature-item { display: flex; flex-direction: column; gap: 15px; }
.feature-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #fff; border-bottom: 1px solid var(--accent-gold); padding-bottom: 10px; width: max-content; }
.feature-text { font-size: 13px; color: #666; line-height: 1.6; }

/* RELATED / RECENTLY VIEWED — same rail pattern as home page rails */
.related-section { margin-top: 80px; }

/* =========================================
   GALLERY ZOOM MODAL
   ========================================= */
.gallery-overlay {
    position: fixed; inset: 0; background: rgba(2,2,2,0.96); z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.4s ease;
}
.gallery-overlay.active { opacity: 1; pointer-events: all; }
.gallery-close {
    position: absolute; top: 20px; right: 30px; color: rgba(255,255,255,0.4); font-size: 26px;
    width: 40px; height: 40px; border-radius: 50%; background: none; border: none; cursor: pointer;
    transition: 0.25s; z-index: 10000;
}
.gallery-close:hover { color: var(--accent-gold); }

/* Minimal cinematic viewer: image takes almost the whole frame, nav
   arrows stay invisible until the pointer is over the viewer (desktop
   only — touch devices navigate by swipe instead, see below), and
   switching images crossfades rather than hard-cutting. */
.gallery-modal-content {
    display: flex; align-items: center; justify-content: center; gap: 28px;
    width: 100%; max-width: 1200px; padding: 0 20px; position: relative;
}
.gallery-imgwrap {
    position: relative; width: min(70vh, 620px); height: min(70vh, 620px);
    transform: scale(0.96); opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    touch-action: pan-y;
}
.gallery-overlay.active .gallery-imgwrap { transform: scale(1); opacity: 1; }
.gallery-modal-img {
    width: 100%; height: 100%; object-fit: contain; margin: 0 auto; user-select: none;
    border-radius: 4px; transition: opacity 0.2s ease; -webkit-touch-callout: none;
}
.gallery-modal-img.fading { opacity: 0; }

.gallery-nav {
    color: rgba(255,255,255,0.3); font-size: 15px; cursor: pointer; transition: 0.25s;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid transparent;
    opacity: 0; flex-shrink: 0;
}
.gallery-modal-content:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { color: var(--accent-gold); background: rgba(194,160,93,0.1); border-color: var(--accent-gold); }

/* Dot indicator replaces the thumbnail strip — quieter, and doubles as
   the position indicator while swiping on mobile. */
.gallery-dots { display: flex; gap: 7px; margin-top: 26px; }
.gallery-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: 0.25s; cursor: pointer; }
.gallery-dot.active { background: var(--accent-gold); width: 16px; border-radius: 3px; }

/* =========================================
   SKELETON (product-page-specific shapes; base .skeleton
   building blocks are already in css/states.css)
   ========================================= */
.skeleton-gallery-main { width: 100%; aspect-ratio: 1/1; border-radius: 4px; }
.skeleton-thumb { width: 80px; height: 80px; border-radius: 4px; flex-shrink: 0; }
.skeleton-title { height: 32px; width: 70%; margin-bottom: 20px; border-radius: 4px; }
.skeleton-price { height: 36px; width: 140px; margin-bottom: 25px; border-radius: 4px; }

/* =========================================
   RESPONSIVE
   (kept in original cascade order — do not reorder blocks)
   ========================================= */
@media (max-width: 992px) {
    .product-container { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }
    .thumbnails { display: none; }
    .mobile-gallery-dots { display: flex; }
    .combo-content { flex-direction: column; align-items: flex-start; }
    .combo-divider { display: none; }
    .combo-total { text-align: left; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 20px; }
    .combo-name { flex-basis: 100%; margin-bottom: 8px; text-align: left; }
    .combo-total-val { margin-bottom: 0; }
    .tabs-header { gap: 30px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .tabs-header::-webkit-scrollbar { display: none; }
    .features-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .product-title { font-size: 22px; }
    .current-price { font-size: 28px; }
    .action-row { flex-direction: row; gap: 10px; height: 50px; }
    .qty-selector { width: 120px; height: 100%; flex-shrink: 0; }
    .btn-add-to-cart { width: auto; flex: 1; height: 100%; }
    .meta-tags { flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; width: 100%; }
    .purchase-area-top { flex-direction: column; align-items: flex-start; gap: 15px; }
    .gallery-imgwrap { width: 88vw; height: 88vw; }
    /* No hover on touch — arrows would otherwise stay stuck visible
       after a tap; navigation on mobile is by swipe + the dots below. */
    .gallery-nav { display: none; }
    .reco-track .app-card { flex: 0 0 155px; }
    .combo-content { flex-direction: column; align-items: center; text-align: center; }
    .combo-products { width: 100%; justify-content: center; margin-bottom: 10px; }
    .combo-total { flex-direction: column; align-items: center; text-align: center; gap: 0; margin-top: 0; }
    .combo-name { text-align: center; }
    .combo-total-val { font-size: 24px; margin-bottom: 15px; }
    .combo-buy { width: 100%; padding: 14px; font-size: 12px; justify-content: center; }
}

@media (max-width: 400px) {
    .reco-track .app-card { flex: 0 0 135px; }
}