* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bs-primary: #CC6966 !important;
    --bs-primary-rgb: 204, 105, 102 !important;
    --bs-link-color: #CC6966 !important;
    --bs-link-hover-color: #B45552 !important;
    --bs-body-font-family: 'Big Shoulders', sans-serif !important;
    --bs-font-sans-serif: 'Big Shoulders', sans-serif !important;
    font-size: 120%;
}

.btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary, .btn-danger, .btn-outline-danger {
    color: var(--bs-btn-color) !important;
}

/* The rule above is !important, so it also wins over Bootstrap's own disabled colour —
   which put white text on the grey disabled background, i.e. an unreadable label. */
.btn-primary.disabled, .btn-primary:disabled,
.btn-outline-primary.disabled, .btn-outline-primary:disabled,
.btn-secondary.disabled, .btn-secondary:disabled,
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled,
.btn-danger.disabled, .btn-danger:disabled,
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: var(--bs-btn-disabled-color) !important;
}

.btn-primary:hover, .btn-primary:active,
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-secondary:hover, .btn-secondary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:active,
.btn-danger:hover, .btn-danger:active,
.btn-outline-danger:hover, .btn-outline-danger:active {
    color: var(--bs-btn-hover-color) !important;
}

.btn-primary {
    --bs-btn-bg: #CC6966 !important;
    --bs-btn-border-color: #CC6966 !important;
    --bs-btn-hover-bg: #B45552 !important;
    --bs-btn-hover-border-color: #B45552 !important;
    --bs-btn-active-bg: #96413E !important;
    --bs-btn-active-border-color: #96413E !important;
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
    /* Without these, a disabled primary button falls back to Bootstrap's own blue while the
       usable one carries the brand rose — so the buttons a customer could *not* press were
       the ones that stood out. Grey says "not yet" without competing for attention, and
       makes the brand rose mean "this one is ready". Full opacity: the colours are already
       chosen to read as disabled, and 0.65 on top only made the label harder to read. */
    --bs-btn-disabled-bg: #E9ECEF !important;
    --bs-btn-disabled-border-color: #DEE2E6 !important;
    /* gray-700, not the gray-600 that reads as "disabled text" elsewhere: this button
       carries the price, and a customer should be able to read €13,00 before deciding to
       pick a size. 7.3:1 against the grey, where gray-600 gives 3.7:1. */
    --bs-btn-disabled-color: #495057 !important;
    --bs-btn-disabled-opacity: 1 !important;
}

/* Bootstrap's .disabled kills pointer events, which also makes the button's own title
   tooltip unreachable by hover. That is why an explanatory line used to sit under every
   card. The click handler in shop_generic/script.js already preventDefaults and returns
   early without a variant guid, so letting the pointer through costs nothing and buys back
   the tooltip that names what still has to be chosen. */
.purchase-button.disabled,
.purchase-button:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

