/* The same guard the landing page carries, for the same reason: a block that reveals sideways
   sits offset until it has animated in and widens the document, so on a phone the whole page -
   sticky header included - slides. The hero portrait did once; it now shows at once, and the
   guard stays for whatever reveals next. `clip` rather than `hidden` so no scroll container appears. */
.aw-shop {
    overflow-x: clip;
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--ink);
}

.aw-shopnav {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 28px;
    background: var(--navbg);
    border-block-end: 1px solid var(--line);
}

@supports (backdrop-filter: blur(14px)) {
    .aw-shopnav {
        backdrop-filter: blur(14px);
    }
}

.aw-shopnav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.aw-shopnav__links a {
    color: var(--muted);
    white-space: nowrap;
}

@media (hover: hover) {
    .aw-shopnav__links a:hover {
        color: var(--ink);
    }
}

.aw-shopnav__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--control-gap);
}

.aw-cartbtn {
    gap: 10px;
    padding: 12px 22px;
    font-size: 11px;
}

.aw-cartbtn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 5px;
    border-radius: var(--radius-pill);
    background: var(--btnbg);
    color: var(--btnink);
    font-size: 11px;
    letter-spacing: 0;
}

/* The visible long/short labels are presentational only - the accessible name
   comes from the always-present visually-hidden spans either side of them
   (see shop.html), so toggling which one shows here never changes what a
   screen reader announces. */
.aw-cartbtn__label--short {
    display: none;
}

/* Phone header: centred stack (see base.css). The cart keeps a row of its own
   under the preference pair so it never wraps out of reach - it is the primary
   control on the shop, and "Warenkorb" plus the language pill and the toggle
   overflow one 375px line. Shared with the checkout and account bars, which
   load shop.css. */
@media (width < 560px) {
    .aw-shopnav {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 16px;
        text-align: center;
    }

    /* Column gap is tight on purpose: "← Startseite Leistungen Kontakt Konto"
       has to stay on one row under the fallback font too, otherwise the row
       count - and with it the header height - changes when Jost swaps in. */
    .aw-shopnav__links {
        justify-content: center;
        gap: 12px 10px;
        line-height: 18px;
    }

    .aw-shopnav__controls {
        flex-direction: column;
        gap: var(--control-gap);
    }

    /* The shop is the one slim bar with a third occupant, and German spells the
       cart "Warenkorb": lockup, cart and menu button only fit a 375px row once
       the bar tightens its gutters and both labels drop to the pill metrics the
       language switch already uses. The cart's padding is measured against the
       20px count badge, not the 16px line, so it stays under the button height. */
    html.js [data-menu-bar]:has(aw-cart-button) {
        gap: 8px;
        padding-inline: 14px;
    }

    html.js [data-menu-bar] :is(.aw-shopnav__controls, aw-cart-button) {
        display: flex;
        flex-direction: row;
    }

    html.js [data-menu-bar] .aw-cartbtn {
        gap: 6px;
        padding: 9px 12px;
        font-size: 10.5px;
        letter-spacing: .14em;
    }

    html.js [data-menu-bar]:has(aw-cart-button) .aw-lockup--inline {
        gap: 8px;
    }

    html.js [data-menu-bar]:has(aw-cart-button) .aw-lockup--inline .aw-lockup__first {
        font-size: 14px;
        letter-spacing: .24em;
    }

    html.js [data-menu-bar]:has(aw-cart-button) .aw-lockup--inline .aw-lockup__second {
        font-size: 15px;
    }
}

/* Below 360px "WARENKORB" is the one word that doesn't fit next to the lockup
   and MENÜ - English "Cart" and Bosnian "Korpa" already do, so only German
   needs the swap. "Korb" is the shop card's own short form (see "+ Korb" on
   each card); the count badge and the button's box stay put, only the label
   text changes. */
@media (width < 360px) {
    .aw-cartbtn__label--long {
        display: none;
    }

    .aw-cartbtn__label--short {
        display: inline;
    }
}

html:not(.js) aw-cart-button,
html:not(.js) aw-cart-drawer,
html:not(.js) aw-product-modal,
html:not(.js) .aw-shop__filters,
html:not(.js) .aw-shop__sort,
html:not(.js) .aw-shopcard__details,
html:not(.js) .aw-shopcard__cart {
    display: none;
}

.aw-shop__main {
    display: block;
    text-align: start;
}

aw-product-modal,
aw-cart-drawer,
aw-cart-button {
    display: block;
}

.aw-shop__hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 90px 40px 30px;
}

