/* ==========================================================================
   PREMIUM DESIGN LAYER  —  v2
   --------------------------------------------------------------------------
   Loads LAST in master.blade.php, after style.css and responsive.css.

   v2 fixes three bugs from v1 and adds the top bar:

   1. The footer stayed white. style.css has `.footer-top { background:#fff }`
      — a class selector (0,1,0) — while v1 only set `footer { background:… }`
      — an element selector (0,0,1). The class won. Every footer rule below
      is now written as `footer .footer-top` (0,1,1) so it actually lands,
      without needing !important anywhere.

   2. The footer logo vanished. v1 painted it white with a CSS filter, which
      was invisible against the white background left by bug 1. The image
      logo is now dropped from the footer in favour of a text wordmark — the
      same thing the reference site does. Nothing to invert, nothing to break.

   3. Header menu text disappeared on hover: the nav bar is orange and v1
      turned the text orange on hover. Hover is now a background shade only,
      the text does not change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* ----------------------------------------------------------------------
       BRAND — Brand Marrow Communications (solar)
       Sampled from the supplied logo: slate #374550 and red #ec3225.

       The logo itself shows how to use them — "Brand" in slate carries the
       weight, "Marrow" in red does the pointing. The site follows that: slate
       builds the structure (nav, footer, headings), red is reserved for
       action (buttons, prices, offers). Red is held back from large fills
       because a full-width band of it fights the logo instead of supporting it.

       Green stays for delivery and stock messages. On a solar shop it reads
       as clean energy rather than as a random third colour.
       ---------------------------------------------------------------------- */
    --brand: #e63127;          /* logo red, a shade deeper for large areas */
    --brand-deep: #b8251d;
    --brand-tint: #fdf1f0;
    --brand-rgb: 230, 49, 39;   /* same red as --brand, for rgba() glows and rings */

    --slate: #374550;          /* logo slate — category nav */
    --slate-deep: #2c3742;     /* top bar */
    --slate-dark: #222b34;     /* footer */

    --canvas: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;

    /* Text is slate-tinted rather than neutral grey so nothing on the page
       looks borrowed from a different palette. */
    --ink: #1c242b;
    --ink-2: #47535e;
    --muted: #6d7883;
    --line: #e3e8ec;
    --line-2: #eef1f4;

    --trust: #0f6b57;
    --trust-tint: #e9f4f1;

    --sale: #d81f45;

    --dark: var(--slate-deep);
    --dark-2: #323d48;
    --dark-line: rgba(255, 255, 255, .09);
    --dark-text: #a3adb7;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    --shadow-1: 0 1px 2px rgba(28, 36, 43, .05);
    --shadow-2: 0 4px 16px rgba(28, 36, 43, .09);
    --shadow-3: 0 12px 32px rgba(28, 36, 43, .14);
}

/* --------------------------------------------------------------------------
   2. BASE
   The theme was loading six typefaces (Roboto, Poppins, Jost, Lato, Potro
   Sans Bangla, Alinur Banglaborno). One family now does all the work; Noto
   Sans Bengali stays only as a fallback for Bangla product text still held
   in the database.
   -------------------------------------------------------------------------- */
body,
body p, body span, body a, body li, body td, body th,
body label, body input, body select, body textarea, body button,
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: "Inter", "Noto Sans Bengali", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -0.011em;
    line-height: 1.25;
}

a { text-decoration: none; }
img { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--line-2); }
    ::-webkit-scrollbar-thumb { background: #c8ccd6; border-radius: 999px; border: 2px solid var(--line-2); }
    ::-webkit-scrollbar-thumb:hover { background: #aeb4c2; }
}

/* --------------------------------------------------------------------------
   3. TOP BAR
   Social left, one promotional line centre, contact right — the same three
   zones as the reference site. Charcoal rather than orange: the nav bar
   below is already orange, and two full-width orange strips stacked would
   swamp the logo sitting between them.
   -------------------------------------------------------------------------- */
.nsh-topbar {
    background: var(--dark);
    color: var(--dark-text);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nsh-topbar__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 40px;
}

.nsh-topbar__social { display: flex; align-items: center; gap: 4px; }

.nsh-topbar__social a {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--topbar-icon, #b6bcc8);
    font-size: 13px;
    transition: background .16s ease, color .16s ease;
}

.nsh-topbar__social a:hover { background: var(--brand); color: #fff; }

.nsh-topbar__promo {
    text-align: center;
    color: var(--topbar-text, #d5dae3);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nsh-topbar__promo b { color: var(--topbar-text, #fff); font-weight: 650; }

.nsh-topbar__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nsh-topbar__meta a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--topbar-text, #c3c9d4);
    font-size: 13px;
    font-weight: 500;
    transition: color .16s ease;
}

.nsh-topbar__meta a:hover { color: #fff; }
.nsh-topbar__meta a i { color: var(--topbar-icon, var(--brand)); font-size: 13px; }

/* --------------------------------------------------------------------------
   4. HEADER

   OVERLAP FIX
   style.css sets `header { position: fixed }` and then compensates with a
   hardcoded `#content { padding-top: 113px }` — 113px being the height of the
   old header. Adding the top bar pushed the header past that number, so every
   page slid underneath it: the slider on the home page, the order summary on
   checkout, everything.

   Raising the magic number to a new one would break again the next time the
   header changes. Sticky positioning removes it altogether — a sticky element
   takes part in normal document flow, so it reserves its own space and nothing
   can ever slide under it, while still pinning to the top on scroll.

   `top: -41px` is the top bar's height, so the top bar scrolls out of view and
   the logo row plus the category nav pin — the bar is a one-time message, not
   something worth keeping on screen the whole session.
   -------------------------------------------------------------------------- */
header#navbar_top {
    position: -webkit-sticky;
    position: sticky;
    top: -41px;
    z-index: 900;
}

/* The old offset is no longer needed and is what caused the gap-then-overlap. */
#content { padding-top: 0; }

/* style.css has `body { overflow-x: hidden }`, which turns the body into a
   scroll container and stops position:sticky from working. `clip` prevents the
   sideways scrollbar the same way without creating that container. Browsers
   too old for `clip` simply ignore this line and the header falls back to
   scrolling normally — it still never overlaps anything. */
body { overflow-x: clip; }

header#navbar_top .main-header { background: var(--surface); }

.logo-area { background: var(--surface); padding: 0; }

.logo-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    min-height: calc(var(--logo-h, 48px) + 28px);
}

.main-logo { display: flex; align-items: center; }

/* Height comes from Admin → General Setting. --logo-h is printed into the
   page head by master.blade.php and clamped there, so a bad value cannot
   break the header. 48px if the setting is missing. */
/* max-width:none is the part that matters — without it the global
   `img { max-width: 100% }` caps the width and the height setting stops
   having any visible effect. */
.main-logo img {
    height: var(--logo-h, 48px);
    width: auto;
    max-height: none;
    max-width: none;
    object-fit: contain;
}

/* Search — the primary tool on a shop this size. The reference gives it a
   tinted field and a solid button; same idea here. */
.main-search { position: relative; }

.main-search form {
    display: flex;
    align-items: stretch;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.main-search form:focus-within {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1);
}

.main-search form input {
    flex: 1;
    border: 0;
    padding: 12px 16px;
    font-size: 14.5px;
    background: transparent;
    color: var(--ink);
}

.main-search form input:focus { box-shadow: none; border: 0; background: transparent; }
.main-search form input::placeholder { color: #9aa1ae; }

.main-search form button {
    border: 0;
    background: var(--brand);
    color: #fff;
    padding: 0 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s ease;
}

.main-search form button:hover { background: var(--brand-deep); }
.main-search form button svg { width: 19px; height: 19px; }

.search_result {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    z-index: 999;
    max-height: 420px;
    overflow-y: auto;
}

.search_result:empty { display: none; }

/* The two social buttons that sat beside the search move up to the top bar.
   Hidden rather than deleted so nothing else that references them breaks. */
.main-search .social-icons { display: none; }

.header-list-items > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-list-items > ul > li > a,
.header-list-items > ul > li > p > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.header-list-items > ul > li > a:hover,
.header-list-items > ul > li > p > a:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

.header-list-items i { font-size: 16px; }

.header-list-items .margin-shopping {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.header-list-items .margin-shopping > span,
.mobile-header .mobilecart-qty {
    pointer-events: none;   /* the badge sits over the link — let taps through */
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    display: grid;
    place-items: center;
    line-height: 1;
    border: 2px solid var(--surface);
}

.cart-dialog { position: relative; }

.cshort-summary {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 330px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 14px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.cart-dialog:hover .cshort-summary {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cshort-summary ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cshort-summary ul li { font-size: 13px; color: var(--ink-2); }
.cshort-summary ul li img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

.cshort-summary > p {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin: 0 0 10px;
    font-size: 14.5px;
    color: var(--ink);
}

.cshort-summary .go_cart { width: 100%; display: flex; }

/* --------------------------------------------------------------------------
   5. CATEGORY NAV BAR
   Kept orange — it is the shop's colour, and the reference site also runs a
   solid colour bar in this position.

   HOVER FIX: v1 turned the label orange on hover, which made it vanish
   against the orange bar. Hover is now a darker plate behind unchanged
   white text. The text does not change colour and does not move.
   -------------------------------------------------------------------------- */
header#navbar_top .menu-area {
    background: var(--slate);
    border-top: 0;
    border-bottom: 0;
}

header#navbar_top .catagory_menu > ul {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

header#navbar_top .catagory_menu > ul::-webkit-scrollbar { display: none; }

header#navbar_top li.cat_bar > a {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    color: #fff;
    font-size: 14px;
    font-weight: 550;
    letter-spacing: -0.004em;
    white-space: nowrap;
    transition: background .16s ease;
}

header#navbar_top li.cat_bar > a:hover,
header#navbar_top li.cat_bar:hover > a {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

header#navbar_top .cat_down { top: auto !important; font-size: 11px; opacity: .75; }

.Cat_menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 7px;
    min-width: 240px;
}

.Cat_menu .Cat_list > a,
.child_menu .child_main > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13.5px;
    transition: background .14s ease, color .14s ease;
}

.Cat_menu .Cat_list > a:hover,
.child_menu .child_main > a:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

.child_menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 7px;
    min-width: 215px;
}

/* --------------------------------------------------------------------------
   6. ASSURANCE STRIP
   Moved out of the header and placed under the slider on the home page, so
   it reads as part of the page rather than part of the navigation.
   -------------------------------------------------------------------------- */
.nsh-assurance {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-top: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.nsh-assurance__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.nsh-assurance__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-left: 1px solid var(--line-2);
}

.nsh-assurance__item:first-child { border-left: 0; }

.nsh-assurance__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--trust-tint);
    color: var(--trust);
    font-size: 16px;
}

.nsh-assurance__text { display: block; }

.nsh-assurance__title {
    display: block;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.35;
}

.nsh-assurance__note {
    display: block;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   7. SLIDER
   -------------------------------------------------------------------------- */
.slider-section { padding-top: 16px; }

.home-slider-container {
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.main_slider .slider-item img { width: 100%; height: auto; display: block; }

.main_slider .owl-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.main_slider .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0;
    background: rgba(255, 255, 255, .55);
    border-radius: 999px;
    display: block;
    transition: width .25s ease, background .25s ease;
}

.main_slider .owl-dots .owl-dot.active span { width: 24px; background: #fff; }

/* --------------------------------------------------------------------------
   8. SECTION RHYTHM
   -------------------------------------------------------------------------- */
.homeproduct { padding: 28px 0 8px; }
.sec_title { margin-bottom: 18px; }

.sec_title .section-title-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    background: none;
    border: 0;
    padding: 0;
}

.sec_title .section-title-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 13px;
    background: none;
}

.sec_title .section-title-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--brand);
}

/* --------------------------------------------------------------------------
   9. TOP CATEGORIES
   Full names, wrapping to two lines, image filling the box edge to edge.
   -------------------------------------------------------------------------- */
.topcategory {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.topcategory .cat_item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}

.topcategory .cat_item:hover {
    border-color: #d9dde6;
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.topcategory .cat_img {
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    background: var(--surface-2);
}

.topcategory .cat_img a { display: block; width: 100%; height: 100%; }

.topcategory .cat_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.topcategory .cat_item:hover .cat_img img { transform: scale(1.06); }

.topcategory .cat_name {
    padding: 10px 10px 12px;
    text-align: center;
    border-top: 1px solid var(--line-2);
    background: var(--surface);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topcategory .cat_name a {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.008em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    align-items: center;
    overflow-wrap: anywhere;
    transition: color .18s ease;
}

.topcategory .cat_item:hover .cat_name a { color: var(--brand); }

/* --------------------------------------------------------------------------
   10. PRODUCT CARDS
   -------------------------------------------------------------------------- */
.product_sliders {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.product_sliders .product_item,
.single_product,
.product-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product_sliders .product_item:hover,
.single_product:hover,
.product-item:hover {
    border-color: #d9dde6;
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.product_img, .pro_img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-2);
}

.product_img img, .pro_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.product_item:hover .product_img img,
.single_product:hover .pro_img img { transform: scale(1.05); }

.product_name a, .pro_name a {
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.product_name a:hover, .pro_name a:hover { color: var(--brand); }

.product_price, .pro_price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.product_price .new_price,
.pro_price .new_price,
.product_price ins {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.product_price .old_price,
.pro_price .old_price,
.product_price del {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: line-through;
}

.discount_tag, .product_discount {
    background: var(--sale);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   10b. PRODUCT CARD ACTIONS  —  Add Cart + Buy Now
   Two equal columns so the pair reads as one control, not two stray buttons.

   "Add Cart" reuses the existing `.addcartbutton` hook, which already posts to
   add-to-cart/{id}/{qty} over AJAX, shows a toast and refreshes the counter —
   the shopper stays on the page. "Buy Now" submits the form to cart.store,
   which adds the item and goes straight to checkout.

   On products with sizes or colours both are plain links to the product page:
   there is no honest way to add a variant to the cart without asking which
   variant first.
   -------------------------------------------------------------------------- */
.nsh-cardbtns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 10px 12px;
    margin: 0;
}

.nsh-cardbtns .nsh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 8px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
    box-shadow: none;
}

/* Outline. Written after .addcartbutton in this file and scoped to the card
   wrapper so it beats the solid orange treatment that class carries. */
.nsh-cardbtns .nsh-btn--ghost,
.nsh-cardbtns a.nsh-btn--ghost,
.nsh-cardbtns button.nsh-btn--ghost {
    background: var(--surface);
    color: var(--brand);
    border: 1px solid var(--brand);
}

.nsh-cardbtns .nsh-btn--ghost:hover,
.nsh-cardbtns a.nsh-btn--ghost:hover,
.nsh-cardbtns button.nsh-btn--ghost:hover {
    background: var(--brand-tint);
    color: var(--brand-deep);
    border-color: var(--brand-deep);
}

.nsh-cardbtns .nsh-btn--solid,
.nsh-cardbtns a.nsh-btn--solid,
.nsh-cardbtns button.nsh-btn--solid {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
}

.nsh-cardbtns .nsh-btn--solid:hover,
.nsh-cardbtns a.nsh-btn--solid:hover,
.nsh-cardbtns button.nsh-btn--solid:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.nsh-cardbtns .nsh-btn:active { transform: translateY(1px); }

@media (max-width: 479px) {
    .nsh-cardbtns { gap: 6px; padding: 0 8px 10px; }
    .nsh-cardbtns .nsh-btn { font-size: 11.5px; padding: 8px 4px; }
}

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */
.submit-btn,
.btn-primary,
.addcartbutton,
.cart_store,
.go_cart,
.view_more_btn,
.buy_now_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 11px 20px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .1s ease;
    box-shadow: var(--shadow-1);
}

.submit-btn:hover,
.btn-primary:hover,
.addcartbutton:hover,
.cart_store:hover,
.go_cart:hover,
.view_more_btn:hover,
.buy_now_btn:hover {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
    box-shadow: var(--shadow-2);
}

.submit-btn:active,
.addcartbutton:active,
.cart_store:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 13px;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
    outline: none;
}

.form-group label, .form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
    display: block;
}

