/* ============================================================
   NájdiTermín — customer theme (redesign 2026)
   Replaces style.css / responsive.css / res_menu.css / font.css.
   Loads AFTER bootstrap.min.css and the widget CSS; every class is
   nt-prefixed because Bootstrap 3 owns .nav/.btn/.badge etc.
   Mobile-first; breakpoints at 640px and 960px.
   ============================================================ */

:root {
    --nt-ink: #17140F;
    --nt-ink-soft: #2A2620;
    --nt-ivory: #FAF7F0;
    --nt-sand: #F0E9DB;
    --nt-gold: #C9971C;
    --nt-gold-bright: #E6B31E;
    --nt-taupe: #8A8070;
    --nt-line: rgba(23, 20, 15, .12);
    --nt-radius: 18px;
    --nt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --nt-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nt-nav-h: 72px;
    --nt-tap: 44px;
}

/* ---------- base (overrides Bootstrap 3 defaults) ---------- */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body.nt-body {
    font-family: var(--nt-font-body);
    font-size: 16px;
    background: var(--nt-ivory);
    color: var(--nt-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    body.nt-body { overflow-x: hidden; }
}
.nt-body h1, .nt-body h2, .nt-body h3, .nt-body h4 {
    font-family: var(--nt-font-display);
    color: inherit;
}
.nt-body a {
    text-decoration: none;
}
.nt-body a:not(.nt-btn) {
    color: inherit;
}
.nt-body a:hover, .nt-body a:focus {
    text-decoration: none;
}
.nt-body a:not(.nt-btn):hover, .nt-body a:not(.nt-btn):focus {
    color: inherit;
}
.nt-body img {
    display: block;
    max-width: 100%;
    height: auto;
}
.nt-body :focus-visible {
    outline: 2px solid var(--nt-gold-bright);
    outline-offset: 3px;
    border-radius: 4px;
}
.nt-body input,
.nt-body select,
.nt-body textarea,
.nt-body button {
    font-family: inherit;
    font-size: 16px; /* ≥16px prevents iOS zoom-on-focus */
}
html.nt-lock, html.nt-lock body {
    overflow: hidden;
}

.nt-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.nt-eyebrow {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
}

/* skip link */
.nt-skip {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 200;
    background: var(--nt-ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
}
.nt-skip:focus {
    top: 12px;
    color: #fff;
}

/* ---------- buttons ---------- */
.nt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--nt-tap);
    padding: 10px 24px;
    border: 0;
    cursor: pointer;
    font-family: var(--nt-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 999px;
    transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.nt-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.nt-btn--gold {
    padding: 14px 30px;
    background: var(--nt-gold-bright);
    color: var(--nt-ink);
}
.nt-btn--gold:hover, .nt-btn--gold:focus {
    background: #f2c235;
    box-shadow: 0 8px 24px rgba(230, 179, 30, .35);
    color: var(--nt-ink);
}
.nt-btn--ghost {
    color: var(--nt-ink);
    border: 1px solid var(--nt-line);
    background: transparent;
}
.nt-btn--ghost:hover, .nt-btn--ghost:focus {
    border-color: var(--nt-ink);
    color: var(--nt-ink);
}
.nt-btn--ink {
    background: var(--nt-ink);
    color: #fff;
    font-size: 14px;
}
.nt-btn--ink:hover, .nt-btn--ink:focus {
    background: var(--nt-gold);
    color: var(--nt-ink);
}

/* ---------- nav ---------- */
.nt-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nt-ivory);
    border-bottom: 1px solid var(--nt-line);
}
.nt-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--nt-nav-h);
}
.nt-logo {
    font-family: var(--nt-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--nt-ink);
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
}
.nt-logo em {
    font-style: italic;
    color: var(--nt-gold);
}
.nt-logo:hover, .nt-logo:focus {
    color: var(--nt-ink);
}

.nt-nav__links {
    display: none;
}

.nt-nav__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nt-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nt-gold-bright);
    color: var(--nt-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* logged-in disclosure menu (desktop) */
.nt-menu {
    position: relative;
}
.nt-menu__list {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(23, 20, 15, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.nt-menu.is-open .nt-menu__list {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nt-menu__list a {
    display: flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--nt-ink);
}
.nt-menu__list a:hover, .nt-menu__list a:focus {
    background: var(--nt-sand);
    color: var(--nt-ink);
}

/* burger */
.nt-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: var(--nt-tap);
    height: var(--nt-tap);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.nt-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--nt-ink);
    transition: transform .22s, opacity .22s;
}
.nt-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nt-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nt-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* mobile panel */
.nt-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(23, 20, 15, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s, visibility .22s;
}
.nt-nav__backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.nt-nav__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 120;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--nt-ivory);
    color: var(--nt-ink);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .25);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
    overflow-y: auto;
    padding-bottom: 24px;
}
[dir="rtl"] .nt-nav__panel {
    transform: translateX(-100%);
}
.nt-nav__panel.is-open {
    transform: none;
    visibility: visible;
}
.nt-nav__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nt-nav-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--nt-line);
}
.nt-logo--panel {
    font-size: 19px;
}
.nt-panel-close {
    display: grid;
    place-items: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--nt-ink);
    cursor: pointer;
}
.nt-nav__panel-list {
    margin: 10px 0 0;
    padding: 0 12px;
    list-style: none;
}
.nt-nav__panel-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
}
.nt-nav__panel-list a:hover, .nt-nav__panel-list a:focus {
    background: var(--nt-sand);
}
.nt-nav__panel-foot {
    margin-top: auto;
    padding: 20px 20px 0;
    border-top: 1px solid var(--nt-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nt-nav__panel-foot .nt-btn {
    margin-bottom: 10px;
}
.nt-nav__panel-foot a:not(.nt-btn) {
    display: flex;
    align-items: center;
    min-height: var(--nt-tap);
    font-size: 14.5px;
    color: var(--nt-taupe);
}
/* vendor-login pointer — deliberately quiet, kept apart by a hairline
   so it doesn't read as a customer action (mobile menu only) */
.nt-nav__panel-foot .nt-nav__panel-vendor {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--nt-line);
    font-size: 13px;
    color: var(--nt-taupe);
}

/* overlay variant — transparent over a dark hero (home) */
.nt-nav--overlay {
    position: absolute;
    background: transparent;
    border-bottom: 0;
}
.nt-nav--overlay .nt-logo,
.nt-nav--overlay .nt-nav__links > a,
.nt-nav--overlay .nt-nav__cart {
    color: #fff;
}
.nt-nav--overlay .nt-logo em {
    color: var(--nt-gold-bright);
}
.nt-nav--overlay .nt-nav__links > a {
    color: rgba(255, 255, 255, .78);
}
.nt-nav--overlay .nt-nav__links > a:hover,
.nt-nav--overlay .nt-nav__links > a:focus {
    color: #fff;
}
.nt-nav--overlay .nt-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.nt-nav--overlay .nt-btn--ghost:hover,
.nt-nav--overlay .nt-btn--ghost:focus {
    border-color: #fff;
    color: #fff;
}
.nt-nav--overlay .nt-burger span {
    background: #fff;
}
.nt-nav--overlay .nt-menu__toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

/* ---------- hero ---------- */
.nt-hero {
    /* Full-bleed barbershop photo, hardcoded for now (no admin/DB banner
       wiring). background-color stays as the fallback while it loads. */
    background-color: var(--nt-ink);
    background-image: url("../../../admin/base/images/banner/46.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 130px 0 84px;
    position: relative;
    overflow: hidden;
}
.nt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Gold glows on top of an ink scrim. Below 960px the hero copy and
       chips span the full width, so the scrim stays near-uniform; .72 at
       the weak end keeps 14px white chips ≥4.5:1 over the photo's
       brightest spot (measured max L=.57). The ≥960px block fades the
       far side so the photo reads through. */
    background:
        radial-gradient(680px 340px at 82% 18%, rgba(230, 179, 30, .14), transparent 65%),
        radial-gradient(520px 300px at 8% 92%, rgba(230, 179, 30, .07), transparent 60%),
        linear-gradient(to right, rgba(23, 20, 15, .94), rgba(23, 20, 15, .80) 55%, rgba(23, 20, 15, .72));
}
html[dir="rtl"] .nt-hero::before {
    background:
        radial-gradient(680px 340px at 18% 18%, rgba(230, 179, 30, .14), transparent 65%),
        radial-gradient(520px 300px at 92% 92%, rgba(230, 179, 30, .07), transparent 60%),
        linear-gradient(to left, rgba(23, 20, 15, .94), rgba(23, 20, 15, .80) 55%, rgba(23, 20, 15, .72));
}
.nt-hero .nt-wrap {
    position: relative;
}
.nt-hero .nt-eyebrow {
    color: var(--nt-gold-bright);
    margin-bottom: 22px;
}
.nt-hero h1 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: clamp(38px, 9vw, 68px);
    line-height: 1.08;
    letter-spacing: -.01em;
    max-width: 15ch;
    margin: 0;
    color: #fff;
}
.nt-rot {
    display: inline-block;
    font-style: italic;
    color: var(--nt-gold-bright);
    border-bottom: 2px solid rgba(230, 179, 30, .4);
    min-width: 5.4ch;
}
.nt-rot span {
    display: inline-block;
    animation: nt-word-in .5s ease;
}
@keyframes nt-word-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.nt-hero .nt-lead {
    margin-top: 22px;
    font-size: 17px;
    color: rgba(255, 255, 255, .66);
    max-width: 46ch;
}

