/* ==========================================================================
   Rang Aur Sanche — theme stylesheet
   Built from the Organic design system tokens plus the per-component pixel
   specs. Section order mirrors WooCommerce-Pixel-Spec.md.

   1.  Tokens
   2.  Base / reset
   3.  Layout constants (container, breadcrumbs, sections)
   4.  Buttons, inputs, chips
   5.  Header (announcement, nav, shop dropdown, search overlay, mobile menu)
   6.  Footer + floating WhatsApp
   7.  Shared cards (product, journal, line item, trust row, blobs)
   8.  Home
   9.  Shop archive
   10. Product detail
   11. Cart
   12. Checkout
   13. Thank you
   14. My account (login, dashboard, orders, addresses, details)
   15. Our Story
   16. Journal listing + post
   17. Contact
   18. WooCommerce notices, pagination, misc
   19. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens — copied verbatim from the Organic design system stylesheet
   (_ds/organic-<id>/styles.css in the design handoff)
   ========================================================================== */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  /* Theme additions */
  --container: 1240px;
  --gutter: 28px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* The mockups keep photos at full saturation: the wash wrapper stays for the
   rounded treatment, the filter itself is off. */
.washed { filter: none; opacity: 1; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--color-bg);
  clip: auto !important;
  clip-path: none;
  color: var(--color-accent-800);
  display: block;
  font-size: 14px;
  height: auto;
  left: 20px;
  line-height: normal;
  padding: 15px 23px;
  border-radius: 999px;
  text-decoration: none;
  top: 20px;
  width: auto;
  z-index: 100000;
}

/* Float keyframes for the decorative dots and blobs. */
@keyframes floaty  { 0%, 100% { transform: translateY(0); }             50% { transform: translateY(-14px); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes ddin    { 0% { opacity: 0; transform: translateY(-8px); }     100% { opacity: 1; transform: translateY(0); } }
@keyframes ovbg    { 0% { opacity: 0; }                                  100% { opacity: 1; } }
@keyframes ovin    { 0% { opacity: 0; transform: translateY(-18px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ras-toast-in { 0% { opacity: 0; transform: translate(-50%, 14px); } 100% { opacity: 1; transform: translate(-50%, 0); } }

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

/* ==========================================================================
   3. Layout constants
   ========================================================================== */

.ras-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.ras-page { background: var(--color-bg); color: var(--color-text); overflow-x: hidden; }

.ras-breadcrumbs {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 28px 0;
  font-size: 13px;
  color: var(--color-neutral-700);
}
.ras-breadcrumbs a { color: var(--color-neutral-700); text-decoration: none; }
.ras-breadcrumbs a:hover { color: var(--color-accent-700); }
.ras-breadcrumbs__sep { margin: 0 8px; opacity: .5; }
.ras-breadcrumbs__current { color: var(--color-text); }

/* Section heading pair used across pages: big heading left, short note right. */
.ras-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.ras-section-head h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  margin: 0;
  max-width: 620px;
  line-height: 1.02;
}
.ras-section-head p {
  margin: 0;
  color: var(--color-neutral-700);
  max-width: 300px;
  font-size: 15px;
}

/* ==========================================================================
   4. Buttons, inputs, chips
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-neutral-200); color: var(--color-text); }

.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--color-text);
}
.btn-icon:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-xl { padding: 17px 24px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* Inputs */
.ras-input,
.ras-field input[type="text"],
.ras-field input[type="email"],
.ras-field input[type="tel"],
.ras-field input[type="password"],
.ras-field input[type="number"],
.ras-field input[type="search"],
.ras-field input[type="url"],
.ras-field textarea,
.ras-field select {
  width: 100%;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  transition: border-color .2s ease;
}
.ras-input:focus,
.ras-field input:focus,
.ras-field textarea:focus,
.ras-field select:focus { border-color: var(--color-accent); }

.ras-field textarea { resize: vertical; min-height: 120px; }

.ras-field { display: flex; flex-direction: column; gap: 8px; }
.ras-field > label,
.ras-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* Inputs sitting on a surface card take the surface fill. */
.ras-on-surface .ras-input,
.ras-on-surface .ras-field input,
.ras-on-surface .ras-field textarea,
.ras-on-surface .ras-field select { background: var(--color-surface); }

.ras-input--pill { border-radius: 999px; }

/* Chips / tags */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.tag-accent   { background: var(--color-accent-100);   color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral  { background: var(--color-neutral-100);  color: var(--color-neutral-800); }
.tag-outline  { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* Pill quantity stepper, shared by cart, product and mini line items. */
.ras-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg);
  border-radius: 999px;
  padding: 4px;
}
.ras-qty button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease;
}
.ras-qty button:hover { background: var(--color-neutral-200); }
.ras-qty button:disabled { opacity: .35; cursor: not-allowed; }
.ras-qty input {
  width: 34px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ras-qty input::-webkit-outer-spin-button,
.ras-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   5. Header
   ========================================================================== */

.ras-announcement {
  background: var(--color-accent-800);
  color: var(--color-accent-100);
  text-align: center;
  padding: 9px 16px;
  font-size: 13px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ras-announcement__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent-300);
  flex: none;
}
.ras-announcement__msg { position: relative; display: inline-block; }
.ras-announcement__msg > span {
  transition: opacity .45s ease;
}
.ras-announcement__msg > span[hidden] { display: none; }
.ras-announcement__msg > span.is-out { opacity: 0; }

.ras-header-wrap { position: relative; }

.sh-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.sh-brand {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.sh-brand:hover { color: var(--color-text); }
.sh-brand__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent);
  display: inline-block;
  flex: none;
}

.sh-nav { display: flex; align-items: center; gap: 26px; }
.sh-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sh-nav__item > a {
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sh-nav__item > a:hover { color: var(--color-accent-700); }
.sh-nav__underline {
  height: 3px;
  width: 20px;
  background: var(--color-accent);
  border-radius: 999px;
}

/* Shop mega dropdown */
.sh-dd {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
  z-index: 60;
  display: none;
}
.sh-nav__item.is-open .sh-dd { display: block; animation: ddin .16s ease; }
.sh-dd__card {
  background: var(--color-surface);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: 540px;
  position: relative;
}
.sh-dd__pointer {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--color-surface);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}
.sh-dd__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sh-dd__item {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 13px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--color-text);
  transition: background .2s ease;
}
.sh-dd__item:hover { background: var(--color-accent-100); color: var(--color-text); }
.sh-dd__chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
}
.sh-dd__chip--a  { background: var(--color-accent-200);   color: var(--color-accent-700); }
.sh-dd__chip--b  { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.sh-dd__text { display: flex; flex-direction: column; gap: 2px; }
.sh-dd__title { font-family: var(--font-heading); font-size: 16px; }
.sh-dd__desc  { font-size: 12.5px; color: var(--color-neutral-700); }

.sh-actions { display: flex; align-items: center; gap: 6px; }

.sh-cart { gap: 8px; padding: 9px 16px; text-decoration: none; position: relative; }
.sh-cart__count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-accent-800);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.sh-burger { display: none; }

/* Mobile stacked menu */
.sh-mobile {
  display: none;
  border-top: 1px solid var(--color-neutral-200);
  background: var(--color-bg);
  padding: 12px 18px 20px;
  animation: ddin .16s ease;
}
.sh-mobile.is-open { display: block; }
.sh-mobile nav { display: flex; flex-direction: column; gap: 4px; }
.sh-mobile a {
  font-size: 17px;
  color: var(--color-text);
  text-decoration: none;
  padding: 13px 12px;
  border-radius: 14px;
}
.sh-mobile a:hover { background: var(--color-accent-100); color: var(--color-text); }

/* Search overlay */
.sh-search {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-neutral-900) 52%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
}
.sh-search.is-open { display: flex; animation: ovbg .18s ease; }
.sh-search__inner {
  width: 100%;
  max-width: 700px;
  margin-top: 11vh;
  animation: ovin .22s cubic-bezier(.2, .9, .3, 1);
}
.sh-search__panel {
  background: var(--color-bg);
  border-radius: 34px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
}
.sh-search__row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border-radius: 26px;
  padding: 8px 10px 8px 22px;
}
.sh-search__row input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 21px;
  color: var(--color-text);
  padding: 12px 0;
}
.sh-search__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: var(--color-neutral-200);
  color: var(--color-text);
  cursor: pointer;
  flex: none;
  transition: background .2s ease;
}
.sh-search__close:hover { background: var(--color-neutral-300); }
.sh-search__body { padding: 22px 14px 12px; }
.sh-search__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-neutral-600);
  margin-bottom: 14px;
}
.sh-search__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.sh-search__pills a { text-decoration: none; }
.sh-search__pills .tag { font-size: 14px; padding: 9px 16px; }
.sh-search__label--cats { margin-bottom: 12px; }
.sh-search__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-search__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  transition: background .2s ease;
}
.sh-search__cats a:hover { background: var(--color-accent-100); color: var(--color-text); }
.sh-search__cats span { font-size: 15px; }

/* ==========================================================================
   6. Footer + floating WhatsApp
   ========================================================================== */

.ras-footer {
  background: var(--color-neutral-900);
  color: var(--color-neutral-200);
}
.ras-footer__top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 66px 28px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.ras-footer__brand {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-bg);
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 14px;
}
.ras-footer__brand span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent-400);
  display: inline-block;
}
.ras-footer__blurb {
  font-size: 14px;
  color: var(--color-neutral-400);
  max-width: 260px;
  margin: 0 0 22px;
  line-height: 1.65;
}
.ras-footer__social { display: flex; gap: 10px; }
.ras-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease;
}
.ras-footer__social a:hover { background: var(--color-accent); color: var(--color-bg); }

.ras-footer h5 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-neutral-400);
  font-family: var(--font-body);
  font-weight: 600;
  margin: 0 0 18px;
}
.ras-footer__links { display: flex; flex-direction: column; gap: 11px; }
.ras-footer__links a {
  font-size: 14px;
  color: var(--color-neutral-200);
  text-decoration: none;
  transition: color .2s ease;
}
.ras-footer__links a:hover { color: var(--color-accent-300); }

.ras-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 28px 40px;
  border-top: 1px solid var(--color-neutral-800);
  font-size: 13px;
  color: var(--color-neutral-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ras-footer__legal { display: flex; gap: 20px; }
.ras-footer__legal a { color: var(--color-neutral-400); text-decoration: none; }
.ras-footer__legal a:hover { color: var(--color-accent-300); }

.ras-wa {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--color-accent-2-600);
  color: var(--color-bg);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, background .2s ease;
}
.ras-wa:hover {
  transform: scale(1.08);
  background: var(--color-accent-2-700);
  color: var(--color-bg);
}

/* ==========================================================================
   7. Shared cards
   ========================================================================== */

/* Product card (shop loop) */
.ras-product-card {
  background: var(--color-surface);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ras-product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ras-product-card__media {
  position: relative;
  height: 210px;
  overflow: hidden;
  display: block;
}
.ras-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-product-card__age {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-bg);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--color-accent-800);
}
.ras-product-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.ras-product-card__theme {
  font-size: 12px;
  color: var(--color-accent-2-700);
  margin-bottom: 6px;
}
.ras-product-card__title {
  font-size: 19px;
  margin: 0 0 8px;
}
.ras-product-card__title a { color: var(--color-text); text-decoration: none; }
.ras-product-card__title a:hover { color: var(--color-accent-700); }
.ras-product-card__desc {
  font-size: 13px;
  color: var(--color-neutral-700);
  margin: 0 0 16px;
  line-height: 1.55;
  flex: 1;
}
.ras-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ras-product-card__price {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-text);
}
.ras-product-card__price del { opacity: .5; font-size: 15px; margin-right: 6px; }
.ras-product-card__price ins { text-decoration: none; }

