/*
Theme Name: By Camila Quintero
Theme URI: https://bycamilaquintero.com
Author: By Camila Quintero
Description: Custom theme for the By Camila Quintero nail products & manicure course store, built on WooCommerce.
Version: 1.1.0
Text Domain: bycq
*/

:root {
  --color-brand-pink: #ffcdd4;
  --color-brand-pink-bg: #fff5f6;
  --color-brand-ivory: #fffcfa;
  --color-brand-white: #ffffff;
  --color-brand-text: #5a4d4a;
  --color-brand-text-muted: #7d6d69;
  --color-brand-pink-soft: #efa4b1;
  --color-brand-pink-active: #b5566e;
  --color-brand-border: #f2dde1;

  --cursor-pink: #efa4b1;
  --cursor-light: #ffcdd4;
  --cursor-dark: #5a4d4a;
  --cursor-size: 30px;

  --skeleton-from: #fff5f6;
  --skeleton-via: #fffcfa;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-brand-ivory);
  color: var(--color-brand-text);
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-brand-serif {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

.font-brand-script {
  font-family: "Sacramento", cursive;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 252, 250, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-brand-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-logo img {
  height: 56px;
  width: auto;
  display: block;
}

.brand-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-logo__by {
  font-family: "Sacramento", cursive;
  color: var(--cursor-pink);
  font-size: 18px;
}

.brand-logo__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin-top: -4px;
}

/* Always visible at every width — no hamburger/toggle, avoids the mobile
   dropdown positioning issues entirely. Wraps naturally on narrow screens. */
.main-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-brand-text);
  transition: color 150ms ease;
  padding: 4px 0;
}

.main-nav a:hover {
  color: var(--color-brand-pink-active);
}

@media (min-width: 900px) {
  .main-nav {
    gap: 32px;
  }
}

/* Catalog/Brands dropdowns — hover/focus reveal, so keyboard users tabbing
   through the trigger link can still reach the panel via focus-within. */
.main-nav__item {
  position: relative;
}

.main-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(90, 77, 74, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
  z-index: 50;
}

.main-nav__item:hover .main-nav__dropdown,
.main-nav__item:focus-within .main-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav__dropdown a {
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.main-nav__dropdown a:hover {
  background: var(--color-brand-pink-bg);
}

/* ── Homepage trust bar ────────────────────────────────────────────── */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 48px;
  padding: 32px 24px;
  background: var(--color-brand-pink-bg);
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.trust-bar__value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-brand-pink-active);
}

.trust-bar__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-text-muted);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.nav-toggle,
.header-icons button.nav-toggle {
  display: none !important;
}

.nav-toggle:hover {
  color: var(--color-brand-pink-active);
}

.nav-toggle__icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close {
  display: block;
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

.header-icons a,
.header-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: var(--color-brand-text);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.header-icons a:hover,
.header-icons button:hover {
  color: var(--color-brand-pink-active);
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-brand-pink-active);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-brand-border);
  background: var(--color-brand-white);
  margin-top: 64px;
}

.site-footer__grid {
  display: grid;
  gap: 40px;
  padding: 48px 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-text-muted);
  margin: 0 0 12px;
  font-family: "DM Sans", sans-serif;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.site-footer__bottom {
  border-top: 1px solid var(--color-brand-border);
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--color-brand-text-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease;
  border: 1px solid transparent;
}

.btn:hover {
  transform: scale(1.02);
}

.btn--primary {
  background: var(--color-brand-pink-active);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-brand-text);
  color: var(--color-brand-text);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 64px 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

.hero h1 {
  font-weight: 700;
  font-size: 46px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--color-brand-text);
}

.hero p {
  color: var(--color-brand-text-muted);
  margin: 0 0 24px;
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  gap: 16px;
}

/* ── Brands page ───────────────────────────────────────────────────── */
.brand-showcase {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-brand-border);
}

.brand-showcase:first-of-type {
  padding-top: 8px;
}

.brand-showcase:last-of-type {
  border-bottom: none;
}

.brand-showcase__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 24px;
}

.brand-showcase__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-brand-text);
  margin: 0;
}

.brand-showcase__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-pink-active);
  white-space: nowrap;
  transition: transform 150ms ease;
  display: inline-block;
}