/* search pill */
.nt-search {
    margin-top: 40px;
    background: #fff;
    border-radius: 26px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-width: 760px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.nt-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    min-width: 0;
    min-height: var(--nt-tap);
}
.nt-search__field + .nt-search__field {
    border-top: 1px solid var(--nt-line);
}
.nt-search__field svg {
    flex: none;
    opacity: .45;
}
.nt-search input {
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 16px;
    width: 100%;
    color: var(--nt-ink);
    background: transparent;
    box-shadow: none;
    height: auto;
}
.nt-search input::placeholder {
    color: #9b9184;
}
.nt-search .nt-btn--gold {
    width: 100%;
}

/* category dropdown inside the search pill — the li class names
   (main_category / sub_category / bottom_location_drop / …) are legacy:
   the ported homepage jQuery toggles them, so they must not change. */
.nt-search__field--cat {
    position: relative;
}
.nt-catdrop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 60;
    min-height: 120px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(23, 20, 15, .18);
    overflow: hidden;
    text-align: initial;
}
.nt-catdrop ul {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}
.nt-catdrop .bottom_location_drop {
    width: 50%;
    border-inline-end: 1px solid var(--nt-line);
}
.nt-catdrop .sub_category_main {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 50%;
    max-height: none;
}
.nt-catdrop li {
    /* 11px pads + 14.5px/1.55 text ≈ 44px — keeps the ≥44px tap target */
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    color: var(--nt-ink);
}
.nt-catdrop li:hover,
.nt-catdrop li.highlightCat {
    background: var(--nt-sand);
}

/* jQuery UI autocomplete (category search) — the widget ships without
   its base stylesheet here, so give it the theme's look and keep its
   screen-reader live region actually hidden. */
.nt-body .ui-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.nt-body .ui-autocomplete {
    position: absolute;
    z-index: 130;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(23, 20, 15, .18);
    padding: 6px;
    margin: 0;
    list-style: none;
    font-family: var(--nt-font-body);
    font-size: 14.5px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}
.nt-body .ui-autocomplete .ui-menu-item {
    list-style: none;
    /* 11px pads + 14.5px/1.55 text ≈ 44px — keeps the ≥44px tap target */
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--nt-ink);
    border: 0;
    margin: 0;
    font-weight: 400;
}
.nt-body .ui-autocomplete .ui-menu-item:hover,
.nt-body .ui-autocomplete .ui-menu-item.ui-state-focus,
.nt-body .ui-autocomplete .ui-menu-item.ui-state-active {
    background: var(--nt-sand);
    font-weight: 400;
}
.nt-body .ui-autocomplete .ui-autocomplete-category {
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--nt-taupe);
    padding: 10px 12px 4px;
    cursor: default;
}

/* chips */
.nt-chips {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.nt-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    background: transparent;
}
.nt-chip:hover, .nt-chip:focus {
    border-color: var(--nt-gold-bright);
    color: var(--nt-gold-bright);
}

/* hero stats */
.nt-stats {
    margin-top: 48px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.nt-stat b {
    font-family: var(--nt-font-display);
    font-size: 30px;
    font-weight: 600;
    display: block;
    color: #fff;
}
.nt-stat span {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
}

/* ---------- sections ---------- */
.nt-section {
    padding: 64px 0;
}
.nt-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 36px;
}
.nt-sec-head .nt-eyebrow {
    color: var(--nt-gold);
    margin-bottom: 10px;
}
.nt-sec-head h2 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: clamp(26px, 5vw, 40px);
    letter-spacing: -.01em;
    margin: 0;
}
.nt-sec-head > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    font-weight: 600;
    font-size: 15px;
    color: var(--nt-gold);
    white-space: nowrap;
}
.nt-sec-head > a:hover, .nt-sec-head > a:focus {
    color: var(--nt-gold);
    text-decoration: underline;
}

/* category cards */
.nt-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.nt-cat {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 26px 14px 22px;
    text-align: center;
    cursor: pointer;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    color: var(--nt-ink);
}
.nt-cat:hover, .nt-cat:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(23, 20, 15, .10);
    border-color: transparent;
    color: var(--nt-ink);
}
.nt-cat__ic {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--nt-sand);
    display: grid;
    place-items: center;
    color: var(--nt-gold);
    transition: background .22s, color .22s;
}
.nt-cat:hover .nt-cat__ic, .nt-cat:focus .nt-cat__ic {
    background: var(--nt-ink);
    color: var(--nt-gold-bright);
}
.nt-cat b {
    font-size: 14.5px;
    font-weight: 600;
    display: block;
}
.nt-cat span {
    font-size: 12.5px;
    color: var(--nt-taupe);
}

/* salon cards */
.nt-salons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
.nt-card {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
    /* flex column so the CTA row can pin to the card bottom regardless of
       how much content (tags, wrapped address) sits above it; grid rows
       already stretch cards in a row to equal height */
    display: flex;
    flex-direction: column;
}
.nt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(23, 20, 15, .12);
}
.nt-card__ph {
    display: block;
    flex: none;
    height: 190px;
    position: relative;
    background: linear-gradient(135deg, #d8c39a, #a98a4e 60%, #6d5527);
    background-size: cover;
    background-position: center;
}
.nt-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: rgba(23, 20, 15, .82);
    color: var(--nt-gold-bright);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.nt-rating {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 14px;
    background: #fff;
    color: var(--nt-ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    gap: 5px;
    align-items: center;
}
.nt-rating svg {
    color: var(--nt-gold);
}
.nt-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.nt-card__body h3 {
    font-family: var(--nt-font-display);
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}
.nt-card__loc {
    font-size: 13.5px;
    color: var(--nt-taupe);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.nt-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 14px 0 6px; /* bottom gap now comes from .nt-card__cta padding */
}
.nt-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--nt-ink-soft);
    background: var(--nt-sand);
    padding: 5px 11px;
    border-radius: 999px;
}
.nt-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto; /* pin price + button row to the card bottom */
    padding-top: 12px;
}
.nt-card__from {
    font-size: 13px;
    color: var(--nt-taupe);
}
.nt-card__from b {
    color: var(--nt-ink);
    font-size: 15px;
}

/* how it works */
.nt-how {
    background: var(--nt-sand);
    border-radius: 32px;
    padding: 52px 0;
}
.nt-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.nt-step {
    background: #fff;
    border-radius: var(--nt-radius);
    padding: 34px 30px;
    position: relative;
}
.nt-step__num {
    font-family: var(--nt-font-display);
    font-style: italic;
    font-size: 52px;
    color: var(--nt-gold);
    line-height: 1;
    opacity: .9;
}
.nt-step h3 {
    font-family: var(--nt-font-body);
    font-size: 18px;
    font-weight: 600;
    margin: 16px 0 8px;
}
.nt-step p {
    font-size: 14.5px;
    color: var(--nt-taupe);
    margin: 0;
}

/* vendor CTA */
.nt-vendor {
    background: var(--nt-ink);
    color: #fff;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}
.nt-vendor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(560px 280px at 88% 30%, rgba(230, 179, 30, .16), transparent 65%);
}
.nt-vendor__inner {
    position: relative;
    padding: 56px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}
.nt-vendor h2 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: clamp(24px, 4.5vw, 38px);
    max-width: 18ch;
    letter-spacing: -.01em;
    margin: 0;
    color: #fff;
}
.nt-vendor h2 em {
    font-style: italic;
    color: var(--nt-gold-bright);
}
.nt-vendor p {
    color: rgba(255, 255, 255, .62);
    margin: 12px 0 0;
    max-width: 44ch;
    font-size: 15.5px;
}

/* ---------- forms (foundation for later phases) ---------- */
.nt-field {
    margin-bottom: 18px;
}
.nt-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--nt-ink-soft);
}
.nt-input,
.nt-textarea,
.nt-select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--nt-ink);
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    transition: border-color .18s, box-shadow .18s;
}
.nt-textarea {
    min-height: 120px;
    resize: vertical;
}
.nt-input:focus,
.nt-textarea:focus,
.nt-select:focus {
    outline: 0;
    border-color: var(--nt-gold);
    box-shadow: 0 0 0 3px rgba(201, 151, 28, .18);
}