/* Journal card */
.ras-journal-card { display: flex; flex-direction: column; gap: 16px; }
.ras-journal-card__media {
  border-radius: 24px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.ras-journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ras-journal-card:hover .ras-journal-card__media img { transform: scale(1.03); }
.ras-journal-card__meta { font-size: 13px; color: var(--color-neutral-600); }
.ras-journal-card__title { font-size: 22px; margin: 8px 0 0; line-height: 1.15; }
.ras-journal-card__title a { color: var(--color-text); text-decoration: none; }
.ras-journal-card__title a:hover { color: var(--color-accent-700); }
.ras-journal-card__excerpt {
  font-size: 14.5px;
  color: var(--color-neutral-700);
  margin: 10px 0 0;
  line-height: 1.6;
}
.ras-read {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-accent-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
.ras-read:hover { color: var(--color-accent-800); }

/* Trust row */
.ras-trust { display: flex; flex-direction: column; gap: 12px; }
.ras-trust__item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--color-neutral-800);
}
.ras-trust__item svg { color: var(--color-accent-2-700); flex: none; }

/* Blob masks (exact strings from the pixel spec) */
.ras-blob            { overflow: hidden; }
.ras-blob--hero      { border-radius: 54% 46% 58% 42% / 52% 48% 52% 48%; }
.ras-blob--hero-alt  { border-radius: 48% 52% 58% 42% / 52% 44% 56% 48%; }
.ras-blob--hero-sm   { border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; }
.ras-blob--story     { border-radius: 42% 58% 46% 54% / 56% 48% 52% 44%; }
.ras-blob--journal   { border-radius: 46% 54% 55% 45% / 54% 46% 54% 46%; }
.ras-blob--product   { border-radius: 46% 54% 52% 48% / 52% 48% 54% 46%; }
.ras-blob img        { width: 100%; height: 100%; object-fit: cover; }

/* Floating accent dots used on heroes */
.ras-dot { position: absolute; border-radius: 999px; z-index: 3; }
.ras-dot--a { background: var(--color-accent-300);   animation: floaty 6s ease-in-out infinite; }
.ras-dot--b { background: var(--color-accent-2-400); animation: floaty2 7s ease-in-out infinite; }
.ras-dot--c { background: var(--color-accent-500);   animation: floaty 5s ease-in-out infinite; }

/* ==========================================================================
   8. Home
   ========================================================================== */

/* Hero */
.ras-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 30px 28px 60px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  position: relative;
}
.ras-hero__copy { position: relative; z-index: 2; }
.ras-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.ras-hero__flag span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-2-600);
}
.ras-hero__title {
  font-size: clamp(46px, 5.4vw, 76px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.ras-hero__accent { color: var(--color-accent); position: relative; display: inline-block; }
.ras-hero__swatch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 12px;
  background: var(--color-accent-2-300);
  border-radius: 999px;
  z-index: -1;
  opacity: .85;
}
.ras-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 30px;
  color: var(--color-neutral-800);
}
.ras-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.ras-hero__media { position: relative; height: 500px; }
.ras-hero__blob {
  position: absolute;
  inset: 0;
  border-radius: 54% 46% 58% 42% / 52% 48% 52% 48%;
  overflow: hidden;
}
.ras-hero__blob img { width: 100%; height: 100%; object-fit: cover; }
.ras-hero__blob-sm {
  position: absolute;
  bottom: -6px;
  left: -18px;
  width: 170px;
  height: 170px;
  box-shadow: var(--shadow-md);
  border: 6px solid var(--color-bg);
  z-index: 2;
}
.ras-hero__badge {
  position: absolute;
  top: 18px;
  left: -22px;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: rotate(-5deg);
  z-index: 3;
}
.ras-hero__badge-num { font-family: var(--font-heading); font-size: 20px; color: var(--color-accent); }
.ras-hero__badge-label { font-size: 12px; color: var(--color-neutral-700); line-height: 1.25; }

/* Trust strip */
.ras-trust-strip { background: var(--color-accent-2-100); }
.ras-trust-strip__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ras-trust-strip__item { display: flex; gap: 14px; align-items: center; }
.ras-trust-strip__item h4 { font-size: 17px; margin: 0; }
.ras-trust-strip__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  flex: none;
}

/* Occasion cards */
.ras-occasions { max-width: var(--container); margin: 0 auto; padding: 78px 28px 20px; }
.ras-occasions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ras-occasion {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ras-occasion:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); color: inherit; }
.ras-occasion__media { height: 180px; overflow: hidden; }
.ras-occasion__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-occasion__body { padding: 20px 22px 24px; }
.ras-occasion__body h3 { font-size: 22px; margin: 0 0 6px; }
.ras-occasion__cta {
  font-size: 14px;
  color: var(--color-accent-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Best sellers carousel */
.ras-bestsellers { max-width: var(--container); margin: 0 auto; padding: 78px 28px 20px; }
.ras-bestsellers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.ras-bestsellers__head h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 0 0 8px; line-height: 1.02; }
.ras-bestsellers__head p { margin: 0; color: var(--color-neutral-700); font-size: 15px; }
.ras-bestsellers__nav { display: flex; gap: 10px; }
.ras-carousel-btn { background: var(--color-surface); width: 46px; height: 46px; }
.ras-carousel-btn:hover { background: var(--color-neutral-200); }

.ras-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 0 16px;
  scroll-padding-left: 2px;
}
.ras-carousel::-webkit-scrollbar { height: 0; }
.ras-carousel__card {
  flex: 0 0 288px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border-radius: 28px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.ras-carousel__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ras-carousel__media { height: 220px; position: relative; overflow: hidden; display: block; }
.ras-carousel__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-carousel__age {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-bg);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--color-accent-800);
}
.ras-carousel__age.is-sage { color: var(--color-accent-2-800); }
.ras-carousel__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.ras-carousel__body h3 { font-size: 19px; margin: 0 0 4px; }
.ras-carousel__body h3 a { color: var(--color-text); text-decoration: none; }
.ras-carousel__body h3 a:hover { color: var(--color-accent-700); }
.ras-carousel__body p { font-size: 13px; margin: 0 0 14px; color: var(--color-neutral-700); flex: 1; }
.ras-carousel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ras-carousel__price { font-family: var(--font-heading); font-size: 20px; }
.ras-carousel__price del { opacity: .5; font-size: 15px; margin-right: 6px; }
.ras-carousel__price ins { text-decoration: none; }

/* Bands (tinted full-bleed sections) */
.ras-band { margin-top: 60px; }
.ras-band--sage   { background: var(--color-accent-2-100); }
.ras-band--accent { background: var(--color-accent-100); }
.ras-band__inner { max-width: var(--container); margin: 0 auto; padding: 78px 28px; }
.ras-btn-on-tint { background: var(--color-bg); }
.ras-btn-on-tint:hover { background: var(--color-neutral-200); }

/* How it works */
.ras-how__title { font-size: clamp(32px, 3.6vw, 46px); margin: 0 0 46px; line-height: 1.02; }
.ras-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ras-how__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ras-how__num { font-family: var(--font-heading); font-size: 54px; color: var(--color-accent); line-height: 1; }
.ras-how__icon { width: 84px; height: 84px; display: grid; place-items: center; flex: none; }
.ras-how__step h3 { font-size: 22px; margin: 0 0 8px; }
.ras-how__step p { margin: 0; color: var(--color-neutral-800); font-size: 15px; }

/* Screen-free */
.ras-screenfree {
  max-width: var(--container);
  margin: 0 auto;
  padding: 84px 28px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: center;
}
.ras-screenfree__media { position: relative; height: 400px; }
.ras-screenfree__blob {
  position: absolute;
  inset: 0;
  border-radius: 42% 58% 60% 40% / 48% 52% 48% 52%;
  overflow: hidden;
}
.ras-screenfree__blob img { width: 100%; height: 100%; object-fit: cover; }
.ras-screenfree__title { font-size: clamp(34px, 4vw, 54px); line-height: 1; margin: 0 0 22px; }
.ras-screenfree__title span { color: var(--color-accent-2-700); }
.ras-screenfree__body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 460px;
  margin: 0 0 28px;
}

/* Birthday + party picker */
.ras-birthday {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 50px;
  align-items: center;
}
.ras-birthday__title { font-size: clamp(34px, 4vw, 54px); line-height: 1.02; margin: 0 0 20px; }
.ras-birthday__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 500px;
  margin: 0 0 30px;
}
.ras-birthday__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.ras-party {
  background: var(--color-bg);
  border-radius: 32px;
  padding: 30px 30px 34px;
  box-shadow: var(--shadow-md);
}
.ras-party h3 { font-size: 22px; margin: 0 0 6px; }
.ras-party__hint { margin: 0 0 22px; font-size: 14px; color: var(--color-neutral-700); }
.ras-party__count { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.ras-party__count > span:first-child {
  font-family: var(--font-heading);
  font-size: 56px;
  color: var(--color-accent);
  line-height: 1;
}
.ras-party__unit { font-size: 15px; color: var(--color-neutral-700); }
.ras-party__slider { width: 100%; accent-color: var(--color-accent); margin-bottom: 16px; }
.ras-party__line {
  background: var(--color-accent-2-100);
  border-radius: 18px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--color-accent-2-800);
  line-height: 1.5;
  min-height: 62px;
}
.ras-party__cta { padding: 14px; font-size: 15px; margin-top: 18px; }

/* Interest tiles */
.ras-interests { max-width: var(--container); margin: 0 auto; padding: 78px 28px 20px; }
.ras-interests__head { margin-bottom: 34px; }
.ras-interests__head h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 0 0 8px; line-height: 1.02; }
.ras-interests__head p { margin: 0; color: var(--color-neutral-700); font-size: 15px; }
.ras-interests__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ras-interest {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 16px;
  background: var(--color-surface);
  border-radius: 26px;
  transition: transform .2s ease, background .2s ease;
}
.ras-interest:hover { transform: translateY(-6px); background: var(--color-accent-100); color: inherit; }
.ras-interest__icon { width: 74px; height: 74px; display: grid; place-items: center; }
.ras-interest__label { font-family: var(--font-heading); font-size: 18px; }

/* Schools band */
.ras-schools { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.ras-schools__title { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.02; margin: 0 0 20px; }
.ras-schools__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 520px;
  margin: 0 0 30px;
}
.ras-schools__minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 560px;
  margin-bottom: 30px;
}
.ras-schools__mini { background: var(--color-bg); border-radius: 20px; padding: 18px; }
.ras-schools__mini h4 { font-size: 16px; margin: 0 0 4px; }
.ras-schools__mini p { font-size: 13px; margin: 0; color: var(--color-neutral-700); }
.ras-schools__media { position: relative; height: 380px; }
.ras-schools__blob {
  position: absolute;
  inset: 0;
  border-radius: 40% 60% 55% 45% / 52% 48% 52% 48%;
  overflow: hidden;
}
.ras-schools__blob img { width: 100%; height: 100%; object-fit: cover; }

