/* =========================================================================
   SmartVision.az — Modern Front-end Redesign Layer
   Bu fayl mövcud style.css-in ÜSTÜNDƏ yüklənir və dizaynı yeniləyir.
   Müəllif: redesign (2026)
   ========================================================================= */

:root{
    --sv-red:#c00000;
    --sv-red-2:#e01722;
    --sv-red-dark:#8f0000;
    --sv-grad:linear-gradient(135deg,#e11923 0%,#a30006 100%);
    --sv-ink:#141822;
    --sv-body:#414856;
    --sv-muted:#8b929e;
    --sv-line:#e9ebef;
    --sv-line-2:#f0f2f5;
    --sv-bg:#f5f6f8;
    --sv-card:#ffffff;
    --sv-radius:16px;
    --sv-radius-sm:10px;
    --sv-radius-xs:8px;
    --sv-shadow:0 4px 22px rgba(20,23,33,.06);
    --sv-shadow-md:0 10px 34px rgba(20,23,33,.10);
    --sv-shadow-lg:0 20px 55px rgba(20,23,33,.16);
    --wa:#25d366;
    --wa-dark:#128c7e;
    --sv-t:.28s cubic-bezier(.22,.61,.36,1);
}

body{ color:var(--sv-body); }
.sv-container{ max-width:1240px; margin:0 auto; padding:0 15px; }

/* ---------- Universal section title ---------- */
.section-title h2{
    position:relative;
    display:inline-block;
    font-weight:800;
    letter-spacing:-.5px;
}
.section-title h2::after{
    content:"";
    position:absolute; left:0; bottom:-10px;
    width:60px; height:4px; border-radius:4px;
    background:var(--sv-grad);
}

/* =========================================================================
   1. HEADER + TOP BAR + NAVIGATION
   ========================================================================= */
.top-header{
    background:var(--sv-ink) !important;
    padding:9px 0;
}
.top-header .top-header-contact-info li,
.top-header .top-header-contact-info li a{
    color:#d7dae1 !important;
    font-weight:500;
}
.top-header .top-header-contact-info li i{
    color:var(--sv-red-2);
    font-size:16px; vertical-align:middle;
}
.top-header .top-header-contact-info li a:hover{ color:#fff !important; }
.top-header .top-header-menu li a{
    width:32px; height:32px; line-height:32px; text-align:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff !important;
    display:inline-block;
    transition:var(--sv-t);
}
.top-header .top-header-menu li a:hover{ background:var(--sv-red); transform:translateY(-2px); }
.top-header .top-header-menu li a .iconify{ vertical-align:-2px; }
.top-header .top-header-menu{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.top-header .top-header-menu li{ margin-left:0 !important; vertical-align:middle; }
.top-header .top-header-menu li::before{ display:none !important; }
.top-header .top-header-contact-info{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:0; }
.top-header .top-header-contact-info li{ margin:0 !important; }

/* Sticky, cleaner navbar */
.navbar-area{ box-shadow:0 2px 18px rgba(20,23,33,.06); }
.navbar-area.is-sticky{
    box-shadow:0 6px 26px rgba(20,23,33,.12) !important;
    animation:svDrop .4s ease;
}
@keyframes svDrop{ from{ transform:translateY(-14px); opacity:.6 } to{ transform:none; opacity:1 } }

.drodo-nav .navbar{ padding-top:10px; padding-bottom:10px; flex-wrap:nowrap; }
.drodo-nav .navbar-brand img{ max-height:54px; width:auto; }

.drodo-nav .navbar .navbar-nav{ margin-left:auto; margin-right:auto; flex-wrap:nowrap; }
.drodo-nav .navbar .navbar-nav .nav-item{ padding:0; }
.drodo-nav .navbar .navbar-nav .nav-item .nav-link{
    font-weight:600;
    font-size:15px;
    color:var(--sv-ink) !important;
    position:relative;
    white-space:nowrap;
    padding:8px 11px !important;
    border-radius:9px;
    transition:var(--sv-t);
}
.drodo-nav .navbar .navbar-nav .nav-item .nav-link i{ font-size:15px; }
.drodo-nav .navbar .navbar-nav .nav-item .nav-link::after{
    content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px;
    background:var(--sv-grad); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:var(--sv-t);
}
/* sağ tərəf: favorit + səbət + axtarış bir sətirdə */
.drodo-nav .others-option{ display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap; }
.drodo-nav .others-option .option-item{ margin-left:14px !important; padding-left:0 !important; border:none !important; }
.drodo-nav .others-option .option-item::before{ display:none !important; }
.drodo-nav .navbar .navbar-nav .nav-item:hover > .nav-link,
.drodo-nav .navbar .navbar-nav .nav-item .nav-link.active{ color:var(--sv-red) !important; }
.drodo-nav .navbar .navbar-nav .nav-item:hover > .nav-link::after,
.drodo-nav .navbar .navbar-nav .nav-item .nav-link.active::after{ transform:scaleX(1); }

/* Dropdowns */
.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu{
    border:none !important;
    box-shadow:var(--sv-shadow-md) !important;
    border-radius:14px !important;
    padding:8px !important;
    margin-top:14px !important;
    /* overflow YOXDUR — sağa açılan alt menyu kəsilməsin */
}
.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a{
    border-radius:9px;
    font-weight:600 !important;
    padding:10px 14px !important;
    transition:var(--sv-t);
    color:var(--sv-body) !important;
}
.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover{
    background:var(--sv-bg) !important;
    color:var(--sv-red) !important;
    padding-left:18px !important;
}
.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a i{ color:var(--sv-muted); }

/* "Kateqoriyalar" dropdown — geniş, amma overflow YOXDUR (alt menyu kəsilməsin) */
.drodo-nav .navbar .navbar-nav .nav-item.nav-categories > .dropdown-menu{
    min-width:288px;
}
/* Flyout sub-dropdowns: nice look + reposition helper */
.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu{
    margin-top:0 !important;
    min-width:230px;
}
.sv-flip-up{ top:auto !important; bottom:0 !important; }

/* Cart + search buttons in navbar */
.others-option .cart-btn a,
.others-option .search-btn-box i{
    color:var(--sv-ink);
    transition:var(--sv-t);
}
.others-option .cart-btn a span{
    background:var(--sv-grad) !important;
    box-shadow:0 4px 10px rgba(192,0,0,.4);
}
.others-option .cart-btn a:hover,
.others-option .search-btn-box i:hover{ color:var(--sv-red); transform:translateY(-2px); }

/* =========================================================================
   2. HOMEPAGE CATEGORY SIDEBAR (megamenu-category)
   ========================================================================= */
.megamenu-container .megamenu-title{
    background:var(--sv-grad) !important;
    border-radius:12px 12px 0 0;
    letter-spacing:.4px;
    display:flex; align-items:center; gap:10px;
}
.megamenu-container .megamenu-title i{ font-size:20px; }
/* NOTE: konteynerdə overflow YOXDUR — əks halda sağa açılan alt menyu kəsilir */
.megamenu-container .megamenu-category{
    border-radius:0 0 12px 12px;
    box-shadow:var(--sv-shadow);
}
.megamenu-container .megamenu-category .nav .nav-item .nav-link{
    font-size:14.5px; font-weight:600;
    transition:var(--sv-t);
    background:#fff;
}
.megamenu-container .megamenu-category .nav .nav-item .nav-link:hover{
    background:var(--sv-grad) !important; padding-left:26px;
}
.megamenu-container .megamenu-category .nav .nav-item .nav-link i{ transition:var(--sv-t); }
.megamenu-container .megamenu-category .nav .nav-item:hover .nav-link i{ transform:translateX(3px); }

/* sidebar flyout: bounded height, no page overflow */
.megamenu-container .megamenu-category .nav .nav-item .dropdown-menu{
    border-radius:12px;
    box-shadow:var(--sv-shadow-lg) !important;
    padding:8px !important;
    max-height:420px;
    overflow-y:auto;
    margin-left:2px;
}
.megamenu-container .megamenu-category .nav .nav-item .dropdown-menu .nav-item .nav-link{
    border-radius:8px; padding:9px 14px !important; font-size:14px;
}
.megamenu-container .megamenu-category .nav .nav-item .dropdown-menu .nav-item .nav-link:hover{
    background:var(--sv-grad) !important; color:#fff !important; padding-left:18px;
}

/* =========================================================================
   3. MODERN PRODUCT CARD (.sv-card)  — used in slider & grid
   ========================================================================= */
.sv-card{
    position:relative;
    background:var(--sv-card);
    border:1px solid var(--sv-line);
    border-radius:var(--sv-radius);
    overflow:visible;            /* tooltip kəsilməsin */
    transition:var(--sv-t);
    display:flex; flex-direction:column;
    height:100%;
    margin-bottom:30px;
}
.sv-card:hover{
    border-color:transparent;
    box-shadow:var(--sv-shadow-lg);
    transform:translateY(-6px);
}
.sv-card__media{
    position:relative;
    display:block;
    padding:18px;
    background:#fff;
    aspect-ratio:1/1;
    overflow:hidden;             /* şəkil zoom-u burda saxlanılır */
    border-radius:var(--sv-radius) var(--sv-radius) 0 0;
}
.sv-card__media img{
    width:100%; height:100%;
    object-fit:contain;
    transition:transform .45s ease;
    mix-blend-mode:multiply;
}
.sv-card:hover .sv-card__media img{ transform:scale(1.07); }

.sv-badges{ position:absolute; top:12px; left:12px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.sv-badge{
    font-size:11.5px; font-weight:700; letter-spacing:.3px;
    padding:4px 10px; border-radius:20px; color:#fff; line-height:1.4;
    display:inline-flex; align-items:center; gap:4px;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.sv-badge--sale{ background:var(--sv-grad); }
.sv-badge--new{ background:#12b76a; }
.sv-badge--off{ background:#111827; }

/* wishlist heart (top-right) */
.sv-fav{
    position:absolute; top:12px; right:12px; z-index:4;
    width:38px; height:38px; border-radius:50%;
    border:none; cursor:pointer;
    background:#fff; color:#9aa1ad;
    box-shadow:var(--sv-shadow);
    display:grid; place-items:center;
    font-size:20px; line-height:1;
    transition:var(--sv-t);
}
.sv-fav:hover{ color:var(--sv-red); transform:scale(1.12); }
.sv-fav.is-active{ background:var(--sv-red); color:#fff; }
.sv-fav.is-active i{ animation:svPop .35s ease; }
@keyframes svPop{ 0%{transform:scale(.6)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }

.sv-card__body{
    padding:16px 18px 20px;
    display:flex; flex-direction:column; gap:10px;
    flex:1;
}
.sv-card__title{
    font-size:15.5px; font-weight:700; line-height:1.4;
    color:var(--sv-ink) !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:44px;
    transition:var(--sv-t);
}
.sv-card__title:hover{ color:var(--sv-red) !important; }
.sv-card__price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:auto; }
.sv-card__price .new{ font-size:19px; font-weight:800; color:var(--sv-red); }
.sv-card__price .old{ font-size:14px; color:var(--sv-muted); text-decoration:line-through; }
.sv-card__price .curr{ font-size:12.5px; font-weight:600; color:var(--sv-muted); }

/* icon action row: 3 equal buttons */
.sv-actions{ display:flex; gap:8px; margin-top:4px; }
.sv-iconbtn{
    flex:1;
    height:46px;
    border-radius:12px;
    border:1.5px solid var(--sv-line);
    background:#fff;
    color:var(--sv-ink);
    display:grid; place-items:center;
    font-size:21px; line-height:1;
    cursor:pointer;
    position:relative;
    transition:var(--sv-t);
}
.sv-iconbtn:hover{ transform:translateY(-3px); box-shadow:var(--sv-shadow-md); }
.sv-iconbtn--view:hover{ border-color:var(--sv-ink); color:var(--sv-ink); }
.sv-iconbtn--fav:hover{ border-color:var(--sv-red); color:var(--sv-red); }
.sv-iconbtn--fav.is-active{ background:var(--sv-red); border-color:var(--sv-red); color:#fff; }
.sv-iconbtn--wa{ color:var(--wa); }
.sv-iconbtn--wa:hover{ background:var(--wa); border-color:var(--wa); color:#fff; }
/* full-width primary cart button */
.sv-card__cart{
    display:flex; align-items:center; justify-content:center; gap:9px;
    height:50px; border-radius:12px; margin-top:2px;
    background:var(--sv-grad); color:#fff !important; font-weight:700; font-size:15.5px;
    box-shadow:0 8px 20px rgba(192,0,0,.22); transition:var(--sv-t);
}
.sv-card__cart i{ font-size:21px; }
.sv-card__cart:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(192,0,0,.32); color:#fff !important; }
/* tooltip */
.sv-iconbtn[data-tip]::before{
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--sv-ink); color:#fff; font-size:11.5px; font-weight:600; white-space:nowrap;
    padding:5px 9px; border-radius:7px; opacity:0; pointer-events:none; transition:var(--sv-t); z-index:6;
}
.sv-iconbtn[data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }

/* keep owl slider items equal height */
.products-slides .sv-card{ height:auto; }
.products-slides.owl-carousel .owl-item{ display:flex; }
.products-slides.owl-carousel .owl-item > .sv-card{ width:100%; }

/* =========================================================================
   4. PAGE TITLE (breadcrumb hero)
   ========================================================================= */
.page-title-area{
    background:var(--sv-ink) !important;
    position:relative; overflow:hidden;
    padding:52px 0 !important;
}
.page-title-area::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(600px 200px at 85% -20%, rgba(224,23,34,.35), transparent 70%);
}
.page-title-content h1,.page-title-content h2{ color:#fff !important; font-weight:800; position:relative; }
.page-title-content ul li,.page-title-content ul li a{ color:#c7ccd6 !important; }
.page-title-content ul li a:hover{ color:#fff !important; }
.page-title-content ul li::before{ background:var(--sv-red-2) !important; }

/* =========================================================================
   5. ALL PRODUCTS — unique filter experience
   ========================================================================= */
.sv-shop{ padding:40px 0 60px; }
.sv-shop-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-bottom:20px;
}
.sv-shop-head h1, .sv-shop-head h2{ font-size:30px; font-weight:800; color:var(--sv-ink); margin:0; letter-spacing:-.5px; }
.sv-shop-head .sv-count{ color:var(--sv-muted); font-weight:600; }
.sv-shop-head .sv-count b{ color:var(--sv-red); }

/* category chips scroller */
.sv-cat-scroller{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:18px; }
.sv-cat-scroller::-webkit-scrollbar{ height:6px; }
.sv-cat-scroller::-webkit-scrollbar-thumb{ background:#d7dbe2; border-radius:6px; }
.sv-chip{
    white-space:nowrap; flex:0 0 auto;
    border:1.5px solid var(--sv-line); background:#fff; color:var(--sv-body);
    border-radius:24px; padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer;
    transition:var(--sv-t);
}
.sv-chip:hover{ border-color:var(--sv-red); color:var(--sv-red); }
.sv-chip.is-active{ background:var(--sv-grad); border-color:transparent; color:#fff; }

/* horizontal filter toolbar */
.sv-filterbar{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--sv-line); border-radius:16px; padding:14px 18px; margin-bottom:24px;
    box-shadow:var(--sv-shadow); position:sticky; top:86px; z-index:20;
}
.sv-filterbar .grow{ flex:1 1 240px; }
.sv-search-box{ position:relative; }
.sv-search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--sv-muted); font-size:19px; }
.sv-search-box input{
    width:100%; height:46px; border:1.5px solid var(--sv-line); border-radius:12px;
    padding:0 14px 0 42px; font-size:14.5px; outline:none; transition:var(--sv-t); background:var(--sv-bg);
}
.sv-search-box input:focus{ border-color:var(--sv-red); background:#fff; box-shadow:0 0 0 4px rgba(192,0,0,.08); }

.sv-price-row{ display:flex; align-items:center; gap:8px; }
.sv-price-row input{
    width:96px; height:46px; border:1.5px solid var(--sv-line); border-radius:12px; padding:0 12px; font-size:14px; outline:none; background:var(--sv-bg); transition:var(--sv-t);
}
.sv-price-row input:focus{ border-color:var(--sv-red); background:#fff; }
.sv-price-row span{ color:var(--sv-muted); }

.sv-toggle{ display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:600; font-size:14px; color:var(--sv-body); white-space:nowrap; }
.sv-toggle input{ display:none; }
.sv-toggle .box{ width:44px; height:25px; border-radius:20px; background:#dfe3e9; position:relative; transition:var(--sv-t); flex:0 0 auto; }
.sv-toggle .box::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:var(--sv-t); box-shadow:0 2px 4px rgba(0,0,0,.2); }
.sv-toggle input:checked + .box{ background:var(--sv-grad); }
.sv-toggle input:checked + .box::after{ left:22px; }

.sv-sort{ display:flex; align-items:center; gap:8px; }
.sv-sort select{
    height:46px; border:1.5px solid var(--sv-line); border-radius:12px; padding:0 38px 0 14px; font-weight:600;
    color:var(--sv-ink); background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b929e' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 12px center;
    -webkit-appearance:none; appearance:none; outline:none; cursor:pointer;
}
.sv-view-toggle{ display:flex; gap:6px; }
.sv-view-toggle button{
    width:46px; height:46px; border-radius:12px; border:1.5px solid var(--sv-line); background:#fff; color:var(--sv-muted); font-size:20px; cursor:pointer; display:grid; place-items:center; transition:var(--sv-t);
}
.sv-view-toggle button.is-active{ background:var(--sv-ink); border-color:var(--sv-ink); color:#fff; }
.sv-filter-reset{
    height:46px; padding:0 18px; border-radius:12px; border:none; cursor:pointer;
    background:var(--sv-ink); color:#fff; font-weight:700; transition:var(--sv-t);
    display:inline-flex; align-items:center; gap:8px;
}
.sv-filter-reset:hover{ background:var(--sv-red); }

.sv-products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.sv-products-grid.is-list{ grid-template-columns:1fr; }
.sv-products-grid.is-list .sv-card{ flex-direction:row; align-items:stretch; }
.sv-products-grid.is-list .sv-card__media{ width:240px; flex:0 0 240px; aspect-ratio:auto; }
.sv-products-grid.is-list .sv-card__body{ justify-content:center; }
.sv-empty{ grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--sv-muted); }
.sv-empty i{ font-size:64px; color:#d7dbe2; display:block; margin-bottom:14px; }
.sv-filter-toggle{ display:none; }

/* =========================================================================
   6. PRODUCT DETAIL
   ========================================================================= */
.product-details-area{ padding:50px 0 30px; }
.sv-pd-gallery{
    background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius);
    padding:20px; box-shadow:var(--sv-shadow);
}
.products-details-image .products-details-image-slides li img{ mix-blend-mode:multiply; border-radius:10px; }
.products-details-image .products-details-image-slides-owl-thumbs .owl-thumb-item{
    border:1.5px solid var(--sv-line); border-radius:10px; overflow:hidden; padding:5px; transition:var(--sv-t);
}
.products-details-image .products-details-image-slides-owl-thumbs .owl-thumb-item.active{ border-color:var(--sv-red); }

.sv-pd{ padding-left:8px; }
.sv-pd__brand{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--sv-red); background:rgba(192,0,0,.08); padding:5px 12px; border-radius:20px; margin-bottom:14px; }
.sv-pd h1, .sv-pd .sv-pd__name{ font-size:28px; font-weight:800; color:var(--sv-ink); line-height:1.25; margin-bottom:14px; letter-spacing:-.5px; }
.sv-pd__price{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
.sv-pd__price .new{ font-size:32px; font-weight:800; color:var(--sv-red); }
.sv-pd__price .old{ font-size:19px; color:var(--sv-muted); text-decoration:line-through; }
.sv-pd__price .save{ font-size:13px; font-weight:700; color:#12b76a; background:rgba(18,183,106,.1); padding:4px 10px; border-radius:20px; }
.sv-pd__stock{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:#12b76a; margin-bottom:18px; font-size:14.5px; }
.sv-pd__stock i{ font-size:18px; }
.sv-pd__specs-title{ font-size:17px; font-weight:800; color:var(--sv-ink); margin:6px 0 12px; display:flex; align-items:center; gap:8px; }
.sv-pd__specs-title i{ color:var(--sv-red); font-size:20px; }
.sv-pd__desc{ color:var(--sv-body); line-height:1.7; font-size:15px; background:var(--sv-bg); border:1px solid var(--sv-line); border-radius:14px; padding:6px 20px; margin-bottom:22px; }
.sv-pd__desc p{ margin:0; padding:11px 2px; border-bottom:1px dashed var(--sv-line); }
.sv-pd__desc p:last-child{ border-bottom:none; }
.sv-pd__desc p:empty{ display:none; }
.sv-pd__desc ul,.sv-pd__desc ol{ margin:0; padding:11px 0 11px 22px; }
.sv-pd__desc li{ padding:5px 0; }
.sv-pd__desc strong,.sv-pd__desc b{ color:var(--sv-ink); }

.sv-pd__buy{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.sv-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--sv-line); border-radius:13px; overflow:hidden; }
.sv-qty button{ width:46px; height:56px; border:none; background:#fff; color:var(--sv-ink); font-size:22px; cursor:pointer; transition:var(--sv-t); }
.sv-qty button:hover{ background:var(--sv-bg); color:var(--sv-red); }
.sv-qty input{ width:52px; height:56px; border:none; text-align:center; font-size:17px; font-weight:700; outline:none; }
.sv-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    height:56px; padding:0 26px; border-radius:13px; font-weight:700; font-size:16px; cursor:pointer;
    border:none; transition:var(--sv-t); text-decoration:none;
}
.sv-btn i{ font-size:21px; }
.sv-btn--cart{ background:var(--sv-grad); color:#fff; flex:1; min-width:150px; box-shadow:0 10px 24px rgba(192,0,0,.25); }
.sv-btn--cart:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 16px 32px rgba(192,0,0,.35); }
.sv-btn--wa{ background:var(--wa); color:#fff; flex:1; min-width:150px; box-shadow:0 10px 24px rgba(37,211,102,.28); }
.sv-btn--wa:hover{ background:var(--wa-dark); color:#fff; transform:translateY(-3px); }
.sv-btn--ghost{ background:#fff; border:1.5px solid var(--sv-line); color:var(--sv-ink); width:56px; padding:0; }
.sv-btn--ghost:hover{ border-color:var(--sv-red); color:var(--sv-red); }
.sv-btn--ghost.is-active{ background:var(--sv-red); border-color:var(--sv-red); color:#fff; }

.sv-pd__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; padding-top:6px; }
.sv-pd__meta span{ display:inline-flex; align-items:center; gap:8px; color:var(--sv-body); font-size:14px; font-weight:600; }
.sv-pd__meta span i{ color:var(--sv-red); font-size:19px; }

/* related products spacing */
.related-products{ padding-top:20px; }

/* =========================================================================
   7. CART PAGE (modern)
   ========================================================================= */
.sv-cart{ padding:46px 0 60px; }
.sv-cart-grid{ display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; }
.sv-cart-items{ display:flex; flex-direction:column; gap:14px; }
.sv-cart-item{
    display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center;
    background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); padding:14px; box-shadow:var(--sv-shadow);
    transition:var(--sv-t);
}
.sv-cart-item:hover{ box-shadow:var(--sv-shadow-md); }
.sv-cart-item__img{ width:96px; height:96px; border-radius:12px; background:#fff; border:1px solid var(--sv-line-2); display:grid; place-items:center; overflow:hidden; }
.sv-cart-item__img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:6px; }
.sv-cart-item__name{ font-weight:700; color:var(--sv-ink); font-size:16px; line-height:1.35; }
.sv-cart-item__name:hover{ color:var(--sv-red); }
.sv-cart-item__unit{ color:var(--sv-muted); font-weight:600; font-size:14px; margin-top:3px; }
.sv-cart-item__right{ display:flex; align-items:center; gap:18px; }
.sv-cart-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--sv-line); border-radius:11px; overflow:hidden; }
.sv-cart-qty a{ width:38px; height:42px; display:grid; place-items:center; color:var(--sv-ink); font-size:18px; transition:var(--sv-t); }
.sv-cart-qty a:hover{ background:var(--sv-bg); color:var(--sv-red); }
.sv-cart-qty span{ width:44px; text-align:center; font-weight:700; }
.sv-cart-item__sub{ font-weight:800; color:var(--sv-red); font-size:18px; min-width:90px; text-align:right; }
.sv-cart-item__remove{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--sv-muted); font-size:20px; transition:var(--sv-t); }
.sv-cart-item__remove:hover{ background:#fff0f0; color:var(--sv-red); }

.sv-summary{
    background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); padding:26px; box-shadow:var(--sv-shadow);
    position:sticky; top:100px;
}
.sv-summary h3{ font-size:19px; font-weight:800; color:var(--sv-ink); margin-bottom:18px; }
.sv-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; color:var(--sv-body); font-weight:600; }
.sv-summary-row.total{ border-top:2px dashed var(--sv-line); margin-top:8px; padding-top:16px; font-size:20px; color:var(--sv-ink); font-weight:800; }
.sv-summary-row.total b{ color:var(--sv-red); }
.sv-summary .sv-btn{ width:100%; margin-top:16px; }
.sv-summary-note{ display:flex; align-items:center; gap:8px; color:var(--sv-muted); font-size:13px; margin-top:14px; justify-content:center; }
.sv-cart-empty{ text-align:center; padding:80px 20px; }
.sv-cart-empty i{ font-size:80px; color:#d7dbe2; }
.sv-cart-empty h3{ font-weight:800; color:var(--sv-ink); margin:16px 0 8px; }
.sv-cart-empty p{ color:var(--sv-muted); margin-bottom:22px; }

/* =========================================================================
   8. MINI CART MODAL (redesign)
   ========================================================================= */
.shoppingCartModal .modal-content{ border:none !important; border-radius:0 !important; box-shadow:-10px 0 60px rgba(0,0,0,.2); }
.shoppingCartModal .modal-body{ padding:24px !important; }
.shoppingCartModal h3:first-of-type{ font-size:19px; font-weight:800; color:var(--sv-ink); border-bottom:1px solid var(--sv-line); padding-bottom:16px; margin-bottom:16px; }
.shoppingCartModal .products-cart{ border:1px solid var(--sv-line-2); border-radius:12px; padding:10px; margin-bottom:10px; transition:var(--sv-t); }
.shoppingCartModal .products-cart:hover{ box-shadow:var(--sv-shadow); }
.shoppingCartModal .products-cart .products-image img{ border-radius:9px; border:1px solid var(--sv-line-2); }
.shoppingCartModal .products-content h3{ font-size:14.5px !important; font-weight:700; border:none !important; padding:0 !important; margin:0 0 4px !important; }
.shoppingCartModal .products-content .price{ color:var(--sv-red); font-weight:700; }
.shoppingCartModal .remove-btn{ color:var(--sv-muted); transition:var(--sv-t); }
.shoppingCartModal .remove-btn:hover{ color:var(--sv-red); }
.shoppingCartModal .products-cart-subtotal{ border-top:1px solid var(--sv-line); margin-top:8px; padding-top:16px; font-weight:800; color:var(--sv-ink); display:flex; justify-content:space-between; }
.shoppingCartModal .products-cart-subtotal .subtotal{ color:var(--sv-red); }
.shoppingCartModal .close{ background:var(--sv-bg) !important; width:38px; height:38px; border-radius:50%; opacity:1; }
.sv-mini-actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.sv-mini-actions .sv-btn{ height:56px; font-size:16px; width:100%; }
.sv-mini-empty{ text-align:center; padding:40px 0; color:var(--sv-muted); }
.sv-mini-empty i{ font-size:60px; color:#d7dbe2; display:block; margin-bottom:10px; }
.sv-mini-continue{ width:100%; background:transparent; border:none; color:var(--sv-muted); font-weight:600; cursor:pointer; padding:8px; font-size:14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:var(--sv-t); }
.sv-mini-continue:hover{ color:var(--sv-red); }
.shoppingCartModal .sv-summary-note{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--sv-muted); font-size:12.5px; margin-top:14px; text-align:center; }

/* =========================================================================
   9. BLOG (list + single)
   ========================================================================= */
.blog-area{ background:var(--sv-bg); }
.sv-blog-card{
    background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); overflow:hidden;
    transition:var(--sv-t); height:100%; display:flex; flex-direction:column; margin-bottom:28px;
}
.sv-blog-card:hover{ box-shadow:var(--sv-shadow-lg); transform:translateY(-6px); }
.sv-blog-card__img{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sv-bg); }
.sv-blog-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sv-blog-card:hover .sv-blog-card__img img{ transform:scale(1.06); }
.sv-blog-card__date{
    position:absolute; left:14px; bottom:14px; z-index:2;
    background:rgba(20,24,34,.85); backdrop-filter:blur(4px); color:#fff; border-radius:10px;
    padding:7px 12px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.sv-blog-card__date i{ color:var(--sv-red-2); }
.sv-blog-card__tag{ position:absolute; right:14px; top:14px; z-index:2; background:var(--sv-grad); color:#fff; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:20px; }
.sv-blog-card__body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.sv-blog-card__body h3{ font-size:18px; font-weight:800; line-height:1.4; margin-bottom:10px; }
.sv-blog-card__body h3 a{ color:var(--sv-ink); transition:var(--sv-t); }
.sv-blog-card__body h3 a:hover{ color:var(--sv-red); }
.sv-blog-card__body p{ color:var(--sv-muted); font-size:14.5px; line-height:1.7; margin-bottom:16px; }
.sv-blog-card__more{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--sv-red); }
.sv-blog-card__more i{ transition:var(--sv-t); }
.sv-blog-card__more:hover{ color:var(--sv-red-dark); }
.sv-blog-card__more:hover i{ transform:translateX(4px); }

.sv-blog-single{ padding:46px 0 30px; }
.sv-blog-single-grid{ display:grid; grid-template-columns:1fr 340px; gap:36px; align-items:start; }
.sv-article{ background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); overflow:hidden; box-shadow:var(--sv-shadow); }
.sv-article__img{ width:100%; max-height:460px; object-fit:cover; }
.sv-article__body{ padding:34px; }
.sv-article__meta{ display:flex; flex-wrap:wrap; gap:16px; color:var(--sv-muted); font-weight:600; font-size:14px; margin-bottom:18px; }
.sv-article__meta span{ display:inline-flex; align-items:center; gap:7px; }
.sv-article__meta i{ color:var(--sv-red); font-size:17px; }
.sv-article__body h1{ font-size:30px; font-weight:800; color:var(--sv-ink); line-height:1.25; margin-bottom:18px; letter-spacing:-.5px; }
.sv-article__body p{ color:var(--sv-body); line-height:1.95; font-size:16px; margin-bottom:16px; }
.sv-article__body img{ max-width:100%; border-radius:12px; }
.sv-article__body h2{ font-size:23px; font-weight:800; color:var(--sv-ink); margin:28px 0 12px; letter-spacing:-.3px; }
.sv-article__body h3{ font-size:19px; font-weight:700; color:var(--sv-ink); margin:22px 0 10px; }
.sv-article__body ul, .sv-article__body ol{ margin:0 0 16px; padding-left:22px; }
.sv-article__body li{ color:var(--sv-body); line-height:1.8; margin-bottom:8px; }
.sv-article__body a{ color:var(--sv-red); font-weight:600; text-decoration:underline; }
.sv-article__body a:hover{ color:var(--sv-red-dark); }
.sv-article__body blockquote{ border-left:4px solid var(--sv-red); background:var(--sv-bg); padding:14px 20px; border-radius:0 12px 12px 0; margin:18px 0; font-style:italic; color:var(--sv-ink); }
.sv-article__body strong, .sv-article__body b{ color:var(--sv-ink); }
.sv-share{ display:flex; align-items:center; gap:10px; margin-top:28px; padding-top:22px; border-top:1px solid var(--sv-line); }
.sv-share span{ font-weight:700; color:var(--sv-ink); }
.sv-share a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#fff; transition:var(--sv-t); }
.sv-share a:hover{ transform:translateY(-3px); }
.sv-share .fb{ background:#1877f2; } .sv-share .wa{ background:var(--wa); } .sv-share .tg{ background:#0088cc; }

.sv-sidebar{ position:sticky; top:100px; display:flex; flex-direction:column; gap:22px; }
.sv-widget{ background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); padding:22px; box-shadow:var(--sv-shadow); }
.sv-widget h4{ font-size:17px; font-weight:800; color:var(--sv-ink); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--sv-line-2); position:relative; }
.sv-widget h4::after{ content:""; position:absolute; left:0; bottom:-2px; width:44px; height:2px; background:var(--sv-red); }
.sv-recent{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--sv-line-2); }
.sv-recent:last-child{ border-bottom:none; }
.sv-recent img{ width:70px; height:60px; border-radius:9px; object-fit:cover; flex:0 0 70px; }
.sv-recent h5{ font-size:14px; font-weight:700; line-height:1.4; margin:0 0 5px; }
.sv-recent h5 a{ color:var(--sv-ink); } .sv-recent h5 a:hover{ color:var(--sv-red); }
.sv-recent time{ font-size:12px; color:var(--sv-muted); }

/* =========================================================================
   10. TESTIMONIALS (renew)
   ========================================================================= */
.feedback-area{ background:var(--sv-bg) !important; }
.sv-feedback{
    background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-radius); padding:34px 30px 28px;
    position:relative; margin:26px 8px; box-shadow:var(--sv-shadow); transition:var(--sv-t);
}
.sv-feedback:hover{ box-shadow:var(--sv-shadow-lg); transform:translateY(-4px); }
.sv-feedback__quote{ position:absolute; top:20px; right:26px; font-size:64px; line-height:1; color:rgba(192,0,0,.1); font-family:Georgia,serif; }
.sv-feedback__stars{ color:#ffb400; font-size:18px; margin-bottom:14px; letter-spacing:2px; }
.sv-feedback__text{ color:var(--sv-body); font-size:16px; line-height:1.85; margin-bottom:22px; font-style:italic; }
.sv-feedback__person{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--sv-line-2); padding-top:18px; }
.sv-feedback__avatar{ width:54px; height:54px; border-radius:50%; background:var(--sv-grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:20px; flex:0 0 54px; text-transform:uppercase; }
.sv-feedback__name{ font-weight:800; color:var(--sv-ink); font-size:16px; }
.sv-feedback__pos{ color:var(--sv-red); font-size:13.5px; font-weight:600; }

/* =========================================================================
   11. FOOTER (redesign)
   ========================================================================= */
.footer-area{ background:var(--sv-ink) !important; position:relative; overflow:hidden; padding-top:64px !important; }
.footer-area::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--sv-grad); }
.footer-area .single-footer-widget h3{ color:#fff !important; font-weight:800 !important; margin-bottom:22px !important; position:relative; padding-bottom:12px; }
.footer-area .single-footer-widget h3::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--sv-red-2); border-radius:2px; }
.footer-area .single-footer-widget > .logo img{ max-height:60px; margin-bottom:18px; }
.footer-area p, .footer-area .footer-contact-info li,
.footer-area .footer-contact-info li a, .footer-area .link-list li a{ color:#aeb4bf !important; }
.footer-area .footer-contact-info li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; }
.footer-area .footer-contact-info li span{ color:#fff !important; font-weight:600; }
.sv-foot-ico{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--sv-red-2) !important; display:grid; place-items:center; font-size:19px; flex:0 0 38px; }
.footer-area .link-list li{ margin-bottom:12px; }
.footer-area .link-list li a{ transition:var(--sv-t); display:inline-flex; align-items:center; gap:8px; }
.footer-area .link-list li a::before{ content:"\203A"; font-size:17px; line-height:1; color:var(--sv-red-2); font-weight:700; transition:var(--sv-t); }
.footer-area .link-list li a:hover{ color:#fff !important; padding-left:5px; }
.footer-area .social li a{ background:rgba(255,255,255,.07); color:#fff !important; width:40px; height:40px; border-radius:10px; line-height:40px; text-align:center; display:inline-block; transition:var(--sv-t); }
.footer-area .social li a:hover{ background:var(--sv-red); transform:translateY(-3px); }
.footer-area .newsletter-form{ position:relative; }
.footer-area .newsletter-form .input-newsletter{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important; color:#fff !important; border-radius:12px !important; height:54px; padding:0 16px; }
.footer-area .newsletter-form .input-newsletter::placeholder{ color:#8b929e; }
.footer-area .newsletter-form .default-btn{ margin-top:12px; width:100%; border-radius:12px !important; background:var(--sv-grad) !important; }
.sv-foot-badges{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.sv-foot-badges span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#aeb4bf; background:rgba(255,255,255,.05); padding:6px 11px; border-radius:8px; }
.sv-foot-badges i{ color:#12b76a; font-size:15px; }
.footer-bottom-area{ border-top:1px solid rgba(255,255,255,.08); margin-top:40px; }
.footer-bottom-area p, .footer-bottom-area a{ color:#8b929e !important; }
.footer-bottom-area a:hover{ color:#fff !important; }

/* =========================================================================
   12. FACILITY BOXES
   ========================================================================= */
.single-facility-box{ background:#fff; border:1px solid var(--sv-line) !important; border-radius:var(--sv-radius); padding:26px 22px !important; transition:var(--sv-t); text-align:center !important; margin-bottom:24px; }
.single-facility-box:hover{ box-shadow:var(--sv-shadow-md); transform:translateY(-4px); border-color:transparent !important; }
.single-facility-box .icon{ position:static !important; width:64px; height:64px; margin:0 auto 16px !important; border-radius:16px; background:rgba(192,0,0,.08); color:var(--sv-red) !important; display:grid; place-items:center; font-size:30px !important; }
.single-facility-box h3{ font-size:17px !important; font-weight:800; margin-bottom:6px !important; color:var(--sv-ink); }
.single-facility-box p{ color:var(--sv-muted); font-size:14px; margin:0; }

/* =========================================================================
   13. WHATSAPP FLOAT + GO TOP
   ========================================================================= */
.float.hb-anime{ box-shadow:0 10px 30px rgba(37,211,102,.4) !important; }
.go-top{ background:var(--sv-grad) !important; }

/* =========================================================================
   14. PAGINATION
   ========================================================================= */
.pagination-area{ margin-top:20px; }
.pagination-area .page-numbers{
    width:46px; height:46px; line-height:46px; border-radius:12px !important; font-weight:700;
    border:1.5px solid var(--sv-line) !important; color:var(--sv-ink) !important; transition:var(--sv-t);
    display:inline-flex; align-items:center; justify-content:center;
}
.pagination-area .page-numbers:hover,
.pagination-area .page-numbers.current, .pagination-area span.current{
    background:var(--sv-grad) !important; color:#fff !important; border-color:transparent !important;
}

/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */
@media (max-width:1199px){
    .sv-products-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:991px){
    .sv-filterbar{ position:static; }
    .sv-cart-grid{ grid-template-columns:1fr; }
    .sv-summary{ position:static; }
    .sv-blog-single-grid{ grid-template-columns:1fr; }
    .sv-sidebar{ position:static; }
    .sv-pd{ padding-left:0; margin-top:26px; }
}
@media (max-width:767px){
    .sv-products-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .sv-shop-head h1{ font-size:24px; }
    .sv-card__body{ padding:12px; gap:8px; }
    .sv-card__title{ font-size:14px; min-height:40px; }
    .sv-pd h1{ font-size:23px; }
    .sv-pd__price .new{ font-size:26px; }
    .sv-products-grid.is-list .sv-card{ flex-direction:column; }
    .sv-products-grid.is-list .sv-card__media{ width:100%; flex:auto; aspect-ratio:1/1; }
    .megamenu-container{ margin-bottom:24px; }
    .sv-filterbar .grow{ flex:1 1 100%; }
}
@media (max-width:575px){
    .sv-products-grid{ grid-template-columns:repeat(2,1fr); }
    .sv-cart-item{ grid-template-columns:72px 1fr; }
    .sv-cart-item__right{ grid-column:1/-1; justify-content:space-between; }
    .sv-feedback__text{ font-size:15px; }
}

/* =========================================================================
   16. INFO / RULES PAGES (Ödəniş, Texniki dəstək)
   ========================================================================= */
html{ scroll-behavior:smooth; }
.sv-rules-grid{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.sv-rules-nav{ position:sticky; top:100px; }
.sv-rules-links{ list-style:none; padding:0; margin:0; }
.sv-rules-links li{ margin-bottom:6px; }
.sv-rules-links a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px; color:var(--sv-body); font-weight:600; transition:var(--sv-t); }
.sv-rules-links a i{ color:var(--sv-red); font-size:19px; }
.sv-rules-links a:hover{ background:var(--sv-bg); color:var(--sv-red); padding-left:18px; }
.sv-article__body h2[id]{ scroll-margin-top:100px; }

/* =========================================================================
   17. PERFORMANS — off-screen məhsul kartları render edilmir
   ========================================================================= */
.sv-products-grid .sv-card{ content-visibility:auto; contain-intrinsic-size:300px 380px; }

/* =========================================================================
   18. MOBİL — maksimum rahatlıq
   ========================================================================= */
@media (max-width:991px){
    .sv-rules-grid{ grid-template-columns:1fr; }
    .sv-rules-nav{ position:static; margin-bottom:8px; }
    .sv-rules-links{ display:flex; flex-wrap:wrap; gap:8px; }
    .sv-rules-links li{ margin:0; }
    .sv-rules-links a{ border:1.5px solid var(--sv-line); }
}
@media (max-width:767px){
    .navbar-area .drodo-responsive-nav .logo img{ max-height:48px; }
    /* ana səhifə kateqoriya paneli mobildə gizlədilir (nav-da mövcuddur) */
    .main-banner-with-categories .megamenu-container{ display:none; }
    .sv-iconbtn{ height:44px; }
    .sv-filterbar{ padding:12px; gap:10px; }
    .sv-filterbar .sv-price-row{ flex:1 1 100%; }
    .sv-filterbar .sv-price-row input{ flex:1; width:auto; }
    .sv-filterbar .sv-sort{ flex:1 1 100%; }
    .sv-filterbar .sv-sort select{ width:100%; }
    .sv-view-toggle{ display:none; }
    .section-title h2{ font-size:22px; }
    .page-title-area{ padding:36px 0 !important; }
    .page-title-content h1, .page-title-content h2{ font-size:24px; }
    .sv-card:hover, .sv-blog-card:hover, .single-facility-box:hover{ transform:none; }
    .sv-article__body{ padding:22px 18px; }
    .sv-pd__buy{ gap:10px; }
    .sv-btn{ height:52px; font-size:15px; }
}
/* toxunuş cihazlarında hover-lift söndürülür (jank azalır) */
@media (hover:none){
    .sv-card:hover, .sv-blog-card:hover{ transform:none; box-shadow:var(--sv-shadow); }
    .sv-iconbtn:hover, .sv-btn:hover{ transform:none; }
}

/* =========================================================================
   19. GERİ ZƏNG (call-back) düyməsi + modal
   ========================================================================= */
.sv-callback-fab{
    position:fixed; left:24px; bottom:26px; z-index:998;
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    background:var(--sv-grad); color:#fff; font-size:26px;
    display:grid; place-items:center;
    box-shadow:0 10px 30px rgba(192,0,0,.4);
    animation:svRing 2.6s infinite;
}
@keyframes svRing{ 0%,25%,100%{ transform:rotate(0) } 5%,15%{ transform:rotate(16deg) } 10%,20%{ transform:rotate(-16deg) } }
.sv-callback-fab:hover{ transform:scale(1.08); animation-play-state:paused; }
.sv-callback-fab[data-tip]::before{
    content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
    background:var(--sv-ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
    padding:6px 11px; border-radius:8px; opacity:0; pointer-events:none; transition:var(--sv-t);
}
.sv-callback-fab:hover[data-tip]::before{ opacity:1; }

.sv-callback-modal{ border:none !important; border-radius:20px !important; overflow:hidden; }
.sv-callback-modal .modal-body{ padding:32px !important; }
.sv-callback-modal .close{ position:absolute; top:14px; right:14px; background:var(--sv-bg) !important; width:36px; height:36px; border-radius:50%; opacity:1; z-index:2; }
.sv-callback-head{ text-align:center; margin-bottom:22px; }
.sv-callback-icon{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--sv-grad); color:#fff; display:grid; place-items:center; font-size:30px; box-shadow:0 8px 20px rgba(192,0,0,.3); }
.sv-callback-head h3{ font-size:21px; font-weight:800; color:var(--sv-ink); margin-bottom:6px; }
.sv-callback-head p{ color:var(--sv-muted); font-size:14.5px; margin:0; }
.sv-input{ width:100%; height:52px; border:1.5px solid var(--sv-line); border-radius:12px; padding:0 16px; font-size:15px; outline:none; margin-bottom:12px; transition:var(--sv-t); background:var(--sv-bg); }
.sv-input:focus{ border-color:var(--sv-red); background:#fff; box-shadow:0 0 0 4px rgba(192,0,0,.08); }
@media (max-width:575px){
    .sv-callback-fab{ left:16px; bottom:20px; width:52px; height:52px; font-size:24px; }
}