/*
Theme Name:   riverArk Store
Theme URI:    https://riverark.io
Description:  Dark, gradient-accented riverArk storefront. Child of Storefront, so WooCommerce template updates keep working while the design is fully overridden here.
Author:       RiverArk Systems, Inc.
Template:     storefront
Version:      1.8.9
License:      GNU General Public License v2 or later
Text Domain:  riverark-store
*/

/* ============================================================
   Design tokens. Identical palette to riverark.io and support.riverark.io
   so all three properties read as one system.
   ============================================================ */
:root {
  --ra-bg:        #06111a;
  --ra-elev:      #0b1e30;
  --ra-elev-2:    #11283f;
  --ra-soft:      #081624;
  --ra-ink:       #f4f7fb;
  --ra-ink-soft:  #a9b8ca;
  --ra-ink-faint: #7a8ca4;
  /* 5.7:1 on --ra-elev. Placeholder text has to clear the contrast floor; it is
     instruction, not decoration. */
  --ra-placeholder: #8b97ab;
  --ra-line:      rgba(255,255,255,.09);

  --ra-cyan:      #60d9cc;
  --ra-blue:      #2563eb;
  --ra-amber:     #f5a623;
  --ra-ok:        #2dd4bf;
  --ra-grad:      linear-gradient(135deg, #2ec4b0, #2563eb 70%);
  /* Hover fill. Deeper than the resting gradient, so white labels keep their
     contrast and the change is visible on the shape itself. */
  --ra-grad-hover: linear-gradient(135deg, #22a896, #1d4ed8 70%);

  --ra-radius:    14px;
  --ra-radius-sm: 9px;
  --ra-wrap:      1120px;
}

/* ============================================================
   Base
   ============================================================ */
body,
body.woocommerce,
body.woocommerce-page {
  background:
    radial-gradient(60rem 34rem at 50% -12%, rgba(46,196,176,.12), transparent 60%),
    radial-gradient(40rem 30rem at 100% 30%, rgba(37,99,235,.10), transparent 60%),
    var(--ra-bg);
  background-attachment: fixed;
  color: var(--ra-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.site { background: transparent; }
.col-full { max-width: var(--ra-wrap); }

h1, h2, h3, h4 {
  color: var(--ra-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.05rem; font-weight: 700; }

p, li, td, th, dd, dt { color: var(--ra-ink-soft); }

a { color: var(--ra-cyan); text-decoration: none; }
a:hover { color: var(--ra-cyan); text-decoration: underline; }

/* Gradient text utility, used for the accent word in headings */
.ra-grad {
  background: var(--ra-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Uppercase kicker, lifted from the riverArk deck */
.ra-eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ra-cyan);
  margin-bottom: .6rem;
}

/* ============================================================
   Header: floating glass pill, same system as riverark.io
   ============================================================ */
#masthead.site-header{position:sticky;top:0;z-index:50;background:transparent;border:0;padding:10px 2.617924em 0;margin-bottom:1.5rem;backdrop-filter:none}
@media(max-width:480px){#masthead.site-header{padding:8px 16px 0}}
.storefront-primary-navigation{display:none}
.ra-nav{max-width:var(--ra-wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(11,30,48,.78);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.09);box-shadow:0 12px 40px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);transition:max-width .35s ease,background .35s ease}
#masthead.is-scrolled .ra-nav{max-width:calc(var(--ra-wrap) - 40px);background:rgba(6,17,26,.9)}
.ra-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ra-ink)}
.ra-brand:hover{text-decoration:none}
.ra-brand .mark{width:32px;height:32px;border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px rgba(96,217,204,.35),0 0 18px rgba(46,196,176,.25)}
.ra-brand .mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);display:block}
.ra-brand .word{height:22px;width:auto;display:block}
.brand-sub{color:var(--ra-cyan);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(96,217,204,.3);border-radius:999px;padding:.15rem .55rem}
.ra-links{display:none;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
@media(min-width:900px){.ra-links{display:flex}}
.ra-links a{padding:8px 13px;border-radius:999px;font-size:.87rem;font-weight:600;color:#cbd5e1;transition:color .2s,background .2s}
.ra-links a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.ra-links a[aria-current="page"]{color:#fff;background:linear-gradient(135deg,rgba(46,196,176,.22),rgba(37,99,235,.32));box-shadow:inset 0 0 0 1px rgba(96,217,204,.25)}
.ra-act{display:flex;align-items:center;gap:6px}
.ra-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:.87rem;font-weight:800;color:#fff !important;background:var(--ra-grad);box-shadow:0 8px 24px -8px rgba(37,99,235,.8),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s}
.ra-cta:hover{transform:translateY(-1px);text-decoration:none}
.ra-cart-count{min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem}
.ra-burger{width:40px;height:40px;padding:0;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#e2e8f0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.ra-burger svg{width:20px;height:20px}
@media(min-width:900px){.ra-burger{display:none}}
.ra-menu{max-width:var(--ra-wrap);margin:10px auto 0;padding:10px;border-radius:22px;background:rgba(6,17,26,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px -16px rgba(0,0,0,.75)}
.ra-menu[hidden]{display:none}
.ra-menu a{display:block;padding:11px 14px;border-radius:14px;font-weight:600;color:#cbd5e1}
.ra-menu a:hover,.ra-menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.ra-menu .ra-cta{display:flex;justify-content:center;margin-top:8px;padding:12px 18px}
@media(min-width:900px){.ra-menu{display:none !important}}
@media(max-width:420px){.ra-brand .word{height:18px}.brand-sub{display:none}}
/* Generic button rules below would otherwise restyle the burger on hover. */
.ra-burger:hover,.ra-burger:focus{background:rgba(255,255,255,.1);color:#fff;transform:none;box-shadow:none}
/* Storefront makes <body> the scroll container, and <body> already starts
   below the admin bar, so any top offset here pushes the header down twice. */
.admin-bar #masthead.site-header{top:0}


/* ============================================================
   Buttons
   ============================================================ */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .wp-block-button__link,
.woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button {
  background: var(--ra-grad);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .78rem 1.6rem;
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.2;
  text-shadow: none;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}

/*
  A button is a filled shape, so the hover state belongs to the shape: the fill
  brightens and the label deepens. Storefront's global `a:hover` underline is
  cancelled here, because an underline drawn inside a solid pill reads as a
  rendering fault rather than as a link.
*/
button:hover, button:focus-visible,
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,
.button:hover, .button:focus-visible, .wp-block-button__link:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover {
  background: var(--ra-grad-hover);
  color: #fff;
  opacity: 1;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(96, 217, 204, .22);
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt {
  background: var(--ra-grad);
  color: #fff;
}

/* Secondary / ghost */
.woocommerce .button.ra-ghost,
.woocommerce a.button.wc-backward {
  background: transparent;
  color: var(--ra-ink-soft);
  border: 1px solid var(--ra-line);
}
.woocommerce .button.ra-ghost:hover,
.woocommerce a.button.wc-backward:hover {
  background: rgba(96, 217, 204, .12);
  border-color: var(--ra-cyan);
  color: var(--ra-ink);
  text-decoration: none;
  box-shadow: none;
}

/* ============================================================
   Front page
   ============================================================ */
.ra-home { width: 100% !important; float: none !important; margin: 0 auto; }

.ra-hero {
  /* Bottom padding trimmed: the wave below now provides the separation, so
     the hero does not need to reserve its own. */
  padding: 3rem 0 1.2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  gap: 2.6rem; align-items: center;
}
/*
  Column width and type size are set together, because the headline has to hold
  one line. Measured in headless Chromium at 1440, 1280, 1100, 1000, 900, 860,
  768, 600 and 480: one line at every one of them. Below 480 it wraps, which is
  correct on a phone.
*/
.ra-hero-text { max-width: 40rem; }
.ra-hero h1 { font-size: clamp(1.8rem, 3.3vw, 2.45rem); margin: 0 0 .6rem; }
.ra-lede { font-size: 1.12rem; color: var(--ra-ink-soft); margin: 0 0 1rem; }
.ra-lede-sub { font-size: 1rem; color: var(--ra-ink-faint); margin: 0 0 1.6rem; }

.ra-hero-art { margin: 0; }
.ra-hero-art img {
  width: 100%; height: auto; display: block;
  border-radius: var(--ra-radius);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.7);
  /* The decal is a white-ground print piece. A hairline keeps it from
     bleeding into the dark page at its right edge. */
  border: 1px solid var(--ra-line);
}
.ra-hero-art figcaption {
  color: var(--ra-ink-faint); font-size: .82rem;
  text-align: right; margin-top: .6rem; letter-spacing: .02em;
}

@media (max-width: 860px) {
  .ra-hero { grid-template-columns: 1fr; gap: 1.8rem; }
  .ra-hero-art { order: -1; }
  .ra-hero-art figcaption { text-align: left; }
}

/* ============================================================
   Account strip
   ============================================================ */
/*
  One bar under the site header carrying the visitor's account state. Three
  tones drive off a single custom property, so a fourth state is a colour and a
  class rather than another copy of the layout.
*/
.ra-strip {
  --st: var(--ra-cyan);
  --st-rgb: 34, 211, 238;
  display: flex;
  margin: 1.1rem 0 .2rem;
  background: linear-gradient(90deg, rgba(var(--st-rgb), .13), rgba(var(--st-rgb), .04));
  border: 1px solid rgba(var(--st-rgb), .28);
  border-left: 3px solid var(--st);
  border-radius: 12px;
}
.ra-strip[hidden] { display: none; }

.ra-strip-ok   { --st: var(--ra-ok);   --st-rgb: 45, 212, 191; }
.ra-strip-warn { --st: var(--ra-amber); --st-rgb: 245, 166, 35; }
.ra-strip-info { --st: var(--ra-cyan); --st-rgb: 34, 211, 238; }

.ra-strip-in {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .72rem .8rem .72rem .95rem;
}
.ra-strip-dot {
  flex: 0 0 auto;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--st);
  box-shadow: 0 0 0 4px rgba(var(--st-rgb), .16);
}
.ra-strip p {
  margin: 0;
  flex: 1 1 auto;
  color: var(--ra-ink-soft);
  font-size: .93rem;
  line-height: 1.45;
}
.ra-strip p strong { color: var(--ra-ink); }
.ra-strip p a { color: var(--st); font-weight: 600; text-decoration: none; }
.ra-strip p a:hover { text-decoration: underline; }

/* The close control is a button, so every bit of the button styling further up
   has to be undone here. */
.ra-strip .ra-strip-x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ra-ink-faint);
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, color .15s;
}
.ra-strip .ra-strip-x:hover,
.ra-strip .ra-strip-x:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: var(--ra-ink);
  transform: none;
  box-shadow: none;
}

@media (max-width: 560px) {
  .ra-strip-in { align-items: flex-start; }
  .ra-strip-dot { margin-top: .48rem; }
}

/* ============================================================
   Home page sections
   ============================================================ */
.ra-section { padding: 1.6rem 0 0; }
.ra-section h2 { margin: 0 0 1.3rem; }

/* Notices on the page itself, as opposed to the account strip under the
   header. Used for the empty-store message. */
.ra-banner {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-left: 3px solid var(--ra-cyan);
  border-radius: 12px;
  padding: .9rem 1.05rem;
  color: var(--ra-ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}
.ra-banner strong { color: var(--ra-ink); }
.ra-banner a { color: var(--ra-cyan); font-weight: 600; }

/*
 * Category tiles lead with the artwork.
 *
 * Three text boxes asked a merchant to read their way to the right section. The
 * pieces are the product, so the picture does that job faster than the label
 * does, and the tiles are the largest thing on the page after the hero. The
 * headline sits above the picture, not under it, so the row scans as two named
 * choices rather than two images waiting to be explained.
 */
.ra-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 760px) { .ra-cat-grid { grid-template-columns: 1fr; } }

.ra-cat {
  display: flex;
  flex-direction: column;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ra-cat:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 217, 204, .45);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
  text-decoration: none;
}

.ra-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.2rem .9rem;
  text-align: center;
}
.ra-cat-head h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  color: var(--ra-ink);
  letter-spacing: -.01em;
}

/* The artwork is a print piece on its own ground, so it sits in a band of its
   own rather than bleeding into the card. */
.ra-cat-art {
  display: block;
  background: #0b0e15;
  border-top: 1px solid var(--ra-line);
  border-bottom: 1px solid var(--ra-line);
}
.ra-cat-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  max-width: 100%;
}

