/* ==========================================================================
   Uh Oh! brand theme — Scandinavian kidswear, playful & premium.
   Design tokens ported from the "Uh Oh Adventures" Lovable project.
   Loaded after styles.css, so rules here win without !important where possible.
   ========================================================================== */

:root {
    /* Uh Oh brand palette — from the "Uh Oh Shop.dc.html" design comp (supersedes the earlier Lovable-source palette) */
    --uhoh-cream: #fbf9f2;
    --uhoh-beige: #efe8dc;
    --uhoh-butter: #eee2a8;
    --uhoh-butter-deep: #e6d17e;
    --uhoh-coral: #d98f74;
    --uhoh-sky: #b7d3dd;
    --uhoh-mint: #a8d9c0;
    --uhoh-berry: #5c2530;
    --uhoh-ink: #423d3a;
    --uhoh-ink-muted: #8f8681;
    --uhoh-border: rgba(66, 61, 58, 0.12);
    --uhoh-logo-orange: #ff6a1c;

    --uhoh-font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --uhoh-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

    /* hairline "ring card" for resting grid cards; soft float for badges/floating elements; blur lift for hover */
    --uhoh-shadow-soft: 0 0 0 1px var(--uhoh-border);
    --uhoh-shadow-float: 0 8px 24px rgba(66, 61, 58, 0.10);
    --uhoh-shadow-lift: 0 16px 40px rgba(66, 61, 58, 0.14);
}

@keyframes uhoh-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes uhoh-drift {
    from { transform: translateX(-15vw); }
    to { transform: translateX(115vw); }
}
@keyframes uhoh-twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes uhoh-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- full-width layout (override the base theme's boxed/fixed-width containers at every breakpoint) ---- */
.header,
.header-menu,
.master-wrapper-content,
.footer-upper,
.footer-lower {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: clamp(1.25rem, 4vw, 4rem) !important;
    padding-right: clamp(1.25rem, 4vw, 4rem) !important;
}
/* space every page's content (both the sidebar and the main column alike) off
   the sticky header — set on the shared wrapper above both .side-2 and .center-2
   so the two columns stay visually aligned, instead of on .page-title which only
   lives inside the main column and would leave the sidebar flush against the header */
.master-wrapper-content {
    padding-top: 2.5rem !important;
}
.header-lower,
.header-upper > div,
.header-links-wrapper,
.header-selectors-wrapper {
    box-sizing: border-box;
}

/* ---- base ---- */
html {
    height: 100%;
}
body {
    background-color: var(--uhoh-cream) !important;
    color: var(--uhoh-ink) !important;
    font-family: var(--uhoh-font-sans) !important;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
}
/* pin the footer to the viewport bottom on short pages (e.g. empty cart) instead
   of letting it float directly under the content */
.master-wrapper-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.master-wrapper-content {
    flex: 1 0 auto;
}
.footer {
    flex-shrink: 0;
}
h1, h2, h3, h4,
.uhoh-font-display {
    font-family: var(--uhoh-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}
a { color: var(--uhoh-ink); }
::selection { background: var(--uhoh-butter); }

/* ---- buttons everywhere (cart, forms, etc.) ---- */
button, .button-1, .button-2, input[type="submit"] {
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border: 2px solid var(--uhoh-ink) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    text-transform: none !important;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
button:hover, .button-1:hover, .button-2:hover, input[type="submit"]:hover {
    background-color: var(--uhoh-ink) !important;
    transform: translateY(-2px) scale(1.03);
}

/* ---- merged header row: logo | nav | selectors | icons (matches reference layout) ---- */
.uhoh-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}
.uhoh-main-row > * {
    min-width: 0;
}
.uhoh-main-row .header-logo {
    margin: 0 !important;
    justify-self: start;
}
.uhoh-main-row .header-menu {
    grid-column: 2;
    justify-self: center;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}
/* nav row only takes over at the same ≥1001px breakpoint the base theme uses to switch
   from the mobile "Menu" toggle to the inline nav — avoids both showing at once */
@media (min-width: 1001px) {
    .uhoh-main-row .header-menu > ul.top-menu.notmobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        flex-wrap: wrap;
        font-size: 1rem;
    }
    .uhoh-main-row .header-menu > ul.top-menu.notmobile > li {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        display: block !important;
    }
    .uhoh-main-row .header-menu > ul.top-menu.notmobile > li > a {
        display: inline-block;
        padding: .5rem .9rem !important;
        font-size: .875rem !important;
        font-weight: 600;
        color: #ffe6a6 !important;
        text-transform: none;
    }
    .uhoh-main-row .header-menu > ul.top-menu.notmobile > li > a:hover {
        background: #ffe6a6;
        color: #4f9281 !important;
        transform: translateY(-1px);
    }
    .uhoh-main-row .header-menu > ul.top-menu.notmobile > li.active > a {
        color: #fff !important;
    }
    .uhoh-main-row .header-menu > ul.top-menu.notmobile > li.active > a:hover {
        color: #4f9281 !important;
    }
    .uhoh-main-row .menu-toggle {
        display: none !important;
    }
}
/* mobile header row: the desktop grid gives the logo and icon columns equal
   1fr tracks, but on narrow screens the icon cluster (search/wishlist/
   account/cart) is wider than the logo, so the equal split leaves the logo
   column with unused space while the icons overflow their column and
   crowd/overlap the Menu button — size both side columns to their actual
   content instead so the row balances correctly. */
@media (max-width: 1000px) {
    .uhoh-main-row {
        grid-template-columns: auto 1fr auto;
    }
}

/* mobile nav dropdown: the grid column that holds .header-menu only sizes to
   the "Menu" toggle button, so the dropdown list needs to escape that column
   (via position:absolute against the full-width row) instead of being
   squeezed into it — otherwise it renders as a narrow floating box and the
   flex row's default align-items:stretch stretches the toggle button to
   match the open dropdown's height. */
@media (max-width: 1000px) {
    .uhoh-main-row {
        position: relative;
    }
    .uhoh-main-row .header-menu {
        position: static !important;
        align-items: flex-start;
    }
    .uhoh-main-row .top-menu.mobile {
        position: absolute;
        top: 100%;
        left: clamp(1.25rem, 4vw, 4rem);
        right: clamp(1.25rem, 4vw, 4rem);
        z-index: 50;
        margin: .5rem 0 0 !important;
    }
    /* search dropdown: same fix as the nav dropdown above — anchoring it to
       the search icon (via .uhoh-search-item's position:relative) lets a
       320px-wide panel hang off the left edge of the header at narrow
       widths, since the icon sits well right-of-center in the row. Anchor
       it to the full-width row instead. */
    .uhoh-search-item,
    .uhoh-main-row .header-links-wrapper {
        position: static !important;
    }
    .uhoh-search-panel {
        top: 100% !important;
        left: clamp(1.25rem, 4vw, 4rem) !important;
        right: clamp(1.25rem, 4vw, 4rem) !important;
        width: auto !important;
        margin-top: .5rem;
    }
}

.uhoh-main-row .uhoh-header-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.uhoh-main-row .header-links-wrapper {
    flex: none;
    padding: 0 !important;
}

/* language/currency/tax selectors, relocated into the main row next to the icons */
.uhoh-header-selectors {
    flex: none;
    display: flex !important;
    align-items: center;
    gap: .5rem;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
.uhoh-header-selectors > div {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}
.uhoh-header-selectors select {
    font-family: var(--uhoh-font-sans);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--uhoh-ink);
    border-radius: 999px !important;
    border: 1.5px solid var(--uhoh-border) !important;
    padding: .4rem 1rem !important;
    height: auto !important;
    background: #fff;
    cursor: pointer;
}

/* neutralize the base theme's #topcartlink ID rules (width/background/padding) that would
   otherwise beat our class-based icon-button styling */
#topcartlink {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* ---- mini-cart flyout: right-side drawer shown when the cart icon is clicked ----
   the base theme's own ".flyout-cart.active { display:block }" rule is scoped to
   "(min-width: 1001px)" only, so on narrower viewports the earlier unconditional
   ".flyout-cart { display:none }" rule wins and nothing we set below (position,
   transform, etc.) ever becomes visible. Set display explicitly here, at every
   width, so the drawer works the same on mobile as on desktop. */
.uhoh-flyout-cart {
    display: none;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 400px;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    background-color: #fff !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.15) !important;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    z-index: 1000 !important;
}
.uhoh-flyout-cart.active {
    display: block !important;
    transform: translateX(0);
}
.uhoh-mini-cart {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    font-size: 1rem !important;
}
.uhoh-cart-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--uhoh-border);
}
.uhoh-cart-title {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #4f9281;
}
.uhoh-cart-close {
    background: none !important;
    border: none !important;
    color: var(--uhoh-ink) !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer;
}
.uhoh-cart-close:hover {
    transform: none !important;
    background: none !important;
}
.uhoh-cart-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
}
.uhoh-cart-empty {
    margin: auto;
    color: var(--uhoh-ink-muted);
    font-size: .9375rem;
}
.uhoh-cart-content .items {
    width: 100%;
}
/* the base theme's own .mini-shopping-cart item styles are scoped to
   "(min-width: 1001px)" only, so on mobile they'd otherwise render totally
   unstyled — restate them here, unconditionally, for every width */
.uhoh-cart-content .item {
    display: flow-root;
    padding: 1rem 0;
    border-bottom: 1px solid var(--uhoh-border);
}
.uhoh-cart-content .item:last-child {
    border-bottom: none;
}
.uhoh-cart-content .picture {
    float: left;
    width: 64px;
}
.uhoh-cart-content .picture a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--uhoh-beige);
    aspect-ratio: 1 / 1;
}
.uhoh-cart-content .picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.uhoh-cart-content .picture + .product {
    margin-left: 80px;
}
.uhoh-cart-content .product .name {
    margin: 0 0 .35rem;
    font-size: .9375rem;
    font-weight: 700;
}
.uhoh-cart-content .product .name a {
    color: var(--uhoh-ink);
}
.uhoh-cart-content .product .name a:hover {
    color: var(--uhoh-teal, var(--uhoh-ink));
    text-decoration: underline;
}
.uhoh-cart-footer .uhoh-cart-empty-link {
    display: block;
    margin: .9rem auto 0;
    padding: 0;
    background: none !important;
    border: none !important;
    box-shadow: none;
    color: var(--uhoh-ink) !important;
    font-size: .875rem !important;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transform: none !important;
}
.uhoh-cart-footer .uhoh-cart-empty-link:hover {
    color: var(--uhoh-teal, var(--uhoh-ink)) !important;
}
.uhoh-cart-content .product .attributes,
.uhoh-cart-content .product .price,
.uhoh-cart-content .product .quantity {
    margin: .2rem 0 0;
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-cart-footer {
    flex: none;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--uhoh-border);
}
.uhoh-cart-footer .totals {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 1rem;
}
.uhoh-cart-footer .buttons {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.uhoh-cart-footer .buttons input {
    width: 100%;
    /* base reset zeroes this input's padding, leaving a cramped 22px-tall
       button - match the Checkout button's sizing elsewhere on the site */
    height: auto;
    padding: .7rem 1.25rem !important;
    font-size: 1rem;
}

/* ---- icon buttons (wishlist / account / cart) ---- */
.uhoh-header-icons ul {
    display: flex !important;
    align-items: center;
    gap: .125rem;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
}
.uhoh-header-icons li {
    display: block !important;
    margin: 0 !important;
}
.header-links a.uhoh-icon-btn,
.uhoh-icon-btn,
#topcartlink a.uhoh-icon-btn {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40px;
    height: 40px;
    line-height: normal !important;
    text-transform: none !important;
    font-size: 0 !important;
    box-sizing: border-box;
    border-radius: 999px;
    color: #ffe6a6 !important;
    transition: background-color .2s ease, transform .2s ease;
}
.uhoh-icon-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
}
.uhoh-icon-btn:hover {
    background: rgba(255,230,166,.18);
    transform: translateY(-1px);
}
.header-links span.uhoh-icon-badge,
.uhoh-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--uhoh-coral);
    color: var(--uhoh-ink);
    font-size: .625rem !important;
    font-weight: 800;
    line-height: 15px !important;
    text-align: center;
    display: none !important;
}
.header-links span.uhoh-icon-badge.uhoh-has-count,
.uhoh-icon-badge.uhoh-has-count {
    display: block !important;
}

/* ---- header search icon + dropdown panel ---- */
.uhoh-search-item {
    position: relative;
}
.uhoh-header-icons button.ico-search.uhoh-icon-btn {
    border: none !important;
    cursor: pointer;
}
.uhoh-search-panel {
    display: none !important;
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 60;
    width: min(320px, 90vw);
    background: #fff;
    border-radius: 1.25rem;
    /* a downward-only shadow: any positive blur radius spreads outward in
       every direction from the offset shadow rect, including back up past
       the panel's own top edge — which read as a stray gray line floating
       over the header. The negative spread shrinks that rect first so the
       blur has nothing left to bleed upward with. */
    box-shadow: 0 14px 24px -10px rgba(66, 61, 58, 0.35);
    padding: .9rem;
}
.uhoh-search-panel.active {
    display: block !important;
    animation: uhoh-rise .25s cubic-bezier(.22,1,.36,1) both;
}
.uhoh-search-panel #small-search-box-form {
    display: flex;
    gap: .5rem;
}
.uhoh-search-panel .search-box-text {
    flex: 1;
    min-width: 0;
    border-radius: 999px !important;
    border: 1.5px solid var(--uhoh-border) !important;
    padding: .55rem 1rem !important;
    font-size: .875rem;
}
.uhoh-search-panel .search-box-button {
    flex: none;
    padding: .55rem 1rem !important;
}
/* the autocomplete dropdown (jQuery UI, appendTo: '.search-box') gets
   inserted as a <ul> inside this panel, which itself lives inside
   ".uhoh-header-icons" - two rules meant only for the icon row bleed onto
   it as a result: ".uhoh-header-icons ul { display:flex }" (splits the 4
   results into narrow side-by-side columns, wrapping each word onto its
   own line) and ".header-links a { color: #ffe6a6 }" (pale butter text,
   low contrast on white). Override both, and tidy up the result while
   at it - base styles.css's own .ui-autocomplete rules only set width/
   padding/borders, nothing else conflicts here. */
