/* ===========================================================================
   site_style.css — Core design system
   Header, navigation, mega menu, search, drawers, footer, buttons, forms.
   Loaded AFTER the legacy style.css so it wins on conflicts.
   =========================================================================== */

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root {
    --ink:            #212529;
    --ink-strong:     #111827;
    --ink-muted:      #6b7280;
    --ink-faint:      #9ca3af;

    --navy-900:       #1f2433;
    --navy-800:       #262c3d;
    --navy-600:       #294a7a;
    /* nav bar gradient, sampled from the reference */
    --navy-bar-1:     #2b2d42;
    --navy-bar-2:     #202234;

    --red-500:        #c41e3a;
    --red-600:        #a0172f;
    --red-grad:       linear-gradient(135deg, #c41e3a 0%, #a0172f 100%);

    --gold:           #d4af37;

    --surface:        #ffffff;
    --surface-alt:    #f8f8f8;
    --surface-sunken: #f4f5f7;

    --line:           #e5e7eb;
    --line-soft:      #ebebeb;
    --line-input:     #dddddd;

    --radius-sm:      6px;
    --radius:         8px;
    --radius-md:      9px;
    --radius-lg:      14px;
    --radius-pill:    999px;

    --shadow-sm:      0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md:      0 4px 16px rgba(16, 24, 40, .08);
    --shadow-lg:      0 18px 48px rgba(16, 24, 40, .16);

    --font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --container:      1347px;
    --gutter:         24px;
    --header-h:       194px;
    --navbar-h:       60px;
    --mobile-header-h:63px;
    --mobile-bar-h:   74px;

    --ease:           cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
}

img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Card and listing text uses semantic h2/h3/p, which carry large UA margins
   that would inflate every card. Reset them here; long-form areas
   (.blog-detail-body, .acc-panel, CMS HTML) keep their own spacing. */
.cat-detail-products-box-h,
.cat-detail-products-box-desc,
.cat-detail-products-box-marka,
.blog-box-h,
.blog-box-excerpt,
.blog-side-post-t,
.modules-head-text-h,
.modules-head-text-s { margin: 0; }

:focus-visible {
    outline: 2px solid var(--navy-600);
    outline-offset: 2px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* No overflow clipping here: `overflow` on an ancestor breaks `position:sticky`
   for descendants (product gallery, cart summary) and turns the element into a
   scroll container. Horizontal overflow is prevented by the layout itself —
   every grid track uses minmax(0,1fr) and every carousel scrolls internally. */
.main-body { position: relative; }

/* ---------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------- */
.pg-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.pg-section { padding-block: 40px; }

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05px;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                background-color .18s var(--ease), color .18s var(--ease);
}
.btn-base:disabled { opacity: .55; cursor: not-allowed; }

.btn-red {
    background: var(--red-grad);
    color: #fff;
    box-shadow: 0 2px 8px rgba(196, 30, 58, .28);
}
.btn-red:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196, 30, 58, .38); }
.btn-red:active { transform: translateY(0); }

.btn-outline {
    background: transparent;
    color: var(--ink-strong);
    border: 1px solid var(--line);
}
.btn-outline:hover { background: var(--surface-alt); border-color: #d1d5db; }

.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-800); }

.btn-white {
    background: #fff;
    color: #000;
    border: 1px solid var(--ink);
    height: 59px;
    padding-inline: 25px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 0;
}
.btn-white:hover { background: var(--ink); color: #fff; }

.btn-block { width: 100%; }
.btn-lg { height: 50px; font-size: 15px; }

/* ---------------------------------------------------------------
   5. Forms
   --------------------------------------------------------------- */
.field { margin-bottom: 18px; }

.field-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong);
}
.field-label .req { color: var(--red-500); }

.field-input,
.field-select,
.field-textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink-strong);
    background: #fff;
    border: 1px solid var(--line-input);
    border-radius: var(--radius);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field-textarea { min-height: 130px; resize: vertical; }

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    outline: 0;
    border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(41, 74, 122, .12);
}

