@import url("https://esm.sh/swiper@11.2.2/swiper-bundle.min.css");
@import url("https://esm.sh/flag-icons@7.3.2/css/flag-icons.min.css");

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind forms;

:root {
  --background: #EFE8DA; /* Set your default background color here */
  
  /* Primary colors */
  --primary: #a1702b;
  --accent: #bb9b40;
  --text: #654321;
  --neutral: #9ca3af;
  --neutral-50: #f9fafb;
  --neutral-400: #9ca3af;
  
  /* Input styling */
  --input: #a1702b;
  --input-bg: #ffffff;
  --input-text: #654321;
  --input-focus-bg: #ffffff;
  --input-border-radius: 0.375rem;
  
  /* Button styling */
  --button: #a1702b;
  --button-text: #ffffff;
  --button-border-radius: 0.375rem;
  --button-border-width: 1px;
  --button-border-color: #a1702b;
  
  /* Border defaults */
  --border-default-color: #d1d5db;
  --border-default-radius: 0.375rem;
  --border-default-width: 1px;
  --border-default-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  
  /* Status colors */
  --success: #d9f7ea;
  --danger: #f87171;
  
  /* Badge styling */
  --badge-border-radius: 0.375rem;
}

.welcome-section {
  margin: 1.5rem 0;
  line-height: 1.6;
}

.welcome-section h2 {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
}

.welcome-section p {
  margin-bottom: 1rem;
}

.welcome-section .call-to-action {
  font-weight: 600;
  font-style: italic;
  margin-top: 1.5rem;
}

/*
  This is the storefront CSS
*/

.container,
.page-container {
  max-width: 90rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .page-container {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
}

@media (min-width: 1024px) {
  header.header-logo-centered.headroom--not-top
    > nav
    > .page-container
    > .flex {
    align-items: center !important;
  }
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* iOS Safari button and dropdown fixes */
button, select, input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: none;
  border: none;
  color: #654321;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.trix-content a {
  text-decoration: underline;
}

.trix-content ul {
  list-style-type: revert;
  list-style-position: inside;

  @apply pl-8;

  &:not(ul ul) {
    @apply mt-2 mb-6;
  }
}

.trix-content li:last-child {
  @apply mb-2;
}

.trix-content ol {
  list-style: decimal;
  list-style-position: inside;

  @apply pl-8;

  &:not(ol ol) {
    @apply mt-2 mb-6;
  }
}

.select_address {
  margin-left: 0;
  padding-left: 0;
}

/* Fix for overlapping grid elements */
.grid > * {
  min-width: 0;
}

.select_address li {
  list-style: none;
}

/* Form input outlines for better accessibility */
.text-input,
.select-input {
  border: 1px solid #a1702b;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.text-input:focus,
.select-input:focus {
  border-color: #654321;
  box-shadow: 0 0 0 3px rgba(101, 67, 33, 0.1);
}

.text-input:hover,
.select-input:hover {
  border-color: #A0522D;
}

.text-input {
  max-width: 100%;
  border-radius: var(--input-border-radius);
  border-color: var(--input);
  background-color: var(--input-bg);
  color: var(--input-text);
  height: 3rem;
  box-sizing: border-box;
}

textarea.text-input {
  height: auto;
  min-height: 3rem;
  border-radius: 0;
}

.text-input:disabled {
  background-color: var(--neutral-50);
  border-color: var(--input);
  color: var(--neutral-400);
}

.text-input:focus {
  border-color: var(--primary);
  background-color: var(--input-focus-bg);
  --tw-ring-color: var(--primary);
}
.invalid {
  border-color: var(--danger);
  --tw-ring-color: var(--danger);
}

.turbo-frame button {
  background-color: transparent;
  cursor: pointer;
}

.select-input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--input-border-radius);
  border-color: var(--input);
  background-color: var(--input-bg);
  color: var(--input-text);
  height: 3rem;
  box-sizing: border-box;
}

.select-input:focus {
  border-color: var(--primary);
  background-color: var(--input-focus-bg);
  --tw-ring-color: var(--primary);
}

