@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   KMA — Template18 theme layer
   ------------------------------------------------------------
   Loaded LAST by Requires/header.php (after the shared root
   Css/style.min.css, then this template's style.css + menu.css),
   so equal-specificity rules here win without !important.

   Design system lifted from the KMA "Private Journeys" landing
   page (~/Desktop/kma/explore/styles.css): forest + muted gold
   on warm ivory, Cormorant Garamond display over Montserrat
   eyebrows and Plus Jakarta Sans body copy.

   Everything bespoke is namespaced `kma-` so it cannot collide
   with the legacy classes the bundled megamenu.js relies on
   (.underline, .btn, .menu-grid-*, .show-on-mobile, …).
   ============================================================ */

:root {
    --kma-ink:      #1b2620 ;
    --kma-forest:   #1e4535 ;
    --kma-forest-2: #163329 ;
    --kma-gold:     #a98b52 ;
    --kma-gold-2:   #c2a878 ;
    --kma-cream:    #f5f1e8 ;
    --kma-sand:     #ece5d6 ;
    --kma-sage:     #8c9a8c ;
    --kma-muted:    #6a7169 ;
    --kma-line:     rgba( 27, 38, 32, .16 ) ;
    --kma-white:    #ffffff ;

    --kma-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif ;
    --kma-sans:  'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif ;
    --kma-body:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif ;

    --kma-shell: 1260px ;
    --kma-gut:   clamp( 18px, 4vw, 52px ) ;

    /* Header heights — kept in sync with the JS that measures .header
       and mirrors it onto .web-content's margin-top. */
    --kma-utility-h: 40px ;
    --kma-main-h:    92px ;
}

/* ============================================================
   1 · BASE
   ============================================================ */

body {
    background: var(--kma-white) ;
    color: var(--kma-ink) ;
    font-family: var(--kma-body) ;
    -webkit-font-smoothing: antialiased ;
    -moz-osx-font-smoothing: grayscale ; }

.web-content {
    overflow-x: hidden ; }

/* Shared layout primitives ---------------------------------- */
.kma-shell {
    width: 100% ;
    max-width: var(--kma-shell) ;
    margin: 0 auto ;
    padding: 0 var(--kma-gut) ; }

.kma-section {
    padding: clamp( 52px, 8vw, 112px ) 0 ; }
.kma-section--tight {
    padding: clamp( 36px, 5vw, 68px ) 0 ; }
.kma-section--cream { background: var(--kma-cream) ; }
.kma-section--sand  { background: var(--kma-sand) ; }
.kma-section--forest {
    background: var(--kma-forest) ;
    color: var(--kma-white) ; }

/* Type ------------------------------------------------------ */
.kma-eyebrow {
    display: inline-block ;
    font-family: var(--kma-sans) ;
    text-transform: uppercase ;
    letter-spacing: .3em ;
    font-size: .72rem ;
    font-weight: 600 ;
    color: var(--kma-gold) ;
    margin: 0 ; }

.kma-display {
    font-family: var(--kma-serif) ;
    font-weight: 500 ;
    line-height: 1.08 ;
    letter-spacing: .003em ;
    color: var(--kma-ink) ;
    margin: 0 ; }
h1.kma-display { font-size: clamp( 2.4rem, 5.4vw, 4.4rem ) ; }
h2.kma-display { font-size: clamp( 1.9rem, 3.8vw, 3rem ) ; }
h3.kma-display { font-size: clamp( 1.35rem, 2.2vw, 1.85rem ) ; }

.kma-lede {
    color: var(--kma-muted) ;
    font-size: 1.02rem ;
    line-height: 1.75 ;
    max-width: 62ch ;
    margin: 0 ; }

.kma-rule {
    width: 54px ;
    height: 1px ;
    background: var(--kma-gold) ;
    border: 0 ;
    margin: 0 ; }

/* Section heading block ------------------------------------- */
.kma-head {
    display: flex ;
    flex-direction: column ;
    gap: 14px ;
    max-width: 680px ;
    margin-bottom: clamp( 32px, 5vw, 56px ) ; }
.kma-head--center {
    text-align: center ;
    align-items: center ;
    max-width: 760px ;
    margin-left: auto ;
    margin-right: auto ; }
.kma-section--forest .kma-head .kma-display { color: var(--kma-white) ; }
.kma-section--forest .kma-lede { color: rgba( 255, 255, 255, .8 ) ; }
.kma-section--forest .kma-eyebrow { color: var(--kma-gold-2) ; }

/* Buttons --------------------------------------------------- */
.kma-btn {
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;
    gap: .7em ;
    cursor: pointer ;
    font-family: var(--kma-sans) ;
    text-transform: uppercase ;
    letter-spacing: .2em ;
    font-size: .72rem ;
    font-weight: 600 ;
    line-height: 1 ;
    padding: 16px 34px ;
    border: 1px solid var(--kma-ink) ;
    color: var(--kma-ink) ;
    background: transparent ;
    border-radius: 0 ;
    text-decoration: none ;
    transition: background .35s ease, color .35s ease, border-color .35s ease ; }
.kma-btn:hover,
.kma-btn:focus-visible {
    background: var(--kma-ink) !important;
    color: var(--kma-white) !important;
    text-decoration: none !important; }

.kma-btn--solid {
    background: var(--kma-forest) ;
    border-color: var(--kma-forest) ;
    color: var(--kma-white) ; }
.kma-btn--solid:hover,
.kma-btn--solid:focus-visible {
    background: var(--kma-gold) !important;
    border-color: var(--kma-gold) !important;
    color: var(--kma-white) !important; }

.kma-btn--gold {
    background: var(--kma-gold) ;
    border-color: var(--kma-gold) ;
    color: var(--kma-white) ; }
.kma-btn--gold:hover,
.kma-btn--gold:focus-visible {
    background: var(--kma-white) !important;
    border-color: var(--kma-white) !important;
    color: var(--kma-ink) !important; }

.kma-btn--light {
    color: var(--kma-white) ;
    border-color: rgba( 255, 255, 255, .75 ) ; }
.kma-btn--light:hover,
.kma-btn--light:focus-visible {
    background: var(--kma-white) !important;
    color: var(--kma-ink) !important; }

/* Quiet text link with a gold rule under it ------------------ */
.kma-link {
    display: inline-flex ;
    align-items: center ;
    gap: .6em ;
    font-family: var(--kma-sans) ;
    text-transform: uppercase ;
    letter-spacing: .18em ;
    font-size: .72rem ;
    font-weight: 600 ;
    color: var(--kma-ink) ;
    padding-bottom: 6px ;
    border-bottom: 1px solid var(--kma-gold) ;
    text-decoration: none ;
    transition: color .3s ease, gap .3s ease ; }
.kma-link:hover {
    color: var(--kma-gold) !important;
    gap: 1em !important;
    text-decoration: none !important; }
.kma-link--light {
    color: var(--kma-white) ;
    border-bottom-color: rgba( 255, 255, 255, .6 ) ; }
.kma-link--light:hover { color: var(--kma-gold-2) !important; }

/* ============================================================
   2 · HEADER / NAVIGATION
   ------------------------------------------------------------
   Replaces the old float + .row/.columns header. The 12-column
   grid gave the icon rail `.two columns` = 14.89% of a 1160px
   row ≈ 173px, while cart + wallet + search + the nowrap
   "Hello, Login?" label need ≈ 241px — so the floated <li>s
   wrapped onto a second line and the header grew to ~230px.
   Flex removes the fixed width entirely.
   ============================================================ */

.web-header {
    background: var(--kma-white) ;
    box-shadow: 0 1px 0 var(--kma-line) ; }

.kma-headbar {
    width: 100% ;
    max-width: var(--kma-shell) ;
    margin: 0 auto ;
    padding: 0 var(--kma-gut) ;
    display: flex ;
    align-items: center ;
    gap: clamp( 16px, 3vw, 40px ) ; }

/* --- utility bar ------------------------------------------- */
.header-top {
    height: var(--kma-utility-h) ;
    overflow: hidden ;
    background: var(--kma-ink) ;
    color: rgba( 255, 255, 255, .82 ) ;
    font-family: var(--kma-sans) ;
    font-size: .72rem ;
    letter-spacing: .08em ;
    text-transform: none ;
    transition: height .3s ease ; }

.kma-headbar--utility {
    height: 100% ;
    justify-content: space-between ; }

.header-top-left,
.header-top-right {
    display: flex ;
    align-items: center ;
    gap: clamp( 14px, 2.5vw, 30px ) ;
    min-width: 0 ; }

.header-social {
    display: flex ;
    align-items: center ;
    gap: 12px ; }
.header-social-label {
    text-transform: uppercase ;
    letter-spacing: .22em ;
    font-size: .64rem ;
    font-weight: 600 ;
    color: var(--kma-gold-2) ;
    white-space: nowrap ; }
.header-social-ul {
    display: flex ;
    align-items: center ;
    gap: 14px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.header-social-ul li { margin: 0 ; padding: 0 ; float: none ; }
.header-social-ul a {
    color: rgba( 255, 255, 255, .8 ) ;
    font-size: .82rem ;
    line-height: 1 ;
    display: block ;
    transition: color .25s ease ; }
.header-social-ul a:hover { color: var(--kma-gold-2) !important; }

.header-top-phone {
    display: inline-flex ;
    align-items: center ;
    gap: 9px ;
    color: rgba( 255, 255, 255, .82 ) ;
    white-space: nowrap ;
    text-decoration: none ;
    transition: color .25s ease ; }
.header-top-phone:hover { color: var(--kma-gold-2) !important; text-decoration: none !important; }
.header-top-phone i { color: var(--kma-gold-2) ; font-size: .78rem ; }

.header-top-info {
    min-width: 0 ;
    overflow: hidden ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
    color: rgba( 255, 255, 255, .72 ) ; }

.header-language-ul {
    display: flex ;
    align-items: center ;
    gap: 0 ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    flex: none ; }
.header-language-ul li {
    margin: 0 ;
    padding: 0 ;
    float: none ;
    position: relative ; }
.header-language-ul li + li { margin-left: 14px ; }
.header-language-ul li + li::before {
    content: "" ;
    position: absolute ;
    left: -7px ;
    top: 50% ;
    transform: translateY( -50% ) ;
    width: 1px ;
    height: 11px ;
    background: rgba( 255, 255, 255, .28 ) ; }
.header-language-ul a {
    color: rgba( 255, 255, 255, .7 ) ;
    text-transform: uppercase ;
    letter-spacing: .14em ;
    font-size: .66rem ;
    font-weight: 600 ;
    text-decoration: none ;
    transition: color .25s ease ; }
.header-language-ul a:hover { color: var(--kma-white) !important; text-decoration: none !important; }
.header-language-ul li.active a { color: var(--kma-gold-2) ; }

/* --- main bar ---------------------------------------------- */
.header-middle {
    padding: 0 ;
    background: var(--kma-white) ;
    box-shadow: none ;
    border-bottom: 1px solid var(--kma-line) ;
    transition: all .25s ease ; }

.kma-headbar--main {
    height: var(--kma-main-h) ;
    justify-content: space-between ; }

.header-middle .logo {
    flex: none ; }
.header-middle .logo a {
    display: block ;
    line-height: 0 ; }
.header-middle .logo a img {
    width: auto ;
    height: 62px ;
    max-width: 190px ;
    padding: 0 ;
    margin: 0 ;
    display: block ;
    object-fit: contain ;
    transition: height .25s ease ; }

/* Nav sits in the middle and is allowed to shrink before the
   icon rail does. */
.navigation_menu_box {
    flex: 1 1 auto ;
    min-width: 0 ;
    line-height: normal ;
    display: flex ;
    justify-content: center ; }

.navigation_menu.menu {
    width: 100% ; }

.menu > ul {
    padding: 0 ;
    margin: 0 ;
    width: 100% ;
    list-style: none ;
    position: relative ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex-wrap: wrap ;
    gap: clamp( 2px, 1.2vw, 18px ) ;
    text-align: center ;
    box-sizing: border-box ; }

.menu > ul > li {
    font-weight: 500 ;
    padding-bottom: 0 ;
    display: block ;
    position: static ; }

.menu > ul > li > a {
    display: block ;
    color: var(--kma-ink) ;
    font-family: var(--kma-sans) ;
    font-size: .74rem ;
    font-weight: 600 ;
    text-transform: uppercase ;
    letter-spacing: .16em ;
    padding: 10px 4px ;
    white-space: nowrap ;
    text-decoration: none ;
    transition: color .25s ease ; }
.menu > ul > li > a:hover { color: var(--kma-forest) !important; text-decoration: none !important; }

.menu > ul > li > a > span {
    position: relative ;
    display: inline-block ; }
.menu > ul > li > a > span:before {
    left: 0 ;
    width: 0 ;
    content: '' ;
    height: 1px ;
    bottom: -5px ;
    display: block ;
    position: absolute ;
    background: var(--kma-gold) ;
    -webkit-transition: width .3s ease ;
    transition: width .3s ease ; }
.menu > ul > li:hover > a > span:before,
.menu > ul > li.active > a > span:before { width: 100% !important; }
.menu > ul > li.active > a { color: var(--kma-forest) ; }

/* The mobile-only search entry inside the nav list */
.menu > ul > li.mobile_navigation_li { display: none ; }
.mobile_navigation_a {
    display: flex ;
    align-items: center ;
    gap: 12px ;
    cursor: pointer ; }

/* --- icon rail --------------------------------------------- */
.header-icon-ul {
    flex: none ;
    display: flex ;
    align-items: center ;
    gap: clamp( 14px, 1.6vw, 22px ) ;
    width: auto ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    line-height: normal ; }

.header-icon-ul li {
    padding: 0 ;
    margin: 0 ;
    float: none ;
    position: relative ;
    display: flex ;
    align-items: center ; }

.header-icon-ul li a {
    display: flex ;
    align-items: center ;
    position: relative ;
    color: var(--kma-ink) ;
    text-decoration: none ;
    transition: color .25s ease ; }
.header-icon-ul li a:hover { color: var(--kma-gold) !important; text-decoration: none !important; }

.header-icon-ul li i {
    font-size: 17px ;
    line-height: 1 ;
    vertical-align: middle ; }

/* `top`/`right` alone are not enough: style.css:6720 also carries a bare
   `.cart_item { margin-top: -20px }`, left over from its old `top:50%`
   positioning. That declaration is untouched by the overrides here, so it
   still applied — dragging the badge 20px up and leaving a 10px gap between
   the circle and the cart glyph. Zero it, then sit the badge on the icon`s
   top-right corner with a 6px overlap on both axes. */
.header-icon-ul li a .cart_item {
    top: -11px ;
    right: -11px ;
    margin-top: 0 ;
    color: var(--kma-white) ;
    width: 17px ;
    height: 17px ;
    font-family: var(--kma-sans) ;
    font-size: 10px ;
    font-weight: 600 ;
    line-height: 17px ;
    position: absolute ;
    text-align: center ;
    border-radius: 50% ;
    background-color: var(--kma-gold) ;
    transform: none ; }

/* Account dropdown */
.header-icon-ul li .dropdown {
    z-index: 1000 ;
    cursor: pointer ;
    position: relative ;
    display: flex ;
    align-items: center ;
    gap: 9px ;
    color: var(--kma-ink) ;
    transition: color .25s ease ; }
.header-icon-ul li .dropdown:hover { color: var(--kma-gold) !important; }
.header-icon-ul li .dropdown > i { font-size: 19px ; }
.header-icon-ul li .welcomeText {
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .12em ;
    text-transform: uppercase ;
    white-space: nowrap ;
    display: inline-block ; }

.header-icon-ul li .dropdown-content {
    z-index: 60 ;
    top: calc( 100% + 14px ) ;
    right: 0 ;
    left: auto ;
    display: none ;
    min-width: 190px ;
    position: absolute ;
    text-align: left ;
    line-height: initial ;
    background-color: var(--kma-white) ;
    transform: none ;
    border: 1px solid var(--kma-line) ;
    border-top: 2px solid var(--kma-gold) ;
    box-shadow: 0 18px 40px rgba( 14, 21, 15, .16 ) ; }
.header-icon-ul li .dropdown:hover .dropdown-content { display: block !important; }
/* Bridges the 14px gap so the menu does not close while the
   pointer travels from the icon down to the list. */
.header-icon-ul li .dropdown::after {
    content: "" ;
    position: absolute ;
    top: 100% ;
    right: 0 ;
    width: 190px ;
    height: 16px ;
    display: none ; }
.header-icon-ul li .dropdown:hover::after { display: block !important; }

.header-icon-ul li .dropdown-content a {
    color: var(--kma-ink) ;
    display: block ;
    font-family: var(--kma-sans) ;
    font-size: .7rem ;
    font-weight: 500 ;
    letter-spacing: .1em ;
    text-transform: uppercase ;
    padding: 12px 18px ;
    text-decoration: none ;
    border-top: 1px solid var(--kma-line) ;
    transition: background .2s ease, color .2s ease ; }
.header-icon-ul li .dropdown-content a:first-child { border-top: 0 ; }
.header-icon-ul li .dropdown-content a:hover {
    background-color: var(--kma-cream) !important;
    color: var(--kma-forest) !important; }

/* --- megamenu panel ---------------------------------------- */
.menu-grid-group {
    left: 50% ;
    z-index: 40 ;
    display: none ;
    width: min( 940px, calc( 100vw - 40px ) ) ;
    position: absolute ;
    top: 100% ;
    padding: 26px 30px ;
    background-color: var(--kma-cream) ;
    border-top: 2px solid var(--kma-gold) ;
    box-shadow: 0 24px 50px rgba( 14, 21, 15, .18 ) ;
    transform: translate( -50%, 0 ) ; }

.menu-grid a {
    padding: 6px 0 ;
    display: block ;
    text-align: left ;
    font-family: var(--kma-body) ;
    font-size: .84rem ;
    color: var(--kma-muted) ;
    text-decoration: none ;
    transition: color .2s ease ; }
.menu-grid a:hover { color: var(--kma-forest) !important; text-decoration: none !important; }
.menu-grid-list.current > a.underline {
    border-bottom: 1px solid var(--kma-line) ;
    color: var(--kma-ink) ;
    font-family: var(--kma-sans) ;
    font-size: .7rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    padding-bottom: 9px ;
    margin-bottom: 6px ; }
.menu-grid-list-sub .title { line-height: 1.6 ; font-weight: 400 ; }
.menu-grid-list-sub .view-more {
    line-height: 1.6 ;
    font-weight: 600 ;
    color: var(--kma-gold) ; }

/* --- condensed (scrolled) state ----------------------------- */
.web-header-scroll {
    box-shadow: 0 6px 24px rgba( 14, 21, 15, .12 ) ; }
.web-header-scroll .header-flyer { height: 0 ; }
.web-header-scroll .header-top { height: 0 ; }
.web-header-scroll .header-middle .logo a img { height: 50px ; }
.web-header-scroll .kma-headbar--main { height: 74px ; }
.web-header-scroll .navigation_menu_box { line-height: normal ; }
.web-header-scroll .header-icon-ul { line-height: normal ; }

/* ============================================================
   2b · HEADER — tablet & mobile
   ------------------------------------------------------------
   The drawer is driven by the bundled megamenu.js, which we
   cannot rebuild (minify.php would need all 15 root Css sources
   that are absent from git). So the JS contract is preserved
   verbatim and only the presentation is replaced:
     · `.menu-mobile` / `.menu-mobile-close` — injected toggle
     · `.menu > ul.show-on-mobile` — the open drawer, given an
       inline pixel height of (windowHeight - header height)
     · `.menu-dropdown-icon` / `-open` — the +/- submenu affordance
   ============================================================ */

@media only screen and (max-width: 1080px) {
    .menu > ul > li > a {
        font-size: .68rem ;
        letter-spacing: .1em ; }
    .header-icon-ul li .welcomeText { display: none ; }
    .header-middle .logo a img { height: 54px ; max-width: 150px ; }
}

@media only screen and (max-width: 900px) {
    .header-social-label { display: none ; }
    .header-top-info { display: none ; }
}

@media only screen and (max-width: 767px) {
    :root {
        --kma-main-h: 72px ; }

    .header {
        position: relative ; }

    /* Utility bar keeps only the essentials */
    .header-top {
        height: 36px ;
        font-size: .66rem ; }
    .kma-headbar--utility { justify-content: space-between ; }
    .header-top-left { gap: 16px ; }
    .header-top-phone span { display: inline ; }

    .header-middle {
        height: auto ;
        position: relative ; }

    .kma-headbar--main {
        height: var(--kma-main-h) ;
        justify-content: space-between ;
        gap: 12px ; }

    /* Hamburger replaces the nav in the flow; the logo centres
       itself between it and the icon rail. */
    .navigation_menu_box {
        position: static ;
        flex: 0 0 auto ;
        order: -1 ;
        width: 26px ;
        display: block ; }

    .menu-mobile,
    .menu-mobile-close {
        top: 50% ;
        left: 0 ;
        z-index: 5 ;
        width: 26px ;
        height: 26px ;
        display: block ;
        position: relative ;
        transform: none ;
        text-decoration: none ; }

    /* Drawn as CSS bars rather than a Fontawesome glyph — the
       legacy rule asked for font-family "Fontawesome", which is
       not the family name FA5 actually registers. */
    .menu-mobile:after,
    .menu-mobile-close:after {
        content: "" ;
        display: none ; }
    .menu-mobile:before,
    .menu-mobile-close:before {
        content: "" ;
        position: absolute ;
        left: 0 ;
        top: 50% ;
        width: 24px ;
        height: 2px ;
        background: var(--kma-ink) ;
        transition: transform .25s ease, background .25s ease ;
        box-shadow: 0 -7px 0 var(--kma-ink), 0 7px 0 var(--kma-ink) ; }
    .menu-mobile-close:before {
        box-shadow: none ;
        transform: rotate( 45deg ) ; }
    .menu-mobile-close:after {
        content: "" ;
        display: block ;
        position: absolute ;
        left: 0 ;
        top: 50% ;
        width: 24px ;
        height: 2px ;
        background: var(--kma-ink) ;
        transform: rotate( -45deg ) ;
        font-size: 0 ; }

    .header-middle .logo {
        flex: 1 1 auto ;
        display: flex ;
        justify-content: center ;
        min-width: 0 ; }
    .header-middle .logo a img {
        top: auto ;
        left: auto ;
        z-index: 1 ;
        width: auto ;
        height: 46px ;
        max-width: 140px ;
        padding: 0 ;
        position: static ;
        transform: none ; }

    .header-icon-ul {
        right: auto ;
        top: auto ;
        position: static ;
        transform: none ;
        flex: 0 0 auto ;
        gap: 18px ; }
    /* Search moves into the drawer; cart stays reachable. */
    .header-icon-ul li.search { display: none ; }
    .header-icon-ul li.cart { display: flex ; }

    /* --- the drawer ---------------------------------------- */
    .menu > ul {
        display: none ; }
    .menu > ul.show-on-mobile {
        left: 0 ;
        top: 100% ;
        width: 100% ;
        line-height: 1 ;
        display: block ;
        overflow-y: auto ;
        overflow-x: hidden ;
        margin-bottom: 0 ;
        padding: 8px 0 24px ;
        position: absolute ;
        background: var(--kma-cream) ;
        border-top: 1px solid var(--kma-line) ;
        box-shadow: 0 22px 40px rgba( 14, 21, 15, .18 ) ;
        -webkit-overflow-scrolling: touch ; }

    .menu > ul > li {
        width: 100% ;
        float: none ;
        margin-left: 0 ;
        position: relative ;
        border-bottom: 1px solid var(--kma-line) ; }
    .menu > ul > li:last-child { border-bottom: 0 ; }

    .menu > ul > li > a {
        width: 100% ;
        padding: 18px var(--kma-gut) ;
        display: block ;
        text-align: left ;
        font-size: .78rem ;
        letter-spacing: .16em ;
        line-height: 1.3 ; }
    .menu > ul > li > a > span:before { display: none ; }

    /* +/- affordance for branches that carry a megamenu */
    .menu-dropdown-icon:before,
    .menu-dropdown-icon-open:before {
        right: var(--kma-gut) ;
        top: 15px ;
        z-index: 1 ;
        color: var(--kma-gold) ;
        display: block ;
        cursor: pointer ;
        padding: 0 ;
        width: 24px ;
        height: 24px ;
        line-height: 24px ;
        text-align: center ;
        font-size: 1.15rem ;
        font-family: var(--kma-body) ;
        position: absolute ; }
    .menu-dropdown-icon:before { content: "+" ; }
    .menu-dropdown-icon-open:before { content: "\2013" ; }

    .menu-grid-group {
        left: 0 ;
        top: auto ;
        width: 100% ;
        position: relative ;
        transform: none ;
        padding: 4px var(--kma-gut) 18px ;
        border-top: 0 ;
        background-color: var(--kma-sand) ;
        box-shadow: none ; }
    .menu-grid-list {
        width: 100% ;
        float: none ;
        padding: 8px 0 ; }

    /* Search row at the foot of the drawer */
    .menu > ul > li.mobile_navigation_li {
        display: block ;
        text-align: left ;
        border-bottom: 0 ; }
    .menu > ul > li.mobile_navigation_li > a.mobile_navigation_a {
        display: flex ;
        width: 100% ;
        padding: 18px var(--kma-gut) ;
        color: var(--kma-ink) ;
        font-family: var(--kma-sans) ;
        font-size: .78rem ;
        font-weight: 600 ;
        letter-spacing: .16em ;
        text-transform: uppercase ; }
    .mobile_navigation_a i { color: var(--kma-gold) ; }

    /* The condensed state must not collapse the bar on mobile */
    .web-header-scroll { display: block ; }
    .web-header-scroll .header-top { height: 36px ; }
    .web-header-scroll .kma-headbar--main { height: var(--kma-main-h) ; }
    .web-header-scroll .header-middle .logo a img { height: 46px ; }
}

@media only screen and (max-width: 400px) {
    .header-top { font-size: .62rem ; }
    .header-middle .logo a img { height: 40px ; max-width: 118px ; }
    .header-icon-ul { gap: 14px ; }
}

@media only screen and (max-width: 340px) {
    .header-top-phone span { display: none ; }
}

/* ============================================================
   3 · HOME
   ============================================================ */

/* --- 3.1 hero ---------------------------------------------- */
/* The slideshow is shown clean: no scrim, no overlay copy. The four
   uploaded slides carry their own artwork, so anything drawn on top
   would compete with it. */
.kma-hero {
    position: relative ;
    background: var(--kma-forest-2) ;
    overflow: hidden ; }

.kma-hero .slide_box {
    width: 100% ;
    height: auto ; }

/* style.css pins .slide_scrollable to 41.7vw — 300px on a phone and
   900px on a 21:9 monitor. Clamp to a usable band. */
.kma-hero .slide_scrollable {
    height: clamp( 380px, 41.7vw, 660px ) ;
    /* The Slide screen stores a desktop image and an optional mobile
       crop; temp_home.php passes both in as custom properties so the
       media query below can choose. Setting background-image inline
       instead would be unoverridable from a stylesheet. */
    background-image: var(--kma-slide-d) ;
    background-repeat: no-repeat ;
    background-position: center center ;
    background-size: cover ; }
.kma-hero .slide_scrollable--embed {
    background-image: none ;
    background-color: #0e150f ; }

/* The arrows ship at z-index 100 while .slide_scrollable is z-index
   1000 !important, so they were painted behind every image slide. */
.kma-hero #bx_slide_prev,
.kma-hero #bx_slide_next {
    z-index: 1003 ;
    width: 46px ;
    height: 46px ;
    margin: 0 ;
    padding: 0 ;
    /* Grid centring, not line-height: the <i> is an inline-block, so it
       sat on the text baseline and rendered 14px below the circle's
       centre no matter what line-height was set. */
    display: grid ;
    place-items: center ;
    line-height: 0 ;
    font-size: 0 ;
    border-radius: 50% ;
    background: rgba( 14, 21, 15, .34 ) ;
    backdrop-filter: blur( 3px ) ;
    -webkit-backdrop-filter: blur( 3px ) ;
    border: 1px solid rgba( 255, 255, 255, .32 ) ;
    transform: translate( 0, -50% ) ;
    transition: background .25s ease, border-color .25s ease ; }
.kma-hero #bx_slide_prev { left: clamp( 10px, 2vw, 26px ) ; }
.kma-hero #bx_slide_next { right: clamp( 10px, 2vw, 26px ) ; }
.kma-hero #bx_slide_prev i,
.kma-hero #bx_slide_next i {
    display: block ;
    color: var(--kma-white) ;
    font-size: 22px ;
    line-height: 1 ;
    /* the glyph's own side bearing is asymmetric */
    margin: 0 ;
    transform: translateX( -1px ) ; }
.kma-hero #bx_slide_next i { transform: translateX( 1px ) ; }
.kma-hero #bx_slide_prev:hover,
.kma-hero #bx_slide_next:hover {
    background: var(--kma-gold) !important;
    border-color: var(--kma-gold) !important; }

