/*
Theme Name: Black Rock Industrial
Theme URI: https://blackrockcigarco.com/
Author: Black Rock Cigar Co. & Antigravity
Author URI: https://blackrockcigarco.com/
Description: An Industrial-Luxury WordPress theme crafted for Black Rock Cigar Co. Inspired by subterranean Pennsylvania anthracite mines, glowing molten embers, heavy riveted copper hardware, and aged timber tasting lounges. Complete WooCommerce support for merch and apparel.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackrock-industrial
Tags: custom-header, custom-menu, featured-images, full-width-template, theme-options, e-commerce
*/

/* ============================================================
   1. TOKENS & INDUSTRIAL PALETTE
   ============================================================ */
:root {
    --coal-black: #080605;
    --coal-deep: #0f0c09;
    --mine-iron: #18130e;
    --mine-card: #201812;
    --mine-card-hover: #291f17;

    --copper-dark: #824719;
    --copper-hammered: #b87333;
    --copper-bright: #d9883c;
    --copper-light: #f3a65e;
    --copper-glow: rgba(217, 136, 60, 0.35);

    --ember-molten: #e25b1c;
    --ember-amber: #f39c12;
    --ember-glow: rgba(226, 91, 28, 0.45);

    --ash-mid: #7a6e63;
    --ash-light: #b5aaa0;
    --cream-text: #f7efe6;

    --font-heading: 'Cinzel', serif;
    --font-body: 'Lora', serif;
    --font-ui: 'Josefin Sans', sans-serif;

    --container-max: 1240px;
    --border-rivet: 1px solid rgba(184, 115, 51, 0.3);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: var(--coal-black);
    color: var(--cream-text);
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--cream-text);
    background-color: var(--coal-black);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(184, 115, 51, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 50%, rgba(226, 91, 28, 0.08) 0%, transparent 40%);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--copper-bright);
    text-decoration: none;
    transition: all 0.25s ease;
}

a:hover, a:focus {
    color: var(--copper-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    color: var(--cream-text);
    margin-bottom: 1rem;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ============================================================
   3. INDUSTRIAL EMBOSSED ELEMENTS & BUTTONS
   ============================================================ */
.section-tag, .label-text {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--copper-bright);
    display: inline-block;
    margin-bottom: 0.75rem;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.25rem auto 2.25rem;
}

.divider::before, .divider::after {
    content: '';
    height: 1px;
    width: 75px;
    background: linear-gradient(90deg, transparent, var(--copper-hammered), transparent);
}

.divider-diamond {
    width: 9px;
    height: 9px;
    background: var(--copper-bright);
    transform: rotate(45deg);
    box-shadow: 0 0 10px var(--copper-bright), 0 0 4px var(--ember-molten);
}

/* Hammered Copper Miner Token */
.miner-copper-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #d9883c 0%, #b87333 50%, #7d3f15 100%);
    color: #170d05;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.95rem;
    border-radius: 3px;
    border: 1px solid #f9bb7d;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* Industrial Riveted Box Frame */
.riveted-frame {
    position: relative;
    border: 1px solid rgba(184, 115, 51, 0.35);
    background: var(--mine-card);
    border-radius: 4px;
}

.riveted-frame::before, .riveted-frame::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #f3a65e 0%, #824719 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 1px #fff, 0 1px 2px #000;
}
.riveted-frame::before { top: 8px; left: 8px; }
.riveted-frame::after { bottom: 8px; right: 8px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.95rem 2.25rem;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #e25b1c 0%, #b87333 100%);
    color: #fff;
    border: 1px solid #ff884d;
    box-shadow: 0 4px 15px rgba(226, 91, 28, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ff712e 0%, #d9883c 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 91, 28, 0.6);
}

.btn-outline {
    background: transparent;
    color: var(--cream-text);
    border: 1px solid var(--copper-hammered);
}

.btn-outline:hover {
    background: rgba(184, 115, 51, 0.15);
    color: #fff;
    border-color: var(--copper-bright);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--copper-bright);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--copper-dark);
}

.btn-ghost:hover {
    color: #fff;
    border-bottom-color: var(--copper-bright);
}