.ra-cat-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.2rem 1.2rem;
  flex: 1 1 auto;
}
.ra-cat-body p {
  margin: 0;
  color: var(--ra-ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}
.ra-cat-count {
  color: var(--ra-ink-faint);
  font-size: .83rem;
  letter-spacing: .02em;
  margin-top: auto;
}

/* A category the signed-in merchant is entitled to. */
.ra-cat-yours { border-color: rgba(45, 212, 191, .38); }
.ra-cat-yours:hover { border-color: rgba(45, 212, 191, .6); }

.ra-more { text-align: center; margin: 2.2rem 0 0; }

/* ============================================================
   Shop and archive furniture
   ============================================================ */
/*
  Storefront leaves a deep gap under the archive header, and it is assembled from
  different pieces on the shop page than on a term archive. A negative bottom
  margin pulls whatever follows up by a fixed 50px regardless of which piece is
  producing the space, which is what was asked for.
*/
.woocommerce-products-header {
  padding: 1.4rem 0 .2rem;
  margin-bottom: -50px;
}
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  margin: 0 0 .5rem;
}
.woocommerce-products-header .term-description p,
.woocommerce-products-header__title + p { color: var(--ra-ink-soft); max-width: 46rem; }

.storefront-sorting {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--ra-line);
  margin-bottom: 1.3rem;
}
/* Nothing left in the bar on a page with one screen of products. */
.storefront-sorting:empty { display: none; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin: 0; float: none; }
.woocommerce .woocommerce-result-count { font-size: .88rem; color: var(--ra-ink-faint); }
.woocommerce .woocommerce-ordering select {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  color: var(--ra-ink-soft);
  padding: .5rem .8rem;
  font-size: .9rem;
}

/* Storefront prints the sorting controls again under the grid. At nine SKUs
   across one page, the second set is noise. */
.woocommerce ul.products ~ .storefront-sorting,
.woocommerce ul.products ~ form.woocommerce-ordering,
.woocommerce ul.products ~ .woocommerce-result-count { display: none !important; }

/* ============================================================
   Product grid
   ============================================================ */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }

/*
 * Storefront sizes products with `li.product { float:left; width:22.05% }`,
 * scoped by a columns-N class on the body. That selector carries the same
 * specificity as anything a child theme writes for the same element, so the
 * winner is whichever stylesheet the host enqueues last, and on this install
 * Storefront's WooCommerce sheet loads after ours. The visible symptom was a
 * grid whose cells were full width with forty pixel cards sitting inside them.
 * Width and float are forced rather than left to load order.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
body[class*="columns-"] ul.products li.product {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product {
  padding: 1rem 1rem 1.25rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  transition: border-color .15s, transform .15s;
  text-align: left;
}
.woocommerce ul.products li.product:hover { border-color: var(--ra-cyan); transform: translateY(-2px); }

.woocommerce ul.products li.product a img {
  border-radius: var(--ra-radius-sm);
  background: var(--ra-elev-2);
  margin-bottom: .9rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--ra-ink); font-size: 1rem; font-weight: 700; padding: 0; margin: 0 0 .3rem;
}
.woocommerce ul.products li.product .price { color: var(--ra-ink-soft); font-size: .95rem; font-weight: 600; }
.woocommerce ul.products li.product .price del { color: var(--ra-ink-faint); opacity: .7; }
.woocommerce ul.products li.product .price ins { color: var(--ra-ok); text-decoration: none; }
/*
 * Card body is a column so the button can be pinned to the bottom and centred.
 * Without this the buttons sat at whatever height each card's title happened to
 * end, which read as a ragged row rather than a grid.
 */
