@font-face {
  font-family: 'cartzilla-icons';
  src: url("../fonts/cartzilla-icons.woff?v4xwry") format("woff"),
       url("../fonts/cartzilla-icons.ttf?v4xwry") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {

  --otodark-primary: #082c3c;
  --otodark-primary-hover: #0d4255;
  --otodark-primary-subtle: #e7eef1;
  --otodark-secondary: #e9eef0;

  --otodark-success: #347a5a;
  --otodark-success-subtle: #e7f2ec;
  --otodark-warning: #a87520;
  --otodark-danger: #b4233b;
  --otodark-danger-subtle: #f8e8ec;
  --otodark-info: #397080;

  --otodark-bg-body: #f4f5f6;
  --otodark-bg-card: #ffffff;
  --otodark-bg-subtle: #e9eef0;

  --otodark-border: #d8dee2;
  --otodark-border-hover: #bcc8ce;
  --otodark-border-focus: #082c3c;

  --otodark-text-main: #202a30;
  --otodark-text-muted: #68757d;

  --otodark-radius-sm: 6px;
  --otodark-radius-md: 10px;
  --otodark-radius-lg: 16px;
  --otodark-shadow-sm: 0 1px 3px rgba(32, 42, 48, 0.05);
  --otodark-shadow-md: 0 4px 6px -1px rgba(32, 42, 48, 0.07), 0 2px 4px -2px rgba(32, 42, 48, 0.05);
  --otodark-shadow-lg: 0 10px 15px -3px rgba(32, 42, 48, 0.08), 0 4px 6px -4px rgba(32, 42, 48, 0.04);
}

.shopping-menu-banner-column {
  flex: 0 0 clamp(18rem, 28vw, 25rem);
  max-width: clamp(18rem, 28vw, 25rem);
}

.shopping-menu-banner-link {
  width: 100%;
}

.shopping-menu-banner {
  display: block;
  width: 100%;
  height: 12rem;
  border-radius: var(--otodark-radius-md);
  object-fit: cover;
  object-position: center;
}

.footer-benefit-icon {
  color: var(--otodark-secondary) !important;
}

.footer-subscribe-button {
  background-color: var(--otodark-primary-subtle) !important;
  border-color: var(--otodark-primary-subtle) !important;
  color: var(--otodark-text-main) !important;
}

.footer-subscribe-button:hover,
.footer-subscribe-button:focus-visible {
  background-color: var(--otodark-bg-card) !important;
  border-color: var(--otodark-bg-card) !important;
  color: var(--otodark-primary) !important;
}

@media (max-width: 991.98px) {
  .shopping-menu-banner-column {
    flex: 1 1 100%;
    max-width: none;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .shopping-menu-banner {
    height: 10rem;
  }
}


:root {
  --mvc-white: #fff;
  --mvc-black: #000;
  --mvc-primary: #082c3c;
  --mvc-primary-hover: #0d4255;
  --mvc-primary-active: #06212d;
  --mvc-secondary: #e9eef0;
  --mvc-success: #347a5a;
  --mvc-success-hover: #2a6549;
  --mvc-success-active: #24563f;
  --mvc-info: #397080;
  --mvc-warning: #a87520;
  --mvc-danger: #b4233b;
  --mvc-bg-body: #f4f5f6;
  --mvc-bg-card: #ffffff;
  --mvc-border: #d8dee2;
  --mvc-border-hover: #bcc8ce;
  --mvc-text: #68757d;
  --mvc-text-strong: #202a30;
  --mvc-text-heading: #082c3c;
  --mvc-text-muted: #829099;
  --mvc-rgb-primary: 8, 44, 60;
  --mvc-rgb-success: 52, 122, 90;
  --mvc-rgb-danger: 180, 35, 59;
  --mvc-rgb-warning: 168, 117, 32;
  --mvc-rgb-info: 57, 112, 128;
  --mvc-rgb-text: 104, 117, 125;
  --mvc-rgb-text-strong: 32, 42, 48;
  --mvc-rgb-text-heading: 8, 44, 60;
  --mvc-rgb-text-muted: 130, 144, 153;
  --mvc-rgb-white: 255, 255, 255;
  --mvc-rgb-black: 0, 0, 0;
}
.auth-page-wrapper {
  background-color: var(--otodark-bg-body);
  min-height: calc(100vh - 450px);
  padding: 3rem 0;
}

.auth-card {
  background-color: var(--otodark-bg-card);
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-lg);
  box-shadow: var(--otodark-shadow-md);
  padding: 2.5rem 2rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.auth-card:hover {
  box-shadow: var(--otodark-shadow-lg);
  border-color: var(--otodark-border-hover);
}

.auth-card .card-title {
  color: var(--otodark-text-main);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.auth-card .card-subtitle {
  color: var(--otodark-text-muted);
  font-size: 0.925rem;
  margin-bottom: 1.75rem;
}

.auth-card .form-control {
  border-color: var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
  color: var(--otodark-text-main);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.auth-card .form-control:focus {
  border-color: var(--otodark-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.15);
}

.auth-card .input-group-text {
  background-color: var(--otodark-bg-subtle);
  border-color: var(--otodark-border);
  color: var(--otodark-text-muted);
  border-radius: var(--otodark-radius-sm);
}

.auth-login-form.was-validated .login-validation-field:has(.form-control:invalid) > .invalid-feedback {
  display: block;
}

.auth-card .btn-otodark-primary {
  background-color: var(--otodark-primary);
  border-color: var(--otodark-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: var(--otodark-radius-sm);
  padding: 0.7rem 1.25rem;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.auth-card .btn-otodark-primary:hover {
  background-color: var(--otodark-primary-hover);
  border-color: var(--otodark-primary-hover);
  color: #ffffff;
}

.auth-card .btn-otodark-primary:active {
  transform: translateY(1px);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--otodark-text-muted);
  font-size: 0.85rem;
  margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--otodark-border);
}

.auth-divider:not(:empty)::before {
  margin-right: 1em;
}

.auth-divider:not(:empty)::after {
  margin-left: 1em;
}

.auth-footer-text {
  color: var(--otodark-text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1.5rem;
}

.auth-footer-text a {
  color: var(--otodark-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer-text a:hover {
  color: var(--otodark-primary-hover);
  text-decoration: underline;
}


.password-toggle-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
}

.password-toggle-group .form-control {
  padding-right: 3rem !important;
  border-top-right-radius: var(--otodark-radius-sm) !important;
  border-bottom-right-radius: var(--otodark-radius-sm) !important;
}

.password-toggle-group .password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  margin-bottom: 0;
  padding: 0.4rem 0.6rem;
  transform: translateY(-50%);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  color: var(--otodark-text-muted);
}

.password-toggle-group .password-toggle-btn:hover {
  color: var(--otodark-text-main);
}

.password-toggle-group .password-toggle-btn .custom-control-input:checked ~ .password-toggle-indicator,
.password-toggle-group .password-toggle-btn.is-active .password-toggle-indicator,
.password-toggle-group .password-toggle-btn.is-active {
  color: var(--otodark-primary) !important;
}

.auth-card .password-validation-field:has(.password-toggle-group .form-control.is-invalid) > .invalid-feedback,
.auth-card .password-validation-field:has(.password-toggle-group .form-control.is-invalid) > .input-group + .invalid-feedback,
.auth-card .was-validated .password-validation-field:has(.password-toggle-group .form-control:invalid) > .invalid-feedback,
.auth-card .was-validated .password-validation-field:has(.password-toggle-group .form-control:invalid) > .input-group + .invalid-feedback {
  display: block;
}

.auth-card .password-toggle-group:has(.form-control.is-invalid) .password-toggle-btn,
.auth-card .was-validated .password-toggle-group:has(.form-control:invalid) .password-toggle-btn {
  right: 2.1rem;
}


.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid var(--otodark-border);
  color: var(--otodark-text-main);
  font-weight: 500;
  border-radius: var(--otodark-radius-sm);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: var(--otodark-shadow-sm);
}

.btn-google-auth:hover {
  background-color: var(--otodark-bg-subtle);
  border-color: var(--otodark-border-hover);
  color: var(--otodark-text-main);
  box-shadow: var(--otodark-shadow-md);
}

.btn-google-auth svg,
.btn-google-auth i {
  margin-right: 0.65rem;
  font-size: 1.15rem;
}


.otodark-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
}

@media (max-width: 576px) {
  .otodark-toast-container {
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}

.otodark-toast {
  pointer-events: auto;
  position: relative;
  background-color: var(--otodark-bg-card);
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md, 10px);
  box-shadow: var(--otodark-shadow-lg);
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  overflow: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease;
  animation: otodarkToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.otodark-toast.hiding {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
}

@keyframes otodarkToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.otodark-toast-success {
  border-left: 4px solid var(--otodark-success);
}
.otodark-toast-error {
  border-left: 4px solid var(--otodark-danger);
}
.otodark-toast-warning {
  border-left: 4px solid var(--otodark-warning);
}
.otodark-toast-info {
  border-left: 4px solid var(--otodark-info);
}

.otodark-toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 1rem;
}

.otodark-toast-success .otodark-toast-icon {
  background-color: rgba(22, 163, 74, 0.12);
  color: var(--otodark-success);
}

.otodark-toast-error .otodark-toast-icon {
  background-color: rgba(220, 38, 38, 0.12);
  color: var(--otodark-danger);
}

.otodark-toast-warning .otodark-toast-icon {
  background-color: rgba(217, 119, 6, 0.12);
  color: var(--otodark-warning);
}

.otodark-toast-info .otodark-toast-icon {
  background-color: rgba(2, 132, 199, 0.12);
  color: var(--otodark-info);
}

.otodark-toast-content {
  flex: 1 1 auto;
  min-width: 0;
}

.otodark-toast-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--otodark-text-main);
  margin-bottom: 2px;
}

.otodark-toast-message {
  font-size: 0.825rem;
  color: var(--otodark-text-muted);
  line-height: 1.45;
  margin: 0;
  word-break: break-word;
}

.otodark-toast-close {
  background: transparent;
  border: none;
  color: var(--otodark-text-muted, #94a3b8);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  margin-left: 10px;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.otodark-toast-close:hover {
  color: var(--otodark-text-main);
}

.otodark-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  animation: otodarkToastProgress 4.5s linear forwards;
}

.otodark-toast:hover .otodark-toast-progress {
  animation-play-state: paused;
}

.otodark-toast-success .otodark-toast-progress {
  background-color: var(--otodark-success);
}
.otodark-toast-error .otodark-toast-progress {
  background-color: var(--otodark-danger);
}
.otodark-toast-warning .otodark-toast-progress {
  background-color: var(--otodark-warning);
}
.otodark-toast-info .otodark-toast-progress {
  background-color: var(--otodark-info);
}

@keyframes otodarkToastProgress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

:root {
  --otodark-cart-dropdown-width: 20rem;
}

.otodark-cart-dropdown {
  width: var(--otodark-cart-dropdown-width);
}

/* Cartzilla shifts cart rows on hover to reveal its remove button. Keep the
   row stable so the subtotal area does not appear to move or leave a gap. */
.otodark-cart-dropdown .widget-cart-item:hover .media {
  transform: none !important;
}

.otodark-cart-dropdown .widget-cart-item .close {
  top: .65rem;
  right: 0;
  left: auto;
  transform: none;
  visibility: visible;
  opacity: 1;
}

.otodark-cart-dropdown .widget-cart-item .media {
  padding-right: 1.25rem;
  transition: none !important;
  transform: none !important;
  background-color: var(--otodark-bg-card);
}

.otodark-cart-dropdown .widget-cart-item {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--otodark-bg-card);
}

