/* Storefront build 4: a clean, light look. Loaded only while "clean_look" (or
   "ignore_reduced_motion") is on; every rule is scoped to its own switch's body class,
   and the look switches (card_v2, chips_fix, ...) only reach the body while clean_look
   is on too. With every switch off this file is not linked. */

/* ---------- clean_look: page width, section heads, fewer boxes, banners ---------- */
@media (min-width: 992px) {
    body.tw-clean-look {
        --container: 1600px;
    }

    body.tw-clean-look .container {
        width: min(var(--container), calc(100% - 40px));
    }
}

@media (min-width: 1600px) {
    body.tw-clean-look .container {
        width: min(var(--container), calc(100% - 64px));
    }
}

body.tw-clean-look :is(.section-head, .top-categories-head, .tw-row-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;
}

body.tw-clean-look :is(.section-head h2, .top-categories-title, .related-title, .tw-row-head h2) {
    margin: 0;
    color: #111318;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

body.tw-clean-look :is(.section-head h2, .top-categories-title-wrap)::before,
body.tw-clean-look :is(.section-head h2, .top-categories-title-wrap)::after {
    display: none;
}

body.tw-clean-look :is(.btn-view-all, .top-categories-viewall, .tw-row-head a) {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--primary, #e0004a);
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

body.tw-clean-look :is(.btn-view-all, .top-categories-viewall)::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
}

body.tw-clean-look :is(.btn-view-all, .top-categories-viewall, .tw-row-head a):hover {
    background: none;
    color: var(--primary, #e0004a);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    body.tw-clean-look :is(.section-head h2, .top-categories-title, .related-title, .tw-row-head h2) {
        font-size: 22px;
    }
}

/* Fewer boxes and shadows. */
body.tw-clean-look .top-categories-panel {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body.tw-clean-look :is(.category-menu-card, .category-menu-label, .tw-mq-brand, .tw-mq-review, .r7-rail-btn, .hs-cf-card, .r7-video) {
    box-shadow: none;
}

body.tw-clean-look.tw-home-layout .hl-block {
    margin-top: 26px;
}

@media (min-width: 768px) {
    body.tw-clean-look.tw-home-layout .hl-block {
        margin-top: 38px;
    }
}

@media (max-width: 767px) {
    body.tw-clean-look.app-home .product-section {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Brand, review and trust strips as wide as the page, not the screen. */
body.tw-clean-look .hl-block > .tw-mq {
    width: min(var(--container, 1240px), calc(100% - 40px));
    margin-inline: auto;
}

@media (max-width: 767px) {
    body.tw-clean-look .hl-block > .tw-mq {
        width: calc(100% - 24px);
    }
}

/* Banners and sliders: round corners, no frame, dots on a soft pill that shows on any picture. */
body.tw-clean-look :is(.hero-slider, .hero-img) {
    border-radius: 14px;
    background: transparent;
}

body.tw-clean-look :is(.promo-banner, .promo-banner-img) {
    border-radius: 12px;
    box-shadow: none;
}

body.tw-clean-look .hero-dots {
    left: 50%;
    right: auto;
    bottom: 10px;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    transform: translateX(-50%);
}

body.tw-clean-look .hero-dot {
    width: 6px;
    height: 6px;
    background: #d4d4da;
}

body.tw-clean-look .hero-dot.active {
    width: 18px;
    border-radius: 3px;
    background: var(--primary, #e0004a);
}

@media (max-width: 767px) {
    body.tw-clean-look :is(.hero-slider, .hero-img) {
        border-radius: 12px;
    }

    body.tw-clean-look .hero-nav {
        display: none;
    }
}

/* ---------- card_v2: bigger, cleaner product cards ---------- */
body.tw-card-v2 .product-card {
    position: relative;
    border: 1px solid #eeeef1;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

body.tw-card-v2 .product-card:hover {
    border-color: #f3c2d4;
    box-shadow: none;
    transform: none;
}

body.tw-card-v2 .product-card .product-thumb {
    aspect-ratio: 1;
    background: #f5f5f7;
}

/* White product photos melt into the grey tile instead of sitting on it as a white box. */
body.tw-card-v2 .product-card .product-thumb img {
    width: 100%;
    height: 100%;
    padding: 7%;
    border-radius: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
}

body.tw-card-v2 .product-card :is(.deal-badge, .twl-off, .twl-save, .tw-cb, .twl-rating) {
    display: none !important;
}

body.tw-card-v2 .product-card .cc-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--primary, #e0004a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

body.tw-card-v2 .product-card .product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 12px 12px;
    text-align: left;
}

body.tw-card-v2 .product-card .cc-brand {
    display: block;
    margin: 0 0 3px;
    overflow: hidden;
    color: var(--primary, #e0004a);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.tw-card-v2 .product-card .product-title {
    display: -webkit-box;
    min-height: 2.8em;
    margin: 0 0 6px;
    overflow: hidden;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.tw-card-v2 .product-card .product-title a {
    color: inherit;
}

body.tw-card-v2 .product-card .product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 10px;
    color: var(--primary, #e0004a);
    font-size: 16px;
    font-weight: 700;
}

body.tw-card-v2 .product-card .product-price strong {
    color: inherit;
    font-weight: 700;
}

body.tw-card-v2 .product-card .product-price del {
    order: -1;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 400;
}

body.tw-card-v2 .product-card .product-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
    margin-top: auto;
}

body.tw-card-v2 .product-card .btn-order {
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

body.tw-card-v2 .product-card .btn-cart {
    width: 40px;
    height: 40px;
    border: 1px solid #f6c9d9;
    border-radius: 10px;
    background: #fff5f8;
    color: var(--primary, #e0004a);
}

/* Rows: exactly two whole cards on a phone, four or five bigger ones on a computer. */
@media (max-width: 767px) {
    body.tw-card-v2 :is(.hs-rail, .tw-row-track) {
        gap: 10px;
        grid-auto-columns: calc((100% - 10px) / 2);
        padding-inline: 0;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    body.tw-card-v2 .tw-row-track > * {
        scroll-snap-align: start;
    }

    body.tw-card-v2 .product-card .product-body {
        padding: 8px 10px 10px;
    }

    body.tw-card-v2 .product-card .product-title {
        font-size: 13px;
    }

    body.tw-card-v2 .product-card .product-actions {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 6px;
    }

    body.tw-card-v2 .product-card .btn-order {
        height: 36px;
        font-size: 12.5px;
    }

    body.tw-card-v2 .product-card .btn-cart {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 768px) {
    body.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail,
    body.tw-card-v2 .tw-row-track {
        --b4-cols: 4;
        gap: 16px;
        grid-auto-columns: calc((100% - (var(--b4-cols) - 1) * 16px) / var(--b4-cols));
    }

    /* Fewer products than columns: cards keep their size and the row sits in the middle. */
    body.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail:not(:has(> :nth-child(4))),
    body.tw-card-v2 .tw-row-track:not(:has(> :nth-child(4))) {
        grid-auto-columns: 290px;
        justify-content: center;
    }

    body.tw-card-v2 .twl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1100px) {
    body.tw-card-v2 .twl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    body.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail,
    body.tw-card-v2 .tw-row-track {
        --b4-cols: 5;
    }

    body.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail:not(:has(> :nth-child(5))),
    body.tw-card-v2 .tw-row-track:not(:has(> :nth-child(5))) {
        grid-auto-columns: 300px;
        justify-content: center;
    }
}

@media (min-width: 1500px) {
    body.tw-card-v2 .twl-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* One product in a row: a wide card, picture beside the text, so the row is not half empty. */
body.tw-card-v2 :is(.hs-rail, .tw-row-track):not(:has(> :nth-child(2))) {
    grid-auto-columns: min(100%, 720px);
    justify-content: center;
}

body.tw-card-v2 :is(.hs-rail, .tw-row-track) > .product-card:only-child {
    flex-direction: row;
}

body.tw-card-v2 :is(.hs-rail, .tw-row-track) > .product-card:only-child .product-thumb {
    flex: 0 0 42%;
}

body.tw-card-v2 :is(.hs-rail, .tw-row-track) > .product-card:only-child .product-body {
    justify-content: center;
    padding: 16px;
}

/* ---------- chips_fix: the offer chips under the header, centred, not stuck to it ---------- */
body.tw-chips-fix .oc-row {
    border-top: 0;
    background: transparent;
}

body.tw-chips-fix .oc-track {
    padding-top: 12px;
    padding-bottom: 4px;
}

/* Centred while they fit; scrollable from the first chip when they do not. */
body.tw-chips-fix .oc-chip:first-child {
    margin-left: auto;
}

body.tw-chips-fix .oc-chip:last-child {
    margin-right: auto;
}

/* Side panels that stay in view on a computer clear the real header (tw-b4.js measures it). */
@media (min-width: 992px) {
    body.tw-chips-fix :is(.ck-right, .ck-sticky, .os-right, .static-page-sidebar) {
        top: calc(var(--b4-head, 116px) + 12px);
    }
}

/* ---------- logo_fix: the black footer shows the white logo as it is, no white plate ---------- */
body.tw-logo-fix .footer-logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 768px) {
    body.tw-logo-fix .footer-logo {
        height: 52px;
    }
}

/* ---------- bn_digit_font: clear Bangla digits (০-৯, ৳); other letters keep their font ---------- */
@font-face {
    font-family: "SB Bangla Digits";
    src: url("../fonts/sb-bn-digits-500.woff2") format("woff2");
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+09E6-09EF, U+09F3;
}

@font-face {
    font-family: "SB Bangla Digits";
    src: url("../fonts/sb-bn-digits-700.woff2") format("woff2");
    font-weight: 700 900;
    font-display: swap;
    unicode-range: U+09E6-09EF, U+09F3;
}

body.tw-bn-digit-font,
body.tw-bn-digit-font :is(button, input, select, textarea) {
    font-family: "SB Bangla Digits", "Hind Siliguri", "Roboto", sans-serif;
}

body.tw-bn-digit-font.tw-number-font,
body.tw-bn-digit-font.tw-number-font :is(button, input, select, textarea, .product-price, .twl-price, .twl-price strong, .product-title) {
    font-family: "SB Bangla Digits", "Roboto", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- free_delivery_threshold: "আর ৳X কিনলে ডেলিভারি চার্জ ফ্রি" ---------- */
body.tw-free-delivery-threshold .fd-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #fde2ea;
    border-radius: 12px;
    background: #fff7fa;
    color: #1f2937;
    font-size: 13.5px;
    list-style: none;
}

body.tw-free-delivery-threshold .fd-box.is-free {
    border-color: #bbf0cf;
    background: #f0fdf4;
    color: #166534;
}

body.tw-free-delivery-threshold .fd-icon {
    flex: 0 0 34px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--primary, #e0004a);
}

body.tw-free-delivery-threshold .fd-box.is-free .fd-icon {
    color: #16a34a;
}

body.tw-free-delivery-threshold .fd-text {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

body.tw-free-delivery-threshold .fd-hint b {
    color: var(--primary, #e0004a);
}

body.tw-free-delivery-threshold .fd-box.is-free .fd-hint b {
    color: #166534;
}

body.tw-free-delivery-threshold .fd-bar {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #fbd5e1;
}

body.tw-free-delivery-threshold .fd-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary, #e0004a);
    transition: width .3s ease;
}

body.tw-free-delivery-threshold .fd-box.is-free .fd-bar {
    background: #bbf0cf;
}

body.tw-free-delivery-threshold .fd-box.is-free .fd-bar > span {
    background: #16a34a;
}

body.tw-free-delivery-threshold .twmc-items > .fd-box {
    margin: 0 0 10px;
}

/* ---------- cart_drawer_v2 (item 3): fixed head, clear close, clean rows, footer above the bottom nav ---------- */
body.tw-cart-drawer-v2 .twmc-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f3;
    background: #fff;
}

body.tw-cart-drawer-v2 .twmc-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

body.tw-cart-drawer-v2 .twmc-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #111318;
    font-size: 18px;
}

body.tw-cart-drawer-v2 .twmc-close:hover,
body.tw-cart-drawer-v2 .twmc-close:focus-visible {
    background: #fde2ea;
    color: var(--primary, #e0004a);
}

body.tw-cart-drawer-v2 .twmc-items {
    padding: 4px 16px 12px;
}

body.tw-cart-drawer-v2 .twmc-item {
    align-items: flex-start;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #f0f0f3;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.tw-cart-drawer-v2 .twmc-thumb {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 10px;
    background: #f5f5f7;
}

body.tw-cart-drawer-v2 .twmc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Build 5 (item 13): the delete button is its own column, so a long name never covers it. */
body.tw-cart-drawer-v2 .twmc-remove {
    position: static;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -6px -8px 0 0;
    font-size: 15px;
}

body.tw-cart-drawer-v2 .twmc-name {
    padding-right: 2px;
    overflow-wrap: anywhere;
}

body.tw-cart-drawer-v2 .twmc-line {
    color: var(--primary, #e0004a);
    font-weight: 700;
}

body.tw-cart-drawer-v2 .twmc-foot {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f0f0f3;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(17, 19, 24, .05);
}

body.tw-cart-drawer-v2 .twmc-checkout {
    min-height: 50px;
    border-radius: 12px;
    font-size: 16px;
}

body.tw-cart-drawer-v2 .twmc-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

body.tw-cart-drawer-v2 .twmc-links > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

body.tw-cart-drawer-v2 .twmc-links > *:hover,
body.tw-cart-drawer-v2 .twmc-links > *:focus-visible {
    border-color: var(--primary, #e0004a);
    color: var(--primary, #e0004a);
}

/* On a phone the bottom bar (and its raised middle button) stays usable over the panel. Build 5
   (item 13): the panel still reaches the bottom of the screen and its white footer runs under the
   bar, so no page shows through a gap between the checkout button and the bar. */
@media (max-width: 900px) {
    body.tw-cart-drawer-v2 .twmc-panel {
        bottom: 0;
    }

    body.tw-cart-drawer-v2:has(#twmc.is-open) :is(.sbn, .mobile-bottom-nav) {
        z-index: 100001;
    }

    body.tw-cart-drawer-v2 .twmc-foot {
        padding-bottom: calc(var(--tw-nav-h, 0px) + 14px);
    }

    /* The new bottom bar's middle button rises about 26px above it. */
    body.tw-cart-drawer-v2.tw-bottom-nav .twmc-foot {
        padding-bottom: calc(var(--tw-nav-h, 60px) + 30px);
    }
}

/* ---------- product_info (item 5): one compact, premium buy card ---------- */
body.tw-product-info .product-detail .product-detail-info {
    align-self: start;
    padding: 20px;
    border: 1px solid #eeeef1;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}

/* Brand and category are already in the brand pill and the breadcrumb; code and stock stay, on one line. */
body.tw-product-info .product-detail .product-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 6px 0 12px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
}

body.tw-product-info .product-detail .product-attrs li {
    display: inline-flex;
    gap: 4px;
    padding: 0;
    border: 0;
}

body.tw-product-info .product-detail .product-attrs li:has(.product-brand),
body.tw-product-info .product-detail .product-attrs li:has(a[href*="/category/"]) {
    display: none;
}

body.tw-product-info .product-detail .product-detail-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 4px 0 6px;
}

body.tw-product-info .product-detail .product-detail-price #newPrice {
    color: var(--primary, #e0004a);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

body.tw-product-info .product-detail .product-detail-price del {
    order: 2;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

body.tw-product-info .product-detail .tw-pd-save {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #fde2ea;
    color: #b0003a;
    font-size: 13px;
    font-weight: 700;
}

/* Build 5: a product without a discount kept an empty pink pill here ("hidden" lost to display). */
body.tw-product-info .product-detail .tw-pd-save[hidden] {
    display: none;
}

body.tw-product-info .product-detail .product-option-label {
    display: block;
    margin: 12px 0 8px;
    color: #111318;
    font-size: 14px;
    font-weight: 700;
}

body.tw-product-info .product-detail .weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.tw-product-info .product-detail .weight-btn {
    min-height: 40px;
    padding: 6px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
}

body.tw-product-info .product-detail .weight-btn.active {
    border-color: var(--primary, #e0004a);
    background: #fff5f8;
    color: var(--primary, #e0004a);
}

body.tw-product-info .product-detail .weight-btn:disabled {
    opacity: .45;
    text-decoration: line-through;
}

body.tw-product-info .product-detail .btn-clear-option {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #6b7280;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The quantity joins the add-to-cart row (tw-b4.js moves it); the order button runs below. */
body.tw-product-info .product-detail .product-qty-row.b4-moved {
    display: none;
}

body.tw-product-info .product-detail .product-detail-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
}

body.tw-product-info .product-detail .product-detail-actions .qty-selector {
    height: 50px;
    margin: 0;
}

body.tw-product-info .product-detail .product-detail-actions .btn-add-cart {
    min-height: 50px;
    margin: 0;
    border-radius: 12px;
}

body.tw-product-info .product-detail .product-detail-actions .btn-buy-now {
    grid-column: 1 / -1;
    min-height: 52px;
    margin: 0;
    border-radius: 12px;
}

body.tw-product-info .product-detail .tw-wa-order {
    min-height: 44px;
    margin-top: 10px;
    border: 1.5px solid #25d366;
    border-radius: 12px;
    background: #fff;
    color: #15803d;
    box-shadow: none;
}

/* Trust as one small row of icons. */
body.tw-product-info .product-detail .tw-buy-trust-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #f0f0f3;
    list-style: none;
}

body.tw-product-info .product-detail .tw-buy-trust-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #374151;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

body.tw-product-info .product-detail .tw-buy-trust-list li i {
    color: var(--primary, #e0004a);
    font-size: 18px;
}

@media (max-width: 767px) {
    body.tw-product-info .product-detail .product-detail-info {
        padding: 16px;
        border-radius: 14px;
    }

    body.tw-product-info .product-detail .product-detail-price #newPrice {
        font-size: 26px;
    }
}

/* ---------- round_category_tiles (item 8): a round picture and the name under it ---------- */
body.tw-round-category-tiles .category-menu-card.crt-card {
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: visible;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

body.tw-round-category-tiles .category-menu-card.crt-card:hover {
    transform: none;
    box-shadow: none;
}

body.tw-round-category-tiles .crt-pic {
    display: grid;
    width: min(96px, 100%);
    aspect-ratio: 1;
    overflow: hidden;
    place-items: center;
    border: 1px solid #f3e1e8;
    border-radius: 50%;
    background: #fdf2f6;
}

body.tw-round-category-tiles .crt-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.tw-round-category-tiles .crt-mono {
    color: var(--primary, #e0004a);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

body.tw-round-category-tiles .crt-name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
    body.tw-round-category-tiles .crt-pic {
        width: min(72px, 100%);
    }

    body.tw-round-category-tiles .crt-mono {
        font-size: 24px;
    }

    body.tw-round-category-tiles .crt-name {
        font-size: 12px;
    }
}

/* ---------- side_menu_v2 (item 7): logo on top, a clean search, pictures, links in two columns ---------- */
body.tw-side-menu-v2 .tw-dm-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f3;
    background: #fff;
}

body.tw-side-menu-v2 .tw-dm-logo {
    display: inline-flex;
    align-items: center;
}

body.tw-side-menu-v2 .tw-dm-logo img {
    display: block;
    width: auto;
    max-width: 170px;
    height: 32px;
    object-fit: contain;
}

body.tw-side-menu-v2 .tw-dm-search {
    border: 1.5px solid #ececf0;
    border-radius: 999px;
    background: #f7f7f9;
}

body.tw-side-menu-v2 .tw-dm-search:focus-within {
    border-color: var(--primary, #e0004a);
    background: #fff;
}

body.tw-side-menu-v2 .tw-dm-label {
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.tw-side-menu-v2 .tw-dm-list > .tw-dm-group + .tw-dm-group {
    border-top: 1px solid #f3f3f6;
}

body.tw-side-menu-v2 .tw-dm-ico.tw-dm-photo {
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
    background: #f5f5f7;
}

body.tw-side-menu-v2 .tw-dm-ico.tw-dm-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Useful links as a two-column grid of chips; the information pages as plain small links. */
body.tw-side-menu-v2 .tw-dm-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px;
}

body.tw-side-menu-v2 .tw-dm-quick .tw-dm-link {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #ececf0;
    border-radius: 12px;
    font-size: 13px;
}

body.tw-side-menu-v2 .tw-dm-quick .tw-dm-link.is-wa {
    border-color: #bbf0cf;
    background: #f0fdf4;
}

body.tw-side-menu-v2 .tw-dm-pages .tw-dm-ico {
    display: none;
}

body.tw-side-menu-v2 .tw-dm-pages .tw-dm-link {
    min-height: 36px;
    color: #4b5563;
    font-size: 13px;
}

/* ---------- logo_fix: the footer's social icons, one style, brand pink ---------- */
body.tw-logo-fix .b4-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.tw-logo-fix .b4-social a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 16px;
    transition: background-color .2s ease, border-color .2s ease;
}

body.tw-logo-fix .b4-social a:hover,
body.tw-logo-fix .b4-social a:focus-visible {
    border-color: #D8145E;
    background: #D8145E;
    color: #fff;
}

/* ---------- video_v2: the video row, a coverflow that slides on its own until a video is tapped ----------
   tw-b4-video.js places each card with transform, opacity and a light blur: the centre card is
   large, the ones beside it smaller, faded and partly visible. */
body.tw-video-v2 .b4-vr {
    /* On a phone the whole card (video and strip) fits between the sticky header and the bottom bar. */
    --vr-w: clamp(170px, min(64vw, calc((100vh - 340px) * 9 / 16)), 250px);
    --vr-w: clamp(170px, min(64vw, calc((100svh - 340px) * 9 / 16)), 250px);
    --vr-k: .7;                /* distance between card centres, as a share of the card width */
    --vr-strip: 66px;
    position: relative;
    height: calc(var(--vr-w) * 16 / 9 + var(--vr-strip) + 28px);
    margin: 0 auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

@media (min-width: 768px) {
    body.tw-video-v2 .b4-vr {
        --vr-w: 290px;
        --vr-k: .8;
    }
}

body.tw-video-v2 .b4-vr:focus-visible {
    outline: 2px solid #D8145E;
    outline-offset: 4px;
    border-radius: 20px;
}

body.tw-video-v2 .b4-vr-stage {
    position: absolute;
    inset: 0;
}

body.tw-video-v2 .b4-vr-card {
    position: absolute;
    top: 10px;
    left: 50%;
    width: var(--vr-w);
    margin-left: calc(var(--vr-w) / -2);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px rgba(30, 41, 57, .16);
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s ease, filter .55s ease;
    will-change: transform;
    cursor: pointer;
    /* Safari drops the round corners of a moving card's video without this. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Before the script places the cards, only the first shows (no jump, no shift). */
body.tw-video-v2 .b4-vr:not(.is-ready) .b4-vr-card:not(:first-child) {
    opacity: 0;
}

body.tw-video-v2 .b4-vr.is-dragging .b4-vr-card {
    transition: none;
}

body.tw-video-v2 .b4-vr-media {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #1E2939;
}

body.tw-video-v2 .b4-vr-poster,
body.tw-video-v2 .b4-vr-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* The card steers YouTube (tap = pause, sound button), so a swipe on it still moves the row.
   A player that did not start by itself (is-native) takes the next tap on the video itself. */
body.tw-video-v2 .b4-vr-card[data-provider="youtube"] iframe {
    pointer-events: none;
}

body.tw-video-v2 .b4-vr-card.is-native iframe {
    pointer-events: auto;
}

body.tw-video-v2 .b4-vr-logo {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: auto;
    max-width: 46%;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
    pointer-events: none;
}

body.tw-video-v2 .b4-vr-mute,
body.tw-video-v2 .b4-vr-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, .5);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.tw-video-v2 .b4-vr-close {
    top: auto;
    bottom: 8px;
}

body.tw-video-v2 .b4-vr-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    padding: 0 0 0 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #D8145E;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: opacity .2s ease;
}

body.tw-video-v2 .b4-vr-card.is-playing:not(.is-paused) .b4-vr-play:not(:focus-visible),
body.tw-video-v2 .b4-vr-card.is-native .b4-vr-play {
    opacity: 0;
    pointer-events: none;
}

/* The white strip: product picture, name, price with the old one struck, arrow to the product. */
body.tw-video-v2 .b4-vr-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--vr-strip);
    padding: 0 10px 0 12px;
    background: #fff;
    color: #1E2939;
    text-decoration: none;
}

body.tw-video-v2 .b4-vr-strip:hover,
body.tw-video-v2 .b4-vr-strip:focus {
    color: #1E2939;
    text-decoration: none;
}

body.tw-video-v2 .b4-vr-strip img {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    background: #F3F4F6;
}

body.tw-video-v2 .b4-vr-info {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
    line-height: 1.3;
}

body.tw-video-v2 .b4-vr-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.tw-video-v2 .b4-vr-price {
    color: #D8145E;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

body.tw-video-v2 .b4-vr-price del {
    margin-left: 4px;
    color: #99A1AF;
    font-size: 12px;
    font-weight: 400;
}

body.tw-video-v2 .b4-vr-go {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1E2939;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrows beside the centre card on computers; phones swipe. */
body.tw-video-v2 .b4-vr-arrow {
    display: none;
}

@media (min-width: 768px) {
    body.tw-video-v2 .b4-vr-arrow {
        position: absolute;
        top: calc(var(--vr-w) * 8 / 9 - 12px);
        z-index: 200;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #1E2939;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(30, 41, 57, .2);
        cursor: pointer;
    }

    body.tw-video-v2 .b4-vr-prev {
        left: calc(50% - var(--vr-w) / 2 - 22px);
    }

    body.tw-video-v2 .b4-vr-next {
        left: calc(50% + var(--vr-w) / 2 - 22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tw-video-v2:not(.tw-ignore-reduced-motion) .b4-vr-card {
        transition: none;
    }
}

/* Moving strips on a phone (build 4, the iPhone/Android motion check): a tapped brand card keeps
   focus (Android, and after coming back to the page), and that held its strip still for good.
   Only a keyboard's focus holds it now; a finger holds it while it touches (is-touch). */
@media (hover: none) {
    body.tw-clean-look.tw-carousel-motion.tw-marquee .tw-mq:focus-within:not(:has(:focus-visible)):not(.is-touch):not(.is-away):not(.is-off) .tw-mq-track {
        animation-play-state: running;
    }
}

/* ---------- chat_sheet (item 9b): on a phone the chat rises from the bottom over a dimmed page ----------
   The page behind cannot be touched or scrolled while it is open; a tap on the dim part, the
   ✕ or Esc closes it (tw-b4.js adds the backdrop). The chat's own markup and script are unchanged. */
@media (max-width: 767.98px) {
    html body.tw-chat-sheet #gcc-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100001;
        width: 100%;
        max-width: none;
        height: min(88vh, 680px);
        height: min(88dvh, 680px);
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
        opacity: 1;
        visibility: hidden;
        transform: translateY(100%);
        translate: none;
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
    }

    html body.tw-chat-sheet #gcc-panel.open {
        visibility: visible;
        transform: none;
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }

    /* A grab bar, so it reads as a sheet. */
    body.tw-chat-sheet #gcc-header {
        position: relative;
        padding-top: 20px;
    }

    body.tw-chat-sheet #gcc-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: #D1D5DB;
    }

    body.tw-chat-sheet #gcc-close {
        min-width: 40px;
        min-height: 40px;
    }

    body.tw-chat-sheet .b4-chat-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    html.b4-chat-open body.tw-chat-sheet .b4-chat-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease;
    }

    html.b4-chat-open,
    html.b4-chat-open body.tw-chat-sheet {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tw-chat-sheet:not(.tw-ignore-reduced-motion) #gcc-panel,
    body.tw-chat-sheet:not(.tw-ignore-reduced-motion) .b4-chat-backdrop {
        transition: none;
    }
}

/* ---------- hotline_show: the store hotline, one number, a tap calls it ---------- */
.b4-hotline-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 10px 0 0;
    color: #4A5565;
    font-size: 14px;
}

.b4-hotline-line i {
    color: #D8145E;
}

.b4-hotline-line a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    color: #1E2939;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.b4-help-call a {
    color: inherit;
    font-weight: 700;
}

/* Header: a round call button on phones; the number beside it on computers. */
body.tw-clean-look .b4-hotline-btn {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #F3D3DF;
    border-radius: 999px;
    background: #fff;
    color: #D8145E;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

body.tw-clean-look .b4-hotline-btn:hover {
    border-color: #D8145E;
    color: #D8145E;
}

body.tw-clean-look .b4-hotline-num {
    display: none;
    color: #1E2939;
    font-size: 14px;
    font-weight: 700;
}

@media (min-width: 992px) {
    body.tw-clean-look .b4-hotline-btn {
        padding: 0 14px;
    }

    body.tw-clean-look .b4-hotline-num {
        display: inline;
    }
}

/* Side menu: the hotline at the bottom. */
body.tw-clean-look .b4-dm-hotline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 16px 20px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #FDF2F7;
    color: #1E2939;
    text-decoration: none;
}

body.tw-clean-look .b4-dm-hotline-ico {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #D8145E;
    color: #fff;
}

body.tw-clean-look .b4-dm-hotline-label {
    display: block;
    color: #6A7282;
    font-size: 12.5px;
}

body.tw-clean-look .b4-dm-hotline strong {
    font-size: 16px;
}

/* Footer: under the about text. */
body.tw-clean-look .b4-foot-hotline {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    color: #fff;
    text-decoration: none;
}

body.tw-clean-look .b4-foot-hotline i {
    color: #F472B6;
}

body.tw-clean-look .b4-foot-hotline strong {
    font-size: 16px;
}

/* ---------- seo_fixes: the home H1, contrast, tap sizes, toasts above the header (SEO report) ---------- */
.b4-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* #4/#15: one quiet Bangla heading above the slider, so the first phone screen has words. */
body.tw-seo-fixes .b4-home-intro {
    padding-top: 12px;
    padding-bottom: 2px;
}

body.tw-seo-fixes .b4-home-h1 {
    margin: 0;
    color: #1E2939;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

@media (min-width: 768px) {
    body.tw-seo-fixes .b4-home-h1 {
        font-size: 19px;
    }
}

/* #63: text at 4.5:1 or better. */
body.tw-seo-fixes del,
body.tw-seo-fixes .tw-sticky-price small {
    color: #6A7282;
}

body.tw-seo-fixes .fg-price s {
    color: #5A6272;
}

body.tw-seo-fixes .tw-pd-brand {
    color: #B0003A;
}

body.tw-seo-fixes .attr-value.in-stock,
body.tw-seo-fixes .in-stock {
    color: #13753D;
}

body.tw-seo-fixes .tw-wa-order {
    background: #0C7A45;
}

body.tw-seo-fixes .ck-label span[style*="#aaa"] {
    color: #6A7282 !important;
}

body.tw-seo-fixes .fg-tag,
body.tw-seo-fixes .fg-price b {
    color: #B8003C;
}

body.tw-seo-fixes .ck-mobile-bar-total,
body.tw-seo-fixes .ck-mobile-bar-total small {
    color: #4A5565;
}

/* #62: every tap target at least 24 x 24 px. */
/* The slider dots: the same small dot, inside a 24 px button. */
body.tw-seo-fixes .hero-dots {
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.tw-seo-fixes .hero-dots .hero-dot {
    box-sizing: content-box;
    padding: 9px;
    border-radius: 12px;
    background-clip: content-box;
}

body.tw-seo-fixes :is(.breadcrumb, .twl-crumbs, .tw-crumbs) a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
}

body.tw-seo-fixes .product-card :is(.card-icon-btn, .wishlist-btn, .quick-view-btn, .btn-wishlist) {
    min-width: 24px;
    min-height: 24px;
}

/* #55: messages show above the sticky header and the notice bar, not behind them. */
body.tw-seo-fixes #toast-container {
    z-index: 1000002;
}

body.tw-seo-fixes #toast-container > div {
    opacity: 1;
}

/* A brand page's intro and FAQ (SEO report #7 / #24), under its products. Loaded with any build 4
   switch; the section only exists when the admin wrote the text, so it is styled plainly here too. */
.b4-brand-about {
    padding: 28px 0 36px;
    color: #364153;
    font-size: 15px;
    line-height: 1.75;
}

.b4-brand-about-title {
    margin: 0 0 10px;
    color: #1E2939;
    font-size: 20px;
    font-weight: 700;
}

.b4-brand-faq-title {
    margin: 20px 0 10px;
    color: #1E2939;
    font-size: 17px;
    font-weight: 700;
}

.b4-brand-faq details {
    border-bottom: 1px solid #ECEEF2;
}

.b4-brand-faq summary {
    padding: 12px 0;
    color: #1E2939;
    font-weight: 600;
    cursor: pointer;
}

.b4-brand-faq details p {
    margin: 0 0 12px;
}

/* The video row's side cards are faded pictures; their small print is not meant to be read
   there, so it shows only on the centre card (the faded text failed contrast). Screen readers
   still read each link's product name. */
body.tw-video-v2 .b4-vr-card:not(.is-active) :is(.b4-vr-info, .b4-vr-go) {
    opacity: 0;
}

/* ---------- Build 5 (item 15): the checkout summary's boxes sit inside the card ----------
   The free delivery bar and the free gift box ran edge to edge and touched the card's border on a
   phone; they now keep the same 16px inset as the product rows, with even spacing. */
.ck-card > :is(.fd-box, .fg-box) {
    margin: 12px 16px 0;
}

.ck-card > :is(.fd-box, .fg-box) + :is(.fd-box, .fg-box) {
    margin-top: 10px;
}

.ck-card > .ck-products + :is(.fd-box, .fg-box) {
    margin-top: 12px;
}

.ck-card .ck-pro-item {
    align-items: flex-start;
}

.ck-card .ck-pro-remove {
    flex: 0 0 32px;
    min-width: 32px;
    min-height: 32px;
}

/* ---------- Build 5 (item 14): the product page's "ডেলিভারি শর্ত" row (product_info) ---------- */
body.tw-product-info .b5-pd-delivery {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin: 14px 0 4px;
    padding: 10px 14px;
    border: 1px solid #f1e3e9;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
    color: #1e2939;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(17, 19, 24, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.tw-product-info .b5-pd-delivery:hover,
body.tw-product-info .b5-pd-delivery:focus-visible {
    border-color: #d8145e;
    color: #1e2939;
    box-shadow: 0 4px 14px rgba(216, 20, 94, .12);
}

body.tw-product-info .b5-pd-delivery-ico {
    display: grid;
    flex: 0 0 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #fdecf2;
    color: #d8145e;
}

body.tw-product-info .b5-pd-delivery-text {
    display: grid;
    flex: 1;
    gap: 2px;
    line-height: 1.3;
}

body.tw-product-info .b5-pd-delivery-text strong {
    font-size: 15px;
    font-weight: 700;
}

body.tw-product-info .b5-pd-delivery-text small {
    color: #4a5565;
    font-size: 12.5px;
}

body.tw-product-info .b5-pd-delivery-go {
    color: #99a1af;
}

/* ======================================================================================
   Build 5, the layout group (brief part A). Each needs "clean_look" and its own switch.
   ====================================================================================== */

/* The home H1 (seo_fixes): kept for search engines and screen readers, not seen (Saad). */
.b5-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- rows_left (item 1): every product row starts at the left edge of its title ---------- */
body.tw-rows-left :is(.hs-rail, .tw-row-track, .hb-track) {
    justify-content: start !important;
    margin-inline: 0;
    padding-inline: 0;
}

@media (min-width: 768px) {
    /* Fewer products than columns: the cards keep the row's column width and sit at the left. */
    body.tw-rows-left.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail:not(:has(> :nth-child(4))),
    body.tw-rows-left.tw-card-v2 .tw-row-track:not(:has(> :nth-child(4))) {
        grid-auto-columns: calc((100% - (var(--b4-cols) - 1) * 16px) / var(--b4-cols));
    }
}

@media (min-width: 1200px) {
    body.tw-rows-left.tw-card-v2 :is(.hl-rail, .hs-trending) .hs-rail:not(:has(> :nth-child(5))),
    body.tw-rows-left.tw-card-v2 .tw-row-track:not(:has(> :nth-child(5))) {
        grid-auto-columns: calc((100% - (var(--b4-cols) - 1) * 16px) / var(--b4-cols));
    }
}

/* A single product keeps its wide card, from the left. */
body.tw-rows-left.tw-card-v2 :is(.hs-rail, .tw-row-track):not(:has(> :nth-child(2))) {
    justify-content: start !important;
}

/* Title and "সব দেখুন" on one line, in the same container as the cards. */
body.tw-rows-left :is(.section-head, .hs-head, .tw-row-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 0;
}

/* Grids (shop, category, brand, search, offers) fill from the left. */
body.tw-rows-left :is(.twl-grid, .product-grid) {
    justify-content: start;
    justify-items: stretch;
}

/* No wide empty sides on a computer: the page container is the one build 4 set (1600px). */
@media (min-width: 1200px) {
    body.tw-rows-left .container {
        padding-inline: 24px;
    }
}

/* ---------- section_tint (item 6): every other home section on a soft tint, white page ---------- */
body.tw-section-tint main.app-main > section.b5-tint-target {
    margin-block: 0;
    padding-block: 28px;
}

body.tw-section-tint main.app-main > section.b5-tint {
    background: #FAF6F8;
    box-shadow: inset 0 1px 0 #F3E9EE, inset 0 -1px 0 #F3E9EE;
}

@media (max-width: 767px) {
    body.tw-section-tint main.app-main > section.b5-tint-target {
        padding-block: 20px;
    }
}

/* ---------- category_squares (item 4): rounded squares, three to a phone, name on two lines ---------- */
body.tw-category-squares.tw-round-category-tiles .crt-pic {
    width: min(84px, 100%);
    border-radius: 18px;
    background: #F8F5F7;
}

body.tw-category-squares.tw-round-category-tiles .crt-pic img {
    object-fit: cover;
}

body.tw-category-squares .category-menu-card:not(.crt-card) .category-menu-banner {
    border-radius: 16px;
}

body.tw-category-squares.tw-round-category-tiles .crt-name {
    min-height: calc(2 * 1.3em);
    font-size: 12.5px;
}

@media (max-width: 520px) {
    body.tw-category-squares.tw-round-category-tiles .crt-pic {
        width: min(88px, 100%);
        border-radius: 16px;
    }

    body.tw-category-squares.tw-round-category-tiles .crt-mono {
        font-size: 26px;
    }

    body.tw-category-squares.tw-round-category-tiles .crt-name {
        font-size: 12px;
    }
}

/* ---------- chips_v5 (item 5): bigger chips; above five, an endless moving row ---------- */
body.tw-chips-v5 .oc-chip {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 18px;
    font-size: 14.5px;
}

body.tw-chips-v5 .b5-oc-moving {
    overflow-x: auto;
    scrollbar-width: none;
}

/* Sprint R-A S5 ("chips_center"): the soft edges and the motion only while the row is wider than
   the screen (tw-b4.js sets .is-moving); a row that fits shows each chip once, still and centred.
   :where() keeps each rule's weight as before, so the reduced-motion rule below still wins. */
body.tw-chips-v5:where(:not(.tw-chips-center)) .b5-oc-moving,
body.tw-chips-v5:where(.tw-chips-center) .b5-oc-moving.is-moving {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}

body.tw-chips-v5 .b5-oc-moving::-webkit-scrollbar {
    display: none;
}

body.tw-chips-v5 .b5-oc-belt {
    display: flex;
    width: max-content;
}

body.tw-chips-v5:where(:not(.tw-chips-center)) .b5-oc-belt,
body.tw-chips-v5:where(.tw-chips-center) :where(.b5-oc-moving.is-moving) .b5-oc-belt {
    animation: b5-oc-slide var(--b5-oc-dur, 40s) linear infinite;
    will-change: transform;
}

body.tw-chips-v5.tw-chips-center .b5-oc-moving:not(.is-moving) .b5-oc-belt {
    margin: 0 auto;
}

body.tw-chips-v5.tw-chips-center .b5-oc-moving:not(.is-moving) .b5-oc-list {
    padding-right: 0;
}

body.tw-chips-v5 .b5-oc-list {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding-right: 8px;
}

@keyframes b5-oc-slide {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Held while touched, focused from the keyboard or off screen; hovered with a real mouse. */
body.tw-chips-v5 .b5-oc-moving.is-touch .b5-oc-belt,
body.tw-chips-v5 .b5-oc-moving.is-off .b5-oc-belt,
body.tw-chips-v5 .b5-oc-moving:focus-within .b5-oc-belt {
    animation-play-state: paused;
}

@media (hover: hover) {
    body.tw-chips-v5 .b5-oc-moving:hover .b5-oc-belt {
        animation-play-state: paused;
    }
}

/* Reduce motion keeps it still (unless the store's own switch overrides it); it scrolls by hand. */
@media (prefers-reduced-motion: reduce) {
    body.tw-chips-v5 .b5-oc-belt {
        animation: none;
    }

    body.tw-chips-v5 .b5-oc-list[aria-hidden="true"] {
        display: none;
    }
}

/* ======================================================================================
   Build 5, the size picker ("size_picker", D3/D6): a sheet from the bottom on a phone, a
   centred box on a computer, in the shop's pink. Markup: partials/tweaks/size-picker.blade.php.
   ====================================================================================== */
.b5-picker {
    position: fixed;
    inset: 0;
    z-index: 1000010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.b5-picker[hidden] {
    display: none;
}

.b5-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 16, 22, .5);
    opacity: 0;
    transition: opacity .2s ease;
}

.b5-picker-panel {
    position: relative;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    outline: none;
}

.b5-picker-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    margin-left: -21px;
    border-radius: 4px;
    background: #E9DDE3;
}

.b5-picker.is-open .b5-picker-backdrop {
    opacity: 1;
}

.b5-picker.is-open .b5-picker-panel {
    transform: none;
}

html.b5-picker-lock,
html.b5-picker-lock body {
    overflow: hidden;
}

.b5-picker-x {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #F7F1F4;
    color: #5A4450;
    font-size: 17px;
    cursor: pointer;
}

.b5-picker-head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-right: 44px;
}

.b5-picker-img {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    background: #F8F5F7;
    object-fit: cover;
}

.b5-picker-title {
    margin: 0 0 2px;
    color: var(--primary, #E4007C);
    font-size: 15px;
    font-weight: 700;
}

.b5-picker-name {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    color: #1A1A2E;
    font-size: 14px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.b5-picker-price {
    margin: 0;
    font-size: 17px;
}

.b5-picker-price strong {
    color: #1A1A2E;
}

.b5-picker-price del {
    margin-left: 4px;
    color: #9A8A93;
    font-size: 14px;
}

.b5-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 6px;
}

.b5-chip {
    display: inline-flex;
    min-width: 96px;
    min-height: 52px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 14px;
    border: 1.5px solid #EADDE4;
    border-radius: 14px;
    background: #fff;
    color: #1A1A2E;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.b5-chip-name {
    font-size: 14px;
    font-weight: 700;
}

.b5-chip-price {
    color: #5A4450;
    font-size: 12.5px;
}

.b5-chip-price del {
    color: #A8979F;
}

.b5-chip[aria-checked="true"] {
    border-color: var(--primary, #E4007C);
    background: #FFF0F7;
    box-shadow: 0 0 0 3px rgba(228, 0, 124, .12);
}

.b5-chip:focus-visible {
    outline: 3px solid rgba(228, 0, 124, .45);
    outline-offset: 2px;
}

.b5-chip[disabled] {
    border-style: dashed;
    background: #FAF8F9;
    color: #A8979F;
    cursor: not-allowed;
}

.b5-chip-stock {
    font-size: 11.5px;
    font-weight: 600;
}

.b5-chip-stock.is-in {
    color: #15803D;
}

.b5-chip-stock.is-out {
    color: #B4506E;
}

.b5-picker-chips.is-shake {
    animation: b5-picker-shake .36s ease;
}

@keyframes b5-picker-shake {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.b5-picker-note {
    margin: 4px 0 0;
    color: #B4135C;
    font-size: 13px;
    font-weight: 600;
}

.b5-picker-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
    color: #5A4450;
    font-size: 14px;
    font-weight: 600;
}

.b5-picker-stepper {
    display: inline-flex;
    overflow: hidden;
    border: 1.5px solid #EADDE4;
    border-radius: 12px;
}

.b5-picker-stepper button {
    width: 44px;
    height: 44px;
    border: 0;
    background: #F7F1F4;
    color: #1A1A2E;
    font-size: 20px;
    cursor: pointer;
}

.b5-picker-stepper input {
    width: 52px;
    border: 0;
    color: #1A1A2E;
    font: inherit;
    font-size: 16px;
    text-align: center;
    -moz-appearance: textfield;
}

.b5-picker-stepper input::-webkit-inner-spin-button,
.b5-picker-stepper input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.b5-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.b5-picker-actions button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 14px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.b5-picker-cart {
    border: 1.5px solid var(--primary, #E4007C);
    background: #fff;
    color: var(--primary, #E4007C);
}

.b5-picker-order {
    border: 1.5px solid var(--primary, #E4007C);
    background: var(--primary, #E4007C);
    color: #fff;
}

@media (min-width: 768px) {
    .b5-picker {
        align-items: center;
    }

    .b5-picker-panel {
        width: min(460px, calc(100% - 32px));
        padding: 26px 24px 22px;
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
        opacity: 0;
        transform: translateY(12px) scale(.98);
        transition: transform .2s ease, opacity .2s ease;
    }

    .b5-picker-panel::before {
        display: none;
    }

    .b5-picker.is-open .b5-picker-panel {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.tw-ignore-reduced-motion) .b5-picker-panel,
    body:not(.tw-ignore-reduced-motion) .b5-picker-backdrop {
        transition: none;
    }

    body:not(.tw-ignore-reduced-motion) .b5-picker-chips.is-shake {
        animation: none;
    }
}

/* The recent-order popup waits while the picker is open. */
html.b5-picker-lock #twpp {
    visibility: hidden;
}

/* ---------- banner_places (item 2): ad banners under any home block, one under another ---------- */
body.tw-banner-places .b5-place-list {
    display: grid;
    gap: 12px;
}

body.tw-banner-places .b5-place .bn2-link {
    display: block;
}

body.tw-banner-places .b5-place .promo-banner {
    border-radius: 14px;
    overflow: hidden;
}

body.tw-banner-places .b5-place .promo-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- video_cards (item 3): hairline border, soft radius and shadow, a clean play button, a neat product chip ---------- */
body.tw-video-cards.tw-video-v2 .b4-vr-card {
    border: 1px solid rgba(216, 20, 94, .14);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(30, 41, 57, .06), 0 10px 26px rgba(30, 41, 57, .10);
}

body.tw-video-cards.tw-video-v2 .b4-vr-play {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

body.tw-video-cards.tw-video-v2 .b4-vr-play:hover {
    background: rgba(255, 255, 255, .34);
    transform: scale(1.05);
}

body.tw-video-cards.tw-video-v2 .b4-vr-strip {
    gap: 9px;
    margin: 0;
    padding: 0 10px;
    border-top: 1px solid #F3E6EC;
}

body.tw-video-cards.tw-video-v2 .b4-vr-strip img {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #F1E4EA;
    border-radius: 12px;
}

body.tw-video-cards.tw-video-v2 .b4-vr-name {
    font-size: 12.5px;
    color: #27303F;
}

body.tw-video-cards.tw-video-v2 .b4-vr-price {
    font-size: 14px;
}

body.tw-video-cards.tw-video-v2 .b4-vr-go {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    background: #FCE7F1;
    color: #D8145E;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    body.tw-video-cards.tw-video-v2:not(.tw-ignore-reduced-motion) .b4-vr-play {
        transition: none;
    }

    body.tw-video-cards.tw-video-v2:not(.tw-ignore-reduced-motion) .b4-vr-play:hover {
        transform: none;
    }
}