.woocommerce ul.products li.product {
  display: flex; flex-direction: column;
}
/* The price carries the gap, so the auto margin only has to do alignment. */
.woocommerce ul.products li.product .price { display: block; margin-bottom: 1rem; }
.woocommerce ul.products li.product .button {
  /* auto top pins it to the bottom of the card, auto sides centre it */
  margin: auto auto 0;
  display: block; width: fit-content;
}

.woocommerce span.onsale {
  background: var(--ra-amber); color: #1a1204; border-radius: 999px;
  font-weight: 700; font-size: .75rem; padding: .25rem .7rem; min-height: 0; min-width: 0; line-height: 1.5;
  top: 1rem; left: auto; right: 1rem; margin: 0;
}

/* Free, for verified merchants */
.ra-free { color: var(--ra-ok); font-weight: 700; }
.ra-was  { color: var(--ra-ink-faint); font-weight: 400; opacity: .7; margin-left: .35rem; }
.ra-was .amount { color: inherit; }

/* ============================================================
   Single product
   ============================================================ */
.woocommerce div.product .product_title { margin-bottom: .4rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ra-ink); font-size: 1.4rem; font-weight: 800; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.2rem; border-bottom: 1px solid var(--ra-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0 1.4rem 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ra-ink-faint); font-weight: 600; padding: .7rem 0; display: block; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ra-ink); box-shadow: inset 0 -2px 0 var(--ra-cyan); }
.woocommerce div.product form.cart div.quantity { margin-right: .8rem; }

/* ============================================================
   Forms
   ============================================================ */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select,
.select2-container .select2-selection--single {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  color: var(--ra-ink);
  padding: .78rem .95rem;
  box-shadow: none;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ra-cyan);
  outline-offset: 1px;
  border-color: transparent;
  background: var(--ra-elev);
  color: var(--ra-ink);
}
/*
 * Placeholders and floating field labels.
 *
 * --ra-ink-faint is a 4.16:1 contrast on the field background, which is under
 * the 4.5:1 floor and was genuinely hard to read on checkout, where the
 * placeholder is often the only thing telling you what a box wants. This token
 * is 6.2:1: clearly readable, still visibly lighter than a typed value so it
 * cannot be mistaken for one.
 */
::placeholder { color: var(--ra-placeholder); opacity: 1; }

/*
 * The block checkout does not use placeholders at all. It renders a <label>
 * that floats inside the field, so the rule above never touches the one screen
 * where this mattered most.
 */
.wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  color: var(--ra-placeholder) !important;
}
/* Once the field has content the label shrinks to a caption. Dimmer is right
   there, because the value beneath it is now carrying the meaning. */
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label {
  color: var(--ra-ink-faint) !important;
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
  color: var(--ra-ink) !important;
  background: var(--ra-elev) !important;
}
/* Field hints and validation text sit at the same readability floor. */
.wc-block-components-validation-error { color: #f26d6d !important; }
.woocommerce form .form-row .required { color: var(--ra-amber); }
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label { color: var(--ra-ink-soft); }
label { color: var(--ra-ink-soft); font-weight: 600; font-size: .92rem; }

/* ============================================================
   Cart, checkout, account
   ============================================================ */
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  border-collapse: separate;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--ra-line); color: var(--ra-ink-soft); }
.woocommerce table.shop_table th { color: var(--ra-ink); }
.woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 180px; }

.woocommerce-checkout #payment { background: var(--ra-elev); border-radius: var(--ra-radius); border: 1px solid var(--ra-line); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ra-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--ra-elev-2); color: var(--ra-ink-soft); border-radius: var(--ra-radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ra-elev-2); }

.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: .5rem; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--ra-ink-soft); padding: .6rem .8rem; display: block; border-radius: var(--ra-radius-sm); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--ra-elev-2); color: var(--ra-ink); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--ra-elev);
  border-top: 0;
  border-left: 3px solid var(--ra-cyan);
  border-radius: 0 var(--ra-radius) var(--ra-radius) 0;
  color: var(--ra-ink-soft);
}
.woocommerce-message { border-left-color: var(--ra-ok); }
.woocommerce-error   { border-left-color: #f26d6d; }
.woocommerce-info    { border-left-color: var(--ra-amber); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ra-cyan); }
.woocommerce-message::before { color: var(--ra-ok); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ra-soft);
  border-top: 1px solid var(--ra-line);
  color: var(--ra-ink-faint);
  padding-top: 2.6rem;
}
.site-footer a { color: var(--ra-ink-soft); }
.site-footer a:hover { color: var(--ra-cyan); text-decoration: none; }
.site-footer .widget-title, .site-footer h3 { color: var(--ra-ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================
   Storefront bits that fight the dark palette
   ============================================================ */
.storefront-breadcrumb { background: transparent; padding: 1.2rem 0 0; margin-bottom: 1.4rem; }
.storefront-breadcrumb .woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--ra-ink-faint); font-size: .88rem; }
.storefront-sorting, .woocommerce-result-count, .woocommerce-ordering select { color: var(--ra-ink-faint); }
.widget { color: var(--ra-ink-soft); }
hr, .woocommerce-tabs, table, td, th { border-color: var(--ra-line); }

@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
}


/* ============================================================
   Entitlement notice

   WooCommerce notices are built for "item added to cart", which appears once
   and wants attention. This one is permanent page furniture on every shop and
   category view, so it gets the margins of a subheading rather than the margins
   of an alert.
   ============================================================ */
.woocommerce-page .woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-page .woocommerce-notices-wrapper > .woocommerce-message {
  margin: .2rem 0 1.1rem;
  padding: .85rem 1.15rem;
  font-size: .93rem;
}

/* ============================================================
   Footer
   ============================================================ */
.ra-foot { padding: .6rem 0 0; }
.ra-foot-cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem;
}
@media (max-width: 900px) { .ra-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; } }
@media (max-width: 520px) { .ra-foot-cols { grid-template-columns: 1fr; } }

.ra-foot-col h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ra-ink-faint); font-weight: 700; margin: 0 0 .7rem;
}
/*
 * Three classes deep on purpose. Storefront styles footer links with
 * `.site-footer a:not(.button)`, which matches this exactly as hard as a two
 * class rule does, and its stylesheet was landing last: the links came out
 * Storefront's grey and underlined rather than white.
 */
.site-footer .ra-foot .ra-foot-col a {
  display: block;
  color: var(--ra-ink);
  text-decoration: none;
  font-size: .93rem;
  padding: .2rem 0;
}
.site-footer .ra-foot .ra-foot-col a:hover {
  color: var(--ra-cyan);
  text-decoration: none;
}

.ra-foot-logo { display: inline-block; line-height: 0; margin-bottom: .7rem; }
.ra-foot-logo img { height: 26px; width: auto; display: block; }
.ra-foot-brand p { color: var(--ra-ink-faint); font-size: .9rem; margin: 0; max-width: 22rem; }

.ra-foot-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.4rem;
  margin-top: 2.2rem; padding: 1.2rem 0 .4rem;
  border-top: 1px solid var(--ra-line);
  color: var(--ra-ink-faint); font-size: .85rem;
}
.site-footer .ra-foot .ra-foot-legal a { color: var(--ra-ink); text-decoration: none; }
.site-footer .ra-foot .ra-foot-legal a:hover { color: var(--ra-cyan); text-decoration: none; }
.ra-foot-legal span + span a + a { margin-left: 1rem; }

/* ============================================================
   Added to cart

   WooCommerce drops a "View cart" link straight after the button once an item
   is added. It is hidden: it lands under the button as an unstyled second line,
   it appears on some cards and not others so a grid row stops lining up, and
   the cart in the header is two inches away and always there. Hidden rather
   than filtered out, because the link is written by WooCommerce's own script
   after the AJAX response, not rendered by the template.
   ============================================================ */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart { display: none !important; }

/* Single product page: the same link sits under a full width add to cart row. */
.woocommerce div.product form.cart { margin-bottom: 1.2rem; }
.woocommerce div.product .woocommerce-message,
.woocommerce-page .woocommerce-message { margin-bottom: 1.4rem; }

/* ============================================================
   Cart page

   Storefront renders the cart as a spreadsheet: six ruled columns, a coupon box
   wedged into a table cell, and an "Update cart" button that has to be pressed
   before a quantity change counts. On a dark ground the rules do most of the
   talking and the products do very little of it.

   What is below keeps the table (screen readers and Woo's own scripts rely on
   it) and restyles it as a list of rows: bigger thumbnails, the product name
   carrying the weight, prices aligned right, and the lines between rows quiet
   enough that the eye follows the items rather than the grid.

   Both carts are covered. Classic shortcode markup is `table.shop_table.cart`;
   the block cart is `.wc-block-cart`. Which one a store renders depends on how
   the Cart page was built, and a theme that only styles one of them looks
   finished right up until somebody rebuilds that page.
   ============================================================ */

/* ---------------------------------------------------------- classic cart */

.woocommerce-cart .woocommerce { display: block; }

.woocommerce-cart table.shop_table.cart {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 1.6rem;
}

/* Column heads are labels, not content. */
.woocommerce-cart table.shop_table.cart thead th {
  background: var(--ra-elev-2);
  color: var(--ra-ink-faint);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ra-line);
}
.woocommerce-cart table.shop_table.cart thead th.product-price,
.woocommerce-cart table.shop_table.cart thead th.product-subtotal { text-align: right; }

.woocommerce-cart table.shop_table.cart td {
  padding: 1.1rem 1rem;
  border-top: 1px solid var(--ra-line);
  vertical-align: middle;
}
.woocommerce-cart table.shop_table.cart tbody tr:first-child td { border-top: 0; }

/* Thumbnail large enough to identify a sticker from a cling at a glance. */
.woocommerce-cart table.shop_table.cart td.product-thumbnail { width: 84px; padding-right: 0; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--ra-radius-sm);
  border: 1px solid var(--ra-line);
  display: block;
}

.woocommerce-cart table.shop_table.cart td.product-name a {
  color: var(--ra-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--ra-cyan); text-decoration: none; }
/* Variation lines, such as a color. */
.woocommerce-cart table.shop_table.cart td.product-name .variation {
  margin: .3rem 0 0;
  font-size: .85rem;
  color: var(--ra-ink-faint);
}
.woocommerce-cart table.shop_table.cart td.product-name .variation dt,
.woocommerce-cart table.shop_table.cart td.product-name .variation dd { display: inline; margin: 0; }
.woocommerce-cart table.shop_table.cart td.product-name .variation dt { margin-right: .3rem; }
.woocommerce-cart table.shop_table.cart td.product-name .variation dd { margin-right: .6rem; }
.woocommerce-cart table.shop_table.cart td.product-name .variation dd p { display: inline; margin: 0; }

.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-subtotal { text-align: right; white-space: nowrap; }
.woocommerce-cart table.shop_table.cart td.product-subtotal { color: var(--ra-ink); font-weight: 700; }

/* Quantity stepper. */
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity input.qty {
  width: 4.2rem;
  padding: .5rem .4rem;
  text-align: center;
  background: var(--ra-elev-2);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  color: var(--ra-ink);
}

/* Remove control: a quiet cross that only turns red on approach. */
.woocommerce-cart table.shop_table.cart td.product-remove { width: 2.4rem; padding-right: .2rem; }
.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ra-ink-faint) !important;
  background: transparent !important;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
  color: #f26d6d !important;
  background: rgba(242, 109, 109, .12) !important;
}

/* The actions row: coupon on the left, update on the right. */
/*
  The actions row.

  Storefront floats the coupon left and the update button right. Those floats
  are kept rather than replaced with flex, because this is a <td colspan="6">:
  giving it display:flex takes it out of table layout and every column above it
  loses its width. The cell only needs to contain its own floats, which the
  clearfix below does.
*/
.woocommerce-cart table.shop_table.cart td.actions {
  background: var(--ra-elev-2);
  border-top: 1px solid var(--ra-line);
  padding: .95rem 1rem;
}
.woocommerce-cart table.shop_table.cart td.actions::after {
  content: "";
  display: table;
  clear: both;
}
.woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"] { float: right; }
.woocommerce-cart table.shop_table.cart td.actions .coupon {
  display: flex;
  gap: .5rem;
  align-items: center;
  float: left;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon label { display: none; }
.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
  min-width: 0;
  width: 12rem;
  padding: .55rem .8rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: 999px;
  color: var(--ra-ink);
}
/* Coupon and update are both secondary to checking out, so neither is filled. */
.woocommerce-cart table.shop_table.cart td.actions .button[name="apply_coupon"],
.woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"] {
  white-space: nowrap;
  background: transparent;
  color: var(--ra-ink-soft);
  border: 1px solid var(--ra-line);
  padding: .55rem 1.1rem;
  font-size: .9rem;
}
.woocommerce-cart table.shop_table.cart td.actions .button[name="apply_coupon"]:hover,
.woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"]:hover {
  background: rgba(96, 217, 204, .12);
  border-color: var(--ra-cyan);
  color: var(--ra-ink);
  box-shadow: none;
}
.woocommerce-cart table.shop_table.cart td.actions .button[disabled] { opacity: .45; }

/* Totals panel. */
.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals {
  float: right;
  /* Padding counted inside the width. Without this the panel is its own width
     plus 2.5rem of padding, which is exactly enough to push a phone into a
     sideways scroll. */
  box-sizing: border-box;
  width: min(24rem, 100%);
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 1.2rem 1.3rem 1.3rem;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ra-ink-faint);
  margin: 0 0 .9rem;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  width: 100%;
  /* Collapsed, so the rule above the total is one line across both cells
     rather than two segments with a gap where the border spacing was. */
  border-collapse: collapse;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
  border: 0;
  padding: .45rem 0;
  background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
  text-align: left;
  width: 45%;
  color: var(--ra-ink-soft);
  font-weight: 500;
  font-size: .93rem;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td { text-align: right; color: var(--ra-ink-soft); }
.woocommerce-cart .cart-collaterals .cart_totals tr.order-total th,
.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td {
  border-top: 1px solid var(--ra-line);
  padding-top: .8rem;
  font-size: 1.05rem;
}
.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td { color: var(--ra-ink); font-weight: 800; }
.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart-collaterals .cart_totals .shipping-calculator-button { color: var(--ra-ink-faint); font-size: .87rem; }