.field.has-error .field-input,
.field.has-error .field-select,
.field.has-error .field-textarea { border-color: var(--red-500); }
.field.has-error .field-input:focus { box-shadow: 0 0 0 3px rgba(196, 30, 58, .12); }

.field-error {
    display: none;
    margin-top: 5px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--red-500);
}
.field.has-error .field-error { display: block; }

.form-success {
    padding: 22px 24px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius);
    color: #065f46;
    font-family: var(--font-ui);
}
.form-success h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.form-success p { margin: 0; font-size: 14px; }

/* ---------------------------------------------------------------
   6. Desktop header
   --------------------------------------------------------------- */
.header-main-div {
    position: relative;
    z-index: 60;
    background: var(--surface);
    font-family: var(--font-ui);
}

.desktop-header-area { display: block; }

.header-desktop-main-div {
    background: var(--surface);
    padding-top: 18px;
    border-bottom: 1px solid var(--line);
}

/* The reference does NOT constrain the header row to the content container —
   it runs full width with a 24px gutter, which is what lets the dark nav band
   below it bleed edge to edge. */
.header-desktop-main-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo right"
        "nav  nav";
    align-items: center;
    column-gap: 28px;
    width: 100%;
    padding-inline: var(--gutter);
}

.header-desktop-logo-div { grid-area: logo; display: flex; align-items: center; }
.header-desktop-logo-div a { display: block; }
.header-desktop-logo-div img { display: block; width: 172px; height: 92px; object-fit: contain; }

/* --- right cluster: search, phones, links, CTAs --- */
.header-desktop-right-area {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
}

.header-desktop-search1 { width: 352px; max-width: 100%; }

.header-desktop-search1 form {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    background: #fff;
    border: 1px solid var(--line-input);
    border-radius: var(--radius);
    overflow: hidden;
}
.header-desktop-search1 input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    font-size: 13.5px;
    color: var(--ink-strong);
    background: transparent;
}
.header-desktop-search1 input::placeholder { color: var(--ink-faint); }
.header-desktop-search1 input:focus { outline: 0; }
.header-desktop-search1 button {
    flex: 0 0 auto;
    height: 100%;
    padding-inline: 16px;
    border: 0;
    border-left: 1px solid var(--line-input);
    background: var(--surface-alt);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong);
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.header-desktop-search1 button:hover { background: var(--navy-900); color: #fff; }
.header-desktop-search1 form:focus-within { border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(41,74,122,.1); }

.header-phones-wrapper { display: flex; align-items: center; gap: 8px; }

.header-phone-box {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding-inline: 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-strong);
    white-space: nowrap;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.header-phone-box i { color: var(--red-500); font-size: 14px; }
.header-phone-box:hover { border-color: var(--navy-600); box-shadow: var(--shadow-sm); }

.header-desktop-navbutton-box a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding-inline: 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ink-strong);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.header-desktop-navbutton-box a i { color: var(--ink-muted); }
.header-desktop-navbutton-box a:hover { background: var(--surface-alt); }
.header-desktop-navbutton-box a:hover i { color: var(--red-500); }

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding-inline: 14px;
    border-radius: var(--radius-md);
    background: var(--red-grad);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(196, 30, 58, .25);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.header-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196, 30, 58, .35); color: #fff; }

/* cart button */
.header-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s var(--ease);
}
.header-cart-btn:hover { border-color: var(--navy-600); }
.header-cart-btn i { font-size: 18px; color: var(--ink-strong); }

.cart-counter {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 19px; height: 19px;
    padding-inline: 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--red-500);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-pill);
    border: 2px solid #fff;
}
.cart-counter[data-count="0"] { display: none; }

/* ---------------------------------------------------------------
   7. Primary nav bar + mega menu
   --------------------------------------------------------------- */
