/* ==========================================================================
   RAINZON — ADVANCED STYLE LAYER
   Cursor spotlight + rotating ring on the header, 3D tilt product cards,
   image shimmer, staggered scroll reveals, glowing progress head.
   Every effect is progressive: it degrades to the normal look when the
   browser, the pointer type or prefers-reduced-motion say no.
   ========================================================================== */

@property --rz-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ================================================================ header FX */

/* soft light that follows the cursor across the floating pill */
.aiz-nexa header.rz-h7 .header-content-wrapper { position: relative; }
.aiz-nexa header.rz-h7 .rz-h7-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(240px 120px at var(--rz-mx, 50%) var(--rz-my, 50%),
            rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%);
    mix-blend-mode: screen;
    z-index: 0;
}
.aiz-nexa header.rz-h7 .header-content-wrapper:hover .rz-h7-spotlight { opacity: .9; }
.aiz-nexa header.rz-h7 .header-content-wrapper > * { position: relative; z-index: 1; }

/* rotating gradient ring on the key header controls */
.aiz-nexa header.rz-h7 .rz-ring { position: relative; }
.aiz-nexa header.rz-h7 .rz-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--rz-angle),
            var(--rz-h7-1, #FB7701), #FFB800, var(--rz-h7-2, #FF4800), var(--rz-h7-1, #FB7701));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    animation: rz-angle-spin 3.4s linear infinite;
    pointer-events: none;
}
.aiz-nexa header.rz-h7 .rz-ring:hover::before,
.aiz-nexa header.rz-h7 .rz-ring:focus-visible::before { opacity: 1; }
@keyframes rz-angle-spin { to { --rz-angle: 360deg; } }

/* glowing head on the scroll progress bar */
.rz-h7-progress { overflow: visible; }
.rz-h7-progress::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, #FFF6EE 0%, var(--rz-adv-1, #FB7701) 55%, rgba(251, 119, 1, 0) 72%);
    box-shadow: 0 0 10px rgba(251, 119, 1, .6);
    opacity: 0;
    transition: opacity .2s ease;
}
.rz-h7-progress.rz-h7-progress-live::after { opacity: 1; }

/* ======================================================== product cards FX */
.aiz-nexa .rz-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease;
}
.aiz-nexa .rz-tilt.rz-tilting { transition: transform .08s linear; }
.aiz-nexa .rz-tilt .rz-tilt-lift { transform: translateZ(0); transition: transform .35s ease; }
.aiz-nexa .rz-tilt.rz-tilting .rz-tilt-lift { transform: translateZ(24px); }

/* a light sweep across the card while hovering */
.aiz-nexa .rz-tilt { position: relative; overflow: hidden; }
.aiz-nexa .rz-tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(200px 160px at var(--rz-cx, 50%) var(--rz-cy, 50%),
            rgba(251, 119, 1, .10), rgba(251, 119, 1, 0) 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.aiz-nexa .rz-tilt.rz-tilting::after { opacity: 1; }

/* image shimmer until the lazy image really loads */
.rz-shimmer {
    position: relative;
    background-color: #F4F0ED;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 32%,
            rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, 0) 68%);
    background-size: 240% 100%;
    background-repeat: no-repeat;
    animation: rz-shim 1.5s linear infinite;
}
@keyframes rz-shim { to { background-position: -140% 0; } }
.rz-shimmer.rz-loaded,
.rz-shimmer:has(img.lazyloaded) {
    animation: none;
    background-image: none;
}

/* ============================================================ scroll reveal */
/* Fail-safe: cards stay visible by default and only *animate* when the
   observer marks them in — a missed callback can never hide a product. */
@media (prefers-reduced-motion: no-preference) {
    .rz-reveal.rz-in {
        animation: rz-rise .5s cubic-bezier(.22, .8, .3, 1) both;
        animation-delay: var(--rz-delay, 0ms);
    }
}
@keyframes rz-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rz-h7-spotlight,
    .aiz-nexa header.rz-h7 .rz-ring::before { animation: none; }
    .rz-h7-progress::after { display: none; }
}

