/* ============================================================
    DESIGN TOKENS
    Global CSS custom properties — colours, fonts, transitions
============================================================ */

:root {
    /* Colours */
    --cream:       #eddabc;
    --cream-dark:  #d9c49e;
    --rust:        #b16448;
    --rust-dark:   #8a4a33;
    --olive:       #5b5d34;
    --olive-dark:  #3f4124;
    --sand:        #f5eed9;
    --text-dark:   #2c2215;
    --text-mid:    #5a4030;
    --white:       #fffdf7;

    /* Typography */
    --font-display: 'Caveat', cursive;
    --font-body:    'Nunito', sans-serif;

    /* Motion */
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Geometry */
    --radius: 12px;
}


/* ============================================================
    RESET & BASE
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:  var(--font-body);
    background:   var(--sand);
    color:        var(--text-dark);
    overflow-x:   hidden;
}

/* Noise texture overlay — subtle grain across the whole page */
body::before {
    content:          '';
    position:         fixed;
    inset:            0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events:   none;
    z-index:          9999;
    opacity:          0.4;
}


/* ============================================================
    NAVIGATION
============================================================ */

nav {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    z-index:       100;
    padding:       0 5%;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    height:        72px;
    background:    rgba(237, 218, 188, 0.88);
    backdrop-filter: blur(14px);
    border-bottom: 1.5px solid rgba(177, 100, 72, 0.18);
}

.nav-logo {
    font-family:     var(--font-display);
    font-size:       2rem;
    font-weight:     700;
    color:           var(--olive);
    letter-spacing:  0.01em;
    text-decoration: none;
}

.nav-logo span {
    color: var(--rust);
}

.nav-links {
    display:    flex;
    gap:        2rem;
    list-style: none;
}

.nav-links a {
    font-family:     var(--font-body);
    font-weight:     700;
    font-size:       0.85rem;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           var(--text-mid);
    text-decoration: none;
    transition:      color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--rust);
}

/* "Shop Now" pill CTA in the nav */
.nav-cta {
    background:    var(--olive);
    color:         var(--cream) !important;
    padding:       0.5rem 1.2rem;
    border-radius: 99px;
    font-size:     0.8rem !important;
    transition:    background var(--transition) !important;
}

.nav-cta:hover {
    background: var(--rust)  !important;
    color:      var(--white) !important;
}

/* Hamburger icon — shown only on mobile */
.nav-burger {
    display:    none;
    flex-direction: column;
    gap:        5px;
    cursor:     pointer;
    background: none;
    border:     none;
}

.nav-burger span {
    display:       block;
    width:         24px;
    height:        2px;
    background:    var(--olive);
    border-radius: 2px;
    transition:    var(--transition);
}


/* ============================================================
    MOBILE MENU (full-screen overlay)
============================================================ */

.mobile-menu {
    display:         none;         /* toggled to flex via .open */
    position:        fixed;
    inset:           0;
    z-index:         200;
    background:      var(--cream);
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-start;
    padding-top:     25vh;
    gap:             2.5rem;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    font-family:     var(--font-display);
    font-size:       2.5rem;
    font-weight:     700;
    color:           var(--olive);
    text-decoration: none;
    transition:      color var(--transition);
}

.mobile-menu a:hover {
    color: var(--rust);
}

/* ✕ close button — top-right corner */
.mobile-menu-close {
    position:    absolute;
    top:         24px;
    right:       5%;
    background:  none;
    border:      none;
    font-size:   2rem;
    color:       var(--olive);
    cursor:      pointer;
    z-index:     201;
    line-height: 1;
    padding:     0.5rem;
    border-radius: 50%;
    transition:  color var(--transition);
}

.mobile-menu-close:hover {
    color: var(--rust);
}


/* ============================================================
    SHARED BUTTON STYLES
============================================================ */

.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    font-family:     var(--font-body);
    font-weight:     800;
    font-size:       0.88rem;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         0.85rem 2rem;
    border-radius:   99px;
    border:          none;
    cursor:          pointer;
    transition:      transform 0.2s ease,
                    box-shadow 0.2s ease,
                    background var(--transition);
    width: fit-content;
}

.btn:hover {
    transform: translateY(-2px);
}

/* Solid rust fill */
.btn-primary {
    background:  var(--rust);
    color:       var(--white);
    box-shadow:  0 6px 24px rgba(177, 100, 72, 0.35);
}