.brand-showcase__link:hover {
  transform: translateX(4px);
}

.brand-showcase .products {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .brand-showcase .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero__art {
  background: var(--color-brand-pink-bg);
  border-radius: 24px;
  padding: 48px;
  text-align: center;
}

.hero__art img {
  max-width: 100%;
  height: auto;
}

/* ── Catalog filters ────────────────────────────────────────────────── */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.catalog-filters input[type="search"],
.catalog-filters select {
  border: 1px solid var(--color-brand-border);
  border-radius: 9999px;
  padding: 10px 18px;
  background: var(--color-brand-white);
  font-size: 14px;
  color: var(--color-brand-text);
  font-family: inherit;
}

.catalog-filters input[type="search"] {
  min-width: 220px;
  flex: 1 1 220px;
}

.catalog-filters__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-brand-border);
  border-radius: 9999px;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--color-brand-text);
  cursor: pointer;
}

.catalog-filters__checkbox input {
  accent-color: var(--color-brand-pink);
}

/* ── Product grid ───────────────────────────────────────────────────── */
.products {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  border: 1px solid var(--color-brand-border);
  border-radius: 16px;
  background: var(--color-brand-white);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(90, 77, 74, 0.08);
}

.product-card__image {
  aspect-ratio: 1 / 1;
  background: var(--color-brand-pink-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 9999px;
  color: #fff;
}

.product-card__badge--out {
  background: var(--color-brand-text);
}

.product-card__badge--low {
  background: var(--color-brand-pink-active);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  transition: transform 300ms ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-card__brand {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-text-muted);
}

.product-card__price {
  font-weight: 600;
}

/* ── Brand / category tiles (homepage) ─────────────────────────────── */
.bycq-carousel {
  position: relative;
}

.bycq-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bycq-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Added by JS once everything fits without scrolling: center the tiles and
   drop the arrows, so a handful of brands don't look stranded on the left. */
.bycq-carousel--fits .bycq-carousel__track {
  justify-content: center;
}

.bycq-carousel--fits .bycq-carousel__arrow {
  display: none;
}

.bycq-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-white);
  color: var(--color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(90, 77, 74, 0.14);
  z-index: 2;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.bycq-carousel__arrow:hover {
  background: var(--color-brand-pink-active);
  color: #fff;
  border-color: var(--color-brand-pink-active);
  transform: translateY(-50%) scale(1.06);
}

.bycq-carousel__arrow--prev {
  left: -8px;
}

.bycq-carousel__arrow--next {
  right: -8px;
}

@media (min-width: 900px) {
  .bycq-carousel__arrow--prev {
    left: -22px;
  }

  .bycq-carousel__arrow--next {
    right: -22px;
  }
}

.bycq-carousel__track .bycq-tile {
  flex: 0 0 calc(46% - 12px);
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .bycq-carousel__track .bycq-tile {
    flex-basis: calc(31.5% - 14px);
  }
}

@media (min-width: 1024px) {
  .bycq-carousel__track .bycq-tile {
    flex-basis: calc(20% - 16px);
  }
}

.bycq-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-pink-bg);
}

/* Static grid variant (Latest Trends: two rows of four, no carousel) */
.bycq-tile-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .bycq-tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .bycq-tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bycq-tile__image {
  position: absolute;
  inset: 0;
}

.bycq-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.bycq-tile:hover .bycq-tile__image img {
  transform: scale(1.06);
}

.bycq-tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.bycq-tile__label {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* ── Homepage scroll videos ────────────────────────────────────────── */
.scroll-video-section {
  padding: 24px 24px;
}

/* These are phone-shot portrait clips (9:16), not landscape footage — sized
   to their real aspect ratio and capped at a moderate width (like an
   Instagram Reel embed) instead of stretched to the page's full width.
   Stretching a ~500px-wide source video out to a 1280px landscape band
   forced 2-3x upscaling (the visible blur/pixelation) and cropped most of
   the frame away via object-fit:cover fighting the mismatched box shape.

   A single ~380px column also left a lot of dead space on a wide desktop
   screen (looked great on mobile, sparse on PC) — so on mobile only the
   first video in the row shows at all (identical to the original
   single-video look), and a second one joins it side by side once there's
   enough width to fit both without either shrinking past their cap. */
.scroll-video-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.scroll-video-row .scroll-video:nth-child(2) {
  display: none;
}

@media (min-width: 740px) {
  .scroll-video-row {
    flex-direction: row;
    justify-content: center;
  }

  .scroll-video-row .scroll-video:nth-child(2) {
    display: block;
  }
}

.scroll-video {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-brand-pink-bg);
  /* flex-shrink only, no flex-basis: a flex-basis here fixes a size on
     whichever axis is "main" for the row's current flex-direction — 380px
     wide on desktop's row layout (harmless, matches max-width anyway), but
     380px *tall* on mobile's column layout, fighting the aspect-ratio
     above and collapsing the box so only the top slice of the video showed. */
  flex-shrink: 0;
}