.checkbox-input {
  cursor: pointer;
  border-radius: var(--input-border-radius) / 2;
  border-color: var(--input);
  background-color: transparent;
}

.checkbox-input:checked {
  background-color: var(--primary);
}

.radio-input {
  cursor: pointer;
}

.checkbox-input:focus,
.checkbox-input:checked,
.radio-input:focus,
.radio-input:checked {
  outline: none !important;
  box-shadow: none !important;
}

.menu-item {
  font-weight: 400;
  line-height: 0.875rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 1.5px solid transparent;
}
.menu-item:hover span {
  border-bottom: 1.5px solid var(--accent);
}
.menu-item:active span,
.menu-item--active span {
  border-bottom: 1.5px solid var(--text);
}
.menu-item:focus {
  outline: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-radius: var(--button-border-radius);
}

@media (min-width: 1024px) {
  .menu-item {
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0.07rem;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

.btn-primary,
.btn-secondary {
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color, var(--button));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--button-text-color, var(--button-text));
  outline-offset: 0.5rem;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary {
  border: var(--button-border-width) solid
    var(--button-border-color, var(--button));
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-icon:not(.btn-primary, .btn-secondary):focus-visible {
  outline: none;
}

.btn-primary:not(:disabled):focus::after,
.btn-primary:not(:disabled):active::after,
.btn-secondary:not(:disabled):focus::after,
.btn-secondary:not(:disabled):active::after {
  content: "";
  border-radius: var(--button-border-radius);
  position: absolute;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  background-color: transparent;
  display: inherit;
}

.btn-primary:disabled,
.btn-primary.btn-disabled {
  cursor: not-allowed;
}

.btn-primary:hover:not(:disabled, .btn-disabled),
.btn-secondary:hover:not(:disabled, .btn-disabled) {
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  transition: filter 0.2s ease;
}

.btn-primary:hover:not(:disabled, .btn-disabled),
 .btn-secondary:hover:not(:disabled, .btn-disabled) {
  color: var(--button-background-color, var(--primary));
  background-color: var(--button-text-color, var(--button-text));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  transition: filter 0.2s ease;
}

.btn-primary:hover:not(:disabled) svg path,
.btn-secondary:hover:not(:disabled) svg path {
  stroke: var(--button-background-color, var(--primary));
}

.btn-primary:hover:not(:disabled) svg path[fill],
.btn-secondary:hover:not(:disabled) svg path[fill] {
  fill: var(--button-background-color, var(--primary));
}

/* Ensure SVG itself remains visible */
.btn-primary:hover:not(:disabled) svg,
  .btn-secondary:hover:not(:disabled) svg {
  display: inline-block;
  color: var(--button-background-color, var(--primary));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition: filter 0.2s ease;
}

/* With this comprehensive solution */
.btn-primary:hover:not(:disabled, .btn-disabled) svg,
.btn-secondary:hover:not(:disabled, .btn-disabled) svg {
  color: var(--button-background-color, var(--primary));
}

.btn-primary:hover:not(:disabled, .btn-disabled) svg path,
.btn-secondary:hover:not(:disabled, .btn-disabled) svg path {
  stroke: currentColor;
}

.btn-primary:hover:not(:disabled, .btn-disabled) svg path[fill],
.btn-secondary:hover:not(:disabled, .btn-disabled) svg path[fill] {
  fill: currentColor;
}

.btn-secondary:focus,
.btn-secondary:active {
  outline-color: var(--secondary-button);
}

.btn-primary.btn-icon,
.btn-secondary.btn-icon,
.link-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary.btn-icon > svg .btn-secondary.btn-icon > svg {
  height: 1.25rem;
}

.btn-icon:not(.btn-primary, .btn-secondary) {
  position: relative;
  padding: 0.5rem;
  border-radius: var(--button-border-radius);
  outline-offset: 1px;
}

.btn-icon:not(.btn-primary, .btn-secondary):hover {
  background: var(--accent-100);
}

.btn-icon:not(.btn-primary, .btn-secondary):active {
  background: var(--accent);
}

.btn-icon:not(.btn-primary, .btn-secondary):focus::after {
  content: "";
  border-radius: var(--button-border-radius);
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-color: transparent;
  display: inherit;
}

.link {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid transparent;
}

.link:hover {
  border-bottom-color: var(--text);
}

.link:focus-visible {
  outline-offset: 0.25rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}

.link > svg {
  height: 1.5rem;
}

.link-disabled {
  opacity: 0.3;
}

#checkout-page .btn-primary {
  border-radius: var(--button-border-radius);
  border: var(--button-border-width) solid
    var(--button-border-color, var(--button));
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: initial;
}

#checkout-page .btn-primary:focus,
#checkout-page .btn-primary:active {
  outline: none;
}