/* Storefront wholesale pricing panel — loaded by the product detail page only. */
* ── storefront wholesale pricing panel ───────────────────────────────── */
.rz-wholesale{
  border:1px solid #FBE3D2; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(11,18,32,.05), 0 10px 26px -18px rgba(251,119,1,.4);
}
.rz-wholesale-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; background:linear-gradient(135deg,#FFF8F3 0%,#FFF2E8 100%);
  border-bottom:1px solid #FBE3D2;
}
.rz-wholesale-kicker{
  font-size:10px; font-weight:800; letter-spacing:.85px; text-transform:uppercase; color:#B45309;
  margin-bottom:5px;
}
.rz-wholesale-low{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.rz-wholesale-from{ font-size:12.5px; font-weight:700; color:#6B7280; }
.rz-wholesale-low b{ font-size:26px; font-weight:900; letter-spacing:-1px; color:#FB7701; line-height:1; }
.rz-wholesale-per{ font-size:12.5px; font-weight:600; color:#94A3B8; }
.rz-wholesale-note{ font-size:12px; font-weight:600; color:#6B7280; margin-top:5px; }
.rz-wholesale-badge{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  background:linear-gradient(135deg,#FF9A55 0%,#FB7701 52%,#E06800 100%);
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:6px 12px; border-radius:99px; box-shadow:0 5px 14px -5px rgba(251,119,1,.6);
}
.rz-wholesale-body{ padding:4px 0 0; }
.rz-wholesale-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.rz-wholesale-table thead th{
  font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#94A3B8;
  padding:10px 18px; text-align:left; border-bottom:1px solid #F1F3F7; background:#FCFDFF;
}
.rz-wholesale-table tbody td{ padding:12px 18px; border-top:1px solid #F5F6F9; color:#334155; }
.rz-wholesale-table tbody tr:first-child td{ border-top:0; }
.rz-wholesale-table tr.is-best{ background:#FFFAF5; }
.rz-wholesale-table tr.is-best td:first-child{ box-shadow:inset 3px 0 0 #FB7701; }
.rz-wholesale-table .amt{ font-weight:800; color:#E06800; white-space:nowrap; }
.rz-wholesale-tag{
  display:inline-block; margin-left:7px; background:linear-gradient(135deg,#FF9A55,#FB7701,#E06800);
  color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; vertical-align:middle;
}
.rz-wholesale-save{
  display:inline-block; background:#E9F9F0; color:#0E8A4F; font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:99px;
}
.rz-wholesale-foot{
  padding:12px 18px 15px; font-size:12px; color:#94A3B8; font-weight:600; line-height:1.5;
}
@media (max-width:575.98px){
  .rz-wholesale-head{ padding:13px 14px; flex-direction:column; align-items:flex-start; }
  .rz-wholesale-low b{ font-size:23px; }
  .rz-wholesale-table thead th,.rz-wholesale-table tbody td{ padding-left:14px; padding-right:14px; }
}

/* ── wholesale tiers: clickable + refined ─────────────────────────────── */
.rz-wholesale{ transition:box-shadow .22s var(--ease, ease); }
.rz-wholesale.rz-picked{ box-shadow:0 2px 6px rgba(11,18,32,.06), 0 14px 32px -20px rgba(251,119,1,.55); }

.rz-wholesale-table tbody tr.rz-tier{
  cursor:pointer; position:relative;
  transition:background .16s ease, transform .16s ease;
}
.rz-wholesale-table tbody tr.rz-tier:hover{ background:#FFFCF9; }
.rz-wholesale-table tbody tr.rz-tier:focus-visible{
  outline:2px solid #FB7701; outline-offset:-2px;
}
.rz-wholesale-table tbody tr.rz-tier:active{ transform:scale(.995); }

.rz-wholesale-table tbody tr.rz-tier.is-picked{ background:#FFF6EF; }
.rz-wholesale-table tbody tr.rz-tier.is-picked td:first-child{ box-shadow:inset 3px 0 0 #FB7701; }

.rz-tier-qty{ font-size:13.5px; }
.rz-tier-qty b{ font-weight:800; color:#0B1220; }

.rz-tier-pick{
  display:inline-flex; align-items:center; margin-left:9px;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:#FB7701; opacity:0; transform:translateX(-3px);
  transition:opacity .16s ease, transform .16s ease;
}
.rz-wholesale-table tbody tr.rz-tier:hover .rz-tier-pick{ opacity:1; transform:translateX(0); }
.rz-wholesale-table tbody tr.rz-tier.is-picked .rz-tier-pick{ opacity:1; transform:translateX(0); color:#0E8A4F; }
.rz-wholesale-table tbody tr.rz-tier.is-picked .rz-tier-pick::before{ content:"\2713\00a0"; }

@media (max-width:575.98px){
  .rz-tier-pick{ display:none; }
  .rz-wholesale-table tbody tr.rz-tier{ min-height:48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PDP — use the full screen, cut the dead space
   (page is already full-width; the waste is inside sections)
   ═══════════════════════════════════════════════════════════════════ */
/* 1 — tighter page frame */
.product-details > .container{padding-left:10px !important;padding-right:10px !important;max-width:100% !important}
.product-details .pt-30px.pb-6{padding-top:12px !important;padding-bottom:12px !important}

/* 2 — empty-state cards: no dead height */
.reviews-ratings-container,
.frequently-bought-container{border-radius:14px !important;padding:12px 14px !important;margin-bottom:12px !important}
.reviews-ratings-container .text-center,
.frequently-bought-container .text-center,
.reviews-ratings-container .slick-list,
.frequently-bought-container .slick-list,
.reviews-ratings-container .slick-track,
.frequently-bought-container .slick-track,
.reviews-ratings-container .w-100,
.frequently-bought-container .w-100{min-height:0 !important;height:auto !important;padding-top:4px !important;padding-bottom:4px !important}
.reviews-ratings-container img,
.frequently-bought-container img{max-height:120px !important}

/* 3 — sections sit closer together */
.product-details .container.mb-32px{margin-bottom:12px !important}
.product-details .mb-4,.product-details .mb-5{margin-bottom:12px !important}
.product-details-nav-tab.mb-5{margin-bottom:12px !important}
.product-details .py-20px{padding-top:12px !important;padding-bottom:12px !important}

/* 4 — gallery: no white shelf under the image */
.product-details .product-slider-wrapper{padding-bottom:0 !important;margin-bottom:0 !important}
.product-details .col-lg-6 > .mb-4:last-child{margin-bottom:0 !important}

/* ═══════════════════════════════════════════════════════════════════
   PDP mobile — full-bleed, no side gutters
   Measured at 412px: card ended at x≈365, ~47px empty strip on the right.
   Cause: .container padding (14px) + Bootstrap column gutters (15px) stacking.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  /* 1 — reclaim the outer gutters */
  .product-details > .container{padding-left:8px !important;padding-right:8px !important;max-width:100% !important}
  .product-details .pt-30px.pb-6{padding-left:0 !important;padding-right:0 !important}

  /* 2 — columns lose their 15px gutters so cards span the full width */
  .product-details > .container .row{margin-left:0 !important;margin-right:0 !important}
  .product-details > .container [class*="col-"]{padding-left:0 !important;padding-right:0 !important}

  /* 3 — the gallery card goes edge to edge */
  .product-details .product-slider-wrapper{margin-left:0 !important;margin-right:0 !important;width:100% !important}
  .product-details .product-slider-wrapper > *,
  .product-details .product-slider-wrapper .swiper{border-radius:14px !important;width:100% !important}

  /* 4 — the sections below the fold also span full width */
  .product-details .rounded-2,
  .product-details .rounded-1{border-radius:14px !important}
  .product-details .mb-32px,
  .product-details .nav-tab-header,
  .product-details .tab-scroll-wrapper{margin-left:0 !important;margin-right:0 !important;width:100% !important}

  /* 5 — thumbnails line up with the card edges */
  .product-details .thumb-slider,
  .product-details .swiper-thumbs{padding-left:0 !important;padding-right:0 !important}
}

/* ═══════════════════════════════════════════════════════════════════
   Product card — original price always visible
   The theme hid .disc-amount with opacity:0 + negative margin and only
   revealed it on :hover. Touch devices have no hover, so the original
   price never showed. Force it visible on every card.
   ═══════════════════════════════════════════════════════════════════ */
.aiz-card-box .disc-amount,
.aiz-nexa .aiz-card-box .disc-amount,
.aiz-card-box:hover .disc-amount,
.aiz-card-box:focus-within .disc-amount,
li:hover .disc-amount,
.col:hover .disc-amount{
    opacity: 1 !important;
    visibility: visible !important;
    margin-right: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    display: inline-block !important;
}

/* keep the struck price readable and never let it wrap away */
.aiz-card-box .disc-amount del,
.aiz-nexa .aiz-card-box .disc-amount del{
    color: #9CA3AF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    white-space: nowrap;
}

/* the price row: original then discounted, sat together and centred */
.aiz-card-box .fs-14.d-flex.justify-content-center{
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
}
.aiz-card-box .fs-14.d-flex.justify-content-center > div:last-of-type{
    white-space: nowrap;
}

/* small screens: keep both prices on one line even in a 2-up grid */
@media (max-width:575.98px){
    .aiz-card-box .disc-amount del{ font-size: 12px !important; }
    .aiz-card-box .fs-14.d-flex.justify-content-center{ font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage — finishing & polishing (additive; scoped to the home
   sections' own rz-* classes so no other page is affected)
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — even vertical rhythm between home sections */
.rz-deals-head,
.featured-categories-slider,
.feactured-best-selling-product-section,
.td-product-slider,
.custom-product-slider{margin-bottom:24px !important}

/* 2 — the section heads line up and breathe */
.rz-deals-head{align-items:center;gap:12px;flex-wrap:wrap}
.rz-deals-headtext{font-size:20px !important;font-weight:800 !important;letter-spacing:-.02em}
.rz-deal-body{padding:12px 12px 14px !important}
.rz-deal-price{font-size:14px !important;font-weight:800 !important;letter-spacing:-.01em}

/* 4 — the deal meta row (sold / rating) reads the same everywhere */
.rz-deal-meta{font-size:12px !important;gap:8px}

/* 5 — keep every home grid's cards on one visual scale */
.td-product-slider .card,
.custom-product-slider .card,
.feactured-best-selling-product-section .card{
    border-radius:14px !important;
    border:1px solid #EFEFF2 !important;
    box-shadow:0 8px 22px -16px rgba(31,41,55,.20) !important;
    transition:box-shadow .18s ease, transform .18s ease;
}
.td-product-slider .card:hover,
.custom-product-slider .card:hover,
.feactured-best-selling-product-section .card:hover{
    box-shadow:0 14px 30px -16px rgba(31,41,55,.28) !important;
    transform:translateY(-2px);
}

/* 6 — product images sit in a consistent, centred tile */
.td-product-slider .card img,
.custom-product-slider .card img,
.feactured-best-selling-product-section .card img{
    object-fit:contain !important;
    background:#fff;
}

/* 7 — price typography unified across the home cards */
.td-product-slider .card .fw-700,
.custom-product-slider .card .fw-700,
.feactured-best-selling-product-section .card .fw-700{
    font-weight:800 !important;
}
.td-product-slider .card del,
.custom-product-slider .card del,
.feactured-best-selling-product-section .card del{
    color:#9CA3AF !important;
    font-weight:500 !important;
}

/* 8 — category tiles: consistent radius + lift */
.featured-categories-slider a,
.featured-categories-slider .card{
    border-radius:14px !important;
    transition:transform .18s ease, box-shadow .18s ease;
}
.featured-categories-slider a:hover,
.featured-categories-slider .card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -16px rgba(31,41,55,.26) !important;
}

/* 10 — mobile: consistent gutters and card scale */
@media (max-width:575.98px){
    .rz-deals-headtext{font-size:17px !important}
    .rz-deal-body{padding:10px !important}
    .rz-deal-price{font-size:13px !important}
    .td-product-slider .card,
    .custom-product-slider .card,
    .feactured-best-selling-product-section .card{border-radius:12px !important}
}

/* ── mobile ── */

/* ── মোবাইল ── */

/* ═══════════════════════════════════════════════════════════════════
   প্রোডাক্ট কার্ডের ছবি — পুরোপুরি ফ্রেমের ভিতরে ফিট (আসল ক্লাস)
   ───────────────────────────────────────────────────────────────────
   থিমের কার্ডের <img> ক্লাস: `w-100 h-100 product-main-image`
   এবং `w-100 h-100 product-hover-image position-absolute`।
   w-100 + h-100 কিন্তু object-fit ছাড়া = object-fit:fill ডিফল্ট,
   অর্থাৎ ছবি দুই দিকেই টেনে ভরানো হয় -> ভিন্ন অনুপাতের ছবি বিকৃত হয়।
   contain দিলে পুরো ছবি দেখা যায়, কিছুই কাটা বা টানা পড়ে না।
   ═══════════════════════════════════════════════════════════════════ */
.product-main-image,
.product-hover-image{
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #fff;
}

/* কার্ডের ছবির ধারক — ছবি যেন কেটে না যায় */
.aiz-card-box .overflow-hidden,
.card .overflow-hidden,
.product-box .overflow-hidden{
    background: #fff;
}

/* mobile */
@media (max-width:575.98px){
    .product-main-image,
    .product-hover-image{ padding: 4px; box-sizing: border-box; }
}

/* ── মোবাইল ── */

/* ট্যাবলেট — মাঝামাঝি মাপ, কার্ড যেন খুব লম্বা না হয় */

/* মোবাইল — স্ট্যান্ডার্ড কার্ডের h-100px অনুযায়ী */

/* ছোট মোবাইল (২ কলাম) */

/* ── মোবাইল ── */

/* ── মোবাইল ── */

/* ── ১০. মোবাইল ফিনিশিং ── */

/* ═══════════════════════════════════════════════════════════════════
   Wholesale কার্ড — মোবাইল ফিক্স
   ───────────────────────────────────────────────────────────────────
   সমস্যা: ২-কলামের সরু কার্ডে দামের সারিতে তিনটি জিনিস (কাটা দাম +
   বোল্ড দাম + WHOLESALE ব্যাজ) এক লাইনে আঁটে না — ব্যাজ কার্ডের ডান
   প্রান্ত ছাড়িয়ে কেটে যায় ('WH...')।
   সমাধান: ছোট পর্দায় দামের সারি ভাঁজ হয় — ব্যাজ দামের নিচে চলে যায়,
   দামের আকার কমে, কোনোটাই আর বাইরে বেরোয় না।
   ═══════════════════════════════════════════════════════════════════ */

/* ── ট্যাবলেট/মোবাইল (২-কলাম শুরু হয়) ── */

/* ── মোবাইল: ব্যাজ দামের নিচে আলাদা লাইনে ── */

/* ── ছোট মোবাইল (৪১২px ও কম) ── */

/* ── মোবাইল ── */

/* ═══════════════════════════════════════════════════════════════════
   Wholesale কার্ড — মোবাইলে দাম কাটা পড়া বন্ধ
   ───────────────────────────────────────────────────────────────────
   সমস্যা: সরু কার্ডে দামের ওপর overflow:hidden + text-overflow:ellipsis
   থাকায় "৳294,500" কেটে "৳294,5..." হয়ে যেত।
   সমাধান: ওই ক্লিপিং বাদ — কাটা দাম নিজের লাইনে, আর পুরো দাম তার
   নিচে। কোনোটাই কাটে না, কোনো '...' আসে না।
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Today's Deals / সাধারণ কার্ড — দাম কার্ডের ভিতরে আঁটানো
   ───────────────────────────────────────────────────────────────────
   সমস্যা: কাটা দাম ও নতুন দাম — দুটোই nowrap; মিলে কার্ডের প্রস্থ ছাড়িয়ে
   যেত, ফলে ডান প্রান্ত কেটে যেত ("৳294,500 ৳310,...")।
   সমাধান: দুটোই কার্ডের ভিতরে রেখে আকার সামঞ্জস্য — না আঁটলে কাটা দাম
   নিচের লাইনে চলে যায়, কোনোটাই কাটে না।
   ═══════════════════════════════════════════════════════════════════ */

/* কাটা (পুরোনো) দাম — ছোট, কম জায়গা নেয় */
.aiz-card-box .disc-amount del,
.aiz-nexa .aiz-card-box .disc-amount del{
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #A8B2C1 !important;
    white-space: nowrap !important;
}

/* দামের সারি — ভাঁজ হতে পারে, কার্ড ছাড়ায় না */
.aiz-card-box .fs-14.d-flex.justify-content-center{
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    column-gap: 5px !important;
    row-gap: 1px !important;
    padding: 0 6px !important;
    max-width: 100% !important;
    overflow: hidden;
}
.aiz-card-box .fs-14.d-flex.justify-content-center > div{
    min-width: 0 !important;
    max-width: 100% !important;
}

/* নতুন দাম — একটু ছোট, যাতে কাটা দামের সাথে এক লাইনে ধরে */
.aiz-card-box .fs-14.d-flex.justify-content-center .fw-700{
    font-size: 13.5px !important;
    letter-spacing: -.015em;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

/* কার্ড — ভিতরের কিছু বাইরে বেরোবে না */
.aiz-card-box{ overflow: hidden !important; }

/* নাম — দুই লাইনে থামুক, কার্ডের উচ্চতা সমান থাকে */
.aiz-card-box h3 a,
.aiz-card-box h3{ overflow: hidden; }

/* মোবাইল — আরও ছোট, আঁটসাঁট */
@media (max-width: 575.98px){
    .aiz-card-box .disc-amount del{ font-size: 10.5px !important; }
    .aiz-card-box .fs-14.d-flex.justify-content-center .fw-700{ font-size: 12.5px !important; }
    .aiz-card-box .fs-14.d-flex.justify-content-center{ padding: 0 4px !important; column-gap: 4px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   স্টোর লিস্টিং — এক সারিতে ৫টি প্রোডাক্ট
   ───────────────────────────────────────────────────────────────────
   গ্রিড row-এ row-cols-xxl-5 লেখা থাকলেও .rz-store-grid > .col এর
   !important নিয়মগুলো ২৫% (৪টি) চাপিয়ে দিচ্ছিল। এখানে স্পষ্টভাবে
   ২০% (৫টি) বসানো হলো — পর্দা ছোট হলে ধাপে ধাপে কমবে।
   ═══════════════════════════════════════════════════════════════════ */

/* ৫ কলামে কার্ড সরু হয় — ভিতরের ফাঁকা একটু কমাই */

   ওটার specific = ৩টি ক্লাস। তাই 'html body' যোগ করে ২ এলিমেন্ট বাড়িয়ে
   নিশ্চিতভাবে ওপরে উঠলাম — লোড-ক্রম যাই হোক, ৫ কলামই থাকবে।
   ═══════════════════════════════════════════════════════════════════ */

/* মাঝারি ডেস্কটপ — ৪টি */

/* ট্যাবলেট — ৩টি */

/* মোবাইল — ২টি */

   ওটার class-count = ৪। তাই আমি ঠিক একই class-count নিয়ে
   (4 класс + html body) লিখলাম — এখন specificity-তে ওপরে, আর
   লোড-ক্রমেও পরে। ফল: ৫ কলাম নিশ্চিত।
   ═══════════════════════════════════════════════════════════════════ */

/* মাঝারি ডেস্কটপ — ৪টি */

/* ট্যাবলেট — ৩টি */

/* মোবাইল — ২টি */

/* ═══════════════════════════════════════════════════════════════════
   Wholesale সেকশন — মোবাইলে প্রান্ত পর্যন্ত (অ্যাপের মতো)
   ───────────────────────────────────────────────────────────────────
   বাড়তি ফাঁকা আসত দুটো জায়গা থেকে:
     ১) .layout-container-এর পাশে ১২px প্যাডিং
     ২) gutters-16 → দুই কলামের মাঝে ৩২px
   এখন সেকশনটা কন্টেইনারের বাইরে বেরিয়ে প্রান্ত ছোঁবে, আর কলামের
   মাঝে থাকবে মাত্র ৮px সরু গাটার। শিরোনামটা ভিতরে থাকবে (যাতে
   কিনারায় লেগে না যায়)।
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px){

    /* ১. সেকশন কন্টেইনারের প্যাডিং ভেদ করে প্রান্ত পর্যন্ত */
    #rzWholesaleSection{
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: 22px !important;
    }

    /* ২. শিরোনাম ও View All — ভিতরে, শ্বাস নেওয়ার জায়গা রেখে */
    #rzWholesaleSection > .d-flex,
    #rzWholesaleSection .rz-deals-headtext,
    #rzWholesaleSection .fs-13.text-muted{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ৩. সরু গাটার — মাঝের মোটা ফাঁকা চলে গেল */
    #rzWholesaleSection .row{
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    #rzWholesaleSection .row > [class*="col"]{
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ছোট মোবাইলে আরও টাইট */
@media (max-width: 575.98px){
    #rzWholesaleSection .row{ margin-left: -3px !important; margin-right: -3px !important; }
    #rzWholesaleSection .row > [class*="col"]{
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

/* ── ছোট পর্দা: আরও টাইট ── */

/* ── ২. কার্ডের ভিতরের প্যাডিং কমানো (হোম রো-গুলোতে) ── */
.td-product-slider .card,
.custom-product-slider .card,
.feactured-best-selling-product-section .card{
    border-radius: 14px !important;
}
.td-product-slider .aiz-card-box,
.custom-product-slider .aiz-card-box,
.feactured-best-selling-product-section .aiz-card-box{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.td-product-slider .aiz-card-box > .p-2,
.custom-product-slider .aiz-card-box > .p-2{
    padding: 8px 9px 10px !important;
}

/* ── ৩. মোবাইলে সব হোম সেকশন প্রান্ত পর্যন্ত ── */
@media (max-width: 767.98px){
    /* শিরোনামগুলো ভিতরে থাকবে */
    .td-product-slider > .d-flex,
    .custom-product-slider > .d-flex,
    .rz-deals-head{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   মোবাইল হোমপেজ — অ্যাপ মোড (≤768px)
   ───────────────────────────────────────────────────────────────────
   নেটিভ অ্যাপের মতো: প্রান্ত-প্রান্ত ২ কলাম, বড় ছবির টাইল, সাদা
   গোলাকার কার্ড, নরম ছায়া, বড় নাম ও দাম, অপ্রয়োজনীয় টেক্সট লুকানো,
   স্পর্শের জন্য বড় টাচ-টার্গেট।
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px){

    /* ── ৩. ছবি প্রধান — বড় টাইল, কেন্দ্রে বসানো ── */
    .td-product-slider .aiz-card-box .image,
    .custom-product-slider .aiz-card-box .image{
        border-radius: 14px 14px 0 0 !important;
        background: #FBFBFC !important;
        margin: 0 !important;
    }
    /* অ্যাপে hover-ছবি লাগে না, বাড়তি ট্যাগও নয় */
    .td-product-slider .product-hover-image,
    .custom-product-slider .product-hover-image{ display: none !important; }

    /* ── ৫. অপ্রয়োজনীয় টেক্সট লুকানো (অ্যাপের পরিচ্ছন্নতা) ── */
    .td-product-slider .aiz-card-box .fs-12,
    .custom-product-slider .aiz-card-box .fs-12,
    .td-product-slider .aiz-card-box .text-secondary.fs-12,
    .custom-product-slider .aiz-card-box .text-secondary.fs-12{
        display: none !important;   /* "x Sold" জাতীয় মেটা */
    }
    .rz-deals-headtext{
        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: -.02em;
    }

    /* ── ৭. ক্যাটাগরি টাইল — গোলাকার, অ্যাপ-ঘরানা ── */
    .featured-categories-slider .aiz-card-box,
    .featured-categories-slider .cat-card{
        border-radius: 16px !important;
        background: #FBFBFC !important;
        border: 1px solid #EFF0F3 !important;
    }
}

/* ছোট মোবাইলে ছবির উচ্চতা একটু কম, যাতে ২ কলাম ঠিকভাবে ধরে */
@media (max-width: 575.98px){
    .td-product-slider .product-main-image,
    .custom-product-slider .product-main-image{ max-height: 165px; }
}

/* ═══════════════════════════════════════════════════════════════════
   মোবাইল — ফিল্টার সাইডবার লেআউটের বাইরে (off-canvas)
   ───────────────────────────────────────────────────────────────────
   থিমের CSS ওটাকে শুধু opacity:0 + visibility:hidden করে — পিক্সেল
   লুকায়, কিন্তু লেআউটে থেকে যায়। তাই বাঁ দিকে ফাঁকা জায়গা দখল করে
   প্রোডাক্টগুলোকে সরু করে দিত।
   এখানে position:fixed করে সম্পূর্ণ ফ্লো থেকে বাদ দেওয়া হলো, আর
   'active' হলে ডান দিক থেকে স্লাইড-ইন করবে (থিমের নিজের JS).
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px){

    /* ── ১. র্যাপার ফ্লো-থেকে বাদ — জায়গা দখল করবে না ── */
    .collapse-sidebar-wrap.sidebar-xl,
    .aiz-top-menu-sidebar.collapse-sidebar-wrap,
    .collapse-sidebar-wrap{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        flex: 0 0 0 !important;
        z-index: 1035 !important;
        pointer-events: none !important;
    }
    .collapse-sidebar-wrap.active{
        width: 100% !important;
        pointer-events: auto !important;
    }

    /* ── ২. প্যানেলের ভিতরটা — বাঁ কিনারা থেকে স্লাইড ── */
    .collapse-sidebar-wrap .collapse-sidebar{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 86% !important;
        max-width: 340px !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        background: #fff !important;
        z-index: 1036 !important;
        box-shadow: 0 0 44px rgba(17,24,39,.20) !important;
    }
    .collapse-sidebar-wrap.active .collapse-sidebar{
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   সংশোধন — গ্রিড ডান দিকে ওভারফ্লো করছিল
   ───────────────────────────────────────────────────────────────────
   ভুল:  width:100%  +  margin-left/right:-12px  একসাথে দিলে এলিমেন্ট
          প্যারেন্টের সমান চওড়া হয়, তারপর দুই পাশে ১২px বেরিয়ে যায়
          → ২৪px ওভারফ্লো → ডান কলামের কার্ড কেটে যায়।
   সমাধান: width:auto — তখন প্রস্থ = প্যারেন্টের প্রস্থ + ২৪px,
          ঠিক যতটা দরকার, এক পিক্সেলও বাড়তি নয়।
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   ২) কারোশেল সেকশনের ডাবল ঋণাত্মক মার্জিন বাতিল
   ───────────────────────────────────────────────────────────────────
   .custom-product-slider / .td-product-slider আর তাদের সেকশন-র্যাপার
   দুটোতেই -12px বসেছিল → জমে -24px হয়ে কারোশেল স্ক্রিনের চেয়ে ৪৮px
   চওড়া হয়ে গিয়েছিল → বাঁ ও ডান দুই কার্ডই কাটা পড়ত।
   এখন কারোশেল-সেকশনে মার্জিন ০ — কাটা বন্ধ, গ্রিড-সেকশনে
   প্রান্ত-প্রান্ত ঠিক আগের মতোই থাকল।
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px){
    .td-product-slider,
    .custom-product-slider,
    .feactured-best-selling-product-section,
    .featured-categories-slider{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* ভিতরের রো-গুলোও স্বাভাবিক প্যাডিংয়ে ফিরল */
    .td-product-slider .row,
    .custom-product-slider .row,
    .feactured-best-selling-product-section .row,
    .featured-categories-slider .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .td-product-slider .row > [class*="col"],
    .custom-product-slider .row > [class*="col"],
    .feactured-best-selling-product-section .row > [class*="col"],
    .featured-categories-slider .row > [class*="col"]{
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

.rz-offer-row{
    display: flex !important;
    justify-content: center !important;
    margin: 3px 0 4px !important;
}

/* ── হোভার / ট্যাপ ── */

/* ── মোবাইল ── */

/* ═══════════════════════════════════════════════════════════════════
   Wholesale সেকশন — কাটা পড়া বন্ধ (ঋণাত্মক মার্জিন পরিষ্কার)
   ───────────────────────────────────────────────────────────────────
   আগে সেকশনে -12px (কন্টেইনার ভেদ করে) আর রো-তে -4px — দুটো একসাথে
   জমে গ্রিড স্ক্রিনের চেয়ে চওড়া হয়ে দুই পাশে কার্ড কেটে দিত।
   এখন: সেকশন স্বাভাবিক জায়গায়, রো-তে ছোট গাটার, কলামে সমান প্যাডিং।
   ═══════════════════════════════════════════════════════════════════ */

/* ── ৫) মোবাইল ── */

/* ── মোবাইল ── */

/* দামের সারিও বাঁয়ে — চিপের সাথে এক রেখায় */
html body .aiz-card-box .fs-14.d-flex.justify-content-center,
html body .fs-14.d-flex.justify-content-center{
    justify-content: flex-start !important;
}

/* ═══════════════════════════════════════════════════════════════════
   /todays-deal — দাম কার্ডের ভিতরে পুরোপুরি আঁটানো
   ───────────────────────────────────────────────────────────────────
   দাম এখন দেখা যাচ্ছে, কিন্তু কার্ডের ঠিক নিচের কিনারায় বসে
   সামান্য কাটা পড়ছে। কারণ: ছবির টাইল বেশি লম্বা, তাই বাকি অংশ
   কার্ডের গণ্ডি ছাড়িয়ে যাচ্ছে।
   সমাধান: মোবাইলে টাইল একটু ছোট + বডির নিচে একটু প্যাডিং।
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   Wholesale কার্ড (rz_wholesale_card) — একটাই পরিচ্ছন্ন ব্লক
   ───────────────────────────────────────────────────────────────────
   জমানো ৩৮১টি নিয়ম কাটার পর মাঠ খালি — তাই এখন কোনো !important
   লাগে না, আর কোনো পুরোনো নিয়মের সাথে যুদ্ধও নেই।
   গঠন:  ছবি → নাম → [ছাড়] [Wholesale] → দাম
   নাম কাটা হয় max-height দিয়ে — -webkit-line-clamp নয়।
   ═══════════════════════════════════════════════════════════════════ */

.rz-ws-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ECEEF2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.rz-ws-thumb{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 10px;
    background: #F7F8FA;
    border-bottom: 1px solid #F0F2F6;
    overflow: hidden;
}
.rz-ws-thumb img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 128px;
    object-fit: contain;
}
.rz-ws-body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 12px 12px;
}
.rz-ws-name{
    margin: 0 0 7px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -.015em;
    color: #0F172A;
    text-align: left;
    max-height: 2.8em;
    overflow: hidden;
}
.rz-ws-name a{ display: block; color: inherit; text-decoration: none; }

.rz-tags-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 9px;
    padding: 0;
}
.rz-offer-chip{
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 7px;
    color: #fff;
    background: #FB7701;
    white-space: nowrap;
}
.rz-ws-tag{
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 7px;
    color: #B45309;
    background: #FFF8F0;
    border: 1px solid #FCD9AE;
    white-space: nowrap;
}

.rz-ws-pricerow{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 9px 0 0;
    padding: 0;
}
.rz-ws-price{
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.03em;
    color: #0F172A;
}
.rz-ws-was{
    font-size: 11.5px;
    font-weight: 500;
    color: #9AA3B2;
    text-decoration: line-through;
    margin-right: 5px;
}
.rz-ws-badge, .rz-ws-off{ display: none; }

@media (max-width: 575.98px){
    .rz-ws-thumb{ height: 126px; padding: 8px; }
    .rz-ws-thumb img{ max-height: 106px; }
    .rz-ws-name{ font-size: 12.5px; }
    .rz-ws-price{ font-size: 15.5px; }
    .rz-ws-was{ font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   লিস্টিং গ্রিড — মোবাইলে প্রান্ত-প্রান্ত (Daraz-ধাঁচ)
   ───────────────────────────────────────────────────────────────────
   বাড়তি ফাঁকা আসত দুটো জায়গা থেকে:
     ১) .layout-container-এর পাশে ১২px প্যাডিং
     ২) কলামের গাটার
   এখন গ্রিড কন্টেইনারের বাইরে বেরিয়ে স্ক্রিনের কিনারা ছোঁবে,
   আর কার্ডের মাঝে থাকবে মাত্র ৩px সরু ফাঁক — দারাজের মতো।
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px){
    /* ১) গ্রিড স্ক্রিনের কিনারা পর্যন্ত */
    .rz-store-grid,
    .products-wrapper-grid{
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: auto !important;
        max-width: none !important;
    }
    /* ২) সরু গাটার — দুই কার্ডের মাঝে ৩px */
    .rz-store-grid > .col,
    .products-wrapper-grid > .col{
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding: 1.5px !important;
    }
    /* ৩) কার্ড কলাম ভরায় — ভিতরের বাড়তি ফাঁকা কমানো */
    .rz-store-grid .rz-ws-card,
    .rz-store-grid .aiz-card-box,
    .products-wrapper-grid .rz-ws-card,
    .products-wrapper-grid .aiz-card-box{
        border-radius: 9px !important;
        height: 100% !important;
    }
    .rz-store-grid .rz-ws-thumb,
    .products-wrapper-grid .rz-ws-thumb{
        height: 118px !important;
        padding: 7px !important;
    }
    .rz-store-grid .rz-ws-thumb img,
    .products-wrapper-grid .rz-ws-thumb img{ max-height: 102px !important; }
    .rz-store-grid .rz-ws-body,
    .products-wrapper-grid .rz-ws-body{ padding: 8px 9px 10px !important; }
    .rz-store-grid .rz-ws-name,
    .products-wrapper-grid .rz-ws-name{ font-size: 12px !important; margin-bottom: 6px !important; }

    /* ৪) হেডার ও টুলবার আগের জায়গাতেই থাকবে (শুধু গ্রিড প্রান্ত ছোঁবে) */
    .rz-page-head-title, .rz-page-head-sub,
    .rz-store-stats, .rz-store-toolbar{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   প্রোডাক্ট ছবির উপরে কোনো ট্যাগ/ব্যাজ নয়
   ───────────────────────────────────────────────────────────────────
   থিমের কার্ড ছবির উপরে ব্যাজ বসায় তিন জায়গায়:
     • ছাড়ের শতাংশ  → <span class="absolute-top-left rounded …">-5%</span>
     • "Wholesale"   → <span class="absolute-top-left rounded …">Wholesale</span>
     • অন্যান্য লেবেল → inline background-color দেওয়া span
   আর home_product_box কার্ডে: <span class="fs-11 fw-600 rounded-pill …">
   সবগুলোই বন্ধ — কারণ একই তথ্য নামের নিচের ট্যাগ-সারিতে দেখানো হয়
   (ছাড় + Wholesale), আর ছাড় দামের সারিতেও থাকে।
   ═══════════════════════════════════════════════════════════════════ */

span.absolute-top-left,
span[class*="absolute-top-left"],
.aiz-card-box span[class*="absolute-top-left"],
.aiz-card-box span.fs-11.rounded-pill,
.aiz-card-box span.fs-11.fw-600.rounded-pill,
.rz-store-grid span.absolute-top-left,
.rz-wholesale-section span.absolute-top-left,
.feactured-best-selling-product-section span.absolute-top-left,
.custom-product-slider span.absolute-top-left,
.td-product-slider span.absolute-top-left{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   প্রোডাক্ট ছবির উপরে যেকোনো ব্যাজ বন্ধ — বিস্তৃত নিয়ম
   ───────────────────────────────────────────────────────────────────
   নির্দিষ্ট ক্লাস ধরে ধরে খুঁজতে গিয়ে বারবার ব্যাজ বাদ পড়ছিল
   (থিমের কার্ড ভিন্ন ভিন্ন partial-এ ভিন্ন ক্লাসে ব্যাজ বসায়)।
   থিমের সব ব্যাজের একটাই সাধারণ চিহ্ন: inline style-এ
   background-color থাকে, আর তারা ছবির ভিতরে absolute হয়।
   তাই এবার নাম নয়, ওই চিহ্ন ধরেই বন্ধ করা হলো।
   ═══════════════════════════════════════════════════════════════════ */

/* ১) কার্ডের ভিতরে inline background-color দেওয়া যেকোনো span */
.aiz-card-box span[style*="background-color"],
.aiz-card-box span[style*="background:"],
.rz-store-grid span[style*="background-color"],
.rz-wholesale-section span[style*="background-color"],
.feactured-best-selling-product-section span[style*="background-color"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ২) absolute + inline background — hover আইকন ছোঁবে না */
.aiz-card-box [class*="absolute"][style*="background-color"],
.aiz-card-box [class*="absolute"][style*="background:"],
.aiz-card-box [class*="absolute-top-left"],
.aiz-card-box [class*="absolute-top-right"]:not([class*="hov"]){
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ৩) badge / label / rounded-pill নামের যেকোনো ব্যাজ */
.aiz-card-box [class*="badge"],
.aiz-card-box [class*="label"]:not([class*="helpline"]),
.aiz-card-box [class*="rounded-pill"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ৪) আমার ট্যাগ-চিপ অটুট থাকবে (নামের নিচে) */
.rz-tags-row, .rz-offer-chip, .rz-ws-tag,
.aiz-card-box .rz-tags-row, .aiz-card-box .rz-offer-chip, .aiz-card-box .rz-ws-tag{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}
.rz-tags-row, .aiz-card-box .rz-tags-row{ display: flex !important; }

/* আমার ট্যাগ-চিপ ও ট্যাগ-সারি — সবসময় অটুট */
.rz-tags-row, .rz-offer-chip, .rz-ws-tag{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 9px !important;
    position: static !important;
    left: auto !important;
}
.rz-tags-row{
    display: flex !important;
    gap: 6px !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ফুটার — একই মানের ডিজাইন পাস (নিরাপদ, লেআউট-নিরপেক্ষ)
   ───────────────────────────────────────────────────────────────────
   শুধু টাইপোগ্রাফি, ফাঁকা ও রঙ — কোনো গ্রিড/উচ্চতা বদলানো হয়নি,
   তাই কোনো পেজে লেআউট ভাঙার ঝুঁকি নেই।
   ═══════════════════════════════════════════════════════════════════ */

footer{ padding-top: 40px !important; }
footer .footer-widget{ margin-bottom: 22px !important; }

/* সেকশন শিরোনাম — ছোট, uppercase, কমলা, সুসংগত */
footer h4, footer h5, footer h6,
footer .footer-widget h4, footer .footer-widget h5,
footer .widget-title{
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #FB7701 !important;
    margin: 0 0 12px !important;
    line-height: 1.3 !important;
}

/* লিংক-তালিকা */
footer ul{ list-style: none !important; padding: 0 !important; margin: 0 !important; }
footer ul li{ margin-bottom: 9px !important; line-height: 1.5 !important; }
footer ul li:last-child{ margin-bottom: 0 !important; }
footer ul li a,
footer .footer-widget a:not([class*="btn"]){
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    text-decoration: none !important;
    transition: color .18s ease !important;
}
footer ul li a:hover,
footer .footer-widget a:not([class*="btn"]):hover{ color: #FB7701 !important; }

/* সাধারণ লেখা (শহর / ফোন / ইমেইল) */
footer p, footer span:not([class*="badge"]){ line-height: 1.55 !important; }
footer .fs-10, footer .fs-12{ font-size: 12.5px !important; color: #6B7280 !important; }

/* লোগো কার্ড — নরম ছায়া, গোলাকার */
footer a[class*="logo"], footer .footer-logo, footer img[class*="logo"]{ border-radius: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   সংশোধন — ফুটারের আইকন/স্প্যান ফিরিয়ে আনা
   ───────────────────────────────────────────────────────────────────
   ভুল: ছবির ব্যাজ বন্ধ করতে গিয়ে দেওয়া বিস্তৃত নিয়ম
        span[style*="background-color"]  →  ফুটারের পলিসি টাইলের
        আইকন-স্প্যানগুলোও মুছে ফেলছিল।
   সমাধান: ফুটারের ভিতরে ওই স্প্যানগুলো আবার দেখানো — :not(#zzz)
        দিয়ে specificity আইডি-স্তরে তোলা, তাই বিস্তৃত নিয়ম হারবে।
   ═══════════════════════════════════════════════════════════════════ */

footer span[style*="background-color"]:not(#zzz),
footer span[style*="background:"]:not(#zzz),
footer [class*="rounded-pill"]:not(#zzz),
footer .footer-widget span:not(#zzz),
footer a span:not(#zzz){
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    padding: initial !important;
    margin: initial !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important;
    clip: auto !important;
}
footer a:not(#zzz), footer li:not(#zzz){
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}
footer .footer-widget:not(#zzz){ visibility: visible !important; opacity: 1 !important; }
/* ফুটারের লেখা স্পষ্ট */
footer, footer p, footer span, footer a, footer li{
    visibility: visible !important;
    opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ছবির উপরের ব্যাজ বন্ধ — শুধু প্রোডাক্ট কার্ডের ভিতরে (সংকীর্ণ)
   ───────────────────────────────────────────────────────────────────
   আগের বিস্তৃত নিয়ম সাইটের নানা জায়গার (ফুটার, হেল্পলাইন, নেভ)
   তথ্যও মুছে ফেলছিল — সেটা কেটে কার্ডের ভিতরে আটকে দেওয়া হলো।
   ═══════════════════════════════════════════════════════════════════ */

.aiz-card-box [class*="absolute-top-left"],
.rz-store-grid [class*="absolute-top-left"],
.rz-ws-card [class*="absolute-top-left"],
.aiz-card-box span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.rz-store-grid span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.rz-ws-card span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.aiz-card-box span[class*="rounded-pill"]:not(.rz-offer-chip):not(.rz-ws-tag),
.aiz-card-box span.fs-11.rounded-pill{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ছবির ব্যাজ বন্ধ — হোমপেজের নিচের সেকশনগুলোর কন্টেইনারসহ
   ───────────────────────────────────────────────────────────────────
   আগের সংকীর্ণ নিয়মে ছিল কেবল .aiz-card-box / .rz-store-grid /
   .rz-ws-card। হোমপেজের Featured Products ও Best Selling সেকশনের
   কার্ডগুলো আলাদা কন্টেইনারে (custom-product-slider,
   feactured-best-selling-product-section …) — তাই ওদের ব্যাজ বাদ পড়ত।
   এখন ওই কন্টেইনারগুলোও যোগ করা হলো। ফুটার/নেভ ছোঁয়া হয় না।
   ═══════════════════════════════════════════════════════════════════ */

.feactured-best-selling-product-section [class*="absolute-top-left"],
.custom-product-slider [class*="absolute-top-left"],
.td-product-slider [class*="absolute-top-left"],
.featured-categories-slider [class*="absolute-top-left"],
.featured-products-wrapper [class*="absolute-top-left"],
.best-selling-products-wrapper [class*="absolute-top-left"],

.feactured-best-selling-product-section span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.custom-product-slider span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.td-product-slider span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.featured-products-wrapper span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),
.best-selling-products-wrapper span[style*="background-color"]:not(.rz-offer-chip):not(.rz-ws-tag),

.feactured-best-selling-product-section span[class*="rounded-pill"]:not(.rz-offer-chip):not(.rz-ws-tag),
.custom-product-slider span[class*="rounded-pill"]:not(.rz-offer-chip):not(.rz-ws-tag),
.featured-products-wrapper span[class*="rounded-pill"]:not(.rz-offer-chip):not(.rz-ws-tag),
.best-selling-products-wrapper span[class*="rounded-pill"]:not(.rz-offer-chip):not(.rz-ws-tag),

.feactured-best-selling-product-section span.fs-11,
.custom-product-slider span.fs-11,
.featured-products-wrapper span.fs-11,
.best-selling-products-wrapper span.fs-11{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* আমার ট্যাগ-চিপ সবসময় অটুট */
.feactured-best-selling-product-section .rz-offer-chip,
.feactured-best-selling-product-section .rz-ws-tag,
.custom-product-slider .rz-offer-chip,
.custom-product-slider .rz-ws-tag,
.featured-products-wrapper .rz-offer-chip,
.featured-products-wrapper .rz-ws-tag,
.best-selling-products-wrapper .rz-offer-chip,
.best-selling-products-wrapper .rz-ws-tag{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 9px !important;
}