/**
 * Hayllo Brand Styles
 * Based on brand guidelines from hayllo_Website_styling__Logo.pdf
 * 
 * Color Palette:
 * - Primary/Button Hover: Violet #8C73B1
 * - Secondary/Button: Lavender #C8AADC
 * - Text (Light Mode): Dark Grey #333333
 * - Border/Add to Cart: Light Grey #AFAFAF
 * - Text (Dark Mode)/Background: White #FFFFFF
 * - Sale Label/Discounted Price: Neon Red #E64B64
 * - Hot Label: Pastel Orange #FFBE66
 * - Footer/Section Background 2: Light Lilac #F3F2F7
 * - Icon/Separate Line: Lavender Blue #D3D5ED
 * - Icon 2: Blue Purple #B9BEE8
 * 
 * Typography:
 * - Headings: Spectral Extra Bold
 * - Content/Buttons/Links: Lato
 */

/* ========== FONT IMPORTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700&display=swap');

/* ========== BRAND COLOR VARIABLES ========== */
:root {
  /* Primary Colors */
  --hayllo-violet: #8c73b1;
  --hayllo-lavender: #c8aadc;

  /* Text Colors */
  --hayllo-dark-grey: #333333;
  --hayllo-light-grey: #afafaf;
  --hayllo-white: #ffffff;

  /* Accent Colors */
  --hayllo-neon-red: #e64b64;
  --hayllo-pastel-orange: #ffbe66;

  /* Background Colors */
  --hayllo-light-lilac: #f3f2f7;
  --hayllo-lavender-blue: #d3d5ed;
  --hayllo-blue-purple: #b9bee8;

  /* Button Styles */
  --hayllo-button-border-radius: 35px;
  --hayllo-button-min-height: 40px;
  --hayllo-button-padding: 12px 20px;
  --hayllo-button-border: 1px solid var(--hayllo-light-grey);
}

/* ========== TYPOGRAPHY ========== */

/* Headings - Scoped to .hayllo-plugin wrapper */
.hayllo-plugin h1,
.hayllo-plugin h2,
.hayllo-plugin h3,
.hayllo-plugin h4,
.hayllo-plugin h5,
.hayllo-plugin h6,
.hayllo-heading {
  font-weight: 800;
}

/* H1 - Heading (Page, Blog) */
.hayllo-plugin h1 {
  font-family: 'Spectral', sans-serif;
  font-size: 36px;
  text-transform: capitalize;
}

/* H2 - Subheading */
.hayllo-plugin h2 {
  font-family: 'Spectral', sans-serif;
  font-size: 24px;
  text-transform: capitalize;
}