.scroll-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Section titles ─────────────────────────────────────────────────── */
.section {
  padding: 48px 24px;
}

.section__title {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 24px;
  text-align: center;
}

/* ── Skeleton shimmer (loading states) ─────────────────────────────── */
@keyframes bycq-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background-image: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-via) 50%, var(--skeleton-from) 75%);
  background-size: 200% 100%;
  animation: bycq-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}

/* ── Cursor ─────────────────────────────────────────────────────────── */
body.bycq-cursor-enabled,
body.bycq-cursor-enabled a,
body.bycq-cursor-enabled button:not(:disabled) {
  cursor: none;
}

body.bycq-cursor-enabled input,
body.bycq-cursor-enabled textarea,
body.bycq-cursor-enabled select,
body.bycq-cursor-enabled [contenteditable="true"] {
  cursor: text;
}

body.bycq-cursor-enabled button:disabled,
body.bycq-cursor-enabled [aria-disabled="true"] {
  cursor: not-allowed;
}

#bycq-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

#bycq-cursor .bycq-cursor-halo {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(var(--cursor-size) + 20px);
  height: calc(var(--cursor-size) + 20px);
  border-radius: 9999px;
  background: var(--cursor-pink);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

#bycq-cursor .bycq-cursor-mark {
  width: var(--cursor-size);
  height: var(--cursor-size);
  transform-origin: 0 0;
  transition: opacity 120ms ease, transform 180ms ease;
}

@keyframes bycq-droplet {
  0% { transform: scale(0.3); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── Page fade-in ───────────────────────────────────────────────────── */
@keyframes bycq-page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bycq-page-enter {
  animation: bycq-page-fade 400ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Navigation loading overlay ────────────────────────────────────── */
#bycq-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 245, 246, 0.88);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#bycq-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.bycq-loading-overlay__spinner {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-brand-white);
  box-shadow: 0 10px 30px rgba(90, 77, 74, 0.12);
}

.bycq-loading-overlay__spinner::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  border: 3px solid var(--color-brand-pink-bg);
  border-top-color: var(--color-brand-pink-active);
  animation: bycq-spin 900ms linear infinite;
}

.bycq-loading-overlay__spinner img {
  border-radius: 9999px;
  position: relative;
}

@keyframes bycq-spin {
  to { transform: rotate(360deg); }
}

/* ── Empty states ───────────────────────────────────────────────────── */
.empty-state {
  max-width: 380px;
  margin: 0 auto;
  padding: 56px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state p.title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  margin: 0;
}

.empty-state p.subtitle {
  color: var(--color-brand-text-muted);
  font-size: 14px;
  margin: 0;
}

/* ── Single product gallery ────────────────────────────────────────── */
.single-product-gallery .woocommerce-product-gallery {
  background: var(--color-brand-pink-bg);
  border-radius: 16px;
  padding: 32px;
}

.single-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.single-product-gallery .woocommerce-product-gallery__image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.single-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.single-product-gallery .flex-control-thumbs li {
  width: 64px;
}

.single-product-gallery .flex-control-thumbs img {
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
}

.single-product-gallery .flex-control-thumbs img:hover,
.single-product-gallery .flex-control-thumbs img.flex-active {
  border-color: var(--color-brand-pink-active);
  opacity: 1;
}

/* ── WooCommerce overrides ──────────────────────────────────────────── */
.woocommerce-page-wrapper .price,
.woocommerce-page-wrapper .woocommerce-Price-amount {
  color: var(--color-brand-text);
  font-weight: 600;
}

.woocommerce-page-wrapper del .woocommerce-Price-amount {
  color: var(--color-brand-text-muted);
  font-weight: 400;
  opacity: 0.8;
}

.woocommerce-page-wrapper ins {
  text-decoration: none;
}

.single_add_to_cart_button,
.woocommerce-page-wrapper button.button,
.woocommerce-page-wrapper input.button,
.woocommerce-page-wrapper #place_order,
.woocommerce-page-wrapper .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-pink-active) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: transform 150ms ease;
}

