/*
  IB Watches — supplemental stylesheet
  Everything Tailwind's utility classes cannot express is kept here so this
  single file can be pasted into the WordPress Customizer "Additional CSS"
  box once the layout is rebuilt with native Elementor widgets.
*/

:root {
  --ib-cream: #faf6ef;
  --ib-cream-dark: #f1e8d9;
  --ib-white: #ffffff;
  --ib-charcoal: #1c1a17;
  --ib-text: #3c3833;
  --ib-gold: #a9814f;
  --ib-gold-dark: #8a6a3f;
  --ib-champagne: #ddc9a3;
  --ib-border: #e6dcc9;
  --ib-rose: #c9a189;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ib-cream);
  color: var(--ib-text);
  font-family: 'Jost', sans-serif;
}

::selection {
  background-color: var(--ib-champagne);
  color: var(--ib-charcoal);
}

/* Focus states kept visible for accessibility but understated for luxury feel */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--ib-gold);
  outline-offset: 3px;
}

/* Fade / rise on scroll ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Thin gold scrollbar for horizontal product rails ---------------------- */
.rail::-webkit-scrollbar {
  height: 4px;
}
.rail::-webkit-scrollbar-track {
  background: var(--ib-border);
}
.rail::-webkit-scrollbar-thumb {
  background: var(--ib-champagne);
}
.rail {
  scrollbar-width: thin;
  scrollbar-color: var(--ib-champagne) var(--ib-border);
  scroll-behavior: smooth;
}

/* Hero / slider dots ------------------------------------------------------ */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}
.dot.is-active {
  width: 22px;
  border-radius: 999px;
  background-color: #ffffff;
}

/* Price range slider ------------------------------------------------------ */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--ib-border);
  outline: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ib-gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ib-gold);
  cursor: pointer;
  margin-top: -6px;
}
input[type='range']::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ib-gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ib-gold);
  cursor: pointer;
}
input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--ib-border);
}

/* Quantity stepper input: hide native number spinners --------------------- */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Cart drawer ------------------------------------------------------------- */
#cart-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#cart-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
#cart-drawer {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#cart-drawer.is-open {
  transform: translateX(0);
}

/* Mobile nav drawer --------------------------------------------------------*/
#mobile-nav {
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-nav.is-open {
  transform: translateX(0);
}
#mobile-nav-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Product image zoom on hover --------------------------------------------- */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom:hover img {
  transform: scale(1.06);
}

/* Skeleton-free placeholder for missing thumbnails ------------------------ */
.ratio-square {
  aspect-ratio: 1 / 1;
}
.ratio-portrait {
  aspect-ratio: 4 / 5;
}

/* Toggle / accordion chevrons ---------------------------------------------*/
.accordion-trigger[aria-expanded='true'] .chevron {
  transform: rotate(180deg);
}
.chevron {
  transition: transform 0.3s ease;
}

/* Tabs underline animation ------------------------------------------------ */
.tab-btn {
  position: relative;
}
.tab-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ib-charcoal);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.tab-btn[aria-selected='true']::after {
  transform: scaleX(1);
}

/* Toast (add-to-cart confirmation) ----------------------------------------*/
#toast {
  transform: translateY(140%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#toast.is-open {
  transform: translateY(0);
}