.btn-outline-primary {
    --bs-btn-color: #CC6966 !important;
    --bs-btn-border-color: #CC6966 !important;
    --bs-btn-hover-bg: #CC6966 !important;
    --bs-btn-hover-border-color: #CC6966 !important;
    --bs-btn-active-bg: #CC6966 !important;
    --bs-btn-active-border-color: #CC6966 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}

.btn-secondary {
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}

.btn-outline-secondary:focus:not(:hover):not(:active) {
    color: #6c757d !important;
    background-color: transparent !important;
    /*box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;*/
}

.btn-danger {
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}

.btn-outline-danger {
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
}

.btn-link {
    color: #CC6966 !important;
    text-decoration: none !important;
}

.btn-link:hover, .btn-link:focus {
    color: #B45552 !important;
    text-decoration: underline !important;
}

.navbar {
    font-size: 1.1rem;
}

.navbar-brand {
    font-size: 1.5rem;
}

*,
*::before,
*::after,
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
button,
input,
select,
textarea,
.btn,
.navbar,
.navbar-brand,
.nav-link,
.dropdown-item,
.dropdown-menu,
.card,
.card-title,
.card-text,
.breadcrumb,
.breadcrumb-item,
.badge,
.alert,
.form-control,
.form-select,
.modal-title,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.list-group-item,
.table {
    font-family: 'Big Shoulders', sans-serif !important;
}

/* Breadcrumb Styling */
.breadcrumb-item a,
.breadcrumb-item a i,
nav[aria-label="breadcrumb"] ol.breadcrumb li.breadcrumb-item a,
nav[aria-label="breadcrumb"] ol.breadcrumb li.breadcrumb-item a i {
    color: #CC6966 !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:hover i,
nav[aria-label="breadcrumb"] ol.breadcrumb li.breadcrumb-item a:hover,
nav[aria-label="breadcrumb"] ol.breadcrumb li.breadcrumb-item a:hover i {
    color: #B45552 !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active,
nav[aria-label="breadcrumb"] ol.breadcrumb li.breadcrumb-item.active {
    color: #6c757d !important;
}

/* Ensure breadcrumb dividers and icons match the theme */
.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "/") !important;
    color: #CC6966 !important;
}

/*
   Exclude icon fonts from the global font-family override.
   LightGallery uses .lg-icon and classes starting with lg- (like lg-next, lg-close).
   Bootstrap Icons use classes starting with bi-.
*/
[class^="bi-"]::before, [class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
}

[class^="lg-"], [class*=" lg-"],
.lg-icon,
.lg-icon::before,
.lg-icon::after {
    font-family: inherit !important;
}


/* CSS guard: reduce double-tap and pinch zoom while keeping scrolling */
html, body {
    /* Older IE/Edge */
    -ms-touch-action: manipulation;
    /* Modern browsers */
    touch-action: manipulation;
}

/* Global link styling */
a {
    color: #CC6966 !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out !important;
}

a:hover, a:focus {
    color: #B45552 !important;
    text-decoration: underline !important;
}

.main-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dropdown-item,
.text-secondary,
a.text-secondary,
.text-secondary i,
a.text-secondary i,
#offcanvasCart .offcanvas-title,
#offcanvasCart .cart-product-title,
#offcanvasCart .cart-price,
#offcanvasCart .total-title,
#offcanvasCart .total-price,
#offcanvasCart .number,
#offcanvasCart .btn-close,
#offcanvasCart .btn-decrement,
#offcanvasCart .btn-increment,
.card-title,
.table thead th,
.table tbody td,
.order-number-badge,
.order-status-badge,
.order-item-title,
.order-total-label,
.order-total-value,
dt.text-secondary,
dd.text-end,
.list-group-item .text-truncate span {
    color: #6c757d !important;
}

.dropdown-item:hover, .dropdown-item:focus,
.text-secondary:hover, .text-secondary:focus,
a.text-secondary:hover, a.text-secondary:focus {
    color: #5a6268 !important;
}

/* Ensure the account dropdown menu matches the button width */
#account-area-desktop .dropdown-menu {
    min-width: fit-content !important;
}

.main-body > .container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body {
    /*padding: 40px;*/
    background-image: linear-gradient(#EFEFEF 0%, white 52.08%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 9%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}

.header .lead {
  max-width: 620px;
}


.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: #333 !important;
    text-decoration: none !important;
}

.navbar-brand > img {
  display: block;
  height: auto;         /* allow the image to shrink proportionally */
  max-height: 40px;     /* default desktop height */
  width: auto;
}

/* Make the brand logo smaller on narrow screens so it doesn't clash with the hamburger */
@media (max-width: 767.98px) {
  .navbar-brand > img {
    max-height: 26px;   /* smaller logo on phones */
    max-width: 60vw;    /* prevent overly wide logos from pushing the toggler */
  }
}

#cart-icon {
    position: relative;
    display: flex;
    font-size: 30px;
    cursor: pointer;
}

.cart-item-count.badge {
    background: #CC6966 !important;
    border-radius: 4px;
    font-size: 11px;
    color: #fff !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    padding: 0;
    min-width: 1.8em;
    height: 1.8em;
    line-height: 1;
}

