@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Oswald:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* Brand palette — tactical black + brass gold on a warm canvas */
    --primary-color: #141414;      /* near-black, primary surface/ink */
    --ink-2: #1f1f1c;              /* raised dark surface */
    --secondary-color: #d4af37;    /* brass gold (matches inline usage sitewide) */
    --gold-deep: #b8912b;          /* darker gold for gradients/shadows */
    --gold-light: #e8c766;         /* soft gold highlight (replaces harsh #ffd700) */
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --text-gray: #666666;
    --bg-light: #f2efe9;           /* warm bone canvas — premium, less clinical */
    --surface: #ffffff;            /* cards / panels */
    --border-color: #e3ddd0;       /* warm border */

    /* Display / brand type */
    --font-display: 'Black Ops One', 'Oswald', Impact, sans-serif;
    --font-head: 'Oswald', 'Segoe UI', sans-serif;
    --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-body: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Metallic gold gradient for luxury accents */
    --gold-foil: linear-gradient(135deg, #e8c766 0%, #d4af37 35%, #a9821f 70%, #e8c766 100%);

    --shadow-sm: 0 4px 18px rgba(20,18,12,0.06);
    --shadow-md: 0 18px 44px rgba(20,18,12,0.12);
    --radius: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url('R.png') 16 16, auto !important;
}

/* Force the crosshair on clickable elements too, so it never changes to the hand */
a, button, [role="button"], [onclick], select, summary,
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"],
.btn, .tab, .hero-cta, .cat-tile, .product-card {
    cursor: url('R.png') 16 16, auto !important;
}

/* Text fields keep the text caret so typing still feels normal */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
textarea, [contenteditable] {
    cursor: text !important;
}

/* "Load More" button under the product grid */
.btn-load-more {
    display: block;
    margin: 34px auto 6px;
    padding: 14px 44px;
    background: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-load-more:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Never allow the page to scroll sideways / render zoomed-out on phones */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

/* Phone header: let search shrink and shrink the Google Translate widget so the row fits */
@media (max-width: 640px) {
    .header-right { gap: 6px; min-width: 0; }
    .search-box { min-width: 0; flex-shrink: 1; }
    #google_translate_element { max-width: 42px; overflow: hidden; }
    .goog-te-gadget { max-width: 42px; overflow: hidden; white-space: nowrap; }
}

/* Accessible focus ring for keyboard users across the whole site */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

img { max-width: 100%; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.top-nav {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 8px 0;
    font-size: 0.75rem;
    border-bottom: 1px solid #333;
}

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

.top-nav ul {
    list-style: none;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.top-nav a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap;
}

.top-nav a:hover {
    color: var(--secondary-color);
}

.language {
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.75rem;
}

.header {
    background:
        linear-gradient(180deg, #1c1c1c 0%, var(--primary-color) 100%);
    padding: 12px 0;
    border-bottom: 2px solid var(--secondary-color);
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Thin brass hairline along the very top — brand signature */
.header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--secondary-color) 20%, var(--gold-light) 50%, var(--secondary-color) 80%, transparent);
}

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

.logo h1 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0;
    letter-spacing: 1px;
    font-weight: 700;
}
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 46px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); transition: transform 0.3s; }
.logo a:hover img { transform: scale(1.03); }

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

.phone {
    display: none;
}

.search-box {
    display: flex;
    flex: 1;
    max-width: 160px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.35);
}

.search-box input {
    flex: 1;
    border: none;
    padding: 8px 10px;
    font-size: 0.85rem;
    outline: none;
}

.search-box button {
    background-color: var(--secondary-color);
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.search-box button:hover {
    background-color: var(--gold-light);
}

.cart-header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--secondary-color);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    font-size: 0.85rem;
}

.cart-label {
    display: none;
}

.cart-icon {
    font-size: 1.2rem;
}

.cart-count {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}

.category-menu {
    background-color: var(--ink-2);
    border-bottom: 1px solid #333;
    overflow-x: auto;
    position: sticky;
    top: 72px;
    z-index: 999;
}

.category-menu ul {
    list-style: none;
    display: flex;
    gap: 0;
    min-width: min-content;
}

.category-menu li {
    border-right: 1px solid #333;
    flex-shrink: 0;
}

.category-menu li:last-child {
    border-right: none;
}

.category-menu a {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    padding: 12px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s;
    white-space: nowrap;
}