.uhoh-search-panel .ui-autocomplete {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-height: 60vh;
    overflow-y: auto;
    margin-top: .75rem;
    border: none !important;
    border-top: 1px solid var(--uhoh-border) !important;
    border-radius: 0;
}
.uhoh-search-panel .ui-autocomplete li {
    border-top: 1px solid var(--uhoh-border) !important;
}
.uhoh-search-panel .ui-autocomplete li:first-child {
    border-top: none !important;
}
.uhoh-search-panel .ui-autocomplete a {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    color: var(--uhoh-ink) !important;
    font-family: var(--uhoh-font-sans);
    font-size: .875rem !important;
}
/* the result text sits in a nested <span> (added by the autocomplete's own
   _renderItem override in SearchBox/Default.cshtml), which
   ".header-links a, .header-links span" also matches directly - setting
   color on the parent <a> alone doesn't override a same-or-higher-
   specificity rule that targets this span itself */
.uhoh-search-panel .ui-autocomplete a span {
    color: var(--uhoh-ink) !important;
}
.uhoh-search-panel .ui-autocomplete a:hover,
.uhoh-search-panel .ui-autocomplete a.ui-state-focus {
    background-color: var(--uhoh-beige) !important;
    border-radius: .6rem;
}
.uhoh-search-panel .ui-autocomplete img {
    flex: none;
    border-radius: .6rem;
    object-fit: cover;
}

/* ---- header ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #4f9281;
    border-bottom: none;
    transition: background-color .3s ease;
}
/* homepage only (see Home/Index.cshtml's scroll-scrub script): transparent,
   white nav while the cinematic video is still visible/scrubbing behind the
   header, reverting to the normal solid teal/beige header once it finishes */
.header.uhoh-header-on-cinematic {
    background: transparent !important;
    box-shadow: none !important;
}
.header.uhoh-header-on-cinematic .header-upper,
.header.uhoh-header-on-cinematic .header-lower,
.header.uhoh-header-on-cinematic .uhoh-main-row {
    background: transparent !important;
}
.header.uhoh-header-on-cinematic .top-menu.notmobile > li > a,
.header.uhoh-header-on-cinematic .uhoh-main-row .header-menu > ul.top-menu.notmobile > li > a,
.header.uhoh-header-on-cinematic .uhoh-icon-btn,
.header.uhoh-header-on-cinematic .uhoh-header-selectors select,
/* the cart icon's own rule ("#topcartlink a.uhoh-icon-btn") carries an ID
   selector, which outranks this block's classes-only specificity even
   with !important on both sides - match its ID to actually win */
.header.uhoh-header-on-cinematic #topcartlink a.uhoh-icon-btn {
    color: #fff !important;
}
.header.uhoh-header-on-cinematic .uhoh-main-row .header-menu > ul.top-menu.notmobile > li > a:hover,
.header.uhoh-header-on-cinematic .top-menu.notmobile > li > a:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
}
.header.uhoh-header-on-cinematic .header-logo svg path {
    fill: #fff !important;
    transition: fill .3s ease;
}
.header.uhoh-header-on-cinematic .menu-toggle {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
}
.header-upper {
    background: var(--uhoh-beige);
}
.header-links a,
.header-links span {
    color: #ffe6a6 !important;
}
.header-links a:hover {
    color: #ffe6a6 !important;
}
.header-lower {
    background: #4f9281;
}
.header-logo a {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
}

.header-menu {
    background: none;
    border-bottom: none;
}
/* our custom nav (_Header.cshtml) reuses the stock "top-menu"/"notmobile"/
   "mobile"/"menu-toggle" class-name convention to get its desktop-vs-mobile
   show/hide behavior for free - stock styles.css used to provide the shared
   "hidden by default" base state (.top-menu{display:none}), with .notmobile
   shown only at desktop widths and .mobile revealed via the menu-toggle
   click handler's slideToggle(). nopCommerce 4.90 deleted that entire stock
   selector family outright (alongside removing TopMenuViewComponent), so
   restore the base state ourselves - without it both lists render open
   (browser UA default "block") on every page load at every width. */
.top-menu {
    display: none;
}
.top-menu.notmobile > li > a {
    border-radius: 999px;
    font-family: var(--uhoh-font-sans);
    font-weight: 700;
    font-size: 13px;
    transition: background-color .2s ease, transform .2s ease;
}
.top-menu.notmobile > li > a:hover {
    background: #ffe6a6;
    color: #4f9281 !important;
    transform: translateY(-1px);
}
.menu-toggle {
    background: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-display) !important;
    margin: .75rem 1rem;
    padding: .55rem 1.25rem;
    display: inline-block;
}
.top-menu.mobile {
    background: #fff !important;
    border-radius: 1.25rem;
    box-shadow: var(--uhoh-shadow-float);
    margin: 0 1rem 1rem;
    padding: .5rem 0 !important;
}
.top-menu.mobile li {
    border-bottom: 1px solid var(--uhoh-border);
}
.top-menu.mobile li:last-child {
    border-bottom: none;
}
.top-menu.mobile li a {
    display: block;
    padding: .9rem 1.5rem !important;
    font-size: 1rem;
    font-weight: 700;
    color: var(--uhoh-ink) !important;
}
.top-menu.mobile li.active a {
    color: #4f9281 !important;
    font-weight: 800;
}

/* ---- cinematic video banner (Home/Index.cshtml): full-bleed scroll-scrubbed
   video, the very first thing on the homepage, above .uhoh-hero below.
   .uhoh-cinematic-track is a tall scroll runway; .uhoh-cinematic itself is
   CSS-sticky so it stays pinned in view for that runway's length while the
   video scrubs, then un-sticks on its own once the runway runs out - see the
   scroll-scrub script after .uhoh-hero for the pin-sizing/progress logic. ---- */
/* .master-wrapper-content's sitewide padding-top (spaces every other page's
   content off the sticky header) leaves a blank gap above the video here and
   means a chunk of the scroll track is "used up" before the section even
   reaches its pin point - the banner should butt right up against the
   header instead, so zero it out on the homepage only. */
.html-home-page .master-wrapper-content {
    padding-top: 0 !important;
}
.uhoh-cinematic-track {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: 260vh;
}
.uhoh-cinematic {
    position: sticky;
    top: 0; /* set precisely (below the sticky header) by JS once it runs */
    width: 100%;
    height: 92vh;
    min-height: 560px;
    max-height: 900px;
    /* visible, not hidden: JS extends the video/scrim upward behind the
       transparent header (see the scroll-scrub script), which would
       otherwise get clipped at this element's own top edge */
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
/* visitors who've asked for reduced motion get a normal single-viewport
   section with the poster frame - no tall scroll runway, no pinning */
@media (prefers-reduced-motion: reduce) {
    .uhoh-cinematic-track {
        height: auto;
    }
    .uhoh-cinematic {
        position: relative;
        top: auto !important;
        height: 92vh;
    }
}
.uhoh-cinematic-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.uhoh-cinematic-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(66, 61, 58, .55) 0%,
        rgba(66, 61, 58, .15) 35%,
        rgba(66, 61, 58, .15) 62%,
        rgba(66, 61, 58, .68) 100%);
}
.uhoh-cinematic-content {
    position: relative;
    z-index: 2;
    max-width: 40rem;
    padding: 0 1.5rem;
    text-align: center;
}
.uhoh-cinematic-eyebrow {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 18%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.uhoh-cinematic-title {
    margin: 0;
    line-height: 0; /* collapse the h1's own line box around the logo mark */
}
.uhoh-cinematic-logo {
    width: clamp(9rem, 30vw, 18rem);
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .35));
}
.uhoh-cinematic-tagline {
    margin: 1.25rem 0 0;
    font-size: .9375rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 88%, transparent);
}
.uhoh-cinematic-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    padding: .85rem 1.75rem;
    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #fff 8%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--uhoh-font-sans);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.uhoh-cinematic-cta:hover {
    background: color-mix(in srgb, #fff 20%, transparent);
    color: #fff;
    transform: translateY(-2px);
}
.uhoh-cinematic-badge {
    position: absolute;
    z-index: 2;
    bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--uhoh-ink) 45%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    box-shadow: var(--uhoh-shadow-float);
}
.uhoh-cinematic-badge-left {
    left: 1.5rem;
}
.uhoh-cinematic-badge-right {
    right: 1.5rem;
}
.uhoh-cinematic-badge .uhoh-badge-num {
    font-family: var(--uhoh-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.uhoh-cinematic-badge .uhoh-badge-label {
    font-size: .68rem;
    max-width: 6.5rem;
    line-height: 1.25;
    color: color-mix(in srgb, #fff 90%, transparent);
}
@media (max-width: 700px) {
    .uhoh-cinematic {
        height: 100vh;
        min-height: 620px;
    }
    .uhoh-cinematic-badge {
        padding: .65rem .85rem;
        gap: .5rem;
        bottom: 1rem;
    }
    .uhoh-cinematic-badge-left {
        left: .75rem;
    }
    .uhoh-cinematic-badge-right {
        right: .75rem;
    }
    .uhoh-cinematic-badge .uhoh-badge-label {
        max-width: 5rem;
    }
}

/* ---- hero (Home/Index.cshtml) ---- */
.uhoh-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 3rem 3rem;
    background: var(--uhoh-cream);
    padding: 2.5rem 0 4rem;
}
.uhoh-hero-inner {
    position: relative;
    margin: 0 auto;
    padding-left: clamp(1.25rem, 4vw, 4rem);
    padding-right: clamp(1.25rem, 4vw, 4rem);
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .uhoh-hero-inner {
        grid-template-columns: 1.05fr 1fr;
    }
}
.uhoh-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 62% 38% 46% 54% / 48% 55% 45% 52%;
    filter: blur(2px);
}
.uhoh-blob-1 {
    left: -6rem; top: 2.5rem; width: 20rem; height: 20rem;
    background: color-mix(in srgb, var(--uhoh-butter) 55%, transparent);
}
.uhoh-blob-2 {
    right: -5rem; bottom: 0; width: 18rem; height: 18rem;
    background: color-mix(in srgb, var(--uhoh-mint) 45%, transparent);
}
.uhoh-eyebrow {
    display: inline-block;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--uhoh-font-display);
    background: var(--uhoh-butter);
    color: var(--uhoh-ink);
    border-radius: 999px;
    padding: .5rem 1.1rem;
}
.uhoh-hero h1 {
    margin-top: 1.5rem;
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    line-height: .98;
}
.uhoh-hero h1 .uhoh-highlight {
    color: var(--uhoh-coral);
}
.uhoh-hero p.uhoh-lede {
    margin-top: 1.5rem;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--uhoh-ink-muted);
}
.uhoh-hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
@media (max-width: 640px) {
    .uhoh-hero-actions {
        justify-content: center;
    }
}
.uhoh-btn-primary,
.uhoh-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    padding: 1rem 1.75rem;
    font-size: .875rem;
    font-weight: 700;
    font-family: var(--uhoh-font-sans);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.uhoh-btn-primary {
    background: var(--uhoh-ink);
    color: var(--uhoh-cream);
}
.uhoh-btn-primary:hover {
    transform: scale(1.05);
    color: var(--uhoh-cream);
}
.uhoh-btn-secondary {
    background: transparent;
    color: var(--uhoh-ink);
    border: 2px solid var(--uhoh-ink);
}
.uhoh-btn-secondary:hover {
    background: color-mix(in srgb, var(--uhoh-butter) 50%, transparent);
    color: var(--uhoh-ink);
}

.uhoh-hero-visual {
    position: relative;
    animation: uhoh-float 5.5s ease-in-out infinite;
}
.uhoh-hero-card {
    overflow: hidden;
    border-radius: 3rem;
    background: var(--uhoh-beige);
    box-shadow: var(--uhoh-shadow-lift);
    aspect-ratio: 4 / 5;
}
.uhoh-hero-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.uhoh-hero-badge {
    position: absolute;
    left: -1rem;
    bottom: -1rem;
    background: var(--uhoh-butter);
    border-radius: 1.5rem;
    padding: .9rem 1.1rem;
    box-shadow: var(--uhoh-shadow-float);
}
.uhoh-hero-badge .uhoh-badge-num {
    font-family: var(--uhoh-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.uhoh-hero-badge .uhoh-badge-label {
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 700;
}

.uhoh-sky-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.uhoh-star {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--uhoh-butter-deep);
    animation: uhoh-twinkle 3.5s ease-in-out infinite;
}
.uhoh-cloud {
    position: absolute;
    color: var(--uhoh-sky);
    opacity: .5;
    animation: uhoh-drift linear infinite;
}

/* ---- homepage "shop the look" slider: auto-cycling product spotlight with a
   background color that morphs per slide (juice-carousel style reference) ---- */
.uhoh-look-slider {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    margin-bottom: 3rem;
    border-radius: 0;
    padding: 3rem clamp(1.25rem, 4vw, 4rem);
    transition: background-color .8s ease;
}
.uhoh-look-slider .uhoh-look-slider-inner,
.uhoh-look-slider .uhoh-look-dots {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.uhoh-look-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 62% 38% 46% 54% / 48% 55% 45% 52%;
    filter: blur(2px);
    background: color-mix(in srgb, #fff 35%, transparent);
    animation: uhoh-blob-float 9s ease-in-out infinite;
}
.uhoh-look-blob-1 { left: -4rem; top: -3rem; width: 14rem; height: 14rem; }
.uhoh-look-blob-2 { right: -3rem; bottom: -4rem; width: 12rem; height: 12rem; animation-delay: -4s; }
@keyframes uhoh-blob-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.05); }
}
.uhoh-look-slider-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.uhoh-look-track {
    flex: 1 1 auto;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.uhoh-look-track::-webkit-scrollbar {
    display: none;
}
.uhoh-look-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    min-height: 320px;
}
.uhoh-look-card {
    position: relative;
}
.uhoh-look-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: var(--uhoh-shadow-lift);
    display: block;
}
/* per-product photo gallery: a stack of images, only one shown at a time,
   with its own prev/next distinct from the outer product-switching arrows */
