/* 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}
}

/* 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}