.category-menu a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.category-menu a.cat-active {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* Subcategory row links */
.subcat-link {
    display: block;
    color: #ccc !important;
    text-decoration: none;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}
.subcat-link:hover {
    color: var(--secondary-color) !important;
}
.subcat-link.subcat-active {
    color: var(--secondary-color) !important;
    border-bottom-color: var(--secondary-color);
}

.hero-banner {
    background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(20,20,20,0.85) 100%),
                url('https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?w=1200&q=80') center/cover no-repeat;
    color: var(--text-light);
    padding: 80px 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
}

.hero-banner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(212,175,55,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    animation: heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-banner h1, .hero-banner h2 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.08;
    margin-bottom: 14px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 3px 18px rgba(0,0,0,0.7);
    overflow-wrap: break-word;
}
.hero-banner h1 span, .hero-banner h2 span { color: var(--secondary-color); }

.hero-banner p {
    font-size: 1rem;
    color: #d9d4c7;
    margin: 0 0 26px;
    letter-spacing: 2px;
    font-weight: 300;
    text-transform: uppercase;
}

/* Hero call-to-action */
.hero-cta {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--secondary-color) 60%, var(--gold-deep) 100%);
    padding: 13px 34px;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(212,175,55,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212,175,55,0.5);
}

.promo-cards {
    padding: 30px 0;
    background-color: white;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.promo-card {
    padding: 25px 15px;
    border-radius: 4px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 120px;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.promo-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.promo-card p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.promo-1 {
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
}

.promo-2 {
    background: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
}

.promo-3 {
    background: linear-gradient(135deg, #34495e 0%, #1a1a1a 100%);
}

.promo-4 {
    background: linear-gradient(135deg, #7f8c8d 0%, #2c3e50 100%);
}

.featured-products {
    padding: 40px 0;
    background-color: white;
}

.featured-products h2 {
    font-family: var(--font-display);
    text-align: left;
    margin-bottom: 26px;
    font-size: 1.7rem;
    letter-spacing: 1px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    text-transform: uppercase;
    color: var(--primary-color);
    position: relative;
}
/* small crosshair tick under the section rule — brand motif */
.featured-products h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 46px; height: 3px;
    background: var(--gold-light);
}

/* Filter Bar */
.filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.filter-bar select {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #fbfaf7;
    color: #333;
    width: 100%;
    min-width: 0;
}
.filter-bar select:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Out of stock overlay */
.product-card-clean {
    position: relative;
}
.out-of-stock-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
}
.out-of-stock-overlay img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    opacity: 0.92;
}
.out-of-stock-card {
    opacity: 0.75;
    cursor: default !important;
}
.condition-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.badge-new { background: #28a745; color: white; }
.badge-used { background: #fd7e14; color: white; }

.product-card {
    background-color: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    position: relative;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(212,175,55,0.18), 0 6px 14px rgba(0,0,0,0.12);
    border-color: rgba(212,175,55,0.55);
}

.product-image {
    position: relative;
    width: 100%;
    height: 170px;
    background: linear-gradient(135deg, #ececec 0%, #f7f7f4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #999;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.product-image img, .product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-image .product-emoji { font-size: 3.4rem; }
.product-image .product-ph { color: #c3bbaa; align-items: center; justify-content: center; }
.product-image .product-ph svg { width: 70px; height: 70px; }
.product-card:hover img {
    transform: scale(1.06);
}

.product-content {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.product-price {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    order: 2;
}

.product-name {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.3;
    order: 1;
    /* clamp long names to two lines for a tidy grid */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

/* Stock status pill on the card */
.product-stock {
    order: 3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.product-stock::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
}
.product-stock.is-in { color: #1f8a3b; }
.product-stock.is-in::before { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.18); }
.product-stock.is-out { color: #c0392b; }
.product-stock.is-out::before { background: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,0.18); }

.product-description {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-bottom: 10px;
    line-height: 1.3;
    flex: 1;
}

.product-actions {
    display: flex;
    gap: 6px;
    flex-direction: column;
}

.btn-add-cart {
    flex: 1;
    padding: 10px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background 0.3s, color 0.3s, transform 0.15s;
}
.btn-add-cart:active { transform: scale(0.98); }

.btn-add-cart:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.btn-wishlist {
    padding: 8px 15px;
    background-color: white;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

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

.btn-details {
    padding: 8px 15px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

.btn-details:hover {
    background-color: var(--gold-light);
}

.product-detail-page {
    padding: 30px 0;
    background-color: white;
}

.product-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.product-detail-category {
    color: var(--secondary-color);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.product-detail-description {
    color: var(--text-gray);
    margin: 12px 0;
    max-width: 700px;
    font-size: 0.9rem;
}

.product-detail-meta {
    margin: 12px 0;
}

.product-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.product-detail-image {
    background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
    border-radius: 8px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: #999;
    border: 1px solid var(--border-color);
}

.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-detail-info h1, .product-detail-info h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.product-detail-list {
    list-style: disc inside;
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 0.9rem;
}

.product-detail-notfound {
    padding: 40px 15px;
    background-color: white;
    text-align: center;
    color: var(--text-dark);
}

/* Language Toggle */
.lang-toggle {
    background: none;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 1rem;
    transition: all 0.3s;
    flex-shrink: 0;
}
.lang-toggle:hover {
    background: var(--secondary-color);
    color: #1a1a1a;
}

/* RTL Support */
body.rtl {
    direction: rtl;
    text-align: right;
}
body.rtl .header-content,
body.rtl .header-right { flex-direction: row-reverse; }
body.rtl .category-menu ul { flex-direction: row-reverse; }
body.rtl .footer-section h4::after { left: auto; right: 0; }
body.rtl .filter-bar { flex-direction: row-reverse; }

/* Notification Bell FAB */
.notif-fab {
    position: fixed;
    bottom: 84px;
    left: 24px;
    z-index: 1000;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--gold-light) 100%);
    color: #1a1a1a;
    border: none;
    border-radius: 50px;
    padding: 12px 18px 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 16px rgba(212,175,55,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.notif-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(212,175,55,0.55);
}
.notif-fab.hidden { display: none; }
@media (max-width: 480px) {
    .notif-fab span:last-child { display: none; }
    .notif-fab { padding: 13px; border-radius: 50%; }
}

/* WhatsApp Community FAB */
.whatsapp-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
    background: #25D366;
    color: white;
    border-radius: 50px;
    padding: 12px 18px 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(37,211,102,0.55);
}
@media (max-width: 480px) {
    .whatsapp-fab span { display: none; }
    .whatsapp-fab { padding: 13px; border-radius: 50%; }
}

.footer {
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    color: var(--text-light);
    padding: 50px 0 15px;
    border-top: 3px solid var(--secondary-color);
}

.footer-logo {
    text-align: center;
    margin-bottom: 30px;
}
.footer-logo img {
    height: 50px;
    width: auto;
    opacity: 0.8;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #2a2a2a;
    border-radius: 50%;
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s;
    border: 1px solid #333;
}
.footer-social a:hover {
    background: var(--secondary-color);
    color: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}

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

.footer-section h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--secondary-color);
    margin-bottom: 14px;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 8px;
}
.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--secondary-color);
}

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

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

.footer-section a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 15px;
    text-align: center;
    color: #999;
    font-size: 0.75rem;
}

.footer-bottom a {
    color: var(--secondary-color);
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.cart-page-content {
    display: grid;
    gap: 20px;
    padding: 15px 0;
}

.cart-empty {
    background-color: white;
    border-radius: 8px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.cart-empty h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.login-card {
    background: white;
    border-radius: 12px;
    padding: 25px 15px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.login-card label,
.login-card input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.login-card input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 1rem;
}

.login-card p {
    margin-top: 0;
    font-size: 0.9rem;
}

.form-message {
    margin-top: 12px;
    color: #d9534f;
    font-weight: 600;
    font-size: 0.9rem;
}

.cart-item {
    background-color: var(--bg-light);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.cart-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-item-left h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.cart-item-left p {
    margin: 0;
    font-size: 0.9rem;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cart-item-qty button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cart-item-right {
    display: grid;
    gap: 8px;
}

.cart-item-subtotal {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
}

.cart-summary {
    background-color: white;
    border-radius: 8px;
    padding: 20px 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.cart-summary h2 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.cart-summary p {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.cart-summary-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

@media (min-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .top-nav ul {
        gap: 25px;
    }

    .logo h1 {
        font-size: 2.2rem;
    }

    .phone {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--secondary-color);
        font-size: 1rem;
    }

    .search-box {
        max-width: 250px;
    }

    .cart-label {
        display: inline;
    }

    .hero-banner {
        padding: 100px 20px;
    }

    .hero-banner h1, .hero-banner h2 {
        font-size: 3.2rem;
    }

    .hero-banner p {
        font-size: 1.15rem;
    }

    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .promo-card {
        min-height: 160px;
        padding: 35px 20px;
    }

    .promo-card h3 {
        font-size: 1.5rem;
    }

    .filter-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .product-image {
        height: 190px;
        font-size: 3.5rem;
    }

    .product-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .product-detail-image {
        min-height: 360px;
        font-size: 7rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .cart-item {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .cart-summary-actions {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    .header-right {
        gap: 40px;
    }

    .search-box {
        max-width: 300px;
    }

    .hero-banner {
        padding: 120px 20px;
    }

    .hero-banner h1, .hero-banner h2 {
        font-size: 4rem;
    }

    .promo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .product-image {
        height: 200px;
        font-size: 4rem;
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }
}

/* ===================================
   HAMBURGER BUTTON
=================================== */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--secondary-color);
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger:hover span { background: #fff; }

/* ===================================
   SIDEBAR
=================================== */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1001;
    display: none;
}
.sidebar-overlay.open { display: block; }

.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: #1a1a1a;
    z-index: 1002;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -5px 0 20px rgba(0,0,0,0.5);
}
.sidebar.open { right: 0; }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 2px solid var(--secondary-color);
    background: #111;
}
.sidebar-header img { height: 36px; width: auto; }
.sidebar-close {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.sidebar-close:hover { background: var(--secondary-color); color: #1a1a1a; }

.sidebar-nav {
    list-style: none;
    padding: 8px 0;
    flex: 1;
}
.sidebar-nav li { border-bottom: 1px solid #2a2a2a; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: #ddd;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    text-transform: uppercase;
}
.sidebar-nav a:hover {
    background: #2a2a2a;
    color: var(--secondary-color);
    padding-left: 28px;
}
.sidebar-badge {
    margin-left: auto;
    background: var(--secondary-color);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

/* ===================================
   SCROLL ANIMATIONS
=================================== */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   SKELETON LOADER
=================================== */
.skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}
.skeleton-card {
    height: 100px;
    margin-bottom: 14px;
    border-radius: 10px;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===================================
   BACK TO TOP BUTTON
=================================== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #c9a227 100%);
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(212,175,55,0.4);
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}
.back-to-top.show {
    display: flex;
    opacity: 1;
}
.back-to-top:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,175,55,0.6);
}

/* ===================================
   CATEGORY ICONS
=================================== */
.cat-icon {
    margin-right: 4px;
    font-size: 0.85rem;
}

/* ===================================
   GRADIENT GOLD BUTTONS
=================================== */
.btn-add-cart {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2a2a2a 100%);
}
.btn-add-cart:hover {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--gold-light) 100%);
    color: var(--primary-color);
}
.btn-details {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e8c230 100%);
}

/* ===================================
   PRODUCT DETAIL IMAGE ZOOM
=================================== */
.product-detail-image {
    overflow: hidden;
    border-radius: 12px;
}
.product-detail-image img {
    transition: transform 0.4s ease;
    border-radius: 12px;
}
.product-detail-image:hover img {
    transform: scale(1.08);
}

/* ===================================
   PROMO / ANNOUNCEMENT BAR
=================================== */
.promo-bar {
    background: linear-gradient(90deg, #111 0%, #1c1c17 50%, #111 100%);
    color: #eee;
    font-size: 0.74rem;
    letter-spacing: 0.4px;
    border-bottom: 1px solid rgba(212,175,55,0.25);
}
.promo-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    flex-wrap: wrap;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
}
.promo-bar span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.promo-bar strong { color: var(--secondary-color); font-weight: 700; }
.promo-bar a { color: var(--gold-light); text-decoration: none; font-weight: 700; }
.promo-bar .promo-sep { color: #555; }
@media (max-width: 600px) {
    .promo-bar { font-size: 0.68rem; }
    .promo-bar .promo-sep { display: none; }
    .promo-bar .container { gap: 4px 16px; }
}

/* ===================================
   HERO — dual CTA + tagline refinements
=================================== */
.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-cta.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.55);
    box-shadow: none;
}
.hero-cta.secondary:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.hero-kicker {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.78rem;
    color: var(--secondary-color);
    margin-bottom: 14px;
    padding: 5px 14px;
    border: 1px solid rgba(212,175,55,0.5);
    border-radius: 4px;
    background: rgba(0,0,0,0.25);
}
.hero-tagline-ar {
    font-size: 1.15rem;
    color: var(--gold-light);
    letter-spacing: 0;
    margin: -6px 0 22px;
    font-weight: 500;
    direction: rtl;
}

/* ===================================
   TRUST STRIP
=================================== */
.trust-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    padding: 18px 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}
.trust-ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #1c1c1c, var(--primary-color));
    color: var(--secondary-color);
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 10px;
}
.trust-item h4 {
    font-family: var(--font-head);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dark);
    margin: 0 0 2px;
}
.trust-item p { font-size: 0.72rem; color: var(--text-gray); margin: 0; line-height: 1.3; }
@media (min-width: 768px) {
    .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===================================
   SECTION SHELL (shared heading style)
=================================== */
.section {
    padding: 44px 0;
}
.section-dark { background: linear-gradient(180deg, var(--primary-color) 0%, #0e0e0e 100%); }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.section-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--secondary-color);
    display: inline-block;
    position: relative;
}
.section-dark .section-title { color: #fff; }
.section-link {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--secondary-color);
    text-decoration: none;
    white-space: nowrap;
}
.section-link:hover { color: var(--gold-deep); }

/* ===================================
   SHOP BY CATEGORY TILES
=================================== */
.category-tiles { background: var(--bg-light); }
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
    padding: 16px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    color: var(--cat-tile-fg, #fff);
    text-decoration: none;
    background: linear-gradient(150deg, #232323 0%, #121212 100%);
    border: 1px solid #2c2c2c;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.cat-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 15%, rgba(212,175,55,0.18), transparent 55%);
    pointer-events: none;
}
.cat-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(212,175,55,0.6);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}
.cat-tile-ico {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    color: var(--cat-tile-accent, var(--secondary-color));
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.28s ease;
}
.cat-tile:hover .cat-tile-ico { transform: scale(1.15) rotate(-4deg); }
.cat-tile-name {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.98rem;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}
.cat-tile-shop {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cat-tile-accent, var(--secondary-color));
    text-transform: uppercase;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
@media (min-width: 640px) { .tiles-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) {
    .tiles-grid { grid-template-columns: repeat(6, 1fr); }
    .cat-tile { min-height: 150px; }
}

/* ===================================
   HORIZONTAL PRODUCT RAILS
=================================== */
.rail-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) transparent;
}
.rail-track::-webkit-scrollbar { height: 8px; }
.rail-track::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.6); border-radius: 20px; }
.rail-track::-webkit-scrollbar-track { background: transparent; }
.rail-track .product-card {
    flex: 0 0 auto;
    width: 210px;
    scroll-snap-align: start;
}
.section-dark .rail-track .product-card {
    background: #1b1b1b;
    border-color: #2e2e2e;
}
.section-dark .rail-track .product-name { color: #f0f0f0; }
.rail-empty { color: #999; font-size: 0.9rem; padding: 10px 2px; }
.section-dark .rail-empty { color: #888; }

/* ===================================
   BRAND STORY
=================================== */
.brand-story {
    background:
        linear-gradient(180deg, rgba(15,15,15,0.94), rgba(15,15,15,0.94));
    color: #e6e2d8;
    border-top: 3px solid var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}
.brand-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: center;
}
.brand-story-emblem {
    display: flex;
    justify-content: center;
}
.brand-story-emblem img {
    width: 180px; max-width: 60%;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.brand-story h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.brand-story h2 span { color: var(--secondary-color); }
.brand-story p { color: #cbc7bc; font-size: 0.92rem; margin-bottom: 16px; max-width: 60ch; }
.brand-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
}
.brand-point { text-align: center; }
.brand-point .bp-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--secondary-color);
    line-height: 1;
}
.brand-point .bp-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
    margin-top: 4px;
}
@media (min-width: 860px) {
    .brand-story-grid { grid-template-columns: 300px 1fr; gap: 40px; }
    .brand-story h2 { font-size: 2.2rem; }
}

