/* Meydan: favourites (inc/favorites.php) and the bottom navigation bar (inc/mobile-nav.php). The heart sits in a white
   circle on the card photo and fills with the accent when pressed; the bar is the familiar shopping-app row with the
   current entry in the brand colour. Counts are filled in by assets/favnav.js and never move the layout. */

/* ---------- The heart ---------- */
.sr-fav{position:relative;display:inline-grid;place-items:center;flex:none;margin:0;padding:0;border:0;background:var(--sr-canvas);color:var(--sr-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,box-shadow .2s}
.sr-fav .sr-icon{width:18px;height:18px;fill:transparent;transition:fill .2s,stroke .2s,transform .2s}
.sr-fav:hover{color:var(--md-ink-accent)}
.sr-fav[aria-pressed="true"]{color:var(--sr-accent)}
.sr-fav[aria-pressed="true"] .sr-icon{fill:var(--sr-accent);stroke:var(--sr-accent)}
.sr-fav.is-pop .sr-icon{animation:sr-fav-pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes sr-fav-pop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sr-fav.is-pop .sr-icon{animation:none}}
/* On a card photo: a 34px circle (44px to the touch) */
.sr-fav--card{width:34px;height:34px;border-radius:50%;box-shadow:0 1px 4px rgb(0 0 0/.16)}
.sr-fav--card::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.sr-fav--float{position:absolute;top:8px;right:8px;z-index:4}
/* Product page: a square at the end of the purchase row, as tall as the buttons */
.sr-fav--pdp,.sr-fav--qv{width:50px;height:50px;border:1px solid var(--md-hair);border-radius:var(--sr-radius-sm)}
.sr-fav--pdp:hover,.sr-fav--qv:hover{border-color:var(--sr-accent)}
.sr-fav--pdp .sr-icon,.sr-fav--qv .sr-icon{width:24px;height:24px}
.sr-fav--wide{display:inline-flex;align-items:center;gap:8px;height:46px;margin:0 0 16px;padding:0 18px 0 14px;border:1px solid var(--md-hair);border-radius:var(--sr-radius-sm);font:700 14px/1 var(--sr-body-font)}
.sr-fav--wide:hover{border-color:var(--sr-accent)}
.sr-fav--wide .sr-fav__on,.sr-fav--wide[aria-pressed="true"] .sr-fav__add{display:none}
.sr-fav--wide[aria-pressed="true"] .sr-fav__on{display:inline}
.sr-qv__buy{display:flex;align-items:center;gap:8px;margin-top:4px}
.sr-qv__buy .sr-qv__add{flex:1;width:auto;margin:0!important}

/* ---------- Counts ---------- */
.sr-fav-link{position:relative}
:is(.sr-fav-count,.sr-bnav .sr-count)[hidden]{display:none!important}
.sr-mnav__utilities .sr-fav-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--md-soft);color:var(--md-ink-accent);font:700 12px/1 var(--sr-body-font)}

/* ---------- Bottom navigation bar (phones and tablets) ---------- */
:root{--sr-bnav-h:60px}
.sr-bnav{display:none}
@media (max-width:1023px){
  body.sr-has-bnav{padding-bottom:calc(var(--sr-bnav-h) + env(safe-area-inset-bottom))}
  .sr-bnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding-bottom:env(safe-area-inset-bottom);background:var(--sr-canvas);box-shadow:0 -1px 0 var(--md-hair),0 -6px 18px rgb(0 0 0/.05)}
  .sr-bnav__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:600px;height:var(--sr-bnav-h);margin:0 auto;padding:0 4px;list-style:none}
  .sr-bnav__list li{display:flex;min-width:0}
  .sr-bnav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0 2px;color:var(--sr-muted);font:500 11px/1.1 var(--sr-body-font);text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .sr-bnav__icon{position:relative;display:grid;place-items:center;width:28px;height:28px}
  .sr-bnav__icon .sr-icon{width:24px;height:24px}
  .sr-bnav__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sr-bnav__item.is-current{color:var(--md-ink-accent);font-weight:700}
  .sr-bnav__item:active .sr-bnav__icon{transform:scale(.92)}
  .sr-bnav__item:focus-visible{outline:2px solid var(--sr-ink);outline-offset:-4px}
  .sr-bnav .sr-count,.sr-bnav .sr-fav-count{position:absolute;top:-4px;left:16px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sr-accent);color:var(--sr-on-accent);font:700 10.5px/1 var(--sr-body-font);box-shadow:0 0 0 2px var(--sr-canvas)}
}
@media print{.sr-bnav{display:none!important}}

