@import url('/assets/css/style.css');

:root {
    --ink: #111111;
    --accent: #f7ca00;
    --accent-soft: #ffe17d;
    --card: #ffffff;
    --glass-border: #d5d9d9;
    --glass-shadow: 0 2px 8px rgba(15, 17, 17, 0.12);
}

body {
    background: #eaeded !important;
    color: #0f1111 !important;
}

body::before,
body::after {
    display: none !important;
}

.container {
    width: min(1360px, 95%) !important;
}

.site-header {
    background: #131921 !important;
    border-bottom: 1px solid #232f3e !important;
    box-shadow: none !important;
    position: sticky;
    top: 0;
    z-index: 40;
}

.header-inner {
    padding: 10px 0 !important;
}

.logo,
.logo-text {
    color: #ffffff !important;
}

.logo {
    max-width: 52% !important;
}

.logo-gift {
    border-radius: 4px !important;
    box-shadow: none !important;
}

.main-nav a {
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    margin-inline: 4px !important;
    padding: 8px 10px !important;
    font-weight: 700 !important;
}

.main-nav a:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.lang-toggle-btn {
    border-color: #9aa0a6 !important;
    background: #232f3e !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
}

.menu-toggle {
    background: #232f3e !important;
    border-color: #3a4553 !important;
}

.menu-toggle span {
    background: #ffffff !important;
}

.hero.hero-inline {
    background: linear-gradient(180deg, #f5f7f7 0%, #eef1f1 100%) !important;
    border-bottom: 1px solid #d5d9d9 !important;
    padding: 18px 0 !important;
}

.hero-inline h1 {
    color: #0f1111 !important;
    font-weight: 800 !important;
    font-size: clamp(22px, 3vw, 34px) !important;
}

.slider-section {
    background: #f3f3f3 !important;
    padding: 16px 0 24px !important;
}

.brand-strip-section {
    background: #f7f7f7 !important;
    border-top: 1px solid #d5d9d9;
    border-bottom: 1px solid #d5d9d9;
    padding: 14px 0 20px !important;
}

.products-section {
    background: #eaeded !important;
    padding: 18px 0 30px !important;
}

.features-section {
    background: #f7f7f7 !important;
    border-top: 1px solid #d5d9d9;
    padding: 22px 0 34px !important;
}

.brand-section-head h2,
.store-section-head h2,
.features-section h2,
.page-header h1,
.page-header h2,
.page-header h3 {
    color: #0f1111 !important;
    font-weight: 800 !important;
}

.store-view-all {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #a2a6ac !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
}

.store-view-all:hover {
    background: #f7fafa !important;
    border-color: #8d9096 !important;
}

.slider {
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(15, 17, 17, 0.12) !important;
}

.slide-caption {
    background: rgba(0, 0, 0, 0.74) !important;
    border-radius: 6px !important;
}

.grid {
    gap: 14px !important;
}

.product-grid,
.store-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    justify-content: initial !important;
    gap: 14px !important;
}

.card,
.product-grid .card,
.store-category-card,
.feature-card,
.checkout-card,
.summary-card,
.profile-card,
.panel {
    background: #ffffff !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(15, 17, 17, 0.1) !important;
    backdrop-filter: none !important;
    animation: none !important;
}

.card:hover,
.product-grid .card:hover,
.store-category-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(15, 17, 17, 0.16) !important;
}

.product-grid .card,
.store-category-card {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
}

.card img,
.product-grid .card img,
.store-category-card img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eaeded;
}

.card .placeholder,
.store-category-card .placeholder {
    height: 220px !important;
    background: #f6f8f8 !important;
    color: #37475a !important;
    font-weight: 700 !important;
}

.product-grid .card-body,
.store-category-card .card-body,
.card-body {
    position: static !important;
    inset: auto !important;
    background: #ffffff !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 12px !important;
}

.card-body h3 {
    color: #0f1111 !important;
    margin: 0 0 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45;
}