/* H3 - Title */
.hayllo-plugin h3 {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* Body Text - Scoped to .hayllo-plugin wrapper */
.hayllo-plugin,
.hayllo-body-text,
.hayllo-plugin p,
.hayllo-plugin span,
.hayllo-plugin div {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

/* Links */
a.hayllo-link,
.hayllo-plugin a {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--hayllo-violet);
  text-decoration: underline;
}

a.hayllo-link:hover,
.hayllo-plugin a:hover {
  color: var(--hayllo-violet);
  text-decoration: underline;
}

/* Labels */
.hayllo-label {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* ========== BUTTONS ========== */

/* Primary Button */
.hayllo-btn-primary,
button.hayllo-btn-primary,
a.hayllo-btn-primary {
  background-color: var(--hayllo-violet);
  color: var(--hayllo-white);
  border: var(--hayllo-button-border);
  border-radius: var(--hayllo-button-border-radius);
  min-height: var(--hayllo-button-min-height);
  padding: var(--hayllo-button-padding);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hayllo-btn-primary:hover,
button.hayllo-btn-primary:hover,
a.hayllo-btn-primary:hover {
  background-color: var(--hayllo-lavender);
  color: var(--hayllo-white);
}

.hayllo-btn-primary:disabled,
button.hayllo-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary Button */
.hayllo-btn-secondary,
button.hayllo-btn-secondary,
a.hayllo-btn-secondary {
  background-color: var(--hayllo-lavender);
  color: var(--hayllo-white);
  border: var(--hayllo-button-border);
  border-radius: var(--hayllo-button-border-radius);
  min-height: var(--hayllo-button-min-height);
  padding: var(--hayllo-button-padding);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hayllo-btn-secondary:hover,
button.hayllo-btn-secondary:hover,
a.hayllo-btn-secondary:hover {
  background-color: var(--hayllo-violet);
}

.hayllo-btn-secondary:disabled,
button.hayllo-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== PRICING ========== */

/* Regular Price */
.hayllo-price {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--hayllo-dark-grey);
}

/* Discounted Price */
.hayllo-price-discounted,
.hayllo-sale-price {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--hayllo-neon-red);
}

/* ========== LABELS ========== */

/* Product Label */
.hayllo-product-label {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--hayllo-white);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Sale Label */
.hayllo-sale-label {
  background-color: var(--hayllo-neon-red);
}

/* Hot Label */
.hayllo-hot-label {
  background-color: var(--hayllo-pastel-orange);
}

/* ========== FORM ELEMENTS ========== */

/* Input Fields */
input.hayllo-input,
textarea.hayllo-input,
select.hayllo-input {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  border: 1px solid var(--hayllo-light-grey);
  border-radius: 4px;
  padding: 12px;
  transition: border-color 0.2s ease;
}

input.hayllo-input:focus,
textarea.hayllo-input:focus,
select.hayllo-input:focus {
  border-color: var(--hayllo-violet);
  outline: none;
  box-shadow: 0 0 0 2px rgba(140, 115, 177, 0.2);
}

/* ========== UTILITY CLASSES ========== */

/* Background Colors */
.hayllo-bg-violet {
  background-color: var(--hayllo-violet);
}
.hayllo-bg-lavender {
  background-color: var(--hayllo-lavender);
}
.hayllo-bg-light-lilac {
  background-color: var(--hayllo-light-lilac);
}
.hayllo-bg-lavender-blue {
  background-color: var(--hayllo-lavender-blue);
}

/* Text Colors */
.hayllo-text-violet {
  color: var(--hayllo-violet);
}
.hayllo-text-lavender {
  color: var(--hayllo-lavender);
}
.hayllo-text-dark-grey {
  color: var(--hayllo-dark-grey);
}
.hayllo-text-neon-red {
  color: var(--hayllo-neon-red);
}

/* Border Colors */
.hayllo-border-violet {
  border-color: var(--hayllo-violet);
}
.hayllo-border-light-grey {
  border-color: var(--hayllo-light-grey);
}

/* ========== TAB STYLES ========== */

/* Active Tab */
.hayllo-plugin .hayllo-tab-active {
  color: var(--hayllo-white) !important;
  text-decoration: none !important;
}

/* ========== TAILWIND OVERRIDES ========== */
/* Allow Tailwind utility classes to override brand styles */

/* Text Decoration Utilities */
.hayllo-plugin [class*='tw-underline'] {
  text-decoration: inherit !important;
}

.hayllo-plugin [class*='tw-no-underline'] {
  text-decoration: inherit !important;
}

.hayllo-plugin [class*='tw-line-through'] {
  text-decoration: inherit !important;
}

/* Font Size Utilities */
.hayllo-plugin [class*='tw-text-xs'],
.hayllo-plugin [class*='tw-text-sm'],
.hayllo-plugin [class*='tw-text-base'],
.hayllo-plugin [class*='tw-text-lg'],
.hayllo-plugin [class*='tw-text-xl'],
.hayllo-plugin [class*='tw-text-2xl'],
.hayllo-plugin [class*='tw-text-3xl'],
.hayllo-plugin [class*='tw-text-4xl'],
.hayllo-plugin [class*='tw-text-5xl'],
.hayllo-plugin [class*='tw-text-6xl'] {
  font-size: inherit !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .hayllo-plugin h1 {
    font-size: 28px;
  }

  .hayllo-plugin h2 {
    font-size: 20px;
  }

  .hayllo-btn-primary,
  .hayllo-btn-secondary {
    font-size: 14px;
    padding: 10px 16px;
  }
}