/* ============================================================
   IPMCKart — Product Detail Page New Design
   Clean, aesthetic layout with proper font sizing (2.25rem - 3rem)
   Brand colors: Primary #e5101a, Secondary #2ea063
   ============================================================ */

/* Base Variables */
:root {
    --brand-primary: #e60000;
    --brand-primary-dark: #c50000;
    --brand-secondary: #2ea063;
    --brand-gold: #FFD700;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --border-color: #e7e7e7;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.13);
    --font-display: 'Barlow Condensed', 'Montserrat', sans-serif;
    --font-body: 'Poppins', 'Open Sans', sans-serif;
    --font-size-sm: 1.3125rem; /* 21px — small UI labels, badges, secondary metadata (was 14px, cumulative +87.5%) */
    --font-size-base: 1.5rem;  /* 24px — body text, list items, button labels (was 16px, cumulative +50%) */
    --font-size-lg: 1.875rem;  /* 30px — card headings, product title, brand badge (was 20px, cumulative +50%) */
    --font-size-xl: 2.25rem;   /* 36px — section headings, current price (was 24px, cumulative +50%) */
    --font-size-xxl: 3rem;     /* 48px — page-level hero prices (was 32px, cumulative +50%) */
    /* NOTE: every value above was bumped twice — first +20% (→ 1.05/1.2/1.5/1.8/2.4),
       then +25% on top (×1.25 of the post-+20% value) for a cumulative ~+50% over
       the original 14/16/20/24/32px baseline. */
    --transition: all 0.3s ease;
}

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   HEADER STYLES
   ============================================ */

.site-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background: #f8f9fa;
    padding: 8px 0;
    font-size: var(--font-size-sm);
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-links {
    display: flex;
    gap: 20px;
}

.header-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.header-links a:hover {
    color: var(--brand-primary);
}

.header-main {
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 44px;
    width: auto;
    border-radius: 10px;
}

.header-search {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 12px 45px 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: var(--transition);
}

.header-search input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(229, 16, 26, 0.1);
}

.header-search button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.4rem;
}

.header-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.header-icon-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.header-icon-link:hover {
    color: var(--brand-primary);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Navigation */
.main-nav {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.all-categories button {
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.all-categories button:hover {
    background: var(--brand-primary-dark);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    padding: 8px 0;
    position: relative;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--brand-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-primary);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.contact-info i {
    color: var(--brand-primary);
    font-size: 1.2rem;
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
    padding: 20px 0;
    font-size: var(--font-size-sm);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb a,
.breadcrumb span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--brand-primary);
    background: rgba(229, 16, 26, 0.1);
}

.breadcrumb .separator {
    color: var(--text-muted);
    padding: 0 4px;
}

.breadcrumb .active {
    color: var(--brand-primary);
    font-weight: 600;
}

/* ============================================
   MAIN PRODUCT SECTION
   ============================================ */

.product-main {
    padding: 30px 0;
}

.product-container {
    display: grid;
    /* Use `minmax(0, 1fr)` instead of bare `1fr` so long content (spec tables,
       feature lists, product descriptions) cannot force the implicit track min
       size past 1fr and collapse the second column into a vertical stack on
       some browsers (esp. Firefox and any UA that prefers `min-content`
       over `0` for the implicit minimum). With `minmax(0, ...)`, both columns
       are guaranteed equal-width regardless of how much content they hold. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ============================================
   PRODUCT GALLERY
   ============================================ */

.product-gallery {
    position: sticky;
    top: 150px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.gallery-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
    aspect-ratio: 1/1;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.zoom-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-primary);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.zoom-icon:hover {
    background: white;
    transform: scale(1.1);
}

.gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px;
    flex-shrink: 0;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 2px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

.thumbnail:hover {
    border-color: var(--brand-primary);
}

.thumbnail.active {
    border-color: var(--brand-primary);
    background: white;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail:hover img {
    transform: scale(1.1);
}

/* ============================================
   PRODUCT DETAILS
   ============================================ */

.product-details {
    padding: 20px 0;
}

.brand-badge {
    display: inline-block;
    background: var(--brand-primary);
    color: white;
    padding: 6px 16px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    line-height: 1.3;
}

.rating-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.stars {
    display: flex;
    gap: 3px;
    color: var(--brand-gold);
    font-size: 1.2rem;
}

.rating-count {
    display: flex;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.rating-count .write-review {
    color: var(--brand-primary);
    text-decoration: none;
    transition: var(--transition);
}

.rating-count .write-review:hover {
    text-decoration: underline;
}

.price-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.current-price {
    font-family: var(--font-display);
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: -1px;
}

.old-price {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    text-decoration: line-through;
}

.savings {
    background: #f0f8ff;
    color: #0066cc;
    padding: 4px 12px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: var(--font-size-sm);
}

.stock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-secondary);
    display: inline-block;
}

.stock-dot.out-of-stock {
    background: #dc3545;
}

.short-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

/* Quantity */
.quantity-section {
    margin-bottom: 20px;
}

.quantity-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.horizontal-quantity {
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    width: 100%;
    max-width: 120px;
    font-size: var(--font-size-base);
    text-align: center;
    transition: var(--transition);
}

.horizontal-quantity:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(229, 16, 26, 0.1);
}

/* ============================================
   CTA BUTTONS
   ============================================ */

.cta-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: var(--border-radius);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--brand-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
}

.btn-secondary {
    background: var(--brand-secondary);
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background: #248a52;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

.btn-outline:hover:not(:disabled) {
    background: rgba(229, 16, 26, 0.1);
}

.btn i,
.btn svg {
    font-size: 1.3rem;
}

/* ============================================
   SECONDARY ACTIONS
   ============================================ */

.secondary-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition);
}