#checkout-page .btn-primary:hover:not(:disabled) {
  opacity: 0.8;
  background-color: var(--button);
  color: var(--button-text);
}

#checkout-page .btn-primary:disabled {
  opacity: 0.5;
  background-color: var(--button);
  border-color: var(--button);
}

#checkout-page .text-input,
#checkout-page .select-input {
  border-radius: 0.375rem;
  height: 46.8px;
}

#checkout-page #flashes .fixed {
  position: fixed;
  left: 0;
}

#checkout-page #checkout_payment_methods[busy] {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}

#checkout-page #checkout-message {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-xl pb-1;
  }
}

.field_with_errors .text-input,
.field_with_errors .select-input {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.StripeElement iframe:focus-visible {
  outline: none;
}

.breadcrumb-item {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item::before {
  content: url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ccc' class='bi bi-chevron-right' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  padding-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}

.breadcrumb-item:first-child::before {
  content: none;
}

.breadcrumb-item:first-child {
  margin-left: 0;
}

.breadcrumb-square {
  width: 0.25rem;
  height: 0.25rem;
  margin: 0.6rem 0;
  background-color: var(--text);
}

a:hover {
}

.delivery-list-item:last-child {
  border-radius: 0.375rem !important;
}

.has-float-label {
  position: relative;
}

.has-float-label label {
  color: var(--input-text);
  font-size: 11px;
  position: absolute;
  left: 10px;
  cursor: text;
  top: 3px;
  padding: 0 4px;
  opacity: 0.8;
  transition: transform 0.2s ease-in-out;
  white-space: nowrap;
  pointer-events: none;
}

.has-float-label input,
.has-float-label select {
  padding-top: 1rem;
  padding-bottom: 0.3rem;
}

.has-float-label input:-moz-placeholder-shown + label,
.has-float-label select:-moz-placeholder-shown + label {
  opacity: 0;
  transform: translateY(5px);
}

.has-float-label input:-moz-placeholder + label, .has-float-label select:-moz-placeholder + label {
  opacity: 0;
  transform: translateY(5px);
}

.has-float-label input:placeholder-shown + label,
.has-float-label select:placeholder-shown + label {
  opacity: 0;
  transform: translateY(5px);
}

.has-float-label input:-moz-placeholder-shown,
.has-float-label select:-moz-placeholder-shown {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.has-float-label input:-moz-placeholder, .has-float-label select:-moz-placeholder {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.has-float-label input:placeholder-shown,
.has-float-label select:placeholder-shown {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.badge,
.badge-success,
.badge-paid,
.badge-warning,
.badge-canceled,
.badge-failed,
.badge-refunded,
.badge-void,
.badge-pending,
.badge-ready,
.badge-partial,
.badge-active,
.badge-inactive {
  margin-right: 0.25rem;
  display: inline-block;
  border-radius: var(--badge-border-radius);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  font-weight: 400;
}

.badge:last-child,
.badge-success:last-child,
.badge-paid:last-child,
.badge-warning:last-child,
.badge-canceled:last-child,
.badge-failed:last-child,
.badge-refunded:last-child,
.badge-void:last-child,
.badge-pending:last-child,
.badge-ready:last-child,
.badge-partial:last-child {
  margin-right: 0px;
}

.badge-success,
.badge-paid,
.badge-active {
  background-color: #d9f7ea;
}

.badge-warning,
.badge-canceled,
.badge-failed {
  background-color: #f8e7e5;
}

.badge,
.badge-refunded,
.badge-pending,
.badge-void,
.badge-ready,
.badge-inactive {
  background-color: #f3f3f3;
}

.badge-partial {
  background-color: rgb(186 230 253);
}

address {
  font-style: normal;
}

button:focus {
  outline: none;
}

.summary-folded .summary {
  height: 0px !important;
}

.summary-folded .show-summary {
  display: block;
}

.summary-folded .hide-summary {
  display: none;
}

.chevron-summary::after {
  content: url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-chevron-right' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  color: var(--sidebar-divider);
  transform: rotate(-90deg);
  margin-left: 0.07rem;
}

.summary-folded .chevron-summary::after {
  transform: rotate(90deg);
}

@media (min-width: 1024px) {
  .summary-folded .summary {
    pointer-events: auto;
    height: 100% !important;
  }
}

/* .address-form {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .address-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .address-form.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .address-form.col-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
} */

.field_with_errors {
  display: contents;
}

.turbo-progress-bar {
  background-color: var(--primary);
}
.modal .turbo-frame-error {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

.card-dialog {
  margin-bottom: 1.25rem;
}

.border-default,
.border-sidebar {
  border-color: var(--border-default-color);
}

.card-dialog {
  border-radius: var(--border-default-radius);
  box-shadow: var(--border-default-shadow);
}

.border-default.border-t {
  border-width: 0;
  border-radius: 0;
  border-top-width: var(--border-default-width);
}

.border-default.border-b {
  border-width: 0;
  border-radius: 0;
  border-bottom-width: var(--border-default-width);
}

.border-default.border-b.border-t {
  border-width: 0;
  border-radius: 0;
  border-top-width: var(--border-default-width);
  border-bottom-width: var(--border-default-width);
}

.border-default.border-b-0 {
  border-bottom-width: 0;
}

.logo {
  max-height: 60px;
}

.checkout-mobile-header .logo {
  display: inline;
}

.product-image-container {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.product-image-container img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1024px) {
  .line-items {
    max-height: none !important;
  }
}

.alert-notice {
  background-color: var(--success);
}

.alert-error {
  background-color: #f8e7e5;
}

.alert-success {
  background-color: var(--success);
}

.alert-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

@media (min-width: 1024px) {
  .background {
    background: linear-gradient(
      90deg,
      #EFE8DA 50%,
      var(--accent) 50%
    );
  }
}

.quantity-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--input-border-radius);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border: var(--border-default-width) solid var(--border-default-color);
}

.quantity-picker.border-t {
  border-width: 0;
  border-radius: 0;
  border-top-width: var(--border-default-width);
}

.quantity-picker.border-b {
  border-width: 0;
  border-radius: 0;
  border-bottom-width: var(--border-default-width);
}

.quantity-picker.border-b-0 {
  border-bottom-width: 0;
}

.quantity-picker button:not(.hidden) {
  cursor: pointer;
  background-color: transparent;
  display: inline-flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: var(--input-border-radius);
}
.quantity-picker button svg {
  width: 18px;
  height: 18px;
}

.quantity-picker button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.quantity-picker input {
  width: 1.5rem;
  height: 100%;
  border-width: 0px;
  padding: 0px 0px;
  text-align: center;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

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

.quantity-picker input:focus {
  border-width: 0px;
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.quantity-picker input[type="number"]::-webkit-inner-spin-button,
.quantity-picker input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-picker input[type="number"] {
  -moz-appearance: textfield;
}

.swiper-pagination-bullet {
  border: 1px solid var(--primary);
  background: none;
  opacity: 1;
  margin: 0px 0.375rem !important;
  width: 10px;
  height: 10px;
}

input.without-arrows[type="number"]::-webkit-outer-spin-button,
input.without-arrows[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.without-arrows[type="number"] {
  -moz-appearance: textfield;
}

.swiper-pagination-bullet-active {
  background: var(--primary) !important;
}

.swiper-pagination-current {
  color: var(--text);
}

.swiper-pagination-lock {
  display: none;
}

.swiper-notification {
  display: none;
}

.pswp {
  --pswp-bg: var(--accent) !important;
  --pswp-placeholder-bg: var(--accent) !important;
}

.pswp__button--close {
  margin: 0;
  width: 4rem;
  height: 4rem;
  background: #EFE8DA;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pswp__button--close:hover {
  background: #EFE8DA;
}

.pswp__button--close .pswp__icn {
  position: static;
  width: 1.5rem;
  height: 1.5rem;
}

.pswp__button--arrow .pswp__icn {
  width: 2rem;
  height: 2rem;
  top: 0;
  margin: 0;
  left: 0;
}

.pswp__button--arrow--next .pswp__icn {
  transform: rotate(0deg) !important;
}

.pswp__button--arrow {
  width: 2rem;
  height: 2rem;
  bottom: 2rem;
  top: auto;
  visibility: visible !important;
}

.pswp__button--arrow--prev {
  left: 1rem;
}

.pswp__button--arrow--next {
  right: 1rem;
}

.pswp__button--zoom {
  display: none !important;
}

.pswp__counter {
  display: none;
}

.pswp__bullets-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  bottom: 2rem;
  height: 2rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.pswp__bullet {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0.25rem;
  margin: 0 0.25rem;
  border-radius: 50%;
  border: 1px solid var(--primary);
}

.pswp__bullet--active {
  background: var(--primary);
}
.pswp__pagination {
  display: none;
}

@media (min-width: 1024px) {
  .pswp__button--close {
    margin-right: 3.75rem;
    margin-top: 3.75rem;
  }
  .pswp__button--arrow {
    top: 50%;
  }
  .pswp__button--arrow--prev {
    left: 3.75rem;
  }
  .pswp__button--arrow--next {
    right: 3.75rem;
  }
  .pswp__bullets-indicator {
    display: none;
  }
  .pswp__pagination {
    display: block;
    position: absolute;
    top: 5rem;
    left: 3.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    color: var(--neutral);
  }
  .pswp__pagination--current {
    color: var(--text);
  }
}

#pinch-to-zoom {
  left: 50%;
  z-index: 100001;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

/* Zoom icon removed - no longer needed */

.flyout-menu:hover .flyout-button button {
  border-color: var(--primary);
  color: var(--primary);
}

.flyout-menu:hover .flyout-menu-container {
  display: block;
  z-index: 9999;
}

.product-description p {
  margin-bottom: 1rem;
}

.swipe-slide {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
  -webkit-transform-style: preserve-3d;
}

.word-break {
  word-break: break-word;
}

.tailwind-container {
  width: 100%;
}

@media (min-width: 640px) {
  .tailwind-container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .tailwind-container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .tailwind-container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .tailwind-container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .tailwind-container {
    max-width: 1536px;
  }
}

.hamburger-visible,
.search-visible {
  opacity: 1;
  pointer-events: auto;
}

.hamburger-visible .body {
  transform: translateX(0);
}

.menu-open div:first-of-type {
  opacity: 0;
}

.menu-open div:last-of-type {
  opacity: 1;
}

html[aria-busy="true"] .hide-on-load {
  pointer-events: none;
  opacity: 0;
}

.label {
  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  *[width-desktop="true"] {
    width: 100% !important;
  }
}

@media (min-width: 1024px) {
  .flex-centered {
    position: absolute;
    flex: 0 1 auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* kanety/stimulus-accordion */

.st-accordion .st-accordion__icon svg {
  transition: transform 0.2s;
}

.st-accordion .st-accordion__icon--opened svg {
  transform: rotate(-180deg);
}

.st-accordion .st-accordion__content:not(.st-accordion__content--visible) {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.2s;
  visibility: hidden;
  padding: 0;
}

.st-accordion .st-accordion__content.st-accordion__content--visible {
  opacity: 1;
  transition: all 0.2s;
  visibility: visible;
}

.st-accordion button {
  width: 100%;
  text-align: left;
}

.fixed-pdp-button {
  transition: all 0.2s ease;
}

@media (min-width: 1024px) {
  .fixed-pdp-button {
    display: none !important;
  }
}

.sidebar-pane {
  max-width: 420px;
  background-color: #EFE8DA;
}

/* Cart pane width fix */  
#slideover-cart {
  width: 100vw;
  max-width: none;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

@media (min-width: 640px) {
  #slideover-cart {
    width: auto;
    max-width: 28rem;
  }
}

/* Fix cart line item overflow */
#slideover-cart .cart-line-item {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Ensure cart contents don't overflow */
#slideover-cart .cart-contents {
  width: 100%;
  overflow-x: hidden;
}

/* Fix line item content width */
#slideover-cart .cart-line-item .ml-3 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

/* Prevent flex items from overflowing */
#slideover-cart .cart-line-item {
  flex-shrink: 1;
}

/* Ensure product image doesn't cause overflow */
#slideover-cart .cart-product-image {
  flex-shrink: 0;
  max-width: 128px; /* Match the img width */
}

#slideover-cart .line-item-total-amount {
  display: none;
}

#slideover-cart .cart-contents {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#slideover-cart #line-items {
  flex-grow: 1;
  overflow: auto;
  padding: 0;
}
#slideover-cart .cart-line-item {
}
.cart-line-item .delete svg {
  width: 1rem !important;
  height: 1rem !important;
}
#slideover-cart .cart-summary-container {
  background-color: var(--accent);
}
#slideover-cart .cart-summary-container * {
  text-align: left !important;
}
#slideover-cart .shopping-cart-total-text {
  display: flex;
  justify-content: space-between;
}
#slideover-cart .btn-primary {
  width: 100%;
  margin-top: 1rem;
  text-align: center !important;
  margin-bottom: 0;
}
#slideover-cart turbo-frame[busy] {
  opacity: 0.5;
  cursor: wait;
}
.line-item-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slideover-cart turbo-frame[busy] .line-item-overlay {
  display: block;
}