.woocommerce-page-wrapper button.button:hover,
.single_add_to_cart_button:hover {
  transform: scale(1.02);
}

.woocommerce-page-wrapper table.shop_table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  overflow: hidden;
}

.woocommerce-page-wrapper table.shop_table th,
.woocommerce-page-wrapper table.shop_table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-brand-border);
  text-align: left;
}

.woocommerce-page-wrapper .quantity input.qty {
  width: 64px;
  border-radius: 9999px;
  border: 1px solid var(--color-brand-border);
  padding: 8px 12px;
  background: transparent;
}

/* Single-product "buy box": quantity + Add to cart side by side instead of stacked with no breathing room. */
.woocommerce-page-wrapper form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}

.woocommerce-page-wrapper form.cart .quantity {
  margin: 0;
}

.woocommerce-page-wrapper form.cart .single_add_to_cart_button {
  margin: 0;
}

.woocommerce-page-wrapper form .form-row input.input-text,
.woocommerce-page-wrapper form .form-row select,
.woocommerce-page-wrapper form .form-row textarea {
  border-radius: 12px;
  border: 1px solid var(--color-brand-border);
  padding: 10px 14px;
  background: transparent;
  width: 100%;
}

.woocommerce-page-wrapper .woocommerce-message,
.woocommerce-page-wrapper .woocommerce-info {
  border-top-color: var(--color-brand-pink-active);
  background: var(--color-brand-pink-bg);
}

.woocommerce-page-wrapper a.remove {
  color: var(--color-brand-text-muted) !important;
}

.woocommerce-page-wrapper .star-rating span::before {
  color: var(--color-brand-pink-active);
}

/* ── Product reviews (single-product.php's comments_template()) ──────── */
.woocommerce-page-wrapper .woocommerce-Reviews-title,
.woocommerce-page-wrapper .comment-reply-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--color-brand-text);
}

.woocommerce-page-wrapper #reviews .commentlist {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.woocommerce-page-wrapper #reviews .comment_container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.woocommerce-page-wrapper #reviews .avatar {
  border-radius: 9999px;
  flex-shrink: 0;
}

.woocommerce-page-wrapper #reviews .woocommerce-review__author {
  font-weight: 600;
  color: var(--color-brand-text);
}

.woocommerce-page-wrapper #reviews .woocommerce-review__dash,
.woocommerce-page-wrapper #reviews .woocommerce-review__published-date {
  color: var(--color-brand-text-muted);
  font-size: 13px;
}

.woocommerce-page-wrapper #reviews .description p {
  color: var(--color-brand-text);
  margin: 6px 0 0;
}

/* Interactive star-rating widget WooCommerce injects into #rating on the review form */
.woocommerce-page-wrapper .comment-form-rating label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  color: var(--color-brand-text);
  display: block;
  margin-bottom: 8px;
}

.woocommerce-page-wrapper .stars a {
  color: var(--color-brand-border);
}

.woocommerce-page-wrapper .stars a:hover,
.woocommerce-page-wrapper .stars a.active {
  color: var(--color-brand-pink-active);
}

.woocommerce-page-wrapper #commentform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  margin-top: 16px;
}

.woocommerce-page-wrapper #commentform label {
  display: block;
  font-size: 13px;
  color: var(--color-brand-text-muted);
  margin-bottom: 6px;
}

.woocommerce-page-wrapper #commentform input[type="text"],
.woocommerce-page-wrapper #commentform input[type="email"],
.woocommerce-page-wrapper #commentform textarea {
  width: 100%;
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--color-brand-white);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--color-brand-text);
}

.woocommerce-page-wrapper #commentform input[type="text"]:focus,
.woocommerce-page-wrapper #commentform input[type="email"]:focus,
.woocommerce-page-wrapper #commentform textarea:focus {
  outline: none;
  border-color: var(--color-brand-pink-active);
}

