/*
Theme Name:   Store Child
Template:     blocksy
Version:      1.0.0
Text Domain:  store-child
*/

/* Your custom CSS goes below this line. */
/* wp-content/themes/child-store/style.css */
.store-deposit-choice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--theme-border-color, #e0e5eb);
  border-radius: 5px;
}
.store-deposit-choice label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 500;
}
.store-deposit-choice input {
  margin: 0;
  flex: none;
}


/* =====================================================================
   Archive filter bar
   ===================================================================== */
.shop-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

/* YITH renders its own wrappers inside; let them sit inline */
.shop-filters .yith-wcan-filters,
.shop-filters .filters-container,
.shop-filters .filters-container > form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  flex: 1 1 auto;
  min-width: 0;
}
.shop-filters .filters-container > form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.shop-filters .yith-wcan-filter { margin: 0; }

/* the "Brands" toggle */
.shop-filters .filter-title {
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--theme-palette-color-4, #192a3d);
  background: var(--theme-palette-color-6, #f2f5f7);
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.shop-filters .filter-title:hover {
  background: var(--theme-palette-color-8, #fff);
  border-color: var(--theme-palette-color-1, #2872fa);
}

/* term list inside the dropdown */
.shop-filters .filter-items { margin: 0; padding: 0; list-style: none; }
.shop-filters .filter-item { margin: 0; }
.shop-filters .filter-item label { cursor: pointer; }

/* Cap the open dropdown so a long brand list scrolls instead of running off
   the screen. YITH ships this rule but targets `.filter-content > .filter-items`;
   the checkbox design wraps the list in a <fieldset>, so that direct-child
   selector never matches and the list grows unbounded. Descendant selector
   here to reach through the fieldset.
   YITH's own "Show more" pagination is off (Filters > paginate terms = no), so
   every term is rendered and this scroll is the only thing managing length.
   Each .filter-item has line-height 2, so one row is 2em: 20em = 10 rows,
   and it stays 10 rows at any font size, desktop or mobile. */
.shop-filters .filter-content .filter-items {
  max-height: 20em;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* don't scroll the page at either end */
  padding-right: 6px;             /* keep labels clear of the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-palette-color-5, #e1e8ed) transparent;
}
.shop-filters .filter-content .filter-items::-webkit-scrollbar {
  width: 6px;
}
.shop-filters .filter-content .filter-items::-webkit-scrollbar-thumb {
  background: var(--theme-palette-color-5, #e1e8ed);
  border-radius: 999px;
}
.shop-filters .filter-content .filter-items::-webkit-scrollbar-thumb:hover {
  background: var(--theme-palette-color-4, #192a3d);
}

/* AJAX placeholders: quiet shimmer instead of empty checkboxes */
.shop-filters .item-placeholder {
  display: block;
  height: 0.7rem;
  min-width: 4.5rem;
  border-radius: 4px;
  background: var(--theme-palette-color-6, #f2f5f7);
}

/* =====================================================================
   Product cards
   ===================================================================== */
[data-products] .product {
  display: flex;
  flex-direction: column;
  background: var(--theme-palette-color-8, #fff);
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 14px;
  overflow: hidden;
  padding-bottom: 1.15rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-products] .product:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 32px -16px rgba(25, 42, 61, 0.35);
}

/* image sits flush to the card edge, on a soft tint */
[data-products] .product figure {
  margin: 0 0 1.1rem;
  background: var(--theme-palette-color-6, #f2f5f7);
  overflow: hidden;
}
[data-products] .product figure img {
  display: block;
  width: 100%;
  transition: transform 0.45s ease;
}
[data-products] .product:hover figure img { transform: scale(1.06); }

/* text block gets its own padding so the image can stay full-bleed */
[data-products] .product .woocommerce-loop-product__title,
[data-products] .product .price,
[data-products] .product .entry-meta,
[data-products] .product .ct-woo-card-stock {
  padding-inline: 1.1rem;
}

[data-products] .product .woocommerce-loop-product__title {
  font-size: 1.02rem;
  line-height: 1.35;
  text-wrap: balance;
}
[data-products] .product .price {
  font-size: 1.05rem;
  color: var(--theme-palette-color-4, #192a3d);
}
[data-products] .product .entry-meta {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* push the button to the bottom so cards line up */
[data-products] .product .button {
  margin: 1rem 1.1rem 0;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
}
[data-products] .product > *:last-child { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  [data-products] .product,
  [data-products] .product figure img { transition: none; }
  [data-products] .product:hover { transform: none; }
  [data-products] .product:hover figure img { transform: none; }
}

/* =====================================================================
   Header dropdown menus
   Scoped by CONTAINER, not by viewport width. .header-menu-1/2 is the
   desktop nav; .mobile-menu is the off-canvas drawer, which Blocksy
   styles itself. Gating these on a min-width was the bug: the colour
   rule was global while the background rule was not, so below 1000px
   the panel kept Blocksy's dark default and the dark link text vanished
   into it -- a dropdown that opened but looked empty.
   ===================================================================== */
.header-menu-1 .sub-menu,
.header-menu-2 .sub-menu {
  --dropdown-background-color: var(--theme-palette-color-8, #fff);
  --dropdown-background-hover-color: var(--theme-palette-color-6, #f2f5f7);
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 10px;
  box-shadow: 0 20px 46px -22px rgba(25, 42, 61, 0.45);
}

/* Match the header menu's own typography. Blocksy has no
   headerDropdownFont setting, so children fall back to the body sans
   while the top level is IBM Plex Mono / 500 / uppercase. IBM Plex Mono
   is already loaded for the header, so this costs no extra request.
   Same scope as the background above, so the two can never disagree. */
.header-menu-1 .sub-menu .ct-menu-link,
.header-menu-2 .sub-menu .ct-menu-link {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--theme-palette-color-3, #3a4f66);
  border-radius: 7px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.header-menu-1 .sub-menu li:hover > .ct-menu-link,
.header-menu-2 .sub-menu li:hover > .ct-menu-link {
  color: var(--theme-palette-color-1);
}

/* The two collection menus carry 24 and 28 items. Grid rather than
   column-count: multi-column with a capped height spills sideways into
   extra columns, which is where the horizontal scrollbar came from.
   Layout only, so a width gate is fine here. */
@media (min-width: 1000px) {
  .header-menu-1 #menu-item-605 > .sub-menu,
  .header-menu-1 #menu-item-606 > .sub-menu {
    --dropdown-width: 540px;
    --dropdown-items-spacing: 8px;   /* was 13px: halves the row height */
    --dropdown-divider: none;        /* borders read badly across columns */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    padding: 12px 14px;
    max-height: none;                /* show everything, never scroll */
    overflow: visible;
  }

  /* a hairline between the two columns, drawn without an extra element */
  .header-menu-1 #menu-item-605 > .sub-menu > li:nth-child(odd),
  .header-menu-1 #menu-item-606 > .sub-menu > li:nth-child(odd) {
    border-right: 1px solid var(--theme-palette-color-5, #e1e8ed);
    padding-right: 9px;
    margin-right: -9px;
  }

  /* keep the rightmost dropdown inside the viewport */
  .header-menu-1 #menu-item-606 > .sub-menu {
    left: auto;
    right: 0;
  }
}

/* =====================================================================
   Mobile: the off-canvas drawer
   A max-height here clipped 8 of the 28 items behind a nested scroll
   area. The drawer scrolls on its own, so let the submenu run full
   length instead of capping it.
   ===================================================================== */
@media (max-width: 999.98px) {
  .sub-menu {
    max-height: none;
    overflow: visible;
  }
  .mobile-menu .sub-menu .ct-menu-link {
    font-size: 13px;
    padding-block: 9px;
  }
}

/* =====================================================================
   Mobile: the product filter
   "Modal on mobile" is off in the YITH settings, so the filter renders
   inline exactly as it does on desktop. YITH only hides the inline
   filter when it adds body.filters-in-modal, which it no longer does.
   Belt and braces in case that setting is turned back on:
   ===================================================================== */
@media (max-width: 991.98px) {
  body.filters-in-modal .shop-filters .yith-wcan-filters {
    display: block;
  }
  .shop-filters {
    margin-bottom: 1rem;
  }
  .shop-filters .filter-title {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
  }
  /* the opener belongs to the modal flow we are not using */
  .yith-wcan-filters-opener {
    display: none;
  }
}

/* kept for the modal path, unused while the setting above is off */
.yith-wcan-filters-opener {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--theme-palette-color-8, #fff);
  background: var(--theme-palette-color-1);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.yith-wcan-filters-opener:hover {
  background: var(--theme-palette-color-2, var(--theme-palette-color-1));
  color: var(--theme-palette-color-8, #fff);
}

.yith-wcan-filters.filters-modal .modal-title {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.yith-wcan-filters.filters-modal .filter-title {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* =====================================================================
   Filter reset button
   YITH renders it as "btn btn-primary yith-wcan-reset-filters
   reset-filters" but ships no CSS for any of those -- btn/btn-primary
   are Bootstrap names nothing here defines -- so it falls back to the
   browser default button. Styled as a quiet secondary next to the
   Brands pill, since it undoes rather than does.
   ===================================================================== */
.shop-filters .yith-wcan-reset-filters,
.yith-wcan-filters .yith-wcan-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--theme-palette-color-3, #3a4f66);
  background: transparent;
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.shop-filters .yith-wcan-reset-filters:hover,
.yith-wcan-filters .yith-wcan-reset-filters:hover {
  color: var(--theme-palette-color-1);
  border-color: var(--theme-palette-color-1);
  background: transparent;
}
.shop-filters .yith-wcan-reset-filters:focus-visible,
.yith-wcan-filters .yith-wcan-reset-filters:focus-visible {
  outline: 2px solid var(--theme-palette-color-1);
  outline-offset: 2px;
}

/* the little count beside "Brands" */
.shop-filters .filter-count,
.shop-filters .item-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--theme-palette-color-1);
  color: var(--theme-palette-color-8, #fff);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Variation swatches
   The original <select> stays in the DOM (WooCommerce reads and writes it)
   but is hidden once the buttons exist. If JS never runs, .has-store-swatches
   is never added and the dropdown remains fully usable.
   ===================================================================== */
.has-store-swatches > select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.store-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

.store-swatch {
  min-width: 3.4rem;
  padding: 0.55rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--theme-palette-color-4, #192a3d);
  background: var(--theme-palette-color-8, #fff);
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.store-swatch:hover:not(:disabled) {
  border-color: var(--theme-palette-color-4, #192a3d);
}
.store-swatch:focus-visible {
  outline: 2px solid var(--theme-palette-color-1, #2872fa);
  outline-offset: 2px;
}

/* chosen */
.store-swatch.is-selected {
  color: var(--theme-palette-color-8, #fff);
  background: var(--theme-palette-color-4, #192a3d);
  border-color: var(--theme-palette-color-4, #192a3d);
}

/* out of stock, or impossible with the other attribute already chosen:
   struck through rather than removed, so the size run stays readable */
.store-swatch:disabled {
  cursor: not-allowed;
  color: var(--theme-palette-color-3, #9aa4ae);
  background: var(--theme-palette-color-6, #f2f5f7);
  border-color: var(--theme-palette-color-5, #e1e8ed);
  background-image: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* colour attributes render a filled chip instead of a word */
.store-swatches.is-color .store-swatch.has-color {
  min-width: 0;
  padding: 3px;
  border-radius: 50%;
  line-height: 0;
}
.store-swatch__color {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
.store-swatches.is-color .store-swatch.is-selected {
  background: transparent;
  border-color: var(--theme-palette-color-4, #192a3d);
  border-width: 2px;
  padding: 2px;
}
.store-swatches.is-color .store-swatch:disabled .store-swatch__color {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .store-swatch { transition: none; }
}

/* =====================================================================
   Checkout: "Order on WhatsApp" notice
   Sits immediately above the Place order button. Payment methods are
   disabled site-wide, so WooCommerce renders no payment section and its
   .payment_box styling never loads - the grey panel and its pointer are
   rebuilt here rather than borrowed from the gateway markup.
   ===================================================================== */
.store-wa-order {
  margin: 0 0 1.5em;
}

.store-wa-order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.9em;
}

.store-wa-order__title {
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--theme-palette-color-3, #6d6d6d);
}

.store-wa-order__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}

/* grey panel with the pointer that WooCommerce draws on .payment_box */
.store-wa-order__box {
  position: relative;
  padding: 1.5em;
  background: var(--theme-palette-color-6, #ececec);
  color: var(--theme-palette-color-2, #3f3f3f);
  line-height: 1.5;
  border-radius: 2px;
}

.store-wa-order__box::before {
  content: "";
  position: absolute;
  top: -0.75em;
  left: 2em;
  width: 0;
  height: 0;
  border: 0.75em solid transparent;
  border-top: 0;
  border-bottom-color: var(--theme-palette-color-6, #ececec);
}

/* =====================================================================
   Floating "Contact Us" WhatsApp bubble
   Rendered on wp_footer by the mu-plugin. Collapsed it is a 56px circle,
   matching the footprint Chaty uses on luxsova; on hover or keyboard
   focus it grows sideways into a pill that spells out the label. The
   growth is a 0fr -> 1fr grid track rather than a width/max-width
   animation, so the label never wraps or reflows mid-transition and the
   collapsed width is exactly icon + padding at any font size.
   Bottom offset leaves room if Blocksy's scroll-to-top is switched on
   later - raise `bottom` to 90px if it is, or the two will overlap.
   ===================================================================== */
.store-wa-bubble {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 99998;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 14px;
  border-radius: 28px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 22%);
  transition: gap 0.25s ease, box-shadow 0.25s ease;
}

.store-wa-bubble:hover,
.store-wa-bubble:focus-visible {
  color: #fff;
  gap: 10px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
}

.store-wa-bubble:focus-visible {
  outline: 3px solid var(--theme-palette-color-4, #192a3d);
  outline-offset: 3px;
}

.store-wa-bubble__icon {
  display: flex;
  flex: 0 0 auto;
}

/* the collapsing track: 0fr hides the label without removing it from the
   accessibility tree, so screen readers still announce "Contact Us" */
.store-wa-bubble__label {
  display: grid;
  grid-template-columns: 0fr;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: grid-template-columns 0.25s ease;
}

.store-wa-bubble__label > span {
  min-width: 0;
  overflow: hidden;
}

.store-wa-bubble:hover .store-wa-bubble__label,
.store-wa-bubble:focus-visible .store-wa-bubble__label {
  grid-template-columns: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .store-wa-bubble,
  .store-wa-bubble__label {
    transition: none;
  }
}

/* =====================================================================
   Reviews page - [reviews] shortcode
   Cards sit in an auto-fill grid so the column count follows the
   available width rather than a number baked into the shortcode; the
   same markup works full-width on /reviews/ and inside a narrower
   homepage section. min() keeps the track from overflowing on a phone,
   where 300px plus page padding would be wider than the viewport.
   ===================================================================== */
.store-reviews {
  --store-star: #f0a92e;
}

.store-reviews__summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.store-reviews__average {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--theme-palette-color-4, #192a3d);
  font-variant-numeric: tabular-nums;
}

.store-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.store-reviews__count {
  font-size: 0.9rem;
  color: var(--theme-palette-color-3, #6d6d6d);
}

.store-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}

.store-review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.4rem;
  background: var(--theme-palette-color-8, #fff);
  border: 1px solid var(--theme-palette-color-5, #e1e8ed);
  border-radius: 6px;
}

.store-review__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Photo at the top of the card, bleeding into the card padding on three
   sides. The fixed aspect ratio is what keeps a row of cards tidy: a
   portrait phone snap and a square catalogue shot otherwise set wildly
   different heights. Change `aspect-ratio` here to re-crop them all. */
.store-review__media {
  margin: -1.4rem -1.4rem 0;
}

.store-review__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
}

.store-review__product {
  padding: 0.8rem 1.4rem 0;
  font-size: 0.85rem;
  color: var(--theme-palette-color-3, #6d6d6d);
}

.store-review__product a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.store-review__product a:hover,
.store-review__product a:focus-visible {
  color: var(--theme-palette-color-1, #2872fa);
}


/* initial-in-a-circle instead of an avatar image: no uploads to manage,
   and no broken thumbnails when a review is added in a hurry */
.store-review__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.store-review__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.store-review__name {
  font-weight: 600;
  color: var(--theme-palette-color-4, #192a3d);
}

.store-review__location {
  font-size: 0.85rem;
  color: var(--theme-palette-color-3, #6d6d6d);
}

.store-review__stars {
  display: inline-flex;
  gap: 2px;
}

.store-star {
  fill: var(--theme-palette-color-5, #e1e8ed);
}

.store-star.is-on {
  fill: var(--store-star);
}

.store-review__text {
  margin: 0;
  color: var(--theme-palette-color-2, #3f3f3f);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* =====================================================================
   Floating "Reviews" tab, pinned to the middle of the right edge
   Simple Side Tab (the plugin luxsova uses) rotates the anchor with a
   transform and then has to correct for it with transform-origin and a
   negative offset. writing-mode does the same job without any of that
   maths: the box is genuinely tall and narrow, so top:50% plus a -50%
   shift centres it honestly, and the tab grows with its own label
   instead of needing a hand-set height.
   Sits below the WhatsApp bubble's z-index - they never overlap, but if
   a theme modal ever appears both should fall behind it in the same
   order they do here.
   ===================================================================== */
.store-reviews-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 99997;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: 18px 10px;
  border-radius: 6px 0 0 6px;
  background: var(--theme-palette-color-4, #192a3d);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: -2px 0 10px rgb(0 0 0 / 18%);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.store-reviews-tab:hover,
.store-reviews-tab:focus-visible {
  color: #fff;
  background: var(--theme-palette-color-1, #2872fa);
  transform: translateY(-50%) translateX(-3px);
}

.store-reviews-tab:focus-visible {
  outline: 3px solid var(--theme-palette-color-4, #192a3d);
  outline-offset: 3px;
}

/* a phone has far less vertical room to give away to a permanent tab */
@media (max-width: 600px) {
  .store-reviews-tab {
    padding: 14px 8px;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-reviews-tab {
    transition: none;
  }

  .store-reviews-tab:hover,
  .store-reviews-tab:focus-visible {
    transform: translateY(-50%);
  }
}