/* The hero carries a premade design beside its copy where one is configured. `:has`
   keeps the centred single-column look when it is not, so removing the picture from
   site.json restores the original hero rather than leaving text stranded left. */
.aw-shop__heroinner {
    position: relative;
    max-inline-size: 1160px;
    margin-inline: auto;
}

.aw-shop__heroinner:has(.aw-shop__herofig) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    text-align: start;
}

.aw-shop__heroinner:has(.aw-shop__herofig) .aw-shop__sub {
    margin-inline: 0;
}

.aw-shop__herotext {
    position: relative;
}

/* Matted like the about portrait, so the two photographs of her are presented the
   same way: `.aw-about__frame` values, with the border on the frame rather than
   the picture. The width grows by the matting so the photograph itself keeps its size. It is
   set rather than shrunk to fit: a picture still loading has no width to fit around. */
.aw-shop__herofig {
    position: relative;
    inline-size: 100%;
    max-inline-size: 454px;
    margin-inline: auto;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--cardshadow);
}

/* The largest thing on the page, so it neither waits for the reveal script nor loads lazily, and
   the `width`/`height` in its partials - the picture's own pixel size, to follow the file named in
   site.json - hold its box before it arrives, so the copy beside it never jumps. */
.aw-shop__heroimg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* Same theme pair as the portfolio tiles, and the same guards as tokens.css. */
.aw-shop__heroimg--dark {
    display: none;
}

html.dark .aw-shop__heroimg--light {
    display: none;
}

html.dark .aw-shop__heroimg--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    html:not(.light) .aw-shop__heroimg--light {
        display: none;
    }

    html:not(.light) .aw-shop__heroimg--dark {
        display: block;
    }
}

.aw-shop__glow-a {
    inset-inline-end: -200px;
    inset-block-start: -200px;
    inline-size: 700px;
    block-size: 700px;
    background: var(--glowA);
}

.aw-shop__glow-b {
    inset-inline-start: -220px;
    inset-block-start: 60px;
    inline-size: 600px;
    block-size: 600px;
    background: var(--glowB);
}

.aw-shop__diamond-a {
    inset-inline-start: 50%;
    inset-block-start: -260px;
    inline-size: 520px;
    block-size: 520px;
    transform: translateX(-50%) rotate(45deg);
    opacity: .4;
}

.aw-shop__diamond-b {
    inset-inline-start: 50%;
    inset-block-start: -285px;
    inline-size: 520px;
    block-size: 520px;
    transform: translateX(-44%) rotate(52deg);
    opacity: .25;
}

.aw-shop__kicker {
    letter-spacing: .45em;
}

.aw-shop__h1 {
    font-size: clamp(40px, 8vw, 76px);
    line-height: 1.06;
    margin-block-start: 24px;
}

.aw-shop__h1 em {
    font-weight: 500;
    font-style: italic;
    color: var(--accent-display);
}

.aw-shop__sub {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.65;
    color: var(--muted);
    max-inline-size: 620px;
    margin: 26px auto 0;
}

.aw-shop__sub + .aw-shop__sub {
    margin-top: 12px;
}

.aw-shop__sub a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.aw-shop__grid-section {
    padding: 40px clamp(20px, 5vw, 54px) 90px;
}

.aw-shop__inner {
    max-inline-size: 1160px;
    margin-inline: auto;
}

.aw-shop__toolbar {
    display: flex;
}

aw-shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    inline-size: 100%;
}

.aw-shop__filters {
    padding: 4px;
    flex-wrap: wrap;
}

/* The shop's filters need more room than base.css's 480px threshold allows. Measured with the
   four of 2026-10-27: in German they wrap into a second row inside the oval up to about 590px,
   base.css's columns below 480px break "E-Book-Cover" over three lines, and chips at full size
   scroll the last category out of sight at 375px. Below 600px they stay one row in the oval, at
   the type size of the site's other pills and each label on one line, which fits from 360px in
   all three languages. Narrower, or once more categories return, the row scrolls inside its own
   container rather than widening the page, and the cut-off segment is the cue that there is more. */
@media (width < 600px) {
    .aw-shop__filters.aw-pillgroup--segmented {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(max-content, 1fr);
        inline-size: 100%;
        min-inline-size: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .aw-shop__filters .aw-shop__chip {
        padding-inline: 6px;
        font-size: 10.5px;
        letter-spacing: .12em;
        white-space: nowrap;
    }
}

.aw-shop__chip {
    padding: 11px 26px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: all .3s ease;
}

.aw-shop__sortline {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.aw-shop__count {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--soft);
}

.aw-shop__sort {
    padding: 11px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .1em;
    cursor: pointer;
}

/* auto-fill keeps the empty columns: a filter that leaves one design shows it at its usual
   width instead of stretched across the row. */
.aw-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 24px;
    margin-block-start: 44px;
}

