/* ==========================================================================
   AURELLE — Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 2.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}

.btn-primary {
  background: var(--c-black);
  color: var(--c-ivory);
}
.btn-primary:hover { box-shadow: var(--shadow-gold); }
[data-theme="dark"] .btn-primary { background: var(--c-gold); color: var(--c-black); }

.btn-gold {
  background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
  color: var(--c-black);
}
.btn-gold:hover { box-shadow: var(--shadow-gold); }

.btn-outline {
  border-color: currentColor;
  background: transparent;
  color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
[data-theme="dark"] .btn-outline:hover { color: var(--accent-light); }

.btn-ghost {
  background: transparent;
  color: inherit;
  padding: 0.6rem 0;
  letter-spacing: var(--ls-wide);
}

.btn-sm { padding: 0.8rem 1.6rem; font-size: 0.68rem; }
.btn-block { width: 100%; }

.btn-icon {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hair);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent-deep); }
[data-theme="dark"] .btn-icon { background: var(--c-black); border-color: var(--border-hair-inverse); color: var(--text-primary); }
[data-theme="dark"] .btn-icon:hover { color: var(--accent-light); }
.btn-icon svg { width: 18px; height: 18px; }

/* magnetic wrapper — magnetic.js reads [data-magnetic] and animates a
   transform on the element itself, so the CSS just needs to promise a
   layer + smooth fallback transition for non-JS/reduced-motion states */
[data-magnetic] { will-change: transform; }

/* ---------- Facet frame ----------
   The site's signature: major image panels get one or two corners cut
   at an angle, echoing a gem's table facet, instead of a plain rectangle. */
.facet-frame {
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    var(--facet-cut) 0%, 100% 0%, 100% calc(100% - var(--facet-cut)),
    calc(100% - var(--facet-cut)) 100%, 0% 100%, 0% var(--facet-cut)
  );
  background: linear-gradient(155deg, var(--c-beige) 0%, var(--c-beige-deep) 60%, var(--c-gold-light) 130%);
}

/* Images inside facet frames always fill the frame — the reset's
   max-width/height:auto would otherwise leave them smaller than the
   card (the old placeholder icon was centered and filled the space).
   Absolute positioning takes the image out of flow so it can't push
   overlay content (card bodies, captions) out of place. */
.facet-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facet-frame--sm {
  clip-path: polygon(
    var(--facet-cut-sm) 0%, 100% 0%, 100% calc(100% - var(--facet-cut-sm)),
    calc(100% - var(--facet-cut-sm)) 100%, 0% 100%, 0% var(--facet-cut-sm)
  );
}

.facet-frame--dark {
  background: linear-gradient(155deg, #201C16 0%, var(--c-black) 55%, #241C10 130%);
}

.facet-frame::after {
  /* thin gold hairline tracing the cut edge */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(
    var(--facet-cut) 0%, 100% 0%, 100% calc(100% - var(--facet-cut)),
    calc(100% - var(--facet-cut)) 100%, 0% 100%, 0% var(--facet-cut)
  );
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, 0.35);
}

/* the reveal panel that wipes away on scroll-in (JS toggles .is-revealed) */
.facet-frame .reveal-mask {
  position: absolute;
  inset: 0;
  background: var(--c-black);
  transform-origin: bottom;
  z-index: 2;
}

/* placeholder art mark — centered icon shown until real photography is
   dropped in; product-card.blade.php and the hero both use this */
.placeholder-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-mark svg {
  width: 34%;
  height: 34%;
  max-width: 140px;
  opacity: 0.55;
}
.placeholder-mark svg * { stroke: var(--c-gold-deep); }
.facet-frame--dark .placeholder-mark svg * { stroke: var(--c-gold-light); }

/* ---------- Sparkle / shine sweep on hover ---------- */
.shine-sweep { position: relative; overflow: hidden; }
.shine-sweep::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(100deg, transparent, var(--shine) 50%, transparent);
  transform: rotate(20deg);
  opacity: 0;
  transition: opacity var(--dur-fast) ease, transform 1s var(--ease-out-soft);
  pointer-events: none;
  z-index: 3;
}
.shine-sweep:hover::before {
  opacity: 0.5;
  transform: rotate(20deg) translateX(220%);
}