/* Full-bleed: the reference breaks the bar out of the row's 24px padding
   with negative margins so the dark band spans the whole viewport. */
.header-desktop-nav-wrap {
    grid-area: nav;
    width: auto;
    margin: 6px calc(var(--gutter) * -1) 0;
}

.top-level-menu-main-div {
    position: relative;
    background: linear-gradient(135deg, var(--navy-bar-1) 0%, var(--navy-bar-2) 100%);
    border-radius: 0;
}
/* 2px red rule along the top of the bar */
.top-level-menu-main-div::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--red-500);
}

/* the reference centres the category rail and puts nothing to its right */
.top-level-menu-main-div-in {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--navbar-h);
    max-width: 100%;
    padding-inline: var(--gutter);
}

/* The category names come from the CMS and can be long, so the rail must
   scroll rather than squash the items (which collapsed the bar to 35px). */
.head-new-area-left {
    min-width: 0;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.head-new-area-left::-webkit-scrollbar { display: none; }

.top-level-menu { display: flex; align-items: stretch; height: 100%; min-width: max-content; }

/* --- legacy reset -------------------------------------------------------
   assets/css/nav-menu.css (still loaded for the old header variants under
   includes/template/headertype/) lays .top-level-menu out with floats:
       .top-level-menu > li { float:left; height:35px; margin-right:10px;
                              padding:4px 10px 0 }
   Same specificity as ours, but it declares properties our flex rules did
   not, so they applied unopposed and collapsed the bar to 35px. Neutralise
   them explicitly rather than reordering the stylesheets.
   ----------------------------------------------------------------------- */
.top-level-menu > li {
    position: static;
    flex: 0 0 auto;
    float: none;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    transition: none;
}

.top-level-menu > li > a { display: block; height: 100%; }

.top-level-menu > li > a > span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--navbar-h);
    padding: 0 22px;
    /* nav-menu.css sets font-family/line-height on `> li span`; pin ours */
    font-family: var(--font-ui);
    line-height: 1.2;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .55px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.top-level-menu > li > a > span i { font-size: 12px; transition: transform .2s var(--ease), color .18s var(--ease); }

/* Underline that grows out of the label on hover — the reference's treatment.
   Scoped through .top-level-menu-main-div so it outranks nav-menu.css's
   `.top-level-menu > li:hover span { color:#000 }` and its grey hover fill. */
.top-level-menu > li > a > span::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 14px;
    width: 0;
    height: 2px;
    background: var(--red-500);
    transition: width .25s var(--ease);
}

.top-level-menu-main-div .top-level-menu > li:hover,
.top-level-menu-main-div .top-level-menu > li.is-open { background: transparent; }

.top-level-menu-main-div .top-level-menu > li:hover > a > span,
.top-level-menu-main-div .top-level-menu > li.is-open > a > span,
.top-level-menu-main-div .top-level-menu > li.is-active > a > span { color: var(--red-500); }

.top-level-menu-main-div .top-level-menu > li:hover > a > span::after,
.top-level-menu-main-div .top-level-menu > li.is-open > a > span::after,
.top-level-menu-main-div .top-level-menu > li.is-active > a > span::after { width: calc(100% - 44px); }

.top-level-menu-main-div .top-level-menu > li:hover > a > span i,
.top-level-menu-main-div .top-level-menu > li.is-open > a > span i { transform: rotate(180deg); color: var(--red-500); }

/* mega panel */
.sablon2-level-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 12px);
    width: min(calc(var(--container) - 2 * var(--gutter)), calc(100vw - 48px));
    padding: 40px 50px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 70;
}
.top-level-menu > li:hover > .sablon2-level-menu,
.top-level-menu > li.is-open > .sablon2-level-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    /* nav-menu.css has `.top-level-menu li:hover > ul { top:55px; margin-top:0!important }`,
       which also matches this panel (it is a <ul>) and would pull it up over
       the header. Ours is more specific, so restore the intended anchor. */
    top: 100%;
    margin-top: 0;
}

