/* =========================================================================
   acf-sections.css — WordPress-specific additions only.
   theme.css and responsive.css are the untouched source stylesheets; nothing
   in here changes the existing design, it only styles the new capabilities:
   video in the product gallery, the listing-card mini carousel, and the
   section-settings visibility utilities.
   ========================================================================= */

/* --- Slick product gallery ---------------------------------------------
   Main slider + synced thumbnail slider. The figure keeps the source
   .gallery-main styling (3:4, rounded, alt background).

   CRITICAL: .product-detail and .product-gallery are CSS grids in the source
   stylesheet, and grid items default to min-width:auto — Slick's track then
   inflates the column on every re-measure (runaway 100000px track widths).
   min-width:0 + display:block break that feedback loop. */

.product-detail > .product-gallery,
.product-detail > .product-summary { min-width: 0; }

.product-gallery.slick-gallery { display: block; }

.slick-gallery .gallery-main-slider,
.slick-gallery .gallery-thumbs-slider {
  min-width: 0;
  max-width: 100%;
}

.slick-gallery .slick-list { max-width: 100%; }

.slick-gallery .gallery-slide { line-height: 0; }

/* The figure owns the 3:4 box (source styling); the link and image fill it
   absolutely so the photo can never collapse or overflow. */
.slick-gallery .gallery-slide .gallery-main { position: relative; }

.slick-gallery .gallery-slide .gallery-main a {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;
  cursor: zoom-in;
}

.slick-gallery .gallery-slide .gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Before slick boots: show only the first slide, no stacking jump. */
.gallery-main-slider:not(.slick-initialized) .gallery-slide:nth-child(n + 2) { display: none; }
.gallery-thumbs-slider:not(.slick-initialized) { display: flex; gap: 10px; }
.gallery-thumbs-slider:not(.slick-initialized) .gallery-thumb { width: calc(25% - 8px); }

/* Main slider arrows — the theme's round carousel buttons, on-image. */
.gallery-main-slider { position: relative; }

.gallery-main-slider .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition, 0.25s ease);
}

.gallery-main-slider .gallery-nav.prev { left: var(--space-3, 16px); }
.gallery-main-slider .gallery-nav.next { right: var(--space-3, 16px); }

.gallery-main-slider:hover .gallery-nav,
.gallery-main-slider:focus-within .gallery-nav {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .gallery-main-slider .gallery-nav { opacity: 1; pointer-events: auto; }
}

/* Thumbnail slider — mirrors the source .gallery-thumbs look. */
.gallery-thumbs-slider {
  margin-top: var(--space-3, 16px);
}

.gallery-thumbs-slider .slick-list { margin: 0 -5px; }
.gallery-thumbs-slider .slick-slide { padding: 0 5px; }

.gallery-thumbs-slider .gallery-thumb {
  position: relative;
  line-height: 0;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: border-color var(--transition, 0.25s ease);
}