.btn-primary:hover {
    background: var(--rust-dark);
    box-shadow: 0 10px 32px rgba(177, 100, 72, 0.5);
}

/* Outlined ghost */
.btn-ghost {
    background:  transparent;
    color:       var(--rust);
    border:      2px solid rgba(177, 100, 72, 0.3);
}

.btn-ghost:hover {
    background:   rgba(177, 100, 72, 0.06);
    border-color: var(--rust);
}


/* ============================================================
    SCROLL REVEAL ANIMATION
    Elements start hidden and slide up when entering the viewport
============================================================ */

.reveal {
    opacity:    0;
    transform:  translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
    opacity:   1;
    transform: translateY(0);
}

/* Staggered delay helpers */
.rd1 { transition-delay: 0.08s; }
.rd2 { transition-delay: 0.16s; }
.rd3 { transition-delay: 0.24s; }
.rd4 { transition-delay: 0.32s; }


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

.breadcrumb {
    margin-top:    72px; /* clear the fixed nav */
    background:    var(--white);
    border-bottom: 1.5px solid rgba(177, 100, 72, 0.1);
    padding:       0.8rem 5%;
}

.breadcrumb-inner {
    max-width:      1200px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-mid);
}

.breadcrumb-inner a {
    color:           var(--rust);
    text-decoration: none;
}

.breadcrumb-inner a:hover {
    text-decoration: underline;
}

/* › separator */
.bc-sep {
    opacity: 0.4;
}


/* ============================================================
    PRODUCT HERO — two-column layout
============================================================ */

.product-hero {
    background: var(--white);
    padding:    4rem 5% 5rem;
}

.product-hero-inner {
    max-width:             1200px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    column-gap:            5rem;
    row-gap:               2rem;
    align-items:           start;
}

.product-hero-inner > * {
    min-width: 0;
}

.product-hero-inner > .info-top { grid-column: 2; grid-row: 1; }

/* ── Gallery column (sticky on scroll) ── */

.gallery-col {
    position:    sticky;
    top:         92px;
    grid-column: 1;
    grid-row:    1 / span 2;
}

.gallery-main {
    width:         100%;
    aspect-ratio:  1;
    border-radius: 24px;
    overflow:      hidden;
    position:      relative;
    box-shadow:    0 24px 64px rgba(44, 34, 21, 0.14);
    border:        2px solid rgba(177, 100, 72, 0.1);
}

/* Coloured product preview area */
.gallery-product-display {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1.2rem;
    transition:      background 0.5s ease;
    position:        relative;
}