.hamburger-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
}

#cart-button .cart-item-count.badge {
    margin-left: 0.5rem;
}

.text-bg-primary.cart-item-count {
    background-color: #CC6966 !important;
    color: #fff !important;
}

.cart-item-count.badge:not(:empty) {
    visibility: visible;
}

/*
  Top offset for pages under fixed-top navbar
  Use CSS variables so the content starts just below the navbar without leaving a huge gap
*/
:root { --sv-navbar-h: 56px; --sv-content-pt-extra: 12px; }
@media (min-width: 768px) {
  :root { --sv-navbar-h: 64px; }
}
.main-body {
    /* top is navbar height + a small buffer; center horizontally like a Bootstrap container */
    padding: calc(var(--sv-navbar-h) + var(--sv-content-pt-extra)) 0 0;
}


/*.main-body {*/
/*    padding-top: 110px; !* tune until it perfectly clears the header *!*/
/*}*/

.dot-loading {
    display: inline-flex;
    align-items: center;
}

.dot-loading::after {
    content: '...';
    width: 0;
    overflow: hidden;
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

.htmx-request .auth-loading-hide {
    display: none;
}

.htmx-request .auth-loading-show {
    display: inline-flex;
}

.auth-loading-show {
    display: none;
}

.product-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-box .img-box {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    transition: 0.5s;
}

.img-box:hover img {
    transform: scale(1.1);
}

.product-box .product-title {
    font-size: 20px;
    margin-top: 10px;
}

.product-box .product-title a {
    color: #333 !important;
    text-decoration: none !important;
}

.product-box .product-title a:hover {
    color: #CC6966 !important;
    text-decoration: underline !important;
}

.product-box .price-and-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-and-cart .price {
    font-size: 18px;
    font-weight: 500;
}

.price-and-cart .add-cart {
    padding: 10px;
    background: #CC6966;
    border-radius: 6px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

.cart {
    position: fixed;
    top: 0;
    right: -100%;
    width: 360px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 65px 20px 40px;
    z-index: 100;
    overflow: auto;
    transition: 0.5s;
}

.cart.active {
    right: 0;
}

.cart-title {
    text-align: center;
    font-size: 30px;
}

.cart-box {
    display: block; /* container for a Bootstrap card */
    align-items: stretch;
    margin-top: 16px;
}

.cart-box img {
    width: 96px;
    height: 96px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
}

.cart-detail {
    display: grid;
    gap: 8px;
    margin-right: auto;
}

.cart-product-title {
    font-size: 16px;
    line-height: 1;
}

.cart-product-title a {
    color: #6c757d !important;
    text-decoration: none !important;
}

.cart-product-title a:hover {
    color: #CC6966 !important;
    text-decoration: underline !important;
}

.cart-price {
    font-weight: 500;
}

.cart-quantity {
    display: flex;
    width: 84px; /* a bit smaller overall */
    border: 1px solid #999;
    border-radius: 6px;
    height: 32px; /* reduced height */
}

/* Prevent selecting the quantity text or clicking-and-dragging from highlighting it */
.cart-quantity, .cart-quantity * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Digital items: show only the number "1" without the wide container */
.cart-quantity.single {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* center the number so total box size matches the +/- control */
    width: 84px; /* match the reduced control width */
    height: 32px; /* match the reduced control height */
    border: 1px solid #999; /* full border around the single number */
    border-radius: 6px;
}
/* Inside the single variant, remove inner side borders so we don't see just vertical lines */
.cart-quantity.single .number {
    border-left: none;
    border-right: none;
    width: 32px; /* keep number centered with new smaller control */
}

.cart-quantity button {
    background: transparent;
    width: 26px; /* narrower buttons */
    border: none;
    font-size: 16px; /* slightly smaller icons */
    cursor: pointer;
}

.cart-quantity #decrement {
    color: #999;
}

.cart-quantity .number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px; /* narrower center area */
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    cursor: default;
}