.otodark-cart-dropdown .widget-cart-item:hover,
.otodark-cart-dropdown .widget-cart-item:hover .media {
  background-color: var(--otodark-bg-card);
}

[data-navbar-cart]:not(.show) > .otodark-cart-dropdown,
[data-navbar-cart]:hover:not(.show) > .otodark-cart-dropdown {
  display: none !important;
}

[data-navbar-cart].show > .otodark-cart-dropdown {
  display: block !important;
}

.otodark-cart-scroll {
  height: 15rem;
}

.otodark-cart-thumb {
  object-fit: contain;
}

.otodark-cart-thumb-placeholder {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-bg-subtle);
  color: var(--otodark-text-muted);
  font-size: 1.35rem;
}

.catalog-image-placeholder,
.package-image-placeholder {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--otodark-bg-subtle);
  color: var(--otodark-text-muted);
  font-size: 2rem;
}

.catalog-image-placeholder { min-height: 12rem; }
.product-list-thumb .catalog-image-placeholder { height: 100%; min-height: 12rem; }
.package-image-placeholder { min-height: 24rem; border-radius: var(--otodark-radius-md); }

.navbar-cart-group {
  padding: .75rem 0;
  border-bottom: 1px solid var(--otodark-border);
}

.navbar-cart-group:last-child { border-bottom: 0; }

