/* Cart layout transcribed from the protected 26 August approval; not a second site shell. */
:root{--save:#d11414;--selected-core:#05aa5e}
.ck{position:relative;padding-bottom:6px;margin-bottom:2px}
.ck .back{font-family:var(--list);font-size:11px;letter-spacing:.02em;
color:var(--nav);text-decoration:none;white-space:nowrap}
.ck .back:hover{color:var(--nav-on)}
.ck .lang-tr{position:static;max-width:100%}
.ck .lang-picker>span{flex:none}
.ck .lang-select{min-width:80px}
.ck .lang-picker{font-family:var(--list);font-size:11px;letter-spacing:.02em}

/* D - the way back on the left, the mark in the middle, language on the
   right, all on ONE line, with the name under the mark. */
.ck4{display:grid;grid-template-columns:1fr auto 1fr;
grid-template-areas:"back logo lang" "wm wm wm";
align-items:center;column-gap:14px;row-gap:4px;padding-top:2px}
.ck4 .ck-corner{position:static}
.ck4 .ck-corner.l{grid-area:back;justify-self:start}
.ck4 .ck-corner.r{grid-area:lang;justify-self:end}
.ck4 .logo{grid-area:logo;justify-self:center;width:66px;height:66px;margin:0}
.ck4 .logo img{width:100%;height:100%}
.ck4 .wordmark{grid-area:wm;text-align:center;margin:0}

/* ---- the catalogue ----------------------------------------------------
   Devi: "we do families column to column, please stop splitting them into
   rows." One family per column, its plugins running down it. Families wrap
   to a second row of columns only when they genuinely will not fit. */
.pane.cart{align-items:flex-start;gap:26px;margin-top:18px}
.cart-list{flex:1;min-width:228px}
.cart-list h1{font-size:22px;margin:0 0 12px;font-weight:bold;letter-spacing:-.005em}
.fams{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
gap:16px 34px;padding:2px 0 0}
.fam-name{font-family:var(--list);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--grey);margin:0 0 4px}
.cat-row{display:flex;align-items:center;gap:9px;padding:1px 2px;cursor:pointer;
border-radius:2px;min-width:0;line-height:1.25}
.cat-row:hover{background:#0d0d0d}
.cat-row input{appearance:none;-webkit-appearance:none;flex:none;
width:13px;height:13px;margin:0;border:1px solid #3a3a3a;border-radius:2px;
background:#0a0a0a;cursor:pointer}
.cat-row input:hover{border-color:#666}
.cat-row input:checked{background:var(--pc);border-color:var(--pc)}
.cat-row input:checked::after{content:"";display:block;width:3px;height:7px;
margin:1px auto 0;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.cat-row input:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.cat-art{flex:none;width:3px;height:13px;border-radius:1px;background:var(--pc);
opacity:.55}
.cat-row.on .cat-art{opacity:1}
.cat-txt{flex:1;min-width:0}
.cat-txt a{font-size:12.5px;line-height:1.25;text-decoration:none;color:var(--pink)}
.cat-txt a:hover{color:#fff}
.cat-row.on .cat-txt a{color:#fff}
.cat-price{flex:none;font-size:12px;color:var(--body);font-variant-numeric:tabular-nums}
.cat-row.on .cat-price{color:var(--ink)}

/* ---- the order sheet --------------------------------------------------- */
.cart-order{flex:0 1 236px;min-width:196px;border-left:1px solid #1d1d1d;padding-left:18px;
align-self:flex-start;position:sticky;top:14px}
.cart-order .lbl{font-family:var(--list);font-size:9.5px;letter-spacing:.2em;
text-transform:uppercase;color:#5e5e5e;margin:0 0 7px}
.cart-order .lbl.mt{margin-top:18px}
/* Savings are red; the selected-plugin chips keep their green plate colour. */
.deal{font-size:15px;line-height:1.35;color:var(--ink);margin:0 0 11px;
min-height:2.7em}
.deal b{color:var(--save);font-weight:bold}
/* one block per plugin. The units are plugins, so this cannot be read as
   "step 1 of 3" the way a track with tick marks was. */
.chips{display:flex;gap:6px}
.chips i{flex:1;height:11px;border-radius:2px;background:#191919;
box-shadow:inset 0 0 0 1px #2c2c2c;transition:background .18s}
.chips i.on{background:var(--selected-core);box-shadow:none}
.chip-note{font-family:var(--list);font-size:10px;letter-spacing:.05em;
color:#5e5e5e;margin:8px 0 0}
/* heard, not seen: one sentence when the order changes, instead of every
   figure in the panel re-reading itself. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pick{font-size:12.5px;margin:0}
.pick div{display:flex;justify-content:space-between;gap:10px;padding:2px 0;
color:var(--body)}
.pick div span:first-child{color:var(--ink)}
.pick .none{color:#5e5e5e;display:block}
.sums{font-size:12.5px;margin:12px 0 0;padding-top:10px;border-top:1px solid #1d1d1d}
.sums div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;color:var(--body)}
.sums div>span:first-child{min-width:0;overflow-wrap:anywhere}
.sums div>span:last-child{flex:none;white-space:nowrap}
.sums .off span:last-child{color:var(--save)}
.checkout-totals [data-checkout-discount]{color:var(--save)}
.sums .tot{margin-top:8px;padding-top:8px;border-top:1px solid #1d1d1d;
font-size:14px;font-weight:bold;color:var(--ink)}
.cart-order .buy{display:block;width:100%;text-align:center;margin-top:14px;
border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.cart-order .buy:hover:not(:disabled){background:#000;color:#fff;outline:1px solid #d11414}
.cart-order .buy:focus-visible{outline:2px solid #d11414;outline-offset:2px}
.cart-order .buy:disabled{background:#1a1a1a;color:#5e5e5e;cursor:default}
.cart-order .buy:disabled:hover{background:#1a1a1a;color:#5e5e5e}
.sheet-cols{display:contents}
.scroll{display:contents}

/* ---- suggestions, full width, three fixed slots ----------------------- */
.also{margin-top:26px;padding-top:0}
.also[hidden]{display:none}
.also .lbl{font-family:var(--list);font-size:14px;font-weight:bold;line-height:1.4;
letter-spacing:normal;color:#f2c94c;margin:0 0 10px}
.also-run{display:grid;gap:14px 12px;grid-template-columns:repeat(3,1fr)}
.also-card{text-decoration:none;display:block}
.also-card img{width:100%;height:auto;display:block;border-radius:4px;
border:1px solid #1d1d1d}
.also-card b{display:block;font-size:12.5px;font-weight:normal;color:var(--pink);
margin-top:7px;text-align:center}
.also-card:hover b{color:#fff}
.also-card:hover img{border-color:#3a3a3a}

@media(max-width:720px){
  /* the site stacks .pane here; the checkout keeps its two columns to 500 */
  .pane.cart{flex-direction:row;align-items:flex-start;gap:16px;margin-top:16px}
  .fams{gap:14px 22px}
  .cat-row{padding:4px 2px}
  .cat-row input{width:16px;height:16px}
  .cat-art{height:16px}

}

@media(max-width:500px){
  html,body{height:100%}
  body{overflow:hidden;display:flex;flex-direction:column;
    padding-left:0;padding-right:0;padding-bottom:var(--sheet,260px)}
  /* the scroller is full width, so its bar sits where a page's bar belongs -
     hard against the window edge - and stops where the sheet starts. It was
     on .frame-in, which put the bar inside the silver frame and made it look
     like it was floating. */
  .scroll{display:block;flex:1;min-height:0;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#333 transparent}
  .scroll::-webkit-scrollbar{width:9px}
  .scroll::-webkit-scrollbar-track{background:transparent}
  .scroll::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:5px;
    border:2px solid transparent;background-clip:content-box}
  .scroll::-webkit-scrollbar-thumb:hover{background:#4d4d4d;background-clip:content-box}
  .frame{margin:0 8px}

  .pane.cart{flex-direction:column;align-items:stretch}

  /* The suggestions live at the foot of the page, which is exactly where the
     pinned sheet now sits - so down here they move above the catalogue.
     Devi: "put the suggested plugins at the top instead of the bottom when
     the browser gets small enough to squeeze the checkout to the bottom." */
  #pane-host{display:flex;flex-direction:column}
  .also{order:-1;margin:0;padding:0;border-top:0;border-bottom:0}
  .pane.cart{margin-top:16px}

  /* Devi: "the entire should be pinned at the bottom for phone", and
     "split into two columns, pedals being added to the cart on the left
     and checkout on the right." */
  .cart-order{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:20;
    flex:none;width:100%;background:#0a0a0a;border-left:0;
    border-top:1px solid #1d1d1d;padding:9px 14px 11px;
    max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cart-order .lbl{margin-bottom:3px}
  .deal{min-height:0;margin-bottom:8px;font-size:14px}
  .sheet-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;
    margin-top:9px;align-items:start}
  .sheet-cols > .col-r{border-left:1px solid #1d1d1d;padding-left:16px}
  .cart-order .lbl.mt{margin-top:0}
  .pick{max-height:92px;overflow-y:auto}
  .sums{margin-top:0;padding-top:0;border-top:0}
  .cart-order .buy{margin-top:9px;padding:10px 14px;white-space:nowrap}
  .amt{display:none}
}

@media(max-width:460px){
  .ck4{grid-template-columns:1fr auto;
    grid-template-areas:"lang logo" "back logo";
    align-items:center;column-gap:14px;row-gap:6px;padding-top:1px}
  .ck4 .ck-corner.r{grid-area:lang;justify-self:start}
  .ck4 .ck-corner.l{grid-area:back;justify-self:start;align-self:start}
  .ck4 .logo{grid-area:logo;justify-self:end;align-self:center;
    width:58px;height:58px}
  .ck4 .wordmark{display:none}
}
[hidden]{display:none!important}
.store-controls{display:flex;flex-wrap:wrap;gap:6px 12px;margin:12px 0;font-size:11px;color:var(--body)}
.store-controls select{background:#000;color:var(--body);border:1px solid #333;font:inherit;max-width:100%}
.store-notice{font-size:12px;color:var(--pink)}
.store-details{display:grid;gap:14px;font-size:13px}
.store-details label{display:grid;gap:7px;color:#fff}
.store-details input,.store-details select{width:100%;background:#111;color:#b5b5b5;border:1px solid #000;border-radius:3px;padding:12px;font:inherit;box-sizing:border-box}
.store-details input:focus,.store-details select:focus{outline:1px solid #d11414;box-shadow:0 0 0 2px #d11414}
.store-details input::placeholder{color:#636363}
.store-details button{background:#d11414;color:#fff;border:0;border-radius:3px;padding:13px;cursor:pointer;font:inherit}
.store-details button:hover{background:#000;color:#fff;outline:1px solid #d11414}
.store-details button:focus-visible{outline:2px solid #d11414;outline-offset:2px}
.store-details button:disabled{opacity:.5;cursor:wait}
.checkout-selected{display:grid;gap:10px}
.checkout-selected .checkout-product{padding-bottom:8px}
.checkout-error{color:#ffcccc;font-size:13px;line-height:1.5}