/*
 Theme Name:   La Boutique
 Theme URI:    https://laboutique.co.il
 Description:  Premium flower eCommerce theme for La Boutique. RTL Hebrew, WooCommerce optimised.
 Author:       La Boutique
 Version:      1.0.0
 Requires PHP: 7.4
 Text Domain:  la-boutique
 WC requires at least: 7.0
 WC tested up to: 9.0
*/

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  /* Brand Palette — clean neutral, no warm brown */
  --c-bg:           #FFFFFF;
  --c-surface:      #F6F6F4;
  --c-surface-2:    #EDEDE9;
  --c-border:       rgba(0,0,0,.09);
  --c-border-dark:  rgba(0,0,0,.18);
  --c-gold:         #C5A84E;
  --c-gold-dark:    #A08840;
  --c-gold-lt:      rgba(197,168,78,.55);
  --c-text:         #1A1A1A;
  --c-text-2:       #555555;
  --c-text-3:       #888888;
  --c-white:        #FFFFFF;
  --c-error:        #c0392b;
  --c-success:      #27ae60;

  /* Typography */
  --f-body:         'Heebo', 'Assistant', system-ui, sans-serif;

  /* Spacing scale */
  --sp-xs:   8px;
  --sp-sm:   16px;
  --sp-md:   32px;
  --sp-lg:   64px;
  --sp-xl:   96px;
  --sp-2xl:  128px;

  /* Layout */
  --container:      1320px;
  --container-md:   900px;
  --container-sm:   600px;
  --header-h:       72px;
  --radius:         6px;
  --radius-lg:      12px;
  --radius-xl:      20px;

  /* Motion */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:       180ms;
  --dur-base:       320ms;
  --dur-slow:       560ms;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(30, 22, 16, 0.06);
  --shadow-md:  0 4px 20px rgba(30, 22, 16, 0.08);
  --shadow-lg:  0 12px 48px rgba(30, 22, 16, 0.12);
  --shadow-xl:  0 24px 80px rgba(30, 22, 16, 0.16);
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
}

body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5 { font-weight: 300; line-height: 1.2; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================
   LAYOUT HELPERS
   ============================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

/* =============================================
   TYPOGRAPHY SCALE
   ============================================= */
.t-display {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.t-h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
}

.t-h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
}

.t-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.t-body   { font-size: 0.95rem; font-weight: 300; }
.t-small  { font-size: 0.8rem;  font-weight: 300; }
.t-tiny   { font-size: 0.72rem; font-weight: 400; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  padding: 14px 36px;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* Primary — dark */
.btn-primary {
  background: var(--c-text);
  color: var(--c-white);
  border: 1.5px solid var(--c-text);
}
.btn-primary:hover {
  background: var(--c-gold-dark);
  border-color: var(--c-gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(168, 133, 74, 0.28);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
}
.btn-ghost:hover {
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-white);
}

/* Gold */
.btn-gold {
  background: var(--c-gold);
  color: var(--c-white);
  border: 1.5px solid var(--c-gold);
}
.btn-gold:hover {
  background: var(--c-gold-dark);
  border-color: var(--c-gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(168, 133, 74, 0.32);
}

/* Full width */
.btn-block { width: 100%; }

/* Size variants */
.btn-sm { padding: 10px 20px; font-size: 0.75rem; border-radius: var(--radius-lg); }
.btn-lg { padding: 17px 44px; font-size: 0.88rem; border-radius: 40px; }

/* Loading state */
.btn.is-loading { pointer-events: none; opacity: 0.72; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* =============================================
   FORM ELEMENTS
   ============================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-text-2);
  letter-spacing: 0.04em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--c-text);
  transition: border-color var(--dur-fast);
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

.field input::placeholder { color: var(--c-text-3); font-weight: 300; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes splashReveal {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

/* =============================================
   REVEAL ON SCROLL
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s var(--ease),
    transform 0.65s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* =============================================
   DIVIDER
   ============================================= */
.divider {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin-inline: auto;
}

/* =============================================
   SECTION HEADING (shared)
   ============================================= */
.section-heading {
  text-align: center;
  margin-bottom: clamp(var(--sp-md), 5vw, var(--sp-lg));
}

.section-heading .t-label { margin-bottom: 12px; }
.section-heading .t-h2 { margin-bottom: 10px; }
.section-heading .t-body { color: var(--c-text-3); max-width: 480px; margin-inline: auto; }

/* =============================================
   RESPONSIVE GRID UTILITIES
   ============================================= */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .grid-4 { grid-template-columns: 1fr; } }

/* =============================================
   TOAST
   ============================================= */
#lb-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 9999;
  background: var(--c-text);
  color: var(--c-white);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  border-radius: 40px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#lb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* =============================================
   LEGAL PAGES
   ============================================= */
.legal-container {
  max-width: 780px;
  padding-block: clamp(60px, 8vw, 100px);
}

.legal-page__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--c-text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.legal-page__updated {
  font-size: 0.82rem;
  color: var(--c-text-3);
  margin-bottom: 48px;
}

.legal-section {
  margin-bottom: 40px;
}

.legal-section h2 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}

.legal-section p,
.legal-section li {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--c-text-2);
  line-height: 1.8;
  margin-bottom: 8px;
}