.headroom--unpinned:not(.headroom--frozen) {
  pointer-events: none;
}

.headroom--unpinned:not([data-toggle-menu-open-value="true"]):not(
    [data-slideover-open-value="true"]
  )
  nav {
  transform: translateY(-100%);
}
/*#region noUiSlider functional */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
.noUi-horizontal {
  height: 18px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/*#endregion*/

.noUi-target {
  background: var(--border-default-color);
  height: 2px;
  width: calc(100% - 24px);
  margin-left: 12px;
}
.noUi-connect {
  background: var(--primary);
  height: 2px;
}
.noUi-handle {
  border: 3px solid #fff;
  width: 24px;
  height: 24px;
  right: -12px;
  top: -12px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.input-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border-color: var(--border-default-color);
  background-color: transparent;
  color: transparent;
}

.input-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  border-color: var(--primary);
}
.input-checkbox:hover {
  border-color: var(--primary);
}
.input-checkbox:checked:hover {
  border-color: var(--primary);
}
.input-checkbox:focus,
.input-checkbox:checked:focus {
  outline-color: var(--primary);
  outline: none;
  box-shadow: none;
}

#search-suggestions {
  z-index: 50;
  width: 100%;
  background-color: #EFE8DA;
  top: 0;
  left: 0;
  display: none;
  position: absolute;
}
#search-suggestions::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #EFE8DA;
  opacity: 0.75;
  z-index: -1;
  animation: fadeInTo75 0.5s ease-in-out;
}