.uhoh-look-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.uhoh-look-photo-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
.uhoh-look-photo-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}
.uhoh-look-photo-nav {
    /* solid filled triangle (vs .uhoh-look-nav's outlined chevron) keeps the
       two controls readable as distinct even though both are now circular */
    flex-shrink: 0;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: #fff !important;
    color: var(--uhoh-ink) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.uhoh-look-photo-nav:hover {
    background: var(--uhoh-butter) !important;
}
.uhoh-look-photo-dots {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.uhoh-look-photo-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 55%, transparent);
    transition: width .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.uhoh-look-photo-dot-active {
    width: 16px;
    background: #fff;
}
/* centre the text column's contents so the image + copy read as one
   balanced, horizontally-centred pair rather than hugging the middle gutter */
.uhoh-look-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.uhoh-look-copy h2 {
    margin-top: .75rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #fff;
}
.uhoh-look-copy h2 a {
    color: inherit;
    text-decoration: none;
}
.uhoh-look-copy h2 a:hover {
    text-decoration: underline;
}
/* whole photo opens the product; sits under the photo arrows (z-index 2) */
.uhoh-look-photo-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 2rem;
}
.uhoh-look-copy p {
    margin-top: .75rem;
    color: color-mix(in srgb, #fff 88%, transparent);
    max-width: 26rem;
}
.uhoh-look-price {
    margin-top: 1.25rem;
    font-family: var(--uhoh-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}
.uhoh-look-old-price {
    margin-right: .6rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: line-through;
    opacity: .7;
}
.uhoh-look-copy .uhoh-btn-primary {
    margin-top: 1.5rem;
    background: var(--uhoh-beige);
    color: var(--uhoh-ink);
}
.uhoh-look-copy .uhoh-btn-primary:hover {
    color: var(--uhoh-ink);
}
.uhoh-look-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: color-mix(in srgb, #fff 20%, transparent) !important;
    color: #fff !important;
    border: none !important;
}
.uhoh-look-nav:hover {
    background: color-mix(in srgb, #fff 32%, transparent) !important;
}
.uhoh-look-dots {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.uhoh-look-dot {
    width: 8px;
    height: 8px;
    padding: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #fff 35%, transparent) !important;
    border: none !important;
    cursor: pointer;
    transition: width .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.uhoh-look-dot:hover {
    transform: none !important;
}
.uhoh-look-dot-active,
.uhoh-look-dot-active:hover {
    width: 22px;
    background: #fff !important;
}
@media (max-width: 720px) {
    .uhoh-look-slide {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    /* the prev/next buttons sitting inline with the track (44px each, plus
       gaps) were eating ~120px of the narrow mobile width, squeezing the
       image down to a fraction of the card. Float them over the track edges
       instead so the track — and the image inside it — can use the full
       width. Swiping already works via the track's own scroll-snap. */
    .uhoh-look-slider-inner {
        position: relative;
    }
    .uhoh-look-nav {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        z-index: 2;
    }
    .uhoh-look-prev {
        left: .25rem;
    }
    .uhoh-look-next {
        right: .25rem;
    }
}

/* ---- homepage reviews section ----
   no horizontal/top padding here: the nested .uhoh-section-head already supplies
   the same top spacing + side inset as every other homepage section head, so
   duplicating it here was pushing "Kind words" out of alignment with them. */
.uhoh-reviews-section {
    padding: 0 0 4rem;
}
/* ---- reviews: one-at-a-time slider (scroll-snap track + prev/next + dots) ---- */
.uhoh-reviews-slider {
    margin-top: 2rem;
    padding: 0 clamp(1.25rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.uhoh-reviews-track {
    flex: 1 1 auto;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.uhoh-reviews-track::-webkit-scrollbar {
    display: none;
}
.uhoh-review-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
}
.uhoh-reviews-track .uhoh-review-card {
    width: 100%;
    max-width: 640px;
    margin: 0;
}
.uhoh-reviews-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.uhoh-reviews-nav:disabled {
    opacity: .35;
    cursor: default;
    transform: none !important;
}
.uhoh-reviews-dots {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.uhoh-reviews-dot {
    width: 8px;
    height: 8px;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--uhoh-border) !important;
    border: none !important;
    cursor: pointer;
    transition: width .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.uhoh-reviews-dot:hover {
    transform: none !important;
    background: var(--uhoh-ink-muted) !important;
}
.uhoh-reviews-dot-active,
.uhoh-reviews-dot-active:hover {
    width: 22px;
    background: var(--uhoh-ink) !important;
}
.uhoh-review-card {
    margin: 0;
    background: #fff;
    border-radius: 1.75rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 2rem;
    text-align: center;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.uhoh-review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--uhoh-shadow-lift);
}
.uhoh-review-stars {
    display: flex;
    justify-content: center;
    gap: .15rem;
    color: var(--uhoh-mint);
}
.uhoh-review-stars svg {
    width: 15px;
    height: 15px;
}
.uhoh-review-text {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--uhoh-ink);
}
.uhoh-review-author {
    margin-top: 1rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--uhoh-ink-muted);
}

/* ---- hide the default electronics-store promo slider sample widget (clashes with the kidswear hero) ---- */
.home-page .slider-wrapper {
    display: none !important;
}

/* ---- vendor accounts aren't offered on this store; hide the footer link (base
   Footer/Default.cshtml still renders it whenever the underlying nopCommerce
   vendor-application setting is on). 4.90 rewrote the footer nav markup from
   <ul class="list"><li> to <div class="footer-menu__list" role="menu"><div
   class="footer-menu__item" role="menuitem"> ---- */
.footer-menu__item:has(a[href*="vendor/apply"]) {
    display: none !important;
}

/* the homepage's own "Featured products" sub-heading is redundant — our custom
   "The UH OH! Collection" heading right above it already covers this */
.home-page-product-grid > .title {
    display: none !important;
}

/* ---- section headers below the hero ---- */
.uhoh-section-head {
    margin: 0 auto;
    padding: 3rem clamp(1.25rem, 4vw, 4rem) 0;
}
.uhoh-section-head .uhoh-eyebrow {
    background: none;
    padding: 0;
    color: var(--uhoh-ink-muted);
}
.uhoh-section-head h2 {
    margin-top: .5rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ---- product card (item-box > product-item, shared across home/category/search/related grids) ---- */
.product-item {
    position: relative;
}
.product-item .picture {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: var(--uhoh-beige);
    aspect-ratio: 4 / 5;
}
.product-item .picture a {
    display: block;
    width: 100%;
    height: 100%;
}
.product-item .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product-item:hover .picture img {
    transform: scale(1.05);
}
.product-item .description {
    display: none !important;
}
.product-item .product-title a {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--uhoh-ink);
}
.product-item .prices {
    margin-top: .25rem;
}
.product-item .prices .actual-price {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    color: var(--uhoh-ink);
}
.product-item .prices .old-price {
    margin-right: .4rem;
    color: var(--uhoh-ink-muted);
    text-decoration: line-through;
    font-size: .85em;
}

.uhoh-card-badges {
    position: absolute;
    left: .75rem;
    top: .75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.uhoh-card-badge {
    font-family: var(--uhoh-font-display);
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .3rem .65rem;
    border-radius: 999px;
}
.uhoh-card-badge-new {
    background: var(--uhoh-butter);
    color: var(--uhoh-ink);
}
.uhoh-card-badge-soldout {
    background: var(--uhoh-ink);
    color: var(--uhoh-cream);
}

.uhoh-card-icons {
    position: absolute;
    right: .75rem;
    top: .75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.product-item:hover .uhoh-card-icons,
.uhoh-card-icons:focus-within {
    opacity: 1;
    transform: translateY(0);
}
input.uhoh-card-icon-btn {
    width: 36px !important;
    height: 36px;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background-color: rgba(251, 249, 242, .92) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    box-shadow: var(--uhoh-shadow-float);
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
}
input.uhoh-card-icon-btn.add-to-wishlist-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423d3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}
input.uhoh-card-icon-btn.add-to-compare-list-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423d3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M8 21H3v-5'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
}
input.uhoh-card-icon-btn:hover {
    transform: scale(1.08);
}

.uhoh-card-quickadd {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}
.product-item:hover .uhoh-card-quickadd,
.uhoh-card-quickadd:focus-within {
    opacity: 1;
    transform: translateY(0);
}
input.uhoh-quickadd-btn {
    width: 100% !important;
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    border: none !important;
    padding: .65rem 1rem !important;
    font-size: .8125rem;
    font-weight: 700;
}

/* center a product/category row when it has fewer items than the grid's column count,
   instead of leaving them float-left with empty space dangling on one side */
.home-page-product-grid .item-grid,
.home-page-category-grid .item-grid,
.product-grid .item-grid,
.featured-product-grid .item-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}
.home-page-product-grid .item-grid .item-box,
.home-page-category-grid .item-grid .item-box,
.product-grid .item-grid .item-box,
.featured-product-grid .item-grid .item-box {
    float: none !important;
}

/* phones: base styles.css stacks cards one per row below 481px - show two per row */
@media (max-width: 480px) {
    .home-page-product-grid .item-grid,
    .product-grid .item-grid,
    .featured-product-grid .item-grid {
        gap: .75rem;
    }
    .home-page-product-grid .item-grid .item-box,
    .product-grid .item-grid .item-box,
    .featured-product-grid .item-grid .item-box {
        width: calc(50% - .375rem);
        margin: 0 0 .75rem;
    }
}

/* ---- category & product cards ---- */
.home-page-category-grid .item-box,
.product-grid .item-box {
    border-radius: 1.75rem !important;
    background: #fff;
    box-shadow: var(--uhoh-shadow-soft);
    border: none !important;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.home-page-category-grid .item-box:hover,
.product-grid .item-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--uhoh-shadow-lift);
}
.home-page-category-grid .title,
.product-grid .title,
.product-grid > .title {
    font-family: var(--uhoh-font-display) !important;
}
.home-page-category-grid .title a,
.sub-category-grid .title a {
    font-weight: 700;
    color: var(--uhoh-ink);
}
.item-box .product-title a {
    color: var(--uhoh-ink);
    font-weight: 600;
}
.product-grid > .title strong,
.home-page-category-grid > .title strong {
    font-weight: 700 !important;
}

/* ---- footer ---- */
.footer {
    background: #4f9281 !important;
    border-radius: 2.5rem 2.5rem 0 0;
    margin-top: 3rem;
    color: var(--uhoh-cream);
}
/* 4.90 rewrote the footer nav markup: the old <div class="footer-block">
   with a <div class="title"><strong> and a <ul class="list"><li><a> became
   <nav class="footer-navigation"><div class="footer-menu"><h2 class=
   "footer-menu__title footer-menu__toggle"> and a <div class="footer-menu__list"
   role="menu"><div class="footer-menu__item"><a class="footer-menu__link">.
   The "Follow us"/"Newsletter" blocks keep the old .footer-block/.title
   structure (just a <h2 class="title"> now instead of <div><strong>), so
   both class families are targeted below. */
.footer-menu__title,
.footer-block .title strong,
.footer-block .title {
    color: var(--uhoh-butter) !important;
}
.footer-menu__link,
.footer-block .list a {
    color: color-mix(in srgb, var(--uhoh-cream) 75%, transparent) !important;
}
.footer-menu__link:hover,
.footer-block .list a:hover {
    color: var(--uhoh-butter) !important;
}
/* below 769px the base theme turns each footer-menu into an accordion whose
   expanded footer-menu__list panel gets a white background (styles.css) —
   the cream/light link color above is meant for the dark green footer and is
   nearly invisible against that white panel, so it needs a dark color here */
@media (max-width: 768px) {
    .footer-menu__link,
    .footer-block .list a {
        color: var(--uhoh-ink) !important;
    }
    .footer-menu__link:hover,
    .footer-block .list a:hover {
        color: #4f9281 !important;
    }
    /* the accordion title bar is styles.css's own .footer-menu__toggle (blue
       background + white toggle icon) - recolor it to match the site instead
       of the stock accent-blue, and round both bar and panel to match the
       site's pill/card aesthetic instead of styles.css's sharp rectangles */
    .footer-menu__toggle {
        background-color: #4f9281 !important;
        border-radius: 1.25rem !important;
    }
    .footer-menu__list {
        border-radius: 1.25rem !important;
    }
    .footer-menu {
        margin-block-end: 1.25rem !important;
    }
    .footer-block .title {
        border-radius: 1.25rem !important;
    }
    .footer-block .list {
        border-radius: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
}
.footer-lower {
    border-top: 1px solid color-mix(in srgb, var(--uhoh-cream) 15%, transparent);
    color: color-mix(in srgb, var(--uhoh-cream) 55%, transparent);
}
.footer-powered-by a {
    color: var(--uhoh-butter) !important;
}
/* center the copyright line - base theme floats .footer-info right (to sit
   beside "Powered by nopCommerce"), but that link is hidden on this store */
.footer-info {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
}

/* ---- footer "Follow us" social icons: plain beige stroke glyphs (Instagram,
   Facebook, TikTok) instead of styles.css's colored sprite badges ---- */
.follow-us .social ul {
    border-bottom: none;
}
.uhoh-social {
    display: flex;
    /* left-align under the "Follow us" heading - previously relied on the
       row happening to be exactly as wide as its 3 icons for this to look
       right; make it explicit so it holds regardless of column width */
    justify-content: flex-start;
    gap: 1rem;
    list-style: none;
    padding: 0;
}
@media (max-width: 768px) {
    .uhoh-social {
        justify-content: center;
    }
}
.uhoh-social-item a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px;
    border: 1.5px solid var(--uhoh-butter);
    color: var(--uhoh-butter);
    background: none !important;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.uhoh-social-item a:hover {
    color: #4f9281;
    background: var(--uhoh-butter) !important;
    transform: translateY(-2px);
}
.uhoh-social-item svg {
    width: 22px;
    height: 22px;
}

/* ---- remaining default-blue accents (block/section title bars, read-more links) ---- */
.block .title,
.home-page-polls .title {
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-display) !important;
}
.block .title strong,
.home-page-polls .title strong {
    color: var(--uhoh-cream) !important;
    font-weight: 700 !important;
}
.news-list-homepage .title {
    background-color: #4f9281 !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-display) !important;
}
.news-list-homepage .title strong {
    color: var(--uhoh-cream) !important;
    font-weight: 700 !important;
}
a.read-more,
.news-item .buttons a {
    display: inline-block;
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    padding: .6rem 1.25rem !important;
    font-weight: 700;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
a.read-more:hover,
.news-item .buttons a:hover {
    transform: translateY(-2px) scale(1.03);
    color: var(--uhoh-cream) !important;
}
.news-title,
.view-all a {
    color: var(--uhoh-ink) !important;
    font-weight: 700;
}
.news-title:hover,
.view-all a:hover {
    color: var(--uhoh-berry) !important;
}

/* ---- Shop page (search results, restyled per design) ---- */
.uhoh-shop-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem clamp(1.25rem, 4vw, 4rem) 0;
}
.uhoh-shop-hero h1 {
    margin-top: .5rem;
    font-size: clamp(2.1rem, 4vw, 3.25rem);
}
.uhoh-shop-hero .uhoh-lede {
    margin-top: 1rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-shop-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem clamp(1.25rem, 4vw, 4rem) 4rem;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .uhoh-shop-layout {
        grid-template-columns: 1fr;
    }
}
.uhoh-shop-filters {
    position: sticky;
    top: 6rem;
}
.uhoh-shop-filters form {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}
.uhoh-filter-group:not(:first-child) {
    padding-top: 2rem;
    border-top: 1px solid var(--uhoh-border);
}
.uhoh-filter-group h3 {
    font-family: var(--uhoh-font-display);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--uhoh-ink-muted);
    margin-bottom: 1rem;
}
.uhoh-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.uhoh-chip {
    font-family: var(--uhoh-font-sans);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--uhoh-ink);
    background: #fff;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 999px;
    padding: .5rem 1rem;
    cursor: pointer;
    transition: all .2s ease;
}
.uhoh-chip:hover {
    border-color: var(--uhoh-butter-deep);
}
.uhoh-chip-active {
    background: var(--uhoh-ink);
    border-color: var(--uhoh-ink);
    color: var(--uhoh-cream);
}
#uhoh-max-price {
    width: 100%;
    accent-color: var(--uhoh-ink);
}
.uhoh-max-price-label {
    margin-top: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--uhoh-ink);
}

