/* The store's one typeface, self-hosted from `assets/fonts` so no page waits on a third party.

   Inter Tight is a variable font covering the 100-900 weight range, so the whole interface's
   400/650/700/750/800/850/900 weights come from these two files rather than from a family of
   static cuts. Only the two subsets Turkish needs are shipped: `latin` carries ç ğ ı İ ö ş ü
   Ö Ş Ü, and `latin-ext` carries the rest of the Latin Extended-A range the interface may print
   in a product name. `font-display: swap` and the preload in the document head mean text is
   painted in the fallback immediately and swapped once, rather than being invisible while a
   stylesheet's own font loads. The fallback stack below is what a reader sees for those few
   hundred milliseconds, and it is the stack the site is designed to survive without the webfont. */
@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-tight-latin-ext-EJwB12O.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-tight-latin-eRUCCTh.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --storefront-notice: #071e3c;
    --storefront-navy: #092a53;
    --storefront-navy-light: #123d70;
    --storefront-yellow: #fed243;
    --storefront-body: #ebebf0;
    --storefront-card: #fff;
    --storefront-ink: #171c22;
    --storefront-muted: #69717a;
    --storefront-line: #e1e3e6;
    --storefront-container: 1456px;
    font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--storefront-ink);
    background: var(--storefront-notice);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--storefront-body);
    font-size: 16px;
    line-height: 1.5;
}

/* The page paints its own background; the canvas below the footer stays navy during overscroll. */
.storefront-page {
    min-width: 0;
    background: var(--storefront-notice);
}

.storefront-content {
    display: flow-root;
    padding-bottom: 2.2rem;
    background: var(--storefront-body);
}

/* Every form control inherits the page's own typeface: a control that fell back to the browser
   default would be the one place on a page set in a different family. `textarea` was missing here,
   which is why it is named explicitly rather than left to the shorthand's shorter list. */
button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #005ea8;
    outline-offset: 3px;
}

select:focus-visible {
    outline: 3px solid #005ea8;
    outline-offset: 3px;
}

.notice button:focus-visible,
.header-primary a:focus-visible,
.header-primary button:focus-visible,
.header-primary input:focus-visible,
.mobile-navigation a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline-color: var(--storefront-yellow);
}

.container {
    width: min(calc(100% - 64px), var(--storefront-container));
    margin-inline: auto;
}

.sr-only,
.skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    color: #fff;
    background: var(--storefront-navy);
}

/* The header.

   `tema/index.html` draws three rows and `tema/assets/css/style.css` measures every one of them, so
   what follows is the reference's header rather than a second arrangement of the same parts: a top
   bar, a main row of 192px / search / three white pills, and a 64px menu band, all three inside one
   navy block. There is no separate white navigation strip — the reference has none, which is why
   the wishlist and compare links now sit in the menu band beside the yellow cart block, where the
   reference keeps its own quick links.

   Every length below is the reference's own, expressed in rem at its 16px root, and the breakpoints
   are its own: 1300px, 1024px and 680px. */
.site-header {
    color: #fff;
    background: var(--storefront-navy);
}

/* Row one: the top bar, 46.4px tall with this store's two lines at either end. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46.4px;
    font-size: 12.8px;
    font-weight: 600;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 19.2px;
}

.topbar-right {
    gap: 14.4px;
}

.topbar p {
    margin: 0;
    opacity: 0.96;
}

/* Row two: the reference's three columns of 73.6px. Its first track is 192px, which holds its
   126.4px logo image; this store's lockup is a 48px mark beside two lines of name, so the track
   here is 224px to hold it whole (48 + 11.2 + 164.8) and the fluid search gives up the 32px
   difference rather than the space going unused. The 1300px breakpoint below narrows the track
   to 152px as the reference does. */
.header-main {
    display: grid;
    grid-template-columns: 224px minmax(320px, 1fr) auto;
    align-items: center;
    gap: 19.2px;
    height: 73.6px;
}

/* The lockup inside that track: the mark at 48px reads as a logo rather than a token, and the two
   lines beside it are set as type, 16px and 10.4px, which is 152.6px and 147.3px of text in the
   164.8px the track leaves them. Both lines keep the reference's own ellipsis, so a longer store
   name shortens rather than pushing the search out of the grid. */
.storefront-brand {
    display: flex;
    align-items: center;
    gap: 11.2px;
    min-width: 0;
    height: 100%;
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.brand-copy {
    display: grid;
    min-width: 0;
}

.brand-copy strong {
    font-size: 16px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-copy small {
    margin-top: 1.6px;
    color: #b9c8d8;
    font-size: 10.4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The search takes the whole middle track. The reference holds it to a fixed 759.2px block, which
   only fills its row at the reference's own 1901px width and leaves a hole on either side of it
   everywhere else; this store has no two square buttons in the action group, so the track is
   wider than the reference's search anyway. Letting it stretch means the field always runs from
   the brand lockup to the action pills, with the 19.2px column gap as the only separation, and
   the third `auto` track keeps that group pinned and right-aligned. */
.storefront-search {
    display: flex;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: 40.8px;
    border-radius: 4px;
    overflow: hidden;
    color: #555;
    background: #fff;
}

.storefront-search input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    font-size: 12.8px;
}

.storefront-search button {
    width: 43.2px;
    border: 0;
    color: #50585e;
    background: #fff;
    font-size: 20px;
}

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

/* The reference's white pills: 40.8px tall, a 4px radius, the store's dark text on white. */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40.8px;
    min-width: 89.6px;
    padding: 0 14.4px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #3b4249;
    background: #fff;
    font-size: 12.8px;
    white-space: nowrap;
}

/* The account pill's own list.

   The reference draws the pill and the caret and stops there, so every measurement below is taken
   from the reference's own vocabulary rather than invented: the panel is white on the same 5.6px
   card radius the theme's white cards use, its items are set in the pill's own 12.8px at the
   reference's 8.8px/14.4px row padding, and it is hung from the pill by the same 8px gap the
   header's own columns are separated by. The pointer is the 10px square the reference's card
   corners are cut on, drawn in the panel's own colour so it reads as part of the panel. */
.account-menu {
    position: relative;
}

.account-menu-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    right: 0;
    min-width: 208px;
    padding-block: 6.4px;
    border: 1px solid var(--storefront-line);
    border-radius: 5.6px;
    background: var(--storefront-card);
    box-shadow: 0 14px 34px rgb(7 30 60 / 18%);
}

/* The pointer, aligned to the caret the pill shows at its right-hand end. */
.account-menu-panel::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 26px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--storefront-line);
    border-left: 1px solid var(--storefront-line);
    background: var(--storefront-card);
    transform: rotate(45deg);
}

.account-menu-heading {
    margin: 0;
    padding: 0 14.4px 6.4px;
    border-bottom: 1px solid var(--storefront-line);
    color: var(--storefront-muted);
    font-size: 10.4px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-menu-panel a,
.account-menu-form button {
    display: block;
    width: 100%;
    padding: 8.8px 14.4px;
    border: 0;
    color: #3b4249;
    background: none;
    font-size: 12.8px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.account-menu-panel a:hover,
.account-menu-form button:hover {
    color: var(--storefront-navy);
    background: #eef3fb;
}

.account-menu-panel a[aria-current="page"] {
    color: var(--storefront-navy);
    font-weight: 600;
}

.account-menu-form {
    margin: 6.4px 0 0;
    padding-top: 6.4px;
    border-top: 1px solid var(--storefront-line);
}

.account-menu-form button {
    cursor: pointer;
}

/* An open pill keeps the pill's own shape and says which way the list went. */
.account-menu.is-open .action-caret {
    transform: rotate(180deg);
}

/* Card-entry pages keep scripts disabled; native disclosures provide the same navigation. */
.script-free-account-menu[open] .action-caret {
    transform: rotate(180deg);
}

.script-free-account-menu > summary,
.script-free-mobile-menu > summary {
    list-style: none;
    cursor: pointer;
}

.script-free-account-menu > summary::-webkit-details-marker,
.script-free-mobile-menu > summary::-webkit-details-marker {
    display: none;
}

.site-header:has(.script-free-mobile-menu) {
    position: relative;
}

.script-free-mobile-menu {
    display: none;
}

@media (max-width: 1024px) {
    .script-free-mobile-menu {
        display: block;
    }

    .script-free-mobile-menu .mobile-navigation {
        position: absolute;
        z-index: 60;
        inset-inline: 0;
        top: 100%;
        max-height: 65vh;
        overflow-y: auto;
        box-shadow: 0 14px 34px rgb(7 30 60 / 18%);
    }
}

.action-caret {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    transform-origin: center;
    transition: transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .action-caret {
        transition: none;
    }
}

/* The reference's marks are text in the same run as the labels, so they take the label's 12.8px
   rather than a size of their own; only the departments mark, which the reference does size, is
   separated out below. */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36.8px;
    height: 36.8px;
    border: 0;
    border-radius: 4px;
    color: var(--storefront-navy);
    background: #fff;
    font-size: 19.2px;
}

/* Row three: the menu band. The departments button and the main links on the left, the quick links
   and the yellow cart block on the right, with the spacer between them that pushes both right. */
.nav-row {
    display: flex;
    align-items: center;
    gap: 19.2px;
    height: 64px;
}

.departments {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10.4px;
    width: 230.4px;
    height: 41.6px;
    padding: 0 14.4px;
    border: 0;
    border-radius: 4px;
    color: #0d294e;
    background: var(--storefront-yellow);
    font-size: 13.6px;
}

.hamb {
    font-size: 16.8px;
}

/* The reference's own corner tag on the departments button. */
.new-tag {
    position: absolute;
    top: -13.6px;
    right: 0;
    padding: 2px 6.4px;
    border-radius: 4px;
    color: #5479b5;
    background: #d9e6ff;
    font-size: 11.2px;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 25.6px;
    font-size: 12.8px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-spacer {
    flex: 1;
}

.quick-navigation {
    display: flex;
    align-items: center;
    gap: 21.6px;
    font-size: 12.8px;
    font-weight: 600;
}

.cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10.4px;
    margin-left: 4px;
    height: 41.6px;
    min-width: 159.2px;
    border: 0;
    border-radius: 4px;
    color: #0d294e;
    background: var(--storefront-yellow);
    font-size: 12.8px;
    white-space: nowrap;
}

.mobile-navigation {
    border-top: 1px solid rgb(255 255 255 / 14%);
    background: var(--storefront-navy-light);
}

.mobile-navigation-inner {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.75rem;
}

.mobile-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding-block: 0.75rem;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: #fff;
    line-height: 1.5;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    -webkit-tap-highlight-color: transparent;
}

.mobile-navigation a[aria-current="page"] {
    color: var(--storefront-yellow);
    text-decoration-line: underline;
}

.mobile-navigation a:focus-visible {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
}

.mobile-navigation-inner small {
    flex-shrink: 0;
    color: inherit;
}

@media (forced-colors: active) {
    .mobile-navigation a:focus-visible {
        forced-color-adjust: none;
        color: Highlight;
        text-decoration-color: Highlight;
    }
}

.header-primary .mobile-menu-toggle:focus-visible {
    outline-color: #fff;
}

.information-page .content-body { overflow-wrap: anywhere; }
.information-page .content-body ul, .information-page .content-body ol { padding-inline-start: 1.5rem; }
.information-page .content-body a { color: var(--storefront-navy); text-decoration: underline; }
.information-page .content-body blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--storefront-line); }

.page-shell {
    min-height: 480px;
    padding: 2rem 0 3rem;
    background: linear-gradient(#e8e8ed 0, var(--storefront-body) 40px);
}

.home-top {
    display: grid;
    grid-template-areas: "categories hero support";
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 1rem;
    align-items: start;
}

.category-panel,
.support-panel,
.foundation-section {
    border-radius: 0.35rem;
    background: var(--storefront-card);
}

.category-panel {
    grid-area: categories;
}

.support-panel {
    grid-area: support;
}

.category-panel,
.support-panel {
    min-height: 460px;
}

.category-panel h2,
.support-panel h2 {
    margin: 0;
    font-size: 1.05rem;
}

.category-panel h2 {
    padding: 1.5rem 1.25rem 1rem;
}

.category-panel ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.category-panel li {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    min-height: 64px;
    padding: 0 1.25rem;
    border-top: 1px solid var(--storefront-line);
    color: #59626b;
    font-size: 0.85rem;
}

.category-panel li > span {
    color: #788594;
    font-size: 1rem;
}

.category-panel small {
    color: #5f6872;
    font-size: 0.58rem;
}

.hero-panel {
    grid-area: hero;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.85fr);
    min-height: 460px;
    overflow: hidden;
    border-radius: 0.35rem;
    color: #fff;
    background: #07182f;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto -8rem -12rem auto;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: #123a69;
}

.hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 3rem 1rem 3rem 3rem;
}

.hero-eyebrow {
    margin: 0 0 0.6rem;
    color: #e7bc36;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel-kicker {
    margin: 0 0 0.6rem;
    color: #745600;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 38rem;
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.hero-copy > p:not(.hero-eyebrow) {
    max-width: 34rem;
    margin: 1.2rem 0 1.7rem;
    color: #c2d0df;
    font-size: 0.92rem;
}

.hero-cta {
    display: inline-flex;
    padding: 0.8rem 1.1rem;
    border-radius: 0.3rem;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 0.78rem;
    font-weight: 800;
}

.hero-image {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(90%, 360px);
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);
}

.hero-marker {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 0.85rem;
    height: 0.3rem;
    background: var(--storefront-yellow);
}