/* ---------- Product card ---------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.4rem;
}

.product-card__media .placeholder-mark svg {
  transition: transform 0.8s var(--ease-out-soft);
}
.product-card:hover .product-card__media .placeholder-mark svg {
  transform: scale(1.08) rotate(-2deg);
}

.product-card__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.badge {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  background: var(--c-ivory);
  color: var(--c-black);
}
.badge--gold { background: var(--c-gold); color: var(--c-black); }
.badge--dark { background: var(--c-black); color: var(--c-ivory); }

.product-card__actions {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card__actions .btn-icon {
  width: 40px;
  height: 40px;
  background: var(--c-white);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.product-card__actions .btn-icon.is-active { color: var(--c-rose); }
.product-card__actions .btn-icon.is-active svg { fill: var(--c-rose); }
[data-theme="dark"] .product-card__actions .btn-icon { background: var(--c-black); border-color: var(--border-hair-inverse); }
[data-theme="dark"] .product-card__actions .btn-icon:hover { color: var(--accent-light); }

.product-card__quick-add {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.product-card:hover .product-card__quick-add,
.product-card:focus-within .product-card__quick-add {
  opacity: 1;
  transform: translateY(0);
}

.product-card__category {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
}
.product-card__name a::after { content: ''; position: absolute; inset: 0; }
.product-card__name a { position: relative; }

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.55rem;
}

.product-card__price {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.product-card__price .was {
  color: var(--text-secondary);
  text-decoration: line-through;
  font-size: 0.82em;
  margin-right: 0.5em;
}

/* ---------- Star rating ---------- */
.stars { display: inline-flex; gap: 0.2rem; }
.stars svg { width: 13px; height: 13px; }
.stars svg.is-filled { fill: var(--c-gold); stroke: var(--c-gold); }
.stars svg.is-empty { fill: none; stroke: var(--border-hair); }
.rating-count { font-size: var(--fs-xs); color: var(--text-secondary); margin-left: 0.4rem; }

/* ---------- Category tile ---------- */
.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2.75rem 1.25rem;
}

.category-tile__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid var(--border-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft);
}
.category-tile__icon svg { width: 36px; height: 36px; stroke: var(--c-gold-deep); }
[data-theme="dark"] .category-tile__icon svg { stroke: var(--c-gold-light); }

.category-tile:hover .category-tile__icon {
  border-color: var(--accent);
  transform: translateY(-6px) rotate(-4deg);
  box-shadow: var(--shadow-gold);
}

.category-tile__name { font-family: var(--font-display); font-size: var(--fs-md); }
.category-tile__count { font-size: var(--fs-xs); color: var(--text-secondary); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ---------- Forms ---------- */
.field {
  position: relative;
  margin-bottom: 1.6rem;
}

.field label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hair);
  padding: 0.7rem 0.1rem;
  font-size: var(--fs-base);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
.bg-inverse .field input,
.bg-inverse .field textarea,
.bg-inverse .field select { border-color: var(--border-hair-inverse); }

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

.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--accent); }

.field .field-error {
  color: #A44B3F;
  font-size: var(--fs-xs);
  margin-top: 0.5rem;
  display: block;
}

.field-inline {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-hair-inverse);
}
.field-inline input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 0.9rem 0.2rem;
  color: inherit;
  font-size: var(--fs-base);
}
.field-inline input::placeholder { color: rgba(247,243,236,0.45); }
.field-inline button { flex-shrink: 0; }

/* Inverse (dark-in-light / light-in-dark) sections: the input text and
   success message inherit the page text color, which can match the
   section background in one of the themes — scope them to the inverse
   text tokens instead. */
.bg-inverse .field-inline input { color: var(--text-inverse); }
.bg-inverse .field-inline input::placeholder { color: var(--text-inverse-faint); }
.bg-inverse .form-success { color: var(--text-inverse); }

.form-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 1rem;
}

.form-success {
  border: 1px solid var(--c-gold);
  padding: 1.1rem 1.4rem;
  font-size: var(--fs-sm);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.form-success svg { width: 18px; height: 18px; stroke: var(--c-gold); flex-shrink: 0; }

/* ---------- Accordion (FAQ) ---------- */
.accordion-item { border-bottom: 1px solid var(--border-hair); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.9rem 0;
  text-align: left;
}
.accordion-trigger h3 { font-size: var(--fs-md); font-weight: 500; }
.accordion-trigger .plus {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
  content: '';
  position: absolute;
  background: var(--c-gold-deep);
  [data-theme="dark"] & { background: var(--c-gold-light); }
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.accordion-trigger .plus::before { width: 100%; height: 1px; }
.accordion-trigger .plus::after { width: 1px; height: 100%; transition: transform var(--dur-base) var(--ease-out-soft); }
.accordion-item.is-open .accordion-trigger .plus::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-soft);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel p { padding-bottom: 1.9rem; max-width: 640px; padding-right: 2rem; }

/* ---------- Stat block ---------- */
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--accent);
}
.stat span { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Testimonial card ---------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(2rem, 1.6rem + 1.5vw, 3.25rem);
  background: var(--bg-card);
}
@media (max-width: 680px) {
  .testimonial-card { padding: 1.5rem; }
}
.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.testimonial-card__author { display: flex; align-items: center; gap: 1rem; }
.testimonial-card__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, var(--c-gold-light), var(--c-gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--c-black);
  flex-shrink: 0;
}
.testimonial-card__author strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
.testimonial-card__author span { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---------- Instagram tile ---------- */
.insta-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.insta-tile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14,13,12,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--c-ivory);
  font-size: var(--fs-sm);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-soft);
}
.insta-tile:hover .insta-tile__overlay { opacity: 1; }
.insta-tile:hover .placeholder-mark svg { transform: scale(1.1); }
.insta-tile .placeholder-mark svg { transition: transform 0.8s var(--ease-out-soft); }
.insta-tile__overlay svg { width: 16px; height: 16px; fill: var(--c-ivory); }

