/* Mira Creative Studio - base styles. Plain CSS, no framework.
   Structure copied from the sibling MiraPlus site and re-themed; see the
   brand palette and contrast rules below. */

/* Mira Creative Studio brand palette.
   CONTRAST RULES (measured against warm white) — follow these or the site
   fails WCAG AA. Only charcoal and royal purple are safe as TEXT:
     charcoal 12.0:1 ok | purple 8.9:1 ok | fuchsia 4.1:1 large/bold only
     turquoise 2.2:1, green 2.4:1, gold 2.0:1 -> DECORATIVE ONLY, never text.
   Text ON the colours flips: charcoal on turquoise/green/gold (5-6:1),
   white on fuchsia. --color-accent is Pink 700, the AA-safe fuchsia for
   buttons and links (white on it ~5.7:1). */
:root {
    --color-text: #333333;          /* charcoal — body text */
    --color-muted: #666666;
    --color-bg: #faf9f6;            /* warm white */
    --color-surface: #f2f2f2;       /* light grey — cards, panels */
    --color-border: #e3e1dc;
    --color-primary: #6a1b9a;       /* royal purple — links, headings */
    --color-primary-dark: #4a148c;
    --color-accent: #c2185b;        /* buttons (white text, AA) */
    --color-accent-dark: #a01449;
    --color-accent-text: #ffffff;
    --color-fuchsia: #e91e63;       /* brand fuchsia — display text, decoration */
    --color-turquoise: #00bcd4;     /* decorative */
    --color-green: #7cb342;         /* decorative */
    --color-gold: #d4af37;          /* decorative */
    --color-orange: #c2185b;        /* legacy token kept so copied rules resolve */
    --color-dark: #4a148c;          /* hero / footer background */
    --color-dark-2: #6a1b9a;
    --color-on-dark: #faf9f6;
    --color-mint: #00bcd4;          /* bright highlight on dark */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 0 0 0.6em;
}

a {
    color: var(--color-primary-dark);
}

/* Keyboard focus. The stylesheet previously had no :focus rules at all, so
   anyone navigating by Tab relied on the browser's default ring — which
   several browsers draw in a colour that disappears against our backgrounds.
   :focus-visible (not :focus) shows the ring for keyboard and AT users
   without leaving one behind after a mouse click. */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Royal purple is invisible on the purple header, hero and footer, so those
   flip to the bright turquoise. It's decorative-only for TEXT (2.2:1), but a
   focus ring is a non-text indicator and only needs 3:1 — against the dark
   purple it clears that comfortably. */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
    outline-color: var(--color-mint);
}

/* Skip link: the first thing a keyboard or screen-reader user reaches, so
   they can jump past the nav instead of tabbing it on every page. Hidden
   off-screen until focused (never display:none — that would drop it out of
   the tab order entirely, which is the whole point of it). */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.7rem 1.2rem;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
    transform: translateY(-130%);
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Target of the skip link — moving focus to a non-focusable element is
   ignored by some browsers, hence tabindex="-1" in the template; this hides
   the ring that would otherwise draw around the whole page. */
main:focus {
    outline: none;
}

/* Respect the OS "reduce motion" setting: the site's hover/transition
   flourishes are decoration, and can be uncomfortable or disorienting. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 3rem 1.5rem;
}

/* Header */
.site-header {
    background: var(--color-dark);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.brand img {
    height: 48px;
    width: auto;
}

.brand-name {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-mint);
}

/* Second half of the wordmark. Gold, NOT --color-accent: the accent pink is
   AA-safe on warm white but only 2.0:1 on this dark purple header — the
   contrast flips with the background, which is the trap the palette comment
   at the top of this file warns about. Gold is 5.6:1 here; turquoise "Mira"
   is 5.2:1. (Inherited from MiraPlus, where the same rule used gold on a
   near-black teal header and passed.) */
.brand-name .plus {
    color: var(--color-gold);
}

.main-nav a {
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--color-on-dark);
    font-weight: 500;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--color-mint);
}

/* Hero — a purple gradient in the brand colours. (MiraPlus used a photo here;
   swap in a real MCS image later by adding a background-image above the
   gradient.) */