/* ============================================================
   4. SITE HEADER & NAVIGATION
   ============================================================ */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.25rem 0;
    transition: all 0.4s ease;
    background: linear-gradient(180deg, rgba(8, 6, 5, 0.95) 0%, rgba(8, 6, 5, 0.85) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(184, 115, 51, 0.25);
}

#site-header.scrolled {
    padding: 0.85rem 0;
    background: rgba(8, 6, 5, 0.98);
    border-bottom: 1px solid rgba(184, 115, 51, 0.45);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

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

.site-logo {
    display: flex;
    flex-direction: column;
}

.site-logo .logo-text {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--cream-text);
    text-transform: uppercase;
}

.site-logo .logo-tagline {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--copper-bright);
}

#primary-nav ul.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2rem;
}

#primary-nav ul.nav-menu li a {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash-light);
    padding: 0.4rem 0;
    position: relative;
}

#primary-nav ul.nav-menu li a:hover,
#primary-nav ul.nav-menu li a.active {
    color: var(--copper-bright);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-cart-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream-text);
    border: 1px solid rgba(184, 115, 51, 0.4);
    padding: 0.4rem 0.85rem;
    border-radius: 3px;
    background: rgba(32, 24, 18, 0.5);
}

.header-cart-link:hover {
    border-color: var(--copper-bright);
    color: var(--copper-bright);
    background: rgba(184, 115, 51, 0.15);
}

.header-cart-badge {
    background: linear-gradient(135deg, #e25b1c 0%, #b87333 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream-text);
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    min-height: 94vh;
    display: flex;
    align-items: center;
    padding: 9rem 0 5rem;
    background-color: var(--coal-black);
    overflow: hidden;
}

.hero-industrial-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    filter: brightness(0.5) contrast(1.15);
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 60% 60%, rgba(226, 91, 28, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 6, 5, 0.8) 0%, rgba(8, 6, 5, 0.4) 40%, rgba(8, 6, 5, 0.96) 100%),
        radial-gradient(circle at 20% 50%, rgba(8, 6, 5, 0.85) 0%, rgba(8, 6, 5, 0.98) 75%);
    z-index: 2;
}

.hero-inner {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
}

.hero-title {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-shadow: 0 4px 20px rgba(0,0,0,0.9);
}

.hero-title span {
    color: var(--copper-bright);
    display: block;
    font-size: 0.9em;
    text-shadow: 0 0 20px rgba(217, 136, 60, 0.4);
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-style: italic;
    color: #f7d5b2;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.hero-desc {
    color: var(--ash-light);
    font-size: 1.05rem;
    max-width: 540px;
    margin-bottom: 2.25rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

.hero-visual-card {
    position: relative;
    padding: 1rem;
    background: rgba(24, 19, 14, 0.9);
    border: 1px solid rgba(184, 115, 51, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(226, 91, 28, 0.15);
    border-radius: 4px;
}

.hero-visual-card img {
    border-radius: 2px;
}

.hero-badge-corner {
    position: absolute;
    bottom: -15px;
    right: -15px;
}

/* ============================================================
   6. MINE SHAFT HERITAGE TIMELINE (STAGGERED)
   ============================================================ */
.section-timeline {
    padding: 7rem 0;
    background: linear-gradient(180deg, #090705 0%, #130f0b 50%, #080605 100%);
    position: relative;
    border-top: 1px solid rgba(184, 115, 51, 0.25);
    border-bottom: 1px solid rgba(184, 115, 51, 0.25);
}

.timeline-track {
    position: relative;
    max-width: 1040px;
    margin: 4rem auto 0;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(180deg, var(--copper-hammered) 0%, var(--ember-molten) 50%, var(--copper-dark) 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(226, 91, 28, 0.4);
}

.timeline-card-wrapper {
    position: relative;
    display: flex;
    margin-bottom: 5rem;
    width: 100%;
}

.timeline-card-wrapper:nth-child(odd) { justify-content: flex-start; }
.timeline-card-wrapper:nth-child(even) { justify-content: flex-end; }

.timeline-node-pin {
    position: absolute;
    left: 50%;
    top: 2rem;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.timeline-card-industrial {
    width: 45%;
    background: var(--mine-card);
    border: 1px solid rgba(184, 115, 51, 0.35);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: 0 12px 35px rgba(0,0,0,0.7);
    transition: all 0.35s ease;
    position: relative;
}

.timeline-card-industrial:hover {
    border-color: var(--copper-bright);
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.85), 0 0 25px var(--copper-glow);
}

.timeline-photo-frame {
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(184, 115, 51, 0.3);
    border-radius: 3px;
}

.timeline-photo-frame img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    filter: contrast(1.1) brightness(0.95);
    transition: transform 0.4s ease;
}

.timeline-card-industrial:hover .timeline-photo-frame img {
    transform: scale(1.04);
}

.timeline-year-stamp {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--ember-molten);
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.timeline-card-title {
    font-size: 1.45rem;
    color: var(--cream-text);
    margin-bottom: 0.75rem;
}

.timeline-card-desc {
    color: var(--ash-light);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ============================================================
   7. CIGARS COLLECTION SECTION
   ============================================================ */
.section-cigars {
    padding: 7rem 0;
    background: var(--coal-black);
}

.cigars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3.5rem;
}

.cigar-card-industrial {
    background: var(--mine-card);
    border: 1px solid rgba(184, 115, 51, 0.3);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.cigar-card-industrial:hover {
    border-color: var(--copper-bright);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(226, 91, 28, 0.3);
}

.cigar-card-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #090706;
}

.cigar-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.cigar-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 12, 9, 0.95) 100%);
}