/* ------------------------------------------------- proceed to checkout */
/*
  The one button on the page that matters, so it is full width and carries the
  gradient on its own. The hover belongs to the shape: the fill lightens, the
  label deepens, and the underline Storefront's global a:hover would draw inside
  the pill is cancelled on both states.
*/
.woocommerce-cart .wc-proceed-to-checkout { padding: 1.1rem 0 0; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt {
  display: block;
  width: 100%;
  margin: 0;
  padding: .95rem 1.4rem;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  background: var(--ra-grad);
  color: #fff;
  border: 0;
  border-radius: 999px;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:focus-visible {
  background: var(--ra-grad-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(96, 217, 204, .26);
}

/*
 * The fill, stated to win.
 *
 * Storefront's rule for this button is selector-for-selector as specific as the
 * one above, so which of the two applies comes down to which stylesheet the
 * page happened to load last. That is not something to leave to chance on the
 * one button the whole cart exists to get pressed, and it is why it was coming
 * out white. background-color is set as well as the gradient, so a browser that
 * drops the gradient still gets a riverArk button rather than a white one.
 */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt {
  background-color: var(--ra-blue) !important;
  background-image: linear-gradient(135deg, #2ec4b0, #2563eb 70%) !important;
  color: #fff !important;
  border: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #22a896, #1d4ed8 70%) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Same treatment for the block cart's submit button. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button {
  background-color: var(--ra-blue) !important;
  background-image: linear-gradient(135deg, #2ec4b0, #2563eb 70%) !important;
  color: #fff !important;
  border: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #22a896, #1d4ed8 70%) !important;
  color: #fff !important;
}

/*
 * The box the button sits in.
 *
 * Storefront paints a light panel behind the checkout button, and because the
 * button is a rounded pill that panel shows through at the corners and around
 * the edges as white. The button itself was already forced to the gradient, so
 * what was left showing was its container, not the button.
 *
 * Every wrapper between the totals panel and the button is stated transparent,
 * and the totals panel keeps the dark surface, so there is nothing left that
 * can paint white behind it.
 */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce .wc-proceed-to-checkout,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tbody,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
  background: transparent !important;
  border-radius: 0;
}
/* Storefront also pads that wrapper, which insets the button from the panel it
   sits in. Stated here so the button spans the full width of the panel. */
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce .wc-proceed-to-checkout {
  padding: 1.1rem 0 0 !important;
  margin: 0 !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--ra-elev) !important;
  border-radius: var(--ra-radius);
}

/* Block cart: the same panel, different name. */
.wp-block-woocommerce-cart .wc-block-cart__submit,
.wp-block-woocommerce-cart .wc-block-cart__submit-container,
.wc-block-cart__submit-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------------------------------------------------------- empty cart */
/*
  Rendered by woocommerce/cart/cart-empty.php in this theme. WooCommerce's own
  default is styled out below as well, because a plugin or a block cart can
  still print it, and a stray grey notice under this panel would undo the point
  of it.
*/
.ra-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  max-width: 32rem;
  margin: 1.4rem auto 2rem;
  padding: 2.4rem 1.6rem 2rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
}
.ra-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .35rem;
  border-radius: 50%;
  color: var(--ra-cyan);
  background: rgba(96, 217, 204, .1);
  border: 1px solid rgba(96, 217, 204, .28);
}
.ra-empty h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ra-ink);
  letter-spacing: -.01em;
}
.ra-empty p {
  margin: 0;
  max-width: 26rem;
  color: var(--ra-ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.ra-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.1rem;
}
/* The ghost variant is defined once further up; these two rules only make it
   match the filled button's height so the pair sits on one line. */
.woocommerce .ra-empty-actions .button.ra-ghost {
  padding: .78rem 1.6rem;
  font-size: .97rem;
  font-weight: 700;
}
@media (max-width: 460px) {
  .ra-empty-actions { flex-direction: column; align-self: stretch; }
  .woocommerce .ra-empty-actions .button {
    width: 100%;
    /* Padding inside the width, or a full width button is its container plus
       3.2rem of padding and the page scrolls sideways. */
    box-sizing: border-box;
  }
}

/* WooCommerce's default empty-cart furniture, wherever it still appears. */
.woocommerce-cart .cart-empty,
.woocommerce-cart p.cart-empty {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 .4rem;
  text-align: center;
  color: var(--ra-ink-soft);
}
.woocommerce-cart .cart-empty::before { display: none; }
.woocommerce-cart .return-to-shop { margin-top: 1rem; text-align: center; }

/* Block cart's own empty state. */
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.wp-block-woocommerce-empty-cart-block h2 { color: var(--ra-ink); }
.wp-block-woocommerce-empty-cart-block p { color: var(--ra-ink-soft); }

@media (max-width: 768px) {
  /*
   * Storefront already collapses this table on small screens: it hides the
   * head, stacks each cell, and labels it from the cell's data-title. That
   * behaviour is left alone. All that is needed here is to stop the desktop
   * sizing from fighting it, give each item a rule between it and the next,
   * and let the coupon field use the width it now has.
   */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item {
    border-top: 1px solid var(--ra-line);
  }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item:first-child { border-top: 0; }
  .woocommerce-cart table.shop_table.cart td { border-top: 0; padding: .5rem 1rem; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail { width: auto; padding-right: 1rem; }
  .woocommerce-cart table.shop_table.cart td.product-remove { width: auto; }

  .woocommerce-cart table.shop_table.cart td.actions .coupon { float: none; flex-wrap: wrap; }
  .woocommerce-cart table.shop_table.cart td.actions .coupon .input-text { width: 100%; }
  .woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"] {
    float: none;
    width: 100%;
    margin-top: .6rem;
  }

  .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }

  /*
   * The totals table carries shop_table_responsive too, so Storefront's mobile
   * rules stack it and hide its row headers, which are the words Subtotal,
   * Shipping and Total. Held as a two column list instead: it is three short
   * rows and it is the part of the page a customer actually reads.
   */
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr { display: table-row; }
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
    display: table-cell;
    text-align: left;
  }
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
    display: table-cell;
    text-align: right;
  }
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table td::before { display: none; }
}

/* ------------------------------------------------------------ block cart */
/*
  The same page built with the Cart block. Different class names, same job.
*/
.wp-block-woocommerce-cart .wc-block-cart-items { border-color: var(--ra-line); }
.wp-block-woocommerce-cart .wc-block-cart-items__header {
  color: var(--ra-ink-faint);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom-color: var(--ra-line);
}
.wp-block-woocommerce-cart .wc-block-cart-items__row { border-bottom-color: var(--ra-line); }
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  border-radius: var(--ra-radius-sm);
  border: 1px solid var(--ra-line);
}
.wp-block-woocommerce-cart .wc-block-components-product-name {
  color: var(--ra-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
.wp-block-woocommerce-cart .wc-block-components-product-name:hover { color: var(--ra-cyan) !important; text-decoration: none; }
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-price { color: var(--ra-ink-soft); }
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 1.2rem 1.3rem 1.3rem;
}
.wp-block-woocommerce-cart .wc-block-components-totals-item__label { color: var(--ra-ink-soft); }
.wp-block-woocommerce-cart .wc-block-components-totals-item__value { color: var(--ra-ink); }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item { border-top: 1px solid var(--ra-line); }

.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button {
  display: block;
  width: 100%;
  background: var(--ra-grad);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .95rem 1.4rem;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
  background: var(--ra-grad-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(96, 217, 204, .26);
}

/* ============================================================
   My account

   Two quite different pages share this template. Signed out it is a login form
   next to a registration form, which Storefront renders as two unlabelled boxes
   of the same weight. Signed in it is a navigation list beside a panel, which
   Storefront renders as an unstyled list of links floated next to body text.

   Both are given the same treatment as the rest of the store: dark panels,
   one clear primary action, and enough space that a form does not read as a
   settings screen.
   ============================================================ */

/* ------------------------------------------------------------- signed out */
/*
  Read off the live page rather than assumed. With registration switched off,
  WooCommerce renders three children into .woocommerce: a notices wrapper, a
  bare h2 reading "Login", and the form. There is no .u-columns wrapper and the
  h2 carries no class, so it has to be addressed as a child or it sits at the
  far left of the page while the form panel is centred.
*/
.woocommerce-account .woocommerce > h2 {
  box-sizing: border-box;
  max-width: 28rem;
  margin: 0 auto .8rem !important;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ra-ink-faint);
}

/* Both forms as panels when registration is on, side by side. */
.woocommerce-account .woocommerce > .u-columns.col2-set,
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  width: 100%;
  margin: 0;
}
@media (max-width: 760px) {
  .woocommerce-account .woocommerce > .u-columns.col2-set,
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  float: none;
  width: auto;
  box-sizing: border-box;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
}
.woocommerce-account .u-columns .u-column1 > h2,
.woocommerce-account .u-columns .u-column2 > h2 { max-width: none; margin: 0 0 1rem !important; }

/* The login form on its own, which is the current configuration. */
.woocommerce-account .woocommerce > form.woocommerce-form-login {
  box-sizing: border-box;
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
}
.woocommerce-account .u-columns form.woocommerce-form-login,
.woocommerce-account .u-columns form.woocommerce-form-register {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  background: none;
}

.woocommerce-account .woocommerce form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce-account .woocommerce form .form-row label {
  display: block;
  margin-bottom: .35rem;
  color: var(--ra-ink-soft);
  font-size: .88rem;
  font-weight: 600;
}
.woocommerce-account .woocommerce form .form-row label .required {
  color: var(--ra-amber);
  text-decoration: none;
  border: 0;
}
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

/*
 * Show-password control.
 *
 * WooCommerce renders it as a <button> inside the field wrapper, so every
 * button rule in this stylesheet lands on it and it came out as a large
 * gradient pill sitting on top of the password box. Reset to a bare icon and
 * placed inside the field.
 */
.woocommerce-account .woocommerce form .password-input { display: block; position: relative; }
.woocommerce-account .woocommerce form .password-input input { padding-right: 2.8rem; }
.woocommerce-account .woocommerce form button.show-password-input {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--ra-ink-faint) !important;
  opacity: .75;
  cursor: pointer;
}
.woocommerce-account .woocommerce form button.show-password-input:hover,
.woocommerce-account .woocommerce form button.show-password-input:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .07) !important;
  transform: translateY(-50%);
}

/* Remember me and the submit share a line, submit to the right. */
.woocommerce-account .woocommerce form p.form-row:has(button[name="login"]),
.woocommerce-account .woocommerce form p.form-row:has(button[name="register"]) {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.3rem 0 0;
}
.woocommerce-account .woocommerce form button[name="login"],
.woocommerce-account .woocommerce form button[name="register"] { margin-left: auto; }

.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--ra-ink-faint);
  font-size: .88rem;
  font-weight: 500;
}
/*
 * A default checkbox paints itself white on a dark page, and color-scheme plus
 * accent-color only gets it to a grey square. Drawn here instead: a dark box
 * with a hairline, filling cyan with a dark tick when checked.
 */
.woocommerce-account .woocommerce form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: 0 0 auto;
  background: var(--ra-elev-2);
  border: 1px solid var(--ra-line);
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.woocommerce-account .woocommerce form input[type="checkbox"]::before {
  content: "";
  width: .5rem;
  height: .28rem;
  border-left: 2px solid #04141c;
  border-bottom: 2px solid #04141c;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.woocommerce-account .woocommerce form input[type="checkbox"]:checked {
  background: var(--ra-cyan);
  border-color: var(--ra-cyan);
}
.woocommerce-account .woocommerce form input[type="checkbox"]:checked::before { opacity: 1; }
.woocommerce-account .woocommerce form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ra-cyan);
  outline-offset: 2px;
}

.woocommerce-account .woocommerce-LostPassword {
  margin: 1rem 0 0;
  font-size: .88rem;
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--ra-ink-faint); text-decoration: none; }
.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--ra-cyan); text-decoration: none; }
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account form .woocommerce-form__label-for-checkbox span {
  color: var(--ra-ink-faint);
  font-size: .85rem;
  line-height: 1.55;
}

/* -------------------------------------------------------------- signed in */
/*
 * Rebuilt. The previous pass styled a sidebar and a panel and stopped there, so
 * the navigation was a list of links with no rhythm and every subpage inherited
 * whatever WooCommerce ships. What follows covers all of them: dashboard,
 * orders, a single order, downloads, addresses, the address form, payment
 * methods, and account details.
 */

/* Two columns only when there is a navigation to put in the first one, which is
   to say only when signed in. Written as an opt-in so a browser without :has
   falls back to the stacked layout, which is correct either way. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 820px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
}

/* ---- navigation ---- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  box-sizing: border-box;
  padding: .45rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  position: sticky;
  top: 1rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .62rem .85rem;
  border-radius: var(--ra-radius-sm);
  color: var(--ra-ink-soft);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .14s, color .14s, box-shadow .14s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--ra-ink);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(96, 217, 204, .12);
  color: var(--ra-ink);
  box-shadow: inset 2px 0 0 var(--ra-cyan);
}
/* Signing out is not a section of the account, so it reads as a separate act. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout {
  margin-top: .3rem;
  padding-top: .35rem;
  border-top: 1px solid var(--ra-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a { color: var(--ra-ink-faint); }

/*
 * Storefront styles this menu through `.hentry .entry-content ... li.link a`,
 * which outranks everything above: it zeroed the side padding, so the text ran
 * into the edge of its highlight, and it adds light-theme borders and Font
 * Awesome icons that crowd the labels. Matched at the same depth to undo it.
 */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul { margin: 0; border-top: 0; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li { border-bottom: 0; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  padding: .62rem .95rem;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before { display: none; content: none; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: .3rem;
  padding-top: .35rem;
  border-top: 1px solid var(--ra-line);
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ra-ink-faint); }
@media (max-width: 820px) {
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0; padding: 0; border-top: 0;
  }
}

/* ---- content panel ---- */

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  box-sizing: border-box;
  min-width: 0;
  padding: 1.6rem 1.7rem 1.8rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  color: var(--ra-ink-soft);
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.65; margin: 0 0 1rem; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--ra-ink);
  font-size: 1.05rem;
  margin: 1.8rem 0 .9rem;
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--ra-cyan); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content a:hover { text-decoration: underline; }
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover { text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .woocommerce-MyAccount-content strong { background: none; color: var(--ra-ink); }

/* ---- tables: orders, downloads, a single order ---- */

.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table--order-details,
.woocommerce-account table.woocommerce-table--downloads {
  width: 100%;
  background: transparent;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--ra-elev-2);
  color: var(--ra-ink-faint);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--ra-line);
  border-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
  padding: .85rem .9rem;
  border-top: 1px solid var(--ra-line);
  color: var(--ra-ink-soft);
  vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child th { border-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
  border-top: 1px solid var(--ra-line);
  padding: .7rem .9rem;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td {
  color: var(--ra-ink);
  font-weight: 800;
}
.woocommerce-account td.woocommerce-orders-table__cell-order-number a { font-weight: 700; }
.woocommerce-account td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account td.woocommerce-orders-table__cell-download-file { text-align: right; }
.woocommerce-account .woocommerce-MyAccount-content table .button {
  padding: .45rem 1rem;
  font-size: .84rem;
  margin: 0 0 0 .35rem;
}

/* Order status reads as a state, not as body text. */
.woocommerce-account td.woocommerce-orders-table__cell-order-status {
  color: var(--ra-ink);
  font-weight: 600;
}

/* ---- order detail ---- */

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details { margin-top: 1.6rem; }
.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.woocommerce-account .woocommerce-customer-details .woocommerce-column,
.woocommerce-account .woocommerce-Address {
  float: none;
  width: auto;
  box-sizing: border-box;
  padding: 1.05rem 1.15rem;
  background: var(--ra-elev-2);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
}
.woocommerce-account address {
  border: 0;
  padding: 0;
  margin: .5rem 0 0;
  font-style: normal;
  color: var(--ra-ink-soft);
  line-height: 1.65;
}

/* ---- addresses ---- */

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
@media (max-width: 640px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .2rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
  flex: 1 1 auto;
  font-size: .95rem;
}
.woocommerce-account .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  font-size: .85rem;
  font-weight: 600;
}

/* ---- forms: address form, account details, payment methods ---- */

.woocommerce-account .woocommerce-MyAccount-content form .form-row,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row {
  margin: 0 0 1rem;
  padding: 0;
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row label {
  display: block;
  margin-bottom: .35rem;
  color: var(--ra-ink-soft);
  font-size: .88rem;
  font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form .form-row textarea,
.woocommerce-account .woocommerce-MyAccount-content form .form-row select,
.woocommerce-account .woocommerce-MyAccount-content form .select2-container {
  width: 100%;
  box-sizing: border-box;
}
/*
 * Two up on wide screens, because a form of one field per line is a very long
 * page for six short fields.
 *
 * The grid goes on the form and the wrapper, never on the rows themselves. A
 * row holds its own label and input, so making the row a grid puts the label in
 * one column and the box in the other, which is a different form entirely.
 */
@media (min-width: 700px) {
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    align-items: start;
  }
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-wide,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account > .form-row-wide,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account > fieldset,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account > .woocommerce-password-strength,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account > .woocommerce-password-hint,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account > .clear { grid-column: 1 / -1; }
}
/* The submit row is a button, not a field, so it takes its own width. */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account > p.form-row:last-of-type,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields ~ p { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-content form .button,
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"] { width: auto; display: inline-block; }
.woocommerce-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0 0;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  color: var(--ra-ink);
  font-size: .95rem;
  font-weight: 700;
  padding: 0 .5rem;
}
.woocommerce-account .woocommerce-MyAccount-content form .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] { margin-top: .4rem; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength {
  border-radius: var(--ra-radius-sm);
  font-size: .85rem;
  padding: .5rem .8rem;
}
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account .woocommerce-MyAccount-content .description {
  color: var(--ra-ink-faint);
  font-size: .85rem;
  font-style: normal;
}

/* ---- notices inside the panel ---- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--ra-elev-2);
  border: 1px solid var(--ra-line);
  border-left: 3px solid var(--ra-cyan);
  border-radius: var(--ra-radius-sm);
  padding: .95rem 1.15rem;
  margin: 0 0 1.2rem;
  color: var(--ra-ink-soft);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { border-left-color: var(--ra-ok); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-left-color: #f26d6d; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before { display: none; content: none; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { margin-left: auto; }

@media (max-width: 820px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 1.2rem 1.1rem 1.3rem; }
  /* Storefront collapses these tables on small screens. Anything it does not
     reach scrolls inside the panel rather than widening the page. */
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table { display: block; overflow-x: auto; }
}

/* ============================================================
   Order received

   The page a customer lands on after paying. WooCommerce renders it as a green
   sentence, then a horizontal list of five facts with no separation, then two
   tables. It is the last thing somebody sees in the shop and it currently reads
   like a receipt printer ran out of alignment.

   Rebuilt as a confirmation panel: one clear statement that the payment landed,
   the order facts as labelled cards, then the detail tables in the same shape
   as the cart.
   ============================================================ */

.woocommerce-order { max-width: 46rem; margin: 0 auto; }

/* The confirmation itself. */
.woocommerce-order > .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
  position: relative;
  display: block;
  margin: 1rem 0 1.6rem;
  padding: 1.6rem 1.6rem 1.6rem 4.4rem;
  background: linear-gradient(90deg, rgba(45, 212, 191, .12), rgba(45, 212, 191, .03));
  border: 1px solid rgba(45, 212, 191, .3);
  border-left: 3px solid var(--ra-ok);
  border-radius: var(--ra-radius);
  color: var(--ra-ink);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
}
/* Tick drawn from two borders rather than loaded as an icon. */
.woocommerce-order > .woocommerce-notice--success::before,
.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  width: 1.5rem;
  height: .78rem;
  margin-top: -.42rem;
  border-left: 3px solid var(--ra-ok);
  border-bottom: 3px solid var(--ra-ok);
  transform: rotate(-45deg);
  background: none;
}

/* The five facts: order number, date, email, total, payment method. */
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem;
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}
.woocommerce-order ul.woocommerce-order-overview li,
.woocommerce-order ul.order_details li {
  float: none;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
  background: var(--ra-elev);
  /* WooCommerce prints the label as text and the value in a strong, so the two
     are stacked by turning the item into a column rather than by touching the
     markup. */
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ra-ink-faint);
}
.woocommerce-order ul.woocommerce-order-overview li strong,
.woocommerce-order ul.order_details li strong {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ra-ink);
  word-break: break-word;
}

.woocommerce-order section { margin-top: 1.8rem; }
.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ra-ink-faint);
  margin: 0 0 .8rem;
}

/* Detail table, same shape as the cart. */
.woocommerce-order table.order_details,
.woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce-order table.order_details th,
.woocommerce-order table.order_details td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--ra-line);
  color: var(--ra-ink-soft);
  text-align: left;
}
.woocommerce-order table.order_details thead th {
  border-top: 0;
  background: var(--ra-elev-2);
  color: var(--ra-ink-faint);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.woocommerce-order table.order_details thead th.product-total,
.woocommerce-order table.order_details td.product-total,
.woocommerce-order table.order_details tfoot td { text-align: right; }
.woocommerce-order table.order_details tbody tr:first-child td { border-top: 0; }
.woocommerce-order table.order_details td.product-name a { color: var(--ra-ink); font-weight: 600; text-decoration: none; }
.woocommerce-order table.order_details td.product-name a:hover { color: var(--ra-cyan); }
.woocommerce-order table.order_details tfoot th { color: var(--ra-ink-soft); font-weight: 500; }
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.order_details tfoot tr:last-child td {
  color: var(--ra-ink);
  font-weight: 800;
  font-size: 1.02rem;
}

/* Billing and shipping blocks under the order. */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem;
}
.woocommerce-order .woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
  box-sizing: border-box;
  padding: 1.1rem 1.2rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-sm);
}
.woocommerce-order .woocommerce-customer-details address {
  border: 0;
  padding: 0;
  font-style: normal;
  color: var(--ra-ink-soft);
  line-height: 1.65;
}

/* Anything the gateway prints on this page sits in the same column. */
.woocommerce-order .riverark-pay,
.woocommerce-order .woocommerce-order-downloads { margin-top: 1.8rem; }

@media (max-width: 520px) {
  .woocommerce-order > .woocommerce-notice--success,
  .woocommerce-order .woocommerce-thankyou-order-received {
    padding: 1.3rem 1.2rem 1.3rem 3.6rem;
    font-size: 1.02rem;
  }
  .woocommerce-order > .woocommerce-notice--success::before,
  .woocommerce-order .woocommerce-thankyou-order-received::before { left: 1.15rem; }
}

/* ============================================================
   Block cart, corrected against the live DOM

   The store's Cart page is built with the Cart block, not the shortcode, so
   the classic table styling further up never renders and the theme's
   cart-empty.php template is never used. These selectors were read off the
   live page rather than guessed, which is how the first pass got it wrong.
   ============================================================ */

/* ---- empty state ---- */
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.wp-block-woocommerce-empty-cart-block > h2.wc-block-cart__empty-cart__title {
  box-sizing: border-box;
  max-width: 32rem;
  margin: 1.4rem auto 2.2rem;
  padding: 2.4rem 1.6rem 2rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  color: var(--ra-ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
/*
  WooCommerce's 80px frowning-face icon, replaced with a riverArk cart mark.
  A sad face tells a customer something went wrong; an empty cart is the
  ordinary state of a shop before anyone has picked anything.
*/
.wp-block-woocommerce-empty-cart-block > h2.with-empty-cart-icon::before {
  content: "";
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto .9rem;
  border-radius: 50%;
  border: 1px solid rgba(96, 217, 204, .28);
  background: rgba(96, 217, 204, .1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2 11.2a1.8 1.8 0 0 0 1.8 1.5h8.6a1.8 1.8 0 0 0 1.8-1.4l1.6-7.3H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E") center / 1.7rem 1.7rem no-repeat;
  opacity: 1;
  filter: none;
}
.wp-block-woocommerce-empty-cart-block > hr.wp-block-separator { display: none; }
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ra-ink-faint);
  margin: 0 0 1.2rem;
}

/* ---- product grids inside blocks ---- */
.wc-block-grid__products { gap: 1.2rem; }
.wc-block-grid__product {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 1rem .9rem 1.1rem;
  transition: border-color .15s, transform .15s;
}
.wc-block-grid__product:hover { border-color: rgba(96, 217, 204, .45); transform: translateY(-2px); }
.wc-block-grid__product-image img { border-radius: var(--ra-radius-sm); }
.wc-block-grid__product-link { text-decoration: none; }
.wc-block-grid__product-title { color: var(--ra-ink); font-weight: 600; font-size: .95rem; }
.wc-block-grid__product-price,
.wc-block-grid__product-price .amount { color: var(--ra-ink-soft); font-weight: 600; }
.wc-block-grid__product-add-to-cart { margin-top: .7rem; }
.wc-block-grid .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  background-color: var(--ra-blue) !important;
  background-image: linear-gradient(135deg, #2ec4b0, #2563eb 70%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .6rem 1.25rem !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none !important;
  box-shadow: none;
  transition: background .15s, color .15s, transform .15s;
}
.wc-block-grid .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #22a896, #1d4ed8 70%) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---- cart with items ---- */
.wc-block-cart__main.wp-block-woocommerce-cart-items-block { min-width: 0; }

.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.wc-block-cart-items__header {
  background: var(--ra-elev-2);
  color: var(--ra-ink-faint);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.wc-block-cart-items__header th { border-bottom: 1px solid var(--ra-line); padding: .8rem 1rem; }
/* The total column is right aligned, so without its own padding the word sits
   against the panel edge. */
.wc-block-cart-items__header .wc-block-cart-items__header-total,
.wc-block-cart-item__total { text-align: right; padding-right: 1.1rem; }
.wc-block-cart-items__row td { border-top: 1px solid var(--ra-line); padding: 1rem; }
.wc-block-cart-items__row:first-child td { border-top: 0; }
.wc-block-cart-items__row { border: 0; }

.wc-block-cart-item__image img {
  border-radius: var(--ra-radius-sm);
  border: 1px solid var(--ra-line);
}
/* The product name is a link, so Storefront's global underline reaches it and
   every row gets a ruled line through the middle of it. */
a.wc-block-components-product-name {
  color: var(--ra-ink) !important;
  font-weight: 600;
  text-decoration: none !important;
}
a.wc-block-components-product-name:hover { color: var(--ra-cyan) !important; text-decoration: none !important; }
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { color: var(--ra-ink-faint); font-size: .88rem; }
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-components-product-price__value { color: var(--ra-ink-soft); }
.wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--ra-ink); font-weight: 700; }