/* The theme's version of the same accent runs the full width of the hero. */
.home-top .hero-marker {
    right: 0;
    width: auto;
}

.support-panel {
    padding: 2rem 1.5rem;
}

.support-panel > p:not(.panel-kicker) {
    margin: 1rem 0 1.5rem;
    color: var(--storefront-muted);
    font-size: 0.8rem;
}

.support-panel dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.support-panel dl div {
    padding: 1rem 0;
    border-top: 1px solid var(--storefront-line);
}

.support-panel dt {
    color: var(--storefront-navy);
    font-size: 1.15rem;
    font-weight: 850;
}

.support-panel dd {
    margin: 0.15rem 0 0;
    color: var(--storefront-muted);
    font-size: 0.72rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.4rem;
    overflow: hidden;
    border-radius: 0.35rem;
    background: #fff;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 104px;
    padding: 1.25rem;
    border-right: 1px solid var(--storefront-line);
}

.feature-card:last-child {
    border-right: 0;
}

.feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    color: var(--storefront-navy);
    background: #fff3c4;
    font-size: 1.25rem;
}

.feature-card h3 {
    margin: 0;
    font-size: 0.9rem;
}

.feature-card p {
    margin: 0.2rem 0 0;
    color: var(--storefront-muted);
    font-size: 0.68rem;
}

.foundation-section {
    margin-top: 1.4rem;
    padding: 1.6rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.section-heading h2 {
    margin: 0;
    font-size: 1.45rem;
}

.section-heading > span {
    color: var(--storefront-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.foundation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.foundation-grid article {
    padding: 1.25rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.3rem;
}

.foundation-grid article > span {
    color: #97a4b2;
    font-size: 0.65rem;
    font-weight: 900;
}

.foundation-grid h3 {
    margin: 0.4rem 0;
    font-size: 1rem;
}

.foundation-grid p {
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.78rem;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--storefront-line);
    border-radius: 0.3rem;
    background: #fff;
}

.product-thumb {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 176px;
    overflow: hidden;
    background: #f7f7f8;
}

.product-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 0.9rem;
}

.product-brand {
    margin: 0;
    color: #59616a;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-name {
    display: block;
    margin: 0.3rem 0;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 850;
}

.product-badge {
    position: absolute;
    z-index: 2;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.25rem 0.4rem;
    border-radius: 0.2rem;
    color: #365579;
    background: #dfeafb;
    font-size: 0.58rem;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0 1rem;
    color: var(--storefront-muted);
    font-size: 0.72rem;
}

.breadcrumbs a {
    color: var(--storefront-navy);
    font-weight: 750;
}

.account-card {
    padding: 1.5rem;
    border-radius: 0.35rem;
    background: #fff;
}

.account-card-narrow {
    max-width: 800px;
    margin-inline: auto;
}

.account-card h1 {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}

.account-intro,
.account-switch {
    color: var(--storefront-muted);
    font-size: 0.78rem;
}

.account-switch {
    margin: 1.25rem 0 0;
}

.account-switch a {
    color: var(--storefront-navy);
    font-weight: 800;
}

.account-form {
    margin-top: 1.4rem;
}

.account-form > div > div {
    margin-bottom: 1rem;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.account-field-full {
    grid-column: 1 / -1;
}

.account-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: #4e5963;
    font-size: 0.72rem;
    font-weight: 750;
}

.account-form input,
.account-form select,
.account-form textarea {
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cfd4da;
    border-radius: 0.3rem;
    background: #fff;
}

.account-form ul {
    padding: 0;
    margin: 0.35rem 0 0;
    color: #9a3e3e;
    font-size: 0.7rem;
    list-style: none;
}

.account-primary-button {
    min-height: 42px;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.3rem;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 0.76rem;
    font-weight: 850;
    cursor: pointer;
}

.account-primary-button:hover,
.account-primary-link:hover {
    filter: brightness(0.96);
}

.storefront-flash {
    padding: 0.75rem max(1rem, calc((100% - 1400px) / 2));
    color: #164c31;
    background: #dff3e8;
    font-size: 0.75rem;
    font-weight: 750;
}

.account-alert {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
}

.account-alert-error {
    color: #792f2f;
    background: #f8e3e3;
}

.account-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.35rem;
    background: #fff;
}

.account-nav a,
.account-nav button {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.25rem;
    color: var(--storefront-navy);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.account-nav a:hover,
.account-nav a[aria-current="page"] {
    border-color: var(--storefront-navy);
    color: #fff;
    background: var(--storefront-navy);
}

.account-nav button {
    cursor: pointer;
}

.account-primary-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: none;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 0.72rem;
    font-weight: 850;
    font-family: inherit;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.account-primary-link:focus-visible {
    outline: 3px solid var(--storefront-navy);
    outline-offset: 3px;
}

.account-nav form {
    margin-left: auto;
}

.account-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-grid,
.address-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.account-grid a,
.address-grid article {
    padding: 1rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.35rem;
    background: #fff;
}

.address-grid h2 {
    margin-top: 0;
    font-size: 1rem;
}

.address-grid p {
    color: var(--storefront-muted);
    font-size: 0.72rem;
}

.address-default-badge {
    display: inline-flex;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    color: var(--storefront-navy);
    background: #fff4b8;
    font-size: 0.64rem;
}

.address-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
}

.address-action-edit,
.address-action-delete {
    min-height: 36px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.25rem;
    color: var(--storefront-navy);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}

.address-action-edit {
    display: inline-flex;
    align-items: center;
}

.address-action-delete {
    color: #8b3030;
    cursor: pointer;
}

.address-action-edit:hover {
    border-color: var(--storefront-navy);
    color: #fff;
    background: var(--storefront-navy);
}

.address-action-delete:hover {
    border-color: #8b3030;
    color: #fff;
    background: #8b3030;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.catalog-filters,
.catalog-results,
.brands-directory,
.product-detail {
    border-radius: 0.35rem;
    background: #fff;
}

.catalog-filters {
    padding: 1.15rem;
}

/* The filter panel's titles are paragraphs rather than headings on purpose. The panel sits to
   the left of the results column, so its <h2> elements were announced before the page's <h1>,
   and a screen-reader user navigating by heading met "Kategoriler" and "Filtrele" before
   "Ürün Kataloğu". The panel keeps its accessible name through aria-labelledby, and these
   rules keep it looking exactly as it did while it was a heading. */
.catalog-filters h2,
.catalog-filters .catalog-filter-heading,
.catalog-filters .catalog-price-range legend {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.catalog-filters h2:not(:first-child),
.catalog-filters .catalog-filter-heading:not(:first-child) {
    margin-top: 1.6rem;
}

.catalog-filters > a,
.catalog-filter-list > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 40px;
    border-bottom: 1px solid var(--storefront-line);
    color: #58616a;
    font-size: 0.76rem;
}

.catalog-filters > a[aria-current="page"],
.catalog-filters > a:hover,
.catalog-filter-list > a[aria-current="page"],
.catalog-filter-list > a:hover {
    color: var(--storefront-navy);
    font-weight: 600;
}

.catalog-filters > a small,
.catalog-filter-list > a small {
    min-width: 1.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 1rem;
    background: #edf1f5;
    text-align: center;
}

.catalog-filter-list {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--storefront-yellow) #edf1f5;
    scrollbar-gutter: stable;
    padding-right: 0.6rem;
}

.catalog-filter-list::-webkit-scrollbar { width: 6px; }
.catalog-filter-list::-webkit-scrollbar-button { display: none; }
.catalog-filter-list::-webkit-scrollbar-track { background: #edf1f5; border-radius: 10px; }
.catalog-filter-list::-webkit-scrollbar-thumb { background: var(--storefront-yellow); border-radius: 10px; }
.catalog-filter-list::-webkit-scrollbar-thumb:hover { background: var(--storefront-navy); }
.catalog-filter-list:focus-visible { outline: 2px solid var(--storefront-navy); outline-offset: 3px; border-radius: 0.3rem; }
.catalog-filter-list > a > span { min-width: 0; overflow-wrap: anywhere; }
.catalog-filter-list > a > small { flex-shrink: 0; }

@supports selector(::-webkit-scrollbar) {
    .catalog-filter-list { scrollbar-width: auto; scrollbar-color: auto; }
}

@media (max-width: 1024px) {
    .catalog-filter-list {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1rem;
        max-height: 256px;
    }
}

@media (max-width: 680px) {
    .catalog-filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.catalog-filter-form,
.sort-form {
    display: grid;
    gap: 0.5rem;
}

.catalog-filter-form label,
.sort-form label {
    color: #4e5963;
    font-size: 0.7rem;
    font-weight: 600;
}

.catalog-filter-form select,
.sort-form select {
    min-width: 0;
    min-height: 40px;
    padding: 0 0.65rem;
    border: 1px solid #cfd4da;
    border-radius: 0.3rem;
    background: #fff;
    font-size: 0.72rem;
}

.catalog-filter-form .checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.35rem;
}

.catalog-filter-form button {
    min-height: 40px;
    border: 0;
    border-radius: 0.3rem;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 0.75rem;
    font-weight: 600;
}

.catalog-filter-clear {
    display: block;
    min-height: 40px;
    margin-top: 0.5rem;
    border-radius: 0.3rem;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 2.6;
    text-align: center;
    text-decoration: none;
}

.catalog-filter-clear:hover { filter: brightness(.96); }
.catalog-filter-clear:focus-visible { outline: 3px solid var(--storefront-navy); outline-offset: 3px; }

.catalog-results {
    scroll-margin-top: 1rem;
    min-width: 0;
    padding: 1.5rem;
}

#catalog-results:focus {
    outline: none;
}

.catalog-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.catalog-heading-row h1,
.brands-directory h1 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.1;
}

.search-context,
.catalog-summary {
    color: var(--storefront-muted);
    font-size: 0.75rem;
}

.sort-form {
    grid-template-columns: auto minmax(190px, 1fr);
    align-items: center;
}

.catalog-results .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.product-sku {
    margin: 0.15rem 0 0.45rem;
    color: var(--storefront-muted);
    font-size: 0.65rem;
}

.product-old {
    margin-left: 0.35rem;
    color: #8b9198;
    font-size: 0.68rem;
    font-weight: 600;
}

.stock-state {
    margin: 0.45rem 0 0;
    font-size: 0.68rem;
    font-weight: 600;
}

.stock-state.is-available {
    color: #1e7047;
}

.stock-state.is-unavailable {
    color: #9a3e3e;
}

.catalog-empty {
    padding: 3rem 1.25rem;
    border: 1px dashed #cbd1d7;
    border-radius: 0.35rem;
    text-align: center;
}

.catalog-empty h2 {
    margin: 0;
    font-size: 1.1rem;
}

.catalog-empty p {
    margin-bottom: 0;
    color: var(--storefront-muted);
    font-size: 0.78rem;
}

/* The bottom of a listing that loads the rest of itself. It has nothing to show on its own — it is
   the line the observer watches, and it keeps the last grid row off the very edge of the page. */
.catalog-load-more {
    min-height: 1px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
}

.pagination a {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--storefront-line);
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.pagination a[aria-current="page"] {
    border-color: var(--storefront-navy);
    color: #fff;
    background: var(--storefront-navy);
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 1.5rem;
}

.product-gallery {
    min-width: 0;
}

.product-gallery-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 416px;
    border-radius: 0.3rem;
    background: #f7f7f8;
}

.product-gallery-main img {
    display: block;
    width: 86%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
}

.product-gallery-thumbnails {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.65rem;
    padding: 0.15rem;
    overflow-x: auto;
}

.product-gallery-thumbnail {
    flex: 0 0 64px;
    height: 64px;
    padding: 0.3rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.25rem;
    background: #f7f7f8;
}

.product-gallery-thumbnail[aria-pressed="true"] {
    border-color: var(--storefront-navy);
    box-shadow: 0 0 0 1px var(--storefront-navy);
}

.product-gallery-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery-zoom {
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

.product-gallery-zoom-hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.25rem;
    color: var(--storefront-navy);
    background: #fff;
    font-size: 0.8rem;
}

.product-gallery-dialog {
    width: min(1100px, calc(100vw - 2rem));
    height: min(850px, calc(100vh - 2rem));
    height: min(850px, calc(100dvh - 2rem));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    color: var(--storefront-navy);
    background: #fff;
    overflow: hidden;
}

.product-gallery-dialog[open] {
    display: flex;
    flex-direction: column;
}

.product-gallery-dialog::backdrop {
    background: rgb(7 18 34 / 80%);
}

.product-gallery-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
}

.product-gallery-dialog-close,
.product-gallery-dialog-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--storefront-line);
    border-radius: 0.3rem;
    color: var(--storefront-navy);
    background: #f7f7f8;
    font-size: 1.8rem;
    cursor: pointer;
}

.product-gallery-dialog-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
    line-height: 1;
}

.product-gallery-dialog-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
    padding: 0 0.75rem;
}

.product-gallery-dialog-arrow {
    grid-row: 1;
    align-self: center;
}

.product-gallery-dialog-arrow:last-child {
    grid-column: 3;
}