.action-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: white;
}

/* ============================================
   FEATURES + SPECIFICATIONS CARDS
   ============================================ */

.features-specs {
    display: grid;
    /* `minmax(0, 1fr)` keeps the Key Features + Specifications side-by-side as a
       true 2-column layout on every viewport — the bare `1fr 1fr` collapses to a
       single column when one card holds long content (a detailed spec table or a
       long feature list) because the implicit track minimum is `min-content`,
       not `0`. With `minmax(0, 1fr)`, the track minimum IS 0 and the columns stay
       equal-width regardless of how much content the cards hold. This is the
       standard "prevent overflow track" grid fix. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    /* Two defensive overflow guards: (a) `min-width: 0` lets the grid track
       actually shrink to its 0-based minimum when the parent uses
       `grid-template-columns: minmax(0, 1fr)` — without it, long spec values
       or feature descriptions would still expand the card; (b) `overflow: hidden`
       combined with `overflow-wrap: break-word` ensures any unbreakable string
       that still overflows gets clipped instead of forcing a horizontal scroll
       on the whole page. */
    min-width: 0;
    overflow: hidden;
}

.card * {
    overflow-wrap: break-word;
    word-break: break-word;
}

.card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.card-heading i,
.card-heading svg {
    width: 24px;
    height: 24px;
    color: var(--brand-primary);
}

/* Features List */
.features-list {
    list-style: none;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.features-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Aesthetic: small geometric dot marker (NOT a filled red circle with white
   checkmark — user feedback was that the heavy icon was "too much"). The dot
   is 6px, brand-color, with subtle vertical alignment so it sits visually
   centered against the first line of text. aria-hidden because the dot is
   decoration, not information. */
.feature-icon {
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 0.65em;
    box-shadow: 0 0 0 4px rgba(229, 0, 0, 0.08);
}

/* The legacy .feature-icon SVG/image inner content is no longer rendered
   (markup is just an empty span), but keep the i/svg sizing defensive for
   any third-party consumers that haven't migrated. */
.feature-icon i,
.feature-icon svg {
    width: 14px;
    height: 14px;
}

.feature-text {
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--text-primary);
    flex: 1;
}

.feature-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Specifications card: NO icon prefix. Rows are pure typography — bold label
   + colon + space + value text, separated by a thin border. The framework
   here is intentionally minimal: text alignment is left (not flex-center)
   because there's no icon to balance. */
.specs-text-list {
    list-style: none;
}

.specs-text-list li {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-base);
    line-height: 1.55;
}

.specs-text-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.spec-text {
    color: var(--text-primary);
}