.form-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-1);
}

.auth-section { padding: 44px 0 60px; }

.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.auth-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.form-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.required-mark { color: var(--sale); }

/* ==========================================================================
   13. FOOTER
   Every selector here is at least (0,1,1) so it beats the legacy
   `.footer-top { background:#fff }` and `.footer-bottom { background:#fe5200 }`
   without resorting to !important.
   ========================================================================== */
footer {
    background: var(--slate-dark);
    color: var(--dark-text);
    margin-top: 44px;
}

footer .footer-top {
    background: var(--slate-dark);
    padding: 52px 0 40px;
}

/* Wordmark instead of the image logo. The shop's logo is dark-on-transparent,
   so on a dark footer it either disappears or needs a filter that destroys
   its colours. Text sidesteps the whole problem and matches the reference. */
footer .nsh-footer-brand {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-bottom: 16px;
    line-height: 1.2;
}

footer .nsh-footer-brand:hover { color: var(--brand); }

/* Equal heights: the row stretches, each column fills it. Without this the
   short middle columns leave the footer looking lopsided once the subscribe
   box is gone. */
footer .footer-top .row { align-items: stretch; }
footer .footer-top [class*="col-"] { display: flex; flex-direction: column; }
footer .footer-top .footer-about,
footer .footer-top .footer-menu { flex: 1; }

footer .footer-about { text-align: left; padding-right: 40px; }

footer .footer-about p {
    text-align: left;
    color: #b3b9c6;
    font-size: 14.5px;
    line-height: 1.8;
    margin: 0 0 22px;
    max-width: 40ch;
}

footer .footer-contact-col .nsh-footer-contact { margin-bottom: 0; }
footer .nsh-footer-contact { list-style: none; margin: 0 0 20px; padding: 0; }

footer .nsh-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 13.5px;
    color: var(--dark-text);
    line-height: 1.5;
}

footer .nsh-footer-contact li i {
    color: var(--brand);
    font-size: 14px;
    margin-top: 3px;
    flex: 0 0 15px;
}

footer .nsh-footer-contact li a { color: var(--dark-text); transition: color .16s ease; }
footer .nsh-footer-contact li a:hover { color: #fff; }

footer .footer-menu ul { list-style: none; margin: 0; padding: 0; }

/* Caps headings with letter-spacing, as on the reference site. */
footer .footer-menu ul li.title .nsh-col-title,
footer .footer-menu ul li.title a,
footer .nsh-footer-heading {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: block;
    cursor: default;
}

footer .footer-menu ul li a {
    color: var(--dark-text);
    font-size: 13.5px;
    line-height: 1.9;
    margin: 6px 0;
    display: block;
    transition: color .16s ease, padding-left .16s ease;
}

footer .footer-menu ul li a:hover { color: #fff; padding-left: 4px; }

/* The heading is not a link and must not react to the pointer at all.
   style.css carries several `.footer-menu ul li a:hover` rules, one of
   which paints #000 — black on a black footer. Making the heading a
   <span> in the markup puts it out of their reach for good; this rule
   just makes the intent explicit. */
footer .footer-menu ul li.title .nsh-col-title {
    pointer-events: none;
    color: #fff;
}

footer .social_link {
    display: flex;
    gap: 9px;
    margin: auto 0 0;   /* pinned to the bottom of the column */
    padding: 0;
    list-style: none;
}

footer .social_link .social_list a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--dark-line);
    background: rgba(255, 255, 255, .04);
    color: #cfd4dd;
    font-size: 14px;
    transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

footer .social_link .social_list a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* Newsletter */
footer .nsh-subscribe__lead {
    color: #fff;
    font-size: 17px;
    font-weight: 650;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

footer .nsh-subscribe__note {
    color: var(--dark-text);
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 16px;
}

footer .nsh-subscribe__box {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--dark-line);
    border-radius: var(--r-md);
    padding: 14px;
}

footer .nsh-subscribe__box input[type="email"] {
    width: 100%;
    background: var(--dark-2);
    border: 1px solid var(--dark-line);
    border-radius: var(--r-sm);
    color: #fff;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 10px;
}

footer .nsh-subscribe__box input[type="email"]::placeholder { color: #6f7684; }

footer .nsh-subscribe__box input[type="email"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16);
    background: var(--dark-2);
}

footer .nsh-subscribe__box button {
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--r-sm);
    padding: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease;
}

footer .nsh-subscribe__box button:hover { background: var(--brand-deep); }

/* Policy row */
footer .nsh-footer-policy {
    border-top: 1px solid var(--dark-line);
    padding: 18px 0;
}

/* দুই পাশে ভাগ: পলিসি লিংক বাঁয়ে, পেমেন্ট মেথড ডানে। দুটোই "এই সাইটটা
   নিয়ে জানার কথা" — একই সারিতে থাকাই স্বাভাবিক, আর নিচের সারিটা তাতে
   কপিরাইট ও ডেভেলপার ক্রেডিটের জন্য পরিষ্কার হয়ে যায়। */
footer .nsh-footer-policy__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 26px;
}

footer .nsh-footer-policy ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .nsh-footer-policy ul li a {
    color: var(--dark-text);
    font-size: 13.5px;
    transition: color .16s ease;
}

footer .nsh-footer-policy ul li a:hover { color: #fff; }

/* Bottom bar — was orange in the legacy stylesheet. */
footer .footer-bottom {
    background: #1a222a;
    border-top: 1px solid var(--dark-line);
    padding: 16px 0;
}

footer .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

footer .copyright p { margin: 0; color: #767d8c; font-size: 13px; }
footer .copyright a { color: #9aa1af; transition: color .16s ease; }
footer .copyright a:hover { color: var(--brand); }

footer .nsh-credit {
    margin: 0;
    font-size: 13px;
    color: #767d8c;
}

footer .nsh-credit a {
    color: #9aa1af;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}

footer .nsh-credit a:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.nsh-paylist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nsh-paylist span { font-size: 12px; color: #767d8c; margin-right: 2px; }

.nsh-paylist b {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--dark-line);
    color: #cfd4dd;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   14. MOBILE HEADER + BOTTOM NAV
   -------------------------------------------------------------------------- */
.mobile-header { background: var(--surface); border-bottom: 1px solid var(--line); }

.mobile-logo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
}

.mobile-logo .menu-logo { text-align: center; }
.mobile-logo .menu-logo img { max-height: 36px; width: auto; }

.mobile-logo .menu-bar .toggle,
.mobile-logo .menu-bag .margin-shopping {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 17px;
    position: relative;
    margin: 0;
    cursor: pointer;
}

.footer_nav {
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(22, 24, 29, .07);
    padding-bottom: env(safe-area-inset-bottom);
}

.footer_nav ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_nav ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 550;
    transition: color .16s ease;
}

.footer_nav ul li a i { font-size: 17px; }
.footer_nav ul li a:hover, .footer_nav ul li.active a { color: var(--brand); }

/* --------------------------------------------------------------------------
   15. MISC SURFACES
   -------------------------------------------------------------------------- */
.customer-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px;
    height: auto;
}

.customer-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 550;
    transition: background .14s ease, color .14s ease;
}

.customer-sidebar a:hover, .customer-sidebar a.active {
    background: var(--brand-tint);
    color: var(--brand);
}

.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: var(--line); }

.table thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 650;
    border-bottom: 1px solid var(--line);
}

.show_more_btn { margin: 22px 0 6px; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    .topcategory { grid-template-columns: repeat(6, 1fr); }
    .product_sliders { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1199px) {
    .topcategory { grid-template-columns: repeat(5, 1fr); }
    .product_sliders { grid-template-columns: repeat(4, 1fr); }
    .logo-header { gap: 18px; }
    .main-logo img { max-width: 260px; object-fit: contain; }
    .nsh-topbar__promo { font-size: 12px; }
}

@media (max-width: 991px) {
    .topcategory { grid-template-columns: repeat(4, 1fr); gap: 13px; }
    .product_sliders { grid-template-columns: repeat(3, 1fr); gap: 13px; }
    .nsh-assurance__grid { grid-template-columns: repeat(2, 1fr); }
    .nsh-assurance__item:nth-child(3) { border-left: 0; }
    .nsh-assurance__item:nth-child(n+3) { border-top: 1px solid var(--line-2); }
    footer .footer-about { padding-right: 0; }
}

@media (max-width: 767px) {
    body { font-size: 14px; }

    /* The mobile layout has its own sticky bar, so the desktop header steps
       out of the way here. */
    header#navbar_top { position: static; top: auto; }

    .homeproduct { padding: 20px 0 4px; }
    .sec_title { margin-bottom: 13px; }
    .sec_title .section-title-name { font-size: 17.5px; }

    .topcategory { grid-template-columns: repeat(3, 1fr); gap: 10px; }

    /* Overrides responsive.css, which pinned .cat_img to a 75px band and
       squashed every category picture. */
    .topcategory .cat_img { height: auto !important; aspect-ratio: 1 / 1; }
    .topcategory .cat_img img { height: 100% !important; object-fit: cover; }
    .topcategory .cat_name { padding: 8px 6px 10px; }
    .topcategory .cat_name a { font-size: 12px; min-height: 2.7em; line-height: 1.35; }

    .product_sliders { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .slider-section { padding-top: 0; }
    .home-slider-container { border-radius: 0; }

    .nsh-assurance { margin: 12px 0 0; border-radius: var(--r-sm); }
    .nsh-assurance__item { padding: 12px 13px; gap: 10px; }
    .nsh-assurance__icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }
    .nsh-assurance__title { font-size: 12.5px; }
    .nsh-assurance__note { font-size: 11px; }

    footer { margin-top: 26px; }
    footer .footer-top { padding: 34px 0 24px; }
    footer .footer-about { text-align: left; margin-bottom: 28px; }
    footer .footer-about p { max-width: none; }
    footer .nsh-footer-brand { font-size: 22px; }
    footer .footer-menu { margin-bottom: 26px; }
    footer .nsh-footer-policy__row { justify-content: center; text-align: center; gap: 12px; }
    footer .nsh-footer-policy ul { justify-content: center; gap: 8px 18px; }
    footer .nsh-footer-policy ul li a { font-size: 12.5px; }
    footer .copyright { justify-content: center; text-align: center; gap: 6px; }
    footer .nsh-credit { font-size: 12.5px; }
    .nsh-paylist { justify-content: center; }

    .form-content { padding: 22px 18px; border-radius: var(--r-md); }
    .auth-section { padding: 20px 0 34px; }
}

@media (max-width: 479px) {
    .topcategory { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .topcategory .cat_name a { font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   17. ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   18. MOBILE HEADER  —  sizing fixes
   The bar had a large logo, oversized round social buttons and a cart icon
   pressed against the edge. Everything is now measured off one variable so
   the three items always fit on a 360px screen.
   ========================================================================== */
@media (max-width: 991px) {

    .mobile-logo {
        grid-template-columns: 40px 1fr 40px;
        gap: 8px;
        padding: 8px 10px;       /* was 15px — the menu icon sits further left */
        align-items: center;
    }

    .mobile-logo .menu-bar { justify-self: start; }
    .mobile-logo .menu-bag { justify-self: end; }

    .mobile-logo .menu-bar .toggle,
    .mobile-logo .menu-bag .margin-shopping {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin: 0;
    }

    /* The cart is an <a> now, so give it the full box as its tap target.
       44px is the size a fingertip reliably hits; anything smaller and
       people miss and think the site is broken. */
    .mobile-logo .menu-bag a.margin-shopping {
        display: grid;
        place-items: center;
        position: relative;
        width: 44px;
        height: 44px;
        color: var(--ink);
        border-radius: var(--r-sm);
        -webkit-tap-highlight-color: rgba(var(--brand-rgb), .14);
        transition: background .14s ease;
    }

    .mobile-logo .menu-bag a.margin-shopping:active { background: var(--brand-tint); }
    .mobile-logo .menu-bag a.margin-shopping i { pointer-events: none; }

    /* Height from Admin → General Setting → Logo height (mobile). */
    .mobile-logo .menu-logo img {
        height: var(--logo-h-mobile, 30px);
        max-height: none;
        width: auto;
        object-fit: contain;
    }

    /* The badge used to sit outside the icon and get clipped by the screen
       edge. Tucked in and given room to breathe. */
    .mobile-header .mobilecart-qty {
        top: -2px;
        right: -2px;
        min-width: 17px;
        height: 17px;
        font-size: 10.5px;
        border-width: 2px;
    }

    /* Search row */
    .mobile-search {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 0 10px 10px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .mobile-search > .div:first-child { position: relative; min-width: 0; }

    .mobile-search form {
        display: flex;
        align-items: stretch;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        overflow: hidden;
    }

    .mobile-search form:focus-within {
        border-color: var(--brand);
        background: var(--surface);
    }

    .mobile-search form input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 9px 12px;
        font-size: 14px;
    }

    .mobile-search form input:focus { box-shadow: none; border: 0; }

    .mobile-search form button {
        border: 0;
        background: var(--brand);
        color: #fff;
        width: 42px;
        display: grid;
        place-items: center;
        padding: 0;
    }

    .mobile-search form button svg { width: 17px; height: 17px; }

    /* Were 48px orange circles — far too loud next to the search field. */
    .mobile-search .social-icons { display: flex; gap: 6px; }

    .mobile-search .social-icons a {
        width: 34px;
        height: 34px;
        min-width: 34px;
        display: grid;
        place-items: center;
        border-radius: var(--r-sm);
        background: var(--surface-2);
        border: 1px solid var(--line);
        color: var(--ink-2);
        font-size: 15px;
        transition: background .16s ease, color .16s ease, border-color .16s ease;
    }

    .mobile-search .social-icons a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
    .mobile-search .social-icons a:nth-child(2):hover { background: #25d366; border-color: #25d366; }

    .mobile-search .search_result { top: calc(100% + 4px); }
}

/* ==========================================================================
   19. ASSURANCE STRIP  —  refined
   Four short promises under the slider. Kept quiet on purpose: it sits
   directly above the category grid, which is the thing people are actually
   there to click, so it must read in one glance and then get out of the way.
   ========================================================================== */
.nsh-assurance {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-top: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.nsh-assurance__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    border-left: 1px solid var(--line-2);
    position: relative;
    transition: background .2s ease;
}

.nsh-assurance__item:hover { background: #fbfcfd; }

/* A soft ring instead of a flat disc — enough presence to anchor the text
   without turning four icons into four coloured blobs. */
.nsh-assurance__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--trust-tint);
    border: 1px solid rgba(14, 107, 82, .14);
    box-shadow: 0 0 0 4px rgba(14, 107, 82, .04);
    color: var(--trust);
    font-size: 16px;
    transition: transform .25s cubic-bezier(.2, .6, .2, 1), box-shadow .25s ease;
}

.nsh-assurance__item:hover .nsh-assurance__icon {
    transform: translateY(-1px);
    box-shadow: 0 0 0 6px rgba(14, 107, 82, .06);
}

.nsh-assurance__title {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 1px;
}

.nsh-assurance__note {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 767px) {
    .nsh-assurance__item { padding: 13px 14px; gap: 11px; }
    .nsh-assurance__icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; box-shadow: none; }
    .nsh-assurance__title { font-size: 12.5px; }
    .nsh-assurance__note { font-size: 11.5px; }
}

/* ==========================================================================
   20. PRODUCT DETAIL  —  right column
   Reading order: title, who made it and how it rates, what it costs, whether
   it is in stock, what to choose, how many, then the two actions. Price stays
   large — it was already the right size and is the number people scan for.
   ========================================================================== */
/* The gap above this page came from three stacked rules in style.css and
   main.css: .homeproduct padding 28px, .main-details-page margin 10px and
   .product-section padding+margin 40px — about 78px of empty white before
   anything appeared. Roughly halved. */
.homeproduct.main-details-page { margin-top: 0; padding: 12px 0 0; }
.main-details-page .product-section { padding: 16px 0; margin-top: 0; margin-bottom: 0; }

.details_right { padding-left: 8px; }

.details_right .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 12px;
}

.details_right .breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.details_right .breadcrumb ul li,
.details_right .breadcrumb ul li a {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.details_right .breadcrumb ul li a:hover { color: var(--brand); }

.details_right .product-cart .name {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin-bottom: 10px;
}

/* Brand and rating share one line — two small facts, one row. */
.nsh-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.nsh-brand { font-size: 13.5px; color: var(--muted); }
.nsh-brand b { color: var(--ink); font-weight: 650; }

.details_right .details-ratting-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.details_right .details-ratting-wrapper i { color: #f5a623; font-size: 13px; }
.details_right .details-ratting-wrapper span { font-size: 13px; color: var(--muted); }

.details_right .all-reviews-button {
    font-size: 13px;
    color: var(--brand);
    margin-left: 4px;
    border-bottom: 1px solid transparent;
}

.details_right .all-reviews-button:hover { border-bottom-color: var(--brand); }

.details_right .details-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

/* Deliberately large. This was already right on the old page. */
.nsh-price-now {
    font-size: 30px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.details_right .details-price del {
    font-size: 16px;
    color: var(--muted);
    font-weight: 400;
}

.nsh-save {
    background: var(--sale);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: 5px;
    align-self: center;
}

.nsh-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

.nsh-stock.is-in { color: var(--trust); }
.nsh-stock.is-out { color: var(--sale); }

.details_right .product-code p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}

.details_right .product-code span { color: var(--ink-2); font-weight: 600; }

/* Section labels above options and quantity */
.nsh-field-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 9px;
}

.details_right .pro-color,
.details_right .pro-size { margin-bottom: 18px; }

/* QUANTITY STEPPER
   The number was invisible, and it was not a colour problem.

   style.css positions the two buttons absolutely:
       .quantity .minus { position: absolute; left: 0;  width: 40px; z-index: 1 }
       .quantity .plus  { position: absolute; right: 0; width: 40px; z-index: 1 }

   Turning the wrapper into a flex row did not undo that — the buttons stayed
   out of flow and sat *on top of* the input. Once they were given a solid
   background they covered the digit completely: minus, blank gap, plus.

   Everything below is therefore stated explicitly, including position:static
   on the buttons, and the container's fixed 130px width and overflow:hidden
   are released so the three parts can size themselves. */
.details_right .qty-cart .quantity {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: auto;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-top: 0;
    background: var(--surface);
}

.details_right .qty-cart .quantity .minus,
.details_right .qty-cart .quantity .plus {
    position: static;          /* the actual fix */
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 44px;
    line-height: 1;
    border: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface-2);
    cursor: pointer;
    user-select: none;
    transition: background .14s ease, color .14s ease;
}

.details_right .qty-cart .quantity .minus { border-right: 1px solid var(--line); }
.details_right .qty-cart .quantity .plus  { border-left: 1px solid var(--line); }

.details_right .qty-cart .quantity .minus:hover,
.details_right .qty-cart .quantity .plus:hover {
    background: var(--brand-tint);
    color: var(--brand);
}

/* The digit itself. -webkit-text-fill-color is set alongside color because
   some mobile browsers keep their own fill colour on inputs. */
.details_right .qty-cart .quantity input {
    position: static;
    width: 58px;
    min-width: 58px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    opacity: 1;
    background: var(--surface);
    box-shadow: none;
}

.details_right .qty-cart .quantity input:focus {
    box-shadow: none;
    border: 0;
    background: var(--surface);
}

.details_right .qty-cart { margin-bottom: 18px; }

/* Two actions, equal weight, dark = add, brand = buy. */
/* Were stretching the full column width, which made two buttons look like
   two banners. Capped so they read as controls. */
.details_right .single_product {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 175px));
    gap: 10px;
    margin-bottom: 20px;
    max-width: 360px;
}