/* Mosaic gallery */
.ras-gallery { max-width: var(--container); margin: 0 auto; padding: 84px 28px 40px; }
.ras-gallery__head { text-align: center; margin-bottom: 40px; }
.ras-gallery__head h2 { font-size: clamp(34px, 4vw, 54px); margin: 0 0 10px; }
.ras-gallery__head p { margin: 0 auto; color: var(--color-neutral-700); font-size: 16px; max-width: 460px; }
.ras-gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 14px;
}
.ras-gallery__tile { grid-column: span 2; border-radius: 22px; overflow: hidden; }
.ras-gallery__tile.is-feature { grid-row: span 2; border-radius: 26px; }
.ras-gallery__tile img { width: 100%; height: 100%; object-fit: cover; }

/* Instagram */
.ras-insta { max-width: var(--container); margin: 0 auto; padding: 44px 28px 40px; }
.ras-insta__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.ras-insta__head h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0; line-height: 1.02; }
.ras-insta__follow { padding: 12px 20px; }
.ras-insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ras-insta__tile { aspect-ratio: 1; border-radius: 20px; overflow: hidden; display: block; }
.ras-insta__tile img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.ras-faq { max-width: 860px; margin: 0 auto; padding: 70px 28px 30px; }
.ras-faq__title { font-size: clamp(32px, 3.6vw, 46px); margin: 0 0 34px; line-height: 1.02; }
.ras-faq__list { display: flex; flex-direction: column; gap: 12px; }
.ras-faq__item { background: var(--color-surface); border-radius: 22px; padding: 4px 24px; }
.ras-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-heading);
  font-size: 19px;
  list-style: none;
  cursor: pointer;
}
.ras-faq__item summary::-webkit-details-marker { display: none; }
.ras-faq__item summary .chev { flex: none; color: var(--color-accent); transition: transform .22s ease; display: grid; }
.ras-faq__item[open] summary .chev { transform: rotate(180deg); }
.ras-faq__item p { margin: 0 0 20px; color: var(--color-neutral-800); font-size: 15px; line-height: 1.6; }

/* Newsletter */
.ras-newsletter { max-width: var(--container); margin: 0 auto; padding: 40px 28px 84px; }
.ras-newsletter__slab {
  background: var(--color-accent);
  border-radius: 36px;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ras-newsletter__burst { position: absolute; border-radius: 999px; }
.ras-newsletter__burst--a {
  top: -20px;
  left: 40px;
  width: 90px;
  height: 90px;
  background: var(--color-accent-400);
  opacity: .55;
}
.ras-newsletter__burst--b {
  bottom: -30px;
  right: 60px;
  width: 120px;
  height: 120px;
  background: var(--color-accent-600);
  opacity: .4;
}
.ras-newsletter__inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.ras-newsletter__inner h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--color-bg);
  margin: 0 0 12px;
  line-height: 1.05;
}
.ras-newsletter__inner p { color: var(--color-accent-100); font-size: 16px; margin: 0 0 26px; }
.ras-newsletter__form {
  /* Contact Form 7 renders its own <form> inside this wrapper, so the flex
     row lives on .wpcf7-form below rather than here. */
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.ras-newsletter__form input[type="email"] {
  flex: 1;
  width: 100%;
  min-height: 52px;
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}
.ras-newsletter__submit {
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: 0 26px;
  min-height: 52px;
  font-size: 15px;
}
.ras-newsletter__submit:hover { background: var(--color-neutral-900); color: var(--color-bg); }

[hidden] { display: none !important; }
.ras-hidden { display: none !important; }

/* Toast, used by the thank-you upsell */
.ras-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: ras-toast-in .22s ease;
}
.ras-toast__check { color: var(--color-accent-300); display: grid; }

/* Contact Form 7 inside the newsletter slab.
   CF7 wraps every field in its own <p>, so the layout is rebuilt on its
   markup and the honeypot/label paragraph is hidden accessibly. */
.ras-newsletter__form .wpcf7-form {
  display: flex;
  width: 100%;
  margin: 0 auto;
  gap: 10px;
  max-width: 443px;
}
.ras-newsletter__form p { margin: 0; }
.ras-newsletter__form .wpcf7-form-control-wrap { width: 100%; display: block; }
.ras-newsletter__form .wpcf7-form p:nth-child(2) {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.ras-newsletter__form .wpcf7-response-output {
  position: absolute;
  bottom: -25px;
  left: 0;
}
.wpcf7-spinner { margin: 0; position: absolute; }
.wpcf7-form.invalid .wpcf7-not-valid { color: #dc3232; }
.wpcf7-not-valid-tip { color: var(--color-accent-900); }
.wpcf7 form .wpcf7-response-output { display: none; }

/* ==========================================================================
   9. Shop archive
   ========================================================================== */

.ras-shop-masthead {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 28px 20px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
  position: relative;
}
.ras-shop-masthead__copy { position: relative; z-index: 2; }
.ras-shop-masthead__title {
  font-size: clamp(44px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.ras-shop-masthead__lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: 440px;
  margin: 0;
  color: var(--color-neutral-800);
}
.ras-shop-masthead__media { position: relative; height: 380px; }
.ras-shop-masthead__blob {
  position: absolute;
  inset: 0;
  border-radius: 54% 46% 58% 42% / 52% 48% 52% 48%;
  overflow: hidden;
}
.ras-shop-masthead__blob img { width: 100%; height: 100%; object-fit: cover; }
.ras-shop-masthead__badge {
  position: absolute;
  bottom: 6px;
  right: -10px;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  border-radius: 999px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: rotate(4deg);
  z-index: 3;
}
.ras-shop-masthead__badge-num { font-family: var(--font-heading); font-size: 22px; color: var(--color-accent); }
.ras-shop-masthead__badge-label { font-size: 12px; color: var(--color-neutral-700); line-height: 1.25; }

/* Theme bubbles */
.ras-bubbles { max-width: var(--container); margin: 0 auto; padding: 26px 28px 8px; }
.ras-bubbles__row {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 8px 2px 14px;
}
.ras-bubbles__row::-webkit-scrollbar { height: 0; }
.ras-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
  color: var(--color-text);
}
.ras-bubble__circle {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 3px solid transparent;
  transition: transform .18s ease, border-color .18s ease;
  display: block;
}
.ras-bubble__circle--all { background: var(--color-accent-100); display: grid; place-items: center; }
.ras-bubble__circle img { width: 100%; height: 100%; object-fit: cover; }
.ras-bubble:hover .ras-bubble__circle { transform: translateY(-4px); }
.ras-bubble.is-active .ras-bubble__circle { border-color: var(--color-accent); }
.ras-bubble__label { font-family: var(--font-heading); font-size: 14px; }
.ras-bubble.is-active .ras-bubble__label { color: var(--color-accent-800); }

/* Rail + product area */
.ras-shop {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 28px 40px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}

.ras-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ras-rail__head { display: flex; align-items: center; justify-content: space-between; }
.ras-rail__head h3 { font-size: 20px; margin: 0; }
.ras-rail__clear {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-accent-700);
  text-decoration: none;
}
.ras-rail__clear:hover { color: var(--color-accent-800); }
.ras-rail__group h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-neutral-600);
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 600;
}
.ras-rail__rows { display: flex; flex-direction: column; gap: 4px; }
.ras-rail__row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background .2s ease;
}
.ras-rail__row:hover { background: var(--color-accent-100); color: var(--color-text); }
.ras-rail__row.is-active { background: var(--color-accent-100); }
.ras-rail__dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--color-neutral-400);
  background: transparent;
  flex: none;
}
.ras-rail__row.is-active .ras-rail__dot { border-color: var(--color-accent); background: var(--color-accent); }
.ras-rail__range { width: 100%; accent-color: var(--color-accent); }
.ras-rail__range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-neutral-700);
  margin-top: 8px;
}
.ras-rail__range-value { font-family: var(--font-heading); color: var(--color-accent); font-size: 15px; }
.ras-rail__apply { margin-top: 12px; }
.ras-rail__card { background: var(--color-accent-2-100); border-radius: 22px; padding: 22px; }
.ras-rail__card h4 { font-size: 17px; margin: 0 0 6px; }
.ras-rail__card p { font-size: 13px; color: var(--color-neutral-800); margin: 0 0 14px; line-height: 1.5; }
.ras-rail__card-btn { background: var(--color-bg); width: 100%; justify-content: center; font-size: 14px; }
.ras-rail__card-btn:hover { background: var(--color-neutral-200); }

.ras-shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.ras-shop__count { margin: 0; font-size: 15px; color: var(--color-neutral-700); }
.ras-shop__count span { font-family: var(--font-heading); color: var(--color-text); }

/* WooCommerce's ordering form, restyled as the design's pill select. */
.woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-neutral-700);
  margin: 0;
}
.woocommerce-ordering::before { content: "Sort"; }
.woocommerce-ordering select {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

/* Bento featured row */
.ras-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.ras-bento__pick {
  background: var(--color-surface);
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ras-bento__pick:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ras-bento__pick-media { position: relative; overflow: hidden; min-height: 260px; }
.ras-bento__pick-media a, .ras-bento__pick-media img { display: block; width: 100%; height: 100%; }
.ras-bento__pick-media img { object-fit: cover; }
.ras-bento__flag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 999px;
}
.ras-bento__pick-body {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ras-bento__pick-body h3 { font-size: 26px; margin: 0 0 10px; line-height: 1.05; }
.ras-bento__pick-body h3 a { color: var(--color-text); text-decoration: none; }
.ras-bento__pick-body h3 a:hover { color: var(--color-accent-700); }
.ras-bento__pick-body p {
  font-size: 14px;
  color: var(--color-neutral-700);
  margin: 0 0 18px;
  line-height: 1.55;
}
.ras-bento__pick-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ras-bento__price { font-family: var(--font-heading); font-size: 24px; }
.ras-bento__price del { opacity: .5; font-size: 17px; margin-right: 6px; }
.ras-bento__price ins { text-decoration: none; }
.ras-bento__cta { padding: 11px 20px; font-size: 14px; }

.ras-bento__custom {
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
.ras-bento__burst {
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: var(--color-accent-600);
  opacity: .5;
}
.ras-bento__custom-copy { position: relative; z-index: 2; }
.ras-bento__custom-copy h3 { font-size: 25px; margin: 0 0 10px; line-height: 1.05; color: var(--color-bg); }
.ras-bento__custom-copy p { font-size: 14px; margin: 0; line-height: 1.55; color: var(--color-accent-100); }
.ras-bento__custom-cta {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  color: var(--color-accent-800);
  align-self: flex-start;
  padding: 12px 22px;
  font-size: 14px;
}
.ras-bento__custom-cta:hover { background: var(--color-neutral-200); color: var(--color-accent-800); }

/* Product grid */
.ras-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ras-view-kit { gap: 6px; }

.ras-shop__more { text-align: center; margin-top: 40px; }
.ras-shop__more-btn { padding: 14px 30px; font-size: 15px; }

.ras-shop__empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-surface);
  border-radius: 26px;
}
.ras-shop__empty h3 { font-size: 22px; margin: 0 0 8px; }
.ras-shop__empty p { font-size: 15px; color: var(--color-neutral-700); margin: 0 0 18px; }

/* Help band */
.ras-help-band { max-width: var(--container); margin: 0 auto; padding: 20px 28px 80px; }
.ras-help-band__inner {
  background: var(--color-accent-2-100);
  border-radius: 32px;
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.ras-help-band__inner h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 8px; line-height: 1.05; }
.ras-help-band__inner p { font-size: 16px; color: var(--color-neutral-800); margin: 0; }

/* ==========================================================================
   10. Product detail
   ========================================================================== */

.ras-product__hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 28px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: start;
}

/* Gallery */
.ras-gallery-blob { position: relative; }
.ras-gallery-blob__main {
  position: relative;
  border-radius: 46% 54% 52% 48% / 52% 48% 54% 46%;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--color-surface);
}
.ras-gallery-blob__main img { width: 100%; height: 100%; object-fit: cover; }
.ras-gallery-blob__thumbs { display: flex; gap: 14px; margin-top: 18px; }
.ras-gallery-blob__thumb {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: transform .16s ease, border-color .16s ease;
}
.ras-gallery-blob__thumb:hover { transform: translateY(-3px); }
.ras-gallery-blob__thumb.is-active { border-color: var(--color-accent); }

/* Buy panel */
.ras-product__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ras-product__theme { font-size: 14px; color: var(--color-accent-2-700); }
.ras-product__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-neutral-400);
}
.ras-product__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-accent);
  text-decoration: none;
}
.ras-product__rating span { font-size: 14px; color: var(--color-neutral-800); }

.ras-product__title {
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.ras-product__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 0 22px;
  max-width: 460px;
}

.ras-product__pricing { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.ras-product__price { font-family: var(--font-heading); font-size: 34px; }
.ras-product__price del {
  font-size: 15px;
  color: var(--color-neutral-600);
  text-decoration: line-through;
  margin-right: 4px;
}
.ras-product__price ins { text-decoration: none; }
.ras-product__save {
  font-size: 13px;
  color: var(--color-accent-2-800);
  background: var(--color-accent-2-100);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Variations */
.ras-variations { display: flex; flex-direction: column; gap: 22px; margin-bottom: 26px; }
.ras-variation__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.ras-variation__head h3 { font-size: 16px; margin: 0; }
.ras-variation__value { font-size: 14px; color: var(--color-accent-700); font-family: var(--font-heading); }
.ras-variation__select select {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}
.ras-variation__reset { font-size: 13px; color: var(--color-accent-700); }

.ras-palette { display: flex; gap: 12px; flex-wrap: wrap; }
.ras-palette__swatch {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 18px;
  background: var(--color-surface);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.ras-palette__swatch:hover { transform: translateY(-3px); }
.ras-palette__swatch.is-active { border-color: var(--color-accent); }
.ras-palette__chip { width: 18px; height: 18px; border-radius: 999px; display: block; }

/* Quantity + add to cart */
.ras-buy {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ras-buy .ras-qty { background: var(--color-surface); padding: 5px; }
.ras-buy .ras-qty button { width: 42px; height: 42px; }
.ras-buy .ras-qty input { width: 44px; font-family: var(--font-heading); font-size: 20px; }
.ras-buy__submit {
  flex: 1;
  min-width: 220px;
  justify-content: center;
  padding: 15px 26px;
  font-size: 16px;
  gap: 10px;
}
.ras-buy__sep { opacity: .8; }
.ras-buy__total { font-family: var(--font-heading); }

.ras-product__wa {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 15px;
  gap: 9px;
  margin-bottom: 26px;
}

/* WooCommerce variation price block, folded into the pricing row */
.woocommerce-variation-price {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 16px;
}
.woocommerce-variation-availability { font-size: 14px; color: var(--color-neutral-700); margin-bottom: 12px; }
.woocommerce-variation-description { font-size: 15px; color: var(--color-neutral-800); }

/* Quick facts */
.ras-quickfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ras-quickfacts__item {
  background: var(--color-accent-100);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ras-quickfacts__item span { display: flex; color: var(--color-accent-700); flex-shrink: 0; }
.ras-quickfacts__item h4 {
  font-size: 14px;
  line-height: 1.25;
  margin: 0;
  color: var(--color-accent-900);
}

/* What's in the box */
.ras-inbox__title { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 8px; line-height: 1.03; }
.ras-inbox__lede { margin: 0 0 40px; color: var(--color-neutral-700); font-size: 16px; }
.ras-inbox__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.ras-inbox__item { text-align: center; }
.ras-inbox__icon {
  width: 96px;
  height: 96px;
  background: var(--color-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--color-accent);
}
.ras-inbox__item h4 { font-size: 16px; margin: 0 0 2px; }
.ras-inbox__item p { font-size: 13px; color: var(--color-neutral-700); margin: 0; }

/* Story */
.ras-story {
  max-width: var(--container);
  margin: 0 auto;
  padding: 70px 28px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: start;
}
.ras-story__media { position: sticky; top: 20px; height: 460px; }
.ras-story__blob {
  position: absolute;
  inset: 0;
  border-radius: 42% 58% 60% 40% / 48% 52% 48% 52%;
  overflow: hidden;
}
.ras-story__blob img { width: 100%; height: 100%; object-fit: cover; }
.ras-story__copy h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; margin: 0 0 18px; }
.ras-story__prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  margin: 0 0 30px;
  max-width: 520px;
}
.ras-story__prose p { margin: 0 0 16px; }
.ras-accordions { display: flex; flex-direction: column; gap: 12px; }
.ras-accordions .ras-faq__item summary { font-size: 18px; }

/* Related */
.ras-related { max-width: var(--container); margin: 0 auto; padding: 70px 28px 20px; }
.ras-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.ras-related__head h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0; line-height: 1.03; }
.ras-related__all {
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ras-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 4px 0 16px; }
.ras-related__card {
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border-radius: 26px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: block;
}
.ras-related__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: inherit; }
.ras-related__media { height: 200px; position: relative; overflow: hidden; }
.ras-related__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-related__age {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--color-bg);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--color-accent-800);
}
.ras-related__body { padding: 18px 20px 22px; }
.ras-related__theme { font-size: 12px; color: var(--color-accent-2-700); }
.ras-related__body h3 { font-size: 18px; margin: 4px 0 10px; }
.ras-related__price { font-family: var(--font-heading); font-size: 19px; }
.ras-related__price del { opacity: .5; font-size: 15px; margin-right: 5px; }
.ras-related__price ins { text-decoration: none; }

.ras-help-band--product { padding-top: 30px; }

/* Reviews, styled against woocommerce/single-product-reviews.php */
.ras-reviews { background: var(--color-accent-100); }
.ras-reviews__inner { max-width: var(--container); margin: 0 auto; padding: 66px 28px; }
.ras-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.ras-reviews__score { display: flex; align-items: center; gap: 12px; }
.ras-reviews__stars { display: flex; gap: 3px; color: var(--color-accent); }
.ras-reviews__avg { font-family: var(--font-heading); font-size: 20px; }
.ras-reviews__count { font-size: 14px; color: var(--color-neutral-700); }

.ras-reviews__grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ras-reviews__grid > li { background: var(--color-bg); border-radius: 26px; padding: 28px; }
.ras-reviews__grid .comment_container { display: block; }
.ras-reviews__grid .avatar { display: none; }
.ras-reviews__grid .meta { margin: 0 0 12px; font-size: 13px; color: var(--color-neutral-600); }
.ras-reviews__grid .woocommerce-review__author {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-text);
  font-style: normal;
}
.ras-reviews__grid .woocommerce-review__dash { display: none; }
.ras-reviews__grid .description p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0;
}
.ras-reviews__form { max-width: 640px; }
.ras-reviews__form .comment-reply-title {
  font-family: var(--font-heading);
  font-size: 22px;
  display: block;
  margin-bottom: 18px;
}
.ras-reviews__form .comment-form { display: flex; flex-direction: column; gap: 16px; }
.ras-reviews__form .comment-form .form-submit { margin: 0; }
.ras-reviews__form select {
  width: 100%;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
}
.ras-reviews__pagination { margin-bottom: 32px; }
.ras-reviews__pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }

@media (max-width: 900px) {
  .ras-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ras-reviews__grid { grid-template-columns: 1fr; }
  .ras-reviews__inner { padding: 52px 18px; }
}

/* 404 */
.ras-404 {
  max-width: 620px;
  margin: 0 auto;
  padding: 80px 28px 100px;
  text-align: center;
}
.ras-404__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  margin: 0 auto 26px;
}
.ras-404 h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; margin: 0 0 14px; }
.ras-404 p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 0 28px;
}
.ras-404__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Search form */
.ras-searchform { display: flex; gap: 10px; }
.ras-searchform input[type="search"] {
  flex: 1;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
}
.ras-searchform input[type="search"]:focus { border-color: var(--color-accent); }

.ras-product__was {
  font-size: 15px;
  color: var(--color-neutral-600);
  text-decoration: line-through;
}

/* ==========================================================================
   11. Cart
   ========================================================================== */

.ras-page-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: 30px 28px 80px;
}
.ras-page-title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 24px;
}
.ras-prose { font-size: 17px; line-height: 1.7; color: var(--color-neutral-800); }
.ras-prose h2 { font-size: clamp(26px, 3vw, 34px); margin: 44px 0 16px; color: var(--color-text); }
.ras-prose h3 { font-size: 22px; margin: 32px 0 12px; color: var(--color-text); }
.ras-prose ul, .ras-prose ol { padding-left: 22px; margin: 0 0 20px; }
.ras-prose li { margin-bottom: 8px; }

.ras-cart__title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.ras-cart {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 44px;
  align-items: start;
  margin-top: 24px;
}

.ras-cart__items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--color-neutral-700);
}
.ras-cart__continue {
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ras-cart__list { display: flex; flex-direction: column; gap: 14px; }

.ras-cart-item {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 16px;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
}
.ras-cart-item__thumb {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  overflow: hidden;
  flex: none;
  background: var(--color-bg);
}
.ras-cart-item__thumb a, .ras-cart-item__thumb img { display: block; width: 100%; height: 100%; }
.ras-cart-item__thumb img { object-fit: cover; }
.ras-cart-item__body { min-width: 0; }
.ras-cart-item__name { font-size: 19px; margin: 0 0 4px; line-height: 1.15; }
.ras-cart-item__name a { color: var(--color-text); text-decoration: none; }
.ras-cart-item__name a:hover { color: var(--color-accent-700); }
.ras-cart-item__variant {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-bottom: 12px;
}
.ras-cart-item__variant p { margin: 0; }
.ras-cart-item__variant dl { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ras-cart-item__variant dt { margin: 0; font-weight: 600; }
.ras-cart-item__variant dd { margin: 0; }
.ras-cart-item__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ras-cart-item__controls .ras-qty {
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
}
.ras-cart-item__controls .ras-qty input { width: 30px; min-width: 22px; }
.ras-cart-item__remove {
  font-size: 13px;
  color: var(--color-neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ras-cart-item__remove:hover { color: var(--color-accent-700); }
.ras-cart-item__price {
  text-align: right;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ras-cart-item__line { font-family: var(--font-heading); font-size: 19px; }
.ras-cart-item__unit { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 2px; }

/* Summary card, shared by cart and checkout */
.ras-cart__summary { position: sticky; top: 20px; }
.ras-summary {
  background: var(--color-surface);
  border-radius: 30px;
  padding: 30px;
}
.ras-summary__freeship { margin-bottom: 26px; }
.ras-summary__freeship-msg {
  font-size: 14px;
  color: var(--color-neutral-800);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ras-summary__track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  overflow: hidden;
}
.ras-summary__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent-2-600);
  transition: width .3s ease;
}
.ras-summary__rows { display: flex; flex-direction: column; gap: 13px; font-size: 15px; }
.ras-summary__row { display: flex; justify-content: space-between; gap: 16px; }
.ras-summary__row > span:first-child { color: var(--color-neutral-800); }
.ras-summary__row--discount { color: var(--color-accent-2-800); }
.ras-summary__row--discount > span:first-child { color: var(--color-accent-2-800); }
.ras-summary__row--discount a { color: var(--color-accent-2-800); font-size: 12px; }
.ras-summary__row--shipping ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ras-summary__row--shipping label { cursor: pointer; }
.ras-summary__divider { height: 1px; background: var(--color-neutral-300); margin: 20px 0; }
.ras-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 22px;
}
.ras-summary__total-value { font-size: 26px; color: var(--color-accent-800); }
.ras-summary__total-value .amount { font-family: var(--font-heading); }
.ras-summary__eta {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ras-summary__coupon { display: flex; gap: 8px; margin-bottom: 18px; }
.ras-summary__coupon-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
}
.ras-summary__coupon-input:focus { border-color: var(--color-accent); }
.ras-summary__coupon-apply { padding: 12px 20px; background: var(--color-bg); }
.ras-summary__checkout {
  width: 100%;
  padding: 17px 24px;
  font-size: 17px;
  justify-content: center;
  gap: 8px;
}
.ras-summary__trust { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ras-summary__trust .ras-trust__item { font-size: 13.5px; color: var(--color-neutral-800); }

/* Empty cart */
.ras-cart-empty {
  text-align: center;
  padding: 80px 20px 100px;
  max-width: 460px;
  margin: 0 auto;
}
.ras-cart-empty__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  margin: 0 auto 24px;
}
.ras-cart-empty h2 { font-size: 30px; margin: 0 0 12px; }
.ras-cart-empty p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 0 26px;
}

/* ==========================================================================
   12. Checkout
   ========================================================================== */

.ras-checkout__title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 24px;
}