/* ---------- footer ---------- */
.nt-footer {
    border-top: 1px solid var(--nt-line);
    padding: 44px 0 52px;
    color: var(--nt-taupe);
    font-size: 14px;
    background: var(--nt-ivory);
}
.nt-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.nt-logo--footer {
    font-size: 19px;
}
.nt-footer__about {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.nt-footer__copy {
    margin: 14px 0 0;
    font-size: 13px;
}
.nt-footer__recaptcha {
    margin: 6px 0 0;
    font-size: 11px;
    color: #999;
}
.nt-footer__recaptcha a {
    color: #999;
    text-decoration: underline;
}
.nt-footer__col h3 {
    font-family: var(--nt-font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nt-ink);
    margin: 0 0 14px;
}
.nt-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nt-footer__col ul a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 0;
    color: var(--nt-taupe);
}
.nt-footer__col ul a:hover, .nt-footer__col ul a:focus {
    color: var(--nt-ink);
}
.nt-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 18px !important;
}
.nt-footer__social a {
    display: grid;
    place-items: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    color: var(--nt-taupe);
    transition: color .18s, border-color .18s, background .18s;
}
.nt-footer__social a:hover, .nt-footer__social a:focus {
    color: var(--nt-ink);
    border-color: var(--nt-ink);
}

/* ============================================================
   Phase 3 — listing (store_list) + salon detail (store_info)
   Class names like label_check / drop_down_subc / subcategory_ul /
   common_item_bauty_comoon / info_active are LEGACY jQuery hooks the
   ported page scripts toggle — style them, never rename them.
   ============================================================ */

/* page head band (dark, compact hero for inner pages) */
.nt-pagehead {
    background: var(--nt-ink);
    color: #fff;
    padding: 40px 0 44px;
    position: relative;
    overflow: hidden;
}
.nt-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(560px 280px at 85% 10%, rgba(230, 179, 30, .13), transparent 65%);
}
.nt-pagehead .nt-wrap {
    position: relative;
}
.nt-pagehead h1 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: clamp(26px, 5vw, 38px);
    letter-spacing: -.01em;
    margin: 0;
    color: #fff;
}
.nt-pagehead .nt-search {
    margin-top: 22px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
}

/* breadcrumbs */
.nt-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}
.nt-crumbs li + li::before {
    content: "/";
    margin-inline-end: 6px;
    opacity: .5;
}
.nt-crumbs a:hover, .nt-crumbs a:focus {
    color: #fff;
    text-decoration: underline;
}

/* listing layout: filters + results */
.nt-listing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
.nt-filter-toggle {
    width: 100%;
}
/* mobile: hidden until #click_filter toggles it (legacy jQuery .toggle()
   sets inline display); ≥960 the sidebar is always visible. */
#responsive_open {
    display: none;
}
.nt-filter {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 20px;
}
.nt-filter h2 {
    font-family: var(--nt-font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nt-ink);
    margin: 22px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nt-filter h2:first-child {
    margin-top: 0;
}
.nt-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nt-filter__search {
    position: relative;
}
.nt-filter__search svg {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .45;
    pointer-events: none;
}
.nt-filter__search input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    padding-inline-start: 42px;
    font-size: 16px;
    color: var(--nt-ink);
    background: var(--nt-ivory);
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    box-shadow: none;
}
.nt-filter__search input:focus {
    outline: 0;
    border-color: var(--nt-gold);
    box-shadow: 0 0 0 3px rgba(201, 151, 28, .18);
}
.nt-filter__row {
    display: flex;
    align-items: center;
}
.nt-filter .label_check {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--nt-tap);
    margin: 0;
    padding: 2px 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--nt-ink);
    cursor: pointer;
}
.nt-filter .label_check p {
    display: inline;
    margin: 0;
    font-size: inherit;
}
.nt-filter input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--nt-gold);
    cursor: pointer;
}
/* legacy subcategory chevron: jQuery swaps .close/.open on it */
.nt-filter .drop_down_subc {
    flex: none;
    width: var(--nt-tap);
    height: var(--nt-tap);
    display: grid;
    place-items: center;
    float: none;
    cursor: pointer;
    border-radius: 10px;
    color: var(--nt-taupe);
}
.nt-filter .drop_down_subc:hover {
    background: var(--nt-sand);
    color: var(--nt-ink);
}
.nt-filter .drop_down_subc::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s;
}
.nt-filter .drop_down_subc.open::before {
    transform: rotate(225deg) translate(-2px, -2px);
}
.nt-filter .subcategory_ul {
    display: none;
    margin: 0 0 8px 9px;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--nt-sand);
}
.nt-filter .subcategory_ul .label_check {
    font-weight: 400;
}
.nt-filter__sort .sorting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--nt-tap);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--nt-ink-soft);
    cursor: pointer;
}
.nt-filter__sort li.active .sorting {
    color: var(--nt-gold);
    font-weight: 600;
}
.nt-filter #orderby a {
    display: inline-grid;
    place-items: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    border-radius: 10px;
    background: var(--nt-sand);
    color: var(--nt-ink);
    font-size: 14px;
}

/* empty state */
.nt-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--nt-taupe);
    background: #fff;
    border: 1px dashed var(--nt-line);
    border-radius: var(--nt-radius);
    font-size: 14.5px;
}
.nt-empty img {
    max-width: 110px;
    margin: 0 auto 14px;
    opacity: .75;
}

/* ajax loading overlay (#fadpage lost its legacy style.css skin) */
#fadpage {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(250, 247, 240, .65);
}
#fadpage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    border: 3px solid var(--nt-sand);
    border-top-color: var(--nt-gold);
    animation: nt-spin .8s linear infinite;
}
@keyframes nt-spin {
    to { transform: rotate(360deg); }
}

/* ---------- salon detail ---------- */
.nt-shero {
    position: relative;
    display: flex;
    background-color: var(--nt-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.nt-shero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 20, 15, .1) 20%, rgba(23, 20, 15, .78) 100%);
}
.nt-shero__wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    /* min-height, not height: a long salon name + address at 360px
       must grow the banner instead of spilling out of it */
    min-height: 240px;
    padding-top: 16px;
    padding-bottom: 20px;
}
.nt-shero .nt-crumbs {
    margin-bottom: 0;
}
.nt-shero__inner {
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.nt-shero h1 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: clamp(26px, 6vw, 42px);
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.nt-shero__sub {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.nt-srating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--nt-ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.nt-srating svg {
    color: var(--nt-gold);
    flex: none;
}
.nt-srating--sm {
    padding: 4px 10px;
    font-size: 13px;
    background: var(--nt-sand);
}

/* detail tabs — buttons carry legacy hook classes (nav_icons +
   menu_cl/reviews_cl/info_cl/coupons_cl); jQuery toggles .info_active */
.nt-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nt-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 8px 20px;
    border: 1px solid var(--nt-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--nt-font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--nt-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.nt-tab.info_active {
    background: var(--nt-ink);
    border-color: var(--nt-ink);
    color: #fff;
}

/* two-column detail body */
.nt-salon {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

/* service groups + service cards (booking hooks preserved on buttons) */
.nt-sgroup h2 {
    font-family: var(--nt-font-display);
    font-weight: 500;
    font-size: 22px;
    margin: 30px 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--nt-gold-bright);
}
.nt-sgroup:first-child h2 {
    margin-top: 0;
}
.nt-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nt-service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 14px 16px;
    min-width: 0;
}
.nt-service__img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--nt-sand);
}
.nt-service__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nt-service__body {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.nt-service__body h3 {
    font-family: var(--nt-font-body);
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-service__desc {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--nt-taupe);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nt-service__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--nt-ink-soft);
}
/* mobile: CTA drops to its own full-width row under the text */
.nt-service__cta {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Bootstrap sets .input-group-btn{width:1%} which collapses the legacy
   wrapper span around the book button — size it to content instead. */
.nt-service__cta .input-group-btn {
    width: auto !important;
    display: inline-block;
    font-size: inherit;
}
.nt-service__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--nt-ink);
    white-space: nowrap;
}
.nt-service__price .strike_text {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nt-taupe);
    text-decoration: line-through;
}
.nt-service__price label {
    margin: 0;
    font-weight: inherit;
    display: inline;
}
.nt-sbtn.is-booked {
    background: var(--nt-sand);
    color: var(--nt-taupe);
    cursor: default;
}

/* aside cards */
.nt-acard {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 20px;
    margin-bottom: 16px;
}
.nt-acard h3 {
    font-family: var(--nt-font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nt-ink);
    margin: 0 0 14px;
}
.nt-arow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--nt-ink-soft);
}
.nt-arow i {
    color: var(--nt-gold);
    margin-top: 3px;
}
.nt-arow a {
    min-height: var(--nt-tap);
    display: inline-flex;
    align-items: center;
}
.nt-hours {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13.5px;
    color: var(--nt-ink-soft);
}
.nt-hours b {
    font-weight: 500;
    color: var(--nt-ink);
}
.nt-note {
    background: var(--nt-sand);
    border-inline-start: 3px solid var(--nt-gold-bright);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}
