/*
 * "Geru" global reskin - PahadiKala
 * ---------------------------------------------------------------
 * Loaded on EVERY page (unlike home-geru.css, which is home-only),
 * right after style.css/collections.css so it wins on source order.
 * Scope: typography site-wide, plus the header and footer chrome
 * that appear on every page. Deliberately does NOT touch product
 * listing/PDP/cart/checkout page internals (their own card, button
 * and status colors) - that is a larger, separate pass; this file
 * only overrides existing class rules, it never changes markup.
 */

/* Design tokens live in pk-tokens.css, which loads before this file. */

/* ----------------------------------------------------------------
   Global typography
   ---------------------------------------------------------------- */

body {
    font-family: var(--pk-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pk-font-display);
    font-weight: 400;
}

/* ----------------------------------------------------------------
   Header - single slim bar (ribbon + bar), replacing the old three
   stacked tiers (header-top / header-middle_wrapper / header-bottom).
   The inner classes (header-menu, menu-list, menu-item, sub-menu-alt,
   mega-menu-*, header-search, search_hint_bg, cart-target, wish-number)
   are the SAME classes the old header used and JS still targets by
   id (#searchInput, #searchBox, #cartCount, #userDropdown) - only the
   outer layout and colors changed, so nothing functional broke.
   ---------------------------------------------------------------- */

.geru-ribbon {
    background: var(--pk-geru-deep);
    color: #F1E4D8;
}

.geru-ribbon-inner {
    width: 100%;
    max-width: 1350px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 9px var(--pk-header-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
}

.geru-ribbon-msg {
    position: relative;
}

.geru-ribbon-msg:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -13px;
    width: 4px;
    height: 4px;
    background: #C58B6C;
    transform: translateY(-50%) rotate(45deg);
}

/* Below 576px the three messages used to wrap onto three stacked lines
   (~75px tall), pushing the hero down a full screen-third before any
   product content showed. They now occupy one ~30px line and cycle
   through each other instead. */
@media (max-width: 576px) {
    /* All three messages share one grid cell so they stack without any
       absolute positioning: the band then sizes itself to the tallest
       message and cannot clip it. (An explicit height here can't work -
       the base rule sets box-sizing:border-box, so a height smaller than
       the 16px of vertical padding collapses the content box to zero.) */
    .geru-ribbon-inner {
        display: grid;
        font-size: 9.5px;
        letter-spacing: 0.09em;
        line-height: 1.5;
    }

    .geru-ribbon-msg {
        grid-area: 1 / 1;
        opacity: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: geruRibbonCycle 9s infinite;
    }

    .geru-ribbon-msg:not(:last-child)::after {
        display: none;
    }

    .geru-ribbon-msg:nth-child(1) { animation-delay: 0s; }
    .geru-ribbon-msg:nth-child(2) { animation-delay: 3s; }
    .geru-ribbon-msg:nth-child(3) { animation-delay: 6s; }
}

/* 9s loop, one 3s slot per message: each is legible for ~2.2s of its
   slot, leaving only the fade between them rather than a band that
   sits empty half the time. */
@keyframes geruRibbonCycle {
    0%, 2%    { opacity: 0; }
    5%, 30%   { opacity: 1; }
    33%, 100% { opacity: 0; }
}

@media (max-width: 576px) and (prefers-reduced-motion: reduce) {
    .geru-ribbon-msg {
        animation: none;
        opacity: 1;
    }
    .geru-ribbon-msg:not(:first-child) {
        display: none;
    }
}

.geru-header-bar {
    background: var(--pk-paper);
    border-bottom: 1px solid var(--pk-line);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Listing/search pages keep the header in normal flow: they already have
   their own sticky filter chips row (.pk-category-chips-row) and sort bar
   (.pk-sort-bar-mobile) in style.css/style-responsive.css, both anchored
   at the viewport top - stacking a sticky header above them too would just
   steal the vertical space those bars need. See layouts/app.blade.php for
   where this body class is set. */
body.pk-listing-page .geru-header-bar {
    position: static;
    box-shadow: none;
}

.geru-header-inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 18px var(--pk-header-gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}

.geru-header-burger {
    display: none;
    color: var(--pk-ink);
    cursor: pointer;
}

.geru-header-burger a {
    color: inherit;
}

.geru-header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pk-ink);
    flex-shrink: 0;
}

.geru-header-logo:hover {
    color: var(--pk-ink);
}

.geru-header-logo-mark {
    height: 46px;
    width: auto;
}

.geru-header-logo-kicker {
    max-width: 150px;
    line-height: 1.5;
    border-left: 1px solid var(--pk-line-strong);
    padding-left: 12px;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
    font-weight: 500;
    white-space: normal;
}

