/* ===========================================================================
   XAMLIN ART — storefront repair layer
   ---------------------------------------------------------------------------
   Loaded after each page's inline <style>, so equal-specificity rules here
   win on document order. It fixes three measured defects and nothing else:

     1. #d4a574 measures 2.23:1 as text on white. AA needs 4.5:1, and the gold
        carries every price, every gold link and several primary buttons.
     2. Controls on phones are smaller than the 44px guideline — down to a
        13x16px consent checkbox.
     3. Badge text is set at 9px, below any readable minimum, in white on
        backgrounds that reach at most 3.8:1.

   Nothing here changes layout structure. Controls and link rows get taller,
   which is the intended effect.
   ========================================================================= */

:root {
    /* The same gold, taken down until it carries text: 5.4:1 on white,
       5.1:1 on the #f8f9fa navigation bar. Matches the admin's --gold-text,
       so both halves of the product now use one accessible gold. */
    --accent-ink: #8a6234;

    /* --success #10b981 has the same fault as the gold: fine as a fill,
       2.3–2.5:1 as text. This one carries words; the bright one stays for
       fills, dots and icons. 5.3:1 on white. */
    --success-ink: #0e7a55;

    /* Badge grounds, each reaching at least 5:1 with white text. */
    --badge-featured-a: #a8480d;
    --badge-featured-b: #96351d;
    --badge-new: #0e7a55;
    --badge-sale: #c22a2a;
    --badge-sold: #b3251f;

    /* Smallest interface text and smallest control. */
    --min-text: 0.75rem;     /* 12px */
    --tap: 44px;
}

/* ---------------------------------------------------------------------------
   1a. Gold as a text colour
   Prices, values and links only. Gold icons, list markers and timeline dots
   are decorative and keep the light tone.
   ------------------------------------------------------------------------- */
.artwork-price,
.product-price,
.quick-view-price,
.search-result-price,
.item-price,
.item-medium,
.result-price,
.zone-cost,
.shipping-time,
.order-number,
.order-number-badge,
.applied-coupon-code,
.pricing-row.total .pricing-value,
.contact-info-box a,
.highlight-box a,
.checkbox-label a,
.currency-option.active,
.mobile-currency-option.active {
    color: var(--accent-ink);
}

.breadcrumb a:hover,
.btn-secondary:hover,
.category-chip:hover,
.subcategory-chip:hover,
.connect-foot a:hover,
.continue-shopping:hover,
.info-content a:hover,
.mobile-currency-option:hover,
.currency-selector:hover {
    color: var(--accent-ink);
}

/* Free-shipping and success wording, same treatment as the gold. */
.shipping-free,
.summary-row.discount,
.total-row.shipping,
.current-status,
.form-message.success,
.zone-badge {
    color: var(--success-ink);
}

/* The strikethrough original price sits beside the live one and must stay
   legible rather than fading out. */