.gpd-icon {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.productImg {
    width:      100%;
    height:     100%;
    max-width:  100%;
    object-fit: contain;
}

.productImg[src*="front"],
.productImg[src*="back"] {
    width:  80%;
    height: 80%;
}


/* Product name label inside the gallery */
.gpd-name {
    font-family: var(--font-display);
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Thumbnail strip below the main image */
.gallery-thumbs {
    display:    flex;
    gap:        0.8rem;
    margin-top: 1rem;
}

.thumb {
    flex:          1;
    aspect-ratio:  1;
    border-radius: 12px;
    border:        2px solid transparent;
    overflow:      hidden;
    cursor:        pointer;
    transition:    border-color 0.25s ease, transform 0.2s ease;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.8rem;
    background:    linear-gradient(145deg, var(--cream), var(--cream-dark));
}

.thumb:hover {
    transform: translateY(-2px);
}

.thumb.active {
    border-color: var(--rust);
}

.thumb-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}


/* ── Info column ── */

.info-col {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
    grid-column:    2;
    grid-row:       2;
}

.info-top {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}

/* Badge row */
.info-badges {
    display:    flex;
    gap:        0.5rem;
    flex-wrap:  wrap;
    margin-top: 0.4rem;
}

.badge {
    font-size:      0.62rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding:        0.3rem 0.75rem;
    border-radius:  99px;
}

.badge-new  { background: var(--rust);      color: var(--white); }
.badge-best { background: var(--olive);     color: var(--cream); }
.badge-sale { background: #c4552a;          color: var(--white); }
.badge-dark { background: var(--text-dark); color: var(--cream); }

.badge-free {
    background:   rgba(91, 93, 52, 0.12);
    color:        var(--olive);
    border:       1.5px solid rgba(91, 93, 52, 0.25);
}

/* Headings */
.product-title {
    font-family: var(--font-display);
    font-size:   clamp(2.6rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    color:       var(--olive);
}

.product-subtitle {
    font-family: var(--font-display);
    font-size:   1.2rem;
    font-weight: 500;
    color:       var(--rust);
}

/* Star rating row */
.rating-row {
    display:     flex;
    align-items: center;
    gap:         0.8rem;
}

.stars-filled {
    color:           #d4862a;
    font-size:       1rem;
    letter-spacing:  0.05em;
}

.rating-count {
    font-size:   0.8rem;
    font-weight: 700;
    color:       var(--text-mid);
}

.rating-link {
    font-size:       0.78rem;
    color:           var(--rust);
    text-decoration: underline;
    cursor:          pointer;
}

/* Price display */
.price-row {
    display:     flex;
    align-items: baseline;
    gap:         1rem;
}

.price-main {
    font-family: var(--font-display);
    font-size:   3rem;
    font-weight: 700;
    color:       var(--rust);
}

.price-old {
    font-size:       1.2rem;
    text-decoration: line-through;
    color:           var(--text-mid);
    font-weight:     600;
}

.price-note {
    font-size:   0.78rem;
    color:       var(--text-mid);
    font-weight: 600;
}


/* ============================================================
    PRODUCT CONFIGURATION BOX
    Holds colour picker, size selector, quantity, and add-to-cart
============================================================ */

.config-box {
    background:     var(--sand);
    border-radius:  18px;
    padding:        1.8rem;
    border:         1.5px solid rgba(177, 100, 72, 0.1);
    display:        flex;
    flex-direction: column;
    gap:            1.6rem;
}

.config-section {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.config-label {
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--text-mid);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
}

/* Dynamic label showing the current selection e.g. "Army Green" */
.config-selection {
    color:          var(--rust);
    font-weight:    700;
    letter-spacing: 0;
    text-transform: none;
    font-size:      0.8rem;
}


/* ── Colour swatches ── */

.color-options {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: nowrap;
}

.color-opt {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.4rem;
    cursor:         pointer;
}

.color-swatch {
    width:         36px;
    height:        36px;
    border-radius: 10px;
    border:        3px solid transparent;
    transition:    border-color 0.2s ease,
                    transform   0.2s ease,
                    box-shadow  0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.08);
}

.color-opt.active .color-swatch {
    border-color: var(--rust);
    box-shadow:   0 0 0 3px rgba(177, 100, 72, 0.2);
}

.color-opt-name {
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-mid);
}

.color-opt.active .color-opt-name {
    color: var(--rust);
}


/* ── Size buttons ── */

.size-options {
    display:   flex;
    gap:       0.4rem;
    flex-wrap: nowrap;
}

.size-btn {
    padding:       0.4rem 0.75rem;
    border-radius: 8px;
    border:        2px solid rgba(177, 100, 72, 0.2);
    background:    var(--white);
    font-family:   var(--font-body);
    font-size:     0.82rem;
    font-weight:   800;
    color:         var(--text-mid);
    cursor:        pointer;
    transition:    all 0.2s;
}

.size-btn:hover {
    border-color: var(--rust);
    color:        var(--rust);
}

.size-btn.active {
    background:   var(--olive);
    border-color: var(--olive);
    color:        var(--cream);
}


/* ── Quantity stepper ── */

.qty-row {
    display:     flex;
    align-items: center;
    gap:         0;
}

.qty-ctrl {
    width:         42px;
    height:        42px;
    background:    var(--white);
    border:        1.5px solid rgba(177, 100, 72, 0.2);
    color:         var(--text-dark);
    font-size:     1.2rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    all 0.2s;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.qty-ctrl:first-child { border-radius: 10px 0 0 10px; }
.qty-ctrl:last-child  { border-radius: 0 10px 10px 0; }

.qty-ctrl:hover {
    background:  var(--rust);
    color:       var(--white);
    border-color: var(--rust);
}

.qty-display {
    width:       54px;
    height:      42px;
    border-top:    1.5px solid rgba(177, 100, 72, 0.2);
    border-bottom: 1.5px solid rgba(177, 100, 72, 0.2);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--text-dark);
    background:  var(--white);
    user-select: none;
}


/* ── Add to cart row ── */

.atc-row {
    display:     flex;
    gap:         0.8rem;
    align-items: stretch;
    flex-wrap:   wrap;
}

.btn-atc {
    flex:          1;
    min-width:     160px;
    padding:       0.75rem 1.5rem;
    border-radius: 14px;
    background:    var(--rust);
    color:         var(--white);
    border:        none;
    cursor:        pointer;
    font-family:   var(--font-body);
    font-size:     1rem;
    font-weight:   800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:    0 8px 28px rgba(177, 100, 72, 0.38);
    transition:    background var(--transition),
                    transform  0.2s ease,
                    box-shadow 0.2s ease;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           0.6rem;
}

.btn-atc:hover {
    background: var(--rust-dark);
    transform:  translateY(-2px);
    box-shadow: 0 14px 36px rgba(177, 100, 72, 0.5);
}

.btn-atc.added {
    background: var(--olive);
}

/* Wishlist heart button */
.btn-wish {
    width:         52px;
    height:        52px;
    border-radius: 14px;
    background:    var(--white);
    border:        2px solid rgba(177, 100, 72, 0.2);
    font-size:     1.3rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all 0.2s ease;
    flex-shrink:   0;
    align-self:    center;
}

.btn-wish:hover {
    border-color: var(--rust);
    transform:    scale(1.1);
}

.btn-wish.liked {
    background:  var(--rust);
    border-color: var(--rust);
}


/* ── Trust strip (icons below ATC) ── */

.trust-row {
    display:       flex;
    gap:           0;
    border-radius: 12px;
    overflow:      hidden;
    border:        1.5px solid rgba(177, 100, 72, 0.12);
}

.trust-item {
    flex:           1;
    padding:        0.8rem 0.5rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.3rem;
    background:     var(--white);
    border-right:   1.5px solid rgba(177, 100, 72, 0.1);
}

.trust-item:last-child {
    border-right: none;
}

.trust-icon {
    font-size: 1.3rem;
}

.trust-txt {
    font-size:      0.65rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-mid);
    text-align:     center;
}