.gallery-thumbs-slider .gallery-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gallery-thumbs-slider .slick-current .gallery-thumb,
.gallery-thumbs-slider .gallery-thumb:hover {
  border-color: var(--color-heading, #1a1a1a);
}

/* Fancybox counter/toolbar picks the brand colour. */
.fancybox__container { --fancybox-accent-color: #ea028c; }

/* --- Product gallery: video items ------------------------------------- */

.product-gallery .gallery-main .gallery-video,
.product-gallery .gallery-main .gallery-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.product-gallery .gallery-main .gallery-video {
  object-fit: cover;
  background: #000;
}

.product-gallery .gallery-main .gallery-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.product-gallery .gallery-main.is-video { cursor: default; }

/* Play badge on video thumbnails — reuses the button/icon language. */
.product-gallery .gallery-thumbs button { position: relative; }

.thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.thumb-play .icon {
  width: 30px;
  height: 30px;
  padding: 8px 6px 8px 10px;
  color: var(--color-heading, #1a1a1a);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* --- Listing cards: hover mini carousel -------------------------------- */

.product-card { position: relative; }

.product-card .media.card-gallery .card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* While the visitor is stepping through frames, the active frame wins and
   the hover crossfade stands down. */
.product-card .media.card-gallery.gallery-active img { opacity: 0 !important; }
.product-card .media.card-gallery.gallery-active img.frame-active { opacity: 1 !important; }

.product-card .media.card-gallery .badge-video {
  position: absolute;
  right: var(--space-2, 10px);
  bottom: var(--space-2, 10px);
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 0 0 2px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.product-card .card-nav {
  position: absolute;
  z-index: 3;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition, 0.25s ease);
}

.product-card .card-nav.prev { left: var(--space-2, 10px); }
.product-card .card-nav.next { right: var(--space-2, 10px); }

.product-card:hover .card-nav,
.product-card:focus-within .card-nav {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .product-card .card-nav { opacity: 1; pointer-events: auto; }
}

/* --- Section settings: visibility utilities ---------------------------- */
/* Breakpoints match responsive.css: mobile ≤768, tablet 769–1024. */

@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* --- Contact Form 7 — the wrappers ride the existing .site-form styles -- */

.wpcf7 .wpcf7-form-control-wrap { display: block; line-height: normal; }

.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  color: #b32d2e;
}

.wpcf7 .wpcf7-response-output {
  margin: var(--space-3, 16px) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-heading, #1a1a1a);
  border-radius: var(--radius-md, 12px);
  font-size: 0.95em;
}

.wpcf7 form.sent .wpcf7-response-output { border-color: #1d7c3f; color: #1d7c3f; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #b32d2e; color: #b32d2e; }

/* CF7's spinner must not become a flex column in row layouts. */
.wpcf7 .wpcf7-spinner { position: absolute; margin: 8px 0 0 12px; }

/* Inline catalogue form — CF7 wraps the input in a span, which would break
   the flex row; the span becomes the growing flex child instead. */
form.site-form.inline .form-group,
.site-form.inline .form-group { display: flex; margin-bottom: 0; }

.site-form.inline .form-group .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.site-form.inline .form-group .wpcf7-form-control-wrap input {
  width: 100%;
  min-height: 52px;
}

.site-form.inline .form-group input.wpcf7-submit {
  flex: 0 0 auto;
  min-height: 52px;
  margin-left: -1px;
}

/* CF7 sometimes autop-wraps the row — keep the <p> from breaking the flex. */
.site-form.inline > p { margin: 0; display: flex; }
.site-form.inline > p > .form-group { flex: 1 1 auto; }

/* --- Animated WhatsApp CTA ----------------------------------------------
   The catalogue/newsletter forms are replaced site-wide by this button:
   pulsing glow, shine sweep, waving icon. All CSS; honours reduced-motion. */

.whatsapp-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: parv-cta-pulse 2.4s ease-out infinite;
}

.whatsapp-cta:not(.small) {
  font-size: 1.02em;
  padding: 17px 34px;
}

@keyframes parv-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(234, 2, 140, 0.42); }
  65%  { box-shadow: 0 0 0 16px rgba(234, 2, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 2, 140, 0); }
}

/* Shine sweep across the button face. */
.whatsapp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: parv-cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes parv-cta-shine {
  0%, 55%   { transform: translateX(-110%); }
  80%, 100% { transform: translateX(110%); }
}

/* The icon gives a little wave. */
.whatsapp-cta .whatsapp-cta-icon {
  display: inline-flex;
  animation: parv-cta-wave 2.4s ease-in-out infinite;
  transform-origin: 60% 60%;
}

@keyframes parv-cta-wave {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-12deg) scale(1.08); }
  84% { transform: rotate(10deg) scale(1.08); }
  92% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-cta,
  .whatsapp-cta::after,
  .whatsapp-cta .whatsapp-cta-icon { animation: none; }
}

.whatsapp-band-cta {
  margin: var(--space-5, 40px) 0 0;
  text-align: center;
}

.footer-whatsapp-cta { margin: 0 0 var(--space-4, 24px); }

/* --- CF7 popup dialog ---------------------------------------------------
   Reuses the source .email-dialog shell; these are just guarantees. */

dialog.cf7-dialog:not([open]) { display: none; }

.cf7-dialog .email-dialog-body .wpcf7 { margin-top: var(--space-3, 16px); }

.cf7-dialog .wpcf7 p.form-actions { margin-bottom: 0; }

/* --- Coming soon page ---------------------------------------------------
   Self-contained: the page has no header/footer, so nothing here may rely
   on header- or footer-scoped rules from the source stylesheet. */

.coming-soon-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* The source stylesheet pads the body for the fixed announcement bar +
     header; this page has neither. */
  padding-top: 0 !important;
}

.coming-soon.email-capture {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 7vh, 90px) 0 0;
}

.coming-soon-inner {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 30px);
}

.coming-soon-inner > * { margin: 0; }

.coming-soon-mark img {
  width: clamp(96px, 12vh, 132px);
  height: auto;
  animation: parv-float 5s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(234, 2, 140, 0.18));
}

@keyframes parv-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon-mark img { animation: none; }
}

.coming-soon-inner .heading-group { max-width: 560px; }

.coming-soon .countdown { justify-content: center; }