.wc-block-components-quantity-selector {
  background: var(--ra-elev-2);
  border: 1px solid var(--ra-line);
  border-radius: 999px;
}
.wc-block-components-quantity-selector__input { color: var(--ra-ink); background: transparent; }
.wc-block-components-quantity-selector__button { color: var(--ra-ink-soft); }
.wc-block-components-quantity-selector__button:hover { color: var(--ra-ink); }
.wc-block-cart-item__remove-link { color: var(--ra-ink-faint) !important; }
.wc-block-cart-item__remove-link:hover { color: #f26d6d !important; }

/* Totals panel. */
.wc-block-components-sidebar.wc-block-cart__sidebar {
  box-sizing: border-box;
  padding: 1.3rem;
  background: var(--ra-elev);
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
}
.wc-block-cart__sidebar .wc-block-components-totals-item__label { color: var(--ra-ink-soft); }
.wc-block-cart__sidebar .wc-block-components-totals-item__value { color: var(--ra-ink); font-weight: 600; }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item { border-top: 1px solid var(--ra-line); }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ra-ink); }
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button { color: var(--ra-ink-soft) !important; }
.wc-block-components-panel__button:hover { color: var(--ra-ink) !important; }

/*
 * Proceed to checkout.
 *
 * An anchor styled as a button, so the theme's link underline lands inside the
 * pill. Cancelled on the anchor and on the span WooCommerce wraps the label in,
 * because setting it on only one of the two leaves the line drawn by the other.
 */
a.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-cart__submit-container a.wc-block-components-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--ra-blue) !important;
  background-image: linear-gradient(135deg, #2ec4b0, #2563eb 70%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .95rem 1.4rem !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
a.wc-block-components-button.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-cart__submit-container a.wc-block-components-button .wc-block-components-button__text {
  color: #fff !important;
  text-decoration: none !important;
}
a.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container a.wc-block-components-button:hover {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #22a896, #1d4ed8 70%) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(96, 217, 204, .26);
}
a.wc-block-components-button.wc-block-cart__submit-button:hover .wc-block-components-button__text { color: #fff !important; }

/* ============================================================
   Odds and ends
   ============================================================ */

/*
 * Breadcrumb.
 *
 * Removed from its hooks in functions.php, and hidden here as well. The hook
 * and priority Storefront uses for it has moved between versions, so a
 * remove_action that misses leaves "Home / Shop" sitting under the logo with
 * nothing in the theme admitting why. One of the two always lands.
 */
.storefront-breadcrumb,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb { display: none !important; }

/*
 * The "edit" link WordPress adds to the account page for a logged-in editor.
 * It is an author convenience shown on a customer-facing page, and it sits
 * directly under the account navigation where it reads as part of the menu.
 */
.woocommerce-account .post-edit-link,
.woocommerce-account .edit-link,
.woocommerce-account .entry-header .edit-link { display: none !important; }

/*
 * The wave between the hero and the category tiles. Purely decorative, and
 * sized here so a stylesheet that never arrives cannot let the SVG take a
 * default size and push the page around.
 */
/*
 * Kept deliberately short. The band between the hero and the tiles was about
 * 175px of mostly nothing; this is the same motif in a third of the height, and
 * the negative bottom margin lets the tiles start before the box ends.
 */
.ra-wave {
  height: 3.4rem;
  margin: 0 0 -1.4rem;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.ra-wave svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .ra-wave svg path { animation: ra-wave-drift 16s ease-in-out infinite alternate; }
  .ra-wave svg path:last-child { animation-duration: 22s; animation-direction: alternate-reverse; }
}
@keyframes ra-wave-drift {
  from { transform: translate3d(-1.1%, 0, 0); }
  to   { transform: translate3d(1.1%, .5%, 0); }
}
@media (max-width: 620px) { .ra-wave { height: 2.4rem; margin: 0 0 -.8rem; } }

/*
 * "Free for you" gets its own line under the category name.
 *
 * align-items is restated because the base rule sets it to baseline, which in a
 * column reads as the horizontal start and quietly left-aligns a heading that
 * is meant to be centred.
 */
.ra-cat-head { flex-direction: column; align-items: center; gap: .3rem; }
.ra-free-line { display: block; font-size: .82rem; letter-spacing: .01em; }

/* ============================================================
   Page top spacing

   Measured on the live site rather than guessed. Storefront gives the header a
   67.8px bottom margin on the front page and none elsewhere, and gives every
   page-title block 95.9px of bottom padding with nothing above it. So the
   homepage had a large empty band under the header while every other page had
   its title jammed against it and a canyon underneath.
   ============================================================ */

/*
 * Front page only. The hero is its own opening statement and does not need the
 * header to hold it away.
 */
body.home .site-header,
body:has(.ra-home) .site-header { margin-bottom: 0 !important; }

body.home .ra-strip,
body:has(.ra-home) .ra-strip { margin-top: .8rem; }

body.home .ra-hero,
body:has(.ra-home) .ra-hero { padding-top: 1.4rem; }

/*
 * Every page that opens with a title: Promotional Items, Cart, Checkout, My
 * account, and any other running the same header. Twenty pixels of air above
 * it, because flush against the header it reads as part of the header, and
 * forty off the bottom, which it had to spare.
 */
.woocommerce-products-header,
.entry-header {
  padding-top: 20px !important;
  padding-bottom: 56px !important;
}
@media (max-width: 620px) {
  .woocommerce-products-header,
  .entry-header {
    padding-top: 14px !important;
    padding-bottom: 32px !important;
  }
}

/*
 * My account is a working page, not a landing page: the title only needs to
 * sit clear of the menu, and the footer can follow the panels closely.
 */
.woocommerce-account .entry-header { padding-bottom: 18px !important; }
.woocommerce-account .hentry { margin-bottom: 2.2rem; }
.woocommerce-account .site-main { margin-bottom: 0; }

/* Focus rings: none on mouse or tap, cyan ring for keyboard only.
   Replaces Storefront's purple a:focus outline on product cards, gallery and tabs. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
.woocommerce-tabs ul.tabs li a:focus:not(:focus-visible),
.woocommerce-LoopProduct-link:focus:not(:focus-visible),
.woocommerce-product-gallery a:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
a:focus-visible,
.woocommerce-tabs ul.tabs li a:focus-visible,
.woocommerce-LoopProduct-link:focus-visible {
	outline: 2px solid var(--ra-cyan);
	outline-offset: 2px;
}


/* Block cart: inset the line-item table and keep it inside the page width */
.wp-block-woocommerce-cart.alignwide { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
.wp-block-woocommerce-cart table.wc-block-cart-items { border-collapse: separate; border-spacing: 0; border: 1px solid var(--ra-line); border-radius: 16px; overflow: hidden; }
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th { padding: .85rem 1.25rem !important; }
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td { padding: 1.1rem 1.25rem !important; }
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image { padding-right: 0 !important; width: 96px; }

/* Browser autofill: Chrome and Safari paint suggested or saved values on a light
   background while keeping our light text color, which makes the typed value
   invisible. Hold the field on the dark surface instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ra-ink) !important;
  caret-color: var(--ra-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--ra-elev) inset !important;
  box-shadow: 0 0 0 1000px var(--ra-elev) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill { box-shadow: 0 0 0 1000px var(--ra-elev) inset !important; -webkit-text-fill-color: var(--ra-ink) !important; }