@keyframes fadeInTo75 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (min-width: 768px) {
  .custom-desktop-height {
    height: var(--desktop-height);
  }
}
@media (max-width: 768px) {
  .custom-mobile-height {
    height: var(--mobile-height);
  }
}

.rounded-input {
  border-radius: var(--input-border-radius);
}

.rounded-button {
  border-radius: var(--button-border-radius);
}

.modal {
  position: fixed;
  overflow-y: auto;
  inset: 0px;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* https://stackoverflow.com/questions/32082121/why-is-fixed-position-elements-being-cut-off-on-full-screen-iphone-experience-wh */
  transform: translate3d(0, 0, 0);
}

.modal .page-container,
.modal .main-product-container {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 none !important;
}

.product-modal #breadcrumbs {
  display: none;
}

.product-modal .add-to-wishlist {
  display: none;
}

.media-gallery-desktop .swiper-slide-thumb-active {
  position: relative;
}
.media-gallery-desktop .swiper-slide-thumb-active::after {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  display: block;
  left: 0px;
  top: 0px;
  content: "";
}

.media-gallery-desktop .swiper-button-lock {
  display: none;
}
.media-gallery-desktop {
  container-name: media-gallery-desktop;
  container-type: inline-size;
}
@supports (container-type: inline-size) {
  .media-gallery-desktop {
    --arrows-display: none;
  }
}
@container media-gallery-desktop (max-width: calc(108px * 6 + 104px + 0.5rem)) {
  .media-gallery-desktop:has(.swiper-slide:nth-child(6))
    > .media-gallery-desktop__wrapper {
    --arrows-display: flex;
  }
}
@container media-gallery-desktop (max-width: calc(108px * 5 + 104px + 0.5rem)) {
  .media-gallery-desktop:has(.swiper-slide:nth-child(5))
    > .media-gallery-desktop__wrapper {
    --arrows-display: flex;
  }
}
@container media-gallery-desktop (max-width: calc(108px * 4 + 104px + 0.5rem)) {
  .media-gallery-desktop:has(.swiper-slide:nth-child(4))
    > .media-gallery-desktop__wrapper {
    --arrows-display: flex;
  }
}
@container media-gallery-desktop (max-width: calc(108px * 3 + 104px + 0.5rem)) {
  .media-gallery-desktop:has(.swiper-slide:nth-child(3))
    > .media-gallery-desktop__wrapper {
    --arrows-display: flex;
  }
}
@container media-gallery-desktop (max-width: calc(108px * 2 + 104px + 0.5rem)) {
  .media-gallery-desktop:has(.swiper-slide:nth-child(2))
    > .media-gallery-desktop__wrapper {
    --arrows-display: flex;
  }
}

