/* --------------------------------------------------------------------------
   HEADER

   Written from scratch rather than restyled. The theme's header - the
   .header-middle-left / -center / -right trio, .header-controls, and the search
   form that arrives carrying .mobile-search-bar - has rules spread across
   bundle.css that kept winning in ways that were not worth chasing: the form
   was display:none, its submit link drew a second magnifying glass, and the
   slots each claimed a third of the row.

   None of those class names are used here, so none of those rules apply. What
   the app still needs from the old markup is kept: #TemplateLangId,
   #lang-options-desc, the results panel and the overlay.

   The field carries .title1mob because zini.js binds typeWatch to that class -
   that is the live-search wiring, and it is the one thing worth inheriting.
   -------------------------------------------------------------------------- */
.app-header {
    /* Rewriting the <header> dropped the Tailwind utilities that used to pin it
       - fixed top-0 left-0 w-full z-50. Declared here instead of back in the
       markup, so the positioning lives with the rest of the header's styles. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;

    padding-top: env(safe-area-inset-top, 0px);
    background-color: #ffffff;
    transition: background-color .2s ease;
}

/* The magnifier, shown only at the top of the page where the field is not. */
.app-header__open {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: none;
    color: #1a1c1c;
    cursor: pointer;
}

.app-header__open .material-symbols-outlined {
    font-size: 22px;
}

.app-header__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 0 16px;
}

.app-header__logo {
    flex: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .3em;
    margin-left: .3em;
    text-transform: uppercase;
    color: #1a1c1c;
    text-decoration: none;
    white-space: nowrap;
}

/* The field. flex:1 so it takes whatever the logo and the account leave. */
.app-header__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border-radius: 9999px;
    background-color: #f3f3f3;
}

.app-header__search-icon {
    flex: none;
    font-size: 20px;
    color: #fff;
}

.app-header__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
background-color:transparent !important;
    font-family: Inter, sans-serif;

    /* 16px or iOS zooms the page when this takes focus. */
    font-size: 16px;
    color: #1a1c1c;
    -webkit-appearance: none;
    appearance: none;
}
.app-header__field:focus {
    outline: none !important;
    box-shadow: none !important;
}

body.search-results-open .site-header.has-query{
    background-color:white;
}

.app-header__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.app-header__field::placeholder {
    color: #ffffff;
    opacity: 1;
}

/* Some engines still only answer to the prefixed pseudo-element. */
.app-header__field::-webkit-input-placeholder {
    color: #ffffff;
    opacity: 1;
}

/* Only worth showing once there is something to clear. */
.app-header__clear {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: #cfc4c5;
    color: #ffffff;
    cursor: pointer;
}

.app-header__clear .material-symbols-outlined {
    font-size: 15px;
}

.app-header.has-query .app-header__clear {
    display: flex;
}

.app-header__account {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    color: #1a1c1c;
    text-decoration: none;
}

.app-header__account .material-symbols-outlined {
    font-size: 23px;
}

/* ---- two states ----

   At the top of the page: wordmark, a magnifier, and the account. No field.

   Scrolled, or while searching: the wordmark and the magnifier step aside and
   the field takes the room, inside the white rounded frame.

   .search-open is a separate class from .is-scrolled on purpose. Tapping the
   magnifier at the top of the page has to bring the field out, and if that
   reused .is-scrolled the scroll handler would strip it again on the next
   pixel of movement. */
.app-header__search {
    display: none;
}

.is-scrolled .app-header__search,
.search-open .app-header__search {
    display: flex;
}

.is-scrolled .app-header__logo,
.search-open .app-header__logo,
.is-scrolled .app-header__open,
.search-open .app-header__open {
    display: none;
}

.is-scrolled .app-header,
.search-open .app-header {
    background-color: transparent;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

    .is-scrolled .app-header,
    .search-open .app-header {
        background-color: transparent;
    }
}