.aw-shopcard {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    transition: border-color .3s ease, box-shadow .3s ease;
}

@supports (backdrop-filter: blur(6px)) {
    .aw-shopcard {
        backdrop-filter: blur(6px);
    }
}

.aw-shopcard:hover {
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgb(var(--shadowtint) / .14);
}

/* A sold design stays on as portfolio: its picture steps back, its badge and text stay readable. */
.aw-shopcard--sold .aw-shopcard__media > :not(.aw-shopcard__badge) {
    opacity: .62;
}

.aw-shopcard[hidden] {
    display: none;
}

.aw-shopcard__media {
    position: relative;
    block-size: 330px;
    overflow: hidden;
}

/* Scoped to the card, so the modal keeps its own intrinsic sizing. Without this the
   only rule reaching a product picture is the global `img { block-size: auto }`, and a
   2:3 cover in a 272px column renders about 408px tall, pushing 78px out of a 330px
   box. `contain` keeps a whole cover visible, which is the point of a premade. */
/* `display` is declared at class specificity on purpose: the theme rules below are
   single-class selectors, so declaring it on `.aw-shopcard__media .aw-shopcard__img`
   would outrank them and leave both pictures visible at once. */
.aw-shopcard__img {
    display: block;
    inline-size: 100%;
}

.aw-shopcard__media .aw-shopcard__img {
    block-size: 100%;
    object-fit: contain;
}

/* A product may carry a picture per theme. Guards mirror tokens.css. The modal keeps its
   state on the container, so this pair never has to argue with a `hidden` attribute, and
   the empty-modal rule below outranks these on specificity. */
.aw-shopcard__img--dark {
    display: none;
}

html.dark .aw-shopcard__img--light {
    display: none;
}

html.dark .aw-shopcard__img--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    html:not(.light) .aw-shopcard__img--light {
        display: none;
    }

    html:not(.light) .aw-shopcard__img--dark {
        display: block;
    }
}

.aw-modal__media:not([data-has-image]) .aw-shopcard__img {
    display: none;
}

.aw-shopcard__slot {
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px dashed var(--line);
    color: var(--soft);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
}

@supports (text-wrap: balance) {
    .aw-shopcard__slot {
        text-wrap: balance;
    }
}

.aw-shopcard__badge {
    position: absolute;
    inset-block-start: 14px;
    z-index: 3;
    padding: 6px 14px;
    font-size: 9.5px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 500;
}

.aw-shopcard__badge--neu {
    inset-inline-start: 14px;
    background: var(--btnbg);
    color: var(--btnink);
}

.aw-shopcard__badge--reserved {
    inset-inline-end: 14px;
    background: var(--cardsolid);
    border: 1px solid var(--accent);
    color: var(--accent-text);
}

.aw-shopcard__badge--sold {
    inset-inline-end: 14px;
    background: #26232B;
    color: #EDE6E9;
}

.aw-shopcard__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    padding: 22px 26px 26px;
}

.aw-shopcard__cat {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 500;
}

.aw-shopcard__title {
    font-size: 27px;
}

/* Price over actions rather than beside them: a 27px serif price and two buttons do
   not fit the 260px the grid can give a card, and wrapping left the price floating
   beside a stacked pair. */
.aw-shopcard__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: auto;
    padding-block-start: 14px;
}

.aw-shopcard__price {
    font-family: var(--font-serif);
    font-size: 27px;
    font-weight: 500;
    color: var(--ink);
}

/* Equal shares, so a sold design with only its details button fills the row the same
   way an orderable one splits it. The default stretch keeps the pair the same height
   despite the cart button carrying its own padding. */
.aw-shopcard__actions {
    display: flex;
    gap: 8px;
}

/* A pointer can open a design from its picture or its title as well as from Details. */
.aw-shopcard__media,
.aw-shopcard__title {
    cursor: pointer;
}

.aw-shopcard__actions > * {
    flex: 1;
}

.aw-shopcard__details,
.aw-shopcard__cart {
    padding: 11px 20px;
    font-size: 10.5px;
    letter-spacing: .18em;
}