.legal-section ul,
.legal-section ol {
  padding-inline-start: 20px;
  margin-bottom: 8px;
}

.legal-section a {
  color: var(--c-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-contact {
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--c-text-2);
  line-height: 2;
}

/* =============================================
   WHATSAPP FLOATING BUTTON
   ============================================= */
#lb-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 990;
  width: 52px;
  height: 52px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.38);
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  text-decoration: none;
}

#lb-whatsapp:hover {
  background: #1da851;
  transform: scale(1.07);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

/* =============================================
   MOBILE BREAKPOINT VARS
   ============================================= */
@media (max-width: 768px) {
  :root { --header-h: 58px; }

  #lb-whatsapp {
    width: 46px;
    height: 46px;
    bottom: 20px;
    right: 16px;
  }
}

/* =============================================
   PAGE CONTENT (page.php, single.php, search.php)
   ============================================= */
.page-content,
.single-content,
.lb-search-page {
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: var(--sp-xl);
  min-height: 60vh;
}

.single-content { max-width: var(--container-md); margin-inline: auto; }

/* Article */
.lb-article__header { margin-bottom: var(--sp-md); }
.lb-article__title  { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 200; }
.lb-article__meta   { font-size: 0.82rem; color: var(--c-text-3); margin-top: 8px; }
.lb-article__thumb  { margin-bottom: var(--sp-md); border-radius: var(--radius-lg); overflow: hidden; }
.lb-article__thumb img { width: 100%; height: auto; }
.lb-article__body   { font-weight: 300; line-height: 1.85; color: var(--c-text-2); }
.lb-article__body p { margin-bottom: 1.2em; }
.lb-article__body h2,
.lb-article__body h3 { font-weight: 300; color: var(--c-text); margin: var(--sp-md) 0 var(--sp-sm); }

/* 404 */
.lb-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: var(--sp-xl);
  min-height: 72vh;
  gap: 16px;
}
.lb-404__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 200;
  color: var(--c-text);
}
.lb-404__body {
  font-size: 1rem;
  font-weight: 300;
  color: var(--c-text-2);
  max-width: 420px;
  line-height: 1.7;
}

/* Search */
.lb-search-page .section-heading { margin-bottom: var(--sp-md); }
.lb-search-item {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--c-border);
}
.lb-search-item:last-child { border-bottom: none; }
.lb-search-item__title { font-size: 1.1rem; font-weight: 400; }
.lb-search-item__title a { color: var(--c-text); transition: color var(--dur-fast); }
.lb-search-item__title a:hover { color: var(--c-gold-dark); }
.lb-search-item__excerpt { font-size: 0.9rem; color: var(--c-text-2); margin-top: 6px; font-weight: 300; }
.lb-search-empty { color: var(--c-text-2); font-weight: 300; }