@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* =============================================================
   INRL — Design System
   Colors: teal accent on a light editorial surface, near-black
   dark bands (hero / footer / dashboards).
   Fonts:  Oxanium (display/headings) + Roboto (body)
   Source: Figma "INRL — Studies" (RES5XfG4fvECtsvIPV8pZl), tokens
   pulled from the file's own layer fills/text styles.
   ============================================================= */

/*--------------------------------------------------------------
  1. VARIABLES
--------------------------------------------------------------*/
body {
  /* Typography */
  --font-display: "Oxanium", sans-serif;
  --font-body: "Roboto", sans-serif;
  --heading-font: var(--font-display);
  --heading-font-weight: 500;
  --heading-color: var(--ink-900);
  --heading-line-height: 1.04;

  /* Light surface (storefront default)
     Source: Figma "INRL — FINAL" Web Style Guide (Colour — Core). --line-200
     is the ink/400 "borders only" token (#879596), not a surface color —
     the old #ced6d8 border value is now surface/4 (secondary button/chip). */
  --ink-900: #384143;
  --ink-700: #455356;
  --ink-500: #737373;
  --ink-400: #879596;
  --ink-inverse: #ffffff;
  --line-200: var(--ink-400);
  --line-100: #e1e8e9;
  --surface-0: #ffffff;
  --surface-50: #f7f8f8;
  --surface-2: #eeeeee;
  --surface-3: #e1e8e9;
  --surface-4: #ced6d8;
  --surface-dark: #14191a;

  /* Dark surface (hero band, footer, dashboards) */
  --dark-900: #0b0f10;
  --dark-800: #14191a;
  --dark-700: #232b2c;
  --paper-100: #ffffff;
  --paper-200: #d5dbdb;
  --paper-300: #a9b3b4;
  --paper-500: #7f8b8c;

  /* Accent (teal) — brand teal is unchanged as the identity; the extra
     steps exist only so the accent can legally carry text/fills at AA:
     500 is the mark (indicator/border/large text), 600 is button hover,
     700 is button fill (5.5:1), 800 is teal text (7.5:1). */
  --accent-500: #12a2b8;
  --accent-400: var(--accent-500);
  --teal-200: #bee6ed;
  --teal-600: #0c7e90;
  --teal-700: #0a7383;
  --accent-700: #1c5d68;
  --warn-500: #c17a2e;
  --danger-500: #dc191a;
  --state-warning: #f0dd2b;
  --state-like: #ff3b3c;
  --state-ar: #00f6ff;

  /* Radius scale — 4 values only (Spacing & Radius) */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Legacy aliases — some pages still reference these directly;
     point them at the closest new-system equivalent. */
  --nb-green:  var(--accent-500);
  --nb-yellow: var(--warn-500);
  --nb-dark:   var(--ink-900);
  --nb-white:  var(--surface-0);
  --nb-border:    1px solid var(--line-200);
  --nb-shadow:    none;
  --nb-shadow-sm: none;
  --nb-shadow-lg: none;

  /* Swiper */
  --swiper-theme-color: var(--accent-500);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 16px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink-700);
  --bs-body-color-rgb: 69, 83, 86;
  --bs-body-bg: var(--surface-0);

  --bs-primary: var(--accent-500);
  --bs-primary-rgb: 18, 162, 184;
  --bs-secondary: var(--accent-700);
  --bs-secondary-rgb: 28, 93, 104;
  --bs-black: var(--dark-900);
  --bs-black-rgb: 11, 15, 16;
  --bs-light: var(--surface-50);
  --bs-light-rgb: 247, 248, 248;
  --bs-dark: var(--dark-800);
  --bs-dark-rgb: 20, 25, 26;
  --bs-gray: var(--ink-500);
  --bs-gray-dark: var(--ink-700);

  --bs-link-color: var(--ink-900);
  --bs-link-color-rgb: 56, 65, 67;
  --bs-link-decoration: none;
  --bs-link-hover-color: var(--accent-500);
  --bs-link-hover-color-rgb: 18, 162, 184;
}

/*--------------------------------------------------------------
  2. GENERAL TYPOGRAPHY
--------------------------------------------------------------*/
body {
  letter-spacing: 0.01rem;
  background: var(--bs-body-bg);
}

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 25px 0; }

h1, .h1 { font-size: 4.5rem; }
h2, .h2 { font-size: 3.6rem; }
h3, .h3 { font-size: 2.8rem; }
h4, .h4 { font-size: 1.8rem; }
h5, .h5 { font-size: 1.4rem; }
h6, .h6 { font-size: 1rem; }