.ras-checkout__cols {
  display: grid;
  grid-template-columns: 1.4fr 0.95fr;
  gap: 48px;
  align-items: start;
}
.ras-checkout__main { display: flex; flex-direction: column; gap: 34px; }
.ras-checkout__aside { position: sticky; top: 20px; }

/* Guest / login bar */
.ras-checkout__guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-surface);
  border-radius: 18px;
  padding: 15px 20px;
  flex-wrap: wrap;
}
.ras-checkout__guest-note {
  font-size: 15px;
  color: var(--color-neutral-800);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ras-checkout__guest-login {
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ras-checkout__customer { display: flex; flex-direction: column; gap: 34px; }
.ras-checkout__section h2 { font-size: 22px; margin: 0 0 16px; }
.ras-checkout__section h2 span {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-neutral-600);
  font-family: var(--font-body);
}
.ras-checkout__stack { display: flex; flex-direction: column; gap: 16px; }
.ras-checkout__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ras-checkout__grid-3 { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: 16px; }

/* WooCommerce form rows, styled as the design's fields */
.ras-checkout .form-row,
.ras-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.ras-checkout .form-row label,
.ras-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.ras-checkout .form-row .required { color: var(--color-accent-700); text-decoration: none; border: 0; }
.ras-checkout .form-row .optional { color: var(--color-neutral-600); font-weight: 400; }

.ras-checkout input[type="text"],
.ras-checkout input[type="email"],
.ras-checkout input[type="tel"],
.ras-checkout input[type="password"],
.ras-checkout input[type="number"],
.ras-checkout textarea,
.ras-checkout select,
.ras-checkout .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-surface);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  height: auto;
  transition: border-color .2s ease;
}
.ras-checkout input:focus,
.ras-checkout textarea:focus,
.ras-checkout select:focus { border-color: var(--color-accent); }
.ras-checkout textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.ras-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  color: var(--color-text);
}
.ras-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }

/* Account creation */
.ras-checkout__account-check,
.ras-checkout__ship-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  margin-top: 16px;
}
.ras-checkout__account-check input,
.ras-checkout__ship-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  flex: none;
}
.ras-checkout__account-check span,
.ras-checkout__ship-toggle span {
  font-size: 14.5px;
  color: var(--color-neutral-800);
  line-height: 1.45;
}
.ras-checkout__account-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-width: 340px;
}
.ras-checkout__account-hint { font-size: 12.5px; color: var(--color-neutral-600); }
.ras-checkout__shipping-address { margin-top: 8px; }

/* Radio rows: delivery methods and payment gateways */
.ras-checkout__methods,
.ras-checkout .wc_payment_methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ras-radio-row {
  text-align: left;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s ease;
}
.ras-radio-row:hover { border-color: var(--color-accent); }
.ras-radio-row.is-selected { border-color: var(--color-accent); }
.ras-radio-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ras-radio-row__dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--color-neutral-400);
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color .2s ease;
}
.ras-radio-row__dot::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity .15s ease;
}
.ras-radio-row.is-selected .ras-radio-row__dot { border-color: var(--color-accent); }
.ras-radio-row.is-selected .ras-radio-row__dot::after { opacity: 1; }
.ras-radio-row:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ras-radio-row__body { flex: 1; min-width: 0; }
.ras-radio-row__title { display: block; font-size: 16px; font-weight: 600; }
.ras-radio-row__note { display: block; font-size: 13px; color: var(--color-neutral-600); }
.ras-radio-row__price { font-family: var(--font-heading); font-size: 16px; }
.ras-radio-row__icon img { display: inline-block; max-height: 22px; width: auto; }

.ras-payment-box {
  background: var(--color-accent-100);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.ras-payment-box p:last-child { margin-bottom: 0; }
.ras-payment-box input[type="text"],
.ras-payment-box input[type="tel"],
.ras-payment-box .wc-credit-card-form-card-number,
.ras-payment-box .wc-credit-card-form-card-expiry,
.ras-payment-box .wc-credit-card-form-card-cvc {
  background: var(--color-bg);
  border-radius: 14px;
  padding: 13px 15px;
}

.ras-checkout__no-shipping {
  background: var(--color-accent-100);
  border-radius: 18px;
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--color-accent-900);
  margin: 0;
}

/* Summary card on checkout */
.ras-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.ras-summary__head h2 { font-size: 20px; margin: 0; }
.ras-summary__head a { font-size: 13px; text-decoration: none; }

.ras-summary__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ras-summary__item { display: flex; align-items: center; gap: 12px; }
.ras-summary__item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  position: relative;
  background: var(--color-bg);
}
.ras-summary__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ras-summary__item-body { flex: 1; min-width: 0; }
.ras-summary__item-name { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ras-summary__item-meta { font-size: 12.5px; color: var(--color-neutral-600); }
.ras-summary__item-price { font-size: 14.5px; white-space: nowrap; }

.ras-summary__place { margin-top: 20px; }
.ras-summary__place .place-order { margin: 0; padding: 0; }
.ras-summary__place #place_order,
.ras-checkout #place_order {
  width: 100%;
  box-sizing: border-box;
  padding: 17px 24px;
  font-size: 17px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .2s ease;
}
.ras-summary__place #place_order:hover,
.ras-checkout #place_order:hover { background: var(--color-accent-600); }
.ras-summary__place .woocommerce-terms-and-conditions-wrapper {
  font-size: 13px;
  color: var(--color-neutral-700);
  margin-bottom: 14px;
}
.ras-summary__place .woocommerce-privacy-policy-text p { font-size: 12.5px; margin-bottom: 10px; }

.ras-checkout__help {
  text-align: center;
  font-size: 13px;
  color: var(--color-neutral-600);
  margin: 16px 0 0;
}
.ras-checkout__help a { text-decoration: none; }

/* WooCommerce notices */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 22px;
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.woocommerce-message { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.woocommerce-info    { background: var(--color-accent-100);   color: var(--color-accent-900); }
.woocommerce-error   { background: var(--color-accent-200);   color: var(--color-accent-900); }
.woocommerce-error li { margin-bottom: 4px; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { background: var(--color-accent-600); color: var(--color-bg); }

.blockUI.blockOverlay { background: var(--color-bg) !important; opacity: .6 !important; border-radius: 24px; }

/* ==========================================================================
   13. Thank you / order received
   ========================================================================== */

@keyframes okin { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }

.ras-thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 28px 10px;
  text-align: center;
}
.ras-thanks__check {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  margin: 0 auto 26px;
  animation: okin .35s ease;
}
.ras-thanks__title {
  font-size: clamp(38px, 5vw, 62px);
  line-height: .99;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.ras-thanks__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 auto 8px;
  max-width: 480px;
}
.ras-thanks__ref { font-size: 15px; color: var(--color-neutral-700); margin: 0; }

/* Tracker */
.ras-tracker { max-width: 720px; margin: 0 auto; padding: 34px 28px 10px; }
.ras-tracker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  position: relative;
}
.ras-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
}
.ras-tracker__node {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 2px solid var(--color-neutral-300);
  color: var(--color-neutral-600);
  display: grid;
  place-items: center;
  z-index: 2;
}
.ras-tracker__step.is-done .ras-tracker__node {
  background: var(--color-accent-2-600);
  border-color: var(--color-accent-2-600);
  color: var(--color-bg);
}
.ras-tracker__line {
  position: absolute;
  top: 22px;
  left: 50%;
  right: -50%;
  height: 3px;
  background: var(--color-neutral-300);
}
.ras-tracker__step.is-done .ras-tracker__line { background: var(--color-accent-2-400); }
.ras-tracker__label { font-size: 15px; color: var(--color-neutral-700); }
.ras-tracker__step.is-done .ras-tracker__label { font-weight: 600; color: var(--color-text); }

/* Order details */
.ras-orderdetails { max-width: 720px; margin: 0 auto; padding: 34px 28px 20px; }
.ras-orderdetails__card {
  background: var(--color-surface);
  border-radius: 30px;
  padding: 32px;
}
.ras-orderdetails__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.ras-orderdetails__label { font-size: 13px; color: var(--color-neutral-600); margin-bottom: 6px; }
.ras-orderdetails__value { font-size: 15px; line-height: 1.55; }
.ras-orderdetails__value--gap { margin-bottom: 16px; }
.ras-orderdetails__value address { font-style: normal; }

.ras-orderdetails__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0;
}
.ras-orderdetails__item { display: flex; align-items: center; gap: 14px; }
.ras-orderdetails__thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  background: var(--color-bg);
}
.ras-orderdetails__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ras-orderdetails__item-body { flex: 1; min-width: 0; }
.ras-orderdetails__item-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.ras-orderdetails__item-meta { font-size: 12.5px; color: var(--color-neutral-600); }
.ras-orderdetails__item-price { font-size: 15px; white-space: nowrap; }

.ras-orderdetails__totals { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.ras-orderdetails__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--color-neutral-300);
  font-family: var(--font-heading);
  font-size: 20px;
}
.ras-orderdetails__total-value { font-size: 23px; color: var(--color-accent-800); }

.ras-orderdetails__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}
.ras-orderdetails__action { padding: 14px 26px; font-size: 15px; }