.cigar-card-body {
    padding: 2rem 1.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cigar-card-name {
    font-size: 1.55rem;
    color: var(--cream-text);
    margin-bottom: 0.35rem;
}

.cigar-card-tribute {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--copper-light);
    margin-bottom: 1rem;
}

.cigar-card-desc {
    color: var(--ash-light);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.cigar-specs-table {
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    border-top: 1px solid rgba(184, 115, 51, 0.2);
    border-bottom: 1px solid rgba(184, 115, 51, 0.2);
    padding: 0.75rem 0;
}

.cigar-specs-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.cigar-specs-label {
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ash-mid);
}

.cigar-specs-val {
    color: var(--cream-text);
    font-weight: 600;
}

.cigar-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
}

/* ============================================================
   8. OFFICIAL MERCH SECTION (WOOCOMMERCE INTEGRATION)
   ============================================================ */
.section-merch {
    padding: 6.5rem 0;
    background: #0d0a08;
    border-top: 1px solid rgba(184, 115, 51, 0.2);
}

.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
}

.merch-card-industrial {
    background: var(--mine-card);
    border: 1px solid rgba(184, 115, 51, 0.25);
    border-radius: 4px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.merch-card-industrial:hover {
    border-color: var(--copper-bright);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.merch-image-wrap {
    height: 280px;
    background: #090705;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.merch-image-wrap img {
    max-height: 100%;
    object-fit: cover;
}

.merch-title {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}

.merch-price {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    color: var(--copper-bright);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ============================================================
   9. COLLIERY STORYTELLING BANNER
   ============================================================ */
.section-colliery-quote {
    padding: 6.5rem 0;
    background: radial-gradient(circle, #241912 0%, #0d0a08 80%);
    text-align: center;
    border-top: 1px solid rgba(184, 115, 51, 0.25);
    border-bottom: 1px solid rgba(184, 115, 51, 0.25);
}

.colliery-quote-box {
    max-width: 820px;
    margin: 0 auto;
}

.colliery-quote-box blockquote {
    font-family: var(--font-body);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-style: italic;
    line-height: 1.5;
    color: #f7d5b2;
    margin-bottom: 1.5rem;
}

.colliery-quote-box cite {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--copper-bright);
    display: block;
    font-style: normal;
}

/* ============================================================
   10. SITE FOOTER
   ============================================================ */
#site-footer {
    background: #070504;
    border-top: 1px solid rgba(184, 115, 51, 0.3);
    padding: 5rem 0 2.5rem;
    color: var(--ash-mid);
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col h5 {
    color: var(--cream-text);
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-col h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--copper-hammered);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links li a { color: var(--ash-light); font-size: 0.92rem; }
.footer-links li a:hover { color: var(--copper-bright); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

/* ============================================================
   11. WOOCOMMERCE COMPLETE STYLING
   ============================================================ */
.woocommerce-page #main-content,
.woocommerce #main-content {
    padding-top: 8rem;
    padding-bottom: 6rem;
}

.woocommerce .woocommerce-breadcrumb {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash-mid);
    margin-bottom: 2rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--copper-bright); }

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2.5rem !important;
    list-style: none !important;
    margin: 2.5rem 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product {
    background: var(--mine-card) !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--copper-bright) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
}