.details_right .add_cart_btn,
.details_right .order_now_btn {
    width: 100%;
    padding: 13px 14px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.details_right .add_cart_btn {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.details_right .add_cart_btn:hover { background: #000; border-color: #000; color: #fff; }

.details_right .order_now_btn {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.details_right .order_now_btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.details_right .call_now_btn {
    background: var(--trust);
    border-color: var(--trust);
    border-radius: var(--r-sm);
    padding: 12px;
    font-size: 14.5px;
    font-weight: 650;
}

.details_right .call_now_btn:hover { background: #0a5540; border-color: #0a5540; }

/* Share */
.nsh-share { margin: 18px 0; }
.nsh-share__row { display: flex; gap: 8px; }

.nsh-share__btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 15px;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.nsh-share__btn:hover { color: #fff; transform: translateY(-2px); }
.nsh-share__btn.is-fb:hover { background: #1877f2; border-color: #1877f2; }
.nsh-share__btn.is-wa:hover { background: #25d366; border-color: #25d366; }
.nsh-share__btn.is-tw:hover { background: #111; border-color: #111; }
.nsh-share__btn.is-ml:hover { background: var(--brand); border-color: var(--brand); }

/* Help box — cash-on-delivery shoppers here often prefer to confirm by
   phone before paying, so this is a real conversion path, not decoration. */
.nsh-help {
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    padding: 16px;
    margin-bottom: 18px;
}

.nsh-help__title {
    text-align: center;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 12px;
}

.nsh-help__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.nsh-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.nsh-help__btn.is-call { border: 1px solid #1877f2; color: #1877f2; }
.nsh-help__btn.is-call:hover { background: #1877f2; color: #fff; }
.nsh-help__btn.is-wa { border: 1px solid #25d366; color: #14934a; }
.nsh-help__btn.is-wa:hover { background: #25d366; color: #fff; }

.details_right .del_charge_area .alert {
    background: var(--brand-tint);
    border: 1px solid rgba(var(--brand-rgb), .18);
    border-radius: var(--r-md);
    color: var(--ink-2);
    font-size: 13px;
    padding: 13px 15px;
}

.details_right .del_charge_area .flext_area { display: flex; gap: 11px; align-items: flex-start; }
.details_right .del_charge_area i { color: var(--brand); font-size: 16px; margin-top: 2px; }

@media (max-width: 991px) {
    .details_right { padding-left: 0; margin-top: 22px; }
    .details_right .product-cart .name { font-size: 20px; }
    .nsh-price-now { font-size: 26px; }
}

@media (max-width: 479px) {
    .details_right .single_product { grid-template-columns: 1fr; }
    .nsh-help__row { grid-template-columns: 1fr; }
    .details_right .add_cart_btn,
    .details_right .order_now_btn { font-size: 14px; }
}

/* ==========================================================================
   21. PRODUCT PAGE  —  delivery, description, video, related
   ========================================================================== */

/* Delivery charge — was a stack of raw lines inside a blue alert box.
   Two cards on one row: area on the left, cost on the right. The cost comes
   from the `amount` column, so the layout no longer depends on someone
   typing the price into the label. */
.nsh-ship { margin-bottom: 18px; }

.nsh-ship__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 9px;
}

.nsh-ship__label i { color: var(--brand); font-size: 13px; }

.nsh-ship__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
}

.nsh-ship__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.nsh-ship__area {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
    line-height: 1.3;
}

.nsh-ship__cost {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Description + reviews
   The grey plate behind the copy made the page look like a form. Product
   copy is reading material — it wants white, a comfortable measure and
   real spacing between headings and paragraphs.
   -------------------------------------------------------------------------- */
section.pro_details_area {
    background: var(--canvas);
    padding: 30px 0 10px;
}

.description-nav-wrapper {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.description-nav .desc-nav-ul {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.description-nav .desc-nav-ul li a {
    display: inline-block;
    padding: 11px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}

.description-nav .desc-nav-ul li a:hover,
.description-nav .desc-nav-ul li.active a {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: transparent;
}

.pro_details_area .description,
.pro_details_area .details-action-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px 30px;
    box-shadow: var(--shadow-1);
}

.pro_details_area .description > h2,
.pro_details_area .details-action-box > h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    padding: 0 0 14px;
    margin: 0 0 20px;
    background: transparent;          /* the grey plate */
    border: 0;
    border-bottom: 1px solid var(--line);
}

/* Product copy is pasted from the admin editor, so these rules have to cope
   with whatever tags come through rather than a known structure. */
.pro_details_area .description p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 13px;
    max-width: 68ch;
}

.pro_details_area .description h1,
.pro_details_area .description h2,
.pro_details_area .description h3,
.pro_details_area .description h4 {
    font-size: 17px;
    font-weight: 650;
    color: var(--ink);
    margin: 26px 0 10px;
    letter-spacing: -0.012em;
}

.pro_details_area .description h1:first-child,
.pro_details_area .description h2:first-child { margin-top: 0; }

.pro_details_area .description strong,
.pro_details_area .description b { color: var(--ink); font-weight: 650; }

.pro_details_area .description ul,
.pro_details_area .description ol { margin: 0 0 15px; padding-left: 20px; }

.pro_details_area .description ul li,
.pro_details_area .description ol li {
    display: list-item;
    list-style: disc;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 6px;
    max-width: 68ch;
}

.pro_details_area .description ol li { list-style: decimal; }

.pro_details_area .description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    margin: 12px 0;
}

.pro_details_area .description table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 14px;
}

.pro_details_area .description table td,
.pro_details_area .description table th {
    border: 1px solid var(--line);
    padding: 9px 12px;
    color: var(--ink-2);
}

.pro_details_area .description table th { background: var(--surface-2); color: var(--ink); font-weight: 650; }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */
.nsh-video {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-1);
    position: sticky;
    top: 150px;
}

.nsh-video h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    border: 0;
}

/* aspect-ratio keeps the player 16:9 at any column width — the old fixed
   315px height letterboxed it on wide screens and cropped it on narrow ones. */
.nsh-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
}

.nsh-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Related products carousel
   -------------------------------------------------------------------------- */
.related-product-section { background: var(--canvas); padding: 8px 0 34px; }

.related-title h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 13px;
    margin-bottom: 18px;
}

.related-title h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 19px;
    border-radius: 999px;
    background: var(--brand);
}

.related_slider .product_item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    height: 100%;
}

.related_slider .pro_des { padding: 10px 10px 6px; }

.related_slider .pro_price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.related_slider .pro_price p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.related_slider .pro_price .new_price {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.related_slider .pro_price .old_price {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: line-through;
}

@media (max-width: 991px) {
    .nsh-video { position: static; margin-top: 22px; }
    .pro_details_area .description,
    .pro_details_area .details-action-box { padding: 20px 18px; }
}

@media (max-width: 575px) {
    .nsh-ship__grid { grid-template-columns: 1fr; }
    .details_right .single_product { max-width: none; grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   22. SLIDER  —  full image at every width
   style.css pins .slider-item to 400px and responsive.css to 150px. The
   banners are taller than that at desktop widths, so the bottom of every
   one was being cut off — the call-to-action button on the current banner
   sat right in the cropped strip.

   Heights are released so the image sets its own, which makes one upload
   work on both phone and desktop.

   Note for uploads: all slider images should share one aspect ratio
   (1920x700 works well), otherwise the carousel changes height as it moves.
   ========================================================================== */
.main_slider .slider-item,
.home-slider-container .slider-item {
    height: auto;
    width: 100%;
    margin-top: 0;
}

.main_slider .slider-item img,
.home-slider-container .slider-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   23. ASSURANCE STRIP  —  breathing room underneath
   ========================================================================== */
.assurance-section { padding-bottom: 14px; }
.assurance-section + .homeproduct { padding-top: 14px; }

/* ==========================================================================
   24. MOBILE BOTTOM NAV
   ========================================================================== */
@media (max-width: 991px) {

    /* .footer_nav is position:fixed, so it floats over whatever is at the
       bottom of the page — the payment badges were disappearing behind it.
       The body reserves that height instead. env() keeps it clear of the
       gesture bar on iPhones. */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .footer_nav {
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    }

    /* The raised Home button. responsive.css already set its text to white,
       but the generic `.footer_nav ul li a` rule added here outweighed it and
       turned the icon grey on an orange disc. Restated at higher weight,
       and the disc now carries the brand red. */
    .footer_nav ul li.mobile_home {
        border: 3px solid var(--surface);
        background: var(--brand);
        box-shadow: 0 4px 12px rgba(var(--brand-rgb), .3);
        width: 66px;
        height: 66px;
        margin-top: -26px;
        padding-top: 0;
        border-radius: 50%;
        justify-self: center;
    }

    .footer_nav ul li.mobile_home a,
    .footer_nav ul li.mobile_home a i,
    .footer_nav ul li.mobile_home a span {
        color: #fff;
        height: 100%;
        justify-content: center;
        gap: 1px;
    }

    .footer_nav ul li.mobile_home a i { font-size: 19px; }
    .footer_nav ul li.mobile_home a span:last-child { font-size: 10px; font-weight: 600; }

    .footer_nav ul { align-items: center; }
}

/* ==========================================================================
   25. HEADER LOGO  —  fitting whatever file is uploaded
   The supplied logo is a JPEG on a light background, so a pale rectangle
   shows behind it in the header. object-fit keeps it from stretching, and
   the row grows to fit, but a transparent PNG is the real fix — see README.
   ========================================================================== */
.main-logo img { object-position: left center; }
.mobile-logo .menu-logo img { object-fit: contain; object-position: center; }

/* ==========================================================================
   26. CONTACT PAGE
   Four ways to reach the shop as tappable cards, then the map. The old
   enquiry form is gone: it posted to route('home') and threw the message
   away, so every person who filled it in was ignored without knowing.
   ========================================================================== */
.nsh-contact { padding: 34px 0 50px; }

.nsh-contact__head { margin-bottom: 26px; }

.nsh-contact__head h1 {
    font-size: 27px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.025em;
    margin-bottom: 7px;
}

.nsh-contact__head p { color: var(--muted); font-size: 15px; margin: 0; }

.nsh-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.nsh-contact__card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    box-shadow: var(--shadow-1);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nsh-contact__card:not(.is-static):hover {
    border-color: #cfd6dd;
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.nsh-contact__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 17px;
    margin-bottom: 14px;
}

.nsh-contact__icon.is-wa { background: #e7f8ee; color: #14934a; }

.nsh-contact__label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.nsh-contact__value {
    display: block;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.nsh-contact__note {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 5px;
}

.nsh-contact__card:not(.is-static):hover .nsh-contact__value { color: var(--brand); }

.nsh-contact__map {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background: var(--surface-2);
    aspect-ratio: 21 / 8;
}

.nsh-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 767px) {
    .nsh-contact { padding: 22px 0 32px; }
    .nsh-contact__head h1 { font-size: 22px; }
    .nsh-contact__grid { grid-template-columns: 1fr; gap: 11px; }
    .nsh-contact__card { padding: 17px 16px; }
    .nsh-contact__icon { width: 38px; height: 38px; font-size: 15px; margin-bottom: 11px; }
    .nsh-contact__map { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   27. CHECKOUT  —  order summary first on mobile
   The blade already carried ordering classes, but the summary column is
   spelled `cust-order-1` (with a t) while responsive.css targets
   `.cus-order-1` — so the rule never matched anything. Both spellings are
   handled here rather than renaming the class, in case anything else in the
   theme relies on either one.

   Bootstrap's .row is display:flex, so `order` works without touching the
   markup. Desktop keeps form-left / summary-right.
   ========================================================================== */
@media (max-width: 767px) {
    .chheckout-section .row > .cust-order-1,
    .chheckout-section .row > .cus-order-1 {
        order: -1;              /* shopper sees what they are buying first */
        margin-bottom: 16px;
    }

    .chheckout-section .row > .cus-order-2,
    .chheckout-section .row > .cust-order-2 {
        order: 0;
    }

    /* Compact so the form is still reachable without a long scroll. */
    .chheckout-section .cart_details h5 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .chheckout-section .table > :not(caption) > * > * {
        padding: 9px 8px;
        font-size: 13px;
    }

    .chheckout-section .table img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 6px;
    }
}

/* ==========================================================================
   28. SOLAR QUOTE REQUEST PAGE
   Left column explains what happens after they press send — on a form asking
   for a person's electricity bill, that reassurance is what gets it filled in.
   ========================================================================== */
.nsh-quote { padding: 36px 0 56px; }

.nsh-quote__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: start;
}

.nsh-quote__eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}

.nsh-quote__aside h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 14px;
}

.nsh-quote__lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 28px;
    max-width: 42ch;
}

.nsh-quote__steps { list-style: none; margin: 0 0 28px; padding: 0; }

.nsh-quote__steps li {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

/* Connecting line between the numbered steps */
.nsh-quote__steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.nsh-quote__step-no {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--slate);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.nsh-quote__steps li strong {
    display: block;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 2px;
}

.nsh-quote__steps li span span,
.nsh-quote__steps li > span:last-child {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
}

.nsh-quote__callbox {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.nsh-quote__callbox span { font-size: 13px; color: var(--muted); }

.nsh-quote__callbox a {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.nsh-quote__callbox a:hover { color: var(--brand); }
.nsh-quote__callbox i { color: var(--brand); font-size: 16px; }

/* Form */
.nsh-quote__formwrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px;
    box-shadow: var(--shadow-2);
}

.nsh-quote__formtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.nsh-quote__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.nsh-quote__form .form-group { margin-bottom: 16px; }

.nsh-quote__opt {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.nsh-quote__rule { border: 0; border-top: 1px solid var(--line); margin: 6px 0 18px; }

.nsh-quote__err {
    display: block;
    font-size: 12.5px;
    color: var(--sale);
    margin-top: 4px;
}

.nsh-quote__errors {
    background: #fdf1f0;
    border: 1px solid rgba(216, 31, 69, .2);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    color: var(--sale);
    margin-bottom: 18px;
}

/* Property type — icon tiles instead of a dropdown, so the whole set is
   visible at a glance and is one tap on a phone. */
.nsh-quote__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 9px;
}

.nsh-quote__choice { margin: 0; cursor: pointer; }
.nsh-quote__choice input { position: absolute; opacity: 0; pointer-events: none; }

.nsh-quote__choice > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 550;
    color: var(--ink-2);
    text-align: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.nsh-quote__choice > span i { font-size: 18px; color: var(--muted); transition: color .16s ease; }

.nsh-quote__choice:hover > span { border-color: #cfd6dd; }

.nsh-quote__choice input:checked + span {
    border-color: var(--brand);
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.nsh-quote__choice input:checked + span i { color: var(--brand); }
.nsh-quote__choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Amount fields with a unit attached */
.nsh-quote__unit {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}

.nsh-quote__unit:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

.nsh-quote__unit > span {
    display: grid;
    place-items: center;
    padding: 0 13px;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.nsh-quote__unit > span.is-suffix { border-right: 0; border-left: 1px solid var(--line); font-size: 13px; }

.nsh-quote__unit input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.nsh-quote__unit input:focus { box-shadow: none; border: 0; }

.nsh-quote__submit { width: 100%; padding: 14px; font-size: 15px; margin-top: 4px; }

.nsh-quote__privacy {
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
    margin: 12px 0 0;
}

/* Thank-you state */
.nsh-quote__done {
    max-width: 520px;
    margin: 30px auto;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 44px 30px;
    box-shadow: var(--shadow-1);
}

.nsh-quote__done-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--trust-tint);
    color: var(--trust);
    font-size: 25px;
}

.nsh-quote__done h2 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.nsh-quote__done p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }

@media (max-width: 991px) {
    .nsh-quote__grid { grid-template-columns: 1fr; gap: 28px; }
    .nsh-quote__aside h1 { font-size: 25px; }
}

@media (max-width: 575px) {
    .nsh-quote { padding: 22px 0 36px; }
    .nsh-quote__formwrap { padding: 20px 17px; }
    .nsh-quote__row { grid-template-columns: 1fr; gap: 0; }
    .nsh-quote__choices { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   29. ORDER RECEIPT  —  download / print
   ========================================================================== */
.nsh-receipt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nsh-receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.nsh-receipt-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.nsh-receipt-btn i { font-size: 13px; }

/* Only visible on paper */
.nsh-print-head { display: none; }

/* --------------------------------------------------------------------------
   PRINT STYLESHEET
   Everything except the receipt is removed, so the saved PDF is the order
   and nothing else — no nav, no footer, no bottom bar.
   -------------------------------------------------------------------------- */
@media print {
    @page { margin: 14mm; }

    /*
    | রসিদ ছাড়া বাকি সব লুকানোর জন্য visibility ব্যবহার করছি, display নয়।
    |
    | আগে একটা তালিকা বানিয়ে display:none দিয়েছিলাম — আর সেই তালিকায়
    | ভুল করে `.gotop` ঢুকে গিয়েছিল। ধরে নিয়েছিলাম ওটা "উপরে যান" বাটন,
    | কিন্তু আসলে ওটা <body class="gotop"> — অর্থাৎ পুরো পাতাটাই লুকিয়ে
    | গিয়েছিল, তাই প্রিন্ট প্রিভিউ সাদা আসত।
    |
    | এই পদ্ধতিতে কোন মোড়কের কী নাম সেটা জানার দরকারই নেই: সব অদৃশ্য
    | করে দিয়ে শুধু রসিদটুকু আবার দৃশ্যমান করা হয়। ভবিষ্যতে থিমে নতুন
    | কিছু যোগ হলেও প্রিন্ট ভাঙবে না।
    */
    body * { visibility: hidden; }

    #nsh-receipt,
    #nsh-receipt * { visibility: visible; }

    /* position:absolute দিয়েও করা যেত, কিন্তু ক্রোমে লম্বা রসিদ একাধিক
       পাতায় গেলে সেটা কেটে যাওয়ার ঝুঁকি থাকে। স্বাভাবিক জায়গাতেই রেখে
       শুধু পুরো চওড়া করে দিচ্ছি — উপরের মোড়কগুলো display:none হওয়ায়
       রসিদটা এমনিতেই পাতার একদম উপরে চলে আসে। */
    #nsh-receipt {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* অদৃশ্য হলেও এগুলো জায়গা দখল করে রাখত, ফলে ফাঁকা পাতা তৈরি হতো */
    header,
    footer,
    .footer_nav,
    .nsh-topbar,
    .nsh-receipt-btn,
    .success-img,
    #page-overlay,
    #loading { display: none !important; }

    body {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12pt;
    }

    #content,
    .customer-section { padding: 0 !important; margin: 0 !important; }

    /* দোকানের নাম ও ঠিকানা শুধু কাগজে আসে */
    .nsh-print-head {
        display: block !important;
        border-bottom: 2px solid #000;
        padding-bottom: 8px;
        margin-bottom: 14px;
    }

    .nsh-print-head strong { display: block; font-size: 17pt; letter-spacing: -0.02em; }
    .nsh-print-head span { font-size: 9.5pt; color: #444; }

    /* কাগজে লোগো।
       print-color-adjust ছাড়া ব্রাউজার রং ছেঁটে ফেলতে পারে — লোগোর লাল
       অংশটা তখন ধূসর হয়ে যেত। এই লাইনটা আসল রং ধরে রাখে।
       উচ্চতা মিলিমিটারে দেওয়া, কারণ কাগজে px-এর কোনো মানে নেই। */
    .nsh-print-head .nsh-print-logo {
        display: block;
        height: 14mm;
        width: auto;
        max-width: 70mm;
        object-fit: contain;
        object-position: left center;
        margin-bottom: 3mm;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .success-title h2 { font-size: 11pt; font-weight: 400; margin-bottom: 12px; }

    h5, h6 { font-size: 12pt; }

    .success-table { page-break-inside: avoid; }

    .table,
    .table th,
    .table td {
        border-color: #999 !important;
        background: #fff !important;
        color: #000 !important;
        padding: 5px 8px !important;
        font-size: 10.5pt !important;
    }

    a { text-decoration: none; color: #000 !important; }
}

/* ==========================================================================
   30. SOLAR CTA BAND
   Sits between the assurance strip and the category grid. It has to be
   noticed without competing with the categories — so the band is slate
   (structure) and only the button is red (action), exactly the way the
   logo splits its two colours.
   ========================================================================== */
.nsh-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 22px 28px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(120deg, #2b3640 0%, var(--slate) 45%, #44545f 100%);
    box-shadow: 0 6px 22px rgba(28, 36, 43, .18);
}

/* A slow-drifting warm glow standing in for sunlight. Large, soft and low
   contrast, so it reads as light on a surface rather than as decoration. */
.nsh-cta__glow {
    position: absolute;
    top: 50%;
    right: -60px;
    width: 420px;
    height: 420px;
    transform: translateY(-50%);
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(var(--brand-rgb), .30) 0%,
        rgba(var(--brand-rgb), .12) 38%,
        rgba(var(--brand-rgb), 0) 70%);
    animation: nsh-cta-drift 11s ease-in-out infinite;
}

@keyframes nsh-cta-drift {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: .85; }
    50%      { transform: translateY(-54%) scale(1.12); opacity: 1; }
}

.nsh-cta__text { position: relative; z-index: 1; min-width: 0; }

.nsh-cta__kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffb3aa;
    margin-bottom: 6px;
}

.nsh-cta__title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 4px;
}

.nsh-cta__sub {
    font-size: 13.5px;
    color: #c2cbd4;
    margin: 0;
    line-height: 1.5;
}

/* Button */
.nsh-cta__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 16px 14px 24px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.008em;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(var(--brand-rgb), .36);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;

    /* A slow breathing ring so the eye finds it, without movement that
       pulls attention away from the products underneath. */
    animation: nsh-cta-pulse 3.2s ease-in-out infinite;
}

@keyframes nsh-cta-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(var(--brand-rgb), .36), 0 0 0 0 rgba(var(--brand-rgb), .38); }
    55%      { box-shadow: 0 4px 16px rgba(var(--brand-rgb), .40), 0 0 0 12px rgba(var(--brand-rgb), 0); }
}

/* Shine that sweeps across on hover */
.nsh-cta__btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .34) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    transition: left .55s cubic-bezier(.25, .8, .3, 1);
}

.nsh-cta__btn:hover {
    background: var(--brand-deep);
    color: #fff;
    transform: translateY(-2px);
    animation-play-state: paused;
}

.nsh-cta__btn:hover::after { left: 130%; }
.nsh-cta__btn:active { transform: translateY(0); }

.nsh-cta__btn-arrow {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 13px;
    transition: background .2s ease, transform .2s ease;
}

.nsh-cta__btn:hover .nsh-cta__btn-arrow {
    background: rgba(255, 255, 255, .3);
    transform: translateX(3px);
}

.nsh-cta__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .nsh-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 16px;
        padding: 20px 18px;
        margin-top: 12px;
        border-radius: var(--r-md);
    }

    .nsh-cta__glow { right: 50%; transform: translate(50%, -50%); width: 320px; height: 320px; }
    @keyframes nsh-cta-drift {
        0%, 100% { transform: translate(50%, -50%) scale(1); opacity: .85; }
        50%      { transform: translate(50%, -54%) scale(1.12); opacity: 1; }
    }

    .nsh-cta__title { font-size: 18px; }
    .nsh-cta__sub { font-size: 12.5px; }

    .nsh-cta__btn {
        justify-content: center;
        width: 100%;
        font-size: 14.5px;
        padding: 13px 14px 13px 20px;
        white-space: normal;
    }
}

