/* قالب فرزند فروشگاه روغن خودرو آقا — homepage and slider design */

:root {
    --oil-primary: #d99a25;
    --oil-primary-dark: #9b620d;
    --oil-accent: #f4c55f;
    --oil-dark: #14171b;
    --oil-panel: #1e2329;
    --oil-muted: #737b85;
}

.digisvg-oil-homepage{background:#f7f8fa;color:#20252b}
.digisvg-oil-homepage .container{max-width:1240px}
.digisvg-oil-homepage .oil-home-hero-section{background:#0f1215;padding:0}
.digisvg-oil-homepage .oil-home-hero-section>.container{max-width:none;padding:0}

/* Hero slider */
.oil-hero{position:relative;direction:rtl;overflow:hidden;background:#11161b}
.oil-hero-swiper{width:100%;overflow:hidden}
.oil-hero-slide{position:relative;isolation:isolate;min-height:440px;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);align-items:center;padding:48px max(7vw,40px);overflow:hidden;background:radial-gradient(circle at 72% 42%,#29313a 0,#171c22 34%,#0e1114 78%);color:#fff}
.oil-hero-slide:after{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#d99a25,transparent);opacity:.8}
.oil-hero-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,15,18,.96) 0%,rgba(12,15,18,.68) 42%,rgba(12,15,18,.12) 100%);z-index:-1}
.oil-hero-copy{position:relative;z-index:4;max-width:610px;text-align:right}
.oil-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#f4c55f;font-size:12px;font-weight:800;margin-bottom:16px}
.oil-hero-eyebrow span{width:8px;height:8px;border-radius:50%;background:#f4c55f;box-shadow:0 0 16px #f4c55f}
.oil-hero-copy h1{font-size:clamp(30px,4vw,58px);line-height:1.18;font-weight:950;color:#fff;margin:0 0 16px;letter-spacing:-1px}
.oil-hero-copy p{max-width:510px;color:rgba(255,255,255,.72);font-size:14px;line-height:2;margin:0 0 26px}
.oil-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.oil-primary-button,.oil-outline-button{display:inline-flex;align-items:center;gap:12px;border-radius:9px;padding:12px 19px;text-decoration:none;font-size:12px;font-weight:900;transition:.25s}
.oil-primary-button{background:linear-gradient(135deg,#f4c55f,#c98414);color:#151719!important;box-shadow:0 12px 28px rgba(217,154,37,.22)}
.oil-primary-button:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffda7c,#d99a25)}
.oil-hero-tag{font-size:11px;color:rgba(255,255,255,.58);border-right:1px solid rgba(244,197,95,.5);padding-right:13px}
.oil-hero-art{position:relative;min-height:365px;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}
.oil-hero-art img{position:relative;z-index:3;width:min(680px,100%);height:360px;object-fit:contain;filter:drop-shadow(0 22px 32px rgba(0,0,0,.5));animation:none!important;transform:none!important}
.oil-art-ring{position:absolute;border:1px solid rgba(244,197,95,.24);border-radius:50%;z-index:1}.oil-art-ring-one{width:310px;height:310px}.oil-art-ring-two{width:450px;height:450px;border-color:rgba(79,139,177,.2)}
.oil-hero-index{position:absolute;left:6%;bottom:24px;color:rgba(255,255,255,.2);font-size:72px;font-weight:950;direction:ltr;z-index:4}
.oil-hero-pagination{position:absolute;right:50%;bottom:18px!important;transform:translateX(50%);z-index:6;display:flex;gap:5px}.oil-hero-pagination .swiper-pagination-bullet{width:20px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);opacity:1}.oil-hero-pagination .swiper-pagination-bullet-active{width:42px;background:#f4c55f}
.oil-hero-prev,.oil-hero-next{position:absolute;z-index:7;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.22);color:#fff;cursor:pointer;transition:.25s}.oil-hero-prev{right:20px}.oil-hero-next{left:20px}.oil-hero-prev:hover,.oil-hero-next:hover{background:#d99a25;color:#111;border-color:#d99a25}

/* Oil-specific benefit strip: visible text, relevant visual art and hover motion */
.oil-benefits-section{background:#f4f6f8;border-bottom:1px solid #e5e9ed;padding:14px 0;box-shadow:0 6px 22px rgba(15,23,42,.06)}
.oil-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.oil-benefit{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:104px;padding:18px 17px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;background:linear-gradient(135deg,#202a33,#12171c);box-shadow:0 9px 20px rgba(15,23,42,.14);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.oil-benefit:before{content:'';position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(10,13,16,.94) 12%,rgba(10,13,16,.62) 100%),url('../images/oil-store-hero.png');background-size:cover;background-position:center;opacity:.55;transition:transform .5s ease,opacity .3s ease}
.oil-benefit:after{content:'';position:absolute;z-index:-1;left:-36px;bottom:-70px;width:150px;height:150px;border-radius:50%;background:rgba(244,197,95,.18);box-shadow:0 0 0 22px rgba(244,197,95,.035),0 0 55px rgba(244,197,95,.18)}
.oil-benefit:hover{transform:translateY(-5px);box-shadow:0 15px 28px rgba(15,23,42,.23);border-color:rgba(244,197,95,.55)}
.oil-benefit:hover:before{opacity:.72;transform:scale(1.07)}
.oil-benefit-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#f4c55f,#c98414);color:#1a1d20;font-size:18px;flex-shrink:0;box-shadow:0 7px 17px rgba(217,154,37,.25)}
.oil-benefit-copy{position:relative;z-index:2;min-width:0;text-shadow:0 2px 8px rgba(0,0,0,.72)}
.oil-benefit strong{display:block;font-size:13px;font-weight:950;color:#fff!important;margin-bottom:6px;line-height:1.5;white-space:normal}
.oil-benefit small{display:block;color:rgba(255,255,255,.82)!important;font-size:10px;line-height:1.6}
.oil-benefit-art{position:absolute;z-index:1;left:17px;bottom:-5px;color:rgba(255,255,255,.16);font-size:58px;transform:rotate(-12deg);pointer-events:none;transition:transform .35s ease,color .35s ease}.oil-benefit:hover .oil-benefit-art{color:rgba(244,197,95,.29);transform:rotate(0) scale(1.1)}
.oil-benefit-authenticity{background:linear-gradient(135deg,#3a2a1d,#171719)}.oil-benefit-fit{background:linear-gradient(135deg,#182735,#11181f)}.oil-benefit-shipping{background:linear-gradient(135deg,#1b3427,#111a16)}.oil-benefit-support{background:linear-gradient(135deg,#252b35,#12171c)}

/* Sections and category cards */
.oil-category-intro,.oil-products-section{padding:42px 0 10px}.oil-products-section{padding-top:22px}
.oil-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.oil-section-heading span,.oil-guide-panel>div>span{display:block;color:#ba7410;font-size:11px;font-weight:900;margin-bottom:6px}.oil-section-heading h2,.oil-guide-panel h2{margin:0;font-size:24px;font-weight:950;color:#20252b}.oil-section-heading>a{color:#ba7410;text-decoration:none;font-size:11px;font-weight:800}.oil-section-heading>a i{margin-right:6px}
.oil-category-grid{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 13px;scrollbar-width:thin;scrollbar-color:#d99a25 #e9edf1;scroll-snap-type:x proximity}.oil-category-grid::-webkit-scrollbar{height:7px}.oil-category-grid::-webkit-scrollbar-track{background:#e9edf1;border-radius:8px}.oil-category-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#f4c55f,#bd7411);border-radius:8px}.oil-category-card{position:relative;isolation:isolate;overflow:hidden;flex:0 0 calc((100% - 42px)/4);min-width:220px;min-height:146px;padding:21px;border-radius:15px;color:#fff!important;text-decoration:none;background:linear-gradient(135deg,#20272d,#101418);box-shadow:0 9px 24px rgba(15,23,42,.14);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;border:1px solid rgba(255,255,255,.1);scroll-snap-align:start}.oil-category-card:before{content:'';position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(8,11,14,.95) 5%,rgba(8,11,14,.57) 100%),url('../images/oil-store-hero.png');background-size:cover;background-position:center;opacity:.55;transition:transform .5s ease,opacity .3s ease}.oil-category-card:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;left:-30px;bottom:-70px;background:rgba(244,197,95,.16);box-shadow:0 0 0 18px rgba(244,197,95,.035),0 0 40px rgba(244,197,95,.14);z-index:-1}.oil-category-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(15,23,42,.23);border-color:rgba(244,197,95,.55)}.oil-category-card:hover:before{opacity:.76;transform:scale(1.07)}.oil-category-card strong,.oil-category-card small{position:relative;z-index:2;display:block;text-shadow:0 2px 8px rgba(0,0,0,.8)}.oil-category-card strong{font-size:14px;font-weight:950!important;color:#fff!important;margin-top:20px;line-height:1.5}.oil-category-card small{font-size:10px!important;color:rgba(255,255,255,.86)!important;margin-top:7px;line-height:1.6}.oil-category-icon{position:absolute;top:17px;left:18px;color:#f4c55f;font-size:22px;z-index:3;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}.oil-category-synthetic{background:linear-gradient(135deg,#202b35,#10151a)}.oil-category-semi{background:linear-gradient(135deg,#28332c,#162019)}.oil-category-filter{background:linear-gradient(135deg,#252d3a,#111720)}.oil-category-additive{background:linear-gradient(135deg,#392d22,#1d1710)}

.oil-guide-banner{padding:38px 0}.oil-guide-panel{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:31px 38px;border-radius:17px;background:linear-gradient(110deg,#111820,#252e36);color:#fff;box-shadow:0 15px 32px rgba(15,23,42,.16);overflow:hidden}.oil-guide-panel:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(13,18,23,.96) 15%,rgba(13,18,23,.7) 62%,rgba(13,18,23,.35)),url('../images/oil-store-hero.png') center/cover;opacity:.65}.oil-guide-panel:after{content:'';position:absolute;z-index:-1;width:220px;height:220px;left:24%;top:-100px;border-radius:50%;background:rgba(244,197,95,.12);box-shadow:0 0 80px rgba(244,197,95,.2)}.oil-guide-copy{position:relative;z-index:2;flex:1}.oil-guide-panel h2{color:#fff;font-size:22px}.oil-guide-panel p{margin:8px 0 0;color:rgba(255,255,255,.74);font-size:11px}.oil-guide-visual{position:relative;z-index:2;width:190px;height:82px;overflow:hidden;border-radius:12px;opacity:.9;border:1px solid rgba(244,197,95,.35);box-shadow:0 8px 20px rgba(0,0,0,.22)}.oil-guide-visual img{width:100%;height:100%;object-fit:cover;object-position:center}.oil-outline-button{border:1px solid rgba(244,197,95,.7);color:#f4c55f!important;white-space:nowrap;position:relative;z-index:2}.oil-outline-button:hover{background:#f4c55f;color:#17191d!important}

/* Scope the parent's dark product components to the oil palette where possible. */
.digisvg-oil-homepage .section-title:after,.digisvg-oil-homepage .section-heading:after{background:#d99a25}
.digisvg-oil-homepage .button,.digisvg-oil-homepage .btn-primary{background:#c98414}

@media(max-width:900px){.oil-hero-slide{grid-template-columns:1fr;min-height:650px;padding:28px 8%;text-align:center}.oil-hero-copy{order:2;max-width:none;text-align:center}.oil-hero-copy p{margin-left:auto;margin-right:auto}.oil-hero-actions{justify-content:center}.oil-hero-art{order:1;min-height:330px}.oil-hero-art img{height:315px}.oil-hero-index{left:4%;bottom:100px}.oil-benefits-grid{grid-template-columns:repeat(2,1fr)}.oil-benefit:nth-child(2){border-left:0}.oil-category-card{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:560px){.oil-hero-slide{min-height:570px;padding:20px 17px}.oil-hero-art{min-height:245px}.oil-hero-art img{height:235px}.oil-art-ring-one{width:210px;height:210px}.oil-art-ring-two{width:300px;height:300px}.oil-hero-copy h1{font-size:29px}.oil-hero-copy p{font-size:11px}.oil-hero-prev,.oil-hero-next{width:30px;height:30px}.oil-hero-prev{right:8px}.oil-hero-next{left:8px}.oil-benefit{padding:14px 10px;gap:8px}.oil-benefit-icon{width:34px;height:34px;font-size:14px}.oil-benefit strong{font-size:10px}.oil-benefit small{font-size:8px}.oil-category-grid{gap:9px}.oil-category-card{min-height:128px;padding:15px}.oil-category-card strong{font-size:11px}.oil-section-heading h2{font-size:18px}.oil-guide-panel{padding:23px 18px;display:block}.oil-guide-visual{width:100%;height:105px;margin-top:18px}.oil-outline-button{margin-top:18px}.oil-guide-panel h2{font-size:17px}}

/* Oil-only special offer: isolated from the parent theme's conflicting grid rules. */
.mr-oil-special{position:relative;isolation:isolate;overflow:hidden!important;background:linear-gradient(135deg,#171b20,#252d34)!important;border:1px solid rgba(244,197,95,.22);border-radius:18px!important}
.mr-oil-special:before{display:none!important}
.mr-oil-special .special-inner{display:flex!important;flex-direction:row!important;align-items:center!important;gap:24px!important}
.mr-oil-special .special-info{width:205px!important;min-width:205px!important;flex:0 0 205px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:16px!important;box-sizing:border-box!important}
.mr-oil-special .special-info h3{color:#fff!important;font-size:19px!important;line-height:1.45!important;margin:0!important;font-weight:950!important}
.mr-oil-special .special-info p{color:rgba(255,255,255,.7)!important;font-size:11px!important;line-height:1.7!important;margin:8px 0 16px!important}
.mr-oil-special .special-products{display:block!important;position:relative!important;flex:1 1 auto!important;width:0!important;min-width:0!important;overflow:hidden!important;padding:0 46px 38px!important;box-sizing:border-box!important}
.mr-oil-special .special-products.swiper{height:auto!important}
.mr-oil-special .special-products .swiper-wrapper{display:flex!important;align-items:stretch!important;gap:0!important;width:100%!important}
.mr-oil-special .special-products .swiper-slide{display:flex!important;flex:0 0 calc(25% - 12px)!important;width:calc(25% - 12px)!important;height:auto!important;margin:0 6px!important;box-sizing:border-box!important;visibility:visible!important;opacity:1!important}
.mr-oil-special .product-card-dark{display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-width:0!important;background:#fff!important;border:1px solid rgba(217,154,37,.16)!important;border-radius:12px!important;overflow:hidden!important;visibility:visible!important;opacity:1!important}
.mr-oil-special .product-card-dark .img-wrap{height:150px!important;min-height:150px!important;aspect-ratio:auto!important;padding:12px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
.mr-oil-special .product-card-dark .img-wrap img{display:block!important;width:100%!important;height:100%!important;max-height:145px!important;object-fit:contain!important}
.mr-oil-special .product-card-dark .info{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;padding:10px!important;box-sizing:border-box!important}
.mr-oil-special .product-card-dark .title{font-size:11px!important;line-height:1.5!important;min-height:34px!important;margin:0 0 6px!important;color:#20252b!important}
.mr-oil-special .product-card-dark .price{font-size:10px!important;color:#9b620d!important;line-height:1.5!important}
.mr-oil-special .product-card-dark .special-cart{margin-top:auto!important;padding-top:8px!important}
.mr-oil-special .product-card-dark .special-cart-button{background:linear-gradient(135deg,#f4c55f,#c98414)!important;color:#17191d!important;border-radius:7px!important;min-height:28px!important;font-size:9px!important}
.mr-oil-special .product-card-dark .badge{background:#c98414!important;color:#fff!important}
.mr-oil-special .special-nav{padding:0 3px!important}
.mr-oil-special .special-pagination{bottom:6px!important}
.mr-oil-special .special-pagination .swiper-pagination-bullet-active{background:#f4c55f!important}

@media(max-width:768px){
  .mr-oil-special{padding:18px 0 22px!important;margin:15px 0!important;border-radius:14px!important}
  .mr-oil-special .special-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .mr-oil-special .special-info{width:100%!important;min-width:0!important;flex:0 0 auto!important;min-height:60px!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;text-align:right!important;padding:0 10px!important}
  .mr-oil-special .special-info h3{font-size:16px!important;line-height:1.35!important}
  .mr-oil-special .special-info p{font-size:10px!important;margin:5px 0 0!important}
  .mr-oil-special .special-info .btn-outline{font-size:10px!important;padding:8px 10px!important;white-space:nowrap!important}
  .mr-oil-special .special-products{display:block!important;width:100%!important;min-width:100%!important;min-height:245px!important;height:auto!important;padding:0 38px 32px!important;overflow:hidden!important}
  .mr-oil-special .special-products .swiper-wrapper{display:flex!important;align-items:stretch!important;min-height:205px!important}
  .mr-oil-special .special-products .swiper-slide{display:flex!important;flex:0 0 calc(50% - 6px)!important;width:calc(50% - 6px)!important;margin:0 3px!important;min-width:0!important}
  .mr-oil-special .product-card-dark .img-wrap{height:116px!important;min-height:116px!important;padding:8px!important}
  .mr-oil-special .product-card-dark .img-wrap img{max-height:110px!important}
  .mr-oil-special .product-card-dark .info{padding:8px!important}
  .mr-oil-special .product-card-dark .title{font-size:10px!important;min-height:30px!important}
  .mr-oil-special .product-card-dark .price{font-size:9px!important}
  .mr-oil-special .special-nav{top:44%!important;padding:0 2px!important}
  .mr-oil-special .special-nav button{width:32px!important;height:32px!important}
}

@media(max-width:390px){
  .mr-oil-special .special-info{padding:0 7px!important}
  .mr-oil-special .special-info h3{font-size:14px!important}
  .mr-oil-special .special-info .btn-outline{font-size:9px!important;padding:7px 8px!important}
  .mr-oil-special .special-products{padding-left:34px!important;padding-right:34px!important}
  .mr-oil-special .product-card-dark .img-wrap{height:105px!important;min-height:105px!important}
}

/* Specificity guard: old generic .special-section.top/.footer rules must not override the oil slider. */
.special-section.mr-oil-special.top .special-products .swiper-slide,
.special-section.mr-oil-special.footer .special-products .swiper-slide{width:calc(25% - 12px)!important;flex-basis:calc(25% - 12px)!important}
.special-section.mr-oil-special.top .product-card-dark,
.special-section.mr-oil-special.footer .product-card-dark{height:100%!important;display:flex!important;flex-direction:column!important}
.special-section.mr-oil-special.top .product-card-dark .img-wrap,
.special-section.mr-oil-special.footer .product-card-dark .img-wrap{height:150px!important;min-height:150px!important;aspect-ratio:auto!important;flex:0 0 150px!important}
.special-section.mr-oil-special.top .product-card-dark .info,
.special-section.mr-oil-special.footer .product-card-dark .info{min-height:0!important;display:flex!important;flex-direction:column!important;flex:1!important}

@media(max-width:767px){
  .special-section.mr-oil-special.top .special-products .swiper-slide,
  .special-section.mr-oil-special.footer .special-products .swiper-slide{width:calc(50% - 6px)!important;flex-basis:calc(50% - 6px)!important}
  .special-section.mr-oil-special.top .product-card-dark .img-wrap,
  .special-section.mr-oil-special.footer .product-card-dark .img-wrap{height:116px!important;min-height:116px!important;flex-basis:116px!important}
}

@media(max-width:390px){
  .special-section.mr-oil-special.top .product-card-dark .img-wrap,
  .special-section.mr-oil-special.footer .product-card-dark .img-wrap{height:105px!important;min-height:105px!important;flex-basis:105px!important}
}