/*
Theme Name: MrAgri
Theme URI: https://mragri.com
Author: MrAgri Team
Author URI: https://mragri.com
Description: A premium agricultural ecommerce WordPress theme with advanced animations, WooCommerce support, and multilingual (Sinhala & English) capabilities. Fully customizable with a rich green, white, and wood color palette.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mragri
Tags: e-commerce, woocommerce, agriculture, green, wood, rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog, portfolio, food-and-drink
WC requires at least: 8.0
WC tested up to: 9.0
*/

/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================================ */
:root {
  /* ── Brand Colors ── */
  --clr-primary:        #3D8B40;   /* Softer Forest Green */
  --clr-primary-light:  #5AA65D;   /* Medium Green */
  --clr-primary-pale:   #F2F9F2;   /* Very Light Sage/Green Tint */
  --clr-accent:         #7CB342;   /* Fresh Sage Green */
  --clr-accent-light:   #C5E1A5;   /* Light Sage */

  --clr-wood:           #8B5E3C;   /* Rich Wood Brown */
  --clr-wood-light:     #A97C5A;   /* Light Wood */
  --clr-wood-pale:      #F5ECD7;   /* Warm Cream */
  --clr-wheat:          #D4A96A;   /* Wheat Gold */
  --clr-wheat-light:    #F0D59B;   /* Light Wheat */

  --clr-white:          #FAFDF6;   /* Off-White */
  --clr-white-pure:     #FFFFFF;
  --clr-bg:             #FDFBF7;   /* Clean Warm Page background */
  --clr-surface:        #FFFFFF;   /* Card surface */
  --clr-surface-2:      #F6FBF3;   /* Elevated surface */

  --clr-text:           #1A2E1B;   /* Near-black text */
  --clr-text-muted:     #5A6B5B;   /* Muted text */
  --clr-text-light:     #8A9E8B;   /* Light text */
  --clr-border:         #DCE8DC;   /* Subtle border */
  --clr-border-dark:    #B2CBB2;   /* Stronger border */

  /* ── Gradients ── */
  --grad-primary:       linear-gradient(135deg, #3D8B40 0%, #5AA65D 50%, #7CB342 100%);
  --grad-primary-dark:  linear-gradient(135deg, #245426 0%, #3D8B40 100%);
  --grad-wood:          linear-gradient(135deg, #8B5E3C 0%, #A97C5A 50%, #D4A96A 100%);
  --grad-hero:          linear-gradient(160deg, #245426 0%, #3D8B40 40%, #5AA65D 100%);
  --grad-section:       linear-gradient(180deg, #FDFBF7 0%, #F2F9F2 100%);
  --grad-card-hover:    linear-gradient(135deg, rgba(61,139,64,0.08) 0%, rgba(124,179,66,0.08) 100%);
  --grad-glass:         linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%);


  /* ── Typography ── */
  --font-heading:       'Playfair Display', 'Noto Sans Sinhala', Georgia, serif;
  --font-body:          'Inter', 'Noto Sans Sinhala', system-ui, -apple-system, sans-serif;
  --font-accent:        'Poppins', 'Noto Sans Sinhala', sans-serif;

  --text-xs:            0.75rem;
  --text-sm:            0.875rem;
  --text-base:          1rem;
  --text-md:            1.125rem;
  --text-lg:            1.25rem;
  --text-xl:            1.5rem;
  --text-2xl:           1.875rem;
  --text-3xl:           2.25rem;
  --text-4xl:           3rem;
  --text-5xl:           3.75rem;
  --text-6xl:           4.5rem;
  --text-hero:          clamp(2.5rem, 6vw, 5.5rem);

  --leading-tight:      1.2;
  --leading-snug:       1.4;
  --leading-normal:     1.6;
  --leading-relaxed:    1.75;

  --weight-light:       300;
  --weight-normal:      400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:    0.375rem;
  --radius-md:    0.75rem;
  --radius-lg:    1.25rem;
  --radius-xl:    2rem;
  --radius-2xl:   3rem;
  --radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(45,106,46,0.08), 0 1px 2px rgba(45,106,46,0.06);
  --shadow-sm:  0 4px 6px rgba(45,106,46,0.07), 0 2px 4px rgba(45,106,46,0.06);
  --shadow-md:  0 10px 25px rgba(45,106,46,0.10), 0 4px 10px rgba(45,106,46,0.06);
  --shadow-lg:  0 20px 40px rgba(45,106,46,0.12), 0 8px 20px rgba(45,106,46,0.08);
  --shadow-xl:  0 30px 60px rgba(45,106,46,0.15), 0 12px 30px rgba(45,106,46,0.10);
  --shadow-wood: 0 10px 30px rgba(139,94,60,0.20);
  --shadow-card: 0 8px 32px rgba(45,106,46,0.12), 0 2px 8px rgba(45,106,46,0.08);
  --shadow-float: 0 20px 60px rgba(45,106,46,0.18);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  --transition-base:  all var(--duration-base) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  1600px;

  --header-height:      80px;
  --header-height-sm:   64px;
  --sidebar-width:      280px;
  --cart-drawer-width:  420px;

  /* ── Z-Index Scale ── */
  --z-base:         1;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-overlay:      300;
  --z-modal:        400;
  --z-toast:        500;
  --z-cursor:       9999;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  overflow-x: hidden;
}

body.loading {
  overflow: hidden;
}

/* Sinhala language overrides */
:lang(si) {
  font-family: 'Noto Sans Sinhala', var(--font-body);
  line-height: 1.8;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--clr-text);
}

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

p {
  line-height: var(--leading-relaxed);
  color: var(--clr-text-muted);
}

ul, ol { list-style: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ============================================================
   CONTAINER SYSTEM
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--sm  { max-width: var(--container-sm);  }
.container--md  { max-width: var(--container-md);  }
.container--lg  { max-width: var(--container-lg);  }
.container--2xl { max-width: var(--container-2xl); }
.container--full { max-width: var(--container-max); }

/* ============================================================
   UTILITIES
   ============================================================ */
.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;
}

.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }

.text-primary  { color: var(--clr-primary); }
.text-accent   { color: var(--clr-accent); }
.text-wood     { color: var(--clr-wood); }
.text-wheat    { color: var(--clr-wheat); }
.text-muted    { color: var(--clr-text-muted); }
.text-white    { color: var(--clr-white-pure); }

.bg-primary    { background-color: var(--clr-primary); }
.bg-wood       { background-color: var(--clr-wood); }
.bg-pale       { background-color: var(--clr-primary-pale); }
.bg-cream      { background-color: var(--clr-wood-pale); }
.bg-white      { background-color: var(--clr-white-pure); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.grid          { display: grid; }
.relative      { position: relative; }
.absolute      { position: absolute; }

.overflow-hidden { overflow: hidden; }
.rounded-full    { border-radius: var(--radius-full); }
.rounded-lg      { border-radius: var(--radius-lg); }

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

.w-full { width: 100%; }
.h-full { height: 100%; }

/* ============================================================
   SECTION STRUCTURE
   ============================================================ */
.section {
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}

.section--sm  { padding-block: var(--space-12); }
.section--lg  { padding-block: var(--space-32); }
.section--dark {
  background: var(--grad-primary-dark);
  color: var(--clr-white-pure);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--clr-white-pure); }
.section--dark p   { color: var(--clr-accent-light); }

.section--wood {
  background: var(--grad-wood);
  color: var(--clr-white-pure);
}

.section--cream {
  background-color: var(--clr-wood-pale);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
}

.section-tag::before,
.section-tag::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--clr-accent);
  border-radius: 1px;
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--clr-text);
  margin-bottom: var(--space-4);
  line-height: 1.15;
}

.section-title span {
  color: var(--clr-primary);
  position: relative;
}

.section-title span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.section-title.in-view span::after {
  transform: scaleX(1);
}

.section-desc {
  font-size: var(--text-md);
  color: var(--clr-text-muted);
  max-width: 600px;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem var(--space-8);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.5s var(--ease-out);
}

.btn:hover::after {
  transform: translateX(100%) skewX(-15deg);
}

.btn--primary {
  background: var(--grad-primary);
  color: var(--clr-white-pure);
  box-shadow: 0 4px 20px rgba(45,106,46,0.35);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(45,106,46,0.45);
  color: var(--clr-white-pure);
}

.btn--primary:active { transform: translateY(-1px); }

.btn--secondary {
  background: transparent;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.btn--secondary:hover {
  background: var(--clr-primary);
  color: var(--clr-white-pure);
  transform: translateY(-2px);
}

.btn--wood {
  background: var(--grad-wood);
  color: var(--clr-white-pure);
  box-shadow: var(--shadow-wood);
}

.btn--wood:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(139,94,60,0.35);
  color: var(--clr-white-pure);
}

.btn--ghost {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: var(--clr-white-pure);
  border-color: rgba(255,255,255,0.3);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
  color: var(--clr-white-pure);
}

.btn--sm {
  padding: 0.625rem var(--space-5);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: 1.125rem var(--space-10);
  font-size: var(--text-lg);
}

.btn--icon {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group {
  margin-bottom: var(--space-5);
}

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

.form-control {
  width: 100%;
  padding: 0.875rem var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--clr-text);
  background: var(--clr-white-pure);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  outline: none;
  appearance: none;
}

.form-control:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(45,106,46,0.12);
}

.form-control::placeholder {
  color: var(--clr-text-light);
}

/* ============================================================
   BADGE / TAG
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--primary { background: var(--clr-primary-pale); color: var(--clr-primary); }
.badge--sale    { background: #FFE0E0; color: #C0392B; }
.badge--new     { background: var(--clr-wood-pale); color: var(--clr-wood); }
.badge--hot     { background: #FFF3E0; color: #E65100; }
.badge--organic { background: var(--clr-primary-pale); color: var(--clr-primary); }

/* ============================================================
   CARDS (Base)
   ============================================================ */
.card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
  border-color: var(--clr-border-dark);
}

.card--glass {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,0.5);
}

/* ============================================================
   DIVIDER SHAPES (SVG Clip-paths)
   ============================================================ */
.wave-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  overflow: hidden;
  line-height: 0;
}

.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-top svg,
.wave-bottom svg {
  display: block;
  width: calc(100% + 2px);
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--clr-primary-pale); }
::-webkit-scrollbar-thumb {
  background: var(--clr-accent);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background: var(--clr-primary);
  color: var(--clr-white-pure);
}

/* ============================================================
   SKIP LINK (Accessibility)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-cursor);
  padding: var(--space-3) var(--space-6);
  background: var(--clr-primary);
  color: var(--clr-white-pure);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: top var(--duration-fast);
}

.skip-link:focus { top: 0; color: var(--clr-white-pure); }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#primary {
  flex: 1;
  padding-top: var(--header-height);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}

.breadcrumb a { color: var(--clr-accent); }
.breadcrumb a:hover { color: var(--clr-primary); }

.breadcrumb .separator {
  color: var(--clr-text-light);
  font-size: 0.625rem;
}

.breadcrumb .current { color: var(--clr-text-muted); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-text-muted);
  border: 2px solid var(--clr-border);
  transition: var(--transition-fast);
  text-decoration: none;
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--clr-primary);
  color: var(--clr-white-pure);
  border-color: var(--clr-primary);
}

/* ============================================================
   ALERTS / NOTICES
   ============================================================ */
.alert {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.alert--success {
  background: var(--clr-primary-pale);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.alert--error {
  background: #FFEBEE;
  border-color: #C62828;
  color: #C62828;
}

.alert--warning {
  background: #FFF8E1;
  border-color: #F9A825;
  color: #7B5800;
}

.alert--info {
  background: #E3F2FD;
  border-color: #1976D2;
  color: #1565C0;
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 3rem;
  height: 3rem;
  background: var(--grad-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: var(--transition-base);
  border: none;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#back-to-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   MODAL BASE
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9) translateY(20px);
  transition: var(--transition-base);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--clr-border);
}

.modal-close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  transition: var(--transition-fast);
  border: none;
  font-size: 1.25rem;
}

.modal-close:hover {
  background: var(--clr-primary);
  color: white;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--clr-text);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toastIn 0.4s var(--ease-spring) forwards;
}

.toast--success { background: var(--clr-primary); }
.toast--error   { background: #C62828; }
.toast--warning { background: var(--clr-wheat); color: var(--clr-text); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Custom cursor removed by request. */

/* ============================================================
   PAGE LOADER
   ============================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--clr-primary);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  width: 120px;
  animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-bar-wrap {
  width: 200px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  background: white;
  border-radius: 2px;
  width: 0%;
  animation: loaderFill 1.2s ease-in-out forwards;
}

.loader-text {
  color: rgba(255,255,255,0.8);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: loaderFade 1s ease infinite alternate;
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes loaderFill {
  to { width: 100%; }
}

@keyframes loaderFade {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  #back-to-top,
  .cursor-dot,
  .cursor-ring { display: none !important; }
}