/* ---- "Price" filter (Search.cshtml wraps the stock _FilterPriceBox
   partial in its own ".uhoh-filter-group h3" heading, matching Age/
   Category above/below it) ---- */
.uhoh-filter-group .price-range-filter .filter-title {
    /* the partial's own "Filter by price" heading is redundant next to
       the "Price" h3 this group already renders above it - the stock
       theme also styles it as a flat grey clickable accordion bar, which
       looks like a broken/empty input with nothing else on the page
       using that pattern */
    display: none;
}
.uhoh-filter-group .price-range-filter .filter-content {
    padding: 0;
}
.uhoh-filter-group .selected-price-range {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1rem;
    font-family: var(--uhoh-font-sans);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--uhoh-ink);
}
/* the price range slider is a jQuery UI widget - no jquery-ui theme CSS is
   loaded on the storefront (same reason the old ToS popup needed hand
   styling), so its classes have zero built-in appearance: a bare,
   invisible track with unstyled handles. Style the 3 pieces the plugin's
   own JS generates (.ui-slider track, .ui-slider-range fill,
   .ui-slider-handle) to match the site's pill/ink look. */
.uhoh-filter-group #price-range-slider.ui-slider {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: var(--uhoh-border);
    border: none;
}
.uhoh-filter-group #price-range-slider .ui-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--uhoh-ink);
}
.uhoh-filter-group #price-range-slider .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--uhoh-ink);
    box-shadow: var(--uhoh-shadow-soft);
    cursor: pointer;
    outline: none;
}
.uhoh-filter-group #price-range-slider .ui-slider-handle:hover,
.uhoh-filter-group #price-range-slider .ui-slider-handle.ui-state-focus {
    border-color: #4f9281;
}
.uhoh-filter-clear {
    align-self: flex-start;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--uhoh-berry);
    text-decoration: underline;
}
.uhoh-no-results {
    text-align: center;
    padding: 4rem 1.5rem;
    background: #fff;
    border-radius: 1.75rem;
    box-shadow: var(--uhoh-shadow-soft);
}
.uhoh-no-results p.uhoh-font-display {
    font-size: 1.375rem;
}
.uhoh-no-results p:last-child {
    margin-top: .5rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-shop-results .product-selectors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.uhoh-shop-results .product-selectors select {
    border-radius: 999px !important;
    border: 1.5px solid var(--uhoh-border) !important;
    padding: .4rem 1rem !important;
    font-size: .8125rem;
}
/* the sidebar's sticky positioning (.uhoh-shop-filters above) is only
   meaningful next to a taller results column on desktop — once
   .uhoh-shop-layout collapses to one stacked column at 900px, "sticky" pins
   the filters near the top of the viewport while the results scroll up
   underneath them, overlapping. Placed after the base rule (same
   specificity) so this actually wins in the cascade at this width. */
@media (max-width: 900px) {
    .uhoh-shop-filters {
        position: static;
    }
}

/* ==========================================================================
   Sitewide pass — everything beyond the homepage: category/manufacturer/
   search listings, product details, cart, checkout, account, notifications.
   ========================================================================== */

/* ---- page titles (used on every non-home page: category, product, cart,
   checkout, account, contact, etc.) ---- */
.page-title h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.page-title {
    border: none !important;
    margin-bottom: 1.5rem;
}

/* ---- breadcrumb ---- */
.breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
}
.breadcrumb li,
.breadcrumb a,
.breadcrumb strong {
    font-family: var(--uhoh-font-sans);
    color: var(--uhoh-ink-muted) !important;
    font-size: .8125rem;
}
.breadcrumb a:hover {
    color: var(--uhoh-berry) !important;
}
.breadcrumb strong {
    color: var(--uhoh-ink) !important;
    font-weight: 700;
}

/* ---- pagination ---- */
.pager li a,
.pager li span {
    border-radius: 999px !important;
    border: none !important;
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    background: #fff;
    box-shadow: var(--uhoh-shadow-soft);
}
.pager li span.current {
    background: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
}
.pager li a:hover {
    background: var(--uhoh-butter) !important;
    color: var(--uhoh-ink) !important;
}

/* ---- product detail page ---- */
/* bigger product photo: widen the gallery column against the info column
   (base theme splits 46/52). Scope to the OUTER .gallery only - the pictures
   partial renders a second nested <div class="gallery">, and an unscoped
   "width: 66%" would compound (66% of 66%) and shrink the photo. */
@media (min-width: 1001px) {
    .product-essential > .gallery {
        width: 66% !important;
    }
    .overview {
        width: 32% !important;
    }
}
/* the nested inner .gallery (from _ProductDetailsPictures.cshtml) inherits the
   base theme's "float: left; width: 46%" - reset it to a plain full-width block */
.gallery .gallery {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}
/* base theme forces the main photo box square via a padding-top:100% pseudo
   spacer - drop it so our 4/5 aspect-ratio below takes effect */
.gallery .picture::before {
    content: none !important;
    padding-top: 0 !important;
}
/* gallery layout: the large main photo with a horizontal thumbnail row
   underneath it, prev/next arrows overlaid on the photo itself.
   (DOM order is thumbs then picture, so column-reverse puts thumbs below.) */
.uhoh-gallery-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: .85rem;
    width: 100%;
    /* centre both the photo and the thumbnail row within the gallery column
       (base theme already centres .picture via margin:auto) */
    align-items: center;
}
.uhoh-gallery-thumbs {
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    width: min(100%, 600px);
    max-height: none;
    overflow: visible;
}
.uhoh-gallery-thumbs .thumb-item {
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: .75rem;
    border: 1.5px solid transparent;
    /* the thumb <img> has no intrinsic sizing rule and renders at its natural
       size, spilling out of the 64px box - clip it and make it fill/cover */
    overflow: hidden;
    opacity: .6;
    transition: opacity .2s ease, border-color .2s ease;
}
.uhoh-gallery-thumbs .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.uhoh-gallery-thumbs .thumb-item:hover {
    opacity: 1;
}
.uhoh-gallery-thumbs .uhoh-gallery-thumb-active {
    opacity: 1;
    border-color: var(--uhoh-ink);
}
.gallery .picture {
    flex: 0 1 auto;
    /* large portrait hero photo (was shrinking to the image's small intrinsic
       size); capped so it stays dominant without pushing the buy box off-screen */
    width: min(100%, 600px);
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
    background: var(--uhoh-beige);
}
.gallery .picture > img[id^="main-product-img-"] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}
.uhoh-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: #fff !important;
    color: var(--uhoh-ink) !important;
    border: none !important;
    box-shadow: var(--uhoh-shadow-soft);
}
/* the sitewide button style flips background to ink + scales up on
   hover/focus/active (button:hover, etc., all !important) — pin this
   control's own colors so clicking it doesn't turn it into a plain dark
   circle that swallows the arrow icon */
.uhoh-gallery-nav:hover,
.uhoh-gallery-nav:focus,
.uhoh-gallery-nav:active {
    background: #fff !important;
    color: var(--uhoh-ink) !important;
    transform: translateY(-50%) !important;
}
.uhoh-gallery-prev {
    left: 12px;
}
.uhoh-gallery-next {
    right: 12px;
}
@media (max-width: 700px) {
    /* let the hero photo span the full column on phones */
    .gallery .picture {
        width: 100%;
        flex: none;
    }
    .uhoh-gallery-thumbs {
        max-width: 100%;
    }
}
.gallery [id^="uhoh-gallery-picture-"] {
    cursor: zoom-in;
}

/* ---- full-screen photo lightbox: opens on clicking the active product
   photo. Light neutral overlay, image centered with room reserved at the
   bottom for the thumbnail strip, plain (unboxed) chevrons at the edges. ---- */
.uhoh-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: #f5f4f2;
}
.uhoh-lightbox-active {
    display: block;
}
body.uhoh-lightbox-open {
    overflow: hidden;
}
/* the close button sits on .uhoh-lightbox-image-wrap, which shrink-wraps
   tightly around the actual rendered image (inline-flex + max-width/height
   passed through from the photo) — so top:0/right:0 here lands exactly on
   the image's own top-right corner regardless of its aspect ratio, instead
   of the far corner of the whole screen where it's easy to lose track of */
.uhoh-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    background: #fff !important;
    border: none !important;
    color: var(--uhoh-ink) !important;
    box-shadow: var(--uhoh-shadow-lift);
    padding: 0 !important;
}
.uhoh-lightbox-close:hover,
.uhoh-lightbox-close:focus,
.uhoh-lightbox-close:active {
    background: var(--uhoh-ink) !important;
    color: #fff !important;
    transform: none !important;
}
.uhoh-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    color: var(--uhoh-ink) !important;
    padding: 0 !important;
}
.uhoh-lightbox-nav:hover,
.uhoh-lightbox-nav:focus,
.uhoh-lightbox-nav:active {
    background: none !important;
    color: var(--uhoh-ink) !important;
    transform: translateY(-50%) !important;
}
.uhoh-lightbox-prev {
    left: 12px;
}
.uhoh-lightbox-next {
    right: 12px;
}
.uhoh-lightbox-stage {
    position: absolute;
    inset: 0 0 116px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 90px;
    box-sizing: border-box;
}
.uhoh-lightbox-image-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
}
.uhoh-lightbox-image-wrap img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.uhoh-lightbox-thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 1rem;
    overflow-x: auto;
}
.uhoh-lightbox-thumb {
    flex: none;
    width: 72px;
    height: 88px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease;
}
.uhoh-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.uhoh-lightbox-thumb:hover {
    opacity: .85;
}
.uhoh-lightbox-thumb-active {
    opacity: 1;
    border-bottom-color: var(--uhoh-ink);
}
@media (max-width: 700px) {
    .uhoh-lightbox-stage {
        padding: 60px 50px;
        inset: 0 0 96px 0;
    }
    .uhoh-lightbox-thumbs {
        height: 96px;
    }
    .uhoh-lightbox-thumb {
        width: 56px;
        height: 68px;
    }
}
.overview .product-name h1 {
    font-family: var(--uhoh-font-display);
}
.overview .product-price,
.variant-overview .product-price {
    font-family: var(--uhoh-font-display);
    color: var(--uhoh-ink) !important;
    font-size: 1.75rem;
}
.overview .old-product-price,
.variant-overview .old-product-price {
    color: var(--uhoh-ink-muted) !important;
}
.overview .availability .in-stock {
    color: #4b8f6a !important;
    font-weight: 700;
}

/* ---- product detail: quantity stepper + add-to-cart, matched to the
   reference — bare +/- glyphs flanking a white circular count, and a large
   lime pill CTA that fills the rest of the row ---- */
.add-to-cart-panel {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: .5rem;
}
.add-to-cart-panel .uhoh-qty-stepper {
    flex: none;
    background: none !important;
    padding: 0 !important;
    gap: .35rem;
    /* minus on the left, plus on the right - DOM order (minus, input,
       plus) already matches, no reversal needed */
}
.add-to-cart-panel .uhoh-qty-btn {
    width: 1.75rem !important;
    height: 1.75rem !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--uhoh-ink) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
}
.add-to-cart-panel .uhoh-qty-btn:hover,
.add-to-cart-panel .uhoh-qty-btn:focus,
.add-to-cart-panel .uhoh-qty-btn:active {
    background: none !important;
    color: var(--uhoh-ink-muted) !important;
    transform: none !important;
}
.add-to-cart-panel .uhoh-qty-stepper .qty-input {
    width: 2.6rem !important;
    height: 2.6rem !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--uhoh-ink) 15%, transparent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-align: center !important;
    font-weight: 700;
    color: var(--uhoh-ink) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.add-to-cart-panel .add-to-cart-button {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #4f9281 !important;
    color: var(--uhoh-beige) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: .95rem 1.75rem !important;
    font-size: .95rem;
    font-weight: 700;
}
.add-to-cart-panel .add-to-cart-button:hover,
.add-to-cart-panel .add-to-cart-button:focus,
.add-to-cart-panel .add-to-cart-button:active {
    background: #427a6c !important;
    color: var(--uhoh-beige) !important;
    transform: translateY(-1px) !important;
}

/* ---- product detail: trust badges + collapsible details accordion ---- */
.uhoh-trust-badges {
    margin: 1.5rem 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--uhoh-border);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.uhoh-trust-badge {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9375rem;
    color: var(--uhoh-ink);
}
.uhoh-trust-badge svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--uhoh-ink-muted);
}
.uhoh-pdp-accordion {
    margin-bottom: 1.5rem;
}
.uhoh-pdp-accordion-item {
    border-bottom: 1px solid var(--uhoh-border);
}
.uhoh-pdp-accordion-item:first-child {
    border-top: 1px solid var(--uhoh-border);
}
.uhoh-pdp-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    background: none !important;
    border: none !important;
    color: var(--uhoh-ink) !important;
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.uhoh-pdp-accordion-trigger:hover {
    transform: none !important;
    background: none !important;
}
.uhoh-pdp-accordion-trigger svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--uhoh-ink-muted);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.uhoh-pdp-accordion-item.uhoh-open .uhoh-pdp-accordion-trigger svg {
    transform: rotate(180deg);
}
.uhoh-pdp-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1);
}
.uhoh-pdp-accordion-item.uhoh-open .uhoh-pdp-accordion-panel {
    grid-template-rows: 1fr;
}
.uhoh-pdp-accordion-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.uhoh-pdp-accordion-item.uhoh-open .uhoh-pdp-accordion-panel-inner {
    padding-bottom: 1.25rem;
}
.uhoh-pdp-accordion-panel-inner p {
    margin: 0 0 .75rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--uhoh-ink-muted);
}
.uhoh-pdp-accordion-panel-inner p:last-child {
    margin-bottom: 0;
}
.uhoh-pdp-accordion-panel-inner a {
    color: var(--uhoh-ink);
    text-decoration: underline;
}
.uhoh-pdp-sizechart-image {
    display: block;
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    margin: 0 0 1rem;
}
@media (prefers-reduced-motion: reduce) {
    .uhoh-pdp-accordion-panel,
    .uhoh-pdp-accordion-trigger svg {
        transition: none !important;
    }
}

