/*
Theme Name: Tranquil Soul Crystal Boutique
Theme URI: https://crystalsoulboutique.ca/
Description: A beautiful Hello Commerce child theme for crystal boutiques with WordPress Customizer editable content
Author: Fair E Web Host
Author URI: https://fairewebhost.ca/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: hello-commerce
Text Domain: tranquil-soul
Domain Path: /languages
Requires PHP: 8.0
Requires at least: 6.0
WC requires at least: 7.0
WC tested up to: 10.3

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, take us to lunch, and tell us all about it.

Tranquil Soul Crystal Boutique is based on Hello Commerce https://elementor.com/hello-theme/
*/

/* Color Scheme
   Primary: #7D38A4 (Purple/Violet)
   Secondary: #349C94 (Teal/Aqua)
   Accent: #C7A84D (Gold)
   Background: #FFFFFF (White)
*/

:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-black-rgb: 0, 0, 0;
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08);
  --color-bg-2: rgba(245, 158, 11, 0.08);
  --color-bg-3: rgba(34, 197, 94, 0.08);
  --color-bg-4: rgba(239, 68, 68, 0.08);
  --color-bg-5: rgb(147, 51, 234);
  --color-bg-6: rgba(249, 115, 22, 0.08);
  --color-bg-7: rgba(236, 72, 153, 0.08);
  --color-bg-8: rgba(6, 182, 212, 0.08);

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for status colors */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 19px;
  --font-size-2xl: 21px;
  --font-size-3xl: 25px;
  --font-size-4xl: 31px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    --color-bg-1: rgba(29, 78, 216, 0.15);
    --color-bg-2: rgba(180, 83, 9, 0.15);
    --color-bg-3: rgba(21, 128, 61, 0.15);
    --color-bg-4: rgba(185, 28, 28, 0.15);
    --color-bg-5: rgba(107, 33, 168, 0.15);
    --color-bg-6: rgba(194, 65, 12, 0.15);
    --color-bg-7: rgba(190, 24, 93, 0.15);
    --color-bg-8: rgba(8, 145, 178, 0.15);

    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  --color-bg-1: rgba(29, 78, 216, 0.15);
  --color-bg-2: rgba(180, 83, 9, 0.15);
  --color-bg-3: rgba(21, 128, 61, 0.15);
  --color-bg-4: rgba(185, 28, 28, 0.15);
  --color-bg-5: rgba(107, 33, 168, 0.15);
  --color-bg-6: rgba(194, 65, 12, 0.15);
  --color-bg-7: rgba(190, 24, 93, 0.15);
  --color-bg-8: rgba(8, 145, 178, 0.15);

  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
}

[data-color-scheme="light"] {
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;

  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  scroll-behavior: smooth;
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-background);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 1024px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1280px) {
  .container { max-width: var(--container-xl); }
}

/* Utility classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); }

.m-0 { margin: 0; }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 { padding: 0; }
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block { display: block; }
.hidden { display: none; }

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

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

/* Custom font */
@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/*
 * Tranquil Soul Crystal Boutique - Child Theme Stylesheet
 * Updated to match Perplexity Design System
 */

:root {
  /* ==========================
     Tranquil Soul Brand Tokens
     (built on top of design system)
  =========================== */

  /* Core brand hues from logo / brand kit */
  --ts-primary:   #7A32B2; /* Primary Purple – wordmark */
  --ts-secondary: #349C94; /* Lotus Teal */
  --ts-accent:    #C59A5F; /* Golden tagline */

  /* Neutral mappings so they follow theme changes */
  --ts-light:  var(--color-surface);
  --ts-dark:   var(--color-text);
  --ts-gray:   var(--color-text-secondary);
  --ts-border: var(--color-border);
}

/* Root stylesheet intentionally contains design tokens and global base styles only.
   Shop/archive width and grid rules live in assets/css/shop.css. */

/* Hero Section */
.elementor-section.hero-section {
  background: var(--color-bg-5);
  padding: 80px var(--space-20);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="%235E5240" opacity="0.1"/></pattern></defs><rect width="1200" height="600" fill="url(%23dots)"/></svg>');
  pointer-events: none;
}

.hero-section .elementor-heading-title {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  margin-bottom: var(--space-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.hero-section .elementor-widget-heading .elementor-heading-subtitle,
  .hero-section p {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-32);
  line-height: var(--line-height-normal);
}

/* Section Titles */
.section-title {
  position: relative;
  display: inline-block;
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin: var(--space-32) 0 var(--space-24);
  padding-bottom: var(--space-16);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-brown-600) 0%,
    var(--color-teal-500) 100%
  );
  border-radius: var(--radius-sm);
}

/* Elementor Buttons */
.elementor-button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-btn-primary-text) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: var(--space-16) var(--space-32) !important;
  border-radius: var(--radius-base) !important;
  transition: all var(--duration-normal) var(--ease-standard) !important;
  border: none !important;
}

.elementor-button:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.elementor-button:focus-visible {
  outline: var(--focus-outline);
  box-shadow: var(--focus-ring) !important;
}

.elementor-button.elementor-button-accent {
  background-color: var(--color-brown-600) !important;
  border-color: var(--color-brown-600) !important;
  color: var(--color-cream-50) !important;
}

/* Featured Product Section */
.featured-product {
  background: var(--color-bg-2);
  padding: 60px var(--space-32);
  border-radius: var(--radius-lg);
  margin: var(--space-32) 0;
}

.featured-product .elementor-heading-title {
  color: var(--color-primary);
}

/* Form Elements (Elementor / generic selects) */
.elementor-field-textual,
.elementor-field-type-textarea textarea,
select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-12) var(--space-16);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-surface);
}

.elementor-field-textual:focus,
.elementor-field-type-textarea textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
  box-shadow: var(--focus-ring);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: var(--select-caret-dark);
  }
}

[data-color-scheme="dark"] select {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select {
  background-image: var(--select-caret-light);
}

/* Cards & Containers */
.elementor-widget-container {
  background-color: transparent;
}

.card-style {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  transition: all var(--duration-normal) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.card-style:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-section .elementor-heading-title {
    font-size: var(--font-size-3xl);
  }

  .section-title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 60px var(--space-16);
  }

  .hero-section .elementor-heading-title {
    font-size: var(--font-size-2xl);
  }

  .hero-section .elementor-widget-heading .elementor-heading-subtitle,
  .hero-section p {
    font-size: var(--font-size-base);
  }

  .elementor-button {
    padding: var(--space-12) var(--space-20) !important;
    font-size: var(--font-size-sm) !important;
  }

  .section-title {
    font-size: var(--font-size-lg);
    margin: var(--space-24) 0 var(--space-16);
  }

  .featured-product {
    padding: var(--space-32) var(--space-16);
  }

  .card-style {
    padding: var(--space-16);
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .elementor-widget {
    animation: fadeInUp 0.6s var(--ease-standard);
  }
}

/* Print Styles */
@media print {}


/* Standard page content wrapper – real selectors in your theme */
.page .entry-content,
.page .post-content {
  max-width: 960px;
  margin: 0 auto var(--space-40);
  padding: var(--space-32) var(--space-16) var(--space-40);
  box-sizing: border-box;
}

/* Do not apply page padding inside blog cards */
.blog-post-card .entry-content,
.blog-post-card .post-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Make Woo/Elementor pages ignore .page-content wrapper sizing */
.woocommerce .page-content,
.elementor-page .page-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Hide default post/page title + meta on specific templates with custom layouts only */
/* Example: front page and static content pages use full custom sections */
.page-template-page-home .entry-header,
.page-template-page-about .entry-header,
.page-template-page-contact .entry-header {
  display: none;
}

/* Single post layout – make content full width */
.single-post .post-content {
    max-width: 760px;        /* or 820px if you want wider */
    margin: 0 auto 60px;     /* center it under the header */
    padding: 32px 24px;
    border-radius: 16px;
    border: 1px solid rgba(94,82,64,0.18);
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Ensure it doesn’t float or sit in a grid column */
.single-post .post-content,
.single-post .post-content-wrapper {
    float: none;
    width: 100%;
}

/* If a container is forcing a narrow column, relax it */
.single-post .site-main,
.single-post .content-area {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Single post should not use the archive grid layout */
.single-post .blog-posts-grid {
    display: block;          /* turn off grid */
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Make the main post card full width inside the wrapper */
.single-post .blog-posts-grid .post-content {
    max-width: 760px;        /* adjust width to taste */
    margin: 0 auto 60px;
    padding: 32px 24px;
    border-radius: 16px;
    border: 1px solid rgba(94,82,64,0.18);
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* If individual posts inside the grid have column widths, reset them */
.single-post .blog-posts-grid article,
.single-post .blog-posts-grid .blog-post-card {
    width: 100%;
    max-width: none;
}

/* Single post: relax the grid wrapper and spacing */
.single-post .blog-posts-grid {
    display: block;          /* no multi-column grid */
    max-width: 1100px;       /* wider overall container */
    margin: 60px auto 80px;  /* more top/bottom breathing room */
    padding: 0 24px;
}

/* Main post card inside single view */
.single-post .blog-posts-grid .post-content {
    max-width: 860px;        /* increase from ~760 */
    margin: 0 auto;
    padding: 40px 32px;
    border-radius: 18px;
    border: 1px solid rgba(94,82,64,0.18);
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Ensure no conflicting widths from archive styles */
.single-post .blog-posts-grid article,
.single-post .blog-posts-grid .blog-post-card {
    width: 100%;
    max-width: none;
    float: none;
}