.cart-remove {
    font-size: 25px;
    cursor: pointer;
}

/* Hover state: make the trashcan icon red inside the offcanvas cart */
.cart-remove:hover {
    color: #dc3545; /* Bootstrap danger red */
}

/* Bootstrap-style horizontal card for cart items */
/* Cart cards: no hover lift/elevation effect */
/* (Keep default Bootstrap shadow via `shadow-sm` class from markup) */

/* Tighter paddings inside offcanvas for cart cards */
.offcanvas .cart-card .card-body {
    padding-left: .75rem;
    padding-right: .75rem;
}

.cart-content {
    overflow-y: auto;
    padding-bottom: 1rem;
}

.cart-footer {
    background: #fff;
    z-index: 10;
}

.footer .footer-link {
    color: #666 !important;
    text-decoration: none !important;
}

.footer .footer-link:hover {
    color: #CC6966 !important;
    text-decoration: underline !important;
}

.total {
    font-size: 18px;
}

.total.d-none {
    display: none !important;
}

.total-price {
    font-weight: 600;
}

.btn-buy {
    display: block;
    padding: 10px 30px;
    background: #CC6966;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    margin: 20px auto 0;
    cursor: pointer;
}

.btn-buy:hover {
  background: #B45552;
}

#cart-close {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 35px;
    cursor: pointer;
}

@media screen and (max-width: 360px) {
    .product-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .cart {
        width: 100%;
    }
}

/* iPhone and small screens */
@media (max-width: 767.98px) {
  /* Ensure the brand area itself can shrink and leave space for the hamburger (≈56–64px) */
  .navbar .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 64px);
    overflow: hidden; /* prevent long images/text from pushing controls */
    padding-left: 2%;
    padding-right: 2%;
  }

  /* Hard cap the logo size; beat any SVG/other rules */
  .navbar.navbar-light .navbar-brand > img {
    display: block;
    height: auto !important;   /* override any fixed height */
    width: auto !important;    /* avoid width:100% stretching */
    max-height: 26px !important; /* keep it compact on iPhones */
    max-width: 100% !important;  /* respect the brand max-width */
    object-fit: contain;       /* keep aspect ratio if intrinsic viewBox is odd */
  }
}

/* Checkout summary card adjustments */
@media (max-width: 767.98px) {
    .card-mobile-flush {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    /* Force the main-body to be truly flush on mobile for the checkout page */
    .checkout-container-flush {
        /* Pull back by the container's horizontal padding to cancel it */
        margin-left: calc(-1 * var(--bs-gutter-x, .75rem)) !important;
        margin-right: calc(-1 * var(--bs-gutter-x, .75rem)) !important;
        width: calc(100% + 2 * var(--bs-gutter-x, .75rem)) !important;
        overflow-x: hidden;
    }
}

/*
  ---------------------------------------------------------------------
  Global form control styling
  Make default inputs/selects look modern site‑wide (incl. auth forms)
  ---------------------------------------------------------------------
*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  color: #111;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.4;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  margin-bottom: 12px; /* breathing room between stacked fields */
}

/* Focus ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #CC6966; /* soft elegant pink focus */
  box-shadow: 0 0 0 3px rgba(204, 105, 102, 0.15);
}

/* Placeholder color */
input::placeholder,
textarea::placeholder {
  color: #9aa4b2;
}