.sablon2-level-menu-2023-in { display: block; }
.sablon2-level-menu-left { width: 100%; }

.sablon2-level-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 28px 24px;
}

.sablon2-level-menu-left-item { min-width: 0; }

.sablon2-level-menu-left-item-h {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    transition: color .15s var(--ease);
}
.sablon2-level-menu-left-item-h img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 8px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sablon2-level-menu-left-item-h:hover { color: var(--red-500); }
.sablon2-level-menu-left-item-h:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.sablon2-level-menu-footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}
.sablon2-level-menu-footer a {
    font-size: 13px; font-weight: 600; color: var(--navy-600);
    display: inline-flex; align-items: center; gap: 6px;
}
.sablon2-level-menu-footer a:hover { color: var(--red-500); }

/* right side of the dark bar */
.head-new-area-right { display: flex; align-items: center; gap: 6px; padding-right: 8px; }
.head-new-area-right a {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding-inline: 14px;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
    color: rgba(255, 255, 255, .88);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.head-new-area-right a:hover { background: rgba(255,255,255,.09); color: #fff; }

/* ---------------------------------------------------------------
   8. Mobile header
   --------------------------------------------------------------- */
.header-mobile-view { display: none; }

.mobile-header-main-area {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.mobile-header-main-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--mobile-header-h);
    padding-inline: 14px;
}

.mobile-header-logo img { display: block; height: 44px; width: auto; object-fit: contain; }

.mobile-header-ust-right { display: flex; align-items: center; gap: 4px; }

.mobile-header-bars,
.mobile-header-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    height: 50px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ink-strong);
}
.mobile-header-bars i,
.mobile-header-cart i { font-size: 24px; line-height: 1; }
.mobile-menu-text { font-size: 9px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.mobile-header-cart { position: relative; }

/* ---------------------------------------------------------------
   9. Off-canvas drawers (menu + cart) — shared scrim
   --------------------------------------------------------------- */
.drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 28, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), visibility .28s;
    z-index: 190;
}
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

/* --- mobile menu drawer (from left) --- */
.mobile_side_wrap {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(375px, 88vw);
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    z-index: 200;
    display: flex;
    flex-direction: column;
}
body.menu-open .mobile_side_wrap { transform: translateX(0); }

.mobile_side_wrap_in { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.mobile_side_wrap_in_close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding-inline: 8px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--line);
}
.mobile_side_wrap_in_close button {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
}
.mobile_side_wrap_in_close i { font-size: 22px; color: var(--ink-strong); }

.mobile_side_content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }

.mobile_side_wrap_in_search { margin-bottom: 16px; }
.mobile_side_wrap_in_search form { display: flex; height: 46px; border: 1px solid var(--line-input); border-radius: var(--radius); overflow: hidden; }
.mobile_side_wrap_in_search input { flex: 1; min-width: 0; border: 0; padding-inline: 13px; font-size: 14px; }
.mobile_side_wrap_in_search input:focus { outline: 0; }
.mobile_side_wrap_in_search button { border: 0; background: var(--navy-900); color: #fff; padding-inline: 16px; cursor: pointer; }

.mobile_side_auth_buttons { display: grid; gap: 11px; margin-bottom: 20px; }
.mobile_side_auth_buttons a { height: 50px; }

/* accordion category list */
.mobile-menu-categories-main { border-top: 1px solid var(--line); }
.m-cat-item { border-bottom: 1px solid var(--line); }
.m-cat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 15px 4px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--ink-strong);
    text-align: left;
}
.m-cat-head i { font-size: 16px; color: var(--ink-muted); transition: transform .25s var(--ease); }
.m-cat-item.is-open .m-cat-head i { transform: rotate(180deg); }
.m-cat-panel { display: none; padding: 0 4px 14px; }
.m-cat-item.is-open .m-cat-panel { display: block; }
.m-cat-panel a {
    display: block; padding: 10px 12px;
    font-size: 13.5px; color: var(--ink-muted);
    border-radius: var(--radius-sm);
}
.m-cat-panel a:hover { background: var(--surface-alt); color: var(--red-500); }