/* The global reduced-motion rule already stops these; this keeps the button
   readable for anyone who has turned animation off. */
@media (prefers-reduced-motion: reduce) {
    .nsh-cta__btn { box-shadow: 0 4px 14px rgba(var(--brand-rgb), .36); }
}

/* ==========================================================================
   31. CHECKOUT  —  saved details notice
   ========================================================================== */
.nsh-prefill {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 107, 87, .2);
    border-radius: var(--r-sm);
    background: var(--trust-tint);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}

.nsh-prefill i { color: var(--trust); font-size: 14px; margin-top: 2px; }
.nsh-prefill strong { color: var(--ink); font-weight: 650; }

/* Checkout header emphasis — the theme had #fe5200 written straight into the
   markup, so it stayed orange after the rebrand. Now it follows the token. */
.checkout-shipping .card-header .nsh-co-em { color: var(--brand); font-weight: 650; }

/* ==========================================================================
   32. AD STRIPS  —  Slider Bottom Ads / Footer Top Ads
   কন্ট্রোলার এই দুটো সবসময়ই আনত ($sliderbottomads, $footertopads), কিন্তু
   index.blade.php কখনো দেখাত না। তাই অ্যাডমিনে ছবি দিলেও হোমপেজে আসত না।

   aspect-ratio দেওয়া আছে যাতে একটা ছবি ভুল মাপের হলেও সারিটা এবড়োখেবড়ো
   না হয় — ছবি বক্স ভরে বসবে, দরকার হলে কিনারা কেটে।
   ========================================================================== */