/* Order bump */
.ras-bump { max-width: var(--container); margin: 0 auto; padding: 60px 28px 40px; }
.ras-bump__head { text-align: center; max-width: 520px; margin: 0 auto 36px; }
.ras-bump__head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.02; margin: 0 0 10px; }
.ras-bump__head p { font-size: 16px; color: var(--color-neutral-700); margin: 0; }
.ras-bump__unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14.5px;
  margin: 0 auto 26px;
  width: fit-content;
}
.ras-bump__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ras-bump__card { background: var(--color-surface); border-radius: 28px; overflow: hidden; }
.ras-bump__media { display: block; height: 180px; overflow: hidden; }
.ras-bump__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-bump__body { padding: 18px 20px 20px; }
.ras-bump__body h3 { font-size: 18px; margin: 0 0 4px; line-height: 1.15; }
.ras-bump__price {
  font-size: 15px;
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  margin-bottom: 14px;
}
.ras-bump__price del { opacity: .5; font-size: 13px; margin-right: 5px; }
.ras-bump__price ins { text-decoration: none; }
.ras-bump__add {
  width: 100%;
  box-sizing: border-box;
  padding: 11px;
  font-size: 14px;
  background: var(--color-bg);
  justify-content: center;
  gap: 7px;
}
.ras-bump__add:hover { background: var(--color-neutral-200); }

.ras-bump__done {
  text-align: center;
  background: var(--color-accent-2-100);
  border-radius: 24px;
  padding: 40px 28px;
}
.ras-bump__done-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  margin-bottom: 14px;
}
.ras-bump__done p { font-size: 17px; color: var(--color-neutral-800); margin: 0; }

/* Confirmation dialog for the order bump.
   Adding to a placed order is one-way from the front end, so the customer
   confirms and sees the resulting total first. */
@keyframes ras-confirm-in { 0% { opacity: 0; transform: translateY(10px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.ras-confirm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--color-neutral-900) 52%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ovbg .18s ease;
}
.ras-confirm__panel {
  width: min(440px, 100%);
  background: var(--color-bg);
  border-radius: 30px;
  padding: 30px;
  box-shadow: var(--shadow-lg);
  animation: ras-confirm-in .2s cubic-bezier(.2, .9, .3, 1);
}
.ras-confirm__title {
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 20px;
}
.ras-confirm__rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-neutral-300);
  margin-bottom: 16px;
}
.ras-confirm__row { display: flex; justify-content: space-between; gap: 16px; }
.ras-confirm__row > span:first-child { color: var(--color-neutral-800); }
.ras-confirm__row--total {
  font-family: var(--font-heading);
  font-size: 19px;
  padding-top: 12px;
  border-top: 1px solid var(--color-neutral-300);
}
.ras-confirm__row--total > span:last-child { color: var(--color-accent-800); font-size: 22px; }
.ras-confirm__unlock {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  margin: 0 0 16px;
}
.ras-confirm__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-neutral-700);
  margin: 0 0 22px;
}
.ras-confirm__actions { display: flex; gap: 10px; }
.ras-confirm__cancel,
.ras-confirm__ok { flex: 1; justify-content: center; padding: 14px 20px; font-size: 15px; }
.ras-confirm__cancel { background: var(--color-surface); }

@media (max-width: 640px) {
  .ras-confirm__panel { padding: 24px; border-radius: 24px; }
  .ras-confirm__actions { flex-direction: column-reverse; }
}

/* ==========================================================================
   14. My account: login, dashboard, orders, addresses, details
   ========================================================================== */

/* Login */
.ras-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 24px 70px;
  position: relative;
  min-height: 60vh;
}
.ras-login__inner { width: 100%; max-width: 440px; position: relative; z-index: 2; }
.ras-login__head { text-align: center; margin-bottom: 28px; }
.ras-login__head h1 { font-size: clamp(34px, 4.4vw, 46px); line-height: 1; margin: 0 0 8px; }
.ras-login__head p { font-size: 15.5px; color: var(--color-neutral-700); margin: 0; }

.ras-login__card { background: var(--color-surface); border-radius: 30px; padding: 34px; }
.ras-login__tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--color-neutral-300);
  margin-bottom: 26px;
}
.ras-login__tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  padding: 0 0 14px;
  position: relative;
}
.ras-login__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .18s ease;
}
.ras-login__tab.is-active::after { opacity: 1; }

.ras-login__form { display: flex; flex-direction: column; gap: 18px; }
.ras-login__form .ras-field label { font-size: 14px; font-weight: 600; }
.ras-login__form input[type="text"],
.ras-login__form input[type="email"],
.ras-login__form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  transition: border-color .2s ease;
}
.ras-login__form input:focus { border-color: var(--color-accent); }

.ras-login__pw { position: relative; }
.ras-login__pw input { padding-right: 48px !important; }
.ras-login__pw button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.ras-login__pw button:hover { color: var(--color-text); }
.ras-login__pw button.is-shown { color: var(--color-accent-700); }

.ras-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ras-login__row a { font-size: 14px; text-decoration: none; }
.ras-login__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-neutral-800);
  cursor: pointer;
}
.ras-login__remember input { width: 17px; height: 17px; accent-color: var(--color-accent); }
.ras-login__submit {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 24px;
  font-size: 16px;
  justify-content: center;
  margin-top: 4px;
}
.ras-login__note { font-size: 13.5px; color: var(--color-neutral-700); margin: 0; }
.ras-login__terms {
  font-size: 12.5px;
  color: var(--color-neutral-600);
  text-align: center;
  margin: 18px 0 0;
  line-height: 1.5;
}
.ras-login__terms a { text-decoration: none; }
.ras-login__guest {
  text-align: center;
  font-size: 14px;
  color: var(--color-neutral-700);
  margin: 22px 0 0;
}
.ras-login__guest a { text-decoration: none; }

/* Account shell */
.ras-account__title {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 28px;
}
.ras-account {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}
.ras-account__content { min-width: 0; }

.ras-account__nav {
  background: var(--color-surface);
  border-radius: 26px;
  padding: 22px;
  position: sticky;
  top: 20px;
}
.ras-account__user {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 6px 6px 18px;
  border-bottom: 1px solid var(--color-neutral-200);
  margin-bottom: 14px;
}
.ras-account__avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--color-accent-600);
  color: var(--color-bg);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 19px;
  flex: none;
}
.ras-account__user-text { min-width: 0; }
.ras-account__user-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.ras-account__user-email {
  font-size: 12.5px;
  color: var(--color-neutral-600);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ras-account__nav nav { display: flex; flex-direction: column; gap: 4px; }
.ras-account__link {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .2s ease;
}
.ras-account__link:hover { background: var(--color-accent-100); color: var(--color-text); }
.ras-account__link.is-active { background: var(--color-accent-100); }
.ras-account__link--logout { color: var(--color-neutral-700); margin-top: 6px; }
.ras-account__link--logout:hover { color: var(--color-accent-700); background: transparent; }

.ras-account__heading { font-size: 26px; margin: 0 0 6px; }
.ras-account__subheading { font-size: 17px; margin: 0; }
.ras-account__intro { font-size: 15px; color: var(--color-neutral-700); margin: 0 0 26px; }

/* Latest order band */
.ras-account__latest {
  background: var(--color-accent-2-700);
  border-radius: 26px;
  padding: 28px;
  margin: 20px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ras-account__latest-label { font-size: 13px; color: var(--color-accent-2-100); margin-bottom: 6px; }
.ras-account__latest-status { font-family: var(--font-heading); font-size: 24px; color: var(--color-bg); }
.ras-account__latest-cta { padding: 12px 22px; font-size: 15px; }

/* Quick-link tiles */
.ras-account__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ras-account__tile {
  text-align: left;
  background: var(--color-surface);
  border: none;
  border-radius: 22px;
  padding: 24px;
  text-decoration: none;
  color: var(--color-text);
  display: block;
  transition: background .2s ease;
}
.ras-account__tile:hover { background: var(--color-neutral-200); color: var(--color-text); }
.ras-account__tile-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ras-account__tile-icon--a { background: var(--color-accent-100);   color: var(--color-accent-700); }
.ras-account__tile-icon--b { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.ras-account__tile-title { font-family: var(--font-heading); font-size: 18px; margin-bottom: 3px; }
.ras-account__tile-note { font-size: 13.5px; color: var(--color-neutral-700); }

/* Orders table */
.ras-orders {
  background: var(--color-surface);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 20px;
}
.ras-orders__head,
.ras-orders__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 0.9fr 0.8fr;
  gap: 12px;
  padding: 18px 24px;
  align-items: center;
  border-bottom: 1px solid var(--color-neutral-200);
}
.ras-orders__head {
  padding: 16px 24px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-neutral-600);
}
.ras-orders__row { font-size: 14.5px; }
.ras-orders__row:last-child { border-bottom: none; }
.ras-orders__id { font-weight: 600; }
.ras-orders__date { color: var(--color-neutral-800); }
.ras-orders__status { display: inline-flex; align-items: center; gap: 7px; }
.ras-orders__dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.ras-orders__view { text-decoration: none; font-size: 14px; justify-self: end; }
.ras-orders__pagination { display: flex; gap: 10px; margin-top: 20px; }

.ras-account__empty {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 56px 28px;
  text-align: center;
  margin-top: 20px;
}
.ras-account__empty h3 { font-size: 22px; margin: 0 0 8px; }
.ras-account__empty p { font-size: 15px; color: var(--color-neutral-700); margin: 0 0 20px; }

/* Addresses */
.ras-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ras-address-card { background: var(--color-surface); border-radius: 24px; padding: 26px; }
.ras-address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.ras-address-card__head h3 { font-size: 18px; margin: 0; }
.ras-address-card__edit {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-accent-700);
  text-decoration: none;
}
.ras-address-card__edit:hover { color: var(--color-accent-800); }
.ras-address-card__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-800);
  font-style: normal;
}

/* Address + account details forms */
.ras-address-form-card {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 30px;
  max-width: 620px;
  margin-top: 20px;
}
.ras-account__form { display: flex; flex-direction: column; gap: 18px; }
.ras-account__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ras-account__form .ras-field,
.ras-account__form .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ras-account__form label { font-size: 14px; font-weight: 600; }
.ras-account__form input[type="text"],
.ras-account__form input[type="email"],
.ras-account__form input[type="tel"],
.ras-account__form input[type="password"],
.ras-account__form select,
.ras-account__form .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 16px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  height: auto;
  transition: border-color .2s ease;
}
.ras-account__form input:focus, .ras-account__form select:focus { border-color: var(--color-accent); }
.ras-account__form .form-row-wide { grid-column: 1 / -1; }
.ras-account__divider { height: 1px; background: var(--color-neutral-200); margin: 6px 0; }
.ras-account__hint { font-size: 12.5px; color: var(--color-neutral-600); }
.ras-account__form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ras-account__form-actions .btn { padding: 14px 26px; font-size: 15px; }

/* Endpoint pages we do not restyle individually still read as the theme. */
.woocommerce-MyAccount-content > p { font-size: 15.5px; color: var(--color-neutral-800); }
.woocommerce-MyAccount-content .woocommerce-Address-title { margin-bottom: 12px; }

/* ==========================================================================
   15. Our Story
   ========================================================================== */

.ras-story-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px 28px 60px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.ras-story-hero__copy { position: relative; z-index: 2; }
.ras-story-hero__title {
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: .99;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.ras-story-hero__lede {
  font-size: 18px;
  line-height: 1.65;
  max-width: 490px;
  margin: 0 0 30px;
  color: var(--color-neutral-800);
}
.ras-story-hero__media { position: relative; height: 500px; }
.ras-story-hero__blob {
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 58% 42% / 52% 44% 56% 48%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ras-story-hero__blob img { width: 100%; height: 100%; object-fit: cover; }

/* Origin */
.ras-origin {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 28px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: center;
}
.ras-origin__media { position: relative; }
.ras-origin__blob {
  border-radius: 42% 58% 46% 54% / 56% 48% 52% 44%;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ras-origin__badge {
  position: absolute;
  bottom: -14px;
  right: 24px;
  background: var(--color-surface);
  border-radius: 22px;
  padding: 14px 20px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-accent-800);
  transform: rotate(-3deg);
}
.ras-origin__copy h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; margin: 0 0 20px; }
.ras-origin__copy p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-neutral-800);
  margin: 0 0 16px;
  max-width: 560px;
}
.ras-origin__copy p:last-child { margin-bottom: 0; }