.woocommerce-page-wrapper #commentform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-brand-text-muted);
}

.woocommerce-page-wrapper #commentform #submit {
  align-self: flex-start;
  background: var(--color-brand-pink-active);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 150ms ease;
}

.woocommerce-page-wrapper #commentform #submit:hover {
  transform: scale(1.02);
}

/* ── My Account: login / register ─────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account #customer_login {
  max-width: 780px;
  margin: 0 auto;
}

/*
 * WooCommerce's own CSS (.woocommerce .col2-set .col-1/.col-2) floats these
 * at width:48% each — forced with !important since something in the cascade
 * keeps winning against the un-guarded version of this rule. Covers every
 * .col2-set on My Account (login/register AND the Addresses list further
 * down use the exact same WooCommerce markup pattern) so both get the same
 * reliable grid layout instead of the fragile float one.
 */
#customer_login.col2-set,
.woocommerce-account .col2-set {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

@media (min-width: 640px) {
  #customer_login.col2-set,
  .woocommerce-account .col2-set {
    grid-template-columns: 1fr 1fr !important;
  }
}

#customer_login .col-1,
#customer_login .col-2,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
  float: none !important;
  width: auto !important;
  flex: none !important;
  /* Grid items default to a content-based automatic minimum size (min-width:
     auto), and overflow:hidden on the card styling below still lets that
     shrink the column well below its assigned 1fr track — the same visual
     collapse the float-based layout had, just inside grid this time.
     Forcing min-width: 0 makes it actually fill the track. */
  min-width: 0 !important;
}

#customer_login .col-1,
.woocommerce-account .col2-set .col-1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#customer_login .col-2,
.woocommerce-account .col2-set .col-2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

@media (min-width: 640px) {
  #customer_login .col-2,
  .woocommerce-account .col2-set .col-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .woocommerce-form-login:not(#customer_login .woocommerce-form-login) {
  position: relative;
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-border);
  border-radius: 24px;
  padding: 36px 32px;
  overflow: hidden;
}

.woocommerce-account .u-column1::before,
.woocommerce-account .u-column2::before {
  content: "";
  position: absolute;
  top: -36px;
  right: -36px;
  width: 110px;
  height: 110px;
  border-radius: 9999px;
  background: var(--color-brand-pink-bg);
  z-index: 0;
}

.woocommerce-account .u-column1 > *,
.woocommerce-account .u-column2 > * {
  position: relative;
  z-index: 1;
}

.woocommerce-account h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  margin: 0 0 20px;
}

.woocommerce-account .woocommerce-form-row {
  margin-bottom: 16px;
}

.woocommerce-account .woocommerce-form-row label {
  display: block;
  font-size: 13px;
  color: var(--color-brand-text-muted);
  margin-bottom: 6px;
}

.woocommerce-account input.input-text {
  width: 100%;
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--color-brand-pink-bg);
  font-family: inherit;
  font-size: 14px;
}

.woocommerce-account input.input-text:focus {
  outline: none;
  border-color: var(--color-brand-pink-active);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  background: var(--color-brand-pink-active) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-brand-text-muted);
  margin-right: 12px;
}

.woocommerce-account .woocommerce-LostPassword {
  margin-top: 14px;
  font-size: 13px;
}

.woocommerce-account .woocommerce-LostPassword a {
  color: var(--color-brand-pink-active);
}

/* ── Checkout ──────────────────────────────────────────────────────── */
.woocommerce-checkout h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-brand-text);
  margin: 0 0 20px;
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .woocommerce-checkout-review-order-table + h3,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  max-width: none;
}

/* WooCommerce's own billing/shipping split (.col-1/.col-2, 48%/48%) fights
   with our own two-column grid below — force it to stack in one column so
   fields inside the card get full width instead of being squeezed twice. */
.woocommerce-checkout .col2-set {
  display: block;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  row-gap: 12px;
  align-items: start;
}

