/**
 * BeYou — layer 4: reusable components.
 */

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.beyou-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--by-space-2);
  padding: 0.95rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--by-radius);
  background: var(--by-ink);
  color: var(--by-ivory);
  cursor: pointer;
  font-family: var(--by-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--by-track-wide);
  text-transform: uppercase;
  text-align: center;
  transition: background var(--by-motion-base), color var(--by-motion-base),
    border-color var(--by-motion-base), transform var(--by-motion-fast);
}

.beyou-btn:hover {
  background: var(--by-gold);
  color: var(--by-white);
  transform: translateY(-1px);
}

.beyou-btn:active {
  transform: none;
}

.beyou-btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.beyou-btn-outline:hover {
  background: var(--by-ink);
  border-color: var(--by-ink);
  color: var(--by-ivory);
}

.beyou-btn-light {
  background: var(--by-ivory);
  color: var(--by-ink);
}

.beyou-btn-light:hover {
  background: var(--by-gold);
  color: var(--by-white);
}

.beyou-btn-arrow {
  transition: transform var(--by-motion-base);
}

.beyou-btn:hover .beyou-btn-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .beyou-btn-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .beyou-btn:hover .beyou-btn-arrow {
  transform: scaleX(-1) translateX(4px);
}

.beyou-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-2);
  padding-block-end: 2px;
  border-block-end: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--by-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Hero — split editorial layout
   --------------------------------------------------------------------------
   Catalogue photography is square and shot on a white ground, so the hero
   presents it in its own panel instead of as a full-bleed backdrop. A dark
   scrim over a white product shot reads as washed-out grey and crops the
   product; a panel keeps the piece whole and the type on a stable surface.
   ========================================================================== */

.beyou-hero {
  padding-block: var(--by-space-6) var(--by-space-7);
  background: var(--by-ivory);
  border-block-end: var(--by-hairline);
}

.beyou-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.beyou-hero-copy {
  max-inline-size: 46ch;
}

.beyou-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-2);
  margin-block-end: var(--by-space-4);
  color: var(--by-muted);
  font-size: 0.6875rem;
  letter-spacing: var(--by-track-wider);
  text-transform: uppercase;
}

.beyou-status-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--by-gold);
  flex: none;
}

.beyou-hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.beyou-hero-title em {
  display: block;
  color: var(--by-gold);
  font-style: italic;
}

.beyou-hero-lead {
  max-inline-size: 46ch;
  margin-block: var(--by-space-4) var(--by-space-5);
  color: var(--by-ink-soft);
  font-size: 1.0625rem;
}

.beyou-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--by-space-3);
}

.beyou-hero-caption {
  max-inline-size: 34ch;
  margin-block-start: var(--by-space-5);
  padding-inline-start: var(--by-space-3);
  border-inline-start: 2px solid var(--by-gold);
  color: var(--by-muted);
  font-size: 0.8125rem;
}

.beyou-hero-caption strong {
  display: block;
  color: var(--by-ink);
  font-weight: 600;
}

/* Gallery: one primary panel with two supporting panels beside it. */
.beyou-hero-gallery {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--by-space-2);
}

.beyou-hero-figure {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--by-white);
  aspect-ratio: 1 / 1;
}

.beyou-hero-figure.is-primary {
  grid-row: span 2;
  aspect-ratio: auto;
  block-size: 100%;
}

.beyou-hero-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: clamp(0.5rem, 1.5vw, 1.25rem);
  transition: transform var(--by-motion-slow);
}

.beyou-hero-figure.is-primary img {
  padding: clamp(1rem, 2.5vw, 2rem);
}

.beyou-hero:hover .beyou-hero-figure.is-primary img {
  transform: scale(1.02);
}

/* Typographic fallback when no product photography is available. */
.beyou-hero--typographic .beyou-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding-block: var(--by-space-6);
}

.beyou-hero--typographic .beyou-hero-actions {
  justify-content: center;
}

.beyou-hero--typographic .beyou-hero-caption {
  margin-inline: auto;
}

@media (max-width: 860px) {
  .beyou-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .beyou-hero-copy {
    max-inline-size: none;
  }

  .beyou-hero-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .beyou-hero-figure.is-primary {
    grid-row: auto;
    grid-column: span 2;
    aspect-ratio: 4 / 3;
    block-size: auto;
  }
}