.spec-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Specifications card now renders via the same <ul class="features-list specs-text-list">
   shape as Key Features — each spec is an icon-prefixed <li> reading as
   `<strong>Label:</strong> Description`, so no table-specific CSS is needed.
   The `.specs-text-list` modifier is reserved as a hook for any future styling
   that needs to target ONLY the specs card (e.g. alternating-row tinting or a
   narrower icon variant) without affecting the Key Features card. */

/* ============================================
   PAYMENT + TRUST SECTION
   ============================================ */

.payment-trust {
    display: grid;
    /* Same `minmax(0, 1fr)` defense as .features-specs: Payment Methods + Trust
       Badges should sit side-by-side on every viewport that can fit two columns. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.payment-methods img,
.payment-methods i {
    height: 36px;
    width: auto;
    max-width: 60px;
    opacity: 0.8;
    transition: var(--transition);
}

.payment-methods img:hover,
.payment-methods i:hover {
    opacity: 1;
    transform: scale(1.1);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ============================================
   WARRANTY BANNER
   ============================================ */

.warranty-banner {
    margin-top: 30px;
    background: rgba(229, 16, 26, 0.05);
    border: 1px solid rgba(229, 16, 26, 0.18);
    color: var(--text-primary);
    padding: 30px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.warranty-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.warranty-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.warranty-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.warranty-block strong {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--brand-primary);
    display: block;
    margin-bottom: 4px;
}

.warranty-block span {
    color: var(--text-secondary);
}

.warranty-badge {
    background: var(--brand-primary);
    color: white;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(229, 16, 26, 0.3);
}

.warranty-badge .years {
    font-size: 2.6rem;
    line-height: 1;
}

.warranty-badge .label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    padding: 0 8px;
}

/* ============================================
   REVIEWS SECTION
   ============================================ */

.reviews-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.reviews-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.reviews-content {
    display: grid;
    /* Left column has a fixed 300px aggregate-rating card; right column needs the
       same `minmax(0, 1fr)` overflow-guard to keep long review bodies from
       pushing the right column wider than intended. */
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
}

/* Aggregate Rating */
.aggregate-rating {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border-color);
}