.product-gallery-dialog-image {
    grid-column: 2;
    grid-row: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.product-gallery-dialog-thumbnails {
    flex-shrink: 0;
    min-height: 0;
    margin: 0;
    padding: 0.75rem;
}

.product-gallery-zoom:focus-visible,
.product-gallery-dialog button:focus-visible {
    outline: 3px solid var(--storefront-navy);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .product-gallery-dialog {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        height: calc(100dvh - 1rem);
    }

    .product-gallery-dialog-stage {
        gap: 0.25rem;
        padding: 0 0.35rem;
    }
}

.product-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.product-code-line {
    margin: 0;
    color: var(--storefront-muted);
    font-size: 0.72rem;
}

.product-code-line a {
    color: var(--storefront-navy);
    font-weight: 800;
}

.product-meta h1 {
    margin: 0.55rem 0 0.8rem;
    font-size: 1.8rem;
    line-height: 1.2;
}

.product-meta .product-description {
    color: #58616a;
    white-space: pre-line;
}

.product-price-large {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-block: 1.25rem 0.8rem;
    flex-wrap: wrap;
}

.product-price-large strong {
    font-size: 1.55rem;
}

.product-price-large del {
    color: var(--storefront-muted);
    font-size: 0.9rem;
}

.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
    font-size: 0.72rem;
}

.product-categories a {
    padding: 0.18rem 0.45rem;
    border-radius: 1rem;
    color: var(--storefront-navy);
    background: #e7eef8;
}

.product-identifiers,
.product-attributes {
    margin-top: 1.5rem;
}

.product-identifiers h2,
.product-attributes h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.product-identifiers dl,
.product-attributes dl {
    margin: 0;
    border-top: 1px solid var(--storefront-line);
}

.product-identifiers dl div,
.product-attributes dl div {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--storefront-line);
    font-size: 0.72rem;
}

.product-identifiers dt,
.product-attributes dt {
    color: var(--storefront-muted);
}

