/* ==========================================================================
   Elevaan Network — Base / Reset / Layout / Buttons
   ========================================================================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html,
   body {
     margin: 0;
     padding: 0;
     background: var(--color-bg);
   }
   
   body {
     font-family: var(--font-sans);
     background: var(--color-bg);
     color: var(--color-text);
     line-height: 1.5;
     font-size: 15px;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: "kern" 1, "liga" 1;
   }
   
   img,
   svg {
     max-width: 100%;
     display: block;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   ul,
   ol {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   h1,
   h2,
   h3,
   h4,
   p {
     margin: 0;
   }
   
   button {
     font-family: inherit;
   }
   
   /* ---- Layout helpers ---- */
   
   .container {
     width: 100%;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 var(--container-pad);
   }
   
   main {
     display: block;
     padding-top: 30px;
   }

   main.product-page,
   main.supplier-page,
   main.auth-page {
     padding-top: 30px;
   }
   
   .section {
     padding: 18px 0;
   }
   
   .section:first-of-type {
     padding-top: 18px;
   }
   
   .card {
     background: transparent;
     border-radius: 0;
     padding: 0;
     box-shadow: none;
   }
   
   .section-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 24px;
   }
   
   .section-head h2 {
     font-size: 22px;
     font-weight: 600;
   }

   .featured-match-note {
     font-size: 13px;
     font-weight: 500;
     color: #62646a;
     margin: 4px 0 0;
   }

   .featured-match-note span {
     font-weight: 700;
     color: #1c1c1d;
   }

   .featured-match-note[hidden] {
     display: none;
   }
   
   .link-more {
     font-size: 14px;
     font-weight: 600;
     color: #2563eb;
     white-space: nowrap;
     text-decoration: none;
   }
   
   .link-more:hover {
     color: #1d4ed8;
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   
   /* ---- Buttons ---- */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 11px 22px;
     border-radius: var(--radius-btn);
     font-weight: 700;
     font-size: 14px;
     border: 1px solid transparent;
     cursor: pointer;
     white-space: nowrap;
     transition: background-color 0.15s ease, color 0.15s ease,
       border-color 0.15s ease;
   }
   
   .btn-sm {
     padding: 8px 14px;
     font-size: 13px;
   }
   
   .btn-block {
     width: 100%;
   }
   
   .btn-dark {
     background: var(--color-dark);
     color: #fff;
   }
   
   .btn-dark:hover {
     background: var(--color-dark-2);
   }
   
   .btn-orange {
     background: var(--color-orange);
     color: #fff;
   }
   
   .btn-orange:hover {
     background: var(--color-orange-dark);
   }
   
   .btn-blue {
     background: #2563eb;
     color: #fff;
   }
   
   .btn-blue:hover {
     background: #1d4ed8;
   }
   
   .btn-outline {
     background: #fff;
     color: var(--color-text);
     border-color: var(--color-border);
   }
   
   .btn-outline:hover {
     border-color: var(--color-primary);
     color: var(--color-primary);
   }
   
   .btn .arrow {
     display: inline-block;
     line-height: 1;
   }

   /* ---- Slider arrows (Fiverr-style) ---- */

   .hero-arrow,
   .gallery-arrow,
   .thumb-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     padding: 0;
     border: none;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.45);
     color: #222325;
     font-size: 0;
     line-height: 0;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 5;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.15s ease, transform 0.15s ease,
       background-color 0.15s ease;
   }

   .hero-arrow:hover,
   .gallery-arrow:hover,
   .thumb-arrow:hover {
     background: rgba(255, 255, 255, 0.75);
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
     transform: translateY(-50%) scale(1.04);
   }

   .hero-arrow:active,
   .gallery-arrow:active,
   .thumb-arrow:active {
     transform: translateY(-50%) scale(0.98);
   }

   .hero-arrow::before,
   .gallery-arrow::before,
   .thumb-arrow::before {
     content: "";
     width: 9px;
     height: 9px;
     border-top: 2px solid #222325;
     border-right: 2px solid #222325;
     flex-shrink: 0;
   }

   .hero-arrow-prev::before,
   .gallery-arrow-prev::before,
   .thumb-arrow-prev::before {
     transform: rotate(-135deg);
     margin-left: 3px;
   }

   .hero-arrow-next::before,
   .gallery-arrow-next::before,
   .thumb-arrow-next::before {
     transform: rotate(45deg);
     margin-right: 3px;
   }

   .hero-arrow-prev,
   .gallery-arrow-prev,
   .thumb-arrow-prev {
     left: 22px;
   }

   .hero-arrow-next,
   .gallery-arrow-next,
   .thumb-arrow-next {
     right: 22px;
   }

   .thumb-arrow {
     width: 32px;
     height: 32px;
   }

   .thumb-arrow::before {
     width: 7px;
     height: 7px;
   }
   
   /* ---- Small utility ---- */
   
   .visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }