/* ---------------------------------------------------------------------
   Royalty Sports Shop - the kiosk interface.

   Styled as a screen rather than a page, so it can sit inside the SHOP
   HERE kiosk in the shop render once that scene exists. It stands on its
   own at /shop in the meantime.

   There are no prices anywhere in the supplier catalogue, so this cannot
   be a checkout. It builds a list and sends it as a quote request, which
   is how club and federation procurement works anyway.
   --------------------------------------------------------------------- */

:root {
  --navy: #002365;
  --brand-blue: #4780eb;
  --panel: #01224c;         /* the screen blue, measured off the render */
  --screen-top: #0b3164;
  --line: rgba(247, 244, 236, .14);
  --dim: rgba(247, 244, 236, .58);
  --brand: Ppmonumentextended, Impact, "Arial Narrow", sans-serif;
  --body: "Sofia Sans", Lato, system-ui, sans-serif;
}

/* Every control in here is sized with width:100% inside a padded box, which
   only works if the padding is counted in. content-box was pushing the
   fields 10px past the panel edge on a phone. */
.shop input,
.shop textarea,
.shop select,
.shop button {
  box-sizing: border-box;
}

.shop {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-family: var(--body);
  color: #f7f4ec;
  /* The screen in the render is a rich royal blue that falls off toward the
     bottom, not the near-black navy this used to be. */
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(41, 98, 178, .45), transparent 62%),
    linear-gradient(var(--screen-top), var(--panel) 46%, #01193a);
}

/* --- the kiosk frame -------------------------------------------------
   Not the whole kiosk photograph - just its edge. The SHOP HERE screens in
   the shop render sit in a graphite housing behind a soft-black bezel, with
   a light catch along the top lip and a faint bloom in the glass. Rebuilt
   as an edge rather than an image it costs a couple of dozen pixels instead
   of two thirds of the viewport, and it holds at any aspect ratio - the
   same frame reads on a laptop and on a phone.

   It runs to all four edges deliberately. You are meant to be inside the
   screen looking out, so the housing leaves the frame rather than sitting
   on the page as an object. There is a little more housing above the glass
   than below it, which is how the kiosks are built in the render.

   The render's housing is mid graphite, but against this screen it read as
   a silver mount around the picture rather than as an edge. Black, close to
   the bezel's own #1A1A1A, lets the frame disappear and the screen carry
   the eye - which is the point of the whole device.
   --------------------------------------------------------------------- */
.kiosk {
  --bezel: clamp(13px, 1.9vw, 30px);
  --chrome: 34px;                 /* plain housing above the glass, as in the render */
  --radius: clamp(13px, 1.6vw, 26px);
  box-sizing: border-box;
  padding: calc(var(--chrome) + var(--bezel)) var(--bezel) var(--bezel);
  background:
    linear-gradient(rgba(255, 250, 238, .32), rgba(255, 250, 238, 0) 2px),
    linear-gradient(#1c1c1d 0, #141415 40px, #0d0d0e 120px,
                    #0b0b0c calc(100% - 70px), #121213 100%);
}

/* the bezel proper: a near-black ring holding the glass, lifted off the
   housing by its own shadow */
.kiosk > .shop {
  border-radius: var(--radius);
  box-shadow:
    0 0 0 clamp(6px, .9vw, 15px) #131313,
    0 0 0 calc(clamp(6px, .9vw, 15px) + 1px) rgba(200, 195, 190, .15),
    inset 0 0 0 1px rgba(150, 180, 220, .16),
    inset 0 14px 36px rgba(0, 0, 0, .45),
    0 22px 55px rgba(0, 0, 0, .62);
}

/* glass: a soft bloom off the top left and a darkening toward the foot,
   over the interface but out of the pointer's way */
.kiosk > .shop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 70;                    /* glass is in front of everything */
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(78% 52% at 14% -10%, rgba(190, 220, 255, .085), transparent 62%),
    linear-gradient(transparent 78%, rgba(0, 6, 16, .26));
}

/* The grid scrolls inside the glass, so the scrollbar is part of the screen
   and a stock light-grey one breaks it. Firefox gets the two-property form,
   WebKit the pseudo-elements. */
.shop__body {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 180, 220, .3) transparent;
}