.artwork-original-price,
.product-original-price {
    color: var(--neutral-600, #525252);
}

/* ---------------------------------------------------------------------------
   1b. White text on a gold ground
   The gold stays exactly as it is; the text becomes the site's own ink,
   which measures 7.8:1 against #d4a574.
   ------------------------------------------------------------------------- */
.btn-add-cart,
.btn-track,
.calculate-btn,
.cart-count,
.checkout-btn,
.continue-shopping-btn,
.coupon-apply-btn,
.mobile-cart-button,
.subcategory-chip.active,
.suggestion-search-btn,
.form-submit,
.step-number,
.info-icon,
.history-icon,
.quick-view-button:hover,
.copy-button:hover,
.option-button.selected {
    color: var(--primary, #1a1a1a);
}

/* Buttons that reuse the gold on hover need the same treatment. */
.btn-add-cart:hover,
.checkout-btn:hover,
.continue-shopping-btn:hover,
.coupon-apply-btn:hover,
.form-submit:hover,
.btn-track:hover,
.calculate-btn:hover {
    color: var(--primary, #1a1a1a);
}

/* Whole panels sit on the gold: the heading and body inside them each set
   their own colour, so the panel and its contents both need remapping. */
.important-notice,
.important-notice h1,
.important-notice h2,
.important-notice h3,
.important-notice h4,
.important-notice p,
.important-notice li,
.important-notice span,
.important-notice a,
.important-notice strong,
.notice-box,
.notice-box h1,
.notice-box h2,
.notice-box h3,
.notice-box h4,
.notice-box p,
.notice-box li,
.notice-box span,
.notice-box a,
.notice-box strong,
.support-card,
.support-card h1,
.support-card h2,
.support-card h3,
.support-card h4,
.support-card p,
.support-card li,
.support-card span,
.support-card a,
.support-card strong,
.zones-table thead,
.zones-table thead th,
.shipping-card.featured::before {
    color: var(--primary, #1a1a1a);
}

/* The advance-payment warning is the one panel that should stay loud, so the
   ground darkens instead of the text: white on #b45309 measures 5:1, against
   2.2:1 on the amber it used. */
.warning-box {
    background: linear-gradient(135deg, #b45309 0%, #9a3412 100%);
}

/* Where the gold ground carries an icon rather than words, keep white:
   a glyph is not text and the shape reads either way. */
.cart-count,
.info-icon svg,
.history-icon svg,
.step-number {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   2. Controls reach 44px
   ------------------------------------------------------------------------- */
.icon-button,
.mobile-menu-button,
.contact-social-link,
.social-link,
.suggestion-search-btn {
    min-width: var(--tap);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.subcategory-chip,
.category-chip,
.sort-select,
.coupon-input,
.coupon-apply-btn,
.suggestion-input,
.btn-primary,
.btn-secondary,
.continue-shopping,
.developer-link,
.form-input,
.form-select,
.form-textarea,
.form-submit,
.search-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
    min-height: var(--tap);
}

/* Inline links become their own row so the whole width is tappable. */
.continue-shopping,
.developer-link {
    display: inline-flex;
    align-items: center;
}

/* A textarea should still be several rows tall. */
.form-textarea,
textarea {
    min-height: 7rem;
}

/* The consent and newsletter boxes were 13x16px. The box itself grows, and
   the label around it becomes the target, which is what actually gets tapped. */
.checkbox-input,
input[type="checkbox"],
input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    accent-color: var(--accent-ink);
    flex-shrink: 0;
}

/* Block, not flex: the consent text is a sentence with links inside it, and
   making the label a flex container turns every word and link into its own
   column. The row still reaches 44px through padding. */
.checkbox-label,
.checkbox-group > label {
    display: block;
    min-height: var(--tap);
    padding-block: 0.65rem;
    cursor: pointer;
}

.checkbox-label > input[type="checkbox"],
.checkbox-label > input[type="radio"],
.checkbox-group > label > input[type="checkbox"],
.checkbox-group > label > input[type="radio"] {
    vertical-align: -0.35em;
    margin-right: 0.55rem;
}

/* The skip link is the first thing a keyboard user reaches. */
a.sr-only,
.skip-link {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
}

/* The wordmark is the link home and was 85x26px. */
.logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

/* Navigation and footer link lists: each row is its own target rather than a
   15px-tall line of text. This makes the mobile footer taller, deliberately. */
.footer-links a,
.nav-links a,
.mobile-nav-link,
.footer-column a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
}

.footer-links a {
    justify-content: center;
}

@media (min-width: 769px) {
    /* On a pointer device the footer reads better as a tighter list. */
    .footer-links a {
        justify-content: flex-start;
        min-height: 2.25rem;
    }
}

/* ---------------------------------------------------------------------------
   3. Interface text stops shrinking below 11px, and the badges it sits in
   get grounds that carry white text.
   ------------------------------------------------------------------------- */
.badge,
.sold-out-label,
.free-badge,
.stock-out,
.artwork-stock {
    font-size: var(--min-text) !important;
    letter-spacing: 0.04em;
}

.badge {
    padding: 4px 10px;
}

.badge-featured {
    background: linear-gradient(135deg, var(--badge-featured-a), var(--badge-featured-b));
    color: #fff;
}

.badge-new {
    background: var(--badge-new);
    color: #fff;
}

.badge-sale {
    background: var(--badge-sale);
    color: #fff;
}

.sold-out-label {
    background: var(--badge-sold);
    color: #fff;
    padding: 6px 12px;
}

.total-row.shipping .free-badge,
.free-badge {
    background: linear-gradient(135deg, var(--badge-new), #046c4e);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   4. Artwork cards become real links
   The card keeps its <div> so the shop's filter and sort code still works;
   the title is now an anchor whose hit area covers the card. Search engines,
   keyboards and middle-click all get a real destination.
   ------------------------------------------------------------------------- */
.artwork-card,
.product-card,
.related-card {
    position: relative;
}

.card-link {
    color: inherit;
    text-decoration: none;
}

.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The quick-view overlay and the badges are already absolutely positioned at
   z-index 5 and 10, so they stay above the card link's z-index 1 without any
   help here. Forcing position on them collapses the overlay to zero height.

   The badges are labels, not controls, and they sit exactly where a thumb
   lands on a phone. Letting taps pass through keeps the whole card tappable,
   which is what the old onclick handler did. */
.product-badges,
.sold-out-label,
.artwork-stock,
.stock-out {
    pointer-events: none;
}

/* A card link is focusable now, so it needs a visible ring. */
.card-link:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 4px;
}

.card-link:focus-visible::after {
    outline: 2px solid var(--accent-ink);
    outline-offset: -2px;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   5. The developer credit
   Every page carried its own copy of these rules, and most also carried a
   mobile override the others did not, so the row rendered at a different size,
   alignment and spacing depending on which page you were on. ProductDetail
   used a different block entirely.

   index.html is the reference. These declarations are deliberately exhaustive:
   anything left unset would fall through to whatever that page happens to
   define, which is how the footers drifted apart in the first place. Child
   selectors are scoped to .developer-content so they outrank the pages' own.
   ------------------------------------------------------------------------- */
.developer-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    row-gap: 0.35rem;
    padding: 0;
    min-height: 45px;
    height: auto;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    white-space: nowrap;
}

.developer-content span,
.developer-content a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 45px;
    margin: 0;
    padding: 0;
}

.developer-content .copyright-text {
    display: inline-flex;
    font-size: inherit;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: inherit;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
    padding: 0;
}

/* The span rule above sets margin: 0, which left the divider touching the
   words on both sides. It needs its spacing back. */
.developer-content .divider {
    display: inline-flex;
    font-size: inherit;
    line-height: 45px;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 12px;
    padding: 0;
}

.developer-content .developer-link {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 12px;
    margin: 0 0 0 10px;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: inherit;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    min-height: var(--tap);
}

/* On the dark footer the light gold is the readable one: 7.8:1 against
   #1a1a1a, where the deepened gold used elsewhere manages only 3.2:1. */
.developer-content .developer-link:hover {
    color: var(--accent);
}

.developer-content .developer-link:hover .developer-logo {
    filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    transform: scale(1.05);
}

.developer-content .developer-link::after {
    display: none;
}

.developer-content .developer-logo {
    width: 45px;
    height: 45px;
    min-width: 45px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.developer-content .developer-name {
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* Below 768px the row cannot fit on one line. Thirteen of the fourteen pages
   already carried this treatment and index.html was the only one without it,
   which is why the main page was the one leaving the divider stranded on a
   line of its own. It is the considered version, so it becomes the shared one:
   stacked, divider dropped, logo nudged left so the name reads as centred. */
@media (max-width: 768px) {
    .developer-content {
        flex-direction: column;
        column-gap: 8px;
        row-gap: 8px;
        text-align: center;
        padding: 0;
        height: auto;
        min-height: 0;
        align-items: center;
        justify-content: center;
        white-space: normal;
        line-height: 1.4;
    }

    .developer-content .copyright-text {
        font-size: 0.8rem;
        line-height: 1.4;
        display: block;
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .developer-content .divider {
        display: none;
    }

    .developer-content .developer-link {
        margin: 0 0 0 -8px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        line-height: 1.4;
    }

    .developer-content .developer-logo {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .developer-content .developer-name {
        font-size: 1.1rem;
        line-height: 1.4;
    }
}