.is-scrolled .app-header__search,
.search-open .app-header__search {
    background-color: rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.is-scrolled .app-header__account,
.search-open .app-header__account {
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* The language slot is filled by UpdateHeader in zini.js and shows nothing on a
   phone; it must stay in the document for that call to have a target. */
#lang-options-desc:empty {
    display: none;
}

/* ==========================================================================
   Haute Editorial — app-specific styles (Zini app clone)

   Companion to /Static/js/editorial.tailwind.js (design tokens).
   Anything expressible as a Tailwind utility belongs in the markup, not here.
   This file is only for what utilities cannot express: icon-font settings,
   third-party widget overrides, and the like.

   Relationship to extra.css
   -------------------------
   extra.css patches the LEGACY theme and is still load-bearing for every page
   that has not been migrated. Do not merge the two. As each section moves to
   the editorial design, delete that section's rules from extra.css.

   Scoping rule: never style bare element selectors here (body, h1, img, ...).
   Preflight is off precisely so the legacy theme keeps working; a global rule
   in this file would defeat that. Scope to a class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   No white flash between pages

   The gap between two server-rendered pages is the WebView repainting. Painting
   it the same colour the pages themselves paint makes the gap invisible.

   Deliberate exception to the "no bare element selectors" rule above: this is
   the one thing that cannot be scoped to a class. Only background-color is set,
   nothing the legacy theme cares about.

   #ffffff matches --body-background in bundle.css. It also has to match
   backgroundColor in Zini Mobile/capacitor.config.json (the native window) and
   the theme-color meta tag in the template. If the site moves to the editorial
   #f9f9f9 surface, all three change together or the flash comes back.
   -------------------------------------------------------------------------- */
html {
    background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Cross-document view transitions

   Turns a full page load into a crossfade instead of a blank flash. Pure
   progressive enhancement: engines without support navigate exactly as before,
   and no JavaScript is involved, so the legacy $(document).ready code is
   untouched.

   Needs both pages to opt in - they do, every page shares this stylesheet -
   and same-origin navigation, which holds inside the app.

   NOTE: this does not hide a slow server. The browser keeps the old page on
   screen while the next one loads, so a slow response reads as a frozen screen
   rather than a flash. Watch TTFB.
   -------------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: ease;
}

/* The header and the bottom navigation persist across pages. Naming them takes
   them out of the root snapshot, so they stay put instead of crossfading with
   the content - the single biggest thing that makes this read as an app rather
   than a website. */
.site-header {
    view-transition-name: app-header;
}

.app-bottom-nav {
    view-transition-name: app-bottom-nav;
}

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Room for the fixed header and bottom navigation

   Both are position:fixed, so they are out of flow and reserve no space. Without
   this, the top of every page hides under the header and the bottom of every
   page hides under the navigation - "Add to bag" buttons included.

   The two heights are measured at runtime and written onto <html> by the script
   in the template, so changing h-16 on the header or h-[64px] on the nav needs
   no edit here. The values below are only the fallback for the moment before
   that script runs, and for the case where it does not run at all.

   env(safe-area-inset-*) matters inside the app: targetSdk is 36, and Android 15
   and up draw apps edge to edge, so the header would otherwise sit underneath
   the status bar and the nav underneath the gesture bar. In a normal browser
   env() resolves to 0px and these become plain numbers.

   Third deliberate exception to the "no bare element selectors" rule.
   -------------------------------------------------------------------------- */
:root {
    --app-header-h: 65px;
    --app-bottomnav-h: 64px;
}

body {
    /* Fill the screen even when the content does not - a login form or an empty
       wishlist is short, and the page used to simply stop where its content
       did. That was always true; the opaque bottom bar covered it. Now that the
       bar floats, the gap below is visible.

       border-box so the padding below counts inside the 100dvh rather than
       adding to it, which would put a scrollbar on every short page. */
    min-height: 100dvh;
    box-sizing: border-box;
    background-color: #ffffff;

    padding-top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));

    /* --app-cta-h is 0 everywhere except a product page, where the script sets
       it to the height of the pinned "add to basket" bar. */
    padding-bottom: calc(var(--app-bottomnav-h) + var(--app-cta-h, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Anchor targets should land below the header, not behind it. */
html {
    scroll-padding-top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
}

/* Push the bars' own contents clear of the status bar and the gesture bar,
   while their backgrounds still bleed into those areas. */
.site-header {
    padding-top: env(safe-area-inset-top, 0px);
}

/* The navigation is a frame around two floating pieces. Its own height is what
   --app-bottomnav-h is measured from, so the gaps that lift the pieces off the
   edges belong here - that way the page reserves room for the whole thing and
   nothing ends up underneath it.

   Doubled class to beat Tailwind's utilities without !important. */
.app-bottom-nav.app-bottom-nav {
    height: auto;
    min-height: 0;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 12px;

    background: none;
    border: 0;
    pointer-events: none;

    /* border-box, not content-box. Tailwind puts width:100% on this element, so
       with content-box the 14px of side padding is added ON TOP of the full
       width and the right-hand pill hangs off the screen by exactly that much. */
    box-sizing: border-box;
}

/* Only the pieces take taps; the gap between them belongs to the page. */
.app-bottom-nav__home,
.app-bottom-nav__group {
    pointer-events: auto;

    background-color: #ffffffc4;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
}

.app-bottom-nav__home {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    color: #1a1c1c;
    text-decoration: none;

    transition: transform .12s ease;
}

.app-bottom-nav__home:active {
    transform: scale(.94);
}

.app-bottom-nav__group {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 6px;
    border-radius: 9999px;
}

.app-bottom-nav__item {
    width: 48px;
    height: 52px;
    color: #4c4546;
    text-decoration: none;

    transition: color .15s ease, transform .12s ease;
}

.app-bottom-nav__item:active {
    transform: scale(.92);
}

.app-bottom-nav__home .material-symbols-outlined,
.app-bottom-nav__item .material-symbols-outlined {
    font-size: 23px;
}

/* The drawer is fixed to the viewport, not to the padded body, so it must not
   inherit that padding. It handles its own safe areas. */
.account-drawer,
.app-drawer {
    padding-top: env(safe-area-inset-top, 0px);
}

/* --------------------------------------------------------------------------
   Shop menu — enters from the right

   bundle.css builds .mobile-menu as a left-hand drawer (translateX(-100%)) and
   pins it to a hardcoded top:70px. Two problems in the app:

     - the nested .mobile-submenu already slides in from the RIGHT, so the two
       levels of the same menu moved in opposite directions
     - 70px is a guess at the header height. The real header is measured into
       --app-header-h, so the two drifted apart and left a strip of the page
       showing above the menu

   Only the closed position is redefined; bundle.css's .mobile-menu.show wins on
   specificity and still resolves to translateX(0).

   Worth knowing: bundle.css hides .mobile-menu__top with display:none
   !important, which is where the close button lives. Swipe-to-close is
   therefore the only way out of this menu other than picking a category.
   -------------------------------------------------------------------------- */
.mobile-menu {
    top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    transform: translateX(100%);
    padding-bottom: calc(var(--app-bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

/* touch-action belongs on the scrolling child, not on the panel that carries the
   swipe listeners - same split as .account-drawer / .account-drawer__body. Put
   pan-y on the panel itself and the compositor can claim the gesture before the
   axis lock has decided anything. */
.mobile-menu__middle {
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Keep the bottom navigation above both menu levels (100 and 101), so "Shop"
   stays reachable while the menu is open. The account drawer at 1000 still
   covers it, which is what a modal panel should do. */
.app-bottom-nav.app-bottom-nav {
    z-index: 200;
}

/* --------------------------------------------------------------------------
   Hidden scrollbars

   Second deliberate exception to the "no bare element selectors" rule: a
   scrollbar cannot be reached through a class, only through the pseudo-element
   of whatever is scrolling.

   Scrolling itself is untouched - wheel, touch, keyboard and programmatic
   scrolling all still work. Only the indicator is gone.

   Where this actually matters: app.ziniboutique.com opened in a desktop
   browser. Android WebView and iOS WKWebView already use overlay scrollbars
   that fade out on their own, so on a phone there is little to hide.

   The cost is real on desktop: no position indicator, and no bar to drag. That
   is an accepted trade for the editorial look on a surface that is not the SEO
   site. Do not copy this into www.
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Icons — Material Symbols Outlined
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
}

/* Filled variant, for the active item in the bottom navigation. */
.material-symbols-outlined--filled {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   Live chat — ContactPigeon "Samaritan"

   TEMPORARY: hidden in the app while the bottom navigation owns that corner.
   The launcher sits bottom-left and collides with the fixed bottom nav.

   Injected at runtime by https://samaritis.contactpigeon.com/chat/launch.js
   (itself loaded by cpagent142688.js). DOM it builds:

       body > div#samaritan-container.closed > div#samaritandiv > iframe#samaritaniframe

   Hiding the container is enough; the inner <samaritanwidget-root> lives inside
   the iframe and is out of our reach anyway.

   SCOPE: this only hides the widget. ContactPigeon tracking, abandoned-cart and
   personalisation keep running, which is deliberate — those are marketing-owned.
   To disable the integration outright it is Application["EnableContactPigeon"]
   in Global.asax, which is a commercial decision, not a styling one.

   TO REVERT: delete this block.
   -------------------------------------------------------------------------- */
#samaritan-container {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Account drawer

   Slide-in panel opened by the "Account" item in the bottom navigation.
   Mechanics live here (positioning, transform, safe areas); the row styling
   inside the panel is plain Tailwind in the template.

   Safe areas matter: inside the Capacitor WebView this panel runs full-bleed,
   so it must clear the notch at the top and the home indicator at the bottom.
   env() falls back to 0px in a normal browser.
   -------------------------------------------------------------------------- */
.account-drawer,
.app-drawer {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: min(400px, 100%);
    background-color: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .12);

    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-right: env(safe-area-inset-right, 0px);

    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
}

.account-drawer.is-open,
.app-drawer.is-open {
    transform: translateX(0);
}

/* The scrolling region, so the panel header stays put.

   overscroll-behavior and touch-action belong HERE, on the element that
   actually scrolls - not on .account-drawer, which has visible overflow and
   would ignore them.

     overscroll-behavior: contain  stops the page behind from taking over when
                                   this list reaches its top or bottom
     touch-action: pan-y           tells the compositor this element owns
                                   vertical gestures, so scrolling starts
                                   immediately instead of waiting to see
                                   whether our touchmove handler will
                                   preventDefault. Horizontal is left to the
                                   swipe-to-close handler. */
.account-drawer__body,
.app-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.account-drawer-backdrop,
.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .4);

    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.account-drawer-backdrop.is-open,
.app-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    /* Dragging on the backdrop should do nothing at all, not scroll the page
       that is supposed to be locked behind it. */
    touch-action: none;
}

/* Page scroll lock while the drawer is open.

   overflow:hidden on <body> alone is not enough in a mobile WebView - the
   scrolling element there is usually <html>, so the page kept scrolling behind
   the panel and the gesture felt like it belonged to the page rather than to
   the drawer. Both elements get the class. */
html.drawer-open,
body.drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {

    .account-drawer,
    .app-drawer,
    .account-drawer-backdrop,
    .app-drawer-backdrop {
        transition: none;
    }
}

/* Section heading inside the drawer.

   Spacing lives here rather than in Tailwind classes because two places emit
   these headings: the hand-written groups in templates/652_1.html and
   DrawerHeading() in Pages/Includes/footer.incx. One definition, both callers.
   Typography stays on the element as design tokens.

   Greek all-caps drops accents, so callers pass the text through
   ReplaceAccent() before it reaches here. */
.drawer-heading {
    margin: 10px;
    padding: 12px;
    border-radius: 10px;
}

.app-bottom-nav{
    z-index:110 !important;

}

.jsCloseAccountDrawer {
    background:none;
    border:none;
}
/* ==========================================================================
   Haute Editorial — form fields and drawer polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   Text fields

   Underline instead of a box. A boxed input is the single most "web form"
   looking element there is; a rule under the text reads as editorial and lets
   the eye run down the form instead of stopping at every rectangle.

   font-size is 16px on purpose and must stay there: iOS zooms the whole page
   in when a focused input is smaller than 16px, which in a WebView looks like
   the app breaking. Set the visual size with padding, never by dropping below
   16px.

   The focus state thickens the rule and takes a pixel off the padding, so the
   field does not grow and shove the rest of the form down.
   -------------------------------------------------------------------------- */
.editorial-field {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #cfc4c5;
    border-radius: 0;
    background-color: transparent;
    padding: 10px 0;

    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .01em;
    color: #1a1c1c;

    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease;
}

.editorial-field:focus {
    outline: none;
    border-bottom-color: #000000;
    border-bottom-width: 2px;
    padding-bottom: 9px;
}

.editorial-field::placeholder {
    color: #7e7576;
}

/* Chrome paints its own pale yellow over autofilled fields, which fights the
   palette. A long inset shadow repaints it without breaking the underline. */
.editorial-field:-webkit-autofill,
.editorial-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #1a1c1c;
}

/* A select styled as one of the underlined fields. appearance:none strips the
   platform chrome, and the arrow is drawn back as a background image so it
   cannot be a Material icon element - a <select> may only contain <option>.

   The SVG is inlined rather than linked because the artifact CSP and the app's
   offline moments both make an external request a bad bet for a control that
   looks broken without it. padding-right keeps long option text off the arrow. */
.editorial-select {
    padding-right: 26px;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a1c1c' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;

    cursor: pointer;
    text-overflow: ellipsis;
}

/* Safari on iOS ignores appearance:none on a select unless it is also told not
   to draw its own border radius. */
.editorial-select::-ms-expand {
    display: none;
}

.editorial-label {
    display: block;
    margin-bottom: 6px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7e7576;
}

.editorial-group {
    display: block;
    margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.editorial-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-decoration: none;

    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
    transition: opacity .2s ease, transform .12s ease;
}

.editorial-btn--ghost {
    background-color: transparent;
    color: #1a1c1c;
    border: 1px solid #1a1c1c;
}

/* A touch of give on press. Phones have no hover, so this is the only feedback
   between the tap and the response arriving. */
.editorial-btn:active {
    transform: scale(.985);
    opacity: .9;
}

.editorial-btn[disabled] {
    opacity: .5;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Checkbox rows — terms, newsletter
   -------------------------------------------------------------------------- */
.editorial-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1c1c;
    cursor: pointer;
}

.editorial-check input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid #7e7576;
    border-radius: 0;
    background-color: #ffffff;

    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.editorial-check input[type="checkbox"]:checked {
    background-color: #000000;
    border-color: #000000;
}

/* The tick, drawn rather than loaded, so it cannot arrive late. */
.editorial-check input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 4px;
    height: 9px;
    margin: 1px auto 0;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.editorial-msg {
    padding: 12px 14px;
    border-left: 2px solid #7e7576;
    background-color: #f3f3f3;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1c1c;
}

.editorial-msg--error {
    border-left-color: #ba1a1a;
    background-color: #ffdad6;
    color: #93000a;
}

/* --------------------------------------------------------------------------
   Drawer polish
   -------------------------------------------------------------------------- */

/* A hairline where the panel meets the page, so the two do not merge when the
   content underneath happens to be white. */
.account-drawer,
.app-drawer {
    border-left: 1px solid #e2e2e2;
}

/* Blurring what is behind pushes the panel forward instead of just darkening
   the page. Guarded: without support the plain tint still reads fine. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

    .account-drawer-backdrop,
    .app-drawer-backdrop {
        background-color: rgba(0, 0, 0, .32);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

.account-drawer__body,
.app-drawer__body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Tabs inside the auth drawer.

   Both states carry the same 2px rule, the inactive one merely paler. Giving
   the active tab a thicker border than the inactive one shifts every label by a
   pixel as you switch, which reads as a wobble. */
.editorial-tab {
    flex: 1 1 0;
    padding: 14px 8px;
    border-bottom: 2px solid #e2e2e2;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #7e7576;

    transition: color .2s ease, border-color .2s ease;
}

.editorial-tab--on {
    border-bottom-color: #000000;
    color: #000000;
}

/* ==========================================================================
   Shop menu — both levels

   bundle.css styles these lists for the old theme: 18px Manrope on the first
   level, 13px on the second, chevrons floated with an inline style, and a
   back control made of an <img>. The two levels looked like different menus.

   Both levels are the same row now: label left, generous tap height, hairline
   between. Only the type scale separates them, so the second level reads as
   quieter rather than as something else entirely.

   The chevron means one thing and one thing only: "this opens another level".
   Rows that navigate straight to a category do not get one - see the helpers
   in Pages/Includes/menu.incx.
   ========================================================================== */

.mobile-menu-categories,
.mobile-submenu-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-categories > .mobile-menu-row,
.mobile-submenu-categories > .mobile-menu-row {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e2e2e2;
    text-transform: none;
}

.mobile-menu-row__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px 24px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1a1c1c;

    transition: background-color .15s ease;
}

.mobile-menu-row__link:active {
    background-color: #f3f3f3;
}

.mobile-menu-row__label {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-menu-row__chevron {
    flex: none;
    color: #7e7576;
    font-size: 22px;
}

/* Seasonal entries. The colour used to be an inline style on the anchor. */
.mobile-menu-row__link--accent {
    color: #ba1a1a;
}

/* Second level: same row, one notch quieter. */
.mobile-submenu-categories > .mobile-menu-row > .mobile-menu-row__link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #4c4546;
}

/* --------------------------------------------------------------------------
   Second-level panel
   -------------------------------------------------------------------------- */
.mobile-submenu {
    background-color: #ffffff;
}

/* Header shaped like the drawer headers: back control, then the title. */
.mobile-submenu__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 24px 0 16px;
    border-bottom: 1px solid #e2e2e2;
}

.mobile-submenu-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    color: #1a1c1c;
    text-decoration: none;
}

.mobile-submenu-back-btn .material-symbols-outlined {
    font-size: 22px;
}

.mobile-submenu-title {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1a1c1c;
}

.mobile-submenu__bottom {
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Bottom navigation — the Shop button

   Five items now: Home, Categories, Shop, Wishlist, Account. Four of them open
   something. Shop resumes - it returns to the last category or product - and
   that is a different kind of action, so it gets a different shape rather than
   just a different colour.

   It sits in the middle because that is where the thumb rests, and it lifts
   slightly out of the bar so the eye finds it without needing a label to
   explain it.

   The lift needs overflow visible on the bar; a fixed bar has nothing to clip
   against anyway.
   -------------------------------------------------------------------------- */
.app-bottom-nav.app-bottom-nav {
    overflow: visible;
}

.app-bottom-nav__shop {
    position: relative;
    text-decoration: none;
    color: #1a1c1c;
    cursor: pointer;
}/* The label sits where the other four labels sit, so the row still reads as
   one line of text with something raised above it. */
.app-bottom-nav__shop > .font-label-sm {
    color: #1a1c1c;
}

.account-drawer__body .border-surface-variant{
        margin: 13px;
    background: #ffffff;
    border-radius: 15px;
}
.account-drawer__body{
    background: #f9f9f9;
}

/* --------------------------------------------------------------------------
   Product page accordions

   bundle.css builds these with the arrow as the FIRST child, pinned to the
   left of the label, and no separator between sections - three blocks of text
   with nothing between them. It also declares .single-product-details__item-title
   twice with conflicting flex rules, so whichever loads last decides.

   Here: label left, arrow hard right, a hairline between sections, and a
   smaller type size so the three panels read as supporting detail rather than
   competing with the product name and price above them.

   row-reverse is what moves the arrow: it is first in the DOM, so reversing
   the row puts it at the right edge while space-between pushes the label to
   the left. No markup change needed, which matters because this page is shared
   with the legacy theme.
   -------------------------------------------------------------------------- */
.single-product-details__item {
    border-bottom: 1px solid #e2e2e2;
}

.single-product-details__item:not(:last-of-type) {
    margin-bottom: 0;
}

/* Doubled class to beat the two competing declarations in bundle.css without
   !important and without depending on stylesheet order. */
.single-product-details__item-title.single-product-details__item-title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.single-product-details__item-title span {
    margin-left: 0;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
    color: #1a1c1c;
}

/* The underline-on-hover the legacy theme adds would now sit under a label
   that no longer sits next to its arrow. */
.single-product-details__item-title span:after {
    content: none;
}

.single-product-details__item-title img {
    flex: none;
    width: 11px;
    height: auto;
    opacity: .55;
}

.single-product-details__item-body {
    padding-top: 0;
    padding-bottom: 16px;
}

.single-product-details__item-body span,
.single-product-details__item-body p {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #4c4546;
}

/* --------------------------------------------------------------------------
   Product page — heart over the photo, buy button pinned

   Stacking order across the app, for reference:

       drawers          1000   (backdrop 999)
       bottom nav        200
       shop menu         100
       header             50
       pinned CTA        150
       heart               5   (inside the product section)
   -------------------------------------------------------------------------- */
:root {
    --app-cta-h: 0px;
}

.section-single-product {
    position: relative;
}

/* Moved here by the script. Sized as a target first and an ornament second:
   44px is about the smallest a control should be under a thumb. */
#wishlistProduct.is-over-photo {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;

    display: flex;
    flex: none;
    width: 44px;
    max-width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;

    /* Product photography is mostly pale here, but not always - the disc keeps
       the icon readable either way. */
    background-color: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

#wishlistProduct.is-over-photo img {
    width: 22px;
}