.shop__body::-webkit-scrollbar {
  width: 8px;
}

.shop__body::-webkit-scrollbar-track {
  background: transparent;
}

.shop__body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 100px;
  background: rgba(150, 180, 220, .28);
  background-clip: content-box;
}

.shop__body::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 180, 220, .5);
  background-clip: content-box;
}

/* On a phone width is the scarce thing and a heavy bezel costs a product
   column, so the frame stands back to a hairline of its desktop self. */
@media (max-width: 640px) {
  .kiosk {
    --bezel: 10px;
    --chrome: 14px;
    --radius: 11px;
  }

  .kiosk > .shop {
    box-shadow:
      0 0 0 6px #131313,
      0 0 0 7px rgba(200, 195, 190, .15),
      inset 0 0 0 1px rgba(150, 180, 220, .14),
      inset 0 10px 24px rgba(0, 0, 0, .45);
  }
}

/* display:flex beats the hidden attribute's display:none, and both of these
   are toggled with .hidden - so say it once, here. */
.shop__home[hidden],
.shop__filters[hidden],
.shop__results[hidden] {
  display: none;
}

/* --- status strip ----------------------------------------------------
   The kiosks in the render carry a phone-style status line - 9:41, signal,
   battery. It is the single cheapest cue that this is a device screen and
   not a web page, so it is here verbatim, with a live clock instead of the
   render's frozen 9:41. */
.shop__status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px clamp(14px, 2.4vw, 26px) 3px;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .88);
  user-select: none;
}

.shop__status svg {
  display: block;
  height: 11px;
  width: auto;
  fill: rgba(255, 255, 255, .88);
}

.shop__status > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- the landing screen ----------------------------------------------
   What the kiosk is actually showing in the render: a short list of ring
   icons over a strapline, and nothing else. Opening the hotspot onto the
   same composition means the close-up continues the render instead of
   replacing it, and only then does it come alive.

   The rings are the render's, the labels are the catalogue's own sections -
   the render shows sports, the supplier organises by equipment type, and
   inventing sports we cannot filter on would be a picture, not a shop. */
.shop__home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(10px, 2vh, 30px) 0;
}

.shop__lede {
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  font-size: clamp(.9rem, 1.5vw, 1.12rem);
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}

.shop__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(4px, .7vh, 10px) clamp(10px, 1.6vw, 26px);
  max-width: 780px;
}

.shop__tile {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(11px, 1.5vh, 17px) clamp(12px, 1.4vw, 18px);
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background-color .22s ease, transform .22s ease;
}

.shop__tile:hover,
.shop__tile:focus-visible {
  background: rgba(255, 255, 255, .08);
  transform: translateX(3px);
  outline: none;
}

.shop__ring {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.4vw, 58px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
}

.shop__ring svg {
  /* display:block matters here: an inline svg is centred as a line box, so
     it sits a couple of pixels high in the ring by the height of its own
     descender space. */
  display: block;
  width: 54%;
  height: 54%;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop__tile b {
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(.72rem, 1.1vw, .88rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  text-wrap: balance;
}

.shop__tile i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .52);
}

/* --- back to the shop floor ------------------------------------------
   The site's scene chevron, unchanged: bottom left, over the render. On the
   support screen it floats there as it always has. The browse screen's dock
   already owns that corner, so there it rides in the dock row rather than
   on top of it - same corner, same chevron, no collision. */
.back {
  /* Absolute, not fixed, and inside .shop. position:fixed on .kiosk makes
     it a stacking context, so a fixed sibling at any z-index would paint
     over the whole screen - including an open panel. In here the ordering
     works: glass 70, panel 60, chevron 50. */
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(22px, 4.5vh, 40px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  opacity: .82;
  transition: opacity .25s ease;
}

.back:hover,
.back:focus-visible {
  opacity: 1;
  outline: none;
}

.back svg {
  display: block;
  width: clamp(42px, 4.6vw, 60px);
  height: auto;
  transform: scaleX(-1);
  stroke: #fff;
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 8px rgba(4, 6, 12, .85));
}