/* Nav: reuses .header-menu > .menu-list > .menu-item so the existing
   hover mega-menu CSS/behavior keeps working unchanged. */
.geru-header-nav {
    flex-grow: 1;
}

.geru-header-nav .menu-list {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.geru-header-nav .menu-item_wrapper a {
    color: var(--pk-ink) !important;
    background: transparent !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 0 !important;
}

.geru-header-nav .menu-item_wrapper a:hover {
    color: var(--pk-geru) !important;
}

/* margin-left:auto pins the actions to the right edge even on mobile,
   where .geru-header-nav (the flex-grow:1 element) is display:none and
   would otherwise leave everything left-packed. */
.geru-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

.geru-header-search {
    width: 220px;
}

.geru-header-search .search-form {
    display: flex;
    border: 1px solid var(--pk-line-strong);
    border-radius: 0;
    padding-left: 14px;
}

.geru-header-search .search-form input {
    border: none;
    width: 100%;
    height: 38px;
    font-size: 13px;
    background: transparent;
}

.geru-header-search .search-form button {
    width: 44px;
    border-radius: 0;
    background: var(--pk-geru);
    color: var(--pk-paper);
    border: 0;
}

.geru-header-seller-link {
    position: relative;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--pk-ink) !important;
    white-space: nowrap;
    border-bottom: 1px solid var(--pk-geru);
    padding-bottom: 2px;
}

/* Expands the clickable area to ~44px tall without moving the
   underline away from the text. */
.geru-header-seller-link::after {
    content: '';
    position: absolute;
    inset: -12px -8px;
}

.geru-header-seller-link:hover {
    color: var(--pk-geru) !important;
}

/* 44x44 minimum hit area - the bare icon glyph alone measured 15x17,
   far below a reliable touch target, even though it looks right. */
.geru-header-account,
.geru-header-cart .position-relative {
    color: var(--pk-ink);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
}

.geru-header-account:hover {
    color: var(--pk-geru);
}

/* Matches the 44x44 hit area above so the mobile search icon reads as the
   same icon family as account/cart instead of a smaller, differently-styled
   button next to them - it was 30x30 via the shared .serch-mob-ico-bg class
   (also used, at that original size, by the unrelated bottom-nav Search
   item - deliberately not touched here). */
.pdp-mobile-search-btn {
    width: 44px;
    height: 44px;
}

.pdp-mobile-search-btn img {
    width: 20px;
    height: 20px;
}

/* Sits on the bag glyph, not the corner of the 44px hit box. */
.geru-header-cart .wish-number {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--pk-geru);
    color: var(--pk-paper);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_hint_bg {
    border-top-color: var(--pk-geru);
}

.search-see-all .search-resutls_item-info p,
.search-resutls_item-info .price-sale {
    color: var(--pk-geru);
}

.mega-menu-view-all {
    color: var(--pk-geru);
}

/* 1279px, not 991px: .geru-header-nav's menu-list wraps onto 2-3 lines
   anywhere from 992px up to ~1279px - there just isn't room for the logo,
   5 nav items, the search box and the account/cart icons on one line
   until ~1280px. Measured directly (menu-list stays multi-line through
   1270px, single-line from 1280px) rather than guessed, since the usual
   assumption that "tablet-ish widths" break around 991px didn't hold here
   once the Geru header added a wider logo block and inline search. */
@media (max-width: 1279px) {
    .geru-header-nav,
    .geru-header-search,
    .geru-header-seller-link,
    .geru-header-logo-kicker {
        display: none;
    }

    .geru-header-burger {
        display: block;
    }

    .geru-header-inner {
        gap: 16px;
    }
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */

.footer {
    background: linear-gradient(135deg, var(--pk-ink) 0%, var(--pk-night) 100%) !important;
    border-top: 3px solid var(--pk-geru) !important;
}

.footer a:hover,
.footer .hover-aipan:hover {
    color: var(--pk-geru) !important;
}

/* .aipan-red-text is the old brand red (#B22222) used throughout the
   footer for widget-title headings AND the chevron bullet icons - only
   used inside this layout file, so recoloring it site-wide is safe and
   is what actually makes the footer stop looking like the old theme. */
.aipan-red-text {
    color: var(--pk-geru) !important;
}

.footer .widget-title {
    font-family: var(--pk-font-display);
    letter-spacing: 0.04em;
}

.footer .fa-chevron-right {
    font-size: 10px;
}

.news-letter-email,
.footer .widget-newsletter .form-control {
    border-radius: 4px 0 0 4px !important;
}

.footer .widget-newsletter .btn {
    background-color: var(--pk-geru) !important;
    border-radius: 0 4px 4px 0 !important;
}

.news-letter-email:focus {
    border-color: var(--pk-geru) !important;
    box-shadow: 0 0 0 .2rem rgba(160, 58, 34, .25) !important;
}

/* ----------------------------------------------------------------
   Bottom mobile nav - was plain white/#9a9a9a Bootstrap-default chrome
   that looked untouched next to the rest of the reskinned site.
   ---------------------------------------------------------------- */

.bottom-nav {
    background: var(--pk-paper);
    border-top: 1px solid var(--pk-line-strong);
    box-shadow: 0 -4px 16px rgba(28, 21, 18, .08);
}

.bottom-nav .nav-item {
    font-family: var(--pk-font-body);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--pk-text-muted);
}