/* With the heart gone, the buy button takes the whole row. */
.single-product-add-basket .add-to-basket {
    flex-basis: 100%;
    max-width: 100%;
}

/* The panel that wraps the buy column is position:sticky in bundle.css, and a
   sticky element ALWAYS opens a stacking context - z-index:auto or not. The
   pinned button lives inside it, so its z-index only ever competed with its own
   siblings; the related-products section, later in the document, painted over
   the whole panel and took the button with it. Raising the number could never
   have fixed that.

   Sticky also buys nothing here: on a phone this is a single column, so there
   is no second column for it to stay level with. Making it static removes the
   trap rather than working around it. */
.is-product .single-product__panel {
    position: static;
}

/* Floats like the bottom navigation: off the edges, rounded, with the page
   showing underneath. Same 14px sides and the same distance from the bottom, so
   the two bars line up on the screens where each appears.

   The frame itself is transparent and lets taps through; only the button and the
   bag take them. */
.is-product .single-product-add-basket {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;   /* above the related-products carousel (101) */

    display: flex;
    align-items: stretch;
    gap: 10px;

    margin: 0;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: none;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    pointer-events: none;
}

.is-product .single-product-add-basket > * {
    pointer-events: auto;
}

.is-product .add-to-basket {
    flex: 1 1 auto;
    max-width: none;
    height: 52px;
    padding: 0 20px;
    border-radius: 9999px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}

.is-product .add-to-basket span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    /* text-transform: uppercase; */
}

/* The bag beside the button is gone: the bottom navigation carries the same
   bag, with the same count, a centimetre below it. Two of the same control on
   one screen is a question about which one is the real one. */
.is-product .product-cta-bag {
    display: none;
}

.product-cta-bag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 9999px;

    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
    color: #1a1c1c;
    text-decoration: none;

    transition: transform .12s ease;
}

.product-cta-bag:active {
    transform: scale(.94);
}

.product-cta-bag .material-symbols-outlined {
    font-size: 23px;
}

.product-cta-bag .mini-cart-item-no {
    top: 8px;
    right: auto;
    left: 50%;
    margin-left: 3px;

    min-width: 16px;
    width: auto;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}

/* The theme's own sticky rules pin the BUTTON to bottom:0 at z-index 99999,
   which would slide it under the navigation and over the drawers. Nothing adds
   that class on this page any more, but neutralise it in case something does. */
.add-to-basket.sticky {
    position: static;
    z-index: auto;
}

/* --------------------------------------------------------------------------
   Size selection — buttons, not a dropdown

   The markup ships both: a row of .single-product-size__item divs and a mobile
   <select>. bundle.css hides the divs below 500px and shows the select. Here
   that is reversed, and the circles become equal rectangles so a row of sizes
   reads as one control rather than a string of beads.

   Selecting still runs through the legacy inline onclick; app-shell.js only
   mirrors the selected state onto the buttons, because on mobile the theme
   marks the hidden <option> instead of the div.
   -------------------------------------------------------------------------- */