.card-body p {
    color: #565959 !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.card-price,
.product-grid .card-price,
.digital-card-price-line .card-price,
.store-product-price-value,
.summary-price,
.product-info-card .card-price {
    color: #b12704 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
}

.card--empty {
    min-height: 130px !important;
    display: grid !important;
    place-items: center;
}

.brand-strip {
    gap: 10px !important;
}

.brand-chip {
    width: 132px !important;
    height: 172px !important;
    min-height: 172px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #d5d9d9 !important;
    box-shadow: 0 2px 8px rgba(15, 17, 17, 0.1) !important;
    padding: 8px !important;
}

.brand-chip__thumb {
    height: 116px !important;
    border-radius: 6px !important;
    background: #f6f8f8 !important;
}

.brand-chip__name {
    color: #111111 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

.brand-chip--button.is-active {
    border-color: #111111 !important;
    box-shadow: inset 0 0 0 1px #111111, 0 2px 8px rgba(15, 17, 17, 0.14) !important;
}

.btn,
button,
input[type="submit"] {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.btn.primary,
button.primary,
.add-to-cart-btn,
.checkout-actions .btn.primary,
.store-add-to-cart-form .btn.primary,
.digital-card-cart-form .btn.primary {
    background: linear-gradient(180deg, #ffd978 0%, #f7ca00 100%) !important;
    color: #0f1111 !important;
    border: 1px solid #f2c200 !important;
    box-shadow: 0 1px 3px rgba(15, 17, 17, 0.18) !important;
}

.btn.primary:hover,
.add-to-cart-btn:hover,
.store-add-to-cart-form .btn.primary:hover,
.digital-card-cart-form .btn.primary:hover {
    background: linear-gradient(180deg, #f7ca00 0%, #f0b800 100%) !important;
}

label {
    color: #0f1111 !important;
    font-weight: 700 !important;
}

label input,
label select,
label textarea,
select,
input[type="text"],
input[type="number"],
textarea {
    border: 1px solid #a6a6a6 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    min-height: 40px !important;
}

.page-header {
    padding: 16px 0 8px !important;
}

.digital-card-layout,
.store-product-layout {
    gap: 18px !important;
}

.digital-card-media,
.product-media-col,
.store-product-media,
.digital-card-details,
.store-product-details {
    background: #ffffff !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(15, 17, 17, 0.1) !important;
}

.digital-card-media-frame,
.product-fixed-media,
.product-main-image {
    border-radius: 8px !important;
    border: 1px solid #e3e6e6 !important;
    background: #ffffff !important;
}

.product-gallery-thumb {
    border-color: #c7cccc !important;
    border-radius: 6px !important;
}

.product-gallery-thumb.is-active {
    border-color: #111111 !important;
    box-shadow: inset 0 0 0 1px #111111 !important;
}

.store-product-spec-grid {
    gap: 10px !important;
}

.feature-card {
    padding: 16px !important;
}

.icon-badge {
    background: #f3f3f3 !important;
    color: #111111 !important;
    border-radius: 8px !important;
}

.site-footer {
    background: #131921 !important;
    border-top: 1px solid #232f3e !important;
    color: #ffffff !important;
}

@media (max-width: 1024px) {
    .product-grid,
    .store-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .main-nav {
        background: #131921 !important;
        border-inline-start: 1px solid #232f3e !important;
    }

    .main-nav a {
        background: #232f3e !important;
    }
}

@media (max-width: 768px) {
    .product-grid,
    .store-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .card img,
    .product-grid .card img,
    .store-category-card img,
    .card .placeholder,
    .store-category-card .placeholder {
        height: 165px !important;
    }

    .brand-chip {
        width: 46% !important;
        min-width: 140px;
        max-width: 170px;
    }
}

@media (max-width: 520px) {
    .brand-chip {
        width: 48% !important;
    }
}

/* Detail text variables for theme compatibility */
:root {
    --detail-title-color: #0f1111;
    --detail-muted-color: #565959;
    --detail-text-color: #0f1111;
    --detail-strong-color: #b12704;
    --detail-label-color: #0f1111;
    --detail-field-bg: #ffffff;
    --detail-field-border: #a6a6a6;
    --detail-field-text: #0f1111;
}