a {
  text-decoration: none;
  color: inherit;
}

/* Small uppercase eyebrow/label text used throughout the new system
   (section kickers, tags, table headers) */
.eyebrow, .text-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/*--------------------------------------------------------------
  3. LAYOUT
--------------------------------------------------------------*/
.container-fluid {
  max-width: 1800px;
}

/*--------------------------------------------------------------
  4. BOOTSTRAP COMPONENT OVERRIDES
--------------------------------------------------------------*/

/* --- Dropdown --- */
.dropdown-menu {
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-border-color: var(--line-200);
  background-color: var(--surface-0);
  box-shadow: 0 12px 32px rgba(11, 15, 16, 0.12);
  padding: 0.4rem;
}

.dropdown-item {
  --bs-dropdown-item-padding-y: 0.55rem;
  --bs-dropdown-item-padding-x: 0.9rem;
  --bs-dropdown-link-color: var(--ink-700);
  --bs-dropdown-item-border-radius: var(--radius-sm);
  font-family: var(--bs-body-font-family);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus {
  --bs-dropdown-link-active-color: var(--ink-900);
  --bs-dropdown-link-active-bg: var(--surface-50);
  background-color: var(--surface-50);
  color: var(--ink-900);
}

/* --- List group (cart items, etc.) --- */
.list-group {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.list-group-item {
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-border-width: 0;
  border-bottom: 1px solid var(--line-100) !important;
  border-radius: 0 !important;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.list-group-item:last-child {
  border-bottom: none !important;
}

/* --- Buttons --- */
.btn {
  --bs-btn-border-radius: 999px;
  border-radius: 999px !important;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-family: var(--bs-body-font-family);
  font-size: 0.88rem;
  padding: 0.62rem 1.5rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn-primary {
  --bs-btn-color:              var(--ink-inverse);
  --bs-btn-bg:                 var(--teal-700);
  --bs-btn-border-color:       var(--teal-700);
  --bs-btn-hover-color:        var(--ink-inverse);
  --bs-btn-hover-bg:           var(--teal-600);
  --bs-btn-hover-border-color: var(--teal-600);
  --bs-btn-active-color:       var(--ink-inverse);
  --bs-btn-active-bg:          var(--accent-700);
  --bs-btn-active-border-color:var(--accent-700);
  --bs-btn-disabled-color:     var(--ink-inverse);
  --bs-btn-disabled-bg:        var(--teal-200);
  --bs-btn-disabled-border-color:var(--teal-200);
  border-width: 1px;
}

.btn-dark {
  --bs-btn-bg:                 var(--dark-800);
  --bs-btn-border-color:       var(--dark-800);
  --bs-btn-color:              var(--paper-100);
  --bs-btn-hover-bg:           var(--dark-700);
  --bs-btn-hover-border-color: var(--dark-700);
  --bs-btn-hover-color:        var(--accent-400);
  --bs-btn-active-bg:          var(--dark-900);
  --bs-btn-active-border-color:var(--dark-900);
  --bs-btn-active-color:       var(--accent-400);
  border-width: 1px;
}

.btn-outline-dark {
  --bs-btn-border-color:       var(--ink-900);
  --bs-btn-color:              var(--ink-900);
  --bs-btn-hover-bg:           var(--ink-900);
  --bs-btn-hover-color:        var(--surface-0);
  --bs-btn-hover-border-color: var(--ink-900);
  border-width: 1px;
}

.btn-light, .btn-outline-light, .btn-secondary {
  border-radius: 999px !important;
}

.input-group .btn {
  border-radius: var(--radius-sm) !important;
}

/* --- Pagination --- */
.pagination {
  --bs-pagination-active-bg: var(--ink-900);
  --bs-pagination-active-color: var(--surface-0);
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: var(--line-200);
  --bs-pagination-border-radius: 999px;
}
.page-link {
  border-radius: 999px !important;
  color: var(--ink-900);
}
.page-link:hover {
  background-color: var(--surface-50);
  border-color: var(--line-200);
  color: var(--ink-900);
}
.page-item.active .page-link {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
}

/* --- Breadcrumb --- */
.breadcrumb {
  --bs-breadcrumb-item-padding-x: 1em;
  font-size: 0.8rem;
  color: var(--ink-500);
}

/* --- Text white context --- */
.text-white {
  --heading-color: var(--paper-100);
  --bs-breadcrumb-item-active-color: var(--paper-100);
  --bs-breadcrumb-divider-color: var(--paper-300);
  --bs-link-color-rgb: 240, 240, 240;
  --bs-link-hover-color-rgb: 79, 195, 213;
}
.text-white .nav-link {
  --bs-nav-link-color: var(--paper-100);
  --bs-nav-link-hover-color: var(--accent-400);
  --bs-nav-link-active-color: var(--accent-400);
  --bs-navbar-active-color: var(--accent-400);
}

/* --- Accordion --- */
.accordion {
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-color: var(--line-200);
  --bs-accordion-border-radius: var(--radius-md);
  --bs-accordion-inner-border-radius: var(--radius-md);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: 0.85rem;
  --bs-accordion-btn-color: var(--ink-900);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-border-color: var(--accent-500);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: 0.85rem;
  --bs-accordion-active-color: var(--ink-900);
  --bs-accordion-active-bg: var(--surface-50);
}
.accordion-item {
  border: 1px solid var(--line-200) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-button:not(.collapsed) {
  color: var(--ink-900);
  background-color: var(--surface-50);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: none;
  border-color: var(--accent-500);
}

/* --- Forms --- */
.form-control,
.form-select {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm) !important;
  background-color: var(--surface-0);
  color: var(--ink-900);
  transition: border-color 0.2s ease;
}
textarea.form-control {
  border-radius: var(--radius-sm) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(18, 162, 184, 0.12);
  outline: none;
}
.form-control::placeholder {
  color: var(--ink-500);
  opacity: 0.7;
}

/* --- Cards --- */
.card {
  border: 1px solid var(--line-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none;
  background: var(--surface-0);
}
.card-header, .card-footer {
  border-radius: 0 !important;
  background: var(--surface-50);
  border-color: var(--line-200);
}

/* --- Badges --- */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: rgba(18, 162, 184, 0.12) !important;
  color: var(--accent-700) !important;
  font-weight: 500;
  border-radius: 999px;
}

/* --- Dark theme support --- */
[data-bs-theme=dark] body {
  color-scheme: dark;
  --heading-color: var(--paper-100);
  --bs-link-color: var(--paper-100);
  --bs-link-hover-color: var(--accent-400);
  --bs-link-color-rgb: 240, 240, 240;
  --bs-link-hover-color-rgb: 79, 195, 213;
  --bs-body-color: var(--paper-300);
  --bs-body-bg: var(--dark-800);
}
[data-bs-theme=dark] .dropdown-item {
  --bs-dropdown-link-color: var(--paper-100);
  --bs-dropdown-link-hover-color: var(--dark-900);
}
[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .bg-light {
  --bs-bg-opacity: 0.06;
}

/*--------------------------------------------------------------
  5. NAVBAR
--------------------------------------------------------------*/
.navbar {
  background-color: var(--surface-0) !important;
  border-bottom: 1px solid var(--line-200) !important;
}
.navbar.fixed-top {
  transition: none;
}
.navbar .nav-link {
  color: var(--ink-700) !important;
  font-family: var(--bs-body-font-family);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .navbar-nav .nav-link.show {
  color: var(--ink-900) !important;
}
.navbar .navbar-brand {
  color: var(--ink-900) !important;
}
.navbar .navbar-toggler {
  border-color: var(--line-200);
  color: var(--ink-900);
}
.navbar .navbar-toggler-icon {
  filter: none;
}

/* Navbar dropdown (Account menu) */
.navbar .dropdown-menu {
  --bs-dropdown-border-radius: var(--radius-md);
  background-color: var(--surface-0) !important;
  border: 1px solid var(--line-200) !important;
  box-shadow: 0 12px 32px rgba(11, 15, 16, 0.12);
}
.navbar .dropdown-item {
  color: var(--ink-700) !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--surface-50) !important;
  color: var(--ink-900) !important;
}

/* Navbar icons */
.navbar svg,
.navbar .icon-link svg {
  transition: stroke 0.15s ease, fill 0.15s ease;
}

/* Site-wide brand wordmark: ecommerce/images/logo.svg (dark, for light surfaces) and
   logo-light.svg (light, for dark surfaces) are picked directly per usage site — see
   partials/header.html, partials/footer.html, etc. No filter trick needed now that both
   color variants exist as real files. */

/*--------------------------------------------------------------
  6. PRELOADER
--------------------------------------------------------------*/
.preloader {
  position: fixed;
  z-index: 99;
  background: var(--dark-900);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.preloader.loaded {
  height: 0;
}

/*--------------------------------------------------------------
  7. SLIDESHOW / BANNER
--------------------------------------------------------------*/
.slideshow {
  position: relative;
  overflow: hidden;
}
/* Force Swiper internals to fill the container height */
.slideshow .swiper-wrapper,
.slideshow .swiper-slide {
  height: 100vh;
}
.slideshow .swiper-slide {
  position: relative;
  overflow: hidden;
}
/* Mobile hero text adjustments */
@media (max-width: 767px) {
  .slideshow .swiper-slide .banner-content h2 {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
  }
  .slideshow .swiper-slide .banner-content .col-12 {
    text-align: center;
  }
}

/* fade in */
.slideshow.fade-in .swiper-slide .banner-content {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  transition-delay: 600ms;
}
.slideshow.fade-in .swiper-slide.swiper-slide-active .banner-content {
  opacity: 1;
}

/* slide in */
.slide-in .swiper-slide .banner-content h2,
.slide-in .swiper-slide .banner-content p,
.slide-in .swiper-slide .banner-content .btn {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-in .swiper-slide .banner-content h2 { transition-delay: 600ms; }
.slide-in .swiper-slide .banner-content p   { transition-delay: 800ms; }
.slide-in .swiper-slide .banner-content .btn { transition-delay: 1000ms; }
.slide-in .swiper-slide.swiper-slide-active .banner-content h2,
.slide-in .swiper-slide.swiper-slide-active .banner-content p,
.slide-in .swiper-slide.swiper-slide-active .banner-content .btn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* slide-clip */
.slide-clip .swiper-slide .image-holder img {
  transform: scale(1.2);
  transition: transform 1s ease-in-out;
}
.slide-clip .swiper-slide.swiper-slide-active .image-holder img {
  transform: scale(1);
}
.slide-clip .swiper-slide .image-holder {
  clip-path: inset(100% 0 0 0);
  display: block;
}
.slide-clip .swiper-slide.swiper-slide-active .image-holder {
  animation: 1s slide-clip forwards;
}
.slide-clip .swiper-slide.swiper-slide-prev .image-holder,
.slide-clip .swiper-slide.swiper-slide-next .image-holder {
  animation: 1s slide-down;
}

@keyframes slide-clip {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes slide-down {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

/*--------------------------------------------------------------
  8. ANIMATIONS
--------------------------------------------------------------*/
/* swipe-up */
.swipe-up {
  clip-path: inset(0 0 100% 0);
  display: block;
  --delay: 0.05s;
  animation-delay: 1s;
}
.aos-animate .swipe-up {
  animation: 1s swipe-up forwards;
}
@keyframes swipe-up {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

/* polygon */
.polygon {
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0% 20%);
}
.aos-animate .polygon {
  animation: 1s polygon forwards;
}
@keyframes polygon {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0% 20%); }
  100% { clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
}

/* open-up */
.open-up {
  clip-path: inset(48% 34% 36% 35%);
}
.aos-animate.open-up {
  animation: 1s open-up forwards;
}
@keyframes open-up {
  0%   { clip-path: inset(48% 34% 36% 35%); }
  100% { clip-path: inset(0% 0% 0% 0%); }
}

/*--------------------------------------------------------------
  9. TEXT EFFECTS
--------------------------------------------------------------*/
.txt-fx {
  overflow: hidden;
  line-height: 1;
  --delay: 50ms;
  --easing: cubic-bezier(.5, 0, .53, 1);
}
.txt-fx.zoom { overflow: visible; }
.txt-fx .word {
  overflow: hidden;
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}
.txt-fx .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}

/* fade right */
.txt-fx.fade-right .letter {
  transform: translate3d(-50px, 0, 0);
  opacity: 0;
  transition: transform 0.6s var(--easing), opacity 0.6s var(--easing);
}
.aos-animate .txt-fx.fade-right .letter {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* slide up */
.txt-fx.slide-up .letter {
  transform: translate3d(0, 1.2em, 0);
  transition: transform 0.9s var(--easing);
}
.swiper-slide-active .txt-fx.slide-up .letter,
.aos-animate .txt-fx.slide-up .letter {
  transform: translate3d(0, 0, 0);
}

/* domino */
.txt-fx.domino .letter {
  transform-origin: 50% 0;
  transform: rotateY(90deg);
  transition: transform 0.9s var(--easing);
}
.swiper-slide-active .txt-fx.domino .letter,
.aos-animate .txt-fx.domino .letter {
  transform: rotateY(0);
}

/* zoom */
.txt-fx.zoom .letter {
  transform-origin: 50% 0;
  transform: scale(3);
  transition: transform 0.9s var(--easing);
}
.swiper-slide-active .txt-fx.zoom .letter,
.aos-animate .txt-fx.zoom .letter {
  transform: scale(1);
}

/*--------------------------------------------------------------
  10. SEARCH POPUP
--------------------------------------------------------------*/
.search-popup {
  background-color: var(--dark-900);
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto; padding: 0;
  width: 90%; max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  transform: translateY(-40px);
  transition: transform 0.3s;
}
.is-visible .search-popup-container {
  transform: translateY(-50%);
}
.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}
.search-popup-form .form-control {
  padding: 0 0 .375em 0;
  font-size: 2em;
  background: transparent;
  color: var(--paper-100);
  border: none;
  border-bottom: 1px solid var(--accent-400);
  border-radius: 0 !important;
}
.search-popup-form .form-control:focus {
  box-shadow: none;
  border-color: var(--accent-400);
}
.search-popup-form #search-popup-submit { display: none; }
.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em; right: 2em;
  margin: -0.5em; padding: 0.5em;
  line-height: 0;
}
.search-popup .search-popup-close:hover {
  transform: rotate(90deg);
}
.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em; height: 1em;
  fill: var(--accent-400);
}
.search-popup .search-popup-close:hover i { fill: var(--paper-100); }
.search-popup .cat-list-title {
  margin-top: 40px; margin-bottom: 10px;
  font-size: 0.6em; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-400);
}
.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}
.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}
.search-popup .cat-list-item a {
  position: relative;
  color: var(--paper-100);
}
.search-popup .cat-list-item a:hover { color: var(--accent-400); }
.search-popup .cat-list-item a::after {
  background: none repeat scroll 0 0 transparent;
  content: "";
  height: 1px;
  border-bottom: 1px solid var(--accent-400);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  transition: height 0.3s, opacity 0.3s, transform 0.3s;
  transform: translateY(-5px);
}
.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  transform: translateY(2px);
}
.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  color: rgba(79, 195, 213, 0.4);
  vertical-align: text-top;
}
.search-popup .cat-list-item:last-child::after { display: none; }

.search-popup input[type="search"] {
  font-size: 24px;
  height: 60px;
  padding: 26px;
  background: transparent;
  color: var(--paper-100);
}
.search-popup .search-form button {
  top: 12px; right: 15px;
}
.search-popup .search-form button svg {
  height: 28px; width: 28px;
  stroke: var(--accent-400);
}

@media only screen and (max-width: 991px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control { font-size: 1.425em; }
}
@media only screen and (max-width: 767px) {
  .search-popup .search-popup-close { top: 1em; right: 1em; }
}
@media only screen and (max-width: 575px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control { font-size: 1.125em; }
  .search-popup .search-popup-close { top: 1em; right: 1em; }
}

/*--------------------------------------------------------------
  11. SWIPER ARROWS
--------------------------------------------------------------*/
.icon-arrow {
  position: absolute;
  top: 50%;
  font-size: 2em;
  color: var(--ink-900);
  z-index: 8;
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: var(--surface-0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-arrow:hover {
  background: var(--surface-50);
  border-color: var(--ink-500);
}
.icon-arrow.icon-arrow-left { left: 30px; }
.icon-arrow.icon-arrow-right { right: 30px; }

@media (max-width: 991px) {
  .icon-arrow.icon-arrow-left,
  .icon-arrow.icon-arrow-right { display: none; }
  .swiper-pagination { position: relative; }
}

.icon-arrow.no-outline {
  top: 40%;
  border: none;
  background: transparent;
  box-shadow: none;
}
.icon-arrow.no-outline:hover {
  background: none;
  color: var(--accent-500);
  box-shadow: none;
  transform: none;
}
.icon-arrow.light-arrow.no-outline {
  color: var(--paper-100);
  opacity: 0.7;
}
.icon-arrow.light-arrow.no-outline:hover { opacity: 1; }

.swiper-button-normal {
  background: transparent;
}
.swiper-button-normal .icon {
  font-size: 1.6em;
  color: var(--ink-900);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; height: 100%;
}

/*--------------------------------------------------------------
  12. IMAGE EFFECTS
--------------------------------------------------------------*/
.image-zoom-effect {
  display: flex;
  flex-wrap: wrap;
}
.image-zoom-effect .image-holder {
  width: 100%; height: auto;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.image-zoom-effect:hover .image-holder {
  transform: scale(0.95);
}
.image-zoom-effect img {
  transform: scale(1);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}
.image-zoom-effect:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
  13. BORDER ANIMATIONS
--------------------------------------------------------------*/
.border-animation a,
.border-animation a:after,
.border-animation a:before {
  transition: all .5s;
}
.border-animation a { position: relative; }
.border-animation a:after {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0;
  content: '.';
  color: transparent;
  background: var(--accent-500);
  height: 1px;
}
.border-animation a:hover:after { width: 100%; }
.content-light .border-animation a:hover:after,
.content-light .border-animation li.active a:after {
  background: var(--accent-400);
}
.border-animation .no-effect a:after { background: none; }

.border-animation-left .item-anchor {
  position: relative;
  margin-bottom: 20px;
}
.border-animation-left .item-anchor:after {
  content: "";
  position: absolute;
  width: 0; height: 1px;
  left: 0; bottom: 0;
  z-index: 9;
  background: var(--ink-900);
  transition: all 0.5s ease;
}
.border-animation-left.light-border .item-anchor:after,
.border-animation-left .item-anchor:after {
  background: var(--ink-900);
}
.border-animation-left .item-anchor:hover:after,
.border-animation-left .item-anchor:focus:after {
  width: 100%;
}

/*--------------------------------------------------------------
  14. BACKGROUND / DECORATIVE
--------------------------------------------------------------*/
.background {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 100%; height: 600px;
}
.background.pattern-bg {
  background: url(images/pattern-bg.png) no-repeat;
}
.background.normal-bg {
  background: url(images/newsletter-image.jpg) no-repeat;
}

.title-xlarge {
  font-size: calc(2rem + 10vw);
  font-family: var(--heading-font);
  color: rgba(56, 65, 67, 0.06);
  position: absolute;
  top: -40px; left: 0;
  z-index: 0;
  letter-spacing: -0.03em;
}

/*--------------------------------------------------------------
  15. VIDEO SECTION
--------------------------------------------------------------*/
.video .video-content { position: relative; }
.video .video-player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video .video-player a { position: relative; }
.video .video-player svg {
  color: #fff;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}
@media (max-width: 600px) {
  .video .video-player img.text-pattern {
    width: 60%;
    display: flex;
    margin: 0 auto;
  }
}

/*--------------------------------------------------------------
  16. TESTIMONIAL SLIDER
--------------------------------------------------------------*/
.testimonials .section-title {
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
}
.testimonial-swiper .testimonial-item blockquote {
  font-size: 2.5em;
}
.testimonial-swiper .testimonial-item blockquote > p { margin: 0; }
.testimonials .review-title { font-size: 14px; }
.testimonial-swiper .swiper-slide {
  opacity: 0.2;
  width: 42% !important;
}
.testimonial-swiper.swiper-3d .swiper-slide-shadow-left,
.testimonial-swiper.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}
.testimonial-swiper .swiper-slide-active { opacity: 1; }
.testimonials .swiper-pagination { left: 0; right: 0; }
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent-500);
}
.swiper-pagination-bullet {
  width: 8px; height: 8px;
  margin-right: 8px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: transparent;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--accent-500) !important;
  border-color: var(--accent-500) !important;
}

