/*
 * Ohime Mall — Brand CSS
 * Supplemental styles for what theme.json cannot express.
 * Enqueued by functions.php (Task 7).
 */

/* ── Product / card image radii ─────────────────────────────────────────── */
/* tokens.md §4: card = 16px, image-thumb = 10px                            */
/* Scope to WooCommerce product/gallery images only — NOT all wp:image blocks */
.wc-block-components-product-image img,
.woocommerce-product-gallery__image img,
figure.woocommerce-product-gallery__wrapper img {
  border-radius: 10px; /* image-thumb token */
}

.wc-block-grid__product-image img,
.woocommerce ul.products li.product .woocommerce-loop-product__image {
  border-radius: 16px; /* card token */
}

/* ── Wordmark gradient removed — Figma shows solid black text ── */

/* ── Header ─────────────────────────────────────────────────────────────── */
/*
 * Figma: white bar, 20px padding, flex space-between.
 * Logo = small icon + "ohime mall" bold 22px in #141412 (solid black).
 * Nav items: 18px medium, 28px gap, black.
 * Right: search icon · account icon · mini-cart pill (purple-light).
 */

.ohime-site-header {
  background: #ffffff;
  border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Gutter on the full-bleed band (matches theme.json root padding) so the
     centered inner aligns to the same container width as the page sections. */
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.ohime-header-inner {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-inline: 0; /* gutter is on the band; inner centers like alignwide content */
  padding-block: 0;
  min-height: 74px;
}

/* Logo cluster */
.ohime-wordmark-wrap {
  gap: 6px;
  flex-shrink: 0;
  text-decoration: none;
}

.ohime-site-icon .wp-block-site-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Site title — solid black to match Figma */
.ohime-site-title-text a,
.ohime-site-title-text .wp-block-site-title a {
  color: var(--wp--preset--color--contrast, #141412);
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.375rem; /* 22px */
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-decoration: none;
}

.ohime-site-title-text a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #141412);
}

/* ── Primary navigation — custom mega menu (patterns/primary-nav.php) ──────
   Desktop: inline top-level items; Tops/Outerwear/Bottoms open a full-width
   panel (subcategory links + featured cards) on hover/focus over a dimmed page.
   Mobile (≤1023px, block further below): hamburger + full-screen overlay. */
.ohime-primary-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-self: stretch; /* full header height so hover bridges into the panel */
}

/* Mobile-only chrome — hidden on desktop */
.ohime-nav-burger,
.ohime-nav-close,
.ohime-nav-scrim { display: none; }

/* Wrappers collapse on desktop so the list flows inside the nav */
.ohime-nav-panel,
.ohime-nav-sheet { display: contents; }

.ohime-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 1.75rem; /* 28px */
}

.ohime-nav-item {
  display: flex;
  align-items: center;
  position: static; /* the mega panel positions against the header */
}

.ohime-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wp--preset--color--contrast, #141412);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