.navbar-cart-group-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .3rem;
  color: var(--otodark-text-muted);
  font-size: .75rem;
}

.navbar-cart-group-meta strong { color: var(--otodark-primary); font-size: .85rem; }

.navbar-cart-collapse {
  margin-top: .65rem;
  overflow: hidden;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
}

.navbar-cart-collapse > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .55rem;
  color: var(--otodark-text-main);
  background: var(--otodark-bg-subtle);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 600;
  list-style: none;
}

.navbar-cart-collapse > summary::-webkit-details-marker { display: none; }
.navbar-cart-collapse > summary > .fa-chevron-down { transition: transform .2s ease; }
.navbar-cart-collapse[open] > summary > .fa-chevron-down { transform: rotate(180deg); }
.navbar-cart-lines-single { margin-top: .45rem; }

.navbar-cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .55rem;
  border-top: 1px solid var(--otodark-border);
  color: var(--otodark-text-main);
  font-size: .7rem;
}

.navbar-cart-lines-single .navbar-cart-line { padding-right: 0; padding-left: 0; border-top: 0; }
.navbar-cart-line-price { display: block; margin-top: .1rem; color: var(--otodark-text-muted); font-weight: 400; }

.navbar-cart-line-remove {
  flex: 0 0 auto;
  padding: .2rem .35rem;
  color: var(--otodark-danger);
  border: 0;
  background: transparent;
}