/* ===================================
   WHATSAPP INQUIRY BUTTON (product detail)
=================================== */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-1px); }
.btn-whatsapp svg { width: 20px; height: 20px; fill: #fff; }

/* ===================================
   BRAND LOGO LOCKUP (crosshair emblem + stencil wordmark)
=================================== */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    line-height: 1;
    font-size: 15px; /* base; each placement overrides */
}
.brand-mark {
    display: inline-flex;
    color: var(--secondary-color);
    flex-shrink: 0;
}
.brand-mark svg {
    width: 2.9em; height: 2.9em;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.brand-lockup:hover .brand-mark svg { transform: rotate(90deg); }
.brand-word {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    text-transform: uppercase;
}
.brand-word .bw-1 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.7em;
    letter-spacing: 4px;
    color: #cfc7b5;
    margin-bottom: 2px;
}
.brand-word .bw-2 {
    font-size: 1.32em;
    letter-spacing: 1.5px;
    color: #fff;
    line-height: 0.9;
}
/* Placement sizing */
.logo .brand-lockup { font-size: 15px; }
.footer-logo .brand-lockup { font-size: 18px; justify-content: center; }
.sidebar-header .brand-lockup { font-size: 12.5px; }
@media (max-width: 480px) {
    .logo .brand-lockup { font-size: 13px; gap: 8px; }
}

