/* =============================================================================
   NECKLACE CONFIGURATOR
   Mobile-first. All classes prefixed .store-necklace-*.
   Uses design tokens from base.css.
   ============================================================================= */

/* =============================================================================
   LOCAL FONTS — self-hosted from /fonts/.
   Font-family names match the originals in neclace_with_names.html exactly
   so necklace-configurator.js can use the same identifiers.
   ============================================================================= */

@font-face {
  font-family: "scriptMT";
  src: url('../fonts/SCRIPTBL.TTF') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "paradise";
  src: url('../fonts/paradise.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "odessa";
  src: url('../fonts/ODESSA.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "caligraphic";
  src: url('../fonts/CALIGRF.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "balpark";
  src: url('../fonts/ballw___.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "monotype";
  src: url('../fonts/MONOTYPE.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* =============================================================================
   GALLERY WRAPPER — single grid child; participates as column 1 of
   .store-product-top on desktop.
   ============================================================================= */

.store-necklace-gallery {
  min-width: 0; /* prevent grid blowout */
}

/* Mobile: stick the canvas so it stays visible while the user scrolls
   through name inputs, font picker, and size options below. */
@media (max-width: 1023px) {
  .store-necklace-gallery {
    position: sticky;
    top: var(--header-height, 64px);
    z-index: 2;
    background: var(--color-white);
  }

  /* Cap height so the sticky bar doesn't eat too much viewport */
  .store-necklace-gallery .store-necklace-preview {
    max-height: 45vh;
    overflow: hidden;
    padding: var(--space-4) var(--space-3);
  }

  /* Hide thumbnails in sticky mode — they'd scroll out of view anyway */
  .store-necklace-gallery .store-necklace-examples {
    display: none;
  }
}

/* Desktop: cap preview height so chains + text never push below the fold. */
@media (min-width: 1024px) {
  .store-necklace-preview {
    min-height: 280px;
    max-height: calc(100vh - var(--header-height, 64px) - 2rem);
  }
}

/* =============================================================================
   LIGHTBOX — thumbnail click handler (overlay built fully via JS inline styles,
   matching product-gallery.js; no CSS classes needed for the overlay itself)
   ============================================================================= */

.store-necklace-example-thumb {
  cursor: pointer;
}

.store-necklace-example-thumb:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* =============================================================================
   VARIATION PRICE — hide WC's per-variation price box.
   The main p.price above the form is mirrored via JS (MutationObserver).
   ============================================================================= */

/* !important required: WC JS sets display:block inline on this element */
.store-necklace-configurator ~ .single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}

/* =============================================================================
   PREVIEW — Exact port of neclace_with_names.html #section1 layout.
   Three table-cells: [left chain] [name text] [right chain]
   Chain images and name gradient/font are managed by necklace-configurator.js.
   ============================================================================= */

.store-necklace-preview {
  position: relative;
  width: 100%;
  background: var(--color-cream);
  padding: var(--space-4) var(--space-3) var(--space-10);
  box-sizing: border-box;
  border-radius: 4px;
}

/* Table layout — matches original #section1 { display: table; height: 250px } */
.store-necklace-display {
  display: table;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  height: 250px; /* original desktop height */
}

/* All three columns are table-cells.
   vertical-align: baseline — the actual CSS initial value for table-cell.
   With baseline alignment:
     • Chain cell: img has vertical-align:baseline → img BOTTOM is at the row baseline
     • Center cell: baseline = name text baseline
   Result: chain ring (img bottom) aligns exactly with the name text baseline —
   the visual pendant-at-chain-end effect the original achieves. */
.store-necklace-display > div {
  display: table-cell;
  vertical-align: baseline;
}

/* Left chain cell — right-aligned so chain image hugs the name text */
.store-necklace-display__chain--left {
  text-align: right;
  /* No explicit width — cell sizes to image content (70px) exactly like original */
}

/* Right chain cell — left-align (default) */
.store-necklace-display__chain--right {
  /* No explicit width — cell sizes to image content */
}

/* Chain images — original desktop: width:70px; height:auto; margin-bottom: 20-23px.
   Natural PNG size is 128×314px, so at width:70px → rendered height ≈ 172px.
   vertical-align: baseline — Astra applies img { vertical-align: middle } globally;
   override to baseline so the chain img BOTTOM sits at the row baseline, aligning
   the chain ring with the name text baseline (the pendant connection point).
   max-width override: Astra also sets img { max-width: 100% } which would clip the
   chain to the cell width if the cell is narrow — set to none so width:70px wins. */
.store-necklace-display__chain img {
  width: 70px;
  height: auto;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0;
  vertical-align: baseline !important; /* override Astra global img { vertical-align: middle } */
  max-width: none !important;          /* override Astra global img { max-width: 100% } */
  /* Kill Astra / WooCommerce parent theme image styles that bleed in */
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
}

.store-necklace-display__chain--left img {
  margin-bottom: 23px;
}

/* Centre cell — name text lives here.
   width: 10px mirrors the original #section1 > div:nth-child(2) { width: 10px }.
   In table-layout: auto this acts as a minimum-width hint: chain cells
   claim their image widths first; the center then expands to fit the name
   text content and shrinks when text is shorter. Without this, auto-layout
   over-allocates to the center and squeezes the chain cells. */
.store-necklace-display__center {
  text-align: center;
  width: 10px;
}

/*
 * Name div — direct port of original #name:
 *   font-size: 80px
 *   line-height: 100px
 *   margin-bottom: 40px
 *   font-weight: bold
 *   -webkit-background-clip: text (gradient set inline by JS)
 *   filter: drop-shadow(2px 2px #333)
 */
.store-necklace-display__name {
  font-size: 80px;    /* original desktop: 80px */
  line-height: 100px; /* original: 100px (fixed throughout) */
  margin: 0;
  padding: 0;
  margin-bottom: 40px; /* original desktop: 40px */
  font-weight: bold;
  text-align: center;
  /* NO word-break — original #name has none. word-break: break-word collapses
     the minimum content width to ~1 char, preventing the table cell from
     expanding beyond the width:10px hint. Without it the cell expands
     to fit the full name text width naturally. */
  white-space: nowrap;
}

/* Name-only rows (2 and 3): no chains, height driven by name text content.
   Matches prototype section3/section4: same 3-cell structure as Row 1,
   with empty left/right chain cells for column-width alignment.
   margin-top: -40px compensates for the 20px padding-bottom on the row above
   and the 20px padding-top on this row — keeps visual baseline spacing tight. */
.store-necklace-display--name-only {
  height: auto; /* override the 250px chain-row height */
  margin-top: -40px;
}

/* Empty chain cells in name-only rows must not add height. vertical-align:top
   prevents baseline-alignment from inflating the row to accommodate empty
   cell baselines. Cells default to baseline from .store-necklace-display > div;
   top overrides this so the row height = name text line-height only. */
.store-necklace-display--name-only > div {
  vertical-align: top;
}

/* Row 2 (name-only) follows Row 1 (compact chain row).
   Compact name1 gains padding-bottom: 20px → pushes row1 bottom down ~20px.
   Row2 gains padding-top: 20px → adds 20px above its text line.
   Total compensation: -40px (name1 padding-bottom) + (-20px pull-up from before) = -60px.
   This keeps Jovana→Dragana baseline spacing approximately equal to
   Dragana→Stanisa baseline spacing. */
.store-necklace-display--compact + .store-necklace-display--name-only {
  margin-top: -40px;
}

/* Name-only name divs: tight line-height + vertical padding.
   The padding is essential: filter: drop-shadow clips at the element's border box
   boundary. With line-height: 59px and font-size: 80px, glyphs (J swash, g
   descender, D ascender) overflow ≈19px above and below the line box — outside
   the filter region — making them invisible. padding: 20px 0 expands the border
   box to include the glyph ink. The -40px margin-top on the row compensates.
   This mirrors the original prototype's #n2/#n3 { padding: 2vmin } pattern. */
.store-necklace-display--name-only .store-necklace-display__name {
  margin-bottom: 0;
  line-height: 59px; /* prototype uses 52px on 70px font (ratio 0.74); scaled to 80px = 59px */
  padding: 20px 0;  /* accommodate glyph overflow in filter region */
}

/* Compact mode — Row 1 when 2+ names are active.
   Matches original section1 behaviour: height collapses to content
   (chain image height) so names 2 and 3 can stack immediately below.
   Only the 40px margin-bottom and 100px line-height are overridden
   so spacing matches the tight ratio used by name-only rows. */
.store-necklace-display--compact {
  height: auto; /* collapse to chain image height; override the 250px minimum */
}

.store-necklace-display--compact .store-necklace-display__name {
  margin-bottom: 0;
  line-height: 59px; /* match name-only rows: 59/80px ≈ 0.74 ratio = original 52/70px */
  padding: 20px 0;  /* accommodate glyph overflow in filter region (same as name-only) */
}

/* Placeholder — shown until the user starts typing */
.store-necklace-display__placeholder {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  letter-spacing: 5px;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: normal;
  /* Override the parent's -webkit-text-fill-color so placeholder is visible */
  -webkit-text-fill-color: var(--color-gold);
  filter: none;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* =============================================================================
   EXAMPLE THUMBNAILS — below canvas (same as standard product gallery thumbs)
   ============================================================================= */

.store-necklace-examples {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: var(--space-3);
}

.store-necklace-examples::-webkit-scrollbar {
  display: none;
}

.store-necklace-examples .store-gallery__item {
  flex-shrink: 0;
  flex: 0 0 auto; /* override mobile carousel rule that sets flex: 0 0 100% */
  width: clamp(56px, 14vw, 80px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-cream);
  cursor: pointer;
}

.store-necklace-examples .store-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
   CONFIGURATOR PANEL — right column (or stacked below canvas on mobile)
   ============================================================================= */

.store-necklace-configurator {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .store-necklace-configurator {
    margin-top: 0;
  }
}

/* --- Field row: label + input/pills --- */

.store-necklace-configurator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.store-necklace-configurator__field > label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Name inputs — bottom-border-only design system style */

.store-necklace-configurator__field input[type="text"] {
  width: 100%;
  padding: var(--space-2) 0;
  font-family: var(--font-serif);
  font-size: 1.25rem; /* ≥16px prevents iOS auto-zoom */
  color: var(--color-black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-sand);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
}

.store-necklace-configurator__field input[type="text"]:focus {
  border-bottom-color: var(--color-black);
}

.store-necklace-configurator__field input[type="text"]::placeholder {
  color: var(--color-light-gray);
}

/* Latin-only note below name inputs */
.store-necklace-latin-note {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray);
  font-style: italic;
  margin: 0;
}

/* =============================================================================
   TOOLTIP — <details>/<summary> based inline help
   ============================================================================= */

.store-necklace-configurator__field {
  position: relative;
}

/* Tooltip — mobile: inline callout  /  desktop: floating popover on hover
   ============================================================================= */

.store-necklace-tooltip {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-2);
}

/* Trigger — the "?" circle: black bg, white text */
.store-necklace-tooltip summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-black);
  border: none;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: opacity 0.15s ease;
}

.store-necklace-tooltip summary::-webkit-details-marker {
  display: none;
}

.store-necklace-tooltip[open] summary,
.store-necklace-tooltip summary:hover {
  opacity: 0.75;
}

.store-necklace-tooltip summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Info panel — mobile: inline callout below trigger */
.store-necklace-tooltip p {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-white);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-black);
  line-height: var(--leading-body);
  animation: necklace-tooltip-fade 0.15s ease;
}

