/* Main Character
 *
 * Built for Main Character Boutique and restricted to them, so this
 * stylesheet is allowed to make decisions a general theme could not: it
 * knows products are named after people, that collections are episodes, and
 * that everything is nearly sold out.
 *
 * Its own stylesheet rather than Tailwind utilities. The storefront's
 * utility bundle is generated from the classes the templates already use and
 * is rebuilt by hand, so a class the build has never seen does nothing at
 * all, silently.
 *
 * The structure is editorial and disciplined. The colour does the talking.
 */

:root {
    --mc-ink: var(--color-text, #3A3840);
    --mc-paper: var(--color-background, #FFFFFF);
    --mc-tint: var(--color-surface, #FDF4F7);
    --mc-muted: var(--color-muted, #8A8694);
    --mc-line: rgba(58, 56, 64, 0.14);

    --mc-blush: var(--color-primary, #E07CA0);
    --mc-mint: var(--color-secondary, #6FAFA6);
    --mc-sun: var(--color-accent, #F2B705);

    /* Washes, so a band can carry a colour without competing with a
       photograph sitting next to it. */
    --mc-blush-wash: color-mix(in srgb, var(--mc-blush) 12%, #FFFFFF);
    --mc-mint-wash: color-mix(in srgb, var(--mc-mint) 16%, #FFFFFF);
    --mc-sun-wash: color-mix(in srgb, var(--mc-sun) 20%, #FFFFFF);

    --mc-measure: 74rem;
    --mc-gutter: clamp(1rem, 4vw, 2.5rem);
    --mc-band: clamp(3.5rem, 7vw, 6.5rem);

    /* Two radii only. One would read as a rounding default; two reads as a
       decision, which matches a logo that is itself a rounded badge. */
    --mc-round: 14px;
    --mc-pill: 999px;

    --mc-display: var(--font-heading, 'Playfair Display', Georgia, serif);
    --mc-body: var(--font-body, 'Poppins', system-ui, sans-serif);

    --mc-header: 92px;
}

/* ---------- foundations ---------- */

body.mc-body {
    margin: 0;
    background: var(--mc-paper);
    color: var(--mc-ink);
    font-family: var(--mc-body);
    font-size: var(--font-size-base, 16px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mc-wrap {
    max-width: var(--mc-measure);
    margin-inline: auto;
    padding-inline: var(--mc-gutter);
}

.mc-wrap--narrow { max-width: 44rem; }
.mc-wrap--mid { max-width: 58rem; }
/* Named rather than left empty. Wide used to be mapped to no class at all,
   and |default fires on an empty string, so every Wide section quietly came
   out at the middle width. */
.mc-wrap--wide { max-width: var(--mc-measure); }
.mc-wrap--full { max-width: none; padding-inline: 0; }

.mc-band { padding-block: var(--mc-band); }
.mc-band--pt-none { padding-block-start: 0; }
.mc-band--pb-none { padding-block-end: 0; }
.mc-band--pt-sm { padding-block-start: clamp(1.25rem, 3vw, 2.25rem); }
.mc-band--pb-sm { padding-block-end: clamp(1.25rem, 3vw, 2.25rem); }

.mc-band--paper { background: var(--mc-paper); }
.mc-band--blush { background: var(--mc-blush-wash); }
.mc-band--mint { background: var(--mc-mint-wash); }
.mc-band--sun { background: var(--mc-sun-wash); }
.mc-band--tint { background: var(--mc-tint); }
.mc-band--ink { background: var(--mc-ink); color: var(--mc-paper); }
.mc-band--ink a { color: inherit; }
.mc-band--ink .mc-eyebrow { color: rgba(255, 255, 255, 0.65); }

.mc-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.mc-grid--2 { grid-template-columns: 1fr; }
.mc-grid--3 { grid-template-columns: 1fr; }
.mc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 40rem) {
    .mc-grid--2, .mc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
    .mc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- type ---------- */

.mc-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-blush);
    margin: 0 0 0.75rem;
}

.mc-eyebrow--mint { color: var(--mc-mint); }
.mc-eyebrow--muted { color: var(--mc-muted); }

.mc-h1, .mc-h2, .mc-h3 {
    font-family: var(--mc-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: inherit;
}

.mc-h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.mc-h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.mc-h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }

/* The reference puts one word of every heading in italic. It is a small
   thing that makes a serif heading look set rather than typed. */
.mc-h1 em, .mc-h2 em { font-style: italic; }

.mc-lede { font-size: 1.0625rem; color: var(--mc-muted); margin: 1rem 0 0; }

/* A short centred rule under a heading, the way the reference does it. */
.mc-rule {
    width: 48px;
    height: 1px;
    background: var(--mc-ink);
    opacity: 0.25;
    border: 0;
    margin: 1.5rem auto 0;
}

.mc-head { text-align: center; max-width: 44rem; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mc-head--left { text-align: left; margin-inline: 0; }
.mc-head--left .mc-rule { margin-inline: 0; }

.mc-prose { line-height: 1.8; }
.mc-prose > * + * { margin-top: 1.1em; }
.mc-prose h2 { font-family: var(--mc-display); font-size: 1.5rem; margin-top: 2em; }
.mc-prose h3 { font-family: var(--mc-display); font-size: 1.2rem; margin-top: 1.6em; }
.mc-prose a { color: var(--mc-blush); text-underline-offset: 3px; }
.mc-prose ul, .mc-prose ol { padding-left: 1.3em; }
.mc-prose li + li { margin-top: 0.4em; }
.mc-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.mc-prose th, .mc-prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--mc-line); text-align: left; }
.mc-prose th { font-weight: 600; background: var(--mc-tint); }

/* ---------- controls ---------- */

.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.9rem;
    border-radius: var(--mc-pill);
    border: 1px solid var(--mc-blush);
    background: var(--mc-blush);
    color: #FFFFFF;
    font-family: var(--mc-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s, border-color 0.15s, color 0.15s;
}

.mc-btn:hover {
    background: var(--mc-ink);
    border-color: var(--mc-ink);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(58, 56, 64, 0.18);
}

/* Outline. Over a photograph a filled button fights the picture, which is
   the one thing the reference is strict about. */
.mc-btn--ghost { background: transparent; color: var(--mc-ink); border-color: var(--mc-ink); }
.mc-btn--ghost:hover { background: var(--mc-ink); color: #FFFFFF; }

.mc-btn--onphoto { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.85); }
.mc-btn--onphoto:hover { background: #FFFFFF; color: var(--mc-ink); border-color: #FFFFFF; }

.mc-btn--sun { background: var(--mc-sun); border-color: var(--mc-sun); color: var(--mc-ink); }
.mc-btn--sun:hover { background: var(--mc-ink); border-color: var(--mc-ink); color: #FFFFFF; }

.mc-btn--block { width: 100%; }
.mc-btn--lg { padding: 1rem 2.4rem; font-size: 0.8125rem; }
.mc-btn[disabled], .mc-btn--sold { opacity: 0.45; cursor: not-allowed; }
.mc-btn[disabled]:hover, .mc-btn--sold:hover { transform: none; box-shadow: none; background: var(--mc-blush); border-color: var(--mc-blush); }

.mc-textlink {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

.mc-field {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-round);
    background: var(--mc-paper);
    color: var(--mc-ink);
    font: inherit;
    font-size: 0.9375rem;
}

.mc-field:focus { outline: 2px solid var(--mc-blush); outline-offset: 1px; border-color: transparent; }
.mc-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; }

/* A chip. Sizes, denominations, anything chosen from a short list. */
.mc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-pill);
    background: var(--mc-paper);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.mc-chip:hover { border-color: var(--mc-ink); }
.mc-chip[aria-pressed="true"], .mc-chip--on { background: var(--mc-ink); border-color: var(--mc-ink); color: #FFFFFF; }

/* A size on a card is a link to that size, so tapping one is not a dead
   end: it opens the piece with that size already chosen. They looked
   exactly like the buttons on the product page and did nothing at all,
   which is worse than not being there.

   Adding straight to the bag from a card was the other option and is wrong
   here: with one of each, somebody wants to see the piece before they
   commit to the only one. */
a.mc-chip { text-decoration: none; color: inherit; }
a.mc-chip:hover { background: var(--mc-ink); border-color: var(--mc-ink); color: #FFFFFF; }

/* Gone, rather than hidden. With one of each, which size has sold is the
   most useful thing on the card. */
.mc-chip--gone {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.mc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- header ---------- */

/* The thin bar above everything. The shop's own colour rather than
   charcoal: it is the first thing on the page, and a dark strip above a
   blush logo reads as part of the browser rather than part of the shop.
   Everything in it is white, which is the only thing that holds against a
   mid tone. */
.mc-topbar {
    background: var(--mc-blush);
    color: #FFFFFF;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.mc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    min-height: 2.25rem;
    padding-block: 0.4rem;
}

/* One item sits where it belongs rather than in the middle: a shop with no
   accounts yet still wants its news on the right. */
.mc-topbar__inner > :only-child { margin-inline-start: auto; }

/* The icons are the shared component, drawn at 16px with currentColor, so
   the only thing to say here is what colour current is. */
.mc-topbar__social { display: flex; align-items: center; gap: 0.85rem; }
.mc-topbar__social a { color: #FFFFFF; display: inline-flex; opacity: 0.92; transition: opacity 0.15s ease; }
.mc-topbar__social svg { display: block; }
.mc-topbar__social a:hover { opacity: 1; }

.mc-topbar__message {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    text-align: end;
}
a.mc-topbar__message:hover { text-decoration: underline; }

/* On a phone the icons stay and the message wraps under them rather than
   being squeezed into two words a line. */
@media (max-width: 30rem) {
    .mc-topbar__inner { flex-direction: column; align-items: center; }
    .mc-topbar__inner > :only-child { margin-inline-start: 0; }
    .mc-topbar__message { text-align: center; }
}

/* The old centred charcoal strip, kept so a shop that pasted the class into
   its own custom CSS is not left with an unstyled line. */
.mc-announce {
    background: var(--mc-ink);
    color: #FFFFFF;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
}

/* One row, the badge in the middle, navigation split either side. Every
   other theme on the platform ships a utility strip and a left wordmark;
   this is the arrangement the shop's own reference uses and nothing else
   here does. */
.mc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mc-paper);
    border-bottom: 1px solid var(--mc-line);
    transition: padding 0.2s ease;
}

.mc-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: var(--mc-header);
    padding-block: 0.75rem;
    transition: min-height 0.2s ease;
}

/* Exactly three children in the grid, always: left side, badge, right side.
   The burger lives inside the left side rather than beside it, because a
   fourth grid item in a three column grid pushes the badge off centre, which
   is what it did. */
.mc-header__side { display: flex; align-items: center; gap: 1.75rem; min-width: 0; }
.mc-header__side--right { justify-content: flex-end; }

.mc-header__nav { display: none; gap: 1.75rem; align-items: center; }

.mc-header__link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mc-ink);
    text-decoration: none;
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.mc-header__link:hover, .mc-header__link[aria-current="page"] { border-bottom-color: var(--mc-blush); }

.mc-header__badge { justify-self: center; display: inline-flex; align-items: center; }
.mc-header__badge img { display: block; height: var(--mc-logo-height, 64px); width: auto; transition: height 0.2s ease; }
.mc-header__badge-text { font-family: var(--mc-display); font-size: 1.25rem; letter-spacing: 0.04em; }

.mc-header__tools { display: flex; align-items: center; gap: 0.9rem; }
.mc-header__tool { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--mc-pill); color: var(--mc-ink); background: transparent; border: 0; cursor: pointer; }
.mc-header__tool:hover { background: var(--mc-blush-wash); }

.mc-header__count {
    position: absolute;
    transform: translate(0.7rem, -0.7rem);
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.25rem;
    border-radius: var(--mc-pill);
    background: var(--mc-blush);
    color: #FFFFFF;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Slimmer once the page moves, so the badge does not eat the screen. */
.mc-header.is-slim .mc-header__inner { min-height: 64px; }
.mc-header.is-slim .mc-header__badge img { height: calc(var(--mc-logo-height, 64px) * 0.62); }

/* Base first, then the breakpoint. Written the other way round these two
   rules have the same specificity and the later one wins, which showed the
   burger at every width. */
.mc-header__burger { display: inline-flex; }

@media (min-width: 62rem) {
    .mc-header__nav { display: flex; }
    .mc-header__burger { display: none; }
}

/* Below that the right hand cell was wider than the column it sat in and
   spilled left over the badge: three 2.25rem tools plus two 0.9rem gaps is
   137px, and a 390px phone leaves the side columns about 120px once the
   logo has taken the middle. The cell has min-width 0 and justify-content
   flex-end, so the overflow went straight across the logo.

   The search tool goes first, because it is a link to the shop and the bar
   along the bottom of a phone already has Shop on it. What is left is the
   account and the bag, drawn a little smaller and a little closer. */
@media (max-width: 61.999rem) {
    .mc-header__inner { gap: 0.5rem; }
    .mc-header__tools { gap: 0.25rem; }
    .mc-header__tool { width: 2rem; height: 2rem; }
    .mc-header__tools .mc-header__tool--search { display: none; }
    .mc-header__badge img { max-width: 100%; }
}

/* Bottom bar on a phone, where a thumb reaches. No other theme here does
   this; they all put the navigation behind a burger at the top. */
.mc-bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    background: var(--mc-paper);
    border-top: 1px solid var(--mc-line);
    padding-block: 0.4rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
}

.mc-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mc-muted);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
}

.mc-bottomnav__item[aria-current="page"] { color: var(--mc-blush); }

@media (min-width: 62rem) {
    .mc-bottomnav { display: none; }
}

body.has-bottomnav { padding-bottom: 4.25rem; }

@media (min-width: 62rem) {
    body.has-bottomnav { padding-bottom: 0; }
}

/* ---------- hero ---------- */

.mc-hero { position: relative; display: grid; place-items: center; min-height: clamp(26rem, 68vh, 44rem); overflow: hidden; }
.mc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-hero__veil { position: absolute; inset: 0; background: rgba(32, 30, 36, var(--mc-veil, 0.28)); }
.mc-hero__body { position: relative; text-align: center; color: #FFFFFF; padding: var(--mc-gutter); max-width: 42rem; }
.mc-hero__body .mc-eyebrow { color: rgba(255, 255, 255, 0.8); }
.mc-hero__title { font-family: var(--mc-display); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.1; margin: 0; }
.mc-hero__sub { margin: 1rem 0 0; color: rgba(255, 255, 255, 0.88); }
.mc-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

/* The yellow corner. Deliberately crooked, because a shop with a cartoon
   badge can afford one thing that is not straight. */
.mc-hero__flash {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: 1.5rem;
    background: var(--mc-sun);
    color: var(--mc-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: var(--mc-pill);
    transform: rotate(4deg);
}

/* ---------- product card ---------- */

.mc-product { display: flex; flex-direction: column; height: 100%; }

.mc-product__media {
    position: relative;
    display: block;
    border-radius: var(--mc-round);
    overflow: hidden;
    background: var(--mc-tint);
    aspect-ratio: var(--mc-card-ratio, 3 / 4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-product:hover .mc-product__media { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(58, 56, 64, 0.16); }

/* How many are left, said out loud. Grey "low stock" text is an apology;
   this shop sells one of each on purpose. */
.mc-product__left {
    position: absolute;
    top: 0.7rem;
    inset-inline-start: 0.7rem;
    background: var(--mc-sun);
    color: var(--mc-ink);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: var(--mc-pill);
}

.mc-product__left--gone { background: var(--mc-ink); color: #FFFFFF; }

/* The name in quotation marks, pulled out above the garment. Every piece
   here is cast as a person and the shop is called Main Character, so the
   name is the headline and the garment is the description. */
.mc-product__character {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mc-blush);
}

.mc-product__name {
    font-family: var(--mc-display);
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0.2rem 0 0;
}

.mc-product__name a { color: inherit; text-decoration: none; }
.mc-product__name a:hover { color: var(--mc-blush); }
.mc-product__price { margin-top: 0.35rem; font-size: 0.9375rem; font-weight: 600; }
.mc-product__was { margin-inline-start: 0.4rem; color: var(--mc-muted); font-weight: 400; font-size: 0.8125rem; text-decoration: line-through; }
.mc-product__sizes { margin-top: 0.7rem; }
.mc-product__foot { margin-top: auto; padding-top: 0.9rem; }

/* ---------- episodes ---------- */

.mc-episode {
    position: relative;
    display: block;
    border-radius: var(--mc-round);
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    background: var(--mc-ink);
}

/* The collection artwork on this shop is square or 4:5 with the title
   painted into it, so the picture sets the shape. A square tile shows the
   square art whole and takes a fifth off the top and bottom of the 4:5
   ones, which is the crop that costs the least lettering. */
.mc-episode img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* Clear of the top half. The old veil hazed the whole tile and turned
   pastel artwork grey; this one only darkens where the caption sits. */
.mc-episode__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32, 30, 36, 0.82) 0%, rgba(32, 30, 36, 0.45) 22%, rgba(32, 30, 36, 0) 50%); }
/* Nothing under the picture but the episode pill, which carries its own
   mint background, so the scrim only has to lift the very bottom edge. */
.mc-episode--bare .mc-episode__veil { background: linear-gradient(to top, rgba(32, 30, 36, 0.5) 0%, rgba(32, 30, 36, 0) 30%); }
.mc-episode__body { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(1.25rem, 3vw, 2rem); }

/* Episode one, episode two. The shop already titles its collections this
   way, so numbering them is reading the data rather than decorating it. */
.mc-episode__no {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--mc-mint);
    color: var(--mc-ink);
    padding: 0.3rem 0.7rem;
    border-radius: var(--mc-pill);
    margin-bottom: 0.7rem;
}

.mc-episode__title { font-family: var(--mc-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin: 0; }
/* Three across is a narrower tile, and this artwork already carries the
   collection name in its own lettering. Display size here fought it and
   wrapped every title onto two lines, so at three the caption steps back. */
.mc-grid--3 .mc-episode__title { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.25; }
.mc-grid--3 .mc-episode__body { padding: clamp(0.9rem, 1.6vw, 1.25rem); }
.mc-episode__text { margin: 0.4rem 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); }

/* ---------- style it with ---------- */

.mc-outfit { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

@media (min-width: 48rem) {
    .mc-outfit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A plus between the pieces, because they are an outfit rather than a list.
   Decorative, so it is hidden from anything reading the page aloud. */
.mc-outfit__plus {
    display: none;
    align-self: center;
    font-family: var(--mc-display);
    font-size: 1.5rem;
    color: var(--mc-blush);
    text-align: center;
}

@media (min-width: 48rem) {
    .mc-outfit--plus { grid-template-columns: 1fr auto 1fr auto 1fr; }
    .mc-outfit__plus { display: block; }
}

/* ---------- letter ---------- */

.mc-letter { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }

@media (min-width: 52rem) {
    .mc-letter { grid-template-columns: 0.8fr 1fr; }
}

.mc-letter__photo { border-radius: var(--mc-round); overflow: hidden; aspect-ratio: 3 / 4; background: var(--mc-tint); }
.mc-letter__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-letter__open { font-family: var(--mc-display); font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.3; margin: 0 0 1rem; }
.mc-letter__sign { font-family: var(--mc-display); font-style: italic; font-size: 1.25rem; margin-top: 1.5rem; color: var(--mc-blush); }

/* ---------- newsletter ---------- */

/* Wide enough for the heading to hold one line. At 34rem "Know before
   everybody else" wrapped, and the wording is a setting now, so the panel
   has to give a sentence somewhere to sit. The form keeps its own measure,
   because a single email field stretched across the whole panel reads as a
   mistake. */
.mc-news { text-align: center; max-width: 46rem; margin-inline: auto; }
.mc-news > h2 { text-wrap: balance; }
.mc-news__form { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; max-width: 30rem; margin-inline: auto; }
.mc-news__form .mc-field { flex: 1 1 14rem; }

/* ---------- product page ---------- */

.mc-pdp { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

@media (min-width: 58rem) {
    .mc-pdp { grid-template-columns: 1.15fr 1fr; }
    .mc-pdp__detail { position: sticky; top: calc(var(--mc-header) + 1.5rem); }
}

/* Stacked rather than a carousel. A phone scrolls a stack naturally and
   nobody has to find an arrow. */
.mc-pdp__gallery { display: grid; gap: 0.75rem; }
.mc-pdp__gallery img { width: 100%; border-radius: var(--mc-round); display: block; background: var(--mc-tint); }

.mc-pdp__character { color: var(--mc-blush); }
.mc-pdp__title { font-family: var(--mc-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0.25rem 0 0; }
.mc-pdp__price { font-size: 1.375rem; font-weight: 600; margin-top: 0.75rem; }
.mc-pdp__stock { margin-top: 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--mc-ink); }
.mc-pdp__stock--low { color: #B4651F; }
.mc-pdp__stock--gone { color: var(--mc-muted); }
.mc-pdp__block { margin-top: 1.75rem; }

/* ---------- a page of words ---------- */

/* The only section in this theme that is just prose. Left aligned, because
   a centred paragraph of any length is hard to read, and the rule under the
   heading starts at the text rather than sitting in the middle. */
.mc-story__heading { margin-top: 0.35rem; }
.mc-rule--start { margin-inline: 0; }
.mc-story__body { margin-top: 1.5rem; }
.mc-story__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- footer ---------- */

/* Not four columns. The shop has eight pages; four columns of links would
   be three columns of padding. */
.mc-footer { margin-top: clamp(3rem, 6vw, 5rem); }

/* Every page of this shop ends in a section carrying its own bottom
   padding, so the margin above showed up as a stripe of page background
   between two blocks of colour. Most visible on a product page, where the
   blush of "More from this drop" stops, a band of paper runs across, and
   the mint of the newsletter starts.

   Matched on the element rather than on the mc-band class, which is how
   this came back a second time: the generic Call To Action closing the
   terms and shipping pages is a section without that class, so the stripe
   reopened under "Questions About These Terms?". Every section in this
   theme and in the page builder brings padding of its own, so the element
   is the honest test and the class was an accident of which sections
   existed on the day. */
main:has(> section:last-child) + .mc-footer,
main:has(> .mc-doc-sections:last-child > section:last-child) + .mc-footer { margin-top: 0; }

.mc-footer__panel { background: var(--mc-mint-wash); padding-block: var(--mc-band); }
.mc-footer__base { padding-block: clamp(2rem, 4vw, 3rem); text-align: center; }
.mc-footer__badge img { height: 72px; width: auto; display: inline-block; }
.mc-footer__tagline { font-family: var(--mc-display); font-style: italic; color: var(--mc-muted); margin: 0.75rem 0 0; }
.mc-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.mc-footer__links a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-ink); text-decoration: none; }
.mc-footer__links a:hover { color: var(--mc-blush); }
.mc-footer__social { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.mc-footer__small { margin: 0; font-size: 0.75rem; color: var(--mc-muted); }

/* The last line. One row on a desktop, stacked and centred on a phone,
   where three things side by side would each be two words wide. */
.mc-footer__legal {
    border-block-start: 1px solid var(--mc-line);
    padding-block: 1.25rem;
    font-size: 0.75rem;
    color: var(--mc-muted);
}
.mc-footer__legal .mc-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    text-align: center;
}
.mc-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.mc-footer__legal a { color: var(--mc-muted); text-decoration: none; }
.mc-footer__legal a:hover { color: var(--mc-blush); text-decoration: underline; }
.mc-footer__credit { color: var(--mc-muted); }

@media (min-width: 48rem) {
    .mc-footer__legal .mc-wrap { justify-content: space-between; text-align: start; }
}

/* ---------- the platform's generic content sections ---------- */

/* The shipped legal and information pages are built from these. Only Text
   and Call To Action are drawn by this theme; the rest fall back to the
   default theme's, which carry their own utility classes.

   Terms is fifteen Text sections and privacy fourteen, so what matters here
   is the rhythm between clauses rather than how any one of them looks.
   Each section brings its own padding from its space_above and space_below
   settings; everything below is about making a long document scannable. */
.mc-h4 { font-family: var(--mc-display); font-weight: 600; line-height: 1.2; font-size: 1.0625rem; margin: 0; }

/* A clause heading sits close to its own words and well clear of the clause
   before it, which is the whole trick with a stacked document: the space
   has to belong to the heading below it, not float between the two. */
.mc-doc__heading { margin-top: 0; }
.mc-doc__heading + .mc-doc__body { margin-top: 0.9rem; }

/* A measure, and a little more line height than the shop pages use. Legal
   copy is read slowly and in full, or not at all. */
.mc-doc__body { line-height: 1.75; }
/* The reading measure, applied only when the merchant asks for it. This used
   to be on .mc-doc__body unconditionally, so a section set to Wide drew a
   wide band with a narrow column of text inside it, which reads as hard line
   breaks. The control for this is Line Length, and it was declared and never
   read. */
.mc-doc__body--measured { max-width: 68ch; }
.mc-text-center .mc-doc__body, .mc-text-end .mc-doc__body { margin-inline: auto; }

/* A hairline above every clause but the first. Fifteen headings in Playfair
   with nothing between them reads as one long ramble; one line each turns it
   into a list of things you can find. */
.mc-doc + .mc-doc .mc-doc__heading::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--mc-line);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* The opening paragraph, the one carrying "Last updated", has no heading of
   its own, so it needs the separation the heading would have given it. */
.mc-doc:first-of-type .mc-doc__body { color: var(--mc-muted); }

/* Lists in a legal document are most of the document. The default bullet
   sits too tight to be read as a set of separate obligations. */
.mc-doc__body ul, .mc-doc__body ol { padding-inline-start: 1.35em; }
.mc-doc__body li + li { margin-top: 0.5em; }
.mc-doc__body strong { color: var(--mc-ink); }
.mc-text-center { text-align: center; }
.mc-text-end { text-align: end; }
.mc-text-center .mc-rule, .mc-text-center .mc-prose { margin-inline: auto; }
.mc-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

/* The band that closes most of the information pages. It is the last thing
   somebody reads after a page of small print, so it is tinted rather than
   left on paper: it should look like an offer of help, not another clause. */
.mc-cta { border-radius: 0; }
.mc-cta .mc-lede { margin-top: 0.75rem; }

/* ---------- the pages every shop shares ---------- */

/* The basket, the account and the invoice page are shared platform markup
   in utility classes, and they open on a grey card deck: `min-h-screen
   bg-gray-50`. Against this shop's white paper and blush that grey reads as
   a different site rather than a different page, so it is turned off here
   rather than in the shared template, which belongs to every shop.

   Scoped to this theme's body class, so changing theme takes it with it.
   This is the same move `storefront-dark.css` makes for dark mode. */
body.mc-body .min-h-screen.bg-gray-50 { background-color: #FFFFFF; }

/* ---------- the menu behind the burger ---------- */

/* The bottom bar carries the four places a thumb wants. Everything else in
   the header menu lives in here, because four destinations is a bar and
   seven is a menu again. */
.mc-mobnav__veil {
    position: fixed;
    inset: 0;
    background: rgba(58, 56, 64, 0.45);
    z-index: 60;
}

.mc-mobnav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(20rem, 86vw);
    background: var(--mc-paper);
    z-index: 61;
    display: flex;
    flex-direction: column;
    padding: 1.25rem var(--mc-gutter) 1.5rem;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(58, 56, 64, 0.18);
}

.mc-mobnav__top { display: flex; align-items: center; justify-content: space-between; }
.mc-mobnav__close { background: none; border: 0; color: var(--mc-ink); cursor: pointer; display: inline-flex; padding: 0.25rem; }

.mc-mobnav__links { display: flex; flex-direction: column; margin-top: 1.75rem; }
.mc-mobnav__links a {
    font-family: var(--mc-display);
    font-size: 1.375rem;
    color: var(--mc-ink);
    text-decoration: none;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--mc-line);
}
.mc-mobnav__links a:last-child { border-bottom: 0; }
.mc-mobnav__links a:hover { color: var(--mc-blush); }

.mc-mobnav__foot { margin-top: auto; padding-top: 1.5rem; }
.mc-mobnav__foot a {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mc-muted);
    text-decoration: none;
}

/* Written out rather than left to utility classes: this stylesheet is not
   generated from the templates, so a class the build has never seen does
   nothing at all. */
.mc-fade-enter { transition: opacity 0.25s ease; }
.mc-fade-from { opacity: 0; }
.mc-slide-enter { transition: transform 0.25s ease; }
.mc-slide-from { transform: translateX(-100%); }

/* ---------- checkout ---------- */

/* The checkout is shared platform markup in utility classes and is not
   themed beyond colour, deliberately: a shop should not be able to break
   the one page that takes the money. Only the badge in its header is ours. */
.mc-checkout__badge img { height: 40px; width: auto; display: block; }
.mc-checkout__badge-text { font-family: var(--mc-display); font-size: 1.125rem; font-weight: 600; color: var(--mc-ink); }

/* ---------- odds ---------- */

.mc-note { background: var(--mc-tint); border-radius: var(--mc-round); padding: 1.25rem 1.5rem; }
.mc-empty { text-align: center; color: var(--mc-muted); padding-block: clamp(2rem, 5vw, 4rem); }
.mc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--mc-blush);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Nobody who asked not to be moved should be. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .mc-btn:hover, .mc-product:hover .mc-product__media { transform: none; }
}

/* --------------------------------------------------------------------------
   Generic sections, in this theme's voice

   A theme only overrides the platform sections worth drawing its own way, and
   the rest fall back to the default theme's partials. Those set their
   headings in a bold sans, so a shipped page such as the returns policy came
   out half in Playfair and half in Figtree: "Return Policy" and "Still Not
   Sure?" in the theme's face, and "What Can Be Returned", "How to Return an
   Item" and "Refunds" in another one.

   Rather than reimplement seven partials, any heading in a built page that is
   not already one of this theme's takes this theme's face. Unlayered on
   purpose: Tailwind keeps its utilities in @layer utilities, and an unlayered
   rule beats a layered one whatever its specificity.
   -------------------------------------------------------------------------- */
.mc-doc-sections :is(h1, h2, h3, h4):not([class*="mc-h"]):not(.mc-eyebrow) {
    font-family: var(--mc-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* The title of a page built from sections.

   Drawn first as a full band with the hero's own h1 size, which was too much
   of both: 3.5rem of type with up to 6.5rem of air above it, then the head's
   own margin and the next band's padding under it. A document's title wants
   to introduce the page, not open it like a hero.

   Smaller than the hero and larger than a section heading, with the first
   band opening tighter beneath so the two read as one piece rather than a
   title marooned above a gap. */
.mc-page-head {
    text-align: center;
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}

.mc-page-title {
    margin: 0;
    font-family: var(--mc-display);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.mc-page-head .mc-rule { margin-top: 1rem; }

/* The gap under the title is the first section's own Space Above, and
   nothing here overrides it.

   A rule tightening that first section was tried and removed: at three
   classes against the one on mc-band--pt-sm it beat every answer the
   control could give, so Space Above did nothing at all on the first
   section of every built page. A theme may not quietly win an argument
   with a control it put in front of the merchant. */

/* A head that introduces a list rather than opening a page. The full margin
   is right under a homepage band and too much above a row of chips and a
   grid, which between them already carry half a band each. */
.mc-head--tight { margin-bottom: clamp(1rem, 2vw, 1.5rem); }


/* The middle of the four spacing answers, which the band markup never drew.
   Between Small and the full band, so the four choices are four heights. */
.mc-band--pt-md { padding-block-start: clamp(2.25rem, 5vw, 4rem); }
.mc-band--pb-md { padding-block-end: clamp(2.25rem, 5vw, 4rem); }