.aw-shopcard__details {
    background: transparent;
    border: 1px solid var(--ghostline);
    color: var(--ghostink);
}

.aw-shopcard__details:hover {
    border-color: var(--accent);
    color: var(--ink);
}

.aw-shopcard__cart {
    padding-inline: 18px;
    background: var(--btnbg);
    color: var(--btnink);
}

.aw-shopcard__cart:hover {
    background: var(--btnbgH);
}

.aw-shop__persnote {
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: var(--soft);
    line-height: 1.7;
    max-inline-size: 520px;
    margin: 44px auto 0;
}

.aw-shop__how {
    --bandaccent: #D2929B;

    background: var(--bandbg);
    color: var(--bandink);
    padding: clamp(56px, 8vw, 90px) clamp(20px, 5vw, 54px);
}

.aw-shop__howkicker {
    font-size: 11px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--bandaccent);
    font-weight: 500;
}

.aw-shop__howh2 {
    font-weight: 500;
    font-size: clamp(30px, 5.5vw, 46px);
    margin-block-start: 14px;
}

.aw-shop__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(24px, 4vw, 44px);
    margin-block-start: 54px;
}

.aw-shop__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-block-start: 1px solid rgba(210, 146, 155, .3);
    padding-block-start: 24px;
}

.aw-shop__stepno {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 500;
    color: var(--bandaccent);
}

.aw-shop__steptitle {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .06em;
}

.aw-shop__steptext {
    font-size: 14px;
    font-weight: 300;
    color: var(--bandmuted);
    line-height: 1.65;
}

.aw-shop__cta {
    text-align: center;
    padding: 100px clamp(20px, 5vw, 40px);
}

.aw-shop__ctah2 {
    font-size: clamp(30px, 5.5vw, 46px);
}

.aw-shop__ctah2 em {
    font-weight: 500;
    font-style: italic;
    color: var(--accent-display);
}

.aw-shop__ctasub {
    font-weight: 300;
    font-size: 16.5px;
    color: var(--muted);
    line-height: 1.65;
    max-inline-size: 480px;
    margin: 18px auto 0;
}

.aw-shop__ctaactions {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: 36px;
}

.aw-input--block {
    box-sizing: border-box;
    inline-size: 100%;
    padding: 13px 16px;
    border-radius: 2px;
}

/* Centred explicitly, the way the drawer and the menu panel state their own
   position: a modal dialog centres itself through the UA `margin: auto`, which the
   `* { margin: 0 }` reset in base.css overrides, leaving it in the top-left corner. */
.aw-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: min(960px, 92vw);
    max-inline-size: min(960px, 92vw);
    max-block-size: 88vh;
    overflow: auto;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--cardsolid);
    color: var(--ink);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
}

.aw-modal::backdrop,
.aw-drawer::backdrop {
    background: rgba(28, 24, 32, .6);
}

@supports (backdrop-filter: blur(6px)) {
    .aw-modal::backdrop,
    .aw-drawer::backdrop {
        backdrop-filter: blur(6px);
    }
}

/* Sticky, not absolute: on a phone the dialog scrolls, and the way out scrolled away with it. It
   sits in the flow at the dialog's top corner, and its negative bottom margin lets the content
   start underneath it, where it stays as the dialog scrolls. */
.aw-modal__close {
    position: sticky;
    inset-block-start: 16px;
    display: block;
    margin-block: 16px -54px;
    margin-inline: auto 16px;
    z-index: 3;
    inline-size: 38px;
    block-size: 38px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
}

.aw-modal__close:hover,
.aw-drawer__close:hover {
    color: var(--ink);
    border-color: var(--accent);
}

.aw-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.aw-modal__media {
    position: relative;
    min-block-size: clamp(320px, 70vw, 520px);
}

.aw-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 44px 42px;
}

.aw-modal__cat {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 500;
}

.aw-modal__title {
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.05;
}

.aw-modal__price {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 500;
    color: var(--ink);
}

.aw-modal__desc {
    margin-block-start: 4px;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
}

.aw-modal__agb {
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted);
}

.aw-modal__feats {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    border-block-start: 1px solid var(--line);
    padding-block-start: 16px;
    margin-block-start: 6px;
}

.aw-modal__feats li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--muted);
}

.aw-modal__feats li::before {
    content: "◆";
    color: var(--accent);
    font-size: 9px;
    flex-shrink: 0;
}

.aw-modal__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 14px;
}

.aw-modal__actions:not([hidden]) {
    display: flex;
}

.aw-modal__status {
    margin-block-start: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 13px;
    color: var(--soft);
    letter-spacing: .06em;
}