.nsh-adstrip-section { padding: 22px 0 4px; }
.nsh-adstrip-section.is-footer { padding: 10px 0 30px; }

.nsh-adstrip { display: grid; gap: 16px; }

.nsh-adstrip--three { grid-template-columns: repeat(3, 1fr); }
.nsh-adstrip--two { grid-template-columns: repeat(2, 1fr); }

.nsh-adstrip__item {
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Slider Bottom Ads — অ্যাডমিনে ক্যাটাগরির নামেই মাপ লেখা: 425x212 (২:১)
   Footer Top Ads    — ৪:১। ১৩৮০px container-এ দুটো পাশাপাশি বসলে প্রতিটা
                       ৬৮২px চওড়া হয়, ৪:১ অনুপাতে উচ্চতা ১৭০px — ব্যানার
                       স্ট্রিপের জন্য মানানসই। ১২০০x৩০০ ঠিক এই অনুপাতে পড়ে। */
.nsh-adstrip--three .nsh-adstrip__item { aspect-ratio: 2 / 1; }
.nsh-adstrip--two .nsh-adstrip__item { aspect-ratio: 4 / 1; }

.nsh-adstrip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

/* লিংক থাকলেই কেবল হোভারে সাড়া দেবে — লিংকবিহীন ছবিতে মাউস রাখলে
   কিছু হবে না, নইলে ক্লিক করা যায় ভেবে মানুষ বিভ্রান্ত হন। */
a.nsh-adstrip__item:hover {
    border-color: #cfd6dd;
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

a.nsh-adstrip__item:hover img { transform: scale(1.04); }
.nsh-adstrip__item.is-static { cursor: default; }

@media (max-width: 767px) {
    .nsh-adstrip-section { padding: 14px 0 2px; }
    .nsh-adstrip-section.is-footer { padding: 6px 0 20px; }
    .nsh-adstrip { gap: 10px; }

    /* তিনটা পাশাপাশি রাখলে ফোনে প্রতিটা ~১১০px চওড়া হয়ে যেত —
       ভেতরের লেখা পড়াই যেত না। তাই দুই সারিতে। */
    .nsh-adstrip--three { grid-template-columns: repeat(2, 1fr); }
    .nsh-adstrip--two { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
    .nsh-adstrip--three { grid-template-columns: 1fr; }
}

/* ==========================================================================
   33. PWA INSTALL BANNER
   নিচে ভাসে, মোবাইলের নিচের মেনুর ঠিক উপরে। ছোট, একবার বন্ধ করলে
   ৩০ দিন আর আসে না — ইনস্টলের অনুরোধ বারবার দেখালে মানুষ সাইটই ছাড়ে।
   ========================================================================== */
.nsh-pwa {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;

    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 8px 28px rgba(28, 36, 43, .18);

    animation: nsh-pwa-in .35s cubic-bezier(.2, .8, .3, 1);
}

.nsh-pwa[hidden] { display: none; }

@keyframes nsh-pwa-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nsh-pwa__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    object-fit: contain;
    background: #fff;
}

.nsh-pwa__text { flex: 1; min-width: 0; line-height: 1.35; }

.nsh-pwa__text strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nsh-pwa__text span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
}

.nsh-pwa__btn {
    flex: 0 0 auto;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--r-sm);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease;
}

.nsh-pwa__btn:hover { background: var(--brand-deep); }
.nsh-pwa__btn[hidden] { display: none; }

.nsh-pwa__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.nsh-pwa__close:hover { background: var(--line-2); color: var(--ink); }

@media (min-width: 992px) {
    /* ডেস্কটপে নিচের মেনু নেই, তাই কিনারায় ছোট কার্ড হিসেবে */
    .nsh-pwa {
        left: auto;
        right: 20px;
        bottom: 20px;
        max-width: 380px;
    }
}

@media (max-width: 400px) {
    .nsh-pwa { gap: 9px; padding: 10px 11px; }
    .nsh-pwa__icon { width: 36px; height: 36px; flex-basis: 36px; }
    .nsh-pwa__btn { padding: 9px 13px; font-size: 13px; }
}

/* ইনস্টল করা অ্যাপে চললে নিচের মেনুর নিরাপদ জায়গা একটু বেশি লাগে */
@media (display-mode: standalone) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   34. MAIN MENU  —  v22 (Admin → Menus)
   --------------------------------------------------------------------------
   আগের .catagory_menu > ul-এ overflow-x:auto ছিল। ওভারফ্লো থাকা বাক্সের
   ভেতরের absolute সাবমেনু বাক্সের বাইরে যেতে পারে না — তাই সাবমেনু কেটে
   যেত, চোখেই পড়ত না। নতুন মেনুতে overflow নেই; জায়গা না ধরলে বাকি
   আইটেম "More"-এ চলে যায় (nsh-site.js), তাই দুই লাইনও হয় না।
   ========================================================================== */
.nsh-nav { position: relative; }

.nsh-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nsh-nav__item { position: relative; list-style: none; }
.nsh-nav__list > .nsh-nav__item { flex: 0 0 auto; }
.nsh-nav__list > .nsh-nav__item[hidden] { display: none; }

.nsh-nav__list > .nsh-nav__item > .nsh-nav__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 17px;
    color: var(--menu-text, #fff);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: -0.004em;
    white-space: nowrap;
    transition: background .16s ease;
}

.nsh-nav__list > .nsh-nav__item:hover > .nsh-nav__link,
.nsh-nav__list > .nsh-nav__item.is-focus > .nsh-nav__link {
    background: rgba(255, 255, 255, .1);
    color: var(--menu-text, #fff);
}

.nsh-nav__caret { font-size: 11px; opacity: .75; transition: transform .16s ease; }
.nsh-nav__list > .nsh-nav__item:hover > .nsh-nav__link .nsh-nav__caret { transform: rotate(180deg); }

/* অ্যাডমিনে CSS class "is-highlight" দিলে আইটেমটা আলাদা করে চোখে পড়ে (যেমন অফার) */
.nsh-nav__list > .nsh-nav__item.is-highlight > .nsh-nav__link { background: var(--brand); }

.nsh-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 950;
    min-width: 230px;
    max-width: 320px;
    margin: 0;
    padding: 7px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.nsh-nav__dropdown.is-right { left: auto; right: 0; }

.nsh-nav__item:hover > .nsh-nav__dropdown,
.nsh-nav__item.is-focus > .nsh-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* দ্বিতীয় স্তর থেকে পাশে খোলে */
.nsh-nav__dropdown .nsh-nav__dropdown {
    top: -8px;
    left: calc(100% + 6px);
    border-radius: var(--r-md);
    transform: translateX(6px);
}
.nsh-nav__dropdown .nsh-nav__dropdown::before {
    /* মাউস সরানোর সময় ফাঁকে পড়ে মেনু বন্ধ না হয় */
    content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px;
}
.nsh-nav__dropdown .nsh-nav__dropdown.is-flipped { left: auto; right: calc(100% + 6px); transform: translateX(-6px); }
.nsh-nav__dropdown .nsh-nav__dropdown.is-flipped::before { left: auto; right: -10px; }
.nsh-nav__dropdown .nsh-nav__item:hover > .nsh-nav__dropdown { transform: translateX(0); }

.nsh-nav__dropdown .nsh-nav__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    transition: background .14s ease, color .14s ease;
}
.nsh-nav__dropdown .nsh-nav__link span { flex: 1; }
.nsh-nav__dropdown .nsh-nav__caret { transform: rotate(-90deg); }
.nsh-nav__dropdown .nsh-nav__item:hover > .nsh-nav__link,
.nsh-nav__dropdown .nsh-nav__item.is-focus > .nsh-nav__link {
    background: var(--brand-tint);
    color: var(--brand);
}

/* ==========================================================================
   35. HEADER SEARCH + WHATSAPP / FACEBOOK
   ========================================================================== */
.nsh-searchbar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nsh-searchbar .main-search { flex: 1; min-width: 0; }

.nsh-headsocial { display: flex; gap: 8px; flex: 0 0 auto; }
.nsh-headsocial__btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nsh-headsocial__btn.is-whatsapp { background: #25d366; }
.nsh-headsocial__btn.is-facebook { background: #1877f2; }
.nsh-headsocial__btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .15); filter: brightness(1.05); }

.mobile-search .social-icons a.is-whatsapp { color: #1da851; }
.mobile-search .social-icons a.is-facebook { color: #1877f2; }

/* লোড হওয়ার সময় সার্চ বাটনে ছোট ঘূর্ণি */
.nsh-search.is-loading button svg { animation: nsh-spin .8s linear infinite; }
@keyframes nsh-spin { to { transform: rotate(360deg); } }
.nsh-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ==========================================================================
   36. SEARCH SUGGESTIONS
   ========================================================================== */
.nsh-suggest { display: none; padding: 6px; }
.nsh-suggest.is-open { display: block; }

.nsh-suggest__item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--ink);
}
.nsh-suggest__item img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; background: var(--line-2); }
.nsh-suggest__name { font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nsh-suggest__name mark { background: transparent; color: var(--brand); font-weight: 700; padding: 0; }
.nsh-suggest__price { text-align: right; white-space: nowrap; font-size: 13px; }
.nsh-suggest__price b { display: block; color: var(--brand); font-weight: 700; }
.nsh-suggest__price del { display: block; color: var(--muted); font-size: 11.5px; }

.nsh-suggest__item:hover, .nsh-suggest__item.is-active,
.nsh-suggest__cat:hover, .nsh-suggest__cat.is-active,
.nsh-suggest__all:hover, .nsh-suggest__all.is-active { background: var(--brand-tint); }

.nsh-suggest__cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.nsh-suggest__cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-2);
}
.nsh-suggest__cat mark { background: transparent; color: var(--brand); padding: 0; font-weight: 700; }
.nsh-suggest__cat i { color: var(--muted); font-size: 11px; }

.nsh-suggest__all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px; padding: 10px; border-radius: 8px;
    border-top: 1px solid var(--line-2);
    color: var(--brand); font-weight: 600; font-size: 13.5px;
}
.nsh-suggest__empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   37. MOBILE SLIDE-OUT MENU  —  v22
   ========================================================================== */
.nsh-mnav { list-style: none; margin: 0; padding: 6px 0; }
.nsh-mnav__item { list-style: none; border-bottom: 1px solid var(--line-2); }
.nsh-mnav__row { display: flex; align-items: stretch; }
.nsh-mnav__link {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 550;
}
.nsh-mnav__toggle {
    width: 48px; border: 0; background: transparent; color: var(--muted);
    border-left: 1px solid var(--line-2);
}
.nsh-mnav__toggle i { transition: transform .18s ease; }
.nsh-mnav__item.is-open > .nsh-mnav__row .nsh-mnav__toggle i { transform: rotate(180deg); }
.nsh-mnav__item.is-open > .nsh-mnav__row .nsh-mnav__link { color: var(--brand); }
.nsh-mnav__sub { list-style: none; margin: 0; padding: 0 0 6px 14px; background: var(--surface-2); }
.nsh-mnav__sub .nsh-mnav__item { border-bottom: 0; }
.nsh-mnav__sub .nsh-mnav__link { font-size: 13.5px; font-weight: 500; padding: 9px 14px; color: var(--ink-2); }

.nsh-mnav__social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; }
.nsh-mnav__social a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: var(--r-sm); color: #fff; font-weight: 600; font-size: 13.5px;
    background: var(--slate);
}
.nsh-mnav__social a.is-whatsapp { background: #25d366; }
.nsh-mnav__social a.is-facebook { background: #1877f2; }

/* ==========================================================================
   38. CUSTOM ORDER  —  সোলার ফর্মের নকশাই, যেকোনো পণ্যের জন্য
   ========================================================================== */
.nsh-quote__upload {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1.5px dashed var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    color: var(--ink-2);
    font-size: 13.5px;
}
.nsh-quote__upload:hover { border-color: var(--brand); }
.nsh-quote__upload i { font-size: 20px; color: var(--brand); }
.nsh-quote__upload input { display: none; }
.nsh-quote__upload-name { color: var(--muted); font-size: 12.5px; }
.nsh-quote__product {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 14px;
    border-radius: var(--r-sm); background: var(--brand-tint);
    border: 1px solid rgba(var(--brand-rgb), .18);
    font-size: 13.5px; color: var(--ink);
}
.nsh-quote__product img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }

/* প্রোডাক্ট পাতা → কাস্টম অর্ডারের লিংক */
.nsh-help__custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border: 1px dashed rgba(var(--brand-rgb), .35);
    background: var(--brand-tint);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
}
.nsh-help__custom i { color: var(--brand); }
.nsh-help__custom b { color: var(--brand); font-weight: 650; }
.nsh-help__custom:hover { border-style: solid; color: var(--ink); }

/* ==========================================================================
   39. SLIDER BOTTOM ADS — ২টা (ডেস্কটপে পাশাপাশি, মোবাইলে নিচে নিচে)
   ========================================================================== */
.nsh-adstrip--duo { grid-template-columns: repeat(2, 1fr); }
.nsh-adstrip--duo .nsh-adstrip__item { aspect-ratio: 2 / 1; }
@media (max-width: 767px) {
    .nsh-adstrip--duo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   40. MOBILE MENU — প্রতিটা ক্যাটাগরি আলাদা লাইনে
   পুরনো mobile-menu.css মেনুর li-কে পাশাপাশি বসাত; নতুন মেনুতে তা বাতিল
   ========================================================================== */
.mobile-menu .nsh-mnav,
.mobile-menu .nsh-mnav ul { display: block !important; width: 100% !important; columns: auto !important; }
.mobile-menu .nsh-mnav li,
.mobile-menu .nsh-mnav__item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
}
.mobile-menu .nsh-mnav__row { width: 100%; }
.mobile-menu .nsh-mnav__link { padding-left: 16px !important; text-align: left; }

/* মেনুর Home আইকন */
.nsh-nav__link i.fa-house { font-size: 14px; }

/* ==========================================================================
   41. জেলার ঘর — টাইপ করলেই সাজেশন
   ========================================================================== */
.nsh-dist { position: relative; }
.nsh-dist__list {
    position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 2px);
    margin: 0; padding: 4px 0; list-style: none; max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid #dde2e8; border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
.nsh-dist__list[hidden] { display: none; }
.nsh-dist__list li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer; font-size: 14px; line-height: 1.3; color: #1f2937;
}
.nsh-dist__list li small { color: #6b7280; font-size: 13px; }
.nsh-dist__list li:hover,
.nsh-dist__list li.is-active { background: rgba(var(--brand-rgb, 254, 82, 0), .09); color: var(--brand, #fe5200); }
.nsh-otp-input { letter-spacing: 8px; font-size: 22px !important; text-align: center; font-weight: 600; }

/* ==========================================================================
   42. প্রোডাক্ট পাতা: Description / Reviews / ভিডিও
   ডেস্কটপে বাঁয়ে Description + Reviews, ডানে ভিডিও;
   মোবাইলে Description → ভিডিও → Reviews
   ========================================================================== */
.nsh-pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "desc" "rev"; column-gap: 24px; }
.nsh-pd-grid.has-video { grid-template-areas: "desc" "video" "rev"; }
.nsh-pd-grid__desc { grid-area: desc; }
.nsh-pd-grid__rev { grid-area: rev; }
.nsh-pd-grid__video { grid-area: video; margin-bottom: 20px; }
.nsh-pd-grid > .details-action-box { margin-left: 0; margin-right: 0; }
@media (min-width: 768px) {
    .nsh-pd-grid.has-video {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas: "desc video" "rev video";
        grid-template-rows: auto 1fr;
    }
    .nsh-pd-grid.has-video .nsh-pd-grid__video { align-self: start; position: sticky; top: 90px; }
}
@media (min-width: 992px) {
    .nsh-pd-grid.has-video { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ==========================================================================
   43. মোবাইল মেনুর নিচে Track Order / Custom Order / ফোন
   ========================================================================== */
.nsh-mnav__links { display: grid; gap: 8px; padding: 6px 16px 24px; }
.nsh-mnav__links a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    background: #f4f6f9; color: #1f2937; font-weight: 600; font-size: 14.5px;
    text-decoration: none;
}
.nsh-mnav__links a i { width: 18px; text-align: center; color: var(--brand); }
.nsh-mnav__links a:active { background: rgba(var(--brand-rgb), .1); }

/* ==========================================================================
   44. লগইন পাতা — "Create an account" সবার উপরে
   ========================================================================== */
.nsh-auth-new {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 18px;
    border: 1.5px dashed rgba(var(--brand-rgb), .45); border-radius: 12px;
    background: rgba(var(--brand-rgb), .05);
}
.nsh-auth-new__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.nsh-auth-new__text strong { font-size: 16px; color: #111827; }
.nsh-auth-new__text span { font-size: 13px; color: #6b7280; line-height: 1.45; }
.nsh-auth-new__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 10px;
    background: var(--brand); color: #fff !important; font-weight: 700; font-size: 14.5px;
    text-decoration: none; white-space: nowrap; flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.nsh-auth-new__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--brand-rgb), .32); }
@media (max-width: 420px) { .nsh-auth-new__btn { width: 100%; } }
.nsh-auth-or { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #9ca3af; font-size: 12.5px; }
.nsh-auth-or::before, .nsh-auth-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

/* ==========================================================================
   45. ডান পাশে ভাসমান WhatsApp / Messenger
   ========================================================================== */
.nsh-chat {
    position: fixed; right: 22px; bottom: 70px; z-index: 98;
    display: flex; flex-direction: column; gap: 12px;
}
.nsh-chat__btn {
    position: relative;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c, #25d366); color: #fff !important; font-size: 26px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.nsh-chat__btn:hover { transform: scale(1.08); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.nsh-chat__btn.is-whatsapp::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--c, #25d366); opacity: .7;
    animation: nshChatPulse 2.2s ease-out infinite;
}
@keyframes nshChatPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.nsh-chat__tip {
    position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 5px 10px; border-radius: 6px; white-space: nowrap;
    background: #111827; color: #fff; font-size: 12.5px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.nsh-chat__btn:hover .nsh-chat__tip { opacity: 1; }
@media (max-width: 767px) {
    .nsh-chat { right: 12px; bottom: 92px; gap: 10px; }
    .nsh-chat__btn { width: 46px; height: 46px; font-size: 23px; }
    .nsh-chat__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nsh-chat__btn.is-whatsapp::after { animation: none; } }

/* ==========================================================================
   46. কার্টে পণ্য থাকলে বাঁ পাশে "Submit Order" — চাপলে চেকআউট
   ========================================================================== */
.nsh-float-cart {
    position: fixed; left: 18px; bottom: 22px; z-index: 98;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 18px; border-radius: 999px;
    background: linear-gradient(135deg, #1fa35a, #15803d);
    color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none;
    box-shadow: 0 10px 24px rgba(21, 128, 61, .35);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s ease;
}
.nsh-float-cart.is-show { transform: none; opacity: 1; pointer-events: auto; }
.nsh-float-cart:hover { color: #fff; box-shadow: 0 12px 28px rgba(21, 128, 61, .45); }
.nsh-float-cart i { font-size: 17px; }
.nsh-float-cart__qty {
    min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #15803d; font-size: 14px; font-weight: 800;
}
.nsh-float-cart.is-bump { animation: nshCartBump .5s ease; }
@keyframes nshCartBump { 0%, 100% { transform: none; } 35% { transform: scale(1.1); } 70% { transform: scale(.96); } }
@media (max-width: 767px) {
    .nsh-float-cart { left: 12px; bottom: 88px; font-size: 14px; padding: 9px 10px 9px 15px; }
}

/* ==========================================================================
   47. ফুটার — আইকন আর লেখা এক লাইনে, মোবাইলে সব বাঁয়ে সাজানো
   আগে "Get in Touch"-এর লিংকগুলোতে সাধারণ ফুটার-লিংকের margin/line-height
   লাগত, তাই ইমেইল/ফোনের লেখা আইকনের নিচে নেমে যেত। আর মোবাইলে
   responsive.css সব ফুটার লিংক মাঝখানে (text-align:center) বসাত।
   ========================================================================== */
footer .footer-menu .nsh-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    line-height: 1.6;
    text-align: left;
}
footer .footer-menu .nsh-footer-contact li i {
    flex: 0 0 18px;
    width: 18px;
    margin-top: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
}
footer .footer-menu .nsh-footer-contact li a,
footer .footer-menu .nsh-footer-contact li span {
    display: inline;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 13.5px;
    text-align: left;
    word-break: break-word;
}
footer .footer-menu .nsh-footer-contact li a:hover { padding-left: 0; }
/* responsive.css সব ফুটার লিংক capitalize করত — ইমেইল হয়ে যেত Info@Trustsoftbd.Com */
footer .footer-menu .nsh-footer-contact li a { text-transform: none !important; }

footer .footer-menu ul li,
footer .footer-menu ul li a { text-align: left; }

@media (max-width: 767px) {
    footer .footer-top { padding: 34px 0 14px; }
    footer .footer-about { padding-right: 0; margin-bottom: 6px; }
    footer .footer-about p { max-width: none; }

    /* Information আর Categories পাশাপাশি দুই কলামে, দুটোই বাঁ-ঘেঁষা */
    footer .footer-top .row > [class*="col-"] { padding-left: 20px; padding-right: 12px; }
    footer .footer-about { padding-left: 0 !important; }
    footer .footer-menu { margin-bottom: 22px; }
    footer .footer-menu ul li.title .nsh-col-title { margin-bottom: 12px; font-size: 12.5px; }
    footer .footer-menu ul li a {
        display: block;
        margin: 0;
        padding: 6px 0;
        line-height: 1.45;
        font-size: 14px;
        text-align: left !important;
    }
    footer .footer-menu ul li a:hover { padding-left: 0; }

    /* Get in Touch — পুরো চওড়া, উপরে একটা হালকা দাগ */
    footer .footer-contact-col { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
    footer .footer-menu .nsh-footer-contact li { margin-bottom: 12px; }
    footer .footer-menu .nsh-footer-contact li a,
    footer .footer-menu .nsh-footer-contact li span { font-size: 14px; }

    footer .nsh-footer-policy__row { flex-direction: column; align-items: flex-start; gap: 12px; }
    footer .nsh-paylist { flex-wrap: wrap; justify-content: flex-start; }
    footer .copyright { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
    footer .copyright p { text-align: left; margin: 0; }
    /* নিচের মেনুবার আর ভাসমান বাটনের নিচে যেন কিছু ঢাকা না পড়ে */
    footer .footer-bottom { padding-bottom: 90px; }
}

/* ==========================================================================
   48. Hot Deal — শিরোনাম আর কাউন্টডাউনের মাঝে ফাঁক
   ========================================================================== */
.timer_inner { justify-content: flex-start !important; align-items: center; gap: 16px; flex-wrap: wrap; }
.timer_inner .section-title-name { white-space: nowrap; }
.timer_inner .syotimer__body { gap: 6px; }
.timer_inner .syotimer-cell { width: auto !important; min-width: 40px; padding: 8px 9px !important; line-height: 1.1; border-radius: 8px !important; }

/* ==========================================================================
   49. প্রোডাক্ট কার্ডের বাটন — সব জায়গায় একই মাপ ও ফন্ট
   পুরনো থিমের .cart_btn a / .order_button a / button নিয়মগুলো কিছু কার্ডে
   বড় হাতের বড় ফন্ট বসাত; এখানে সবার উপরে এক মাপ বেঁধে দেওয়া।
   ========================================================================== */
.product_item .nsh-cardbtns .nsh-btn,
.product_item .nsh-cardbtns a.nsh-btn,
.product_item .nsh-cardbtns button.nsh-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    width: 100% !important;
    float: none !important;
}
.product_item .nsh-cardbtns { align-items: stretch; }
@media (max-width: 479px) {
    .product_item .nsh-cardbtns .nsh-btn,
    .product_item .nsh-cardbtns a.nsh-btn,
    .product_item .nsh-cardbtns button.nsh-btn { height: 34px !important; font-size: 11.5px !important; letter-spacing: 0 !important; }
}

/* ==========================================================================
   50. উইশলিস্ট — কার্ডের হার্ট, পণ্যের পাতার বাটন, হেডারের সংখ্যা
   ========================================================================== */
.product_item_inner { position: relative; }
.nsh-wish {
    position: absolute; top: 10px; left: 10px; z-index: 6;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .95); border: 1px solid #e5e7eb; color: #6b7280;
    font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: color .15s, transform .15s, border-color .15s;
}
.nsh-wish:hover { color: #e11d48; border-color: #fecdd3; }
.nsh-wish.is-on { color: #e11d48; border-color: #fecdd3; }
.nsh-wish.is-pop { animation: nshWishPop .45s ease; }
@keyframes nshWishPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

.nsh-pd-extra { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.nsh-wish.nsh-wish--btn {
    position: static; width: auto; height: 42px; border-radius: 10px; padding: 0 16px;
    gap: 8px; font-size: 15px; font-weight: 600; align-self: flex-start; box-shadow: none; color: #374151;
}
.nsh-wish.nsh-wish--btn.is-on { color: #e11d48; background: #fff1f2; }
.nsh-points-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: #fdf2f8; border: 1px solid #fbcfe8; color: #9d174d; font-size: 14.5px; line-height: 1.5;
}
.nsh-points-note i { margin-top: 3px; }
.nsh-points-note small { color: #be185d; }

.header-list-items ul li.nsh-head-wish a { position: relative; display: inline-flex; align-items: center; font-size: 20px; color: var(--ink, #1f2937); padding: 0 4px; }
.nsh-wish-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #e11d48; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.nsh-head-wish .nsh-wish-count { position: absolute; top: -6px; right: -8px; }
.nsh-mnav__links .nsh-wish-count { margin-left: auto; }
.nsh-side-badge { margin-left: auto; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.customer-sidebar .sidebar-menu a { display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   51. রিওয়ার্ড পয়েন্ট — অ্যাকাউন্ট পাতা আর চেকআউট
   ========================================================================== */
.nsh-points-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 22px 24px; border-radius: 16px; color: #fff;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
}
.nsh-points-hero > i { font-size: 46px; opacity: .35; }
.nsh-points-hero__label { display: block; font-size: 13px; opacity: .9; }
.nsh-points-hero__value { display: block; font-size: 40px; font-weight: 800; line-height: 1.15; }
.nsh-points-hero__sub { font-size: 14px; opacity: .92; }
.nsh-points-progress { margin: 12px 0 0; font-size: 14px; color: #4b5563; }
.nsh-points-progress.is-ready { color: #15803d; }
.nsh-points-rules { display: grid; gap: 10px; margin-top: 18px; }
.nsh-points-rules > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #374151; }
.nsh-points-rules i { width: 20px; margin-top: 3px; color: var(--brand); text-align: center; }
.nsh-redeem {
    display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    padding: 12px 14px; margin: 4px 0 14px; border-radius: 10px;
    border: 1.5px dashed #f9a8d4; background: #fdf2f8;
}
.nsh-redeem input { width: 18px; height: 18px; margin-top: 3px; accent-color: #db2777; }
.nsh-redeem b { display: block; color: #9d174d; font-size: 14.5px; }
.nsh-redeem small { color: #6b7280; }
.nsh-redeem-hint { font-size: 13.5px; color: #9d174d; margin: 0 0 12px; }

/* ==========================================================================
   52. সাধারণ পাতা (উইশলিস্ট, ব্র্যান্ড) — শিরোনাম, খালি অবস্থা, ব্রেডক্রাম্ব
   ========================================================================== */
.nsh-page, .nsh-blog { padding: 26px 0 50px; }
.nsh-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.nsh-page__title { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: #111827; }
.nsh-page__title i { color: #e11d48; }
.nsh-page__lead { color: #6b7280; margin: 0; font-size: 14.5px; }
.nsh-page__count { font-weight: 600; color: #6b7280; }
.nsh-empty { text-align: center; padding: 50px 16px; border: 1px dashed #e5e7eb; border-radius: 16px; background: #fff; }
.nsh-empty > i { font-size: 44px; color: #d1d5db; margin-bottom: 10px; }
.nsh-empty h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.nsh-empty p { color: #6b7280; margin-bottom: 16px; }
.nsh-empty .nsh-btn { display: inline-flex; padding: 11px 22px; border-radius: 10px; font-weight: 600; }
.nsh-btn.nsh-btn--solid { background: var(--ink, #111827); color: #fff; border: 1px solid var(--ink, #111827); }
.nsh-btn.nsh-btn--ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.nsh-crumbs { font-size: 13px; color: #9ca3af; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.nsh-crumbs a { color: #6b7280; }
.nsh-crumbs b { color: #374151; font-weight: 600; }
.nsh-sort select { min-width: 180px; }

/* ==========================================================================
   53. ব্র্যান্ড — হোমের "Shop by brand", /brands, /brand/{slug}
   ========================================================================== */
.nsh-brands-home { padding: 34px 0 44px; }
.nsh-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.nsh-sechead__kicker { color: var(--brand); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.nsh-sechead__title { font-size: 28px; font-weight: 800; margin: 4px 0 4px; color: #111827; }
.nsh-sechead__lead { color: #6b7280; margin: 0; }
.nsh-sechead__more { font-weight: 700; color: #111827; display: inline-flex; gap: 8px; align-items: center; }
.nsh-brandgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
    padding: 14px; border: 1px solid #eef0f4; border-radius: 18px; background: #fff;
}
.nsh-brandtile {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 96px; padding: 14px; border-radius: 12px; background: #f4f5f8;
    transition: background .15s, box-shadow .15s, transform .15s; text-decoration: none;
}
.nsh-brandtile:hover { background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.nsh-brandtile img { max-width: 100%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.nsh-brandtile__name { font-weight: 700; font-size: 15px; color: #1f2937; text-align: center; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; }
.nsh-brandtile__count { position: absolute; top: 7px; right: 10px; font-size: 11px; color: #9ca3af; }
.nsh-brandhead__logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #f4f5f8; padding: 8px; }
@media (max-width: 575px) {
    .nsh-brandgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
    .nsh-brandtile { height: 74px; padding: 8px; }
    .nsh-brandtile__name { font-size: 12.5px; }
    .nsh-brandtile__count { display: none; }
    .nsh-sechead__title { font-size: 22px; }
}

/* ==========================================================================
   54. ব্লগ
   ========================================================================== */
.nsh-blog__head { margin-bottom: 22px; }
.nsh-blog__head h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; color: #111827; }
.nsh-blog__head p { color: #6b7280; margin: 0; }
.nsh-bchip { display: inline-block; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-right: 6px; text-transform: uppercase; letter-spacing: .05em; }
.nsh-bcat { display: inline-block; color: var(--brand); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.nsh-bmeta { display: inline-flex; flex-wrap: wrap; gap: 14px; color: #9ca3af; font-size: 13px; }
.nsh-bmeta i { margin-right: 4px; }

.nsh-bfeat { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #eef0f4; margin-bottom: 24px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.nsh-bfeat:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }
.nsh-bfeat__img { min-height: 280px; background: #f1f3f7 center / cover no-repeat; }
.nsh-bfeat__body { padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.nsh-bfeat__body h2 { font-size: 24px; font-weight: 800; line-height: 1.3; margin: 6px 0 10px; color: #111827; }
.nsh-bfeat__body p { color: #4b5563; margin-bottom: 12px; }

.nsh-bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.nsh-bgrid.is-3 { grid-template-columns: repeat(3, 1fr); }
.nsh-bcard { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.nsh-bcard:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.nsh-bcard__img { display: block; aspect-ratio: 16 / 9; background: #f1f3f7; overflow: hidden; }
.nsh-bcard__img img { width: 100%; height: 100%; object-fit: cover; }
.nsh-bcard__img span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 34px; color: #cbd2dc; }
.nsh-bcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.nsh-bcard__body h2 { font-size: 17.5px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.nsh-bcard__body h2 a { color: #111827; }
.nsh-bcard__body h2 a:hover { color: var(--brand); }
.nsh-bcard__body p { color: #6b7280; font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.nsh-bcard__body .nsh-bmeta { margin-top: auto; }

.nsh-bside { position: sticky; top: 90px; display: grid; gap: 18px; }
.nsh-bside__search { display: flex; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.nsh-bside__search input { flex: 1; border: 0; padding: 12px 14px; outline: none; min-width: 0; }
.nsh-bside__search button { border: 0; background: var(--brand); color: #fff; width: 48px; }
.nsh-bside__box { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 18px; }
.nsh-bside__box h3 { font-size: 15px; font-weight: 800; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; color: #111827; }
.nsh-bside__cats { list-style: none; margin: 0; padding: 0; }
.nsh-bside__cats a { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eef0f4; color: #374151; }
.nsh-bside__cats li:last-child a { border-bottom: 0; }
.nsh-bside__cats a span { color: #9ca3af; font-size: 13px; }
.nsh-bside__cats a.is-active, .nsh-bside__cats a:hover { color: var(--brand); }
.nsh-bside__pop { display: flex; gap: 12px; align-items: center; padding: 8px 0; color: #111827; }
.nsh-bside__thumb { width: 64px; height: 48px; border-radius: 8px; background: #f1f3f7 center / cover no-repeat; flex: 0 0 64px; }
.nsh-bside__pop b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.nsh-bside__pop small { color: #9ca3af; }
.nsh-btags { display: flex; flex-wrap: wrap; gap: 8px; }
.nsh-btags a { padding: 5px 11px; border-radius: 999px; background: #f4f5f8; color: #374151; font-size: 13px; }
.nsh-btags a:hover { background: var(--brand); color: #fff; }
.nsh-bside__shop { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; background: var(--ink, #111827); color: #fff !important; }
.nsh-bside__shop i { font-size: 26px; }
.nsh-bside__shop b { display: block; }
.nsh-bside__shop small { opacity: .8; }

.nsh-post { background: #fff; border: 1px solid #eef0f4; border-radius: 18px; padding: 30px; }
.nsh-post__head h1 { font-size: 32px; font-weight: 800; line-height: 1.3; margin: 4px 0 12px; color: #111827; }
.nsh-post__cover { margin: 20px -30px; }
.nsh-post__cover img { width: 100%; max-height: 520px; object-fit: cover; }
.nsh-post__content { font-size: 16.5px; line-height: 1.85; color: #1f2937; overflow-wrap: break-word; }
.nsh-post__content h2 { font-size: 24px; font-weight: 800; margin: 30px 0 12px; }
.nsh-post__content h3 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; }
.nsh-post__content p { margin: 0 0 16px; }
.nsh-post__content img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.nsh-post__content ul, .nsh-post__content ol { padding-left: 22px; margin-bottom: 16px; }
.nsh-post__content li { margin-bottom: 6px; }
.nsh-post__content blockquote { border-left: 4px solid var(--brand); background: #f9fafb; padding: 12px 18px; margin: 18px 0; border-radius: 0 10px 10px 0; color: #374151; }
.nsh-post__content a { color: var(--brand); text-decoration: underline; }
.nsh-post__content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.nsh-post__content td, .nsh-post__content th { border: 1px solid #e5e7eb; padding: 8px 10px; }
.nsh-post__content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; }
.nsh-post__shop, .nsh-post__related { margin-top: 28px; }
.nsh-post__shop h2, .nsh-post__related h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.nsh-post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.nsh-post__nav a { display: block; padding: 16px; border: 1px solid #eef0f4; border-radius: 14px; background: #fff; color: #111827; }
.nsh-post__nav a small { display: block; color: #9ca3af; margin-bottom: 4px; }
.nsh-post__nav a.is-next { text-align: right; }
@media (max-width: 991px) {
    .nsh-bside { position: static; }
    .nsh-bgrid.is-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .nsh-bfeat { grid-template-columns: 1fr; }
    .nsh-bfeat__img { min-height: 200px; }
    .nsh-bgrid, .nsh-bgrid.is-3 { grid-template-columns: 1fr; }
    .nsh-post { padding: 18px; border-radius: 14px; }
    .nsh-post__cover { margin: 14px -18px; }
    .nsh-post__head h1 { font-size: 24px; }
    .nsh-post__content { font-size: 16px; }
    .nsh-blog__head h1 { font-size: 24px; }
    .nsh-post__nav { grid-template-columns: 1fr; }
}

/* ব্লগ: থিমের সাধারণ li/চিপ নিয়ম ঠিক করা */
.nsh-bside__cats li { display: block !important; width: 100%; }
.nsh-bfeat__body .nsh-bchip, .nsh-bfeat__body .nsh-bcat { align-self: flex-start; }
.nsh-bfeat__body > span:first-child + .nsh-bcat { margin-left: 0; }
/* ==========================================================================
   55. ফুটারে "Get our app" (PWA ইনস্টল) আর নোটিফিকেশন বাটন
   ========================================================================== */
.nsh-getapp { margin-top: 18px; }
.nsh-getapp__title { display: block; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.nsh-getapp__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.nsh-appbadge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 12px; border-radius: 10px;
    background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .28);
    cursor: pointer; transition: transform .15s, border-color .15s, background .15s; line-height: 1.1; text-align: left;
}
.nsh-appbadge:hover { transform: translateY(-2px); border-color: #fff; background: #111; }
.nsh-appbadge i { font-size: 26px; }
.nsh-appbadge .fa-android { color: #3ddc84; }
.nsh-appbadge small { display: block; font-size: 10.5px; opacity: .8; }
.nsh-appbadge b { display: block; font-size: 16px; font-weight: 700; }
.nsh-notify-btn {
    margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .45);
    background: transparent; color: #fff; font-size: 13.5px; cursor: pointer;
}
.nsh-notify-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.nsh-notify-btn.is-on { border-style: solid; border-color: #22c55e; color: #86efac; cursor: default; }
.lp-site-footer .nsh-getapp { display: none; }

.nsh-appmodal { position: fixed; inset: 0; z-index: 10050; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nsh-appmodal[hidden] { display: none; }
.nsh-appmodal__box { position: relative; background: #fff; border-radius: 18px; padding: 26px 24px 20px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.nsh-appmodal__box h3 { font-size: 20px; font-weight: 800; margin: 0 0 14px; padding-right: 24px; }
.nsh-appmodal__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #6b7280; }
.nsh-appmodal__steps { margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: nshstep; }
.nsh-appmodal__steps li { margin-bottom: 10px; font-size: 15px; line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; list-style: none; counter-increment: nshstep; }
.nsh-appmodal__steps li::before { content: counter(nshstep); flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--brand, #e63329); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.nsh-appmodal__note { font-size: 13px; color: #6b7280; margin: 0; }

.nsh-pushask {
    position: fixed; left: 12px; right: 12px; bottom: 88px; z-index: 10040;
    display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px;
    background: #111827; color: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); font-size: 14px;
    max-width: 520px; margin: 0 auto;
}
.nsh-pushask i { color: #facc15; font-size: 18px; }
.nsh-pushask span { flex: 1; line-height: 1.4; }
.nsh-pushask__yes { border: 0; background: var(--brand); color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.nsh-pushask__no { border: 0; background: transparent; color: #9ca3af; font-size: 22px; line-height: 1; }

/* ==========================================================================
   56. Contact Us পাতা — ফর্ম, ম্যাপ, প্রশ্ন-উত্তর
   ========================================================================== */
.nsh-contact__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 28px; align-items: stretch; }
.nsh-contact__split.is-single { grid-template-columns: 1fr; max-width: 760px; }
.nsh-contact__form { background: #fff; border: 1px solid #eef0f4; border-radius: 18px; padding: 24px; }
.nsh-contact__form h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.nsh-contact__formlead { color: #6b7280; margin-bottom: 16px; }
.nsh-contact__form label { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: block; }
.nsh-contact__form .form-control { border-radius: 10px; min-height: 46px; }
.nsh-contact__send { border: 0; background: var(--brand); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 12px; display: inline-flex; gap: 8px; align-items: center; }
.nsh-contact__ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.nsh-contact__split .nsh-contact__map { margin: 0; min-height: 360px; }
.nsh-contact__split .nsh-contact__map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 18px; }
.nsh-contact__faq { margin-top: 30px; max-width: 860px; }
.nsh-contact__faq h2 { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.nsh-contact__faq details { background: #fff; border: 1px solid #eef0f4; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.nsh-contact__faq summary { font-weight: 700; cursor: pointer; }
.nsh-contact__faq p { margin: 10px 0 0; color: #4b5563; }
@media (max-width: 991px) { .nsh-contact__split { grid-template-columns: 1fr; } }

/* ব্র্যান্ডের নাম লিংক (পণ্যের পাতা) */
.nsh-brand__link { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.nsh-brand__link:hover { color: var(--brand); }


/* ==========================================================================
   57. অষ্টম রাউন্ড — স্লাইডার/বিজ্ঞাপনের নির্দিষ্ট মাপ, ফিচার স্ট্রিপ,
       অ্যাকাউন্ট মেনু, মোবাইলের নিচের মেনু, ভ্যারিয়েন্ট, ইনস্টল পপআপ
   ========================================================================== */

/* স্লাইডার: যেকোনো মাপের ছবি ১১০০×৪৫০ অনুপাতের বাক্সে, পুরো জায়গা ভরে (মাঝখান থেকে) */
.home-slider-container .slider-item,
.main_slider .slider-item {
    aspect-ratio: 1100 / 450;
    height: auto !important;
    overflow: hidden;
    background: var(--surface-2, #f3f4f6);
}
.home-slider-container .slider-item a { display: block; width: 100%; height: 100%; }
.home-slider-container .slider-item img,
.main_slider .slider-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}

/* স্লাইডারের নিচের ২টা আর ফুটারের ২টা বিজ্ঞাপন: ৫০০×১৫০ অনুপাত, ছবি পুরোটা দেখা যায় */
.nsh-adstrip--duo .nsh-adstrip__item,
.nsh-adstrip--two .nsh-adstrip__item {
    aspect-ratio: 500 / 150;
    background: #fff;
}
.nsh-adstrip--duo .nsh-adstrip__item img,
.nsh-adstrip--two .nsh-adstrip__item img { object-fit: contain; }
a.nsh-adstrip__item:hover img { transform: none; }
@media (max-width: 767px) {
    .nsh-adstrip--duo, .nsh-adstrip--two { grid-template-columns: 1fr; }
}

/* ফিচার স্ট্রিপ — ছবির মতো: সাদা লম্বা বাক্স, ৪ ভাগ, মাঝে দাগ, রঙিন আইকন */
.nsh-fs-section { padding: 18px 0 6px; }
.nsh-fs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid #e3e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(30, 41, 59, .06);
    padding: 14px 6px;
}
.nsh-fs__item { display: flex; align-items: center; gap: 14px; padding: 6px 18px; min-width: 0; }
.nsh-fs__item + .nsh-fs__item { border-left: 1px solid #e3e8f0; }
.nsh-fs__icon { flex: 0 0 58px; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; }
.nsh-fs__icon svg { width: 100%; height: 100%; display: block; }
.nsh-fs__text { display: flex; flex-direction: column; min-width: 0; }
.nsh-fs__title { font-size: 17px; font-weight: 700; color: #111827; line-height: 1.25; }
.nsh-fs__hl { font-weight: 800; }
.nsh-fs__item.is-truck .nsh-fs__hl { color: #111827; font-size: 1.08em; }
.nsh-fs__item.is-cash .nsh-fs__hl { color: #dc2626; }
.nsh-fs__item.is-shield .nsh-fs__hl { color: #16a34a; }
.nsh-fs__item.is-headset .nsh-fs__hl { color: #2563eb; }
.nsh-fs__note { font-size: 13px; color: #4b5563; margin-top: 3px; line-height: 1.35; }
@media (max-width: 1199px) {
    .nsh-fs__item { padding: 6px 12px; gap: 10px; }
    .nsh-fs__icon { flex-basis: 46px; width: 46px; height: 46px; }
    .nsh-fs__title { font-size: 15px; }
}
@media (max-width: 767px) {
    .nsh-fs { grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; }
    .nsh-fs__item { padding: 10px 8px; gap: 8px; }
    .nsh-fs__item + .nsh-fs__item { border-left: 0; }
    .nsh-fs__item:nth-child(even) { border-left: 1px solid #e3e8f0; }
    .nsh-fs__item:nth-child(n+3) { border-top: 1px solid #e3e8f0; }
    .nsh-fs__icon { flex-basis: 38px; width: 38px; height: 38px; }
    .nsh-fs__title { font-size: 13px; }
    .nsh-fs__note { font-size: 11px; }
}
/* পুরনো স্ট্রিপের ফাঁকা জায়গা */
.nsh-fs-section + .homeproduct { padding-top: 14px; }

/* সোলার কোটেশন CTA — "Shop by Category"-এর উপরে নিজের সেকশনে */
.nsh-cta-section { padding: 6px 0 26px; }
.nsh-cta-section.is-top { padding: 14px 0 4px; }
.nsh-cta-section .nsh-cta { margin-top: 0; }
.nsh-cta-section.is-top + .homeproduct { padding-top: 14px; }

.nsh-cta__icon {
    position: relative;
    z-index: 1;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: #1f2937;
    font-size: 28px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .35);
}
.nsh-cta__text { flex: 1 1 320px; }
.nsh-cta__points {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.nsh-cta__points li {
    font-size: 12.5px;
    font-weight: 600;
    color: #e5eaef;
}
.nsh-cta__points i { color: #fbbf24; margin-right: 4px; }

@media (max-width: 767px) {
    .nsh-cta__icon { align-self: center; width: 54px; height: 54px; flex-basis: auto; font-size: 23px; border-radius: 15px; }
    .nsh-cta__text { flex-basis: auto; }
    .nsh-cta__points { justify-content: center; }
}

/* ডেস্কটপ হেডার — নামের উপর মাউস নিলে অ্যাকাউন্টের মেনু */
.header-list-items li.nsh-acct { position: relative; }
.nsh-acct__caret { font-size: 11px; margin-left: 2px; opacity: .7; transition: transform .15s ease; }
.nsh-acct__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    padding: 8px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .14);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nsh-acct__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* মাউস সরাতে ফাঁক না থাকে */
.nsh-acct:hover .nsh-acct__menu,
.nsh-acct:focus-within .nsh-acct__menu { opacity: 1; visibility: visible; transform: none; }
.nsh-acct:hover .nsh-acct__caret { transform: rotate(180deg); }
.nsh-acct__menu a,
.nsh-acct__menu button {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px !important;
    border: 0;
    background: transparent;
    border-radius: 9px;
    color: var(--ink-2, #374151) !important;
    font-size: 14px;
    font-weight: 550;
    text-align: left;
    white-space: nowrap;
}
.nsh-acct__menu a i, .nsh-acct__menu button i { width: 18px; text-align: center; color: var(--muted, #6b7280); }
.nsh-acct__menu a:hover, .nsh-acct__menu button:hover { background: var(--brand-tint, #fef2f2); color: var(--brand) !important; }
.nsh-acct__menu a:hover i, .nsh-acct__menu button:hover i { color: var(--brand); }
.nsh-acct__menu form { border-top: 1px solid var(--line, #eef0f4); margin-top: 4px !important; padding-top: 4px; }

/* মোবাইলে অ্যাকাউন্টের মেনু — আগে responsive.css লুকিয়ে রাখত */
@media (max-width: 767px) {
    .customer-sidebar .sidebar-menu.nsh-acctnav { display: block !important; background: transparent; margin: 8px 0 0; }
    .customer-sidebar { margin-bottom: 14px; }
    .nsh-acctnav ul { margin: 0; padding: 0; list-style: none; }
    .nsh-acctnav.is-home ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .nsh-acctnav.is-home li a {
        flex-direction: column;
        justify-content: center;
        gap: 6px !important;
        min-height: 78px;
        text-align: center;
        border: 1px solid var(--line, #e5e7eb);
        background: #fff;
        font-size: 13px !important;
    }
    .nsh-acctnav.is-home li a svg { width: 22px; height: 22px; color: var(--brand); }
    .nsh-acctnav.is-chips ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .nsh-acctnav.is-chips ul::-webkit-scrollbar { display: none; }
    .nsh-acctnav.is-chips li { flex: 0 0 auto; }
    .nsh-acctnav.is-chips li a { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 999px !important; padding: 7px 12px !important; font-size: 13px !important; white-space: nowrap; }
    .nsh-acctnav.is-chips li a svg { width: 15px; height: 15px; }
    .nsh-acctnav li a svg, .nsh-acctnav li a i { position: static !important; }
    .nsh-acctnav .nsh-side-badge { margin-left: 0; }
}

/* মোবাইলের নিচের মেনু — স্ক্রল করার সময় ব্রাউজারের ঠিকানা-বার লুকালে/দেখালে
   মেনুর নিচে যে ফাঁক দেখা যেত, সেটা মেনুর রঙেই ঢাকা থাকে; আলাদা লেয়ারে রাখায় কাঁপে না */
@media (max-width: 991px) {
    .footer_nav {
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .footer_nav::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 120px;
        background: var(--surface, #fff);
    }
}

/* কার্ডে দামের সীমা (ভ্যারিয়েন্ট) */
.nsh-price-range { white-space: nowrap; }

/* পণ্যের পাতায় ভ্যারিয়েন্ট বাছাই */
.nsh-vpick { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 14px; width: 100%; }
.nsh-vpick__name { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink-2, #374151); }
.nsh-vpick__name b { color: var(--ink, #111827); }
.nsh-vpick__vals { display: flex; flex-wrap: wrap; gap: 8px; }
.nsh-vpick__btn {
    min-width: 54px;
    padding: 8px 14px;
    border: 1.5px solid var(--line, #d1d5db);
    background: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink, #111827);
    line-height: 1.2;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nsh-vpick__btn:hover { border-color: var(--brand); }
.nsh-vpick__btn.is-on { border-color: var(--brand); background: var(--brand-tint, #fef2f2); color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb, 225, 29, 72), .15); }
.nsh-vpick__btn.is-out { color: #9ca3af; text-decoration: line-through; border-style: dashed; }
.nsh-vpick__btn.is-na { opacity: .35; }
.nsh-stock .fa-hand-pointer { color: var(--brand); }
.add_cart_btn:disabled, .order_now_btn:disabled { opacity: .5; cursor: not-allowed; }

/* ইনস্টল পপআপ — মোবাইলে নিচ থেকে ওঠে, বড় স্ক্রিনে মাঝখানে */
html.nsh-install-open { overflow: hidden; }
.nsh-install {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    animation: nshFade .2s ease;
}
.nsh-install[hidden] { display: none; }
.nsh-install__box {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 26px 22px calc(18px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    animation: nshUp .28s cubic-bezier(.2, .8, .2, 1);
}
.nsh-install__x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #9ca3af; }
.nsh-install__icon { width: 72px; height: 72px; object-fit: contain; border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); background: #fff; margin: -58px auto 12px; display: block; padding: 6px; }
.nsh-install h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: #111827; }
.nsh-install__text { color: #4b5563; font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.nsh-install__perks { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 16px; }
.nsh-install__perks li { font-size: 12.5px; font-weight: 600; color: #374151; background: #f3f4f6; border-radius: 999px; padding: 5px 10px; }
.nsh-install__perks i { color: var(--brand); margin-right: 3px; }
.nsh-install__go {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 8px 20px rgba(var(--brand-rgb, 225, 29, 72), .32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.nsh-install__later { border: 0; background: transparent; color: #6b7280; font-weight: 600; margin-top: 8px; padding: 8px 16px; }
@media (min-width: 768px) {
    .nsh-install { align-items: center; }
    .nsh-install__box { border-radius: 22px; padding-bottom: 20px; }
}
@keyframes nshUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nshFade { from { opacity: 0; } to { opacity: 1; } }
/* পপআপ খোলা থাকলে ইনস্টলের ধাপের জানালা তার উপরে */
.nsh-appmodal { z-index: 10060; }

/* কার্ট/চেকআউটে বাছাই করা ভ্যারিয়েন্ট */
.nsh-cart-variant { display: inline-block; margin: 2px 0 0; padding: 1px 8px; border-radius: 999px; background: var(--brand-tint, #fef2f2); color: var(--brand); font-size: 12px; font-weight: 700; }

/* ==========================================================================
   58. নবম রাউন্ড — অ্যাপ ইনস্টল বার, Hot Deal টাইমার, মোবাইলে অ্যাকাউন্ট, মেনু
   ========================================================================== */

/* অ্যাপ ইনস্টল — citypost-এর মতো নিচে ছোট বার */
.nsh-installbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* নিচের মেনুর উপরে */
    z-index: 10040;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 12px 12px 14px;
    background: #fff;
    border: 1px solid #eceef2;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .18);
    animation: nshUp .3s cubic-bezier(.2, .8, .2, 1);
}
.nsh-installbar[hidden] { display: none; }
.nsh-installbar__icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); padding: 3px; }
.nsh-installbar__text { flex: 1; min-width: 0; line-height: 1.3; }
.nsh-installbar__text strong { display: block; font-size: 15.5px; font-weight: 700; color: #111827; }
.nsh-installbar__text span { display: block; font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.nsh-installbar__go {
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    padding: 11px 20px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb, 225, 29, 72), .3);
}
.nsh-installbar__x { flex: 0 0 auto; border: 0; background: transparent; color: #9ca3af; font-size: 26px; line-height: 1; padding: 0 2px; }
@media (min-width: 992px) {
    .nsh-installbar { bottom: 22px; left: auto; right: 22px; }
}
@media (max-width: 380px) {
    .nsh-installbar__icon { display: none; }
    .nsh-installbar__go { padding: 10px 14px; }
}

/* Hot Deal-এর কাউন্টডাউন */
.nsh-dealtimer { display: inline-flex; gap: 6px; align-items: stretch; }
.nsh-dealtimer[hidden] { display: none; }
.nsh-dealtimer__cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 5px 8px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    line-height: 1.05;
    box-shadow: 0 3px 10px rgba(var(--brand-rgb, 225, 29, 72), .25);
}
.nsh-dealtimer__cell[hidden] { display: none; }
.nsh-dealtimer__cell b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nsh-dealtimer__cell small { font-size: 10px; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.hotdeals-page .nsh-dealtimer, .category-product ~ .nsh-dealtimer { margin: 6px 0 12px; }

/* মোবাইলে অ্যাকাউন্ট পাতা: আগে তথ্য, তার নিচে মেনুর টাইল */
@media (max-width: 767px) {
    .nsh-acct-home .row > .col-sm-3 { order: 2; }
    .nsh-acct-home .row > .col-sm-9 { order: 1; margin-bottom: 14px; }
}

/* মোবাইল মেনু: পুরনো নিয়ম (.mobile-menu .nsh-mnav ul {display:block !important}) সব সাবমেনু খুলে রাখত —
   তীর চাপলেও কিছু হতো না। এখন বন্ধ থাকে, তীর চাপলে খোলে */
.mobile-menu .nsh-mnav ul.nsh-mnav__sub[hidden] { display: none !important; }
.mobile-menu .nsh-mnav__toggle { min-width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* ডেস্কটপ মেনুর ড্রপডাউন — থিমের পুরনো নিয়ম (menu li = inline-block) ছোট নামগুলো পাশাপাশি বসাত; এখন সবসময় নিচে নিচে তালিকা */
.nsh-nav .nsh-nav__dropdown > .nsh-nav__item,
.nsh-nav .nsh-nav__dropdown > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.nsh-nav .nsh-nav__dropdown > .nsh-nav__item > .nsh-nav__link { display: flex !important; width: 100%; }
/* সাব-মেনুর লেখা একটু বড় (ডেস্কটপের ড্রপডাউন আর মোবাইলের সাব-তালিকা) */
.nsh-nav__dropdown .nsh-nav__link { font-size: 15px; font-weight: 550; padding: 10px 12px; }
.nsh-mnav__sub .nsh-mnav__link { font-size: 15px; font-weight: 550; padding: 10px 14px; }

/* অ্যাকাউন্ট পাতা, মোবাইল: "Hello, নাম" সবার উপরে → তথ্য → মেনুর টাইল */
.nsh-acct-hello { display: none; }
@media (max-width: 575.98px) {
    .nsh-acct-hello {
        display: grid;
        align-items: center;
        margin-bottom: 14px;
        background: var(--surface, #fff);
        border: 1px solid var(--line, #e5e7eb);
        border-radius: 12px;
        padding: 12px;
    }
    .nsh-acct-hello .customer-img img { width: 60px; height: 60px; object-fit: cover; }
    .nsh-acct-hello .customer-name p { margin: 0; }
    .nsh-acct-hello .customer-name p:last-child { font-size: 16px; font-weight: 700; color: var(--ink, #111827); }
    .nsh-acct-home .customer-sidebar .customer-auth { display: none; }
}
/* ৫৭৬–৭৬৭px-এ কলাম দুটো পাশাপাশি থাকে — সেখানে আগের ক্রম */
@media (min-width: 576px) and (max-width: 767px) {
    .nsh-acct-home .row > .col-sm-3, .nsh-acct-home .row > .col-sm-9 { order: 0; margin-bottom: 0; }
}
/* লগইন/রেজিস্ট্রেশন — সুবিধার বাক্স (মোবাইলে উপরে, ডেস্কটপে বাম পাশে) */
.nsh-auth-row { row-gap: 16px; align-items: flex-start; }
.nsh-benefits {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 24px 22px;
    background: linear-gradient(150deg, var(--brand-tint, #fdf2f8) 0%, #ffffff 70%);
    border: 1px solid rgba(var(--brand-rgb, 219, 39, 119), .18);
    box-shadow: 0 8px 26px rgba(17, 24, 39, .06);
}
.nsh-benefits::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(var(--brand-rgb, 219, 39, 119), .08);
}
.nsh-benefits__title { position: relative; font-size: 19px; font-weight: 800; line-height: 1.45; color: var(--ink, #111827); margin: 0 0 12px; }
.nsh-benefits__lead { font-size: 14px; font-weight: 700; color: var(--brand); margin: 0 0 10px; }
.nsh-benefits__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nsh-benefits__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 550; color: var(--ink-2, #374151); line-height: 1.45; }
.nsh-benefits__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 3px 10px rgba(17, 24, 39, .08);
    font-size: 18px;
    line-height: 1;
}
@media (min-width: 992px) {
    .nsh-benefits-col { position: sticky; top: 90px; }
    .nsh-benefits { padding: 30px 26px; }
    .nsh-benefits__title { font-size: 21px; }
}
@media (max-width: 575.98px) {
    .nsh-benefits { padding: 18px 16px; border-radius: 14px; }
    .nsh-benefits__title { font-size: 17px; }
    .nsh-benefits__list li { font-size: 14px; }
    .nsh-benefits__icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 16px; }
}
/* লগইন/রেজিস্ট্রেশন: ফর্মের বাক্স রিওয়ার্ডের বাক্সের সমান উচ্চতায় শুরু (থিমের .form-content {margin:25px 0} বাদ),
   আর ডেস্কটপে একটু আঁটসাঁট — Sign In বাটন স্ক্রল ছাড়াই দেখা যায় */
.nsh-auth-row .form-content { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 992px) {
    .auth-section:has(.nsh-auth-row) { padding-top: 26px; }
    .nsh-auth-row .form-content { padding: 22px 26px; }
    .nsh-auth-row .nsh-auth-new { padding: 11px 14px; margin-bottom: 12px; }
    .nsh-auth-row .nsh-auth-or { margin-bottom: 10px; }
    .nsh-auth-row .auth-title { padding: 8px 15px; margin-bottom: 6px; }
    .nsh-auth-row .form-content form label { margin-bottom: 6px; }
    .nsh-auth-row .form-content .form-group.mb-3 { margin-bottom: 12px !important; }
    .nsh-auth-row .form-content .form-control { min-height: 44px; }
}