.single-product-size__wrapper.single-product-size__wrapper {
    /* A grid rather than a wrapping flex row: four to a row means four equal
       columns, whatever the row happens to hold. With flex, a trailing row of
       one or two would stretch those to full width and the block would stop
       looking like a set.

       minmax(0, 1fr) rather than 1fr - a bare 1fr refuses to shrink below its
       content, so a long size label would push the grid wider than the page. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-top: 14px;
}

/* Six across once there is room. Below this a phone would be squeezing them
   under the comfortable tap width. */
@media (min-width: 600px) {

    .single-product-size__wrapper.single-product-size__wrapper {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.single-product-size__select {
    display: none;
}

.single-product-size__wrapper .single-product-size__item {
    /* The grid decides the width; the item just fills its cell. Height carries
       the tap target on its own - 42px with the row gap gives a comfortable
       strike area without making the block tall. */
    width: auto;
    min-width: 0;
    max-width: none;
    height: 42px;

    margin-right: 0;
    border: 1px solid #cfc4c5;
    border-radius: 0;
    background-color: #ffffff;

    transition: background-color .15s ease, border-color .15s ease;
}

.single-product-size__wrapper .single-product-size__item span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #1a1c1c;
}

.single-product-size__wrapper .single-product-size__item.active {
    background-color: #000000;
    border-color: #000000;
}

.single-product-size__wrapper .single-product-size__item.active span {
    color: #ffffff;
}

/* Out of stock: faded, but still there. The size existing and being gone are
   two different pieces of news, and hiding it tells neither. */
.single-product-size__wrapper .single-product-size__item.disabled {
    border-color: #e8e8e8;
    background-color: #ffffff;
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.single-product-size__wrapper .single-product-size__item.disabled span {
    color: #1a1c1c;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* "Coming soon" is news about the product, not an action on it.

   As a black bar it looked like a button that refused to be pressed, and at
   the foot of the screen it competed with the one thing there is to do here -
   asking to be told when it lands. So it reads as a line of information, in
   the flow, where the sizes would be. */
.is-product .coming-soon-btn {
    display: flex;
    align-items: center;
    gap: 9px;

    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 18px 0 0;
    padding: 13px 16px;

    background-color: #f4f4f4;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}

.is-product .coming-soon-btn::before {
    content: "schedule";
    font-family: "Material Symbols Outlined";
    font-size: 19px;
    font-weight: 400;
    font-variation-settings: "wght" 300;
    line-height: 1;
    color: #7e7576;
}

.is-product .coming-soon-btn span {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #1a1c1c;
}

/* Nothing left in any size: the button says so and stops taking taps. */
.is-product .add-to-basket.is-sold-out {
    background-color: #e2e2e2;
    pointer-events: none;
}

.is-product .add-to-basket.is-sold-out span {
    color: #7e7576;
}

/* A size the shop does not carry at all in this colour, as opposed to one that
   is merely sold out. */
.single-product-size__wrapper .single-product-size__item.invalid {
    display: none;
}

/* --------------------------------------------------------------------------
   One typeface for the whole app

   bundle.css sets the legacy theme in Manrope through a single custom property
   used in exactly one place:

       :root { --main-font-family: "Manrope", sans-serif; }
       html  { font-family: var(--main-font-family); }

   Nothing else in that file names a family, and no heading overrides it, so
   everything inherits. Redefining the property here - editorial.css loads after
   bundle.css - moves the entire legacy surface onto Inter without editing the
   theme.

   Why it mattered: the bottom bar, drawers and forms we built are Inter, while
   every legacy page underneath them stayed Manrope. Two typefaces, one screen.

   TO REVERT: delete this block. bundle.css is untouched.
   -------------------------------------------------------------------------- */
:root {
    --main-font-family: "Inter", "Manrope", sans-serif;
}

/* --------------------------------------------------------------------------
   Product price

   Struck price and current price centred under the SKU; the 30-day low, when
   there is one, small and right-aligned beneath.

   Scoped to .product-prices, not to .single-product__prices - the quick-view
   popup (#popup_prices) shares that class and still wants the theme's inline
   row.
   -------------------------------------------------------------------------- */
.single-product__prices.product-prices {
    display: block;
    margin-top: 10px;
}

.product-prices__row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}

/* The theme gives .old-price and .new-price their sizes; only the spacing that
   assumed a left-aligned row needs undoing. */
.product-prices__row .old-price,
.product-prices__row .new-price {
    margin-right: 0;
}

.product-prices__lowest {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;

    font-size: 11px;
    line-height: 1.4;
    color: #7e7576;
}

.product-prices__lowest img {
    width: 16px;
    height: auto;
    cursor: pointer;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   Product page as a detail screen

   The bottom navigation stands down here. A detail screen is somewhere you go
   INTO, and the one thing it should offer is the way out and the way to buy -
   not five other destinations competing with them.

   Nothing needs to compensate for the missing bar: the shell measures it, and
   a hidden bar measures 0px, so every calc() that depends on --app-bottomnav-h
   settles by itself.
   -------------------------------------------------------------------------- */


/* The photo runs under the fixed header on this screen, so the heart needs to
   clear it as well as the notch. */
.is-product #wishlistProduct.is-over-photo {
    top: calc(16px + env(safe-area-inset-top, 0px));
}

/* --------------------------------------------------------------------------
   Going back — the page slides off and uncovers the one behind

   Applied only when app-shell.js has marked the arrival as a history move.
   Ordinary forward navigation keeps the crossfade defined further up.

   The stacking is the whole trick: by default the incoming snapshot sits on
   top, which is right for a push and wrong for a pop. Here the OUTGOING page
   is raised above, so it reads as sliding away to reveal what was underneath
   rather than being covered over.

   The header and bottom navigation carry their own view-transition-name, so
   they stay put while the content moves - which is what stops this looking
   like a whole browser window sliding about.
   -------------------------------------------------------------------------- */
html.vt-back::view-transition-old(root) {
    z-index: 1;
    animation: zini-back-out 280ms cubic-bezier(.32, .72, 0, 1) both;
}

html.vt-back::view-transition-new(root) {
    z-index: 0;
    animation: zini-back-in 280ms cubic-bezier(.32, .72, 0, 1) both;
}

@keyframes zini-back-out {
    from {
        transform: translateX(0);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0);
    }

    to {
        transform: translateX(100%);
        box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
    }
}

/* The page underneath does not start from the edge - it was already there,
   parked a little back. Moving it a short way is what gives the depth. */
@keyframes zini-back-in {
    from {
        transform: translateX(-24%);
        filter: brightness(.94);
    }

    to {
        transform: translateX(0);
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    html.vt-back::view-transition-old(root),
    html.vt-back::view-transition-new(root) {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Product carousel height

   The stage was growing far past the slides and pushing the dots down the page.
   Two things in bundle.css were doing it together:

     .single-product__left { display: flex !important; }

   declared once for desktop with !important, and the mobile rule that follows
   says display:block WITHOUT it - so it loses, and the carousel root stays a
   flex container on every screen. Owl expects a block. As a flex parent it
   stretches .owl-stage-outer to its own height by default, and the root also
   carried an inline height:100% (now removed from the markup), so the box had
   a height to stretch to and the stage inherited it.

   The root also carries Bootstrap's .row, which adds display:flex and negative
   gutters that Owl has no use for.

   An id beats a class when both are !important, which is what makes this
   override land without touching the theme.
   -------------------------------------------------------------------------- */
#ProductCarousel.owl-carousel {
    display: block !important;
    height: auto !important;

    /* from .row */
    margin-left: 0;
    margin-right: 0;
}

#ProductCarousel .owl-stage-outer,
#ProductCarousel .owl-stage {
    height: auto !important;
}

/* An <img> is inline by default, so it sits on the text baseline and leaves a
   few pixels of descender space beneath it inside every slide. */
#ProductCarousel .single-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* The dots belong just under the photo, not wherever the stage happened to
   end. */
#ProductCarousel .owl-dots {
    margin-top: 8px;

    /* The theme sets text-align:left and leans on margin:auto to centre
       these, which only ever worked because the root was a flex container.
       Making the root a block - which Owl requires - took that away, so
       centre them explicitly rather than by side effect. */
    text-align: center;
}

/* ==========================================================================
   LISTING  (Pages/Search/SearchShop2.aspx)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filters panel

   bundle.css builds .outer-filters as a LEFT-hand sheet: left:0 with a closed
   state of translate(-800px, 0). Every other panel in the app - account,
   wishlist, auth, shop menu - comes in from the right, so this one arrived from
   the wrong side and at a different width.

   Flipped here rather than in bundle.css so the website copy is untouched. The
   theme's own .outer-filters.active still wins on specificity and resolves to
   translate(0), which is why only the closed position needs redefining.

   It also sat at top:0 behind the fixed header and ran into the status bar;
   both are handled below.

   z-index stays at the theme's 999. That is below our drawers at 1000, which is
   the right order: opening the account panel should cover the filters.
   -------------------------------------------------------------------------- */
.outer-filters {
    left: auto;
    right: 0;
    transform: translate(800px, 0);

    top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    height: auto;
    bottom: 0;

    /* Same as .account-drawer / .app-drawer, so every panel in the app is
       the same size. */
    width: min(400px, 100%);
    max-width: none;

    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .12);
}

.outer-filters-inside {
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Header row: close control on one side, "clear" on the other, on a hairline -
   the same shape as the drawer headers. */
.outer-filters--top {
    align-items: center;
    min-height: 56px;
    padding: 0 16px 0 24px;
    border-bottom: 1px solid #e2e2e2;
}

.outer-filters--top .clear-filters {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7e7576;
}

.outer-filters--top img {
    width: 14px;
}

/* Group heading. The theme centres it at 18px/600; as a quiet caps label it
   reads as structure rather than as a title competing with the filter names. */
.outer-filters__filters {
    padding: 16px 24px 8px;
    border-bottom: 0;
}

.outer-filters__filters h3 {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-align: left;
    color: #7e7576;
}

.outer-filters__body {
    padding: 0;
}

.outer-filters__body ul {
    margin: 0;
    padding: 0;
}

/* Each filter becomes a full-width row with its own hairline, so the list has
   the rhythm of the drawer rows instead of loose 14px gaps.

   Scoped to .JsGoToLvL2 - the spans that ARE the level-one rows. An unscoped
   "li span" also matched .checkmark on the second level, which put 15px/24px of
   padding and a border on every checkbox and turned them into big boxes. */
.outer-filters__body ul li:not(:last-of-type) {
    margin-bottom: 0;
}

.outer-filters__body ul li > span.JsGoToLvL2 {
    padding: 15px 24px;
    border-bottom: 1px solid #f3f3f3;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1c1c;
}

/* "Show results" stays on the screen while the list scrolls behind it.

   sticky rather than fixed: the button is a direct child of
   .outer-filters-inside, which is the element that scrolls, so it pins to the
   bottom of the panel rather than to the viewport. Fixed would have needed its
   own left/right/width and would have escaped the panel on a wide screen.

   The white background is load-bearing - without it the filter rows would be
   visible sliding underneath. */
.outer-filters__btn {
    position: sticky;
    bottom: 0;
    z-index: 2;

    margin-top: auto;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e2e2;
    background-color: #ffffff;
}

/* The scrolling column has to be a flex column for margin-top:auto above to
   push the button to the foot when the list is shorter than the panel. */
.outer-filters-inside {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* The two level panels take the space; the button keeps its own height. */
.outer-filters-inside > .outer-filters__level-1,
.outer-filters-inside > .outer-filters__level-2 {
    flex: 0 0 auto;
}

.outer-filters__btn span {
    padding: 15px 0;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.outer-filters__level-1 .active-filter {
    font-family: Inter, sans-serif;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

/* Reserve the image box before the file arrives. Product photography is 2:3, so
   this crops nothing - it only stops the grid reflowing line by line as images
   load, which is what makes a listing feel unsteady while scrolling. */
.products-grid .product-card--top {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 10px;
}

.products-grid .product-card--top.is-pending::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, 0) 80%);
    background-size: 220% 100%;
    animation: card-shimmer 1.25s ease-in-out infinite;
}

.products-grid .product-card--top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: opacity .3s ease;
}

.products-grid .product-card--top.is-pending img {
    opacity: 0;
}

@keyframes card-shimmer {
    0% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {

    .products-grid .product-card--top.is-pending::after {
        animation: none;
    }
}

/* The theme drops the name to 10px on a phone. At half the screen width that is
   below comfortable reading; 13px still fits two lines of a long name. */
.products-grid .product-card--bottom {
    align-items: flex-start;
    margin: 10px 0 24px;
    padding: 0 2px;
}

.products-grid .product-card--bottom h3 {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    color: #1a1c1c;
    margin-bottom: 6px;

    /* Two lines, then ellipsis - so a long name cannot push one card taller
       than the one beside it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.products-grid .product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.products-grid .product-price__old {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #7e7576;
}

.products-grid .product-price__new {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1a1c1c;
}

/* Available sizes under every card. At half-screen width this is a row of tiny
   boxes under each photo - noise while scanning, and the sizes are on the
   product page anyway. */
.products-grid .product-size {
    display: none;
}

/* Products-per-page (32 / 48 / 60). A web control: it exists so a desktop
   visitor can trade scrolling for page loads. The listing already pages over
   AJAX, and in an app you simply keep scrolling, so the choice is noise at the
   top of every category.

   Hidden rather than removed from SearchShop2.aspx - the markup sits inside the
   server-side paging logic, and taking it out would mean touching code that
   still serves the website. */
#selectedPageSize {
    display: none;
}

/* --------------------------------------------------------------------------
   Breadcrumbs

   Gone from the listing. Their real job on this markup is the
   schema.org/BreadcrumbList data, and the whole app domain answers
   X-Robots-Tag: noindex - no crawler ever sees it. For a person, the category
   title above the grid already says where they are, and a four-level trail on a
   360px screen either truncates or wraps to a second line.

   Hidden, not deleted: the same pages serve www, where the structured data does
   count.
   -------------------------------------------------------------------------- */
.section-search-results > .container > .breadcrumbs,
.section-products-hero > .container > .breadcrumbs {
    display: none;
}

/* One link upward on the product page, in place of the trail. Sits with the
   product name rather than at the top of the screen, so it does not read as a
   second back button next to the arrow over the photo. */
/* Centred over the product name, matching its alignment. The chevron went with
   the back arrow: pointing left while sitting centred read as a back control,
   which is exactly what this is not - it names where the product lives, it does
   not retrace a route. */
.product-parent-cat {
    display: block;
margin: 10px 0px;
    text-align: center;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7576;
    text-decoration: none;
}

/* Active filters, now their own strip under the panel header instead of being
   nested in the category row. It is empty whenever nothing is applied, so it
   must not reserve any space then - hence the :empty rule first. */
.outer-filters__active:empty {
    display: none;
}

.outer-filters__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    padding: 12px 24px;
    border-bottom: 1px solid #e2e2e2;
}

/* One applied filter: its value, and the cross that removes it. */
.outer-filters__active .active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;

    background-color: #f3f3f3;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #1a1c1c;
}

.outer-filters__active .active-filter img {
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0;
}

.outer-filters__active .active-filter a {
    color: inherit;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Filter options — second level

   Reuses .outer-filters__body, but the markup is different: every option is a
   <label class="checkbox-container"> holding the input, a .checkmark span and
   the value as a bare text node.
   -------------------------------------------------------------------------- */

/* Heading of each group.

   bundle.css styles these at 20px/700, rising to 22px, through
   ".outer-filters__level-2 .outer-filters__body h3" - three classes, so a
   two-class selector here lost and the headings came out as large black
   display type. Matching its specificity and coming later is enough. */
.outer-filters__level-2 .outer-filters__body > h3,
.outer-filters__body > h3 {
    margin: 0;
    padding: 16px 24px 8px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7576;
}

/* The row is the label, so the whole width is tappable rather than just the
   box and the word. */
.outer-filters__body .checkbox-container {
    gap: 12px;
    padding: 10px 24px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1c1c;
}

/* No checkbox. The option itself carries the state.

   A separate 18px box next to every value is a form control on a screen that is
   not a form: it doubles the things to aim at, and on the size grid it competed
   with the box it sat inside. The row shows whether it is on.

   .checkmark is left in the DOM rather than removed server-side - the markup
   comes out of a Couchbase cache, and hiding it here takes effect immediately
   and for every group, cached or not. */
.outer-filters__body .checkbox-container .checkmark {
    display: none;
}

/* Selected: the value goes solid black and gains a tick on the right. Weight
   alone is too quiet to scan a long list by. */
.outer-filters__body .checkbox-container:has(input:checked) {
    font-weight: 600;
    color: #000000;
}

.outer-filters__body .checkbox-container:has(input:checked)::after {
    content: "check";
    margin-left: auto;

    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    color: #000000;
}

/* There was an @supports fallback here that put the old checkbox back for
   engines without :has(). It has been removed: this WebView reports
   "not selector(:has(*))" as TRUE while :has() actually works, so both fired -
   a black box on the left AND the tick on the right, on every chosen filter.

   Feature-querying :has() is not reliable enough to branch on. The tick alone
   carries the state now. */

/* --------------------------------------------------------------------------
   One panel instead of two levels

   The theme ships the filters as a drill-down: a list of group names, and a
   second panel that slides over it showing one group at a time. Every group is
   already in the document - the JS only adds .active to the one that was
   tapped - so nothing has to be fetched or rebuilt to show them together.

   What changes here:
     - level two stops being an absolutely positioned overlay and flows under
       level one instead
     - every group shows, rather than only the .active one
     - the group-name list on level one goes, along with the Back bar on level
       two: with nothing to drill into, both are dead controls

   The theme's JS still runs on tap - it toggles .show and .active on elements
   that no longer care - so app.js is untouched.
   -------------------------------------------------------------------------- */
.outer-filters__level-2 {
    position: static;
    width: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    transform: none;
    background-color: transparent;
}

/* Show every group, not just the one the theme marked .active. */
.outer-filters__level-2 .outer-filters__body,
.outer-filters__level-2 .outer-filters__body.active {
    display: block;
    padding: 0;
}

/* Separate one group from the next. */
.outer-filters__level-2 .outer-filters__body + .outer-filters__body {
    border-top: 1px solid #e2e2e2;
}

/* The Back bar belonged to the drill-down. */
.outer-filters__level-2 .outer-filters--top.JsGoToLvL1 {
    display: none;
}

/* The list of group names on level one: every entry is now a heading further
   down the same panel. */
.outer-filters__level-1 > .outer-filters__body {
    display: none;
}

/* app.js shrinks level one when it thinks the drill-down opened. Nothing
   triggers it now that the list is gone, but neutralise it so a stray tap
   cannot scale the panel. */
.outer-filters__level-1.hide {
    transform: none;
}

/* --------------------------------------------------------------------------
   Category list inside the filters panel

   DrawCategoryList builds a different row from the filter options: a plain
   link, no checkbox -

       <li><a class="ajax_filter" href="..."><span>NAME</span></a></li>

   so the checkbox-row styling never reached it, and bundle.css's
   ".outer-filters__body ul li span" left it at 18px/600 - the heavy black list
   in the middle of the panel.
   -------------------------------------------------------------------------- */
#filtersMoblevel2 {
    margin: 0;
    padding: 0;
    list-style: none;
}

#filtersMoblevel2 li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    text-decoration: none;
}

/* Same weight and size as a filter option, so the two lists read as one panel
   rather than two designs stacked. */
#filtersMoblevel2 li a span {
    display: block;
    padding: 0;
    border: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1c1c;
}

/* The category currently being browsed. */
#filtersMoblevel2 li a.active span,
#filtersMoblevel2 li a.selected span {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Size filter — boxes, like the picker on the product page

   Same shape as .single-product-size__wrapper: four equal columns, six once
   there is room. A size is one or two characters, so a full-width row each is
   a lot of panel for very little text, and the set is easier to scan as a
   block.

   The checkbox disappears; the box itself carries the state, exactly as the
   size picker does. Which means the label has to stop being a flex row.
   -------------------------------------------------------------------------- */
.outer-filters__body--sizes ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 24px 16px;
}