/* ===================================================================
   LUXURY LAYER — heritage-gunmaker refinement
   (elegant serif accents, generous space, refined gold & depth)
=================================================================== */

/* Elegant serif tagline in the hero — couture contrast to the stencil */
.hero-banner p {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    font-size: 1.32rem;
    letter-spacing: 0.3px;
    color: #ece6d6;
}
.hero-banner { padding: 104px 15px; }
.hero-kicker {
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
}

/* More air around everything reads as premium */
.section { padding: 62px 0; }
.featured-products { padding: 62px 0; }
.trust-strip .trust-grid { padding: 26px 0; }
.category-tiles { padding-top: 54px; }

/* Refined gold hairline rules under section titles */
.section-title, .featured-products h2 {
    border-bottom-width: 2px;
}
.featured-products h2::after,
.section-title::after { height: 2px; }

/* Section eyebrow labels — thin, tracked, elegant */
.section-head { align-items: flex-end; margin-bottom: 26px; }

/* Product cards — deeper, calmer, gilded on hover */
.product-card { border-radius: 14px; }
.product-card:hover {
    box-shadow: 0 22px 48px rgba(20,18,12,0.16);
    border-color: rgba(212,175,55,0.55);
}
.product-name { font-weight: 500; letter-spacing: 0.6px; }
.product-price { font-size: 1.2rem; }

