/* =========================================================
   RVT DESIGN SYSTEM
   Adds the tokens rvt-design.css was missing (spacing, form
   controls, focus, state colours) and a small set of opt-in
   primitives. Loads after rvt-design.css.

   Baseline rules use :where() so they carry ZERO specificity:
   they fill gaps where nothing is styled and can never win
   against an existing rule. The one exception is the focus
   ring, which deliberately beats the 24 "outline:none"
   declarations already in the codebase.
========================================================= */

:root{
  /* spacing scale, straight from the saved design document */
  --rvt-s-xs: 4px;
  --rvt-s-sm: 8px;
  --rvt-s-md: 16px;
  --rvt-s-lg: 32px;
  --rvt-s-xl: 64px;
  --rvt-s-xxl: 96px;

  /* fluid section rhythm, so vertical space scales with the viewport
     instead of needing a breakpoint per section */
  --rvt-section-y: clamp(48px, 7vw, 96px);
  --rvt-gutter: clamp(20px, 5vw, 64px);
  --rvt-container: 1240px;

  /* one standard for interactive controls */
  --rvt-control-h: 48px;
  --rvt-control-r: var(--rvt-rs, 8px);
  --rvt-tap: 44px;

  /* focus ring */
  --rvt-focus: var(--rvt-accent-h, #238C85);
  --rvt-focus-w: 2px;
  --rvt-focus-o: 2px;

  /* state colours mapped onto the existing palette rather than
     introducing new hues */
  --rvt-success: var(--rvt-mint, #6FCFA8);
  --rvt-error: var(--rvt-coral, #F0806F);
  --rvt-info: var(--rvt-accent, #2FA9A0);
}

/* ---------------------------------------------------------
   Focus. This one is allowed to win: a visible focus ring is
   an accessibility requirement, and the codebase carries 24
   outline:none declarations that would otherwise strip it.
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline: var(--rvt-focus-w) solid var(--rvt-focus);
  outline-offset: var(--rvt-focus-o);
}

/* never leave a control with no focus affordance at all */
:where(a, button, input, select, textarea):focus:not(:focus-visible){
  outline: none;
}

/* ---------------------------------------------------------
   Baseline for controls that nothing else styles.
   :where() = zero specificity, so any existing rule wins.
--------------------------------------------------------- */

:where(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="password"],
  input[type="search"], input[type="date"], select, textarea
){
  min-height: var(--rvt-control-h);
  padding: 0 14px;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-control-r);
  background: var(--rvt-surface, #FFFFFF);
  color: var(--rvt-ink, #1A1A1A);
  font-family: var(--rvt-b);
  /* 16px stops iOS Safari zooming the page on focus */
  font-size: 16px;
}

:where(textarea){
  padding: 12px 14px;
  line-height: 1.55;
}

:where(input, select, textarea)::placeholder{
  color: var(--rvt-muted, #6E6A66);
  opacity: 1;
}

:where(label){
  font-family: var(--rvt-b);
  font-size: 14px;
  font-weight: 500;
  color: var(--rvt-ink, #1A1A1A);
}

:where(input[type="checkbox"], input[type="radio"]){
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--rvt-accent, #2FA9A0);
}

/* every control keeps a comfortable touch target */
:where(button, [type="submit"], [type="button"]){
  min-height: var(--rvt-tap);
  font-family: var(--rvt-b);
}

/* ---------------------------------------------------------
   Opt-in primitives. Nothing uses these yet; they exist so new
   work has one button, card and container to reach for rather
   than inventing a fourth.
--------------------------------------------------------- */

.rvt-container{
  width: 100%;
  max-width: var(--rvt-container);
  margin-inline: auto;
  padding-inline: var(--rvt-gutter);
}

.rvt-section{ padding-block: var(--rvt-section-y); }

.rvt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rvt-s-sm);
  min-height: var(--rvt-control-h);
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--rvt-rp, 999px);
  font-family: var(--rvt-b);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ink on teal is 6.05:1. White on this teal is 2.88:1, which is
   why the primary button carries ink rather than white. */
.rvt-btn--primary{
  border-color: var(--rvt-accent, #2FA9A0);
  background: var(--rvt-accent, #2FA9A0);
  color: var(--rvt-ink, #1A1A1A);
}

.rvt-btn--primary:hover{
  border-color: var(--rvt-accent-h, #238C85);
  background: var(--rvt-accent-h, #238C85);
  color: var(--rvt-surface, #FFFFFF);
}

.rvt-btn--secondary{
  border-color: var(--rvt-ink, #1A1A1A);
  background: transparent;
  color: var(--rvt-ink, #1A1A1A);
}

.rvt-btn--secondary:hover{
  background: var(--rvt-ink, #1A1A1A);
  color: var(--rvt-bg, #FBF3EC);
}

.rvt-btn--ghost{
  min-height: var(--rvt-tap);
  padding: 0 12px;
  background: transparent;
  color: var(--rvt-ink, #1A1A1A);
}

.rvt-btn--ghost:hover{ color: var(--rvt-accent-h, #238C85); }

.rvt-btn[disabled],
.rvt-btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}

.rvt-card{
  display: flex;
  flex-direction: column;
  padding: var(--rvt-s-lg);
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-rm, 16px);
  background: var(--rvt-surface, #FFFFFF);
  box-shadow: var(--rvt-sh, 0 8px 24px rgba(26, 26, 26, .06));
}

.rvt-card--flat{ box-shadow: none; }

.rvt-card--interactive{ transition: transform .2s ease, box-shadow .2s ease; }

.rvt-card--interactive:hover{
  transform: translateY(-4px);
  box-shadow: var(--rvt-sh-lg, 0 24px 60px rgba(26, 26, 26, .08));
}

/* section heading pattern: eyebrow, heading, supporting line */
.rvt-eyebrow{
  display: block;
  margin: 0 0 var(--rvt-s-md);
  color: var(--rvt-muted, #6E6A66);
  font-family: var(--rvt-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rvt-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--rvt-rp, 999px);
  background: var(--rvt-bg, #FBF3EC);
  color: var(--rvt-ink, #1A1A1A);
  font-family: var(--rvt-b);
  font-size: 12px;
  font-weight: 600;
}

.rvt-badge--sale{ background: var(--rvt-coral, #F0806F); }
.rvt-badge--new{ background: var(--rvt-mint, #6FCFA8); }

@media (prefers-reduced-motion: reduce){
  .rvt-btn,
  .rvt-card--interactive{
    transition-duration: .01ms;
  }
  .rvt-card--interactive:hover{ transform: none; }
}

/* =========================================================
   CONTACT ACTIONS
   Replaces the single-button sticky bar from rvt-design.php
   with a bar that also reaches WhatsApp, and gives the fixed
   bars the safe-area padding they were missing (on phones
   with a home indicator they sat underneath it).
========================================================= */

:root{
  --rvt-safe-b: env(safe-area-inset-bottom, 0px);
  --rvt-bar-h: calc(68px + var(--rvt-safe-b));
}

/* the original one-button bar stands down in favour of the one below */
.rvt-mcta{ display: none !important; }

.rvt-actionbar{
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  gap: 10px;
  align-items: center;
  padding: 12px var(--rvt-gutter, 16px) calc(12px + var(--rvt-safe-b));
  border-top: 1px solid var(--rvt-border, #EADFD5);
  background: color-mix(in srgb, var(--rvt-bg, #FBF3EC) 96%, transparent);
}

@supports (backdrop-filter: blur(8px)){
  .rvt-actionbar{ backdrop-filter: blur(8px); }
}

/* the bar is a phone convenience; on desktop the header already carries
   navigation and the footer carries the contact details */
@media (max-width: 1024px){
  .rvt-actionbar{ display: flex; }
}

.single-product .rvt-actionbar,
body.woocommerce-cart .rvt-actionbar,
body.woocommerce-checkout .rvt-actionbar,
body.woocommerce-account .rvt-actionbar{ display: none !important; }

.rvt-actionbar__wa,
.rvt-actionbar__shop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--rvt-rp, 999px);
  font-family: var(--rvt-b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* icon only, so it carries its name in a visually hidden span */
.rvt-actionbar__wa{
  flex: 0 0 auto;
  width: 48px;
  border: 1.5px solid var(--rvt-ink, #1A1A1A);
  background: transparent;
  color: var(--rvt-ink, #1A1A1A);
}

.rvt-actionbar__wa:hover{
  background: var(--rvt-ink, #1A1A1A);
  color: var(--rvt-bg, #FBF3EC);
}

/* ink on teal reads at 6.05:1; white on this teal is 2.88:1 */
.rvt-actionbar__shop{
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 18px;
  border: 1.5px solid var(--rvt-accent, #2FA9A0);
  background: var(--rvt-accent, #2FA9A0);
  color: var(--rvt-ink, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvt-actionbar__shop:hover{
  border-color: var(--rvt-accent-h, #238C85);
  background: var(--rvt-accent-h, #238C85);
  color: var(--rvt-surface, #FFFFFF);
}

.rvt-actionbar a:focus-visible{
  outline: 2px solid var(--rvt-accent-h, #238C85);
  outline-offset: 2px;
}

.rvt-actionbar__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* back to top has to clear whichever bar is showing, safe area included */
@media (max-width: 1024px){
  .rvt-top{ bottom: calc(var(--rvt-bar-h) + 16px); }
}

.rvt-buybar{
  padding-bottom: calc(12px + var(--rvt-safe-b));
}

@media (prefers-reduced-motion: reduce){
  .rvt-actionbar__wa,
  .rvt-actionbar__shop{ transition-duration: .01ms; }
}
/* =========================================================
   ACCESSIBILITY
========================================================= */

/* Hidden until focused, then it lands in the top-left corner.
   The Canvas template pages had no skip link at all. */
.rvt-skip-link{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 12px 18px;
  transform: translateY(-120%);
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: 0 0 var(--rvt-rs, 8px) 0;
  background: var(--rvt-surface, #FFFFFF);
  color: var(--rvt-ink, #1A1A1A);
  font-family: var(--rvt-b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease;
}

.rvt-skip-link:focus{
  transform: translateY(0);
  outline: 2px solid var(--rvt-accent-h, #238C85);
  outline-offset: -2px;
}

/* the skip target is a focus anchor, so it draws no ring of its own */
#rvt-main:focus{ outline: none; }

/* =========================================================
   REDUCED MOTION
   A site-wide net. Three layers carried animations with no
   reduced-motion block of their own: the About page, the My
   Account page, and the Customizer CSS.
========================================================= */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* transforms used purely for motion should settle rather than animate */
  .rvt-card--interactive:hover,
  .rv-shot-main,
  .rv-shot-top,
  .rv-shot-bottom{
    transform: none !important;
  }
}