/* ---------- "My favourites" page ---------- */
.sr-favp{padding-block:20px 64px}
.sr-favp__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 20px}
.sr-favp__title{display:flex;align-items:baseline;gap:10px;margin:0;font:700 24px/1.15 var(--sr-heading-font);letter-spacing:-.015em}
.sr-favp__total{color:var(--sr-muted);font:500 14px/1 var(--sr-body-font)}
.sr-favp__note{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 14px 10px 12px;border-radius:var(--sr-radius-sm);background:var(--md-soft);font:400 13px/1.45 var(--sr-body-font)}
.sr-favp__note[hidden]{display:none}
.sr-favp__note .sr-icon{flex:none;color:var(--sr-accent);fill:var(--sr-accent)}
.sr-favp__note a{color:var(--md-ink-accent);font-weight:700;text-decoration:none}
.sr-favp__list{min-height:200px}
.sr-favp__list:empty{min-height:0}
/* The list sits outside .woocommerce, so it gets the catalogue's grid here: 2, 3, 4 and 5 across like the home rails */
.sr-favp ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--md-gx,12px);margin:0;padding:0;list-style:none}
.sr-favp ul.products::before,.sr-favp ul.products::after{display:none}
.sr-favp ul.products>li{float:none;width:auto;min-width:0;margin:0}
@media (min-width:600px){.sr-favp ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.sr-favp ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.sr-favp ul.products{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sr-favp li.sr-pc{transition:opacity .25s,transform .25s}
.sr-favp li.sr-pc.is-leaving{opacity:0;transform:scale(.96)}
.sr-favp__ghost span{display:block;aspect-ratio:3/4;border-radius:var(--sr-radius);background:var(--sr-field2)}
.sr-favp__ghost i{display:block;width:72%;height:14px;margin-top:12px;border-radius:6px;background:var(--sr-field2)}
.sr-favp__ghost i+i{width:38%;margin-top:8px}
.sr-favp__ghosts{animation:sr-favp-wait 1.2s ease-in-out infinite alternate}
@keyframes sr-favp-wait{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.sr-favp__ghosts{animation:none}}
.sr-favp__empty{display:grid;justify-items:center;gap:12px;max-width:460px;margin:8px auto 0;padding:40px 24px 48px;text-align:center}
.sr-favp__empty[hidden]{display:none}
.sr-favp__mark{display:grid;place-items:center;width:80px;height:80px;margin-bottom:8px;border-radius:50%;background:var(--md-soft);color:var(--sr-accent)}
.sr-favp__empty h2{margin:0;font:700 22px/1.2 var(--sr-heading-font)}
.sr-favp__empty p{margin:0;color:var(--sr-muted);font:400 14.5px/1.5 var(--sr-body-font)}
.sr-favp__empty .button{margin-top:12px;min-height:46px;padding:0 24px;border-radius:var(--sr-radius-sm);background:var(--sr-accent);color:var(--sr-on-accent);font-weight:700}
.sr-favp__recent{margin-top:28px;padding-top:28px;border-top:1px solid var(--md-hair)}
.sr-favp__recent[hidden]{display:none}
.sr-favp__h2{margin:0 0 14px;font:700 20px/1.2 var(--sr-heading-font)}
.sr-favp__recent-list{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 10px) / 2.6);gap:10px;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sr-favp__recent-list::-webkit-scrollbar{display:none}
.sr-favp__recent-list li{scroll-snap-align:start;min-width:0}
.sr-favp__recent-list a{display:grid;color:var(--sr-ink);text-decoration:none}
.sr-favp__recent-list img{width:100%;height:auto;aspect-ratio:3/4;border-radius:var(--sr-radius);object-fit:cover;background:var(--sr-field2)}
.sr-favp__recent-list .sr-recent__name{margin-top:8px;font:400 13px/18px var(--sr-body-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-favp__recent-list .sr-recent__price{margin-top:2px;font:700 13.5px/18px var(--sr-body-font);color:var(--md-ink-accent)}
@media (min-width:1024px){
  .sr-favp{padding-block:28px 88px}
  .sr-favp__empty{padding:56px 24px 64px}
  .sr-favp__recent-list{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
}

/* Phones: one footer pattern on every kit (kits/<kit>/footer.php, parts/footer-*.php), after the kit's own styles. The
   link groups fold into closed rows (data-sr-fold, assets/kit.js), contact links are 44px tap targets, the legal links
   and the copyright make a quiet bottom bar. Wider screens keep each kit's footer as it is. Lines and borders come from
   the footer's own text colour, so every kit and footer tone fits. Every rule starts at the class all footers share
   (sr-ft): the inline first-screen styles (inc/critical-css.php) read only top-level classes, and leave these out while
   the footer is below the fold. */
/* Every width: the legal links and "Cookie preferences" are tap targets of at least 24px (WCAG 2.5.8; 15-19px on a live
   store, 28 Oct 2026); phones make them taller below. */
.sr-ft :is(.md-ft__copy,.pz-ft__copy,.kl-ft__copy,.mz-ft__copy,.cr-ft__copy,.vt-ft__copy)>nav>a,.sr-ft :is(.bt-ft__legal,.dv-ft__legal,.ik-ft__legal,.po-ft__legal,.sk-ft__legal,.ys-ft__legal)>a,.sr-ft :is(.ak-ft__legal,.srv-ft__legal) li>a,.sr-ft .sr-ft-consent a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:767px){
  /* Link groups: one list of rows, each opening its links. */
  .sr-ft .sr-ft-folds{grid-column:1/-1;flex:1 1 100%;min-width:0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
  .sr-ft .sr-ft-folds>[data-sr-fold]{margin:0;padding:0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
  /* At the start or end of the columns the kit's own dividing line is already there: no second line, no empty band. */
  .sr-ft .sr-ft-folds:first-child>[data-sr-fold]:first-child{border-top:0}
  .sr-ft :has(>.sr-ft-folds:first-child){padding-top:4px}
  .sr-ft .sr-ft-folds:last-child{border-bottom:0}
  .sr-ft :has(>.sr-ft-folds:last-child){padding-bottom:4px}
  .sr-ft .sr-ft-folds .sr-ft__heading{margin:0;padding:0;color:inherit;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;opacity:1}
  .sr-ft .sr-ft__fold{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sr-ft .sr-ft__fold svg{flex:none;opacity:.7;transition:transform .2s ease}
  .sr-ft .sr-ft__fold[aria-expanded="true"] svg{transform:rotate(180deg)}
  .sr-ft .sr-ft-folds>[data-sr-fold]:not(.is-open)>ul{display:none}
  .sr-ft .sr-ft-folds>[data-sr-fold]>ul{display:block;margin:0;padding:0 0 10px;columns:auto}
  .sr-ft .sr-ft-folds>[data-sr-fold] li{margin:0}
  .sr-ft .sr-ft-folds>[data-sr-fold] li a{display:flex;align-items:center;min-height:40px;padding:0}

  /* Contact: the whole width; phone, WhatsApp and e-mail as buttons in a row, the address under them. */
  .sr-ft :is(.md-ft__contact,.pz-ft__contact,.kl-ft__contact,.mz-ft__contact,.cr-ft__contact,.vt-ft__contact,.bt-ft__col--contact,.dv-ft__col--contact,.ik-ft__col--contact,.po-ft__col--contact,.sk-ft__col--contact,.ys-ft__col--contact,.ak-ft__reach,.srv-ft__reach){grid-column:1/-1}
  .sr-ft :is(address,ul):has(>a[href^="tel:"],>a[href^="mailto:"],>li>a[href^="tel:"],>li>a[href^="mailto:"]){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .sr-ft :is(address,ul):has(>a[href^="tel:"],>a[href^="mailto:"],>li>a[href^="tel:"],>li>a[href^="mailto:"])>:is(span,li:has(>address)){flex-basis:100%;margin:2px 0 0}
  .sr-ft :is(address,ul):has(>a[href^="tel:"],>a[href^="mailto:"],>li>a[href^="tel:"],>li>a[href^="mailto:"]) li{margin:0}
  .sr-ft :is(address,ul):has(>a[href^="tel:"],>a[href^="mailto:"],>li>a[href^="tel:"],>li>a[href^="mailto:"])>li:has(>a){display:flex;flex:1 1 auto}
  .sr-ft :is(address,li)>a:is([href^="tel:"],[href^="mailto:"],[href*="wa.me/"]){display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:8px;max-width:100%;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:var(--srs-btn,var(--sr-ft-chip,var(--sr-radius-sm,8px)));color:inherit;font-weight:600;text-decoration:none;overflow-wrap:anywhere}

  /* Bottom bar: the legal links two to a row, the copyright last. */
  .sr-ft :is(.md-ft__copy,.pz-ft__copy,.kl-ft__copy,.mz-ft__copy,.cr-ft__copy,.vt-ft__copy){display:flex;flex-direction:column;gap:12px}
  .sr-ft :is(.md-ft__copy,.pz-ft__copy,.kl-ft__copy,.mz-ft__copy,.cr-ft__copy,.vt-ft__copy)>p{order:1}
  .sr-ft :is(.bt-ft__bottom,.dv-ft__bottom,.ik-ft__bottom,.po-ft__bottom,.sk-ft__bottom,.ys-ft__bottom)>p:first-child{order:1}
  .sr-ft :is(.md-ft__copy,.pz-ft__copy,.kl-ft__copy,.mz-ft__copy,.cr-ft__copy,.vt-ft__copy)>nav,.sr-ft :is(.bt-ft__legal,.dv-ft__legal,.ik-ft__legal,.po-ft__legal,.sk-ft__legal,.ys-ft__legal),.sr-ft :is(.ak-ft__legal,.srv-ft__legal)>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-self:stretch;margin:0;padding:0;list-style:none}
  .sr-ft :is(.md-ft__copy,.pz-ft__copy,.kl-ft__copy,.mz-ft__copy,.cr-ft__copy,.vt-ft__copy)>nav>a,.sr-ft :is(.bt-ft__legal,.dv-ft__legal,.ik-ft__legal,.po-ft__legal,.sk-ft__legal,.ys-ft__legal)>a,.sr-ft :is(.ak-ft__legal,.srv-ft__legal) li>a{display:flex;align-items:center;min-height:36px;line-height:1.3}
  /* With the script the legal links are one more closed row among the groups (assets/kit.js), and "Cookie preferences"
     ends the copyright line. */
  .sr-ft [data-sr-legal][hidden]{display:none!important}
  .sr-ft .sr-ft-consent a{display:inline-flex;align-items:center;min-height:40px;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .sr-ft .sr-ft__fold svg{transition:none}
}

/* Unit price (inc/unit-price.php) and the quantity discount table (inc/qty-tiers.php), shared by every kit: preset tokens only. */

/* Unit price: on the product page a quiet line under the price; on cards small and muted inside the price row, after the
   price parts (some kits reorder ins/del), wrapping under the price only when the card is too narrow for it. */
.sr-unit-price{margin:4px 0 0;font:500 13px/1.35 var(--sr-body-font);color:var(--sr-muted);font-variant-numeric:tabular-nums}
.sr-unit-price[hidden]{display:none}
.sr-unit-price .woocommerce-Price-amount{font-weight:inherit;color:inherit}
.sr-unit-price--card{display:inline-block;flex:none;order:10;margin:0;font-size:12px;line-height:inherit;font-weight:400;white-space:nowrap}
.sr-unit-price--card::before{content:"\00b7\00a0";content:"\00b7\00a0" / ""}
.sr-unit-price--card .woocommerce-Price-amount,.sr-unit-price--card .woocommerce-Price-currencySymbol{font-size:inherit;font-weight:inherit}
.price:has(>.sr-unit-price--card){flex-wrap:wrap!important}
.ak-card__price>.sr-unit-price--card{order:0;align-self:baseline}

/* Quantity discount table: hairlines, no fill, tabular figures. */
.sr-tiers{margin:14px 0 4px;max-width:440px}
.sr-tiers[hidden]{display:none}
.sr-tiers__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 6px;font:600 14px/1.3 var(--sr-body-font);color:var(--sr-ink)}
.sr-tiers__head span{font-weight:400;font-size:12px;color:var(--sr-muted)}
.sr-tiers__table{width:100%;margin:0;border-collapse:collapse;border:0;font:400 14px/1.3 var(--sr-body-font);font-variant-numeric:tabular-nums}
.sr-tiers__table :is(th,td){padding:8px 10px 8px 0;border:0;border-bottom:1px solid var(--ak-hair,var(--sr-line));background:transparent;text-align:left;vertical-align:baseline}
.sr-tiers__table thead th{padding-top:0;font-size:12px;font-weight:500;color:var(--sr-muted)}
.sr-tiers__table tbody th{font-weight:600;color:var(--sr-ink)}
.sr-tiers__table :is(th,td):last-child{padding-right:0;text-align:right}
.sr-tiers__table tbody tr:last-child :is(th,td){border-bottom:0}
.sr-tiers__table td:nth-child(2){color:var(--sr-ink);font-weight:600}