/*
 * Top bar and header, laid out like the reference header the client supplied.
 *
 * The split the client asked for: the top strip takes the reference's dark
 * navy, and nothing below it does. The masthead, the navigation and the cart
 * button keep this shop's own palette — same shapes, IASO's pink.
 *
 * Its own file because the main stylesheet is being edited in parallel; it
 * only needs the tokens storefront.css defines, and it loads before the rest
 * so anything later can still override it.
 */

/* Top bar ---------------------------------------------------------------- */

.client-topbar {
    /* The one colour borrowed from the reference. Kept as tokens so a future
       rebrand changes the strip in one place rather than in nine rules. */
    --client-topbar-bg: #0f172a;
    --client-topbar-tile: #1e293b;
    --client-topbar-line: #334155;
    --client-topbar-ink: #cbd5e1;
    --client-topbar-accent: #fbbf24;

    background: var(--client-topbar-bg);
    color: var(--client-topbar-ink);
    border-bottom: 1px solid var(--client-topbar-tile);
    font-size: 12px;
}

.client-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    /* padding-block only: the side gutter belongs to .client-shell. */
    padding-block: 7px;
}

.client-topbar a { color: inherit; text-decoration: none; }

.client-topbar__group--contact {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #94a3b8;
}

.client-topbar__group--contact a { display: inline-flex; align-items: center; gap: 6px; }
.client-topbar__group--contact a:hover { color: #fff; }

/* Everything the reference pushes to the right: links, socials, language. */
.client-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.client-topbar__links { display: flex; align-items: center; gap: 8px; }
.client-topbar__dot { color: #475569; }

.client-topbar__link {
    font-weight: 500;
    transition: color .15s ease;
}

.client-topbar__link:hover { color: var(--client-topbar-accent); }

/* The e-learning link is the one the reference singles out, and the client
   asked for it to stay singled out. */
.client-topbar__link.is-accent { color: var(--client-topbar-accent); font-weight: 700; }
.client-topbar__link.is-accent:hover { color: #fff; }

.client-topbar__sep {
    width: 1px;
    height: 14px;
    background: var(--client-topbar-line);
}

.client-topbar__socials { display: flex; align-items: center; gap: 6px; }

.client-topbar__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--client-topbar-tile);
    color: #fff;
    transition: background-color .15s ease, color .15s ease;
}

/* Per-network hover, the way the reference does it. */
.client-topbar__social--facebook:hover { background: #2563eb; }
.client-topbar__social--zalo:hover { background: #3b82f6; }
.client-topbar__social--youtube:hover { background: #dc2626; }
.client-topbar__social--instagram:hover { background: #db2777; }
.client-topbar__social--tiktok:hover { background: #000; }
.client-topbar__social:hover { background: var(--client-topbar-accent); color: #0f172a; }

.client-topbar__langs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--client-topbar-line);
    border-radius: 999px;
    background: var(--client-topbar-tile);
    font-size: 11px;
    font-weight: 600;
}

.client-topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--client-topbar-ink);
    transition: background-color .15s ease, color .15s ease;
}

.client-topbar__lang:hover { color: #fff; }

/* The current language uses the shop's own accent, not the reference's blue —
   this is the first point where the palette goes back to being IASO's. */
.client-topbar__lang.is-active {
    background: var(--client-accent);
    color: #fff;
}

/* GTranslate draws its own links (a.glink, the current one .gt-current-lang)
   into a wrapper inside the pill. They take the pill's look so switching from
   real translations to machine translation changes nothing on screen. */
.client-topbar__gt { padding: 2px; }
.client-topbar__gt .gtranslate_wrapper { display: inline-flex; align-items: center; gap: 2px; }
.client-topbar__gt a.glink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--client-topbar-ink);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.client-topbar__gt a.glink:hover { color: #fff; }
.client-topbar__gt a.glink.gt-current-lang { background: var(--client-accent); color: #fff; }
/* The flags the old pill carried, keyed on the language the link switches to. */
.client-topbar__gt a.glink[data-gt-lang="vi"]::before { content: "🇻🇳"; }
.client-topbar__gt a.glink[data-gt-lang="en"]::before { content: "🇬🇧"; }
.client-topbar__gt a.glink[data-gt-lang="ko"]::before { content: "🇰🇷"; }

@media (max-width: 860px) {
    /* The hotline and email are in the footer and the header; on a phone the
       strip earns its height only with the controls that are not repeated. */
    .client-topbar__group--contact { display: none; }
    .client-topbar__inner { justify-content: center; }
    .client-topbar__right { margin-left: 0; justify-content: center; }
}

@media (max-width: 560px) {
    .client-topbar__links { display: none; }
    .client-topbar__links + .client-topbar__sep { display: none; }
}

/* Cart button ------------------------------------------------------------ */

/*
 * The reference's cart control: an icon tile carrying the count, and the
 * basket total beside it. Shape copied, colour not — the tile is the shop's
 * accent tint rather than the reference's blue.
 */
.client-cartbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 8px;
    border: 1px solid var(--client-line);
    border-radius: 12px;
    background: var(--client-surface);
    color: var(--client-ink);
    text-decoration: none;
    box-shadow: var(--client-shadow-sm);
    transition: border-color .15s ease, background-color .15s ease;
}

.client-cartbtn:hover { border-color: var(--client-accent); background: var(--client-soft); }

.client-cartbtn__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(179, 25, 92, .08);
    color: var(--client-accent);
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}

.client-cartbtn:hover .client-cartbtn__icon { background: var(--client-accent); color: #fff; }

.client-cartbtn__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    border: 1.5px solid var(--client-surface);
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.client-cartbtn__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.client-cartbtn__label { font-size: 11px; font-weight: 600; color: var(--client-muted); }
.client-cartbtn__total { font-size: 12.5px; font-weight: 700; color: var(--client-ink); }

@media (max-width: 720px) {
    /* Back to a square icon button: the label and the total do not fit beside
       the search field on a phone, and the count badge still says enough. */
    .client-cartbtn { padding: 0 6px; gap: 0; }
    .client-cartbtn__text { display: none; }
}

/* Search bar ------------------------------------------------------------- */

/*
 * The reference's three-part bar: category selector, field, labelled button.
 *
 * One bordered pill with the parts butted against each other, so it reads as a
 * single control rather than three. Overrides .client-search in storefront.css,
 * which is a two-part version of the same thing; this file loads first, so the
 * selectors carry .client-header to outrank it.
 */
.client-header .client-search {
    display: flex;
    align-items: stretch;
    flex: 1 1 340px;
    max-width: 640px;
    height: 44px;
    border: 1.5px solid var(--client-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--client-surface);
    transition: border-color .15s ease;
}

.client-header .client-search:focus-within { border-color: var(--client-accent); }

.client-search__category {
    flex: 0 0 auto;
    max-width: 170px;
    padding: 0 30px 0 16px;
    border: 0;
    border-right: 1px solid var(--client-line);
    background: var(--client-soft);
    font: inherit;
    font-size: 13px;
    color: var(--client-ink);
    cursor: pointer;
    /* The native arrow sits too far right inside a pill, so it is drawn in. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    text-overflow: ellipsis;
}

.client-search__category:hover { background-color: #f3f0ed; }

.client-header .client-search__input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--client-ink);
    outline: none;
}

.client-header .client-search__input::placeholder { color: var(--client-muted); }

/*
 * The shop's accent, not the reference's. The button carries a word as well as
 * the glyph — that is the part of the reference the client pointed at.
 */
.client-header .client-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    border: 0;
    background: var(--client-accent);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .15s ease;
}

.client-header .client-search__submit:hover { background: var(--client-accent-ink, #7d0f3f); }

@media (max-width: 1024px) {
    /* The word goes before the selector does: the glyph still says "search",
       while losing the selector would lose a filter with no substitute. */
    .client-search__submit-label { display: none; }
    .client-header .client-search__submit { padding: 0 16px; }
    .client-search__category { max-width: 132px; font-size: 12.5px; padding-left: 12px; }
}

@media (max-width: 720px) {
    /* Below this the three parts fight over about 260px. The selector goes,
       and the catalogue's own sidebar filter takes over the job. */
    .client-search__category { display: none; }
}

/* Shop by category (home) ------------------------------------------------ */

/*
 * Replaces the second products row, which repeated the first one's contents
 * under a different heading. A tile answers "what kind of product am I after"
 * rather than showing the same six items again.
 *
 * The picture comes from a product inside the category — no category in this
 * catalogue has an image of its own — so the frame is sized for a product
 * photo on its pale studio background rather than for a cropped lifestyle shot.
 */
.client-home-shopcats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.client-home-shopcat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--client-line);
    border-radius: var(--client-radius);
    background: var(--client-surface);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.client-home-shopcat:hover {
    border-color: var(--client-accent);
    box-shadow: var(--client-shadow-sm);
    transform: translateY(-2px);
}

.client-home-shopcat__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--client-soft);
    overflow: hidden;
}

.client-home-shopcat__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-home-shopcat__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.client-home-shopcat__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--client-ink);
    /* One line: a long category name must not make one tile taller than the
       rest of its row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-home-shopcat__count { font-size: 12.5px; color: var(--client-muted); }

@media (max-width: 1024px) {
    .client-home-shopcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .client-home-shopcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .client-home-shopcat { padding: 8px 10px 8px 8px; gap: 10px; }
    .client-home-shopcat__media { width: 46px; height: 46px; }
    .client-home-shopcat__name { font-size: 13.5px; }
}