.nt-note b {
    display: block;
    margin-bottom: 4px;
}
.nt-note a {
    font-size: 16.5px;
    font-weight: 700;
    min-height: var(--nt-tap);
    display: inline-flex;
    align-items: center;
}
.nt-ascore {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nt-ascore b {
    font-family: var(--nt-font-display);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}
.nt-ascore span {
    font-size: 12.5px;
    color: var(--nt-taupe);
}
/* policies accordion keeps Bootstrap panel hooks (.accordion-toggle /
   .panel-child) — restyle only */
.nt-acard .panel-group {
    margin: 0;
}
.nt-acard .panel {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 0 8px;
}
.nt-acard .panel-heading {
    padding: 0;
    background: transparent;
    border: 0;
}
.nt-acard .panel-title {
    margin: 0;
    font-size: inherit;
}
.nt-acard .accordion-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--nt-tap);
    padding: 10px 14px;
    background: var(--nt-sand);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nt-ink);
    cursor: pointer;
}
.nt-acard .accordion-toggle .glyphicon {
    color: var(--nt-gold);
    font-size: 11px;
}
.nt-acard .panel-body {
    border: 0;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--nt-ink-soft);
}

/* reviews */
.nt-review {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.nt-review__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--nt-sand);
}
.nt-review__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nt-review__body {
    flex: 1;
    min-width: 0;
}
.nt-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.nt-review__name {
    font-weight: 600;
    font-size: 14.5px;
}
.nt-review__date {
    font-size: 12.5px;
    color: var(--nt-taupe);
}
.nt-review p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--nt-ink-soft);
    overflow-wrap: anywhere;
}

/* info tab */
.nt-infogrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
#googleMap {
    border-radius: var(--nt-radius);
    overflow: hidden;
}
.nt-social ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.nt-social a {
    display: grid;
    place-items: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    color: var(--nt-taupe);
}
.nt-social a:hover, .nt-social a:focus {
    color: var(--nt-ink);
    border-color: var(--nt-ink);
}

/* offers/coupons */
.nt-offers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.nt-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 14px;
    width: 100%;
    text-align: initial;
    cursor: pointer;
}
.nt-offer img {
    flex: none;
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--nt-sand);
}
.nt-offer b {
    display: block;
    font-size: 15px;
}
.nt-offer p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--nt-taupe);
}

/* ---------- reveal (gated: html.nt-anim is set by customer.js only
   when IntersectionObserver exists and reduced motion is off) ---------- */
html.nt-anim .nt-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
html.nt-anim .nt-rv.on {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .nt-rot span {
        animation: none;
    }
    .nt-btn:hover, .nt-card:hover, .nt-cat:hover, .nt-cat:focus {
        transform: none;
    }
    .nt-nav__panel, .nt-nav__backdrop, .nt-menu__list {
        transition: none;
    }
}

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
    .nt-wrap {
        padding: 0 24px;
    }
    .nt-section {
        padding: 80px 0;
    }
    .nt-hero .nt-lead {
        font-size: 18px;
    }
    .nt-search {
        flex-direction: row;
        align-items: center;
        border-radius: 999px;
        padding: 8px;
    }
    .nt-search__field {
        padding: 10px 22px;
    }
    .nt-search__field + .nt-search__field {
        border-top: 0;
        border-inline-start: 1px solid var(--nt-line);
    }
    .nt-search .nt-btn--gold {
        width: auto;
    }
    .nt-stats {
        gap: 56px;
        margin-top: 56px;
    }
    .nt-cats {
        grid-template-columns: repeat(3, 1fr);
    }
    .nt-salons {
        grid-template-columns: repeat(2, 1fr);
    }
    .nt-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    .nt-how {
        padding: 72px 0;
    }
    .nt-vendor__inner {
        padding: 64px 44px;
    }
    .nt-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nt-footer__brand {
        grid-column: 1 / -1;
        max-width: 52ch;
    }
    /* phase 3 */
    .nt-shero__wrap {
        min-height: 300px;
    }
    .nt-service__cta {
        flex: none;
        flex-direction: column;
        align-items: flex-end;
        text-align: end;
        gap: 8px;
    }
    .nt-offers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- ≥960px (desktop nav) ---------- */
@media (min-width: 960px) {
    .nt-section {
        padding: 92px 0;
    }
    .nt-hero {
        padding: 170px 0 120px;
    }
    /* Desktop keeps headline/pill/chips in the start ~73% (checked at
       960px: chips end near x=700 where the fade is still ≈.43 → 14px
       white stays ≥4.5:1); the far edge shows the photo almost clean. */
    .nt-hero::before {
        background:
            radial-gradient(680px 340px at 82% 18%, rgba(230, 179, 30, .14), transparent 65%),
            radial-gradient(520px 300px at 8% 92%, rgba(230, 179, 30, .07), transparent 60%),
            linear-gradient(to right, rgba(23, 20, 15, .95), rgba(23, 20, 15, .84) 40%, rgba(23, 20, 15, .40) 75%, rgba(23, 20, 15, .18));
    }
    html[dir="rtl"] .nt-hero::before {
        background:
            radial-gradient(680px 340px at 18% 18%, rgba(230, 179, 30, .14), transparent 65%),
            radial-gradient(520px 300px at 92% 92%, rgba(230, 179, 30, .07), transparent 60%),
            linear-gradient(to left, rgba(23, 20, 15, .95), rgba(23, 20, 15, .84) 40%, rgba(23, 20, 15, .40) 75%, rgba(23, 20, 15, .18));
    }
    .nt-nav__links {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .nt-nav__links > a {
        display: inline-flex;
        align-items: center;
        min-height: var(--nt-tap);
        padding: 10px 13px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--nt-ink-soft);
        transition: color .2s;
    }
    .nt-nav__links > a:hover, .nt-nav__links > a:focus {
        color: var(--nt-ink);
    }
    .nt-nav__links .nt-btn {
        margin-inline-start: 10px;
    }
    .nt-burger,
    .nt-nav__panel,
    .nt-nav__backdrop {
        display: none;
    }
    .nt-nav__cart-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .nt-cats {
        grid-template-columns: repeat(6, 1fr);
    }
    .nt-salons {
        grid-template-columns: repeat(3, 1fr);
    }
    .nt-vendor__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 44px;
        padding: 76px 64px;
    }
    .nt-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
    }
    .nt-footer__brand {
        grid-column: auto;
    }
    /* phase 3 */
    .nt-listing {
        grid-template-columns: 280px 1fr;
    }
    .nt-filter-toggle {
        display: none;
    }
    #responsive_open {
        display: block !important;
    }
    .nt-salon {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
    .nt-infogrid {
        grid-template-columns: 1fr 1.4fr;
    }
}

/* ============================================================
   PHASE 4 — auth modals, account area, checkout, content pages
   ============================================================ */

/* ---------- page shell (below .nt-pagehead) ---------- */
.nt-page {
    padding: 36px 0 72px;
}

/* ---------- panels (white cards on ivory) ---------- */
.nt-panel {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 22px 20px;
}
.nt-panel + .nt-panel {
    margin-top: 20px;
}
.nt-panel__title {
    font-family: var(--nt-font-display);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 18px;
}
.nt-panel__title small {
    display: block;
    font-family: var(--nt-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--nt-taupe);
    margin-top: 4px;
}

/* ---------- form grid ---------- */
.nt-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 18px;
}
.nt-field--full {
    grid-column: 1 / -1;
}
.nt-field .help-block,
.nt-field-error,
.nt-modal .help-block {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #a4321f;
}
.nt-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--nt-tap);
    font-size: 14.5px;
    cursor: pointer;
}
.nt-check input[type="checkbox"],
.nt-check input[type="radio"],
.nt-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--nt-gold);
}
.nt-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* ---------- alerts (session flashes, ajax messages) ---------- */
.nt-alert {
    border-radius: 12px;
    padding: 13px 16px;
    margin: 0 0 18px;
    font-size: 14.5px;
    background: var(--nt-sand);
    border: 1px solid var(--nt-line);
}
.nt-alert--ok {
    background: #edf5ea;
    border-color: rgba(63, 111, 51, .25);
    color: #33562a;
}
.nt-alert--err {
    background: #f9ece8;
    border-color: rgba(164, 50, 31, .25);
    color: #86301d;
}

/* ---------- standalone auth pages ---------- */
.nt-auth {
    max-width: 470px;
    margin: 0 auto;
}
.nt-auth .nt-panel {
    padding: 28px 22px;
}
.nt-auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.nt-auth h1 {
    font-family: var(--nt-font-display);
    font-size: 27px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 22px;
}
.nt-auth__links {
    text-align: center;
    margin-top: 18px;
    font-size: 14.5px;
}
.nt-auth__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 0 8px;
    font-weight: 600;
    color: var(--nt-gold);
}
.nt-auth__links a:hover, .nt-auth__links a:focus {
    color: var(--nt-ink);
}

/* ---------- account area (sidebar + content) ---------- */
.nt-account {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
.nt-side {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 10px;
}
.nt-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nt-side a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--nt-tap);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--nt-ink-soft);
    transition: background .18s, color .18s;
}
.nt-side a:hover, .nt-side a:focus {
    background: var(--nt-sand);
    color: var(--nt-ink);
    text-decoration: none;
}
.nt-side li.active a, .nt-side a.active {
    background: var(--nt-ink);
    color: var(--nt-gold-bright);
}
.nt-side svg, .nt-side i {
    flex: none;
    width: 18px;
    text-align: center;
    color: var(--nt-gold);
}
.nt-side li.active i, .nt-side li.active svg {
    color: var(--nt-gold-bright);
}

