/* source: veepee-premium-v8.css */ :root{ --vp-primary:#0b6b4d;--vp-primary-2:#11885f;--vp-blue:#0b5ed7;--vp-dark:#111827;--vp-muted:#64748b;--vp-line:#e5e7eb;--vp-soft:#f5faf7;--vp-bg:#f8fafc;--vp-white:#fff;--vp-danger:#dc2626;--vp-shadow:0 8px 22px rgba(15,23,42,.08);--vp-shadow-sm:0 4px 12px rgba(15,23,42,.055);--vp-radius:6px;--vp-radius-sm:4px } *{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#fff;color:var(--vp-dark);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.vp-site-body{overflow-x:hidden}.vp-main-shell{width:100%;padding:0!important}.vp-container{width:min(100% - 24px,1480px);margin-inline:auto}.vp-container-wide{width:min(100% - 24px,var(--vp-max-width,1760px))}a{text-decoration:none;color:inherit}.vp-eyebrow{display:inline-flex;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:var(--vp-primary);margin-bottom:5px}.vp-soft-note{color:var(--vp-muted);font-size:13px}.vp-btn-primary,.vp-view-all{display:inline-flex;align-items:center;justify-content:center;background:var(--vp-dark);color:#fff;border:1px solid var(--vp-dark);height:38px;padding:0 14px;border-radius:var(--vp-radius-sm);font-size:13px;font-weight:900}.vp-btn-primary:hover,.vp-view-all:hover{background:#000;color:#fff}.container{max-width:var(--vp-max-width,1760px)!important}.rounded,.rounded-lg{border-radius:var(--vp-radius)!important} /* keep original header features, make it larger and premium */ .vp-original-header{background:#fff;border-bottom:1px solid var(--vp-line);box-shadow:0 2px 14px rgba(15,23,42,.04);position:sticky;top:0;z-index:1030}.vp-original-header .bg-gray-100{background:#0f2a20!important;color:#d9fff0}.vp-original-header .bg-gray-100 span{font-size:13px}.vp-original-header .pt-5{padding-top:16px!important;padding-bottom:14px}.vp-original-header .logo img{max-width:210px;height:auto}.vp-original-header input[type=search]{height:48px!important;border-radius:var(--vp-radius)!important;border-color:#dbe3ea!important;background:#f8fafc!important}.vp-original-header .navbar{border-top:1px solid var(--vp-line);background:#fff}.vp-original-header .nav-link{font-weight:800;color:#334155;padding:10px 12px!important}.vp-original-header .nav-link:hover{color:var(--vp-primary)}.vp-original-header .dropdown .btn,.vp-original-header .bg-green-600{background:var(--vp-primary)!important;border-color:var(--vp-primary)!important;border-radius:var(--vp-radius-sm)!important}.vp-original-header .dropdown-menu{border:1px solid var(--vp-line);box-shadow:var(--vp-shadow);border-radius:var(--vp-radius);padding:8px}.vp-original-header .dropdown-item{border-radius:var(--vp-radius-sm);padding:10px 12px}.vp-original-header .dropdown-item:hover{background:var(--vp-soft);color:var(--vp-primary)}#cartCount{background:var(--vp-danger)!important} /* premium cart drawer, compatible with current cart.js markup */ .vp-cart-drawer{width:min(500px,100%)!important;border-left:1px solid var(--vp-line);box-shadow:-16px 0 45px rgba(15,23,42,.16)}.vp-cart-drawer .offcanvas-header{padding:18px 20px;border-bottom:1px solid var(--vp-line);background:linear-gradient(180deg,#fff,#f8fafc)}.vp-cart-drawer #offcanvasRightLabel{font-size:22px;font-weight:950}.vp-cart-drawer .offcanvas-body{padding:18px!important;background:#fff}.vp-cart-drawer #cart-notice{border-radius:var(--vp-radius);background:#fef3c7!important;color:#92400e!important}.vp-cart-drawer #cart-items-list{padding:0;margin:0}.vp-cart-drawer #cart-items-list li{list-style:none;border-top:1px solid var(--vp-line)!important;padding:14px 0!important}.vp-cart-drawer #cart-items-list img{width:72px!important;height:72px!important;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm)!important;background:#f8fafc;object-fit:contain!important}.vp-cart-drawer h6{font-size:14px;font-weight:900;line-height:1.35;color:var(--vp-dark)}.vp-cart-drawer .input-spinner{border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm)!important;overflow:hidden;background:#fff}.vp-cart-drawer .button-minus,.vp-cart-drawer .button-plus{background:#f8fafc!important;color:var(--vp-dark);font-weight:900}.vp-cart-drawer .quantity-field{font-weight:900}.vp-cart-drawer #cart-summary{border-top:1px solid var(--vp-line);padding-top:14px;margin-top:16px}.vp-cart-drawer #cart-subtotal{font-size:22px;color:var(--vp-blue)}.vp-cart-drawer .btn{border-radius:var(--vp-radius-sm)!important;font-weight:900;min-height:44px}.vp-cart-drawer a[href*="checkout"],.vp-cart-drawer .bg-gray-800{background:var(--vp-dark)!important;border-color:var(--vp-dark)!important;color:#fff!important}.vp-cart-drawer .bg-green-600{background:var(--vp-primary)!important;border-color:var(--vp-primary)!important} /* home */ .vp-homepage{background:linear-gradient(180deg,#fff 0,#fbfdfc 45%,#fff 100%)}.vp-hero-section{padding:24px 0 8px}.vp-home-layout{display:grid;grid-template-columns:270px minmax(0,1fr) 350px;gap:18px}.vp-department-panel,.vp-main-hero,.vp-side-banner,.vp-trust-row,.vp-tax-card,.vp-product-card,.vp-wide-banner,.vp-deal-banner,.vp-panel,.vp-product-detail,.vp-collection-hero{border:1px solid var(--vp-line);background:#fff;border-radius:var(--vp-radius);box-shadow:var(--vp-shadow-sm)}.vp-department-panel{padding:12px}.vp-panel-title{font-weight:950;font-size:15px;margin:4px 8px 10px}.vp-department-list{display:grid;gap:2px}.vp-department-list a{display:flex;align-items:center;justify-content:space-between;padding:10px 9px;border-radius:var(--vp-radius-sm);font-size:14px;color:#334155}.vp-department-list a:hover{background:var(--vp-soft);color:var(--vp-primary)}.vp-department-list small{color:var(--vp-muted)}.vp-main-hero{overflow:hidden;min-height:420px}.vp-hero-carousel{position:relative;height:100%;min-height:420px;overflow:hidden;background:linear-gradient(135deg,#edf8f2,#fff)}.vp-hero-slide{position:absolute;inset:0;display:none;background-size:cover;background-position:center}.vp-hero-slide.is-active,.vp-hero-slide:first-child{display:block}.vp-hero-slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.8) 42%,rgba(255,255,255,.18))}.vp-hero-copy{position:absolute;left:46px;top:50%;transform:translateY(-50%);z-index:2;width:min(520px,74%)}.vp-hero-copy span{display:inline-flex;padding:6px 10px;background:#dff7eb;color:var(--vp-primary);border-radius:var(--vp-radius-sm);font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.vp-hero-copy h1{font-size:44px;line-height:1.06;font-weight:950;letter-spacing:-.045em;margin:14px 0 12px}.vp-hero-copy p{font-size:16px;line-height:1.65;color:#475569;margin:0 0 20px}.vp-hero-copy strong{display:inline-flex;background:var(--vp-dark);color:#fff;padding:11px 18px;border-radius:var(--vp-radius-sm);font-weight:950}.vp-hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.vp-hero-dots button{width:8px;height:8px;border-radius:999px;border:0;background:#cbd5e1}.vp-hero-dots button.is-active{width:24px;background:var(--vp-primary)}.vp-hero-banners{display:grid;gap:18px}.vp-side-banner{min-height:201px;padding:22px;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.vp-side-banner:before,.vp-wide-banner:before,.vp-deal-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.55),rgba(255,255,255,.1))}.vp-side-banner>*{position:relative}.vp-side-banner span,.vp-wide-banner span,.vp-deal-banner span{color:var(--vp-primary);font-weight:950;font-size:13px}.vp-side-banner strong{font-size:25px;line-height:1.15;max-width:220px;margin:8px 0}.vp-side-banner small,.vp-wide-banner em,.vp-deal-banner em{font-style:normal;background:#fff;border:1px solid var(--vp-line);padding:7px 12px;border-radius:var(--vp-radius-sm);font-weight:950;width:max-content}.vp-trust-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}.vp-trust-row div{padding:16px 20px;border-right:1px solid var(--vp-line)}.vp-trust-row div:last-child{border-right:0}.vp-trust-row strong{display:block;font-size:15px}.vp-trust-row span{display:block;color:var(--vp-muted);font-size:13px;margin-top:3px}.vp-section{margin:38px 0}.vp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px}.vp-section-head h2{font-size:29px;line-height:1.15;font-weight:950;letter-spacing:-.035em;margin:0}.vp-section-head p{color:var(--vp-muted);margin:5px 0 0;max-width:680px}.vp-section-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.vp-arrow{width:36px;height:36px;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);background:#fff;box-shadow:var(--vp-shadow-sm);font-size:24px;line-height:1;cursor:pointer}.vp-arrow:hover{border-color:var(--vp-primary);color:var(--vp-primary)}.vp-carousel{overflow:hidden}.vp-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 2px 8px}.vp-track::-webkit-scrollbar{display:none}.vp-slide-product{flex:0 0 calc((100% - 56px)/5);min-width:0;scroll-snap-align:start}.vp-slide-tax{flex:0 0 164px;scroll-snap-align:start}.vp-tax-card{min-height:150px;padding:15px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:.16s ease}.vp-tax-card:hover{border-color:var(--vp-primary);transform:translateY(-2px)}.vp-tax-icon{width:72px;height:72px;border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#f8fafc;display:grid;place-items:center}.vp-tax-icon img{max-width:62px;max-height:62px;object-fit:contain}.vp-tax-icon span{font-size:30px;font-weight:950;color:var(--vp-primary)}.vp-tax-card strong{font-size:14px;line-height:1.25}.vp-tax-card small{font-size:12px;color:var(--vp-muted)}.vp-banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vp-wide-banner{min-height:190px;background-size:cover;background-position:center;position:relative;overflow:hidden;padding:28px;display:flex;flex-direction:column;justify-content:center}.vp-wide-banner>*{position:relative}.vp-wide-banner strong{font-size:28px;max-width:480px;line-height:1.1;margin:8px 0 13px}.vp-deal-layout{display:grid;grid-template-columns:350px 1fr;gap:18px}.vp-deal-banner{min-height:100%;background-size:cover;background-position:center;position:relative;overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:flex-start}.vp-deal-banner>*{position:relative}.vp-deal-banner strong{font-size:31px;line-height:1.1;max-width:270px;margin:12px 0 16px}.vp-deal-products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.vp-deal-countdown{margin-top:12px;padding:10px 14px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:var(--vp-radius-sm);font-weight:900}.vp-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.vp-info-grid div{border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;padding:20px;box-shadow:var(--vp-shadow-sm)}.vp-info-grid strong{display:block;font-size:16px;margin-bottom:6px}.vp-info-grid span{color:var(--vp-muted);font-size:14px;line-height:1.6} /* product cards */ .vp-product-card{overflow:hidden;display:flex;flex-direction:column;min-height:100%;transition:.16s ease}.vp-product-card:hover{border-color:#cbd5e1;box-shadow:var(--vp-shadow)}.vp-product-media{position:relative;background:#fff;aspect-ratio:1/1;display:grid;place-items:center;border-bottom:1px solid #f1f5f9}.vp-product-media img{width:100%;height:100%;object-fit:contain;padding:18px;transition:.2s ease}.vp-product-card:hover .vp-product-media img{transform:scale(1.035)}.vp-sale-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--vp-danger);color:#fff;border-radius:var(--vp-radius-sm);font-size:11px;font-weight:950;padding:5px 8px}.vp-product-body{padding:13px;display:flex;flex-direction:column;gap:7px;flex:1}.vp-product-cat{font-size:12px;color:var(--vp-primary);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vp-product-title{font-size:14px;font-weight:850;line-height:1.38;min-height:39px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vp-product-title a:hover{color:var(--vp-primary)}.vp-product-trust{font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vp-product-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.vp-price-wrap strong{display:block;font-size:17px;color:var(--vp-blue);letter-spacing:-.02em}.vp-price-wrap del{font-size:12px;color:#94a3b8}.vp-cart-btn{border:0;background:var(--vp-primary);color:#fff;border-radius:var(--vp-radius-sm);font-size:12px;font-weight:950;min-width:62px;height:36px;cursor:pointer}.vp-cart-btn:hover{background:#07593f} /* collection pages */ .vp-collection-page{padding:26px 0 42px}.vp-collection-hero{padding:24px;display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px;background:linear-gradient(135deg,#fff,#f7fbf8)}.vp-collection-hero h1{font-size:36px;font-weight:950;letter-spacing:-.04em;margin:0}.vp-collection-hero p{color:var(--vp-muted);max-width:820px;margin:6px 0}.vp-collection-search{display:flex;min-width:min(100%,460px);border:1px solid var(--vp-line);border-radius:var(--vp-radius);overflow:hidden;background:#fff}.vp-collection-search input{height:44px;border:0;outline:0;flex:1;padding:0 12px}.vp-collection-search button{border:0;background:var(--vp-primary);color:#fff;font-weight:950;padding:0 16px}.vp-product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.vp-pagination{margin-top:24px;display:flex;justify-content:center}.vp-empty-state{grid-column:1/-1;text-align:center;border:1px solid var(--vp-line);border-radius:var(--vp-radius);padding:50px;background:#fff}.vp-empty-state h3{font-size:22px;font-weight:950} /* product detail */ .vp-product-page{padding:24px 0 46px;background:#fff}.vp-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin-bottom:14px;color:#64748b}.vp-breadcrumbs a{font-weight:900;color:#334155}.vp-breadcrumbs a:hover{color:var(--vp-primary)}.vp-breadcrumbs strong{font-weight:800;color:#64748b}.vp-product-detail{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,.92fr);gap:24px;padding:20px}.vp-main-image{border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}.vp-main-image img{width:100%;height:100%;object-fit:contain;padding:24px}.vp-thumb-strip{display:flex;gap:9px;overflow-x:auto;margin-top:12px;padding-bottom:6px}.vp-thumb{flex:0 0 78px;height:78px;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);background:#fff;cursor:pointer}.vp-thumb.is-active{border-color:var(--vp-primary);box-shadow:0 0 0 3px rgba(11,107,77,.1)}.vp-thumb img{width:100%;height:100%;object-fit:contain;padding:7px}.vp-product-summary h1{font-size:34px;font-weight:950;letter-spacing:-.04em;line-height:1.15;margin:10px 0 10px}.vp-meta-pills{display:flex;flex-wrap:wrap;gap:8px}.vp-meta-pills a,.vp-meta-pills span{display:inline-flex;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:var(--vp-radius-sm);padding:6px 9px;font-size:12px;font-weight:900}.vp-product-rating-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#64748b;font-size:14px}.vp-stars{letter-spacing:1px;color:#f59e0b}.vp-stock{font-weight:950}.vp-stock.is-in{color:#16803d}.vp-stock.is-out{color:var(--vp-danger)}.vp-price-box{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0;padding:15px;background:#f8fafc;border:1px solid var(--vp-line);border-radius:var(--vp-radius)}.vp-price-box strong{font-size:33px;color:var(--vp-blue);font-weight:950;letter-spacing:-.04em}.vp-price-box del{color:#94a3b8;font-weight:800}.vp-price-box span{background:#fee2e2;color:#b91c1c;padding:4px 8px;border-radius:var(--vp-radius-sm);font-size:12px;font-weight:950}.vp-short-desc{color:#334155;line-height:1.75}.vp-variant-area{margin-top:16px}.vp-variant-area h3{font-size:15px;font-weight:950;margin-bottom:9px}.vp-variant-grid{display:flex;flex-wrap:wrap;gap:9px}.vp-variant-option{min-width:135px;text-align:left;border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;padding:10px 12px;cursor:pointer}.vp-variant-option strong{display:block;font-size:14px}.vp-variant-option span{display:block;color:var(--vp-blue);font-weight:950}.vp-variant-option small{display:block;color:#64748b;font-size:12px}.vp-variant-option.is-active{border-color:var(--vp-primary);background:var(--vp-soft);box-shadow:0 0 0 3px rgba(11,107,77,.08)}.vp-action-box{display:grid;grid-template-columns:112px 1fr 1fr;gap:10px;margin:18px 0}.vp-qty-control{display:flex;height:46px;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);overflow:hidden}.vp-qty-control button{width:34px;border:0;background:#f8fafc;font-size:18px;font-weight:950}.vp-qty-control input{width:44px;border:0;text-align:center;font-weight:950}.vp-add-main,.vp-buy-main{display:flex;align-items:center;justify-content:center;border-radius:var(--vp-radius-sm);font-weight:950;min-height:46px;border:1px solid var(--vp-primary);cursor:pointer}.vp-add-main{background:var(--vp-primary);color:#fff}.vp-buy-main{background:var(--vp-dark);border-color:var(--vp-dark);color:#fff!important}.vp-buy-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.vp-buy-promises div{border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);padding:11px;background:#fff}.vp-buy-promises strong{display:block;font-size:13px}.vp-buy-promises span{display:block;font-size:12px;color:#64748b}.vp-mini-specs{border:1px solid var(--vp-line);border-radius:var(--vp-radius);padding:12px;background:#fff}.vp-mini-specs summary{cursor:pointer;font-weight:950}.vp-mini-specs table{width:100%;margin-top:10px;font-size:14px}.vp-mini-specs td{border-top:1px solid #f1f5f9;padding:8px 0}.vp-mini-specs td:first-child{color:#64748b;width:35%}.vp-mini-specs a{color:var(--vp-primary);font-weight:900}.vp-product-panels{display:grid;gap:16px;margin-top:20px}.vp-panel{padding:22px}.vp-panel h2{font-size:23px;font-weight:950;letter-spacing:-.025em;margin:0 0 14px}.vp-rich-text{color:#334155;line-height:1.8}.vp-rich-text :where(p,ul,ol){margin-bottom:14px}.vp-rich-text img{max-width:100%;height:auto}.vp-spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.vp-spec-grid div{border:1px solid #eef2f7;background:#f8fafc;border-radius:var(--vp-radius-sm);padding:12px}.vp-spec-grid span{display:block;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.vp-spec-grid strong{display:block;color:#111827;margin-top:4px;font-size:14px;line-height:1.5}.vp-tag-list{display:flex;flex-wrap:wrap;gap:8px}.vp-tag-list a{padding:8px 12px;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);background:#fff;font-size:13px;font-weight:900}.vp-tag-list a:hover{background:var(--vp-primary);color:#fff}.vp-faq-list{display:grid;gap:9px}.vp-faq-list details{border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);padding:12px;background:#fff}.vp-faq-list summary{cursor:pointer;font-weight:950}.vp-faq-list p{margin:8px 0 0;color:#475569;line-height:1.65}.vp-panel .tab-pane{display:block!important;opacity:1!important}.vp-panel .nav{display:none!important}.vp-panel #reviews-tab-pane{display:block!important}.vp-related-products{margin-bottom:38px}.img-lightbox{display:none} @media (max-width:1280px){.vp-home-layout{grid-template-columns:230px 1fr}.vp-hero-banners{display:none}.vp-slide-product{flex-basis:calc((100% - 42px)/4)}.vp-product-grid{grid-template-columns:repeat(4,1fr)}.vp-deal-layout{grid-template-columns:300px 1fr}.vp-deal-products{grid-template-columns:repeat(3,1fr)}} @media (max-width:991px){.vp-container-wide{width:min(100% - 18px,1640px)}.vp-original-header{position:sticky}.vp-original-header .bg-gray-100,.vp-original-header nav.navbar{display:none}.vp-original-header .pt-5{padding:8px 0!important}.vp-original-header .logo img{max-width:145px}.vp-original-header .flex.gap-7{gap:14px!important}.vp-home-layout{grid-template-columns:1fr}.vp-department-panel{display:none}.vp-main-hero,.vp-hero-carousel{min-height:318px}.vp-hero-copy{left:22px;width:80%}.vp-hero-copy h1{font-size:30px}.vp-trust-row{grid-template-columns:repeat(2,1fr)}.vp-trust-row div{border-right:0;border-bottom:1px solid var(--vp-line);padding:14px}.vp-trust-row div:nth-child(n+3){border-bottom:0}.vp-section-head{align-items:flex-start}.vp-section-head h2{font-size:25px}.vp-slide-product{flex-basis:calc((100% - 12px)/2)}.vp-product-grid{grid-template-columns:repeat(2,1fr);gap:12px}.vp-banner-grid{grid-template-columns:1fr}.vp-deal-layout{grid-template-columns:1fr}.vp-deal-products{grid-template-columns:repeat(2,1fr)}.vp-info-grid{grid-template-columns:repeat(2,1fr)}.vp-collection-hero{display:block;padding:18px}.vp-collection-hero h1{font-size:29px}.vp-collection-search{margin-top:12px;min-width:0}.vp-product-detail{grid-template-columns:1fr;padding:14px}.vp-product-summary h1{font-size:27px}.vp-action-box{grid-template-columns:1fr}.vp-qty-control{width:126px}.vp-buy-promises{grid-template-columns:1fr 1fr 1fr}.vp-spec-grid{grid-template-columns:1fr}.vp-cart-drawer{width:min(430px,100%)!important}} @media (max-width:575px){.vp-container-wide{width:min(100% - 14px,1640px)}.vp-main-hero,.vp-hero-carousel{min-height:290px}.vp-hero-slide:before{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.86) 78%,rgba(255,255,255,.55))}.vp-hero-copy{left:16px;width:88%}.vp-hero-copy h1{font-size:25px}.vp-hero-copy p{font-size:14px;line-height:1.5}.vp-section{margin:30px 0}.vp-section-actions .vp-view-all{display:none}.vp-arrow{width:34px;height:34px}.vp-slide-tax{flex-basis:138px}.vp-tax-card{min-height:135px}.vp-product-body{padding:10px}.vp-product-title{font-size:13px;min-height:36px}.vp-price-wrap strong{font-size:15px}.vp-cart-btn{height:34px;min-width:56px;font-size:11px}.vp-product-media img{padding:13px}.vp-trust-row{grid-template-columns:1fr}.vp-trust-row div{border-bottom:1px solid var(--vp-line)!important}.vp-trust-row div:last-child{border-bottom:0!important}.vp-wide-banner{min-height:160px;padding:20px}.vp-wide-banner strong{font-size:22px}.vp-deal-banner{min-height:250px}.vp-info-grid{grid-template-columns:1fr}.vp-product-summary h1{font-size:23px}.vp-price-box strong{font-size:25px}.vp-buy-promises{grid-template-columns:1fr}.vp-panel{padding:16px}.vp-panel h2{font-size:20px}.vp-main-image img{padding:14px}.vp-thumb{flex-basis:68px;height:68px}} /* V3 premium corrections */ .vp-container-wide{width:min(100% - 24px,var(--vp-max-width,1760px));margin-inline:auto}.vp-home-layout{grid-template-columns:285px minmax(0,1fr)!important;align-items:stretch}.vp-hero-banners{display:none!important}.vp-main-hero,.vp-hero-carousel{min-width:0;max-width:100%;min-height:450px}.vp-carousel,.vp-track{max-width:100%;min-width:0}.vp-section .vp-container,.vp-section .vp-container-wide{overflow:hidden}.vp-track{overflow-x:auto;overscroll-behavior-x:contain}.vp-slide-product{min-width:0}.vp-trust-row-icons{overflow:hidden}.vp-trust-row-icons div{display:flex;align-items:center;gap:12px}.vp-trust-row-icons div strong,.vp-trust-row-icons div span:not(.vp-trust-icon){display:block}.vp-trust-icon,.vp-promise-icon{width:38px;height:38px;display:inline-grid;place-items:center;flex:0 0 38px;background:var(--vp-soft);border:1px solid #dcefe6;color:var(--vp-primary);font-weight:950;border-radius:var(--vp-radius-sm);font-size:18px}.vp-buy-promises-icons div{display:flex!important;align-items:flex-start;gap:11px}.vp-buy-promises-icons .vp-promise-icon+strong{margin-top:1px}.vp-btn-ico,.vp-cart-mini-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:7px}.vp-cart-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px}.vp-cart-mini-icon{margin-right:2px}.vp-original-header [data-bs-target="#userModal"],#userModal{display:none!important}.vp-original-header .flex.gap-7{gap:20px!important} /* product gallery and variants */ .vp-product-gallery{min-width:0;max-width:100%;overflow:hidden}.vp-gallery-carousel{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;margin-top:12px;max-width:100%}.vp-gallery-arrow{width:34px;height:70px;border:1px solid var(--vp-line);background:#fff;border-radius:var(--vp-radius-sm);box-shadow:var(--vp-shadow-sm);font-size:24px;font-weight:900;color:#334155}.vp-gallery-arrow:hover{border-color:var(--vp-primary);color:var(--vp-primary)}.vp-gallery-carousel .vp-thumb-strip{margin-top:0;min-width:0;max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;display:flex;gap:9px;padding:3px 2px 6px}.vp-gallery-carousel .vp-thumb{scroll-snap-align:start;flex:0 0 80px}.vp-variant-grid{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;max-width:100%;padding:2px 2px 10px;scroll-snap-type:x mandatory}.vp-variant-card{position:relative;flex:0 0 190px;min-height:132px;border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;box-shadow:var(--vp-shadow-sm);scroll-snap-align:start;transition:.15s ease}.vp-variant-card.is-active{border-color:var(--vp-primary);background:var(--vp-soft);box-shadow:0 0 0 3px rgba(11,107,77,.08)}.vp-variant-select{width:100%;height:100%;min-height:132px;text-align:left;border:0;background:transparent;padding:13px 42px 12px 13px;cursor:pointer}.vp-variant-select strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.25;color:#111827;min-height:35px}.vp-v-price{display:block;color:var(--vp-blue);font-size:18px;font-weight:950;margin-top:9px}.vp-variant-select del{display:block;color:#94a3b8;font-size:12px;font-weight:800}.vp-variant-select em{display:block;color:#94a3b8;font-size:12px;font-style:normal}.vp-variant-select small{display:block;color:#64748b;font-size:12px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vp-variant-info{position:absolute;top:9px;right:9px;width:26px;height:26px;border:1px solid #cbd5e1;border-radius:50%;background:#f8fafc;color:#0f172a;font-weight:950;line-height:1;cursor:pointer}.vp-variant-info:hover{border-color:var(--vp-primary);color:var(--vp-primary);background:#fff}.vp-variant-modal{display:none;position:fixed;inset:0;z-index:999999;background:rgba(15,23,42,.55);padding:16px;align-items:center;justify-content:center}.vp-variant-modal.is-open{display:flex}.vp-variant-modal-card{width:min(440px,100%);background:#fff;border-radius:var(--vp-radius);border:1px solid var(--vp-line);box-shadow:0 25px 70px rgba(15,23,42,.25);padding:22px;position:relative}.vp-variant-modal-card h3{font-size:22px;font-weight:950;margin:0 32px 10px 0}.vp-variant-modal-card p{color:#334155;line-height:1.7;margin:14px 0 0}.vp-variant-modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:1px solid var(--vp-line);background:#fff;border-radius:var(--vp-radius-sm);font-size:24px;line-height:1}.vp-variant-modal-meta{display:flex;flex-wrap:wrap;gap:8px}.vp-variant-modal-meta span{background:#f8fafc;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);padding:7px 10px;font-size:13px;font-weight:900;color:#334155} /* premium cart + mobile bottom nav */ .vp-cart-drawer{width:min(540px,100%)!important}.vp-cart-drawer .offcanvas-header{background:linear-gradient(135deg,var(--vp-dark),#1e293b);color:#fff}.vp-cart-drawer .btn-close{filter:invert(1)}.vp-mobile-bottom-nav{display:none}.vp-mobile-search-panel{display:none}.whatsapp-float-btn{display:none!important}.vp-mobile-search-panel.is-open{display:flex;position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:999998;align-items:flex-end;padding:14px}.vp-mobile-search-card{width:100%;background:#fff;border-radius:10px 10px 0 0;padding:18px;border:1px solid var(--vp-line);box-shadow:0 -20px 60px rgba(15,23,42,.2)}.vp-mobile-search-card h3{font-size:20px;font-weight:950;margin:0 44px 14px 0}.vp-mobile-search-card form{display:flex;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);overflow:hidden}.vp-mobile-search-card input{height:46px;border:0;flex:1;padding:0 12px;outline:0}.vp-mobile-search-card button[type=submit]{border:0;background:var(--vp-primary);color:#fff;font-weight:950;padding:0 15px}.vp-mobile-search-close{position:absolute;right:22px;top:22px;width:34px;height:34px;border:1px solid var(--vp-line);background:#fff;border-radius:var(--vp-radius-sm);font-size:24px;line-height:1} /* admin/theme friendliness on front */ .vp-btn-primary,.vp-view-all,.vp-buy-main{border-radius:var(--vp-radius-sm)!important}.vp-department-panel,.vp-main-hero,.vp-side-banner,.vp-trust-row,.vp-tax-card,.vp-product-card,.vp-wide-banner,.vp-deal-banner,.vp-panel,.vp-product-detail,.vp-collection-hero{border-radius:var(--vp-radius)!important}.vp-product-card{border-radius:var(--vp-radius)!important}.vp-product-media{border-radius:var(--vp-radius-sm) var(--vp-radius-sm) 0 0!important} @media (max-width:1280px){.vp-home-layout{grid-template-columns:245px minmax(0,1fr)!important}.vp-main-hero,.vp-hero-carousel{min-height:405px}} @media (max-width:991px){.vp-home-layout{grid-template-columns:1fr!important}.vp-main-hero,.vp-hero-carousel{min-height:320px}.vp-product-gallery{width:100%}.vp-gallery-carousel{grid-template-columns:28px minmax(0,1fr) 28px}.vp-gallery-arrow{width:28px;height:62px}.vp-variant-card{flex-basis:178px}.vp-buy-promises-icons{grid-template-columns:1fr 1fr 1fr!important}.vp-trust-row-icons div{align-items:flex-start}.vp-mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--vp-line);box-shadow:0 -10px 28px rgba(15,23,42,.11);display:grid;grid-template-columns:repeat(5,1fr);z-index:99990;padding-bottom:env(safe-area-inset-bottom)}.vp-mobile-bottom-nav a,.vp-mobile-bottom-nav button{position:relative;border:0;background:#fff;color:#334155;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900}.vp-mobile-bottom-nav span{font-size:20px;line-height:1}.vp-mobile-bottom-nav small{font-size:10px}.vp-mobile-bottom-nav em{position:absolute;top:6px;right:18px;min-width:17px;height:17px;border-radius:50%;background:var(--vp-danger);color:#fff;font-size:10px;line-height:17px;font-style:normal}body.vp-site-body{padding-bottom:68px}} @media (max-width:575px){.vp-container-wide{width:min(100% - 12px,var(--vp-max-width,1760px))}.vp-home-layout{display:block}.vp-main-hero,.vp-hero-carousel{min-height:310px}.vp-variant-grid{gap:8px}.vp-variant-card{flex-basis:165px;min-height:128px}.vp-variant-select{min-height:128px;padding:12px 38px 10px 11px}.vp-v-price{font-size:16px}.vp-action-box{gap:8px}.vp-buy-promises-icons{grid-template-columns:1fr!important}.vp-gallery-carousel .vp-thumb{flex-basis:66px;height:66px}.vp-gallery-arrow{height:58px}.vp-cart-drawer{width:100%!important}.vp-trust-row-icons{grid-template-columns:1fr!important}.vp-trust-row-icons div{padding:13px 14px!important}.vp-trust-icon,.vp-promise-icon{width:34px;height:34px;flex-basis:34px;font-size:16px}} /* V4 final polish: stronger mobile product page, variants, icons, reviews and admin-controlled theme variables */ body.vp-site-body{font-family:var(--vp-font-family,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)!important}.vp-btn-primary,.vp-view-all,.vp-hero-copy strong,.vp-cart-btn,.vp-add-main,.vp-buy-main,.vp-mobile-search-card button[type=submit]{color:var(--vp-button-text,#fff)!important}.vp-btn-primary:hover,.vp-view-all:hover,.vp-hero-copy strong:hover,.vp-add-main:hover,.vp-buy-main:hover,.vp-cart-btn:hover{background:var(--vp-primary-hover)!important;border-color:var(--vp-primary-hover)!important;color:var(--vp-button-text,#fff)!important}.vp-product-card:hover,.vp-tax-card:hover{border-color:var(--vp-card-hover)!important}.vp-icon,.vp-svg-icon,.vp-mobile-nav-icon,.vp-trust-icon,.vp-promise-icon,.vp-btn-ico{display:inline-flex;align-items:center;justify-content:center}.vp-icon svg,.vp-svg-icon svg,.vp-mobile-nav-icon svg,.vp-trust-icon svg,.vp-promise-icon svg,.vp-btn-ico svg,.vp-variant-info-icon svg{width:1em;height:1em;fill:var(--vp-icon-fill,transparent);stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.vp-icon-img{object-fit:contain}.vp-btn-ico{width:18px;height:18px;margin-right:7px}.vp-add-main,.vp-buy-main{gap:7px}.vp-trust-icon,.vp-promise-icon{background:linear-gradient(180deg,#fff,var(--vp-soft));color:var(--vp-primary);border-color:#dbeee4}.vp-trust-icon svg,.vp-promise-icon svg{width:22px;height:22px}.vp-mobile-nav-icon{font-size:21px;color:inherit}.vp-mobile-nav-icon svg{width:22px;height:22px}.vp-mobile-nav-icon.vp-icon-img{width:22px;height:22px}.vp-mobile-bottom-nav a:hover,.vp-mobile-bottom-nav button:hover{color:var(--vp-primary)!important;background:#f8fafc!important} /* make product gallery never break mobile layout */ .vp-product-detail{max-width:100%;overflow:hidden}.vp-product-gallery,.vp-product-summary{min-width:0}.vp-main-image{height:min(620px,58vw);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}.vp-main-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.vp-gallery-carousel{max-width:100%;overflow:hidden}.vp-thumb-strip{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.vp-gallery-carousel .vp-thumb{flex:0 0 76px!important;height:76px!important}.vp-gallery-carousel .vp-thumb img{width:100%;height:100%;object-fit:contain!important;padding:4px;background:#fff}.vp-gallery-arrow{flex:0 0 auto;z-index:1} /* variant cards: horizontal, same size, smaller, SKU in popup only */ .vp-variant-area h3{font-size:15px;font-weight:950;margin-bottom:10px}.vp-variant-grid{display:flex!important;flex-wrap:nowrap!important;gap:9px!important;overflow-x:auto!important;overflow-y:hidden;max-width:100%;padding:3px 1px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.vp-variant-card{flex:0 0 174px!important;width:174px!important;min-height:116px!important;height:116px!important;border-radius:var(--vp-radius-sm)!important}.vp-variant-select{min-height:114px!important;height:114px!important;padding:12px 38px 10px 12px!important;display:flex;flex-direction:column;justify-content:flex-start}.vp-variant-select strong{font-size:13px!important;line-height:1.22!important;min-height:32px!important;margin-bottom:5px;color:#0f172a}.vp-v-price{font-size:17px!important;margin-top:1px!important;line-height:1.05}.vp-variant-select del{font-size:12px!important;margin-top:5px;color:#8b95a5!important}.vp-variant-select em{font-size:11px!important;margin-top:5px;color:#94a3b8!important}.vp-variant-select small{display:none!important}.vp-variant-info{top:8px!important;right:8px!important;width:25px!important;height:25px!important;border-radius:var(--vp-radius-sm)!important;display:flex;align-items:center;justify-content:center}.vp-variant-info-icon{width:15px;height:15px;color:inherit}.vp-variant-card.is-active:after{content:'Selected';position:absolute;left:10px;bottom:8px;font-size:10px;font-weight:950;color:var(--vp-primary)}.vp-variant-modal-card{border-radius:var(--vp-radius)!important}.vp-variant-modal-meta span{border-radius:var(--vp-radius-sm)!important;background:#f8fafc}.vp-variant-modal-card p{background:#f8fafc;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);padding:12px} /* premium product info boxes */ .vp-buy-promises-icons{background:#fff;border:1px solid var(--vp-line);border-radius:var(--vp-radius);overflow:hidden}.vp-buy-promises-icons div{padding:12px 14px!important;border-right:1px solid var(--vp-line)}.vp-buy-promises-icons div:last-child{border-right:0}.vp-mini-specs{border:1px solid var(--vp-line);border-radius:var(--vp-radius);background:#fff;overflow:hidden}.vp-mini-specs summary{padding:13px 15px;font-weight:950;cursor:pointer;background:#f8fafc}.vp-mini-specs table{width:100%;font-size:13px}.vp-mini-specs td{padding:10px 14px;border-top:1px solid var(--vp-line)}.vp-mini-specs td:first-child{font-weight:900;color:#475569;width:36%}.vp-spec-grid div{border-radius:var(--vp-radius-sm)!important}.vp-spec-grid span{font-weight:950;color:#475569}.vp-spec-grid strong{font-weight:800;color:#0f172a;line-height:1.55} /* reviews premium polish without changing backend */ #reviews .tab-pane,#reviews-tab-pane{display:block!important}.vp-panel#reviews{background:linear-gradient(180deg,#fff,#fbfdff)}#reviews-tab-pane .my-8{margin:0!important}#reviews-tab-pane h3{font-weight:950;color:#0f172a}#reviews-tab-pane .md\:w-1\/3,#reviews-tab-pane .md\:w-2\/3{padding-left:0!important;padding-right:0!important}#reviews-tab-pane .flex.flex-wrap.md\:flex-nowrap{gap:22px}#reviews-tab-pane .md\:w-1\/3>.flex,#reviews-tab-pane form,#reviews-list>div,#reviews-tab-pane .text-center.border{background:#fff;border:1px solid var(--vp-line)!important;border-radius:var(--vp-radius)!important;padding:18px!important;box-shadow:var(--vp-shadow-sm)}#reviews-list>div{border-bottom:1px solid var(--vp-line)!important}#reviews-tab-pane input,#reviews-tab-pane textarea,#reviews-tab-pane select{border-radius:var(--vp-radius-sm)!important;border-color:#d7dee8!important}#reviews-tab-pane button[type=submit],#reviews-tab-pane a.btn{border-radius:var(--vp-radius-sm)!important;background:var(--vp-primary)!important;border-color:var(--vp-primary)!important;color:var(--vp-button-text,#fff)!important;font-weight:950}#review-stars button svg{width:28px;height:28px} /* cart drawer final premium */ .vp-cart-drawer{width:min(470px,100%)!important}.vp-cart-drawer .offcanvas-header{background:linear-gradient(135deg,var(--vp-dark),#243047)!important;color:#fff!important}.vp-cart-drawer .offcanvas-title,.vp-cart-drawer #offcanvasRightLabel{font-weight:950}.vp-cart-drawer #cart-items-list li{padding:15px 0!important}.vp-cart-drawer #cart-items-list img{border-radius:var(--vp-radius-sm)!important}.vp-cart-drawer .cart-remove span{color:var(--vp-danger)!important;font-weight:900}.vp-cart-drawer .input-spinner{height:34px}.vp-cart-drawer .button-minus,.vp-cart-drawer .button-plus{height:32px}.vp-cart-drawer .quantity-field{height:32px!important} @media (max-width:991px){.vp-product-detail{display:block!important}.vp-main-image{height:380px!important}.vp-product-summary{padding-top:12px}.vp-gallery-carousel{grid-template-columns:28px minmax(0,1fr) 28px!important;gap:6px}.vp-gallery-carousel .vp-thumb{flex-basis:64px!important;height:64px!important}.vp-variant-card{flex-basis:158px!important;width:158px!important}.vp-variant-select strong{font-size:12.5px!important}.vp-v-price{font-size:15.5px!important}.vp-buy-promises-icons{display:grid!important;grid-template-columns:1fr!important}.vp-buy-promises-icons div{border-right:0!important;border-bottom:1px solid var(--vp-line)}.vp-buy-promises-icons div:last-child{border-bottom:0}.vp-mobile-bottom-nav span{font-size:0!important}.vp-mobile-bottom-nav .vp-mobile-nav-icon{font-size:21px!important}.vp-mobile-bottom-nav small{font-size:10px!important}.vp-mobile-bottom-nav{height:66px!important}} @media (max-width:575px){.vp-container-wide{width:min(100% - 10px,var(--vp-max-width,1760px))!important}.vp-breadcrumbs{font-size:10px;gap:4px;line-height:1.35;margin:8px 0}.vp-main-image{height:330px!important}.vp-main-image img{padding:8px!important}.vp-product-summary h1{font-size:20px!important;line-height:1.25}.vp-meta-pills{gap:4px}.vp-meta-pills a,.vp-meta-pills span{font-size:10px;padding:5px 7px}.vp-price-box{padding:11px 12px}.vp-price-box strong{font-size:23px!important}.vp-short-desc{font-size:13px;line-height:1.6}.vp-variant-grid{gap:8px!important}.vp-variant-card{flex:0 0 150px!important;width:150px!important;height:110px!important;min-height:110px!important}.vp-variant-select{height:108px!important;min-height:108px!important;padding:10px 34px 9px 10px!important}.vp-variant-info{width:23px!important;height:23px!important}.vp-action-box{position:sticky;bottom:66px;z-index:50;background:#fff;border:1px solid var(--vp-line);padding:8px;border-radius:var(--vp-radius);box-shadow:0 -8px 24px rgba(15,23,42,.10)}.vp-qty-control{height:42px}.vp-add-main,.vp-buy-main{height:42px!important;font-size:12px}.vp-product-panels{margin-top:18px}.vp-panel{padding:14px!important}.vp-spec-grid{grid-template-columns:1fr!important}.vp-cart-drawer{width:100%!important}#reviews-tab-pane .flex.flex-wrap.md\:flex-nowrap{display:block}.vp-trust-row-icons div{display:grid!important;grid-template-columns:38px 1fr;align-items:center}.vp-trust-row-icons div span:not(.vp-trust-icon){grid-column:2}.vp-trust-row-icons div strong{grid-column:2}.vp-trust-icon{grid-row:1 / span 2}} /* V5 standalone speed + SEO theme patch: no old theme.css required */ .vp-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* tiny utility shim used by cart.js/reviews/legacy partials after removing old theme.css */ .d-flex,.flex{display:flex!important}.inline-flex{display:inline-flex!important}.block{display:block!important}.hidden{display:none!important}.flex-wrap{flex-wrap:wrap!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.items-start{align-items:flex-start!important}.justify-between{justify-content:space-between!important}.justify-center{justify-content:center!important}.justify-end{justify-content:flex-end!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.right-0{right:0!important}.top-0{top:0!important}.w-full{width:100%!important}.list-none{list-style:none!important}.border{border:1px solid var(--vp-line)!important}.border-t{border-top:1px solid var(--vp-line)!important}.border-b{border-bottom:1px solid var(--vp-line)!important}.text-muted,.text-gray-500{color:var(--vp-muted)!important}.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900{color:#334155!important}.text-green-600{color:var(--vp-primary)!important}.bg-green-600{background:var(--vp-primary)!important}.bg-gray-800{background:var(--vp-dark)!important}.text-white{color:#fff!important}.font-bold{font-weight:800!important}.font-semibold{font-weight:700!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:.75rem!important}.mb-4{margin-bottom:1rem!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:.75rem!important}.mt-4{margin-top:1rem!important}.ml-1{margin-left:.25rem!important}.ml-3{margin-left:.75rem!important}.p-2{padding:.5rem!important}.p-3{padding:.75rem!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-7{gap:1.75rem!important}.small,.text-sm{font-size:13px!important}.text-base{font-size:16px!important}.leading-relaxed{line-height:1.7!important}.object-cover{object-fit:cover!important}.object-contain{object-fit:contain!important} @media (min-width:768px){.md\:block{display:block!important}.md\:flex{display:flex!important}.md\:w-1\/2{width:50%!important}.md\:w-1\/3{width:33.333%!important}.md\:w-2\/3{width:66.666%!important}.md\:flex-row{flex-direction:row!important}} @media (min-width:992px){.lg\:block{display:block!important}.lg\:hidden{display:none!important}.lg\:flex{display:flex!important}.lg\:w-auto{width:auto!important}.lg\:w-1\/3{width:33.333%!important}.lg\:w-2\/3{width:66.666%!important}} /* Bootstrap/offcanvas minimum CSS so old Bootstrap CSS is not required */ .offcanvas{position:fixed;z-index:1045;background:#fff;visibility:hidden;transition:transform .24s ease,visibility .24s ease;max-width:100%;outline:0}.offcanvas.show{visibility:visible}.offcanvas-left{top:0;left:0;width:min(390px,92vw);height:100vh;transform:translateX(-100%)}.offcanvas-left.show{transform:translateX(0)}.offcanvas-right{top:0;right:0;width:min(470px,100vw);height:100vh;transform:translateX(100%)}.offcanvas-right.show{transform:translateX(0)}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--vp-line)}.offcanvas-body{height:calc(100vh - 74px);overflow:auto;padding:16px}.btn-close{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:inherit}.vp-offcanvas-backdrop,.offcanvas-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:1040}.modal{display:none}.modal.show{display:block} /* V5 self-contained header */ .vp-header-v5{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--vp-line);box-shadow:0 2px 14px rgba(15,23,42,.045)}.vp-header-top{background:var(--vp-dark);color:#dbeafe;font-size:12px}.vp-header-top .vp-container{height:32px;display:flex;align-items:center;justify-content:space-between;gap:14px}.vp-header-top a{color:#fff;font-weight:900}.vp-header-main{background:#fff}.vp-header-main-grid{height:78px;display:grid;grid-template-columns:auto minmax(230px,260px) minmax(340px,1fr) auto;align-items:center;gap:18px}.vp-logo-v5{display:inline-flex;align-items:center;min-width:0}.vp-logo-v5 img{max-width:190px;width:auto;height:auto;object-fit:contain}.vp-header-search{height:48px;display:flex;border:1px solid #d7dee8;border-radius:var(--vp-radius);overflow:hidden;background:#fff}.vp-header-search input{flex:1;min-width:0;border:0;padding:0 15px;font-size:15px;outline:0}.vp-header-search button{width:54px;border:0;background:var(--vp-primary);color:var(--vp-button-text,#fff);display:grid;place-items:center;cursor:pointer}.vp-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.vp-header-shop-link{height:42px;display:inline-flex;align-items:center;font-size:14px;font-weight:950;color:#334155}.vp-header-cart-btn,.vp-header-icon-btn{border:1px solid var(--vp-line);background:#fff;color:#0f172a;border-radius:var(--vp-radius-sm);height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:950;cursor:pointer;position:relative}.vp-header-cart-btn{padding:0 13px}.vp-header-cart-btn em{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;border-radius:99px;background:var(--vp-danger);color:#fff;font-size:10px;font-style:normal;line-height:18px;text-align:center}.vp-header-icon-btn{width:42px}.vp-header-icon svg{width:22px;height:22px}.vp-mobile-only{display:none!important}.vp-header-nav{border-top:1px solid var(--vp-line);background:#fff}.vp-header-nav-row{height:48px;display:flex;align-items:center;gap:20px}.vp-header-nav-row>a{font-size:14px;font-weight:950;color:#334155}.vp-header-nav-row>a:hover{color:var(--vp-primary-hover)}.vp-dept-dropdown{position:relative}.vp-dept-toggle{height:38px;border:0;background:var(--vp-primary);color:var(--vp-button-text,#fff);border-radius:var(--vp-radius-sm);padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-weight:950;cursor:pointer}.vp-dept-menu{position:absolute;top:calc(100% + 8px);left:0;width:290px;max-height:450px;overflow:auto;background:#fff;border:1px solid var(--vp-line);box-shadow:var(--vp-shadow);border-radius:var(--vp-radius);padding:8px;display:none}.vp-dept-dropdown:hover .vp-dept-menu,.vp-dept-dropdown.is-open .vp-dept-menu{display:block}.vp-dept-menu a{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:var(--vp-radius-sm);font-size:14px;color:#334155}.vp-dept-menu a:hover{background:var(--vp-soft);color:var(--vp-primary)}.vp-dept-menu small{color:var(--vp-muted)} .vp-mobile-menu-v5 .offcanvas-header{background:#fff}.vp-mobile-menu-v5 .offcanvas-body{display:flex;flex-direction:column;gap:2px}.vp-mobile-menu-v5 a{display:flex;align-items:center;justify-content:space-between;padding:12px 8px;border-bottom:1px solid var(--vp-line);font-weight:850;color:#172033}.vp-mobile-menu-v5 small{color:var(--vp-muted);font-size:11px}.vp-mobile-menu-section{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--vp-muted);font-weight:950;margin:16px 0 4px}.vp-mobile-menu-search{display:flex;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);overflow:hidden;margin-bottom:8px}.vp-mobile-menu-search input{flex:1;border:0;height:44px;padding:0 12px;outline:0}.vp-mobile-menu-search button{width:46px;border:0;background:var(--vp-primary);color:#fff;display:grid;place-items:center} /* V5 footer */ .vp-footer-v5{background:#0f172a;color:#cbd5e1;margin-top:42px;padding:42px 0 0}.vp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}.vp-footer-v5 h3,.vp-footer-v5 h4{color:#fff;margin:0 0 12px;font-weight:950}.vp-footer-v5 p{max-width:520px;line-height:1.7;margin:0 0 16px;color:#cbd5e1}.vp-footer-v5 a{display:block;color:#dbeafe;margin:8px 0;font-size:14px}.vp-footer-v5 a:hover{color:#fff}.vp-footer-badges{display:flex;flex-wrap:wrap;gap:7px}.vp-footer-badges span{border:1px solid rgba(255,255,255,.16);padding:7px 10px;border-radius:var(--vp-radius-sm);font-size:12px;font-weight:900}.vp-footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding:16px 0;font-size:13px;color:#94a3b8} /* V5 icon alignment: bigger, centered, no background box */ .vp-icon,.vp-svg-icon,.vp-mobile-nav-icon,.vp-trust-icon,.vp-promise-icon,.vp-btn-ico,.vp-header-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;vertical-align:middle!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;flex:0 0 auto!important}.vp-trust-icon,.vp-promise-icon{width:var(--vp-icon-size,30px)!important;height:var(--vp-icon-size,30px)!important;color:var(--vp-primary)!important;font-size:var(--vp-icon-size,30px)!important}.vp-trust-icon svg,.vp-promise-icon svg{width:var(--vp-icon-size,30px)!important;height:var(--vp-icon-size,30px)!important}.vp-mobile-nav-icon{width:var(--vp-mobile-icon-size,28px)!important;height:var(--vp-mobile-icon-size,28px)!important;font-size:var(--vp-mobile-icon-size,28px)!important;margin:0 auto!important}.vp-mobile-nav-icon svg{width:var(--vp-mobile-icon-size,28px)!important;height:var(--vp-mobile-icon-size,28px)!important}.vp-icon-img.vp-mobile-nav-icon{width:var(--vp-mobile-icon-size,28px)!important;height:var(--vp-mobile-icon-size,28px)!important}.vp-btn-ico{width:20px!important;height:20px!important}.vp-btn-ico svg{width:20px!important;height:20px!important}.vp-trust-row-icons div{display:grid!important;grid-template-columns:auto 1fr;align-items:center!important;gap:3px 12px!important}.vp-trust-row-icons .vp-trust-icon{grid-row:1 / span 2}.vp-trust-row-icons strong,.vp-trust-row-icons span{text-align:left}.vp-buy-promises-icons div{display:grid!important;grid-template-columns:auto 1fr;align-items:center!important;gap:2px 11px!important}.vp-buy-promises-icons .vp-promise-icon{grid-row:1 / span 2} /* V5 mobile bottom navigation */ .vp-mobile-bottom-nav{display:none}.vp-mobile-search-panel{display:none}.whatsapp-float-btn{display:none!important}.vp-mobile-search-panel.is-open{display:flex;position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:999998;align-items:flex-end;padding:14px}.vp-mobile-search-card{position:relative;width:100%;background:#fff;border-radius:10px 10px 0 0;padding:18px;border:1px solid var(--vp-line);box-shadow:0 -20px 60px rgba(15,23,42,.2)}.vp-mobile-search-card h3{font-size:20px;font-weight:950;margin:0 44px 14px 0}.vp-mobile-search-card form{display:flex;border:1px solid var(--vp-line);border-radius:var(--vp-radius-sm);overflow:hidden}.vp-mobile-search-card input{height:46px;border:0;flex:1;padding:0 12px;outline:0}.vp-mobile-search-card button[type=submit]{border:0;background:var(--vp-primary);color:#fff;font-weight:950;padding:0 15px}.vp-mobile-search-close{position:absolute;right:18px;top:18px;width:34px;height:34px;border:0;background:#fff;border-radius:var(--vp-radius-sm);font-size:28px;line-height:1;display:grid;place-items:center} @media (max-width:991px){.vp-header-top{display:none}.vp-header-main-grid{height:58px;grid-template-columns:42px 1fr auto;gap:8px}.vp-mobile-only{display:inline-flex!important}.vp-logo-v5 img{max-width:142px}.vp-header-search,.vp-header-shop-link,.vp-header-nav{display:none!important}.vp-header-actions{gap:0}.vp-header-cart-btn{width:42px;padding:0;font-size:0}.vp-header-cart-btn span{display:none}.vp-header-cart-btn em{right:-5px;top:3px}.vp-mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:68px;background:#fff;border-top:1px solid var(--vp-line);box-shadow:0 -10px 28px rgba(15,23,42,.11);display:grid!important;grid-template-columns:repeat(5,1fr);z-index:99990;padding-bottom:env(safe-area-inset-bottom)}.vp-mobile-bottom-nav a,.vp-mobile-bottom-nav button{position:relative;border:0;background:#fff;color:#334155;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:3px;font-weight:900;text-align:center;padding:0;margin:0}.vp-mobile-bottom-nav small{font-size:10px!important;line-height:1.1!important}.vp-mobile-bottom-nav em{position:absolute;top:5px;right:18px;min-width:17px;height:17px;border-radius:50%;background:var(--vp-danger);color:#fff;font-size:10px;line-height:17px;font-style:normal}body.vp-site-body{padding-bottom:70px}.vp-footer-grid{grid-template-columns:1fr 1fr}.vp-footer-about{grid-column:1 / -1}.vp-trust-row-icons div{grid-template-columns:42px 1fr!important}.vp-trust-row-icons .vp-trust-icon{width:var(--vp-icon-size,30px)!important;height:var(--vp-icon-size,30px)!important}} @media (max-width:575px){.vp-footer-grid{grid-template-columns:1fr}.vp-footer-v5{padding-top:30px}.vp-trust-row-icons{grid-template-columns:1fr!important}.vp-trust-row-icons div{padding:14px!important}.vp-buy-promises-icons .vp-promise-icon{width:28px!important;height:28px!important}.vp-main-image{height:315px!important}.vp-variant-card{flex-basis:142px!important;width:142px!important}.vp-variant-select strong{min-height:30px!important;font-size:12px!important}.vp-v-price{font-size:15px!important}.vp-variant-select del{font-size:11px!important}.vp-mobile-nav-icon{width:var(--vp-mobile-icon-size,28px)!important;height:var(--vp-mobile-icon-size,28px)!important}} /* ========================= V6 FINAL ECOMMERCE POLISH ========================= */ body{font-family:var(--vp-font-family,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)!important} .vp-container-wide{width:min(100% - 28px,var(--vp-max-width,1760px))!important}.vp-header-top{background:linear-gradient(90deg,var(--vp-topbar-bg),#111827)!important;color:var(--vp-topbar-text)!important;border-bottom:1px solid rgba(255,255,255,.08)}.vp-header-top .vp-container{height:36px!important;font-size:13px}.vp-topbar-promo{font-weight:700;letter-spacing:.01em}.vp-topbar-phone{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);padding:5px 10px;border-radius:3px;color:#fff!important} .vp-header-main{box-shadow:0 8px 22px rgba(15,23,42,.035)}.vp-header-main-grid{height:82px!important;grid-template-columns:minmax(190px,240px) minmax(540px,760px) 1fr auto!important;gap:22px!important}.vp-logo-v5 img{max-width:215px!important}.vp-header-search{height:50px!important;border:2px solid #dfe6ee!important;border-radius:4px!important;background:#fff!important;box-shadow:0 3px 0 rgba(15,23,42,.02)}.vp-header-search:focus-within{border-color:var(--vp-primary)!important;box-shadow:0 0 0 3px rgba(11,107,77,.08)}.vp-header-search input{font-size:15px!important;padding:0 18px!important}.vp-header-search button{width:62px!important;border-radius:0!important;background:var(--vp-primary)!important;color:var(--vp-button-text,#fff)!important}.vp-header-search button .vp-header-icon,.vp-header-search button svg{width:23px!important;height:23px!important}.vp-header-actions{gap:18px!important}.vp-header-shop-link{font-size:15px!important;color:#0f172a!important}.vp-header-cart-btn{height:46px!important;border-radius:4px!important;padding:0 16px!important;background:#fff!important;border:1px solid #d7dee8!important}.vp-header-cart-btn:hover{border-color:var(--vp-primary)!important;color:var(--vp-primary)!important}.vp-header-nav{background:#fff;border-top:1px solid #edf1f5;border-bottom:1px solid #e3e9ef}.vp-header-nav-row{height:54px!important;gap:28px!important}.vp-header-nav-row>a{font-size:14px!important;letter-spacing:.01em}.vp-header-nav-row>a:hover{color:var(--vp-primary-hover)!important}.vp-dept-dropdown{display:none!important} .vp-hero-slide{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s ease}.vp-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}.vp-hero-slide:first-child:not(.is-active){opacity:0!important;visibility:hidden!important}.vp-hero-copy{opacity:0;transform:translateY(calc(-50% + 12px));transition:opacity .38s ease,transform .38s ease}.vp-hero-slide.is-active .vp-hero-copy{opacity:1;transform:translateY(-50%)} .vp-icon-svg,.vp-icon-img{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;vertical-align:middle!important;background:transparent!important;border:0!important;box-shadow:none!important}.vp-icon-svg svg{display:block!important;width:100%!important;height:100%!important;fill:var(--vp-icon-fill,transparent);stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.vp-header-icon{width:24px!important;height:24px!important}.vp-btn-ico{width:19px!important;height:19px!important;margin-right:8px}.vp-trust-icon,.vp-promise-icon{width:var(--vp-icon-size,32px)!important;height:var(--vp-icon-size,32px)!important;color:var(--vp-primary)!important;background:transparent!important}.vp-mobile-nav-icon{width:var(--vp-mobile-icon-size,30px)!important;height:var(--vp-mobile-icon-size,30px)!important;color:currentColor!important;background:transparent!important} .vp-trust-row-icons div{display:grid!important;grid-template-columns:46px 1fr!important;align-items:center!important;column-gap:12px!important}.vp-trust-row-icons div strong,.vp-trust-row-icons div span{grid-column:2}.vp-trust-row-icons .vp-trust-icon{grid-row:1 / span 2}.vp-buy-promises-icons div{display:grid!important;grid-template-columns:44px 1fr!important;align-items:center!important;column-gap:12px!important}.vp-buy-promises-icons div strong,.vp-buy-promises-icons div span{grid-column:2}.vp-buy-promises-icons .vp-promise-icon{grid-row:1 / span 2} /* Better vertical variants */ .vp-variant-area{margin-top:20px!important}.vp-variant-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}.vp-variant-head h3{margin:0!important;font-size:16px!important}.vp-variant-head span{font-size:12px;color:var(--vp-muted);font-weight:800}.vp-variant-grid{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding:3px 3px 12px!important;scrollbar-width:thin!important}.vp-variant-card{position:relative!important;flex:0 0 195px!important;width:195px!important;height:154px!important;min-height:154px!important;border:1px solid #dfe6ef!important;border-radius:5px!important;background:#fff!important;box-shadow:0 6px 14px rgba(15,23,42,.045)!important;scroll-snap-align:start!important;overflow:hidden!important}.vp-variant-card:hover{border-color:var(--vp-primary)!important;box-shadow:0 12px 24px rgba(15,23,42,.09)!important}.vp-variant-card.is-active{border-color:var(--vp-primary)!important;box-shadow:0 0 0 2px rgba(11,107,77,.10),0 12px 24px rgba(15,23,42,.09)!important}.vp-variant-card.is-active:after{display:none!important}.vp-variant-select{width:100%!important;height:116px!important;min-height:116px!important;border:0!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;text-align:left!important;padding:14px 14px 10px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:5px!important;cursor:pointer!important}.vp-v-selected-dot{width:9px;height:9px;border-radius:50%;border:1px solid #9ca3af;background:#fff;position:absolute;top:11px;right:11px}.vp-variant-card.is-active .vp-v-selected-dot{border-color:var(--vp-primary);background:var(--vp-primary);box-shadow:0 0 0 3px rgba(11,107,77,.12)}.vp-variant-select strong{font-size:14px!important;line-height:1.28!important;min-height:38px!important;max-height:38px!important;overflow:hidden!important;padding-right:16px;color:#111827!important}.vp-v-price{font-size:22px!important;line-height:1!important;color:var(--vp-blue)!important;font-weight:950!important;letter-spacing:-.025em!important}.vp-variant-select del{font-size:13px!important;color:#94a3b8!important;font-weight:800!important}.vp-variant-select em{font-style:normal!important;font-size:11px!important;font-weight:950!important;color:#16a34a!important;text-transform:uppercase!important;letter-spacing:.04em!important}.vp-variant-info{position:absolute!important;left:12px!important;right:12px!important;bottom:10px!important;top:auto!important;width:auto!important;height:28px!important;border:1px solid #dbeafe!important;background:#eff6ff!important;color:#1d4ed8!important;border-radius:4px!important;font-size:12px!important;font-weight:950!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.vp-variant-info:hover{background:#dbeafe!important;border-color:#bfdbfe!important}.vp-variant-modal-card{border-radius:6px!important;max-width:460px!important}.vp-variant-modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vp-variant-modal-meta span{padding:9px 10px!important;border:1px solid #e5e7eb!important;background:#f8fafc!important;border-radius:4px!important;font-size:12px!important}.vp-variant-modal-card p{line-height:1.7!important;color:#334155!important} /* Premium footer */ .vp-footer-v5,.vp-footer-v6{background:var(--vp-footer-bg,#0b1220)!important;color:var(--vp-footer-text,#cbd5e1)!important;margin-top:48px;padding:0!important}.vp-footer-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.10)}.vp-footer-topline strong{display:block;color:#fff;font-size:19px}.vp-footer-topline span{display:block;color:var(--vp-footer-text);margin-top:3px}.vp-footer-topline a{display:inline-flex!important;align-items:center;justify-content:center;height:40px;padding:0 14px;background:var(--vp-primary);color:#fff!important;border-radius:4px;font-weight:950}.vp-footer-grid{padding:34px 0 8px!important}.vp-footer-logo{display:inline-flex!important;margin:0 0 14px!important}.vp-footer-logo img{height:auto;filter:none}.vp-footer-v6 h3,.vp-footer-v6 h4{color:#fff;margin:0 0 14px;font-weight:950}.vp-footer-v6 p{max-width:560px;line-height:1.75;margin:0 0 18px;color:var(--vp-footer-text)}.vp-footer-v6 a{display:block;color:#dbeafe;margin:9px 0;font-size:14px}.vp-footer-v6 a:hover{color:#fff}.vp-footer-badges span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)!important}.vp-footer-bottom{display:flex!important;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.12);margin-top:24px!important;padding:18px 0!important;color:#94a3b8!important} /* Checkout */ .vp-checkout-page{background:#f6f8fb;padding:24px 0 54px}.vp-checkout-hero{border:1px solid var(--vp-line);background:linear-gradient(135deg,#fff,#f2fbf7);border-radius:6px;padding:22px 24px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.vp-checkout-hero span{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--vp-primary)}.vp-checkout-hero h1{font-size:34px;letter-spacing:-.04em;font-weight:950;margin:4px 0 6px}.vp-checkout-hero p{margin:0;color:#475569;line-height:1.65}.vp-checkout-trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.vp-checkout-trust b{background:#fff;border:1px solid #dbeafe;color:#1d4ed8;border-radius:4px;padding:8px 10px;font-size:12px}.vp-checkout-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:20px;align-items:start}.vp-checkout-card{background:#fff;border:1px solid var(--vp-line);border-radius:6px;box-shadow:var(--vp-shadow-sm)}.vp-checkout-card-head{padding:18px 20px;border-bottom:1px solid var(--vp-line)}.vp-checkout-card-head strong{display:block;font-size:18px;font-weight:950}.vp-checkout-card-head span{display:block;color:var(--vp-muted);font-size:13px;margin-top:3px}.vp-checkout-form-card form{padding:20px}.vp-checkout-form-card input,.vp-checkout-form-card textarea,.vp-checkout-form-card select{width:100%!important;border:1px solid #d6dee8!important;border-radius:4px!important;padding:10px 12px!important;outline:0!important;background:#fff!important}.vp-checkout-form-card input:focus,.vp-checkout-form-card textarea:focus{border-color:var(--vp-primary)!important;box-shadow:0 0 0 3px rgba(11,107,77,.08)!important}.vp-checkout-form-card .form-label{font-weight:850;color:#172033}.vp-checkout-summary-card{position:sticky;top:122px;padding-bottom:18px}.vp-checkout-product-row{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--vp-line)}.vp-checkout-product-row img,.vp-checkout-thumb-placeholder{width:74px;height:74px;object-fit:contain;background:#f8fafc;border:1px solid var(--vp-line);border-radius:5px}.vp-checkout-product-row strong{display:block;font-size:14px;line-height:1.35}.vp-checkout-product-row small,.vp-checkout-product-row span{display:block;color:var(--vp-muted);font-size:12px;margin-top:3px}.vp-checkout-product-row b{color:var(--vp-blue)}.vp-coupon-block{padding:16px 18px;border-bottom:1px solid var(--vp-line)}.vp-coupon-block>a{font-weight:950;color:var(--vp-primary)}.vp-coupon-row{display:flex;gap:8px;margin-top:10px}.vp-coupon-row input{height:42px;border-radius:4px!important}.vp-coupon-row button{border-radius:4px;background:var(--vp-primary);border-color:var(--vp-primary);font-weight:900}.vp-discount-area{margin-top:12px;background:#f8fafc;border:1px solid var(--vp-line);border-radius:4px;padding:10px}.vp-checkout-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:18px}.vp-checkout-back,.vp-checkout-place{height:46px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:950}.vp-checkout-back{border:1px solid var(--vp-line);color:#334155;background:#fff}.vp-checkout-place{border:1px solid var(--vp-primary);background:var(--vp-primary);color:#fff}.vp-checkout-terms{padding:0 18px;margin:0;color:var(--vp-muted);font-size:12px}.coupon-debug{display:none!important}.cart-item-row{display:grid!important;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--vp-line)}.cart-item-thumb{width:64px!important;height:64px!important;object-fit:contain!important;background:#f8fafc;border:1px solid var(--vp-line);border-radius:5px!important} @media (max-width:1199px){.vp-header-main-grid{grid-template-columns:190px minmax(360px,1fr) auto!important}.vp-header-actions{grid-column:auto}.vp-checkout-layout{grid-template-columns:1fr}.vp-checkout-summary-card{position:static}} @media (max-width:991px){.vp-header-main-grid{height:60px!important;grid-template-columns:44px 1fr auto!important;gap:8px!important}.vp-header-search,.vp-header-nav{display:none!important}.vp-logo-v5 img{max-width:150px!important}.vp-header-cart-btn{height:42px!important}.vp-mobile-menu-v5{display:block!important}.vp-mobile-bottom-nav a,.vp-mobile-bottom-nav button{align-items:center!important;justify-content:center!important;line-height:1!important}.vp-mobile-bottom-nav .vp-mobile-nav-icon{margin:0 auto!important}.vp-footer-topline{display:block}.vp-footer-topline a{margin-top:14px}.vp-footer-bottom{display:block!important;text-align:center}.vp-checkout-hero{display:block}.vp-checkout-trust{justify-content:flex-start;margin-top:14px}} @media (max-width:575px){.vp-container-wide{width:min(100% - 12px,var(--vp-max-width,1760px))!important}.vp-hero-copy{left:20px!important;width:calc(100% - 40px)!important}.vp-hero-copy h1{font-size:28px!important}.vp-product-detail{padding:10px!important}.vp-main-image{height:315px!important}.vp-variant-card{flex-basis:176px!important;width:176px!important;height:148px!important;min-height:148px!important}.vp-variant-select{height:110px!important;min-height:110px!important}.vp-variant-select strong{font-size:13px!important;min-height:36px!important}.vp-v-price{font-size:20px!important}.vp-checkout-page{padding:12px 0 34px}.vp-checkout-hero{padding:16px}.vp-checkout-hero h1{font-size:26px}.vp-checkout-form-card form{padding:14px}.vp-checkout-card-head{padding:15px}.vp-checkout-actions{grid-template-columns:1fr;padding:14px}.vp-coupon-row{display:block}.vp-coupon-row button{width:100%;margin-top:8px}.vp-checkout-product-row{grid-template-columns:60px 1fr}.vp-checkout-product-row b{grid-column:2}.vp-checkout-product-row img,.vp-checkout-thumb-placeholder{width:60px;height:60px}} /* ========================================================= V7 FINAL CHECKOUT + CART + MOBILE NAV FIXES ========================================================= */ /* Bootstrap-free utility safety used by older partials */ .d-none{display:none!important}.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.25rem!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.small{font-size:12px!important}.text-muted{color:#64748b!important}.text-danger{color:var(--vp-danger)!important}.text-end{text-align:right!important}.alert{border:1px solid var(--vp-line);border-radius:4px;padding:12px 14px;background:#fff}.alert-danger{background:#fff5f5;border-color:#fecaca;color:#991b1b}.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.form-label{display:block;margin-bottom:6px;font-weight:850;color:#172033}.input-group{display:flex;align-items:center}.form-control{width:100%;border:1px solid #d6dee8;border-radius:4px;padding:10px 12px;background:#fff;outline:0} /* Header polish */ .vp-header-search{max-width:760px!important;margin-inline:auto!important;justify-self:center!important} .vp-header-search input{height:48px!important;border-radius:5px 0 0 5px!important;font-size:15px!important;background:#fff!important} .vp-header-search button{height:48px!important;width:56px!important;border-radius:0 5px 5px 0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--vp-primary)!important;color:var(--vp-button-text)!important;border:0!important} .vp-header-search button .vp-header-icon,.vp-header-search button svg{width:22px!important;height:22px!important;color:var(--vp-button-text)!important;stroke:currentColor!important;fill:none!important} /* Checkout compact professional */ .vp-checkout-page{background:#f5f7fb!important;padding-bottom:90px!important}.vp-checkout-layout{gap:18px!important}.vp-checkout-card{border-radius:5px!important;box-shadow:0 12px 34px rgba(15,23,42,.06)!important}.vp-checkout-card-head{padding:16px 18px!important}.vp-checkout-card-head strong{font-size:18px!important}.vp-checkout-form-card form{padding:18px!important}.vp-checkout-form-card .vp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vp-checkout-form-card .vp-form-field-full{grid-column:1/-1}.vp-checkout-form-card input:not([type="radio"]):not([type="checkbox"]),.vp-checkout-form-card textarea,.vp-checkout-form-card select{width:100%!important;min-height:44px!important;border:1px solid #d6dee8!important;border-radius:4px!important;padding:10px 12px!important;background:#fff!important;font-size:14px!important}.vp-checkout-form-card textarea{min-height:92px!important;resize:vertical}.vp-checkout-form-card input[type="radio"],.vp-checkout-form-card input[type="checkbox"]{width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;appearance:auto!important;box-shadow:none!important} .vp-payment-methods{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.vp-payment-title{font-size:16px!important;font-weight:950!important;margin:0 0 10px!important}.vp-payment-option{position:relative;display:grid!important;grid-template-columns:28px 1fr!important;gap:10px!important;align-items:flex-start!important;border:1px solid #d7e0ea!important;border-radius:5px!important;background:#fff!important;padding:12px!important;cursor:pointer!important;min-height:auto!important}.vp-payment-option:hover{border-color:var(--vp-primary)!important;box-shadow:0 8px 20px rgba(15,23,42,.06)}.vp-payment-option input[type="radio"]{margin-top:3px!important;transform:scale(1.08)!important;accent-color:var(--vp-primary)!important}.vp-payment-option strong{font-size:14px!important;line-height:1.2!important;color:#111827!important}.vp-payment-option span{display:block;margin-top:2px;font-size:12px!important;line-height:1.35!important;color:#64748b!important}.vp-checkout-summary-card{overflow:hidden}.vp-checkout-product-row{grid-template-columns:76px minmax(0,1fr) auto!important;gap:12px!important;padding:14px 16px!important}.vp-checkout-product-row img,.vp-checkout-thumb-placeholder{width:76px!important;height:76px!important;object-fit:contain!important;border-radius:4px!important}.vp-checkout-product-row strong{font-size:14px!important;line-height:1.35!important}.vp-checkout-product-row b{font-size:16px!important;white-space:nowrap}.vp-checkout-empty{padding:16px!important;background:#fff7ed!important;border:1px solid #fed7aa!important;border-radius:4px!important;color:#9a3412!important;margin:0 16px 14px!important}.vp-checkout-empty a{font-weight:950;color:var(--vp-primary)!important}.vp-checkout-actions{padding:16px!important}.vp-checkout-back,.vp-checkout-place{height:44px!important;border-radius:4px!important} /* Cart drawer premium readable layout for cart.js generated HTML */ .vp-cart-drawer{width:min(440px,94vw)!important;max-width:94vw!important}.vp-cart-drawer .offcanvas-header{padding:20px!important;background:linear-gradient(135deg,#0f172a,#1e293b)!important;color:#fff!important}.vp-cart-drawer .btn-close{font-size:26px!important;color:#fff!important;background:transparent!important;opacity:1!important}.vp-cart-drawer .offcanvas-body{padding:18px!important}.vp-cart-drawer #cart-items-list{padding:0!important;margin:0!important}.vp-cart-drawer #cart-items-list li{list-style:none!important;padding:16px 0!important;border-top:1px solid var(--vp-line)!important;position:relative!important}.vp-cart-drawer #cart-items-list li:first-child{border-top:0!important}.vp-cart-drawer #cart-items-list li>div[class*="flex"]{display:block!important}.vp-cart-drawer #cart-items-list li div[class*="w-1/2"]{width:100%!important;max-width:100%!important}.vp-cart-drawer #cart-items-list li div[class*="w-1/2"]>div[class*="flex"]{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;gap:12px!important;align-items:start!important}.vp-cart-drawer #cart-items-list img{width:84px!important;height:84px!important;object-fit:contain!important;border:1px solid var(--vp-line)!important;border-radius:4px!important;background:#fff!important}.vp-cart-drawer #cart-items-list .ml-3{margin-left:0!important;min-width:0!important}.vp-cart-drawer #cart-items-list h6{font-size:15px!important;line-height:1.28!important;font-weight:900!important;color:#0f172a!important;margin:0 0 8px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.vp-cart-drawer #cart-items-list a.cart-remove{font-size:12px!important;font-weight:900!important;color:#dc2626!important;text-decoration:none!important}.vp-cart-drawer #cart-items-list div[class*="w-1/3"]{width:118px!important;max-width:118px!important;margin-left:96px!important;margin-top:10px!important}.vp-cart-drawer #cart-items-list .input-spinner{height:36px!important;display:grid!important;grid-template-columns:34px 50px 34px!important;border:1px solid #d8e1ec!important;border-radius:4px!important;overflow:hidden;background:#fff!important}.vp-cart-drawer #cart-items-list .button-minus,.vp-cart-drawer #cart-items-list .button-plus{width:34px!important;height:34px!important;border:0!important;background:#f8fafc!important;font-weight:950!important;color:#0f172a!important}.vp-cart-drawer #cart-items-list .quantity-field{width:50px!important;height:34px!important;border:0!important;text-align:center!important;font-size:14px!important;font-weight:950!important;background:#fff!important}.vp-cart-drawer #cart-items-list div[class*="w-1/5"]{position:absolute!important;right:0!important;bottom:20px!important;width:auto!important;max-width:100px!important;text-align:right!important}.vp-cart-drawer #cart-items-list div[class*="w-1/5"] span{font-size:17px!important;color:var(--vp-blue)!important;font-weight:950!important}.vp-cart-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:8px!important}.vp-cart-total{font-size:18px!important}.vp-cart-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:16px!important}.vp-cart-actions a{height:44px!important;border-radius:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;font-weight:950!important;text-decoration:none!important}.vp-cart-continue{border:1px solid #d8e1ec!important;color:#0f172a!important;background:#fff!important}.vp-cart-checkout{background:var(--vp-dark)!important;color:#fff!important;border:1px solid var(--vp-dark)!important} /* Mobile bottom menu clear icons */ .vp-mobile-bottom-nav a,.vp-mobile-bottom-nav button{opacity:1!important;color:#1f2937!important;background:#fff!important}.vp-mobile-bottom-nav a:hover,.vp-mobile-bottom-nav button:hover{color:var(--vp-primary)!important}.vp-mobile-bottom-nav .vp-mobile-nav-icon{width:30px!important;height:30px!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;color:currentColor!important}.vp-mobile-bottom-nav .vp-mobile-nav-icon svg{width:30px!important;height:30px!important;display:block!important;stroke:currentColor!important;fill:none!important;stroke-width:1.9!important}.vp-mobile-bottom-nav small{font-size:11px!important;color:currentColor!important;opacity:1!important}.vp-mobile-bottom-nav a[href*="wa.me"] .vp-mobile-nav-icon,.vp-mobile-bottom-nav a[href*="wa.me"] small{color:#128c7e!important;opacity:1!important}.vp-mobile-bottom-nav a:first-child .vp-mobile-nav-icon,.vp-mobile-bottom-nav a:first-child small{color:#1f2937!important;opacity:1!important} @media (max-width:991px){.vp-header-main-grid{grid-template-columns:58px minmax(0,1fr) 58px!important;justify-items:center!important}.vp-logo-v5{justify-self:center!important}.vp-logo-v5 img{max-width:205px!important}.vp-header-cart-btn{justify-self:end!important}.vp-mobile-menu-btn{justify-self:start!important}.vp-header-main{position:sticky!important;top:0!important;z-index:9990!important}.vp-header-search{display:none!important}.vp-checkout-hero{display:none!important}.vp-checkout-layout{grid-template-columns:1fr!important}.vp-checkout-summary-card{position:static!important;order:-1}.vp-payment-methods{grid-template-columns:1fr!important}.vp-checkout-form-card .vp-form-grid{grid-template-columns:1fr!important}.vp-checkout-card-head strong{font-size:17px!important}.vp-checkout-card-head span{font-size:12px!important}.vp-checkout-product-row{grid-template-columns:68px minmax(0,1fr)!important}.vp-checkout-product-row b{grid-column:2!important;text-align:left!important;margin-top:4px}.vp-checkout-product-row img,.vp-checkout-thumb-placeholder{width:68px!important;height:68px!important}.vp-cart-drawer{width:min(430px,92vw)!important}.vp-cart-drawer #cart-items-list img{width:76px!important;height:76px!important}.vp-cart-drawer #cart-items-list li div[class*="w-1/2"]>div[class*="flex"]{grid-template-columns:76px minmax(0,1fr)!important}.vp-cart-drawer #cart-items-list div[class*="w-1/3"]{margin-left:88px!important}.vp-cart-drawer #cart-items-list h6{font-size:14px!important;-webkit-line-clamp:3}.vp-cart-actions{grid-template-columns:1fr!important}} @media (max-width:575px){.vp-container-wide{width:min(100% - 16px,var(--vp-max-width,1760px))!important}.vp-checkout-page{padding-top:12px!important}.vp-checkout-card{border-radius:5px!important}.vp-checkout-form-card form{padding:14px!important}.vp-payment-option{padding:10px 11px!important}.vp-payment-option strong{font-size:13px!important}.vp-payment-option span{font-size:11px!important}.vp-checkout-actions{grid-template-columns:1fr!important}.vp-coupon-row{display:grid!important;grid-template-columns:1fr auto!important}.vp-coupon-row button{margin-top:0!important}.vp-cart-drawer{width:92vw!important}.vp-cart-drawer .offcanvas-header{padding:18px 16px!important}.vp-cart-drawer .offcanvas-body{padding:16px!important}.vp-cart-drawer #offcanvasRightLabel{font-size:25px!important}.vp-cart-drawer #cart-location{font-size:13px!important}.vp-cart-drawer #cart-items-list li{padding:15px 0!important}.vp-cart-drawer #cart-items-list h6{font-size:14px!important;line-height:1.28!important}.vp-cart-drawer #cart-items-list div[class*="w-1/5"]{bottom:22px!important}.vp-mobile-bottom-nav{height:70px!important}.vp-main-shell{padding-bottom:70px!important}} /* ========================================================= V8 FINAL POLISH: trust icons, search, variants, cart drawer ========================================================= */ /* Header search: desktop centered and proper full ecommerce width */ @media (min-width: 992px){ .vp-header-main-grid{ grid-template-columns: 260px minmax(620px, 820px) 1fr auto !important; gap: 24px !important; align-items: center !important; } .vp-logo-v5{ justify-self: start !important; } .vp-header-search{ width: min(100%, 820px) !important; max-width: 820px !important; justify-self: center !important; margin: 0 auto !important; height: 52px !important; border-radius: 5px !important; border: 2px solid #dce3eb !important; overflow: hidden !important; background: #fff !important; } .vp-header-search input{ height: 52px !important; line-height: 52px !important; padding: 0 18px !important; font-size: 15px !important; } .vp-header-search button{ width: 62px !important; height: 52px !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .vp-header-search button svg, .vp-header-search button .vp-header-icon{ width: 22px !important; height: 22px !important; } } @media (min-width: 1200px){ .vp-header-main-grid{ grid-template-columns: 270px minmax(680px, 900px) 1fr auto !important; } .vp-header-search{ width: min(100%, 900px) !important; max-width: 900px !important; } } /* Trust rows: icon left, title/description right. Never above text. */ .vp-trust-row-icons > div, .vp-buy-promises-icons > div{ display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; gap: 2px 13px !important; text-align: left !important; } .vp-trust-row-icons > div > .vp-trust-icon, .vp-buy-promises-icons > div > .vp-promise-icon{ grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: center !important; } .vp-trust-row-icons > div > strong, .vp-buy-promises-icons > div > strong{ grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; line-height: 1.22 !important; } .vp-trust-row-icons > div > span, .vp-buy-promises-icons > div > span{ grid-column: 2 !important; grid-row: 2 !important; margin: 2px 0 0 !important; line-height: 1.35 !important; } .vp-trust-icon, .vp-promise-icon{ width: 32px !important; height: 32px !important; min-width: 32px !important; color: var(--vp-primary) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .vp-trust-icon svg, .vp-promise-icon svg{ width: 30px !important; height: 30px !important; } @media (max-width: 575px){ .vp-trust-row-icons > div, .vp-buy-promises-icons > div{ grid-template-columns: 38px minmax(0,1fr) !important; gap: 2px 10px !important; } .vp-trust-icon, .vp-promise-icon{ width: 30px !important; height: 30px !important; min-width: 30px !important; } .vp-trust-icon svg, .vp-promise-icon svg{ width: 28px !important; height: 28px !important; } } /* Variant cards: taller, vertical, premium retail layout */ .vp-variant-area{ margin-top: 22px !important; } .vp-variant-head{ align-items: center !important; margin-bottom: 12px !important; } .vp-variant-head h3{ font-size: 17px !important; letter-spacing: -0.015em !important; } .vp-variant-grid{ display: flex !important; flex-wrap: nowrap !important; gap: 13px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 4px 3px 14px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .vp-variant-grid::-webkit-scrollbar{ height: 8px !important; } .vp-variant-grid::-webkit-scrollbar-thumb{ background: #cbd5e1 !important; border-radius: 999px !important; } .vp-variant-card{ flex: 0 0 235px !important; width: 235px !important; height: 188px !important; min-height: 188px !important; border: 1px solid #dfe6ee !important; border-radius: 7px !important; background: #fff !important; box-shadow: 0 7px 18px rgba(15,23,42,.055) !important; overflow: hidden !important; scroll-snap-align: start !important; position: relative !important; } .vp-variant-card:hover{ transform: translateY(-1px) !important; border-color: var(--vp-primary) !important; box-shadow: 0 14px 28px rgba(15,23,42,.095) !important; } .vp-variant-card.is-active{ border-color: var(--vp-primary) !important; box-shadow: 0 0 0 2px rgba(11,107,77,.10), 0 14px 28px rgba(15,23,42,.10) !important; } .vp-variant-card.is-active::before{ content: "Selected"; position: absolute; top: 10px; left: 12px; z-index: 2; font-size: 10px; font-weight: 950; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--vp-primary); background: #e9fbf3; border: 1px solid #c7f0dc; border-radius: 4px; padding: 5px 7px; } .vp-variant-card.is-active:after{ display: none !important; } .vp-variant-select{ height: 142px !important; min-height: 142px !important; padding: 38px 14px 12px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 6px !important; background: linear-gradient(180deg,#fff,#fbfdff) !important; } .vp-v-selected-dot{ position: absolute !important; top: 12px !important; right: 12px !important; width: 11px !important; height: 11px !important; border-radius: 999px !important; border: 1px solid #9ca3af !important; background: #fff !important; } .vp-variant-card.is-active .vp-v-selected-dot{ border-color: var(--vp-primary) !important; background: var(--vp-primary) !important; box-shadow: 0 0 0 4px rgba(11,107,77,.12) !important; } .vp-variant-select strong{ min-height: 42px !important; max-height: 42px !important; font-size: 14.5px !important; line-height: 1.28 !important; font-weight: 950 !important; color: #0f172a !important; overflow: hidden !important; padding-right: 4px !important; } .vp-v-price{ color: var(--vp-blue) !important; font-weight: 950 !important; font-size: 24px !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; margin: 0 !important; } .vp-variant-select del{ color: #8b95a5 !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1.2 !important; } .vp-variant-select em{ width: max-content !important; max-width: 100% !important; color: #15803d !important; background: #ecfdf5 !important; border: 1px solid #bbf7d0 !important; border-radius: 4px !important; padding: 4px 6px !important; font-size: 10px !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .05em !important; text-transform: uppercase !important; } .vp-variant-info{ left: 12px !important; right: 12px !important; bottom: 10px !important; top: auto !important; width: auto !important; height: 34px !important; border: 1px solid #dbeafe !important; border-radius: 5px !important; background: #f1f7ff !important; color: #1d4ed8 !important; font-size: 12px !important; font-weight: 950 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .vp-variant-info:hover{ background: #dbeafe !important; border-color: #bfdbfe !important; } @media (max-width: 575px){ .vp-variant-grid{ gap: 10px !important; padding-bottom: 12px !important; } .vp-variant-card{ flex-basis: 198px !important; width: 198px !important; height: 176px !important; min-height: 176px !important; } .vp-variant-select{ height: 132px !important; min-height: 132px !important; padding: 36px 12px 10px !important; } .vp-variant-select strong{ min-height: 39px !important; max-height: 39px !important; font-size: 13.5px !important; } .vp-v-price{ font-size: 22px !important; } } /* Cart drawer: clean layout that works with the improved cart.js renderer */ .vp-cart-drawer{ width: min(440px, 94vw) !important; max-width: 94vw !important; } .vp-cart-drawer .offcanvas-header{ padding: 22px 20px !important; background: linear-gradient(135deg,#0f172a,#172033) !important; color: #fff !important; } .vp-cart-drawer .btn-close{ background: transparent !important; color: #fff !important; opacity: 1 !important; font-size: 24px !important; } .vp-cart-drawer .offcanvas-body{ padding: 18px !important; } .vp-cart-drawer #cart-items-list{ padding: 0 !important; margin: 0 !important; } .vp-cart-empty{ padding: 22px 0 !important; text-align: center !important; color: var(--vp-muted) !important; } .vp-cart-item{ list-style: none !important; display: grid !important; grid-template-columns: 82px minmax(0,1fr) !important; gap: 12px !important; padding: 15px 0 !important; border-top: 1px solid var(--vp-line) !important; align-items: start !important; } .vp-cart-item:first-child{ border-top: 0 !important; } .vp-cart-item-img{ width: 82px !important; height: 82px !important; border: 1px solid #dfe6ee !important; border-radius: 5px !important; object-fit: contain !important; background: #fff !important; } .vp-cart-item-title{ display: block !important; font-size: 14px !important; line-height: 1.32 !important; font-weight: 950 !important; color: #0f172a !important; margin: 0 0 4px !important; } .vp-cart-item-variant{ display: block !important; color: #64748b !important; font-size: 12px !important; line-height: 1.35 !important; margin-bottom: 7px !important; } .vp-cart-item-remove{ border: 0 !important; background: transparent !important; color: #dc2626 !important; padding: 0 !important; font-size: 12px !important; font-weight: 950 !important; cursor: pointer !important; } .vp-cart-item-bottom{ grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 118px 1fr !important; gap: 12px !important; align-items: center !important; margin-left: 94px !important; margin-top: -42px !important; } .vp-cart-qty{ width: 118px !important; height: 36px !important; display: grid !important; grid-template-columns: 34px 50px 34px !important; border: 1px solid #d8e1ec !important; border-radius: 5px !important; overflow: hidden !important; background: #fff !important; } .vp-cart-qty button{ border: 0 !important; width: 34px !important; height: 34px !important; background: #f8fafc !important; color: #0f172a !important; font-size: 16px !important; font-weight: 950 !important; line-height: 1 !important; } .vp-cart-qty input{ width: 50px !important; height: 34px !important; border: 0 !important; text-align: center !important; font-size: 14px !important; font-weight: 950 !important; background: #fff !important; } .vp-cart-line-total{ justify-self: end !important; color: var(--vp-blue) !important; font-size: 18px !important; font-weight: 950 !important; letter-spacing: -0.02em !important; white-space: nowrap !important; } .vp-cart-row{ display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin: 8px 0 !important; } .vp-cart-total strong{ color: var(--vp-blue) !important; font-size: 22px !important; } .vp-cart-actions{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 16px !important; } .vp-cart-actions a{ height: 44px !important; border-radius: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 950 !important; text-decoration: none !important; } @media (max-width:575px){ .vp-cart-drawer{ width: 100vw !important; max-width: 100vw !important; } .vp-cart-drawer .offcanvas-body{ padding: 15px !important; } .vp-cart-item{ grid-template-columns: 78px minmax(0,1fr) !important; gap: 11px !important; } .vp-cart-item-img{ width: 78px !important; height: 78px !important; } .vp-cart-item-title{ font-size: 14px !important; -webkit-line-clamp: 3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .vp-cart-item-bottom{ margin-left: 89px !important; grid-template-columns: 112px minmax(0,1fr) !important; } .vp-cart-qty{ width: 112px !important; grid-template-columns: 32px 48px 32px !important; } .vp-cart-line-total{ font-size: 17px !important; } } /* Defensive old cart.js markup fallback, in case browser cache still serves old cart.js */ .vp-cart-drawer #cart-items-list li > div[class*="flex"]:not(.vp-cart-item-inner){ display: block !important; } .vp-cart-drawer #cart-items-list li div[class*="w-1/5"]{ position: static !important; width: auto !important; max-width: none !important; text-align: right !important; } /* source: veepee-storefront.css */ /* Veepee taxonomy, cart and homepage polish — loaded after the main theme. */ .vp-tax-section { overflow: hidden; } .vp-tax-carousel { padding: 8px 2px 20px; } .vp-tax-carousel .vp-track { gap: 18px; } .vp-tax-card { position: relative; isolation: isolate; min-width: 188px; min-height: 242px; padding: 18px 16px 16px; overflow: hidden; border: 1px solid #e6ebf2; border-radius: max(16px, var(--vp-radius, 16px)); background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 8px 28px rgba(15, 23, 42, .055); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .vp-tax-card::before { content: ""; position: absolute; inset: auto -38px -58px auto; width: 125px; height: 125px; border-radius: 50%; background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 10%, transparent); z-index: -1; transition: transform .35s ease; } .vp-tax-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 32%, #dbe3ec); box-shadow: 0 18px 42px rgba(15, 23, 42, .12); } .vp-tax-card:hover::before { transform: scale(1.35); } .vp-tax-card.is-static { cursor: default; } .vp-tax-card-shine { position: absolute; top: -70%; left: -55%; width: 42%; height: 230%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); opacity: 0; pointer-events: none; } .vp-tax-card:hover .vp-tax-card-shine { opacity: 1; animation: vpTaxShine .8s ease forwards; } @keyframes vpTaxShine { to { left: 125%; } } .vp-tax-card .vp-tax-icon { display: grid; place-items: center; width: 142px; height: 142px; margin: 0 auto 15px; overflow: hidden; border: 1px solid #edf1f5; border-radius: 22px; background: linear-gradient(145deg, #f8fafc, #ffffff); box-shadow: inset 0 0 0 6px #fff, 0 8px 20px rgba(15,23,42,.06); } .vp-tax-card .vp-tax-icon img { width: 100%; height: 100%; padding: 7px; object-fit: cover; transition: transform .38s ease; } .vp-tax-card--brand .vp-tax-icon img { object-fit: contain; padding: 16px; } .vp-tax-card:hover .vp-tax-icon img { transform: scale(1.06); } .vp-tax-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 58px; font-weight: 900; color: var(--vp-primary, #0b6b4d); background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), transparent 35%), color-mix(in srgb, var(--vp-primary, #0b6b4d) 12%, #fff); } .vp-tax-card > strong { display: block; min-height: 44px; color: #0f172a; font-size: 15px; line-height: 1.42; text-align: center; } .vp-tax-card-arrow { display: grid; place-items: center; position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; color: var(--vp-primary, #0b6b4d); background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 11%, #fff); opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; } .vp-tax-card:hover .vp-tax-card-arrow { opacity: 1; transform: translateX(0); } /* Homepage service cards based on the supplied section. */ .vp-info-grid > div { position: relative; overflow: hidden; padding: 25px 24px 25px 76px !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; background: linear-gradient(145deg, #fff, #fbfdff) !important; box-shadow: 0 8px 24px rgba(15,23,42,.045); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .vp-info-grid > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--vp-primary, #0b6b4d), var(--vp-blue, #0b5ed7)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; } .vp-info-grid > div:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 30%, #dbe3ec) !important; box-shadow: 0 16px 34px rgba(15,23,42,.10); } .vp-info-grid > div:hover::after { transform: scaleX(1); } .vp-info-icon { position: absolute; left: 22px; top: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--vp-primary, #0b6b4d); background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 11%, #fff); transition: transform .25s ease; } .vp-info-icon svg { width: 22px; height: 22px; } .vp-info-grid > div:hover .vp-info-icon { transform: rotate(-5deg) scale(1.08); } .vp-info-grid strong { color: #0f172a; } .vp-info-grid span:not(.vp-info-icon) { color: #64748b; } /* Add-to-cart feedback and toast. */ .btn-add-cart { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn-add-cart:active { transform: scale(.97); } .btn-add-cart.is-added { background: #15803d !important; border-color: #15803d !important; color: #fff !important; box-shadow: 0 8px 20px rgba(21,128,61,.22); } .vp-cart-check { font-weight: 900; } .vp-cart-toast { position: fixed; z-index: 10080; top: 24px; right: 24px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(460px, calc(100vw - 30px)); padding: 14px 14px; border: 1px solid #dfe7e3; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 24px 70px rgba(15,23,42,.22); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-16px) scale(.98); transition: opacity .24s ease, transform .24s ease, visibility .24s ease; } .vp-cart-toast::before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; border-radius: 0 0 18px 18px; background: var(--vp-primary, #0b6b4d); transform-origin: left; } .vp-cart-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .vp-cart-toast.is-visible::before { animation: vpToastTimer 4.2s linear forwards; } @keyframes vpToastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } } .vp-cart-toast > img { width: 62px; height: 62px; object-fit: contain; padding: 4px; border: 1px solid #edf1f5; border-radius: 12px; background: #fff; } .vp-cart-toast > div { min-width: 0; } .vp-cart-toast span { display: block; margin-bottom: 2px; color: #15803d; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .vp-cart-toast strong { display: block; overflow: hidden; color: #0f172a; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; } .vp-cart-toast small { color: #64748b; } .vp-cart-toast-view { border: 0; border-radius: 10px; padding: 10px 12px; color: var(--vp-button-text, #fff); background: var(--vp-primary, #0b6b4d); font-weight: 800; cursor: pointer; } .vp-cart-toast-close { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #e2e8f0; border-radius: 50%; color: #475569; background: #fff; box-shadow: 0 5px 14px rgba(15,23,42,.12); cursor: pointer; } /* Cart drawer rows and quantity controls. */ #cart-items-list { list-style: none; margin: 0; padding: 0; } .vp-cart-line { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; padding: 15px 0; border-bottom: 1px solid #edf1f5; } .vp-cart-line > img { width: 74px; height: 74px; object-fit: contain; border: 1px solid #edf1f5; border-radius: 12px; background: #fff; } .vp-cart-line-main { min-width: 0; } .vp-cart-line-main > strong { display: -webkit-box; overflow: hidden; color: #0f172a; font-size: 13px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vp-cart-line-main > span { display: block; margin: 4px 0 8px; color: #64748b; font-size: 12px; } .vp-cart-variant { display: block; color: var(--vp-primary, #0b6b4d); } .vp-cart-qty { display: inline-grid; grid-template-columns: 30px 34px 30px; align-items: center; overflow: hidden; border: 1px solid #dbe3ec; border-radius: 9px; } .vp-cart-qty button { height: 30px; border: 0; color: #0f172a; background: #f8fafc; font-size: 17px; cursor: pointer; } .vp-cart-qty b { text-align: center; font-size: 12px; } .vp-cart-line-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; } .vp-cart-line-side > strong { color: #0f172a; font-size: 13px; white-space: nowrap; } .vp-cart-remove { padding: 0; border: 0; color: #dc2626; background: transparent; font-size: 11px; cursor: pointer; } .vp-cart-empty { display: grid; place-items: center; gap: 5px; padding: 44px 14px; color: #64748b; text-align: center; } .vp-cart-empty-icon { font-size: 38px; filter: grayscale(1); opacity: .5; } .vp-cart-empty strong { color: #0f172a; } .vp-cart-checkout.is-disabled { opacity: .5; pointer-events: none; } @media (max-width: 767px) { .vp-tax-card { min-width: 158px; min-height: 214px; padding: 14px 12px; } .vp-tax-card .vp-tax-icon { width: 122px; height: 122px; border-radius: 18px; } .vp-tax-card > strong { min-height: 40px; font-size: 14px; } .vp-info-grid > div { padding: 20px 18px 20px 68px !important; } .vp-info-icon { left: 18px; top: 20px; } .vp-cart-toast { top: auto; right: 15px; bottom: 82px; grid-template-columns: 54px minmax(0, 1fr); } .vp-cart-toast > img { width: 54px; height: 54px; } .vp-cart-toast-view { grid-column: 1 / -1; width: 100%; } } @media (prefers-reduced-motion: reduce) { .vp-tax-card, .vp-tax-card *, .vp-info-grid > div, .vp-info-icon, .vp-cart-toast, .btn-add-cart { animation: none !important; transition: none !important; } } /* V3: original-proportion brand logos in a shorter, wider card. */ .vp-tax-section--brand .vp-tax-carousel { padding-top: 5px; padding-bottom: 14px; } .vp-tax-card--brand { min-width: 248px; min-height: 156px; padding: 12px 13px 13px; } .vp-tax-card--brand::before { width: 95px; height: 95px; right: -28px; bottom: -48px; } .vp-tax-card--brand .vp-tax-icon { width: 100%; height: 100px; margin: 0 auto 9px; border-radius: 13px; background: #ffffff; box-shadow: inset 0 0 0 1px #eef2f7, 0 5px 16px rgba(15, 23, 42, .045); } .vp-tax-card--brand .vp-tax-icon img { width: 100%; height: 100%; padding: 2px; object-fit: contain; object-position: center; image-rendering: auto; filter: none; } .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.035); } .vp-tax-card--brand > strong { min-height: 24px; overflow: hidden; font-size: 14px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; } /* Clean text-link hover animation. */ .vp-header-nav a, .vp-mobile-menu-v5 .offcanvas-body > a, .vp-view-all, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo), .vp-cart-continue { position: relative; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left calc(100% - 1px); background-size: 0 1px; transition: color .2s ease, background-size .24s ease, transform .2s ease; } .vp-header-nav a:hover, .vp-mobile-menu-v5 .offcanvas-body > a:hover, .vp-view-all:hover, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo):hover, .vp-cart-continue:hover { color: var(--vp-primary, #0b6b4d); background-size: 100% 1px; transform: translateY(-1px); } /* Cart uses a clean, readable font without changing the rest of the website. */ .vp-cart-drawer, .vp-cart-toast, .vp-header-cart-btn, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"] { font-family: "Inter", "Segoe UI", Arial, sans-serif; } .vp-cart-drawer .offcanvas-header { padding: 21px 22px 17px; border-bottom: 1px solid #edf1f5; background: linear-gradient(180deg, #ffffff, #fbfdff); } .vp-cart-drawer .offcanvas-header h5 { color: #0f172a; font-size: 19px; font-weight: 800; letter-spacing: -.025em; } .vp-cart-drawer .offcanvas-header small { display: block; margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 500; } .vp-cart-drawer .offcanvas-body { padding: 12px 22px 24px; } .vp-cart-line { border-radius: 13px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .vp-cart-line:hover { background: #fbfdff; } .vp-cart-line.is-qty-changing { animation: vpCartLineTap .32s ease; } .vp-cart-line-main > strong { font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .vp-cart-line-main > span, .vp-cart-line-side > strong { font-weight: 700; } .vp-cart-qty button { transition: background .18s ease, color .18s ease, transform .14s ease; } .vp-cart-qty button:hover { color: #ffffff; background: var(--vp-primary, #0b6b4d); } .vp-cart-qty button:active { transform: scale(.86); } .vp-cart-remove { font-family: inherit; font-weight: 600; transition: opacity .18s ease, transform .18s ease; } .vp-cart-remove:hover { opacity: .72; transform: translateX(-2px); } /* Add-to-cart button ripple, cart pulse and flying product feedback. */ .btn-add-cart { position: relative; overflow: hidden; isolation: isolate; } .btn-add-cart.is-cart-clicked { animation: vpAddButtonTap .4s ease; } .vp-add-ripple { position: absolute; z-index: 1; width: 18px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .52); pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: vpAddRipple .58s ease-out forwards; } .vp-header-cart-btn, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"] { transform-origin: center; } .vp-header-cart-btn.is-cart-clicked, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"].is-cart-clicked { animation: vpCartButtonClick .42s ease; } .vp-header-cart-btn.is-cart-bump, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"].is-cart-bump { animation: vpCartBump .52s cubic-bezier(.2, .85, .32, 1.35); } #cartCount.is-count-bump, #cartCountMobile.is-count-bump, [data-vp-cart-count].is-count-bump { animation: vpCountBump .48s ease; } .vp-cart-flyer { position: fixed; z-index: 11050; width: 58px; height: 58px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 13px; object-fit: contain; background: #ffffff; box-shadow: 0 14px 38px rgba(15, 23, 42, .22); pointer-events: none; will-change: transform, opacity; } @keyframes vpAddButtonTap { 0% { transform: scale(1); } 42% { transform: scale(.95); } 72% { transform: scale(1.025); } 100% { transform: scale(1); } } @keyframes vpAddRipple { 0% { opacity: .7; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(16); } } @keyframes vpCartButtonClick { 0%, 100% { transform: scale(1); } 45% { transform: scale(.9) rotate(-3deg); } 75% { transform: scale(1.06) rotate(2deg); } } @keyframes vpCartBump { 0%, 100% { transform: scale(1); } 38% { transform: scale(1.13) rotate(-4deg); } 68% { transform: scale(.98) rotate(2deg); } } @keyframes vpCountBump { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.35); } } @keyframes vpCartLineTap { 0%, 100% { transform: scale(1); } 50% { transform: scale(.985); background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 7%, #fff); } } @media (max-width: 767px) { .vp-tax-card--brand { min-width: 202px; min-height: 139px; padding: 10px 11px 11px; } .vp-tax-card--brand .vp-tax-icon { width: 100%; height: 84px; margin-bottom: 8px; border-radius: 11px; } .vp-tax-card--brand > strong { min-height: 22px; font-size: 13px; } .vp-cart-drawer .offcanvas-header { padding: 18px 18px 15px; } .vp-cart-drawer .offcanvas-body { padding: 10px 18px 92px; } } @media (prefers-reduced-motion: reduce) { .vp-add-ripple, .vp-cart-flyer, .vp-header-cart-btn, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"], #cartCount, #cartCountMobile, [data-vp-cart-count], .vp-cart-line { animation: none !important; } } /* -------------------------------------------------------------------------- V4 clean UI: larger taxonomy media, compact section links, polished pages. These overrides are intentionally lightweight and loaded after V3 styles. -------------------------------------------------------------------------- */ /* The top action area now contains only the cart control. */ .vp-header-actions { justify-content: flex-end; } /* Larger category/tag pictures: the media reaches the visible image border. */ .vp-tax-card { min-width: 208px; min-height: 246px; padding: 10px 10px 14px; border-radius: 17px; background: #fff; box-shadow: 0 7px 22px rgba(15, 23, 42, .055); } .vp-tax-card::before, .vp-tax-card-shine { display: none; } .vp-tax-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 23, 42, .10); } .vp-tax-card .vp-tax-icon { width: 100%; height: 170px; margin: 0 auto 12px; border: 1px solid #e8edf3; border-radius: 13px; background: #f8fafc; box-shadow: none; } .vp-tax-card .vp-tax-icon img, .vp-tax-card--category .vp-tax-icon img, .vp-tax-card--tag .vp-tax-icon img { width: 100%; height: 100%; padding: 0; object-fit: cover; object-position: center; } .vp-tax-card:hover .vp-tax-icon img { transform: scale(1.035); } .vp-tax-card > strong { min-height: 42px; padding: 0 6px; font-size: 14px; font-weight: 750; line-height: 1.42; } .vp-tax-card-arrow { right: 10px; bottom: 10px; width: 25px; height: 25px; } /* Brand cards remain short, while the original logo uses almost the full frame. */ .vp-tax-card--brand { min-width: 270px; min-height: 174px; padding: 9px 9px 11px; } .vp-tax-card--brand .vp-tax-icon { width: 100%; height: 118px; margin: 0 auto 8px; border-radius: 12px; background: #fff; } .vp-tax-card--brand .vp-tax-icon img { width: 100%; height: 100%; padding: 0; object-fit: contain; object-position: center; transform: scale(1.06); } .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.10); } .vp-tax-card--brand > strong { min-height: 24px; padding: 0 8px; font-size: 14px; } /* Clean, compact links displayed at the end of homepage sections. */ .vp-section-actions { gap: 8px; } .vp-view-all, .vp-section-actions > a.vp-view-all { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-height: 36px; padding: 7px 12px; border: 1px solid #dfe6ee; border-radius: 999px; color: #334155; background: #fff !important; background-image: none !important; box-shadow: 0 3px 10px rgba(15, 23, 42, .035); font-size: 13px; font-weight: 750; line-height: 1; white-space: nowrap; text-decoration: none; transform: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .vp-view-all::after { content: "→"; display: inline-block; font-size: 15px; line-height: 1; transition: transform .2s ease; } .vp-view-all:hover { color: var(--vp-primary, #0b6b4d); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 34%, #dfe6ee); background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 5%, #fff) !important; box-shadow: 0 7px 16px rgba(15, 23, 42, .07); transform: translateY(-1px); } .vp-view-all:hover::after { transform: translateX(3px); } /* Keep all navigation/footer text animations only as wide as the text itself. */ .vp-header-nav a, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo), .vp-cart-continue { width: fit-content; background-image: none !important; } .vp-header-nav a::after, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo)::after, .vp-cart-continue::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; border-radius: 999px; background: currentColor; transition: width .22s ease; } .vp-header-nav a:hover::after, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo):hover::after, .vp-cart-continue:hover::after { width: calc(100% + 5px); } .vp-footer-v6 .vp-footer-grid > div:not(.vp-footer-about) { display: flex; flex-direction: column; align-items: flex-start; } .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo) { padding: 4px 0; } .vp-mobile-menu-v5 .offcanvas-body > a { background-image: none !important; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .vp-mobile-menu-v5 .offcanvas-body > a:hover { background-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 6%, #fff); transform: translateX(3px); } /* Clean shared look for shop, category, tag, brand and search pages. */ .vp-collection-page { padding: 38px 0 72px; background: linear-gradient(180deg, #f8fafc 0, #fff 260px); } .vp-collection-hero { margin-bottom: 28px; padding: 26px 28px; border: 1px solid #e4eaf1; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px rgba(15, 23, 42, .055); } .vp-collection-hero h1 { margin: 5px 0 7px; color: #0f172a; letter-spacing: -.035em; } .vp-collection-hero p { color: #64748b; } .vp-collection-search { overflow: hidden; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15, 23, 42, .035); } .vp-collection-search input { border: 0 !important; outline: 0; } .vp-collection-search button { border: 0; color: var(--vp-button-text, #fff); background: var(--vp-primary, #0b6b4d); font-weight: 750; } .vp-product-grid { gap: 18px; } .vp-product-card { overflow: hidden; border: 1px solid #e5eaf0; border-radius: 17px; background: #fff; box-shadow: 0 7px 22px rgba(15, 23, 42, .05); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .vp-product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 24%, #dfe6ee); box-shadow: 0 15px 34px rgba(15, 23, 42, .10); } .vp-product-media { background: #fff; } .vp-product-media img { transition: transform .28s ease; } .vp-product-card:hover .vp-product-media img { transform: scale(1.025); } .vp-product-title a, .vp-product-cat { text-decoration: none; } .vp-product-title a:hover, .vp-product-cat:hover { color: var(--vp-primary, #0b6b4d); } .vp-pagination { margin-top: 34px; } .vp-pagination nav > div:last-child, .vp-pagination nav > div:last-child > div { gap: 5px; } .vp-empty-state { border: 1px dashed #d5dde7; border-radius: 18px; background: #fff; } /* Product, checkout and payment surfaces use the same clean visual system. */ .vp-product-page, .vp-checkout-page { background: linear-gradient(180deg, #f8fafc 0, #fff 340px); } .vp-product-gallery, .vp-product-summary, .vp-panel, .vp-checkout-card, .pay-card { border-color: #e4eaf1 !important; border-radius: 18px !important; background: #fff; box-shadow: 0 9px 28px rgba(15, 23, 42, .055) !important; } .vp-product-gallery, .vp-product-summary, .vp-panel, .vp-checkout-card { transition: border-color .2s ease, box-shadow .2s ease; } .vp-main-image, .vp-thumb, .vp-checkout-product-row img, .payment-img { border-color: #e6ebf1 !important; background: #fff !important; } .vp-breadcrumbs a, .vp-clean-link, .vp-checkout-back, .vp-coupon-block > a { color: #475569; text-decoration: none; transition: color .18s ease; } .vp-breadcrumbs a:hover, .vp-clean-link:hover, .vp-checkout-back:hover, .vp-coupon-block > a:hover { color: var(--vp-primary, #0b6b4d); } .vp-checkout-hero, .pay-hero { border-radius: 18px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .045); } .vp-payment-page .form-control, .vp-checkout-page .form-control, .vp-checkout-page input, .vp-checkout-page select, .vp-checkout-page textarea { border-color: #dfe6ee; border-radius: 10px; } .vp-payment-page .form-control:focus, .vp-checkout-page .form-control:focus, .vp-checkout-page input:focus, .vp-checkout-page select:focus, .vp-checkout-page textarea:focus { border-color: var(--vp-primary, #0b6b4d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-primary, #0b6b4d) 13%, transparent); outline: 0; } .account-card { transition: transform .2s ease, border-color .2s ease, background-color .2s ease; } .account-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 28%, #d1d5db); background: #fff; } /* Clean CMS information and order confirmation pages. */ .vp-content-page, .vp-thankyou-page { padding: 42px 0 74px; background: linear-gradient(180deg, #f8fafc 0, #fff 300px); } .vp-content-card, .vp-thankyou-card { width: min(100%, 1040px); margin: 0 auto; border: 1px solid #e4eaf1; border-radius: 20px; background: #fff; box-shadow: 0 12px 36px rgba(15, 23, 42, .065); } .vp-content-card { padding: clamp(22px, 4vw, 46px); } .vp-content-header { margin-bottom: 24px; } .vp-content-header h1 { margin: 6px 0 0; color: #0f172a; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.045em; } .vp-content-cover { overflow: hidden; margin: 0 0 30px; border: 1px solid #e7ecf2; border-radius: 16px; background: #f8fafc; } .vp-content-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; } .vp-content-prose { color: #334155; font-size: 16px; line-height: 1.78; } .vp-content-prose h2, .vp-content-prose h3, .vp-content-prose h4 { margin-top: 1.6em; color: #0f172a; line-height: 1.25; } .vp-content-prose a { color: var(--vp-primary, #0b6b4d); text-underline-offset: 3px; } .vp-content-prose img { max-width: 100%; height: auto; border-radius: 12px; } .vp-thankyou-card { max-width: 680px; padding: clamp(30px, 5vw, 58px); text-align: center; } .vp-thankyou-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--vp-primary, #0b6b4d); box-shadow: 0 10px 28px color-mix(in srgb, var(--vp-primary, #0b6b4d) 26%, transparent); font-size: 32px; font-weight: 900; } .vp-thankyou-card h1 { margin: 7px 0 12px; color: #0f172a; letter-spacing: -.04em; } .vp-thankyou-card p { margin: 0 auto; max-width: 530px; color: #64748b; line-height: 1.7; } .vp-thankyou-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .vp-thankyou-actions .vp-clean-link { padding: 10px 12px; font-weight: 700; } /* Avoid unnecessary hover work on touch devices. */ @media (hover: none) { .vp-tax-card:hover, .vp-product-card:hover, .account-card:hover, .vp-view-all:hover { transform: none; } .vp-tax-card:hover .vp-tax-icon img, .vp-product-card:hover .vp-product-media img { transform: none; } .vp-tax-card--brand .vp-tax-icon img, .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.04); } } @media (max-width: 767px) { .vp-tax-card { min-width: 172px; min-height: 218px; padding: 8px 8px 12px; } .vp-tax-card .vp-tax-icon { width: 100%; height: 142px; margin-bottom: 10px; border-radius: 11px; } .vp-tax-card > strong { min-height: 39px; padding: 0 4px; font-size: 13px; } .vp-tax-card--brand { min-width: 216px; min-height: 148px; padding: 8px 8px 10px; } .vp-tax-card--brand .vp-tax-icon { height: 94px; margin-bottom: 7px; } .vp-tax-card--brand > strong { min-height: 22px; font-size: 13px; } .vp-view-all, .vp-section-actions > a.vp-view-all { min-height: 34px; padding: 7px 10px; font-size: 12px; } .vp-collection-page, .vp-content-page, .vp-thankyou-page { padding-top: 24px; padding-bottom: 52px; } .vp-collection-hero { padding: 21px 18px; border-radius: 15px; } .vp-content-card, .vp-thankyou-card { border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .vp-view-all, .vp-view-all::after, .vp-header-nav a::after, .vp-footer-v6 .vp-footer-grid a::after, .vp-product-card, .vp-product-media img, .account-card { transition: none !important; } } /* -------------------------------------------------------------------------- V5: visibly larger taxonomy media, strict stock states and lighter UI work. -------------------------------------------------------------------------- */ /* Category and popular-tag pictures now use almost the complete card width. */ .vp-tax-card:not(.vp-tax-card--brand) { min-width: 242px; min-height: 302px; padding: 8px 8px 14px; border-radius: 18px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { width: 100%; height: 222px; margin: 0 0 12px; border-radius: 14px; border-color: #e3e9f0; } .vp-tax-card--category .vp-tax-icon img, .vp-tax-card--tag .vp-tax-icon img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; object-position: center; } /* Brand logos stay original, but the logo frame and visible logo are larger. */ .vp-tax-card--brand { min-width: 320px; min-height: 218px; padding: 8px 8px 12px; } .vp-tax-card--brand .vp-tax-icon { width: 100%; height: 160px; margin: 0 0 9px; padding: 0; border-radius: 14px; } .vp-tax-card--brand .vp-tax-icon img { display: block; width: 100%; height: 100%; padding: 0; object-fit: contain; object-position: center; transform: scale(1.08); } .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.12); } /* Cleaner section-ending links with no overlong animation line. */ .vp-view-all, .vp-section-actions > a.vp-view-all { min-height: 38px; padding: 8px 14px; border-color: #dbe3ec; box-shadow: none; font-size: 13px; font-weight: 700; } .vp-view-all:hover { box-shadow: 0 5px 14px rgba(15, 23, 42, .06); } .vp-header-nav a:hover::after, .vp-footer-v6 .vp-footer-grid a:not(.vp-footer-logo):hover::after, .vp-cart-continue:hover::after { width: calc(100% + 3px); } /* Use a local system font in cart UI: clean appearance without another font request. */ .vp-cart-drawer, .vp-cart-toast, .vp-header-cart-btn, .vp-mobile-bottom-nav [data-bs-target="#offcanvasRight"] { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Stock states are clear and cannot look clickable. */ .vp-product-card.is-out-of-stock .vp-product-media img { opacity: .58; filter: grayscale(.14); } .vp-stock-badge { position: absolute; z-index: 3; top: 11px; left: 11px; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; color: #fff; background: #475569; font-size: 11px; font-weight: 800; letter-spacing: .02em; } .btn-add-cart.is-disabled, .btn-add-cart:disabled, .vp-buy-main.is-disabled, .vp-action-box.is-out-of-stock .vp-qty-control { cursor: not-allowed !important; opacity: .58; box-shadow: none !important; transform: none !important; } .vp-product-card .vp-cart-btn:disabled { min-width: 92px; color: #fff; background: #64748b; border-color: #64748b; } .vp-variant-card.is-out-of-stock { opacity: .56; } .vp-variant-card.is-out-of-stock .vp-variant-select { cursor: not-allowed; } .vp-out-of-stock-note, .vp-product-alert { padding: 11px 13px; border: 1px solid #fecaca; border-radius: 11px; color: #991b1b; background: #fff7f7; font-size: 13px; line-height: 1.5; } .vp-product-alert { margin: 18px 0; } .vp-out-of-stock-note { margin: 10px 0 0; } /* Server stock check feedback. */ .btn-add-cart.is-loading { cursor: wait; opacity: .86; } .vp-cart-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: vpCartSpin .65s linear infinite; } .vp-cart-toast.is-error { border-color: #fecaca; background: #fffafa; } .vp-cart-toast.is-error::before { background: #dc2626; } .vp-cart-toast.is-error span { color: #dc2626; } @keyframes vpCartSpin { to { transform: rotate(360deg); } } /* Reduce rendering work while keeping the clean hover response. */ .vp-tax-card, .vp-product-card, .vp-view-all { backface-visibility: hidden; } .vp-tax-card img, .vp-product-card img { image-rendering: auto; } @media (max-width: 767px) { .vp-tax-card:not(.vp-tax-card--brand) { min-width: 188px; min-height: 246px; padding: 7px 7px 11px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { height: 168px; margin-bottom: 9px; border-radius: 12px; } .vp-tax-card--brand { min-width: 246px; min-height: 174px; padding: 7px 7px 10px; } .vp-tax-card--brand .vp-tax-icon { height: 118px; margin-bottom: 7px; } .vp-tax-card--brand .vp-tax-icon img, .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .vp-cart-spinner { animation: none; } } /* -------------------------------------------------------------------------- V5.1 final media sizing: the picture/logo frame reaches the visible card edge. -------------------------------------------------------------------------- */ .vp-tax-card:not(.vp-tax-card--brand) { min-width: 270px; min-height: 334px; padding: 6px 6px 13px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { height: 252px; margin-bottom: 11px; border-radius: 15px; } .vp-tax-card--brand { min-width: 360px; min-height: 250px; padding: 6px 6px 11px; } .vp-tax-card--brand .vp-tax-icon { height: 194px; margin-bottom: 8px; overflow: hidden; border-radius: 15px; } .vp-tax-card--brand .vp-tax-icon img { max-width: none; max-height: none; transform: scale(1.15); } .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.18); } /* Variant products use a clean options link instead of adding the wrong option. */ .vp-select-options-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; text-decoration: none; white-space: nowrap; } .vp-select-options-btn:hover, .vp-select-options-btn:focus-visible { color: var(--vp-button-text, #fff); text-decoration: none; } @media (max-width: 767px) { .vp-tax-card:not(.vp-tax-card--brand) { min-width: 210px; min-height: 278px; padding: 5px 5px 10px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { height: 190px; margin-bottom: 8px; } .vp-tax-card--brand { min-width: 282px; min-height: 198px; padding: 5px 5px 9px; } .vp-tax-card--brand .vp-tax-icon { height: 142px; margin-bottom: 6px; } .vp-tax-card--brand .vp-tax-icon img, .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.12); } } /* -------------------------------------------------------------------------- V6: enlarge the actual taxonomy artwork, reliable cart scrolling/backdrop, and lightweight site-wide motion. Card and media-frame dimensions are not enlarged here; only the artwork inside those existing frames is scaled. -------------------------------------------------------------------------- */ /* Restore compact card borders; enlarge the uploaded artwork inside them. */ .vp-tax-card:not(.vp-tax-card--brand) { min-width: 218px; min-height: 264px; padding: 7px 7px 12px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { height: 184px; margin-bottom: 10px; } .vp-tax-card--brand { min-width: 286px; min-height: 188px; padding: 7px 7px 10px; } .vp-tax-card--brand .vp-tax-icon { height: 132px; margin-bottom: 7px; } .vp-tax-card--category .vp-tax-icon, .vp-tax-card--tag .vp-tax-icon, .vp-tax-card--brand .vp-tax-icon { isolation: isolate; overflow: hidden; } .vp-tax-card--category .vp-tax-icon img, .vp-tax-card--tag .vp-tax-icon img { transform: scale(1.16); transform-origin: center; transition: transform .34s cubic-bezier(.2,.72,.24,1), filter .24s ease; } .vp-tax-card--brand .vp-tax-icon img { transform: scale(1.30); transform-origin: center; transition: transform .34s cubic-bezier(.2,.72,.24,1), filter .24s ease; } @media (hover: hover) and (pointer: fine) { .vp-tax-card--category:hover .vp-tax-icon img, .vp-tax-card--tag:hover .vp-tax-icon img { transform: scale(1.23) rotate(.45deg); filter: saturate(1.035) contrast(1.015); } .vp-tax-card--brand:hover .vp-tax-icon img { transform: scale(1.37) translateY(-1px); filter: saturate(1.025) contrast(1.01); } } .vp-tax-card--category:active .vp-tax-icon img, .vp-tax-card--tag:active .vp-tax-icon img { transform: scale(1.20); } .vp-tax-card--brand:active .vp-tax-icon img { transform: scale(1.34); } /* Offcanvas always occupies the usable viewport and only the product list scrolls. */ .vp-cart-drawer { height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } .vp-cart-drawer .offcanvas-header { flex: 0 0 auto; } .vp-cart-drawer .offcanvas-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: max(14px, env(safe-area-inset-bottom)); } .vp-cart-scroll-area { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #cart-items-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-right: 4px; } #cart-items-list::-webkit-scrollbar { width: 6px; } #cart-items-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(100, 116, 139, .32); } .vp-cart-footer { position: relative; z-index: 2; flex: 0 0 auto; margin-top: 8px; padding-top: 12px; border-top: 1px solid #e7edf3; background: #fff; box-shadow: 0 -10px 24px rgba(15, 23, 42, .045); } .vp-cart-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .vp-cart-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 11px; text-align: center; white-space: nowrap; } /* A softer backdrop plus JS cleanup prevents a black layer from remaining behind. */ .offcanvas-backdrop { background-color: #0f172a; } .offcanvas-backdrop.show { opacity: .24; } /* Lightweight site motion: transform/opacity only, no continuous animation. */ @media (prefers-reduced-motion: no-preference) { .vp-main-shell { animation: vpPageEnter .38s cubic-bezier(.2,.72,.24,1) both; } .vp-main-shell :where(.vp-product-card, .vp-tax-card, .vp-panel, .vp-content-card, .vp-checkout-card, .account-card) { transition-property: transform, border-color, box-shadow; transition-duration: .22s; transition-timing-function: ease; } .vp-main-shell :where(button, .btn, [class*="-btn"]):active { transform: scale(.975); } } @keyframes vpPageEnter { from { opacity: .01; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 767px) { .vp-tax-card:not(.vp-tax-card--brand) { min-width: 174px; min-height: 226px; padding: 6px 6px 10px; } .vp-tax-card:not(.vp-tax-card--brand) .vp-tax-icon { height: 150px; margin-bottom: 8px; } .vp-tax-card--brand { min-width: 232px; min-height: 158px; padding: 6px 6px 8px; } .vp-tax-card--brand .vp-tax-icon { height: 104px; margin-bottom: 6px; } .vp-tax-card--category .vp-tax-icon img, .vp-tax-card--tag .vp-tax-icon img { transform: scale(1.14); } .vp-tax-card--brand .vp-tax-icon img { transform: scale(1.25); } .vp-cart-drawer { width: min(94vw, 420px); } .vp-cart-drawer .offcanvas-body { padding: 8px 14px max(10px, env(safe-area-inset-bottom)); } .vp-cart-line { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 9px; padding: 12px 0; } .vp-cart-line > img { width: 62px; height: 62px; } .vp-cart-actions { grid-template-columns: 1fr; gap: 8px; } .vp-cart-actions > a { min-height: 42px; } } @media (prefers-reduced-motion: reduce) { .vp-tax-card--category .vp-tax-icon img, .vp-tax-card--tag .vp-tax-icon img, .vp-tax-card--brand .vp-tax-icon img, .vp-main-shell { animation: none !important; transition: none !important; } } /* * Veepee V7 — actual taxonomy artwork enlargement + lightweight motion. * Loaded after veepee-enhancements-v1.css so these final rules are reliable. * Only compositor-friendly opacity/transform animation is used. */ /* -------------------------------------------------------------------------- CATEGORY + POPULAR TAGS: enlarge the ACTUAL image, not its card or border. -------------------------------------------------------------------------- */ .vp-tax-section--category .vp-tax-card, .vp-tax-section--tag .vp-tax-card { contain: layout paint; } .vp-tax-section--category .vp-tax-icon, .vp-tax-section--tag .vp-tax-icon { position: relative; isolation: isolate; overflow: hidden; contain: paint; } .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 138% !important; height: 138% !important; max-width: none !important; max-height: none !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; transform: translate3d(-50%, -50%, 0) scale(1) !important; transform-origin: center !important; backface-visibility: hidden; transition: transform .38s cubic-bezier(.2, .72, .24, 1), filter .25s ease !important; } @media (hover: hover) and (pointer: fine) { .vp-tax-section--category .vp-tax-card:hover .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-card:hover .vp-tax-icon > img { transform: translate3d(-50%, -50%, 0) scale(1.075) rotate(.35deg) !important; filter: saturate(1.045) contrast(1.02); } } .vp-tax-section--category .vp-tax-card:active .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-card:active .vp-tax-icon > img { transform: translate3d(-50%, -50%, 0) scale(1.035) !important; } /* Preserve the already-correct brand proportions while keeping the logo large. */ .vp-tax-section--brand .vp-tax-icon > img { width: 122% !important; height: 122% !important; max-width: none !important; max-height: none !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; } /* -------------------------------------------------------------------------- OPTIMIZED SITE-WIDE MOTION JavaScript adds .vp-reveal only to elements that will animate once. -------------------------------------------------------------------------- */ html.vp-motion-enhanced .vp-reveal { opacity: 0; transform: translate3d(0, 18px, 0) scale(.992); transition: opacity .52s cubic-bezier(.2, .72, .24, 1) var(--vp-reveal-delay, 0ms), transform .52s cubic-bezier(.2, .72, .24, 1) var(--vp-reveal-delay, 0ms); will-change: opacity, transform; } html.vp-motion-enhanced .vp-reveal.vp-reveal--left { transform: translate3d(-18px, 0, 0) scale(.994); } html.vp-motion-enhanced .vp-reveal.vp-reveal--right { transform: translate3d(18px, 0, 0) scale(.994); } html.vp-motion-enhanced .vp-reveal.is-vp-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } /* Hero content animates whenever a slide becomes active. */ @media (prefers-reduced-motion: no-preference) { .vp-hero-slide.is-active .vp-hero-copy > * { animation: vpHeroContentIn .52s cubic-bezier(.2, .72, .24, 1) both; } .vp-hero-slide.is-active .vp-hero-copy > *:nth-child(2) { animation-delay: .06s; } .vp-hero-slide.is-active .vp-hero-copy > *:nth-child(3) { animation-delay: .11s; } .vp-hero-slide.is-active .vp-hero-copy > *:nth-child(4) { animation-delay: .16s; } } @keyframes vpHeroContentIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Clean interaction feedback throughout the storefront. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .vp-product-card, .vp-content-card, .vp-checkout-card, .vp-thankyou-card, .account-card, .vp-info-grid > div, .vp-wide-banner { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .vp-product-card:hover, .vp-content-card:hover, .account-card:hover, .vp-info-grid > div:hover { transform: translate3d(0, -4px, 0); } .vp-product-card .vp-product-media img { transition: transform .34s cubic-bezier(.2, .72, .24, 1); } .vp-product-card:hover .vp-product-media img { transform: scale(1.035); } .vp-info-grid > div:hover .vp-info-icon { transform: translate3d(0, -2px, 0) rotate(-3deg) scale(1.035); } .vp-view-all, .vp-clean-link, .vp-btn-primary, .vp-cart-btn, .vp-buy-main, .vp-add-main { transition: transform .2s ease, box-shadow .22s ease, background-color .2s ease, border-color .2s ease, color .2s ease; } .vp-view-all:hover, .vp-btn-primary:hover, .vp-cart-btn:hover, .vp-buy-main:hover, .vp-add-main:hover { transform: translate3d(0, -2px, 0); } } /* Buttons give quick tactile feedback without long animation work. */ .vp-main-shell :where(button, .btn, [class*="-btn"]):active { transform: scale(.975); } /* Small rendering wins without changing layout or carousel measurements. */ .vp-tax-icon, .vp-product-media, .vp-wide-banner, .vp-hero-slide { backface-visibility: hidden; } .vp-tax-icon img, .vp-product-media img { image-rendering: auto; } @media (max-width: 767px) { /* More aggressive artwork enlargement on small cards, border stays unchanged. */ .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img { width: 144% !important; height: 144% !important; } /* Touch feedback only; no expensive hover effects on mobile. */ .vp-tax-card, .vp-product-card, .vp-info-grid > div { -webkit-tap-highlight-color: transparent; } } @media (prefers-reduced-motion: reduce) { html.vp-motion-enhanced .vp-reveal, html.vp-motion-enhanced .vp-reveal.is-vp-visible, .vp-hero-slide.is-active .vp-hero-copy > *, .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-icon > img { opacity: 1 !important; animation: none !important; transition: none !important; } html.vp-motion-enhanced .vp-reveal, html.vp-motion-enhanced .vp-reveal.is-vp-visible { transform: none !important; } } /* * Veepee V8 — taxonomy image fit, visible section CTAs, compact mobile controls. * This file intentionally overrides earlier V6/V7 rules without changing card borders. * Performance: CSS-only interactions using opacity/transform; no new library or font. */ /* -------------------------------------------------------------------------- 1) CATEGORY / BRAND / TAG ARTWORK Keep the existing card and image-frame dimensions. Only correct the ACTUAL image. contain = full artwork stays visible, including text printed near image edges. -------------------------------------------------------------------------- */ .vp-tax-section .vp-tax-icon { position: relative; overflow: hidden; } .vp-tax-section .vp-tax-icon > img, .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 3px !important; object-fit: contain !important; object-position: center !important; transform: none !important; transform-origin: center !important; filter: none; backface-visibility: hidden; transition: filter .22s ease, opacity .22s ease !important; } /* Do not crop label/text inside uploaded category/tag/brand artwork on hover. */ @media (hover: hover) and (pointer: fine) { .vp-tax-section .vp-tax-card:hover .vp-tax-icon > img, .vp-tax-section--category .vp-tax-card:hover .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-card:hover .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-card:hover .vp-tax-icon > img { transform: none !important; filter: saturate(1.035) contrast(1.015); } .vp-tax-section .vp-tax-card:hover .vp-tax-icon { transform: translate3d(0, -2px, 0); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 30%, #e5e7eb); box-shadow: 0 9px 22px rgba(15, 23, 42, .075); } } .vp-tax-section .vp-tax-card:active .vp-tax-icon > img, .vp-tax-section--category .vp-tax-card:active .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-card:active .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-card:active .vp-tax-icon > img { transform: none !important; } .vp-tax-section .vp-tax-icon { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } /* -------------------------------------------------------------------------- 2) SECTION-END LINKS / SHOP BUTTON Product sections use a high-contrast Shop all button. Taxonomy keeps a clean outline. -------------------------------------------------------------------------- */ .vp-section-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 7px !important; } .vp-view-all, .vp-section-actions > a.vp-view-all { position: relative; isolation: isolate; overflow: hidden; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: max-content; min-height: 38px; padding: 8px 13px !important; border: 1px solid #d8e1ea !important; border-radius: 999px !important; color: #1f2937 !important; background: #fff !important; box-shadow: 0 3px 10px rgba(15, 23, 42, .045) !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap; text-decoration: none !important; transform: translateZ(0); transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* Visible Shop all button on Top Selling / Latest / Featured / Trending product sections. */ .vp-product-section .vp-view-all.vp-shop-all, .vp-product-section .vp-section-actions > a.vp-shop-all { color: var(--vp-button-text, #fff) !important; border-color: var(--vp-primary, #0b6b4d) !important; background: var(--vp-primary, #0b6b4d) !important; box-shadow: 0 6px 15px color-mix(in srgb, var(--vp-primary, #0b6b4d) 18%, transparent) !important; } /* Short, text-sized animated accent — never an overlong bar. */ .vp-view-all::before { content: ""; position: absolute; z-index: -1; left: 11px; right: 27px; bottom: 5px; height: 1.5px; border-radius: 999px; background: currentColor; opacity: .28; transform: scaleX(.28); transform-origin: left center; transition: transform .25s ease, opacity .25s ease; } .vp-view-all::after { content: "→" !important; display: inline-block; position: static !important; width: auto !important; height: auto !important; background: none !important; font-size: 15px; line-height: 1; opacity: .92; transform: translate3d(0, 0, 0); transition: transform .22s ease, opacity .22s ease !important; animation: vpSectionArrowHint 3.2s ease-in-out infinite; } @keyframes vpSectionArrowHint { 0%, 78%, 100% { transform: translate3d(0, 0, 0); } 86% { transform: translate3d(2px, 0, 0); } 92% { transform: translate3d(0, 0, 0); } 96% { transform: translate3d(2px, 0, 0); } } @media (hover: hover) and (pointer: fine) { .vp-view-all:hover { color: var(--vp-primary, #0b6b4d) !important; border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 44%, #d8e1ea) !important; background: color-mix(in srgb, var(--vp-primary, #0b6b4d) 6%, #fff) !important; box-shadow: 0 7px 17px rgba(15, 23, 42, .075) !important; transform: translate3d(0, -1px, 0) !important; } .vp-product-section .vp-view-all.vp-shop-all:hover, .vp-product-section .vp-section-actions > a.vp-shop-all:hover { color: var(--vp-button-text, #fff) !important; border-color: var(--vp-primary-hover, var(--vp-primary, #0b6b4d)) !important; background: var(--vp-primary-hover, var(--vp-primary, #0b6b4d)) !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--vp-primary, #0b6b4d) 23%, transparent) !important; } .vp-view-all:hover::before { opacity: .55; transform: scaleX(1); } .vp-view-all:hover::after { opacity: 1; transform: translate3d(3px, 0, 0); animation: none; } } .vp-view-all:active { transform: scale(.975) !important; } /* Arrow controls remain visible and compact beside the section link. */ .vp-section-actions .vp-arrow { display: inline-grid !important; place-items: center !important; flex: 0 0 auto; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d8e1ea !important; border-radius: 50% !important; color: #334155 !important; background: #fff !important; box-shadow: 0 3px 10px rgba(15, 23, 42, .04) !important; font-size: 21px !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; transform: none; transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease !important; } @media (hover: hover) and (pointer: fine) { .vp-section-actions .vp-arrow:hover { color: var(--vp-button-text, #fff) !important; border-color: var(--vp-primary, #0b6b4d) !important; background: var(--vp-primary, #0b6b4d) !important; transform: translate3d(0, -1px, 0); } } .vp-section-actions .vp-arrow:active { transform: scale(.94) !important; } /* -------------------------------------------------------------------------- 3) MOBILE: keep Shop all + arrows immediately above the product/image row. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .vp-product-section .vp-section-head, .vp-tax-section .vp-section-head, .vp-related-products .vp-section-head { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; margin-bottom: 5px !important; padding-bottom: 0 !important; } .vp-product-section .vp-section-head > div:first-child, .vp-tax-section .vp-section-head > div:first-child, .vp-related-products .vp-section-head > div:first-child { margin-bottom: 0 !important; } .vp-product-section .vp-section-head h2, .vp-tax-section .vp-section-head h2, .vp-related-products .vp-section-head h2 { margin-bottom: 3px !important; } .vp-product-section .vp-section-head p, .vp-tax-section .vp-section-head p, .vp-related-products .vp-section-head p { margin-bottom: 0 !important; } .vp-product-section .vp-section-actions, .vp-tax-section .vp-section-actions, .vp-related-products .vp-section-actions { align-self: flex-end !important; margin: 1px 0 2px !important; gap: 6px !important; } .vp-section-actions .vp-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; font-size: 19px !important; } .vp-view-all, .vp-section-actions > a.vp-view-all { min-height: 34px !important; padding: 7px 10px !important; font-size: 12px !important; } /* Remove extra vertical space between controls and the first visible card/image. */ .vp-product-section .vp-carousel, .vp-tax-section .vp-carousel, .vp-related-products .vp-carousel, .vp-product-section .vp-product-slider { margin-top: 0 !important; padding-top: 2px !important; } /* Full image remains visible on mobile as well; no V7 144% crop. */ .vp-tax-section .vp-tax-icon > img, .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; padding: 2px !important; object-fit: contain !important; transform: none !important; } } /* -------------------------------------------------------------------------- 4) LIGHTWEIGHT INTERACTION POLISH No layout-triggering animation; transforms/opacity only. -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .vp-section-head h2 a, .vp-product-title a, .vp-product-cat, .vp-clean-link { transition: color .2s ease, opacity .2s ease; } .vp-product-title a:hover, .vp-product-cat:hover, .vp-clean-link:hover { color: var(--vp-primary, #0b6b4d); } } /* Accessibility and battery-friendly fallback. */ @media (prefers-reduced-motion: reduce) { .vp-view-all, .vp-view-all::before, .vp-view-all::after, .vp-section-actions .vp-arrow, .vp-tax-section .vp-tax-icon, .vp-tax-section .vp-tax-icon > img { animation: none !important; transition: none !important; } } /* * Veepee V9 — simple taxonomy cards + cleaner product-detail pages. * Loaded last so it removes the over-styled taxonomy effects from older patches. * Performance: no framework, no new font, no continuous animations. */ /* ==========================================================================\n 1. CATEGORIES / BRANDS / POPULAR TAGS — SIMPLE, CLEAN, NOT "ANIME"\n ========================================================================== */ .vp-tax-section .vp-tax-card, .vp-tax-section .vp-tax-card.vp-reveal, html.vp-motion-enhanced .vp-tax-section .vp-tax-card.vp-reveal { opacity: 1 !important; transform: none !important; overflow: hidden !important; border: 1px solid #e5eaf0 !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } /* Remove decorative shine/blob/arrow effects from taxonomy cards. */ .vp-tax-section .vp-tax-card::before, .vp-tax-section .vp-tax-card-shine, .vp-tax-section .vp-tax-card-arrow { display: none !important; content: none !important; } .vp-tax-section .vp-tax-icon, .vp-tax-section .vp-tax-card:hover .vp-tax-icon { overflow: hidden !important; border: 1px solid #eef1f4 !important; border-radius: 11px !important; background: #fff !important; box-shadow: none !important; transform: none !important; transition: border-color .18s ease !important; } /* Actual artwork fills the available media area but never crops its own text/logo. */ .vp-tax-section .vp-tax-icon > img, .vp-tax-section--category .vp-tax-icon > img, .vp-tax-section--tag .vp-tax-icon > img, .vp-tax-section--brand .vp-tax-icon > img, .vp-tax-section .vp-tax-card:hover .vp-tax-icon > img, .vp-tax-section .vp-tax-card:active .vp-tax-icon > img { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; filter: none !important; transition: opacity .18s ease !important; } .vp-tax-section .vp-tax-card > strong { display: block !important; margin: 0 !important; padding: 0 4px !important; color: #172033 !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.35 !important; text-align: center !important; } @media (hover: hover) and (pointer: fine) { .vp-tax-section .vp-tax-card:hover { transform: translate3d(0, -2px, 0) !important; border-color: #cfd8e3 !important; box-shadow: 0 7px 18px rgba(15, 23, 42, .055) !important; } .vp-tax-section .vp-tax-card:hover .vp-tax-icon { border-color: #e1e7ed !important; } } /* Keep taxonomy reveal simple: section can animate, individual cards do not fly in. */ html.vp-motion-enhanced .vp-tax-section .vp-tax-card.vp-reveal, html.vp-motion-enhanced .vp-tax-section .vp-tax-card.vp-reveal.is-vp-visible { opacity: 1 !important; transform: none !important; will-change: auto !important; } /* ==========================================================================\n 2. PRODUCT DETAIL — CLEANER, CONSISTENT ON EVERY PRODUCT\n ========================================================================== */ .vp-product-page { background: linear-gradient(180deg, #f8fafc 0, #fff 280px) !important; } .vp-product-page .vp-breadcrumbs { margin-top: 14px !important; margin-bottom: 16px !important; color: #64748b !important; font-size: 13px !important; line-height: 1.5 !important; } .vp-product-page .vp-product-detail { align-items: start !important; gap: clamp(18px, 2.4vw, 32px) !important; } .vp-product-page .vp-product-gallery, .vp-product-page .vp-product-summary { border: 1px solid #e6eaf0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } .vp-product-page .vp-main-image { overflow: hidden !important; border: 1px solid #edf0f3 !important; border-radius: 13px !important; background: #fff !important; } .vp-product-page .vp-main-image > img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } .vp-product-page .vp-product-summary h1 { margin-top: 0 !important; color: #111827 !important; line-height: 1.2 !important; letter-spacing: -.018em !important; } .vp-product-page .vp-short-desc { margin-top: 12px !important; padding: 13px 14px !important; border: 1px solid #e7ebf0 !important; border-radius: 12px !important; color: #475569 !important; background: #fafbfc !important; line-height: 1.65 !important; } .vp-product-page .vp-short-desc > :first-child { margin-top: 0 !important; } .vp-product-page .vp-short-desc > :last-child { margin-bottom: 0 !important; } .vp-product-page .vp-action-box { margin-top: 16px !important; padding: 12px !important; border: 1px solid #e6eaf0 !important; border-radius: 13px !important; background: #fbfcfd !important; box-shadow: none !important; } .vp-product-page .vp-buy-promises > div { border-color: #e8edf2 !important; background: #fff !important; box-shadow: none !important; } .vp-product-page .vp-mini-specs { overflow: hidden !important; border: 1px solid #e6eaf0 !important; border-radius: 12px !important; background: #fff !important; } .vp-product-page .vp-mini-specs summary { cursor: pointer !important; font-weight: 650 !important; } .vp-product-page .vp-product-panels { display: grid !important; gap: 16px !important; margin-top: 22px !important; } .vp-product-page .vp-panel { min-height: 0 !important; height: auto !important; padding: clamp(18px, 2.4vw, 28px) !important; border: 1px solid #e6eaf0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 5px 18px rgba(15, 23, 42, .035) !important; } .vp-product-page .vp-panel > h2 { margin: 0 0 16px !important; color: #111827 !important; font-size: clamp(19px, 2vw, 24px) !important; line-height: 1.25 !important; letter-spacing: -.012em !important; } /* Imported descriptions sometimes contain huge fixed heights / blank spacing. */ .vp-product-description { position: relative !important; min-height: 0 !important; height: auto !important; color: #334155 !important; font-size: 15px !important; line-height: 1.72 !important; overflow-wrap: anywhere !important; } .vp-product-description > :first-child { margin-top: 0 !important; } .vp-product-description > :last-child { margin-bottom: 0 !important; } .vp-product-description p { margin: 0 0 13px !important; } .vp-product-description :where(p, div, span, li, td, th) { font-family: inherit !important; } .vp-product-description :where(p, li, td, th) { font-size: inherit !important; line-height: inherit !important; color: inherit !important; } .vp-product-description a { color: var(--vp-primary, #0b6b4d) !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px !important; } .vp-product-description h1, .vp-product-description h2, .vp-product-description h3, .vp-product-description h4 { margin: 24px 0 10px !important; color: #172033 !important; line-height: 1.3 !important; } .vp-product-description h1 { font-size: 25px !important; } .vp-product-description h2 { font-size: 22px !important; } .vp-product-description h3 { font-size: 19px !important; } .vp-product-description h4 { font-size: 17px !important; } .vp-product-description ul, .vp-product-description ol { margin: 10px 0 15px !important; padding-left: 22px !important; } .vp-product-description li { margin: 5px 0 !important; } .vp-product-description img { display: block !important; max-width: 100% !important; height: auto !important; margin: 16px auto !important; border-radius: 10px !important; } .vp-product-description iframe, .vp-product-description video { max-width: 100% !important; } .vp-product-description table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; } .vp-product-description th, .vp-product-description td { padding: 9px 10px !important; border: 1px solid #e6eaf0 !important; vertical-align: top !important; } /* Neutralize pasted editor heights that create giant blank blocks on only some products. */ .vp-product-description p[style*="height"], .vp-product-description div[style*="height"], .vp-product-description section[style*="height"], .vp-product-description span[style*="height"], .vp-product-description p[style*="min-height"], .vp-product-description div[style*="min-height"], .vp-product-description section[style*="min-height"] { height: auto !important; min-height: 0 !important; } /* Long real descriptions stay SEO-visible in the DOM but become easy to use. */ .vp-product-description.is-collapsed { max-height: 620px !important; overflow: hidden !important; } .vp-product-description.is-collapsed::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 86px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 82%); } .vp-description-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin-top: 14px; padding: 8px 13px; border: 1px solid #d7dee7; border-radius: 10px; color: #243244; background: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; } .vp-description-toggle[hidden] { display: none !important; } .vp-description-toggle::after { content: "↓"; font-size: 14px; transition: transform .18s ease; } .vp-description-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .vp-description-toggle:hover { color: var(--vp-primary, #0b6b4d); border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 35%, #d7dee7); background: #fbfcfd; transform: translateY(-1px); } } .vp-product-page .vp-spec-grid > div { border: 1px solid #e8edf2 !important; border-radius: 11px !important; background: #fbfcfd !important; box-shadow: none !important; } .vp-product-page .vp-faq-list details { border: 1px solid #e7ebf0 !important; border-radius: 11px !important; background: #fff !important; box-shadow: none !important; } .vp-product-page .vp-faq-list summary { cursor: pointer !important; font-weight: 650 !important; } @media (max-width: 767px) { .vp-product-page .vp-breadcrumbs { margin-top: 10px !important; margin-bottom: 12px !important; font-size: 12px !important; } .vp-product-page .vp-product-detail { gap: 14px !important; } .vp-product-page .vp-product-gallery, .vp-product-page .vp-product-summary, .vp-product-page .vp-panel { border-radius: 13px !important; box-shadow: 0 3px 12px rgba(15, 23, 42, .035) !important; } .vp-product-page .vp-product-panels { gap: 12px !important; margin-top: 15px !important; } .vp-product-page .vp-panel { padding: 16px !important; } .vp-product-description { font-size: 14px !important; line-height: 1.68 !important; } .vp-product-description.is-collapsed { max-height: 470px !important; } } @media (prefers-reduced-motion: reduce) { .vp-tax-section .vp-tax-card, .vp-tax-section .vp-tax-icon, .vp-description-toggle, .vp-description-toggle::after { transition: none !important; } } /* * Veepee V10 — restrained header logo + deterministic WhatsApp icon. * Loaded after all earlier theme patches. * No external font, library or JavaScript is added. */ /* Header logo: medium rather than oversized, with reserved dimensions to avoid CLS. */ .vp-header-v5 .vp-logo-v5 { display: inline-flex !important; width: 142px !important; height: 42px !important; max-width: 142px !important; min-width: 0 !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 142px !important; overflow: hidden !important; line-height: 0 !important; } .vp-header-v5 .vp-logo-v5 img { display: block !important; width: 100% !important; height: 100% !important; max-width: 142px !important; max-height: 42px !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; transform: none !important; filter: none !important; } /* The duplicate logo inside the closed mobile menu should be smaller and cheap to render. */ .vp-mobile-menu-v5 .vp-logo-v5 { width: 116px !important; height: 34px !important; max-width: 116px !important; flex-basis: 116px !important; } .vp-mobile-menu-v5 .vp-logo-v5 img { width: 100% !important; height: 100% !important; max-width: 116px !important; max-height: 34px !important; object-fit: contain !important; } /* WhatsApp: use the bundled vector consistently so an uploaded icon cannot stretch/glitch. */ .vp-mobile-bottom-nav .vp-mobile-whatsapp-link { min-width: 0 !important; overflow: visible !important; } .vp-mobile-bottom-nav .vp-whatsapp-icon, .vp-mobile-bottom-nav .vp-whatsapp-icon.vp-icon-svg { display: inline-grid !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; margin: 0 auto !important; padding: 0 !important; place-items: center !important; overflow: visible !important; line-height: 0 !important; transform: none !important; } .vp-mobile-bottom-nav .vp-whatsapp-icon.vp-icon-svg svg { display: block !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; overflow: visible !important; fill: currentColor !important; stroke: none !important; stroke-width: 0 !important; transform: none !important; } .vp-mobile-bottom-nav .vp-whatsapp-icon.vp-icon-svg svg path { fill: currentColor !important; stroke: none !important; } /* Keep the icon as light as the other bottom navigation actions; no continuous animation. */ .vp-mobile-bottom-nav .vp-mobile-whatsapp-link, .vp-mobile-bottom-nav .vp-mobile-whatsapp-link .vp-whatsapp-icon, .vp-mobile-bottom-nav .vp-mobile-whatsapp-link small { transition: color .16s ease, opacity .16s ease, transform .16s ease !important; } .vp-mobile-bottom-nav .vp-mobile-whatsapp-link:active .vp-whatsapp-icon { transform: scale(.92) !important; } @media (min-width: 768px) and (max-width: 1024px) { .vp-header-v5 .vp-header-main > .vp-container .vp-logo-v5, .vp-header-v5 .vp-logo-v5 { width: 132px !important; height: 39px !important; max-width: 132px !important; flex-basis: 132px !important; } .vp-header-v5 .vp-logo-v5 img { max-width: 132px !important; max-height: 39px !important; } } @media (max-width: 767px) { .vp-header-v5 .vp-header-main .vp-logo-v5 { width: 112px !important; height: 33px !important; max-width: 112px !important; flex: 0 0 112px !important; } .vp-header-v5 .vp-header-main .vp-logo-v5 img { max-width: 112px !important; max-height: 33px !important; object-position: center !important; } .vp-mobile-bottom-nav .vp-whatsapp-icon, .vp-mobile-bottom-nav .vp-whatsapp-icon.vp-icon-svg, .vp-mobile-bottom-nav .vp-whatsapp-icon.vp-icon-svg svg { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; } } @media (prefers-reduced-motion: reduce) { .vp-mobile-bottom-nav .vp-mobile-whatsapp-link, .vp-mobile-bottom-nav .vp-mobile-whatsapp-link .vp-whatsapp-icon, .vp-mobile-bottom-nav .vp-mobile-whatsapp-link small { transition: none !important; } } /* Veepee catalog/product controls v11 — lightweight, no external dependencies. */ .vp-card-action-icon, .vp-btn-ico { flex: 0 0 auto; } .vp-card-action-icon, .vp-card-action-icon.vp-icon-svg { width: 18px; height: 18px; } .vp-btn-ico, .vp-btn-ico.vp-icon-svg, .vp-btn-ico.vp-icon-img { width: 18px; height: 18px; } img.vp-btn-ico, img.vp-card-action-icon { display: block; object-fit: contain; } .vp-card-action-icon svg, .vp-btn-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Compact premium variant selector: short cards, fast CSS-only interaction. */ .vp-variant-area { margin: 18px 0 14px; } .vp-variant-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .vp-variant-head h3 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; } .vp-variant-head span { font-size: 12px; color: #64748b; } .vp-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vp-variant-card { position: relative; min-width: 0; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .vp-variant-card:hover { border-color: #aab8c8; transform: translateY(-1px); } .vp-variant-card.is-active { border-color: var(--vp-primary, #0b6b4d); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vp-primary, #0b6b4d) 12%, transparent); } .vp-variant-select { width: 100%; min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta meta"; align-content: center; gap: 4px 10px; border: 0; background: transparent; color: #0f172a; padding: 10px 42px 10px 12px; text-align: left; cursor: pointer; } .vp-variant-select strong { grid-area: name; min-width: 0; font-size: 13px; line-height: 1.25; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vp-variant-select .vp-v-price { grid-area: price; font-size: 13px; line-height: 1.25; font-weight: 800; color: var(--vp-primary, #0b6b4d); white-space: nowrap; } .vp-variant-select del, .vp-variant-select em { grid-area: meta; margin: 0; font-size: 10.5px; line-height: 1.2; font-style: normal; color: #64748b; } .vp-variant-select del { justify-self: start; } .vp-variant-select em { justify-self: start; } .vp-variant-select del + em { justify-self: end; margin-left: 0; } .vp-v-selected-dot { display: none; } .vp-variant-info { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #dbe3ec; border-radius: 50%; background: #f8fafc; color: #475569; font-size: 0; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .vp-variant-info::before { content: "i"; font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; } .vp-variant-info:hover { color: var(--vp-primary, #0b6b4d); border-color: var(--vp-primary, #0b6b4d); background: #fff; } .vp-variant-card.is-out-of-stock { opacity: .55; background: #f8fafc; } .vp-variant-card.is-out-of-stock:hover { transform: none; } /* Keep product action labels/icons aligned after admin customization. */ .vp-add-main, .vp-buy-main, .vp-mobile-buybar-button, .vp-cart-btn { align-items: center; justify-content: center; gap: 7px; } /* Mobile purchase bar stays above the existing bottom navigation. */ .vp-mobile-buybar { display: none; } @media (max-width: 767.98px) { .vp-product-page { padding-bottom: 86px; } .vp-variant-head { align-items: center; margin-bottom: 8px; } .vp-variant-head span { display: none; } .vp-variant-grid { grid-template-columns: 1fr; gap: 7px; } .vp-variant-select { min-height: 58px; padding-top: 8px; padding-bottom: 8px; } .vp-mobile-buybar { position: fixed; z-index: 1042; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.98); border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 18px rgba(15,23,42,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .vp-mobile-buybar-price { min-width: 0; } .vp-mobile-buybar-price span { display: block; margin-bottom: 1px; font-size: 10px; line-height: 1.1; color: #64748b; } .vp-mobile-buybar-price strong { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.2; color: #0f172a; } .vp-mobile-buybar-button { min-height: 43px; display: inline-flex; padding: 9px 14px; border-radius: 10px; background: var(--vp-primary, #0b6b4d); color: #fff; text-decoration: none; font-size: 14px; font-weight: 750; box-shadow: none; } .vp-mobile-buybar-button .vp-btn-ico, .vp-mobile-buybar-button .vp-btn-ico.vp-icon-svg { width: 18px; height: 18px; } .vp-mobile-buybar-button.is-disabled, .vp-mobile-buybar-button[aria-disabled="true"] { background: #94a3b8; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .vp-variant-card, .vp-variant-info { transition: none !important; } } /* ========================================================================== VEEPEE V12 — consolidated premium/performance layer One override file replaces the six incremental hotfix requests. ========================================================================== */ html { -webkit-text-size-adjust: 100%; } body.vp-site-body { font-family: var(--vp-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Premium but restrained interaction language. */ a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--vp-primary, #0b6b4d) 62%, white); outline-offset: 2px; } .vp-main-shell img, .vp-header-v5 img, .vp-footer-v6 img { max-width: 100%; } /* V12 reveals only whole sections/panels, never dozens of individual product cards. */ html.vp-v12-motion .vp-v12-reveal { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.72,.25,1); } html.vp-v12-motion .vp-v12-reveal.is-visible { opacity: 1; transform: none; } /* Avoid expensive decorative painting on touch devices while keeping the premium desktop hover. */ @media (hover: none), (pointer: coarse) { .vp-product-card, .vp-tax-card, .vp-content-card, .vp-panel { box-shadow: none; } .vp-product-card:hover, .vp-tax-card:hover, .vp-content-card:hover, .vp-panel:hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } html.vp-v12-motion .vp-v12-reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================================== VEEPEE V13 — product gallery, permanent mobile actions and stock UX polish ========================================================================== */ /* Keep viewport-fixed controls truly viewport-fixed. A transformed main shell creates a containing block for position:fixed descendants on mobile. */ .vp-main-shell { transform: none !important; animation: none !important; } /* Product hero: clean two-column composition with breathing room and no hard divider pressed against the purchase content. */ .vp-product-page .vp-product-detail { display: grid !important; grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr) !important; align-items: start !important; gap: clamp(34px, 4vw, 64px) !important; } .vp-product-page .vp-product-gallery { min-width: 0 !important; padding: clamp(14px, 1.8vw, 20px) !important; border: 1px solid #e5eaf0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 26px rgba(15, 23, 42, .05) !important; } .vp-product-page .vp-product-summary { min-width: 0 !important; padding: 6px clamp(4px, .8vw, 12px) 8px !important; border: 0 !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Center the actual product artwork. This fixes images appearing anchored to the left while preserving the complete bottle/label without cropping. */ .vp-product-page .vp-main-image { display: grid !important; place-items: center !important; width: 100% !important; aspect-ratio: 1 / 1 !important; min-height: 360px !important; max-height: 590px !important; padding: clamp(12px, 2vw, 22px) !important; overflow: hidden !important; border: 1px solid #edf1f5 !important; border-radius: 15px !important; background: #fff !important; } .vp-product-page .vp-main-image > img { display: block !important; width: min(92%, 540px) !important; height: min(92%, 540px) !important; max-width: 92% !important; max-height: 92% !important; margin: auto !important; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important; } /* Thumbnail navigation only consumes space when the thumbnails actually overflow. Arrows float beside the strip instead of sitting at the far ends of a mostly empty gallery row. */ .vp-product-page .vp-gallery-carousel { position: relative !important; display: flex !important; align-items: center !important; min-width: 0 !important; min-height: 80px !important; margin-top: 12px !important; padding: 0 34px !important; } .vp-product-page .vp-gallery-carousel.is-static { padding-left: 0 !important; padding-right: 0 !important; } .vp-product-page .vp-thumb-strip { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; overscroll-behavior-inline: contain !important; } .vp-product-page .vp-thumb-strip::-webkit-scrollbar { display: none !important; } .vp-product-page .vp-gallery-carousel.is-static .vp-thumb-strip { justify-content: center !important; overflow: hidden !important; } .vp-product-page .vp-thumb { flex: 0 0 72px !important; width: 72px !important; height: 72px !important; display: grid !important; place-items: center !important; padding: 5px !important; scroll-snap-align: center !important; overflow: hidden !important; border: 1px solid #e6ebf1 !important; border-radius: 11px !important; background: #fff !important; box-shadow: none !important; } .vp-product-page .vp-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } .vp-product-page .vp-thumb.is-active { border-color: var(--vp-primary, #0b6b4d) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--vp-primary, #0b6b4d) 14%, transparent) !important; } .vp-product-page .vp-gallery-arrow { position: absolute !important; z-index: 3 !important; top: 50% !important; width: 29px !important; height: 29px !important; min-width: 29px !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid #dfe6ed !important; border-radius: 999px !important; color: #334155 !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 4px 13px rgba(15, 23, 42, .08) !important; font-size: 21px !important; line-height: 1 !important; transform: translateY(-50%) !important; } .vp-product-page .vp-gallery-arrow--prev { left: 0 !important; } .vp-product-page .vp-gallery-arrow--next { right: 0 !important; } .vp-product-page .vp-gallery-arrow[hidden] { display: none !important; } .vp-product-page .vp-gallery-arrow:hover { color: #fff !important; border-color: var(--vp-primary, #0b6b4d) !important; background: var(--vp-primary, #0b6b4d) !important; } /* Reduce visual noise around the purchase area while keeping important states obvious. */ .vp-product-page .vp-product-rating-line, .vp-product-page .vp-price-box, .vp-product-page .vp-variant-area, .vp-product-page .vp-action-box, .vp-product-page .vp-buy-promises, .vp-product-page .vp-mini-specs { max-width: 760px !important; } /* Mobile quick navigation is genuinely persistent from first paint. */ :root { --vp-mobile-nav-height: 64px; } .vp-mobile-bottom-nav { display: none; } @media (max-width: 767.98px) { body.vp-site-body { padding-bottom: calc(var(--vp-mobile-nav-height) + env(safe-area-inset-bottom)) !important; } .vp-mobile-bottom-nav { position: fixed !important; z-index: 1040 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; height: calc(var(--vp-mobile-nav-height) + env(safe-area-inset-bottom)) !important; padding: 4px 5px env(safe-area-inset-bottom) !important; border-top: 1px solid #e4e9ef !important; background: rgba(255, 255, 255, .985) !important; box-shadow: 0 -5px 20px rgba(15, 23, 42, .07) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .vp-mobile-bottom-nav > a, .vp-mobile-bottom-nav > button { position: relative !important; display: flex !important; min-width: 0 !important; min-height: 54px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 3px 2px !important; border: 0 !important; color: #334155 !important; background: transparent !important; text-decoration: none !important; font: inherit !important; } .vp-mobile-bottom-nav small { font-size: 10px !important; font-weight: 650 !important; line-height: 1.1 !important; } .vp-mobile-bottom-nav .vp-mobile-nav-icon, .vp-mobile-bottom-nav .vp-mobile-nav-icon svg { width: 21px !important; height: 21px !important; } /* Static Buy Now stays immediately above the permanent mobile nav. */ .vp-product-page { padding-bottom: calc(82px + var(--vp-mobile-nav-height) + env(safe-area-inset-bottom)) !important; } .vp-mobile-buybar { position: fixed !important; z-index: 1039 !important; left: 0 !important; right: 0 !important; bottom: calc(var(--vp-mobile-nav-height) + env(safe-area-inset-bottom)) !important; display: grid !important; grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-height: 62px !important; padding: 8px 10px !important; border-top: 1px solid #e4e9ef !important; background: rgba(255, 255, 255, .99) !important; box-shadow: 0 -5px 18px rgba(15, 23, 42, .055) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .vp-mobile-buybar-button { min-height: 44px !important; border-radius: 11px !important; } .vp-product-page .vp-product-detail { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .vp-product-page .vp-product-gallery { padding: 10px !important; border-radius: 14px !important; } .vp-product-page .vp-product-summary { padding: 2px 2px 6px !important; } .vp-product-page .vp-main-image { min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; padding: 10px !important; border-radius: 12px !important; } .vp-product-page .vp-main-image > img { width: 94% !important; height: 94% !important; max-width: 94% !important; max-height: 94% !important; } .vp-product-page .vp-gallery-carousel { min-height: 68px !important; margin-top: 9px !important; padding-inline: 30px !important; } .vp-product-page .vp-gallery-carousel.is-static { padding-inline: 0 !important; } .vp-product-page .vp-thumb { flex-basis: 60px !important; width: 60px !important; height: 60px !important; border-radius: 9px !important; } .vp-product-page .vp-gallery-arrow { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 19px !important; } } @media (min-width: 768px) and (max-width: 1050px) { .vp-product-page .vp-product-detail { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr) !important; gap: 28px !important; } } @media (prefers-reduced-motion: reduce) { .vp-product-page .vp-gallery-arrow, .vp-product-page .vp-thumb, .vp-mobile-bottom-nav, .vp-mobile-buybar { transition: none !important; animation: none !important; } } /* Footer contains the permanent mobile nav, so it must never be hidden by a viewport reveal class from an older cached runtime. */ html.vp-v12-motion .vp-footer-v6.vp-v12-reveal, html.vp-v12-motion .vp-footer-v6.vp-v12-reveal.is-visible { opacity: 1 !important; transform: none !important; } /* ========================================================================== */ /* Veepee V14 — premium cart drawer visibility + viewport-safe checkout panel */ /* ========================================================================== */ /* Keep the drawer inside the REAL visible browser area (desktop + mobile WebView). */ .vp-cart-drawer.offcanvas { --vp-cart-viewport-height: 100dvh; --vp-cart-viewport-top: 0px; top: var(--vp-cart-viewport-top) !important; bottom: auto !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; width: min(440px, 100vw) !important; height: var(--vp-cart-viewport-height) !important; min-height: 0 !important; max-height: var(--vp-cart-viewport-height) !important; overflow: hidden !important; color: #0f172a; background: #ffffff !important; box-shadow: -20px 0 54px rgba(15, 23, 42, .16) !important; } /* Premium navy header with explicit contrast so the title can never disappear. */ .vp-cart-drawer .offcanvas-header { position: relative; z-index: 4; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; min-height: 112px; padding: 22px 22px 20px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; color: #ffffff !important; background: linear-gradient(135deg, #111d34 0%, #162742 100%) !important; } .vp-cart-drawer .offcanvas-header > div { min-width: 0; } .vp-cart-drawer .offcanvas-header h5, .vp-cart-drawer #offcanvasRightLabel { margin: 0 !important; color: #ffffff !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .08); } .vp-cart-drawer .offcanvas-header small, .vp-cart-drawer #cart-location { display: block !important; margin-top: 7px !important; color: rgba(226, 232, 240, .78) !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.45 !important; } .vp-cart-drawer .offcanvas-header .btn-close { flex: 0 0 38px; display: inline-grid !important; place-items: center; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 11px !important; color: #ffffff !important; background: rgba(255, 255, 255, .07) !important; background-image: none !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; opacity: 1 !important; box-shadow: none !important; transition: background-color .18s ease, transform .18s ease !important; } .vp-cart-drawer .offcanvas-header .btn-close:hover { background: rgba(255, 255, 255, .14) !important; } .vp-cart-drawer .offcanvas-header .btn-close:active { transform: scale(.94); } /* Two-row body: products scroll independently; totals/actions are ALWAYS visible. */ .vp-cart-drawer .offcanvas-body { display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; } .vp-cart-scroll-area { display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; padding: 12px 18px 0 !important; overflow: hidden !important; background: #ffffff; } #cart-notice { flex: 0 0 auto; margin: 0 0 10px !important; padding: 9px 11px !important; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; background: #f8fafc; } #cart-items-list { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 3px 12px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } /* Cleaner, more premium product rows without wasting vertical space. */ .vp-cart-line { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) auto !important; gap: 11px !important; margin: 0 0 9px !important; padding: 11px !important; border: 1px solid #e7ecf2 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(15, 23, 42, .035) !important; } .vp-cart-line:last-child { margin-bottom: 0 !important; } .vp-cart-line > img { width: 72px !important; height: 72px !important; padding: 4px; border: 1px solid #edf1f5 !important; border-radius: 11px !important; object-fit: contain !important; background: #ffffff; } .vp-cart-line-main > strong { color: #0f172a !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1.35 !important; } .vp-cart-line-main > span { margin: 3px 0 7px !important; color: #64748b !important; font-size: 12px !important; font-weight: 600 !important; } .vp-cart-line-side { min-width: 78px; } .vp-cart-line-side > strong { color: #0f172a !important; font-size: 12.5px !important; font-weight: 800 !important; } .vp-cart-qty { grid-template-columns: 31px 38px 31px !important; border-color: #dce4ed !important; border-radius: 9px !important; background: #ffffff; } .vp-cart-qty button { height: 32px !important; background: #f8fafc !important; } .vp-cart-qty button:hover { color: var(--vp-button-text, #fff) !important; background: var(--vp-primary, #0b6b4d) !important; } /* The summary is a fixed part of the drawer, never below the visible viewport. */ .vp-cart-footer { position: relative !important; z-index: 5 !important; align-self: end; margin: 0 !important; padding: 13px 18px max(15px, env(safe-area-inset-bottom)) !important; border-top: 1px solid #e5eaf0 !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 -12px 28px rgba(15, 23, 42, .07) !important; backdrop-filter: blur(10px); } #cart-summary { margin: 0 0 11px !important; padding: 10px 12px !important; border: 1px solid #e7ecf2; border-radius: 12px; background: #f8fafc; } .vp-cart-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px; min-height: 25px; color: #475569; font-size: 12.5px; line-height: 1.2; } .vp-cart-row + .vp-cart-row { margin-top: 5px; padding-top: 7px; border-top: 1px solid #e7ecf2; } .vp-cart-row strong { color: #0f172a; font-weight: 800; } .vp-cart-total > span { color: #0f172a; font-size: 14px; font-weight: 750; } .vp-cart-total #cart-subtotal, #cart-subtotal { color: var(--vp-primary, #0b6b4d) !important; font-size: 21px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: -.025em; } .vp-cart-actions { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: 9px !important; } .vp-cart-actions > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0; min-height: 44px !important; padding: 9px 11px !important; border-radius: 10px !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.15; text-align: center; text-decoration: none !important; white-space: normal !important; transition: transform .16s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important; } .vp-cart-continue { border: 1px solid #d7e0e9 !important; color: #334155 !important; background: #ffffff !important; background-image: none !important; } .vp-cart-continue::after { display: none !important; } .vp-cart-continue:hover { border-color: #b9c5d2 !important; color: #0f172a !important; background: #f8fafc !important; transform: translateY(-1px); } .vp-cart-checkout { border: 1px solid var(--vp-primary, #0b6b4d) !important; color: var(--vp-button-text, #ffffff) !important; background: var(--vp-primary, #0b6b4d) !important; box-shadow: 0 7px 16px color-mix(in srgb, var(--vp-primary, #0b6b4d) 20%, transparent) !important; } .vp-cart-checkout:hover { filter: brightness(.96); transform: translateY(-1px); } .vp-cart-actions > a:active { transform: scale(.98) !important; } /* Softer backdrop; drawer remains the visual focus. */ .offcanvas-backdrop.show { opacity: .20 !important; } @media (max-width: 575.98px) { .vp-cart-drawer.offcanvas { width: 100vw !important; max-width: 100vw !important; border: 0 !important; } .vp-cart-drawer .offcanvas-header { min-height: 104px; padding: 19px 16px 17px !important; } .vp-cart-drawer .offcanvas-header h5, .vp-cart-drawer #offcanvasRightLabel { font-size: 19px !important; } .vp-cart-scroll-area { padding: 10px 12px 0 !important; } .vp-cart-line { grid-template-columns: 66px minmax(0, 1fr) !important; gap: 9px !important; padding: 10px !important; } .vp-cart-line > img { width: 66px !important; height: 66px !important; } .vp-cart-line-side { grid-column: 2 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; min-width: 0 !important; margin-top: 1px; } .vp-cart-line-side > strong { font-size: 12px !important; } .vp-cart-remove { font-size: 11px !important; } .vp-cart-footer { padding: 11px 12px max(12px, env(safe-area-inset-bottom)) !important; } #cart-summary { margin-bottom: 9px !important; padding: 8px 10px !important; } .vp-cart-total #cart-subtotal, #cart-subtotal { font-size: 19px !important; } .vp-cart-actions { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; gap: 8px !important; } .vp-cart-actions > a { min-height: 42px !important; padding: 8px 8px !important; font-size: 12px !important; } } @media (max-width: 350px) { .vp-cart-actions { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { .vp-cart-drawer *, .vp-cart-drawer *::before, .vp-cart-drawer *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ======================================================================== V15 — simple professional Brands + Tags No generated artwork, no logo/image cards, no cartoon effects. Categories keep their real product/category imagery. ======================================================================== */ .vp-tax-section--brand, .vp-tax-section--tag { overflow: hidden; } .vp-tax-section--brand .vp-track, .vp-tax-section--tag .vp-track { gap: 12px !important; align-items: stretch !important; } /* Remove every legacy decorative layer/effect from brand and tag cards. */ .vp-tax-card--brand, .vp-tax-card--tag { position: relative !important; isolation: isolate !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 7px !important; min-width: 210px !important; width: 210px !important; min-height: 96px !important; height: auto !important; padding: 17px 18px !important; overflow: hidden !important; border: 1px solid #e4e9ef !important; border-radius: 14px !important; color: #0f172a !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; text-align: left !important; text-decoration: none !important; transform: none !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } .vp-tax-card--tag { min-width: 190px !important; width: 190px !important; min-height: 82px !important; padding: 15px 17px !important; } .vp-tax-card--brand::before, .vp-tax-card--brand::after, .vp-tax-card--tag::before, .vp-tax-card--tag::after, .vp-tax-card--brand .vp-tax-card-shine, .vp-tax-card--tag .vp-tax-card-shine, .vp-tax-card--brand .vp-tax-icon, .vp-tax-card--tag .vp-tax-icon, .vp-tax-card--brand .vp-tax-fallback, .vp-tax-card--tag .vp-tax-fallback { display: none !important; content: none !important; } .vp-tax-card--brand:hover, .vp-tax-card--tag:hover { border-color: #cbd5e1 !important; background: #ffffff !important; box-shadow: 0 8px 22px rgba(15, 23, 42, .065) !important; transform: translateY(-1px) !important; } .vp-tax-card--brand:focus-visible, .vp-tax-card--tag:focus-visible { outline: 2px solid var(--vp-primary, #0b6b4d) !important; outline-offset: 2px !important; } .vp-tax-card--brand.is-static, .vp-tax-card--tag.is-static { cursor: default !important; opacity: .72 !important; box-shadow: none !important; transform: none !important; } .vp-tax-text-kicker { display: block !important; margin: 0 !important; color: #7b8797 !important; font-size: 10.5px !important; font-weight: 750 !important; line-height: 1.15 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .vp-tax-card--brand > strong, .vp-tax-card--tag > strong { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #101827 !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.28 !important; letter-spacing: -.015em !important; text-align: left !important; text-wrap: balance; } .vp-tax-card--brand > strong { font-size: 15.5px !important; } .vp-tax-text-action { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-top: 1px !important; color: var(--vp-primary, #0b6b4d) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.2 !important; } .vp-tax-text-action > span { display: inline-block !important; transition: transform .18s ease !important; } .vp-tax-card--brand:hover .vp-tax-text-action > span, .vp-tax-card--tag:hover .vp-tax-text-action > span { transform: translateX(2px) !important; } /* Compact text-only chips used outside the homepage carousel. */ .vp-tax-chip--text-only { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 40px !important; padding: 9px 12px !important; border: 1px solid #e3e8ee !important; border-radius: 10px !important; color: #1e293b !important; background: #ffffff !important; box-shadow: none !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease !important; } .vp-tax-chip--text-only .vp-tax-icon { display: none !important; } .vp-tax-chip--text-only .vp-tax-name { color: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; } .vp-tax-chip--text-only .vp-tax-chip-arrow { color: var(--vp-primary, #0b6b4d) !important; font-size: 13px !important; line-height: 1 !important; } .vp-tax-chip--text-only:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; } /* Avoid over-animating taxonomy navigation. A restrained hover is enough. */ .vp-tax-section--brand .vp-tax-card, .vp-tax-section--tag .vp-tax-card, .vp-tax-section--brand .vp-tax-card *, .vp-tax-section--tag .vp-tax-card * { animation: none !important; } @media (max-width: 767.98px) { .vp-tax-section--brand .vp-track, .vp-tax-section--tag .vp-track { gap: 9px !important; } .vp-tax-card--brand { min-width: 174px !important; width: 174px !important; min-height: 86px !important; padding: 14px 15px !important; border-radius: 12px !important; } .vp-tax-card--tag { min-width: 158px !important; width: 158px !important; min-height: 74px !important; padding: 13px 14px !important; border-radius: 12px !important; } .vp-tax-card--brand > strong, .vp-tax-card--tag > strong { font-size: 13.5px !important; line-height: 1.25 !important; } .vp-tax-text-kicker { font-size: 9.5px !important; } .vp-tax-text-action { font-size: 10.5px !important; } /* Touch devices do not need hover transforms. */ .vp-tax-card--brand:hover, .vp-tax-card--tag:hover { transform: none !important; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { .vp-tax-card--brand, .vp-tax-card--tag, .vp-tax-card--brand *, .vp-tax-card--tag *, .vp-tax-chip--text-only, .vp-tax-chip--text-only * { animation: none !important; transition: none !important; transform: none !important; } } /* ======================================================================== V16 — Unified premium taxonomy navigation Categories, Brands and Tags intentionally share the same visual language. No generated artwork, no image requests, no cartoon/illustration treatment. ======================================================================== */ .vp-tax-section--unified { --vp-tax-border: #e4e9ef; --vp-tax-text: #111827; --vp-tax-muted: #667085; --vp-tax-soft: #f7f9fb; overflow: hidden; } .vp-tax-section--unified .vp-tax-carousel { padding: 5px 2px 16px !important; } .vp-tax-section--unified .vp-track { gap: 12px !important; } .vp-tax-section--unified .vp-tax-card--unified { position: relative !important; display: flex !important; flex: 0 0 220px !important; width: 220px !important; min-width: 220px !important; height: 142px !important; min-height: 142px !important; padding: 16px 17px 15px !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; overflow: hidden !important; border: 1px solid var(--vp-tax-border) !important; border-radius: 14px !important; color: var(--vp-tax-text) !important; background: #fff !important; background-image: none !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .025) !important; text-align: left !important; text-decoration: none !important; transform: none !important; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } .vp-tax-section--unified .vp-tax-card--unified::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 17px !important; right: 17px !important; width: auto !important; height: 2px !important; border: 0 !important; border-radius: 0 0 2px 2px !important; background: var(--vp-primary, #0b6b4d) !important; opacity: .78 !important; transform: none !important; } .vp-tax-section--unified .vp-tax-card--unified::after, .vp-tax-section--unified .vp-tax-card-shine, .vp-tax-section--unified .vp-tax-icon, .vp-tax-section--unified .vp-tax-fallback { display: none !important; content: none !important; } .vp-tax-card-top { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 32px !important; margin: 1px 0 10px !important; } .vp-tax-monogram { display: inline-grid !important; place-items: center !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; border: 1px solid #dfe5eb !important; border-radius: 9px !important; color: var(--vp-primary, #0b6b4d) !important; background: #f8fafb !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; } .vp-tax-type { display: inline-flex !important; align-items: center !important; min-width: 0 !important; color: var(--vp-tax-muted) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .075em !important; text-transform: uppercase !important; } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { display: -webkit-box !important; width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: var(--vp-tax-text) !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.28 !important; letter-spacing: -.012em !important; text-align: left !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .vp-tax-card-action { display: inline-flex !important; align-items: center !important; gap: 5px !important; width: fit-content !important; margin-top: auto !important; color: var(--vp-primary, #0b6b4d) !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.15 !important; } .vp-tax-card-action svg { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; transition: transform .16s ease !important; } .vp-tax-card-action--muted { color: #98a2b3 !important; font-weight: 600 !important; } .vp-tax-section--unified .vp-tax-card--unified:hover { border-color: #cfd7df !important; background: #fff !important; box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important; transform: translateY(-2px) !important; } .vp-tax-section--unified .vp-tax-card--unified:hover .vp-tax-card-action svg { transform: translateX(2px) !important; } .vp-tax-section--unified .vp-tax-card--unified:focus-visible { outline: 2px solid var(--vp-primary, #0b6b4d) !important; outline-offset: 2px !important; } .vp-tax-section--unified .vp-tax-card--unified.is-static { cursor: default !important; opacity: .72 !important; } /* The section-end link uses the same restrained premium interaction. */ .vp-tax-section--unified .vp-taxonomy-all { display: inline-flex !important; align-items: center !important; gap: 5px !important; min-height: 34px !important; padding: 7px 10px !important; border: 1px solid #e1e7ed !important; border-radius: 9px !important; color: #263241 !important; background: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; transition: border-color .16s ease, color .16s ease, background-color .16s ease !important; } .vp-tax-section--unified .vp-taxonomy-all::before, .vp-tax-section--unified .vp-taxonomy-all::after { display: none !important; content: none !important; } .vp-tax-section--unified .vp-taxonomy-all svg { width: 14px !important; height: 14px !important; transition: transform .16s ease !important; } .vp-tax-section--unified .vp-taxonomy-all:hover { border-color: #cbd5df !important; color: var(--vp-primary, #0b6b4d) !important; background: #f9fbfa !important; } .vp-tax-section--unified .vp-taxonomy-all:hover svg { transform: translateX(2px) !important; } /* Unified compact chips on category/brand/tag index areas. */ .vp-tax-chip--unified { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 42px !important; padding: 8px 11px 8px 8px !important; border: 1px solid #e2e8ee !important; border-radius: 10px !important; color: #202939 !important; background: #fff !important; box-shadow: none !important; text-decoration: none !important; transition: border-color .16s ease, background-color .16s ease !important; } .vp-tax-chip--unified .vp-tax-chip-mark { display: inline-grid !important; place-items: center !important; flex: 0 0 26px !important; width: 26px !important; height: 26px !important; border: 1px solid #e1e6eb !important; border-radius: 8px !important; color: var(--vp-primary, #0b6b4d) !important; background: #f8fafb !important; font-size: 10px !important; font-weight: 800 !important; } .vp-tax-chip--unified .vp-tax-name { min-width: 0 !important; color: inherit !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; } .vp-tax-chip--unified .vp-tax-chip-arrow { width: 14px !important; height: 14px !important; margin-left: auto !important; color: var(--vp-primary, #0b6b4d) !important; } .vp-tax-chip--unified:hover { border-color: #ccd5dd !important; background: #fafbfc !important; } @media (max-width: 767.98px) { .vp-tax-section--unified .vp-track { gap: 9px !important; } .vp-tax-section--unified .vp-tax-card--unified { flex-basis: 174px !important; width: 174px !important; min-width: 174px !important; height: 126px !important; min-height: 126px !important; padding: 13px 14px 12px !important; border-radius: 12px !important; } .vp-tax-section--unified .vp-tax-card--unified::before { left: 14px !important; right: 14px !important; } .vp-tax-card-top { min-height: 28px !important; margin-bottom: 8px !important; } .vp-tax-monogram { flex-basis: 27px !important; width: 27px !important; height: 27px !important; border-radius: 8px !important; font-size: 10.5px !important; } .vp-tax-type { font-size: 9px !important; } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { min-height: 34px !important; font-size: 13.5px !important; } .vp-tax-card-action { font-size: 10.5px !important; } .vp-tax-section--unified .vp-tax-card--unified:hover { transform: none !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .025) !important; } } @media (prefers-reduced-motion: reduce) { .vp-tax-section--unified .vp-tax-card--unified, .vp-tax-section--unified .vp-tax-card--unified *, .vp-tax-section--unified .vp-taxonomy-all, .vp-tax-section--unified .vp-taxonomy-all *, .vp-tax-chip--unified, .vp-tax-chip--unified * { animation: none !important; transition: none !important; transform: none !important; } } /* ======================================================================== VEEPEE V17 — PREMIUM COLOR TAXONOMY CARDS Clean, colorful, useful. No generated artwork and no repeated "Category / Brand / Tag" labels inside every card. ======================================================================== */ .vp-tax-section--unified .vp-track { gap: 14px !important; align-items: stretch !important; } .vp-tax-section--unified .vp-tax-card--unified { --vp-tax-accent: #16795d; --vp-tax-tint: #eef9f5; position: relative !important; display: flex !important; flex: 0 0 208px !important; width: 208px !important; min-width: 208px !important; height: 158px !important; min-height: 158px !important; padding: 18px 18px 16px !important; overflow: hidden !important; border: 1px solid #e3e8ed !important; border-radius: 18px !important; background: linear-gradient(145deg, var(--vp-tax-tint) 0%, #ffffff 72%) !important; box-shadow: 0 4px 16px rgba(17, 24, 39, .045) !important; color: #172033 !important; text-decoration: none !important; isolation: isolate !important; transform: translateZ(0) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } /* Slim color signature only — intentionally not an illustration. */ .vp-tax-section--unified .vp-tax-card--unified::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: 4px !important; border-radius: 18px 18px 0 0 !important; background: var(--vp-tax-accent) !important; opacity: 1 !important; transform: none !important; pointer-events: none !important; } .vp-tax-section--unified .vp-tax-card--unified::after, .vp-tax-section--unified .vp-tax-card-shine, .vp-tax-section--unified .vp-tax-type, .vp-tax-section--unified .vp-tax-icon, .vp-tax-section--unified .vp-tax-fallback { display: none !important; content: none !important; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 1) { --vp-tax-accent: #16795d; --vp-tax-tint: #eef9f5; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 2) { --vp-tax-accent: #3973c8; --vp-tax-tint: #eff5ff; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 3) { --vp-tax-accent: #c57c22; --vp-tax-tint: #fff7ea; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 4) { --vp-tax-accent: #7256b8; --vp-tax-tint: #f6f2ff; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 5) { --vp-tax-accent: #bd5d72; --vp-tax-tint: #fff1f4; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 6) { --vp-tax-accent: #27869b; --vp-tax-tint: #effafd; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 7) { --vp-tax-accent: #708b3e; --vp-tax-tint: #f4f8ec; } .vp-tax-section--unified .vp-slide-tax:nth-child(8n + 8) { --vp-tax-accent: #cf6948; --vp-tax-tint: #fff3ef; } .vp-tax-section--unified .vp-tax-card-top { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 38px !important; margin: 0 0 13px !important; } .vp-tax-section--unified .vp-tax-monogram { display: inline-grid !important; place-items: center !important; flex: 0 0 38px !important; width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 12px !important; color: #fff !important; background: var(--vp-tax-accent) !important; box-shadow: 0 5px 12px rgba(17, 24, 39, .09) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; } .vp-tax-card-corner { display: inline-grid !important; place-items: center !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; border: 1px solid rgba(31, 41, 55, .09) !important; border-radius: 999px !important; color: var(--vp-tax-accent) !important; background: rgba(255, 255, 255, .78) !important; transition: transform .18s ease, background-color .18s ease !important; } .vp-tax-card-corner svg { width: 15px !important; height: 15px !important; } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { display: -webkit-box !important; width: 100% !important; min-height: 39px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: #182133 !important; font-size: 15.5px !important; font-weight: 760 !important; line-height: 1.27 !important; letter-spacing: -.012em !important; text-align: left !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .vp-tax-section--unified .vp-tax-card-action { display: inline-flex !important; align-items: center !important; width: fit-content !important; margin-top: auto !important; padding: 0 !important; color: var(--vp-tax-accent) !important; font-size: 11.5px !important; font-weight: 750 !important; line-height: 1.1 !important; letter-spacing: .01em !important; } .vp-tax-section--unified .vp-tax-card-action--muted { color: #8b95a5 !important; } @media (hover: hover) and (pointer: fine) { .vp-tax-section--unified .vp-tax-card--unified:hover { border-color: color-mix(in srgb, var(--vp-tax-accent) 28%, #dfe5eb) !important; box-shadow: 0 12px 28px rgba(17, 24, 39, .09) !important; transform: translateY(-3px) !important; } .vp-tax-section--unified .vp-tax-card--unified:hover .vp-tax-card-corner { background: #fff !important; transform: translateX(2px) !important; } } @media (max-width: 767.98px) { .vp-tax-section--unified .vp-track { gap: 10px !important; } .vp-tax-section--unified .vp-tax-card--unified { flex-basis: 166px !important; width: 166px !important; min-width: 166px !important; height: 140px !important; min-height: 140px !important; padding: 15px 14px 13px !important; border-radius: 15px !important; } .vp-tax-section--unified .vp-tax-card--unified::before { border-radius: 15px 15px 0 0 !important; } .vp-tax-section--unified .vp-tax-card-top { min-height: 34px !important; margin-bottom: 10px !important; } .vp-tax-section--unified .vp-tax-monogram { flex-basis: 34px !important; width: 34px !important; height: 34px !important; border-radius: 11px !important; font-size: 12.5px !important; } .vp-tax-card-corner { flex-basis: 27px !important; width: 27px !important; height: 27px !important; } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { min-height: 35px !important; font-size: 13.8px !important; } .vp-tax-section--unified .vp-tax-card-action { font-size: 10.5px !important; } } @media (prefers-reduced-motion: reduce) { .vp-tax-section--unified .vp-tax-card--unified, .vp-tax-section--unified .vp-tax-card--unified *, .vp-tax-card-corner { transition: none !important; transform: none !important; } } /* ======================================================================== VEEPEE V18 — THEME COLOR TAXONOMY CARDS Removes the monogram/initial completely. Uses only the store's configured primary + accent colors for a richer premium card without artwork. ======================================================================== */ .vp-tax-section--unified .vp-tax-monogram, .vp-tax-section--unified .vp-tax-card-top, .vp-tax-section--unified .vp-tax-card-corner { display: none !important; } .vp-tax-section--unified .vp-tax-card--unified { --vp-tax-color: var(--vp-primary, #0b6b4d); --vp-tax-color-2: var(--vp-blue, #0b5ed7); justify-content: flex-end !important; height: 150px !important; min-height: 150px !important; padding: 22px 20px 18px !important; border: 1px solid color-mix(in srgb, var(--vp-tax-color) 18%, #dce4ea) !important; border-radius: 18px !important; background: radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--vp-tax-color-2) 15%, transparent) 0, transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--vp-tax-color) 9%, #fff) 0%, color-mix(in srgb, var(--vp-tax-color-2) 5%, #fff) 54%, #fff 100%) !important; box-shadow: 0 7px 20px rgba(17, 24, 39, .055) !important; } .vp-tax-section--unified .vp-tax-card--unified::before { top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 5px !important; height: auto !important; border-radius: 18px 0 0 18px !important; background: linear-gradient(180deg, var(--vp-tax-color), var(--vp-tax-color-2)) !important; } /* Alternate the balance of the SAME theme colors — no rainbow palette. */ .vp-tax-section--unified .vp-slide-tax:nth-child(4n + 1) { --vp-tax-color: var(--vp-primary, #0b6b4d); --vp-tax-color-2: var(--vp-blue, #0b5ed7); } .vp-tax-section--unified .vp-slide-tax:nth-child(4n + 2) { --vp-tax-color: var(--vp-blue, #0b5ed7); --vp-tax-color-2: var(--vp-primary, #0b6b4d); } .vp-tax-section--unified .vp-slide-tax:nth-child(4n + 3) { --vp-tax-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 78%, var(--vp-blue, #0b5ed7)); --vp-tax-color-2: var(--vp-primary, #0b6b4d); } .vp-tax-section--unified .vp-slide-tax:nth-child(4n + 4) { --vp-tax-color: color-mix(in srgb, var(--vp-blue, #0b5ed7) 72%, var(--vp-primary, #0b6b4d)); --vp-tax-color-2: var(--vp-blue, #0b5ed7); } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { display: -webkit-box !important; min-height: 44px !important; margin: 0 0 17px !important; color: #111827 !important; font-size: 16px !important; font-weight: 760 !important; line-height: 1.32 !important; text-align: left !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .vp-tax-section--unified .vp-tax-card-action { display: inline-flex !important; align-items: center !important; gap: 7px !important; width: max-content !important; min-height: 30px !important; margin: 0 !important; padding: 7px 11px !important; border: 1px solid color-mix(in srgb, var(--vp-tax-color) 24%, transparent) !important; border-radius: 999px !important; color: var(--vp-tax-color) !important; background: color-mix(in srgb, var(--vp-tax-color) 8%, #fff) !important; font-size: 11.5px !important; font-weight: 760 !important; line-height: 1 !important; } .vp-tax-section--unified .vp-tax-card-action svg { width: 14px !important; height: 14px !important; transition: transform .18s ease !important; } .vp-tax-section--unified .vp-tax-card-action--muted { color: #7a8494 !important; border-color: #e2e7ec !important; background: #f7f9fa !important; } @media (hover: hover) and (pointer: fine) { .vp-tax-section--unified .vp-tax-card--unified:hover { border-color: color-mix(in srgb, var(--vp-tax-color) 35%, #dce4ea) !important; box-shadow: 0 13px 30px color-mix(in srgb, var(--vp-tax-color) 11%, rgba(17,24,39,.08)) !important; transform: translateY(-3px) !important; } .vp-tax-section--unified .vp-tax-card--unified:hover .vp-tax-card-action svg { transform: translateX(3px) !important; } } @media (max-width: 767.98px) { .vp-tax-section--unified .vp-tax-card--unified { height: 130px !important; min-height: 130px !important; padding: 18px 15px 14px 17px !important; border-radius: 15px !important; } .vp-tax-section--unified .vp-tax-card--unified::before { border-radius: 15px 0 0 15px !important; } .vp-tax-section--unified .vp-tax-card-title, .vp-tax-section--unified .vp-tax-card--unified > strong { min-height: 39px !important; margin-bottom: 13px !important; font-size: 14px !important; } .vp-tax-section--unified .vp-tax-card-action { min-height: 28px !important; padding: 6px 10px !important; font-size: 10.5px !important; } } /* ======================================================================== VEEPEE V19 — PREMIUM BRAND LANDING PAGE + AZADI COUPON Brand-only UI is intentionally lightweight: no slider library, no extra font, no remote asset dependency. Product search stays inside the brand subset. ======================================================================== */ .vp-azadi-coupon { position: relative; z-index: 45; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, #07583f 0%, var(--vp-primary, #0b6b4d) 58%, #0b4b3d 100%); color: #fff; } .vp-azadi-coupon-inner { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 7px; padding-bottom: 7px; } .vp-azadi-coupon-copy { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; font-size: 13px; line-height: 1.25; } .vp-azadi-coupon-copy strong { font-size: 13.5px; font-weight: 800; } .vp-azadi-coupon-copy b { letter-spacing: .06em; } .vp-azadi-flag { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.13); } .vp-azadi-copy-btn { min-height: 31px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; background: rgba(255,255,255,.10); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .vp-azadi-copy-btn svg { width: 14px; height: 14px; stroke-width: 1.9; } .vp-azadi-copy-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.58); } .vp-azadi-copy-btn:active { transform: scale(.98); } .vp-azadi-copy-btn.is-copied { background: #fff; color: #07583f; border-color: #fff; } .vp-brand-page { background: #f7f9fb; } .vp-brand-hero { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(135deg, var(--vp-dark, #0f172a), #0d5b47); isolation: isolate; } .vp-brand-cover-media { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vp-brand-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(9,20,35,.92) 0%, rgba(9,20,35,.76) 46%, rgba(9,20,35,.25) 100%), linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.28)); } .vp-brand-hero-inner { min-height: 430px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 48px; } .vp-brand-hero-copy { max-width: 760px; color: #fff; } .vp-brand-logo-card { width: max-content; max-width: min(360px, 100%); min-width: 150px; min-height: 82px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 16px 40px rgba(2,6,23,.18); } .vp-brand-logo-card img { display: block; width: auto; max-width: 300px; height: 82px; object-fit: contain; } .vp-brand-logo-card span { color: #0f172a; font-size: 26px; font-weight: 850; letter-spacing: -.02em; } .vp-brand-kicker { margin-bottom: 10px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .vp-brand-hero h1 { margin: 0 0 12px; color: #fff; font-size: clamp(38px, 5vw, 64px); font-weight: 850; line-height: 1.03; letter-spacing: -.035em; } .vp-brand-tagline { max-width: 690px; margin: 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; } .vp-brand-trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; } .vp-brand-trust-row span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); font-size: 11.5px; font-weight: 700; backdrop-filter: blur(8px); } .vp-brand-hero-products { position: relative; min-height: 320px; } .vp-brand-hero-product { position: absolute; width: 188px; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 24px 60px rgba(2,6,23,.25); transition: transform .22s ease; } .vp-brand-hero-product img { width: 100%; height: 100%; object-fit: contain; } .vp-brand-hero-product--1 { right: 182px; top: 55px; transform: rotate(-4deg); z-index: 3; } .vp-brand-hero-product--2 { right: 34px; top: 18px; transform: rotate(4deg) scale(.92); z-index: 2; } .vp-brand-hero-product--3 { right: 62px; top: 160px; transform: rotate(7deg) scale(.82); z-index: 1; } .vp-brand-toolbar-wrap { position: relative; z-index: 8; margin-top: -28px; } .vp-brand-toolbar { display: grid; grid-template-columns: auto minmax(320px, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid #e4e9ee; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(15,23,42,.08); } .vp-brand-summary { min-width: 145px; padding: 4px 8px 4px 4px; } .vp-brand-summary strong { display: block; color: #111827; font-size: 22px; font-weight: 850; line-height: 1.05; } .vp-brand-summary span { display: block; margin-top: 4px; color: #667085; font-size: 11.5px; font-weight: 650; } .vp-brand-search { position: relative; min-height: 52px; display: flex; align-items: center; border: 1px solid #dce3e9; border-radius: 14px; background: #f9fbfc; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .vp-brand-search:focus-within { border-color: color-mix(in srgb, var(--vp-primary, #0b6b4d) 48%, #dce3e9); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vp-primary, #0b6b4d) 10%, transparent); } .vp-brand-search > svg { width: 19px; height: 19px; flex: 0 0 19px; margin-left: 15px; color: #7a8795; stroke-width: 1.8; } .vp-brand-search input { min-width: 0; flex: 1; height: 50px; padding: 0 12px; border: 0; outline: 0; background: transparent; color: #111827; font: inherit; font-size: 14px; } .vp-brand-search input::placeholder { color: #8b96a5; } .vp-brand-search button { align-self: stretch; min-width: 94px; border: 0; background: var(--vp-primary, #0b6b4d); color: var(--vp-button-text, #fff); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .vp-brand-search-clear { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; margin-right: 5px; border-radius: 50%; color: #667085; text-decoration: none; font-size: 20px; line-height: 1; } .vp-brand-search-clear:hover { background: #edf1f4; color: #111827; } .vp-brand-sort { display: flex; align-items: center; gap: 8px; } .vp-brand-sort label { color: #667085; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .vp-brand-sort select { min-height: 44px; max-width: 190px; padding: 0 34px 0 12px; border: 1px solid #dce3e9; border-radius: 12px; background-color: #fff; color: #1f2937; font: inherit; font-size: 12.5px; font-weight: 700; } .vp-brand-results-line { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 13px 4px 4px; color: #6b7280; font-size: 12px; } .vp-brand-results-line strong { color: #111827; } .vp-brand-products-section { padding: 18px 0 68px; } .vp-brand-products-section .vp-product-grid { align-items: stretch; } .vp-brand-empty { grid-column: 1 / -1; } .vp-brand-about-section { padding: 0 0 72px; } .vp-brand-about-card { max-width: 1060px; padding: 30px 34px; border: 1px solid #e1e7eb; border-radius: 20px; background: #fff; } .vp-brand-about-card > span { color: var(--vp-primary, #0b6b4d); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .vp-brand-about-card h2 { margin: 8px 0 10px; color: #111827; font-size: 24px; font-weight: 820; letter-spacing: -.02em; } .vp-brand-about-card p { margin: 0; color: #5f6b7a; font-size: 14px; line-height: 1.75; } .vp-brand-preloader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: #fff; opacity: 1; visibility: visible; transition: opacity .22s ease, visibility .22s ease; } .vp-brand-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .vp-brand-preloader-inner { display: grid; justify-items: center; gap: 18px; } .vp-brand-preloader img { max-width: 190px; max-height: 80px; object-fit: contain; filter: grayscale(1) contrast(1.04); } .vp-brand-preloader strong { color: #111; font-size: 24px; font-weight: 850; letter-spacing: -.02em; } .vp-brand-preloader-inner > span { width: 54px; height: 2px; overflow: hidden; position: relative; border-radius: 999px; background: #e5e7eb; } .vp-brand-preloader-inner > span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: inherit; background: #111; animation: vpBrandLoader 720ms ease-in-out infinite alternate; } @keyframes vpBrandLoader { from { transform: translateX(0); } to { transform: translateX(122%); } } @media (hover: hover) and (pointer: fine) { .vp-brand-hero-products:hover .vp-brand-hero-product--1 { transform: rotate(-2deg) translateY(-4px); } .vp-brand-hero-products:hover .vp-brand-hero-product--2 { transform: rotate(2deg) scale(.92) translateY(-3px); } .vp-brand-hero-products:hover .vp-brand-hero-product--3 { transform: rotate(4deg) scale(.82) translateY(-2px); } } @media (max-width: 1023.98px) { .vp-brand-hero, .vp-brand-hero-inner { min-height: 390px; } .vp-brand-hero-inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } .vp-brand-hero-product { width: 150px; border-radius: 20px; } .vp-brand-hero-product--1 { right: 110px; top: 78px; } .vp-brand-hero-product--2 { right: 0; top: 44px; } .vp-brand-hero-product--3 { right: 18px; top: 165px; } .vp-brand-toolbar { grid-template-columns: 1fr auto; } .vp-brand-summary { display: none; } } @media (max-width: 767.98px) { .vp-azadi-coupon-inner { min-height: 54px; justify-content: space-between; gap: 8px; } .vp-azadi-coupon-copy { justify-content: flex-start; gap: 7px; font-size: 10.5px; } .vp-azadi-coupon-copy strong { display: block; font-size: 11.5px; } .vp-azadi-coupon-copy > span:last-child { display: none; } .vp-azadi-copy-btn { min-height: 30px; padding: 6px 9px; font-size: 10px; white-space: nowrap; } .vp-azadi-copy-btn svg { display: none; } .vp-brand-hero { min-height: 420px; } .vp-brand-hero-inner { min-height: 420px; grid-template-columns: 1fr; align-items: end; padding-top: 34px; padding-bottom: 38px; } .vp-brand-hero-shade { background: linear-gradient(180deg, rgba(8,16,28,.40), rgba(8,16,28,.94)); } .vp-brand-hero-products { position: absolute; inset: 28px 12px auto auto; width: 190px; min-height: 150px; opacity: .76; } .vp-brand-hero-product { width: 88px; padding: 8px; border-radius: 15px; } .vp-brand-hero-product--1 { right: 83px; top: 20px; } .vp-brand-hero-product--2 { right: 10px; top: 3px; } .vp-brand-hero-product--3 { right: 21px; top: 77px; } .vp-brand-logo-card { min-height: 62px; margin-bottom: 17px; padding: 8px 12px; border-radius: 13px; } .vp-brand-logo-card img { max-width: 220px; height: 58px; } .vp-brand-hero h1 { font-size: 38px; } .vp-brand-tagline { max-width: 92%; font-size: 14px; line-height: 1.55; } .vp-brand-trust-row { margin-top: 17px; gap: 6px; } .vp-brand-trust-row span { min-height: 27px; padding: 5px 8px; font-size: 9.5px; } .vp-brand-toolbar-wrap { margin-top: -20px; } .vp-brand-toolbar { grid-template-columns: 1fr; gap: 10px; padding: 11px; border-radius: 16px; } .vp-brand-search { min-height: 49px; } .vp-brand-search input { height: 47px; font-size: 13px; } .vp-brand-search button { min-width: 78px; } .vp-brand-sort { justify-content: space-between; } .vp-brand-sort select { flex: 1; max-width: none; } .vp-brand-results-line { min-height: 44px; padding-top: 10px; font-size: 11px; } .vp-brand-products-section { padding-top: 10px; padding-bottom: 46px; } .vp-brand-about-card { padding: 22px 20px; border-radius: 16px; } .vp-brand-about-card h2 { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .vp-brand-preloader-inner > span::after { animation: none; width: 100%; } .vp-brand-hero-product, .vp-azadi-copy-btn { transition: none !important; } }