.back span {
  font-family: var(--brand);
  font-size: clamp(.58rem, 1.1vw, .7rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(4, 6, 12, .9);
  white-space: nowrap;
}

.shop__dock .back {
  position: static;
  flex: 0 0 auto;
  gap: 11px;
}

.shop__dock .back svg {
  width: clamp(32px, 3vw, 42px);
}

/* --- the dock --------------------------------------------------------
   The render pins a bright blue VIEW CART bar across the foot of the
   screen. That is also simply the right place for it: on a kiosk it is the
   only part of a tall screen a standing person reaches without stooping,
   and on a phone it is the only part a thumb reaches at all. It used to be
   a ghost button in the top right corner, which is the worst of both. */
.shop__dock {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(9px, 1.4vh, 15px) clamp(14px, 2.4vw, 26px)
           clamp(11px, 1.7vh, 18px);
  background: linear-gradient(rgba(1, 16, 40, 0), rgba(1, 16, 40, .55) 40%);
}

.shop__dockbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: clamp(12px, 1.7vh, 17px);
  border: 0;
  border-radius: 9px;
  background: #3686f1;
  color: #fff;
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(.66rem, 1.05vw, .82rem);
  letter-spacing: .19em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(24, 96, 200, .38);
  transition: background-color .22s ease, box-shadow .22s ease;
}

.shop__dockbtn:hover,
.shop__dockbtn:focus-visible {
  background: #4d97fb;
  box-shadow: 0 8px 28px rgba(24, 96, 200, .5);
  outline: none;
}

.shop__dockbtn .shop__count {
  margin: 0;
  background: rgba(0, 0, 0, .3);
}

/* --- back to the landing screen -------------------------------------- */
.shop__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .66);
  font-family: var(--body);
  font-size: .8rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s ease;
}

.shop__back:hover {
  color: #fff;
}

.shop__back svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- header ---------------------------------------------------------- */
.shop__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2.5vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgba(1, 20, 46, .42);
}

.shop__title {
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(.62rem, 1.15vw, .78rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.shop__title span {
  display: block;
  margin-top: 4px;
  font-family: var(--body);
  font-size: .64rem;
  letter-spacing: .16em;
  color: var(--dim);
}

.shop__search {
  flex: 1;
  position: relative;
  min-width: 0;
}

.shop__search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-family: var(--body);
  font-size: .92rem;
}

.shop__search input::placeholder {
  color: rgba(247, 244, 236, .4);
}

.shop__search input:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: rgba(255, 255, 255, .08);
}

.shop__search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}