/* ---------- item rows (cards on file, addresses, favourites) ---------- */
.nt-rowcard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 16px 18px;
}
.nt-rowcard + .nt-rowcard {
    margin-top: 12px;
}
.nt-rowcard__main {
    min-width: 0;
    flex: 1 1 220px;
}
.nt-rowcard__main b {
    display: block;
    font-size: 15.5px;
}
.nt-rowcard__main p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nt-taupe);
    overflow-wrap: anywhere;
}
.nt-rowcard__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.nt-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    border-radius: 12px;
    border: 1px solid var(--nt-line);
    background: #fff;
    color: var(--nt-ink-soft);
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.nt-iconbtn:hover, .nt-iconbtn:focus {
    border-color: var(--nt-ink);
    color: var(--nt-ink);
    text-decoration: none;
}
.nt-iconbtn--danger:hover, .nt-iconbtn--danger:focus {
    border-color: #a4321f;
    color: #a4321f;
}

/* ---------- tables (orders etc.) ---------- */
.nt-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
}
.nt-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.nt-table th {
    text-align: start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nt-taupe);
    padding: 14px 16px;
    border-bottom: 1px solid var(--nt-line);
    white-space: nowrap;
}
.nt-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--nt-line);
    vertical-align: middle;
}
.nt-table tr:last-child td {
    border-bottom: 0;
}
.nt-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--nt-sand);
    color: var(--nt-ink-soft);
    white-space: nowrap;
}
.nt-status--ok {
    background: #edf5ea;
    color: #33562a;
}
.nt-status--warn {
    background: #fdf3d7;
    color: #7a5b10;
}
.nt-status--err {
    background: #f9ece8;
    color: #86301d;
}

/* ---------- summary rows (cart / checkout / order totals) ---------- */
.nt-summary {
    margin: 0;
}
.nt-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 14.5px;
    border-bottom: 1px dashed var(--nt-line);
}
.nt-summary__row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}
.nt-summary__row--total {
    border-bottom: 0;
    border-top: 2px solid var(--nt-ink);
    margin-top: 6px;
    padding-top: 14px;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- prose (cms, blog body, job descriptions) ---------- */
.nt-prose {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--nt-ink-soft);
    max-width: 76ch;
}
.nt-prose h1, .nt-prose h2, .nt-prose h3, .nt-prose h4 {
    font-family: var(--nt-font-display);
    color: var(--nt-ink);
    line-height: 1.25;
    margin: 1.6em 0 .6em;
}
.nt-prose h1 { font-size: 30px; margin-top: 0; }
.nt-prose h2 { font-size: 24px; }
.nt-prose h3 { font-size: 19px; }
.nt-prose p { margin: 0 0 1em; }
.nt-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nt-radius);
}
.nt-prose a {
    color: var(--nt-gold);
    font-weight: 600;
    text-decoration: underline;
}
.nt-prose a:hover, .nt-prose a:focus {
    color: var(--nt-ink);
}
.nt-prose ul, .nt-prose ol {
    padding-inline-start: 22px;
    margin: 0 0 1em;
}
.nt-prose table {
    max-width: 100%;
}
.nt-prose iframe {
    max-width: 100%;
}

/* ---------- article cards (blog / portfolio listings) ---------- */
.nt-articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.nt-article-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.nt-article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(23, 20, 15, .10);
}
.nt-article-card__ph {
    aspect-ratio: 16 / 9;
    background: var(--nt-sand);
}
.nt-article-card__ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nt-article-card__body {
    padding: 18px 20px 22px;
}
.nt-article-card__body h3 {
    font-family: var(--nt-font-display);
    font-size: 19px;
    margin: 0 0 8px;
}
.nt-article-card__body h3 a {
    color: var(--nt-ink);
}
.nt-article-card__body p {
    margin: 0;
    font-size: 14px;
    color: var(--nt-taupe);
    line-height: 1.6;
}
.nt-article-card__meta {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nt-taupe);
    margin-bottom: 8px;
    display: block;
}

/* ---------- bootstrap-3 modal reskin (.nt-modal on .modal) ---------- */
.nt-modal .modal-content {
    border: 0;
    border-radius: var(--nt-radius);
    background: var(--nt-ivory);
    box-shadow: 0 24px 80px rgba(23, 20, 15, .30);
}
.nt-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 18px 22px 0;
}
.nt-modal .modal-header .close {
    order: 2;
    float: none;
    width: var(--nt-tap);
    height: var(--nt-tap);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    background: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--nt-ink);
    text-shadow: none;
    opacity: 1;
    transition: border-color .18s;
}
.nt-modal .modal-header .close:hover,
.nt-modal .modal-header .close:focus {
    border-color: var(--nt-ink);
    opacity: 1;
}
.nt-modal .modal-body {
    padding: 10px 22px 26px;
}
.nt-modal__brand {
    font-size: 20px;
    min-height: 0;
}
.nt-modal h2 {
    font-family: var(--nt-font-display);
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.25;
}
.nt-modal .bottom_border {
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--nt-gold-bright);
    margin-top: 10px;
}
.nt-modal .form-group {
    margin-bottom: 14px;
}
.nt-modal .form-control,
.nt-modal input.form-control,
.nt-modal select.form-control,
.nt-modal textarea.form-control {
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--nt-ink);
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.nt-modal .form-control:focus {
    outline: 0;
    border-color: var(--nt-gold);
    box-shadow: 0 0 0 3px rgba(201, 151, 28, .18);
}
.nt-modal label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nt-ink-soft);
}
.nt-modal .sign_up,
.nt-modal .forgout_pass {
    font-size: 14.5px;
    color: var(--nt-taupe);
}
.nt-modal .sign_up a,
.nt-modal .forgout_pass a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 0 4px;
    font-weight: 600;
    color: var(--nt-gold);
}
.nt-modal .sign_up a:hover, .nt-modal .sign_up a:focus,
.nt-modal .forgout_pass a:hover, .nt-modal .forgout_pass a:focus {
    color: var(--nt-ink);
}