/* Values */
.ras-values { max-width: var(--container); margin: 0 auto; padding: 64px 28px 40px; }
.ras-values__head { max-width: 560px; margin-bottom: 38px; }
.ras-values__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; margin: 0 0 12px; }
.ras-values__head p { font-size: 16px; color: var(--color-neutral-700); margin: 0; }
.ras-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ras-value { background: var(--color-surface); border-radius: 30px; padding: 30px 28px 32px; }
.ras-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ras-value__icon--a { background: var(--color-accent-200);   color: var(--color-accent-700); }
.ras-value__icon--b { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.ras-value h3 { font-size: 22px; margin: 0 0 10px; }
.ras-value p { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; }

/* Timeline */
.ras-timeline { max-width: var(--container); margin: 0 auto; padding: 40px 28px; }
.ras-timeline__head { max-width: 560px; margin-bottom: 38px; }
.ras-timeline__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; margin: 0 0 12px; }
.ras-timeline__head p { font-size: 16px; color: var(--color-neutral-700); margin: 0; }
.ras-timeline__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ras-milestone { position: relative; }
.ras-milestone__head {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  position: relative;
}
.ras-milestone__year {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-bg);
  flex: none;
  z-index: 2;
}
.ras-milestone__year--a { background: var(--color-accent-600); }
.ras-milestone__year--b { background: var(--color-accent-2-600); }
.ras-milestone__line {
  flex: 1;
  height: 3px;
  background: var(--color-neutral-300);
  margin-right: -24px;
}
.ras-milestone h3 { font-size: 20px; margin: 0 0 8px; }
.ras-milestone p { font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }

/* Stats band */
.ras-stats { max-width: var(--container); margin: 0 auto; padding: 40px 28px; }
.ras-stats__band {
  background: var(--color-accent-800);
  border-radius: 40px;
  padding: 52px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  overflow: hidden;
}
.ras-stats__burst { position: absolute; border-radius: 999px; }
.ras-stats__burst--a {
  top: -30px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: var(--color-accent-700);
  opacity: .6;
}
.ras-stats__burst--b {
  bottom: -40px;
  right: 70px;
  width: 130px;
  height: 130px;
  background: var(--color-accent-900);
  opacity: .5;
}
.ras-stat { position: relative; z-index: 2; }
.ras-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4vw, 52px);
  color: var(--color-bg);
  line-height: 1;
}
.ras-stat__label { font-size: 15px; color: var(--color-accent-200); margin-top: 8px; }

/* From our journal */
.ras-journal-preview {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 28px 40px;
  scroll-margin-top: 20px;
}
.ras-journal-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.ras-journal-preview__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; margin: 0 0 12px; }
.ras-journal-preview__head p { font-size: 16px; color: var(--color-neutral-700); margin: 0; }
.ras-journal-preview__all { padding: 12px 20px; }
.ras-journal-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ras-journal-preview__card {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ras-journal-preview__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.ras-journal-preview__media { height: 210px; overflow: hidden; }
.ras-journal-preview__media img { width: 100%; height: 100%; object-fit: cover; }
.ras-journal-preview__body { padding: 22px 24px 26px; }
.ras-journal-preview__meta { font-size: 13px; color: var(--color-neutral-600); margin-bottom: 10px; }
.ras-journal-preview__body h3 { font-size: 21px; margin: 0 0 8px; line-height: 1.15; }
.ras-journal-preview__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 0 14px;
}
.ras-journal-preview__body .ras-read { margin-top: 0; }

/* Closing CTA band */
.ras-cta-band { max-width: var(--container); margin: 0 auto; padding: 40px 28px 72px; }
.ras-cta-band__inner {
  background: var(--color-accent-2-700);
  border-radius: 40px;
  padding: 60px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ras-cta-band__burst { position: absolute; border-radius: 999px; }
.ras-cta-band__burst--a {
  top: 30px;
  left: 60px;
  width: 40px;
  height: 40px;
  background: var(--color-accent-2-600);
  animation: floaty 6s ease-in-out infinite;
}
.ras-cta-band__burst--b {
  bottom: 30px;
  right: 70px;
  width: 28px;
  height: 28px;
  background: var(--color-accent-400);
  animation: floaty2 7s ease-in-out infinite;
}
.ras-cta-band__inner h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.02;
  margin: 0 0 14px;
  color: var(--color-bg);
  position: relative;
  z-index: 2;
}
.ras-cta-band__inner p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-accent-2-100);
  max-width: 460px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 2;
}
.ras-cta-band__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   16. Journal listing and post
   ========================================================================== */

.ras-jmast { max-width: var(--container); margin: 0 auto; padding: 40px 28px 20px; }
.ras-jmast__title {
  font-size: clamp(48px, 6vw, 88px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.ras-jmast__lede {
  font-size: 19px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
  color: var(--color-neutral-800);
}

/* Featured post */
.ras-jfeat { max-width: var(--container); margin: 0 auto; padding: 30px 28px 20px; }
.ras-jfeat__link {
  text-decoration: none;
  color: var(--color-text);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.ras-jfeat__link:hover { color: var(--color-accent-800); }
.ras-jfeat__media {
  border-radius: 46% 54% 55% 45% / 54% 46% 54% 46%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ras-jfeat__label { font-size: 14px; color: var(--color-neutral-600); margin-bottom: 14px; }
.ras-jfeat__copy h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.02; margin: 0 0 18px; }
.ras-jfeat__copy p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-neutral-800);
  margin: 0 0 22px;
  max-width: 480px;
}
.ras-jfeat__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ras-jfeat__read { margin-top: 0; font-size: 16px; }
.ras-jfeat__meta { font-size: 13px; color: var(--color-neutral-600); }

/* Category tabs */
.ras-jgrid-wrap { max-width: var(--container); margin: 0 auto; padding: 40px 28px 20px; }
.ras-jtabs {
  display: flex;
  gap: 26px;
  align-items: center;
  border-bottom: 1px solid var(--color-neutral-300);
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.ras-jtab {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  padding: 0 0 14px;
  position: relative;
}
.ras-jtab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .18s ease;
}
.ras-jtab:hover { color: var(--color-accent-700); }
.ras-jtab.is-active { color: var(--color-text); }
.ras-jtab.is-active::after { opacity: 1; }

.ras-jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }

/* Pagination */
.ras-pagination { margin: 48px 0 0; }
.ras-pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ras-pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  transition: background .2s ease;
}
.ras-pagination .page-numbers:hover { background: var(--color-neutral-200); }
.ras-pagination .page-numbers.current { background: var(--color-accent); color: var(--color-bg); }
.ras-pagination .page-numbers.dots { background: transparent; }

/* Post */
.ras-post__header {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 28px 8px;
  text-align: center;
}
.ras-post__meta { font-size: 14px; color: var(--color-neutral-600); margin-bottom: 18px; }
.ras-post__title {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.ras-post__dek {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 auto 30px;
  max-width: 600px;
}
.ras-post__byline { display: inline-flex; align-items: center; gap: 12px; }
.ras-post__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-accent-600);
  color: var(--color-bg);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 18px;
  flex: none;
}
.ras-post__byline-text { text-align: left; }
.ras-post__byline-name { display: block; font-size: 15px; font-weight: 600; }
.ras-post__byline-role { display: block; font-size: 13px; color: var(--color-neutral-600); }

.ras-post__hero { max-width: 1000px; margin: 26px auto 0; padding: 0 28px; }
.ras-post__hero-frame { border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-md); }

/* Reading column */
.ras-post__body { max-width: 720px; margin: 0 auto; padding: 44px 28px 20px; }
.ras-post__body p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 24px;
}
.ras-post__body h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin: 44px 0 16px; }
.ras-post__body h3 { font-size: 24px; line-height: 1.15; margin: 34px 0 14px; }
.ras-post__body ul,
.ras-post__body ol {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 28px;
  padding-left: 22px;
}
.ras-post__body li { margin-bottom: 10px; }
.ras-post__body a { color: var(--color-accent-700); }

.ras-checklist {
  list-style: none;
  padding-left: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ras-checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.ras-checklist li > span { color: var(--color-accent); flex: none; margin-top: 4px; display: grid; }

.ras-post__body figure { margin: 0 0 28px; }
.ras-post__body figure img { border-radius: 24px; width: 100%; }
.ras-post__body figcaption {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-top: 10px;
  text-align: center;
}
.ras-post__body blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  color: var(--color-accent-900);
}
.ras-post__body blockquote p { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; }

/* In-content CTA banner */
.ras-inline-cta {
  background: var(--color-accent-2-700);
  border-radius: 28px;
  padding: 34px 32px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}
.ras-inline-cta__burst {
  position: absolute;
  top: -20px;
  right: 30px;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: var(--color-accent-2-600);
  opacity: .7;
}
.ras-inline-cta__inner { position: relative; z-index: 2; }
.ras-inline-cta__inner h3 { font-size: 26px; line-height: 1.1; margin: 0 0 10px; color: var(--color-bg); }
.ras-inline-cta__inner p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--color-accent-2-100) !important;
  margin: 0 0 22px !important;
  max-width: 420px;
}
.ras-inline-cta__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ras-inline-cta__btn { padding: 13px 24px; font-size: 15px; }

/* Author bio and back link */
.ras-post__foot { max-width: 720px; margin: 20px auto 0; padding: 0 28px; }
.ras-post__bio {
  background: var(--color-surface);
  border-radius: 26px;
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ras-post__bio-avatar {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--color-accent-600);
  color: var(--color-bg);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 24px;
  flex: none;
}
.ras-post__bio-name { font-family: var(--font-heading); font-size: 20px; margin-bottom: 4px; }
.ras-post__bio-role { font-size: 13px; color: var(--color-accent-700); margin-bottom: 10px; }
.ras-post__bio p { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; }
.ras-post__back { text-align: center; margin-top: 36px; }
.ras-post__back .btn { padding: 13px 24px; font-size: 15px; gap: 8px; }

/* Keep reading */
.ras-keepreading { max-width: var(--container); margin: 0 auto; padding: 56px 28px 40px; }
.ras-keepreading h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 30px; line-height: 1.03; }

/* ==========================================================================
   17. Contact
   ========================================================================== */

.ras-contact {
  max-width: var(--container);
  margin: 0 auto;
  padding: 44px 28px 80px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.ras-contact__title {
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.ras-contact__lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  margin: 0 0 40px;
  max-width: 440px;
}
.ras-contact__methods { display: flex; flex-direction: column; gap: 26px; }

.ras-method {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--color-text);
}
.ras-method:hover { color: var(--color-accent-700); }
.ras-method--static { cursor: default; }
.ras-method__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  flex: none;
}
.ras-method__icon--a { background: var(--color-accent-200);   color: var(--color-accent-700); }
.ras-method__icon--b { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.ras-method__label {
  display: block;
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-bottom: 2px;
}
.ras-method__value { display: block; font-family: var(--font-heading); font-size: 19px; }

.ras-contact__form-col { position: relative; }
.ras-contact__card {
  background: var(--color-surface);
  border-radius: 34px;
  padding: 40px;
  box-shadow: var(--shadow-md);
  position: relative;
}

.ras-contact-form,
.ras-contact__card .wpcf7-form,
.ras-contact__card .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ras-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ras-contact__card label,
.ras-contact__card .wpforms-field-label {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.ras-contact__card input[type="text"],
.ras-contact__card input[type="email"],
.ras-contact__card input[type="tel"],
.ras-contact__card textarea,
.ras-contact__card select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-bg);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  transition: border-color .2s ease;
}
.ras-contact__card select { cursor: pointer; }
.ras-contact__card textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.ras-contact__card input:focus,
.ras-contact__card textarea:focus,
.ras-contact__card select:focus { border-color: var(--color-accent); }