/* ---- size attribute: white box swatches (RadioList control type) — selected
   gets a solid ink border, out-of-stock values are dimmed and unclickable
   instead of rendering as plain native radio buttons ---- */
.attributes .uhoh-size-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 700px) {
    /* on mobile the product page centers everything above this (title,
       rating, SKU, color swatch) via an inherited text-align: center, but
       that has no effect on a flex container's own items - explicitly
       center this row too so it lines up with everything above it */
    .attributes .uhoh-size-boxes {
        justify-content: center;
    }
}
.attributes .uhoh-size-boxes li {
    position: relative;
    margin: 0;
}
.attributes .uhoh-size-boxes input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.attributes .uhoh-size-boxes label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 .6rem;
    margin: 0;
    background: #fff;
    border: 1.5px solid var(--uhoh-border);
    border-radius: .5rem;
    font-family: var(--uhoh-font-sans);
    font-weight: 600;
    font-size: .875rem;
    color: var(--uhoh-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.attributes .uhoh-size-boxes label:hover {
    border-color: var(--uhoh-ink-muted);
}
.attributes .uhoh-size-boxes input[type="radio"]:checked + label {
    border: 2px solid var(--uhoh-ink);
    box-shadow: 0 0 0 1px var(--uhoh-ink);
}
.attributes .uhoh-size-boxes input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--uhoh-ink);
    outline-offset: 2px;
}
.attributes .uhoh-size-boxes li.uhoh-size-out-of-stock label {
    background: var(--uhoh-beige);
    border-color: var(--uhoh-border);
    color: var(--uhoh-ink-muted);
    opacity: .55;
    cursor: not-allowed;
    text-decoration: line-through;
}
.attributes .uhoh-size-boxes li.uhoh-size-out-of-stock label:hover {
    border-color: var(--uhoh-border);
}

/* ---- color attribute swatches: irregular hand-drawn blob instead of a hard square ---- */
.attribute-squares .attribute-square-container {
    padding: 0;
    background: none !important;
}
.attribute-squares .attribute-square {
    border: none !important;
    border-radius: 60% 40% 55% 45% / 55% 45% 60% 40% !important;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.attribute-squares li:hover .attribute-square {
    transform: scale(1.08);
}
.attribute-squares .selected-value .attribute-square {
    outline: 2px solid var(--uhoh-ink);
    outline-offset: 3px;
}
/* styles.css lays these three out as inline-block wrapper divs, which
   default to baseline vertical-align — fine as long as every button inside
   is display:block (same baseline), but the WhatsApp button below is
   display:flex, giving its wrapper a different baseline and knocking it a
   few pixels out of line with the other two. Align all three wrappers to
   their tops instead so the button type inside doesn't matter. */
.overview-buttons div {
    vertical-align: top;
}
.overview .whatsapp-a-friend-button,
.variant-overview .whatsapp-a-friend-button {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    background-image: none !important;
    padding: 12px 15px !important;
    text-align: left;
    text-decoration: none !important;
}
.whatsapp-a-friend-button svg {
    flex-shrink: 0;
    color: var(--uhoh-cream);
}
.product-collateral .title,
.product-collateral > .title {
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-display) !important;
}
.product-collateral .title strong {
    color: var(--uhoh-cream) !important;
}
.enter-qty,
.qty-box,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
    border-radius: .75rem !important;
    border: 1.5px solid var(--uhoh-border) !important;
    font-family: var(--uhoh-font-sans) !important;
}
.enter-qty:focus,
.qty-box:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--uhoh-butter-deep) !important;
    outline: none;
}

/* ---- cart ---- */
.cart-total .order-total,
.cart-total .order-total strong,
.order-summary-content .order-total,
.order-summary-content .order-total strong {
    color: var(--uhoh-ink) !important;
    font-family: var(--uhoh-font-display);
}
.cart-footer .checkout-button {
    background: var(--uhoh-ink) !important;
}
.cart td.remove-from-cart button,
.product-remove-from-cart button {
    border-radius: 999px !important;
}

/* ---- cart page: "YOUR BASKET" title + card items + summary sidebar ----
   the title used to get its own one-off uppercase/purple treatment here;
   every other page (product, category, 404, etc.) just uses the sitewide
   h1 default (Montserrat via the global h1 rule, plain dark grey, normal
   case) - drop the override so this page matches the rest of the site */
.uhoh-cart-layout {
    display: grid;
    grid-template-columns: 1.6fr .95fr;
    gap: 2rem;
    align-items: start;
}
.uhoh-cart-main .table-wrapper {
    overflow: visible;
}

/* -- turn the <table class="cart"> into a stack of rounded item cards -- */
.cart thead {
    display: none;
}
.cart,
.cart tbody {
    display: block;
    width: 100%;
}
.cart tr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.cart td {
    border: none !important;
    padding: 0 !important;
}
.cart td .td-title {
    display: none !important;
}
.cart td.product-picture {
    order: 1;
    flex: none;
}
.cart td.product-picture img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--uhoh-beige);
}
.cart td.product {
    order: 2;
    flex: 1 1 auto;
    min-width: 10rem;
}
.cart td.product .product-name {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: .9375rem;
    text-transform: uppercase;
    color: #2e1f52;
}
.cart td.product .attributes {
    margin-top: .3rem;
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
}
.cart td.product .edit-item {
    margin-top: .4rem;
}
.cart td.product .edit-item a {
    font-size: .8125rem;
    text-decoration: underline;
    color: var(--uhoh-ink-muted);
}
.cart td.quantity {
    order: 3;
    flex: none;
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* the -/+ stepper (built in OrderSummary's script) replaces the base theme's
   stacked up/down spinner triangles - hide those leftover arrows */
.cart td.quantity .quantity.up,
.cart td.quantity .quantity.down {
    display: none !important;
}
.cart td.quantity .qty-input,
.cart td.quantity .qty-dropdown {
    width: 2.75rem;
    text-align: center;
    border: none !important;
    background: var(--uhoh-beige);
    border-radius: 999px !important;
    padding: .45rem 0 !important;
    font-weight: 700;
}
.uhoh-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--uhoh-beige);
    border-radius: 999px;
    padding: .25rem;
}
.uhoh-qty-stepper .qty-input {
    background: none !important;
    border: none !important;
    width: 1.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 700;
}
.uhoh-qty-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--uhoh-ink) !important;
    border: none !important;
    font-weight: 700;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    cursor: pointer;
}
/* the sitewide button:hover rule (background-color:ink !important) has
   higher specificity than this single-class selector and would otherwise
   flip the +/- buttons to a solid ink circle on hover — pin them white */
.uhoh-qty-btn:hover,
.uhoh-qty-btn:focus,
.uhoh-qty-btn:active {
    background: var(--uhoh-butter) !important;
    color: var(--uhoh-ink) !important;
    transform: none !important;
}
.cart td.remove-from-cart {
    order: 4;
    flex: none;
}
.cart td.remove-from-cart .td-title,
.cart td.remove-from-cart input[type="checkbox"] {
    display: none !important;
}
/* our styled "Take it out" chip replaces the base theme's small red remove
   icon button whenever it has been injected */
.cart td.remove-from-cart:has(.uhoh-remove-link) .remove-btn {
    display: none !important;
}
.uhoh-remove-link {
    --uhoh-remove-red: #d64545;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none !important;
    border: 1px solid color-mix(in srgb, var(--uhoh-remove-red) 45%, transparent) !important;
    border-radius: 999px !important;
    padding: .3rem .8rem !important;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--uhoh-remove-red) !important;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.uhoh-remove-link .uhoh-remove-x {
    font-size: 1.05rem;
    line-height: 1;
    margin-top: -1px;
}
.uhoh-remove-link:hover,
.uhoh-remove-link:focus {
    color: #fff !important;
    border-color: var(--uhoh-remove-red) !important;
    background: var(--uhoh-remove-red) !important;
    transform: none !important;
}
.cart td.unit-price,
.cart td.sku,
.cart td.vendor {
    display: none;
}
.cart td.subtotal {
    order: 5;
    flex: none;
    margin-left: auto;
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: 1.125rem;
    color: #2e1f52;
}
.cart td.subtotal .discount,
.cart td.subtotal .discount-additional-info {
    font-size: .75rem;
    font-weight: 600;
    color: #4b8f6a;
}

/* -- order details "Product(s)" table: same rounded item-card treatment as
   the cart page's table, minus the qty stepper/remove controls (an order's
   contents are read-only) - scoped to just this table since the order
   details page has other, unrelated .data-table instances (Shipments,
   Notes) that must keep their normal table layout ---- */
.html-order-details-page .section.products .table-wrapper {
    overflow: visible;
}
.html-order-details-page .section.products .data-table thead {
    display: none;
}
.html-order-details-page .section.products .data-table,
.html-order-details-page .section.products .data-table tbody {
    display: block;
    width: 100%;
}
.html-order-details-page .section.products .data-table tr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.html-order-details-page .section.products .data-table td {
    border: none !important;
    padding: 0 !important;
}
.html-order-details-page .section.products .data-table td .td-title {
    display: none !important;
}
.html-order-details-page .section.products .data-table td.picture {
    order: 1;
    flex: none;
}
.html-order-details-page .section.products .data-table td.picture img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--uhoh-beige);
}
.html-order-details-page .section.products .data-table td.product {
    order: 2;
    flex: 1 1 auto;
    min-width: 10rem;
}
.html-order-details-page .section.products .data-table td.product em a {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: .9375rem;
    text-transform: uppercase;
    font-style: normal;
    color: #2e1f52;
}
.html-order-details-page .section.products .data-table td.product .attributes {
    margin-top: .3rem;
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
}
.html-order-details-page .section.products .data-table td.sku,
.html-order-details-page .section.products .data-table td.vendor,
.html-order-details-page .section.products .data-table td.unit-price {
    display: none;
}
.html-order-details-page .section.products .data-table td.quantity {
    order: 3;
    flex: none;
    font-size: .875rem;
    color: var(--uhoh-ink-muted);
}
.html-order-details-page .section.products .data-table td.quantity::before {
    content: "\00d7";
    margin-right: .2rem;
}
.html-order-details-page .section.products .data-table td.total {
    order: 5;
    flex: none;
    margin-left: auto;
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: 1.125rem;
    color: #2e1f52;
}

/* -- common buttons: keep "Update cart" as a real button, make "Continue shopping" a link -- */
.cart-options .common-buttons {
    /* base theme ships this as flat grey (#f6f6f6) - swap for the site's
       beige so it reads as a themed surface instead of a leftover default */
    background-color: var(--uhoh-beige) !important;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
@media (max-width: 700px) {
    /* on mobile the three buttons wrap onto their own rows - center them
       instead of leaving them left-aligned against the beige panel */
    .cart-options .common-buttons {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}
.cart-options .update-cart-button {
    /* kept in the DOM (so the qty-stepper/remove-link JS can still submit through it) but
       hidden visually: the design updates live via the stepper instead of a manual button */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: none !important;
}
.cart-options .continue-shopping-button {
    background: none !important;
    color: var(--uhoh-ink-muted) !important;
    border: none !important;
    text-decoration: underline;
    padding: 0 !important;
}
.cart-options .continue-shopping-button:hover {
    transform: none !important;
    background: none !important;
}
/* "Estimate shipping" is an <a>, not a <button>/<submit>, so it misses the
   sitewide dark-pill button rule above and keeps the base theme's flat
   blue (styles.css) - match it to Checkout/every other button by hand */
.cart-options .estimate-shipping-button {
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border: 2px solid var(--uhoh-ink) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-sans) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease;
}
.cart-options .estimate-shipping-button:hover,
.cart-options .estimate-shipping-button:focus {
    background-color: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    transform: translateY(-2px) scale(1.03);
}
/* destructive "Empty basket" action: outlined red pill, fills on hover */
.cart-options .uhoh-empty-cart-button {
    --uhoh-remove-red: #d64545;
    background: none !important;
    color: var(--uhoh-remove-red) !important;
    border: 1px solid color-mix(in srgb, var(--uhoh-remove-red) 45%, transparent) !important;
    border-radius: 999px !important;
    padding: .5rem 1.1rem !important;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: none !important;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.cart-options .uhoh-empty-cart-button:hover,
.cart-options .uhoh-empty-cart-button:focus {
    color: #fff !important;
    border-color: var(--uhoh-remove-red) !important;
    background: var(--uhoh-remove-red) !important;
    transform: none !important;
}

/* -- right rail "summary" panel -- */
.uhoh-cart-aside .cart-footer {
    /* match the page background instead of the slightly darker beige, so
       this panel doesn't read as a separate/mismatched surface */
    background: var(--uhoh-cream);
    border-radius: 1.5rem;
    padding: 1.75rem;
}
/* ...except on checkout: this is the same shared OrderSummary component
   used on the cart page, but here it's the only content in that column
   (no items table/buttons beside it) and should read as its own white
   card - like every other card on the site - rather than blend into the
   page the way it deliberately does on the cart page. */
.html-checkout-page .uhoh-cart-aside .cart-footer {
    background: #fff;
    box-shadow: var(--uhoh-shadow-soft);
}
.uhoh-cart-aside .cart-collaterals {
    float: none !important;
    width: 100% !important;
    margin-bottom: 1.25rem;
}
.uhoh-cart-aside .totals {
    float: none !important;
    width: 100% !important;
    background: none !important;
    padding: 0 !important;
}
.uhoh-cart-aside .cart-collaterals .deals {
    float: none !important;
    width: 100% !important;
}
.uhoh-cart-aside .coupon-box .title strong {
    display: none;
}
.uhoh-cart-aside .coupon-box .hint {
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
    margin-bottom: .5rem;
}
.uhoh-cart-aside .coupon-box .coupon-code {
    display: flex;
    gap: .5rem;
}
.uhoh-cart-aside .coupon-box input.discount-coupon-code {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 999px !important;
    border: none !important;
    padding: .7rem 1.1rem !important;
    background: #fff;
}
.uhoh-cart-aside .coupon-box .apply-discount-coupon-code-button {
    flex: none;
}
.uhoh-cart-aside .total-info {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--uhoh-ink) 12%, transparent);
}
.uhoh-cart-aside .cart-total {
    width: 100%;
}
.uhoh-cart-aside .cart-total-left,
.uhoh-cart-aside .cart-total-right {
    padding: .35rem 0;
    color: var(--uhoh-ink-muted);
}
.uhoh-cart-aside .cart-total-right {
    text-align: right;
    font-weight: 700;
    color: var(--uhoh-ink);
}
.uhoh-cart-aside tr.order-total .cart-total-left label,
.uhoh-cart-aside tr.order-total .cart-total-right {
    font-family: var(--uhoh-font-display);
    text-transform: uppercase;
    font-size: 1.125rem;
    color: #2e1f52 !important;
}
.uhoh-cart-aside .checkout-buttons {
    margin-top: 1.5rem;
}
.uhoh-cart-aside .checkout-button {
    width: 100%;
}
.uhoh-cart-aside .addon-buttons:empty {
    display: none;
}