/* ---------- phase-4 responsive ---------- */
@media (min-width: 640px) {
    .nt-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .nt-panel {
        padding: 26px 28px;
    }
    .nt-auth .nt-panel {
        padding: 34px 36px;
    }
    .nt-articles {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 880px) {
    .nt-account {
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 28px;
    }
    .nt-side {
        position: sticky;
        top: calc(var(--nt-nav-h) + 16px);
    }
}
@media (min-width: 960px) {
    .nt-articles {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* auth: clearfix for floated Bootstrap col-* rows kept inside the reskinned
   auth modals (login/signup/forgot/store-register) — the legacy .sign_up_inner
   wrapper that used to contain the floats is gone and old theme CSS is not
   loaded, so without this the floated columns collapse the modal body. */
.nt-modal .modal-body::after,
.nt-modal .modal-body form::after {
    content: "";
    display: table;
    clear: both;
}

/* auth: intro line inside the auth card (register page "Already have
   account? Sign in" above the form). */
.nt-auth__sub {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--nt-taupe);
    text-align: center;
}
.nt-auth__sub a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding-inline: 4px;
    font-weight: 600;
    color: var(--nt-gold);
}
.nt-auth__sub a:hover,
.nt-auth__sub a:focus {
    color: var(--nt-ink);
}

/* auth: centered submit block (register page button + terms fine print). */
.nt-form-actions--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* auth: fine print under the sign-up button (terms note). */
.nt-fineprint {
    margin: 0;
    font-size: 12.5px;
    color: var(--nt-taupe);
}
.nt-fineprint a {
    color: var(--nt-gold);
    text-decoration: underline;
}
.nt-fineprint a:hover,
.nt-fineprint a:focus {
    color: var(--nt-ink);
}

/* auth: password strength meter on /register. Class names .pw-strength /
   .pw-hint are wired to the page's inline JS (querySelector('.pw-strength'),
   data-level attribute) so they keep their legacy names; the visual styles
   moved here from the removed per-page <style> block, recolored to tokens. */
.pw-strength {
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--nt-sand);
    overflow: hidden;
}
.pw-strength > div {
    height: 100%;
    width: 0;
    transition: width .15s, background-color .15s;
    background: #a4321f;
}
.pw-strength[data-level="1"] > div { width: 33%; background: #a4321f; }
.pw-strength[data-level="2"] > div { width: 66%; background: var(--nt-gold-bright); }
.pw-strength[data-level="3"] > div { width: 100%; background: #3f6f33; }
.pw-hint {
    font-size: 12px;
    color: var(--nt-taupe);
    margin-top: 4px;
    min-height: 16px;
}
/* account: main column must be able to shrink inside the .nt-account grid
   so .nt-tablewrap can scroll instead of widening the page */
.nt-account__main {
    min-width: 0;
}

/* account: sidebar user block (avatar upload + name/email) — profile_sidebar.blade.php.
   #imageform/#photoimg stay in the DOM for the front.min.js upload flow but are
   invisible; clicking the avatar (#preview) opens the hidden file picker. */
.nt-side__user {
    text-align: center;
    padding: 18px 14px 16px;
    border-bottom: 1px solid var(--nt-line);
    margin-bottom: 10px;
}
.nt-side__user form {
    display: none;
}
.nt-side__avatar {
    display: inline-block;
}
.nt-side__avatar a {
    position: relative;
    display: inline-block;
    width: 84px;
    height: 84px;
    /* neutralize the .nt-side a nav-row padding/min-height — with
       border-box it squeezed the 84px img into a 56×64 oval */
    padding: 0;
    min-height: 0;
    border-radius: 50%;
}
.nt-side__avatar img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--nt-gold);
    background: var(--nt-sand);
    display: block;
}
.nt-side__avatar-edit {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nt-ink);
    color: var(--nt-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.nt-side__user h2 {
    font-family: var(--nt-font-display);
    font-size: 18px;
    font-weight: 600;
    margin: 12px 0 2px;
    overflow-wrap: anywhere;
}
.nt-side__user p {
    margin: 0;
    font-size: 13px;
    color: var(--nt-taupe);
    overflow-wrap: anywhere;
}

/* account: legacy utility used by edit_profile (tips field) and orders_info
   (subtotal row, invoice link) — old style.css is gone, so redefine it */
.nt-account .hide-this {
    display: none !important;
}

/* account: order-status filter pills (orders.blade.php).
   .status-filter + .activebutton are legacy JS hooks; only skinned here. */
.nt-ordfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.nt-ordfilter .status-filter {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 8px 16px;
    border: 1px solid var(--nt-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--nt-ink-soft);
    transition: border-color .18s, background .18s, color .18s;
}
.nt-ordfilter .status-filter:hover,
.nt-ordfilter .status-filter:focus {
    border-color: var(--nt-ink);
    color: var(--nt-ink);
    text-decoration: none;
}
.nt-ordfilter .status-filter.activebutton {
    background: var(--nt-ink);
    border-color: var(--nt-ink);
    color: var(--nt-gold-bright);
}

/* account: bootstrap pagination recolor to theme tokens (orders.blade.php) */
.nt-pagi {
    text-align: center;
    margin-top: 22px;
}
.nt-pagi .pagination > li > a,
.nt-pagi .pagination > li > span {
    color: var(--nt-ink-soft);
    border-color: var(--nt-line);
    min-width: var(--nt-tap);
    min-height: 40px;
    padding: 9px 14px;
}
.nt-pagi .pagination > li > a:hover,
.nt-pagi .pagination > li > a:focus {
    color: var(--nt-ink);
    background: var(--nt-sand);
    border-color: var(--nt-line);
}
.nt-pagi .pagination > .active > a,
.nt-pagi .pagination > .active > a:focus,
.nt-pagi .pagination > .active > a:hover,
.nt-pagi .pagination > .active > span,
.nt-pagi .pagination > .active > span:focus,
.nt-pagi .pagination > .active > span:hover {
    background-color: var(--nt-ink);
    border-color: var(--nt-ink);
    color: var(--nt-gold-bright);
}

/* account: favourites reuse .nt-card, but with a real <img> in the photo slot
   (legacy markup keeps the ?t cache-busted <img> for the API-driven images) */
.nt-card__ph--img {
    overflow: hidden;
}
.nt-card__ph--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* account: salon header on the order-detail page (orders_info.blade.php) */
.nt-ordershop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}
.nt-ordershop > img {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    object-fit: cover;
    background: var(--nt-sand);
    flex: none;
}
.nt-ordershop__info {
    flex: 1 1 200px;
    min-width: 0;
}
.nt-ordershop__info b {
    display: block;
    font-family: var(--nt-font-display);
    font-size: 19px;
    font-weight: 600;
}
.nt-ordershop__info p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nt-taupe);
    overflow-wrap: anywhere;
}
.nt-ordershop__meta {
    flex: 1 1 100%;
    border-top: 1px solid var(--nt-line);
    padding-top: 6px;
}
/* static: CMS/blog rich text — tables and embeds must scroll inside the
   prose column instead of forcing horizontal page scroll at 360px.
   (customer.css only caps max-width, which a wide colspan table ignores.) */
.nt-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.nt-prose td, .nt-prose th {
    border: 1px solid var(--nt-line);
    padding: 8px 10px;
}
.nt-prose iframe {
    width: 100%;
    border: 0;
    border-radius: var(--nt-radius);
}

/* static: laravel/bootstrap paginator reskin (blog listing). Wrapper keeps
   rules scoped so the admin/vendor themes are untouched. */
.nt-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.nt-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0;
    box-shadow: none;
}
.nt-pagination .pagination > li > a,
.nt-pagination .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--nt-tap);
    min-height: var(--nt-tap);
    padding: 0 12px;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    background: #fff;
    color: var(--nt-ink);
    font-size: 14.5px;
    float: none;
    margin: 0;
}
.nt-pagination .pagination > li > a:hover,
.nt-pagination .pagination > li > a:focus {
    border-color: var(--nt-gold);
    color: var(--nt-gold);
    background: #fff;
}
.nt-pagination .pagination > .active > a,
.nt-pagination .pagination > .active > span,
.nt-pagination .pagination > .active > a:hover,
.nt-pagination .pagination > .active > span:hover,
.nt-pagination .pagination > .active > a:focus,
.nt-pagination .pagination > .active > span:focus {
    background: var(--nt-gold-bright);
    border-color: var(--nt-gold-bright);
    color: var(--nt-ink);
}
.nt-pagination .pagination > .disabled > span,
.nt-pagination .pagination > .disabled > a {
    color: var(--nt-taupe);
    background: transparent;
}

/* static: pill filter links on light pages (blog/portfolio category nav).
   .nt-chip in customer.css is the dark-hero variant, hence this one. */
.nt-filterchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nt-filterchips a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--nt-line);
    background: #fff;
    color: var(--nt-ink-soft);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s, color .2s;
}
.nt-filterchips a:hover,
.nt-filterchips a:focus {
    border-color: var(--nt-gold);
    color: var(--nt-gold);
}
.nt-filterchips li.active a {
    background: var(--nt-ink);
    border-color: var(--nt-ink);
    color: var(--nt-gold-bright);
}

/* static: compact inline search (blog keyword box, pagehead) */
.nt-minisearch {
    display: flex;
    gap: 8px;
    max-width: 420px;
}
.nt-minisearch input {
    flex: 1;
    min-width: 0;
    min-height: var(--nt-tap);
    font-size: 16px;
    padding: 8px 14px;
    border: 1px solid var(--nt-line);
    border-radius: 12px;
    background: #fff;
    color: var(--nt-ink);
}
.nt-minisearch input:focus {
    outline: 2px solid var(--nt-gold-bright);
    outline-offset: 1px;
}

/* static: embedded google map container */
.nt-map {
    border-radius: var(--nt-radius);
    overflow: hidden;
    border: 1px solid var(--nt-line);
    background: var(--nt-sand);
}

/* static: light-page stat blocks (weare-hiring) — .nt-stats in customer.css
   is the white-on-dark hero variant. */
.nt-statgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.nt-statgrid .nt-statcard {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 22px 24px;
}
.nt-statgrid .nt-statcard b {
    font-family: var(--nt-font-display);
    font-size: 30px;
    font-weight: 600;
    display: block;
    color: var(--nt-gold);
    margin-bottom: 4px;
}
.nt-statgrid .nt-statcard p {
    margin: 0;
    color: var(--nt-ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
}
@media (min-width: 640px) {
    .nt-statgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* static: two-column page layout — main content + aside (job listing/detail).
   Mobile-first: single column, aside drops below content. */
.nt-maingrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}
@media (min-width: 880px) {
    .nt-maingrid {
        grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    }
}

/* static: job list rows. Markup comes from job_list_helper() (PHP helper,
   legacy .col-* / .job_list_img / .job_list_info classes) and is re-injected
   by AJAX (#dynamic-jobs), so it cannot be rewritten — restyle in place. */
.nt-joblist ul,
ul.nt-joblist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nt-joblist li {
    margin-bottom: 14px;
}
.nt-joblist li > a {
    display: flow-root; /* contain the floated bootstrap cols */
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 16px;
    color: var(--nt-ink);
    transition: border-color .2s, box-shadow .2s;
}
.nt-joblist li > a:hover,
.nt-joblist li > a:focus {
    border-color: var(--nt-gold);
    box-shadow: 0 10px 26px rgba(23, 20, 15, .08);
}
.nt-joblist .job_list_img img {
    max-width: 96px;
    max-height: 96px;
    border-radius: 12px;
    object-fit: cover;
}
.nt-joblist .job_list_info h2 {
    font-family: var(--nt-font-display);
    font-size: 18px;
    margin: 8px 0 4px;
}
.nt-joblist .job_list_info h2 span {
    color: var(--nt-gold);
}
.nt-joblist .job_list_info address {
    font-style: normal;
    font-size: 13.5px;
    color: var(--nt-taupe);
    margin: 0 0 4px;
}
.nt-joblist .job_list_info address i {
    color: var(--nt-gold);
    margin-inline-end: 4px;
}

/* static: featured-salon aside cards (job pages). Legacy .common_item markup
   kept for parity with the rateit plugin; skinned under .nt-aside. */
.nt-aside .common_item {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 14px;
    margin-bottom: 14px;
    text-align: center;
}
.nt-aside .store_itm_img img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 12px;
}
.nt-aside .store_itm_desc a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nt-tap);
    font-weight: 600;
    color: var(--nt-ink);
}
.nt-aside .store_itm_desc a:hover,
.nt-aside .store_itm_desc a:focus {
    color: var(--nt-gold);
}
.nt-aside .are_looking_for {
    background: var(--nt-sand);
    border-radius: var(--nt-radius);
    padding: 22px 18px;
    text-align: center;
}
.nt-aside .are_looking_for p {
    font-family: var(--nt-font-display);
    font-size: 17px;
    margin: 0 0 14px;
}