.media-gallery-desktop-arrow {
  display: var(--arrows-display, flex);
}

#floating-cart-icon {
  bottom: 1rem;
  right: 1rem;
  z-index: 9998;
}

.custom-height {
  height: var(--mobile-height, var(--height));
}
@media (min-width: 501px) {
  .custom-height {
    height: var(--desktop-height, var(--height));
  }
}
@media (min-width: 768px) {
  .desktop-max-width {
    max-width: var(--desktop-max-width);
  }
}

.checkout-container {
  --main-container-width: 650px;
  --summary-container-width: 455px;
  grid-template-rows: min-content auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "summary"
    "main";
  /* Ensure container doesn't overflow viewport */
  max-width: 100vw;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .checkout-container {
    grid-template-rows: 1fr;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, var(--main-container-width))
      minmax(0, var(--summary-container-width))
      minmax(0, 1fr);
    grid-template-areas: "main main summary summary";
  }
}

#checkout-main #flashes {
  --flashes-container-width: var(--main-container-width) +
    var(--summary-container-width);
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, calc(var(--flashes-container-width)))
    minmax(0, 1fr);
  grid-template-areas: ". flash .";
  display: grid;
  left: 0;
}

#checkout-main #flashes > div {
  grid-area: flash;
}

#checkout-main {
  background: #EFE8DA;
  grid-area: main;
}