@media (max-width: 900px) {
    .uhoh-cart-layout {
        grid-template-columns: 1fr;
    }
    .cart td.product-picture,
    .cart td.product,
    .cart td.quantity,
    .cart td.remove-from-cart,
    .cart td.subtotal {
        order: initial;
    }
}

/* ---- checkout (one-page checkout) ---- */
.opc .step-title {
    border-radius: 1.25rem !important;
    background: #fff !important;
    box-shadow: var(--uhoh-shadow-soft);
    border: none !important;
}
.opc .allow .step-title {
    background: var(--uhoh-butter) !important;
}
.opc .step-title .number {
    background: var(--uhoh-ink) !important;
    color: var(--uhoh-cream) !important;
    border-radius: 999px !important;
    font-family: var(--uhoh-font-display);
}
.opc .step-title .title {
    font-family: var(--uhoh-font-display);
}
.opc .section {
    border-radius: 1.25rem !important;
}

/* ---- account pages ---- */
.customer-navigation .list li a,
.account-page .table-wrapper {
    border-radius: 1.25rem !important;
}
.customer-navigation .list li a {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
}
.customer-navigation .list li.active a {
    background: var(--uhoh-butter) !important;
    color: var(--uhoh-ink) !important;
}

/* ---- saved addresses: card grid with a pill label, matching the site's
   card language elsewhere instead of styles.css's plain gray info box ---- */
.address-list-page .address-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .address-list-page .address-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
.address-list-page .address-item {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    background: #fff;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 1.75rem !important;
    padding: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
}
.address-list-page .address-item .title {
    display: inline-block;
    background: var(--uhoh-butter);
    border-radius: 999px;
    padding: .4rem 1rem;
    margin-bottom: 1.25rem;
}
.address-list-page .address-item .title strong {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    font-size: .75rem;
    color: var(--uhoh-ink);
}
.address-list-page .info {
    margin: 0;
    border-top: none;
    background: none;
    padding: 0;
    line-height: 1.6;
    color: var(--uhoh-ink-muted);
}
.address-list-page .info .name {
    font-size: 1rem;
    color: var(--uhoh-ink);
}
.address-list-page .buttons {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
}
.address-list-page .button-2 {
    margin: 0 !important;
    padding: .5rem 1.1rem !important;
    background-image: none !important;
    font-family: var(--uhoh-font-sans);
    font-weight: 700;
    font-size: .8125rem !important;
}
.address-list-page .add-button {
    margin: 2rem 0 2.5rem !important;
}

/* ---- order history: one full-width card per order, matching the address
   cards' language — order number + date on the left, a status pill and the
   total on the right ---- */
.order-list-page .order-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.order-list-page .order-item {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    background: #fff;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 1.75rem !important;
    padding: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
}
.uhoh-order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.uhoh-order-row-main .title {
    margin: 0;
}
.uhoh-order-row-main .title strong {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    color: var(--uhoh-ink);
    text-transform: uppercase;
    letter-spacing: .01em;
}
.uhoh-order-date {
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-order-row-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.uhoh-order-status {
    display: inline-block;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    background: var(--uhoh-beige);
    color: var(--uhoh-ink-muted);
}
.uhoh-order-status.pending {
    background: var(--uhoh-butter);
    color: var(--uhoh-ink);
}
.uhoh-order-status.processing {
    background: var(--uhoh-sky);
    color: #2b5e73;
}
.uhoh-order-status.complete {
    background: var(--uhoh-mint);
    color: #2f6b4a;
}
.uhoh-order-status.cancelled {
    background: color-mix(in srgb, var(--uhoh-berry) 15%, transparent);
    color: var(--uhoh-berry);
}
.uhoh-order-total {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--uhoh-ink);
}
.order-list-page .uhoh-order-tracker-compact {
    margin: 1.25rem 0 0;
}
.order-list-page .buttons {
    /* styles.css absolutely positions this at the card's top-right corner at
       desktop widths (min-width:1001px), which stacks it directly on top of
       the status pill + total in .uhoh-order-row-meta above. Keep it in
       normal flow below that row instead. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
}
.order-list-page .button-2 {
    margin: 0 !important;
    padding: .5rem 1.1rem !important;
    background-image: none !important;
    font-family: var(--uhoh-font-sans);
    font-weight: 700;
    font-size: .8125rem !important;
}
@media (max-width: 560px) {
    .uhoh-order-row-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ---- customer info: personal details ---- */
.customer-info-page .fieldset,
.change-password-page .fieldset {
    max-width: 30rem;
    background: none;
    box-shadow: none;
    padding: 0;
    border: none !important;
}
.customer-info-page .fieldset .title {
    display: none;
}
.customer-info-page .form-fields,
.change-password-page .form-fields {
    padding: 0 !important;
    background: none !important;
    border-top: none !important;
}
.customer-info-page .inputs,
.change-password-page .inputs {
    margin-bottom: 1.5rem;
}
.customer-info-page .inputs label,
.change-password-page .inputs label {
    display: block;
    margin-bottom: .6rem;
    font-weight: 700;
    font-size: .875rem;
    color: var(--uhoh-ink);
    text-align: left !important;
}
.customer-info-page .inputs input[type="text"],
.customer-info-page .inputs input[type="email"],
.customer-info-page .inputs input[type="tel"],
.customer-info-page .inputs input[type="password"],
.customer-info-page .inputs select,
.change-password-page .inputs input[type="text"],
.change-password-page .inputs input[type="email"],
.change-password-page .inputs input[type="tel"],
.change-password-page .inputs input[type="password"],
.change-password-page .inputs select {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--uhoh-border) !important;
    border-radius: 1rem !important;
    background: #fff !important;
    padding: .9rem 1.1rem !important;
    font-family: var(--uhoh-font-sans);
    font-size: 1rem;
}
.customer-info-page .date-of-birth .nop-date-picker {
    display: flex;
    gap: .5rem;
}
.customer-info-page .date-of-birth select {
    flex: 1 1 0;
    min-width: 0;
    height: auto !important;
    line-height: normal !important;
}
.customer-info-page .inputs:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.customer-info-page .inputs input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--uhoh-ink);
}
.customer-info-page .inputs:has(> input[type="checkbox"]) label {
    margin: 0;
    font-weight: 600;
    order: 2;
}
.customer-info-page .inputs:has(> input[type="checkbox"]) input {
    order: 1;
}
.customer-info-page .buttons,
.change-password-page .buttons {
    margin-top: 1.5rem;
}
.customer-info-page .save-customer-info-button,
.change-password-page .change-password-button {
    width: 100%;
}

/* ---- notifications ---- */
.bar-notification.success {
    background: var(--uhoh-mint) !important;
    color: var(--uhoh-ink) !important;
}
.bar-notification.error {
    background: var(--uhoh-coral) !important;
    color: var(--uhoh-ink) !important;
}
.bar-notification.warning {
    background: var(--uhoh-butter) !important;
    color: var(--uhoh-ink) !important;
}
.message-error,
.field-validation-error {
    color: var(--uhoh-berry) !important;
}

/* ---- "Write your own review" form: base theme renders this as a flat grey
   #f9f9f9 box with centered label/input pairs and bare browser controls -
   restyle to the same card/label/input language as customer-info-page ---- */
.write-review {
    /* the last review item's hairline divider (.uhoh-review-item's
       border-bottom) sits right above this with almost no breathing room -
       push the heading down from it */
    margin: 2rem 0 2.5rem;
}
.write-review .title strong {
    font-family: var(--uhoh-font-display);
    font-size: 1.375rem;
    color: var(--uhoh-ink);
}
.write-review .fieldset {
    margin: .75rem 0 0;
}
.write-review .form-fields {
    border-top: none !important;
    background: #fff !important;
    border: 1px solid var(--uhoh-border);
    border-radius: 1.5rem;
    padding: 1.75rem !important;
}
.write-review .inputs {
    margin: 0 0 1.5rem;
    text-align: left;
}
.write-review .inputs label {
    display: block;
    margin-bottom: .6rem;
    font-weight: 700;
    font-size: .875rem;
    color: var(--uhoh-ink);
    text-align: left;
}
.write-review .inputs input.review-title,
.write-review .inputs textarea.review-text {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--uhoh-border) !important;
    border-radius: 1rem !important;
    background: #fff !important;
    padding: .9rem 1.1rem !important;
    font-family: var(--uhoh-font-sans);
    font-size: 1rem;
}
.write-review .inputs input.review-title:focus,
.write-review .inputs textarea.review-text:focus {
    outline: none;
    border-color: #4f9281 !important;
    box-shadow: 0 0 0 3px rgba(79, 146, 129, .2);
}
.write-review .inputs textarea.review-text {
    min-height: 8rem;
    resize: vertical;
}
/* "Bad ○ ○ ○ ○ ● Excellent" rating row: base theme is a bare row of
   unstyled radios wedged between two plain-text labels - give it breathing
   room and color-code the endpoints so it reads as a rating control */
.write-review .review-rating {
    padding: 0;
    margin: 0 0 1.5rem;
}
.write-review .review-rating .name-description {
    /* base theme's generic .name-description rule right-aligns this in a
       fixed 265px box (a floated-label pattern used elsewhere) - override
       to a plain block so it lines up with the other field labels above */
    display: block !important;
    width: auto !important;
    text-align: left !important;
}
.write-review .review-rating .name-description label {
    display: block;
    margin-bottom: .6rem;
    font-weight: 700;
    font-size: .875rem;
    color: var(--uhoh-ink);
}
.write-review .review-rating .rating-wrapper {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.1rem;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 999px;
    background: #fff;
    width: fit-content;
}
.write-review .review-rating div.first,
.write-review .review-rating div.last {
    font-size: .8125rem;
    font-weight: 700;
}
.write-review .review-rating div.first {
    color: var(--uhoh-berry, #c0392b) !important;
}
.write-review .review-rating div.last {
    color: #4f9281 !important;
}
/* star rating: radios run 5→1 in DOM order, each immediately followed by
   its own star <label> (see _ProductReviews.cshtml) - row-reverse flips
   that visually to 1→5 left-to-right, and the classic "~ sibling" trick
   then lights up every star up to whichever one is hovered/checked,
   because in DOM order those are all the ones that come AFTER it */
.write-review .review-rating div.uhoh-star-rating {
    /* base theme's ".write-review .review-rating div" (min-width: 769px)
       is a more specific selector matching this same element and forcing
       display: inline-block - out-specificity it explicitly rather than
       relying on source order */
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    gap: .15rem;
    height: auto !important;
}
.uhoh-star-rating input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.write-review .review-rating div.uhoh-star-rating label {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--uhoh-border, #e6e0d6);
    cursor: pointer;
    transition: color .1s ease, transform .1s ease;
}
.uhoh-star-rating input:checked ~ label,
.uhoh-star-rating label:hover,
.uhoh-star-rating label:hover ~ label {
    /* the base label color rule above is scoped through the full
       .write-review .review-rating ancestor chain, which out-specifies
       this otherwise - force the interactive gold state to win */
    color: #f2b705 !important;
}
.uhoh-star-rating input:focus-visible + label {
    outline: 2px solid #4f9281;
    outline-offset: 2px;
    border-radius: .2rem;
}
.uhoh-star-rating label:hover {
    transform: scale(1.15);
}
.write-review .buttons {
    margin-top: 1.75rem;
    text-align: center;
}

/* ---- product review photo (write form + display) ---- */
.write-review input[type="file"] {
    display: block;
    margin-top: .4rem;
    font-family: var(--uhoh-font-sans);
    font-size: .875rem;
    color: var(--uhoh-ink-muted);
}
.write-review input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .5rem 1rem;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 999px;
    background: #fff;
    font-family: var(--uhoh-font-sans);
    font-weight: 700;
    font-size: .8125rem;
    color: var(--uhoh-ink);
    cursor: pointer;
    transition: background-color .15s ease;
}
.write-review input[type="file"]::file-selector-button:hover {
    background: var(--uhoh-beige);
}
.review-picture {
    margin-top: 1rem;
}
.review-picture-img {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 1rem;
    box-shadow: var(--uhoh-shadow-soft);
    object-fit: cover;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.review-picture-img:hover {
    transform: scale(1.03);
    box-shadow: var(--uhoh-shadow-lift);
}

/* ---- review list cards: base theme wraps each review in a grey boxed
   header + padded body - swap for a flat, hairline-divided list (rating +
   date up top, avatar + name, bold title, body text, photo) ---- */
.product-review-list .title {
    font-family: var(--uhoh-font-display);
    font-size: 1.375rem;
    color: var(--uhoh-ink);
}
.uhoh-review-item {
    margin: 0 !important;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--uhoh-border);
}
.uhoh-review-item:first-of-type {
    border-top: 1px solid var(--uhoh-border);
}
.uhoh-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 0 .85rem;
}
.uhoh-review-head .product-review-box {
    margin: 0 !important;
}
.uhoh-review-date {
    flex: none;
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-review-item .review-content {
    padding: 0 !important;
}
.uhoh-review-author {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
}
.uhoh-review-card .uhoh-review-author {
    justify-content: center;
}
.uhoh-review-author .avatar {
    /* base theme's generic ".avatar" rule (built for the larger avatar-page
       upload widget) sets a fixed 120px width - collapse it back down to
       the actual 2rem circle so the name doesn't sit far away from it */
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
    flex: none;
}
.uhoh-review-author .avatar-img {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1.5px solid color-mix(in srgb, #4f9281 45%, transparent);
}
.uhoh-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, #4f9281 45%, transparent);
    color: #4f9281;
    background: color-mix(in srgb, #4f9281 8%, transparent);
}
.uhoh-review-author-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--uhoh-ink) !important;
    text-decoration: none;
}
.uhoh-review-item .review-title {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 .5rem;
    line-height: 1.4;
    font-size: 1rem;
    font-weight: 700;
    color: var(--uhoh-ink);
}
.uhoh-review-item .review-text {
    /* base theme's ".review-text { display: table }" was sized for the old
       avatar+text side-by-side layout - now that avatar lives in its own
       row above, that table layout just auto-sizes this and the photo
       into odd columns instead of stacking them */
    display: block !important;
    margin: 0;
    line-height: 1.6;
    font-size: .9375rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-review-item .review-text .text-body {
    margin: 0;
}
.uhoh-review-item .review-picture {
    display: flex;
    gap: .6rem;
    margin-top: .85rem;
}

/* ---- generic content pages (About, contact, topics) ---- */
.topic-page,
.contact-page,
.login-page,
.registration-page {
    font-family: var(--uhoh-font-sans);
}

/* ---- login page: unify the "New Customer" / "Returning Customer" panels.
   styles.css gives them mismatched partial backgrounds — a boxed .text but a
   button sitting bare on the page for New Customer, versus a boxed
   .form-fields in one gray shade and a separately-boxed button in a
   different (white) shade for Returning Customer. Give both one consistent
   card treatment instead. ---- */
.login-page .new-wrapper,
.login-page .returning-wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1.75rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin: 0 0 1.5rem;
}
@media all and (min-width: 1001px) {
    .login-page .customer-blocks {
        display: flex;
        align-items: stretch;
        gap: 1.5rem;
    }
    .login-page .new-wrapper,
    .login-page .returning-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }
}
.login-page .returning-wrapper form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.login-page .new-wrapper .buttons,
.login-page .returning-wrapper .buttons {
    margin-top: auto;
    text-align: center;
}
.login-page .title,
.login-page .title strong {
    font-family: var(--uhoh-font-display) !important;
    font-weight: 800 !important;
    color: var(--uhoh-ink);
}
.login-page .new-wrapper .title {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e6e6e6;
}
.login-page .new-wrapper .text {
    background: none;
    border-top: none;
    padding: 1.5rem 0 0;
    margin: 0 0 1.5rem;
    color: var(--uhoh-ink-muted);
    line-height: 1.7;
}
.login-page .new-wrapper .buttons,
.login-page .returning-wrapper .buttons {
    background: none;
    padding: 1.5rem 0 0;
}
.login-page .returning-wrapper .form-fields {
    background: none;
    padding: 1.5rem 0 0;
}
/* hide the "About login / registration" topic block; content is kept in
   admin (Content Management > Topics > LoginRegistrationInfo), just not shown */