/* Invalid/error state (Django sets aria-invalid on errors) */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.is-invalid {
  border-color: #dc3545; /* bootstrap danger */
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

/* Make native select look consistent */
select {
  background-image: linear-gradient(45deg, transparent 50%, #667085 50%),
    linear-gradient(135deg, #667085 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Keep Bootstrap-powered controls unchanged if explicitly used */
.form-control {
  /* Do not override Bootstrap's class-based styling */
  margin-bottom: 12px;
}

/* --- Filteren zichtbaar maken ------------------------------------------------------- */

/* Browsers without the View Transitions API swap #article-grid instantly, which on a
   filter change reads as "nothing happened". htmx puts .htmx-swapping on the target while
   the old content is on its way out, so a plain fade covers everyone; where view
   transitions do work they run on top and animate each card to its new position. */
#article-grid.htmx-swapping {
    opacity: 0.35;
    transition: opacity 120ms ease-out;
}

#article-grid.htmx-settling .card {
    animation: card-settle 220ms ease-out;
}

@keyframes card-settle {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Each card carries its own view-transition-name (set inline, per guid), so a card that
   survives a filter change is morphed from its old box to its new one instead of being
   thrown away and redrawn. */
::view-transition-group(*) {
    animation-duration: 260ms;
}

/* Someone who has asked their system for less motion gets the result, not the journey. */
@media (prefers-reduced-motion: reduce) {
    #article-grid.htmx-swapping {
        transition: none;
        opacity: 1;
    }

    #article-grid.htmx-settling .card {
        animation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* The direction half of the sort control. `btn-outline-secondary` draws a #6c757d border
   against the #dee2e6 of the <select> it is glued to, which makes one control read as two
   unrelated things. This matches the form controls instead, and keeps the brand colour for
   the focus ring so it still belongs to this site. */
.sort-direction {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-focus-shadow-rgb: 204, 105, 102;
}

/* --- Attribuut-pillen --------------------------------------------------------------- */

/* The descriptive attributes on a card, and the active filters above the grid, are the same
   object in two places: a value you can switch on or off. They look alike on purpose. */
/* The colours carry !important because this stylesheet already sets `a { color: … }` with
   it further up, for the brand link colour. Without matching it, an "on" pill came out as
   brand rose text on a brand rose background — an invisible label. */
.article-pill {
    font-weight: 400;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color) !important;
    text-decoration: none;
    white-space: normal;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

a.article-pill:hover,
a.article-pill:focus-visible {
    background-color: #fff;
    border-color: #CC6966;
    color: var(--bs-body-color) !important;
}

/* Switched on: the brand colour, so a filter that came from a card reads the same as one
   ticked in the panel. */
.article-pill-on,
a.article-pill-on:hover,
a.article-pill-on:focus-visible {
    background-color: #CC6966;
    border-color: #CC6966;
    color: #fff !important;
}

/* A value that cannot be filtered on — an archived or non-filterable attribute, or the
   "Alle" that stands in for every value at once. Same shape, no affordance. */
.article-pill-static {
    opacity: 0.85;
}

.article-pill-x {
    margin-left: 0.3rem;
    font-weight: 600;
}

/* A run of neighbouring values — "Kleuterballet – Graad 8" — standing in for its members
   until the customer asks for them. Dashed rather than solid: a solid pill switches a filter
   on, this one opens up, and the border is what says which is which before the click.
   The whole fold is a hidden checkbox plus <label>s, so it works without scripting. */
.article-pill-range {
    border-style: dashed;
    cursor: pointer;
}

.article-pill-caret {
    margin-left: 0.25rem;
    font-size: 0.65em;
    vertical-align: baseline;
}

.article-pill-group-range > .article-pill-value {
    display: none;
}

.article-pill-toggle:checked ~ .article-pill-group-range > .article-pill-value {
    display: inline-block;
}

.article-pill-toggle:checked ~ .article-pill-group-range > .article-pill-range {
    display: none;
}

.article-pill-less {
    display: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--bs-tertiary-color);
}

.article-pill-toggle:checked ~ .article-pill-less {
    display: inline;
}

/* The checkbox itself is visually hidden but still lands in the tab order, so the focus
   ring has to be drawn on the labels that stand in for it — otherwise a keyboard user
   tabs onto something invisible. */
.article-pill-toggle:focus-visible ~ .article-pill-group-range > .article-pill-range,
.article-pill-toggle:focus-visible ~ .article-pill-less {
    outline: 2px solid #CC6966;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .article-pill {
        transition: none;
    }
}

/* --- Sfeerbeeld -------------------------------------------------------------
   The branding photograph behind a shop page.

   Anchored to the viewport edge and not to the content column, so it needs no
   breakpoint of its own: it simply gets more room as the screen widens.

   The fade completes exactly at the content column's left edge, and that geometry
   is the contrast guarantee — not a tuned opacity. It was measured before it was
   written: with the photograph continuing *under* the text, a near-black image put
   the breadcrumb at 1.32:1 and the intro paragraph at 4.37:1. No opacity fixes
   that, because Bootstrap's own `.text-secondary` grey (#6c757d) is already 4.48:1
   on pure white — that text has no headroom for any darkening whatsoever. So the
   photograph stops where the text starts, and contrast becomes impossible to break
   rather than merely unlikely to.

   `--sfeerbeeld-marge` is the width of the empty gutter beside Bootstrap's
   centred `.container`. The two media queries below track its max-width, which is
   the one number CSS cannot read off the element itself.

   `fixed` rather than `absolute`: a season page runs to 21 options, and an absolute
   panel would stretch one crop over the whole document height. Fixed keeps a single
   well-composed frame while the content scrolls past it. */
.shop-sfeerbeeld {
    /* Bootstrap's .container is 1140px from 1200px up ... */
    --sfeerbeeld-container: 1140px;
    --sfeerbeeld-marge: max(0px, calc((100vw - var(--sfeerbeeld-container)) / 2));

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* Wider than the gutter on purpose: the crop stays a photograph rather than a
       stripe, and the mask decides how much of it is ever seen. */
    width: clamp(320px, 42vw, 720px);
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--sfeerbeeld-marge) * 0.45),
        rgba(0, 0, 0, 0) var(--sfeerbeeld-marge));
    mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) calc(var(--sfeerbeeld-marge) * 0.45),
        rgba(0, 0, 0, 0) var(--sfeerbeeld-marge));
}