/* The cart is a modal dialog pinned to the inline end of the viewport: the top
   layer brings the focus trap, Escape and focus restore with it, so the panel
   only has to undo the dialog box the user agent would otherwise draw. */
.aw-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: 400px;
    max-inline-size: 92vw;
    block-size: auto;
    max-block-size: none;
    margin: 0;
    padding: 0;
    background: var(--cardsolid);
    color: var(--ink);
    border: none;
    border-inline-start: 1px solid var(--line);
    box-shadow: -30px 0 70px rgba(0, 0, 0, .25);
}

/* An open dialog animates in; it cannot animate out without `overlay`, which is
   Baseline Limited, so closing is immediate. */
.aw-drawer[open] {
    display: flex;
    flex-direction: column;
    animation: awDrawerIn .35s cubic-bezier(.22, .61, .36, 1);
}

@keyframes awDrawerIn {
    from {
        transform: translateX(105%);
    }
}

.aw-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-block-end: 1px solid var(--line);
}

.aw-drawer__title {
    font-size: 26px;
}

.aw-drawer__close {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}

.aw-drawer__body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 28px;
}

.aw-drawer__empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 60px 10px;
}

.aw-drawer__empty[hidden] {
    display: none;
}

.aw-drawer__diamond {
    font-family: var(--font-serif);
    font-size: 44px;
    color: var(--accent);
}

.aw-drawer__empty p {
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
}

.aw-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
}

.aw-drawer__item {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 14px 16px;
}

.aw-drawer__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 64px;
    flex-shrink: 0;
    background: var(--btnbg);
    color: var(--btnink);
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
}

.aw-drawer__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aw-drawer__name {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
}

.aw-drawer__cat {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
}

.aw-drawer__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.aw-drawer__price {
    font-size: 15px;
    font-weight: 400;
}

.aw-drawer__remove {
    border: none;
    background: none;
    padding: 0;
    color: var(--soft);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.aw-drawer__remove:hover {
    color: var(--accent);
}

.aw-drawer__unique {
    font-size: 12px;
    font-weight: 300;
    color: var(--soft);
    line-height: 1.6;
}

.aw-drawer__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 28px;
    border-block-start: 1px solid var(--line);
}

.aw-drawer__foot[hidden] {
    display: none;
}

.aw-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 15px;
}

.aw-drawer__total span:first-child {
    color: var(--muted);
    font-weight: 300;
}

.aw-drawer__total span:last-child {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
}

.aw-drawer__vat {
    font-size: 11px;
    font-weight: 300;
    color: var(--soft);
}

.aw-drawer__checkout {
    padding: 16px 20px;
}

.aw-drawer__trust {
    text-align: center;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--soft);
}

.aw-drawer__keep {
    border: none;
    background: none;
    padding: 6px;
    color: var(--soft);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
}

.aw-drawer__keep:hover {
    color: var(--ink);
}

/* ---- carousel: several pictures of one design, a card's front and back ---------------------- */
/* The track scrolls natively with snap points, so a swipe works without the script; the
   arrows and dots are the script's. Fills whatever box holds it: the 330px card media, or
   the modal's media column. */
.aw-carousel {
    position: relative;
    display: block;
    block-size: 100%;
}

.aw-carousel[hidden] {
    display: none;
}

.aw-carousel__track {
    display: flex;
    block-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.aw-carousel__track::-webkit-scrollbar {
    display: none;
}

.aw-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    block-size: 100%;
    scroll-snap-align: center;
}

.aw-carousel__slide .aw-shopcard__img {
    block-size: 100%;
    object-fit: contain;
}

.aw-carousel__nav {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 4;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cardsolid);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(51, 47, 56, .12);
}

.aw-carousel__nav--prev {
    inset-inline-start: 10px;
}

.aw-carousel__nav--next {
    inset-inline-end: 10px;
}

.aw-carousel__nav[aria-disabled="true"] {
    opacity: .35;
    cursor: default;
}

.aw-carousel__dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 12px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.aw-carousel__dot {
    inline-size: 8px;
    block-size: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    opacity: .3;
    cursor: pointer;
}

.aw-carousel__dot[aria-current="true"] {
    opacity: .9;
}

.aw-modal__media .aw-carousel {
    position: absolute;
    inset: 0;
}

/* While the modal shows a carousel, the single picture pair behind it stands down. */
.aw-modal__media[data-has-gallery] > .aw-shopcard__img {
    display: none;
}

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