@media only screen and (max-width: 1199px) {
  .testimonial-swiper .testimonial-item blockquote { font-size: 1.8em; }
}
@media only screen and (max-width: 999px) {
  .testimonial-swiper .testimonial-item blockquote { font-size: 1.2em; }
}

/*--------------------------------------------------------------
  17. INSTAGRAM
--------------------------------------------------------------*/
.instagram .insta-item {
  position: relative;
  margin-bottom: 20px;
}
.instagram .insta-item a:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background-color: rgba(11, 15, 16, 0.35);
  opacity: 0;
  transition: 0.6s ease-out;
}

/*--------------------------------------------------------------
  18. LINK EFFECT
--------------------------------------------------------------*/
.link-effect a {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: transform 0.5s;
  display: block;
}
.link-effect a::after {
  content: attr(data-after);
  display: inline-block;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  font-size: 1rem;
  text-align: inherit;
  text-transform: uppercase;
  transition: inherit;
}
.link-effect a > span {
  display: inline-block;
  transform: translateY(0%);
  transition: inherit;
}
.link-effect:hover a > span { transform: translateY(-100%); }
.link-effect:hover a::after { transform: translateY(0%); }

/*--------------------------------------------------------------
  19. PRODUCT ITEMS
--------------------------------------------------------------*/
.product-item {
  border: none;
  box-shadow: none;
  transition: opacity 0.2s ease;
  background: transparent;
}
.product-item:hover {
  opacity: 0.88;
}
.product-item .btn-wishlist {
  display: block;
  z-index: 111;
  position: absolute;
  top: 10px;
  padding: 8px;
  color: var(--ink-900);
  background: var(--surface-0);
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  border: 1px solid var(--line-200);
  border-radius: 999px;
}
.product-item:hover .btn-wishlist { opacity: 1; }