@keyframes necklace-tooltip-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Desktop: floating popover on hover (JS sets [open] via mouseenter/mouseleave) */
@media (min-width: 1024px) {
  .store-necklace-tooltip {
    position: relative;
  }

  /* Transparent bridge fills the 10px gap between trigger and panel.
     While the mouse crosses it, it hovers over a child of <details>,
     so mouseleave does not fire on the parent. */
  .store-necklace-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 10px;
  }

  /* When [open]: display as floating card above the trigger.
     Show/hide is handled by the native [open] attribute via JS. */
  .store-necklace-tooltip[open] p {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: clamp(180px, 20vw, 260px);
    z-index: 20;
    animation: necklace-tooltip-fade 0.15s ease;
  }
}

/* =============================================================================
   FONT PILLS — each pill rendered in its own font-family
   ============================================================================= */

.store-necklace-font-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.store-necklace-font-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font-size: 1.1rem; /* readable at font's natural size */
  color: var(--color-black);
  background: transparent;
  border: 1px solid var(--color-sand);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  /* font-family set via inline style in PHP — each pill shows its own font */
}

.store-necklace-font-pill:hover {
  border-color: var(--color-gold);
}

.store-necklace-font-pill.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

.store-necklace-font-pill:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}



/* =============================================================================
   pa_name-count hidden select — WC variation engine needs it in the DOM
   ============================================================================= */