/* static: share-link rows (blog/job detail) */
.nt-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.nt-share p, .nt-share label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    margin-inline-end: 6px;
}
.nt-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nt-tap);
    height: var(--nt-tap);
    border-radius: 999px;
    border: 1px solid var(--nt-line);
    background: #fff;
    color: var(--nt-ink-soft);
    transition: border-color .2s, color .2s;
}
.nt-share a:hover, .nt-share a:focus {
    border-color: var(--nt-gold);
    color: var(--nt-gold);
}

/* static: author byline row on blog detail */
.nt-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.nt-byline img {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
}
.nt-byline h3 {
    margin: 0;
    font-size: 16px;
    font-family: var(--nt-font-display);
}
.nt-byline h4 {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--nt-taupe);
}
.nt-byline .nt-share {
    margin-inline-start: auto;
}

/* static: full-width article hero image (blog detail) */
.nt-articlehero img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--nt-radius);
    display: block;
}

/* static: logo strip carousel on weare-hiring (owl markup preserved) */
.nt-logostrip .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.nt-logostrip .item img {
    max-width: 100%;
    height: auto;
}
/* checkout: legacy visibility helpers that lived in style.css (not loaded on
   the customer layout). .hide-this rows and the desktop/mobile submit-button
   pair on checkout depend on them; scoped to the migrated pages only. */
.nt-checkout-page .hide-this,
.nt-thankyou-page .hide-this {
    display: none !important;
}
.nt-checkout-page .responsive_show {
    display: none;
}
@media (max-width: 767px) {
    .nt-checkout-page .responsive_hidde {
        display: none;
    }
    .nt-checkout-page .responsive_show {
        display: flex;
    }
}

/* checkout: cart page (.nt-cart wraps the legacy cart table + totals).
   The table keeps its legacy row structure (cart_status() walks .parent()
   chains), so only the wrappers are skinned. */
.nt-cart .nt-tablewrap {
    position: relative;
}
.nt-cart .content_loader.cart_loding_bg {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 247, 240, .7);
    border-radius: var(--nt-radius);
}
.nt-cart .nt-table {
    margin: 0;
}
.nt-cart .nt-table td p {
    margin: 0;
    font-size: 14.5px;
}
.nt-cart .nt-table .items_quantty {
    white-space: nowrap;
    text-align: end;
}
/* quantity stepper: pill around the legacy ul>li>a structure */
.nt-cart .count_numbers ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: 999px;
    overflow: hidden;
}
.nt-cart .count_numbers li {
    display: flex;
}
.nt-cart .count_numbers li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--nt-tap);
    min-height: var(--nt-tap);
    font-size: 20px;
    font-weight: 600;
    color: var(--nt-ink);
}
.nt-cart .count_numbers .actual_quantity {
    width: 44px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--nt-ink);
}
.nt-cart__totals {
    margin-top: 20px;
    margin-inline-start: auto;
    max-width: 460px;
}
.nt-cart__totals .nt-form-actions {
    margin-top: 18px;
}
.nt-cart__empty-actions {
    justify-content: center;
    margin-top: 18px;
}

/* checkout: legacy order-summary rows (.list_order) on the checkout page.
   DOM is untouched (ids #sub_total/#tax/#total/#delivery_cost and the
   .offer_amount/.total_pay/.delivery_cost_info toggles are all JS hooks);
   the old floated col-* grid is flattened to flex rows here. */
.nt-checkout-page .list_order {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--nt-line);
}
.nt-checkout-page .list_order > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
    flex: 0 1 auto;
    min-width: 0;
}
.nt-checkout-page .list_order .minuts {
    text-align: end;
    white-space: nowrap;
}
.nt-checkout-page .list_order h4,
.nt-checkout-page .list_order h5,
.nt-checkout-page .list_order h6 {
    margin: 0;
    font-family: var(--nt-font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
}
.nt-checkout-page .list_order .minuts h4 span[style] {
    float: none !important;
    margin-inline-end: 6px;
    color: var(--nt-taupe);
    font-weight: 400;
}
.nt-checkout-page .list_order.border {
    border-bottom: 0;
    border-top: 2px solid var(--nt-ink);
    margin-top: 6px;
    padding-top: 14px;
}
.nt-checkout-page .list_order.border h5 {
    font-size: 16.5px;
    font-weight: 700;
}
.nt-checkout-page .list_order.border b {
    font-size: 16.5px;
}

/* checkout: order-type / payment radio rows and the salon-address callout */
.nt-checkout-page .gender_section > .col-md-12 {
    float: none;
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.nt-checkout-page .nt-check {
    margin-bottom: 4px;
    font-weight: 500;
}
.nt-checkout-page #pickup_info,
.nt-checkout-page #delivery_info {
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.nt-checkout-page .ext_address {
    background: var(--nt-sand);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px 0 4px;
}
.nt-checkout-page .ext_address [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}
.nt-checkout-page .ext_address h3 {
    margin: 0 0 4px;
    font-family: var(--nt-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--nt-taupe);
}
.nt-checkout-page .ext_address address {
    margin: 0;
}
.nt-checkout-page .ext_address address p {
    margin: 0;
    font-size: 15px;
}
.nt-checkout-page .pick_address .nt-select {
    max-width: 480px;
    margin-bottom: 10px;
}
.nt-checkout-page .add_address {
    float: none;
    width: 100%;
    padding: 0;
}
.nt-checkout-page .method_sec_list_se [class*="col-"] {
    float: none;
    width: 100%;
    padding: 0;
}
.nt-checkout-page .method_sec {
    margin-bottom: 8px;
}
.nt-checkout-page .time_slat .col-md-12 {
    float: none;
    width: 100%;
    padding: 0;
}
.nt-checkout-page .check_sect {
    margin: 12px 0;
}

/* checkout: promo-code row (input + Apply/Remove + note + mobile submit) */
.nt-checkout-page .coupon_code {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}
.nt-checkout-page .coupon_code > [class*="col-"],
.nt-checkout-page .coupon_code [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
    min-width: 0;
}
.nt-checkout-page .coupon_code .nt-input {
    flex: 1 1 200px;
    width: 100%;
}
.nt-checkout-page .coupon_code > p,
.nt-checkout-page .coupon_code p[class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    font-size: 12.5px;
    color: var(--nt-taupe);
}
.nt-checkout-page .coupon_code .price_buttons {
    flex: 1 1 100%;
    width: 100%;
}

/* checkout: full-screen "booking in progress" preloader (JS sets
   display:block on #preloader, so the skin must work with display:block) */
.nt-checkout-page #preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(250, 247, 240, .93);
    padding-top: 32vh;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--nt-ink);
}
.nt-checkout-page #preloader-image img {
    display: inline-block;
    margin-top: 16px;
}

/* checkout: ingredient-info hover bubble used on the checkout summary and
   in the right-cart fragment (legacy .display_block_text/.info_hover_secs) */
.nt-checkout-page .display_block_text,
.nt-minicart .display_block_text {
    display: inline-block;
    position: relative;
}
.nt-checkout-page .display_block_text .info_hover_secs,
.nt-minicart .display_block_text .info_hover_secs {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 180px;
    max-width: 260px;
    padding: 8px 12px;
    background: var(--nt-ink);
    color: var(--nt-ivory);
    font-size: 12.5px;
    font-weight: 400;
    border-radius: 10px;
}
.nt-checkout-page .display_block_text:hover .info_hover_secs,
.nt-minicart .display_block_text:hover .info_hover_secs {
    display: block;
}

/* checkout: right-cart AJAX fragment (right_cart_list.blade.php). Injected
   into $('.cart_list'); every legacy class inside stays a JS hook, so only
   the .nt-minicart wrappers are styled. */