/* ==========================================================================
   Marquee strip (brand statement between sections)
   ========================================================================== */

.beyou-statement {
  padding-block: var(--by-space-6);
  background: var(--by-ink);
  color: var(--by-ivory);
  text-align: center;
}

.beyou-statement-text {
  max-inline-size: 30ch;
  margin-inline: auto;
  font-family: var(--by-font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
}

.beyou-statement-cite {
  display: block;
  margin-block-start: var(--by-space-4);
  color: var(--by-gold-light);
  font-family: var(--by-font-body);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: var(--by-track-wider);
  text-transform: uppercase;
}

/* ==========================================================================
   Value / assurance strips
   ========================================================================== */

.beyou-values {
  padding-block: var(--by-space-5);
  border-block-end: var(--by-hairline);
  background: var(--by-surface-raised);
}

.beyou-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--by-space-4);
}

.beyou-value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--by-space-3);
}

.beyou-value-icon {
  inline-size: 18px;
  color: var(--by-gold-ink);
  flex: none;
  margin-block-start: 3px;
}

.beyou-value-title {
  margin: 0 0 0.15rem;
  font-family: var(--by-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.beyou-value-desc {
  margin: 0;
  color: var(--by-muted);
  font-size: 0.8125rem;
}

.beyou-assurance-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--by-space-4);
  padding-block: var(--by-space-5);
  border-block-start: var(--by-hairline);
  text-align: center;
}

.beyou-assurance-item {
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
}

.beyou-assurance-item strong {
  font-weight: 600;
}

.beyou-assurance-item span {
  color: var(--by-muted);
}

.beyou-assurance-dot {
  color: var(--by-line);
}

/* ==========================================================================
   Category cards
   ========================================================================== */

.beyou-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.beyou-category-card {
  display: grid;
  gap: var(--by-space-3);
}

.beyou-cat-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--by-white);
  aspect-ratio: var(--by-ratio-product);
}

.beyou-cat-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  transition: transform var(--by-motion-slow);
}

.beyou-category-card:hover .beyou-cat-media img {
  transform: scale(1.04);
}

.beyou-cat-content {
  display: grid;
  gap: var(--by-space-1);
}

.beyou-cat-subtitle {
  color: var(--by-muted);
  font-size: 0.6875rem;
  letter-spacing: var(--by-track-wider);
  text-transform: uppercase;
}

.beyou-cat-title {
  display: block;
  margin: 0;
  font-family: var(--by-font-display);
  font-size: 1.5rem;
  line-height: 1.15;
}

.beyou-cat-link {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-2);
  color: var(--by-muted);
  font-size: 0.6875rem;
  letter-spacing: var(--by-track-wide);
  text-transform: uppercase;
  transition: color var(--by-motion-base);
}

.beyou-category-card:hover .beyou-cat-link,
.beyou-category-card:focus-visible .beyou-cat-link {
  color: var(--by-gold-ink);
}

/* ==========================================================================
   Editorial split
   ========================================================================== */

.beyou-editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.beyou-editorial-visual {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: var(--by-ratio-hero);
  background: var(--by-white);
  overflow: hidden;
}

.beyou-editorial-visual img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.beyou-editorial-heading {
  margin-block: 0 var(--by-space-4);
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
}

.beyou-editorial-p {
  max-inline-size: 54ch;
  color: var(--by-ink-soft);
}

.beyou-editorial-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--by-space-2);
  margin-block-start: var(--by-space-4);
}

.beyou-tag {
  padding: 0.4rem 0.85rem;
  border: var(--by-hairline);
  color: var(--by-ink-soft);
  font-size: 0.6875rem;
  letter-spacing: var(--by-track-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.beyou-accordion-details {
  margin-block-start: var(--by-space-5);
  border-block-start: var(--by-hairline);
}

.beyou-details-item {
  border-block-end: var(--by-hairline);
}

.beyou-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--by-space-3);
  padding-block: var(--by-space-3);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--by-track-wide);
  list-style: none;
  text-transform: uppercase;
}

.beyou-details-summary::-webkit-details-marker {
  display: none;
}

.beyou-details-icon {
  color: var(--by-gold-ink);
  font-size: 1.125rem;
  line-height: 1;
  transition: transform var(--by-motion-base);
}