.login-page .page-body > .topic-block {
    display: none;
}

/* ---- registration page: match the page's cream background instead of the
   default light-gray form panel, keep input fields white (like contact us) ---- */
.registration-page .fieldset {
    background: none;
}
.registration-page .form-fields {
    background: var(--uhoh-cream);
    border-top: none;
}
.registration-page input[type="text"],
.registration-page input[type="email"],
.registration-page input[type="password"],
.registration-page input[type="tel"],
.registration-page select {
    background: #fff;
}
/* base styles.css left-aligns each label+input row (in a fixed-width column)
   on desktop, while the section titles above them ("Register", "Your Personal
   Details", ...) stay centered - center the rows too so they line up under
   their titles instead of sitting off to the left */
.registration-page .inputs {
    text-align: center;
}

/* ---- address add/edit page: same treatment as registration ---- */
.address-edit-page .edit-address {
    background: var(--uhoh-cream);
    border-top: none;
}
.address-edit-page input[type="text"],
.address-edit-page input[type="email"],
.address-edit-page input[type="password"],
.address-edit-page input[type="tel"],
.address-edit-page select {
    background: #fff;
}

/* ---- checkout: confirm-order step's billing/shipping review boxes ---- */
.order-review-data > div {
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
}

/* ---- contact page ---- */
.uhoh-contact-hero {
    padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 0;
}
.uhoh-contact-title {
    margin-top: .75rem;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    color: #4f9281;
}
.uhoh-contact-lede {
    margin-top: 1rem;
    max-width: 34rem;
    color: var(--uhoh-ink-muted);
    font-size: 1.0625rem;
}
.uhoh-contact-cards {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.uhoh-contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
}
.uhoh-contact-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uhoh-contact-card-label {
    display: block;
    font-weight: 700;
    color: var(--uhoh-ink);
}
.uhoh-contact-card-value {
    display: block;
    margin-top: .15rem;
    font-size: .875rem;
    color: var(--uhoh-ink-muted);
}
.uhoh-contact-card-butter { background: var(--uhoh-butter); }
.uhoh-contact-card-butter .uhoh-contact-card-icon { color: var(--uhoh-butter-deep); }
.uhoh-contact-card-mint { background: var(--uhoh-mint); }
.uhoh-contact-card-mint .uhoh-contact-card-icon { color: #4b8f6a; }
.uhoh-contact-card-sky { background: var(--uhoh-sky); }
.uhoh-contact-card-sky .uhoh-contact-card-icon { color: #3d7d94; }

.uhoh-contact-body {
    margin-top: 3.5rem;
    padding: 0 clamp(1.25rem, 4vw, 4rem) 4rem;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3.5rem;
    align-items: start;
}
.uhoh-contact-subhead {
    font-size: 1.5rem;
    color: #4f9281;
}
.uhoh-contact-form {
    margin-top: 1.5rem;
}
.uhoh-contact-field {
    margin-bottom: 1.25rem;
}
.uhoh-contact-field label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: .875rem;
}
.uhoh-contact-field input,
.uhoh-contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 1rem !important;
    border: 1.5px solid var(--uhoh-border) !important;
    padding: .8rem 1rem !important;
    font-family: var(--uhoh-font-sans);
    background: #fff;
}
.uhoh-contact-field textarea {
    min-height: 9rem;
    resize: vertical;
}
.uhoh-contact-form .buttons {
    margin-top: .5rem;
}

.uhoh-contact-faq-list {
    margin-top: 1.5rem;
}
.uhoh-contact-faq-item {
    border-bottom: 1px solid var(--uhoh-border);
}
.uhoh-contact-faq-item:last-child {
    border-bottom: none;
}
.uhoh-contact-faq-question {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: none !important;
    color: var(--uhoh-ink) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.1rem 0 !important;
    font-family: var(--uhoh-font-sans) !important;
    font-weight: 700 !important;
    font-size: 1rem;
    text-transform: none !important;
    text-align: left;
    cursor: pointer;
}
.uhoh-contact-faq-question:hover {
    transform: none !important;
    background: none !important;
}
.uhoh-contact-faq-chevron {
    flex-shrink: 0;
    color: var(--uhoh-ink-muted);
    transition: transform .25s ease;
}
.uhoh-contact-faq-item.uhoh-contact-faq-open .uhoh-contact-faq-chevron {
    transform: rotate(180deg);
    color: #4f9281;
}
.uhoh-contact-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.uhoh-contact-faq-item.uhoh-contact-faq-open .uhoh-contact-faq-answer {
    max-height: 20rem;
}
.uhoh-contact-faq-answer p {
    margin: 0 0 1.1rem;
    color: var(--uhoh-ink-muted);
    font-size: .9375rem;
    line-height: 1.55;
}
@media (max-width: 900px) {
    .uhoh-contact-cards {
        grid-template-columns: 1fr;
    }
    .uhoh-contact-body {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uhoh-hero-visual, .uhoh-star, .uhoh-cloud {
        animation: none !important;
    }
}

/* ---- order details: Confirmed / Processing / Shipped / Delivered tracker ---- */
.uhoh-order-tracker {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 clamp(1.25rem, 4vw, 4rem);
}
/* compact variant: used inline within each row of the "My account > Orders" list,
   where the tracker sits inside an already-padded order-item card */
.uhoh-order-tracker-compact {
    max-width: none;
    margin: 1rem 0;
    padding: 0;
}
.uhoh-order-tracker-compact .uhoh-tracker-steps {
    padding: 1.1rem .75rem;
    box-shadow: none;
    border: 1px solid var(--uhoh-border);
}
.uhoh-order-tracker-compact .uhoh-tracker-label {
    font-size: .75rem;
}
.uhoh-order-tracker-compact .uhoh-tracker-dot {
    width: 16px;
    height: 16px;
}
.uhoh-tracker-cancelled {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 1rem 1.5rem;
    color: var(--uhoh-berry);
    font-weight: 700;
    text-align: center;
}
.uhoh-tracker-steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: var(--uhoh-shadow-soft);
}
.uhoh-tracker-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: .8125rem;
}
.uhoh-tracker-step::before {
    content: '';
    position: absolute;
    top: 9px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--uhoh-border);
    z-index: 0;
}
.uhoh-tracker-step:first-child::before {
    content: none;
}
.uhoh-tracker-step.uhoh-tracker-done::before {
    background: var(--uhoh-mint);
}
.uhoh-tracker-dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid var(--uhoh-border);
    margin-bottom: .6rem;
    transition: background-color .25s ease, border-color .25s ease;
}
.uhoh-tracker-step.uhoh-tracker-done .uhoh-tracker-dot {
    background: var(--uhoh-mint);
    border-color: var(--uhoh-mint);
}
.uhoh-tracker-label {
    font-weight: 600;
    color: var(--uhoh-ink-muted);
}
.uhoh-tracker-step.uhoh-tracker-done .uhoh-tracker-label {
    color: var(--uhoh-ink);
    font-weight: 700;
}
.uhoh-tracker-sublabel {
    margin-top: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--uhoh-ink-muted);
}
@media (max-width: 560px) {
    .uhoh-tracker-label {
        font-size: .6875rem;
    }
    .uhoh-tracker-sublabel {
        display: none;
    }
}

/* on narrow screens, the logo + Menu pill + language selector + 4 icons don't all fit —
   drop the language/currency selector from the header row (still reachable via footer/other pages).
   Placed at the very end of the file so it reliably wins over the earlier non-media-query
   ".uhoh-header-selectors { display:flex !important }" rule regardless of source order. */
@media (max-width: 480px) {
    .uhoh-header-selectors {
        display: none !important;
    }
    .uhoh-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .uhoh-header-icons ul {
        gap: 0 !important;
    }
}

/* ==========================================================================
   Story World page (/our-story) — self-contained token/class scope so it
   doesn't affect any other page. Mirrors the design handoff's own --uo-*
   token names 1:1 so the section markup didn't need per-property rewriting.
   ========================================================================== */
.uo-story {
    --uo-cream: var(--uhoh-cream);
    --uo-beige: var(--uhoh-beige);
    --uo-butter: var(--uhoh-butter);
    --uo-butter-deep: var(--uhoh-butter-deep);
    --uo-coral: var(--uhoh-coral);
    --uo-sky: var(--uhoh-sky);
    --uo-mint: var(--uhoh-mint);
    --uo-berry: var(--uhoh-berry);
    /* deliberate departure from the sitewide brown ink — this page's own
       "grape" tone, scoped here only, per the design handoff's intent */
    --uo-ink: #3f2a63;
    --ink-950: #3f2a63;
    --uo-muted: #8a7f9b;
    --text-muted: var(--uo-muted);
    --font-display: 'Fredoka', 'Hanken Grotesk', sans-serif;
    background: var(--uo-cream);
}
.uo-story .mk-display {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0;
}
.uo-story .mk-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--uo-muted);
}
.uo-story p {
    margin: 0;
}

/* scroll-reveal: visible by default; hidden state only applies once JS adds
   .uo-motion to the root (progressive enhancement — no-JS shows everything) */
.uo-motion .uo-rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.uo-motion .uo-rv.is-in {
    opacity: 1;
    transform: none;
}
.uo-motion .uo-rv-d1 { transition-delay: .12s; }
.uo-motion .uo-rv-d2 { transition-delay: .24s; }
.uo-motion .uo-rv-d3 { transition-delay: .36s; }
.uo-motion .uo-rv-d4 { transition-delay: .48s; }

@keyframes uo-tip {
    0%, 60%, 100% { transform: rotate(0deg); }
    72% { transform: rotate(-13deg); }
    84% { transform: rotate(4deg); }
}
@keyframes uo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.uo-story .uo-tip.is-in {
    animation: uo-tip 3.6s cubic-bezier(.22,1,.36,1) .3s infinite;
}
.uo-story .uo-bob {
    animation: uo-bob 2.6s ease-in-out infinite;
}
.uo-motion .uo-ink-line {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2.4s cubic-bezier(.22,1,.36,1);
}
.uo-motion .uo-ink-line.is-in {
    stroke-dashoffset: 0;
}
.uo-story a:focus-visible,
.uo-story button:focus-visible {
    outline: 3px solid var(--uo-ink);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .uo-story .uo-rv {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .uo-story .uo-tip.is-in,
    .uo-story .uo-bob {
        animation: none !important;
    }
    .uo-story .uo-ink-line {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
}

/* image placeholders (real photography to follow) */
.uo-img-slot {
    position: relative;
    background: var(--uo-beige);
}
.uo-img-slot::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15%;
}

.uo-btn-butter,
.uo-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 1.75rem;
    border-radius: 999px;
    background: var(--uo-butter) !important;
    color: var(--uo-ink) !important;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.uo-cta-btn:hover {
    background: var(--uo-butter-deep) !important;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .uo-story .uo-story-split {
        grid-template-columns: 1fr !important;
    }
    .uo-story .uo-story-split > * {
        order: initial !important;
        justify-self: initial !important;
        text-align: left !important;
    }
    .uo-story .uo-story-details {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 560px) {
    .uo-story .uo-story-details {
        grid-template-columns: 1fr !important;
    }
    .uo-story .uo-story-details figure[style*="span 2"] {
        grid-column: span 1 !important;
    }
}

/* ==========================================================================
   Community page (/community) — self-contained token/class scope, mirrors
   the Story World page's approach so it doesn't affect any other page.
   ========================================================================== */
.uo-community {
    --uo-cream: var(--uhoh-cream);
    --uo-beige: var(--uhoh-beige);
    --uo-ink: #3f2a63;
    --uo-muted: #8a7f9b;
    --text-muted: var(--uo-muted);
    --text-strong: var(--uo-ink);
    --surface-card: #ffffff;
    --ring-card: rgba(63,42,99,0.08);
    --font-display: 'Fredoka', 'Hanken Grotesk', sans-serif;
    background: var(--uo-cream);
}
.uo-community .mk-display {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0;
}
.uo-community .mk-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--uo-muted);
}
.uo-community p {
    margin: 0;
}
.uo-community .uo-follow-btn {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--uo-ink);
    color: var(--uo-cream);
    padding: 14px 26px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
}
.uo-community .uo-follow-btn:hover {
    background: #2f2049;
    transform: translateY(-2px);
}
.uo-community .uo-follow-btn:focus-visible {
    outline: 3px solid var(--uo-ink);
    outline-offset: 3px;
}
.uo-community .uo-lift {
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1);
}
.uo-community .uo-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(63,42,99,0.14);
}
@media (prefers-reduced-motion: reduce) {
    .uo-community .uo-lift,
    .uo-community .uo-follow-btn {
        transition: none !important;
    }
    .uo-community .uo-lift:hover {
        transform: none !important;
    }
}
@media (max-width: 1100px) {
    .uo-community-gallery {
        columns: 3 !important;
    }
}
@media (max-width: 760px) {
    .uo-community-gallery {
        columns: 2 !important;
        column-gap: 16px !important;
    }
}
@media (max-width: 520px) {
    .uo-community-gallery {
        columns: 1 !important;
    }
}