/* ... and 1320px from 1400px up. */
@media (min-width: 1400px) {
    .shop-sfeerbeeld {
        --sfeerbeeld-container: 1320px;
    }
}

.shop-sfeerbeeld picture,
.shop-sfeerbeeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* No side to stand in on a phone. */
@media (max-width: 991.98px) {
    .shop-sfeerbeeld {
        display: none;
    }
}

/* --- Keuzepaneel -------------------------------------------------------------
   "Voor wie schrijf je in?" and "in welke graad zit dat kind?" are two halves of
   one question — the code has said so since the graad became the filter — and the
   enrolment page now looks like it: one bordered panel, one width.

   The width lives here rather than in three `style="max-width: …"` attributes
   (24rem on the picker, 24rem on the graad question, 30rem on the waiting note)
   so the halves cannot drift apart again. 26rem is wide enough for
   "Kleuterballet / Pre-ballet / Pre-primary" in the select without the panel
   starting to read as a column of the page. */
.keuzepaneel {
    max-width: 26rem;
}

/* The small actions under a picker: wissen, nieuw gezinslid, beheren — and
   "graad wijzigen" beside the answer.

   They arrived one at a time and ended up as four link-buttons in three colours
   on three ragged lines. This is the one style they now share: secondary grey,
   the size of the small print they sit in, underlined only on hover.

   `!important`, for the same reason `.article-pill` carries it: this stylesheet
   sets `a { color: … }` globally, and `.btn-link` sets `--bs-btn-color` on itself,
   so a plain utility class loses to both.

   Measured in the browser rather than reasoned about: 6.59:1 against the panel's
   own `bg-body-tertiary`, well above the 4.5:1 this size needs. 0.875rem lands on
   16.8px here — the same as Bootstrap's `.small` beside it, since this theme's
   root is 19.2px and not 16px. */
.keuze-actie {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-body-color);
    color: var(--bs-secondary-color) !important;
    font-size: 0.875rem;
    text-decoration: none !important;
}

.keuze-actie:hover,
.keuze-actie:focus-visible {
    color: var(--bs-body-color) !important;
    text-decoration: underline !important;
}