.otodark-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(15, 23, 42, 0.58);
  pointer-events: auto;
}

.otodark-modal-overlay.is-open {
  display: flex;
}

.otodark-modal-box {
  position: relative;
  z-index: 3001;
  width: min(100%, 28rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--otodark-bg-card);
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  box-shadow: var(--otodark-shadow-lg);
}

/* Dashboard ve ortak modal katmanları Cartzilla backdrop'unun üstünde kalmalıdır. */
.modal-backdrop,
body > .modal-backdrop {
  z-index: 1990 !important;
}

.modal,
body > .modal {
  z-index: 2000 !important;
}

.modal.show .modal-dialog {
  pointer-events: auto;
}

.otodark-modal-head,
.otodark-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  flex: 0 0 auto;
}

.otodark-modal-head {
  border-bottom: 1px solid var(--otodark-border);
}

.otodark-modal-title {
  margin: 0;
  color: var(--otodark-text-main);
  font-size: 1.05rem;
}

.otodark-modal-close {
  border: 0;
  background: transparent;
  color: var(--otodark-text-muted);
  font-size: 1.5rem;
  line-height: 1;
}

.otodark-modal-message {
  padding: 1.25rem;
  color: var(--otodark-text-muted);
  line-height: 1.55;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 767.98px) {
  .otodark-modal-overlay {
    padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
  }

  .otodark-modal-box {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .otodark-modal-head,
  .otodark-modal-actions {
    padding: .875rem 1rem;
  }

  .otodark-modal-actions {
    flex-wrap: wrap;
  }

  .otodark-modal-message {
    padding: 1rem;
  }
}

.otodark-modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--otodark-border);
}

.profile-avatar-cropper {
  width: min(100%, 20rem);
  margin: 0 auto 1rem;
}

.profile-avatar-cropper-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  background: var(--otodark-bg-subtle);
  touch-action: none;
}

.profile-avatar-cropper-stage::after {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .32);
  content: '';
  pointer-events: none;
}

.profile-avatar-cropper-image {
  position: absolute;
  max-width: none;
  user-select: none;
  cursor: grab;
  pointer-events: none;
}

.profile-avatar-cropper-image.is-dragging {
  cursor: grabbing;
}