/* Category tiles — richer, gilded frame on hover */
.cat-tile {
    background: var(--cat-tile-bg, linear-gradient(155deg, #262524 0%, #131211 100%));
    border-color: #322f29;
}
.cat-tile:hover {
    box-shadow: 0 18px 38px rgba(0,0,0,0.32), 0 0 0 1px rgba(212,175,55,0.5) inset;
}
/* Image-backed tiles keep white text + gold accent (they have a dark overlay) */
.cat-tile.has-img { color: #fff; }
.cat-tile.has-img .cat-tile-ico,
.cat-tile.has-img .cat-tile-shop { color: var(--secondary-color); }

/* Trust chips — softer, more refined */
.trust-ico {
    border-radius: 12px;
    background: linear-gradient(135deg, #1f1f1d, #121210);
    border-color: rgba(212,175,55,0.28);
}
.trust-item h4 { font-weight: 500; letter-spacing: 0.6px; }

/* Promo bar — quieter, more refined tracking */
.promo-bar { letter-spacing: 1.2px; }
.promo-bar strong { font-family: var(--font-head); font-weight: 600; }

/* Brand story — serif body, gilded emblem frame */
.brand-story { padding: 6px 0; }
.brand-story p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.7;
    color: #d7d2c5;
}
.brand-story-emblem {
    position: relative;
    padding: 26px;
}
.brand-story-emblem::before {
    content: '';
    position: absolute; inset: 0;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 4px;
}
.brand-story-emblem::after {
    content: '';
    position: absolute; inset: 8px;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 2px;
}

/* Gilded wordmark accent — subtle foil on the primary lockup word */
.logo .brand-word .bw-2 {
    background: var(--gold-foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--secondary-color);
}

/* Buttons — a touch more presence and slower, silkier motion */
.hero-cta, .btn-add-cart, .btn-details, .btn-whatsapp {
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.35s ease, color 0.3s ease;
}

@media (min-width: 768px) {
    .hero-banner p { font-size: 1.6rem; }
    .section { padding: 78px 0; }
    .featured-products { padding: 78px 0; }
}
/* Product titles are real links so search engines can crawl to each product,
   but they must look exactly like the plain heading they replaced. */
.product-name-link { color: inherit; text-decoration: none; }
.product-name-link:hover { color: var(--secondary-color); }