/* One slim bar across the bottom, in the shop's navy/coral palette (the court green it
   arrived with was the padel template's). It has to stay readable and reachable — 44px targets, a
   real focus ring, and no reliance on colour alone — while taking a fraction of the height
   the panel did. */
.shop-consent{position:fixed;z-index:100050;left:0;right:0;bottom:0;box-sizing:border-box;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background:#F7F8FB;color:#12181F;border-top:3px solid #29334D;
  box-shadow:0 -6px 24px #12181f1f;font-family:Inter,sans-serif}
.shop-consent[hidden]{display:none}
.shop-consent-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shop-consent-text{flex:1 1 320px;font-size:13px;line-height:1.5;margin:0}
.shop-consent-text-mobile{display:none}
.shop-consent a{color:#29334D;text-decoration:underline}
/* Revealed by "Customise". Hidden rather than absent so save('selected') can still read them. */
.shop-consent-options{display:none;align-items:center;gap:18px;flex-wrap:wrap}
.shop-consent.is-custom .shop-consent-options{display:flex}
.shop-consent-options label{display:flex;align-items:center;gap:8px;font-size:13px;
  min-height:44px;cursor:pointer}
.shop-consent input{width:18px;height:18px;accent-color:#29334D}
.shop-consent-actions{display:flex;gap:8px;flex-wrap:wrap}
.shop-consent-actions button,.shop-consent-save-sel{padding:0 16px;min-height:44px;
  font:600 13px/1.3 Inter,sans-serif;background:white;color:#12181F;border:1px solid #29334D;
  border-radius:4px;cursor:pointer;white-space:nowrap}
/* Accept is filled and Reject is outlined, but both are the same size and sit side by side:
   a "reject" that is smaller or greyed out is not a free choice.
   Scoped through .shop-consent-actions so it outweighs the shared button rule above — as a
   bare class it lost to `.shop-consent-actions button` and rendered white. */
.shop-consent-actions button.shop-consent-accept{background:#C13F2A;border-color:#C13F2A;color:#fff}
.shop-consent-actions button:hover,.shop-consent-save-sel:hover{background:#e2e5ed;color:#12181F}
.shop-consent-actions button.shop-consent-accept:hover{background:#a63524;color:#fff}
.shop-consent button:focus-visible,.shop-consent input:focus-visible{outline:3px solid #12181F;
  outline-offset:2px}
/* Sits in the footer's help column among six plain <a> links, so it has to read as the
   seventh one. It stays a <button> because it opens the consent dialog rather than going
   anywhere, and a link that navigates nowhere is the worse trade — but nothing about the
   element's default styling may show through: a button is inline-block, centres its text
   and came with an underline and a brighter grey, which is what made it the odd row out.
   The values below are the ones the sibling links carry inline in base.html; the hover is
   CSS because theirs is an inline onmouseover. Keep the two in step. */
.shop-consent-reopen{display:block;width:100%;background:none;border:0;padding:4px 0;
  color:rgba(255,255,255,.6);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  text-decoration:none;transition:color .2s}
.shop-consent-reopen:hover{color:#fff}
.shop-consent-bare-settings{position:fixed;bottom:12px;left:4%;z-index:100;min-height:32px;
  padding:6px 10px;border:1px solid #29334D;border-radius:4px;background:#F7F8FB;color:#12181F;
  font:500 12px Inter,sans-serif;cursor:pointer}
@media(max-width:640px){
  /* Clear of the fixed bottom navigation. */
  .shop-consent{bottom:64px;padding:8px 14px;gap:8px}
  .shop-consent-text{flex-basis:100%;font-size:12px;line-height:1.4}
  /* Two lines, not three: the shorter wording from _tracking_consent.html. */
  .shop-consent-text-full{display:none}
  .shop-consent-text-mobile{display:inline}
  .shop-consent-actions{width:100%;gap:6px;flex-wrap:nowrap}
  /* All three on one row. Customise is the narrow one — it opens a choice rather than making
     one, so it may be smaller; Reject and Accept stay equal to each other. */
  .shop-consent-actions button{flex:1 1 0;min-width:0;padding:0 6px;font-size:12px;
    min-height:44px;white-space:normal}
  .shop-consent-actions .shop-consent-customise{flex:0 1 auto;padding:0 10px}
}