.profile-avatar-cropper-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.profile-avatar-cropper-controls input[type='range'] {
  flex: 1;
}

#profile-avatar-preview {
  display: none !important;
}

.profile-avatar-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-avatar-header > h3 { order: 1; }
.profile-avatar-header > p { order: 2; }
.profile-avatar-header > button { order: 3; }
.profile-avatar-header > form[data-confirm-danger] {
  order: 4;
  margin-left: 0 !important;
  margin-top: .5rem;
}

#address-modal .modal-dialog {
  max-height: calc(100vh - 2rem);
}

#address-modal .modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

#address-modal form {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

#address-modal .address-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding-top: 1rem;
  padding-bottom: .5rem;
}

#address-modal .form-group {
  margin-bottom: .75rem;
}

#address-modal .corporate-address-panel {
  padding: .75rem 1rem !important;
  margin-bottom: .75rem !important;
}

#address-modal .address-kind-tabs {
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  background: var(--otodark-bg-subtle);
}

#address-modal .address-kind-tab {
  flex: 1 1 50%;
  min-height: 2.75rem;
  border: 0;
  border-right: 1px solid var(--otodark-border);
  background: transparent;
  color: var(--otodark-text-muted);
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease;
}

#address-modal .address-kind-tab:last-child {
  border-right: 0;
}

#address-modal .address-kind-tab.active {
  background: var(--otodark-bg-card);
  color: var(--otodark-primary);
  box-shadow: inset 0 -2px 0 var(--otodark-primary);
}

#address-modal .invalid-feedback:empty {
  display: none;
}

#address-modal .form-control.is-invalid {
  border-color: var(--otodark-danger);
}

@media (max-width: 575.98px) {
  #address-modal .modal-dialog {
    max-height: calc(100vh - 1rem);
    margin: .5rem;
  }

  #address-modal .modal-content {
    max-height: calc(100vh - 1rem);
  }
}

.checkout-address-choice {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.25rem;
  padding:.45rem .7rem;
  border:1px solid var(--otodark-border);
  border-radius:var(--otodark-radius-sm);
  background:var(--otodark-bg-card);
  color:var(--otodark-text-main);
  cursor:pointer;
  font-size:.75rem;
  font-weight:700;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.checkout-address-choice input { width:1rem; height:1rem; accent-color:var(--otodark-primary); }
.checkout-address-choice:has(input:checked) { border-color:var(--otodark-primary); background:var(--otodark-primary-subtle); color:var(--otodark-primary); }
.checkout-address-choice:hover { border-color:var(--otodark-primary); }

@media (max-width:575.98px) {
  .checkout-address-choice { width:100%; justify-content:center; }
}

.promotion-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--otodark-border);
}

.promotion-section-header > div {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.promotion-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--otodark-primary);
  background: var(--otodark-bg-subtle);
  border-radius: 50%;
}

.promotion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-lg);
  background: var(--otodark-bg-card);
  box-shadow: var(--otodark-shadow-sm);
}

.promotion-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}

.promotion-type-badge {
  display: inline-flex;
  align-items: center;
  padding: .35rem .65rem;
  border-radius: var(--otodark-radius-sm);
  font-size: .75rem;
  font-weight: 700;
}

.promotion-type-coupon {
  color: var(--otodark-primary);
  background: var(--otodark-bg-subtle);
}

.promotion-type-campaign {
  color: var(--otodark-success);
  background: var(--otodark-success-subtle);
}

.promotion-remove {
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--otodark-text-muted);
  border: 0;
  background: transparent;
  border-radius: 50%;
}

.promotion-remove:hover,
.promotion-remove:focus {
  color: var(--otodark-danger);
  background: var(--otodark-danger-subtle);
}

.promotion-card-title {
  min-height: 2.75rem;
  margin-bottom: .75rem;
  color: var(--otodark-text-main);
  font-size: 1.05rem;
  font-weight: 700;
}

.promotion-discount {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-bottom: .9rem;
}

.promotion-discount strong {
  color: var(--otodark-primary);
  font-size: 1.55rem;
  line-height: 1;
}

.promotion-discount span,
.promotion-label {
  color: var(--otodark-text-muted);
  font-size: .78rem;
}

