/* ============================================================
   Generic carousel (hero banner, work-samples, tags)
   Built on CSS scroll-snap; JS only drives buttons/dots/autoplay.
   ============================================================ */

.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--carousel-gap, var(--space-sm));
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.carousel__track img,
.carousel__track a {
  -webkit-user-drag: none;
  user-drag: none;
}
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.carousel[data-per-view="2"] .carousel__slide {
  flex-basis: calc((100% - var(--carousel-gap, 1rem)) / 2);
}
.carousel[data-per-view="3"] .carousel__slide {
  flex-basis: calc((100% - 2 * var(--carousel-gap, 1rem)) / 3);
}
.carousel[data-per-view="4"] .carousel__slide {
  flex-basis: calc((100% - 3 * var(--carousel-gap, 1rem)) / 4);
}

.carousel__button {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--color-bg-overlay);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.carousel__button:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.carousel__button--prev { inset-inline-start: var(--space-2xs); }
.carousel__button--next { inset-inline-end: var(--space-2xs); }
.carousel__button[hidden] { display: none; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-sm);
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--color-border);
}
.carousel__dot[data-active] {
  background: var(--color-gold);
}

/* ============================================================
   Modal (native <dialog>) — login flow
   ============================================================ */

dialog.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(420px, 92vw);
  width: 100%;
  color: var(--color-text);
}
dialog.modal::backdrop {
  background: var(--color-bg-overlay);
}
.modal__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}
.modal__title {
  font-size: var(--fs-lg);
}
.modal__close {
  width: 32px;
  height: 32px;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-text-muted);
}
.modal__close:hover {
  color: var(--color-gold-text);
}
.modal__back {
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}
.modal__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-block-end: var(--space-sm);
}
.modal__field {
  margin-block-end: var(--space-sm);
}
.modal__countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.modal__countdown a[hidden] {
  display: none;
}

/* ============================================================
   Dropcart (basket / compare flyouts)
   ============================================================ */