.coming-soon-media {
  max-width: 480px;
  width: 100%;
}

.coming-soon-cta .btn {
  font-size: 1.05em;
  padding: 18px 36px;
}

.coming-soon-contact {
  display: flex;
  gap: 12px 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.coming-soon-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-heading, #1a1a1a);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
}

.coming-soon-contact a .icon { width: 17px; height: 17px; }
.coming-soon-contact a:hover { color: var(--color-primary-ink, #c1006f); }

/* Social icons — horizontal pill row (header/footer styles don't reach here). */
.coming-soon-inner .social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 clamp(24px, 5vh, 48px);
  padding: 0;
}

.coming-soon-inner .social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-heading, #1a1a1a);
  background: var(--color-bg, #fff);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 50%;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.coming-soon-inner .social-list a:hover {
  color: var(--color-primary, #ea028c);
  border-color: var(--color-primary, #ea028c);
  transform: translateY(-2px);
}

.coming-soon-inner .social-list svg { width: 18px; height: 18px; }

.coming-soon-marquee { margin-top: auto; }

.coming-soon-login {
  margin: 0;
  padding: 14px 0;
  text-align: center;
  font-size: 0.8em;
  background: var(--color-bg, #fff);
}

.coming-soon-login a { color: var(--color-muted, #777); text-decoration: none; }
.coming-soon-login a:hover { color: var(--color-primary, #ea028c); }

@media (max-width: 600px) {
  .coming-soon-cta .btn { width: 100%; justify-content: center; }
  .coming-soon-contact { flex-direction: column; align-items: center; }
}

/* --- Small WordPress niceties ------------------------------------------ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Logged-in admin bar sits above the fixed announcement bar + header. */
body.admin-bar .announcement-bar { top: 32px; }
body.admin-bar .site-header { margin-top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .announcement-bar { top: 46px; }
  body.admin-bar .site-header { margin-top: 46px; }
}

/* =========================================================================
   v1.8.0 additions
   ========================================================================= */

/* --- WhatsApp popup dialog (replaces the newsletter form popup) ---------
   The image column stretches to exactly the height of the content column. */

.newsletter-dialog .dialog-inner { align-items: stretch; }

.newsletter-dialog .dialog-media {
  position: relative;
  height: 100%;
  min-height: 260px;
  margin: 0;
  aspect-ratio: auto;
}

.newsletter-dialog .dialog-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-3, 16px);
}

.newsletter-dialog .dialog-body .heading-group { margin-bottom: var(--space-4, 24px); }
.newsletter-dialog .dialog-body .heading-group p { font-size: var(--fs-body, 1rem); }

.newsletter-dialog .dialog-cta { margin: 0 0 var(--space-3, 16px); }

.newsletter-dialog .dialog-alt-contact { margin: 0; font-size: 0.92em; }

.newsletter-dialog .dialog-alt-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-heading, #1a1a1a);
  text-decoration: none;
  font-weight: 600;
}

.newsletter-dialog .dialog-alt-contact a:hover { color: var(--color-primary-ink, #c1006f); }
.newsletter-dialog .dialog-alt-contact .icon { width: 15px; height: 15px; }

/* The floating back-to-top arrow and WhatsApp bubble showed through the
   popup's backdrop as a stray white arrow — hide both while it is open. */
body:has(dialog[open].newsletter-dialog) .back-to-top,
body:has(dialog[open].newsletter-dialog) .whatsapp-fab,
body:has(dialog[open].search-dialog) .back-to-top,
body:has(dialog[open].search-dialog) .whatsapp-fab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- Header search dialog + live suggestions --------------------------- */

.search-dialog {
  width: min(680px, calc(100vw - 40px));
  margin-top: 9vh;
  padding: 0;
  border: 1px solid var(--color-primary, #ea028c);
  background: var(--color-bg, #fff);
}

.search-dialog::backdrop { background: rgb(21 21 21 / 45%); }

.search-dialog-body { padding: var(--space-6, 48px) var(--space-5, 32px) var(--space-5, 32px); }

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
}

.search-input-row .search-input-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--color-muted, #777);
}

.search-input-row input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
}

.search-input-row .btn { flex: 0 0 auto; }

.search-suggestions {
  margin-top: var(--space-3, 16px);
  max-height: min(52vh, 420px);
  overflow: auto;
  display: block;
}

.search-suggestion-group {
  margin: var(--space-3, 16px) 0 var(--space-1, 6px);
  font-size: var(--fs-small, 0.8rem);
  letter-spacing: var(--ls-wide, 0.08em);
  text-transform: uppercase;
  color: var(--color-muted, #777);
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
  padding: 10px 12px;
  border-radius: var(--radius-md, 12px);
  color: var(--color-heading, #1a1a1a);
  text-decoration: none;
}

.search-suggestion:hover,
.search-suggestion.active {
  background: var(--color-bg-alt, #fff2f8);
  color: var(--color-primary-ink, #c1006f);
}

.search-suggestion > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-muted, #777);
}

.search-suggestion mark {
  background: none;
  color: var(--color-primary-ink, #c1006f);
  font-weight: 700;
}

.search-suggestion .suggestion-type {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.72em;
  letter-spacing: var(--ls-wide, 0.08em);
  text-transform: uppercase;
  color: var(--color-muted, #777);
}

.search-empty { margin-top: var(--space-4, 24px); color: var(--color-body, #444); }
.search-empty a { color: var(--color-primary-ink, #c1006f); }

@media (max-width: 600px) {
  .search-dialog-body { padding: var(--space-5, 32px) var(--space-4, 24px) var(--space-4, 24px); }
  .search-input-row .btn { display: none; }
}

/* --- Filter sidebar: compact, not sticky, groups closed by default ------ */

.filter-panel {
  position: static;
  top: auto;
  gap: var(--space-3, 16px);
  padding: var(--space-4, 24px);
}

.filter-panel .filter-head {
  gap: var(--space-2, 10px);
  padding-bottom: var(--space-3, 16px);
}

.filter-group summary {
  padding-block: var(--space-2, 10px);
  min-height: 0;
}

.filter-group .filter-options {
  gap: var(--space-1, 6px);
  padding-bottom: var(--space-3, 16px);
}

.filter-option { min-height: 34px; }

/* --- Mega menu: no dead zone between the link and the panel ------------- */

@media (hover: hover) {
  /* A taller invisible bridge over the gap, plus a short close delay so the
     pointer can travel from the link into the panel without it vanishing. */
  .site-header .main-nav .sub-menu::before {
    inset: -30px 0 auto;
    height: 30px;
  }

  .site-header .main-nav .sub-menu { transition-delay: 0.16s; }

  .site-header .main-nav .menu-item-has-children:hover > .sub-menu,
  .site-header .main-nav .menu-item-has-children:focus-within > .sub-menu {
    transition-delay: 0s;
  }
}

/* Promo tiles keep their shape even while an image is still to be set. */
.mega .menu-promo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* --- Spacing: product description ↔ enquiry box, contact intro ↔ form --- */

.product-summary .content-area { margin-bottom: var(--space-2, 10px); }
.product-summary .enquiry-box { margin-top: var(--space-2, 10px); }
.product-summary .accordion:first-of-type { margin-top: var(--space-3, 16px); }

.contact-layout .heading-group { margin-bottom: var(--space-5, 32px); }
.contact-layout .wpcf7 { display: block; }

/* --- Instagram feed via Smash Balloon shortcode ------------------------- */

.instagram-feed .instagram-shortcode { margin-top: var(--space-2, 10px); }
.instagram-feed .instagram-shortcode #sb_instagram { padding-bottom: 0 !important; }

/* --- Countdown split panel: colours ------------------------------------
   .split-panel paints itself --color-bg, which covered the section's pink —
   the on-dark countdown digits were sitting white on white. The panel now
   carries the brand pink itself, and every word on it is on-dark. */

.pre-order .split-panel { background: var(--color-primary-strong, #c4067a); }
.pre-order .panel-media { background: var(--color-primary-strong, #c4067a); }
.pre-order .panel-body { color: var(--color-on-dark, #fff); }
.pre-order .panel-body .heading { color: var(--color-on-dark, #fff); }
.pre-order .panel-body p { color: var(--color-on-dark, #fff); }
.pre-order .countdown { color: var(--color-on-dark, #fff); }

/* --- Scroll reveals: robust, CSS-driven ---------------------------------
   [data-anim] elements fade up as they enter, revealed by an
   IntersectionObserver (see custom.js) that recalculates on every scroll —
   immune to the layout shift from lazy images that used to leave content
   stuck invisible. Hidden ONLY when JS is on AND motion is welcome, so with
   JS off or reduced-motion the content is simply, always, visible. The .js
   class is set inline in <head> before first paint, so there is no flash. */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js [data-anim].anim-in {
    opacity: 1;
    transform: none;
  }
}

/* --- Listing: breathing room between the intro and the grid ------------- */
.page-header .listing { margin-top: var(--space-6, 48px); }

/* Quick links: a touch more air between rows, and never flush to the heading. */
.section .quick-link:first-child { padding-top: var(--space-3, 16px); }