.promotion-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
  padding: .65rem .8rem;
  color: var(--otodark-text-main);
  border: 1px dashed var(--otodark-border-focus);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-bg-subtle);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
}

.promotion-code:hover,
.promotion-code:focus {
  color: var(--otodark-primary);
  border-color: var(--otodark-primary);
}

.promotion-auto-label {
  display: block;
  margin-bottom: 1rem;
  padding: .65rem .8rem;
  color: var(--otodark-success);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-success-subtle);
  font-size: .85rem;
  font-weight: 600;
}

.promotion-meta {
  display: grid;
  gap: .45rem;
  margin-bottom: 1rem;
  color: var(--otodark-text-muted);
  font-size: .8rem;
}

.promotion-targets {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--otodark-border);
}

.promotion-label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 700;
}

.promotion-target-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.promotion-target-list span {
  padding: .3rem .5rem;
  color: var(--otodark-text-main);
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-bg-subtle);
  font-size: .76rem;
}

.promotion-description {
  max-height: 5.5rem;
  margin-bottom: 1rem;
  overflow: auto;
  color: var(--otodark-text-muted);
  font-size: .82rem;
}

.promotion-status {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--otodark-border);
  font-size: .8rem;
  font-weight: 600;
}

.promotion-status.is-valid { color: var(--otodark-success); }
.promotion-status.is-invalid { color: var(--otodark-danger); }

.promotion-empty {
  padding: 2.5rem 1rem;
  color: var(--otodark-primary);
  border: 1px dashed var(--otodark-border-focus);
  border-radius: var(--otodark-radius-lg);
  background: var(--otodark-bg-subtle);
  text-align: center;
}

.promotion-empty h3 { color: var(--otodark-text-main); }
.promotion-empty i { font-size: 1.75rem; }

.promotion-modal .modal-title { color: var(--otodark-text-main); }

@media (max-width: 575.98px) {
  .promotion-section-header { align-items: flex-start; }
  .promotion-card { padding: 1rem; }
  .promotion-card-title { min-height: 0; }
}

.cart-promotion-panel {
  margin-bottom: 1.25rem;
  padding: .9rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  background: var(--otodark-bg-subtle);
}

.cart-promotion-list { display: grid; gap: .55rem; }

.cart-promotion-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-bg-card);
}

.cart-promotion-option > div { min-width: 0; }
.cart-promotion-option strong { display: block; color: var(--otodark-text-main); font-size: .82rem; }
.cart-promotion-option small { display: block; margin-top: .2rem; color: var(--otodark-text-muted); font-size: .72rem; }
.cart-promotion-option.is-disabled { opacity: .65; }

.cart-applied-promotions { display: grid; gap: .45rem; margin-top: .8rem; }

.cart-item-promotions { display: grid; gap: .2rem; margin-top: .45rem; }
.cart-item-promotion {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: .22rem .48rem;
  border-radius: .3rem;
  color: var(--otodark-text-main);
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cart-item-promotion-coupon { background: var(--otodark-primary-subtle); }
.cart-item-promotion-campaign { background: var(--otodark-success-subtle); }

.cart-applied-promotion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .65rem;
  color: var(--otodark-success);
  border: 1px solid var(--otodark-success);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-success-subtle);
  font-size: .78rem;
  font-weight: 600;
}

.cart-applied-promotion button {
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
}

.cart-total-breakdown {
  display: grid;
  gap: .55rem;
  margin-bottom: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--otodark-border);
  font-size: .85rem;
}

.cart-total-breakdown > div { display: flex; justify-content: space-between; gap: .75rem; }
.cart-total-final { margin-top: .35rem; padding-top: .75rem; border-top: 1px solid var(--otodark-border); font-size: 1rem; }
.cart-total-final strong { color: var(--otodark-primary); font-size: 1.15rem; }

@media (max-width: 575.98px) {
  .cart-promotion-option { align-items: flex-start; flex-direction: column; }
  .cart-promotion-option .btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .otodark-cart-dropdown {
    position: fixed;
    top: 4.5rem;
    right: .75rem;
    left: .75rem;
    width: auto;
    max-width: none;
  }
}
:root {
  --otodark-favorite: var(--otodark-primary);
}