/* AR-layer status chip on product cards */
.ar-layer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.ar-layer-tag.is-muted { color: var(--ink-500); }

/* Product price accent */
.product-info .product-price strong {
  font-size: 1.4em;
  color: var(--ink-900);
  padding-right: 10px;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}
.product-info .product-price del {
  color: var(--ink-500);
}

/* Rotating text */
.text-rotate {
  animation: rotation 50s infinite linear;
}
@keyframes rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

/*--------------------------------------------------------------
  20. SINGLE PRODUCT
--------------------------------------------------------------*/
.product-thumbnail-slider { height: 790px; }
@media screen and (max-width:992px) {
  .product-thumbnail-slider { margin-top: 20px; height: auto; }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider { height: 590px; }
}
@media screen and (min-width:1200px) {
  .product-thumbnail-slider { height: 790px; }
}

/* Quantity */
.product-quantity .qty-number { margin-right: 20px; }
.product-quantity .input-group .btn {
  height: 48px;
  border: 1px solid var(--line-200);
}
.qty-number .quntity-button {
  min-width: 40px; height: 40px;
  font-size: 1.4em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  background-color: var(--surface-0);
  border: 1px solid var(--line-200);
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.qty-number .quntity-button:hover {
  background-color: var(--surface-50);
}
.qty-number input {
  font-size: 1.1em;
  width: 50px; height: 40px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid var(--line-200);
}
.qty-field .regular-price { display: none; }

.single-product-template .breadcrumbs li {
  font-size: 1em;
  padding-right: 15px;
}
.single-product-template .breadcrumbs span { padding-left: 15px; }
.product-preview .swiper-slide { padding-bottom: 15px; }

/* Rating */
.rating-container .rating {
  color: var(--accent-500);
  font-size: 1.1em;
}

/* Color options */
.product-info .color-product-options .color-item {
  display: inline-block;
  vertical-align: top;
  width: 30px; height: 30px;
  cursor: pointer;
  border: 1px solid var(--line-200);
  padding: 2px;
  border-radius: 999px;
  margin: 0 4px;
  transition: border-color 0.15s ease;
}
.product-info .color-product-options .color-item:hover {
  border-color: var(--ink-900);
}
.product-info .color-product-options .color-item span {
  border: none;
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
}
.product-info .item-title { width: 100%; }

/* Swatch */
.swatch-element .swatch-label {
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  margin-right: 8px;
  min-width: 44px; height: 44px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  transition: all 0.15s ease;
  cursor: pointer;
  padding: 6px;
  font-family: var(--bs-body-font-family);
  letter-spacing: 0.02em;
}
.swatch-element .swatch-input { display: none; }
.swatch-element .swatch-input:checked + .swatch-label {
  border: 1px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--surface-0);
}
.swatch-element .swatch-label:hover {
  border-color: var(--ink-500);
}