.beyou-details-item[open] .beyou-details-icon {
  transform: rotate(45deg);
}

.beyou-details-content {
  padding-block-end: var(--by-space-4);
  color: var(--by-ink-soft);
  font-size: 0.9375rem;
}

/* ==========================================================================
   Page headers (catalog / standard pages)
   ========================================================================== */

.beyou-page-header {
  padding-block: calc(var(--by-space-6) + var(--by-space-3)) var(--by-space-5);
  border-block-end: var(--by-hairline);
  background: var(--by-surface-raised);
}

.beyou-page-title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.beyou-page-desc {
  max-inline-size: 60ch;
  margin-block-start: var(--by-space-3);
  color: var(--by-muted);
}

.beyou-page-wrapper {
  max-inline-size: 72ch;
  margin-inline: auto;
  padding-block: var(--by-space-6);
}

.beyou-breadcrumbs {
  margin-block-end: var(--by-space-4);
  color: var(--by-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.beyou-breadcrumb-sep {
  margin-inline: 0.4rem;
  color: var(--by-line);
}

/* ==========================================================================
   Small utilities and blog cards
   ========================================================================== */

.beyou-cta-block {
  margin-block-start: var(--by-space-5);
}

.beyou-post-card {
  padding-block: var(--by-space-4);
  border-block-end: var(--by-hairline);
}

.beyou-post-card .wp-block-post-title {
  margin-block: 0 var(--by-space-2);
  font-size: 1.5rem;
}

.beyou-footer-desc,
.beyou-footer-text {
  margin-block-end: var(--by-space-3);
}



/* Archive presentation: Concept 03, kept in the component layer. */
.beyou-archive-frame { position: relative; }
.beyou-archive-frame::before { content: ""; position: absolute; inset-block: 0; inset-inline: var(--by-gutter); border-inline: var(--by-hairline); pointer-events: none; }
.beyou-archive-frame .beyou-section { position: relative; }
.beyou-catalog-page .beyou-catalog-header { border-block-end: var(--by-hairline); }
.beyou-catalog-page .beyou-catalog-body { background: var(--by-ivory); }
.beyou-product-card { border-block-start: var(--by-hairline); padding-block-start: var(--by-space-3); }
.beyou-product-card::before { content: "ARCHIVE"; display: block; color: var(--by-muted); font-size: var(--wp--preset--font-size--x-small, .75rem); letter-spacing: .18em; margin-block-end: var(--by-space-2); }
.beyou-single-product-layout { border-block-start: var(--by-hairline); padding-block-start: var(--by-space-5); }
.beyou-section--archive { position: relative; overflow: clip; }
.beyou-archive-index { display: block; color: var(--by-gold-ink); font-size: var(--wp--preset--font-size--x-small, .75rem); letter-spacing: .18em; text-transform: uppercase; }
.beyou-section--archive > .beyou-archive-index { max-inline-size: var(--by-container); margin-inline: auto; padding-inline: var(--by-gutter); padding-block-start: var(--by-space-4); }
@media (max-width: 48rem) { .beyou-archive-frame::before { inset-inline: var(--by-space-2); } .beyou-hero { grid-template-columns: 1fr; } .beyou-hero h1 { max-inline-size: 12ch; font-size: clamp(2.75rem, 13vw, 4.5rem); } .beyou-values-grid { grid-template-columns: 1fr; } .beyou-product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 24.375rem) { .beyou-product-grid--4 { grid-template-columns: 1fr; } .beyou-section--archive > .beyou-archive-index { padding-inline: var(--by-space-3); } }
@media (prefers-reduced-motion: reduce) { .beyou-archive-frame *, .beyou-archive-frame *::before, .beyou-archive-frame *::after { scroll-behavior: auto !important; transition-duration: var(--by-duration-instant, .01s) !important; animation-duration: var(--by-duration-instant, .01s) !important; } }

/* Concept 03 editorial composition: product as object, index rail, alternating field. */
.beyou-hero { position: relative; isolation: isolate; }
.beyou-hero::after { content: "01"; position: absolute; inset-block-start: var(--by-space-4); inset-inline-end: var(--by-gutter); color: var(--by-gold-ink); font-size: var(--wp--preset--font-size--x-small, .75rem); letter-spacing: .2em; writing-mode: vertical-rl; }
.beyou-hero-copy { align-self: center; max-inline-size: 42rem; }
.beyou-hero-title { font-size: clamp(3rem, 8vw, 7rem); line-height: .9; letter-spacing: -.03em; }
.beyou-hero-gallery { transform: translateY(var(--by-space-4)); }
.beyou-hero-figure.is-primary { min-block-size: clamp(20rem, 44vw, 36rem); }
.beyou-hero-figure.is-primary img { object-fit: contain; }
.beyou-statement { background: var(--by-ink); color: var(--by-ivory); }
.beyou-statement .beyou-statement-text { max-inline-size: 14ch; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .95; }
.beyou-editorial-grid { align-items: stretch; }
.beyou-editorial-text { padding-block: var(--by-space-6); padding-inline: var(--by-space-5); background: var(--by-ink-soft); color: var(--by-ivory); }
.beyou-editorial-text .beyou-editorial-p { color: color-mix(in srgb, var(--by-ivory) 78%, transparent); }
.beyou-catalog-page .beyou-catalog-header { padding-block: var(--by-space-6); }
.beyou-single-product-layout { background: var(--by-white); }
@media (max-width: 48rem) { .beyou-hero::after { inset-inline-end: var(--by-space-3); } .beyou-hero-gallery { transform: none; } .beyou-editorial-text { padding-inline: var(--by-space-4); } }

/* Editorial variation uses position only; product data and naming stay untouched. */
.beyou-product-grid > :nth-child(3n+1) .beyou-product-card::before { content: "SELECTED / 01"; }
.beyou-product-grid > :nth-child(3n+2) .beyou-product-card::before { content: "SELECTED / 02"; }
.beyou-product-grid > :nth-child(3n) .beyou-product-card::before { content: "SELECTED / 03"; }
/* Keep archive markers sparse: one editorial index per three-card rhythm. */
.beyou-product-grid > :nth-child(3n+2) .beyou-product-card::before,
.beyou-product-grid > :nth-child(3n) .beyou-product-card::before { content: none; }

/* ==========================================================================
   Contact links (footer column and mobile drawer)
   ========================================================================== */

.beyou-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--by-space-3);
}