/* .serch-mob-ico-bg span carried its own #111827 color, a full shade
   darker than the other three items' inherited #9a9a9a/muted tone -
   the Search label visibly didn't match its siblings. */
.serch-mob-ico-bg span {
    color: var(--pk-text-muted) !important;
}

/* ----------------------------------------------------------------
   Account dropdown - the one piece of header chrome still rendering
   as Bootstrap's unstyled default .dropdown-menu (white, system font,
   sharp default shadow) instead of the Geru paper/ink palette.
   ---------------------------------------------------------------- */

.geru-header-account.dropdown .dropdown-menu {
    margin-top: 14px;
    padding: 8px;
    min-width: 205px;
    background: var(--pk-paper);
    border: 1px solid var(--pk-line-strong);
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(28, 21, 18, .14);
}

.geru-header-account.dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-family: var(--pk-font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pk-ink);
    border-radius: 0;
}

.geru-header-account.dropdown .dropdown-item i {
    width: 18px;
    color: var(--pk-brass);
}

.geru-header-account.dropdown .dropdown-item:hover,
.geru-header-account.dropdown .dropdown-item:focus {
    background: var(--pk-rice);
    color: var(--pk-geru);
}

.geru-header-account.dropdown .dropdown-item:hover i,
.geru-header-account.dropdown .dropdown-item:focus i {
    color: var(--pk-geru);
}

.geru-header-account.dropdown .dropdown-item.text-danger {
    color: var(--pk-geru-deep) !important;
}

.geru-header-account.dropdown .dropdown-item.text-danger i {
    color: var(--pk-geru-deep);
}

.geru-header-account.dropdown .dropdown-item.text-danger:hover {
    background: var(--pk-geru-tint);
}

.geru-header-account.dropdown .dropdown-divider {
    margin: 6px 4px;
    border-color: var(--pk-line);
}

/* ----------------------------------------------------------------
   Mobile sidebar
   ---------------------------------------------------------------- */

.sidebar-footer-btn-filled {
    background: var(--pk-geru) !important;
    border-color: var(--pk-geru) !important;
}

.mobile-menu-parent-link:hover,
.mobile-menu-list a:hover {
    color: var(--pk-geru) !important;
}

/* ----------------------------------------------------------------
   Bootstrap utility bridge
   ----------------------------------------------------------------
   Bootstrap ships these from the CDN with its own cold-gray palette
   (.text-muted is #6c757d), and they are used throughout the customer
   views. Repointing them at the tokens is what stops stray Bootstrap
   gray from showing up on otherwise themed pages.
   Semantic status utilities (.text-success/.text-danger/.text-warning)
   keep their meaning but are warmed onto the palette.
   ---------------------------------------------------------------- */

.text-muted { color: var(--pk-text-muted) !important; }
.text-secondary { color: var(--pk-text-muted) !important; }
.text-dark { color: var(--pk-ink) !important; }
.text-body { color: var(--pk-text-body) !important; }

.bg-light { background-color: var(--pk-rice) !important; }
.bg-white { background-color: var(--pk-paper) !important; }

.border, .border-top, .border-right, .border-bottom, .border-left {
    border-color: var(--pk-line) !important;
}

.text-success { color: var(--pk-success) !important; }
.text-danger { color: var(--pk-danger) !important; }
.text-warning { color: var(--pk-warning) !important; }

.btn-primary {
    background-color: var(--pk-geru);
    border-color: var(--pk-geru);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--pk-geru-deep);
    border-color: var(--pk-geru-deep);
}

.btn-outline-primary {
    color: var(--pk-geru);
    border-color: var(--pk-geru);
}

.btn-outline-primary:hover {
    background-color: var(--pk-geru);
    border-color: var(--pk-geru);
}

.form-control:focus {
    border-color: var(--pk-geru);
    box-shadow: 0 0 0 .2rem rgba(var(--pk-geru-rgb), .18);
}

.page-link { color: var(--pk-geru); }
/* Bootstrap greys out the disabled arrow with its own #6c757d, which beats
   the .page-link rule above on specificity. */
.page-item.disabled .page-link { color: var(--pk-text-faint); }
.page-item.active .page-link {
    background-color: var(--pk-geru);
    border-color: var(--pk-geru);
}