/* Accordion (product detail) */
.product-info .accordion {
  --bs-accordion-btn-icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z"%2F%3E%3C%2Fsvg%3E');
  --bs-accordion-btn-active-icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 11H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z"%2F%3E%3C%2Fsvg%3E');
}
.product-filter .accordion {
  --bs-accordion-btn-color: var(--ink-900);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z"%2F%3E%3C%2Fsvg%3E');
  --bs-accordion-btn-active-icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 11H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z"%2F%3E%3C%2Fsvg%3E');
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-color: var(--ink-900);
}

.product-filter .accordion-body > div,
.product-filter .accordion-body a {
  display: block;
  padding: 10px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line-200);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.product-filter .accordion-body a:hover {
  border-color: var(--ink-900);
  background: var(--surface-50);
  color: var(--ink-900);
}

/* Reviews */
.review-style1 .review-item .rating-container .rating { font-size: 1em; }
.review-style1 .review-item span.author-name { font-weight: 500; }

/*--------------------------------------------------------------
  21. BUTTON LINK
--------------------------------------------------------------*/
.btn-link {
  font-size: 0.85rem;
  font-family: var(--bs-body-font-family);
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  font-weight: 500;
  color: var(--accent-700);
}
a.btn-link, a.btn-link:after { transition: all .5s; }
a.btn-link { position: relative; }
a.btn-link:before, a.btn-link:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  background-color: var(--ink-900);
  height: 1px;
}
[data-bs-theme=dark] a.btn-link:after { background-color: var(--paper-100); }
a.btn-link:before {
  background-color: rgba(56, 65, 67, 0.2);
  width: 100%;
}
a.btn-link.is-checked:after,
a.btn-link:hover:after { width: 100%; }
a.btn-link.text-white:after { background-color: var(--paper-100); }
a.btn-link.text-light:after { background-color: var(--paper-100); }