#checkout-summary {
  background: var(--accent);
  grid-area: summary;
}

#checkout-main > .checkout-main-container,
#checkout-footer {
  max-width: var(--main-container-width);
  width: 100%;
  inline-size: 100%;
  padding: 0px 21px;
  box-sizing: border-box;
  /* Ensure mobile responsiveness */
}

@media (max-width: 768px) {
  #checkout-main > .checkout-main-container,
  #checkout-footer {
    max-width: 100vw;
    padding: 0px 16px;
  }
}
#checkout-footer {
  padding: 16px 21px;
  padding-top: 0;
}
#checkout-summary > .checkout-summary-container {
  max-width: var(--summary-container-width);
  width: 100%;
  inline-size: 100%;
  padding: 21px;
  box-sizing: border-box;
  /* Ensure mobile responsiveness */
}

@media (max-width: 768px) {
  #checkout-summary > .checkout-summary-container {
    max-width: 100vw;
    padding: 16px;
  }
}

@media (min-width: 768px) {
  #checkout-main > .checkout-main-container {
    padding: 42px;
    flex-grow: 1;
  }
  #checkout-footer {
    padding: 16px 42px;
    padding-top: 0;
  }
  #checkout-summary > .checkout-summary-container {
    padding: 42px;
    position: sticky;
    top: 0;
  }
}