.hero {
    position: relative;
    overflow: hidden;
    /* Three layers, first painted on top: decorative brush edge on the left,
       photo on the right, gradient underneath filling whatever is left. Both
       images are scaled to the hero's height and pinned to their own edge, so
       the middle stays gradient for the headline to sit on. */
    /* Held in a variable because the narrow-screen rule below repeats it —
       two literal copies would drift the moment one is retuned. */
    --hero-gradient: linear-gradient(135deg, #d5b4ef 0%, #ebbcd6 55%, #f7d2b0 100%);
    background-image:
        url("../images/hero-banner-l.a0cd4e022282.webp"),
        url("../images/hero-banner-r.d06745d8f573.webp"),
        var(--hero-gradient);
    background-repeat: no-repeat;
    background-position: left center, right center, center;
    background-size: auto 100%, auto 100%, cover;
    /* Pastel background means DARK text: white measured 2.1:1 on these tints.
       Charcoal is 10:1+ here, and stays legible over the photo behind the
       text plates below. */
    color: var(--color-text);
    padding: 6rem 1.5rem;
    /* Copy sits to the left rather than centred, which also keeps it clear of
       the photo anchored on the right. Re-centred on narrow screens, where the
       hero is a single column and there is nothing to sit beside. */
    text-align: left;
}

/* Translucent plate behind the hero copy, so it stays readable where it
   crosses the photo. 0.58 is the practical floor, set by the lead paragraph:
   body text needs 4.5:1, and over the photo's darkest pixels this lands at
   4.9:1 — at 0.55 it drops to 4.49 and fails. The headline has more room
   (large text only needs 3:1) but shares the value so the two plates match. */
.hero .hero-inner h1,
.hero-lead {
    background: rgba(255, 255, 255, 0.58);
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
}

/* Narrow screens keep the photo at full hero height rather than shrinking it
   to a band. Anchored to its LEFT edge, so it runs off the right of the
   viewport and the cropping happens on that side — the group of makers, which
   sits centre-left in the frame, stays in view. The photo's own left edge is
   feathered, so it fades into the gradient instead of butting against it.

   Legibility over the photo is handled by the text plates above, which hold
   4.5:1 even against its darkest pixels. The left brush stays dropped: it's an
   edge treatment that only reads in a wide layout. */
@media (max-width: 1100px) {
    .hero {
        background-image:
            url("../images/hero-banner-r.d06745d8f573.webp"),
            var(--hero-gradient);
        background-position: left center, center;
        background-size: auto 100%, cover;
    }
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* Headline + big logo side by side; lead text and buttons follow
   centered underneath (stacks on mobile) */
.hero-inner {
    display: flex;
    /* Logo left, headline right. Reversed in CSS rather than in the markup so
       the <h1> stays first in the DOM — screen readers and search engines
       should still meet the heading before the decorative logo. Reversed also
       means flex-end is the LEFT edge, which is what pins the pair leftward. */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* .hero .hero-inner h1 outranks the generic .hero h1 rule further down
   (which sets rise-in + auto margins for the single-column layout) */
.hero .hero-inner h1 {
    flex: 0 1 380px;
    max-width: 380px;
    margin: 0;
    text-align: left;
    animation: slide-in-right 0.7s ease both;
}

.hero-logo {
    flex: 0 0 auto;
    /* Same translucent plate as the hero copy, as a circle rather than a baked
       opaque disc — one value to tune, and the gradient shows through. */
    background: rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    animation: slide-in-left 0.7s ease both;
}

.hero-logo img {
    /* block, not inline: the baseline gap under an inline image would make the
       circular background a few pixels taller than wide, i.e. an ellipse. */
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
}

@media (max-width: 800px) {
    /* Single column here, so there is nothing for the copy to sit beside —
       re-centre it rather than leaving it hanging off the left edge. */
    .hero {
        text-align: center;
    }

    .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-inner {
        flex-direction: column;
        gap: 1rem;
    }

    .hero .hero-inner h1 {
        /* Reset the 380px flex-basis: in a column it would become a
           380px-tall box, leaving a big gap above the logo. */
        flex: none;
        max-width: 100%;
        text-align: center;
    }

    .hero-logo img {
        width: 260px;
        max-width: 70vw;
    }
}

.hero-shape {
    position: absolute;
    left: 0;
    right: 0;
    line-height: 0;
    z-index: 1;
}

.hero-shape svg {
    display: block;
    width: 100%;
}

.hero-shape-top {
    top: 0;
}

.hero-shape-top svg {
    height: 170px;
    fill: var(--color-dark); /* curves flow out of the dark header */
}

.hero-shape-bottom {
    bottom: 0;
}

.hero-shape-bottom svg {
    height: 120px;
    fill: #ffffff; /* waves ease into the white page below */
    transform: rotate(180deg); /* paths fill upward; bottom shapes are flipped */
}

.hero h1 {
    font-size: 2.3rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-dark);
    animation: rise-in 0.6s ease both;
}

.hero-lead {
    max-width: 640px;
    margin: 0 0 1.75rem;
    color: var(--color-text);
    animation: rise-in 0.6s ease 0.15s both;
}

/* Intro line under a page heading, on the normal (light) background. */
.section-intro {
    max-width: 640px;
    margin: 0 0 1.75rem;
    color: var(--color-muted);
    font-size: 1.1rem;
}

.hero .btn {
    animation: rise-in 0.6s ease 0.3s both;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero-lead, .hero .btn, .hero-logo {
        animation: none;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    margin: 0.3rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.btn-primary:hover {
    background: var(--color-accent-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* A button that reads as an inline text link (e.g. "Edit details",
   "Remove"). */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary-dark);
    text-decoration: underline;
    cursor: pointer;
}

.btn-link:hover {
    color: var(--color-primary);
}

/* Collapsed customer details on checkout, shown to registered customers
   in place of the full form until they choose to edit. */
.detail-summary {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface);
}

.detail-summary-lines {
    margin: 0 0 0.5rem;
}

/* Filled green button for switching payment method (to Swish / to card) —
   visible on white, and clearly distinct from the gold primary "Pay now". */
.btn-alt {
    background: var(--color-primary);
    color: #ffffff;
}

.btn-alt:hover {
    background: var(--color-primary-dark);
}

/* Space above a payment-method switch button. */
.swish-switch {
    margin-top: 1rem;
}

/* The hero is pastel now, so the old white-on-dark treatment would have left
   this button invisible — white text and a white border on a near-white
   background. Purple reads 9.8:1 there. */
.hero .btn-secondary {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    background: rgba(255, 255, 255, 0.6);
}

.hero .btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Each intent section (Book a session / Prepaid cards / Partner products)
   is set apart by a rule and extra space, so it's clear where one section
   ends and the next begins. The first section needs no rule — the page
   intro above it already separates it. */
.product-group {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.product-group:first-of-type {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: none;
}

/* Short brand-coloured accent under a section title, to anchor the start of
   the section. Shared by the product sections and the section subtitles on
   the account / checkout / profile / contact pages (direct-child h2 only,
   so markdown headings inside .prose are left alone). */
.product-group-title,
.page-detail > h2 {
    display: inline-block;
    padding-bottom: 0.35rem;
    border-bottom: 3px solid var(--color-primary);
}

/* More room above each section subtitle (to separate sections) and less
   below (to keep the heading tight to its content). */
.page-detail > h2 {
    margin-top: 2rem;
    margin-bottom: 0.3em;
}

/* Sub-heading for a category within a section (e.g. the coaching types
   shown under "Book a session"). */
.subcategory {
    font-size: 1.2rem;
    margin: 1.75rem 0 0;
    color: var(--color-muted);
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0 2.5rem;
}

/* Tighten the gap between a sub-category heading and its cards. */
.subcategory + .card-grid {
    margin-top: 0.75rem;
}

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--color-surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(6, 35, 31, 0.10);
}

/* Centres the content inside a card (heading, text, buttons).
   Use as <div class="card card-centered">; works in a grid too. */
.card-centered {
    text-align: center;
}

.card h3 {
    font-size: 1.1rem;
}

.card h3 a {
    text-decoration: none;
    color: var(--color-text);
}

.card h3 a:hover {
    color: var(--color-primary-dark);
}

.card ul {
    padding-left: 1.2rem;
    margin: 0 0 0.8rem;
}

.card ul li {
    margin-bottom: 0.4rem;
}

/* Content images (products, blog) are never cropped — product shots and
   badges carry detail/text that a crop would slice off. Show the whole
   image, letterboxed on the surface colour. */
.card-image,
.detail-image {
    object-fit: contain;
    background: var(--color-surface);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

/* Thumbnail: uniform frame so the grid stays tidy. */
.card-image {
    width: 100%;
    height: 230px;
}

/* Detail: natural aspect ratio, height-capped, and width-matched to the
   720px .prose text column (it sits outside .prose so wouldn't inherit it). */
.detail-image {
    display: block;
    width: auto;
    max-width: min(100%, 720px);
    height: auto;
    max-height: 420px;
}

.meta {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

.price {
    font-weight: 700;
    margin: 0.4rem 0;
}

.price-original {
    text-decoration: line-through;
    color: var(--color-muted);
    font-weight: 400;
    margin-right: 0.5rem;
}

.price-sale {
    color: var(--color-orange);
}

.notice {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1rem;
}

/* Featured post block (homepage): image left, text right */
.featured-press {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    margin-top: 2rem;
    padding: 2.5rem;
}

.featured-press img {
    flex: 0 0 auto;
    max-width: 280px;
    height: auto;
    border-radius: var(--radius);
}

.featured-press .featured-press-text {
    flex: 1;
    text-align: left;
}

@media (max-width: 700px) {
    .featured-press {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .featured-press .featured-press-text {
        text-align: center;
    }

    .featured-press img {
        max-width: 220px;
    }
}

/* Page/blog detail.

   The 720px reading measure is applied to the TEXT elements rather than to
   the wrapper. A card grid is layout, not prose: three 250px cards plus
   their gaps need 798px, so inside a 720px column the third card wrapped
   onto a second row. Capping the children instead lets grids spread to the
   container's full width (~1052px, so 3x334px) while paragraphs keep a
   comfortable line length. Markdown puts images inside a <p>, so they stay
   capped with the text. */
.page-detail .prose,
.prose {
    max-width: none;
}

.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > details,
.prose > table {
    max-width: 720px;
}

.prose p {
    margin: 0 0 1em;
}

.prose h2 {
    margin-top: 1.6em;
    color: var(--color-primary-dark);
}

.prose h3 {
    margin-top: 1.3em;
}

.prose img {
    max-width: 100%;
    border-radius: var(--radius);
}

.prose blockquote {
    border-left: 4px solid var(--color-mint);
    margin: 1em 0;
    padding: 0.2em 1em;
    background: var(--color-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Accordions (<details> in Markdown content) */
.prose details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin: 0 0 0.8rem;
    background: var(--color-bg);
}

.prose details[open] {
    background: var(--color-surface);
}

.prose summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Booking availability */
.practitioner-picker,
.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.chip {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    text-decoration: none;
    font-weight: 500;
}

a.chip:hover,
button.chip:hover {
    border-color: var(--color-primary);
}

button.chip {
    font: inherit;
    cursor: pointer;
}

.slot-form {
    display: inline;
}

.chip-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.day-row {
    border-top: 1px solid var(--color-border);
    padding: 0.8rem 0 0.4rem;
}

.day-label {
    margin: 0;
    font-size: 1rem;
    color: var(--color-primary-dark);
}

.pager {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

/* Messages */
.message {
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin: 1rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.message-success {
    border-left: 4px solid var(--color-primary);
}

.message-error {
    border-left: 4px solid var(--color-orange);
}

/* Promotions */
.campaign-banner {
    background: var(--color-accent);
    color: var(--color-accent-text);
    padding: 0.7rem 1.5rem;
    text-align: center;
    font-size: 0.95rem;
}

.campaign-banner a {
    color: var(--color-accent-text);
}

.promo-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.8rem;
    font-weight: 600;
}

.promo-form {
    margin: 1.5rem 0;
}

/* "Coming soon" chip next to a heading (e.g. the Mira Creative Studio teaser). */
.badge-soon {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Simple prev/next pager (e.g. the account order history). */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.pagination .disabled {
    color: var(--color-muted);
}

.pagination-status {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Neutral pill label, e.g. marking a gifted / booked-on-behalf order on
   the account page. */
.tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Quiet "cancel this order" action under the payment options. */
.cancel-order-form {
    margin-top: 1.5rem;
}

.inline-form input[type="text"] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
}

.inline-form .btn {
    margin: 0;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* Cart */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.cart-table th,
.cart-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
}

.cart-table th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
}

/* A gift note sits in its own full-width row under its order, so it doesn't
   stretch the Order column. Attach it to the order above by dropping that
   row's bottom border and the note's top padding. */
.cart-table tr.has-gift-note td {
    border-bottom: none;
}

.cart-table tr.gift-row td {
    padding-top: 0.2rem;
}

.cart-table tr.gift-row .tag {
    margin-left: 0;
}

/* Stripe payment form */
.payment-form {
    max-width: 480px;
    margin: 1rem 0 2rem;
}

.payment-form .btn {
    margin: 1rem 0 0;
    border: 0;
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.payment-form .btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Checkout form */
.checkout-form {
    max-width: 420px;
}

.checkout-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.checkout-form input[type="checkbox"] {
    width: auto;
    margin-right: 0.4rem;
}

.checkout-form input,
.checkout-form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
}

/* Honeypot: moved off-screen (not display:none — some bots skip those) */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-block {
    margin-top: 2.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    max-width: 720px;
}

.checkout-form .helptext {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.checkout-form .btn {
    margin: 0.8rem 0 0;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-orange);
    text-decoration: underline;
    cursor: pointer;
}

/* Footer */
.site-footer {
    background: var(--color-dark);
    color: var(--color-on-dark);
    margin-top: 3rem;
}

.site-footer a {
    color: var(--color-mint);
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    padding: 2.5rem 1.5rem;
}

.footer-col h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-accent);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.4rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    color: var(--color-on-dark);
}