/* --- 3.2 pillars -------------------------------------------- */
.kma-pillar-grid {
    display: grid ;
    grid-template-columns: repeat( 4, 1fr ) ;
    gap: clamp( 20px, 2.6vw, 34px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }

.kma-pillar {
    margin: 0 ;
    padding: 0 ;
    text-align: left ; }
.kma-pillar__icon {
    width: 52px ;
    height: 52px ;
    display: grid ;
    place-items: center ;
    border: 1px solid var(--kma-line) ;
    border-radius: 50% ;
    color: var(--kma-gold) ;
    font-size: 1.05rem ;
    margin-bottom: 20px ; }
.kma-pillar__title {
    font-family: var(--kma-sans) ;
    font-size: .82rem ;
    font-weight: 600 ;
    letter-spacing: .1em ;
    text-transform: uppercase ;
    color: var(--kma-ink) ;
    margin: 0 0 12px ;
    line-height: 1.4 ; }
.kma-pillar__text {
    color: var(--kma-muted) ;
    font-size: .92rem ;
    line-height: 1.7 ;
    margin: 0 ; }

/* --- 3.3 destination / collection cards --------------------- */
.kma-dest-grid {
    display: grid ;
    grid-template-columns: repeat( 4, 1fr ) ;
    gap: clamp( 16px, 2vw, 26px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }

.kma-dest { margin: 0 ; padding: 0 ; }
.kma-dest > a {
    display: block ;
    position: relative ;
    overflow: hidden ;
    background: var(--kma-white) ;
    text-decoration: none ;
    height: 100% ; }
.kma-dest > a:hover { text-decoration: none !important; }

.kma-dest__media {
    display: block ;
    position: relative ;
    overflow: hidden ;
    height: clamp( 200px, 22vw, 320px ) ;
    background: var(--kma-sand) ; }
.kma-dest__media img {
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ;
    transition: transform .9s ease ; }
.kma-dest > a:hover .kma-dest__media img { transform: scale( 1.06 ) !important; }

.kma-dest__placeholder {
    position: absolute ;
    inset: 0 ;
    display: grid ;
    place-items: center ;
    font-family: var(--kma-serif) ;
    font-size: clamp( 3rem, 6vw, 4.6rem ) ;
    color: rgba( 255, 255, 255, .9 ) ;
    background: linear-gradient( 155deg, var(--kma-forest) 0%, var(--kma-forest-2) 62%, var(--kma-ink) 100% ) ; }

.kma-dest__body {
    display: flex ;
    align-items: baseline ;
    justify-content: space-between ;
    gap: 12px ;
    padding: 18px 4px 4px ; }
.kma-dest__title {
    font-family: var(--kma-sans) ;
    font-size: .8rem ;
    font-weight: 600 ;
    letter-spacing: .12em ;
    text-transform: uppercase ;
    color: var(--kma-ink) ;
    line-height: 1.4 ; }
.kma-dest__more {
    font-family: var(--kma-sans) ;
    font-size: .62rem ;
    font-weight: 600 ;
    letter-spacing: .18em ;
    text-transform: uppercase ;
    color: var(--kma-gold) ;
    white-space: nowrap ;
    opacity: 0 ;
    transform: translateX( -6px ) ;
    transition: opacity .3s ease, transform .3s ease ; }
.kma-dest > a:hover .kma-dest__more { opacity: 1 !important; transform: none !important; }

/* --- 3.5 testimonials --------------------------------------- */
.kma-quote-grid {
    display: grid ;
    grid-template-columns: repeat( 3, 1fr ) ;
    gap: clamp( 20px, 2.6vw, 32px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.kma-quote {
    margin: 0 ;
    padding: 30px 28px 32px ;
    background: rgba( 255, 255, 255, .06 ) ;
    border: 1px solid rgba( 255, 255, 255, .14 ) ;
    display: flex ;
    flex-direction: column ; }
.kma-quote__mark {
    font-family: var(--kma-serif) ;
    font-size: 3rem ;
    line-height: .7 ;
    color: var(--kma-gold-2) ;
    margin-bottom: 14px ;
    display: block ; }
.kma-quote__body {
    color: rgba( 255, 255, 255, .9 ) ;
    font-size: .96rem ;
    line-height: 1.75 ;
    margin: 0 0 20px ;
    overflow-wrap: anywhere ; }
.kma-quote__name {
    margin-top: auto ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .18em ;
    text-transform: uppercase ;
    color: var(--kma-gold-2) ; }

/* --- 3.6 CMS-authored region --------------------------------
   Everything below the hero comes from the home page's rich-text
   field. These are the base defaults for plain prose typed into
   CKEditor; the authoring blocks further down (section 11) are the
   classes to reach for when composing real sections.
   ------------------------------------------------------------ */
.kma-cms { color: var(--kma-muted) ; }
.kma-cms > .row,
.kma-cms > p,
.kma-cms > h1,
.kma-cms > h2,
.kma-cms > h3,
.kma-cms > h4,
.kma-cms > ul,
.kma-cms > ol,
.kma-cms > table {
    width: 100% ;
    max-width: var(--kma-shell) ;
    margin-left: auto ;
    margin-right: auto ;
    padding-left: var(--kma-gut) ;
    padding-right: var(--kma-gut) ;
    box-sizing: border-box ; }
.kma-cms > p:first-child { padding-top: clamp( 30px, 4vw, 56px ) ; }

/* These prose defaults are deliberately limited to elements with NO
   class. The rule is: if you gave it a `kma-` class, the authoring kit
   styles it; if you did not, it is prose and gets styled here.

   Without the :not([class]) guard these win on specificity over the kit
   (`.kma-cms a` 0-1-1 beats `.kma-btn` 0-1-0), which painted the solid
   button forest-on-forest and turned the step titles serif. */
.kma-cms p:not([class]) { line-height: 1.8 ; margin: 0 0 1.1em ; }
.kma-cms h1:not([class]),
.kma-cms h2:not([class]),
.kma-cms h3:not([class]),
.kma-cms h4:not([class]) {
    font-family: var(--kma-serif) ;
    font-weight: 500 ;
    color: var(--kma-ink) ;
    line-height: 1.2 ;
    margin: 0 0 .55em ; }
.kma-cms h1:not([class]) { font-size: clamp( 1.9rem, 3.6vw, 2.8rem ) ; }
.kma-cms h2:not([class]) { font-size: clamp( 1.6rem, 3vw, 2.2rem ) ; }
.kma-cms h3:not([class]) { font-size: clamp( 1.3rem, 2.2vw, 1.7rem ) ; }
.kma-cms a:not([class]) { color: var(--kma-forest) ; text-decoration: underline ; }
.kma-cms a:not([class]):hover { color: var(--kma-gold) !important; }
.kma-cms img { max-width: 100% ; }
.kma-cms ul:not([class]),
.kma-cms ol:not([class]) { margin: 0 0 1.1em 1.3em ; }
.kma-cms li:not([class]) { margin-bottom: .45em ; line-height: 1.75 ; }
.kma-cms table:not([class]) { border-collapse: collapse ; }
/* A section dropped in by a token is full-bleed and brings its own
   shell, so it must not inherit the prose gutters above. */
.kma-cms > section { max-width: none ; padding-left: 0 ; padding-right: 0 ; }

/* --- 3.7 responsive ----------------------------------------- */
@media only screen and (max-width: 1024px) {
    .kma-pillar-grid { grid-template-columns: repeat( 2, 1fr ) ; }
    .kma-dest-grid   { grid-template-columns: repeat( 3, 1fr ) ; }
    .kma-quote-grid  { grid-template-columns: repeat( 2, 1fr ) ; }
}

@media only screen and (max-width: 767px) {
    /* Use the Slide screen's mobile crop where one was uploaded;
       temp_home.php falls --kma-slide-m back to the desktop file. */
    .kma-hero .slide_scrollable {
        height: clamp( 300px, 62vw, 440px ) ;
        background-image: var(--kma-slide-m, var(--kma-slide-d)) ; }
    .kma-hero #bx_slide_prev,
    .kma-hero #bx_slide_next { width: 36px ; height: 36px ; }
    .kma-hero #bx_slide_prev i,
    .kma-hero #bx_slide_next i { font-size: 17px ; }

    .kma-dest-grid  { grid-template-columns: repeat( 2, 1fr ) ; }
    .kma-quote-grid { grid-template-columns: 1fr ; }
}

@media only screen and (max-width: 520px) {
    .kma-pillar-grid { grid-template-columns: 1fr ; }
    .kma-dest__body { flex-direction: column ; gap: 4px ; align-items: flex-start ; }
    .kma-dest__more { opacity: 1 ; transform: none ; }
}

/* ============================================================
   4 · Carried over from the template's original all.css
   ============================================================ */
.elevatezoom_box {
    margin-bottom: 15px ; }
.sp-slides-container:after {
    content: '' ;
    position: absolute ;
    width: 100% ;
    height: 100% ;
    top: 0 ;
    z-index: 9999 ; }

/* ============================================================
   5 · FOOTER
   ------------------------------------------------------------
   .web-footer / .footer-copyright / .copyright are emitted by the
   shared Requires/footer.php; only .footer and inwards comes from
   this template. Both are styled from here — this file is the
   template's own stylesheet, no shared CSS is touched.
   ============================================================ */

.web-footer {
    background: var(--kma-ink) ;
    color: rgba( 255, 255, 255, .74 ) ;
    font-family: var(--kma-body) ; }

.footer.kma-footer {
    background: transparent ;
    padding: clamp( 46px, 6vw, 84px ) 0 clamp( 30px, 4vw, 52px ) ; }
.kma-footer .footer_top { width: 100% ; }

.kma-footer__grid {
    display: grid ;
    grid-template-columns: 1.35fr repeat( 3, 1fr ) ;
    gap: clamp( 28px, 4vw, 56px ) ;
    align-items: start ;
    width: 100% ;
    /* Neutralises any inline geometry isotope may have written
       before this template stopped opting in. */
    position: static ;
    height: auto ; }
.kma-footer__grid > div {
    position: static ;
    left: auto ;
    top: auto ;
    width: auto ;
    float: none ;
    transform: none ; }

/* --- brand column ------------------------------------------- */
.kma-footer__brand {
    display: flex ;
    flex-direction: column ;
    align-items: flex-start ;
    gap: 20px ; }
.kma-footer__logo { display: block ; line-height: 0 ; }
.kma-footer__logo img {
    width: auto ;
    height: 58px ;
    max-width: 180px ;
    object-fit: contain ;
    display: block ;
    /* The logo is artwork for a light ground; lift it off the ink. */
    background: rgba( 255, 255, 255, .95 ) ;
    padding: 10px 14px ; }
.kma-footer__blurb {
    margin: 0 ;
    overflow-wrap: anywhere ;
    color: rgba( 255, 255, 255, .72 ) ;
    font-size: .86rem ;
    line-height: 1.7 ;
    max-width: 34ch ; }
.kma-footer__blurb span {
    display: block ;
    color: rgba( 255, 255, 255, .44 ) ;
    font-size: .76rem ;
    margin-top: 4px ; }

.kma-footer__social {
    display: flex ;
    align-items: center ;
    gap: 10px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.kma-footer__social li { margin: 0 ; padding: 0 ; float: none ; }
.kma-footer__social a {
    width: 38px ;
    height: 38px ;
    display: grid ;
    place-items: center ;
    border-radius: 50% ;
    color: rgba( 255, 255, 255, .82 ) ;
    background: rgba( 255, 255, 255, .1 ) ;
    font-size: .84rem ;
    text-decoration: none ;
    transition: background .25s ease, color .25s ease ; }
.kma-footer__social a:hover {
    background: var(--kma-gold) !important;
    color: var(--kma-white) !important;
    text-decoration: none !important; }

/* --- link columns ------------------------------------------- */
.kma-footer__col { min-width: 0 ; }

.kma-footer .kma-footer__heading {
    position: relative ;
    margin: 0 0 22px ;
    padding-bottom: 12px ;
    color: var(--kma-white) ;
    font-family: var(--kma-sans) ;
    font-size: .74rem ;
    font-weight: 600 ;
    letter-spacing: .18em ;
    text-transform: uppercase ;
    line-height: 1.4 ; }
.kma-footer .kma-footer__heading:after {
    content: "" ;
    border: 0 ;
    position: absolute ;
    left: 0 ;
    bottom: 0 ;
    width: 32px ;
    height: 1px ;
    background: var(--kma-gold) ; }

.kma-footer__list {
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    display: flex ;
    flex-direction: column ;
    gap: 11px ; }
.kma-footer__list > li {
    margin: 0 ;
    padding: 0 ;
    float: none ;
    line-height: 1.6 ; }
.kma-footer .kma-footer__list a {
    color: rgba( 255, 255, 255, .72 ) ;
    font-size: .88rem ;
    overflow-wrap: anywhere ;
    text-decoration: none ;
    transition: color .25s ease ; }
.kma-footer .kma-footer__list a:hover { color: var(--kma-gold-2) !important; text-decoration: none !important; }

/* --- contact column ----------------------------------------- */
.kma-footer__contact > li {
    display: flex ;
    align-items: flex-start ;
    gap: 12px ;
    min-width: 0 ;
    color: rgba( 255, 255, 255, .72 ) ;
    font-size: .88rem ; }
/* An email address is a single unbreakable token — in a narrow footer
   column it pushed the page 9px wider than the viewport at 768px. */
.kma-footer__contact > li > a,
.kma-footer__contact > li > span:not(.kma-footer__ico) {
    min-width: 0 ;
    overflow-wrap: anywhere ;
    word-break: break-word ; }
.kma-footer__ico {
    flex: none ;
    width: 16px ;
    margin-top: 3px ;
    color: var(--kma-gold) ;
    font-size: .8rem ; }

/* --- subscribe / embed -------------------------------------- */
.kma-footer__subscribe p {
    color: rgba( 255, 255, 255, .62 ) ;
    font-size: .82rem ;
    line-height: 1.65 ;
    margin: 0 0 16px ; }
.kma-footer__subscribe .subscribe-form {
    display: flex ;
    align-items: stretch ;
    gap: 0 ;
    flex-wrap: wrap ; }
.kma-footer__subscribe .subscribe-form input[type="text"] {
    flex: 1 1 150px ;
    min-width: 0 ;
    height: 46px ;
    margin: 0 ;
    padding: 0 14px ;
    color: var(--kma-white) ;
    background: rgba( 255, 255, 255, .08 ) ;
    border: 1px solid rgba( 255, 255, 255, .2 ) ;
    border-right: 0 ;
    border-radius: 0 ;
    font-family: var(--kma-body) ;
    font-size: .84rem ;
    outline: none ; }
.kma-footer__subscribe .subscribe-form input[type="text"]::placeholder {
    color: rgba( 255, 255, 255, .42 ) ; }
.kma-footer__subscribe .subscribe-form input[type="text"]:focus {
    border-color: var(--kma-gold) ; }
.kma-footer__subscribe .input-group__btn { flex: none ; }
.kma-footer__subscribe .subscribe-form button {
    height: 46px ;
    margin: 0 ;
    padding: 0 20px ;
    border: 1px solid var(--kma-gold) ;
    background: var(--kma-gold) ;
    color: var(--kma-white) ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .16em ;
    text-transform: uppercase ;
    border-radius: 0 ;
    cursor: pointer ;
    transition: background .25s ease, border-color .25s ease ; }
.kma-footer__subscribe .subscribe-form button:hover {
    background: transparent !important;
    border-color: var(--kma-gold-2) !important;
    color: var(--kma-gold-2) !important; }
.kma-footer__subscribe .result_success,
.kma-footer__subscribe .result_error {
    font-size: .8rem ;
    margin-bottom: 10px ; }
.kma-footer__embed iframe { max-width: 100% ; }

/* --- copyright strip (shared markup) ------------------------ */
.footer-copyright {
    border-top: 1px solid rgba( 255, 255, 255, .12 ) ;
    background: transparent ;
    padding: 20px 0 ; }
.footer-copyright .row {
    max-width: var(--kma-shell) ;
    padding-left: var(--kma-gut) ;
    padding-right: var(--kma-gut) ; }
.footer-copyright .copyright,
.footer-copyright small {
    color: rgba( 255, 255, 255, .5 ) ;
    font-size: .74rem ;
    line-height: 1.7 ;
    text-align: center ; }
.footer-copyright .copyright a { color: rgba( 255, 255, 255, .7 ) ; }
.footer-copyright .copyright a:hover { color: var(--kma-gold-2) !important; }
.footer-copyright .copyright b,
.footer-copyright .copyright strong { color: rgba( 255, 255, 255, .74 ) ; }

/* --- responsive --------------------------------------------- */
@media only screen and (max-width: 1024px) {
    .kma-footer__grid { grid-template-columns: 1fr 1fr 1fr ; }
    .kma-footer__brand { grid-column: 1 / -1 ; }
}

@media only screen and (max-width: 767px) {
    .kma-footer__grid { grid-template-columns: 1fr 1fr ; gap: 30px 24px ; }
    .kma-footer__brand { grid-column: 1 / -1 ; align-items: flex-start ; }
    .kma-footer .kma-footer__heading { margin-bottom: 16px ; }
}

@media only screen and (max-width: 480px) {
    .kma-footer__grid { grid-template-columns: 1fr ; }
    .kma-footer__logo img { height: 48px ; }
}

/* ============================================================
   6 · INNER PAGES
   ------------------------------------------------------------
   Listing, detail, category, collection, package, contact,
   comments and schedule all reuse a handful of legacy shells:
     .header_background_div  page banner
     .product_page/.product_ul  product grid containers
     .item + .item_thumb + .item_details  one product card
     .pagination-div
   Those float-based grids are converted to CSS grid here.
   ============================================================ */

/* --- 6.1 page banner ---------------------------------------- */
/* style.css pins this to a fixed 245px (180/138 at breakpoints), which
   left the title and breadcrumbs floating in the top third of a
   half-empty band. Height follows the content instead. */
.header_background_div {
    position: relative ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    height: auto ;
    min-height: clamp( 150px, 18vw, 230px ) ;
    background-color: var(--kma-cream) ;
    background-size: cover ;
    background-position: center ;
    padding: clamp( 34px, 5vw, 64px ) 0 ;
    margin-bottom: clamp( 30px, 4vw, 56px ) ;
    text-align: center ; }
.header_background_div > .row {
    position: relative ;
    z-index: 2 ;
    max-width: var(--kma-shell) ;
    padding-left: var(--kma-gut) ;
    padding-right: var(--kma-gut) ; }

/* style.css lays these out as display:table with a fixed 122.5px
   height, which forces a tall empty band above short titles. */
.header_title_div,
.header_breadcrumbs_div {
    display: block ;
    width: 100% ;
    height: auto ;
    text-align: center ; }

.header_title_div h1,
.header_title_div h2 {
    display: block ;
    vertical-align: baseline ;
    padding-bottom: 0 ;
    font-family: var(--kma-serif) ;
    font-weight: 500 ;
    font-size: clamp( 2rem, 4.4vw, 3.2rem ) ;
    line-height: 1.1 ;
    letter-spacing: .01em ;
    color: var(--kma-ink) ;
    text-transform: none ;
    margin: 0 0 14px ; }

.header_breadcrumbs_div {
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .16em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ; }
.header_breadcrumbs_div a {
    color: var(--kma-muted) ;
    text-decoration: none ;
    transition: color .25s ease ; }
.header_breadcrumbs_div a:hover { color: var(--kma-gold) !important; }
.header_breadcrumbs_div ul {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex-wrap: wrap ;
    gap: 8px 10px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.header_breadcrumbs_div li { margin: 0 ; padding: 0 ; float: none ; }

/* --- 6.2 product grid --------------------------------------- */
.product_page,
.product_ul,
.kma-products .product_ul {
    display: grid ;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) ;
    gap: clamp( 18px, 2.2vw, 32px ) ;
    align-items: stretch ; }

/* Neutralise the legacy float widths inside the grid. */
.product_page > .item,
.product_ul > .item {
    width: auto ;
    float: none ;
    margin: 0 ;
    padding: 0 ;
    min-width: 0 ; }
.product_page > .clearfix,
.product_ul > .clearfix { display: none ; }

.item {
    display: flex ;
    flex-direction: column ;
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease ; }
.item:hover {
    border-color: rgba( 169, 139, 82, .55 ) !important;
    box-shadow: 0 18px 38px rgba( 14, 21, 15, .1 ) !important;
    transform: translateY( -3px ) !important; }

.item .item_thumb {
    position: relative ;
    overflow: hidden ;
    background: var(--kma-sand) ; }
.item .item_thumb > a { display: block ; position: relative ; }
/* Media boxes are sized in viewport units, not aspect-ratio or
   percentage padding. Both of those resolve against the element's own
   width, which a CSS grid does not know while it is sizing the row — so
   the row came out ~24px short of the tallest card and .item_details
   was clipped, spilling the sale price below the card border. A vw-based
   height has no such circular dependency, and keeps every card in a row
   exactly the same height. */
.item .crop_box {
    position: relative ;
    overflow: hidden ;
    height: clamp( 150px, 17vw, 240px ) ;
    padding-top: 0 ;
    background: var(--kma-sand) ; }
.item .crop_box > div {
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ; }
.item .crop_box img {
    position: absolute ;
    inset: 0 ;
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ;
    transition: transform .8s ease ; }
.item:hover .crop_box img { transform: scale( 1.05 ) !important; }
.item .crop_box .overlay img.hide { display: none ; }

/* Out-of-stock / New ribbons */
.item .item-icon-ul {
    position: absolute ;
    top: 12px ;
    left: 12px ;
    z-index: 3 ;
    display: flex ;
    flex-direction: column ;
    align-items: flex-start ;
    gap: 6px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.item .item-icon-ul li {
    margin: 0 ;
    padding: 6px 11px ;
    float: none ;
    background: var(--kma-ink) ;
    color: var(--kma-white) ;
    font-family: var(--kma-sans) ;
    font-size: .58rem ;
    font-weight: 600 ;
    letter-spacing: .16em ;
    text-transform: uppercase ;
    line-height: 1 ; }

/* Discount medallion — the legacy markup floats it above the
   card; pin it to the thumbnail's top-right instead. */
.item .sm_logo {
    position: absolute ;
    top: 12px ;
    right: 12px ;
    left: auto ;
    bottom: auto ;
    z-index: 3 ;
    width: auto ;
    height: auto ;
    margin: 0 ; }
.item .sm_logo .sm_logo_img { position: relative ; display: block ; }
.item .sm_logo .sm_logo_img_box {
    position: relative ;
    display: grid ;
    place-items: center ;
    width: 50px ;
    height: 50px ;
    border-radius: 50% ;
    background: var(--kma-gold) ; }
.item .sm_logo .sm_logo_img_box img { display: none ; }
.item .sm_logo .sm_logo_content_box {
    position: static ;
    color: var(--kma-white) ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 700 ;
    letter-spacing: .02em ;
    line-height: 1 ; }
.item .sm_logo .sm_logo_content { display: none ; }

.item .item_details {
    display: flex ;
    flex-direction: column ;
    gap: 10px ;
    padding: 18px 18px 22px ;
    position: relative ;
    /* 1 0 auto, not 1 1 auto: a card whose title wraps to two lines and
       carries both a struck-through and a sale price must grow the card,
       never be shrunk under its own content and spill past the border. */
    flex: 1 0 auto ;
    min-height: 0 ; }
.item .item_details h6 {
    margin: 0 ;
    font-family: var(--kma-sans) ;
    font-size: .8rem ;
    font-weight: 600 ;
    letter-spacing: .06em ;
    line-height: 1.5 ;
    text-transform: none ; }
.item .item_details h6 a {
    color: var(--kma-ink) ;
    text-decoration: none ;
    transition: color .25s ease ; }
.item .item_details h6 a:hover { color: var(--kma-gold) !important; }

/* The shared root bundle pins `.item_price { height: 21px }`. A card
   carrying both a struck-through and a sale price needs ~67px, so the
   sale price was painted outside the card border. Overridden here (this
   file loads after Css/style.min.css; the shared bundle is untouched). */
.item .item_price {
    display: flex ;
    align-items: baseline ;
    flex-wrap: wrap ;
    gap: 4px 10px ;
    height: auto ;
    min-height: 0 ;
    position: static ;
    left: auto ;
    bottom: auto ;
    text-align: left ;
    justify-content: flex-start ;
    margin-top: auto ;
    padding-top: 4px ; }
.item .item_ori_price {
    display: inline-flex ;
    flex-wrap: wrap ;
    gap: 2px 8px ;
    color: var(--kma-sage) ;
    font-size: .8rem ;
    text-decoration: line-through ; }
.item .item_sales_price {
    color: var(--kma-forest) ;
    font-family: var(--kma-sans) ;
    font-size: 1rem ;
    font-weight: 700 ;
    letter-spacing: .01em ; }
.item .f-s-12 { color: var(--kma-muted) ; font-size: .76rem ; }

.product_page > p,
.product_ul > p {
    grid-column: 1 / -1 ;
    text-align: center ;
    color: var(--kma-muted) ;
    padding: 40px 0 ; }

/* --- 6.3 pagination ----------------------------------------- */
.pagination-div {
    display: flex ;
    justify-content: center ;
    margin: clamp( 30px, 4vw, 52px ) 0 0 ; }
.pagination-div ul {
    display: flex ;
    align-items: center ;
    flex-wrap: wrap ;
    gap: 8px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.pagination-div li { margin: 0 ; padding: 0 ; float: none ; }
.pagination-div a,
.pagination-div span {
    display: grid ;
    place-items: center ;
    min-width: 40px ;
    height: 40px ;
    padding: 0 12px ;
    border: 1px solid var(--kma-line) ;
    color: var(--kma-ink) ;
    font-family: var(--kma-sans) ;
    font-size: .74rem ;
    font-weight: 600 ;
    letter-spacing: .06em ;
    text-decoration: none ;
    transition: all .25s ease ; }
.pagination-div a:hover {
    border-color: var(--kma-forest) !important;
    background: var(--kma-forest) !important;
    color: var(--kma-white) !important; }
.pagination-div .active a,
.pagination-div li.active span,
.pagination-div a.active {
    border-color: var(--kma-gold) ;
    background: var(--kma-gold) ;
    color: var(--kma-white) ; }

/* --- 6.4 content shells ------------------------------------- */
.section_middle > .middle > .row,
.web-content > section > .middle > .row {
    max-width: var(--kma-shell) ;
    padding-left: var(--kma-gut) ;
    padding-right: var(--kma-gut) ; }

.web-content .row.alphagrid-row-content { padding-bottom: clamp( 30px, 4vw, 60px ) ; }

/* --- 6.5 forms ---------------------------------------------- */
.web-content input[type="text"],
.web-content input[type="email"],
.web-content input[type="tel"],
.web-content input[type="number"],
.web-content input[type="password"],
.web-content input[type="date"],
.web-content select,
.web-content textarea {
    font-family: var(--kma-body) ;
    font-size: .92rem ;
    color: var(--kma-ink) ;
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ;
    border-radius: 0 ;
    padding: 12px 14px ;
    outline: none ;
    max-width: 100% ;
    transition: border-color .25s ease, box-shadow .25s ease ; }
.web-content input[type="text"]:focus,
.web-content input[type="email"]:focus,
.web-content input[type="tel"]:focus,
.web-content input[type="number"]:focus,
.web-content input[type="password"]:focus,
.web-content input[type="date"]:focus,
.web-content select:focus,
.web-content textarea:focus {
    border-color: var(--kma-gold) ;
    box-shadow: 0 0 0 3px rgba( 169, 139, 82, .14 ) ; }
.web-content textarea { min-height: 130px ; resize: vertical ; }
.web-content label {
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ; }

.web-content button[type="submit"],
.web-content input[type="submit"],
.web-content .button,
.web-content .btn_style {
    font-family: var(--kma-sans) ;
    text-transform: uppercase ;
    letter-spacing: .18em ;
    font-size: .72rem ;
    font-weight: 600 ;
    padding: 15px 32px ;
    border: 1px solid var(--kma-forest) ;
    background: var(--kma-forest) ;
    color: var(--kma-white) ;
    border-radius: 0 ;
    cursor: pointer ;
    transition: background .3s ease, border-color .3s ease, color .3s ease ; }
/* Hover text is ink, not white. White on --kma-gold (#a98b52) is only a
   3.24:1 contrast ratio - below the 4.5:1 AA floor - and at .72rem uppercase
   with .18em tracking it washed out badly enough to read as the label
   vanishing into the background. Ink on the same gold is 4.83:1. */
.web-content button[type="submit"]:hover,
.web-content input[type="submit"]:hover,
.web-content .button:hover,
.web-content .btn_style:hover {
    background: var(--kma-gold) !important;
    border-color: var(--kma-gold) !important;
    color: var(--kma-ink) !important; }

/* --- 6.6 responsive ----------------------------------------- */
@media only screen and (max-width: 1024px) {
    .product_page,
    .product_ul,
    .kma-products .product_ul { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) ; }
}

@media only screen and (max-width: 767px) {
    .product_page,
    .product_ul,
    .kma-products .product_ul {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ;
        gap: 14px ; }
    .item .item_details { padding: 14px 13px 18px ; gap: 8px ; }
    .item .item_details h6 { font-size: .74rem ; }
    .item .item_sales_price { font-size: .9rem ; }
    .item .sm_logo .sm_logo_img_box { width: 42px ; height: 42px ; }
    .header_background_div { margin-bottom: 26px ; }
}

@media only screen and (max-width: 400px) {
    .product_page,
    .product_ul,
    .kma-products .product_ul { grid-template-columns: 1fr ; }
}

/* ============================================================
   7 · FIXES FOR HIGHER-SPECIFICITY LEGACY SELECTORS
   ============================================================ */

/* style.css carries `#owl-demo .sm_logo img { display:block }` — an ID
   selector (1,1,1) that outranks the class-only rule in section 6, so the
   red sprite leaked back in inside carousels only. */
#owl-demo .sm_logo .sm_logo_img_box img,
#owl-demo .sm_logo span img,
.item .sm_logo .sm_logo_img_box img {
    display: none ; }

/* Breadcrumbs are an <ol class="product_breadcrumbs_ol">, not a <ul>. */
.header_breadcrumbs_div ol,
.header_breadcrumbs_div .product_breadcrumbs_ol {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex-wrap: wrap ;
    gap: 6px 10px ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.header_breadcrumbs_div ol li {
    margin: 0 ;
    padding: 0 ;
    float: none ;
    display: inline-flex ;
    align-items: center ;
    gap: 10px ; }
.header_breadcrumbs_div ol li a,
.header_breadcrumbs_div ol li span { color: var(--kma-muted) ; }
.header_breadcrumbs_div ol li a:hover { color: var(--kma-gold) !important; }
.header_breadcrumbs_div i { font-size: .6rem ; opacity: .6 ; }

/* Two banner shapes exist in this template. The correct one nests
   .row > .twelve columns inside .header_background_div, so the flex
   container gets a single child and the title stacks above the
   breadcrumbs. The other shape hangs both divs straight off the
   banner, making them two flex siblings laid out side by side
   (title left, breadcrumbs right) and skipping the `> .row` shell.
   The template's own files are all the first shape now; this keeps
   the second shape rendering correctly if one turns up again. */
.header_background_div { flex-wrap: wrap ; }
.header_background_div > .header_title_div,
.header_background_div > .header_breadcrumbs_div {
    flex: 0 0 100% ;
    max-width: var(--kma-shell) ;
    margin-left: auto ;
    margin-right: auto ;
    padding-left: var(--kma-gut) ;
    padding-right: var(--kma-gut) ; }

/* Carousel items need breathing room; owl sets only a width. */
.owl-product .owl-item > .item { margin: 0 8px ; }
.owl-product .owl-item { padding: 4px 0 ; }

/* Quality-score dial is rendered at a display size that dwarfs the
   section it sits in. */
.quality_score_number,
.quality-score-number {
    font-size: clamp( 2.6rem, 5vw, 4rem ) ; }

/* --- product detail ----------------------------------------- */
.product_details_title h1,
.product_title h1 {
    font-family: var(--kma-sans) ;
    font-size: clamp( 1.1rem, 2vw, 1.45rem ) ;
    font-weight: 600 ;
    letter-spacing: .06em ;
    line-height: 1.4 ;
    color: var(--kma-ink) ; }

.product_price,
.product_sales_price {
    font-family: var(--kma-sans) ;
    font-weight: 700 ;
    color: var(--kma-forest) ; }

.product_addcart,
.addtocart {
    font-family: var(--kma-sans) !important ;
    letter-spacing: .16em ;
    text-transform: uppercase ;
    border-radius: 0 !important ; }

/* Tabs on the product detail page */
.product_tab_ul li a,
.tab_ul li a {
    font-family: var(--kma-sans) ;
    font-size: .72rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ; }

/* Section headings that legacy pages render as <h2>/<h4> */
.related_product_title,
.product_related_title {
    font-family: var(--kma-serif) ;
    font-weight: 500 ;
    color: var(--kma-ink) ; }

/* ============================================================
   8 · COLLECTION & CATEGORY LANDING GRIDS
   ------------------------------------------------------------
   style.css renders .collection_img / .category_img as very large
   circles (border-radius 50% on an unconstrained image), which at
   1440px produced ~600px discs with the title pushed out of view.
   ============================================================ */

.collection_box,
.category_box {
    display: grid ;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) ;
    gap: clamp( 20px, 2.6vw, 34px ) ;
    align-items: stretch ;
    width: 100% ; }
.collection_box > .clearfix,
.category_box > .clearfix { display: none ; }

.collection_div,
.category_div {
    display: flex ;
    flex-direction: column ;
    width: auto ;
    height: auto ;
    float: none ;
    margin: 0 ;
    padding: 0 ;
    min-width: 0 ;
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease ; }
.collection_div:hover,
.category_div:hover {
    border-color: rgba( 169, 139, 82, .55 ) !important;
    box-shadow: 0 18px 38px rgba( 14, 21, 15, .1 ) !important;
    transform: translateY( -3px ) !important; }

.collection_img_div,
.category_img_div {
    position: relative ;
    overflow: hidden ;
    width: 100% ;
    height: clamp( 180px, 20vw, 280px ) ;
    margin: 0 ;
    padding: 0 ;
    border: 0 ;
    border-radius: 0 ;
    background: var(--kma-sand) ; }
.collection_img_div > a,
.category_img_div > a { position: absolute ; inset: 0 ; display: block ; width: 100% ; height: 100% ; }

.collection_img,
.category_img {
    width: 100% ;
    height: 100% ;
    max-width: none ;
    object-fit: cover ;
    display: block ;
    margin: 0 ;
    padding: 0 ;
    border: 0 ;
    border-radius: 0 ;
    transition: transform .8s ease ; }
.collection_div:hover .collection_img,
.category_div:hover .category_img { transform: scale( 1.05 ) !important; }

.collection_title_div,
.category_title_div {
    display: flex ;
    flex-direction: column ;
    align-items: flex-start ;
    gap: 14px ;
    padding: 22px 22px 26px ;
    width: auto ;
    height: auto ;
    position: static ;
    transform: none ;
    text-align: left ;
    flex: 1 1 auto ; }

.collection_title_div h2,
.category_title_div h2,
.collection_title_div h6,
.category_title_div h6 {
    margin: 0 ;
    font-family: var(--kma-serif) ;
    font-size: clamp( 1.2rem, 1.8vw, 1.6rem ) ;
    font-weight: 500 ;
    line-height: 1.25 ;
    letter-spacing: .01em ;
    text-transform: none ;
    color: var(--kma-ink) ; }
.collection_title_div h2 a,
.category_title_div h2 a {
    color: var(--kma-ink) ;
    text-decoration: none ;
    transition: color .25s ease ; }
.collection_title_div h2 a:hover,
.category_title_div h2 a:hover { color: var(--kma-gold) !important; }

.collection_title_div .button,
.category_title_div .button {
    margin: auto 0 0 ;
    padding: 13px 26px ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .18em ;
    text-transform: uppercase ;
    border: 1px solid var(--kma-forest) ;
    border-radius: 0 ;
    cursor: pointer ; }

@media only screen and (max-width: 1024px) {
    .collection_box,
    .category_box { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
}
@media only screen and (max-width: 560px) {
    .collection_box,
    .category_box { grid-template-columns: 1fr ; }
    .collection_title_div,
    .category_title_div { padding: 18px 18px 22px ; }
}

/* ============================================================
   9 · CONTACT PAGE
   ============================================================ */
.company_detail {
    padding-bottom: 8px ; }
.company_detail h1,
.company_detail h2,
.company_detail h3 {
    font-family: var(--kma-serif) ;
    font-weight: 500 ;
    font-size: clamp( 1.6rem, 3vw, 2.2rem ) ;
    line-height: 1.2 ;
    color: var(--kma-ink) ;
    margin: 0 0 22px ; }
.company_detail b,
.company_detail strong {
    display: inline-block ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ;
    margin-bottom: 2px ; }
.company_detail p { line-height: 1.8 ; margin: 0 0 14px ; }

/* The embedded map is deliberately full-bleed; give it a sane
   height and keep it from forcing a horizontal scrollbar. */
.web-content iframe[src*="google.com/maps"],
.web-content iframe[src*="maps/embed"] {
    display: block ;
    width: 100% ;
    max-width: 100% ;
    height: clamp( 260px, 34vw, 440px ) ;
    border: 0 ; }

.login_form .form_success,
.web-content .form_success {
    color: var(--kma-forest) ;
    font-family: var(--kma-sans) ;
    font-size: .78rem ;
    font-weight: 600 ;
    letter-spacing: .06em ; }

/* ============================================================
   10 · SCHEDULE / BOOKING PAGE
   ============================================================ */
.schedule-box { min-width: 0 ; }
.schedule-box .panel,
.web-content .panel {
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ;
    border-radius: 0 ;
    box-shadow: none ; }
.web-content .panel-body { padding: clamp( 18px, 2.4vw, 30px ) ; }

.web-content .form-group {
    display: flex ;
    flex-wrap: wrap ;
    align-items: center ;
    gap: 8px 16px ;
    margin-bottom: 18px ; }
.web-content .control-label {
    width: auto ;
    min-width: 140px ;
    text-align: left ;
    padding: 0 ;
    font-family: var(--kma-sans) ;
    font-size: .68rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ; }
.web-content .form-group > .col-sm-9,
.web-content .form-group > div:not(.control-label) {
    flex: 1 1 260px ;
    width: auto ;
    min-width: 0 ;
    padding: 0 ; }

.web-content .form-control,
.web-content .floating-input {
    width: 100% ;
    height: auto ;
    font-family: var(--kma-body) ;
    font-size: .92rem ;
    color: var(--kma-ink) ;
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ;
    border-radius: 0 ;
    box-shadow: none ;
    padding: 12px 14px ; }
.web-content .form-control:focus,
.web-content .floating-input:focus {
    border-color: var(--kma-gold) ;
    box-shadow: 0 0 0 3px rgba( 169, 139, 82, .14 ) ;
    outline: none ; }

.schedule-button,
.web-content .button-group .button {
    font-family: var(--kma-sans) ;
    font-size: .7rem ;
    font-weight: 600 ;
    letter-spacing: .16em ;
    text-transform: uppercase ;
    border-radius: 0 ; }

.booking_table { width: 100% ; border-collapse: collapse ; }
.booking_table th,
.booking_table td {
    padding: 12px 14px ;
    border-bottom: 1px solid var(--kma-line) ;
    font-size: .88rem ;
    text-align: left ; }
.booking_table th {
    font-family: var(--kma-sans) ;
    font-size: .66rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ;
    background: var(--kma-cream) ; }

/* Any legacy table on a template page should scroll, not push
   the page wider than the viewport. */
.web-content .table-responsive,
.web-content .booking_table_wrap { overflow-x: auto ; }

@media only screen and (max-width: 560px) {
    .web-content .form-group { flex-direction: column ; align-items: stretch ; gap: 6px ; }
    .web-content .control-label { min-width: 0 ; }
}

/* Monogram tile used wherever a category has no artwork yet. */
.kma-tile-placeholder {
    position: absolute ;
    inset: 0 ;
    display: grid ;
    place-items: center ;
    font-family: var(--kma-serif) ;
    font-size: clamp( 2.6rem, 5vw, 4rem ) ;
    color: rgba( 255, 255, 255, .9 ) ;
    background: linear-gradient( 155deg, var(--kma-forest) 0%, var(--kma-forest-2) 62%, var(--kma-ink) 100% ) ; }

/* Narrow single-column layouts get a shorter, wider media box so the
   cards do not become excessively tall. */
@media only screen and (max-width: 560px) {
    .collection_img_div,
    .category_img_div { height: clamp( 170px, 44vw, 230px ) ; }
}
@media only screen and (max-width: 400px) {
    .item .crop_box { height: clamp( 170px, 46vw, 220px ) ; }
    .kma-dest__media { height: clamp( 220px, 58vw, 300px ) ; }
}

/* ============================================================
   11 · AUTHORING KIT
   ------------------------------------------------------------
   The classes to use when composing the home page (or any page)
   in the CMS rich-text field. Paste the HTML, style lives here.

   Rules of the road:
     · Never use col-xs-* — changeColumnsName() rewrites those
       into the legacy `N columns` float grid.
     · Every block below is full-bleed and brings its own
       .kma-shell, so drop them in at the top level.
     · Images: upload via CMS Media, then reference the URL.
   ============================================================ */

/* --- 11.1 band: the section wrapper -------------------------- */
.kma-band {
    padding: clamp( 52px, 8vw, 112px ) 0 ; }
.kma-band--tight  { padding: clamp( 36px, 5vw, 68px ) 0 ; }
.kma-band--cream  { background: var(--kma-cream) ; }
.kma-band--sand   { background: var(--kma-sand) ; }
.kma-band--forest { background: var(--kma-forest) ; color: var(--kma-white) ; }
.kma-band--ink    { background: var(--kma-ink) ; color: var(--kma-white) ; }

.kma-band--forest .kma-display,
.kma-band--ink .kma-display { color: var(--kma-white) ; }
.kma-band--forest .kma-lede,
.kma-band--ink .kma-lede { color: rgba( 255, 255, 255, .8 ) ; }
.kma-band--forest .kma-eyebrow,
.kma-band--ink .kma-eyebrow { color: var(--kma-gold-2) ; }
.kma-band--forest p,
.kma-band--ink p { color: rgba( 255, 255, 255, .82 ) ; }

/* --- 11.2 split: image one side, copy the other -------------- */
.kma-split {
    display: grid ;
    grid-template-columns: 1fr 1fr ;
    align-items: center ;
    gap: clamp( 26px, 4vw, 64px ) ; }
.kma-split--rev .kma-split__media { order: 2 ; }
.kma-split--rev .kma-split__body  { order: 1 ; }

.kma-split__media {
    position: relative ;
    overflow: hidden ;
    height: clamp( 240px, 32vw, 460px ) ;
    background: var(--kma-sand) ; }
.kma-split__media img {
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ; }

.kma-split__body { min-width: 0 ; }
.kma-split__body .kma-display { margin: 14px 0 16px ; }
.kma-split__body p { line-height: 1.8 ; margin: 0 0 1.1em ; }
.kma-split__body > :last-child { margin-bottom: 0 ; }

/* --- 11.3 cards: an n-up feature row ------------------------- */
.kma-cards {
    display: grid ;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) ;
    gap: clamp( 20px, 2.6vw, 34px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.kma-cards--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
.kma-cards--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) ; }

.kma-card {
    margin: 0 ;
    padding: 0 ;
    display: flex ;
    flex-direction: column ;
    background: var(--kma-white) ;
    border: 1px solid var(--kma-line) ; }
.kma-band--forest .kma-card,
.kma-band--ink .kma-card {
    background: rgba( 255, 255, 255, .06 ) ;
    border-color: rgba( 255, 255, 255, .14 ) ; }

.kma-card__media {
    height: clamp( 170px, 18vw, 240px ) ;
    overflow: hidden ;
    background: var(--kma-sand) ; }
.kma-card__media img {
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ;
    transition: transform .8s ease ; }
.kma-card:hover .kma-card__media img { transform: scale( 1.05 ) !important; }

.kma-card__body {
    padding: 24px 24px 28px ;
    flex: 1 0 auto ; }
.kma-card__title {
    font-family: var(--kma-sans) ;
    font-size: .82rem ;
    font-weight: 600 ;
    letter-spacing: .1em ;
    text-transform: uppercase ;
    color: var(--kma-ink) ;
    margin: 0 0 12px ;
    line-height: 1.4 ; }
.kma-band--forest .kma-card__title,
.kma-band--ink .kma-card__title { color: var(--kma-white) ; }
.kma-card__text {
    color: var(--kma-muted) ;
    font-size: .92rem ;
    line-height: 1.7 ;
    margin: 0 ; }
.kma-band--forest .kma-card__text,
.kma-band--ink .kma-card__text { color: rgba( 255, 255, 255, .78 ) ; }

/* --- 11.4 steps: numbered process row ------------------------ */
.kma-steps {
    display: grid ;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) ;
    gap: clamp( 22px, 3vw, 40px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ; }
.kma-steps--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) ; }
.kma-step {
    margin: 0 ;
    padding: 22px 0 0 ;
    border-top: 1px solid var(--kma-line) ; }
.kma-band--forest .kma-step,
.kma-band--ink .kma-step { border-top-color: rgba( 255, 255, 255, .22 ) ; }
.kma-step__num {
    font-family: var(--kma-serif) ;
    font-size: 2rem ;
    line-height: 1 ;
    color: var(--kma-gold) ;
    display: block ; }
.kma-step__title {
    font-family: var(--kma-sans) ;
    font-size: .78rem ;
    font-weight: 600 ;
    letter-spacing: .14em ;
    text-transform: uppercase ;
    margin: 16px 0 10px ; }
.kma-step__text {
    color: var(--kma-muted) ;
    font-size: .9rem ;
    line-height: 1.7 ;
    margin: 0 ; }
.kma-band--forest .kma-step__text,
.kma-band--ink .kma-step__text { color: rgba( 255, 255, 255, .74 ) ; }

/* --- 11.5 stats ---------------------------------------------- */
.kma-stats {
    display: grid ;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) ;
    gap: clamp( 20px, 3vw, 40px ) ;
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    text-align: center ; }
.kma-stat { margin: 0 ; padding: 0 ; }
.kma-stat__num {
    display: block ;
    font-family: var(--kma-serif) ;
    font-size: clamp( 2.2rem, 4vw, 3.2rem ) ;
    font-weight: 500 ;
    line-height: 1 ;
    color: var(--kma-forest) ; }
.kma-band--forest .kma-stat__num,
.kma-band--ink .kma-stat__num { color: var(--kma-gold-2) ; }
.kma-stat__label {
    display: block ;
    margin-top: 12px ;
    font-family: var(--kma-sans) ;
    font-size: .66rem ;
    font-weight: 600 ;
    letter-spacing: .18em ;
    text-transform: uppercase ;
    color: var(--kma-muted) ; }
.kma-band--forest .kma-stat__label,
.kma-band--ink .kma-stat__label { color: rgba( 255, 255, 255, .7 ) ; }

/* --- 11.6 centred call to action ----------------------------- */
.kma-cta { text-align: center ; }
.kma-cta .kma-head { align-items: center ; }
.kma-cta__actions {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    gap: 16px ;
    flex-wrap: wrap ;
    margin-top: 30px ; }

/* --- 11.7 responsive ----------------------------------------- */
@media only screen and (max-width: 1024px) {
    .kma-cards--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
    .kma-steps--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
    .kma-stats    { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
}

@media only screen and (max-width: 767px) {
    .kma-split { grid-template-columns: 1fr ; }
    .kma-split--rev .kma-split__media { order: 1 ; }
    .kma-split--rev .kma-split__body  { order: 2 ; }
    .kma-cards,
    .kma-cards--2,
    .kma-cards--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) ; }
    .kma-steps,
    .kma-steps--4 { grid-template-columns: 1fr ; }
}

@media only screen and (max-width: 520px) {
    .kma-cards,
    .kma-cards--2,
    .kma-cards--4 { grid-template-columns: 1fr ; }
    .kma-stats    { grid-template-columns: 1fr ; gap: 26px ; }
    .kma-cta__actions .kma-btn { flex: 1 1 100% ; }
}

/* ============================================================
   12 · DISCOUNT MEDALLION ON THE PRODUCT DETAIL PAGE
   ============================================================ */

/* Section 6's medallion is scoped to `.item`, i.e. product CARDS. The
   product DETAIL page (temp_product_detail.php:64) renders the same
   markup inside `.elevatezoom_box` with no `.item` ancestor, so it still
   falls through to style.css's PNG sprite — and that path is off-centre:
   style.css:10349, inside @media (min-width:981px) and (max-width:1200px),
   overrides `.sm_logo span img` to width:35px but leaves height at 40px,
   while `.sm_logo_content_box` stays a fixed 40x40 with line-height:40.
   Measured at a 1100px viewport: sprite 35x40, text box 40x40, the
   percentage sitting 2.5px right of the circle's centre.

   Centre by stacking sprite and text in a single grid cell — independent
   of either box's size, so it survives that width override and any other.
   `.item` rules are (0,3,x) and keep winning, so cards are untouched. */
.sm_logo .sm_logo_img_box {
    display: grid ;
    place-items: center ; }
.sm_logo .sm_logo_img_box img,
.sm_logo .sm_logo_img_box .sm_logo_content_box {
    grid-area: 1 / 1 ; }
.sm_logo .sm_logo_img_box img {
    width: 40px ;
    height: 40px ; }
.sm_logo .sm_logo_img_box .sm_logo_content_box {
    position: static ;
    width: auto ;
    height: auto ;
    line-height: 1 ; }

/* ============================================================
   13 · CHECKOUT ADDRESS PICKER
   ============================================================ */

/* Page/temp_checkout.php wraps the saved-address dropdown and the Add
   Shipping Address button in `.checkout-address-picker` for Template18 only,
   putting both into the same grid column as the text inputs. The button still
   carries the legacy `float_right`, so it shrink-wraps to its own text and
   lands at a different width from the field above it. Stretch it to the
   column so dropdown, button and inputs share one left and right edge. */
.checkout-address-picker .add_address {
    float: none ;
    display: block ;
    width: 100% ;
    margin: 0 ; }

/* ============================================================
   14 · BUTTON HOVER — SITE-WIDE
   ============================================================ */

/* Section 6.5 only reaches buttons inside `.web-content`. Buttons in the
   header, the footer and the checkout modals sit outside it and fell through
   to style.css `.button:hover { color:#fff; background:#777 }`, so hover was
   inconsistent across the site. Give every button the same gold/ink hover.
   Both colours are always declared together so the pair can never collapse
   to a single value, whatever a later stylesheet sets. all.css loads last,
   so this wins over style.css at equal specificity. */
.button:hover,
.button:focus-visible,
.btn_style:hover,
.btn_style:focus-visible {
    background: var(--kma-gold) !important;
    border-color: var(--kma-gold) !important;
    color: var(--kma-ink) !important; }

/* ============================================================
   15 · CART QUANTITY STEPPER
   ============================================================ */

/* Root Css/all-cart.css absolutely positions `.cart-quantity .sp-minus`
   and `.sp-plus` at `top:0` with a hard `height:37px`, on the assumption
   that the quantity input is 37px too. Section 11 above gives
   `.web-content .form-control` `height:auto` + `padding:12px 14px`, and
   the root `.form-control` `line-height:33px` survives that — so the
   input computes to ~59px. The two buttons stayed pinned at 37px in the
   top corners, leaving a bare strip of input visible underneath them.

   Stretch the buttons to whatever height the input resolves to instead of
   restating a pixel value, so this holds if the field padding changes.

   Scoped to `.cart-quantity` on purpose: `.sp-minus` / `.sp-plus` are
   shared with the product-detail stepper (style.css:8337) and the
   `.cart-quantity2` variant (style.css:11129), and those two are laid out
   as 40px floats, not absolutes. Neither is touched here. */
.web-content .cart-quantity .sp-minus,
.web-content .cart-quantity .sp-plus {
    top: 0 ;
    bottom: 0 ;
    height: auto ;
    display: flex ;
    align-items: center ;
    justify-content: center ; }

/* all-cart.css centres the glyphs with `line-height:37px`, which fights the
   flex centring above once the box is taller than 37px. */
.web-content .cart-quantity .sp-minus .cart_minus,
.web-content .cart-quantity .sp-plus .cart_plus {
    line-height: 1 ; }

/* dcart.php renders two markup variants: `.quantity-minus` wraps the icon in
   `<a class="ddd">`, `.quantity-minus2` puts the `<i>` straight in the div.
   Make the anchor fill its parent so the whole button is clickable, not just
   the glyph; variant 2 is already centred by the flex rule above. */
.web-content .cart-quantity .sp-minus a,
.web-content .cart-quantity .sp-plus a {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    width: 100% ;
    height: 100% ; }

/* The buttons overlap the input, so keep the number clear of both. 35px
   button + 3px breathing room; `text-align:center` from all-cart.css still
   centres within what is left. */
.web-content .cart-quantity input[type="text"] {
    padding-left: 38px ;
    padding-right: 38px ; }