.mobile_side_wrap_in_footer { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 16px; background: var(--surface-alt); }
.mobile_side_contact_title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.mobile_side_contact_item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-strong); padding-block: 6px; }
.mobile_side_contact_item i { color: var(--red-500); margin-top: 3px; }

/* --- cart drawer (from right) --- */
.hizliepet_side {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(470px, 92vw);
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    z-index: 200;
    display: flex;
    flex-direction: column;
}
body.cart-open .hizliepet_side { transform: translateX(0); }

.hizlisepet_inside { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.cart-drawer-head h3 { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 700; }
.cart-drawer-head button { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-muted); }
.cart-drawer-head button:hover { color: var(--ink-strong); }

.cart-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; }

.noitem { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; }
.noitem .inside { max-width: 340px; }
.noitem i { font-size: 40px; color: var(--ink-faint); }
.dropdown-cart-noitem-t { margin-top: 14px; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.dropdown-cart-noitem-s { margin-top: 8px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.cart-line-img { width: 72px; height: 72px; object-fit: contain; background: var(--surface-alt); border-radius: var(--radius-sm); }
.cart-line-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink-strong); line-height: 1.4; }
.cart-line-meta { margin-top: 4px; font-size: 12px; color: var(--ink-muted); }
.cart-line-price { font-family: var(--font-ui); font-size: 14px; font-weight: 700; white-space: nowrap; }
.cart-line-remove { background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: 13px; padding: 0; margin-top: 8px; }
.cart-line-remove:hover { color: var(--red-500); }

.cart-drawer-foot { flex: 0 0 auto; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface-alt); }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-family: var(--font-ui); }
.cart-total-row span:first-child { font-size: 14px; color: var(--ink-muted); }
.cart-total-row span:last-child { font-size: 20px; font-weight: 800; color: var(--ink-strong); }

/* ---------------------------------------------------------------
   10. Quantity stepper
   --------------------------------------------------------------- */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--line-input);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.qty-stepper button {
    width: 42px; height: 100%;
    border: 0; background: var(--surface-alt);
    font-size: 17px; line-height: 1; cursor: pointer; color: var(--ink-strong);
    transition: background-color .15s var(--ease);
}
.qty-stepper button:hover { background: #ececec; }
.qty-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.qty-stepper input {
    width: 56px; height: 100%;
    border: 0; border-inline: 1px solid var(--line-input);
    text-align: center;
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: 0; }

/* ---------------------------------------------------------------
   11. Breadcrumb
   --------------------------------------------------------------- */
.pg-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--ink-muted);
}
.pg-breadcrumb a { color: var(--ink-muted); transition: color .15s var(--ease); }
.pg-breadcrumb a:hover { color: var(--red-500); }
.pg-breadcrumb i { font-size: 10px; color: var(--ink-faint); }
.pg-breadcrumb [aria-current="page"] { color: var(--ink-strong); font-weight: 600; }

/* ---------------------------------------------------------------
   12. Footer
   --------------------------------------------------------------- */
.footer-rule { height: 3px; background: var(--navy-900); }

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px var(--gutter);
    background: var(--surface-alt);
}

.footer-pill {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 14px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 13px;
    color: #222;
    box-shadow: var(--shadow-sm);
}
.footer-pill a { color: #222; transition: color .15s var(--ease); }
.footer-pill a:hover { color: var(--red-500); }
.footer-pill .sep { color: var(--ink-faint); }

/* ---------------------------------------------------------------
   13. Fixed side tab
   --------------------------------------------------------------- */
.patent-side-button {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 31px;
    padding: 10px 8px;
    background: var(--navy-900);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--gold);
    transition: padding-left .2s var(--ease);
}
.patent-side-button:hover { padding-left: 13px; color: var(--gold); }
.patent-side-button span { display: block; line-height: 1.05; }