.ohime-nav-link:hover { color: var(--wp--preset--color--primary, #ae91cd); }

.ohime-nav-caret { opacity: 0.75; transition: transform 0.18s ease; }

/* Hover/open state: every nav item — including the mega ones — changes color on
   hover, with no underline. Keep the label highlighted while the panel is open, and
   flip the caret. */
.ohime-nav-item--mega:hover > .ohime-nav-link,
.ohime-nav-item--mega:focus-within > .ohime-nav-link {
  color: var(--wp--preset--color--primary, #ae91cd);
}
.ohime-nav-item--mega:hover > .ohime-nav-link .ohime-nav-caret,
.ohime-nav-item--mega:focus-within > .ohime-nav-link .ohime-nav-caret {
  transform: rotate(180deg);
}

/* ── Mega panel (full-width, below the header) ─────────────────────────── */
.ohime-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: #ffffff;
  border-top: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  box-shadow: 0 24px 32px rgba(20, 20, 18, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.ohime-nav-item--mega:hover > .ohime-mega,
.ohime-nav-item--mega:focus-within > .ohime-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Dimmed page behind the panel — a body-level scrim (output via wp_footer) so
   it sits BELOW the header's stacking context (z-index:100). This keeps the
   header and the white panel bright while only the page behind is dimmed.
   (A pseudo-element child of the panel would paint over the panel's own
   background and grey it out.) */
.ohime-mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 20, 18, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

body:has(.ohime-nav-item--mega:hover) .ohime-mega-scrim,
body:has(.ohime-nav-item--mega:focus-within) .ohime-mega-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.16s ease;
}

.ohime-mega__inner {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding: 1.75rem clamp(1rem, 5vw, 3rem) 2.25rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.ohime-mega__col-links {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ohime-mega__eyebrow {
  font-size: 0.875rem; /* 14px */
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--gray-70, #70706f);
  margin-bottom: 0.25rem;
}

.ohime-mega__link {
  width: fit-content;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1rem; /* 16px */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--contrast, #141412);
  text-decoration: none;
}
.ohime-mega__link:hover { color: var(--wp--preset--color--primary, #ae91cd); }

.ohime-mega__col-cards {
  flex: 0 0 auto;
  display: flex;
  gap: 1.25rem;
}

/* ── Featured product card (mega panel) ────────────────────────────────── */
.ohime-mega-card {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #141412);
}

.ohime-mega-card__media {
  position: relative;
  display: block;
  aspect-ratio: 200 / 206;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--purple-20, #efe9f5);
}

.ohime-mega-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ohime-mega-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.ohime-mega-card:hover .ohime-mega-card__overlay { opacity: 1; }

.ohime-mega-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem; /* 12px */
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ohime-mega-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.ohime-mega-card__cta {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--wp--preset--color--primary, #ae91cd);
}

/* ── Right action cluster ──────────────────────────────────────────── */
.ohime-header-actions {
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

/* Account button — icon only, no border */
.ohime-account-btn .wp-block-button__link {
  background: transparent;
  border: none;
  padding: 0.5rem;
  color: var(--wp--preset--color--contrast, #141412);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: unset;
  line-height: 1;
  box-shadow: none;
  transition: background 0.15s;
}

.ohime-account-btn .wp-block-button__link:hover {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
}

/* Cart — Figma "BAG" pill: purple-light bg, bag icon + BAG label, count badge */
.ohime-mini-cart .wc-block-mini-cart__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 42px;
  padding: 0 0.75rem 0 1.1rem; /* tighter on the right so the count sits near the edge */
  border: none;
  border-radius: 100px;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.ohime-mini-cart .wc-block-mini-cart__button:hover {
  background: var(--wp--preset--color--purple-30, #e7def0);
}

/* Swap WooCommerce's cart glyph for a shopping-bag icon (matches Figma) */
.ohime-mini-cart .wc-block-mini-cart__icon { display: none; }

.ohime-mini-cart .wc-block-mini-cart__button::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ohime-mini-cart .wc-block-mini-cart__button::after {
  content: "Cart";
}

/* Item count: inline badge inside the pill, after the "Cart" label.
   order:3 places it after the ::after label (a flex item at order:0). */
.ohime-mini-cart .wc-block-mini-cart__quantity-badge {
  order: 3;
  display: inline-flex;
  align-items: center;
}

.ohime-mini-cart .wc-block-mini-cart__badge {
  /* Count highlighted in a white chip. (WC ships it as an absolute, raised
     superscript with inline white-bg/purple-text styles — reset + restyle.) */
  position: static;
  top: auto;
  transform: none;
  margin: 0; /* reset WC's negative margin (its superscript-overlay offset) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.375rem;
  border-radius: 100px;
  background: #ffffff !important;
  color: var(--wp--preset--color--contrast, #141412) !important;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  line-height: 1;
}

/* Cart drawer title: drop the "(items: X)" counter, keep just "Your cart" */
.wp-block-woocommerce-mini-cart-title-items-counter-block {
  display: none;
}

/* ── Search & account — matching icon buttons (40×40 box, 20px icon) ──── */
/* Expandable search. The revealed field is positioned ABSOLUTELY so it floats
   over the header (anchored just left of the icon) instead of reflowing the
   nav and the account/cart cluster. The icon stays put; only the field slides
   open. Core toggles the `wp-block-search__searchfield-hidden` class
   (width:0 !important) to collapse it — never use display:none, which would
   block the reveal entirely. */
.ohime-search-btn {
  position: relative;
}
.ohime-search-btn .wp-block-search__inside-wrapper {
  border: none;
  background: transparent;
  padding: 0;
}
.ohime-search-btn .wp-block-search__input {
  position: absolute;
  right: 44px; /* just left of the 40px icon button */
  top: 50%;
  transform: translateY(-50%);
  width: 16rem;
  max-width: min(16rem, 50vw);
  height: 40px;
  margin: 0;
  border: 1px solid var(--wp--preset--color--border, #c2c2c1);
  border-radius: 100px;
  background: var(--wp--preset--color--base, #fff);
  box-shadow: 0 6px 20px rgba(20, 20, 18, 0.12);
  padding: 0 1rem;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--wp--preset--color--contrast, #141412);
  transition: width 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}
.ohime-search-btn .wp-block-search__input:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary, #ae91cd);
}
/* Collapsed: fully hidden, no chrome, not interactive (core also forces
   width:0). */
.ohime-search-btn.wp-block-search__searchfield-hidden .wp-block-search__input {
  opacity: 0;
  visibility: hidden;
  box-shadow: none;
  border-width: 0;
  padding: 0;
}

.ohime-search-btn .wp-block-search__button,
.ohime-account-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--contrast, #141412);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.ohime-search-btn .wp-block-search__button:hover,
.ohime-account-btn a:hover {
  background: var(--wp--preset--color--purple-20, #efe9f5);
}

/* Normalize both glyphs to 20px. The core search icon ships at 24px with a
   min-width, and the WC account icon much larger — override size + min-width. */
.ohime-header-actions .ohime-search-btn .wp-block-search__button svg,
.ohime-header-actions .ohime-account-btn a svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

/* ── Primary nav — Mobile (≤1023px): hamburger + full-screen overlay ──────
   Breakpoint raised from 599px → 1023px so the header flips to the hamburger
   as soon as the inline top-level items stop fitting. Measured fit boundary
   (logo 149 + nav items 500 + actions 214 + 24px gaps) is ~1007px; below that
   the cluster overflows the viewport. 1023px leaves a small cushion. */
@media (max-width: 1023px) {
  /* Header bar (Figma mobile): logo left · cart + hamburger right.
     Search & account are desktop-only; the burger toggles the overlay. */
  .ohime-header-inner {
    gap: 0.5rem;
  }

  .ohime-search-btn,
  .ohime-account-btn {
    display: none;
  }

  .ohime-site-header .ohime-header-actions {
    order: 2;
    margin-left: auto; /* push the cart + hamburger group to the right edge */
  }

  .ohime-site-header .ohime-primary-nav {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    justify-content: flex-end;
    /* Nav stretches to full header height; without this the fixed-height
       burger lands at the top (cross-start), 16px above the centered cart
       pill. Centering puts the burger on the same baseline as the cart. */
    align-items: center;
  }

  /* Burger */
  .ohime-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--wp--preset--color--purple-20, #efe9f5);
    color: var(--wp--preset--color--contrast, #141412);
    cursor: pointer;
  }

  /* Overlay — hidden until the toggle is checked */
  .ohime-nav-panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
  }
  .ohime-nav-toggle:checked ~ .ohime-nav-panel {
    visibility: visible;
    pointer-events: auto;
  }

  .ohime-nav-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 18, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .ohime-nav-toggle:checked ~ .ohime-nav-panel .ohime-nav-scrim { opacity: 1; }

  .ohime-nav-sheet {
    display: block;
    position: absolute;
    inset: 0;
    background: #ffffff;
    padding: 1.25rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  .ohime-nav-toggle:checked ~ .ohime-nav-panel .ohime-nav-sheet { transform: translateX(0); }

  .ohime-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto; /* block-level + fixed width → pushes to the right */
    border-radius: 50%;
    background: var(--wp--preset--color--purple-20, #efe9f5);
    color: var(--wp--preset--color--contrast, #141412);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .ohime-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.75rem;
  }

  .ohime-nav-item {
    display: block;
    border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  }

  .ohime-nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1.125rem;
  }

  /* Mega items on mobile: the top-level label becomes a small heading and the
     subcategory links show inline; featured cards are hidden. */
  .ohime-nav-link--mega {
    pointer-events: none;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--gray-70, #70706f);
  }
  .ohime-nav-link--mega .ohime-nav-caret { display: none; }

  .ohime-mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .ohime-mega-scrim { display: none; }
  .ohime-mega__inner {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0 0 0.75rem;
  }
  .ohime-mega__eyebrow { display: none; }
  .ohime-mega__col-cards { display: none; }
  .ohime-mega__col-links { gap: 0; }
  .ohime-mega__link { padding: 0.5rem 0; font-size: 1.0625rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   Figma: #ae91cd bg, white text.
   Desktop: large wordmark left + 4 columns right (space-between, align:end).
   Mobile: stacked columns then wordmark at bottom (60px), sub-footer below.
   tokens.md §6 Footer.
   ════════════════════════════════════════════════════════════════════════════ */

.ohime-site-footer {
  background-color: var(--wp--preset--color--primary, #ae91cd);
  color: var(--wp--preset--color--base, #ffffff);
  width: 100%;
}

/* ── Main row: wordmark + columns ───────────────────────────────────────── */
.ohime-footer-main {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

/* ── Wordmark ────────────────────────────────────────────────────────────── */
.ohime-footer-wordmark,
.ohime-footer-wordmark a,
.ohime-footer-wordmark .wp-block-site-title,
.ohime-footer-wordmark .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: clamp(3rem, 6vw, 5.625rem); /* ~60-90px responsive; Figma: 90px desktop, 60px mobile */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: var(--wp--preset--color--base, #ffffff);
  text-decoration: none;
  text-transform: lowercase; /* Figma: lowercase "ohime mall" wordmark */
  white-space: nowrap;
}

.ohime-footer-wordmark a:hover,
.ohime-footer-wordmark .wp-block-site-title a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--base, #ffffff);
}

/* ── Columns container ───────────────────────────────────────────────────── */
.ohime-footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem; /* Figma: ~40px between columns */
  align-items: flex-start;
  justify-content: flex-end;
}

/* ── Individual column ───────────────────────────────────────────────────── */
.ohime-footer-col {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Column heading — Helvetica Now Display Bold 18px uppercase white */
.ohime-footer-col-heading {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  color: var(--wp--preset--color--base, #ffffff);
  margin: 0 0 0.625rem 0;
}

/* ── Link list ───────────────────────────────────────────────────────────── */
.ohime-footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Footer links — SF UI Display Medium 12px, title case (per Figma) */
.ohime-footer-link-list li {
  padding: 0;
  margin: 0;
}

.ohime-footer-link-list li a {
  display: inline-block;
  font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  color: var(--wp--preset--color--base, #ffffff);
  text-decoration: none;
  padding: 0.375rem 0;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.ohime-footer-link-list li a:hover {
  opacity: 1;
  text-decoration: none;
  color: var(--wp--preset--color--base, #ffffff);
}

/* ── Sub-footer bar ──────────────────────────────────────────────────────── */
.ohime-footer-sub {
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Figma: white-10% */
  max-width: 100%;
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Copyright + disclaimer — Gilroy/heading Medium 12px white */
.ohime-footer-copyright,
.ohime-footer-disclaimer {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  color: var(--wp--preset--color--base, #ffffff);
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO SECTION (Section 1)
   Tagline headline ("Wear the daydream.", bold, #141412) above a wide rounded
   hero image panel (1400×641px, border-radius 24px). The brand wordmark now
   lives in the header next to the logo, so the hero leads with the tagline.
   Three layered image fills achieved via CSS on the cover block.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Headline (tagline) ───────────────────────────────────────────────────── */
.ohime-hero__headline {
  font-size: clamp(2rem, 1.5rem + 6vw, 6rem); /* ~32px mobile → 96px desktop */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--wp--preset--color--contrast, #141412);
  margin-bottom: 1rem;
}

/* ── Hero image panel ─────────────────────────────────────────────────────── */
.ohime-hero__cover.wp-block-cover {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 641px;
}

/* Overlay — spiral staircase atmospheric element at low opacity over the desk scene */
.ohime-hero__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-overlay-1.png");
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 1;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* No ::after needed — two layers (base image + ::before overlay) match the design */
.ohime-hero__cover::after {
  content: none;
}

/* Cover inner container sits above overlays */
.ohime-hero__cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
}

/* Hero section outer: white bg. Near-full-width gutter (~20px desktop, Figma)
   so the headline + image span close to edge-to-edge; the alignfull children
   fill the section minus this padding. */
.ohime-hero.wp-block-group {
  /* Containerized: same page gutter as the other sections; the headline and
     cover are alignwide (1200px content width). */
  padding-inline: clamp(1rem, 3vw, 2rem);
  /* Tight top so the headline sits close under the header; keep the lower
     padding for breathing room above the next section. */
  padding-top: clamp(0.5rem, 1vw, 0.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--base, #ffffff);
}

/* ── Mobile: shrink hero panel height ────────────────────────────────────── */
@media (max-width: 599px) {
  .ohime-hero__cover.wp-block-cover {
    min-height: 391px;
  }
  .ohime-hero__headline {
    margin-bottom: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY TILES SECTION (Section 2)
   Figma: 2-col layout. Left: "Categories" heading (38px, Medium, -1.14px) +
   prev/next arrow buttons (50×32px, rounded-40, bg #efe9f5).
   Right: 4 tiles (161×189px each, bg #efe9f5, border-radius 16px) with
   product image + white pill label.
   ════════════════════════════════════════════════════════════════════════════ */

.ohime-cat-section.wp-block-group {
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--base, #ffffff);
}

/* ── Left column layout ──────────────────────────────────────────────────── */
.ohime-cat-left.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.ohime-cat-heading.wp-block-heading {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -1.14px;
  line-height: 1.1;
  color: var(--wp--preset--color--contrast, #141412);
  margin: 0;
}

/* ── Arrow buttons ───────────────────────────────────────────────────────── */
.ohime-cat-arrows.wp-block-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.ohime-cat-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 32px;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  padding: 0;
}

.ohime-cat-arrow:hover {
  background: var(--wp--preset--color--purple-30, #e7def0);
}

.ohime-cat-arrow[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ── Right column: tiles row ─────────────────────────────────────────────── */
.ohime-cat-right.wp-block-column {
  overflow: hidden;
  min-width: 0;
}

.ohime-cat-tiles {
  /* --cat-per = how many whole tiles are visible at once (set by
     assets/js/category-slider.js to fit 2–4; never a partial tile). */
  --cat-per: 4;
  --cat-gap: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--cat-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar visually but keep functional */
  scrollbar-width: none;
  padding-bottom: 4px;
}

.ohime-cat-tiles::-webkit-scrollbar {
  display: none;
}

/* ── Individual tile ─────────────────────────────────────────────────────── */
.ohime-cat-tile {
  /* Exactly --cat-per tiles fill the strip (no partial tile peeking). */
  flex: 0 0 calc((100% - (var(--cat-per) - 1) * var(--cat-gap)) / var(--cat-per));
  min-width: 0;
}

.ohime-cat-tile__link {
  position: relative;
  box-sizing: border-box; /* keep padding inside the tile width (no overlap) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* label pill sits at the bottom (Figma) */
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  min-height: 189px;
  padding: 16px 10px;
  transition: box-shadow 0.15s;
}

.ohime-cat-tile__link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  text-decoration: none;
}

/* ── Tile image ──────────────────────────────────────────────────────────── */
.ohime-cat-tile__img {
  /* Figma: cutout product image in the top ~77% of the tile. White-background
     product photos are blended into the pastel via multiply so they read as
     cutouts (white -> pastel, product colours preserved). */
  position: absolute;
  top: 4.23%;
  left: 5.25%;
  width: 89.5%;
  height: 76.72%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 0;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Cat tile images: no radius (tile card handles shape via border-radius on link) */
.ohime-cat-tile .wp-block-image img,
.ohime-cat-tile img {
  border-radius: 0;
}

/* ── Pill label ──────────────────────────────────────────────────────────── */
.ohime-cat-tile__label {
  position: relative;
  z-index: 2; /* above the multiplied image */
  display: inline-block;
  background: #ffffff;
  color: var(--wp--preset--color--contrast, #141412);
  font-family: var(--wp--preset--font-family--heading, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.42px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 100px;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

/* ── Mobile (≤599px): heading+arrows inline, 2-up visible tiles, scroll ─── */
@media (max-width: 599px) {
  .ohime-cat-inner.wp-block-columns {
    flex-direction: column;
    gap: 1rem;
  }

  .ohime-cat-left.wp-block-column,
  .ohime-cat-right.wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  /* Compact heading on mobile */
  .ohime-cat-heading.wp-block-heading {
    font-size: clamp(1.5rem, 7vw, 2.375rem);
  }

  /* Heading + arrows inline on mobile (Figma: same row, 353px wide) */
  .ohime-cat-left.wp-block-column {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  .ohime-cat-arrows {
    flex-shrink: 0;
  }

  /* Pre-JS default: 2 whole tiles on mobile (JS confirms the fit). */
  .ohime-cat-tiles {
    --cat-per: 2;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EDITORIAL PROMO SECTION (Section 3)
   Figma: 2-col layout. Left (49%): small tee thumbnail (340×269px, r=16px) +
   heading "Aesthetic escapism" (38px Medium) + body copy.
   Right (51%): full-height lifestyle model photo (r=16px, object-fit cover).
   Desktop h=706px; mobile stacked (thumb → text → photo).
   ════════════════════════════════════════════════════════════════════════════ */

.ohime-promo-editorial.wp-block-group {
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--base, #ffffff);
}

/* ── Inner columns ───────────────────────────────────────────────────────── */
.ohime-promo-editorial__inner.wp-block-columns {
  align-items: stretch;
  gap: 1.5rem;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.ohime-promo-editorial__left.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25rem;
}

/* ── Thumbnail image ─────────────────────────────────────────────────────── */
.ohime-promo-editorial__thumb {
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
  max-width: 340px; /* Figma: 340×269 thumbnail (not full-column width) */
}

.ohime-promo-editorial__thumb img {
  border-radius: 16px;
  width: 100%;
  max-height: 269px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Editorial thumbnail: 16px card radius (scoped to this section) */
.ohime-promo-editorial .wp-block-image img {
  border-radius: 16px;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.ohime-promo-editorial__heading.wp-block-heading {
  font-size: clamp(1.75rem, 4vw, 2.375rem); /* ~38px desktop */
  font-weight: 500;
  letter-spacing: -0.03em; /* Figma: -1.14px at 38px ≈ -0.03em */
  line-height: 1.1;
  color: var(--wp--preset--color--contrast, #141412);
  margin: 0;
}

/* ── Body copy ───────────────────────────────────────────────────────────── */
.ohime-promo-editorial__copy {
  font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast, #141412);
  margin: 0;
  max-width: 44ch;
}

/* ── Right column: full-height model photo ───────────────────────────────── */
.ohime-promo-editorial__right.wp-block-column {
  display: flex;
  flex-direction: column;
}

.ohime-promo-editorial__photo.wp-block-cover {
  border-radius: 16px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 420px;
}

.ohime-promo-editorial__photo .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

/* ── Mobile (≤599px): stack vertically ──────────────────────────────────── */
@media (max-width: 599px) {
  .ohime-promo-editorial__inner.wp-block-columns {
    flex-direction: column;
    gap: 1.25rem;
  }

  .ohime-promo-editorial__left.wp-block-column,
  .ohime-promo-editorial__right.wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  .ohime-promo-editorial__photo.wp-block-cover {
    min-height: 370px;
  }

  .ohime-promo-editorial__thumb img {
    max-height: 220px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURED COLLECTION BAND (Sections 4 & 6)
   Figma: 2-col. Left (48%): heading 38px + copy + VIEW ALL pill.
   Right (52%): 2-col product card grid. Cards: #efe9f5 bg, r=16px, 338×492px.
   Card image top-anchored, brand bold 16px, price bold, Add to Cart black pill.
   ════════════════════════════════════════════════════════════════════════════ */

.ohime-featured.wp-block-group {
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem); /* normalised to match other sections */
  background: var(--wp--preset--color--base, #ffffff);
}

/* ── Inner columns ───────────────────────────────────────────────────────── */
.ohime-featured__inner.wp-block-columns {
  align-items: stretch; /* columns top-aligned & equal height */
  gap: 2rem;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.ohime-featured__left.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* heading top-aligned with the product cards */
  align-self: stretch;
  gap: 1.25rem;
}


/* ── Heading ─────────────────────────────────────────────────────────────── */
.ohime-featured__heading.wp-block-heading {
  font-size: clamp(1.75rem, 4vw, 2.375rem); /* ~38px desktop */
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--wp--preset--color--contrast, #141412);
  margin: 0;
}

/* ── Body copy ───────────────────────────────────────────────────────────── */
.ohime-featured__copy {
  font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast, #141412);
  margin: 0;
  max-width: 40ch;
}

/* ── VIEW ALL pill button ────────────────────────────────────────────────── */
.ohime-featured__view-all .wp-block-button__link {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  border: none;
  border-radius: 100px;
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.625rem 1.5rem;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.ohime-featured__view-all .wp-block-button__link:hover {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  color: var(--wp--preset--color--contrast, #141412);
  text-decoration: none;
}

/* ── Right column: 2-col product grid ───────────────────────────────────── */
.ohime-featured__right.wp-block-column {
  display: flex;
  flex-direction: column;
}

/* WooCommerce product-collection: the wrapper stays a block (so pagination or
   other blocks stack below); only the product-template LIST is the 2-col grid.
   (Gridding the wrapper too squeezed the list into one column -> tiny cards.) */
.ohime-featured__grid.wp-block-woocommerce-product-collection {
  display: block;
}
.ohime-featured__grid .wc-block-product-template,
.ohime-featured__grid ul.wc-block-product-template,
.ohime-featured__grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* design-system product-grid gap (matches the catalog) */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Single product in a section: place the lone card in the right column so its
   edge still lands on the section's right edge (consistent down the page).
   Works for every featured section. Mobile stacks full-width, so ≥600px only. */
@media (min-width: 600px) {
  .ohime-featured__grid .wc-block-product-template > *:only-child,
  .ohime-featured__grid .wp-block-post-template > *:only-child {
    grid-column: 2;
  }
}

/* ── Product card ────────────────────────────────────────────────────────── */
.ohime-product-card.wp-block-group {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-radius: 16px;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  height: 100%;
}

/* Product image: centered, top-anchored, object-fit contain */
.ohime-product-card__image .wc-block-components-product-image,
.ohime-product-card__image figure,
.ohime-product-card__image .wp-block-woocommerce-product-image {
  border-radius: 0;
  width: 100%;
  margin: 0;
}

.ohime-product-card__image img,
.ohime-product-card .wc-block-components-product-image img,
.ohime-product-card figure img {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Product title */
.ohime-product-card__title .wc-block-components-product-title,
.ohime-product-card__title a,
.ohime-product-card__title h3 {
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  color: var(--wp--preset--color--contrast, #141412);
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  margin: 0;
}

.ohime-product-card__title a:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--contrast, #141412);
}

/* Product price */
.ohime-product-card__price .wc-block-components-product-price,
.ohime-product-card__price .price,
.ohime-product-card__price bdi {
  font-size: 1rem; /* 16px */
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #141412);
  letter-spacing: -0.03em;
  text-align: center;
}

/* Add to cart button — black pill, white text */
.ohime-product-card__atc .wp-block-button__link,
.ohime-product-card__atc .wc-block-components-product-button__button,
.ohime-product-card .wp-block-woocommerce-product-button a,
.ohime-product-card .wp-block-woocommerce-product-button button {
  background: var(--wp--preset--color--contrast, #141412);
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1.125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  display: inline-block;
}

.ohime-product-card__atc .wp-block-button__link:hover,
.ohime-product-card__atc .wc-block-components-product-button__button:hover,
.ohime-product-card .wp-block-woocommerce-product-button a:hover,
.ohime-product-card .wp-block-woocommerce-product-button button:hover {
  background: #2c2c2a;
  color: #ffffff;
  text-decoration: none;
}

/* Product card grid images: 10px image-thumb token (WC grid block) */
.ohime-featured .wc-block-grid__product-image img {
  border-radius: 10px;
}

/* ── Homepage featured cards — Figma node 66:174 ────────────────────────────
   Large card: a tall pastel rounded box holds the product image (centred,
   white photo backgrounds blended into the pastel via multiply so they read
   as cutouts); below it sit the bold title and a price | ADD-TO-CART row.
   Scoped to .ohime-featured so catalog/related cards (shared .ohime-product-card)
   are untouched. */
.ohime-featured .ohime-product-card.wp-block-group {
  background: transparent;
  padding: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "image image"
    "title title"
    "price button";
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.875rem;
  text-align: left;
}

/* Pastel image box — tall/portrait, product centred + blended */
.ohime-featured .ohime-product-card__image {
  grid-area: image;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 86 / 100;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7%;
}
.ohime-featured .ohime-product-card__image .wc-block-components-product-image,
.ohime-featured .ohime-product-card__image figure,
.ohime-featured .ohime-product-card__image a {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ohime-featured .ohime-product-card__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  mix-blend-mode: multiply;
}

/* Title — bold 16px, clamped to 2 lines so price rows align across cards */
.ohime-featured .ohime-product-card__title {
  grid-area: title;
  align-self: start;
  margin: 0; /* drop WC's default 24px top margin -> tighter image-to-title gap */
}
.ohime-featured .ohime-product-card__title .wc-block-components-product-title,
.ohime-featured .ohime-product-card__title a,
.ohime-featured .ohime-product-card__title h3 {
  text-align: left;
  font-size: 1rem; /* 16px */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em; /* reserve 2 lines */
}

/* Price (left of the bottom row) */
.ohime-featured .ohime-product-card__price {
  grid-area: price;
  align-self: center;
  margin: 0; /* drop WC's default 24px top margin so it centres with the button */
}
.ohime-featured .ohime-product-card__price .wc-block-components-product-price,
.ohime-featured .ohime-product-card__price .price,
.ohime-featured .ohime-product-card__price bdi {
  text-align: left;
  font-size: 1rem; /* 16px */
}

/* ADD TO CART — black pill with a leading + (right of the bottom row) */
.ohime-featured .ohime-product-card__atc {
  grid-area: button;
  align-self: center;
  justify-self: end;
  text-align: right;
  margin: 0;
}
.ohime-featured .ohime-product-card__atc .wp-block-button,
.ohime-featured .ohime-product-card__atc .wp-block-button__link {
  margin: 0;
}
.ohime-featured .ohime-product-card__atc .wp-block-button__link,
.ohime-featured .ohime-product-card__atc .wc-block-components-product-button__button,
.ohime-featured .ohime-product-card .wp-block-woocommerce-product-button a,
.ohime-featured .ohime-product-card .wp-block-woocommerce-product-button button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem; /* 12px */
  padding: 0.5rem 0.75rem; /* 8px 12px */
  line-height: 1;
}

/* ── Mobile (≤599px): stack left/right, cards go full-width 1-col ────────── */
@media (max-width: 599px) {
  .ohime-featured__inner.wp-block-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .ohime-featured__left.wp-block-column,
  .ohime-featured__right.wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  /* Keep 2 cards side by side on mobile (Figma stacks them 1-col per card) */
  .ohime-featured__grid.wp-block-woocommerce-product-collection,
  .ohime-featured__grid .wc-block-product-template,
  .ohime-featured__grid ul.wc-block-product-template,
  .ohime-featured__grid .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .ohime-footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  /* On mobile, columns come first (Figma shows columns → wordmark order) */
  .ohime-footer-columns {
    order: 1;
    justify-content: flex-start;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }

  .ohime-footer-brand {
    order: 2;
    width: 100%;
  }

  .ohime-footer-col {
    width: 100%;
  }

  .ohime-footer-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .ohime-footer-wordmark,
  .ohime-footer-wordmark a,
  .ohime-footer-wordmark .wp-block-site-title,
  .ohime-footer-wordmark .wp-block-site-title a {
    font-size: clamp(3.25rem, 14vw, 5.625rem); /* ~60px on 393px wide */
  }
}

/* ── Free Shipping Promo Banner (Section 5) ─────────────────────────────── */
/*
 * Figma §5: full-width pink gradient banner, oversized "free shipping" text
 * (Gilroy/Sora SemiBold, 162px, white, mix-blend-mode soft-light,
 *  text-shadow 0 10px 26px rgba(0,0,0,0.25), tracking -4.87px).
 * 3D dolphin positioned absolutely, left-offset.
 * gradient: linear-gradient(107.57deg, #f6c0ce, #e39aaa)
 */

.ohime-shipping-wrap.wp-block-group {
  /* Outer wrapper: white bg, consistent section vertical breathing room */
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--base, #ffffff);
}

/* Banner container: centered at the wide content width, clips the image corners */
.ohime-shipping {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0; /* kill inline-image whitespace gap */
}

/* Exact Figma banner export (sky + dolphin + "free shipping"). Art-directed
   desktop/mobile crops are swapped via <picture> in the pattern. */
.ohime-shipping__banner {
  display: block;
  width: 100%;
  height: auto;
}

/* Heading kept for document outline / SEO; the wordmark is rendered in the image. */
.ohime-shipping__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Catalog ─────────────────────────────────────────────────────────────── */
/*
 * Shop / category archive: 4-col product grid with left-aligned card variant.
 * Image sits in a #efe9f5 tinted rounded area; text block below on white,
 * left-aligned: name (14px), price (16px bold), black pill button.
 */

/* 4-column grid — target the product <ul> inside the collection, not the outer wrapper */
/* The outer .ohime-catalog__grid contains: notices div + <ul> + pagination nav */
.ohime-catalog__grid .wc-block-product-template,
.ohime-catalog__grid ul.wc-block-product-template,
.ohime-catalog__grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Outer wrapper: block layout so notices/ul/pagination stack vertically */
.ohime-catalog__grid.wp-block-woocommerce-product-collection {
  display: block;
}

/* Catalog card: fully tinted (#efe9f5) rounded card, LEFT-aligned content.
 * Matches Figma: whole card on purple-light bg, image fills top edge-to-edge,
 * text block (name/price/button) below with horizontal padding, left-aligned. */
/* Catalog card: full pastel card — image flush to the top, title below, then a
   price (left) / button (right) row pinned to the bottom (matches Figma). */
.ohime-product-card.ohime-product-card--catalog.wp-block-group {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "image image"
    "title title"
    "price atc";
  height: 100%;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-radius: 16px;
  padding: 0 0 0.875rem;   /* bottom room for the price/button row; image flush top */
  gap: 0;
  overflow: hidden;
}

/* Image: fills full width, square aspect, 10px radius on the image itself */
.ohime-product-card--catalog .ohime-product-card__image {
  grid-area: image;
  width: 100%;
  line-height: 0;       /* kill inline-block gap under image */
}

.ohime-product-card--catalog .ohime-product-card__image .wc-block-components-product-image,
.ohime-product-card--catalog .ohime-product-card__image figure,
.ohime-product-card--catalog .ohime-product-card__image .wp-block-woocommerce-product-image {
  width: 100%;
  margin: 0;
}

.ohime-product-card--catalog .ohime-product-card__image img,
.ohime-product-card--catalog .wc-block-components-product-image img,
.ohime-product-card--catalog figure img {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ohime-product-card--catalog .ohime-product-card__title {
  grid-area: title;
  align-self: start;
  padding: 0.625rem 0.75rem 0;
}

.ohime-product-card--catalog .ohime-product-card__price {
  grid-area: price;
  align-self: center;
  padding: 0.5rem 0 0 0.75rem;
}

.ohime-product-card--catalog .ohime-product-card__atc {
  grid-area: atc;
  align-self: center;
  justify-self: end;
  padding: 0.5rem 0.75rem 0 0.5rem;
}

/* Title: LEFT-aligned (override base center) */
.ohime-product-card--catalog .ohime-product-card__title .wc-block-components-product-title,
.ohime-product-card--catalog .ohime-product-card__title a,
.ohime-product-card--catalog .ohime-product-card__title h3 {
  text-align: left;
}

/* Price: LEFT-aligned (override base center) */
.ohime-product-card--catalog .ohime-product-card__price .wc-block-components-product-price,
.ohime-product-card--catalog .ohime-product-card__price .price,
.ohime-product-card--catalog .ohime-product-card__price bdi {
  text-align: left;
}

/* Button sized to content (not full-width) so it sits at the right of the row */
.ohime-product-card--catalog .ohime-product-card__atc .wp-block-button__link,
.ohime-product-card--catalog .ohime-product-card__atc .wc-block-components-product-button__button,
.ohime-product-card--catalog .wp-block-woocommerce-product-button a,
.ohime-product-card--catalog .wp-block-woocommerce-product-button button {
  display: inline-block;
  white-space: nowrap;
}

/* ── Catalog Toolbar ─────────────────────────────────────────────────────── */
.ohime-catalog-toolbar {
  align-items: center;
  padding-block: 0.75rem 1rem;
}

.ohime-catalog-toolbar__title {
  margin: 0;
}

.ohime-catalog-toolbar__controls {
  gap: 1.5rem;
  align-items: center;
}

/* Figma order: Filter then Sort by */
.ohime-catalog-toolbar__controls .ohime-catalog-filters { order: 1; }
.ohime-catalog-toolbar__controls .ohime-catalog-sort { order: 2; }

/* ── Sort by pill ────────────────────────────────────────────────────────── */
/*
 * WooCommerce catalog-sorting block renders:
 *   .wp-block-woocommerce-catalog-sorting
 *     .wc-block-catalog-sorting
 *       .wc-block-catalog-sorting__select (label)
 *       select.wc-block-catalog-sorting__select  ← or just a bare <select>
 *
 * In practice the block outputs a <select> directly inside the wrapper.
 * We target both the block wrapper class and the native select within it.
 */

.ohime-catalog-sort,
.ohime-catalog-sort .wc-block-catalog-sorting,
.wp-block-woocommerce-catalog-sorting.ohime-catalog-sort {
  display: flex;
  align-items: center;
}

/* The pill: wraps the native <select> */
.ohime-catalog-sort .wc-block-catalog-sorting,
.ohime-catalog-sort .woocommerce-ordering {
  position: relative;
}

/* Native <select> styled as a purple-light pill with chevron */
.ohime-catalog-sort select,
.wp-block-woocommerce-catalog-sorting.ohime-catalog-sort select,
.ohime-catalog-sort .wc-block-catalog-sorting select {
  appearance: none;
  -webkit-appearance: none;
  field-sizing: content; /* shrink to the selected value (not the widest option)
                            so "Sort by" sits flush against the container edge */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
  border: none;
  border-radius: 0;
  padding: 0 0 0 1.4rem; /* room for the left chevron */
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.9375rem !important; /* ~15px — beat WC's .woocommerce-ordering select */
  font-weight: 500;
  color: var(--wp--preset--color--contrast, #141412);
  letter-spacing: -0.01em;
  line-height: 1.2;
  height: auto;
  cursor: pointer;
  outline: none;
  transition: color 0.15s;
}

/* Reset WC's ordering <form> margin so the <select> centers in the toolbar row */
.ohime-catalog-sort .woocommerce-ordering,
.ohime-catalog-sort form.woocommerce-ordering {
  margin: 0;
  display: flex;
  align-items: center;
}

.ohime-catalog-sort select:hover,
.wp-block-woocommerce-catalog-sorting.ohime-catalog-sort select:hover,
.ohime-catalog-sort .wc-block-catalog-sorting select:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary, #ae91cd);
}

.ohime-catalog-sort select:focus-visible,
.wp-block-woocommerce-catalog-sorting.ohime-catalog-sort select:focus-visible,
.ohime-catalog-sort .wc-block-catalog-sorting select:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary, #ae91cd);
  outline-offset: 2px;
}

/* Hide any label text the block might render alongside the select */
.ohime-catalog-sort label,
.ohime-catalog-sort .wc-block-catalog-sorting__label {
  display: none;
}

/* ── Catalog — Tablet (≤899px): 2-col grid ─────────────────────────────── */
@media (max-width: 899px) {
  .ohime-catalog__grid .wc-block-product-template,
  .ohime-catalog__grid ul.wc-block-product-template,
  .ohime-catalog__grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── Catalog — Mobile (≤599px): 1-col grid (matches Figma full-width cards) */
@media (max-width: 599px) {
  .ohime-catalog__grid .wc-block-product-template,
  .ohime-catalog__grid ul.wc-block-product-template,
  .ohime-catalog__grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Toolbar: stack title above controls row */
  .ohime-catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.625rem 0.75rem;
  }

  /* Controls row (Sort + Filter pills): stay in a row, wrap if needed */
  .ohime-catalog-toolbar__controls {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Title: full-width, no bottom margin */
  .ohime-catalog-toolbar__title {
    width: 100%;
  }
}

/* ── Catalog Pagination — numbered ──────────────────────────────────────── */
/*
 * Regular numbered pagination (‹ 1 2 3 … 7 ›) below the product grid, styled to
 * match the site: circular tap targets in the heading font, the current page on a
 * solid dark pill (like the site's primary buttons), a lavender wash on hover.
 */

/* Pagination wrapper: centered row with breathing room above */
.ohime-catalog__grid .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
}

.ohime-catalog__grid .wp-block-query-pagination-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

/* Every page number + the prev/next controls share one circular pill shape */
.ohime-catalog__grid .wp-block-query-pagination .page-numbers,
.ohime-catalog__grid .wp-block-query-pagination-previous,
.ohime-catalog__grid .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--wp--preset--color--contrast, #141412);
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* Prev/next chevrons a touch larger */
.ohime-catalog__grid .wp-block-query-pagination-previous,
.ohime-catalog__grid .wp-block-query-pagination-next {
  font-size: 1.25rem;
}

/* Hover on any interactive control (not the current page) → lavender wash */
.ohime-catalog__grid .wp-block-query-pagination a.page-numbers:hover,
.ohime-catalog__grid .wp-block-query-pagination-previous:hover,
.ohime-catalog__grid .wp-block-query-pagination-next:hover {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
}

/* Current page → solid dark pill */
.ohime-catalog__grid .wp-block-query-pagination .page-numbers.current {
  background: var(--wp--preset--color--contrast, #141412);
  color: var(--wp--preset--color--base, #ffffff);
  font-weight: 700;
}

/* Ellipsis: muted, non-interactive */
.ohime-catalog__grid .wp-block-query-pagination .page-numbers.dots {
  min-width: 1.5rem;
  padding: 0;
  background: transparent;
  color: var(--wp--preset--color--gray-50, #999998);
  cursor: default;
}

/* Mobile: slightly tighter */
@media (max-width: 599px) {
  .ohime-catalog__grid .wp-block-query-pagination {
    gap: 0.125rem;
    padding-inline: 0;
    margin-top: 2rem;
  }
  .ohime-catalog__grid .wp-block-query-pagination .page-numbers,
  .ohime-catalog__grid .wp-block-query-pagination-previous,
  .ohime-catalog__grid .wp-block-query-pagination-next {
    min-width: 36px;
    height: 36px;
  }
}

/* ── Free Shipping — Mobile ─────────────────────────────────────────────── */
@media (max-width: 599px) {
  .ohime-shipping-wrap.wp-block-group {
    padding-inline: clamp(0.75rem, 4vw, 1rem);
  }

  .ohime-shipping {
    border-radius: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CATALOG FILTER DRAWER
   Figma: 438px right-side drawer over 50%-opacity black backdrop.
   Header: "Filters" title + close X (purple-light circle).
   Chips: selected = black bg/white text; unselected = bordered.
   Footer (sticky): "Apply filters" black pill + "Clear all" purple-light pill.
   Mobile (≤599px): full-width/full-height drawer.

   Strategy: The WooCommerce product-filters block has built-in overlay HTML
   (open-overlay button, overlay backdrop, overlay-dialog, header, footer).
   On desktop (≥601px) the block's own CSS forces everything inline and hides
   the open/close/header/footer. We override ALL of those rules here to keep
   drawer mode at every breakpoint.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Trigger: "Filters" pill (open-overlay button) ─────────────────────
   Shown inline in .ohime-catalog-toolbar__controls next to the Sort pill.
   The block wraps .wc-block-product-filters with display:inline-flex which
   makes the trigger sit inline naturally. ──────────────────────────────── */

.ohime-catalog-filters .wc-block-product-filters__open-overlay {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--wp--preset--color--contrast, #141412);
  border: none;
  border-radius: 0;
  padding: 0;
  height: auto;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.9375rem; /* ~15px, matches Sort by */
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
  flex-shrink: 0;
}

.ohime-catalog-filters .wc-block-product-filters__open-overlay:hover {
  background: transparent;
  color: var(--wp--preset--color--primary, #ae91cd);
}

/* Replace WC's funnel icon with a left chevron (matches Figma) */
.ohime-catalog-filters .wc-block-product-filters__open-overlay svg {
  display: none;
}

.ohime-catalog-filters .wc-block-product-filters__open-overlay::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Relabel the WC button text "Filter products" -> "Filter" */
.ohime-catalog-filters .wc-block-product-filters__open-overlay span {
  font-size: 0;
}
.ohime-catalog-filters .wc-block-product-filters__open-overlay span::after {
  content: "Filter";
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── 2. Override desktop "always inline" rules at ALL widths ───────────────
   The block's product-filters-style.css has a @media (min-width: 601px) block
   that forces: display:flex, hides open/close/header/footer, makes overlay
   position:relative, removes transition. We undo all of that. ─────────── */

/* The outer wrapper: always inline-flex so the trigger shows as a pill */
.ohime-catalog-filters.wp-block-woocommerce-product-filters,
.ohime-catalog-filters.wp-block-woocommerce-product-filters.is-overlay-opened {
  display: inline-flex;
  align-items: center;
}

/* Trigger: always visible (block hides it on desktop) */
.ohime-catalog-filters .wc-block-product-filters__open-overlay,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__open-overlay {
  display: flex;
}

/* Overlay backdrop: always fixed, covers full viewport */
.ohime-catalog-filters .wc-block-product-filters__overlay,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay {
  position: fixed;
  inset: 0;
  top: var(--top-padding, 0);
  pointer-events: none;
  background-color: transparent;
  transition: background-color 0.3s;
  z-index: 9999;
}

/* Backdrop goes dark when open */
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay {
  background-color: rgba(0, 0, 0, 0.50);
  pointer-events: auto;
}

/* Overlay wrapper: full height, relative container for the dialog */
.ohime-catalog-filters .wc-block-product-filters__overlay-wrapper,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Dialog: right-side drawer, 438px wide, slides in from right */
.ohime-catalog-filters .wc-block-product-filters__overlay-dialog,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 438px;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  background-color: var(--wp--preset--color--base, #ffffff);
  color: var(--wp--preset--color--contrast, #141412);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
}

/* Dialog slides in when open */
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
  transform: translateX(0);
}

/* ── 3. Drawer header: "Filters" title + X button ─────────────────────── */

.ohime-catalog-filters .wc-block-product-filters__overlay-header,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  flex-shrink: 0;
}

/* "Filters" title text — inject via CSS generated content on the header,
   or let the block render it. The block renders the close button in a
   flex-row-reverse container. We swap to normal order + add a title. */
.ohime-catalog-filters .wc-block-product-filters__overlay-header::before {
  content: "Filters";
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #141412);
  letter-spacing: -0.02em;
}

/* Close (X) button */
.ohime-catalog-filters .wc-block-product-filters__close-overlay,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__close-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--wp--preset--color--contrast, #141412);
  flex-shrink: 0;
  transition: background 0.15s;
}

.ohime-catalog-filters .wc-block-product-filters__close-overlay:hover {
  background: var(--wp--preset--color--purple-30, #e7def0);
}

.ohime-catalog-filters .wc-block-product-filters__close-overlay svg {
  width: 16px;
  height: 16px;
}

/* Hide the "Close" text span — keep only the SVG X icon */
.ohime-catalog-filters .wc-block-product-filters__close-overlay span {
  display: none;
}

/* ── 4. Drawer content: scrollable filter groups ─────────────────────── */

.ohime-catalog-filters .wc-block-product-filters__overlay-content,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--base, #ffffff);
}

/* Each filter group (attribute/price/active): separated by bottom border */
.ohime-catalog-filters .wc-block-product-filters__overlay-content > * {
  padding: 1rem 1.25rem;
  border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
}

/* Hide the active-filters group when empty (block uses hidden attr but belt+suspenders) */
.ohime-catalog-filters .wp-block-woocommerce-product-filter-active:empty,
.ohime-catalog-filters .wc-block-product-filter--hidden {
  display: none;
  padding: 0;
  border: none;
}

/* Filter group headings (Size, Material, Price) */
.ohime-catalog-filters .wc-block-product-filters__overlay-content h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #141412);
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
}

/* Filter group header row (heading + collapse chevron) */
.ohime-catalog-filters .wc-block-product-filter-attribute > .wp-block-group,
.ohime-catalog-filters .wc-block-product-filter-price > .wp-block-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 0;
}

/* ── 5. Chip styles (Size, Material filter chips) ────────────────────── */
/* Actual DOM structure: chips are <button class="wc-block-product-filter-chips__item">
   containing <span class="wc-block-product-filter-chips__label">.
   Selected state: aria-checked="true" on the button. ─────────────────── */

/* Fieldset wrapper — remove default browser border/padding */
.ohime-catalog-filters fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.ohime-catalog-filters legend {
  padding: 0;
}

/* Chips items container */
.ohime-catalog-filters .wc-block-product-filter-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* Chip = <button> element: bordered pill, unselected state */
.ohime-catalog-filters .wc-block-product-filter-chips__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--base, #ffffff);
  color: var(--wp--preset--color--contrast, #141412);
  border: 1.5px solid var(--wp--preset--color--gray-20, #d6d6d6);
  border-radius: 100px;
  padding: 0.3125rem 0.875rem;
  font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  min-height: 32px;
  text-decoration: none;
  list-style: none;
  margin: 0;
}

.ohime-catalog-filters .wc-block-product-filter-chips__item:hover {
  border-color: var(--wp--preset--color--contrast, #141412);
}

/* Selected chip: black bg / white text — Interactivity API sets aria-checked="true" */
.ohime-catalog-filters .wc-block-product-filter-chips__item[aria-checked="true"] {
  background: var(--wp--preset--color--contrast, #141412);
  color: var(--wp--preset--color--base, #ffffff);
  border-color: var(--wp--preset--color--contrast, #141412);
}

/* ── 6. Price slider ─────────────────────────────────────────────────── */

.ohime-catalog-filters .wc-block-price-filter__amount {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wp--preset--color--contrast, #141412);
}

.ohime-catalog-filters .wc-block-price-filter__range-input-wrapper {
  height: 4px;
  margin-block: 0.75rem;
}

.ohime-catalog-filters .wc-block-price-filter__range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: var(--wp--preset--color--contrast, #141412);
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ── 7. Active filters (removable chips row) ─────────────────────────── */

.ohime-catalog-filters .wc-block-product-filter-removable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ohime-catalog-filters .wc-block-product-filter-removable-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  border-radius: 100px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── 8. Drawer footer: Apply + Clear buttons ─────────────────────────── */

.ohime-catalog-filters .wc-block-product-filters__overlay-footer,
.ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-footer {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  background: var(--wp--preset--color--base, #ffffff);
  flex-shrink: 0;
}

/* "Apply filters" — black pill, full-width in footer */
.ohime-catalog-filters .wc-block-product-filters__apply {
  flex: 1 1 auto;
  width: 100%;
  background: var(--wp--preset--color--contrast, #141412);
  color: var(--wp--preset--color--base, #ffffff);
  border: none;
  border-radius: 100px;
  padding: 0.75rem 1.25rem;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ohime-catalog-filters .wc-block-product-filters__apply:hover {
  background: #2c2c2a;
}

/* "Clear all" — purple-light pill. Rendered inside the active-filters area
   as a <div class="wp-block-woocommerce-product-filter-clear-button">
   containing a <button>. Shown only when filters are active. */
.ohime-catalog-filters .wp-block-woocommerce-product-filter-clear-button button,
.ohime-catalog-filters .wc-block-product-filter-clear-button button,
.ohime-catalog-filters .wc-block-product-filter-clear-button a {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  border: none;
  border-radius: 100px;
  padding: 0.5rem 1.125rem;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ohime-catalog-filters .wp-block-woocommerce-product-filter-clear-button button:hover,
.ohime-catalog-filters .wc-block-product-filter-clear-button button:hover {
  background: var(--wp--preset--color--purple-30, #e7def0);
}

/* ── Single product ─────────────────────────────────────────────────────── */
/*
 * Figma: large main image (16px radius) + thumbnail strip below (16px gap,
 * thumbnails also 16px radius). Active thumbnail gets a subtle outline.
 * The woocommerce/product-gallery block with orientation:vertical (is-vertical)
 * stacks the viewer above the thumbnail strip.
 */

/* Main product gallery container — vertical stack */
.ohime-product__gallery .wc-block-product-gallery.is-vertical {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Large main image: 16px radius on the image wrapper and img */
.ohime-product__gallery .wc-block-product-gallery-large-image,
.ohime-product__gallery .wc-block-product-gallery-large-image .wc-block-components-product-image,
.ohime-product__gallery .wc-block-product-gallery-large-image .wc-block-components-product-image img {
  border-radius: 16px;
  overflow: hidden;
}

/* Thumbnail strip — horizontal row below main image */
.ohime-product__gallery .wc-block-product-gallery-thumbnails {
  width: 100%;
}

.ohime-product__gallery .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__scrollable {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Thumbnail images: 16px radius */
.ohime-product__gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
  border-radius: 16px;
  overflow: hidden;
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Active thumbnail: subtle ring outline */
.ohime-product__gallery .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
  outline: 2px solid var(--wp--preset--color--primary, #ae91cd);
  outline-offset: 2px;
}

/* Override the default WooCommerce outline-on-active-overlay behaviour */
.ohime-product__gallery .wc-block-product-gallery-thumbnails--active-outline
  .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
  border: none;
  padding: 0;
  outline: 2px solid var(--wp--preset--color--primary, #ae91cd);
  outline-offset: 2px;
}

/* Mobile: keep thumbnails horizontal below, ensure no wrapping breaks */
@media (max-width: 600px) {
  .ohime-product__gallery .wc-block-product-gallery.is-vertical {
    gap: 12px;
  }

  .ohime-product__gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
    width: 64px;
    height: 64px;
  }
}

/* ── 9. Mobile (≤599px): full-width drawer ───────────────────────────── */

@media (max-width: 599px) {
  .ohime-catalog-filters .wc-block-product-filters__overlay-dialog,
  .ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
    width: 100vw;
    max-width: 100vw;
  }

  /* Footer: stack buttons vertically on mobile */
  .ohime-catalog-filters .wc-block-product-filters__overlay-footer,
  .ohime-catalog-filters.is-overlay-opened .wc-block-product-filters__overlay-footer {
    flex-direction: column;
    gap: 0.625rem;
  }

  .ohime-catalog-filters .wc-block-product-filters__apply,
  .ohime-catalog-filters .wc-block-product-filter-clear-button {
    width: 100%;
    flex: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — INFO COLUMN
   Figma: title 26px Figtree tight; price 18px bold; chip size/color selector
   (3px radius, selected=black/white, available=bordered, disabled=gray);
   black "ADD TO CART" pill (100px radius).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Product title ───────────────────────────────────────────────────────── */
.ohime-product__info .ohime-product__title,
.ohime-product__info .wp-block-post-title {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.625rem; /* 26px */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wp--preset--color--contrast, #141412);
  margin-bottom: 0.5rem;
}

/* ── Product price ───────────────────────────────────────────────────────── */
.ohime-product__info .ohime-product__price .wc-block-components-product-price,
.ohime-product__info .ohime-product__price .price,
.ohime-product__info .ohime-product__price bdi,
.ohime-product__info .wp-block-woocommerce-product-price .price,
.ohime-product__info .wp-block-woocommerce-product-price bdi {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #141412);
  letter-spacing: -0.02em;
}

/* ── Variation chips — attribute name label ──────────────────────────────── */
/* The attribute-name block renders a <span> or <p> with the attribute name */
.ohime-product__info .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name,
.ohime-product__info .wc-block-add-to-cart-with-options-variation-selector-attribute-name {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--contrast, #141412);
}

/* ── Variation chips — pills container ───────────────────────────────────── */
/* Using .ohime-product scoping to beat :where() specificity without !important */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Individual chip (available/unselected) ──────────────────────────────── */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
  background-color: var(--wp--preset--color--base, #ffffff);
  color: var(--wp--preset--color--contrast, #141412);
  border: 0.5px solid var(--wp--preset--color--border, #c2c2c1);
  border-radius: 3px;
  padding: 0.3125rem 0.75rem; /* ~5px 12px */
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

/* ── Selected chip ───────────────────────────────────────────────────────── */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(
  .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked
) {
  background-color: var(--wp--preset--color--contrast, #141412);
  color: var(--wp--preset--color--base, #ffffff);
  border-color: var(--wp--preset--color--contrast, #141412);
}

/* ── Hover on available (not selected, not disabled) ─────────────────────── */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:hover:not(
  :has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:disabled)
) {
  border-color: var(--wp--preset--color--contrast, #141412);
}

/* ── Disabled/unavailable chip (kept visible, greyed, NO strikethrough) ──── */
/* Figma: unavailable sizes = plain gray text, no line-through */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(
  .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:disabled
) {
  color: #adadac; /* gray-40 */
  border-color: #e5e5e4;
  cursor: not-allowed;
  text-decoration: none;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
.ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus-within {
  outline: 2px solid var(--wp--preset--color--primary, #ae91cd);
  outline-offset: 2px;
}

/* ── Hide quantity selector (keep in markup for accessibility) ───────────── */
.ohime-product .wp-block-woocommerce-add-to-cart-with-options-quantity-selector {
  display: none;
}

/* ── Add to cart pill button ─────────────────────────────────────────────── */
/* Target by block data-block-name since className may not propagate on beta blocks */
.ohime-product [data-block-name="woocommerce/product-button"] .wp-block-button__link,
.ohime-product [data-block-name="woocommerce/product-button"] .wc-block-components-product-button__button,
.ohime-product .ohime-atc-pill .wp-block-woocommerce-product-button .wp-block-button__link,
.ohime-product .wp-block-woocommerce-product-button.ohime-atc-pill .wp-block-button__link {
  background: var(--wp--preset--color--contrast, #141412);
  color: #ffffff;
  border: none;
  border-radius: 100px;
  padding: 0.875rem 2rem;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
}

.ohime-product [data-block-name="woocommerce/product-button"] .wp-block-button__link:hover,
.ohime-product [data-block-name="woocommerce/product-button"] .wc-block-components-product-button__button:hover,
.ohime-product .ohime-atc-pill .wp-block-woocommerce-product-button .wp-block-button__link:hover {
  background: #2c2c2a;
  color: #ffffff;
  text-decoration: none;
}

/* ── Info column spacing ─────────────────────────────────────────────────── */
.ohime-product__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Ensure the ATC group takes full width so the pill stretches */
.ohime-product__info .wp-block-woocommerce-add-to-cart-with-options > .wp-block-group:last-child {
  margin-top: 1rem;
  width: 100%;
}

/* ── Mobile: stack product columns ──────────────────────────────────────── */
/* Using 781px = WP's native column-stacking breakpoint for consistency      */
@media (max-width: 781px) {
  /* Stack gallery above info (single column) */
  .ohime-product.wp-block-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .ohime-product__gallery,
  .ohime-product__info {
    flex-basis: 100% !important;
    width: 100%;
    max-width: 100%;
  }

  /* Chips: wrap + ensure tappable min target */
  .ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills {
    gap: 8px;
    flex-wrap: wrap;
  }

  .ohime-product .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    min-height: 44px;         /* WCAG touch target */
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ATC button: full-width on mobile */
  .ohime-product [data-block-name="woocommerce/product-button"] .wp-block-button__link,
  .ohime-product [data-block-name="woocommerce/product-button"] .wc-block-components-product-button__button,
  .ohime-product .ohime-atc-pill .wp-block-woocommerce-product-button .wp-block-button__link,
  .ohime-product .wp-block-woocommerce-product-button.ohime-atc-pill .wp-block-button__link {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }

  /* Accordions: full-width */
  .ohime-product .ohime-accordion {
    width: 100%;
  }

  /* Info column: tighten gap */
  .ohime-product__info {
    gap: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRODUCT ACCORDIONS — Details / Size Guide (core/details blocks)
   Figma: uppercase Figtree 14px bold summary header, 0.5px bottom border,
   chevron toggle, expandable content. Details open by default.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Reset native disclosure marker ─────────────────────────────────────── */
.ohime-product .ohime-accordion > summary {
  list-style: none;
}
.ohime-product .ohime-accordion > summary::-webkit-details-marker {
  display: none;
}

/* ── Summary row ─────────────────────────────────────────────────────────── */
.ohime-product .ohime-accordion {
  border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  margin-top: 0;
  padding: 0;
}

.ohime-product .ohime-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--contrast, #141412);
  cursor: pointer;
  user-select: none;
  gap: 0.5rem;
}

/* ── Chevron via ::after (rotates when open) ─────────────────────────────── */
.ohime-product .ohime-accordion > summary::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-top: -3px; /* optical centering */
}

.ohime-product .ohime-accordion[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* ── Expanded content area ───────────────────────────────────────────────── */
.ohime-product .ohime-accordion > *:not(summary) {
  padding-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast, #141412);
}

/* post-content rendered inside Details — inherit readable body styles */
.ohime-product .ohime-accordion .wp-block-post-content {
  font-size: 0.875rem;
  line-height: 1.6;
}

.ohime-product .ohime-accordion .wp-block-post-content p,
.ohime-product .ohime-accordion .wp-block-post-content ul,
.ohime-product .ohime-accordion .wp-block-post-content ol {
  margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIZE GUIDE PATTERN
   Bordered table grid, shaded header, small text, mobile horizontal scroll.
   ════════════════════════════════════════════════════════════════════════════ */

.ohime-size-guide {
  font-size: 0.8125rem;
}

/* Mobile horizontal scroll wrapper */
.ohime-size-guide .ohime-size-table,
.ohime-size-guide .wp-block-table {
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
}

/* Table base */
.ohime-size-guide .ohime-size-table table,
.ohime-size-guide .wp-block-table table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Header row — shaded */
.ohime-size-guide .ohime-size-table thead th,
.ohime-size-guide .wp-block-table thead th {
  background: var(--wp--preset--color--gray-5, #f5f5f4);
  color: var(--wp--preset--color--contrast, #141412);
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  border: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  text-align: center;
  white-space: nowrap;
}

/* Body cells */
.ohime-size-guide .ohime-size-table tbody td,
.ohime-size-guide .wp-block-table tbody td {
  padding: 0.3125rem 0.625rem;
  border: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  text-align: center;
  color: var(--wp--preset--color--contrast, #141412);
}

/* First column (size name) — slightly bolder */
.ohime-size-guide .ohime-size-table tbody td:first-child,
.ohime-size-guide .wp-block-table tbody td:first-child {
  font-weight: 600;
  background: var(--wp--preset--color--gray-5, #f5f5f4);
  white-space: nowrap;
}

/* Alternate row tint */
.ohime-size-guide .ohime-size-table tbody tr:nth-child(even) td,
.ohime-size-guide .wp-block-table tbody tr:nth-child(even) td {
  background: var(--wp--preset--color--gray-2, #fafaf9);
}
.ohime-size-guide .ohime-size-table tbody tr:nth-child(even) td:first-child,
.ohime-size-guide .wp-block-table tbody tr:nth-child(even) td:first-child {
  background: var(--wp--preset--color--gray-5, #f5f5f4);
}

/* Disclaimer paragraph */
.ohime-size-guide > p:last-child {
  font-size: 0.6875rem;
  color: #888886;
  margin-top: 0.75rem;
}

/* Section headings within size guide */
.ohime-size-guide h4 {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast, #141412);
  margin-top: 0;
  margin-bottom: 0.375rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   REVIEWS ACCORDION — woocommerce/product-reviews block
   Figma: star ratings in brand purple, review form styled cleanly,
   "Leave a review" submit = lavender pill (#efe9f5), black text.
   Note: Advantages/Disadvantages (non-standard WC fields) are omitted.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Reviews title (h3) ─────────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-reviews-title {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #141412);
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

/* ── Review template items ──────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-template {
  border-bottom: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  padding-block: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Star rating — brand purple ─────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-rating .wc-block-review-rating,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-rating .star-rating,
.ohime-product .ohime-accordion .wc-block-review-rating .star-rating,
.ohime-product .ohime-accordion .wc-review-item__star-rating .star-rating {
  color: var(--wp--preset--color--primary, #ae91cd);
}

.ohime-product .ohime-accordion .star-rating span::before,
.ohime-product .ohime-accordion .star-rating::before {
  color: var(--wp--preset--color--primary, #ae91cd);
}

/* ── Author name ────────────────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-author-name {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #141412);
}

.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-author-name a {
  color: inherit;
  text-decoration: none;
}

/* ── Review date ────────────────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-date,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-date time {
  font-size: 0.75rem;
  color: #888886;
}

/* ── Review body text ───────────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-content {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast, #141412);
}

/* ── Review form ────────────────────────────────────────────────────────── */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form {
  margin-top: 1rem;
}

/* Form title / heading */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form h3,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form .wc-block-review-form__title,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form legend {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--contrast, #141412);
  margin-bottom: 0.75rem;
}

/* Form labels */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form label,
.ohime-product .ohime-accordion .wc-block-review-form label {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--contrast, #141412);
  display: block;
  margin-bottom: 0.25rem;
}

/* Text inputs + textarea */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form input[type="text"],
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form input[type="email"],
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form textarea,
.ohime-product .ohime-accordion .wc-block-review-form input[type="text"],
.ohime-product .ohime-accordion .wc-block-review-form input[type="email"],
.ohime-product .ohime-accordion .wc-block-review-form textarea {
  width: 100%;
  border: 0.5px solid var(--wp--preset--color--gray-15, #e0e0e0);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: var(--wp--preset--font-family--body, sans-serif);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--contrast, #141412);
  background: #ffffff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 0.75rem;
}

.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form input:focus,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form textarea:focus,
.ohime-product .ohime-accordion .wc-block-review-form input:focus,
.ohime-product .ohime-accordion .wc-block-review-form textarea:focus {
  border-color: var(--wp--preset--color--primary, #ae91cd);
}

/* Star rating input in form — brand purple */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form .stars span a,
.ohime-product .ohime-accordion .wc-block-review-form .stars span a,
.ohime-product .ohime-accordion .comment-form-rating .stars a,
.ohime-product .ohime-accordion .comment-form-rating .stars span::before {
  color: var(--wp--preset--color--primary, #ae91cd);
}

/* Submit button — lavender pill (Figma: #efe9f5, black text, "Leave a review") */
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form input[type="submit"],
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form button[type="submit"],
.ohime-product .ohime-accordion .wc-block-review-form input[type="submit"],
.ohime-product .ohime-accordion .wc-block-review-form button[type="submit"],
.ohime-product .ohime-accordion #respond input#submit {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  border: none;
  border-radius: 100px;
  padding: 0.75rem 1.75rem;
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-block;
  margin-top: 0.25rem;
}

.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form input[type="submit"]:hover,
.ohime-product .ohime-accordion .wp-block-woocommerce-product-review-form button[type="submit"]:hover,
.ohime-product .ohime-accordion .wc-block-review-form input[type="submit"]:hover,
.ohime-product .ohime-accordion .wc-block-review-form button[type="submit"]:hover,
.ohime-product .ohime-accordion #respond input#submit:hover {
  background: #e2d8ef;
}

/* ── Related Products ────────────────────────────────────────────────────── */
/*
 * Sits below the two-column gallery+info row on the single-product page.
 * Reuses the catalog card design (.ohime-product-card--catalog) and the
 * 4-column grid (.ohime-catalog__grid). Only adds section-level spacing
 * and the heading style; card styles are inherited.
 */

.ohime-related {
  margin-top: 3rem;
  padding-bottom: 3rem;
}

.ohime-related__heading {
  font-family: var(--wp--preset--font-family--heading, Figtree, sans-serif);
  font-size: clamp(1.375rem, 2.5vw, 2rem); /* 22–32px */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--contrast, #141412);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* Related grid: inherits 4-col layout from .ohime-catalog__grid.
   No pagination inside, so no extra overrides needed for that. */

/* ── Related — Tablet (≤899px): 2-col ──────────────────────────────────── */
@media (max-width: 899px) {
  .ohime-related__grid .wc-block-product-template,
  .ohime-related__grid ul.wc-block-product-template,
  .ohime-related__grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── Related — Mobile (≤599px): 2-col (Figma shows 2 cards side by side) */
@media (max-width: 599px) {
  .ohime-related__grid .wc-block-product-template,
  .ohime-related__grid ul.wc-block-product-template,
  .ohime-related__grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ohime-related {
    margin-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ─────────────────────────  Search results page  ───────────────────────── */
/* Header: "Search results for" eyebrow + the quoted term. */
.ohime-search-head {
  margin-bottom: 1.5rem;
}
.ohime-search-head__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gray-60, #848483);
}
.ohime-search-head__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
}

/* Section label above the products grid and the posts list. */
.ohime-search-section {
  margin: 2.5rem 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ohime-search-section:first-of-type {
  margin-top: 0.5rem;
}

/* Non-product results: a clean, tappable list. */
.ohime-search-posts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
}
.ohime-search-posts__item {
  margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
}
.ohime-search-posts__link {
  display: block;
  padding: 1rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, padding-left 0.15s;
}
.ohime-search-posts__link:hover,
.ohime-search-posts__link:focus-visible {
  background: var(--wp--preset--color--purple-10, #f7f4fa);
  padding-left: 0.75rem;
}
.ohime-search-posts__type {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 100px;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--gray-80, #5b5b59);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ohime-search-posts__name {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--contrast, #141412);
}
.ohime-search-posts__excerpt {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--wp--preset--color--gray-70, #70706f);
}

.ohime-search-empty {
  padding: 2rem 0;
  font-size: 1.0625rem;
}