@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1.4fr 1fr;
    /* Without this, a grid item spanning multiple auto rows (customer_details
       below) can inflate the earlier row's height as browsers distribute its
       size across every row it spans — that's what was pushing "Your order"
       away from its table. Capping auto rows to their own minimum content
       size stops that inflation. */
    grid-auto-rows: min-content;
  }

  /* form.checkout's direct children (#customer_details, the "Your order"
     h3, and #order_review) get auto-placed by grid row-major order with
     only grid-template-columns set — that put the heading alone in column
     2/row 1 and the actual order table in column 1/row 2, under the
     billing fields. Pin both order-review pieces to column 2 explicitly so
     "Your order" sits with its table, aligned with the top of the form. */
  .woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
  }
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-border);
  border-radius: 16px;
  padding: 24px;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  margin-bottom: 24px;
}

.bycq-create-account-nudge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-brand-pink-bg);
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.bycq-create-account-nudge strong {
  color: var(--color-brand-text);
  font-size: 14px;
}

.bycq-create-account-nudge span {
  color: var(--color-brand-text-muted);
  font-size: 13px;
}

.woocommerce-checkout .woocommerce-account-fields {
  background: var(--color-brand-pink-bg);
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 4px 18px;
  margin-bottom: 24px;
}

.woocommerce-checkout .woocommerce-account-fields .create-account {
  margin-bottom: 0 !important;
}

.woocommerce-checkout .woocommerce-account-fields label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-brand-text);
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-account-fields input.input-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand-pink-active);
}

.woocommerce-checkout .form-row {
  margin-bottom: 14px;
}

.woocommerce-checkout .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.woocommerce-checkout table.shop_table {
  margin-bottom: 20px;
}

.woocommerce-checkout #order_review_heading {
  margin-top: 0;
}

.woocommerce-checkout #payment {
  background: var(--color-brand-pink-bg);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout #payment .wc_payment_method {
  border-bottom: 1px solid var(--color-brand-border);
  padding: 12px 0;
}

.woocommerce-checkout #payment .wc_payment_method:last-of-type {
  border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
  background: var(--color-brand-white);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-brand-text-muted);
}

.woocommerce-checkout #place_order {
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px !important;
  font-size: 15px !important;
}

/* ── My Account dashboard ──────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  border-radius: 9999px;
  color: var(--color-brand-text);
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-brand-pink-bg);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-brand-pink-active);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
  margin-top: 32px;
}

/* WooCommerce's own core CSS (.woocommerce-account.woocommerce-page
   .woocommerce-MyAccount-content { float: right; width: 68%; }) is a
   leftover from the classic float-based My Account layout (sidebar
   float:left, content float:right) — never overridden before because
   nothing here previously needed the content area's own width, only the
   grid around it. Inside our grid layout that stray width:68% resolves
   against the wrong reference size, collapsing the whole content column.
   Matching WooCommerce's own selector shape (not just adding !important)
   so this wins on specificity too, not just importance. */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
}

@media (min-width: 900px) {
  .woocommerce-account.woocommerce-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
  }

  /* Logged-out Login/Register: same body classes as the dashboard, but no
     sidebar nav exists — force it back to a plain block so #customer_login's
     own grid/centering rules (above) are the only thing sizing it. */
  .woocommerce-account.woocommerce-page .woocommerce:has(#customer_login) {
    display: block !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--color-brand-white);
    border: 1px solid var(--color-brand-border);
    border-radius: 16px;
    padding: 16px;
  }

  /* WooCommerce's own core CSS (.woocommerce-account .woocommerce-MyAccount-
     navigation { float: left; width: 30%; }) is the sidebar half of the
     same classic float-based layout that broke .woocommerce-MyAccount-
     content above — never overridden before for the same reason. Left
     alone, this nav ends up spanning the whole grid row by itself (instead
     of sitting in the 220px column next to the content), pushing the
     address content down into its own row and squeezed into column 1. */
  .woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    /* Even after neutering the float/width above, nav and content were
       still landing in swapped, separate grid cells (nav in column 2's
       slot, content in column 1's, each on its own row) instead of sharing
       row 1 in DOM order — no rule anywhere sets grid-column/order to
       explain it, so rather than keep chasing the auto-placement cause,
       just pin both cells explicitly. */
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    margin-top: 0;
    /* Same auto-min-width grid shrink bug as the address cards below, just
       one level up: this is the "1fr" column of the sidebar+content grid
       above, and without this it collapses toward its content's minimum
       size instead of filling the remaining space next to the 220px nav. */
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  color: var(--color-brand-text-muted);
  margin-bottom: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content mark {
  background: none;
  color: var(--color-brand-pink-active);
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  background: var(--color-brand-pink-active) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  font-size: 14px;
}