.btn-wishlist.is-favorite {
  color: var(--otodark-favorite);
  border-color: var(--otodark-favorite);
  background-color: var(--otodark-bg-subtle);
}

.btn-wishlist.is-favorite i {
  color: var(--otodark-favorite);
}

.wishlist-card .card-img-top {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--otodark-bg-subtle);
}

.wishlist-card .card-img-top img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.wishlist-card {
  overflow: hidden;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  box-shadow: var(--otodark-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wishlist-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--otodark-shadow-md);
}

.wishlist-card .card-body {
  min-height: 118px;
  padding: 1rem 1.1rem 1.1rem;
}

.wishlist-card .card-body h3,
.wishlist-card .card-body h3 a {
  color: var(--otodark-text-main);
}

.wishlist-item-image {
  width: 10rem;
  min-width: 10rem;
  height: 8rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  background: var(--otodark-bg-subtle);
}

.wishlist-item-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.wishlist-item .product-title a {
  color: var(--otodark-text-main);
}

.wishlist-item .product-title a:hover {
  color: var(--otodark-primary);
}

.wl-variant-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .6rem;
  padding: .3rem .75rem;
  border: 1px solid var(--otodark-border);
  border-radius: 999px;
  background: var(--otodark-bg-subtle);
  color: var(--otodark-text-main);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.wl-variant-toggle:hover,
.wl-variant-toggle:not(.collapsed) {
  border-color: var(--otodark-border-focus);
  color: var(--otodark-primary);
  background: var(--otodark-bg-card);
}

.wl-variant-toggle:focus {
  outline: none;
}

.wl-variant-chevron {
  font-size: .65rem;
  transition: transform .25s ease;
}

.wl-variant-toggle:not(.collapsed) .wl-variant-chevron {
  transform: rotate(180deg);
}

.wl-variants {
  margin-top: .75rem;
  margin-left: 2.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--otodark-border);
}

@media (max-width: 575.98px) {
  .wl-variants {
    margin-left: .5rem;
    padding-left: .75rem;
  }
}

.wl-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--otodark-bg-subtle);
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  overflow: hidden;
}

.wl-dropdown-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1rem;
  transition: background-color .15s ease;
}

.wl-dropdown-item + .wl-dropdown-item {
  border-top: 1px solid var(--otodark-border);
}

.wl-dropdown-item:hover {
  background: var(--otodark-bg-body);
}

.wl-dropdown-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wl-dropdown-name {
  color: var(--otodark-text-main);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-dropdown-info:hover .wl-dropdown-name {
  color: var(--otodark-primary);
}

.wl-dropdown-sub {
  color: var(--otodark-text-muted);
  font-size: .75rem;
}

.wl-dropdown-remove {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--otodark-radius-sm);
  background: transparent;
  color: var(--otodark-danger);
  cursor: pointer;
  transition: background-color .15s ease;
}

.wl-dropdown-remove:hover {
  background: var(--otodark-bg-subtle);
}

.wishlist-variant-image {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
  background: var(--otodark-bg-card);
}

.wishlist-variant-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .wishlist-item-image {
    width: min(100%, 14rem);
    min-width: 0;
    height: 9rem;
    margin-bottom: .75rem;
  }

  .wishlist-item .media-body {
    width: 100%;
  }

  .wishlist-item > .pt-2 {
    padding-left: 0 !important;
    margin-top: .5rem;
  }
}

.navbar-search-form { flex:1 1 auto; min-width:0; }
.navbar-search-form .input-group-overlay { width:100%; }

.push-consent {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 1040;
  width: min(23rem, calc(100vw - 2rem));
  color: var(--otodark-text-main);
  font-family: inherit;
}

.push-consent__panel {
  position: relative;
  margin-bottom: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-md);
  background: var(--otodark-bg-card);
  box-shadow: var(--otodark-shadow-lg);
}

.push-consent__panel[hidden] {
  display: none;
}

.push-consent__title {
  margin: 0 0 .5rem;
  color: var(--otodark-text-main);
  font-size: 1rem;
  font-weight: 700;
}

.push-consent__description,
.push-consent__status {
  margin: 0 0 1rem;
  color: var(--otodark-text-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.push-consent__status:empty {
  display: none;
}

.push-consent__actions {
  display: flex;
  gap: .625rem;
}

.push-consent__button {
  min-height: 2.625rem;
  border: 1px solid var(--otodark-border);
  border-radius: var(--otodark-radius-sm);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

.push-consent__button {
  flex: 1;
  padding: .625rem .875rem;
}

.push-consent__button--accept {
  border-color: var(--otodark-primary);
  background: var(--otodark-primary);
  color: var(--otodark-bg-card);
}

.push-consent__button--reject {
  background: var(--otodark-bg-card);
  color: var(--otodark-text-main);
}

.push-consent__button:disabled {
  cursor: wait;
  opacity: .65;
}

.push-consent__button:focus-visible {
  outline: 2px solid var(--otodark-border-focus);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .push-consent {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    width: calc(100vw - 1.5rem);
  }
}

.home-scroll-video {
  position: relative;
  height: 300vh;
  background: var(--otodark-bg-body);
}

.home-scroll-video__stage {
  position: sticky;
  top: 0;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--otodark-bg-body);
}

.home-scroll-video__media {
  display: block;
  width: min(calc(100vw - 2rem), 71.25rem);
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  transform: scale(var(--home-scroll-video-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

.home-hero__video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 848 / 480;
}

.home-hero__video-container .home-hero__video-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
}

.home-hero__video-container .home-hero__video-active {
  opacity: 1;
  visibility: visible;
}

[data-video-preview] {
  cursor: pointer;
  transition: box-shadow 180ms ease;
}

[data-video-preview]:hover,
[data-video-preview]:focus-visible {
  box-shadow: inset 0 0 0 4px var(--otodark-primary);
  position: relative;
  z-index: 1;
}

[data-video-preview]:focus-visible {
  outline: 2px solid var(--otodark-primary);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .home-scroll-video {
    height: 250vh;
  }
}
.blog-post-column {
  min-width: 0;
}

.blog-post-content,
.blog-post-content * {
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.blog-post-content img,
.blog-post-content video,
.blog-post-content iframe {
  height: auto;
}

.featured-posts-carousel .featured-author-avatar {
  flex: 0 0 2rem;
  overflow: hidden;
}

.featured-posts-carousel .featured-author-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.customer-gallery-filters {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .15rem .1rem .65rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.customer-gallery-filter {
  flex: 0 0 auto;
  padding: .55rem .9rem;
  border: 1px solid var(--otodark-border);
  border-radius: 999px;
  background: var(--otodark-bg-card);
  color: var(--otodark-text-main);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.customer-gallery-filter:hover,
.customer-gallery-filter:focus-visible {
  border-color: var(--otodark-primary);
  color: var(--otodark-primary);
  text-decoration: none;
}

.customer-gallery-filter.is-active {
  border-color: var(--otodark-primary);
  background: var(--otodark-primary);
  color: var(--otodark-bg-card);
}

.customer-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
}

.customer-gallery-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--otodark-border);
  border-radius: .65rem;
  background: var(--otodark-bg-card);
  box-shadow: 0 .2rem .75rem rgb(15 23 42 / 7%);
}

.customer-gallery-card .gallery-item {
  display: block;
  overflow: hidden;
  border-radius: .6rem .6rem 0 0;
}

.customer-gallery-card .gallery-item > img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}

.customer-gallery-card:hover .gallery-item > img {
  transform: scale(1.025);
}

.customer-gallery-card figcaption {
  padding: .65rem .8rem;
  color: var(--otodark-text-main);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
}

.customer-gallery-product-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--otodark-text-main);
  text-decoration: none;
  transition: color .15s ease;
}

.customer-gallery-product-link:hover,
.customer-gallery-product-link:focus-visible {
  color: var(--otodark-primary);
  text-decoration: underline;
}

.customer-gallery-product-link > i {
  font-size: .75rem;
  color: var(--otodark-text-muted);
  transition: color .15s ease;
}

.customer-gallery-product-link:hover > i,
.customer-gallery-product-link:focus-visible > i {
  color: var(--otodark-primary);
}

.customer-gallery-empty > i {
  color: var(--otodark-text-muted);
  font-size: 2rem;
}

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