/* ============================================================
    ACCORDION (product details / shipping / etc.)
============================================================ */

.accordion {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border-radius:  14px;
    overflow:       hidden;
    border:         1.5px solid rgba(177, 100, 72, 0.12);
}

.acc-item {
    border-bottom: 1.5px solid rgba(177, 100, 72, 0.1);
}

.acc-item:last-child {
    border-bottom: none;
}

.acc-trigger {
    width:          100%;
    background:     var(--white);
    border:         none;
    cursor:         pointer;
    padding:        1rem 1.3rem;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    font-family:    var(--font-body);
    font-size:      0.85rem;
    font-weight:    800;
    color:          var(--text-dark);
    text-align:     left;
    transition:     background var(--transition);
}

.acc-trigger:hover {
    background: var(--sand);
}

/* Chevron arrow — rotates when open */
.acc-arrow {
    font-size:  0.7rem;
    color:      var(--rust);
    transition: transform 0.3s ease;
}

.acc-item.open .acc-arrow {
    transform: rotate(180deg);
}

/* Collapsible body — animates via max-height */
.acc-body {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: var(--sand);
    font-size:  0.85rem;
    line-height: 1.75;
    color:      var(--text-mid);
    padding:    0 1.3rem;
}

.acc-item.open .acc-body {
    max-height: 600px;
    padding:    1rem 1.3rem;
}


/* ============================================================
    SPECS SECTION
============================================================ */

.specs-section {
    padding:    6rem 5%;
    background: var(--white);
}

.specs-inner {
    max-width: 1200px;
    margin:    0 auto;
}

.section-header {
    text-align:    center;
    margin-bottom: 3.5rem;
}

.section-label-sm {
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--rust);
    display:        block;
    margin-bottom:  0.7rem;
}

.section-title {
    font-family: var(--font-display);
    font-size:   clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color:       var(--olive);
    line-height: 1.15;
}

.specs-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
}

.spec-card {
    background:     var(--sand);
    border-radius:  18px;
    padding:        1.8rem 1.5rem;
    border:         1.5px solid rgba(177, 100, 72, 0.08);
    display:        flex;
    flex-direction: column;
    gap:            0.8rem;
    transition:     transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 16px 40px rgba(44, 34, 21, 0.1);
}

.spec-icon { font-size: 2.2rem; }

.spec-name {
    font-size:      0.72rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--rust);
}

.spec-val {
    font-family: var(--font-display);
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--olive);
}

.spec-desc {
    font-size:   0.78rem;
    color:       var(--text-mid);
    line-height: 1.55;
}


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

.reviews-section {
    padding:    6rem 5%;
    background: var(--sand);
}

.reviews-inner {
    max-width: 1200px;
    margin:    0 auto;
}

.reviews-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   3rem;
    flex-wrap:       wrap;
    gap:             1rem;
}

/* Aggregate score + bar breakdown */
.rating-summary {
    display:     flex;
    align-items: center;
    gap:         2rem;
    flex-wrap:   wrap;
}

.big-rating {
    font-family: var(--font-display);
    font-size:   5rem;
    font-weight: 700;
    color:       var(--rust);
    line-height: 1;
}

.rating-breakdown {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
}

.rbar-row {
    display:     flex;
    align-items: center;
    gap:         0.7rem;
    font-size:   0.72rem;
}

.rbar-label {
    font-weight: 700;
    color:       var(--text-mid);
    width:       12px;
    text-align:  right;
}

.rbar-track {
    width:         100px;
    height:        6px;
    background:    var(--cream-dark);
    border-radius: 99px;
    overflow:      hidden;
}

.rbar-fill {
    height:        100%;
    background:    #d4862a;
    border-radius: 99px;
}

.rbar-count {
    color: var(--text-mid);
}

/* Individual review cards */
.reviews-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

.review-card {
    background:    var(--white);
    border-radius: 18px;
    padding:       1.6rem;
    border:        1.5px solid rgba(177, 100, 72, 0.08);
    box-shadow:    0 4px 16px rgba(44, 34, 21, 0.05);
    position:      relative;
}

/* Decorative opening quotation mark */
.review-card::before {
    content:     '"';
    font-family: var(--font-display);
    font-size:   4rem;
    line-height: 0.8;
    color:       var(--rust);
    opacity:     0.18;
    position:    absolute;
    top:         12px;
    left:        14px;
}

.rv-stars  { color: #d4862a; font-size: 0.85rem; margin-bottom: 0.6rem; }
.rv-title  { font-size: 0.88rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; }
.rv-body   { font-size: 0.82rem; line-height: 1.7; color: var(--text-mid); margin-bottom: 1.1rem; }

.rv-author {
    display:     flex;
    align-items: center;
    gap:         0.7rem;
}

.rv-avatar {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    var(--cream-dark);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1rem;
    flex-shrink:   0;
}

.rv-name     { font-size: 0.8rem;  font-weight: 800; color: var(--text-dark); display: block; }
.rv-meta     { font-size: 0.68rem; color: var(--text-mid); }
.rv-verified { color: var(--olive); font-weight: 700; }


/* ============================================================
    "YOU MAY ALSO LIKE" — FEATURED CARDS
============================================================ */

.featured-section {
    padding:    6rem 5%;
    background: var(--white);
}

.featured-inner {
    max-width: 1200px;
    margin:    0 auto;
}

.featured-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
    margin-top:            3rem;
}

.feat-card {
    background:    linear-gradient(145deg, var(--cream) 0%, var(--cream-dark) 100%);
    border-radius: 18px;
    overflow:      hidden;
    border:        1.5px solid rgba(177, 100, 72, 0.08);
    box-shadow:    0 4px 18px rgba(44, 34, 21, 0.06);
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
    cursor:        pointer;
    position:      relative;
}


.feat-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 18px 44px rgba(44, 34, 21, 0.14);
}

/* Image area */
.feat-img {
    aspect-ratio:    1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    position:        relative;
}

.feat-emoji { font-size: 3.5rem; z-index: 1; }

.feat-label {
    font-family: var(--font-display);
    font-size:   0.95rem;
    font-weight: 700;
    z-index:     1;
    text-align:  center;
    padding:     0 0.5rem;
}

/* Badge pill */
.feat-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    font-size:      0.58rem;
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        0.28rem 0.65rem;
    border-radius:  99px;
    z-index:        2;
}

.fb-new  { background: var(--rust);  color: var(--white); }
.fb-sale { background: #c4552a;      color: var(--white); }
.fb-best { background: var(--olive); color: var(--cream); }

/* Card body */
.feat-body { padding: 1rem 1.1rem 1.2rem; background: var(--sand); }

.feat-cat {
    font-size:      0.62rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rust);
    margin-bottom:  0.25rem;
    display:        block;
}

