/* ==========================================================================
   AJ & CO — Laravel overlay
   Additions layered over the prototype's style.css, which is carried over
   unchanged so the design stays the design. Everything here either:
     - supplies a class the server-rendered markup needs and the prototype's
       JavaScript used to generate inline, or
     - themes SweetAlert2 to the brand.
   Nothing here restyles an existing component.
   ========================================================================== */

/* ---- Swatch colours the prototype did not need ------------------------- */
.ib-sw--black  { background: linear-gradient(135deg, #2a2a2a, #0d0d0d); }
.ib-sw--red    { background: linear-gradient(135deg, #a2262c, #6d151a); }
.ib-sw--platinum { background: linear-gradient(135deg, #e6e7ea, #b9bcc4); }
.ib-sw--two-tone { background: linear-gradient(135deg, #d9b96c 50%, #dfe1e6 50%); }

/* ---- Wishlist button, now a real form --------------------------------- */
.ib-card-fav-form { position: absolute; top: .625rem; right: .625rem; z-index: 2; margin: 0; }
.ib-card-fav-form .ib-card-fav { position: static; }
.ib-card-fav.is-saved { color: var(--ib-gold, #b8944f); }
.ib-card-fav.is-saved svg { fill: currentColor; }

/* ---- Timeline as an ordered list -------------------------------------- */
.ib-timeline { counter-reset: ib-stage; }
.ib-timeline .ib-timeline-step { display: flex; gap: .875rem; align-items: baseline; padding: .5rem 0; }
.ib-timeline .ib-timeline-step > span {
    font-size: .75rem; letter-spacing: .12em; color: var(--ib-muted, #767676);
    min-width: 2.25rem;
}
.ib-timeline .ib-timeline-step.is-done > span { color: var(--ib-gold, #b8944f); }
.ib-timeline .ib-timeline-step.is-done > strong::after { content: " ✓"; color: #2f6b4f; }

/* ---- Tile and capsule bodies, server-rendered ------------------------- */
.ib-tile-body strong { display: block; color: #fff; font-size: 1.25rem; font-weight: 400; }
.ib-tile-body em {
    display: block; font-style: normal; font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: .25rem;
}
.ib-capsule-body strong { display: block; font-size: 1.0625rem; font-weight: 400; }
.ib-capsule-body em {
    display: block; font-style: normal; font-size: .6875rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ib-muted, #767676); margin-top: .1875rem;
}

/* ---- Filter panel ----------------------------------------------------- */
.ib-filter-group { border: 0; padding: 0 0 1.25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--ib-line, #e2dfda); }
.ib-filter-group:last-of-type { border-bottom: 0; }
.ib-filter-group legend { float: none; width: auto; margin-bottom: .5rem; }
.ib-count-cell { color: var(--ib-muted, #767676); font-size: .8125rem; }
.ib-active-filters { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }

/* ---- Pagination: storefront and studio ------------------------------- */
.ajco-pagination {
    width: 100%; max-width: 54rem; margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    border: 1px solid #dfdbd3; border-top: 2px solid #b8944f;
    background: #fff; color: #121212;
    box-shadow: 0 .85rem 2.5rem rgba(20, 17, 12, .045);
}
.ajco-pagination-summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .72rem 1.15rem; border-bottom: 1px solid #ebe8e2;
    color: #777169; font-size: .68rem; letter-spacing: .045em;
}
.ajco-pagination-summary strong { color: #282522; font-weight: 500; }
.ajco-pagination-track {
    display: grid; grid-template-columns: minmax(6.75rem, 1fr) auto minmax(6.75rem, 1fr);
    align-items: stretch; min-height: 3.8rem;
}
.ajco-page-control {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-width: 0; padding: .8rem 1rem; color: #1b1917; text-decoration: none;
    font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    transition: color .2s ease, background .2s ease;
}
.ajco-page-control:first-child { border-right: 1px solid #ebe8e2; }
.ajco-page-control:last-child { border-left: 1px solid #ebe8e2; }
.ajco-page-control svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.35; }
a.ajco-page-control:hover { color: #fff; background: #151515; }
.ajco-page-control.is-disabled { color: #b8b3aa; cursor: not-allowed; }
.ajco-page-numbers {
    display: flex; align-items: center; justify-content: center; gap: .25rem;
    list-style: none; padding: .65rem 1.1rem; margin: 0; overflow-x: auto;
    scrollbar-width: thin;
}
.ajco-page-numbers li { margin: 0; flex: 0 0 auto; }
.ajco-page-number, .ajco-page-ellipsis {
    display: grid; place-items: center; min-width: 2.35rem; height: 2.35rem;
    color: #5f5a53; font-size: .75rem; text-decoration: none;
}
a.ajco-page-number { border: 1px solid transparent; transition: border .2s ease, color .2s ease, background .2s ease; }
a.ajco-page-number:hover { color: #111; border-color: #c9b486; background: #faf8f3; }
.ajco-page-number.is-current {
    color: #fff; background: #171717; box-shadow: inset 0 -2px 0 #b8944f;
}
.ajco-page-ellipsis { color: #a39d94; letter-spacing: .12em; }
.ajco-pagination a:focus-visible { outline: 2px solid #b8944f; outline-offset: -2px; }
.ajco-pagination--simple { max-width: 30rem; }
.ajco-pagination--simple .ajco-pagination-track { grid-template-columns: 1fr 1fr; }

/* Admin lists place pagination inside a card footer, so it should sit flush. */
.a-card-foot .ajco-pagination { margin-top: 0; max-width: none; box-shadow: none; }

@media (max-width: 575.98px) {
    .ajco-pagination { margin-top: 1.75rem; }
    .ajco-pagination-summary { justify-content: center; padding: .6rem .75rem; }
    .ajco-pagination-summary span:last-child { display: none; }
    .ajco-pagination-track { grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem; min-height: 3.35rem; }
    .ajco-page-control { padding: .65rem; }
    .ajco-page-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .ajco-page-numbers { justify-content: flex-start; padding: .5rem .55rem; }
    .ajco-page-number, .ajco-page-ellipsis { min-width: 2rem; height: 2rem; font-size: .7rem; }
    .ajco-pagination--simple .ajco-pagination-track { grid-template-columns: 1fr 1fr; }
    .ajco-pagination--simple .ajco-page-control > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---- Bespoke brief steps --------------------------------------------- */
[data-ajco-steps] .ib-tabs { list-style: none; padding-left: 0; }
[data-ajco-steps] fieldset { border: 0; padding: 0; margin: 0; }
[data-ajco-steps] .ib-toolbar-btn { cursor: default; }

/* ---- Offer figures --------------------------------------------------- */
.ib-offer-figures { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ib-offer-figures .ib-caps { display: block; color: var(--ib-muted, #767676); }
.ib-offer-figures strong { font-size: 1.125rem; font-weight: 400; }

/* ---- Footer maker credit ---------------------------------------------- */
.ib-footer-credit { display: inline-flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.ib-footer-credit a { color: inherit; border-bottom: 1px solid currentColor; }
.ib-footer-credit a:hover { color: #fff; }
.ib-heart {
    color: #c9556b;
    font-size: 1.05em;
    line-height: 1;
    /* Nudged up so it sits on the text baseline rather than below it. */
    position: relative;
    top: .06em;
}

/* ---- Footer variation 1: faceted jewellery pattern ------------------- */
.ib-footer-v1 {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(2.75rem, 4.5vw, 4.25rem) 0 1.1rem;
    background:
        radial-gradient(circle at 83% 46%, rgba(184, 148, 79, .06), transparent 38%),
        linear-gradient(115deg, #090909 0%, #121212 62%, #0a0908 100%);
}
.ib-footer-v1-pattern {
    position: absolute; z-index: -1; pointer-events: none;
    width: min(74rem, 73vw); height: auto; right: -9rem; bottom: -5rem;
    fill: none; stroke: #b8944f; stroke-width: 1.25; vector-effect: non-scaling-stroke;
    opacity: .19; filter: drop-shadow(0 0 12px rgba(184, 148, 79, .07));
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
}
.ib-footer-v1-chain { stroke-width: 3; opacity: .72; }
.ib-footer-v1-stones { fill: rgba(207, 178, 118, .26); stroke-width: 1; }
.ib-footer-v1-content { position: relative; z-index: 1; }
.ib-footer-v1-brand { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.ib-footer-v1-brand .ib-logo { margin-bottom: .65rem; }
.ib-footer-v1-brand .ib-logo--footer img { height: clamp(3.2rem, 4.5vw, 4.25rem); }
.ib-footer-v1-brand > p {
    margin: 0; color: rgba(255,255,255,.78); font-size: .67rem;
    letter-spacing: .28em; text-transform: uppercase;
}
.ib-footer-v1-columns {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4.5rem); padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
.ib-footer-v1-columns section { min-width: 0; }
.ib-footer-v1 h4, .ib-footer-v1-label {
    color: #fff; font-size: .7rem; letter-spacing: .19em;
    text-transform: uppercase; font-weight: 500; margin-bottom: .65rem;
}
.ib-footer-v1-rule { display: block; width: 2.25rem; height: 1px; background: #b8944f; margin: 0 0 1.25rem; }
.ib-footer-v1-menu li { margin-bottom: .55rem; }
.ib-footer-v1-menu a { display: inline-block; color: rgba(255,255,255,.74); transition: color .2s ease, transform .2s ease; }
.ib-footer-v1-menu a:hover, .ib-footer-v1-menu a:focus-visible { color: #fff; transform: translateX(.2rem); }
.ib-footer-v1-contact-row {
    display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .75rem;
    align-items: start; margin-bottom: .65rem; color: rgba(255,255,255,.76);
}
.ib-footer-v1-contact-row > svg { width: 1.2rem; height: 1.2rem; color: #c7a661; margin-top: .1rem; }
.ib-footer-v1-contact-row address, .ib-footer-v1-contact-row a, .ib-footer-v1-contact-row .ib-footer-hours {
    color: rgba(255,255,255,.76); font-size: .775rem; line-height: 1.5;
}
.ib-footer-v1-contact-row .ib-footer-hours span { color: rgba(255,255,255,.52); }
.ib-footer-v1-newsletter {
    display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(23rem, 1.25fr);
    gap: clamp(2rem, 6vw, 6rem); align-items: center;
    padding: clamp(1.5rem, 2.8vw, 2.1rem) 0; border-top: 1px solid rgba(184,148,79,.62);
}
.ib-footer-v1-newsletter > div > p:last-child { max-width: 38rem; margin: 0; color: rgba(255,255,255,.6); font-size: .83rem; }
.ib-footer-v1-newsletter .ib-footer-v1-label { margin-bottom: .85rem; }
.ib-footer-v1-newsletter .ib-footer-v1-rule { margin-bottom: .8rem; }
.ib-footer-v1-signup { display: flex; gap: .75rem; }
.ib-footer-v1-signup .form-control { min-width: 0; border: 1px solid rgba(255,255,255,.26); padding: .8rem 1rem; }
.ib-footer-v1-signup .btn { border-color: #b8944f; color: #fff; background: rgba(18,18,18,.74); letter-spacing: .14em; padding-inline: 1.75rem; }
.ib-footer-v1-signup .btn:hover, .ib-footer-v1-signup .btn:focus-visible { background: #b8944f; color: #111; }
.ib-footer-v1-consent { margin-top: .4rem; }
.ib-footer-v1-consent .form-check-label { color: rgba(255,255,255,.55); font-size: .68rem; }
.ib-footer-v1-consent .form-check-input {
    background-color: transparent; border-color: rgba(255,255,255,.52);
}
.ib-footer-v1-consent .form-check-input:checked {
    background-color: #b8944f; border-color: #b8944f;
}
.ib-footer-v1-consent .form-check-input:focus {
    border-color: #c9a764; box-shadow: 0 0 0 .18rem rgba(184,148,79,.2);
}
.ib-footer-v1-disclosure {
    display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .6rem 0;
    border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: .66rem;
}
.ib-footer-v1-bottom {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
    margin-top: 0; padding-top: 1rem;
}
.ib-footer-v1-bottom .ib-social { display: flex; gap: 1.1rem; padding-right: 2rem; border-right: 1px solid rgba(255,255,255,.2); }
.ib-footer-v1-bottom .ib-social a { display: inline-grid; place-items: center; color: #c9a764; }
.ib-footer-v1-crafted { display: inline-flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.62); white-space: nowrap; }
.ib-footer-v1-crafted > svg { color: #c9a764; }
.ib-footer-v1-crafted .ib-footer-credit { color: rgba(255,255,255,.58); }
.ib-footer-v1 .ib-heart { color: #b8944f; }

@media (max-width: 991.98px) {
    .ib-footer-v1-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ib-footer-v1-pattern { width: 66rem; right: -30rem; opacity: .15; }
    .ib-footer-v1-newsletter { grid-template-columns: 1fr; gap: 1.5rem; }
    .ib-footer-v1-bottom { grid-template-columns: auto 1fr; }
    .ib-footer-v1-crafted { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 575.98px) {
    .ib-footer-v1 { padding-top: 2.5rem; }
    .ib-footer-v1-brand { margin-bottom: 2.25rem; }
    .ib-footer-v1-columns { grid-template-columns: 1fr; gap: 1.5rem; }
    .ib-footer-v1-signup { align-items: stretch; }
    .ib-footer-v1-signup .btn { padding-inline: 1rem; }
    .ib-footer-v1-bottom { grid-template-columns: 1fr; gap: 1.25rem; }
    .ib-footer-v1-bottom .ib-social { width: fit-content; }
    .ib-footer-v1-crafted { grid-column: auto; flex-wrap: wrap; }
    .ib-footer-v1-pattern { width: 50rem; right: -33rem; bottom: 8rem; opacity: .1; }
}

/* ---- Page hero body copy ---------------------------------------------
   The prototype's page heroes carried an eyebrow and a heading only, so its
   stylesheet colours just those two white. This build's hero component also
   renders a lede paragraph, which inherited the dark body colour and came out
   near-invisible over a dark hero image. */
.ib-page-hero .ib-lede,
.ib-page-hero .ib-hero-content p:not(.ib-eyebrow) {
    color: rgba(255, 255, 255, .88);
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.ib-page-hero .ib-hero-content a { color: #fff; }

/* ---- Legal and policy pages ------------------------------------------ */
.ib-policy-hero {
    position: relative; overflow: hidden; color: #fff; background:
        radial-gradient(circle at 82% 20%, rgba(184, 148, 79, .28), transparent 30%),
        linear-gradient(125deg, #0d0d0d 0%, #1b1916 58%, #282219 100%);
}
.ib-policy-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .26;
    background: linear-gradient(105deg, transparent 49.85%, rgba(255,255,255,.4) 50%, transparent 50.15%);
}
.ib-policy-hero-inner { position: relative; z-index: 1; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.ib-policy-hero .ib-eyebrow { color: #cfb276; margin-bottom: 1rem; }
.ib-policy-hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 5.25rem); font-weight: 300; letter-spacing: -.035em; margin: 0 0 1.25rem; }
.ib-policy-hero p:last-child { max-width: 42rem; color: rgba(255,255,255,.76); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.75; margin: 0; }
.ib-policy-hero--hub .ib-policy-hero-inner { text-align: center; }
.ib-policy-hero--hub p:last-child { margin-inline: auto; }
.ib-policy-shell { padding: clamp(3.25rem, 7vw, 7rem) 0; background: #faf9f7; }
.ib-policy-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 48rem); gap: clamp(3rem, 8vw, 8rem); justify-content: center; align-items: start; }
.ib-policy-aside { position: sticky; top: 1.5rem; }
.ib-policy-aside > .ib-caps { color: var(--ib-muted, #767676); margin-bottom: 1rem; }
.ib-policy-nav { border-top: 1px solid var(--ib-line, #dedad3); }
.ib-policy-nav a { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; align-items: center; padding: 1rem .25rem; border-bottom: 1px solid var(--ib-line, #dedad3); color: #6d6962; text-decoration: none; font-size: .85rem; transition: color .2s ease, padding .2s ease; }
.ib-policy-nav a span { color: #a49d92; font-size: .66rem; letter-spacing: .1em; }
.ib-policy-nav a:hover, .ib-policy-nav a:focus-visible, .ib-policy-nav a.is-active { color: var(--ib-ink, #121212); padding-left: .6rem; }
.ib-policy-nav a.is-active { font-weight: 600; border-bottom-color: var(--ib-ink, #121212); }
.ib-policy-nav a.is-active span { color: #b8944f; }
.ib-policy-article { background: #fff; border: 1px solid #e6e2db; padding: clamp(1.5rem, 4vw, 4.5rem); box-shadow: 0 1.25rem 4rem rgba(28, 23, 17, .05); }
.ib-policy-article > section { padding: 0 0 2.75rem; margin: 0 0 2.75rem; border-bottom: 1px solid #e8e4dd; }
.ib-policy-article > section:last-of-type { margin-bottom: 0; }
.ib-policy-article h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); font-weight: 400; letter-spacing: -.025em; margin: 0 0 1.15rem; }
.ib-policy-article p { color: #5e5a53; line-height: 1.85; }
.ib-policy-article a:not(.ib-btn) { color: var(--ib-ink, #121212); text-decoration: underline; text-underline-offset: .18em; }
.ib-policy-kicker { color: #9a7a3c !important; font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .65rem; }
.ib-policy-review-note { margin: 0 0 3rem; border-left: 2px solid #b8944f; background: #f6f2e9; padding: 1rem 1.25rem; }
.ib-policy-review-note strong { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; }
.ib-policy-review-note p { font-size: .85rem; line-height: 1.55; margin: 0; }
.ib-policy-contact { background: #151515; color: #fff; padding: clamp(1.5rem, 4vw, 3rem); margin-top: 3.25rem; }
.ib-policy-contact .ib-caps { color: #cfb276; }
.ib-policy-contact h2 { color: #fff; margin-bottom: .75rem; }
.ib-policy-contact p:not(.ib-caps) { color: rgba(255,255,255,.7); max-width: 34rem; }
.ib-policy-contact .ib-btn { background: #fff; color: #111; margin-top: .5rem; }
.ib-policy-hub { background: #faf9f7; padding: clamp(3.5rem, 7vw, 7rem) 0; }
.ib-policy-hub-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ib-policy-hub-head .ib-caps { color: #9a7a3c; }
.ib-policy-hub-head h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; margin: .5rem 0 0; }
.ib-policy-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #dcd7cf; border-left: 1px solid #dcd7cf; }
.ib-policy-card { min-height: 12.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: end; color: #151515; background: #fff; border-right: 1px solid #dcd7cf; border-bottom: 1px solid #dcd7cf; padding: clamp(1.35rem, 3vw, 2.5rem); text-decoration: none; transition: color .25s ease, background .25s ease; }
.ib-policy-card:hover, .ib-policy-card:focus-visible { color: #fff; background: #171717; }
.ib-policy-card-number { align-self: start; color: #a58a59; font-size: .7rem; letter-spacing: .12em; }
.ib-policy-card-copy strong, .ib-policy-card-copy small { display: block; }
.ib-policy-card-copy strong { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 400; margin-bottom: .55rem; }
.ib-policy-card-copy small { color: #777169; line-height: 1.55; }
.ib-policy-card:hover small, .ib-policy-card:focus-visible small { color: rgba(255,255,255,.68); }
.ib-policy-card-arrow { font-size: 1.35rem; }
@media (max-width: 767.98px) {
    .ib-policy-layout { grid-template-columns: 1fr; gap: 2rem; }
    .ib-policy-aside { position: static; }
    .ib-policy-nav { display: flex; overflow-x: auto; border: 1px solid #dedad3; scrollbar-width: thin; }
    .ib-policy-nav a { flex: 0 0 auto; grid-template-columns: auto 1fr; padding: .8rem 1rem; border: 0; border-right: 1px solid #dedad3; white-space: nowrap; }
    .ib-policy-nav a:hover, .ib-policy-nav a:focus-visible, .ib-policy-nav a.is-active { padding-left: 1rem; }
    .ib-policy-hub-grid { grid-template-columns: 1fr; }
    .ib-policy-card { min-height: 10rem; }
}

/* ---- Card call to action ---------------------------------------------
   Every piece in this catalogue has at least one required option, so a listing
   cannot add to a bag without choosing a metal, width or length for the
   shopper. The card therefore carries an explicit route to the product page
   instead of a quick-add. Same visual language as the price-on-application
   enquiry link the prototype already had, so a grid mixing the two reads as one
   design. */
.ib-card-cta {
    display: inline-block; margin-top: .375rem; font-size: .6875rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ib-ink, #121212);
    border-bottom: 1px solid var(--ib-line, #e2dfda); padding-bottom: 1px;
    text-decoration: none;
}
.ib-card-cta:hover,
.ib-card-cta:focus-visible { border-bottom-color: var(--ib-ink, #121212); color: var(--ib-ink, #121212); }
.ib-card-cta:focus-visible { outline: 2px solid var(--ib-ink, #121212); outline-offset: 3px; }

/* ---- Product card media --------------------------------------------
   The prototype's card media was a <div>; here it is the <a> that makes the
   whole tile clickable. An <a> is inline by default, and `aspect-ratio` does
   nothing on an inline box — with an absolutely positioned image inside, the
   tile collapsed to 0x0 and the card showed no picture at all. */
.ib-card-media { display: block; }

/* A product with no photograph gets a neutral tile. `contain` rather than
   `cover` so the stand-in is not cropped into an unreadable smear. */
.ib-card-media--empty { background: var(--ib-tint, #f6f4f1); }
.ib-card-media--empty img { object-fit: contain; padding: 12%; }
.ib-pdp-gallery img.is-placeholder { object-fit: contain; padding: 10%; }

/* ---- Product options: selected, disabled and focus states ------------
   The prototype toggled `.is-active` with JavaScript on <button> elements.
   Here each option is a real radio with a <label>, which keeps the control
   keyboard-operable and submits without JavaScript — so the same looks have to
   come from the input's state rather than from a class. */
.ib-swatch-row input:checked + .ib-swatch {
    box-shadow: 0 0 0 1px #fff inset, 0 0 0 1.5px var(--ib-ink, #121212);
}
.ib-opt-pills input:checked + .ib-opt-pill {
    border-color: var(--ib-ink, #121212);
    box-shadow: 0 0 0 1px var(--ib-ink, #121212) inset;
}
.ib-swatch-row input:disabled + .ib-swatch {
    opacity: .4; cursor: not-allowed;
}
.ib-opt-pills input:disabled + .ib-opt-pill {
    color: var(--ib-muted, #8a8578); background: var(--ib-tint, #f6f4f1);
    text-decoration: line-through; cursor: not-allowed;
}
/* Focus has to be visible: the input itself is visually hidden, so without
   this a keyboard user cannot tell where they are. */
.ib-swatch-row input:focus-visible + .ib-swatch,
.ib-opt-pills input:focus-visible + .ib-opt-pill {
    outline: 2px solid var(--ib-ink, #121212); outline-offset: 2px;
}

/* ---- Payment routes at checkout -------------------------------------- */
.ib-pay-route {
    border: 1px solid var(--ib-line, #e2dfda); padding: .875rem 1rem; margin-bottom: .625rem;
}
.ib-pay-route:has(input:checked) { border-color: var(--ib-ink, #121212); }
.ib-pay-route:has(input:disabled) { opacity: .6; }

/* ---- Countdown on the status page ------------------------------------ */
.ib-countdown { display: flex; gap: 1.25rem; justify-content: center; margin: 1.5rem 0; }
.ib-countdown .ib-count-cell { text-align: center; color: rgba(255, 255, 255, .82); }
.ib-countdown .ib-count-cell strong { display: block; font-size: 1.75rem; font-weight: 300; color: #fff; }
.ib-countdown .ib-count-cell em {
    font-style: normal; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---- Error pages ------------------------------------------------------ */
/* This sheet loads after style.css. Keep the status numeral dominant so an
   error page cannot be mistaken for the search page beneath it. */
.ib-error-page { background: #fff; color: var(--ib-ink, #121212); }

.ib-error-page .ib-error {
    display: flex; align-items: flex-start; background: #f7f4ee;
    padding: clamp(3.5rem, 7vw, 6rem) 1.5rem;
}

.ib-error-page .ib-error-in { width: 100%; }

.ib-error-code {
    display: block; font-size: clamp(6rem, 20vw, 12rem); line-height: .78;
    font-weight: 500; letter-spacing: -.055em; color: #b8944f;
    margin: .5rem 0 1.25rem; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.ib-error .ib-eyebrow {
    display: block; width: fit-content; padding: .35rem .7rem;
    border: 1px solid currentColor; margin: 0 auto 1rem;
    font-weight: 600; letter-spacing: .18em;
}

.ib-error-page .ib-error-title,
.ib-error-page .ib-error-body,
.ib-error-page .ib-error-help,
.ib-error-page .ib-error-help a { color: var(--ib-ink, #121212); }

.ib-error-page .ib-error-search { width: 100%; }
.ib-error-page .ib-error-search .form-control { min-width: 0; flex: 1 1 auto; }

/* ---- Admin readiness / status banners -------------------------------- */
.ajco-banner {
    padding: .875rem 1.125rem; border-left: 3px solid; margin-bottom: 1rem;
    font-size: .875rem; background: #fff;
}
.ajco-banner--good { border-color: #2f6b4f; }
.ajco-banner--info { border-color: #3a6ea5; }
.ajco-banner--warn { border-color: #b8944f; }
.ajco-banner--danger { border-color: #a2262c; }
.ajco-banner strong { display: block; margin-bottom: .25rem; }

/* ---- SweetAlert2, themed to the brand -------------------------------- */
.swal2-popup.ajco-swal {
    border-radius: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 2rem;
}
.swal2-popup.ajco-swal .swal2-title {
    font-weight: 400; font-size: 1.25rem; color: var(--ib-ink, #121212);
}
.swal2-popup.ajco-swal .swal2-html-container { font-size: .9375rem; color: #4a4a4a; }
.swal2-popup.ajco-swal .swal2-confirm,
.swal2-popup.ajco-swal .swal2-cancel,
.swal2-popup.ajco-swal .swal2-deny {
    border-radius: 0; box-shadow: none; font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase; padding: .75rem 1.5rem;
}
.swal2-popup.ajco-swal .swal2-confirm { background: var(--ib-ink, #121212); }
.swal2-popup.ajco-swal .swal2-cancel { background: transparent; color: var(--ib-ink, #121212); border: 1px solid var(--ib-line, #e2dfda); }
.swal2-popup.ajco-swal .swal2-deny { background: #a2262c; }
.swal2-popup.ajco-swal .swal2-input,
.swal2-popup.ajco-swal .swal2-textarea { border-radius: 0; }
.swal2-popup.ajco-swal ul { text-align: left; margin: 0; padding-left: 1.25rem; }

.swal2-toast.ajco-swal { border-radius: 0; }
.swal2-container.swal2-backdrop-show { background: rgba(18, 18, 18, .48); }

/* Focus visibility: SweetAlert's own reset removes it in some browsers. */
.swal2-popup.ajco-swal :focus-visible { outline: 2px solid var(--ib-gold, #b8944f); outline-offset: 2px; }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-ajco-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .h2-marquee-track { animation: none !important; }
    .ib-hero-carousel .carousel-item { transition: none !important; }
    .ib-category-card,
    .ib-category-card-media img,
    .ib-category-card-arrow { transition: none !important; }
}

/* ---- Scroll reveal (variant 3), progressive ------------------------- */
[data-ajco-reveal] { opacity: 1; }
.ajco-js [data-ajco-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}
.ajco-js [data-ajco-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Utility --------------------------------------------------------- */
.fw-500 { font-weight: 500; }
[hidden] { display: none !important; }