/* ---- Sitemap page: base theme alternates a plain (page-background) title
   band with a light-gray .entity-body band per section, producing a visible
   striped look. Unify both onto the page's own cream background instead. ---- */
.sitemap-page .entity-body {
    background-color: transparent;
    border-top: none;
}

/* ---- Guest newsletter signup popup (_NewsletterPopup.cshtml) ---- */
.uhoh-nlpop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.uhoh-nlpop[hidden] {
    display: none;
}
.uhoh-nlpop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.uhoh-nlpop__overlay {
    position: absolute;
    inset: 0;
    background: rgba(66, 61, 58, .55);
}
.uhoh-nlpop__card {
    position: relative;
    width: min(30rem, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
    padding: 2.5rem 2rem 2rem;
    border-radius: 1.75rem;
    background: var(--uhoh-cream, #fbf9f2);
    box-shadow: var(--uhoh-shadow-lift, 0 30px 60px rgba(0, 0, 0, .25));
    text-align: center;
    transform: translateY(12px) scale(.98);
    transition: transform .25s ease;
}
.uhoh-nlpop.is-open .uhoh-nlpop__card {
    transform: none;
}
.uhoh-nlpop__x {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--uhoh-ink-muted, #8a827c);
    cursor: pointer;
}
.uhoh-nlpop__x:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--uhoh-ink, #423d3a);
}
.uhoh-nlpop__eyebrow {
    margin: 0 0 .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4f9281;
}
.uhoh-nlpop__title {
    margin: 0 0 .6rem;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    color: var(--uhoh-ink, #423d3a);
}
.uhoh-nlpop__text {
    margin: 0 auto 1.25rem;
    max-width: 24rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--uhoh-ink-muted, #6d655f);
}
.uhoh-nlpop__field {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}
@media (max-width: 400px) {
    .uhoh-nlpop__field {
        flex-direction: column;
    }
}
.uhoh-nlpop__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .75rem 1rem;
    border: 1px solid rgba(66, 61, 58, .2);
    border-radius: 999px;
    background: #fff;
    font-size: .95rem;
}
.uhoh-nlpop__input:focus {
    outline: none;
    border-color: #4f9281;
    box-shadow: 0 0 0 3px rgba(79, 146, 129, .2);
}
.uhoh-nlpop__btn {
    flex: 0 0 auto;
    padding: .75rem 1.4rem;
    border: none;
    border-radius: 999px;
    background: var(--uhoh-ink, #423d3a);
    color: var(--uhoh-cream, #fbf9f2);
    font-family: var(--uhoh-font-display, inherit);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.uhoh-nlpop__btn:hover {
    background: #4f9281;
    transform: translateY(-1px);
}
.uhoh-nlpop__btn:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
}
.uhoh-nlpop__msg {
    min-height: 1.2em;
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: var(--uhoh-ink-muted, #6d655f);
}
.uhoh-nlpop__msg.is-error {
    color: #c0392b;
}
.uhoh-nlpop__decline {
    display: inline-block;
    margin-top: .75rem;
    /* the theme's global "button, .button-1, ..." rule paints these with the
       dark ink pill via !important, so match its weight to widen the hit area */
    padding: .85rem 1.75rem !important;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}
.uhoh-nlpop__code {
    display: inline-block;
    margin: .25rem 0 1rem;
    padding: .6rem 1.5rem;
    border: 2px dashed #4f9281;
    border-radius: .9rem;
    background: #fff;
    font-family: var(--uhoh-font-display, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--uhoh-ink, #423d3a);
}
.uhoh-nlpop__copy {
    display: block;
    margin: 0 auto .75rem;
}

/* ---- "Estimate shipping" popup (cart page): default Magnific Popup chrome
   is a flat white square-cornered box - restyle to match the newsletter
   popup's cream/rounded/lifted card language so every popup on the site
   feels like the same component ---- */
.estimate-shipping-popup.mfp-with-anim {
    max-width: 30rem !important;
    width: calc(100% - 2.5rem) !important;
    padding: 2rem 1.75rem 1.75rem !important;
    border-radius: 1.75rem !important;
    background: var(--uhoh-cream, #fbf9f2) !important;
    box-shadow: var(--uhoh-shadow-lift, 0 30px 60px rgba(0, 0, 0, .25));
}
.mfp-bg {
    background: var(--uhoh-ink, #423d3a) !important;
    opacity: .55 !important;
}
.estimate-shipping-popup .mfp-close {
    top: .5rem !important;
    right: .5rem !important;
    width: 2rem;
    height: 2rem;
    /* base Magnific Popup styling gives this a 44px line-height to center
       its × in a taller default close button - left as-is against our
       32px circle it pushes the glyph off-center and clips it against the
       circle's curve; flex-center it instead so sizing doesn't matter */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border-radius: 999px;
    /* this is a <button>, so the sitewide "button {...}" rule (dark ink
       fill) wins unless matched with the same !important weight */
    background: transparent !important;
    color: var(--uhoh-ink-muted, #8a827c) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.estimate-shipping-popup .mfp-close:hover {
    background: rgba(0, 0, 0, .06) !important;
    color: var(--uhoh-ink, #423d3a) !important;
    transform: none !important;
}
.estimate-shipping-popup .ship-to-title,
.estimate-shipping-popup .choose-shipping-title {
    margin: 0 0 .85rem;
    font-family: var(--uhoh-font-display, inherit);
    font-size: 1.1rem;
    color: var(--uhoh-ink, #423d3a);
}
.estimate-shipping-popup .choose-shipping-title {
    margin-top: 1.5rem;
}
.estimate-shipping-popup select.estimate-shipping-address-control {
    /* native select styling draws its own square dropdown-arrow box in
       Chrome/Edge on Windows, breaking out of the rounded pill - swap for
       a custom chevron instead */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d655f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
    background-size: .85rem !important;
    padding-right: 2.5rem !important;
}
.estimate-shipping-popup .estimate-shipping-address-control {
    /* base theme fixes height: 36px (styles.css) - too short for this
       padding, which clips the text against the top of the box */
    box-sizing: border-box;
    height: auto !important;
    width: 100%;
    padding: .7rem 1.1rem !important;
    border: 1px solid rgba(66, 61, 58, .2) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: .9rem;
    line-height: 1.3;
}
.estimate-shipping-popup .estimate-shipping-address-control:focus {
    outline: none;
    border-color: #4f9281 !important;
    box-shadow: 0 0 0 3px rgba(79, 146, 129, .2);
}
.estimate-shipping-popup .shipping-options {
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.estimate-shipping-popup .shipping-options-header {
    background: var(--uhoh-beige, #efe8dc);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--uhoh-ink-muted, #6d655f);
}
.estimate-shipping-popup .estimate-shipping-row {
    padding: .65rem .85rem;
}
.estimate-shipping-popup .apply-shipping-button-container {
    margin-top: 1.5rem;
    text-align: center;
}
.estimate-shipping-popup .apply-shipping-button {
    border-radius: 999px !important;
}

/* ---- jQuery UI dialog popups (Terms of Service / Privacy Notice "Read"
   links on cart, checkout, registration, vendor apply) - no jquery-ui theme
   CSS is loaded on the storefront, so these render with bare/default
   browser chrome (flat white box, grey titlebar, literal "Close" text).
   Restyle to the same cream/rounded/lifted card + circular X close button
   used by every other popup on the site. ---- */
.ui-dialog {
    /* no jquery-ui theme CSS is loaded on the storefront, so ".ui-front"
       has no actual z-index rule behind it - without setting one
       explicitly here, the cinematic video section's own internal layers
       (its own stacking context, via position: sticky) can paint above
       this dialog instead of the other way around */
    z-index: 3000 !important;
    max-width: calc(100vw - 2.5rem) !important;
    width: min(34rem, calc(100vw - 2.5rem)) !important;
    border: none !important;
    border-radius: 1.75rem !important;
    background: var(--uhoh-cream, #fbf9f2) !important;
    box-shadow: var(--uhoh-shadow-lift, 0 30px 60px rgba(0, 0, 0, .25)) !important;
    overflow: hidden;
}
.ui-widget-overlay {
    z-index: 2999 !important;
    background: var(--uhoh-ink, #423d3a) !important;
    opacity: .55 !important;
}
/* base theme dims the page behind EVERY .ui-dialog via this ::before
   (its own hand-rolled modal backdrop, applied regardless of the `modal`
   option) - recolor it to match every other popup's overlay instead of
   plain black, at the same .55 ink tint */
.ui-dialog:before {
    background-color: color-mix(in srgb, var(--uhoh-ink, #423d3a) 55%, transparent) !important;
}
.ui-dialog-titlebar {
    position: relative;
    /* must stay opaque - this sits between the dialog's own background and
       the ::before dimming overlay above, in paint order, so a transparent
       background here lets that full-page dim bleed through instead of
       showing the card's cream surface */
    background: var(--uhoh-cream, #fbf9f2) !important;
    border: none !important;
    border-bottom: 1px solid var(--uhoh-border);
    padding: 1.25rem 3rem 1.25rem 1.75rem !important;
}
.ui-dialog-title {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--uhoh-ink);
}
.ui-dialog-titlebar-close {
    position: absolute !important;
    top: .6rem !important;
    right: .6rem !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    border-radius: 999px !important;
    color: var(--uhoh-ink-muted, #8a827c) !important;
    font-size: 0 !important;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.ui-dialog-titlebar-close:hover {
    background: rgba(0, 0, 0, .06) !important;
    color: var(--uhoh-ink, #423d3a) !important;
    transform: none !important;
}
/* hide the built-in icon-font span + literal "Close" text and draw a
   plain × instead, matching every other popup's close button */
.ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}
.ui-dialog-titlebar-close::after {
    content: "\00d7";
    font-size: 1.5rem;
    line-height: 1;
}
.ui-dialog-content {
    padding: 1.75rem !important;
    font-family: var(--uhoh-font-sans);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--uhoh-ink-muted);
}
.ui-dialog-content .page-title {
    display: none;
}
.ui-dialog-buttonpane {
    background: none !important;
    border: none !important;
    padding: 0 1.75rem 1.75rem !important;
}
.ui-dialog-buttonpane button {
    border-radius: 999px !important;
}

/* ==========================================================================
   Loading screen — brand splash shown once per browser session while the
   first page loads. See Views/Shared/_LoadingScreen.cshtml.
   ========================================================================== */
.uhoh-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--uhoh-cream);
    opacity: 1;
    transition: opacity .5s ease;
}
.uhoh-loading-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.uhoh-loading-screen video {
    width: min(360px, 55vw);
    height: auto;
    display: block;
}

/* footer newsletter box — gap between the email field and the Subscribe button */
.newsletter-email {
    display: flex;
    flex-wrap: nowrap;
    gap: .6rem;
    overflow: visible;
}
.newsletter-email input[type="email"] {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.newsletter-subscribe-button {
    float: none;
    flex: 0 0 auto;
}

/* ---- "5% off your first order" notice (Views/Shared/_FirstOrderPromo.cshtml) ---- */
.uhoh-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding: .9rem 1.25rem;
    background: #ffe6a6;
    color: var(--uhoh-ink);
    text-align: center;
    font-family: var(--uhoh-font-sans);
}
.uhoh-promo-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
}
.uhoh-promo-text strong {
    color: #3f7566;
    margin-right: .25rem;
}
.uhoh-promo-code {
    display: inline-block;
    padding: .1rem .6rem;
    border: 1.5px dashed #4f9281;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .6);
    color: #3f7566;
    letter-spacing: .06em;
    white-space: nowrap;
}
.uhoh-promo-btn {
    display: inline-block;
    padding: .55rem 1.3rem;
    border-radius: 999px;
    background: #4f9281;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease;
}
.uhoh-promo-btn:hover {
    background: #3f7566;
}
.uhoh-promo-register,
.uhoh-promo-guest,
.uhoh-promo-done {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    border-radius: 1.25rem;
}
@media (max-width: 600px) {
    .uhoh-promo { padding: .85rem 1rem; }
    .uhoh-promo-text { font-size: .95rem; }
}
/* home-page notice sits above the footer on the plain page background (no yellow band) */
.uhoh-promo-strip {
    background: transparent;
    padding: 2.5rem 1.25rem;
}

/* ---- account > reward points: balance lines as a card, each history row as
   a rounded item card (same language as the cart / order-details tables) ---- */
.reward-points-page .reward-points-overview {
    background: #fff;
    border: 1.5px solid var(--uhoh-border);
    border-radius: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.7;
    color: var(--uhoh-ink-muted);
}
.reward-points-page .reward-points-overview .current-balance {
    font-family: var(--uhoh-font-display);
    font-weight: 700;
    color: var(--uhoh-ink);
}
.reward-points-page .reward-points-history .table-wrapper {
    overflow: visible;
    border-radius: 0 !important;
}
.reward-points-page .reward-points-history .data-table thead {
    display: none;
}
.reward-points-page .reward-points-history .data-table,
.reward-points-page .reward-points-history .data-table tbody {
    display: block;
    width: 100%;
}
.reward-points-page .reward-points-history .data-table colgroup {
    display: none;
}
.reward-points-page .reward-points-history .data-table tr {
    display: grid;
    grid-template-columns: 1.3fr .7fr .8fr 2fr 1.3fr;
    gap: 1rem;
    align-items: start;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--uhoh-shadow-soft);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.reward-points-page .reward-points-history .data-table td {
    display: block;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    font-size: .9375rem;
    color: var(--uhoh-ink);
}
.reward-points-page .reward-points-history .data-table td::before {
    display: block;
    margin-bottom: .2rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--uhoh-ink-muted);
}
.reward-points-page .reward-points-history td.date::before { content: "Date"; }
.reward-points-page .reward-points-history td.points::before { content: "Points"; }
.reward-points-page .reward-points-history td.points-balance::before { content: "Balance"; }
.reward-points-page .reward-points-history td.message::before { content: "Message"; }
.reward-points-page .reward-points-history td.endDate::before { content: "Expires"; }
.reward-points-page .reward-points-history td.points {
    font-family: var(--uhoh-font-display);
    font-weight: 800;
    font-size: 1.125rem;
}
@media (max-width: 800px) {
    .reward-points-page .reward-points-history .data-table tr {
        grid-template-columns: 1fr 1fr;
    }
    .reward-points-page .reward-points-history td.message {
        grid-column: 1 / -1;
        order: 5;
    }
}