.feat-name  { font-size: 0.88rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; }

.feat-stars { font-size: 0.72rem; color: #d4862a; margin-bottom: 0.6rem; }
.feat-stars span { font-size: 0.68rem; color: var(--text-mid); margin-left: 0.25rem; font-weight: 600; }

.feat-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.feat-price {
    font-family: var(--font-display);
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--rust);
}

/* Small "Add to Bag" button on each featured card */
.btn-feat-add {
    font-size:      0.68rem;
    padding:        0.42rem 0.85rem;
    border-radius:  8px;
    background:     var(--olive);
    color:          var(--cream);
    border:         none;
    cursor:         pointer;
    font-family:    var(--font-body);
    font-weight:    800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:     background var(--transition), transform 0.2s;
}

.btn-feat-add:hover {
    background: var(--rust);
    transform:  translateY(-1px);
}


/* ============================================================
    TOAST NOTIFICATION
============================================================ */

.toast {
    position:      fixed;
    bottom:        2rem;
    left:          50%;
    transform:     translateX(-50%) translateY(80px);
    background:    var(--olive);
    color:         var(--cream);
    padding:       0.9rem 2rem;
    border-radius: 99px;
    font-family:   var(--font-body);
    font-size:     0.88rem;
    font-weight:   700;
    box-shadow:    0 8px 32px rgba(44, 34, 21, 0.28);
    z-index:       500;
    transition:    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    opacity:       0;
    pointer-events: none;
    white-space:   nowrap;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity:   1;
}


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

footer {
    background: var(--text-dark);
    color:      var(--cream);
    padding:    4rem 5% 2rem;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   3rem;
    max-width:             1200px;
    margin:                0 auto;
    padding-bottom:        3rem;
    border-bottom:         1px solid rgba(237, 218, 188, 0.1);
}

.footer-brand p {
    font-size:   0.85rem;
    line-height: 1.7;
    color:       rgba(237, 218, 188, 0.55);
    margin-top:  0.8rem;
    max-width:   280px;
}

.footer-col h4 {
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rust);
    margin-bottom:  1rem;
}

.footer-col a {
    display:         block;
    margin-bottom:   0.6rem;
    font-size:       0.85rem;
    color:           rgba(237, 218, 188, 0.55);
    text-decoration: none;
    transition:      color var(--transition);
}

.footer-col a:hover {
    color: var(--cream);
}

.footer-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     2rem;
    max-width:       1200px;
    margin:          0 auto;
    font-size:       0.78rem;
    color:           rgba(237, 218, 188, 0.35);
    flex-wrap:       wrap;
    gap:             0.5rem;
}

.social-links {
    display: flex;
    gap:     0.8rem;
}

.social-links a {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    rgba(237, 218, 188, 0.08);
    border:        1px solid rgba(237, 218, 188, 0.12);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     0.9rem;
    text-decoration: none;
    transition:    background var(--transition);
}

.social-links a:hover {
    background: var(--rust);
}


/* ============================================================
    RESPONSIVE BREAKPOINTS
============================================================ */

/* Tablet — collapse to single column */
@media (max-width: 1000px) {
    .product-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .product-hero-inner > .info-top, .gallery-col, .info-col { grid-column: auto; grid-row: auto; }
    .gallery-col        { position: static; }
    .specs-grid         { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid       { grid-template-columns: 1fr 1fr; }
    .featured-grid      { grid-template-columns: repeat(2, 1fr); }
    .footer-grid        { grid-template-columns: 1fr 1fr; }
}

/* Mobile — hide nav links, show burger, single column everywhere */
@media (max-width: 700px) {
    .nav-burger   { display: flex; }
    .reviews-grid { grid-template-columns: 1fr; }
    .featured-grid { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; gap: 1.5rem; margin-top: 2rem; }
    .feat-card { flex: 0 0 75vw; scroll-snap-align: start; }
    .feat-card.reveal { opacity: 1; transform: none; }
    .feat-footer { display: none; }
    .feat-price-pill {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: var(--rust);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 800;
        padding: 0.25rem 0.65rem;
        border-radius: 99px;
        z-index: 2;
        pointer-events: none;
    }
    .footer-grid  { grid-template-columns: 1fr; }
}

/* Small mobile */
@media (max-width: 480px) {
    .specs-grid    { grid-template-columns: 1fr; }
    .trust-txt     { font-size: 0.58rem; }
}