.dropcart {
  position: relative;
}
.dropcart__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-sm));
  width: min(360px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-dropcart);
}
.dropcart__panel[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropcart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-block-end: 1px solid var(--color-border);
}
.dropcart__item {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-block-end: 1px solid var(--color-border);
}
.dropcart__item-image {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dropcart__item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.dropcart__item-title {
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropcart__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-block: var(--space-3xs);
}
.dropcart__tag {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-3xs);
}
.dropcart__price {
  font-size: var(--fs-sm);
  color: var(--color-gold-text);
}
.dropcart__remove {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.dropcart__remove:hover {
  color: var(--color-danger);
}
.dropcart__item--removing {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.dropcart__empty {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  color: var(--color-text-muted);
}
.dropcart__footer {
  padding: var(--space-sm);
}
.dropcart__checkout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  border-radius: var(--radius-sm);
}

/* Cart drawer — independent from the legacy drop-cart skin. */
#basketDropCartPanel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(460px, calc(100vw - 24px));
  max-height: none;
  height: 100dvh;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(24, 20, 14, .2);
  transform: translateX(calc(100% + 30px));
  z-index: 1202;
}
html[dir="rtl"] #basketDropCartPanel { transform: translateX(calc(-100% - 30px)); }
#basketDropCartPanel[data-open], html[dir="rtl"] #basketDropCartPanel[data-open] { transform: translateX(0); }
#basketDropCartPanel[data-loading] { pointer-events: none; }
#basketDropCartPanel[data-loading]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  z-index: 3;
}
.cart-drawer { display: flex; flex-direction: column; height: 100%; max-height: 100dvh; background: #fff; }
.cart-drawer-scrim { position: fixed; inset: 0; z-index: 1201; background: rgba(19,17,13,.48); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; backdrop-filter: blur(3px); }
.cart-drawer-scrim[data-open] { opacity: 1; visibility: visible; }
body[data-cart-open] { overflow: hidden; }
.cart-drawer__header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; padding: 22px 64px 18px 24px; border-bottom: 1px solid #eee8dc; }
html[dir="rtl"] .cart-drawer__header { padding: 22px 24px 18px 64px; }
.cart-drawer__close { position: absolute; inset-block-start: 18px; inset-inline-end: 20px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e3dccf; border-radius: 50%; color: #514a40; font-size: 25px; line-height: 1; }
.cart-drawer__close:hover, .cart-drawer__close:focus-visible { border-color: #b69a64; background: #f7f2e9; }
.cart-drawer__eyebrow { display: block; margin-bottom: 2px; color: #8a7652; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cart-drawer__header h2 { margin: 0; font-size: 22px; }
.cart-drawer__count { color: #756f65; font-size: 13px; }
.cart-drawer__items { flex: 1; overflow: auto; padding: 0 20px; }
.cart-drawer__item.dropcart__item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid #f0ece4; }
.cart-drawer__item.is-busy { opacity: .45; pointer-events: none; }
.cart-drawer__media { width: 80px; height: 80px; overflow: hidden; border-radius: 14px; background: #f6f3ed; }
.cart-drawer__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__item-main { min-width: 0; }
.cart-drawer__item-top, .cart-drawer__item-bottom, .cart-drawer__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-drawer__title { min-width: 0; overflow: hidden; color: #211f1b; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer__remove { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #8f887e; font-size: 21px; line-height: 1; }
.cart-drawer__remove:hover { background: #fff0ee; color: #b44031; }
.cart-drawer__meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 12px; }
.cart-drawer__meta span { padding: 3px 8px; border-radius: 999px; background: #f5f2ec; color: #6f685f; font-size: 11px; }
.cart-quantity { display: inline-grid; grid-template-columns: 34px 36px 34px; align-items: center; border: 1px solid #ddd5c8; border-radius: 999px; overflow: hidden; }
.cart-quantity button { height: 34px; color: #514a40; font-size: 18px; }
.cart-quantity button:hover { background: #f4efe5; }
.cart-quantity output { text-align: center; font-weight: 650; }
.cart-quantity--compact { grid-template-columns: 28px 30px 28px; }
.cart-quantity--compact button { height: 28px; font-size: 15px; }
.cart-drawer__item-bottom strong { color: #8a641d; font-size: 13px; }
.cart-drawer__empty { padding: 48px 24px; text-align: center; }
.cart-drawer__empty svg { width: 58px; margin: 0 auto 16px; fill: none; stroke: #b69a64; stroke-width: 2; }
.cart-drawer__empty h3 { margin: 0 0 7px; font-size: 18px; }
.cart-drawer__empty p { margin: 0; color: #777066; font-size: 13px; }
.cart-drawer__footer { padding: 18px 24px 22px; border-top: 1px solid #eee8dc; background: #fcfaf6; }
.cart-drawer__summary { margin-bottom: 14px; }
.cart-drawer__summary span { color: #716a61; font-size: 13px; }
.cart-drawer__summary strong { color: #1f1d19; font-size: 17px; }
.cart-drawer__actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 9px; }
.cart-drawer__actions .btn { justify-content: center; min-height: 44px; }
.cart-drawer__view { border-color: #cfc5b4; }
.product-variants__cta [data-add-to-cart].is-added { background: #2f7d57; border-color: #2f7d57; color: #fff; }
@media (max-width: 560px) {
  #basketDropCartPanel { width: min(100%, 430px); border-radius: 0; }
  .cart-drawer { max-height: 100dvh; }
}

/* ============================================================
   Toasts (fixes the legacy undefined showAlert() call)
   ============================================================ */

.toast-region {
  position: fixed;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: min(320px, calc(100vw - 2 * var(--space-sm)));
}
.toast {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border-inline-start: 3px solid var(--color-info);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  animation: toast-in var(--transition-base);
}
.toast--success { border-inline-start-color: var(--color-success); }
.toast--error { border-inline-start-color: var(--color-danger); }
.toast--warning { border-inline-start-color: var(--color-warning); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Confirm dialog (replaces the SweetAlert-based _Dialog partial)
   ============================================================ */

dialog.confirm-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(380px, 90vw);
  color: var(--color-text);
}
dialog.confirm-dialog::backdrop {
  background: var(--color-bg-overlay);
}
.confirm-dialog__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.confirm-dialog__icon {
  font-size: var(--fs-2xl);
  margin-block-end: var(--space-2xs);
}
.confirm-dialog__icon--success { color: var(--color-success); }
.confirm-dialog__icon--error { color: var(--color-danger); }
.confirm-dialog__icon--warning { color: var(--color-warning); }
.confirm-dialog__actions {
  margin-block-start: var(--space-md);
}