.shop__listbtn {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1px solid rgba(247, 244, 236, .3);
  border-radius: 100px;
  background: none;
  color: #fff;
  font-family: var(--brand);
  font-size: clamp(.56rem, 1vw, .66rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.shop__listbtn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.shop__count {
  display: inline-block;
  min-width: 18px;
  margin-left: 8px;
  padding: 1px 5px;
  border-radius: 100px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--body);
  font-size: .7rem;
  letter-spacing: 0;
}

/* --- filters --------------------------------------------------------- */
.shop__filters {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
  padding: 12px clamp(14px, 2.5vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}

.shop__filters::-webkit-scrollbar {
  display: none;
}

.shop__chip {
  flex: 0 0 auto;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: none;
  color: var(--dim);
  font-family: var(--body);
  font-size: .78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.shop__chip:hover {
  color: #fff;
}

.shop__chip[aria-pressed="true"] {
  color: #fff;
  border-color: var(--brand-blue);
  background: rgba(71, 128, 235, .18);
}

/* --- grid ------------------------------------------------------------ */
.shop__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 22px) clamp(14px, 2.5vw, 28px) 40px;
}

.shop__meta {
  margin: 0 0 14px;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.shop__card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 6px;
  background: rgba(2, 20, 48, .42);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.shop__card:hover,
.shop__card:focus-visible {
  border-color: rgba(247, 244, 236, .4);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
  outline: none;
}

/* The two partners shoot differently - AVACR7 on black, Meteorite's on
   white - so no single plate colour can sit behind both without banding
   one of them. Each product carries the median colour of its own photo's
   border instead, set inline from the catalogue, and the tile wears that.
   The letterbox around a contained image is then the photo's own
   background, so there is nothing to see. That also retires the multiply
   blend, which existed only to sink white cut-outs into a cream plate and
   would now darken every photo against its own plate. */
.shop__thumb {
  aspect-ratio: 1;
  margin-bottom: 9px;
  border-radius: 3px;
  background: #fff;               /* fallback; the catalogue overrides it */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shop__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Photography rather than a cut-out: it fills the tile, so there is no
   plate showing beside it and nothing to colour-match. */
.shop__thumb img.is-cover,
.shop__hero img.is-cover {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.shop__name {
  font-size: .82rem;
  line-height: 1.35;
  color: #f7f4ec;
}

.shop__code {
  margin-top: 5px;
  font-family: var(--brand);
  font-size: .58rem;
  letter-spacing: .12em;
  color: rgba(247, 244, 236, .42);
}

.shop__empty {
  padding: 50px 0;
  text-align: center;
  color: var(--dim);
}

/* One card per row on a phone turns 619 products into 619 screens, so the
   grid keeps two columns there and the thumbnails square up to suit. */
@media (max-width: 640px) {
  /* The header was spending a third of a phone screen before the first
     product; the strapline is the part that can go. */
  .shop__top {
    padding: 11px 14px 12px;
  }

  .shop__title span {
    display: none;
  }

  .shop__dock .back span {
    display: none;
  }

  .shop__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop__tiles {
    grid-template-columns: 1fr;
  }
}

/* --- detail and list panels ------------------------------------------ */
.shop__overlay {
  position: absolute;
  inset: 0;
  z-index: 60;                    /* over the chevron at 50 */
  display: flex;
  justify-content: flex-end;
  background: rgba(2, 4, 10, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.shop__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.shop__panel {
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: linear-gradient(#0a2f5c, #04193a);
  border-left: 1px solid var(--line);
  transform: translateX(18px);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto;
}

.shop__overlay.is-open .shop__panel {
  transform: none;
}

.shop__panelhead {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #08101f;
}

.shop__panelhead h3 {
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.shop__close {
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.shop__close:hover {
  color: #fff;
}

.shop__panelbody {
  padding: 18px;
}

.shop__hero {
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop__hero img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop__panelbody h4 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.shop__panelbody .code {
  font-family: var(--brand);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--brand-blue);
}

.shop__panelbody p {
  margin: 14px 0 0;
  font-size: .86rem;
  line-height: 1.65;
  color: rgba(247, 244, 236, .74);
}

.shop__varis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.shop__varis li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .72rem;
  color: var(--dim);
}

.shop__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}

.shop__qty label {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.shop__qty input {
  width: 76px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-family: var(--body);
  font-size: .9rem;
}

.shop__add {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 0;
  border-radius: 4px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--brand);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .25s ease;
}

.shop__add:hover {
  filter: brightness(1.14);
}

/* --- the list -------------------------------------------------------- */
.shop__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.shop__line .pic {
  flex: 0 0 54px;
  height: 54px;
  border-radius: 3px;
  background: #fff;               /* fallback; the catalogue overrides it */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shop__line .pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop__line .who {
  flex: 1;
  min-width: 0;
}

.shop__line .who b {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
}

.shop__line .who span {
  font-family: var(--brand);
  font-size: .56rem;
  letter-spacing: .12em;
  color: rgba(247, 244, 236, .45);
}

.shop__line input {
  width: 58px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-family: var(--body);
}

.shop__line button {
  border: 0;
  background: none;
  color: rgba(247, 244, 236, .4);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 2px;
}

.shop__line button:hover {
  color: #ff7b6e;
}

.shop__form {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.shop__form input,
.shop__form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-family: var(--body);
  font-size: .88rem;
}

.shop__form textarea {
  min-height: 74px;
  resize: vertical;
}

.shop__form input:focus,
.shop__form textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
}

.shop__note {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px dashed rgba(71, 128, 235, .5);
  border-radius: 4px;
  font-size: .76rem;
  line-height: 1.55;
  color: rgba(247, 244, 236, .66);
}

@media (max-width: 640px) {
  .shop__top {
    flex-wrap: wrap;
  }

  .shop__title {
    order: 1;
  }

  .shop__listbtn {
    order: 2;
    margin-left: auto;
  }

  .shop__search {
    order: 3;
    flex-basis: 100%;
  }

  .shop__panel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shop__card,
  .shop__panel,
  .shop__overlay {
    transition: none;
  }

  .shop__card:hover {
    transform: none;
  }
}