.ras-contact-form__submit,
.ras-contact__card input[type="submit"],
.ras-contact__card .wpforms-submit {
  padding: 15px 24px;
  font-size: 16px;
  border-radius: 999px;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
  width: 100%;
  transition: background .2s ease;
}
.ras-contact-form__submit:hover,
.ras-contact__card input[type="submit"]:hover,
.ras-contact__card .wpforms-submit:hover { background: var(--color-accent-600); }

.ras-contact-form__note {
  font-size: 13px;
  color: var(--color-neutral-600);
  margin: 0;
  text-align: center;
}
.ras-contact-form__note a { text-decoration: none; }

.ras-contact__success { text-align: center; padding: 70px 40px; animation: okin .3s ease; }
.ras-contact__success-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  margin: 0 auto 22px;
}
.ras-contact__success h2 { font-size: 30px; margin: 0 0 12px; }
.ras-contact__success p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  margin: 0 auto;
  max-width: 340px;
}

/* Contact Form 7 response text, in the theme's voice rather than the plugin's. */
.ras-contact__card .wpcf7-response-output {
  border: none;
  border-radius: 16px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  padding: 14px 18px;
  margin: 0;
  font-size: 14.5px;
}
.ras-contact__card .wpcf7-not-valid-tip { font-size: 13px; color: var(--color-accent-800); }

/* Contact Form 7 wraps each field in a <p>; keep the design's field stack. */
.ras-field p { display: flex; flex-direction: column; gap: 8px; }
.ras-contact-form p { margin: 0; }

/* ==========================================================================
   19. Responsive
   Mirrors section 2 of WooCommerce-Pixel-Spec.md, resolved against the theme's
   real class names rather than the mockups' inline-style attribute selectors.
   ========================================================================== */

/* ---------- Header: hamburger below 860px ---------- */
@media (max-width: 860px) {
  .sh-nav { display: none !important; }
  .sh-burger { display: grid !important; }
  .sh-cart-label { display: none !important; }
  .sh-header {
    gap: 10px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .sh-brand { font-size: 20px !important; }
}

/* ---------- Tablet and below (≤ 900px) ---------- */
@media (max-width: 900px) {

  /* Two-column page layouts collapse to one. */
  .ras-hero,
  .ras-screenfree,
  .ras-birthday,
  .ras-schools,
  .ras-shop-masthead,
  .ras-shop,
  .ras-product__hero,
  .ras-story,
  .ras-cart,
  .ras-checkout__cols,
  .ras-checkout__grid-2,
  .ras-checkout__grid-3,
  .ras-account,
  .ras-account__form-grid,
  .ras-story-hero,
  .ras-origin,
  .ras-jfeat__link,
  .ras-contact,
  .ras-bento,
  .ras-bento__pick,
  .ras-orderdetails__meta,
  .ras-addresses,
  .ras-contact-form__row {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  /* Grids that only lose their second column keep tighter gaps. */
  .ras-checkout__grid-2,
  .ras-checkout__grid-3,
  .ras-account__form-grid,
  .ras-contact-form__row,
  .ras-orderdetails__meta { gap: 16px !important; }

  .ras-bento__pick { grid-template-rows: auto auto; }
  .ras-bento__pick-media { min-height: 220px; }

  /* Once a rail is stacked, un-stick it.
     `relative`, not `static`: some of these are the containing block for
     absolutely-positioned children (the product story blob and its floating
     dot). Going static lets those children escape to the page and size against
     the viewport, which drops a full-screen image over the layout. */
  .ras-rail,
  .ras-cart__summary,
  .ras-checkout__aside,
  .ras-account__nav,
  .ras-story__media,
  .ras-summary,
  .woocommerce-checkout-review-order { position: relative !important; }

  /* Card grids step down one level. */
  .ras-occasions__grid,
  .ras-interests__grid,
  .ras-trust-strip__inner,
  .ras-timeline__grid,
  .ras-related__grid,
  .ras-stats__band { grid-template-columns: repeat(2, 1fr) !important; }

  .ras-inbox__grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Tall decorative hero image blocks shrink. */
  .ras-hero__media,
  .ras-story-hero__media { height: 380px !important; }
  .ras-story__media { height: 360px !important; }
  .ras-shop-masthead__media,
  .ras-schools__media { height: 320px !important; }
  .ras-screenfree__media { height: 340px !important; }

  /* The milestone connector line only reads across a full row. */
  .ras-milestone__line { display: none; }

  body { overflow-x: hidden; }
}

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px) {

  /* Outer gutters tighten to 18px. */
  :root { --gutter: 18px; }

  .ras-container,
  .ras-breadcrumbs,
  .sh-header,
  .ras-footer__top,
  .ras-footer__bottom,
  .ras-hero,
  .ras-trust-strip__inner,
  .ras-occasions,
  .ras-bestsellers,
  .ras-band__inner,
  .ras-screenfree,
  .ras-interests,
  .ras-gallery,
  .ras-insta,
  .ras-faq,
  .ras-newsletter,
  .ras-shop-masthead,
  .ras-bubbles,
  .ras-shop,
  .ras-help-band,
  .ras-product__hero,
  .ras-story,
  .ras-related,
  .ras-page-body,
  .ras-thanks,
  .ras-tracker,
  .ras-orderdetails,
  .ras-bump,
  .ras-story-hero,
  .ras-origin,
  .ras-values,
  .ras-timeline,
  .ras-stats,
  .ras-journal-preview,
  .ras-cta-band,
  .ras-jmast,
  .ras-jfeat,
  .ras-jgrid-wrap,
  .ras-keepreading,
  .ras-post__header,
  .ras-post__hero,
  .ras-post__body,
  .ras-post__foot,
  .ras-contact {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Oversized section padding trims to ~52px top and bottom. */
  .ras-band__inner,
  .ras-screenfree,
  .ras-gallery,
  .ras-faq,
  .ras-story,
  .ras-values,
  .ras-timeline {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .ras-newsletter { padding-bottom: 52px !important; }
  .ras-help-band  { padding-bottom: 52px !important; }

  /* Remaining multi-column grids collapse. */
  .ras-how__grid,
  .ras-schools__minis,
  .ras-values__grid,
  .ras-journal-preview__grid,
  .ras-jgrid,
  .ras-bump__grid,
  .ras-quickfacts,
  .ras-shop__grid { grid-template-columns: 1fr !important; }

  .ras-occasions__grid,
  .ras-interests__grid,
  .ras-trust-strip__inner,
  .ras-timeline__grid,
  .ras-related__grid,
  .ras-inbox__grid,
  .ras-stats__band,
  .ras-account__tiles { grid-template-columns: repeat(2, 1fr) !important; }

  .ras-insta__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ras-gallery__grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Footer: four columns to two. */
  .ras-footer__top {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 28px !important;
  }

  /* Gallery mosaic: shorter rows. */
  .ras-gallery__grid { grid-auto-rows: 96px !important; }

  /* Decorative hero heights. */
  .ras-hero__media,
  .ras-story-hero__media { height: 300px !important; }
  .ras-schools__media,
  .ras-shop-masthead__media,
  .ras-screenfree__media { height: 300px !important; }
  .ras-story__media { height: 320px !important; }

  /* The dashboard orders table scrolls rather than crushing. */
  .dash-orders {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .dash-orders > .ras-orders__inner { min-width: 520px; }

  /* Line items and summary rows lose their side-by-side luxury. */
  .ras-cart-item { grid-template-columns: 72px 1fr !important; }
  .ras-cart-item__price { grid-column: 1 / -1; text-align: left; }
  .ras-cart-item__thumb { width: 72px; height: 72px; }

  .ras-summary,
  .ras-orderdetails__card,
  .ras-contact__card { padding: 24px !important; }
  .ras-login__card { padding: 26px !important; }

  .ras-newsletter__slab { padding: 44px 24px !important; }
  .ras-cta-band__inner { padding: 44px 24px !important; }
  .ras-stats__band { padding: 40px 26px !important; }
  .ras-help-band__inner { padding: 30px !important; }

  .ras-bento__custom { padding: 26px !important; }

  /* Bestseller cards fill more of the narrow viewport. */
  .ras-carousel__card { flex-basis: 78vw; }

  /* The bubbles row keeps scrolling, just smaller. */
  .ras-bubble__circle { width: 76px; height: 76px; }

  /* Product buy row stacks so the CTA stays full width. */
  .ras-buy__submit { min-width: 100%; }

  /* Tracker labels wrap tightly at this width. */
  .ras-tracker__label { font-size: 13px; }

  /* Floating WhatsApp tucks closer to the corner. */
  .ras-wa { bottom: 18px; right: 18px; }

  /* The live cart-count bubble costs the wordmark about 25px that the static
     mockup did not have to give up. Step the brand down so it still wraps to
     two lines here, as the reference does, rather than three. */
  .sh-brand { font-size: 18px !important; line-height: 1.15; }
  .sh-cart { padding: 9px 13px; }
}


/* ==========================================================================
   20. Grid-child guards
   Grid items default to min-width:auto, so a long word or a wide table can
   push a column past its track. Every content column that sits next to a
   fixed rail needs the override.
   ========================================================================== */

.ras-cart__items,
.ras-shop__main,
.ras-product__panel,
.ras-checkout__main,
.ras-account__content,
.ras-story__copy,
.ras-origin__copy,
.ras-jfeat__copy { min-width: 0; }

/* Content pagination inside prose */
.ras-page-links {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  font-size: 14px;
  align-items: center;
}
.ras-page-links a {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-surface);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  color: var(--color-text);
}
.ras-page-links a:hover { background: var(--color-neutral-200); }

/* ==========================================================================
   21. Decorative overhang, phone widths
   The badges, small blobs and floating dots are positioned with negative
   offsets against the 1240px canvas, where they overhang into the outer
   margin. At phone widths that margin is only 18px, so the same offsets push
   them past the screen edge. Tuck them back inside.
   ========================================================================== */

@media (max-width: 640px) {
  .ras-hero__badge { left: 4px; }
  .ras-hero__blob-sm {
    left: 4px;
    bottom: -10px;
    width: 128px;
    height: 128px;
    border-width: 5px;
  }
  .ras-shop-masthead__badge { right: 4px; }
  .ras-origin__badge { right: 12px; bottom: -10px; }

  /* These carry their offsets as inline styles from the templates. */
  .ras-story__media .ras-dot { left: 4px !important; }
  .ras-hero__media .ras-dot--b { left: 2px !important; }
  .ras-hero__media .ras-dot--c { right: 2px !important; }
  .ras-shop-masthead__media .ras-dot--b { left: 2px !important; }
  .ras-story-hero__media .ras-dot--b { left: 2px !important; }
  .ras-gallery-blob .ras-dot { right: 8px !important; }
}