.store-necklace-name-count-select {
  display: none !important; /* override Astra/WC .variations select display rules */
}

/* =============================================================================
   SMALL MOBILE SCALING — proportional scale below 518px viewport.
   Base design is 520px wide (max-width of .store-necklace-display).
   Preview horizontal padding = var(--space-3) × 2 = 24px total.
   Available container width = (100vw - 24px).
   Every hardcoded px value is scaled by the ratio (100vw - 24px) / 520.
   This preserves the exact proportional gaps between chain images and name text
   that are calculated precisely for the 3-name pendant layout.
   ============================================================================= */
@media (max-width: 517px) {
  /* Override fixed 250px row height — let scaled chain images drive it */
  .store-necklace-display {
    height: auto;
  }

  /* Chain images: scale width and bottom margin proportionally */
  .store-necklace-display__chain img {
    width:         clamp(30px, calc((70  / 520) * (100vw - 24px)), 70px);
    margin-bottom: clamp( 9px, calc((20  / 520) * (100vw - 24px)), 20px);
  }

  /* Left chain has a slightly larger margin-bottom (23px vs 20px) */
  .store-necklace-display__chain--left img {
    margin-bottom: clamp(10px, calc((23  / 520) * (100vw - 24px)), 23px);
  }

  /* Name text: scale font-size, line-height, and spacing proportionally */
  .store-necklace-display__name {
    font-size:     clamp(36px, calc((80  / 520) * (100vw - 24px)), 80px);
    line-height:   clamp(45px, calc((100 / 520) * (100vw - 24px)), 100px);
    margin-bottom: clamp(18px, calc((40  / 520) * (100vw - 24px)), 40px);
  }

  /* Name-only rows (2 & 3) and compact row: scale the tighter line-height
     and glyph-overflow padding that accommodates swash/descender clipping */
  .store-necklace-display--name-only .store-necklace-display__name,
  .store-necklace-display--compact   .store-necklace-display__name {
    line-height: clamp(27px, calc((59 / 520) * (100vw - 24px)), 59px);
    padding:     clamp( 9px, calc((20 / 520) * (100vw - 24px)), 20px) 0;
  }

  /* Row spacing: compensate proportionally for scaled padding on both
     adjacent rows (base offset = -(padding-bottom + padding-top) = -40px) */
  .store-necklace-display--name-only,
  .store-necklace-display--compact + .store-necklace-display--name-only {
    margin-top: clamp(-40px, calc((-40 / 520) * (100vw - 24px)), -18px);
  }
}