.size-chart-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.size-chart-table tr th {
  border: 1px solid var(--border-default-color);
  padding: 0.25rem;
  text-align: center;
  font-weight: 600;
}
.size-chart-table tr td {
  border: 1px solid var(--border-default-color);
  padding: 0.25rem;
  text-align: center;
}

.dropdown-button:focus svg {
  rotate: 180deg;
  transition: 200ms;
}

/* PDP properties */
.product-property {
  ul {
    list-style: disc;
    padding-left: 2rem;
  }

  ol {
    list-style: decimal;
    padding-left: 2rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  a {
    font-weight: 600;
    line-height: 1.375;
    letter-spacing: 0.07rem;
    color: var(--text);
    border-bottom: 1px solid transparent;

    &:hover {
      border-bottom-color: var(--text);
    }

    &:focus-visible {
      outline-offset: 0.25rem;
      padding: 0 0.25rem;
      border-radius: 0.25rem;
    }
  }
}
.product-description-truncated {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 3);
}
.header--nav-item .menu-item:focus:not(.header--mega-nav-container *) {
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 0rem;
  margin-right: 0rem;
}

.post-details-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-xl font-medium my-4;
  }

  li {
    b,
    strong {
      @apply font-semibold;
    }
  }

  pre {
    @apply mb-4;
  }

  p {
    @apply my-4;
  }

  p:first-child {
    margin-top: 0;
  }

  img {
    width: 100%;
  }

  hr {
    @apply mt-4 mb-6;
  }

  .attachment {
    @apply my-6;
  }

  .attachment__caption {
    @apply text-center text-neutral-600 italic;
  }
}

.prose:not(:has(h1)) {
  h2:first-of-type {
    margin-top: 0;
  }
}

/* Three-layer header structure */

/* Layer 1: Brown background - bottom layer */
header nav.bg-brown-primary {
  position: relative;
}

header nav.bg-brown-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #a1702b; /* brown-primary color from config */
  z-index: 1; /* Bottom layer */
}

/* Layer 2: Logo - middle layer */
header .flex-shrink-0 {
  position: relative;
  z-index: 5; /* Above brown background, below navigation */
}

/* Layer 3: Navigation - top layer with transparent background */
header .nice-menu {
  position: relative;
  z-index: 10; /* Top layer */
  background-color: transparent !important;
}

/* Ensure navigation container is transparent */
header nav .lg\:flex,
header nav .hidden.lg\:flex {
  position: relative;
  z-index: 10;
  background-color: transparent !important;
}

/* Menu items remain clickable and on top */
header .nice-menu li a {
  position: relative;
  z-index: 15;
  background-color: transparent;
}

.pagination {
  .pagination-link {
    border: 1.5px solid transparent;
  }

  .pagination-link:hover {
    border-bottom: 1.5px solid var(--accent);
  }

  .pagination-link:active,
  .pagination-link--active {
    border-bottom: 1.5px solid var(--text);
  }

  .pagination-link--disabled {
    color: var(--neutral);
    pointer-events: none;
  }
}

label:has(.input-address-default:disabled) {
  color: var(--neutral);
}

.input-address-default:disabled {
  @apply cursor-not-allowed;

  border-color: var(--neutral);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='#999999' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");

  &:hover {
    border-color: var(--neutral);
  }
}

body:has(.currency-and-locale-modal:not(.hidden)) .page-contents {
  position: relative;
  z-index: 1;
}

.video-embed-container {
  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1.77;
  }
}