.beyou-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-3);
  text-decoration: none;
  transition: color var(--by-motion-fast);
}

.beyou-contact-icon {
  flex: none;
  color: var(--by-gold);
  transition: color var(--by-motion-fast);
}

.beyou-contact-link:hover .beyou-contact-icon,
.beyou-contact-link:focus-visible .beyou-contact-icon {
  color: var(--by-gold-light);
}

.beyou-contact-text {
  display: grid;
  gap: 0.15rem;
}

.beyou-contact-label {
  font-size: 0.6875rem;
  letter-spacing: var(--by-track-wider);
  text-transform: uppercase;
  opacity: 0.7;
}

.beyou-contact-value {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.beyou-contact-note {
  margin-block-start: var(--by-space-4);
}

/* Drawer variant sits on the ivory panel rather than the dark footer. */
.beyou-contact-list--drawer {
  margin-block-start: var(--by-space-3);
  padding-block-start: var(--by-space-3);
  border-block-start: var(--by-hairline);
}

.beyou-contact-list--drawer .beyou-contact-link {
  color: var(--by-ink);
}

.beyou-contact-list--drawer .beyou-contact-icon {
  color: var(--by-gold-ink);
}

.beyou-contact-list--drawer .beyou-contact-link:hover .beyou-contact-icon,
.beyou-contact-list--drawer .beyou-contact-link:focus-visible .beyou-contact-icon {
  color: var(--by-gold);
}

/* ==========================================================================
   Site logo
   --------------------------------------------------------------------------
   The brand lockup takes its image from the core site-logo block so the logo
   is swappable from Site Settings without a code change. Sizing and spacing
   live here rather than as inline styles on the image, and use logical
   properties so the lockup mirrors under RTL.
   ========================================================================== */

.beyou-brand-logo,
.beyou-brand-logo.wp-block-site-logo {
  margin: 0;
  margin-inline-end: var(--by-space-2);
  line-height: 0;
}

.beyou-brand-logo img {
  display: block;
  inline-size: 50px;
  block-size: auto;
  mix-blend-mode: multiply;
}

.beyou-drawer-brand .beyou-brand-logo img {
  inline-size: 44px;
}