:root {
    --page-bg: #fff7fb;
    --page-text: #5b3b4a;
    --muted-text: #7a6570;
    --surface-bg: #ffffff;
    --surface-soft: #fff5fa;
    --surface-tint: #ffe4ef;
    --surface-tint-strong: #fff0f6;
    --border-soft: #f0c5d7;
    --border-strong: #e3a8c3;
    --header-link: #5b3b4a;
    --header-link-hover: #7a4b64;
    --header-dot-1: rgba(128, 68, 95, 0.08);
    --header-dot-2: rgba(128, 68, 95, 0.06);
    --header-gradient-start: rgba(255, 255, 255, 0.8);
    --header-gradient-end: rgba(255, 228, 239, 0.75);
    --header-shape-1-start: rgba(255, 182, 214, 0.7);
    --header-shape-1-end: rgba(255, 255, 255, 0.3);
    --header-shape-2: rgba(255, 182, 214, 0.55);
    --brand-solid: #5b3b4a;
    --brand-glow: rgba(255, 182, 214, 0.7);
    --brand-glow-soft: rgba(255, 182, 214, 0.35);
    --star-mid: rgba(255, 192, 222, 0.95);
    --star-end: rgba(255, 255, 255, 0);
    --button-dark-bg: #212529;
    --button-dark-border: #212529;
    --button-dark-hover-bg: #343a40;
    --button-dark-hover-border: #343a40;
    --button-outline-text: #212529;
    --button-outline-border: #212529;
    --button-outline-hover-bg: #212529;
    --button-outline-hover-text: #ffffff;
    --cart-badge-bg: #d96b98;
    --cart-badge-text: #ffffff;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --dropdown-bg: #ffffff;
    --dropdown-border: rgba(0, 0, 0, 0.12);
    --dropdown-active-bg: #fff0f6;
  }

  html[data-site-theme="organic"] {
    --page-bg: #f5f9f1;
    --page-text: #2f3e1d;
    --muted-text: #6d7a5d;
    --surface-bg: #ffffff;
    --surface-soft: #f7fbf2;
    --surface-tint: #eef7e4;
    --surface-tint-strong: #e4f1d5;
    --border-soft: #d8e6c4;
    --border-strong: #b9cf98;
    --header-link: #31421f;
    --header-link-hover: #61843d;
    --header-dot-1: rgba(126, 171, 77, 0.12);
    --header-dot-2: rgba(79, 121, 43, 0.08);
    --header-gradient-start: rgba(255, 255, 255, 0.92);
    --header-gradient-end: rgba(235, 245, 219, 0.92);
    --header-shape-1-start: rgba(169, 208, 122, 0.7);
    --header-shape-1-end: rgba(255, 255, 255, 0.15);
    --header-shape-2: rgba(133, 184, 73, 0.28);
    --brand-solid: #31421f;
    --brand-glow: rgba(133, 184, 73, 0.55);
    --brand-glow-soft: rgba(133, 184, 73, 0.28);
    --star-mid: rgba(169, 208, 122, 0.95);
    --star-end: rgba(255, 255, 255, 0);
    --button-dark-bg: #6fa63b;
    --button-dark-border: #6fa63b;
    --button-dark-hover-bg: #5b8d2f;
    --button-dark-hover-border: #5b8d2f;
    --button-outline-text: #466927;
    --button-outline-border: #7ba44b;
    --button-outline-hover-bg: #7ba44b;
    --button-outline-hover-text: #ffffff;
    --cart-badge-bg: #6fa63b;
    --cart-badge-text: #ffffff;
    --card-shadow: 0 18px 34px rgba(80, 116, 39, 0.1);
    --dropdown-bg: #ffffff;
    --dropdown-border: rgba(107, 144, 62, 0.2);
    --dropdown-active-bg: #eef7e4;
  }

  html[data-site-theme="estore"] {
    --page-bg: #f4f7fb;
    --page-text: #1f3448;
    --muted-text: #66798e;
    --surface-bg: #ffffff;
    --surface-soft: #f7faff;
    --surface-tint: #eaf1fb;
    --surface-tint-strong: #dfeafd;
    --border-soft: #d7e2f1;
    --border-strong: #adc2df;
    --header-link: #27415c;
    --header-link-hover: #2f6fed;
    --header-dot-1: rgba(92, 133, 186, 0.11);
    --header-dot-2: rgba(47, 111, 237, 0.08);
    --header-gradient-start: rgba(255, 255, 255, 0.94);
    --header-gradient-end: rgba(234, 241, 251, 0.95);
    --header-shape-1-start: rgba(142, 182, 255, 0.65);
    --header-shape-1-end: rgba(255, 255, 255, 0.2);
    --header-shape-2: rgba(47, 111, 237, 0.18);
    --brand-solid: #27415c;
    --brand-glow: rgba(47, 111, 237, 0.45);
    --brand-glow-soft: rgba(47, 111, 237, 0.22);
    --star-mid: rgba(142, 182, 255, 0.95);
    --star-end: rgba(255, 255, 255, 0);
    --button-dark-bg: #2f6fed;
    --button-dark-border: #2f6fed;
    --button-dark-hover-bg: #255cc9;
    --button-dark-hover-border: #255cc9;
    --button-outline-text: #27415c;
    --button-outline-border: #7f9fc8;
    --button-outline-hover-bg: #2f6fed;
    --button-outline-hover-text: #ffffff;
    --cart-badge-bg: #2f6fed;
    --cart-badge-text: #ffffff;
    --card-shadow: 0 18px 34px rgba(37, 92, 201, 0.09);
    --dropdown-bg: #ffffff;
    --dropdown-border: rgba(89, 122, 166, 0.18);
    --dropdown-active-bg: #eaf1fb;
  }

  html[data-site-theme="theplaza"] {
    --page-bg: #fbf8fa;
    --page-text: #181417;
    --muted-text: #6f6169;
    --surface-bg: #ffffff;
    --surface-soft: #fffafc;
    --surface-tint: #f6eef2;
    --surface-tint-strong: #f0e2ea;
    --border-soft: #e7d9e0;
    --border-strong: #d4c0ca;
    --header-link: #1b1719;
    --header-link-hover: #000000;
    --header-dot-1: rgba(233, 199, 216, 0.2);
    --header-dot-2: rgba(17, 17, 17, 0.05);
    --header-gradient-start: rgba(255, 255, 255, 0.97);
    --header-gradient-end: rgba(246, 238, 242, 0.96);
    --header-shape-1-start: rgba(233, 199, 216, 0.55);
    --header-shape-1-end: rgba(255, 255, 255, 0.25);
    --header-shape-2: rgba(17, 17, 17, 0.08);
    --brand-solid: #181417;
    --brand-glow: rgba(233, 199, 216, 0.55);
    --brand-glow-soft: rgba(233, 199, 216, 0.28);
    --star-mid: rgba(233, 199, 216, 0.95);
    --star-end: rgba(255, 255, 255, 0);
    --button-dark-bg: #111111;
    --button-dark-border: #111111;
    --button-dark-hover-bg: #000000;
    --button-dark-hover-border: #000000;
    --button-outline-text: #111111;
    --button-outline-border: #1f1a1e;
    --button-outline-hover-bg: #111111;
    --button-outline-hover-text: #ffffff;
    --cart-badge-bg: #111111;
    --cart-badge-text: #ffffff;
    --card-shadow: 0 18px 34px rgba(17, 17, 17, 0.07);
    --dropdown-bg: #ffffff;
    --dropdown-border: rgba(17, 17, 17, 0.1);
    --dropdown-active-bg: #f6eef2;
  }

  body {
    background-color: var(--page-bg);
    font-family: Georgia, serif;
    color: var(--page-text);
    margin: 0;
    padding: 0;
  }

  html[data-site-theme="organic"] body {
    font-family: "Open Sans", Arial, sans-serif;
  }

  html[data-site-theme="estore"] body {
    font-family: "Inter", Arial, sans-serif;
  }

  html[data-site-theme="theplaza"] body {
    font-family: Arial, sans-serif;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .home-page {
    position: relative;
  }

  .home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--site-logo-watermark, url("../images/SugarieLogo.png")) center / 70% no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }

  .home-page > main,
  .home-page > footer {
    position: relative;
    z-index: 1;
  }
  
  .site-header,
  .site-footer {
    background-color: var(--surface-tint);
    padding: 10px 15px;
  }

  .site-header {
    background-image:
      radial-gradient(circle at 12px 12px, var(--header-dot-1) 2px, transparent 2px),
      radial-gradient(circle at 36px 36px, var(--header-dot-2) 2px, transparent 2px),
      linear-gradient(120deg, var(--header-gradient-start), var(--header-gradient-end));
    background-size: 48px 48px, 48px 48px, 100% 100%;
    position: relative;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 1045;
  }

  .site-header::before,
  .site-header::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.18;
    pointer-events: none;
  }

  .site-header::before {
    width: 180px;
    height: 60px;
    right: 8%;
    top: -18px;
    background: linear-gradient(135deg, var(--header-shape-1-start), var(--header-shape-1-end));
    transform: rotate(-8deg);
  }

  .site-header::after {
    width: 120px;
    height: 120px;
    left: 6%;
    top: -40px;
    background: radial-gradient(circle at 30% 30%, var(--header-shape-2), rgba(255, 255, 255, 0));
  }

  .navbar .navbar-brand,
  .navbar .nav-link {
    color: var(--header-link);
  }

  .navbar .nav-link:hover {
    color: var(--header-link-hover);
  }

  .site-brand-text {
    font-size: clamp(1.2rem, 1.05rem + 1.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-block;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(110deg, #5b3b4a 0%, #5b3b4a 38%, #ffb6d6 50%, #5b3b4a 62%, #5b3b4a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brand-float 5s ease-in-out 1 forwards, brand-shimmer 5s ease-in-out 1 forwards;
  }

  @keyframes brand-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2px);
    }
  }

  @keyframes brand-shimmer {
    0% {
      background-position: 0% 50%;
      color: transparent;
    }
    70% {
      background-position: 100% 50%;
      color: transparent;
    }
    100% {
      background-position: 100% 50%;
      color: var(--brand-solid);
      background-image: none;
    }
  }

  .navbar-brand:hover .site-brand-text {
    animation: brand-glow 1.6s ease-in-out infinite, brand-pulse 5s ease-in-out 1 forwards;
  }

  @keyframes brand-glow {
    0%, 100% {
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 6px var(--brand-glow-soft);
    }
    50% {
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 12px var(--brand-glow);
    }
  }

  @keyframes brand-pulse {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-1px) scale(1.04);
    }
  }

  .instagram-link {
    font-weight: 600;
  }

  @media (max-width: 575.98px) {
    .instagram-link {
      background: var(--surface-tint-strong);
      border-radius: 999px;
      padding: 8px 14px;
      margin-top: 6px;
      align-self: flex-start;
    }
  }

  .navbar-toggler {
    border-color: var(--border-strong);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(91, 59, 74, 0.72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  .site-logo {
    height: 36px;
    width: auto;
    transform-origin: left center;
  }
  
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .product-card {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-soft);
    padding: 15px;
    width: 200px;
  }

  .card-img-top,
  .image-frame {
    height: 220px;
  }

  .image-frame {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface-soft), var(--surface-bg));
  }

  .image-frame.image-missing {
    background: linear-gradient(135deg, var(--surface-soft), var(--surface-bg));
  }

  .image-frame.image-missing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-logo-watermark, url("../images/SugarieLogo.png")) center / 70% no-repeat;
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
  }

  .image-frame .image-fill {
    position: relative;
    z-index: 2;
  }

  .modal .image-frame {
    height: 420px;
  }

  .modal .image-fill {
    object-fit: contain;
    background: transparent;
  }

  @media (max-width: 575.98px) {
    .modal .image-frame {
      height: 300px;
    }
  }

  .image-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-modal-trigger {
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    width: 100%;
  }

  .thumb-btn {
    border: 1px solid var(--border-soft);
    padding: 0;
    background: var(--surface-bg);
    border-radius: 6px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    position: relative;
  }

  .thumb-btn.active {
    border-color: var(--button-dark-bg);
  }

  .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .thumb-btn.thumb-missing {
    background: linear-gradient(135deg, var(--surface-soft), var(--surface-bg));
  }

  .thumb-btn.thumb-missing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-logo-watermark, url("../images/SugarieLogo.png")) center / 70% no-repeat;
    opacity: 0.45;
    pointer-events: none;
  }

  .hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  @media (max-width: 991.98px) {
    .card-img-top,
    .image-frame {
      height: 200px;
    }

    .site-logo {
      height: 32px;
    }
  }

  @media (max-width: 575.98px) {
    .card-img-top,
    .image-frame {
      height: 180px;
    }

    .site-header,
    .site-footer {
      padding: 8px 12px;
    }

    .site-logo {
      height: 84px;
      margin: -18px 0;
    }
  }

  .shooting-star {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--star-mid), var(--star-end));
    opacity: 0;
    transform: translate3d(-150px, -50px, 0) rotate(-15deg);
    animation: shooting-star 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 5;
  }

  @keyframes shooting-star {
    0% {
      opacity: 0;
      transform: translate3d(-150px, -50px, 0) rotate(-15deg);
    }
    15% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate3d(120vw, 120px, 0) rotate(-15deg);
    }
  }

  @media (min-width: 992px) {
    .site-logo {
      height: 96px;
    }
  }

  .site-logo {
    transition: transform 180ms ease, filter 180ms ease;
  }

  .navbar-brand:hover .site-logo {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px var(--brand-glow));
  }

  .cart-count-badge {
    background-color: var(--cart-badge-bg) !important;
    color: var(--cart-badge-text);
  }

  @media (min-width: 992px) {
    .navbar-brand {
      align-items: center;
    }

    .site-brand-text {
      font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem);
      letter-spacing: 0.03em;
    }

    .navbar-brand .site-logo {
      margin: -16px 0;
    }
  }

  .card,
  .modal-content,
  .dropdown-menu,
  .form-control,
  .form-select {
    border-color: var(--border-soft);
  }

  .card,
  .modal-content {
    background-color: var(--surface-bg);
    box-shadow: var(--card-shadow);
  }

  .text-muted,
  .form-text {
    color: var(--muted-text) !important;
  }

  .btn-dark {
    background-color: var(--button-dark-bg);
    border-color: var(--button-dark-border);
  }

  .btn-dark:hover,
  .btn-dark:focus,
  .btn-dark:active {
    background-color: var(--button-dark-hover-bg);
    border-color: var(--button-dark-hover-border);
  }

  .btn-outline-dark {
    color: var(--button-outline-text);
    border-color: var(--button-outline-border);
  }

  .btn-outline-dark:hover,
  .btn-outline-dark:focus,
  .btn-outline-dark:active {
    background-color: var(--button-outline-hover-bg);
    border-color: var(--button-outline-hover-bg);
    color: var(--button-outline-hover-text);
  }

  .theme-dropdown-menu {
    min-width: 220px;
    border-color: var(--dropdown-border);
    background-color: var(--dropdown-bg);
    border-radius: 8px;
    padding: 0.4rem;
    z-index: 2000;
  }

  .theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 6px;
    color: var(--page-text);
    padding: 0.55rem 0.75rem;
  }

  .theme-option:hover,
  .theme-option:focus,
  .theme-option.active {
    background-color: var(--dropdown-active-bg);
    color: var(--page-text);
  }

  html[data-site-theme="organic"] .site-header,
  html[data-site-theme="organic"] .site-footer {
    border-color: var(--border-soft) !important;
  }

  html[data-site-theme="estore"] .site-header,
  html[data-site-theme="estore"] .site-footer {
    border-color: var(--border-soft) !important;
  }

  html[data-site-theme="theplaza"] .site-header,
  html[data-site-theme="theplaza"] .site-footer {
    border-color: var(--border-soft) !important;
  }

  html[data-site-theme="organic"] .site-brand-text {
    background: linear-gradient(110deg, #31421f 0%, #426228 42%, #8dc24d 52%, #426228 62%, #31421f 100%);
    background-size: 220% 100%;
  }

  html[data-site-theme="estore"] .site-brand-text {
    background: linear-gradient(110deg, #27415c 0%, #2c4d73 42%, #2f6fed 52%, #2c4d73 62%, #27415c 100%);
    background-size: 220% 100%;
  }

  html[data-site-theme="theplaza"] .site-brand-text {
    background: linear-gradient(110deg, #181417 0%, #2a2327 42%, #d7a9be 52%, #2a2327 62%, #181417 100%);
    background-size: 220% 100%;
  }

  html[data-site-theme="organic"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(49, 66, 31, 0.72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  html[data-site-theme="estore"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(39, 65, 92, 0.72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  html[data-site-theme="theplaza"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(24, 20, 23, 0.72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  html[data-site-theme="organic"] .form-control:focus,
  html[data-site-theme="organic"] .form-select:focus {
    border-color: #9fbe74;
    box-shadow: 0 0 0 0.25rem rgba(111, 166, 59, 0.18);
  }

  html[data-site-theme="estore"] .form-control:focus,
  html[data-site-theme="estore"] .form-select:focus {
    border-color: #84a6d8;
    box-shadow: 0 0 0 0.25rem rgba(47, 111, 237, 0.14);
  }

  html[data-site-theme="theplaza"] .form-control:focus,
  html[data-site-theme="theplaza"] .form-select:focus {
    border-color: #d7a9be;
    box-shadow: 0 0 0 0.25rem rgba(215, 169, 190, 0.18);
  }