@media (min-width: 600px) {

    .outer-filters__body--sizes ul {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.outer-filters__body--sizes ul li {
    margin: 0;
}

.outer-filters__body--sizes .checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    padding: 0;
    border: 1px solid #cfc4c5;
    border-bottom: 1px solid #cfc4c5;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #1a1c1c;

    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.outer-filters__body--sizes .checkbox-container:has(input:checked) {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* The filled box is the whole signal here - no room for a tick beside it. */
.outer-filters__body--sizes .checkbox-container:has(input:checked)::after {
    content: none;
}

/* :has() is recent. Without it the selected size still reads - through the
   border alone - rather than looking unselected. */
@supports not selector(:has(*)) {

    .outer-filters__body--sizes .checkbox-container input:checked ~ .checkmark {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        background-color: transparent;
        box-shadow: inset 0 0 0 2px #000000;
    }
}

/* The panel header held only a close cross and a "clear" link. The cross goes -
   a swipe closes the panel, and the button at the foot does too - which buys
   back a whole row on a screen where the filter list is what matters.

   The clear-all link is lifted out of it and parked with the active filters,
   which is the only place it means anything. */
.outer-filters__level-1 > .outer-filters--top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
}

/* The close cross stays. Swiping closes the panel too, but a visible control
   is what people look for first, and it costs one corner. */
.outer-filters__level-1 > .outer-filters--top .outer-filters__close {
    display: block;
    width: 14px;
    margin-left: auto;
    padding: 16px 24px;
    box-sizing: content-box;
    cursor: pointer;
}

.outer-filters__level-1 > .outer-filters--top .clear-filters,
.outer-filters__level-1 > .outer-filters--top a {
    padding: 12px 24px 0;
    margin-left: auto;
}

/* Back control on the product page. Sits opposite the wishlist heart, so the
   two read as a pair on the photo rather than two unrelated buttons. */
.product-back {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 16px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;

    background-color: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    color: #1a1c1c;
    text-decoration: none;

    transition: transform .12s ease;
}

.product-back:active {
    transform: scale(.94);
}

.product-back .material-symbols-outlined {
    font-size: 22px;
}

/* --------------------------------------------------------------------------
   Colour filter — swatches

   Field 2 of the colour lookup holds a hex, so the colour can be shown instead
   of named. Same grid as the sizes: a colour needs no more room than a size.

   Values without a hex keep their word and simply sit in the grid as a text
   cell, so the group never has holes in it.
   -------------------------------------------------------------------------- */
.outer-filters__body--colors ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 24px 16px;
}

@media (min-width: 600px) {

    .outer-filters__body--colors ul {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.outer-filters__body--colors ul li {
    margin: 0;
}
.outer-filters__body--colors .checkmark{
    visibility: hidden;
    width: 0;
    opacity: 0;
}
.outer-filters__body--colors .checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    padding: 0;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;

    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #1a1c1c;

    transition: border-color .15s ease;
}

.filter-swatch {
    display: block;
    width: 100%;
    height: 100%;
border-radius:4px;
    /* A hairline so white and cream are not invisible against the panel. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Field 3 of the lookup, where it is filled: a picture of the colour rather
   than the colour. Cover and centred, because these are crops of fabric - a
   print or a weave reads at this size only if it fills the square. */
.filter-swatch--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Selected: a ring around the square, offset so it reads against any colour -
   a tick would vanish on a pale swatch and a dark fill would hide the colour
   itself, which is the one thing the control is for. */
.outer-filters__body--colors .checkbox-container:has(input:checked) {
    border-color: #000000;
    padding:2px
}

.outer-filters__body--colors .checkbox-container:has(input:checked)::after {
    content: none;
}

.products-panel__count{
        text-align: left;
    padding: 15px 0 10px 0;
}
.filters-toggle__img{
        width: 100%;
    max-width: 40px;
    margin: 0 !important;
    padding: 8px;
}
.filters-toggle{
            border-radius: 100%;
        width: 40px;
        height: 40px;
            padding: 0;
    margin: 0;
        text-align: center;
}
.products-panel__sorting .custom-select{
    border-radius: 30px;
}

/* Landing spot for the three cart fragments zini.js keeps replacing. They have
   nothing to show now that the bag opens the basket page, but they have to
   exist: GetHeaderCart() calls replaceWith() on each one, and the same pass
   updates the number on the icon. */
.mini-cart-sink {
    display: none;
}

/* --------------------------------------------------------------------------
   Basket — pinned summary

   The bottom navigation gives way, the same as on a product page: this is a
   screen with one thing to do next.

   Only the grand total shows. The breakdown - items total, coupon, rule
   discount, shipping - stays in the document for anyone reading it with a
   screen reader, but a pinned bar is not the place for five rows.

   To bring the free-shipping nudge back, drop it out of the hidden set below;
   it is the green centred row after the total.
   -------------------------------------------------------------------------- */


/* Floats like the bottom navigation and the buy bar: 14px in from the sides,
   12px above the safe area, and the page visible around it.

   left/right stay at 0 and the gap comes from padding, because this element is
   also what --app-cta-h is measured from - the script writes its height into
   the variable that reserves room at the foot of the page. Margins here would
   be left out of that measurement and the last row of the basket would end up
   underneath the card.

   Radius is 20px rather than a pill: the nav and the buy bar are single rows of
   round controls, so a pill is their actual shape. This one stacks a total over
   two buttons, and a pill on a two-row card leaves crescents of dead space.

   The translucent white needs the blur to stay readable - product photos scroll
   behind it. Without backdrop-filter support the colour below is opaque enough
   on its own. */
.is-basket .order-summary-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;

    margin: 0;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;

    background-color: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .16);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

    .is-basket .order-summary-wrapper {
        background-color: rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
    }
}

/* Hold the card in from the edges without margins, so its measured height stays
   the height the page reserves. */
.is-basket .order-summary-wrapper {
    left: 14px;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 14px;
}

/* Round the two controls to match the pills elsewhere. */
.is-basket .basket-actions .back-to-shop-btn,
.is-basket .basket-actions .btn--checkout {
    height: 52px;
    border-radius: 9999px;
}

.is-basket .basket-actions .back-to-shop-btn {
    width: 52px;
    border-color: #e2e2e2;
    background-color: rgba(255, 255, 255, .6);
}

/* "Order summary" as a heading has nothing to add once the bar shows a total
   and a button. */
.is-basket .order-summary-wrapper > h4 {
    display: none;
}

.is-basket .order-summary-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.is-basket .order-summary-list > li {
    display: none;
}

.is-basket .order-summary-list > .order-summary-item--total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.is-basket .order-summary-item--total .label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #7e7576;
}

.is-basket .order-summary-item--total .value {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1c1c;
}

/* Back and checkout share a row: the arrow keeps its square, the button takes
   what is left. */
.basket-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.basket-actions .back-to-shop-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    margin: 0;
    border: none;
    box-shadow: 0 0 4px 3px #e1e1e1;
    background-color: #ffffff;
    border-radius: 100%;
}

/* The theme pointed this at /html/images/icon-chevron-left.svg, a path that
   does not exist in this deployment - the folder is a leftover from the
   original theme scaffold. Every other icon in the app is a Material Symbol,
   which also means no extra request and no fixed pixel size. */
.basket-actions .back-to-shop-btn .material-symbols-outlined {
    font-size: 22px;
    color: #1a1c1c;
}

.basket-actions .btn--checkout {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

/* --------------------------------------------------------------------------
   Basket item — one row of controls

   Heart and bin on the left, quantity on the right, all three in the same
   quiet grey box so they read as one set of controls rather than three
   unrelated links.
   -------------------------------------------------------------------------- */
.basket-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.basket-item-actions__group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The shared frame. */
.basket-item-actions .product-button,
.basket-item-actions .basket-qty {
    border:none;
    border-radius: 9px;
    background-color: #ffffff;
    transition: border-color .15s ease;
}
    .basket-products-item__buttons {
        margin-top: 10px !important;
    }

.basket-item-actions .product-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;

    /* The labels are on aria-label and title now, so anything the theme still
       prints inside stays out of the box. */
    font-size: 0;
    line-height: 0;
    color: #1a1c1c;
}

.basket-item-actions .product-button:active {
    border-color: #cfc4c5;
}

.basket-item-actions .product-button img {
    width: 17px;
    height: auto;
    margin: 0;
}

.basket-item-actions .product-button .material-symbols-outlined {
    font-size: 19px;
    line-height: 1;
}

/* Chosen favourite. ToggleFavorite adds .on. */
.basket-item-actions .js-favorite-heart.on {
    border-color: #1a1c1c;
}

/* Quantity menu. appearance:none because the platform select is a grey slab
   with its own arrow, which would sit oddly beside two square buttons. */
.basket-item-actions .basket-qty {
    -webkit-appearance: none;
    appearance: none;
    height: 26px;
    padding: 0 30px 0 12px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #1a1c1c;
    background-color: #f7f8f5;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e7576' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: auto;
}

.basket-item-actions .basket-qty:focus {
    outline: none;
    border-color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   Discount code

   A <details>: closed, it costs one row instead of an input and a button that
   most visitors never use.
   -------------------------------------------------------------------------- */
.discount-code {
    margin: 0 0 16px;
    padding: 0 18px;
    box-shadow: 0 0 7px 0px #d7d7d7;
    border-radius: 20px;
    background-color: #ffffff;
}

.discount-code__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 0;
    cursor: pointer;
    list-style: none;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1a1c1c;
}

.discount-code__toggle::-webkit-details-marker {
    display: none;
}

.discount-code__toggle::marker {
    content: "";
}

.discount-code__tag {
    font-size: 19px;
    color: #7e7576;
}

.discount-code__chevron {
    margin-left: auto;
    font-size: 20px;
    color: #9a9192;
    transition: transform .2s ease;
}

.discount-code[open] .discount-code__chevron {
    transform: rotate(180deg);
}

.discount-code__body {
    padding: 0 0 18px;
}

.discount-code__row {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 5px 5px 5px 8px;
    border: 1px solid #cfc4c5;
    border-radius: 9999px;
    background-color: #ffffff;
    transition: border-color .15s ease;
}

.discount-code__row:focus-within {
    border-color: #1a1c1c;
}

.discount-code__row .input-text {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background-color: transparent;

    font-family: Inter, sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
    color: #1a1c1c;
}

.discount-code__row .input-text::placeholder {
    letter-spacing: 0;
    color: #b3aaab;
}

.discount-code__row .input-text:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.discount-code__row .Cupon_Btn {
    flex: none;
    height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: 9999px;
    background-color: #1a1c1c;
    color: #ffffff;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.discount-code__row .Cupon_Btn:active {
    background-color: #3a3c3c;
}