/* ---------- Modal / overlay shell (search, quick view, concierge) ---------- */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,13,12,0.6);
  backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out-soft), visibility var(--dur-base);
}
.overlay-backdrop.is-open { opacity: 1; visibility: visible; }

.modal-panel {
  position: fixed;
  z-index: var(--z-modal);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hair);
  background: var(--bg-card);
  color: var(--text-primary);
  z-index: 100;
}
.modal-close svg { width: 16px; height: 16px; }
[data-theme="dark"] .modal-close { background: var(--c-black); border-color: var(--border-hair-inverse); }
[data-theme="dark"] .modal-close:hover { color: var(--accent-light); }

/* ---------- Glassmorphism (header-on-scroll, floating panels) ---------- */
.glass {
  background: rgba(247, 243, 236, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(14,13,12,0.06);
}
[data-theme="dark"] .glass {
  background: rgba(14, 13, 12, 0.66);
  border-bottom-color: rgba(247,243,236,0.08);
}

/* ---------- Tag pill (payment badges, filter chips) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-hair);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* ---------- Quick View modal ---------- */
.quick-view-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 90vw);
  max-height: 85vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
  opacity: 0;
}
.quick-view-modal.is-open { visibility: visible; opacity: 1; }
.quick-view-modal__media { aspect-ratio: 1 / 1; }
.quick-view-modal__body { padding: clamp(2rem, 1.6rem + 2vw, 3.5rem); display: flex; flex-direction: column; }
.quick-view-modal__body h3 { font-size: var(--fs-lg); margin-top: 0.5rem; }
.quick-view-modal__body p { margin-top: 1rem; }
.quick-view-modal__price { font-family: var(--font-display); font-size: var(--fs-md); margin-top: 1.5rem; }
.quick-view-modal__actions { display: flex; gap: 1rem; margin-top: 1.75rem; }
.quick-view-modal__actions .btn { flex: 1; }
.quick-view-modal .link-arrow { margin-top: 1.75rem; align-self: flex-start; }

@media (max-width: 680px) {
  .quick-view-modal { grid-template-columns: 1fr; width: 92vw; }
}

/* ---------- Search overlay ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--c-black);
  color: var(--c-ivory);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(6rem, 15vh, 12rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out-soft), visibility var(--dur-base);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__inner { max-width: 720px; width: 100%; }
.search-overlay__field input {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-style: italic;
}
.search-results { margin-top: 2.5rem; display: flex; flex-direction: column; }
.search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border-hair-inverse);
  gap: 1rem;
}
.search-result__name { font-family: var(--font-display); font-size: var(--fs-md); }
.search-result__meta { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(247,243,236,0.55); white-space: nowrap; }

/* ---------- Concierge modal ---------- */
.concierge-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 90vw);
  padding: clamp(2rem, 1.6rem + 2vw, 3rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft), visibility var(--dur-base);
}
.concierge-modal.is-open { visibility: visible; opacity: 1; }
.concierge-modal h3 { font-size: var(--fs-lg); padding-right: 2rem; }
.concierge-modal > p { margin-top: 0.75rem; margin-bottom: 2rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--c-black);
  color: var(--c-ivory);
  padding: 1rem 1.75rem;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; stroke: var(--c-gold); }

/* ---------- Floating action stack ---------- */
.floating-actions {
  position: fixed;
  right: clamp(1.25rem, 1rem + 1vw, 2.25rem);
  bottom: clamp(1.25rem, 1rem + 1vw, 2.25rem);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.floating-actions__btn {
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.floating-actions__btn[data-concierge-trigger],
.floating-actions__btn[href*="wa.me"] {
  animation: pulse-ring 2.8s ease-out infinite;
}
.floating-actions__btn[data-back-to-top] {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.floating-actions__btn[data-back-to-top].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
@keyframes pulse-ring {
  0% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(176,141,87,0.4); }
  70% { box-shadow: var(--shadow-md), 0 0 0 10px rgba(176,141,87,0); }
  100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(176,141,87,0); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-actions__btn { animation: none; }
}
@media (max-width: 680px) {
  .floating-actions { bottom: 1rem; right: 1rem; }
  .floating-actions .btn-icon { width: 42px; height: 42px; }
}