:root{
  --oil-gold:#d5a33a;
  --oil-gold-dark:#b98613;
  --oil-gold-soft:#fff4d8;
  --oil-ink:#0d1726;
  --oil-ink-2:#142238;
  --oil-muted:#6b7280;
  --oil-border:#e7eaf0;
  --oil-bg:#f7f8fb;
  --oil-success:#1fb66d;
  --oil-danger:#d71920;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 18px 45px rgba(13,23,38,.10);
}

body{
  background:#fff;
  color:var(--oil-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

.oil-page{background:#fff;min-height:100vh}
.oil-container{max-width:1440px;margin:0 auto;padding-left:42px;padding-right:42px}

.oil-topbar{background:#fff;border-bottom:1px solid var(--oil-border);font-size:14px;color:#101827}
.oil-topbar .oil-container{height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.oil-topbar-left,.oil-topbar-right{display:flex;align-items:center;gap:30px;white-space:nowrap}
.oil-topbar i{color:var(--oil-ink);margin-right:6px}

.oil-header{background:#fff;border-bottom:1px solid var(--oil-border)}
.oil-header .oil-container{height:92px;display:flex;align-items:center;gap:42px}
.oil-logo-desktop {
    display: flex;
    align-items: center;
    height: 74px;
    max-width: 260px;
    overflow: hidden;
}
.oil-logo-desktop img {
    display: block;
    width: auto;
    height: 58px;
    max-width: 100%;
    object-fit: contain;
}
.oil-logo-mobile {
    display: none;
    align-items: center;
}

.oil-logo-mobile img {
    height: 42px;
    width: 42px;
    object-fit: contain;
}
.oil-logo-mark{width:42px;height:42px;border-radius:50%;background:var(--oil-gold);position:relative;display:inline-block;flex:0 0 auto}
.oil-logo-mark:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:25px;transform:translate(-50%,-50%);background:#fff;border-radius:50% 50% 55% 55%;clip-path:polygon(50% 0,90% 42%,78% 82%,50% 100%,22% 82%,10% 42%)}
.oil-search{flex:1;display:flex;max-width:760px;margin-left:auto;margin-right:auto}
.oil-search .form-control{height:50px;border-radius:8px 0 0 8px;border-color:#d9dee8;font-size:16px;padding-left:22px;background:#fff}
.oil-search .btn{height:50px;min-width:128px;border-radius:0 8px 8px 0;background:var(--oil-gold);border-color:var(--oil-gold);font-weight:700;color:#fff}
.oil-search .btn:hover{background:var(--oil-gold-dark);border-color:var(--oil-gold-dark)}
.oil-header-actions{display:flex;align-items:center;gap:24px;white-space:nowrap}
.oil-cart{display:flex;align-items:center;gap:10px;font-weight:800;position:relative}
.oil-cart i{font-size:32px}.oil-cart small{display:block;font-size:14px;font-weight:700;color:#111827}.oil-cart-price{font-size:16px}
.oil-badge{position:absolute;top:-8px;left:24px;background:var(--oil-gold);color:#fff;border-radius:99px;font-size:12px;line-height:1;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-weight:800}

.oil-nav{background:#fff;border-bottom:1px solid var(--oil-border)}
.oil-nav .oil-container{height:58px;display:flex;align-items:center;padding-left:42px;padding-right:42px}
.oil-cat-btn{height:58px;background:var(--oil-gold);color:#fff;font-weight:800;border:0;border-radius:0;padding:0 34px;display:flex;align-items:center;gap:12px}
.oil-main-nav{height:58px;display:flex;align-items:center;gap:0;background:#fff8e7;flex:1}
.oil-main-nav a{height:58px;padding:0 30px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0d1726}
.oil-main-nav a:hover{color:var(--oil-gold-dark);background:#fff1cf}

.oil-mobile-head{display:none}

.hero-card{margin-top:22px;border-radius:10px;overflow:hidden;min-height:350px;background:linear-gradient(90deg,rgba(10,18,31,.98),rgba(10,18,31,.87) 46%,rgba(10,18,31,.25)),url('../elemente/hero-olaj-bg.webp') center/cover;box-shadow:var(--shadow-soft);padding:54px 58px;color:#fff}
.hero-card h1{font-size:42px;line-height:1.15;font-weight:900;max-width:620px;margin-bottom:18px;letter-spacing:-.7px}
.hero-card p{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:24px}
.search-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.search-tab{height:52px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;padding:0 22px;display:flex;align-items:center;gap:10px;font-weight:700}
.search-tab.active{background:var(--oil-gold);border-color:var(--oil-gold)}
.plate-search{background:#fff;border-radius:8px;padding:10px;display:flex;gap:10px;max-width:860px}
.plate-country{width:110px;border:1px solid #d9dee8;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:7px;color:#111827;background:#fff;font-weight:700}
.plate-search input{height:52px;border:1px solid #d9dee8;border-radius:6px;flex:1;padding:0 20px;font-size:20px;color:#111827;text-transform:uppercase}
.plate-search button{height:52px;border:0;border-radius:6px;background:var(--oil-gold);color:#fff;font-weight:800;min-width:150px}
.hero-note{margin-top:16px;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px}.hero-note i{color:var(--oil-success)}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:36px 0 28px}.benefit{display:flex;align-items:center;gap:16px}.benefit i{font-size:38px;color:var(--oil-ink)}.benefit strong{display:block;font-size:16px}.benefit span{display:block;font-size:14px;color:#4b5563}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:28px 0 16px}.section-head h2{font-size:30px;font-weight:900;margin:0;letter-spacing:-.4px}.section-link{color:var(--oil-gold-dark);font-weight:800;font-size:15px}
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.cat-card{border:1px solid var(--oil-border);border-radius:8px;background:#fff;min-height:150px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;transition:.15s}.cat-card:hover{box-shadow:0 10px 24px rgba(13,23,38,.08);transform:translateY(-2px)}.cat-card img{height:82px;object-fit:contain;margin-bottom:12px}

.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}.promo-card{min-height:150px;border-radius:8px;background:linear-gradient(110deg,#fff6df,#fff 58%);border:1px solid #f1dfb3;padding:28px 34px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.promo-card h3{font-weight:900;font-size:25px;margin-bottom:6px}.promo-card p{color:#334155;margin-bottom:18px}.promo-card .btn{background:var(--oil-gold);border-color:var(--oil-gold);color:#fff;font-weight:800;padding:11px 26px}.promo-card img{max-height:135px;object-fit:contain}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px}.product-card{border:1px solid var(--oil-border);border-radius:8px;padding:18px;position:relative;background:#fff;min-height:330px;display:flex;flex-direction:column}.discount{position:absolute;top:14px;left:14px;background:var(--oil-gold);color:#fff;border-radius:6px;font-size:14px;font-weight:900;padding:5px 9px}.product-card img{height:150px;object-fit:contain;margin:18px auto 16px}.product-title{font-weight:800;line-height:1.25;margin-bottom:6px}.stock{color:var(--oil-success);font-size:14px;font-weight:700;margin-bottom:7px}.price{font-size:23px;font-weight:900;color:#111827}.old-price{font-size:14px;color:#7b8190;text-decoration:line-through;margin-left:6px}.product-card .btn{margin-top:auto;align-self:flex-end;background:var(--oil-gold);border-color:var(--oil-gold);font-weight:800;color:#fff}

.oil-helpbar{background:#f0f3f8;border-radius:8px;margin:26px 0 22px;padding:22px 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.help-item{display:flex;gap:18px;align-items:center;border-right:1px solid #dbe1eb}.help-item:last-child{border-right:0}.help-item i{font-size:44px;color:#617089}.help-item strong{display:block}.help-item span{font-size:14px;color:#4b5563}

.oil-footer{background:var(--oil-ink);color:#fff;margin-top:20px;padding:42px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:46px}.footer-logo{font-size:34px;font-weight:900;color:#fff;line-height:1}.footer-logo span{color:var(--oil-gold)}.oil-footer p,.oil-footer li{color:#cbd5e1;font-size:14px}.oil-footer ul{list-style:none;padding:0;margin:0}.oil-footer li{margin-bottom:10px}.oil-footer h4{font-size:16px;font-weight:900;margin-bottom:16px}.newsletter{display:flex;gap:8px}.newsletter input{background:#273449;border:0;color:#fff;border-radius:5px;padding:12px;min-width:0}.newsletter button{background:var(--oil-gold);border:0;color:#fff;font-weight:800;border-radius:5px;padding:0 18px}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;color:#94a3b8;font-size:13px}

@media (max-width:991.98px){
 .oil-logo-desktop {
        display: none;
    }

    .oil-logo-mobile {
        display: flex;
    }
  .oil-topbar,.oil-header,.oil-nav{display:none}.oil-container{padding-left:16px;padding-right:16px}.oil-mobile-head{display:block;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--oil-border)}.mobile-status{height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.mobile-main{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.mobile-main button{border:0;background:transparent;font-size:26px;color:var(--oil-ink)}.mobile-logo{font-size:31px;font-weight:900;color:var(--oil-gold);display:flex;align-items:center;gap:8px}.mobile-logo .oil-logo-mark{width:30px;height:30px}.mobile-icons{display:flex;gap:18px;align-items:center;font-size:26px;position:relative}.mobile-search{padding:0 16px 16px;display:flex}.mobile-search input{height:46px;border:1px solid #d9dee8;border-radius:6px 0 0 6px;padding:0 14px;font-size:16px;flex:1}.mobile-search button{height:46px;width:62px;border:0;border-radius:0 6px 6px 0;background:var(--oil-gold);color:#fff;font-size:21px}.hero-card{margin-top:16px;min-height:auto;border-radius:7px;padding:20px 16px;background:linear-gradient(90deg,rgba(10,18,31,.98),rgba(10,18,31,.86)),url('../elemente/hero-olaj-bg-mobile.webp') center/cover}.hero-card h1{font-size:23px;line-height:1.22;margin-bottom:10px}.hero-card p{display:none}.search-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.search-tab{height:50px;padding:0;justify-content:center;font-size:0}.search-tab i{font-size:21px;margin:0}.plate-search{padding:8px;gap:8px}.plate-country{width:66px;font-size:12px}.plate-search input{height:44px;font-size:16px;padding:0 12px}.plate-search button{height:44px;min-width:82px;font-size:13px}.hero-note{font-size:13px;margin-top:10px}.benefits{grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.benefit:nth-child(n+3){display:none}.benefit i{font-size:31px}.benefit strong{font-size:14px}.benefit span{font-size:12px}.section-head{margin-top:22px}.section-head h2{font-size:22px}.section-link{font-size:14px}.category-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:8px;scroll-snap-type:x mandatory}.cat-card{min-width:92px;min-height:108px;padding:10px;font-size:13px;scroll-snap-align:start}.cat-card img{height:58px;margin-bottom:8px}.promo-grid{display:none}.product-grid{display:block}.product-card{min-height:0;display:grid;grid-template-columns:115px 1fr 50px;gap:12px;align-items:center;padding:14px;margin-bottom:12px}.product-card:nth-child(n+2){display:none}.product-card img{height:105px;margin:8px auto;grid-row:1/5}.discount{top:10px;left:10px}.product-title{font-size:15px}.price{font-size:20px}.product-card .btn{grid-column:3;grid-row:1/5;width:46px;height:46px;border-radius:7px;padding:0;font-size:0}.product-card .btn:after{content:"\F23D";font-family:"bootstrap-icons";font-size:22px}.old-price{font-size:12px}.oil-helpbar,.oil-footer{display:none}
}

@media (min-width:992px) and (max-width:1240px){.oil-container{padding-left:26px;padding-right:26px}.oil-main-nav a{padding:0 16px}.oil-logo{font-size:38px}.category-grid{grid-template-columns:repeat(5,1fr)}}


.oil-cat-dropdown {
    position: relative;
}

.oil-cat-btn {
    height: 58px;
    background: var(--oil-gold);
    color: #fff;
    border: 0;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    border-radius: 10px 10px 0 0;
    transition: .18s;
}

.oil-cat-btn:hover,
.oil-cat-btn.show {
    background: var(--oil-gold-dark);
}

.oil-cat-menu {
    width: 980px;
    border: 0;
    padding: 0;
    border-radius: 0 18px 18px 18px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(13,23,38,.18);
    margin-top: 0;
}

.oil-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    background: #fff;
}

.oil-cat-column {
    padding: 30px;
    border-right: 1px solid #eef2f7;
}

.oil-cat-title {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 20px;
    color: var(--oil-muted);
}

.oil-cat-item {
    display: flex;
    gap: 16px;
    padding: 14px;
    border-radius: 14px;
    transition: .18s;
    margin-bottom: 8px;
}

.oil-cat-item:hover {
    background: #fff7e3;
}

.oil-cat-item img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    flex: 0 0 auto;
}

.oil-cat-item strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--oil-ink);
}

.oil-cat-item span {
    font-size: 14px;
    color: var(--oil-muted);
    line-height: 1.4;
}

.oil-cat-promo {
    background:
        linear-gradient(
            180deg,
            rgba(13,23,38,.92),
            rgba(13,23,38,.98)
        ),
        url('../elemente/hero-olaj-bg.jpg');

    background-size: cover;
    background-position: center;

    color: #fff;
    position: relative;
}

.oil-cat-promo-inner {
    padding: 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.oil-cat-promo small {
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}

.oil-cat-promo h3 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 14px;
}

.oil-cat-promo p {
    color: rgba(255,255,255,.82);
    line-height: 1.5;
    margin-bottom: 24px;
}

.oil-cat-promo .btn {
    border-radius: 10px;
    font-weight: 800;
    padding: 12px 18px;
    align-self: flex-start;
}

.oil-cat-promo img {
    margin-top: auto;
    width: 180px;
    align-self: flex-end;
    object-fit: contain;
}
.categories-hero {
    margin-top: 22px;
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(6,12,22,.96) 0%, rgba(6,12,22,.82) 42%, rgba(6,12,22,.25) 100%),
        url('../elemente/hero-olaj-bg.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 58px 42px;
    box-shadow: var(--shadow-soft);
}

.categories-hero-content {
    max-width: 680px;
}

.categories-hero h1 {
    font-size: 54px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.8px;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.categories-hero p {
    font-size: 22px;
    line-height: 1.45;
    margin: 0;
    color: rgba(255,255,255,.92);
}

.all-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.all-category-card,
.all-category-info-card {
    position: relative;
    min-height: 300px;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    background: #fff;
    padding: 26px 24px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(13,23,38,.04);
}

.all-category-card {
    display: block;
    transition: .18s;
}

.all-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(13,23,38,.10);
    border-color: #efd49a;
}

.all-category-icon,
.all-category-info-icon {
    width: 54px;
    height: 54px;
    border: 2px solid var(--oil-gold);
    border-radius: 50%;
    color: var(--oil-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    background: #fff;
}

.all-category-number {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 4px;
}

.all-category-card h2,
.all-category-info-card h2 {
    position: relative;
    z-index: 2;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 12px;
    letter-spacing: -.3px;
}

.all-category-card p {
    position: relative;
    z-index: 2;
    font-size: 17px;
    line-height: 1.45;
    color: #1f2937;
    margin: 0;
    max-width: 70%;
}

.all-category-card img {
    position: absolute;
    right: 12px;
    bottom: 8px;
    max-width: 58%;
    max-height: 150px;
    object-fit: contain;
    z-index: 1;
}

.all-category-arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #f1dfb3;
    color: var(--oil-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    box-shadow: 0 6px 18px rgba(13,23,38,.08);
}

.all-category-card:hover .all-category-arrow {
    background: var(--oil-gold);
    color: #fff;
    border-color: var(--oil-gold);
}

.all-category-info-card {
    background: linear-gradient(135deg, #fff7e6, #fff);
}

.all-category-info-card ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}

.all-category-info-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 17px;
    color: #1f2937;
}

.all-category-info-card li i {
    color: var(--oil-gold-dark);
    font-weight: 900;
}

.category-benefits {
    margin-top: 32px;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    background: #fff;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.category-benefit {
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid #e9edf3;
}

.category-benefit:last-child {
    border-right: 0;
}

.category-benefit i {
    font-size: 44px;
    color: var(--oil-gold-dark);
    flex: 0 0 auto;
}

.category-benefit strong {
    display: block;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 4px;
}

.category-benefit span {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    color: #4b5563;
}

.category-search-cta {
    margin: 32px 0 46px;
    border-radius: 12px;
    background: linear-gradient(110deg, #fff6df, #fff 62%);
    border: 1px solid #f1dfb3;
    padding: 32px 42px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.category-search-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid var(--oil-gold);
    color: var(--oil-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex: 0 0 auto;
    background: #fff;
}

.category-search-cta h2 {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 6px;
}

.category-search-cta p {
    margin: 0;
    color: #334155;
    font-size: 16px;
}

.category-search-btn {
    margin-left: auto;
    background: var(--oil-gold);
    border-color: var(--oil-gold);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 8px;
    white-space: nowrap;
}

.category-search-btn:hover {
    background: var(--oil-gold-dark);
    border-color: var(--oil-gold-dark);
    color: #fff;
}

@media (max-width: 1199.98px) {
    .all-categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-benefit:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 991.98px) {
    .categories-hero {
        margin-top: 16px;
        min-height: 230px;
        padding: 34px 22px;
        border-radius: 8px;
        background-image:
            linear-gradient(90deg, rgba(6,12,22,.96) 0%, rgba(6,12,22,.78) 60%, rgba(6,12,22,.35) 100%),
            url('../elemente/hero-olaj-bg-mobile.webp');
        background-position: center right;
    }

    .categories-hero h1 {
        font-size: 34px;
    }

    .categories-hero p {
        font-size: 17px;
        max-width: 85%;
    }

    .all-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }

    .all-category-card,
    .all-category-info-card {
        min-height: 220px;
        padding: 18px;
        border-radius: 10px;
    }

    .all-category-icon,
    .all-category-info-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
        margin-bottom: 12px;
    }

    .all-category-number {
        font-size: 15px;
    }

    .all-category-card h2,
    .all-category-info-card h2 {
        font-size: 18px;
    }

    .all-category-card p {
        font-size: 14px;
        max-width: 78%;
    }

    .all-category-card img {
        max-width: 64%;
        max-height: 105px;
    }

    .all-category-arrow {
        width: 32px;
        height: 32px;
        right: 12px;
        bottom: 12px;
    }

    .category-benefits {
        grid-template-columns: 1fr 1fr;
        padding: 18px;
        gap: 18px;
    }

    .category-benefit {
        border-right: 0;
    }

    .category-benefit i {
        font-size: 32px;
    }

    .category-benefit strong {
        font-size: 14px;
    }

    .category-benefit span {
        font-size: 12px;
    }

    .category-search-cta {
        padding: 22px;
        align-items: flex-start;
        flex-direction: column;
    }

    .category-search-icon {
        width: 58px;
        height: 58px;
        font-size: 28px;
    }

    .category-search-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .all-categories-grid {
        grid-template-columns: 1fr;
    }

    .all-category-card,
    .all-category-info-card {
        min-height: 210px;
    }

    .category-benefits {
        grid-template-columns: 1fr;
    }

    .categories-hero h1 {
        font-size: 30px;
    }
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 22px;
    color: #6b7280;
    font-size: 14px;
}

.product-breadcrumb a {
    color: #6b7280;
}

.product-breadcrumb span {
    color: var(--oil-ink);
    font-weight: 700;
}

.product-main {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    gap: 52px;
    align-items: start;
}

.product-gallery {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    padding: 28px;
}

.product-image-box {
    position: relative;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fffaf0, #fff);
    border-radius: 10px;
}

.product-image-box img {
    max-height: 460px;
    object-fit: contain;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--oil-border);
    background: #fff;
    color: var(--oil-ink);
}

.gallery-prev {
    left: 18px;
}

.gallery-next {
    right: 18px;
}

.product-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.product-thumbs button {
    height: 96px;
    border: 1px solid var(--oil-border);
    background: #fff;
    border-radius: 8px;
    padding: 8px;
}

.product-thumbs button.active {
    border-color: var(--oil-gold);
}

.product-thumbs img {
    height: 100%;
    object-fit: contain;
}

.product-info {
    padding: 18px 0;
}

.product-label {
    display: inline-flex;
    background: #fff2cf;
    color: var(--oil-gold-dark);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    border-radius: 6px;
    padding: 7px 12px;
    margin-bottom: 18px;
}

.product-info h1 {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 900;
    margin: 0 0 8px;
}

.product-subtitle {
    font-size: 17px;
    color: var(--oil-muted);
    margin-bottom: 16px;
}

.product-viscosity {
    font-size: 62px;
    line-height: 1;
    font-weight: 950;
    color: var(--oil-ink);
    margin-bottom: 18px;
    letter-spacing: -1px;
}

.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.product-badges span {
    border: 1px solid var(--oil-border);
    background: #fff;
    border-radius: 99px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 14px;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    margin-bottom: 22px;
}

.product-rating .stars {
    color: var(--oil-gold);
    letter-spacing: 2px;
}

.product-price strong {
    font-size: 36px;
    font-weight: 950;
}

.product-price span {
    font-size: 18px;
    font-weight: 800;
}

.product-unit-price {
    color: var(--oil-muted);
    margin-top: 4px;
}

.product-stock {
    margin: 22px 0;
    color: #16834a;
    font-weight: 800;
}

.product-stock span {
    color: #374151;
    font-weight: 500;
    margin-left: 16px;
}

.product-size-title {
    font-weight: 900;
    margin-bottom: 10px;
}

.product-sizes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.product-sizes button {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 8px;
    padding: 14px 8px;
    text-align: center;
}

.product-sizes button.active {
    border-color: var(--oil-gold);
    box-shadow: 0 0 0 2px rgba(213,163,58,.18);
}

.product-sizes strong {
    display: block;
    font-size: 18px;
}

.product-sizes span {
    font-size: 13px;
    color: var(--oil-muted);
}

.product-cart-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.qty-box {
    height: 58px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    border: 1px solid var(--oil-border);
    border-radius: 8px;
    overflow: hidden;
}

.qty-box button,
.qty-box input {
    border: 0;
    background: #fff;
    text-align: center;
    font-weight: 900;
}

.product-cart-btn {
    height: 58px;
    background: var(--oil-gold);
    border-color: var(--oil-gold);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 18px;
}

.product-cart-btn:hover {
    background: var(--oil-gold-dark);
    border-color: var(--oil-gold-dark);
    color: #fff;
}

.product-fav {
    border: 0;
    background: transparent;
    color: #4b5563;
    font-weight: 700;
}

.product-benefits {
    margin: 38px 0 28px;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 24px 12px;
}

.product-benefits div {
    text-align: center;
    padding: 0 18px;
    border-right: 1px solid var(--oil-border);
}

.product-benefits div:last-child {
    border-right: 0;
}

.product-benefits i {
    font-size: 36px;
    color: var(--oil-gold-dark);
    display: block;
    margin-bottom: 12px;
}

.product-benefits strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
}

.product-benefits span {
    display: block;
    font-size: 13px;
    color: var(--oil-muted);
}

.product-details-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 24px;
    align-items: start;
}

.product-side-nav,
.product-details-card,
.product-doc-card .approval-box {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 10px;
}

.product-side-nav {
    overflow: hidden;
}

.product-side-nav a {
    display: block;
    padding: 17px 22px;
    border-bottom: 1px solid var(--oil-border);
    font-weight: 800;
}

.product-side-nav a.active {
    background: #fff7e6;
    color: var(--oil-gold-dark);
    border-left: 4px solid var(--oil-gold);
}

.product-help-box {
    margin: 20px;
    padding: 20px;
    background: #fffaf0;
    border-radius: 10px;
}

.product-help-box i {
    font-size: 34px;
    color: var(--oil-gold-dark);
}

.product-help-box strong,
.product-help-box span,
.product-help-box b,
.product-help-box small {
    display: block;
    margin-top: 6px;
}

.product-details-card {
    padding: 28px;
}

.product-details-card h2 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 16px;
}

.product-details-card p {
    color: #374151;
    line-height: 1.7;
}

.product-spec-table {
    width: 100%;
    margin-top: 24px;
    border-collapse: collapse;
}

.product-spec-table td {
    border: 1px solid var(--oil-border);
    padding: 13px 16px;
}

.product-spec-table td:first-child {
    background: #fbfaf7;
    font-weight: 800;
    width: 45%;
}

.product-doc-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.approval-box {
    padding: 22px;
}

.approval-box h3 {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 14px;
}

.approval-box p {
    margin-bottom: 8px;
}

.approval-box button {
    width: 100%;
    margin-top: 12px;
    border: 1px solid var(--oil-border);
    background: #fff;
    border-radius: 7px;
    padding: 11px;
    font-weight: 800;
}

.approval-box a {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--oil-ink);
    border-bottom: 1px solid var(--oil-border);
}

.related-products {
    margin: 38px 0 50px;
}

.related-products h2 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 18px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.related-card {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 10px;
    padding: 18px;
    display: grid;
    grid-template-columns: 86px 1fr 44px;
    gap: 14px;
    align-items: center;
}

.related-card img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.related-card strong {
    display: block;
    font-weight: 800;
}

.related-card span {
    display: block;
    font-size: 20px;
    font-weight: 900;
    margin-top: 8px;
}

.related-card button {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--oil-gold);
    background: #fff;
    color: var(--oil-gold-dark);
}

@media (max-width: 991.98px) {
    .product-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-image-box {
        height: 360px;
    }

    .product-image-box img {
        max-height: 320px;
    }

    .product-info h1 {
        font-size: 28px;
    }

    .product-viscosity {
        font-size: 48px;
    }

    .product-sizes {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .product-benefits div {
        border-right: 0;
        border-bottom: 1px solid var(--oil-border);
        padding: 18px;
    }

    .product-details-layout {
        grid-template-columns: 1fr;
    }

    .product-side-nav {
        display: none;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .product-cart-row {
        grid-template-columns: 120px 1fr;
    }
}
.category-list-hero {
    margin-top: 22px;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    background: linear-gradient(110deg, #fff6df, #fff 62%);
    min-height: 230px;
    padding: 38px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.category-list-hero h1 {
    font-size: 46px;
    font-weight: 950;
    margin: 0 0 12px;
}

.category-list-hero p {
    max-width: 560px;
    color: #374151;
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 22px;
}

.category-list-hero img {
    max-height: 190px;
    object-fit: contain;
}

.category-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-quick-tags a {
    background: #fff;
    border: 1px solid #f1dfb3;
    border-radius: 99px;
    color: var(--oil-gold-dark);
    font-weight: 800;
    padding: 8px 14px;
}

.category-list-layout {
    display: grid;
    grid-template-columns: 285px 1fr;
    gap: 24px;
    margin-top: 28px;
}

.category-filter-panel {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    align-self: start;
    position: sticky;
    top: 18px;
    overflow: hidden;
}

.filter-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--oil-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-head strong {
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
}

.filter-head a,
.filter-more {
    color: var(--oil-gold-dark);
    font-size: 13px;
    font-weight: 800;
}

.filter-block {
    padding: 18px 20px;
    border-bottom: 1px solid var(--oil-border);
}

.filter-title {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.filter-block label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    margin-bottom: 11px;
    color: #1f2937;
}

.filter-block label span {
    margin-left: auto;
    color: var(--oil-muted);
}

.filter-block input {
    accent-color: var(--oil-gold);
}

.filter-apply {
    margin: 20px;
    width: calc(100% - 40px);
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--oil-gold);
    color: #fff;
    font-weight: 950;
    text-transform: uppercase;
}

.category-toolbar {
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-toolbar strong {
    display: block;
    font-size: 20px;
    font-weight: 950;
}

.category-toolbar span {
    color: var(--oil-muted);
    font-size: 14px;
}

.category-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-sort label {
    color: var(--oil-muted);
    font-size: 14px;
}

.category-sort select {
    height: 42px;
    border: 1px solid var(--oil-border);
    border-radius: 8px;
    padding: 0 36px 0 12px;
    background: #fff;
    font-weight: 700;
}

.category-sort button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--oil-border);
    border-radius: 8px;
    background: #fff;
}

.category-sort button.active {
    background: var(--oil-gold);
    border-color: var(--oil-gold);
    color: #fff;
}

.category-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.category-product-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--oil-border);
    border-radius: 12px;
    padding: 18px;
    min-height: 385px;
    display: flex;
    flex-direction: column;
    transition: .18s;
}

.category-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(13,23,38,.09);
    border-color: #efd49a;
}

.category-product-card img {
    height: 145px;
    object-fit: contain;
    margin: 14px auto 18px;
}

.product-heart {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: transparent;
    font-size: 20px;
    color: #9ca3af;
}

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--oil-gold);
    color: #fff;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.product-badge.sale {
    background: var(--oil-danger);
}

.product-brand {
    color: var(--oil-muted);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
}

.category-product-card h2 {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 950;
    margin: 4px 0 6px;
}

.category-product-card p {
    font-size: 14px;
    color: #374151;
    margin-bottom: 6px;
}

.product-specs {
    color: var(--oil-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.product-stars {
    color: var(--oil-gold);
    font-size: 14px;
    margin-bottom: 8px;
}

.product-stars span {
    color: var(--oil-muted);
}

.category-price-row {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.category-price-row strong {
    display: block;
    font-size: 22px;
    font-weight: 950;
}

.category-price-row span {
    display: block;
    color: var(--oil-muted);
    font-size: 13px;
}

.category-price-row button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--oil-gold);
    color: #fff;
    font-size: 21px;
}

.category-mobile-tools {
    display: none;
}

@media (max-width: 1199.98px) {
    .category-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .category-list-hero {
        padding: 24px 20px;
        min-height: 170px;
    }

    .category-list-hero h1 {
        font-size: 32px;
    }

    .category-list-hero p {
        font-size: 15px;
    }

    .category-list-hero img {
        max-height: 120px;
    }

    .category-mobile-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .category-mobile-tools button {
        height: 48px;
        border: 1px solid var(--oil-border);
        border-radius: 8px;
        background: #fff;
        font-weight: 900;
    }

    .category-list-layout {
        grid-template-columns: 1fr;
    }

    .category-filter-panel {
        display: none;
    }

    .category-toolbar {
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
    }

    .category-sort {
        width: 100%;
    }

    .category-sort select {
        flex: 1;
    }

    .category-product-grid {
        grid-template-columns: 1fr;
    }

    .category-product-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 120px 1fr 48px;
        gap: 12px;
        align-items: center;
    }

    .category-product-card img {
        grid-row: 1 / 8;
        height: 110px;
        margin: 0;
    }

    .product-heart {
        display: none;
    }

    .category-price-row {
        grid-column: 2 / 4;
    }
}