.couponSuccess,
.couponError {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 10px;
    padding: 9px 13px;
    border-radius: 12px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.couponSuccess::before,
.couponError::before {
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
    line-height: 1.2;
}

.couponSuccess {
    background-color: #eef4ef;
    color: #2c5c3b;
}

.couponSuccess::before {
    content: "check_circle";
}

.couponError {
    background-color: #fdf5f5;
    color: #97281a;
}

.couponError::before {
    content: "error";
}

.couponSuccess {
    color: #2e7d32;
}

.couponError {
    color: #ba1a1a;
}

/* --------------------------------------------------------------------------
   Added to basket

   The travelling thumbnail, and the tick the bag gives afterwards.
   -------------------------------------------------------------------------- */
.cart-ghost {
    position: fixed;
    z-index: 1500;
    margin: 0;
    padding: 0;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    will-change: transform, opacity;
}

/* The tick sits over the bag icon rather than beside it, so nothing in the
   header moves while it plays. */
.dropdown-area__btn.is-added .material-symbols-outlined {
    opacity: 0;
}

.dropdown-area__btn.is-added::before {
    content: "check";
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-size: 22px;
    line-height: 1;
    color: #1a1c1c;

    animation: cart-tick 1.1s ease both;
}

@keyframes cart-tick {
    0%   { transform: scale(.4); opacity: 0; }
    22%  { transform: scale(1.15); opacity: 1; }
    35%  { transform: scale(1); opacity: 1; }
    80%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

    .dropdown-area__btn.is-added::before {
        animation: none;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Colour picker — the garment, not a disc

   A 20px circle of colour tells you the shade and nothing else. The same space
   showing the actual photo in that colour tells you the shade AND what it looks
   like made up, which is what the choice is really about.

   Only options that have a photo get this; the rest keep the disc, so a colour
   with no image still reads as a colour rather than as an empty square.
   -------------------------------------------------------------------------- */
.single-product-color__wrapper .single-product-color__item--thumb {
    width: 44px;
    height: 60px;
    border-radius: 2px;
    border: 1px solid #e2e2e2;

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    transition: border-color .15s ease;
}

.single-product-color__wrapper .single-product-color__item--thumb:not(:last-of-type) {
    margin-right: 8px;
}

/* The theme marks the chosen colour with a ring drawn at circle dimensions,
   which lands in the wrong place on a rectangle. */
.single-product-color__wrapper .single-product-color__item--thumb.active::after {
    content: none;
}

.single-product-color__wrapper .single-product-color__item--thumb.active {
    border-color: #1a1c1c;
    box-shadow: 0 0 0 1px #1a1c1c;
}

/* --------------------------------------------------------------------------
   Product video — no controls, ever

   Neither video element carries a controls attribute, yet the WebView draws its
   own: Chrome on Android adds a fullscreen affordance, a cast button, and a
   play overlay whenever it decides playback is not running. None of that is
   reachable through the attribute, so it takes all three of:

     1. controlslist / disablepictureinpicture on the element - turns off the
        download, speed, remote-playback and picture-in-picture entries
     2. the shadow-DOM rules below - removes the panel Chromium injects
     3. pointer-events - the video stops being a tap target at all

   Point 3 has a second benefit: touches fall through to the carousel
   underneath, so a swipe that starts on the video still moves the slides
   instead of being swallowed by the player.
   -------------------------------------------------------------------------- */
.single-image video,
.single-image--video video {
    pointer-events: none;
}

.single-image video::-webkit-media-controls,
.single-image video::-webkit-media-controls-enclosure,
.single-image video::-webkit-media-controls-panel,
.single-image video::-webkit-media-controls-start-playback-button,
.single-image video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* A colour with no photo of its own - video-only variants - keeps the disc.
   Sized to sit level with the thumbnails beside it rather than floating small
   in the middle of the row. */
.single-product-color__wrapper .single-product-color__item:not(.single-product-color__item--thumb) {
    width: 44px;
    height: 60px;
    border-radius: 2px;
}

.single-product-color__wrapper .single-product-color__item:not(.single-product-color__item--thumb):not(:last-of-type) {
    margin-right: 8px;
}


#wishlistDrawerBody .jsWishlistRemove {
        background: none;
    border: none;
}

/* --------------------------------------------------------------------------
   Bag in the bottom navigation

   extra.css pins .mini-cart-item-no at top:-15px right:-10px, which was right
   when it hung off a 24px icon in the header. In a 64px-tall navigation item it
   lands above the bar and gets clipped, so it is re-placed against the icon
   instead of against the item.
   -------------------------------------------------------------------------- */
.app-bottom-nav .mini-cart-item-no {
    top: 8px;
    right: auto;
    left: 50%;
    margin-left: 3px;

    min-width: 16px;
    width: auto;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}

/* The tick after an add now plays on the bag down here. inset:0 spans the whole
   navigation item, so the check lands centred on the icon. */
.app-bottom-nav .dropdown-area__btn.is-added::before {
    font-size: 20px;
}

/* --------------------------------------------------------------------------
   Search results panel

   bundle.css pins it at a hardcoded top:70px. The header is 65px plus whatever
   the status bar inset is, so on any device with a notch the panel starts
   inside the header and covers the very field you are typing into - which is
   why it looked as though you still had to type inside the panel.

   Measured instead. And its 60px of top padding was the room the input used to
   occupy in there; with the field in the header that is just a gap.
   -------------------------------------------------------------------------- */
.site-header .search-results {
    top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    padding-top: 16px;

    /* The panel runs to bottom:0 and the navigation floats on top of it, so the
       last thing in the list - "All products" - sat underneath the pills and
       could not be tapped. Clear the navigation, plus the gap it floats in.

       overflow-y with it: the theme never gave this box a scroller, so once the
       results were taller than the screen the overflow was simply unreachable. */
    padding-bottom: calc(var(--app-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The dimmer starts where the panel does, for the same reason. */
.search-overlay {
    top: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
}

/* While searching, the bar has to stay reachable above the panel. */
body.search-results-open .site-header {
    z-index: 60;
}

body.search-results-open .app-header__search {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

/* --------------------------------------------------------------------------
   Search results — category chips

   The parent is the label, its children are the chips. See the comment in
   Ajax_GetSearchResults.aspx for why the tree is split that way.
   -------------------------------------------------------------------------- */
.search-results_categories {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.search-chip-group__label {
    display: block;
    margin-bottom: 7px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7e7576;
}

.search-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid #e2e2e2;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #1a1c1c;
    text-decoration: none;
    white-space: nowrap;

    transition: border-color .15s ease, background-color .15s ease;
}

.search-chip:active {
    border-color: #1a1c1c;
}

/* The featured flag was already being read and thrown away. Filled rather than
   outlined, so it leads without needing a badge. */
.search-chip--featured {
    border-color: #1a1c1c;
    background-color: #1a1c1c;
    color: #ffffff;
}

/* Basket: the item count where the "CART" heading used to be. Quiet and to the
   left - it is a caption for the list below it, not a title for the screen. */
.basket-count {
    margin: 0 0 12px;
    padding: 0 4px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7576;
}

/* --------------------------------------------------------------------------
   A basket with nothing in it

   The theme drew this as a grey panel with a bold black sentence in it, which
   is the shape it uses for something having gone wrong. Nothing has: most
   people who tap the bag have not put anything in it yet, and the screen they
   land on should read as an invitation rather than as a notice.

   Centred, with air above and below it - it is the only thing on the page, so
   it is allowed to own the page - and it offers the two places worth going
   from here rather than only the one.
   -------------------------------------------------------------------------- */
.basket-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    margin: 0 auto;
    padding: 46px 24px 40px;
    max-width: 340px;
}

/* Light, large and grey: the shape of the thing that is empty, drawn the way
   an outline drawing is - not an icon asking to be tapped. */
.basket-empty__mark {
    font-size: 52px;
    font-variation-settings: "wght" 200;
    line-height: 1;
    color: #c4bcbd;
}

.basket-empty__title {
    margin: 18px 0 0;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    color: #1a1c1c;
    text-transform: none;
}

.basket-empty__text {
    margin: 10px 0 0;
    max-width: 30ch;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #7e7576;
}

.basket-empty__go {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin: 26px 0 0;
    padding: 0 22px;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;

    background-color: #1a1c1c;
    color: #ffffff;
}

.basket-empty__go:hover,
.basket-empty__go:focus {
    color: #ffffff;
}

/* The second door, and plainly the quieter one. Somebody who saved things and
   never bought them is exactly who is standing here. */
.basket-empty__alt {
    margin: 16px 0 0;
    padding: 4px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #57534f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.basket-empty__alt:hover,
.basket-empty__alt:focus {
    color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   Suggestions under the basket

   A strip you push sideways rather than a grid: four half-visible products
   invite a push, and a grid of two would take the whole screen to say the same
   thing. The one at the edge is deliberately cut - a row that ends flush at
   the margin looks finished, and this one is not.

   Photograph first and almost nothing else. These are not being compared, they
   are being noticed; the name and the price are the least that lets somebody
   decide to look.
   -------------------------------------------------------------------------- */
.basket-more {
    margin: 8px 0 0;
    /* Clear of both fixed bars: the totals summary sits on top of the
       navigation here, so the last row of suggestions needs the height of the
       two of them or it reads as if it were underneath. */
    padding: 24px 0 calc(150px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e2e2;
}

.basket-more__head {
    margin: 0 0 14px;
    padding: 0 16px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7576;
}

.basket-more__strip {
    display: flex;
    gap: 12px;

    padding: 0 16px 6px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.basket-more__strip::-webkit-scrollbar {
    display: none;
}

.basket-more__item {
    flex: 0 0 auto;
    width: 132px;
    scroll-snap-align: start;
    text-decoration: none;
}

/* The shape is reserved before the photograph arrives, so a strip that is
   still loading does not shuffle its own contents. */
.basket-more__shot {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f3efef;
}

.basket-more__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.basket-more__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Two lines held whether or not they are needed, so the prices along the
       strip sit on one line rather than four. */
    min-height: 2.7em;
    margin: 8px 0 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: #57534f;
}

.basket-more__price {
    display: block;
    margin: 3px 0 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1c1c;
}

.basket-more__was {
    margin-right: 5px;
    font-weight: 400;
    color: #9a9192;
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Bottom navigation that gets out of the way

   It is on every screen now, product and basket included. Hiding it there was
   what left people with no way to reach a category, and every attempt to put
   the missing links somewhere else produced a path nobody would find.

   So it stays, and moves instead: scrolling down slides it away, scrolling up
   brings it straight back. Nothing is hidden and nothing has to be learned -
   the navigation is always in the same place, and the place is only empty while
   you are reading.

   It slides rather than un-displays so --app-bottomnav-h keeps measuring the
   same height either way; transforms do not change offsetHeight, and the page
   padding is built from that number.
   -------------------------------------------------------------------------- */
.app-bottom-nav.app-bottom-nav {
    transition: transform .25s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
}

.nav-away .app-bottom-nav {
    transform: translateY(calc(100% + 8px));
    opacity: 0;
    pointer-events: none;
}

/* The buy bar and the basket summary sit above the navigation, and drop into
   its place when it leaves. One variable so the two stay in step. */
:root {
    --app-bar-lift: calc(var(--app-bottomnav-h) + 10px);
}

.nav-away {
    --app-bar-lift: 0px;
}

.is-product .single-product-add-basket,
.is-product .notifywrapper,
.is-basket .order-summary-wrapper {
    transition: bottom .25s cubic-bezier(.32, .72, 0, 1);
}

.is-product .single-product-add-basket,
.is-product .notifywrapper {
    bottom: var(--app-bar-lift);
}

.is-basket .order-summary-wrapper {
    bottom: calc(var(--app-bar-lift) + 12px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {

    .app-bottom-nav.app-bottom-nav,
    .is-product .single-product-add-basket,
    .is-basket .order-summary-wrapper {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Contact

   The theme laid this out as two desktop columns - a dashed box holding the
   form on the left, a stack of headings and paragraphs on the right - and at
   mobile width it just collapsed: 9px labels, a 63px message box, and the
   phone number and address sitting there as plain text.

   Text is the wrong shape for this page on a phone. Reaching somebody is the
   only reason anyone opens it, and a number you can merely read is a number
   you have to memorise and retype. So the details come first as rows you tap:
   dial, compose, open the map. The form stays for everything that is not
   urgent, in the same editorial fields as the login drawer.
   -------------------------------------------------------------------------- */
/* Contact, stores and careers are the same kind of screen - a title, a line
   of explanation, then content - so they share the furniture rather than each
   carrying its own copy of the same three rules. */
.contact-page__wrap,
.career-page__wrap,
.stores-page__wrap {
    padding: 8px 18px 32px;
}

.contact-page__title,
.career-page__title {
    margin: 0 0 10px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #1a1c1c;
}

.contact-page__intro,
.career-page__intro {
    margin: 0 0 24px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: #57534f;
}

/* --------------------------------------------------------------------------
   The tappable details
   -------------------------------------------------------------------------- */
.contact-actions {
    margin: 0 0 34px;
    border-top: 1px solid #ece7e7;
}

.contact-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 2px;

    border-bottom: 1px solid #ece7e7;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    transition: background-color .15s ease;
}

/* Phones have no hover, so the press is the only feedback there is. The tint
   runs past the row's padding so the whole strip lights up, not a bar with
   pale margins either side. */
.contact-action:active {
    background-color: #f6f3f3;
    box-shadow: -8px 0 0 #f6f3f3, 8px 0 0 #f6f3f3;
}

.contact-action--static,
.contact-action--static:active {
    background-color: transparent;
    box-shadow: none;
}

.contact-action__icon {
    flex: 0 0 auto;
    font-size: 22px;
    color: #1a1c1c;
    font-variation-settings: "wght" 300;
}

.contact-action__text {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-action__label {
    display: block;
    margin-bottom: 3px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9a9192;
}

.contact-action__value {
    display: block;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #1a1c1c;
}

.contact-action__go {
    flex: 0 0 auto;
    font-size: 20px;
    color: #c4bcbd;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.contact-page__heading {
    margin: 0 0 22px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.25;
    color: #1a1c1c;
}

/* Underlined fields elsewhere are single lines. A message is not, so this one
   keeps the rule but gains a box around it - otherwise a four-line answer
   floats with nothing holding it. */
.contact-form__message {
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid #cfc4c5;
    resize: vertical;
}

.contact-form__message:focus {
    border-color: #000000;
    border-width: 1px;
    padding: 12px 14px;
}

/* The real input sits inside this label at opacity 0 rather than display:none,
   because a hidden input cannot be reached by the keyboard and some browsers
   skip it in the tab order entirely. */
.contact-file {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 12px 0;

    border-bottom: 1px dashed #cfc4c5;
    cursor: pointer;
}

.contact-file .material-symbols-outlined {
    font-size: 20px;
    color: #7e7576;
}

.contact-file__name {
    flex: 1 1 auto;
    min-width: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #9a9192;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-file.is-filled .contact-file__name {
    color: #1a1c1c;
}

.contact-file__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* .notify-form is display:flex with wrap in the theme, which turned every
   field group into a flex item sized to its own content. The form is a plain
   stack; the class stays only because the submit script selects on it. */
.contact-form.notify-form {
    display: block;
}

.contact-form .editorial-btn {
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Alerts and the sent state
   -------------------------------------------------------------------------- */
.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 12px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.contact-alert .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 20px;
}

.contact-alert--warn {
    background-color: #fdf1f0;
    color: #a12b1e;
}

.contact-sent {
    margin: 8px 0 0;
    padding: 32px 20px;
    border-radius: 16px;
    background-color: #f6f3f3;
    text-align: center;
}

.contact-sent__mark {
    font-size: 44px;
    color: #1a1c1c;
    font-variation-settings: "wght" 200;
}

.contact-sent__text {
    margin: 12px 0 24px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1c1c;
}

/* The reCAPTCHA attribution, which is the price of hiding Google's badge. It
   was a blue and black slab pinned over the bottom navigation; as a line of
   small print under the button it says the same thing and looks like the app.

   Small, but not smaller than 11px - it is a legal notice, and one nobody
   should need to squint at. */
.contact-legal {
    margin: 14px 0 0;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    color: #9a9192;
    text-align: center;
}

.contact-legal a {
    color: #57534f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Stores

   The theme built this as a Google map beside a column of dashed 285px boxes,
   and then hid the map at mobile width - so the phone was loading, and being
   billed for, a Maps API that never drew a pixel. The API call is gone.

   A map is the wrong tool here anyway. Nobody browses ten shops on a 6in
   screen; they want the nearest one, its hours, and then either a phone call
   or turn-by-turn directions. So each shop is a card with those two actions on
   it, and "directions" hands off to whatever map app the phone already has -
   which knows where the person is standing and this page does not.

   Cities are <details>, first one open, no script involved.
   -------------------------------------------------------------------------- */
.stores-page__title {
    margin: 0 0 8px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #1a1c1c;
}

.stores-page__intro,
.stores-page__empty {
    margin: 0 0 22px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #57534f;
}

/* --------------------------------------------------------------------------
   City panels
   -------------------------------------------------------------------------- */
.store-city {
    border-top: 1px solid #ece7e7;
}

.store-city:last-of-type {
    border-bottom: 1px solid #ece7e7;
}

.store-city__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 2px;

    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/* Safari and Chrome each draw their own disclosure triangle, through different
   pseudo-elements. Both are removed; the chevron on the right is the control. */
.store-city__head::-webkit-details-marker {
    display: none;
}

.store-city__head::marker {
    content: "";
}

.store-city__name {
    flex: 1 1 auto;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    color: #1a1c1c;
}

.store-city__count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #7e7576;
    background-color: #f3efef;
}

.store-city__chev {
    flex: 0 0 auto;
    font-size: 22px;
    color: #9a9192;
    transition: transform .2s ease;
}

.store-city[open] .store-city__chev {
    transform: rotate(180deg);
}

.store-city__body {
    padding: 0 0 18px;
}

/* --------------------------------------------------------------------------
   One shop
   -------------------------------------------------------------------------- */
.store-card {
    padding: 16px;
    border-radius: 14px;
    background-color: #f9f7f7;
}

.store-card + .store-card {
    margin-top: 10px;
}

.store-card__name {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1c1c;
}

.store-card__area {
    margin: 2px 0 0;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9a9192;
}

.store-card__line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #57534f;
}

.store-card__line .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.45;
    color: #9a9192;
}

.store-card__line a {
    color: #57534f;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

/* Opening hours arrive from the admin as free text and sometimes carry their
   own markup, so anything nested keeps the row's size rather than the
   browser's defaults. */
.store-card__line span p,
.store-card__line span div,
.store-card__line span br + * {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Call and directions
   -------------------------------------------------------------------------- */
.store-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #ddd5d5;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;

    background-color: #ffffff;
    color: #1a1c1c;
    transition: transform .12s ease, opacity .2s ease;
}

.store-btn .material-symbols-outlined {
    font-size: 18px;
}

.store-btn--primary {
    border-color: #000000;
    background-color: #000000;
    color: #ffffff;
}

.store-btn:active {
    transform: scale(.98);
    opacity: .9;
}

/* --------------------------------------------------------------------------
   Meeting scheduler

   A five step wizard that was styled in a <style> block at the bottom of its
   own page: 100px of top margin under a fixed header, a progress bar built
   for three steps, red 1px outlines for "selected", and time slots as bare
   bordered buttons.

   The markup is left almost exactly as it was on purpose. Every id and class
   here is spoken to by the page's jQuery - .step, .stepbtn, .method-select,
   .slot-btn, .nextbtn2..5, .liststep1..5 - so this restyles what is there
   rather than rearranging it.
   -------------------------------------------------------------------------- */
.meeting-page__wrap {
    padding: 8px 18px 32px;
}

.meeting-page__title {
    margin: 0 0 8px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #1a1c1c;
}

.meeting-page__intro {
    margin: 0 0 18px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #57534f;
}

.meeting-video {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    border-radius: 14px;
    background-color: #f3efef;
}

.meeting-done__title {
    margin: 10px 0 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
    color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.meeting-progress-wrap {
    margin: 0 0 20px;
}

.progressbar {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The connecting line is drawn by the gap between the dots rather than by a
   pseudo-element positioned at -50%, which is how the old one worked and why
   it needed z-index:-1 to stay behind them. */
.progressbar-list {
    flex: 1 1 0;
    position: relative;

    height: 4px;
    border-radius: 9999px;
    background-color: #ece7e7;

    font-size: 0;
    color: transparent;
    transition: background-color .25s ease;
}

.progressbar-list + .progressbar-list {
    margin-left: 6px;
}

.progressbar-list.active {
    background-color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   One step
   -------------------------------------------------------------------------- */
.meeting-card {
    margin: 0;
    padding: 18px 16px;
    border-radius: 16px;
    background-color: #f9f7f7;
}

.meeting-card__title {
    margin: 0 0 4px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1a1c1c;
}

.meeting-card__hint {
    margin: 0 0 18px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #7e7576;
}

/* Fields inside a step sit on the card's own tint, so the underline needs to
   stay visible against it and the autofill patch has to match. */
.meeting-card .editorial-field {
    background-color: transparent;
    border-bottom-color: #ddd5d5;
}

.meeting-card .editorial-field:-webkit-autofill,
.meeting-card .editorial-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f9f7f7 inset;
}

/* --------------------------------------------------------------------------
   Step 1 - online or a store
   -------------------------------------------------------------------------- */
.meeting-choice {
    display: block;
}

.meeting-option {
    display: block;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .18s ease, background-color .18s ease;
}

/* Selected state was a 1px red outline, which reads as an error everywhere
   else in the app. Black, on white, the way the rest of the app says "this
   one". */
.meeting-option.active {
    border-color: #1a1c1c;
    background-color: #ffffff;
}

.meeting-option__btn {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #ddd5d5;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;

    background-color: #ffffff;
    color: #1a1c1c;
    cursor: pointer;
}

.meeting-option.active .meeting-option__btn {
    border-color: #1a1c1c;
    background-color: #1a1c1c;
    color: #ffffff;
}

.meeting-choice__or {
    margin: 10px 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #9a9192;
}

.meeting-option .editorial-select {
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Step 2 - date and time
   -------------------------------------------------------------------------- */
.meeting-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.slot-btn {
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #ddd5d5;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    background-color: #ffffff;
    color: #1a1c1c;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.slot-btn.active {
    border-color: #1a1c1c;
    background-color: #1a1c1c;
    color: #ffffff;
}

.meeting-error {
    margin: 10px 0 16px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #a12b1e;
}

.meeting-error:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Step 3 - reason
   -------------------------------------------------------------------------- */
.meeting-reasons {
    display: block;
}

.meeting-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #ece7e7;
}

.meeting-reason .mtradio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #1a1c1c;
}

.meeting-reason .input-label {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1c1c;
    cursor: pointer;
}

.meeting-reason--other {
    border-bottom: 0;
}

.meeting-reason--other .other-btn {
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Step 5 - the summary
   -------------------------------------------------------------------------- */
.meeting-summary {
    padding: 4px 0;
    text-align: left;
}

.meeting-summary__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #ece7e7;
}

.meeting-summary__row:last-child {
    border-bottom: 0;
}

.meeting-summary__row--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.meeting-summary__key {
    flex: 0 0 auto;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a9192;
}

.meeting-summary__val {
    flex: 1 1 auto;
    min-width: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: right;
    color: #1a1c1c;
    word-break: break-word;
}

.meeting-summary__row--stack .meeting-summary__val {
    text-align: left;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Back and next
   -------------------------------------------------------------------------- */
.meeting-nav {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.meeting-nav .editorial-btn {
    flex: 1 1 auto;
}

/* Back is always the narrower of the two - it is the way out, not the way on. */
.meeting-nav .editorial-btn--ghost {
    flex: 0 0 38%;
}

/* The script disables the next button by class, not by the disabled attribute,
   so it stays clickable to the browser and .stepbtn checks the class itself. */
.editorial-btn.disabled {
    background-color: #ddd5d5;
    color: #ffffff;
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Language

   The row used to read "Γλώσσα  Ελληνικά >" and take you to English. It named
   the language you were already in and behaved as the one you were not, so
   the only way to know what tapping it did was to tap it.

   Both are on screen now, the current one filled in. Nothing has to be
   inferred: you can see which language you are in and which one is one tap
   away, and the tap does what the thing you tapped says.
   -------------------------------------------------------------------------- */
.lang-switch-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.lang-switch {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 9999px;
    background-color: #f3efef;
}

.lang-switch__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-decoration: none;

    color: #7e7576;
    transition: background-color .18s ease, color .18s ease;
}

.lang-switch__opt.is-active {
    background-color: #1a1c1c;
    color: #ffffff;
}

.lang-switch__opt:active:not(.is-active) {
    background-color: #e7e1e1;
}

/* --------------------------------------------------------------------------
   Social marks
   -------------------------------------------------------------------------- */
.drawer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 12px;
}

.drawer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;

    /* 44px is the smallest target a finger hits reliably; the mark inside is
       18px, so the extra is invisible padding rather than a bigger logo. */
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background-color: #f3efef;

    color: #1a1c1c;
    transition: background-color .18s ease, transform .12s ease;
}

.drawer-social__link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.drawer-social__link:active {
    background-color: #e7e1e1;
    transform: scale(.94);
}

/* --------------------------------------------------------------------------
   Order placed  (Pages/Checkout/OrderPoll.aspx)

   The screen somebody lands on the second after paying. Two facts matter and
   nothing else does: that it worked, and the number they will quote if
   anything goes wrong. Everything here is arranged around those two.
   -------------------------------------------------------------------------- */
.op-main {
    display: block;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom, 0px));
}

.op-wrap {
    max-width: 460px;
    margin: 0 auto;
    padding: 34px 0 0;
    text-align: center;
}

/* A tick in a ring rather than a filled badge: the news is good, not urgent. */
.op-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid #1a1c1c;
    border-radius: 9999px;

    font-size: 28px;
    font-variation-settings: "wght" 300;
    color: #1a1c1c;
}

.op-title {
    margin: 18px 0 0;

    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
    color: #1a1c1c;
}

.op-lead {
    margin: 10px 0 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: #57534f;
}

/* The number, given the room it earns. */
.op-order {
    display: block;
    margin: 26px 0 0;
    padding: 18px 20px 19px;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
}

.op-order__label {
    display: block;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7e7576;
}

.op-order__no {
    display: block;
    margin-top: 6px;

    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1a1c1c;
    text-decoration: none;
}

.op-note {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #7e7576;
}

.op-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 0;
}

.op-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid #1a1c1c;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;

    background-color: #1a1c1c;
    color: #ffffff;
    cursor: pointer;
}

.op-btn:hover,
.op-btn:focus {
    color: #ffffff;
}

.op-btn--ghost {
    background-color: transparent;
    border-color: #cfc4c5;
    color: #1a1c1c;
}

.op-btn--ghost:hover,
.op-btn--ghost:focus {
    color: #1a1c1c;
}

/* --------------------------------------------------------------------------
   Setting a password, for somebody who checked out as a guest

   The one moment they have a reason to want an account: the order they just
   placed is already attached to it.
   -------------------------------------------------------------------------- */
.op-join {
    margin: 28px 0 0;
    padding: 22px 20px 22px;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    text-align: left;
}

.op-join__title {
    display: block;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1c1c;
}

.op-join__why {
    margin: 6px 0 16px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #7e7576;
}

.op-field {
    display: block;
    margin: 0 0 14px;
}

.op-field__label {
    display: block;
    margin: 0 0 2px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: #9a9192;
}

.op-field input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 0 9px;

    border: 0;
    border-bottom: 1px solid #cfc4c5;
    border-radius: 0;
    background: none;

    font-family: Inter, sans-serif;
    /* 16px so iOS does not zoom the page in on focus. */
    font-size: 16px;
    line-height: 1.4;
    color: #1a1c1c;
}

.op-field input:focus {
    outline: none;
    border-bottom-color: #1a1c1c;
}

.op-join .op-btn {
    margin-top: 4px;
}

.op-msg {
    margin: 14px 0 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #a12b1e;
}

.op-msg:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Asking to notify

   Our question, shown before the system's. Android gives one chance at that
   dialog for the life of the install, and "Allow notifications?" tells nobody
   what they are agreeing to.
   -------------------------------------------------------------------------- */
.push-ask-back {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background-color: rgba(0, 0, 0, .38);
    opacity: 0;
    transition: opacity .22s ease;
}

.push-ask-back.is-in {
    opacity: 1;
}

.push-ask {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1201;

    box-sizing: border-box;
    max-width: 420px;
    margin: 0 auto;
    padding: 26px 22px 20px;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .26);

    text-align: center;

    transform: translateY(16px);
    opacity: 0;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
}

.push-ask.is-in {
    transform: translateY(0);
    opacity: 1;
}

.push-ask__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    background-color: #f3f3f3;

    font-size: 24px;
    font-variation-settings: "wght" 300;
    color: #1a1c1c;
}

.push-ask__title {
    margin: 14px 0 0;

    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1c1c;
}

.push-ask__text {
    margin: 8px 0 20px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #7e7576;
}

.push-ask__yes,
.push-ask__no {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.push-ask__yes {
    border: 1px solid #1a1c1c;
    background-color: #1a1c1c;
    color: #ffffff;
}

.push-ask__no {
    margin-top: 8px;
    border: 0;
    background: none;
    color: #7e7576;
    letter-spacing: .02em;
    text-transform: none;
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {

    .push-ask,
    .push-ask-back {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Tell me when it is back

   When a product is sold out this is the only thing left to do on the page, so
   it stops being a dashed box in the middle of the details and takes the place
   the buy button had: the foot of the screen, full width, thumb height.

   Outlined rather than filled - it is a request, not a purchase, and the
   difference should be visible before it is read.
   -------------------------------------------------------------------------- */
.is-product .notifywrapper {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 150;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    box-sizing: border-box;
    width: auto;
    min-height: 52px;
    margin: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 0 18px;

    border: 1px solid #1a1c1c;
    border-radius: 9999px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    cursor: pointer;

    transition: transform .12s ease;
}

.is-product .notifywrapper:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.is-product .notifywrapper:active {
    transform: scale(.98);
}

/* The bell is drawn by the icon font the app already loads, so the markup does
   not have to change for it. */
.is-product .notifywrapper::before {
    content: "notifications_active";
    font-family: "Material Symbols Outlined";
    font-size: 19px;
    font-weight: 400;
    font-variation-settings: "wght" 300;
    line-height: 1;
    color: #1a1c1c;
}

.is-product .notifywrapper span {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1a1c1c;
}

.is-product .notifywrapper a {
    display: none;
}

/* --------------------------------------------------------------------------
   The panel it opens
   -------------------------------------------------------------------------- */
/* The theme's wrapper is a fixed, full-height overlay with its own dark tint -
   which is fancybox's job here, and doing it twice is what pushed the page
   sideways. Inside a lightbox it is just a box. */
/* --------------------------------------------------------------------------
   Lightbox panels, centred

   fancybox centres vertically with a ::before of full height and
   vertical-align:middle on the content. It is a fragile arrangement - anything
   that disturbs the baseline drops the panel to the foot of the screen, which
   is where the notify panel kept landing.

   Both markup slides are covered: fancybox calls an injected panel --html and
   a fetched one --ajax, and ours arrive as either depending on the call.
   -------------------------------------------------------------------------- */
.fancybox-slide--html,
.fancybox-slide--ajax {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
}

.fancybox-slide--html::before,
.fancybox-slide--ajax::before {
    display: none;
}

.fancybox-slide--html > .fancybox-content,
.fancybox-slide--ajax > .fancybox-content {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    vertical-align: middle;
}

/* fancybox's own close button, given the panel's manners. */
.fancybox-slide--html .fancybox-close-small,
.fancybox-slide--ajax .fancybox-close-small {
    top: 6px;
    right: 6px;
    width: 38px;
    height: 38px;
    padding: 8px;
    color: #1a1c1c;
    opacity: .55;
}

.fancybox-slide .outer-pop-up {
    /* fixed + 100vh + its own dark tint is a second overlay inside a lightbox
       that already provides one, and it was what pushed the page sideways.
       The centring stays: without it the card falls to the foot of the slide. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    max-width: 100%;
    padding: 0;
    background: none;
    opacity: 1;
    pointer-events: auto;
}

/* width:100% plus 30px of side margin is wider than the screen it sits in. */
.fancybox-slide .notify-pop {
    display: block;
    width: min(420px, 92vw);
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    border-radius: 18px;
    background-color: #ffffff;
    overflow: hidden;
}

/* The stock photograph is 300x506 - a portrait column that turns the panel
   into a landscape banner on a phone and leaves the form squeezed beside it. */
.fancybox-slide .notify-pop__left {
    display: none;
}

.fancybox-slide .notify-pop__right {
    width: 100%;
    padding: 30px 26px 26px;
}

/* Inside the card, not floating on the dimmed page beside it. */
.fancybox-slide .notify-pop .outer-pop-up__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    opacity: .45;
    cursor: pointer;
}

.fancybox-slide .notify-pop .outer-pop-up__close img {
    width: 13px;
    height: 13px;
}

.fancybox-slide .notify-pop {
    position: relative;
}

.fancybox-slide .notify-pop .pop__title span {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: none;
    text-align: center;
    color: #1a1c1c;
}

.fancybox-slide .notify-pop .pop__subtitle span {
    display: block;
    margin-top: 8px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: #7e7576;
}

.fancybox-slide .notify-pop .notify-form {
    margin-top: 24px;
}

.fancybox-slide .notify-pop .pop-input-wrapper {
    margin-bottom: 18px !important;
}

.fancybox-slide .notify-pop .input-label {
    display: block;
    margin-bottom: 2px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #9a9192;
}

.fancybox-slide .notify-pop .input-text,
.fancybox-slide .notify-pop .input-text:focus,
.fancybox-slide .notify-pop .input-text:focus-visible {
    width: 100%;
    padding: 9px 0 10px;

    /* The theme draws a full blue box on focus, with !important behind it. The
       app is built on underlines, so the whole border is refused and only the
       bottom one comes back. */
    border: 0 !important;
    border-bottom: 1px solid #cfc4c5 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: none;

    font-family: Inter, sans-serif;
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 16px;
    line-height: 1.4;
    color: #1a1c1c;
    -webkit-tap-highlight-color: transparent;
}

.fancybox-slide .notify-pop .input-text:focus {
    border-bottom-color: #1a1c1c !important;
}

.fancybox-slide .notify-pop .notify-pop-text_small {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    color: #9a9192;
}

.fancybox-slide .notify-pop .pop-button-wrapper {
    margin-top: 20px;
}

.fancybox-slide .notify-pop .pop-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;
    padding: 0 20px !important;

    border: 1px solid #1a1c1c;
    border-radius: 9999px;
    background-color: #1a1c1c;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Where the product is, in a shop

   The panel is built as a five column table with a 1000px minimum, and below
   960px the page's own stylesheet folds it into grey blocks. That fold is the
   right idea; this only gives it the app's manners - a card per shop, the name
   leading, the map as something to press rather than a column heading.
   -------------------------------------------------------------------------- */
.fancybox-slide .storescontainer {
    box-sizing: border-box;
    width: min(440px, 92vw);
    max-width: 440px;
    min-width: 0;
    margin: 0 auto;
    padding: 26px 20px 22px !important;

    background-color: #ffffff;
    border-radius: 18px;
}

.fancybox-slide .storescontainer .page-header {
    margin: 0 0 18px !important;

    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    text-align: center;
    color: #1a1c1c !important;
}

.fancybox-slide .storescontainer .storeRow.Title {
    display: none !important;
}

/* One shop, as four facts in the order somebody asks for them: which
   neighbourhood, the street, the telephone, and the way to see it on a map.

   The columns arrive in the table's order and are re-ordered here rather than
   in the markup, which the website shares. */
.fancybox-slide .storescontainer .storeRow {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;

    margin: 0 0 10px !important;
    padding: 15px 16px 13px !important;

    background-color: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 14px;
}

.fancybox-slide .storescontainer .storeRow:last-of-type {
    margin-bottom: 0 !important;
}

.fancybox-slide .storescontainer .storeRow.selected {
    border-color: #1a1c1c !important;
    box-shadow: inset 0 0 0 1px #1a1c1c;
}

.fancybox-slide .storescontainer .storeRow .col {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    border: 0 !important;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left !important;
    color: #7e7576;
}

/* An empty cell must not leave a gap - the address is not printed when it is
   the same words as the name. */
.fancybox-slide .storescontainer .storeRow .col:empty {
    display: none !important;
}

/* The area, first and quiet. */
.fancybox-slide .storescontainer .storeRow .col:nth-child(2) {
    order: 1;
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9a9192;
}

.fancybox-slide .storescontainer .storeRow .col:nth-child(2) b {
    font-weight: 600;
}

/* The shop. */
.fancybox-slide .storescontainer .storeRow .col:nth-child(1) {
    order: 2;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1c1c;
}

/* The street, when it says something the name did not. */
.fancybox-slide .storescontainer .storeRow .col:nth-child(3) {
    order: 3;
    margin-top: 2px;
}

/* Telephone and map share the last line. */
.fancybox-slide .storescontainer .storeRow .col:nth-child(4) {
    order: 4;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-top: 12px;
    padding-top: 12px !important;
    border-top: 1px solid #f0f0f0 !important;

    font-size: 13px;
    font-weight: 500;
    color: #1a1c1c;
}

.fancybox-slide .storescontainer .storeRow .col:nth-child(5) {
    order: 5;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-top: 12px;
    padding-top: 12px !important;
    border-top: 1px solid #f0f0f0 !important;
    text-align: right !important;
}

.fancybox-slide .storescontainer .storeRow .col:nth-child(5) a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #cfc4c5;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1a1c1c;
}

.fancybox-slide .storescontainer .storeRow .col:nth-child(5) img.img1 {
    width: 13px !important;
    height: auto;
    margin: 0;
}

.fancybox-slide .storescontainer .viewmaptext {
    display: inline !important;
}

.fancybox-slide .storescontainer .store {
    margin-top: 12px;
}

.fancybox-slide .storescontainer .timetables_ {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: #57534f;
}

.fancybox-slide .storescontainer .map {
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.exit-hint {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 3000;

    padding: 11px 20px;
    border-radius: 9999px;
    background-color: rgba(26, 28, 28, .92);

    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;

    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.exit-hint.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.product-share {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #1a1c1c;
    cursor: pointer;
}

.product-share[hidden] {
    display: none !important;
}

.product-share.is-over-photo {
    position: absolute;
    top: 16px;
    right: 68px;
    z-index: 5;

    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 9999px;

    background-color: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.product-share .material-symbols-outlined {
    font-size: 21px;
}

.recent {
    padding: 0 var(--container-margin, 16px) 46px;
}

.recent__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.recent__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    color: #1a1c1c;
}

.recent__clear {
    padding: 0;
    border: 0;
    background: none;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9a9192;
    cursor: pointer;
}

.recent__strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.recent__strip::-webkit-scrollbar {
    display: none;
}

.recent__item {
    flex: 0 0 132px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.recent__shot {
    display: block;
    aspect-ratio: 3 / 4;
    margin-bottom: 8px;
    border-radius: 10px;
    background-color: #f4f2f1;
    overflow: hidden;
}

.recent__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #1a1c1c;
}

.recent__price {
    display: block;
    margin-top: 3px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1a1c1c;
}

#wishlistProduct.is-over-photo a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#wishlistProduct.is-over-photo img {
    display: none !important;
}

#wishlistProduct.is-over-photo a::before {
    content: "favorite";

    font-family: 'Material Symbols Outlined';
    font-size: 23px;
    font-variation-settings: 'FILL' 0, 'wght' 300;
    line-height: 1;
    color: #1a1c1c;

    transition: color .18s ease, font-variation-settings .18s ease;
}

#wishlistProduct.is-over-photo a:has(img[src*="wishlist-black"])::before {
    font-variation-settings: 'FILL' 1, 'wght' 400;
    color: #d5333f;
    animation: heart-pop .45s cubic-bezier(.2, .9, .3, 1.5);
}

#wishlistProduct.is-over-photo a:has(img[src*="wishlist-black"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid #d5333f;
    border-radius: 50%;
    pointer-events: none;
    animation: heart-ring .5s ease-out forwards;
}

@keyframes heart-pop {
    0% { transform: scale(.55); }
    45% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

@keyframes heart-ring {
    0% { opacity: .55; transform: scale(.5); }
    100% { opacity: 0; transform: scale(2.1); }
}

#wishlistProduct.is-over-photo a:active::before {
    transform: scale(.88);
}

.search-idle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.search-idle-chip {
    padding: 9px 16px;
    border: 1px solid #e2ddd9;
    border-radius: 9999px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #1a1c1c;
    text-decoration: none;
}

#search-recent {
    display: flex;
    flex-direction: column;
}

.search-recent__row {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 0;
    border-bottom: 1px solid #f2f0ef;

    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #1a1c1c;
    text-decoration: none;
}

.search-recent__row .material-symbols-outlined {
    font-size: 19px;
    color: #b3aaab;
}

.search-recent__none {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #b3aaab;
}

.search-recent__clear {
    align-self: flex-start;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b3aaab;
    cursor: pointer;
}