/* The actual markup is <header class="woocommerce-Address-title title"><h2>
   ...</h2><a class="edit">...</a></header> — this used to target "h3" (never
   matches, WooCommerce renders an h2 here) so the flex layout below never
   applied and "Add Billing/Shipping address" just sat as a plain text link
   under the heading instead of a visible button next to it.
   Stacked (title, then button directly below) rather than side-by-side —
   "Add Shipping address" is longer than "Add Billing address", so a
   side-by-side row wrapped in one card but not the other, landing the
   button at a different height on each. Stacking always puts it in the
   same place regardless of text length. */
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.woocommerce-account .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-pink-active);
  color: #fff;
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 150ms ease;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
  transform: scale(1.03);
}

.woocommerce-account address {
  font-style: normal;
  line-height: 1.7;
  color: var(--color-brand-text-muted);
}

/* ── Catalog pagination ─────────────────────────────────────────────── */
.bycq-pagination {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bycq-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-white);
  color: var(--color-brand-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

a.bycq-pagination .page-numbers,
.bycq-pagination a.page-numbers {
  cursor: pointer;
}

.bycq-pagination a.page-numbers:hover {
  border-color: var(--color-brand-pink-active);
  color: var(--color-brand-pink-active);
  transform: translateY(-2px);
}

.bycq-pagination .page-numbers.current {
  background: var(--color-brand-pink-active);
  border-color: var(--color-brand-pink-active);
  color: #fff;
}

.bycq-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--color-brand-text-muted);
  min-width: 24px;
}

.bycq-pagination .page-numbers.prev,
.bycq-pagination .page-numbers.next {
  background: var(--color-brand-pink-bg);
  border-color: var(--color-brand-border);
  font-weight: 700;
}

.bycq-pagination .page-numbers.prev:hover,
.bycq-pagination .page-numbers.next:hover {
  background: var(--color-brand-pink-active);
  border-color: var(--color-brand-pink-active);
  color: #fff;
}

/* ── Quantity stepper (+/- buttons around WooCommerce's default input.qty) ─ */
.quantity.bycq-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-brand-border);
  border-radius: 9999px;
  overflow: hidden;
  background: var(--color-brand-white);
}

.bycq-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-brand-text);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.bycq-qty-btn:hover {
  background: var(--color-brand-pink-bg);
  color: var(--color-brand-pink-active);
}

.woocommerce-page-wrapper .quantity.bycq-qty input.qty {
  width: 40px;
  border: none;
  border-left: 1px solid var(--color-brand-border);
  border-right: 1px solid var(--color-brand-border);
  border-radius: 0;
  text-align: center;
  padding: 8px 4px;
  background: transparent;
  -moz-appearance: textfield;
}

.woocommerce-page-wrapper .quantity.bycq-qty input.qty::-webkit-inner-spin-button,
.woocommerce-page-wrapper .quantity.bycq-qty input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Cart page ─────────────────────────────────────────────────────── */
.woocommerce-cart .woocommerce-page-wrapper table.shop_table {
  border: none;
}

.woocommerce-cart table.shop_table thead {
  display: none;
}

@media (min-width: 768px) {
  .woocommerce-cart table.shop_table thead {
    display: table-header-group;
  }

  .woocommerce-cart table.shop_table thead th {
    border: none;
    color: var(--color-brand-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
}

.woocommerce-cart table.shop_table td {
  border: none;
  border-bottom: 1px solid var(--color-brand-border);
  vertical-align: middle;
}

.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-pink-bg);
  padding: 8px;
}

.woocommerce-cart table.shop_table td.product-name a {
  font-weight: 600;
  color: var(--color-brand-text);
}

.woocommerce-cart .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.woocommerce-cart .coupon input#coupon_code {
  border: 1px solid var(--color-brand-border);
  border-radius: 9999px;
  padding: 10px 18px;
  background: var(--color-brand-white);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-brand-text);
  min-width: 180px;
}

.woocommerce-cart .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--color-brand-pink-active);
}

/* WooCommerce renders the remove link as a plain "×" character — swap it
   for a small trash-can icon (inline SVG via mask, so it inherits color)
   instead of overriding the cart template just for this glyph. */