.aggregate-rating .overall-rating {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.aggregate-rating .stars {
    justify-content: center;
    margin-bottom: 10px;
}

.aggregate-rating .rating-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-bar .label {
    width: 40px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.rating-bar .bar-container {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar .bar-fill {
    height: 100%;
    background: var(--brand-gold);
    border-radius: 4px;
}

.rating-bar .count {
    width: 40px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: right;
}

/* Individual Reviews */
.individual-reviews {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card {
    background: var(--bg-secondary);
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    gap: 20px;
}

.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.review-content {
    flex: 1;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.verified-badge {
    background: var(--brand-secondary);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.review-text {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-secondary);
}

.review-helpful {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.helpful-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.helpful-btn:hover {
    color: var(--brand-primary);
}

.view-all-reviews {
    text-align: center;
    margin-top: 30px;
}

.view-all-reviews .btn {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

.view-all-reviews .btn:hover {
    background: var(--brand-primary);
    color: white;
}

/* Reviews empty state */
.reviews-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}

.reviews-empty i {
    font-size: 2.4rem;
    color: var(--brand-primary);
    margin-bottom: 12px;
    display: block;
}

.reviews-empty p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Review avatar shows an initial letter */
.review-avatar {
    font-family: var(--font-display);
    font-weight: 700;
    color: white;
    background: var(--brand-primary);
    text-transform: uppercase;
}

.review-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: 6px;
}

/* ============================================
   RELATED PRODUCTS
   ============================================ */

.related-products {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.related-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px;
}

.related-grid {
    display: grid;
    /* `minmax(250px, 1fr)` already pins the track minimum, so this grid is
       overflow-safe; the explicit `minmax(0, ...)` is unnecessary here. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.related-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
    border-color: var(--brand-primary);
}

.related-card-image {
    aspect-ratio: 1/1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.related-card-image img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.related-card:hover .related-card-image img {
    transform: scale(1.05);
}

.related-card-info {
    padding: 20px;
}

.related-card-title {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-primary);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: #1a1518;
    color: white;
    padding: 60px 0 30px;
    margin-top: 80px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: white;
    margin-bottom: 20px;
}

.footer-section p {
    color: #ccc;
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.footer-section ul li a:hover {
    color: var(--brand-primary);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: var(--transition);
    font-size: 1.2rem;
}

.social-links a:hover {
    background: var(--brand-primary);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #333;
    color: #ccc;
    font-size: var(--font-size-sm);
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.product-loading {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 4px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.not-found {
    text-align: center;
    padding: 80px 20px;
}

.not-found h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: 15px;
}

.not-found p {
    color: var(--text-secondary);
    margin-bottom: 25px;
}

.not-found .btn {
    background: var(--brand-primary);
    color: white;
    padding: 15px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
}

.not-found .btn:hover {
    background: var(--brand-primary-dark);
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
    .header-content {
        gap: 15px;
    }
    
    .header-search {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .product-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    
    .product-gallery {
        position: static;
        flex-direction: column-reverse;
    }

    .gallery-thumbnails {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 15px;
    }

    /* IMPORTANT: keep the 2-column layout for Key Features + Specifications and
       Payment + Trust at every viewport where two cards can fit. Previous
       iterations collapsed these to single column at ≤992px which broke the
       layout on smaller laptops and tablet-landscape devices. We instead keep
       the 2-column here (with the same minmax(0, 1fr) overflow defense as the
       base rule) and collapse to single column at the new dedicated breakpoint
       below (≤720px mobile-portrait) where two cards would each be < 360px wide. */
    .features-specs,
    .payment-trust {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
    }
    
    .reviews-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .aggregate-rating {
        order: -1;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .header-search {
        order: 3;
        max-width: 100%;
        margin-top: 15px;
    }
    
    .header-icons {
        order: 2;
    }
    
    .nav-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .cta-stack {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .secondary-actions {
        flex-wrap: wrap;
    }
    
    .secondary-actions .action-btn {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .breadcrumb .container {
        flex-direction: column;
        gap: 5px;
    }

    .breadcrumb .separator {
        display: none;
    }

    .price-container {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* Dedicated mobile-portrait breakpoint (≤720px) — at this width each card
   inside .features-specs and .payment-trust would be < 360px, too narrow for a
   spec table or feature list to read comfortably. Stay 2-col everywhere else. */
@media (max-width: 720px) {
    .features-specs,
    .payment-trust {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* Adaptive font scaling on the inside-spec/spec cards. At narrower viewports
   the 2-column grid gives each card ~50% of the container width, so the
   absolute font sizes need to step down to keep the cards scannable without
   horizontal overflow. We use a percentage-based `font-size` so the cards
   automatically absorb the +50% token bump while staying legible on smaller
   screens — the user explicitly asked to "decrease the size of the container
   but legible enough to read" on smaller screens. em units multiply on top of
   the inherited token, so the new larger tokens still dominate at desktop. */
@media (max-width: 1100px) {
    .features-specs .feature-text,
    .features-specs .feature-icon,
    .features-specs .spec-label,
    .features-specs .spec-value,
    .features-specs .card-heading,
    .features-specs .card { font-size: 0.85em; }
}
@media (max-width: 900px) {
    .features-specs .feature-text,
    .features-specs .feature-icon,
    .features-specs .spec-label,
    .features-specs .spec-value,
    .features-specs .card-heading,
    .features-specs .card { font-size: 0.78em; }
}
@media (max-width: 720px) {
    /* Below the single-col breakpoint, restore readable single-column card text. */
    .features-specs .feature-text,
    .features-specs .feature-icon,
    .features-specs .spec-label,
    .features-specs .spec-value,
    .features-specs .card-heading,
    .features-specs .card { font-size: 1em; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-primary);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   VARIANT SWATCHES (preserved from original)
   ============================================ */

.variant-swatches {
    margin: 20px 0;
}

.variant-swatches small {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: var(--font-size-sm);
}

.swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.swatch:hover {
    transform: scale(1.2);
    border-color: var(--brand-primary);
}

.swatch.active {
    border-color: var(--brand-primary);
}

/* Form control styling */
.form-control {
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    width: 100%;
    max-width: 120px;
    text-align: center;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(229, 16, 26, 0.1);
}

/* Price box compatibility (hidden by default, used by JS) */
.price-box {
    display: none;
}