/* ---------------------------------------------------------------
   14. Mobile bottom bar
   --------------------------------------------------------------- */
.prottoguard-mobile-menu {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--navy-900);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.prottoguard-mobile-menu-in {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--mobile-bar-h);
}
.pg-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 2px;
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.pg-mobile-item i { font-size: 20px; }
.pg-mobile-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-mobile-item:hover, .pg-mobile-item.is-active { color: #fff; background: rgba(255,255,255,.08); }
.pg-mobile-item.is-whatsapp i { color: #25d366; }

/* ---------------------------------------------------------------
   15. Toast notifications
   --------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 40px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-600);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--ink-strong);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    pointer-events: auto;
}
.toast.is-visible { opacity: 1; transform: translateX(0); }
.toast.is-success { border-left-color: #10b981; }
.toast.is-error   { border-left-color: var(--red-500); }
.toast i { font-size: 16px; margin-top: 1px; }
.toast.is-success i { color: #10b981; }
.toast.is-error i { color: var(--red-500); }
.toast-body strong { display: block; font-weight: 700; margin-bottom: 2px; }
.toast-body span { color: var(--ink-muted); }

/* ---------------------------------------------------------------
   16. Page heading block
   --------------------------------------------------------------- */
.page-head { padding: 26px 0 8px; }
.page-head h1 {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--ink-strong);
}
.page-head .page-head-desc { margin: 8px 0 0; max-width: 760px; font-size: 14px; color: var(--ink-muted); line-height: 1.7; }

/* ---------------------------------------------------------------
   17. Empty state
   --------------------------------------------------------------- */
.empty-state { padding: 70px 20px; text-align: center; }
.empty-state i { font-size: 46px; color: var(--ink-faint); }
.empty-state h3 { margin: 16px 0 6px; font-family: var(--font-ui); font-size: 19px; font-weight: 700; }
.empty-state p { margin: 0 0 22px; color: var(--ink-muted); font-size: 14px; }

/* ---------------------------------------------------------------
   18. Floating quick menu (reference: #prottoguard-contact)
   ---------------------------------------------------------------
   Fixed pill bottom-left that expands a short link stack upward.
   Hidden below 992px, where the fixed bottom bar takes over.
   --------------------------------------------------------------- */
.pg-float-menu {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 500;
    display: flex;
    flex-direction: column;      /* panel above, trigger below */
    align-items: flex-start;
    font-family: var(--font-ui);
}

.pg-float-menu .main-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(212, 175, 55, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.pg-float-menu .main-btn::before {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #b88a2a);
    box-shadow: 0 0 18px rgba(212, 175, 55, .45);
}
.pg-float-menu .chevron { font-size: 12px; opacity: .95; transition: transform .25s var(--ease); }
.pg-float-menu.is-open .chevron { transform: rotate(180deg); }

.pg-float-menu .contact-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.pg-float-menu.is-open .contact-panel { display: flex; }

.pg-float-menu .cp-item {
    padding: 10px 14px;
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
    transition: transform .15s var(--ease);
}
.pg-float-menu .cp-item:hover { transform: translateY(-1px); color: #fff; }

/* catalogue link pulses for attention */
.pg-float-menu .cp-item.catalog {
    background: linear-gradient(135deg, var(--gold), #b88a2a);
    color: #111;
    border-color: rgba(0, 0, 0, .08);
    animation: pgCatalogPulse 1.4s infinite;
}
@keyframes pgCatalogPulse {
    0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.pg-float-menu .cp-item.wa { background: #25d366; color: #111; border-color: rgba(0, 0, 0, .10); }

@media (max-width: 991px) { .pg-float-menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .pg-float-menu .cp-item.catalog { animation: none; } }