/*--------------------------------------------------------------
  22. FORM RADIO / CHECK
--------------------------------------------------------------*/
.form-check { padding: 0; }
.form-check-label {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  user-select: none;
}
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 0; left: 0;
  height: 22px; width: 22px;
  background-color: var(--surface-0);
  border: 1px solid var(--line-200);
  border-radius: 6px;
}
.form-check-label:hover input ~ .checkmark {
  border-color: var(--ink-500);
}
.form-check-label input:checked ~ .checkmark {
  background-color: var(--accent-700);
  border-color: var(--accent-700);
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.form-check-label input:checked ~ .checkmark:after { display: block; }
.form-check-label .checkmark:after {
  top: 6px; left: 6px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--surface-0);
}

.form-check-label.red input ~ .checkmark   { background-color: #CA7A7A; }
.form-check-label.brown input ~ .checkmark { background-color: #D5BB96; }
.form-check-label.green input ~ .checkmark { background-color: #A5BC73; }
.form-check-label.aqua input ~ .checkmark  { background-color: #779B9D; }

/*--------------------------------------------------------------
  23. IMAGE ZOOM
--------------------------------------------------------------*/
.image-zoom {
  position: relative;
  float: left;
  width: 100%; height: 100%;
  overflow: hidden;
}
.photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .3s ease-out;
}

/*--------------------------------------------------------------
  24. PRODUCT FILTER BUTTONS
--------------------------------------------------------------*/
.button-group a.is-checked,
.button-group .btn.is-checked {
  background-color: var(--ink-900) !important;
  color: var(--surface-0) !important;
  border-color: var(--ink-900) !important;
}

/*--------------------------------------------------------------
  25. PAGE HEADERS / BANNERS
--------------------------------------------------------------*/
.page-header,
.page-header-content {
  background-color: var(--dark-900) !important;
  border-bottom: none;
}
.page-header h1, .page-header h2, .page-header h3,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.page-header .breadcrumb-item.active {
  color: var(--paper-100) !important;
}
.page-header .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(240, 240, 240, 0.4);
}

/*--------------------------------------------------------------
  26. FOOTER
--------------------------------------------------------------*/
footer, #footer {
  background-color: var(--dark-900) !important;
  color: var(--paper-300) !important;
}
footer h1, footer .h1, footer h2, footer .h2,
footer h3, footer .h3, footer h4, footer .h4,
footer h5, footer .h5, footer h6, footer .h6,
#footer h1, #footer .h1, #footer h2, #footer .h2,
#footer h3, #footer .h3, #footer h4, #footer .h4,
#footer h5, #footer .h5, #footer h6, #footer .h6 {
  color: var(--paper-100) !important;
  letter-spacing: -0.03em;
}
footer .eyebrow, #footer .eyebrow {
  color: var(--paper-500) !important;
}
footer a, #footer a {
  color: var(--paper-200);
  text-decoration: none;
  transition: color 0.15s ease;
}
footer a:hover, #footer a:hover {
  color: var(--accent-400);
  text-decoration: none;
}
footer p, #footer p {
  color: var(--paper-300);
}
footer .text-muted, #footer .text-muted {
  color: var(--paper-500) !important;
}
footer .text-dark, #footer .text-dark {
  color: var(--paper-300) !important;
}
footer hr, footer .border-top,
#footer hr, #footer .border-top {
  border-color: rgba(240, 240, 240, 0.1) !important;
}

/*--------------------------------------------------------------
  27. ANNOUNCEMENT BAR
--------------------------------------------------------------*/
.announce-bar {
  background: var(--dark-800);
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 2.5rem;
  position: relative;
}
.announce-bar a { color: inherit; }
.announce-bar .announce-close {
  position: absolute;
  right: 0.9rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--paper-500);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}
.announce-bar .announce-close:hover { color: var(--paper-100); }

/* =============================================================
   END INRL DESIGN SYSTEM
   ============================================================= */