.nt-minicart__title {
    font-family: var(--nt-font-display);
    font-size: 19px;
    margin: 0 0 10px;
}
.nt-minicart {
    background: #fff;
    border: 1px solid var(--nt-line);
    border-radius: var(--nt-radius);
    padding: 14px 16px;
}
.nt-minicart table {
    width: 100%;
    border-collapse: collapse;
}
.nt-minicart td {
    padding: 8px 4px;
    border-bottom: 1px dashed var(--nt-line);
    vertical-align: middle;
    font-size: 14px;
}
.nt-minicart td h5 {
    margin: 0;
    font-family: var(--nt-font-body);
    font-size: 14px;
    font-weight: 500;
}
.nt-minicart .qty_decrease1,
.nt-minicart .qty_increase1 {
    min-width: 36px;
    min-height: var(--nt-tap);
    padding: 0 8px;
    border: 1px solid var(--nt-line);
    border-radius: 10px;
    background: #fff;
    color: var(--nt-ink);
    font-size: 17px;
    font-weight: 600;
}
.nt-minicart .qty_increase1 {
    background: var(--nt-gold-bright);
    border-color: var(--nt-gold-bright);
    color: var(--nt-ink);
}
.nt-minicart .mid_count {
    width: 34px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.nt-minicart .price-td {
    text-align: end;
    white-space: nowrap;
}
/* legacy delete icon was a style.css background image — draw an × instead */
.nt-minicart .store_delet_icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin-inline-start: 6px;
    color: var(--nt-taupe);
    font-size: 18px;
    line-height: 1;
}
.nt-minicart .store_delet_icons::before {
    content: "\00d7";
}
.nt-minicart .store_delet_icons:hover,
.nt-minicart .store_delet_icons:focus {
    color: #a4321f;
}
.nt-minicart__totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding-top: 10px;
    font-size: 14.5px;
}
.nt-minicart__totals > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}
.nt-minicart__totals p {
    margin: 0;
    color: var(--nt-taupe);
}
.nt-minicart__totals label {
    margin: 0;
    font-weight: 600;
    text-align: end;
}
.nt-minicart__cta {
    grid-column: 1 / -1;
    margin-top: 10px;
}
.nt-minicart__cta .nt-btn {
    width: 100%;
    justify-content: center;
}

/* checkout: thank-you page (order_confirmation) */
.nt-thanks__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.nt-thanks__head .nt-panel__title {
    margin: 0;
}
.nt-thanks__totals {
    margin-top: 18px;
    margin-inline-start: auto;
    max-width: 460px;
}
/* key/value detail rows: allow long values (addresses, instructions) to wrap */
.nt-summary--details .nt-summary__row span:first-child {
    flex: 0 0 auto;
    color: var(--nt-taupe);
}
.nt-summary--details .nt-summary__row span:last-child {
    white-space: normal;
    text-align: end;
    overflow-wrap: anywhere;
}

/* checkout: slot-picker modal (service_slots_pop) — DOM and its inline CSS
   are phase-3 booking-critical; only additive typography polish here. */
.nt-slots .modal-title {
    font-family: var(--nt-font-display);
}
.nt-slots .slot-week-label {
    font-family: var(--nt-font-display);
}

/* checkout: clearfixes for floated col-* kept inside the reskinned modals
   (address popup form + OTP input row) */
.nt-modal .locat_new_popup::after,
.nt-modal .optp_inner::after,
.nt-modal .location_product::after {
    content: "";
    display: table;
    clear: both;
}
.nt-modal .options_box .nt-check {
    margin-bottom: 2px;
}
.nt-modal .resend_buttons {
    float: none;
    width: 100%;
    padding: 0;
}
.nt-modal .resend_buttons .error {
    padding-top: 10px;
}
.nt-modal .send_buttons {
    float: none;
    width: 100%;
    padding: 0;
}

/* ---------- SweetAlert2 (customer theme) ----------
   sweetalert2.min.css (v6.11.5, admin plugin) is included per page inside
   the content section, so it loads AFTER this file — every rule here is
   prefixed with body.nt-body to out-rank it. Button background colors are
   applied inline by each swal() call (green confirm "Do košíka", gold
   cancel), so only shape/typography is themed here; the two remap rules at
   the bottom catch swal's built-in default colors on calls that pass none. */
body.nt-body .swal2-container {
    background: rgba(23, 20, 15, .55);
}
body.nt-body .swal2-modal {
    font-family: var(--nt-font-body);
    background: #fff;
    border-radius: var(--nt-radius);
    padding: 28px 26px 26px;
    box-shadow: 0 24px 64px rgba(23, 20, 15, .28);
}
body.nt-body .swal2-modal .swal2-title {
    font-family: var(--nt-font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--nt-ink);
}
body.nt-body .swal2-modal .swal2-content {
    font-family: var(--nt-font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--nt-ink-soft);
}
/* swal2 v6 hides the inactive icon divs (their text nodes are literally
   "?", "!", "i") with inline styles only — any state where those inline
   styles are missing leaks a stray "?!i" before the message. Hide icons
   at the stylesheet level too; the active icon still shows because swal
   sets inline display:block on it, which outranks this rule. */
body.nt-body .swal2-modal .swal2-icon {
    display: none;
}
body.nt-body .swal2-modal .swal2-buttonswrapper {
    margin-top: 18px;
}
body.nt-body .swal2-modal .swal2-styled {
    font-family: var(--nt-font-body);
    font-weight: 600;
    font-size: 15px;
    min-height: var(--nt-tap);
    padding: 10px 24px;
    margin: 6px;
    border-radius: 999px;
    transition: transform .18s, filter .18s, box-shadow .18s;
}
body.nt-body .swal2-modal .swal2-styled:hover {
    transform: translateY(-1px);
    filter: brightness(.96);
}
body.nt-body .swal2-modal .swal2-styled:focus {
    outline: 2px solid var(--nt-gold-bright);
    outline-offset: 3px;
    box-shadow: none;
}
/* gold secondary reads better with ink text (matches .nt-btn--gold) */
body.nt-body .swal2-modal .swal2-cancel {
    color: var(--nt-ink);
}
/* Calls that omit confirmButtonColor/cancelButtonColor get swal's stock
   blue (#3085d6) / grey (#aaa) applied inline — remap those two to the
   design palette. Explicit greens/golds pass through untouched. */
body.nt-body .swal2-modal .swal2-confirm[style*="rgb(48, 133, 214)"],
body.nt-body .swal2-modal .swal2-confirm[style*="#3085d6"] {
    background-color: var(--nt-ink) !important;
}
body.nt-body .swal2-modal .swal2-cancel[style*="rgb(170, 170, 170)"],
body.nt-body .swal2-modal .swal2-cancel[style*="#aaa"] {
    background-color: var(--nt-sand) !important;
    color: var(--nt-ink);
}

/* ============================================================
   Spacing polish (2026-07): homepage rhythm on mobile, cart card
   nesting, checkout grid gutters + panel rhythm. Spacing/alignment
   values only — no component redesign, no markup dependencies.
   ============================================================ */

/* mobile rhythm: tighter section/page bands on phones (the ≥640
   blocks above keep the desktop values: sections 80px, page 36/72) */
@media (max-width: 639.98px) {
    .nt-section { padding: 48px 0; }
    .nt-how { padding: 44px 0; }
    .nt-page { padding: 28px 0 56px; }
    .nt-pagehead { padding: 32px 0 36px; }
    .nt-pagehead .nt-search { margin-top: 16px; }
}

/* cart: bootstrap's <768px .table-responsive drew its own 1px border,
   15px bottom margin and a SECOND overflow-x region around
   .nt-tablewrap — one card, one scrollbar */
.nt-cart .table-responsive {
    border: 0;
    margin: 0;
    overflow: visible;
    width: 100%;
}
/* cart: once the two action buttons must stack, let them fill the row
   instead of ragged-wrapping */
@media (max-width: 479.98px) {
    .nt-cart__totals .nt-form-actions .nt-btn { flex: 1 1 100%; }
}

/* checkout: when the summary stacks under the form (<992px) it used to
   touch the slot panel — give it the panels' own 20px gap */
@media (max-width: 991.98px) {
    .nt-checkout-page .checkout-row > .col-md-4 { margin-top: 20px; }
}
/* checkout: panel rhythm — .checkout_inf/.checkout_info panels had NO
   own margin (legacy style.css is not loaded on customer pages) and the
   .nt-panel + .nt-panel adjacency rule misses them whenever a plain div
   sits between, leaving panels touching. Give every panel-level block a
   20px bottom gap; nested .checkout_inf sections get 15px. */
.nt-checkout-page .checkout_inf { margin-bottom: 20px; }
.nt-checkout-page .checkout_info.nt-panel { margin-bottom: 20px; }
.nt-checkout-page .checkout-row .checkout_inf .checkout_inf { margin-bottom: 15px; }
/* checkout: field rhythm inside the panels (block labels only — the
   radio/checkbox rows keep their own .nt-check spacing) */
.nt-checkout-page .checkout_inf .form-group { margin-bottom: 14px; }
.nt-checkout-page .checkout_inf .form-group > label { margin-bottom: 6px; }