.woocommerce-cart table.shop_table a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--color-brand-pink-bg) !important;
  color: transparent !important;
  font-size: 0;
}

.woocommerce-cart table.shop_table a.remove::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--color-brand-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.woocommerce-cart table.shop_table a.remove:hover {
  background: var(--color-brand-pink-active) !important;
}

.woocommerce-cart table.shop_table a.remove:hover::before {
  background-color: #fff;
}

/* Shipping/tax never belong on the cart page (see the
   woocommerce_cart_ready_to_calc_shipping filter in functions.php) — that
   filter stops WooCommerce from calculating a rate, but it still falls
   back to rendering a "Calculate shipping" prompt row (plain class
   "shipping", not "woocommerce-shipping-totals"), and tax rows are a
   separate code path it doesn't touch at all. Hiding both with CSS is the
   one place that's guaranteed regardless of what WooCommerce's PHP side
   decides to fall back to. */
.woocommerce-cart .cart_totals tr.shipping,
.woocommerce-cart .cart_totals tr[class*="tax-rate"] {
  display: none !important;
}

.woocommerce-cart .cart-collaterals {
  max-width: none;
  margin: 24px 0 0;
}

.woocommerce-cart .cart_totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  background: var(--color-brand-pink-bg);
  border-radius: 16px;
  padding: 18px 24px;
}

.woocommerce-cart .cart_totals h2 {
  display: none;
}

.woocommerce-cart .cart_totals table.shop_table {
  display: flex !important;
  flex: 1 1 auto;
  flex-wrap: wrap !important;
  align-items: baseline;
  gap: 8px 40px;
}

.woocommerce-cart .cart_totals table.shop_table tbody,
.woocommerce-cart .cart_totals table.shop_table tfoot {
  display: contents !important;
}

.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px;
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th {
  display: block !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
}

.woocommerce-cart .cart_totals table.shop_table td::before {
  content: none !important;
}

.woocommerce-cart .cart_totals th {
  margin-right: 8px;
  color: var(--color-brand-text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-brand-text);
}

.woocommerce-cart .wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  flex: 0 0 auto;
}

.woocommerce-cart .wc-proceed-to-checkout p {
  margin: 0;
  max-width: 220px;
  font-size: 12px !important;
  text-align: right !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: inline-flex;
}

/* ── Checkout: returning-customer login banner + coupon toggle ────────── */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 10px;
  max-width: 420px;
}

.woocommerce-checkout .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-border);
  border-top: 1px solid var(--color-brand-border) !important;
  border-radius: 9999px;
  padding: 8px 16px;
  margin: 0;
  list-style: none;
  color: var(--color-brand-text);
  font-size: 13px;
}

.woocommerce-checkout .woocommerce-info::before {
  display: none;
}

.woocommerce-checkout .woocommerce-info a {
  color: var(--color-brand-pink-active);
  font-weight: 600;
  white-space: nowrap;
}

.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
  background: var(--color-brand-pink-bg);
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
}

.woocommerce-checkout .woocommerce-form-coupon .form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce-checkout .woocommerce-form-coupon .form-row input[type="text"] {
  flex: 1 1 200px;
  border: 1px solid var(--color-brand-border);
  border-radius: 9999px;
  padding: 10px 16px;
  background: var(--color-brand-white);
  font-size: 14px;
}

.woocommerce-checkout .woocommerce-form-login {
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

/* ── Checkout: payment methods as selectable cards ────────────────────── */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.woocommerce-checkout #payment .wc_payment_method {
  border: 1px solid var(--color-brand-border);
  border-bottom: 1px solid var(--color-brand-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--color-brand-white);
  transition: border-color 150ms ease;
}

.woocommerce-checkout #payment .wc_payment_method:has(input:checked) {
  border-color: var(--color-brand-pink-active);
  box-shadow: 0 0 0 1px var(--color-brand-pink-active);
}

.woocommerce-checkout #payment .wc_payment_method label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.woocommerce-checkout #payment .wc_payment_method img {
  height: 20px;
  width: auto;
  margin-left: 4px;
}

.woocommerce-checkout #payment .payment_box {
  border-radius: 10px;
  margin-top: 12px;
}