.woocommerce ul.products li.product img {
    margin-bottom: 1.25rem !important;
    border-radius: 2px !important;
    background: #090705 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    color: var(--cream-text) !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--font-ui) !important;
    font-size: 1.1rem !important;
    color: var(--copper-bright) !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
}

.woocommerce ul.products li.product .button {
    margin-top: auto !important;
    background: linear-gradient(135deg, #e25b1c 0%, #b87333 100%) !important;
    color: #fff !important;
    font-family: var(--font-ui) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Single Product View */
.woocommerce div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
}

.woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
}

.woocommerce div.product div.images img {
    border-radius: 4px;
    border: 1px solid rgba(184, 115, 51, 0.35);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
}

.woocommerce div.product .product_title {
    font-size: 2.2rem !important;
    color: var(--cream-text) !important;
    margin-bottom: 0.75rem !important;
}

.woocommerce div.product p.price {
    font-family: var(--font-ui) !important;
    font-size: 1.75rem !important;
    color: var(--copper-bright) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce div.product table.variations td.label {
    padding: 0.75rem 1rem 0.75rem 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--ash-light);
}

.woocommerce div.product table.variations td.value select {
    width: 100%;
    background: #18130e;
    border: 1px solid var(--copper-hammered);
    color: var(--cream-text);
    padding: 0.8rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    border-radius: 2px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    height: 48px;
    padding: 0 2.5rem !important;
    background: linear-gradient(135deg, #e25b1c 0%, #b87333 100%) !important;
    color: #fff !important;
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(226, 91, 28, 0.4);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #ff712e 0%, #d9883c 100%) !important;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 70px;
    height: 48px;
    background: #18130e;
    border: 1px solid var(--copper-hammered);
    color: var(--cream-text);
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border-radius: 2px;
}

.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 4rem;
    border-top: 1px solid rgba(184, 115, 51, 0.2);
    padding-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(184, 115, 51, 0.2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ash-mid);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--copper-bright);
    border-bottom: 2px solid var(--copper-bright);
    padding-bottom: 0.95rem;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--mine-card);
    border: 1px solid rgba(184, 115, 51, 0.2);
    padding: 2.5rem;
    border-radius: 4px;
    color: var(--ash-light);
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-desc { margin: 0 auto 2.25rem; }
    .timeline-track::before, .timeline-node-pin { left: 20px; }
    .timeline-card-wrapper { justify-content: flex-start !important; padding-left: 50px; }
    .timeline-card-industrial { width: 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .woocommerce div.product { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    #primary-nav {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: #080605;
        padding: 2rem;
        border-bottom: 1px solid var(--copper-hammered);
    }
    #primary-nav.open { display: block; }
    #primary-nav ul.nav-menu { flex-direction: column; gap: 1.25rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ============================================================
   13. AGE GATE PLUGIN STYLING (INDUSTRIAL LUXURY)
   ============================================================ */
.age-gate-wrapper,
#age-gate-wrapper {
    background-color: rgba(8, 6, 5, 0.97) !important;
    backdrop-filter: blur(10px) !important;
}

.age-gate-wrapper .age-gate__heading,
.age-gate-wrapper .age-gate-heading {
    font-family: var(--font-heading) !important;
    color: var(--cream-text) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.age-gate-wrapper .age-gate__submit,
.age-gate-wrapper .age-gate-submit,
.age-gate-wrapper button[type="submit"] {
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #e25b1c 0%, #b87333 100%) !important;
    color: #fff !important;
    border: 1px solid #ff884d !important;
    border-radius: 3px !important;
    padding: 0.85rem 2rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(226, 91, 28, 0.4) !important;
}