.product-identifiers dd,
.product-attributes dd {
    margin: 0;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.brands-directory {
    padding: 1.5rem;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.brand-grid a {
    display: grid;
    min-height: 92px;
    padding: 1rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.35rem;
}

.brand-grid a:hover {
    border-color: var(--storefront-navy);
}

.brands-directory .brand-grid a {
    text-align: center;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 96px;
    margin-bottom: 0.75rem;
    object-fit: contain;
}

.brand-grid span {
    align-self: end;
    color: var(--storefront-muted);
    font-size: 0.7rem;
}

@media (max-width: 1024px) {
    .catalog-layout,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .catalog-filters {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 1rem;
    }

    .catalog-filters h2,
    .catalog-filters .catalog-filter-heading,
    .catalog-filter-form {
        grid-column: 1 / -1;
    }

    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 680px) {
    .account-card {
        padding: 1rem;
    }

    .account-form-grid {
        grid-template-columns: 1fr;
    }

    .account-field-full {
        grid-column: auto;
    }

    .account-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .account-nav form {
        margin-left: 0;
    }

    .account-nav a,
    .account-nav button {
        display: block;
        width: 100%;
        text-align: left;
    }

    .account-grid,
    .address-grid {
        grid-template-columns: 1fr;
    }

    .catalog-results,
    .catalog-filters,
    .product-detail,
    .brands-directory {
        padding: 1rem;
    }

    .catalog-filters {
        grid-template-columns: 1fr 1fr;
    }

    .catalog-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .sort-form {
        grid-template-columns: auto 1fr;
    }

    .catalog-results .product-grid,
    .brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-results .product-thumb {
        height: 136px;
    }

    .product-identifiers dl div,
    .product-attributes dl div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* The footer: the theme's own four columns over a bottom bar.

   The reference draws one wider column for the store and three equal ones, sets the whole footer
   in the small type its body uses, stacks every link on its own line, and closes with a rule
   between the columns and a bottom bar carrying the copyright on the left and the card marks on
   the right. Those are the numbers below; the content is this store's. */
.site-footer {
    margin-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color: #d4dce5;
    background: var(--storefront-notice);
    font-size: 0.8rem;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
    padding-block: 2.9rem;
}

.footer-logo {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}

.site-footer h4 {
    margin: 0 0 0.75rem;
    color: #fff;
    /* The reference's column headings are bold in the footer's own type size rather than a size of
       their own, so `1em` here is the same measure it draws. */
    font-size: 1em;
    font-weight: 700;
}

.site-footer p {
    display: block;
    margin: 0.45rem 0;
}

/* Stand-ins for the entries the store has no page for yet: they read exactly as the links they sit
   among, in the same colour, so the column is not half clickable and half not. */
.footer-main > section > span {
    display: block;
    margin: 0.45rem 0;
    color: #b9c6d3;
}

/* Every link on its own line: a footer whose links run together in a paragraph is a wall of
   text, and the reference stacks them. */
.site-footer a {
    display: block;
    margin: 0.45rem 0;
    color: #b9c6d3;
}

.site-footer a:hover {
    color: #fff;
}

/* The store column's contact block: the column's own type and colour, one fact per line.

   `address` is the semantic element for exactly this and is what a screen reader announces as
   the store's contact information, so it is used rather than a styled div. Browsers render it
   italic, which would make these lines look like the store's prose instead of its details, so
   the slant is taken back off and the address keeps the footer's own small type. The rules below
   only govern this block; the column's grid track, the other columns and the bottom bar are
   untouched, so the payment marks and the alignment of the four columns stay as they were. */
.footer-address {
    display: block;
    margin: 0.75rem 0 0;
    color: #b9c6d3;
    font-size: 1em;
    font-style: normal;
    letter-spacing: normal;
}

.footer-address-line {
    display: block;
    margin: 0.2rem 0;
    color: inherit;
    overflow-wrap: anywhere;
}

/* Same rule for the address's links, which `.site-footer a` would otherwise space like the
   column's own links and leave a gap above the address for no reason. */
.site-footer a.footer-address-line {
    margin: 0.2rem 0;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding-block: 0.95rem;
    border-top: 1px solid #24405f;
    font-size: 0.8rem;
}

.payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    letter-spacing: normal;
}

.payments img {
    display: block;
    height: 20px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.payments img[alt="Visa"],
.payments img[alt="Mastercard"] {
    background: #fff;
    border-radius: 3px;
    padding: 3px 5px;
}

.contact-card { margin-bottom: 20.8px; }
.contact-eyebrow { margin: 0 0 10px; color: var(--storefront-navy); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-intro { margin: 0 0 28px; color: var(--storefront-muted); line-height: 1.7; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.contact-form-card { min-width: 0; margin: 0; padding: clamp(20px, 3vw, 36px); border-radius: 12px; }
.contact-form-card h2 { margin: 0 0 24px; color: var(--storefront-navy); font-size: 22px; }
.contact-business { min-width: 0; padding: clamp(24px, 3vw, 36px); border-radius: 12px; background: var(--storefront-navy); color: #fff; box-shadow: 0 12px 28px rgb(9 42 83 / 12%); }
.contact-business .contact-eyebrow { color: var(--storefront-yellow); }
.contact-business h2 { margin: 0 0 28px; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; overflow-wrap: anywhere; }
.contact-details { display: grid; gap: 24px; margin: 0; }
.contact-details > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
.contact-icon { flex-shrink: 0; }
.contact-details .contact-icon { grid-row: span 2; color: var(--storefront-yellow); }
.contact-details dt { color: #c8d5e5; font-size: 12px; font-weight: 600; }
.contact-details dd { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.contact-details address { font-style: normal; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-business a:focus-visible { outline-color: var(--storefront-yellow); }
.contact-directions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; padding: 14px 16px; border-radius: 6px; background: var(--storefront-yellow); color: var(--storefront-navy); font-weight: 700; line-height: 1.5; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-form .field { display: flex; flex-direction: column; gap: 5.6px; min-width: 0; }
.contact-form .field.full { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #d6d9dc; border-radius: 4px; padding: 8.8px; background: var(--storefront-card); font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .btn-yellow { align-self: flex-start; border: 0; border-radius: 4px; padding: 7.2px 9.6px; background: var(--storefront-yellow); color: var(--storefront-ink); font: inherit; font-weight: 700; }
.contact-errors:empty { display: none; }
@media (max-width: 900px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .contact-form { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1025px) {
    .mobile-navigation {
        display: none !important;
    }
}

@media (min-width: 1301px) {
    /* The reference's own measurements for the wide header, measured against its 1901px reference:
       each pill has its own width and the menu band's controls sit 4px lower in the 64px row at a
       depth of 43.2px. Its fixed 759.2px search is deliberately not carried over: at this store's
       wider action group it left a dead gap before the pills, so the search keeps the fluid
       stretch of the base rule instead. */
    .topbar-left {
        gap: 15.2px;
    }

    .action-btn.account {
        width: 115.2px;
        min-width: 115.2px;
        padding-inline: 8px;
    }

    .action-btn.contact {
        width: 99.2px;
        min-width: 99.2px;
        padding-inline: 8px;
    }

    .action-btn.blog {
        width: 78.4px;
        min-width: 78.4px;
        padding-inline: 6px;
    }

    .nav-row > .departments,
    .nav-row > .main-navigation,
    .nav-row > .quick-navigation,
    .nav-row > .cart-button {
        transform: translateY(4px);
    }

    .departments,
    .cart-button {
        height: 43.2px;
    }
}

@media (max-width: 1300px) {
    .container {
        width: calc(100% - 36px);
    }

    .header-main {
        grid-template-columns: 152px minmax(320px, 1fr) auto;
    }

    .topbar-right {
        display: none;
    }

    /* The reference drops the two secondary pills here and keeps the account one. */
    .action-btn.contact,
    .action-btn.blog {
        display: none;
    }

    /* The name column narrows with the reference's own 152px track, so the lockup shrinks into it
       and the tagline, which has no room left, steps aside rather than truncating to nothing. */
    .brand-mark {
        width: 30.4px;
        height: 30.4px;
        font-size: 11.5px;
    }

    .storefront-brand {
        gap: 7px;
    }

    .brand-copy strong {
        font-size: 12.5px;
    }

    .brand-copy small {
        display: none;
    }

    .home-top {
        grid-template-columns: 224px minmax(0, 1fr) 224px;
    }

    .category-panel,
    .support-panel,
    .hero-panel {
        min-height: 410px;
    }

    .category-panel li {
        min-height: 56px;
    }

    .hero-copy {
        padding-left: 2rem;
    }
}

@media (max-width: 1024px) {
    /* The reference's tablet header: no top bar, a 60.8px row, no action pills at all and the
       menu button in their place, then a 46.4px menu band that keeps only the departments button
       and the cart. */
    .topbar {
        display: none;
    }

    .header-main {
        grid-template-columns: 120px minmax(320px, 1fr) auto;
        height: 60.8px;
    }

    .brand-copy {
        display: none;
    }

    /* The reference keeps its logo here alone and shrinks it to a 100px wide mark, so this store's
       lockup becomes the same single horizontal mark at that width rather than a small square with
       empty column either side of it. */
    .brand-mark {
        width: 100px;
        height: 36.8px;
        border-radius: 4px;
        font-size: 17px;
        letter-spacing: 0;
    }

    .action-btn {
        display: none;
    }

    /* The account dropdown is a desktop control, so its wrapper goes with the pill it hangs from
       and the mobile navigation's own "Hesabım" row is the small screen's way in. */
    .account-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-row {
        height: 46.4px;
    }

    .departments {
        width: 188px;
        height: 35.2px;
    }

    .main-navigation,
    .quick-navigation {
        display: none;
    }

    .cart-button {
        margin-left: auto;
        min-width: 120px;
        height: 35.2px;
    }

    .home-top {
        grid-template-areas: "hero";
        grid-template-columns: 1fr;
    }

    .category-panel,
    .support-panel {
        display: none;
    }

    .hero-panel {
        min-height: 420px;
    }

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

    .feature-card:nth-child(2) {
        border-right: 0;
    }

    .feature-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--storefront-line);
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .container {
        width: calc(100% - 24px);
    }

    .header-main {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        gap: 7.2px;
    }

    .brand-mark {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        font-size: 15px;
    }

    .storefront-search {
        height: 34.4px;
    }

    .storefront-search input {
        padding-inline: 11.2px;
        font-size: 11.2px;
    }

    .storefront-search button,
    .mobile-menu-toggle {
        width: 36.8px;
        height: 36.8px;
    }

    .nav-row {
        height: 43.2px;
    }

    .departments {
        width: auto;
        flex: 1;
    }

    /* The reference keeps only the bag mark in the cart block once there is no room for its text;
       the count and the total stay in the markup for a screen reader and for the wider breakpoints. */
    .cart-button {
        min-width: 43.2px;
        font-size: 0;
    }

    .cart-button::after {
        content: "\1F6CD";
        font-size: 15.2px;
    }

    .page-shell {
        padding-top: 1rem;
    }

    .hero-panel {
        grid-template-columns: 1fr;
        min-height: 560px;
    }

    .hero-copy {
        align-self: start;
        padding: 2rem 1.5rem 0;
        text-align: center;
    }

    .hero-copy h1 {
        font-size: 2rem;
    }

    .hero-copy > p:not(.hero-eyebrow) {
        font-size: 0.82rem;
    }

    .hero-image {
        align-self: end;
        width: min(72%, 280px);
        margin-bottom: 1.5rem;
    }

    .feature-grid,
    .foundation-grid,
    .footer-main {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .feature-card:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--storefront-line);
    }

    .feature-card:last-child {
        border-bottom: 0;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .foundation-section {
        padding: 1.2rem;
    }

    .footer-main {
        gap: 1.6rem;
        padding-block: 2rem;
    }

    /* The stacked footer gives every column the full width, so the address can sit on the same
       line spacing as the paragraphs above it instead of the tighter desktop rhythm. */
    .footer-address-line,
    .site-footer a.footer-address-line {
        margin: 0.35rem 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

.product-actions,
.product-meta > .wishlist-add-form,
.product-meta > .compare-add-form,
.cart-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.product-actions {
    margin-top: auto;
    padding-top: 0.8rem;
}

.product-actions form {
    flex: 1 1 auto;
}

.product-actions button,
.cart-add-form button,
.wishlist-add-form button,
.compare-add-form button,
.cart-update-form button,
.cart-remove-form button,
.wishlist-remove-form button,
.compare-product button {
    min-height: 36px;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cbd1d7;
    border-radius: 0.25rem;
    color: var(--storefront-navy);
    background: #fff;
    font-size: 0.66rem;
    font-weight: 800;
}

.product-actions .cart-add-form button,
.product-meta > .cart-add-form button {
    border-color: var(--storefront-yellow);
    background: var(--storefront-yellow);
}

.product-actions button {
    width: 100%;
}

.product-meta > .cart-add-form,
.product-meta > .wishlist-add-form,
.product-meta > .compare-add-form {
    display: inline-flex;
    align-items: end;
    margin: 0.8rem 0.45rem 0 0;
}

.product-meta > .cart-add-form label {
    display: grid;
    gap: 0.25rem;
    color: var(--storefront-muted);
    font-size: 0.65rem;
    font-weight: 750;
}

.product-meta > .cart-add-form input,
.cart-update-form input {
    width: 72px;
    min-height: 36px;
    padding: 0.4rem;
    border: 1px solid #cbd1d7;
    border-radius: 0.25rem;
}

.cart-page-card,
.selection-page-card,
.comparison-page-card {
    padding: 1.5rem;
    border-radius: 0.35rem;
    background: #fff;
}

.cart-page-card h1,
.selection-page-card h1,
.comparison-page-card h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}

.cart-empty {
    margin-top: 1.25rem;
    padding: 2.5rem 1rem;
    border: 1px dashed #cbd1d7;
    border-radius: 0.35rem;
    text-align: center;
}

.cart-empty p {
    margin-top: 0;
    color: var(--storefront-muted);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

.cart-lines {
    display: grid;
    gap: 0.75rem;
}

.cart-line {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 190px 70px 112px;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.35rem;
}

.cart-line > img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: #f7f7f8;
}

.cart-line > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cart-line-total {
    text-align: right;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.cart-line small,
.selection-card small,
.compare-product small {
    color: var(--storefront-muted);
}

.cart-update-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cart-update-form label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--storefront-muted);
    font-size: 0.75rem;
}

.cart-update-form input,
.cart-update-form button,
.cart-remove-form button {
    height: 40px;
    min-width: 0;
    padding: 0 0.6rem;
    border: 1px solid var(--storefront-line);
    border-radius: 4px;
    background: var(--storefront-card);
    font-size: 0.75rem;
}

.cart-update-form input {
    width: 60px;
    color: var(--storefront-ink);
}

.cart-update-form button {
    flex: 1;
    color: var(--storefront-navy);
    background: var(--storefront-yellow);
}

.cart-remove-form button {
    width: 100%;
}

.cart-remove-form button,
.wishlist-remove-form button,
.compare-product button {
    color: #8b3030;
}

.cart-line-error {
    margin: 0;
    color: #9a3e3e;
    font-size: 0.68rem;
}

.cart-summary {
    position: sticky;
    top: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.35rem;
    background: var(--storefront-card);
}

.cart-summary h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.cart-summary p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--storefront-line);
    font-size: 0.76rem;
}

.cart-summary strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cart-summary .cart-summary-total {
    border-top: 2px solid var(--storefront-navy);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 0.95rem;
}

.cart-summary .cart-checkout-link {
    width: 100%;
    margin-top: 0.75rem;
    text-align: center;
}

.selection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.selection-card {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--storefront-line);
    border-radius: 0.35rem;
}

.selection-card > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #f7f7f8;
}

.selection-card > div,
.compare-product {
    display: grid;
    gap: 0.25rem;
}

.selection-card p {
    margin: 0;
    font-weight: 850;
}

.compare-scroll {
    overflow-x: auto;
}

.compare-scroll:focus-visible {
    outline: 3px solid #005ea8;
    outline-offset: 3px;
}

.compare-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    min-width: 180px;
    padding: 0.8rem;
    border: 1px solid var(--storefront-line);
    text-align: left;
    vertical-align: top;
    font-size: 0.72rem;
}

.compare-table th:first-child {
    min-width: 150px;
    color: var(--storefront-muted);
}

.compare-product img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #f7f7f8;
}

.storefront-flash-error {
    color: #792f2f;
    background: #f8e3e3;
}

.storefront-flash-warning {
    color: #6b5100;
    background: #fff1bd;
}

@media (max-width: 1100px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media (max-width: 1024px) {
    .selection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cart-page-card {
        padding: 1rem;
    }

    .cart-line {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.7rem;
    }

    .cart-line > img {
        width: 64px;
        height: 58px;
    }

    .cart-update-form,
    .cart-remove-form,
    .cart-line > strong {
        grid-column: 1 / -1;
    }

    .cart-update-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cart-update-form label {
        min-width: 0;
    }

    .cart-update-form input {
        flex: 1;
        width: 100%;
    }

}

@media (max-width: 680px) {
    .selection-page-card,
    .comparison-page-card {
        padding: 1rem;
    }

    .selection-grid {
        grid-template-columns: 1fr;
    }

    .product-meta > .cart-add-form,
    .product-meta > .wishlist-add-form,
    .product-meta > .compare-add-form {
        display: flex;
        margin-right: 0;
    }

    .product-meta > .wishlist-add-form button,
    .product-meta > .compare-add-form button {
        width: 100%;
    }
}

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.checkout-card, .checkout-summary, .order-success-card { background: #fff; border: 1px solid #e4e8ed; border-radius: 12px; padding: 28px; }
.checkout-card h1, .order-success-card h1 { margin: 4px 0 24px; }
.checkout-kicker { margin: 0; color: #c68600; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-card, .checkout-summary { min-width: 0; }
.checkout-form { display: grid; gap: 20px; min-width: 0; }
.checkout-form fieldset { border: 1px solid var(--storefront-line); border-radius: 8px; display: grid; gap: 10px; margin: 0; padding: 16px; min-width: 0; }
.checkout-form legend { color: var(--storefront-navy); font-size: .95rem; font-weight: 700; padding: 0 6px; }
.checkout-form select, .checkout-form textarea { background: #fff; border: 1px solid #cbd3dc; border-radius: 6px; min-height: 44px; padding: 8px 10px; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.checkout-form textarea { resize: vertical; font: inherit; }
.checkout-step-number { display: inline-grid; place-items: center; background: #eef3fa; border-radius: 50%; width: 24px; height: 24px; font-size: .78rem; margin-right: 4px; }
.checkout-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.checkout-address-field { display: grid; gap: 6px; min-width: 0; }
.checkout-address-field label { font-size: .84rem; font-weight: 600; }
.checkout-address-link { color: var(--storefront-navy); font-size: .83rem; justify-self: start; text-underline-offset: 3px; }
.checkout-choice { align-items: center; display: flex; gap: 10px; padding: 12px; border: 1px solid var(--storefront-line); border-radius: 6px; cursor: pointer; font-size: .9rem; min-width: 0; }
.checkout-choice span { overflow-wrap: anywhere; min-width: 0; }
.checkout-choice input { accent-color: var(--storefront-navy); flex: 0 0 auto; margin: 0; width: 18px; height: 18px; }
.checkout-choice:has(input:checked) { border-color: var(--storefront-navy); background: #eef3fa; box-shadow: inset 3px 0 var(--storefront-navy); }
.checkout-choice:has(input:focus-visible), .checkout-form select:focus-visible, .checkout-form textarea:focus-visible { outline: 3px solid #6ea4e5; outline-offset: 3px; }
.checkout-payment-warning { background: #fff8e4; border-left: 4px solid #e0a100; color: #654a00; margin: 2px 0 0; padding: 10px 12px; }
.checkout-submit, .cart-checkout-link { background: #f4b400; border: 0; border-radius: 6px; color: #092a53; display: inline-flex; font-weight: 800; justify-content: center; padding: 12px 18px; text-decoration: none; }
.checkout-submit:disabled { cursor: not-allowed; opacity: .5; }
.checkout-submit { background: var(--storefront-yellow); border-radius: 6px; font-weight: 700; min-height: 46px; cursor: pointer; }
.checkout-submit:hover { background: #ffdb65; }
.checkout-submit:focus-visible { outline: 3px solid var(--storefront-navy); outline-offset: 3px; }
.checkout-summary { position: static; }
.checkout-summary h2 { margin-top: 0; }
.checkout-summary-line, .checkout-summary-total, .order-totals p { display: flex; gap: 16px; justify-content: space-between; }
.checkout-summary-line, .checkout-summary-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px; }
.checkout-summary-line > *, .checkout-summary-total > * { min-width: 0; overflow-wrap: anywhere; }
.checkout-summary-line strong, .checkout-summary-total strong { text-align: right; font-variant-numeric: tabular-nums; }
.checkout-summary-products { list-style: none; padding: 0; margin: 0; }
.checkout-summary-product { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, max-content); gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f3; font-size: .86rem; }
.checkout-summary-product img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--storefront-line); border-radius: 6px; background: #fff; padding: 4px; }
.checkout-summary-product-info { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.checkout-summary-product-info small { font-size: .78rem; margin-top: 4px; }
.checkout-summary-product > strong { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.free-shipping-notice { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; background: #fff; border: 1px solid var(--storefront-line); border-radius: 8px; padding: 16px 18px; margin-bottom: 20px; color: var(--storefront-navy); }
.free-shipping-notice-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #fff5d2; }
.free-shipping-notice-content { min-width: 0; }
.free-shipping-notice p { margin: 0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.free-shipping-notice strong { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.free-shipping-notice progress { appearance: none; display: block; width: 100%; height: 4px; margin-top: 10px; border: 0; border-radius: 4px; overflow: hidden; background: #edf0f3; color: var(--storefront-yellow); }
.free-shipping-notice progress::-webkit-progress-bar { background: #edf0f3; border-radius: 4px; }
.free-shipping-notice progress::-webkit-progress-value { background: var(--storefront-yellow); border-radius: 4px; }
.free-shipping-notice progress::-moz-progress-bar { background: var(--storefront-yellow); border-radius: 4px; }
.checkout-summary-line { border-bottom: 1px solid #edf0f3; padding: 10px 0; }
.checkout-summary-total { border-top: 2px solid #092a53; font-size: 1.08rem; margin-top: 16px; padding-top: 16px; }
.checkout-summary small { color: #66717d; display: block; margin-top: 14px; }
.cart-checkout-link { margin-top: 16px; width: 100%; }
.order-success-card { text-align: center; }
/* Payment recovery: one customer-facing summary, with the existing protected actions. */
.payment-status-page { min-height: 0; }
.payment-status-card { max-width: 640px; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--storefront-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgb(9 42 83 / 6%); text-align: left; }
.payment-status-header h1 { margin: 8px 0 12px; color: var(--storefront-navy); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.payment-order-number { margin: 0 0 16px; color: var(--storefront-muted); font-size: .85rem; overflow-wrap: anywhere; }
.payment-order-number strong { color: var(--storefront-ink); }
.payment-status-badge { display: inline-flex; padding: 7px 12px; border: 1px solid var(--storefront-line); border-radius: 999px; color: var(--storefront-navy); background: #f1f5f9; font-size: .82rem; font-weight: 700; }
.payment-status-badge.is-awaiting { background: #fff5d2; border-color: #f2dd9b; }
.payment-status-totals { display: grid; gap: 14px; margin: 24px 0; padding: 20px 0; border-block: 1px solid var(--storefront-line); }
.payment-status-totals > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: baseline; }
.payment-status-totals dt { color: var(--storefront-muted); font-size: .86rem; }
.payment-status-totals dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.payment-status-totals .payment-total { padding-top: 14px; border-top: 1px solid var(--storefront-line); }
.payment-total dt, .payment-total dd { color: var(--storefront-navy); font-size: 1.15rem; font-weight: 750; }
.payment-status-hint { color: var(--storefront-muted); font-size: .88rem; line-height: 1.6; margin: 0 0 20px; }
.payment-status-actions { display: grid; gap: 12px; }
.payment-status-actions form { min-width: 0; margin: 0; }
.payment-status-secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-status-secondary-actions form { flex: 1 1 180px; }
.payment-action-primary, .payment-action-secondary { appearance: none; display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.payment-action-primary { color: var(--storefront-navy); background: var(--storefront-yellow); }
.payment-action-secondary { color: var(--storefront-navy); background: #fff; border-color: var(--storefront-line); }
.payment-action-danger { color: #a02b32; border-color: #edc9cc; }
.payment-action-primary:hover, .order-payment-link:hover { filter: brightness(.96); }
.payment-action-secondary:hover { background: #f7f9fb; }
.payment-continue-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; margin: 22px auto 0; color: var(--storefront-muted); font-size: .85rem; }
.payment-continue-link:hover { color: var(--storefront-navy); }
.payment-action-primary:focus-visible, .payment-action-secondary:focus-visible, .payment-continue-link:focus-visible, .order-payment-link:focus-visible { outline: 3px solid #6ea4e5; outline-offset: 3px; }

/* Provider form: CSS only; card values travel directly to the signed action URL. */
.payment-gateway-page { min-height: 0; }
.payment-gateway-card { max-width: 960px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--storefront-line); border-radius: 14px; background: var(--storefront-card); box-shadow: 0 8px 24px rgb(9 42 83 / 6%); }
.payment-gateway-header { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--storefront-line); }
.payment-gateway-header > div { min-width: 0; }
.payment-gateway-header h1 { margin: 0 0 4px; color: var(--storefront-navy); font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.25; }
.payment-gateway-header p { margin: 0; color: var(--storefront-muted); font-size: .85rem; overflow-wrap: anywhere; }
.payment-security-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 12px; color: var(--storefront-navy); background: #eef3fa; }
.payment-test-notice { margin: 18px 0 0; padding: 10px 14px; border: 1px solid #ebd48c; border-radius: 8px; color: #654a00; background: #fff8e4; font-size: .83rem; }
.payment-gateway-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 28px; margin-top: 24px; }
.payment-gateway-grid > * { min-width: 0; }
.payment-gateway-card h2 { margin: 0; color: var(--storefront-navy); font-size: 1rem; font-weight: 700; }
.payment-card-fields { display: grid; gap: 16px; }
.payment-card-fields p { display: grid; gap: 6px; min-width: 0; margin: 0; }
.payment-card-fields label { color: var(--storefront-ink); font-size: .83rem; font-weight: 650; }
.payment-card-fields input { appearance: none; width: 100%; min-width: 0; height: 48px; padding: 10px 12px; border: 1px solid #cbd3dc; border-radius: 8px; box-shadow: none; color: var(--storefront-ink); background: var(--storefront-card); font: inherit; font-size: 1rem; }
.payment-card-fields input:focus-visible { border-color: var(--storefront-navy); outline: 3px solid #6ea4e5; outline-offset: 2px; }
.payment-card-expiry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.payment-card-hint { margin: 16px 0; color: var(--storefront-muted); font-size: .78rem; line-height: 1.5; }
.payment-card-submit { appearance: none; width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 8px; box-shadow: none; color: var(--storefront-navy); background: var(--storefront-yellow); font: inherit; font-weight: 750; cursor: pointer; }
.payment-card-submit:hover { filter: brightness(.96); }
.payment-card-submit:focus-visible, .payment-back-link:focus-visible, .information-link:focus-visible { outline: 3px solid var(--storefront-navy); outline-offset: 3px; }
.payment-gateway-summary { padding: 22px; border: 1px solid var(--storefront-line); border-radius: 10px; background: #f7f9fb; overflow-wrap: anywhere; }
.payment-summary-order { margin: 10px 0 20px; color: var(--storefront-muted); font-size: .82rem; }
.payment-summary-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--storefront-line); }
.payment-summary-total strong { color: var(--storefront-navy); font-size: clamp(1.1rem, 2vw, 1.4rem); text-align: right; font-variant-numeric: tabular-nums; }
.payment-summary-caption { margin: 6px 0 20px; color: var(--storefront-muted); font-size: .78rem; }
.payment-back-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--storefront-navy); font-size: .84rem; text-decoration: underline; text-underline-offset: 4px; }
.payment-back-link:hover { color: var(--storefront-navy-light); }
@media (max-width: 680px) {
    .payment-gateway-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
    .payment-gateway-summary { padding: 16px; }
    .payment-card-expiry { gap: 8px; }
    .payment-card-expiry label { font-size: .75rem; }
    .payment-card-fields input { padding-inline: 10px; }
}

.catalog-price-range {
    min-width: 0;
    margin: 0.5rem 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.catalog-filters .catalog-price-range + .catalog-filter-heading {
    margin-top: 0.35rem;
}

.catalog-price-range legend {
    padding: 0;
    margin-bottom: 0.6rem;
    color: var(--storefront-navy);
}

.catalog-price-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.catalog-price-inputs label { display: grid; gap: 0.3rem; }
.catalog-price-inputs input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0.4rem;
    border: 1px solid #cfd4da;
    border-radius: 0.3rem;
    background: #fff;
    font-size: 0.8rem;
}

.catalog-price-sliders {
    position: relative;
    height: 44px;
    margin-top: 0.5rem;
    --price-from: 0%;
    --price-to: 100%;
}

.catalog-price-sliders::before {
    content: '';
    position: absolute;
    inset: 21px 0;
    border-radius: 4px;
    background: linear-gradient(to right, #dce1e6 var(--price-from), var(--storefront-yellow) var(--price-from), var(--storefront-yellow) var(--price-to), #dce1e6 var(--price-to));
}

.catalog-price-sliders input {
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    pointer-events: none;
}
.catalog-price-sliders input::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--storefront-navy);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px #0002;
    cursor: grab;
    pointer-events: auto;
}
.catalog-price-sliders input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--storefront-navy);
    border-radius: 50%;
    background: #fff;
    cursor: grab;
    pointer-events: auto;
}
.catalog-price-sliders input:focus-visible { outline: 2px solid var(--storefront-navy); outline-offset: 2px; }
.order-success-mark { align-items: center; background: #e7f7ed; border-radius: 50%; color: #23854a; display: inline-flex; font-size: 2rem; height: 64px; justify-content: center; width: 64px; }
.order-success-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); margin: 30px 0; text-align: left; }
.order-line { align-items: center; border-bottom: 1px solid #e7ebef; display: flex; justify-content: space-between; padding: 14px 0; }
.order-line small { color: #66717d; display: block; margin-top: 4px; }
.order-totals { background: #f7f9fb; border-radius: 8px; padding: 18px; }
.order-totals h2 { margin-top: 0; }
.order-totals .grand { border-top: 2px solid #092a53; padding-top: 12px; }

@media (max-width: 1024px) {
    .checkout-grid, .order-success-grid { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
}

@media (max-width: 680px) {
    .checkout-card, .checkout-summary, .order-success-card { padding: 18px; }
    .free-shipping-notice { padding: 12px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr); margin-bottom: 16px; }
    .free-shipping-notice-icon { width: 32px; height: 32px; }
    .free-shipping-notice p { font-size: .84rem; }
    .checkout-form fieldset { padding: 14px; }
    .checkout-address-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .checkout-summary-product { grid-template-columns: 40px minmax(0, 1fr) minmax(0, max-content); gap: 8px; }
    .checkout-summary-product img { width: 40px; height: 40px; }
    .order-line { align-items: flex-start; gap: 12px; }
}
/* Typed CMS blocks and published content */
/* Published blog cards. The blog index still uses the generic card grid. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.cms-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem }
.cms-blog-grid article { padding: 1rem; border: 1px solid #dce4ed; border-radius: 0.7rem; background: #fff }
.content-page { padding-block: 2rem 4rem; max-width: 70rem }
.content-page article { max-width: 48rem }
.content-body { white-space: normal; line-height: 1.7; overflow-wrap: anywhere }
.information-page .generic-card { min-width: 0; }
.information-page .page-title { overflow-wrap: anywhere; }
.information-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.information-link { display: block; height: 100%; padding: 19.2px; border: 1px solid var(--storefront-line); border-radius: 5.6px; color: var(--storefront-navy); font-weight: 650; overflow-wrap: anywhere; }
.information-link:hover { border-color: var(--storefront-navy); background: #f7f9fb; }
@media (max-width: 1024px) { .information-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
    .information-links { grid-template-columns: minmax(0, 1fr); }
    .information-page .generic-card { padding: 18px; }
}
.content-lead { font-size: 1.2rem }

/* The blog, as `tema/blog.html` and `tema/blog-welcome.html` draw it.

   The reference puts both pages inside one white card — the 24px padding and 5.6px radius its own
   `.generic-card` has — with a 27.2px title at the top of it. The archive's cards are a three
   column grid at a 16px gap, each with a 176px cover block and 17.6px of padding around the title
   and the summary; the article is the same card held to 1050px with a 360px cover beneath the
   title and the paragraphs under it. Those are the reference's numbers and they are the ones here,
   and the reference's own two breakpoints are the repository's: three columns, two from 1024px and
   one from 680px.

   The cover blocks are the reference's placeholder gradient rather than an image, because a post
   with no picture is the normal case in both the reference theme and this store. */
.generic-card {
    padding: 24px;
    border-radius: 5.6px;
    background: var(--storefront-card);
}

.page-title {
    margin: 0 0 19.2px;
    font-size: 27.2px;
    line-height: 1.2;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.blog-post-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--storefront-line);
    border-radius: 5.6px;
    color: inherit;
    background: var(--storefront-card);
}

.blog-post-card:hover {
    border-color: var(--storefront-navy);
}

/* The reference's cover block, which is a gradient and not a picture. */
.blog-post-cover {
    display: block;
    height: 176px;
    background: linear-gradient(135deg, #113768, #e4ebf4);
}

.blog-post-cover img,
.blog-post-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.blog-post-body {
    display: block;
    padding: 17.6px;
}

.blog-post-body h2 {
    margin: 0 0 6.4px;
    font-size: 16px;
    line-height: 1.3;
}

.blog-post-body p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--storefront-muted);
    font-size: 12.8px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 48px 8px;
    color: var(--storefront-muted);
    font-size: 0.85rem;
    text-align: center;
}

.blog-listing .pagination {
    margin-top: 24px;
}

/* The article card: the reference's 1050px measure, held to the middle of the container. */
.blog-article {
    max-width: 1050px;
    margin-inline: auto;
}

.blog-post-hero {
    height: 360px;
    margin-bottom: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #113768, #e4ebf4);
}

/* A readable line length. The card is the reference's width, but a paragraph running the whole of
   it is not a line a person can find the end of, so the text holds its own measure inside it. */
.blog-lead,
.blog-prose {
    max-width: 68ch;
    overflow-wrap: anywhere;
}

.blog-lead {
    margin: 0 0 16px;
    color: #3f474f;
    font-size: 15.2px;
    font-weight: 650;
    line-height: 1.6;
}

.blog-prose {
    color: #4a545e;
    font-size: 14.4px;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .blog-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .generic-card {
        padding: 17.6px;
    }

    .page-title {
        margin-bottom: 14.4px;
        font-size: 22.4px;
    }

    .blog-list {
        grid-template-columns: 1fr;
    }

    .blog-post-cover {
        height: 152px;
    }

    .blog-post-hero {
        height: 176px;
        margin-bottom: 19.2px;
    }
}

/* ==========================================================================================
   Homepage composition.

   These rules are the storefront theme's own homepage, taken from `tema/index.html` and
   `tema/assets/css/style.css` rather than invented: one notice band above the header, an upper row
   of category panel / hero / top sellers, a four-up promo grid, a five-up product grid, a features
   strip, the split builder's product list beside one big promotional panel, a ten-tile brand
   shelf, a tabbed product block, a marquee and a closing testimonials-plus-blog row. The markup in
   templates/storefront/home carries the theme's class names so the two stay recognisable as the
   same page.

   Every measurement below is the reference's own, expressed in rem at the theme's 16px root: the
   280px side columns and 16px gutter of the upper row, the 460px height the three columns share,
   the five and four column grids, the 1.2fr/1fr split, the ten-tile shelf, and the 1fr/1.5fr
   closing row. The three breakpoints are the theme's own — 1300px, 1024px, 680px — and the
   composition steps down at exactly those widths.

   Two deliberate departures from the reference are marked where they occur, and only those two.
   ========================================================================================== */

/* The notice band.

   The theme's only announcement: one dark strip at the very top of the page, above the header. The
   CMS announcement section feeds this same strip, so an administrator's text replaces the store's
   default line rather than becoming a second band. */
.notice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3rem;
    padding-inline: 4rem;
    color: #fff;
    background: var(--storefront-notice);
    font-size: 0.9rem;
    font-weight: 600;
}

.notice-text {
    margin: 0;
    letter-spacing: 0.1px;
}

.notice-close {
    position: absolute;
    top: 0;
    right: 0.35rem;
    width: 2rem;
    height: 2.3rem;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
}

/* Two identical groups translate by exactly one group, including its separators. */
.notice-ticker { overflow: hidden; max-width: 100%; }
.notice-ticker-viewport { width: 100%; min-width: 0; overflow: hidden; }
.notice-ticker-track { display: flex; width: max-content; animation: notice-ticker-scroll 45s linear infinite; }
.notice-ticker-group { display: flex; align-items: center; flex-shrink: 0; justify-content: space-around; min-width: 100vw; }
.notice-ticker-run { display: flex; align-items: center; flex-shrink: 0; }
.notice-ticker-item { flex-shrink: 0; white-space: nowrap; }
.notice-ticker-separator { flex-shrink: 0; margin-inline: 1.5rem; font-size: .55em; }
@keyframes notice-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .notice-ticker-track { animation: none; width: 100%; }
    .notice-ticker-group { flex-wrap: wrap; justify-content: center; min-width: 0; width: 100%; gap: .5rem; }
    .notice-ticker-group[aria-hidden="true"], .notice-ticker-run[aria-hidden="true"] { display: none; }
    .notice-ticker-run { flex-wrap: wrap; justify-content: center; max-width: 100%; }
    .notice-ticker-item { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
    .notice-ticker-separator { margin-inline: .25rem; }
    .notice-ticker { height: auto; min-height: 2.3rem; padding-block: .5rem; }
}

.campaign-popup {
    width: min(520px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    margin: auto;
    border: 0;
    border-radius: 16px;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--storefront-navy);
    background: #fff;
    box-shadow: 0 24px 80px #071e3c55;
}
.campaign-popup::backdrop { background: #071e3c99; }
.campaign-popup picture { display: block; }
.campaign-popup-image { display: block; width: 100%; height: auto; }
.campaign-popup-close {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--storefront-line); border-radius: 50%;
    background: #fff; color: var(--storefront-navy); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.campaign-popup-content { padding: 28px; overflow-wrap: anywhere; }
.campaign-popup-content h2 { margin: 0 28px 12px 0; font-size: 1.6rem; line-height: 1.25; }
.campaign-popup-content p { margin: 0 0 20px; line-height: 1.6; white-space: pre-line; }
.campaign-popup-cta { display: flex; justify-content: center; text-align: center; white-space: normal; }
.campaign-popup-preference { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .875rem; }
.campaign-popup-preference input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--storefront-navy); }
.campaign-popup :focus-visible { outline: 3px solid var(--storefront-yellow); outline-offset: 3px; }
.campaign-popup-title:focus { outline: none; }
@media (max-width: 680px) {
    .campaign-popup-content { padding: 24px 18px; }
    .campaign-popup-content h2 { font-size: 1.35rem; }
}

/* The white card the upper row's side columns are.

   The reference gives the category panel and the top-sellers column the same frame — white paper,
   a small radius, and the content clipped to the panel's own height — and gives the hero a dark
   one. Without this the two side columns had no frame of their own and rendered as bare rows on
   the page background, which is a different design from the one the reference draws. */
.panel {
    border-radius: 4.8px;
    background: var(--storefront-card);
    overflow: hidden;
}

/* The upper row.

   `home-top` alone keeps the three named areas the default welcome panel uses; the `home-top-N`
   classes are what the CMS composition adds, and they drop an area the administrator has not
   filled instead of leaving an empty column beside it. */
.home-top-1,
.home-top-2,
.home-top-3 {
    grid-template-areas: none;
}

.home-top-1 {
    grid-template-columns: minmax(0, 1fr);
}

.home-top-2 {
    grid-template-columns: minmax(0, 1fr) 280px;
}

.home-top-3 {
    grid-template-columns: 280px minmax(0, 1fr) 280px;
}

.home-top-1 > *,
.home-top-2 > *,
.home-top-3 > * {
    grid-area: auto;
}

.home-top-1 .category-panel,
.home-top-1 .hero,
.home-top-1 .top-sellers,
.home-top-2 .category-panel,
.home-top-2 .hero {
    grid-column: 1;
}

.home-top-3 .category-panel {
    grid-column: 1;
}

.home-top-3 .hero {
    grid-column: 2;
}

.home-top-2 .top-sellers {
    grid-column: 2;
}

.home-top-3 .top-sellers {
    grid-column: 3;
}

/* The category panel's rows.

   The panel keeps the height the reference gives it — the same 460px the hero beside it is, which is
   what lines the three columns of the upper band up — and its rows divide that height between them
   instead of each claiming a fixed 54.4px of it.

   A fixed row height only ever fills a fixed panel when the row count divides it exactly, and this
   panel is seeded with nine categories: nine rows of 54.4px is 489.6px, so `overflow: hidden` cut
   the ninth row in half and the panel read as a list with something broken at the bottom of it. The
   rows now share the panel, so however many categories there are the ones on screen are whole ones,
   and the panel scrolls — rather than clipping — once there are more rows than it can show at their
   smallest usable height. */
.category-panel {
    display: flex;
    flex-direction: column;
    height: 460px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cat-row {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: 30.4px minmax(0, 1fr) 14.4px;
    align-items: center;
    min-height: 2.8rem;
    padding: 0 1rem;
    border-bottom: 1px solid #e4e5e7;
    color: #666;
    font-size: 13.6px;
}

.cat-row:last-child {
    border-bottom: 0;
}

.cat-row:hover {
    color: #1c3555;
    background: #fafafa;
}

.cat-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cat-icon {
    color: #7b838a;
    font-size: 17.6px;
    text-align: center;
}

.cat-arrow {
    color: #bec2c5;
    font-size: 14.4px;
    text-align: right;
}

/* The hero slider.

   Every slide is absolutely stacked in the same frame and only the active one is opaque, which is
   what lets the cross-fade work without the layout moving. A hidden slide is aria-hidden as well,
   so assistive technology is told the same thing the eye is. */
.hero {
    position: relative;
    height: 460px;
    overflow: hidden;
    border-radius: 4.8px;
    color: #fff;
    background: #050505;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    background: #050505;
    transition: opacity 0.5s;
}

.hero-slide.active {
    z-index: 1;
    opacity: 1;
}

.hero-picture {
    display: contents;
}

/* The photograph is inset from both sides rather than filling the frame: the theme leaves a dark
   margin on the left and a narrower one on the right, which is what gives the hero its asymmetry. */
.hero-photo {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 82%;
    height: 70%;
    object-fit: cover;
    object-position: center 52%;
}

.hero-slide.alt .hero-photo {
    filter: hue-rotate(22deg) saturate(0.75);
}

/* A slide that is nothing but a photograph. The inset above exists so the headline has somewhere
   to sit; with nothing to sit over the picture it would read as an empty black band around the
   banner. The photograph therefore fills the frame, and `cover` crops it rather than stretching
   it, so a banner of any ratio still reaches every edge of the slide. */
.hero-slide.image-only .hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The theme shifts the second slide's photograph so three slides of one campaign do not look like
   one photograph repeated. An uploaded banner is artwork an administrator chose, so its colours are
   published as uploaded and the image-only slide is not tinted either. */
.hero-slide.image-only.alt .hero-photo {
    filter: none;
}

/* The theme's corner tab marks a composition that has words over its picture. On a slide that is
   nothing but an uploaded banner it would sit on the artwork as a stray chip of yellow, so the
   image-only slide carries no marker and its edges stay the banner's own. Two classes against one
   keeps this over the bare `.hero-marker` rule above. */
.hero-slide.image-only .hero-marker {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 36px;
    text-align: center;
}

/* The reference sets `opacity: 0` here, which hides the very label it defines; a field an
   administrator is asked to fill in has to be visible to be worth filling in, so the label keeps
   the theme's colour and size and simply shows. */
.hero-label {
    display: inline-block;
    margin-bottom: 6.4px;
    color: #ffdf57;
    font-size: 11.2px;
    line-height: 1.2;
}

.hero-title {
    max-width: 608px;
    margin: 0 auto 33.6px;
    font-size: 40px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.9px;
}

.price-pill {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    padding: 6.4px 12px;
    border-radius: 4px;
    color: #4f555b;
    background: #fff;
    box-shadow: 0 4px 9.6px rgb(0 0 0 / 27%);
    font-size: 12.8px;
}

.price-pill strong {
    color: #171b20;
    font-size: 16px;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.hero-actions .shop-now {
    display: inline-flex;
    padding: 15px 31px;
    border-radius: 4px;
    color: #173459;
    background: var(--storefront-yellow);
    font-size: 15px;
    font-weight: 500;
}

.hero-actions .learn-more {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The theme's yellow tab in the corner of the hero frame. */
.hero-marker,
.home-top .hero-marker {
    position: absolute;
    z-index: 3;
    top: 0;
    right: auto;
    left: 0;
    width: 12px;
    height: 4px;
    background: var(--storefront-yellow);
}

.slider-controls {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    right: 29.6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4px;
}

.slider-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #555;
    background: #e6e6e6;
    font-size: 24.8px;
    line-height: 1;
}

.slider-btn.prev {
    color: #222;
    background: #777;
}

.slide-count {
    font-size: 14.4px;
    font-weight: 700;
}

/* The top-sellers column. */
.top-sellers {
    display: flex;
    flex-direction: column;
    height: 460px;
    padding: 21.6px 21.6px 0;
    overflow: hidden;
}

.top-sellers h3 {
    margin: 8.8px 0 16.8px;
    font-size: 16.8px;
    font-weight: 750;
    flex: 0 0 auto;
}

.seller {
    display: grid;
    grid-template-columns: 33.6px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 4.8px;
    height: 82.4px;
    border-bottom: 1px solid #e2e3e5;
}

/* Five ranked rows are more than the theme's 460px panel holds once the heading above them is
   paid for, and the panel is not getting taller. So the rows keep the height the theme gives them
   and give up only the difference when there are more of them than fit: a short list is drawn at
   82.4px exactly as the theme draws it, and the fifth product is whole rather than cut off by the
   panel's own edge. The heading never gives up anything — it is the one row that must not. */
.top-sellers .seller {
    min-height: 0;
    flex-shrink: 1;
}

.seller:last-child {
    border-bottom: 0;
}

.rank {
    color: #fff;
    font-size: 37.6px;
    font-weight: 300;
    line-height: 1;
    -webkit-text-stroke: 1.5px #8c9297;
}

.seller-body {
    min-width: 0;
}

.seller-name {
    display: block;
    overflow: hidden;
    color: #6b7075;
    font-size: 12.8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.seller-price {
    display: block;
    margin-top: 4px;
    font-size: 13.6px;
    font-weight: 750;
}

.seller img {
    width: 49.6px;
    height: 49.6px;
    border-radius: 4.8px;
    background: #fafafa;
    object-fit: contain;
}

/* The white card every full-width block sits in. */
.home-section {
    margin-top: 22.4px;
}

.section-card {
    padding: 22.4px;
    border-radius: 5.6px;
    background: var(--storefront-card);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 17.6px;
}

.section-head h2 {
    margin: 0;
    font-size: 22.4px;
}

.section-head p {
    margin: 4px 0 0;
    color: #7b8288;
    font-size: 0.8rem;
}

.see-all {
    color: #304a6a;
    font-size: 0.8rem;
    font-weight: 700;
}

/* The product grid. The theme runs five columns on a desktop and steps down at its own two
   breakpoints; the catalogue pages keep their own three-column rule. */
.home-section .product-grid,
.testimonial-blog .product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12.8px;
}

/* The promotional row. */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.promo-card {
    display: block;
    overflow: hidden;
    border-radius: 5.6px;
    background: var(--storefront-card);
}

.promo-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* The trust strip. */
.features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 5.6px;
    background: var(--storefront-card);
}

.feature {
    display: flex;
    align-items: center;
    gap: 12.8px;
    padding: 20.8px;
    border-right: 1px solid #e2e3e5;
}

.feature:last-child {
    border-right: 0;
}

.feature-ico {
    font-size: 24.8px;
}

.feature-copy b {
    display: block;
}

.feature-copy span {
    display: block;
    color: #81868b;
    font-size: 10.4px;
}

/* The split builder: a three-product list beside one large promotional panel. */
.split-builder {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
}

/* The theme pins this grid to three columns with an inline style, which no breakpoint can reach;
   the class carries the same three columns down to the phone width, where they step to the theme's
   own two-column product grid. */
.split-builder .split-builder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.big-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
    padding: 35.2px;
    overflow: hidden;
    border-radius: 5.6px;
    color: #fff;
    background: #10294e;
}

.big-promo::after {
    content: "";
    position: absolute;
    top: -32px;
    right: -56px;
    width: 272px;
    height: 272px;
    border-radius: 50%;
    background: #173b70;
}

.big-promo > * {
    position: relative;
    z-index: 1;
}

.big-promo > span {
    color: #bcd2ec;
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.big-promo h2 {
    margin: 9.6px 0;
    font-size: 30.4px;
    line-height: 1.12;
}

.big-promo p {
    margin: 0 0 19.2px;
    color: #dbe6f5;
    font-size: 0.85rem;
}

.big-promo-cta {
    width: max-content;
}

/* The brand shelf. */
.brand-strip {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6.4px;
}

.brand-strip .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65.6px;
    padding: 0 4px;
    overflow: hidden;
    border: 1px solid #e5e6e8;
    border-radius: 4px;
    color: #6d747a;
    background: #fafafa;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
}

/* The tabbed product block. */
.top-products-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.tab-btn {
    padding: 6.4px 11.2px;
    border: 1px solid #d9dce0;
    border-radius: 4px;
    color: inherit;
    background: #fff;
    font-size: 0.8rem;
}

.tab-btn.active {
    border-color: var(--storefront-navy);
    color: #fff;
    background: var(--storefront-navy);
}

/* A tab whose own source has nothing behind it. The grid's own row box is kept, so switching to an
   empty tab does not pull the section up under the visitor's cursor. */
.product-grid-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 48px 16px;
    border: 1px dashed #cbd1d7;
    border-radius: 5.6px;
    color: var(--storefront-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* The marquee band. */
.marquee {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin-top: 1.5rem;
    overflow: hidden;
    color: #fff;
    background: var(--storefront-navy-light);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
}
.marquee-track { display: flex; width: max-content; animation: storefront-ticker 80s linear infinite; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; gap: 28px; min-width: 100vw; min-height: 52px; padding: 0 28px 0 0; }
.marquee-item { flex-shrink: 0; white-space: nowrap; }
.marquee .dot { flex-shrink: 0; font-size: .6em; color: var(--storefront-yellow); }
@keyframes storefront-ticker {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee { height: auto; }
    .marquee-track { width: 100%; animation: none; }
    .marquee-group { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; gap: 12px 20px; padding: 18px; }
    .marquee-group[aria-hidden="true"], .marquee-item[aria-hidden="true"] { display: none; }
    .marquee-item { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .marquee-item[aria-hidden="true"] + .dot { display: none; }
}

/* The closing row: quotes beside the blog feed. */
.testimonial-blog {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
}

/* One of the two panels missing must not leave half a row of blank white behind it. */
.testimonial-blog-1 {
    grid-template-columns: minmax(0, 1fr);
}

.quote {
    padding: 22.4px;
    border-radius: 5.6px;
    background: var(--storefront-card);
}

.quote h2 {
    margin: 0 0 11.2px;
    font-size: 22.4px;
}

.quote-item {
    margin: 0;
    padding: 12.8px 0 0;
    border-top: 1px solid #e2e3e5;
}

.quote-item + .quote-item {
    margin-top: 12.8px;
}

.quote-item blockquote {
    margin: 0;
}

.quote-item p {
    margin: 0;
    color: #3f474f;
    font-size: 0.95rem;
    line-height: 1.55;
}

.quote-item figcaption {
    margin-top: 8px;
    color: var(--storefront-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11.2px;
}

.blog-card {
    display: block;
    overflow: hidden;
    border: 1px solid #e4e5e7;
    border-radius: 5.6px;
    color: inherit;
    background: var(--storefront-card);
}

.blog-cover {
    display: block;
    height: 112px;
    background: linear-gradient(135deg, #193f71, #c9d9ef);
}

.blog-cover-image {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.blog-card .content {
    display: block;
    padding: 12.8px;
}

.blog-card h3 {
    margin: 0 0 6.4px;
    font-size: 0.9rem;
}

.blog-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #777;
    font-size: 10.4px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* The homepage's product card.

   The theme gives a homepage card its own, tighter shape than the catalogue's. Everything here is
   scoped to `.home-product-card`, which only the homepage's own grids render, so a catalogue page
   keeps `components/product_card.html.twig` and the rules that go with it. The card is still the
   real record: the real price, the real brand, the real product, the real cart and wishlist posts. */
.home-product-card {
    border-radius: 4px;
}

.home-product-card .product-thumb {
    height: 176px;
}

.home-product-card .product-info {
    padding: 13.6px;
}

.home-product-card .product-brand {
    margin: 0;
    color: #7d858c;
    font-size: 9.6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.home-product-card .product-name {
    margin: 4px 0 5.6px;
    font-size: 12.8px;
    font-weight: 700;
}

.home-product-card .product-price {
    margin: 0;
    font-size: 14.4px;
    font-weight: 800;
}

.home-product-card .product-old {
    margin-left: 4.8px;
    color: #999;
    font-size: 10.4px;
    text-decoration: line-through;
}

.home-product-card .badge {
    position: absolute;
    top: 8.8px;
    left: 8.8px;
    padding: 4px 5.6px;
    border-radius: 4px;
    color: #5277b2;
    background: #d9e6ff;
    font-size: 9.6px;
}

.home-product-card .product-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 5.6px;
    margin-top: auto;
    padding-top: 11.2px;
}

.home-product-card .product-actions form {
    flex: 0 0 auto;
}

.home-product-card .cart-add-form {
    flex: 1 1 auto;
}

.home-product-card .product-actions button,
.home-product-card .btn-yellow,
.home-product-card .btn-ghost {
    min-height: 0;
    width: auto;
    padding: 7.2px 9.6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

.home-product-card .cart-add-form .btn-yellow {
    width: 100%;
    border: 0;
    color: #0d294e;
    background: var(--storefront-yellow);
}

.home-product-card .btn-ghost {
    border: 1px solid #d9dbde;
    color: inherit;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1;
}

/* The control that stands in for the add-to-cart when there is nothing to add.

   Both cards size their actions row from the first control, so a product with no stock, or no price
   at all, is given a disabled control of the same size rather than an empty slot. The yellow is
   dropped as well as the interactivity: a yellow button that cannot be pressed is the one thing in
   the row that still looks buyable. */
.product-actions > .is-disabled,
.home-product-card .product-actions > .is-disabled {
    flex: 1 1 auto;
    border: 0;
    color: #6f767e;
    background: #eceef0;
    cursor: not-allowed;
}

.home-product-card .product-actions > .is-disabled {
    width: 100%;
}

/* The theme's two upper breakpoints, and the mobile one, applied to the homepage composition. */
@media (min-width: 1301px) {
    .notice,
    .notice-close {
        height: 2.4rem;
    }

    /* The reference's second slide composition: content to the left over a full-bleed
       photograph, with two calls to action instead of an offer pill. */
    .hero-slide.alt .hero-photo {
        filter: none;
    }

    .hero-slide.mobile-feature {
        background: #bd875c;
    }

    .hero-slide.mobile-feature .hero-photo {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-slide.mobile-feature .hero-content {
        padding-top: 172.8px;
        padding-right: 120px;
        padding-left: 32px;
        text-align: left;
    }

    .hero-slide.mobile-feature .hero-label {
        margin-bottom: 24px;
        padding: 7px 12px;
        border-radius: 4px;
        color: #2868c8;
        background: #eef2f7;
        font-size: 13px;
    }

    .hero-slide.mobile-feature .hero-title {
        max-width: 760px;
        margin: 0;
        font-size: 39px;
        letter-spacing: -1.5px;
        text-align: left;
    }

    .hero-slide.mobile-feature .hero-actions {
        justify-content: flex-start;
        gap: 30px;
        margin-top: 38.4px;
    }

    .hero-slide.mobile-feature .hero-actions .shop-now {
        padding: 13px 29.6px;
    }

    .top-sellers {
        padding: 21.6px 2rem 0;
    }

    .top-sellers h3 {
        margin-bottom: 4.8px;
    }
}

@media (max-width: 1300px) {
    .home-top-2 {
        grid-template-columns: minmax(0, 1fr) 224px;
    }

    .home-top-3 {
        grid-template-columns: 224px minmax(0, 1fr) 224px;
    }

    .category-panel,
    .hero,
    .top-sellers {
        height: 400px;
    }

    /* The tablet panel is 400px, so nine seeded rows share it at 44.4px each. The floor is below
       that rather than at the desktop row height, because a floor above it would push the ninth row
       back out of the panel and reintroduce the cut row on a laptop. */
    .cat-row {
        min-height: 2.5rem;
    }

    .hero-title {
        font-size: 32px;
    }

    .seller {
        height: 70.4px;
    }

    .home-section .product-grid,
    .testimonial-blog .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .home-top-2,
    .home-top-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-top-1 .category-panel,
    .home-top-2 .category-panel,
    .home-top-2 .hero,
    .home-top-2 .top-sellers,
    .home-top-3 .category-panel,
    .home-top-3 .hero,
    .home-top-3 .top-sellers {
        grid-column: 1;
    }

    .home-top-3 .category-panel,
    .home-top-3 .top-sellers {
        display: none;
    }

    .hero {
        height: 416px;
    }

    .home-section .product-grid,
    .testimonial-blog .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .split-builder {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .testimonial-blog,
    .testimonial-blog-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The reference leaves this grid at three columns on a tablet and at three on a phone, where
       three blog cards in a row cannot be read; it steps down with everything else. */
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .notice {
        height: auto;
        min-height: 2rem;
        padding: 0.5rem 2.75rem 0.5rem 1rem;
        text-align: center;
    }

    .notice-text {
        font-size: 0.7rem;
        overflow-wrap: anywhere;
    }

    .notice-close {
        top: 50%;
        transform: translateY(-50%);
    }

    .hero {
        display: grid;
        height: auto;
    }

    .hero-slide {
        position: relative;
        display: none;
        grid-area: 1 / 1;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        pointer-events: none;
    }

    .hero-slide.active {
        display: flex;
        pointer-events: auto;
    }

    .hero-picture {
        display: block;
        width: 100%;
        min-height: 136px;
        aspect-ratio: var(--mobile-hero-ratio, 1);
        flex-shrink: 0;
    }

    .hero-content {
        padding: 1rem 3.5rem 1.25rem 1rem;
        overflow-wrap: anywhere;
    }

    .hero-slide.image-only .hero-content {
        display: none;
    }

    .hero-title {
        padding: 0;
        margin-bottom: 20px;
        font-size: 25.6px;
    }

    .hero .hero-slide .hero-photo {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .hero-slide.alt .hero-photo {
        filter: none;
    }

    .hero-actions,
    .price-pill {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.75rem;
    }

    .hero-actions .shop-now,
    .hero-slide.mobile-feature .hero-actions .shop-now {
        max-width: 100%;
        padding: 0.75rem 1rem;
    }

    .slider-controls {
        right: 8px;
    }

    .slide-count {
        padding: 0.125rem 0.35rem;
        border-radius: 4px;
        background: rgb(0 0 0 / 65%);
    }

    .section-card {
        min-width: 0;
        padding: 1rem 0.75rem;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .section-head > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .section-head .see-all {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .home-section .product-grid,
    .testimonial-blog .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 0.75rem 0.625rem;
    }

    .home-section .product-grid > .product-card,
    .testimonial-blog .product-grid > .product-card {
        grid-column: span 2;
    }

    .home-section .product-grid > .product-card:last-child:nth-child(odd):not(:first-child),
    .testimonial-blog .product-grid > .product-card:last-child:nth-child(odd):not(:first-child) {
        display: none;
    }

    .promo-grid,
    .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .features {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature {
        min-width: 0;
        padding: 1rem;
        border-right: 0;
        border-bottom: 1px solid #e2e3e5;
    }

    .feature:last-child {
        border-bottom: 0;
    }

    .feature-ico {
        flex-shrink: 0;
    }

    .feature-copy {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .feature-copy span {
        margin-top: 0.25rem;
        font-size: 0.8rem;
    }

    .brand-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .big-promo {
        padding: 24px;
    }

    .big-promo h2 {
        font-size: 24px;
    }

    .home-product-card .product-thumb {
        height: 136px;
    }

    .home-product-card .product-info {
        padding: 0.5rem;
    }

    .home-product-card .product-brand,
    .home-product-card .product-name,
    .home-product-card .product-price,
    .product-card .product-sku {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .home-product-card .product-old {
        display: block;
        margin-left: 0;
    }

    .home-product-card .product-actions {
        align-items: stretch;
    }

    .home-product-card .product-actions .cart-add-form,
    .home-product-card .product-actions > .is-disabled {
        flex: 1 1 0;
        min-width: 0;
    }

    .home-product-card .product-actions button {
        min-height: 36px;
        max-width: 100%;
        padding-inline: 0.375rem;
        overflow-wrap: anywhere;
    }

    .home-section,
    .testimonial-blog > *,
    .blog-card,
    .quote,
    .footer-main > section {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .blog-grid,
    .top-products-tabs {
        min-width: 0;
    }

    .tab-btn {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .marquee { min-height: 44px; font-size: 14px; }
    .marquee-group { min-height: 44px; column-gap: 20px; padding-right: 20px; }
}

/* Post-purchase account area: order list, order detail, returns. */
.order-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.order-card { background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; padding: 1.1rem 1.25rem; }
.order-card-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.order-card-number { font-size: 1.02rem; margin: 0; overflow-wrap: anywhere; }
.order-number { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.order-card-number a { color: #092a53; }
.order-card-date { color: #66717d; font-size: .86rem; margin: .2rem 0 0; }
.order-card-state { background: #eef3fa; border-radius: 999px; color: #092a53; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; }
.order-card-lines { list-style: none; margin: .9rem 0 0; padding: 0; }
.order-card-lines li { align-items: center; border-top: 1px solid #eef1f4; display: flex; gap: 1rem; justify-content: space-between; padding: .6rem 0; }
.order-card-lines small { color: #66717d; display: block; font-size: .8rem; margin-top: .15rem; }
.order-card-foot { align-items: center; border-top: 1px solid #e4e8ed; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: .9rem; padding-top: .9rem; }
.order-card-total { align-items: center; display: flex; gap: .6rem; margin: 0; }
.order-card-total strong { font-size: 1.05rem; }
.order-summary-block { border-top: 1px solid #e4e8ed; margin-top: 1.4rem; padding-top: 1.2rem; }
.order-summary-block h2 { font-size: 1rem; margin: 0 0 .8rem; }
.order-summary-block h3 { font-size: .92rem; margin: 0 0 .35rem; }
.order-summary-list { display: grid; gap: .4rem 1rem; grid-template-columns: max-content 1fr; margin: 0; }
.order-summary-list dt { color: #66717d; font-size: .86rem; }
.order-summary-list dd { margin: 0; overflow-wrap: anywhere; }
.order-timeline { list-style: none; margin: 0; padding: 0; }
.order-timeline li { align-items: baseline; border-top: 1px solid #eef1f4; display: grid; gap: .2rem .9rem; grid-template-columns: max-content 1fr max-content; padding: .6rem 0; }
.order-timeline-state { font-weight: 700; }
.order-timeline-detail { color: #4a5563; font-size: .9rem; }
.order-timeline time { color: #66717d; font-size: .8rem; }
.return-line-list { display: grid; gap: 1rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.return-line { border: 1px solid #e4e8ed; border-radius: 10px; display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr) minmax(200px, .55fr); padding: 1rem 1.1rem; }
.return-line-product small { color: #66717d; display: block; font-size: .82rem; margin-top: .25rem; }
.return-line-available { color: #092a53; display: block; font-size: .84rem; font-weight: 700; margin-top: .4rem; }
.return-line-fields { display: grid; gap: .6rem; }
@media (max-width: 1024px) { .return-line { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .order-card-foot { align-items: flex-start; flex-direction: column; }
  .order-summary-list { grid-template-columns: minmax(0, 1fr); }
  .order-timeline li { grid-template-columns: minmax(0, 1fr); }
}

/* Compact customer order cards. Native details owns keyboard and expanded semantics. */
.order-disclosure { padding: 0; min-width: 0; }
.order-card-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 9rem) 18px; gap: 20px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: 10px; }
.order-card-summary::-webkit-details-marker { display: none; }
.order-card-summary::marker { content: ''; }
.order-card-summary:hover { background: #f7f9fb; }
.order-card-summary:focus-visible { outline: 3px solid #6ea4e5; outline-offset: 3px; }
.order-card-identity, .order-card-preview, .order-card-amount { display: grid; gap: 6px; min-width: 0; }
.order-card-identity .order-card-number { font-size: .94rem; font-weight: 700; }
.order-card-identity .order-card-date { margin: 0; font-size: .8rem; }
.order-card-identity .order-card-state { justify-self: start; }
.order-card-state { max-width: 100%; overflow-wrap: anywhere; font-weight: 650; line-height: 1.4; }
.order-card-summary > .order-card-state { min-width: 0; justify-self: start; white-space: normal; }
.order-thumbnails { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.order-thumbnails img, .order-thumbnail-more { inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--storefront-line); border-radius: 5px; background: #fff; }
.order-thumbnails img { object-fit: contain; padding: 3px; }
.order-thumbnail-more { display: grid; place-items: center; color: var(--storefront-muted); font-size: .76rem; font-weight: 600; }
.order-card-count { color: var(--storefront-muted); font-size: .8rem; }
.order-card-amount { text-align: right; overflow-wrap: anywhere; }
.order-card-amount strong { color: var(--storefront-navy); font-size: 1rem; font-variant-numeric: tabular-nums; }
.order-payment-link { display: inline-flex; justify-self: end; align-items: center; justify-content: center; max-width: 100%; min-height: 36px; padding: 7px 12px; border-radius: 6px; color: var(--storefront-navy); background: var(--storefront-yellow); font-size: .78rem; font-weight: 750; text-decoration: none; }
.order-card-toggle { display: flex; gap: 6px; align-items: center; color: var(--storefront-navy); font-size: .8rem; font-weight: 600; }
.order-card-toggle svg { flex-shrink: 0; }
.order-disclosure:not([open]) .when-open, .order-disclosure[open] .when-closed { display: none; }
.order-disclosure[open] .order-card-toggle svg { transform: rotate(180deg); }
.order-card-content { border-top: 1px solid var(--storefront-line); padding: 0 20px 16px; }
.order-card-action { display: flex; justify-content: flex-end; margin-top: 12px; }
.order-products { list-style: none; padding: 0; margin: 0; }
.order-product { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, max-content); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #edf0f3; }
.order-product:last-child { border-bottom: 0; }
.order-product-image { inline-size: 4rem; block-size: 4rem; object-fit: contain; border: 1px solid var(--storefront-line); border-radius: 6px; background: #fff; padding: 5px; }
.order-product-info { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.order-product-info strong { font-weight: 650; }
.order-product-info small { display: block; margin-top: 5px; color: var(--storefront-muted); font-size: .78rem; }
.order-product-price { font-size: .9rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.order-detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.order-detail .order-number { font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.3; font-weight: 700; margin: 0; }
.order-detail-heading > div { min-width: 0; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.order-detail-products { min-width: 0; }
.order-detail-grid > * { min-width: 0; }
.order-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--storefront-line); }
.order-section-heading h2, .order-address-card h2, .order-return-area h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--storefront-navy); }
.order-section-heading > span { color: var(--storefront-muted); font-size: .8rem; }
.order-detail-summary { padding: 18px; background: #f7f9fb; border: 1px solid var(--storefront-line); border-radius: 8px; }
.order-detail-summary .order-summary-block { margin: 0; padding: 16px 0; }
.order-detail-summary .order-summary-block:first-child { border: 0; padding-top: 0; }
.order-detail-summary .order-summary-block:last-child { padding-bottom: 0; }
.order-detail-summary .order-summary-block p { font-size: .86rem; margin: 0; }
.order-detail-summary .order-summary-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 12px; font-size: .86rem; }
.order-detail-summary .order-summary-list dt { overflow-wrap: anywhere; }
.order-detail-summary .order-summary-list dd { text-align: right; }
.order-detail-summary .order-totals { padding: 0; }
.order-detail-summary .order-totals p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px; margin-top: 8px; }
.order-detail-summary .order-totals strong { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.order-detail-summary .order-totals .grand { margin-top: 12px; font-size: .98rem; }
.order-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.order-note { grid-column: 1 / -1; }
.order-address-card { border: 1px solid var(--storefront-line); border-radius: 8px; padding: 18px; min-width: 0; overflow-wrap: anywhere; }
.order-address-card p { margin: 4px 0 0; font-size: .86rem; color: #4a5563; }
.order-address-card .order-address-recipient { margin-top: 12px; font-weight: 650; color: var(--storefront-ink); }
.order-return-area { border-top: 1px solid var(--storefront-line); margin-top: 24px; padding-top: 18px; font-size: .86rem; }
.order-return-area h2 { margin-bottom: 12px; }
.order-return-area h3 { font-size: .86rem; margin: 0; }
.order-return-area .account-alert { margin: 0; }
.order-return-area .order-card-lines { margin: 0 0 12px; }
.order-return-area .order-card-lines li > * { min-width: 0; overflow-wrap: anywhere; }
/* Sticky only on roomy desktops; long summaries scroll within the viewport and stay in their grid. */
@media (min-width: 1025px) and (min-height: 900px) {
    .checkout-summary { position: sticky; top: 24px; max-height: calc(100svh - 48px); overflow-y: auto; }
}
@media (max-width: 1024px) {
    .order-card-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 9rem) 18px; gap: 16px; }
    .order-card-identity { grid-column: 1 / -1; }
    .order-card-preview { grid-row: 2; }
    .order-card-summary > .order-card-state { grid-column: 2; grid-row: 2; }
    .order-card-amount { grid-column: 3; grid-row: 2; }
    .order-card-toggle { justify-self: end; }
    .order-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 680px) {
    .order-card-summary { padding: 14px; gap: 14px 10px; }
    .order-card-content { padding: 0 14px 14px; }
    .order-product { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, max-content); gap: 8px; padding: 12px 0; }
    .order-product-image { inline-size: 2.75rem; block-size: 2.75rem; padding: 3px; }
    .order-product-info, .order-product-price { font-size: .82rem; }
    .order-product-info small { font-size: .73rem; }
    .order-addresses { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
    .order-address-card, .order-detail-summary { padding: 14px; }
    .order-card-toggle { gap: 3px; font-size: .75rem; }
    .order-card-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) 18px; }
    .order-card-preview { grid-column: 1 / -1; grid-row: 3; }
    .order-card-summary > .order-card-state { grid-column: 1; grid-row: 2; justify-self: start; }
    .order-card-amount { grid-column: 2; }
    .order-card-summary > .order-card-toggle { grid-column: 3; grid-row: 2; }
    .order-card-action .account-primary-link { width: 100%; text-align: center; justify-content: center; }
}

/* ---------------------------------------------------------------------
   Layout reservations and hooks added with the catalogue's filter/index work.
   --------------------------------------------------------------------- */

/* The hero image had no reserved box, so the page reflowed once it decoded.
   An explicit aspect-ratio reserves the space before any byte arrives. */
.hero-image {
    aspect-ratio: 1 / 1;
}

/* "All categories" / "All brands" link that follows a bounded filter list. */
.catalog-filter-more {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}

.catalog-filter-more:focus-visible {
    outline: 3px solid #005ea8;
    outline-offset: 3px;
}

/* Product detail follows the theme's gallery, action row and tab strip. */
.product-page .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.product-detail .stock-state {
    padding: 0.7rem;
    border-left: 4px solid #6ea4e5;
    border-radius: 0.25rem;
    background: #eaf3ff;
    font-size: 0.8rem;
}

.product-detail .stock-state.is-unavailable {
    border-color: #b45252;
    background: #fff0f0;
}

.product-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.product-detail-actions form {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
}

.product-detail-actions input[type="number"] {
    width: 60px;
    min-width: 0;
    height: 44px;
    padding: 0.5rem;
    border: 1px solid #d7d9dc;
    border-radius: 0.25rem;
}

.product-detail-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.65rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.product-detail-actions .cart-add-form button {
    padding-inline: 1.3rem;
    border-color: var(--storefront-yellow);
    background: var(--storefront-yellow);
}

.product-detail-actions button > span[aria-hidden] {
    font-size: 1.15rem;
    line-height: 1;
}

.product-information,
.similar-products {
    margin-top: 1.3rem;
    padding: 1.5rem;
    border-radius: 0.35rem;
    background: #fff;
}

.product-information-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--storefront-line);
    overflow-x: auto;
}

.product-information-tabs button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 0;
    color: var(--storefront-ink);
    background: #f3f4f6;
    font-size: 0.8rem;
}

.product-information-tabs button.active {
    color: #fff;
    background: var(--storefront-navy);
}

.product-information-panel {
    margin: 0;
    padding: 1.2rem 0 0;
    color: #626970;
    overflow-wrap: anywhere;
}

.product-information-panel p {
    margin: 0;
    white-space: pre-line;
}

.similar-products .product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.similar-product-item {
    display: none;
    min-width: 0;
}

.similar-product-item > .product-card {
    height: 100%;
}

@media (width > 1200px) {
    .similar-product-item.similar-desktop { display: block; }
    .similar-products:not(:has(.similar-desktop)) { display: none; }
}

@media (900px < width <= 1200px) {
    .similar-product-item.similar-medium { display: block; }
    .similar-products:not(:has(.similar-medium)) { display: none; }
}

@media (680px < width <= 900px) {
    .similar-product-item.similar-tablet { display: block; }
    .similar-products:not(:has(.similar-tablet)) { display: none; }
}

@media (max-width: 680px) {
    .similar-product-item.similar-mobile { display: block; }
    .similar-products:not(:has(.similar-mobile)) { display: none; }
}

@media (max-width: 1200px) {
    .product-detail-actions .product-action-label {
        display: none;
    }

    .similar-products .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .product-page .product-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-gallery-main {
        height: 360px;
    }

    .similar-products .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .product-gallery-main {
        height: clamp(220px, 70vw, 320px);
    }

    .product-meta h1 {
        font-size: 1.5rem;
    }

    .product-detail-actions,
    .product-detail-actions form {
        gap: 0.35rem;
    }

    .product-detail-actions input[type="number"] {
        width: 48px;
    }

    .product-detail-actions .cart-add-form button {
        padding-inline: 0.65rem;
    }

    .product-information,
    .similar-products {
        padding: 1rem;
    }

    .product-information-tabs button {
        padding-inline: 0.65rem;
        font-size: 0.75rem;
    }

    .similar-products .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.catalog-layout.catalog-layout-empty { grid-template-columns: minmax(0, 1fr); }

.vehicle-directory { padding-block: .25rem 2rem; }
.vehicle-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.75rem 2rem; border-radius: .35rem .35rem 0 0; background: var(--storefront-navy); color: #fff; }
.vehicle-eyebrow { margin: 0 0 .6rem; color: var(--storefront-yellow); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.vehicle-heading h1, .vehicle-heading h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; }
.vehicle-description { margin: .65rem 0 0; color: #d1deed; font-size: .88rem; }
.vehicle-heading-icon { display: grid; place-items: center; flex: 0 0 68px; height: 68px; border: 1px solid #ffffff30; border-radius: 50%; color: var(--storefront-yellow); }
.vehicle-heading-icon svg { width: 42px; height: 42px; }
.vehicle-selection { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0; padding: 1rem 2rem 0; background: var(--storefront-card); font-size: .78rem; color: var(--storefront-muted); }
.vehicle-selection a { color: var(--storefront-navy); text-decoration: none; }
.vehicle-selection a:hover, .vehicle-selection a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.vehicle-selection a[aria-current] { font-weight: 700; }
.vehicle-selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 1.25rem 2rem 1.75rem; border-bottom: 3px solid var(--storefront-yellow); border-radius: 0 0 .35rem .35rem; background: var(--storefront-card); }
.vehicle-selectors form { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.vehicle-selectors label { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--storefront-navy); }
.vehicle-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--storefront-body); font-size: .7rem; }
.vehicle-selectors select { width: 100%; min-height: 48px; padding: .75rem .85rem; border: 1px solid var(--storefront-line); border-radius: .3rem; background: var(--storefront-card); color: var(--storefront-navy); font: inherit; font-size: .85rem; cursor: pointer; }
.vehicle-selectors select:focus-visible { outline: 2px solid var(--storefront-navy); outline-offset: 3px; }
.vehicle-selectors select:disabled { background: #f5f6f8; color: var(--storefront-muted); cursor: not-allowed; }
.vehicle-guidance { margin: 1.75rem 0 1rem; font-size: .9rem; font-weight: 500; color: var(--storefront-navy); }
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.vehicle-grid > a { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--storefront-line); border-radius: .35rem; background: var(--storefront-card); color: var(--storefront-navy); text-align: center; font-size: .85rem; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.vehicle-grid > a:hover, .vehicle-grid > a:focus-visible { border-color: var(--storefront-navy); box-shadow: 0 3px 0 var(--storefront-yellow); }
.vehicle-grid img { width: 100%; height: 110px; object-fit: contain; }
.vehicle-empty { grid-column: 1 / -1; background: var(--storefront-card); }
.vehicle-empty > a { display: inline-block; margin-top: 1rem; color: var(--storefront-navy); font-size: .85rem; font-weight: 600; }
@media (max-width: 680px) {
    .vehicle-heading { padding: 1.25rem; }
    .vehicle-heading-icon { display: none; }
    .vehicle-selection { padding: 1rem 1.25rem 0; }
    .vehicle-selectors { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem 1.25rem 1.25rem; }
}

.catalog-layout-empty .catalog-heading-row {
    margin-bottom: 1.25rem;
}

/* Use the catalog title scale for storefront page titles, including account and checkout. */
.storefront-page .page-shell h1:not(:where(.hero-title, #home-title)) {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
}
/* A consent provider may include a visible link alongside its executable code. */
.footer-cookie-preferences { padding-top: 12px; padding-bottom: 20px; font-size: 13px; }
.footer-cookie-preferences a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }