:root {
      --primary-color: #dc2626;
      --secondary-color: #374151;
      --glass-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 252, 0.92) 100%);
      --glass-card-border: rgba(255, 255, 255, 0.78);
      --glass-card-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
      --glass-card-shadow-hover: 0 38px 88px rgba(15, 23, 42, 0.24);
      --glass-card-glow: radial-gradient(circle at top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.18) 38%, transparent 72%);
    }
    
    html {
      scroll-behavior: smooth;
      overflow-x: hidden; 
      width: 100%;
      position: relative;
    }
    
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden; 
      width: 100%;
      position: relative;
    }
    
    .hero-section {
      position: relative;
      height: 100vh;
      background-image: url('../img/head.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    }
    
    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    
    @media (max-width: 768px) {
      .hero-section {
        height: 80vh;
        min-height: 600px;
      }
      
      .hero-content {
        padding: 1.5rem;
        margin: 1rem;
      }
      
      .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.1;
      }
    }
    
    @media (max-width: 480px) {
      .hero-section {
        height: 70vh;
        min-height: 500px;
      }
      
      .hero-content {
        padding: 1rem;
        margin: 0.5rem;
      }
      
      .hero-content h1 {
        font-size: 2rem;
      }
    }
    
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(1px);
      backdrop-filter: blur(1px);
      z-index: 2;
    }
    
    @media (hover: hover) and (pointer: fine) {
      .add-to-cart-btn:hover {
        transform: translateY(-2px);
      }
    }
    
    .animate-fade-up {
      animation: fadeUp 0.8s ease-out forwards;
      will-change: transform, opacity;
    }
    
    @media (prefers-reduced-motion: reduce) {
      .animate-fade-up,
      .animate-ping-fast {
        animation: none;
      }
    }
    
    html, body {
      height: 100%;
      margin: 0;
      font-family: sans-serif;
    }
    
    .animate-fade-up {
      animation: fadeUp 0.8s ease-out forwards;
    }
    @keyframes pingFast {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.6; }
      100% { transform: scale(1); opacity: 1; }
    }
    .animate-ping-fast {
      animation: pingFast 0.4s ease-in-out;
    }
    @keyframes buttonPulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
      70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }
    .animate-button-pulse {
      animation: buttonPulse 0.5s ease-in-out;
    }
    @keyframes buttonSuccess {
      0% { background-color: #16a34a; }
      50% { background-color: #22c55e; }
      100% { background-color: #16a34a; }
    }
    .animate-button-success {
      animation: buttonSuccess 0.5s ease-in-out;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up {
      animation: fadeUp 0.8s ease-out forwards;
    }
    .add-to-cart-btn {
      position: relative;
      background: linear-gradient(45deg, #16a34a, #22c55e);
      color: white;
      border: none;
      padding: 0.5rem 1.5rem;
      border-radius: 9999px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      min-width: 100px;
      text-align: center;
    }
    .add-to-cart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .add-to-cart-btn:active {
      transform: translateY(1px);
    }
    .add-to-cart-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: 0.5s;
    }
    .add-to-cart-btn:hover::before {
      left: 100%;
    }
    .add-to-cart-btn .icon {
      margin-right: 8px;
      transition: transform 0.3s ease;
    }
    .add-to-cart-btn:hover .icon {
      transform: rotate(360deg);
    }
    .add-to-cart-btn .text {
      position: relative;
      z-index: 1;
    }
    
    .delete-item-btn {
      color: #ef4444;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      margin-left: 8px;
      transition: all 0.2s ease;
    }
    .delete-item-btn:hover {
      transform: scale(1.2);
      color: #dc2626;
    }
    
    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #e5e7eb;
    }
    .cart-item:last-child {
      border-bottom: none;
    }
    .cart-item-info {
      flex-grow: 1;
    }
    .cart-total {
      font-size: 1.25rem;
      font-weight: bold;
      color: #16a34a;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 2px solid #e5e7eb;
    }
    
      .product-image {
        width: 100%;
        height: 250px;
        object-fit: contain;
        background-color: white;
        padding: 8px;
      }
      
      .boiled-crayfish .product-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center center;
        background-color: transparent;
        padding: 0;
        border-radius: 12px;
        transform: none;
      }
      
      .boiled-crayfish .product-image-container {
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 34%, rgba(5, 5, 5, 0.96) 78%);
        padding: 8px;
        border-radius: 12px;
        overflow: hidden;
      }
      
      .live-crayfish .product-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center center;
        background-color: transparent;
        padding: 0;
        border-radius: 12px;
        transform: none;
      }
      
      .live-crayfish .product-image-container {
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 34%, rgba(5, 5, 5, 0.98) 80%);
        padding: 8px;
        border-radius: 12px;
        overflow: hidden;
      }
      
      .boiled-crayfish .product-card h3 {
        font-size: 1.375rem;
        font-weight: 700;
        color: #1f2937;
        margin-top: 20px;
        margin-bottom: 12px;
        line-height: 1.3;
        text-align: center;
      }
      
      .boiled-crayfish .product-card p.text-gray-600 {
        color: #4b5563;
        font-size: 1rem;
        margin-bottom: 8px;
        font-weight: 500;
        text-align: center;
      }
      
      .boiled-crayfish .product-card p.text-2xl {
        font-size: 1.75rem;
        font-weight: 800;
        color: #dc2626;
        margin-bottom: 20px;
        text-align: center;
        text-shadow: 0 1px 2px rgba(220, 38, 38, 0.1);
      }
      
      .boiled-crayfish .add-to-cart-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 600;
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .boiled-crayfish .add-to-cart-btn:hover {
        background: linear-gradient(135deg, #b91c1c, #991b1b);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
      }
      
      .live-crayfish .product-card h3 {
        font-size: 1.375rem;
        font-weight: 700;
        color: #1f2937;
        margin-top: 20px;
        margin-bottom: 12px;
        line-height: 1.3;
        text-align: center;
      }
      
      .live-crayfish .product-card p.text-gray-600 {
        color: #4b5563;
        font-size: 1rem;
        margin-bottom: 8px;
        font-weight: 500;
        text-align: center;
      }
      
      .live-crayfish .product-card p.text-2xl {
        font-size: 1.75rem;
        font-weight: 800;
        color: #059669;
        margin-bottom: 20px;
        text-align: center;
        text-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
      }
      
      .live-crayfish .add-to-cart-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 600;
        background: linear-gradient(135deg, #059669, #047857);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .live-crayfish .add-to-cart-btn:hover {
        background: linear-gradient(135deg, #047857, #065f46);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
      }
    
    .fish-image {
      width: 100%;
      height: 200px;
      object-fit: contain;
      position: relative;
      z-index: 2;
      transition:
        opacity 0.45s ease,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .fish-image.smoked {
      opacity: 0;
      position: absolute;
      inset: 0;
    }

    .fish-image-container {
      height: 200px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fa;
      padding: 10px;
      border-radius: 8px;
    }

    .fish-image-container--fx {
      height: 240px;
      padding: 1.2rem 0.75rem;
    }

    .fish-image-container--cold-smoked {
      height: 240px;
      padding: 1.2rem 0.75rem;
      background:
        radial-gradient(circle at 26% 30%, rgba(180, 205, 226, 0.24), transparent 30%),
        radial-gradient(circle at 72% 72%, rgba(226, 190, 150, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(245, 247, 251, 0.98), rgba(233, 236, 241, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -18px 35px rgba(54, 63, 82, 0.08);
    }

    .fish-image-container--carp {
      background:
        radial-gradient(circle at 28% 34%, rgba(133, 195, 213, 0.38), transparent 32%),
        radial-gradient(circle at 72% 66%, rgba(217, 129, 57, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(244, 248, 250, 0.98), rgba(229, 236, 238, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -18px 35px rgba(37, 61, 67, 0.08);
    }

    .fish-image-container--trout {
      background:
        radial-gradient(circle at 26% 30%, rgba(131, 170, 206, 0.28), transparent 30%),
        radial-gradient(circle at 72% 72%, rgba(236, 166, 118, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(245, 247, 251, 0.98), rgba(233, 236, 241, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -18px 35px rgba(54, 63, 82, 0.08);
    }

    .fish-image-container--sturgeon {
      background:
        radial-gradient(circle at 28% 38%, rgba(116, 155, 174, 0.24), transparent 28%),
        radial-gradient(circle at 76% 66%, rgba(193, 131, 72, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(242, 245, 247, 0.98), rgba(224, 230, 233, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -18px 35px rgba(42, 53, 57, 0.1);
    }

    .fish-image-container--fx .fish-image {
      height: 220px;
      transform-origin: 52% 50%;
      will-change: transform, opacity, filter;
    }

    .fish-image-container--cold-smoked .fish-image {
      height: 220px;
      filter: drop-shadow(0 18px 28px rgba(79, 95, 116, 0.14));
    }

    .fish-image-container--sturgeon .fish-image {
      height: 208px;
    }

    .fish-image-container--fx .fish-image.normal {
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
      filter: drop-shadow(0 16px 26px rgba(27, 57, 61, 0.16));
    }

    .fish-image-container--fx .fish-image.smoked {
      transform: translate3d(24px, 14px, 0) scale(0.78) rotate(-10deg);
      filter: saturate(1.05) brightness(0.96) blur(10px) drop-shadow(0 20px 28px rgba(71, 28, 9, 0.18));
    }

    .fish-image-container--trout .fish-image.normal {
      filter: drop-shadow(0 18px 28px rgba(63, 76, 104, 0.16));
    }

    .fish-image-container--trout .fish-image.smoked {
      filter: saturate(1.08) brightness(0.95) blur(10px) drop-shadow(0 20px 30px rgba(113, 60, 16, 0.2));
    }

    .fish-image-container--sturgeon .fish-image.normal {
      filter: drop-shadow(0 18px 30px rgba(39, 55, 59, 0.18));
    }

    .fish-image-container--sturgeon .fish-image.smoked {
      transform: translate3d(20px, 12px, 0) scale(0.8) rotate(-8deg);
      filter: saturate(1.06) brightness(0.95) blur(10px) drop-shadow(0 22px 34px rgba(92, 47, 17, 0.22));
    }

    .fish-image-container--fx.fish-image-container--smoked .fish-image.normal {
      opacity: 0;
      transform: translate3d(-26px, -12px, 0) scale(0.76) rotate(-11deg);
      filter: saturate(0.78) brightness(0.92) blur(7px) drop-shadow(0 10px 20px rgba(27, 57, 61, 0.08));
    }

    .fish-image-container--sturgeon.fish-image-container--smoked .fish-image.normal {
      transform: translate3d(-20px, -10px, 0) scale(0.8) rotate(-8deg);
      filter: saturate(0.78) brightness(0.9) blur(7px) drop-shadow(0 12px 22px rgba(27, 57, 61, 0.1));
    }

    .fish-image-container--fx.fish-image-container--smoked .fish-image.smoked {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
      filter: saturate(1.08) brightness(1.03) blur(0) drop-shadow(0 24px 34px rgba(92, 38, 11, 0.18));
    }

    .fish-aura,
    .fish-smoke {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .fish-aura {
      z-index: 0;
      transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .fish-aura--cool {
      opacity: 1;
      background:
        radial-gradient(circle at 34% 46%, rgba(104, 191, 214, 0.36), transparent 26%),
        radial-gradient(circle at 54% 46%, rgba(81, 163, 186, 0.26), transparent 40%);
    }

    .fish-aura--warm {
      opacity: 0;
      transform: scale(0.84);
      background:
        radial-gradient(circle at 48% 50%, rgba(255, 167, 78, 0.34), transparent 29%),
        radial-gradient(circle at 52% 70%, rgba(140, 67, 24, 0.2), transparent 42%);
    }

    .fish-image-container--trout .fish-aura--cool {
      background:
        radial-gradient(circle at 34% 46%, rgba(124, 176, 221, 0.34), transparent 25%),
        radial-gradient(circle at 62% 48%, rgba(99, 139, 185, 0.22), transparent 38%);
    }

    .fish-image-container--trout .fish-aura--warm {
      background:
        radial-gradient(circle at 46% 48%, rgba(255, 175, 92, 0.32), transparent 28%),
        radial-gradient(circle at 56% 70%, rgba(171, 91, 37, 0.18), transparent 40%);
    }

    .fish-image-container--sturgeon .fish-aura--cool {
      background:
        radial-gradient(circle at 36% 46%, rgba(117, 158, 180, 0.28), transparent 24%),
        radial-gradient(circle at 58% 48%, rgba(84, 112, 128, 0.22), transparent 38%);
    }

    .fish-image-container--sturgeon .fish-aura--warm {
      background:
        radial-gradient(circle at 46% 48%, rgba(210, 140, 70, 0.28), transparent 28%),
        radial-gradient(circle at 56% 70%, rgba(111, 58, 27, 0.2), transparent 40%);
    }

    .fish-smoke {
      z-index: 1;
      opacity: 0;
      transform: translateY(20px) scale(0.88);
      transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
      mix-blend-mode: screen;
    }

    .fish-smoke::before,
    .fish-smoke::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(18px);
    }

    .fish-smoke::before {
      inset: 22% 12% 16%;
      background:
        radial-gradient(circle at 36% 62%, rgba(255, 255, 255, 0.58), transparent 22%),
        radial-gradient(circle at 55% 45%, rgba(255, 214, 173, 0.35), transparent 24%),
        radial-gradient(circle at 68% 58%, rgba(255, 255, 255, 0.4), transparent 18%);
      animation: fishSmokeDrift 1.9s ease-in-out infinite;
    }

    .fish-smoke::after {
      inset: 14% 22% 30%;
      background:
        radial-gradient(circle at 30% 70%, rgba(255, 245, 230, 0.32), transparent 18%),
        radial-gradient(circle at 64% 40%, rgba(255, 209, 158, 0.28), transparent 20%);
      animation: fishSmokeDrift 2.4s ease-in-out infinite reverse;
    }

    .fish-image-container--fx.fish-image-container--smoked .fish-aura--cool {
      opacity: 0;
      transform: scale(1.06);
    }

    .fish-image-container--fx.fish-image-container--smoked .fish-aura--warm {
      opacity: 1;
      transform: scale(1);
    }

    .fish-image-container--fx.fish-image-container--smoked .fish-smoke {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .fish-card--fx {
      transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease;
    }

    .fish-card--fx.fish-card--smoked {
      box-shadow: 0 26px 56px rgba(122, 54, 16, 0.2);
    }

    .fish-card--trout.fish-card--smoked {
      box-shadow: 0 28px 58px rgba(121, 78, 31, 0.22);
    }

    .fish-card--sturgeon.fish-card--smoked {
      box-shadow: 0 28px 62px rgba(95, 62, 26, 0.24);
    }

    @keyframes fishSmokeDrift {
      0% {
        transform: translate3d(-2%, 8%, 0) scale(0.96);
      }
      50% {
        transform: translate3d(3%, -6%, 0) scale(1.04);
      }
      100% {
        transform: translate3d(-1%, 10%, 0) scale(0.98);
      }
    }

    .fish-product-card {
      display: flex;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: transform 0.2s;
      margin-bottom: 1.5rem;
      padding: 0.75rem;
    }

    .fish-product-card:hover {
      transform: translateY(-2px);
    }

    .fish-product-image {
      flex: 0 0 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fa;
      padding: 10px;
      border-radius: 8px;
    }

    .fish-product-info {
      flex: 1;
      padding: 0.75rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .fish-product-header {
      margin-bottom: 0.5rem;
    }

    .fish-product-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .fish-product-weight {
      color: #6b7280;
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }

    .fish-product-price {
      font-size: 1.5rem;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 0.5rem;
    }

    .fish-product-actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .fish-quantity-selector {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #f8f9fa;
      padding: 0.5rem;
      border-radius: 8px;
      margin-bottom: 0.5rem;
    }

    .fish-quantity-selector label {
      font-size: 0.875rem;
      color: #4b5563;
    }

    .fish-quantity-selector input {
      width: 60px;
      padding: 0.25rem;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      text-align: center;
    }

    .fish-quantity-selector span {
      font-size: 0.75rem;
      color: #6b7280;
    }

    .fish-options {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .fish-option-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #f8f9fa;
      padding: 0.5rem;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
      transition: all 0.2s;
    }

    .fish-option-label:hover {
      border-color: #fecaca;
    }

    .fish-option-label input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      accent-color: #dc2626;
    }

    .fish-option-label span {
      font-size: 0.875rem;
      font-weight: 500;
      color: #374151;
    }

    .fish-add-to-cart {
      background-color: #dc2626;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-weight: 600;
      transition: background-color 0.2s;
      text-align: center;
      margin-top: 0.5rem;
    }

    .fish-add-to-cart:hover {
      background-color: #b91c1c;
    }

    @keyframes orderButtonPulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
      50% { transform: scale(1.2); box-shadow: 0 0 0 15px rgba(220, 38, 38, 0.4); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    }
    
    .animate-order-button {
      animation: orderButtonPulse 0.8s ease-in-out;
    }

    .order-button {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .order-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
    }

    .order-button:active {
      transform: translateY(1px);
    }

    .order-button::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: 0.5s;
    }

    .order-button:hover::after {
      left: 100%;
    }

    .product-card {
      background: white;
      border-radius: 8px;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 16px;
      position: relative;
    }

    .product-image-container {
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      padding: 12px;
      margin-bottom: 16px;
    }

    .product-card h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 8px;
    }

    .product-card p.text-gray-600 {
      color: #4b5563;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .product-card p.text-2xl {
      font-size: 1.5rem;
      font-weight: 800;
      color: #dc2626;
      margin-bottom: 16px;
    }

    .add-to-cart-btn {
      background: linear-gradient(45deg, #16a34a, #22c55e);
      color: white;
      border: none;
      padding: 0.5rem 1.5rem;
      border-radius: 9999px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      margin-top: auto;
    }

    .quantity-selector {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8f9fa;
      padding: 12px;
      border-radius: 12px;
      margin-bottom: 16px;
      border: 1px solid #e5e7eb;
      transition: all 0.2s ease;
    }

    .quantity-selector:hover {
      border-color: #fecaca;
      background: #fff;
    }

    .quantity-selector label {
      font-size: 0.875rem;
      color: #4b5563;
      font-weight: 500;
      white-space: nowrap;
    }

    .quantity-selector input {
      width: 80px;
      padding: 8px 12px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      color: #1f2937;
      background: white;
      transition: all 0.2s ease;
    }

    .quantity-selector input:focus {
      outline: none;
      border-color: #dc2626;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

    .quantity-selector input::-webkit-inner-spin-button,
    .quantity-selector input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .quantity-selector span {
      font-size: 0.875rem;
      color: #6b7280;
      font-weight: 500;
    }

    .quantity-buttons {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .quantity-button {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: #f3f4f6;
      color: #4b5563;
      font-size: 1.25rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .quantity-button:hover {
      background: #e5e7eb;
      color: #1f2937;
    }

    .quantity-button:active {
      transform: scale(0.95);
    }

    .address-suggestions {
      position: absolute;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 0.375rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      z-index: 50;
      display: none;
    }

    .address-suggestion {
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-bottom: 1px solid #e5e7eb;
    }

    .address-suggestion:hover {
      background-color: #f3f4f6;
    }

    .address-suggestion:last-child {
      border-bottom: none;
    }

    .address-input-wrapper {
      position: relative;
    }

    .spice-option {
      background: #f8f8f8;
      padding: 0.625rem 1rem;
      position: relative;
      border-radius: 6px;
      width: 100%;
      display: flex;
      align-items: center;
      min-width: 0; 
    }

    .spice-option:hover {
      background: #f3f4f6;
    }

    .spice-option input[type="checkbox"] {
      width: 1.125rem;
      height: 1.125rem;
      border-radius: 4px;
      border: 1.5px solid #9ca3af;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }

    .spice-option input[type="checkbox"]:checked {
      background-color: #dc2626;
      border-color: #dc2626;
    }

    .spice-option input[type="checkbox"]:checked::after {
      content: '✓';
      position: absolute;
      color: white;
      font-size: 0.75rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .spice-label {
      display: flex;
      align-items: center;
      width: 100%;
      cursor: pointer;
    }

    .spice-text {
      display: flex;
      align-items: flex-start;
      width: 100%;
      justify-content: space-between;
      margin-left: 0.75rem;
      gap: 0.75rem;
      min-width: 0;
    }

    .spice-name {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      color: #374151;
      font-weight: 500;
      font-size: 0.9375rem;
      min-width: 0;
      flex: 1;
    }

    .spice-name span:last-child {
      display: block;
      white-space: normal;
      line-height: 1.3;
      text-wrap: pretty;
    }

    .spice-price {
      font-weight: 600;
      color: #dc2626;
      margin-left: auto;
      flex-shrink: 0;
      padding-left: 0.5rem;
      white-space: nowrap;
      line-height: 1.3;
    }

    .spice-icon {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.75rem;
      background: linear-gradient(180deg, rgba(255, 243, 226, 0.96), rgba(255, 234, 208, 0.92));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(184, 108, 48, 0.12);
      overflow: hidden;
    }

    .spice-icon-image {
      width: 1.7rem;
      height: 1.7rem;
      display: block;
      object-fit: contain;
    }

    @media (max-width: 640px) {
      .product-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: auto;
      }

        .product-image {
          height: 180px;
          object-fit: contain;
          margin-bottom: 0.5rem;
        }
        
        .boiled-crayfish .product-image {
          width: auto;
          max-width: 100%;
          height: auto;
          max-height: 100%;
          object-fit: contain;
          object-position: center center;
          padding: 0;
          transform: none;
        }
        
        .boiled-crayfish .product-image-container {
          height: 220px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px;
        }
        
        .live-crayfish .product-image {
          width: auto;
          max-width: 100%;
          height: auto;
          max-height: 100%;
          object-fit: contain;
          object-position: center center;
          padding: 0;
          transform: none;
        }
        
        .live-crayfish .product-image-container {
          height: 220px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px;
        }
        
        .boiled-crayfish .product-card h3 {
          font-size: 1.125rem;
          margin-top: 16px;
          margin-bottom: 8px;
        }
        
        .boiled-crayfish .product-card p.text-gray-600 {
          font-size: 0.9rem;
          margin-bottom: 6px;
        }
        
        .boiled-crayfish .product-card p.text-2xl {
          font-size: 1.5rem;
          margin-bottom: 16px;
        }
        
        .boiled-crayfish .add-to-cart-btn {
          padding: 10px 12px;
          font-size: 0.9rem;
        }
        
        .live-crayfish .product-card h3 {
          font-size: 1.125rem;
          margin-top: 16px;
          margin-bottom: 8px;
        }
        
        .live-crayfish .product-card p.text-gray-600 {
          font-size: 0.9rem;
          margin-bottom: 6px;
        }
        
        .live-crayfish .product-card p.text-2xl {
          font-size: 1.5rem;
          margin-bottom: 16px;
        }
        
        .live-crayfish .add-to-cart-btn {
          padding: 10px 12px;
          font-size: 0.9rem;
        }

      .product-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
      }

      .product-price {
        font-size: 1.125rem;
        margin: 0.25rem 0;
      }

      .product-weight {
        font-size: 0.875rem;
      }

      .spice-option {
        padding: 0.5rem;
        margin-top: 0.5rem;
      }

      .spice-text {
        font-size: 0.875rem;
      }

      .add-to-cart-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        margin-top: 0.5rem;
      }

      .products-grid {
        gap: 0.75rem;
        padding: 0.75rem;
      }
    }

    @media (max-width: 360px) {
      .product-card {
        padding: 0.75rem;
      }

      .product-image {
        height: 160px;
      }

      .product-title {
        font-size: 0.9375rem;
      }

      .product-price {
        font-size: 1rem;
      }

      .spice-text {
        font-size: 0.8125rem;
      }
    }

    .price-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .price-per-kg {
      white-space: nowrap;
    }

    .products-container {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      height: 100%;
    }

    .card-footer {
      margin-top: auto;
      padding-top: 0.5rem;
    }

    @media (min-width: 641px) and (max-width: 1024px) {
      .product-card {
        padding: 1.25rem;
      }
      
      .product-image {
        height: 225px;
      }
    }

    .smooth-scroll {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    @media (hover: none) {
      .add-to-cart-btn:active {
        transform: scale(0.98);
      }
      
      .product-card {
        touch-action: manipulation;
      }
    }

    .lazy-image {
      opacity: 0;
      transition: opacity 0.3s ease-in;
    }

    .lazy-image.loaded {
      opacity: 1;
    }

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

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

    @media (prefers-color-scheme: dark) {
      .hero-overlay {
        background: rgba(0, 0, 0, 0.4);
      }
    }

    * {
      max-width: 100%;
      box-sizing: border-box;
    }

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

    .flex-container {
      width: 100%;
      min-width: 0;
    }

    .map-container {
      width: 100%;
      height: 400px;
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      margin: 2rem 0;
    }

    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    @media (max-width: 768px) {
      .map-container {
        height: 300px;
      }
    }

    .product-card {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0; 
    }

    .card-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      height: 100%;
      min-width: 0; 
    }

    .price-container {
      display: flex;
      align-items: baseline;
      gap: 0.25rem;
      flex-wrap: nowrap;
      width: 100%;
      min-width: 0; 
    }

    .product-price {
      font-weight: 700;
      color: #dc2626;
      white-space: nowrap;
    }

    .price-per-kg {
      color: #6b7280;
      font-size: 0.875rem;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .spice-option {
      width: 100%;
      min-width: 0;
    }

    .spice-label {
      width: 100%;
      min-width: 0;
    }

    .spice-text {
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .spice-name {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .spice-name span:last-child {
      white-space: normal;
      min-width: 0;
    }

    .spice-price {
      flex-shrink: 0;
      white-space: nowrap;
      margin-left: auto;
    }

    .spice-icon {
      flex-shrink: 0;
    }

    .spice-icon-image {
      width: 1.55rem;
      height: 1.55rem;
    }

    .product-card,
    .fish-card {
      --card-rotate-x: 0deg;
      --card-rotate-y: 0deg;
      --card-shine-x: 50%;
      --card-shine-y: 50%;
      --card-shine-opacity: 0;
      --card-lift: 0px;
      background: var(--glass-card-bg);
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.64);
      box-shadow: var(--glass-card-shadow);
      transform:
        perspective(1400px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y))
        translate3d(0, var(--card-lift), 0);
      transform-style: preserve-3d;
      transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease;
      isolation: isolate;
      will-change: transform;
    }

    .product-card::before,
    .fish-card::before {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 27px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at bottom right, rgba(248, 113, 113, 0.16), transparent 44%);
      pointer-events: none;
      z-index: 0;
    }

    .product-card::after,
    .fish-card::after {
      content: '';
      position: absolute;
      inset: -24%;
      background: radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 12%, rgba(255, 255, 255, 0) 34%);
      opacity: var(--card-shine-opacity);
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 0;
    }

    .product-card:hover,
    .product-card:focus-within,
    .fish-card:hover,
    .fish-card:focus-within {
      --card-lift: -10px;
      box-shadow: var(--glass-card-shadow-hover);
      border-color: rgba(255, 255, 255, 0.92);
    }

    .product-card > *,
    .fish-card > * {
      position: relative;
      z-index: 1;
    }

    .product-card h3,
    .fish-card h3 {
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.03em;
      transform: translateZ(22px);
    }

    .product-card p.text-gray-600,
    .fish-card p.text-gray-600 {
      transform: translateZ(18px);
    }

    .product-card p.text-2xl,
    .fish-card p.text-red-600 {
      color: #b91c1c;
      font-weight: 900;
      letter-spacing: -0.04em;
      text-shadow: 0 10px 24px rgba(185, 28, 28, 0.16);
      transform: translateZ(26px);
    }

    .product-image-container,
    .fish-image-container {
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.72);
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.24) 38%, rgba(244, 244, 245, 0.6) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -12px 24px rgba(148, 163, 184, 0.08),
        0 18px 34px rgba(15, 23, 42, 0.12);
      transform: translateZ(26px);
      transform-style: preserve-3d;
    }

    .product-image-container::before,
    .fish-image-container::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--glass-card-glow);
      pointer-events: none;
    }

    .product-image-container::after,
    .fish-image-container::after {
      content: '';
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 10px;
      height: 18px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.04) 62%, transparent 78%);
      filter: blur(10px);
      opacity: 0.7;
      pointer-events: none;
    }

    .product-card .p-4,
    .fish-card > .flex,
    .fish-card > div {
      position: relative;
      z-index: 1;
      transform-style: preserve-3d;
    }

    .product-image,
    .fish-image {
      position: relative;
      z-index: 1;
      transform: translateZ(34px) scale(1);
      transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
      filter: drop-shadow(0 20px 28px rgba(15, 23, 42, 0.16));
      will-change: transform;
    }

    .product-card:hover .product-image,
    .product-card:focus-within .product-image,
    .fish-card:hover .fish-image,
    .fish-card:focus-within .fish-image {
      transform: translateZ(54px) scale(1.045);
      filter: drop-shadow(0 26px 38px rgba(15, 23, 42, 0.22));
    }

    .add-to-cart-btn,
    .fish-card button[data-name][data-price] {
      background: linear-gradient(135deg, #14532d 0%, #16a34a 52%, #34d399 100%);
      padding: 0.85rem 1.5rem;
      font-weight: 700;
      box-shadow:
        0 16px 26px rgba(22, 163, 74, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      transform: translateZ(28px);
      transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease;
    }

    .add-to-cart-btn:hover,
    .fish-card button[data-name][data-price]:hover {
      box-shadow:
        0 24px 38px rgba(22, 163, 74, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
    }

    .quantity-selector {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82));
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.85);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 12px 22px rgba(15, 23, 42, 0.06);
      transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
      transform: translateZ(20px);
    }

    .quantity-selector:hover {
      border-color: rgba(251, 191, 36, 0.45);
      background: rgba(255, 255, 255, 0.98);
      transform: translateZ(20px) translateY(-2px);
    }

    .quantity-button {
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff, #eef2f7);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .spice-label,
    .fish-card label.flex.items-center.gap-2 {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.84));
      border: 1px solid rgba(255, 255, 255, 0.86);
      border-radius: 18px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 12px 24px rgba(15, 23, 42, 0.06);
      padding: 0.85rem 0.95rem;
      transform: translateZ(18px);
      transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .spice-label:hover,
    .fish-card label.flex.items-center.gap-2:hover {
      border-color: rgba(251, 191, 36, 0.48);
      transform: translateZ(18px) translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 16px 28px rgba(15, 23, 42, 0.09);
    }

    .product-card .text-sm.text-gray-600,
    .product-card .text-sm.text-gray-500,
    .fish-card .text-sm.text-gray-500 {
      transform: translateZ(16px);
    }

    .product-card.is-depth-active,
    .fish-card.is-depth-active {
      --card-shine-opacity: 1;
    }

    @media (max-width: 768px) {
      .product-card,
      .fish-card {
        border-radius: 24px;
      }

      .product-image-container,
      .fish-image-container {
        border-radius: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .product-card,
      .fish-card,
      .product-image,
      .fish-image,
      .quantity-selector,
      .spice-label,
      .fish-card label.flex.items-center.gap-2,
      .fish-card button[data-name][data-price],
      .add-to-cart-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
      }
    }

    @media (max-width: 640px) {
      .product-card {
        padding: 0.75rem;
      }

      .card-content {
        padding: 0.75rem !important;
      }

      .quantity-selector {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
      }

      .quantity-selector label {
        width: 100%;
      }

      .quantity-buttons {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: space-between;
      }

      .quantity-selector input {
        width: 100%;
        min-width: 0;
        max-width: 4.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }

      .quantity-button {
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
      }

      .quantity-selector span {
        flex: 0 0 auto;
      }

      .price-container {
        margin: 0.25rem 0;
      }

      .product-title {
        font-size: 0.9375rem;
        line-height: 1.3;
      }

      .spice-text {
        font-size: 0.875rem;
      }

      .spice-option {
        padding: 0.5rem;
      }
    }

    @media (max-width: 360px) {
      .product-card {
        padding: 0.5rem;
      }

      .card-content {
        padding: 0.5rem !important;
      }

      .product-title {
        font-size: 0.875rem;
      }

      .spice-text {
        font-size: 0.8125rem;
      }
    }

    .price-container {
      display: inline-flex;
      align-items: baseline;
      gap: 0.25rem;
      background: #f8f8f8;
      padding: 0.25rem 0.5rem;
      border-radius: 6px;
      width: auto;
      max-width: 100%;
    }

    .product-price {
      font-weight: 700;
      color: #dc2626;
      font-size: 1.125rem;
      line-height: 1;
    }

    .price-per-kg {
      color: #6b7280;
      font-size: 0.875rem;
      line-height: 1;
      margin-top: 1px;
    }

    @media (max-width: 640px) {
      .price-container {
        padding: 0.25rem 0.375rem;
        margin: 0.25rem 0;
      }

      .product-price {
        font-size: 1rem;
      }

      .price-per-kg {
        font-size: 0.8125rem;
      }
    }

    @media (max-width: 360px) {
      .price-container {
        padding: 0.25rem;
      }

      .product-price {
        font-size: 0.9375rem;
      }

      .price-per-kg {
        font-size: 0.75rem;
      }
    }

    .card-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem;
    }

    .product-title {
      margin-bottom: 0.25rem;
      font-weight: 600;
      color: #1f2937;
      line-height: 1.3;
    }

    .product-card {
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 0.5rem;
      overflow: hidden;
      height: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .product-image {
      width: 100%;
      height: 200px;
      object-fit: contain;
      background: white;
      padding: 0.5rem;
    }

    @media (max-width: 640px) {
      .product-image {
        height: 180px;
      }

      .card-content {
        padding: 0.75rem;
      }
    }

    @media (max-width: 360px) {
      .product-image {
        height: 160px;
      }

      .card-content {
        padding: 0.625rem;
      }
    }

    .checkbox-wrapper {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .checkbox-wrapper input[type="checkbox"] {
        margin-right: 0.5rem;
        margin-top: 0.25rem;
    }
    
    .checkbox-wrapper label {
        font-size: 0.875rem;
        line-height: 1.5;
        color: #4a5568;
    }

    .checkbox-copy {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .checkbox-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    
    .checkbox-wrapper a {
        color: #3182ce;
        text-decoration: underline;
    }
    
    .checkbox-wrapper a:hover {
        color: #2c5282;
    }

    .footer-consent-button {
      padding: 0.75rem 0.95rem;
      border-radius: 999px;
      color: rgba(245, 239, 228, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .footer-consent-button:hover {
      color: #fff7ef;
      border-color: rgba(199, 119, 77, 0.32);
      background: rgba(199, 119, 77, 0.16);
    }

    .analytics-consent-banner {
      position: fixed;
      left: 20px;
      right: 20px;
      bottom: 20px;
      z-index: 210;
      max-width: 960px;
      margin: 0 auto;
      border-radius: 22px;
      background: rgba(15, 23, 42, 0.96);
      color: #f8fafc;
      border: 1px solid rgba(148, 163, 184, 0.26);
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.34);
      backdrop-filter: blur(16px);
    }

    .analytics-consent-banner.hidden {
      display: none;
    }

    .analytics-consent-banner__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 20px 22px;
    }

    .analytics-consent-banner__copy strong {
      display: block;
      font-size: 1rem;
      margin-bottom: 8px;
    }

    .analytics-consent-banner__copy p {
      margin: 0;
      color: rgba(226, 232, 240, 0.88);
      font-size: 0.95rem;
    }

    .analytics-consent-banner__links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 12px;
    }

    .analytics-consent-banner__links a {
      color: #fca5a5;
      text-decoration: none;
    }

    .analytics-consent-banner__links a:hover {
      text-decoration: underline;
    }

    .analytics-consent-banner__actions {
      display: flex;
      gap: 12px;
      flex-shrink: 0;
    }

    .analytics-consent-banner__button {
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      padding: 11px 18px;
      transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }

    .analytics-consent-banner__button:hover {
      transform: translateY(-1px);
    }

    .analytics-consent-banner__button--primary {
      background: linear-gradient(135deg, #dc2626, #f97316);
      color: #fff;
    }

    .analytics-consent-banner__button--secondary {
      background: transparent;
      border-color: rgba(148, 163, 184, 0.4);
      color: #e2e8f0;
    }

    body.analytics-consent-open .fixed.right-4.bottom-4 {
      bottom: 13.5rem;
    }

    :root {
      --surface-ink: #0f1b1d;
      --surface-deep: #14262a;
      --surface-panel: rgba(17, 30, 33, 0.78);
      --surface-cream: #f5efe4;
      --surface-sand: #ebe0d0;
      --line-soft: rgba(255, 255, 255, 0.12);
      --line-strong: rgba(199, 119, 77, 0.35);
      --accent-copper: #c7774d;
      --accent-copper-deep: #9f5834;
      --accent-mint: #9ec1b5;
      --text-ink: #132123;
      --shadow-deep: 0 28px 70px rgba(9, 17, 20, 0.28);
      --shadow-soft: 0 18px 45px rgba(11, 19, 22, 0.18);
    }

    html {
      background:
        radial-gradient(circle at 14% 12%, rgba(199, 119, 77, 0.18), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(158, 193, 181, 0.14), transparent 24%),
        radial-gradient(circle at 50% 56%, rgba(24, 48, 53, 0.16), transparent 36%),
        linear-gradient(180deg, #0d1b1e 0%, #122427 24%, #1b2b2f 46%, #d9cdb8 76%, #efe5d5 100%);
    }

    body.site-shell {
      font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--surface-cream);
      background: transparent;
    }

    body.site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.5;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 18%, rgba(255, 248, 241, 0.03) 78%, rgba(255, 255, 255, 0.04) 100%),
        radial-gradient(circle at 50% 0%, rgba(255, 248, 241, 0.08), transparent 42%);
      mix-blend-mode: soft-light;
      z-index: 0;
    }

    body.site-shell::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 24%, rgba(112, 160, 175, 0.08), transparent 24%),
        radial-gradient(circle at 82% 42%, rgba(187, 124, 84, 0.1), transparent 26%),
        radial-gradient(circle at 48% 78%, rgba(255, 244, 232, 0.08), transparent 28%);
      filter: blur(34px);
      opacity: 0.9;
      z-index: 0;
    }

    .skip-link {
      position: absolute;
      left: 1rem;
      top: -3rem;
      z-index: 200;
      background: var(--surface-cream);
      color: var(--text-ink);
      padding: 0.85rem 1.1rem;
      border-radius: 999px;
      font-weight: 700;
      transition: top 0.2s ease;
    }

    .skip-link:focus {
      top: 1rem;
    }

    .site-topbar {
      position: sticky;
      top: 0;
      z-index: 60;
      padding: 1rem 1.25rem 0;
    }

    .topbar-shell {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0.95rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      background: rgba(10, 20, 23, 0.68);
      backdrop-filter: blur(22px);
      box-shadow: 0 16px 45px rgba(6, 12, 14, 0.22);
    }

    .topbar-menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.28rem;
      width: 3rem;
      height: 3rem;
      margin-left: auto;
      border: 1px solid rgba(199, 119, 77, 0.28);
      border-radius: 999px;
      background: rgba(255, 248, 241, 0.08);
      color: #fff8f1;
      cursor: pointer;
      transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .topbar-menu-toggle span {
      display: block;
      width: 1rem;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .topbar-menu-toggle:hover {
      background: rgba(199, 119, 77, 0.16);
      border-color: rgba(199, 119, 77, 0.5);
    }

    .topbar-shell.is-menu-open .topbar-menu-toggle span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .topbar-shell.is-menu-open .topbar-menu-toggle span:nth-child(2) {
      opacity: 0;
    }

    .topbar-shell.is-menu-open .topbar-menu-toggle span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    .topbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
      color: inherit;
      text-decoration: none;
      min-width: 0;
    }

    .topbar-brand-mark {
      width: 2.75rem;
      height: 2.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(199, 119, 77, 0.95), rgba(140, 77, 48, 0.95));
      color: #fff8f1;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .topbar-brand-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.08rem;
      min-width: 0;
    }

    .topbar-brand-copy strong {
      font-size: 0.98rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #f8f1e7;
    }

    .topbar-brand-copy small {
      font-size: 0.72rem;
      color: rgba(238, 228, 214, 0.7);
      max-width: 22ch;
    }

    .topbar-menu-panel {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
      min-width: 0;
    }

    .topbar-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.45rem;
      padding: 0.35rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .topbar-nav a,
    .topbar-phone,
    .catalog-chip-nav a,
    .footer-links a {
      text-decoration: none;
      transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .topbar-nav a {
      color: rgba(245, 239, 228, 0.82);
      padding: 0.7rem 0.95rem;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .topbar-nav a:hover,
    .catalog-chip-nav a:hover,
    .footer-links a:hover,
    .topbar-phone:hover {
      transform: translateY(-1px);
    }

    .topbar-nav a:hover {
      background: rgba(199, 119, 77, 0.18);
      color: #fff5ef;
    }

    .topbar-phone {
      color: #fff6ef;
      padding: 0.85rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(199, 119, 77, 0.3);
      background: linear-gradient(135deg, rgba(199, 119, 77, 0.16), rgba(255, 255, 255, 0.04));
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    #content {
      position: relative;
      z-index: 1;
    }

    .site-hero {
      padding: 7.2rem 1.5rem 5rem;
      min-height: calc(100dvh - 2rem);
      align-items: stretch;
    }

    .site-hero::after {
      content: "";
      position: absolute;
      inset: auto 7% 7% auto;
      width: 18rem;
      height: 18rem;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(199, 119, 77, 0.38) 0%, rgba(199, 119, 77, 0) 72%);
      filter: blur(10px);
      opacity: 0.75;
      pointer-events: none;
    }

    .hero-overlay {
      background:
        linear-gradient(180deg, rgba(7, 14, 17, 0.28) 0%, rgba(7, 14, 17, 0.72) 100%),
        radial-gradient(circle at top left, rgba(158, 193, 181, 0.22), transparent 34%);
    }

    .hero-content {
      width: min(740px, 100%);
      margin: auto auto auto clamp(0rem, 6vw, 4rem);
      padding: clamp(2rem, 4vw, 3.25rem);
      border-radius: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background:
        linear-gradient(145deg, rgba(15, 27, 29, 0.86), rgba(17, 35, 39, 0.7)),
        rgba(15, 27, 29, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 28px 90px rgba(6, 14, 16, 0.32);
      text-align: left;
    }

    .hero-eyebrow,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin: 0 0 1rem;
      color: rgba(158, 193, 181, 0.95);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .hero-eyebrow::before,
    .section-kicker::before {
      content: "";
      width: 2.8rem;
      height: 1px;
      background: currentColor;
      opacity: 0.7;
    }

    .hero-content h1 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(4.4rem, 10vw, 7.4rem);
      line-height: 0.88;
      letter-spacing: -0.06em;
      color: #f8f1e7;
      text-transform: none;
      text-wrap: balance;
      text-shadow: none;
    }

    .hero-subtitle {
      max-width: 30rem;
      color: rgba(245, 239, 228, 0.74);
      letter-spacing: 0.16em;
      font-weight: 700;
    }

    .hero-description {
      max-width: 34rem;
      color: rgba(226, 218, 203, 0.76);
      font-size: 1rem;
      line-height: 1.75;
    }

    .hero-proof {
      display: inline-flex;
      width: auto;
      max-width: 32rem;
      padding: 0.95rem 1.15rem;
      border-radius: 999px;
      border: 1px solid rgba(158, 193, 181, 0.18);
      background: rgba(158, 193, 181, 0.08);
    }

    .hero-phone-link {
      display: inline-block;
      color: #fff8f2;
      text-decoration: none;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
    }

    .hero-messenger-row {
      justify-content: flex-start;
    }

    .catalog-stage {
      padding-top: 0;
      background:
        linear-gradient(180deg, rgba(10, 20, 23, 0) 0%, rgba(10, 20, 23, 0.22) 16%, rgba(21, 34, 37, 0.18) 38%, rgba(245, 239, 228, 0.04) 78%, rgba(245, 239, 228, 0) 100%);
    }

    .catalog-stage--flow::before {
      content: "";
      position: absolute;
      inset: -7rem 0 auto;
      height: 12rem;
      pointer-events: none;
      background:
        radial-gradient(ellipse at top, rgba(255, 245, 236, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(12, 25, 28, 0.36), rgba(12, 25, 28, 0));
      z-index: 0;
    }

    .catalog-stage--flow::after {
      content: "";
      position: absolute;
      inset: auto 0 -2rem;
      height: 8rem;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(245, 239, 228, 0), rgba(245, 239, 228, 0.08) 48%, rgba(245, 239, 228, 0));
      filter: blur(18px);
      z-index: 0;
    }

    .catalog-chip-nav-shell {
      position: relative;
      z-index: 4;
      max-width: 1240px;
      margin: -2rem auto 2rem;
      padding: 0 1.25rem;
    }

    .catalog-chip-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
      border-radius: 1.75rem;
      background: rgba(245, 239, 228, 0.9);
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(19, 33, 35, 0.08);
    }

    .catalog-chip-nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.78rem 1.05rem;
      border-radius: 999px;
      color: var(--text-ink);
      background: rgba(19, 33, 35, 0.04);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .catalog-chip-nav a:hover {
      color: #fff7ef;
      background: linear-gradient(135deg, var(--accent-copper), var(--accent-copper-deep));
    }

    .catalog-section,
    .testimonial-section,
    .service-section,
    .contact-section,
    .site-footer {
      position: relative;
      isolation: isolate;
    }

    .catalog-section,
    .testimonial-section,
    .service-section,
    .contact-section {
      border-radius: 1.7rem;
      overflow: hidden;
      margin: 0 auto 1.4rem;
      max-width: 1240px;
      box-shadow: 0 18px 46px rgba(9, 17, 20, 0.14);
    }

    .site-footer {
      max-width: 1240px;
      margin: 0 auto 1.25rem;
      border-radius: 1.7rem;
      box-shadow: 0 18px 46px rgba(9, 17, 20, 0.14);
    }

    .catalog-section::before,
    .testimonial-section::before,
    .service-section::before,
    .contact-section::before,
    .site-footer::before {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      top: -1px;
      height: 4.75rem;
      border-radius: 0 0 999px 999px;
      background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.2), transparent 66%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 100%);
      opacity: 0.54;
      pointer-events: none;
      z-index: 0;
      transform: translate3d(0, 0, 0);
    }

    .catalog-section::after,
    .testimonial-section::after,
    .service-section::after,
    .contact-section::after,
    .site-footer::after {
      content: "";
      position: absolute;
      left: 4%;
      right: 4%;
      bottom: -1.25rem;
      height: 3.5rem;
      border-radius: 0;
      background: linear-gradient(180deg, rgba(9, 17, 20, 0.08), transparent 100%);
      filter: blur(12px);
      opacity: 0.22;
      pointer-events: none;
      z-index: -1;
      transform: translate3d(0, 0, 0);
    }

    .catalog-section > *,
    .testimonial-section > *,
    .service-section > *,
    .contact-section > *,
    .site-footer > * {
      position: relative;
      z-index: 1;
    }

    .catalog-section + .catalog-section,
    .catalog-section + .testimonial-section,
    .testimonial-section + .service-section,
    .service-section + .contact-section,
    .contact-section + .site-footer {
      margin-top: 0.5rem;
    }

    .catalog-section .text-center > h2,
    .testimonial-section h2,
    .service-section h2,
    .contact-section h2,
    .site-footer h3,
    #modalTitle {
      font-family: "Cormorant Garamond", Georgia, serif;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }

    .catalog-section .text-center > h2 {
      font-size: clamp(3rem, 5vw, 4.4rem);
      line-height: 0.94;
    }

    .catalog-section .text-center > p,
    .service-section .text-center > p,
    .contact-section .text-center > p {
      max-width: 38rem;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }

    .catalog-section--ink {
      background:
        linear-gradient(180deg, rgba(15, 27, 29, 0.92), rgba(13, 24, 27, 0.94)),
        var(--surface-ink);
    }

    .catalog-section--light,
    .service-section,
    .contact-section,
    .testimonial-section {
      background:
        radial-gradient(circle at top right, rgba(199, 119, 77, 0.13), transparent 28%),
        linear-gradient(180deg, rgba(245, 239, 228, 0.98), rgba(236, 226, 208, 0.98));
      color: var(--text-ink);
    }

    .catalog-section--ink::before,
    .site-footer::before {
      background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(158, 193, 181, 0.06), transparent 100%);
      opacity: 0.58;
    }

    .catalog-section--light::before,
    .testimonial-section::before,
    .service-section::before,
    .contact-section::before {
      background:
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.32), transparent 68%),
        linear-gradient(180deg, rgba(255, 248, 241, 0.24), transparent 100%);
    }

    .catalog-section--light::after,
    .testimonial-section::after,
    .service-section::after,
    .contact-section::after {
      background: linear-gradient(180deg, rgba(115, 91, 69, 0.08), transparent 100%);
    }

    .section-seam {
      position: relative;
    }

    .section-seam::after {
      content: "";
      position: absolute;
      left: 4.5%;
      right: 4.5%;
      bottom: -4.6rem;
      height: 8.8rem;
      pointer-events: none;
      z-index: 0;
      transform: translate3d(0, 0, 0);
    }

    .section-seam--dark::after {
      background:
        linear-gradient(180deg, rgba(9, 18, 20, 0) 0%, rgba(12, 25, 28, 0.24) 28%, rgba(20, 33, 36, 0.16) 58%, rgba(245, 239, 228, 0) 100%),
        radial-gradient(ellipse at 50% 12%, rgba(146, 191, 179, 0.08), transparent 58%);
      filter: blur(24px);
      opacity: 0.95;
    }

    .section-seam--light::after {
      background:
        linear-gradient(180deg, rgba(255, 248, 241, 0) 0%, rgba(236, 226, 208, 0.34) 28%, rgba(190, 156, 125, 0.12) 58%, rgba(245, 239, 228, 0) 100%),
        radial-gradient(ellipse at 50% 20%, rgba(255, 250, 244, 0.24), transparent 62%);
      filter: blur(24px);
      opacity: 0.9;
    }

    .section-seam--footer::after {
      background:
        linear-gradient(180deg, rgba(8, 18, 22, 0) 0%, rgba(9, 20, 24, 0.22) 40%, rgba(9, 20, 24, 0) 100%);
      filter: blur(18px);
      opacity: 0.55;
    }

    .product-card,
    .site-fish-grid > .bg-white,
    .service-section .bg-gray-50,
    .contact-section .bg-white\/80,
    .testimonial-section iframe {
      border-radius: 1.6rem;
      border: 1px solid rgba(19, 33, 35, 0.08);
      box-shadow: 0 16px 36px rgba(14, 25, 28, 0.12);
    }

    .product-card {
      position: relative;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 236, 223, 0.96));
      border: 1px solid rgba(19, 33, 35, 0.06);
      border-radius: 1.75rem;
      box-shadow: 0 22px 44px rgba(10, 17, 20, 0.16);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card:hover,
    .site-fish-grid > .bg-white:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 52px rgba(9, 17, 20, 0.2);
    }

    .product-card::before,
    .site-fish-grid > .bg-white::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 28%);
    }

    .product-image-container,
    .fish-image-container {
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.92), rgba(241, 230, 215, 0.86)),
        #f7f1e6;
    }

    .product-image {
      padding: 1rem;
      background: transparent;
    }

    .product-card h3,
    .site-fish-grid h3 {
      color: #18282a !important;
      font-size: 1.35rem;
      line-height: 1.08;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }

    .product-card .text-red-600,
    .site-fish-grid .text-red-600 {
      color: var(--accent-copper) !important;
      font-size: 1.9rem;
      line-height: 1;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
    }

    .quantity-selector label,
    .quantity-selector span,
    .weight,
    .quantity,
    .spice-option,
    .spice-price {
      color: rgba(19, 33, 35, 0.72) !important;
    }

    .quantity-buttons {
      border-radius: 999px;
      background: rgba(19, 33, 35, 0.05);
      padding: 0.22rem;
    }

    .quantity-button {
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 8px 18px rgba(12, 20, 23, 0.1);
    }

    .spice-option,
    .site-fish-grid label.flex {
      border-radius: 1.1rem !important;
      background: rgba(19, 33, 35, 0.03) !important;
      border: 1px solid rgba(19, 33, 35, 0.08) !important;
    }

    .add-to-cart-btn,
    .site-fish-grid button[data-name][data-price],
    .order-button {
      border-radius: 999px !important;
      border: 1px solid rgba(159, 88, 52, 0.18) !important;
      background: linear-gradient(135deg, var(--accent-copper), var(--accent-copper-deep)) !important;
      color: #fff8f1 !important;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 800;
      box-shadow: 0 14px 30px rgba(159, 88, 52, 0.22);
    }

    .add-to-cart-btn:hover,
    .site-fish-grid button[data-name][data-price]:hover,
    .order-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(159, 88, 52, 0.28);
    }

    .testimonial-section {
      border-radius: 2rem;
      margin: 0 auto 2rem;
      max-width: 1240px;
      box-shadow: var(--shadow-soft);
    }

    .testimonial-section h2,
    .service-section h2,
    .contact-section h2 {
      color: #18282a !important;
      font-size: clamp(2.8rem, 5vw, 4.4rem);
      line-height: 0.95;
    }

    .service-section,
    .contact-section {
      border-radius: 2rem;
      max-width: 1240px;
      margin: 0 auto 2rem;
      box-shadow: var(--shadow-soft);
    }

    .service-section .bg-gray-50,
    .contact-section .bg-white\/80 {
      background: rgba(255, 251, 245, 0.82) !important;
      backdrop-filter: blur(18px);
      border: 1px solid rgba(19, 33, 35, 0.08);
    }

    .site-footer {
      background:
        linear-gradient(180deg, rgba(15, 27, 29, 0.96), rgba(10, 18, 21, 0.98)),
        var(--surface-ink) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .site-footer h3 {
      font-size: 2.6rem;
      color: #f7efe3 !important;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-bottom: 1.25rem;
    }

    .footer-links a {
      padding: 0.75rem 0.95rem;
      border-radius: 999px;
      color: rgba(245, 239, 228, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .footer-links a:hover {
      color: #fff7ef;
      border-color: rgba(199, 119, 77, 0.32);
      background: rgba(199, 119, 77, 0.16);
    }

    #orderModal {
      z-index: 320;
      padding: 1.25rem;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    #orderModal .bg-white {
      width: min(100%, 32rem);
      max-height: calc(100dvh - 2.5rem);
      overflow-y: auto;
      border-radius: 1.75rem;
      border: 1px solid rgba(19, 33, 35, 0.08);
      background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(242, 233, 220, 0.98));
      box-shadow: 0 30px 60px rgba(9, 17, 20, 0.24);
    }

    #orderModal label,
    #orderModal .cart-total {
      color: var(--text-ink);
    }

    #orderForm button[type="submit"]:disabled {
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none;
    }

    body.order-modal-open .site-topbar,
    body.order-modal-open .catalog-chip-nav-shell {
      pointer-events: none;
    }

    .fixed.right-4.bottom-4 {
      gap: 0.8rem;
      right: 1.15rem;
      bottom: 1.15rem;
    }

    .fixed.right-4.bottom-4 > a {
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(14px);
    }

	    @media (max-width: 980px) {
      body.analytics-consent-open .fixed.right-4.bottom-4 {
        bottom: 15.5rem;
      }

      .analytics-consent-banner__content {
        flex-direction: column;
        align-items: flex-start;
      }

      .analytics-consent-banner__actions {
        width: 100%;
      }

      .analytics-consent-banner__button {
        flex: 1;
      }

      .topbar-shell {
        border-radius: 1.6rem;
        flex-wrap: wrap;
      }

      .hero-content {
        margin: auto;
      }
    }

    @media (max-width: 768px) {
      html {
        scroll-behavior: auto;
      }

      body *,
      body *::before,
      body *::after {
        animation: none !important;
        transition: none !important;
      }

      #orderModal {
        align-items: flex-start;
        padding: max(1rem, env(safe-area-inset-top)) 0.75rem 0.75rem;
      }

      #orderModal .bg-white {
        max-height: calc(100dvh - max(1.5rem, env(safe-area-inset-top)) - 0.75rem);
        margin: 0 auto;
      }

      body.analytics-consent-open .fixed.right-4.bottom-4 {
        right: 0.85rem;
        bottom: 16.75rem;
      }

      .site-topbar {
        padding: 0.85rem 0.85rem 0;
      }

      .topbar-shell {
        align-items: center;
        padding: 1rem;
        border-radius: 1.5rem;
      }

      .topbar-brand {
        flex: 1;
        min-width: 0;
      }

      .topbar-brand-copy small {
        max-width: 18ch;
      }

      .topbar-menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
      }

      .topbar-menu-panel {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding-top: 0.9rem;
      }

      .topbar-shell.is-menu-open .topbar-menu-panel {
        display: flex;
      }

      .topbar-nav {
        order: initial;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.5rem;
        border-radius: 1.25rem;
      }

      .topbar-nav a {
        width: 100%;
        text-align: center;
        padding: 0.9rem 1rem;
      }

      .topbar-phone {
        width: 100%;
        display: inline-flex;
        text-align: center;
        justify-content: center;
        padding: 0.95rem 1rem;
      }

      .site-hero {
        padding-top: 6rem;
      }

      .hero-content {
        text-align: left;
      }

      .hero-content h1 {
        font-size: clamp(3.5rem, 20vw, 5.2rem);
      }

      .hero-messenger-row {
        justify-content: stretch;
      }

      .hero-messenger-row > a {
        width: 100%;
      }

      .catalog-chip-nav-shell {
        margin-top: -1.5rem;
      }

      .catalog-chip-nav {
        border-radius: 1.4rem;
      }

      .catalog-section,
      .testimonial-section,
      .service-section,
      .contact-section {
        border-radius: 1.4rem;
      }
    }