/* Rowland Made Website V166 — Interaction Consistency & Mobile Touch Targets
   Shared vector geometry removes font-metric drift. Primary mobile controls
   now expose at least a 44px target while preserving the intended visual scale. */

.rm-minus-icon,
.rm-chevron-icon {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.rm-chevron-icon {
  width: 24px;
  height: 24px;
}

/* Product-add buttons retain their established discs inside a 44px target. */
.rm-card-add,
.mobile-product-add {
  --rm-visible-disc-size: 38px;
  position: relative;
  isolation: isolate;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.mobile-product-add {
  --rm-visible-disc-size: 31px;
}

.rm-product-rail .rm-card-add {
  --rm-visible-disc-size: 34px;
}

.rm-card-add::before,
.mobile-product-add::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--rm-visible-disc-size);
  height: var(--rm-visible-disc-size);
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: background-color 160ms ease, transform 120ms ease;
  pointer-events: none;
}

.rm-card-add > .rm-add-icon,
.mobile-product-add > .rm-add-icon {
  position: relative;
  z-index: 1;
}

.rm-card-add:hover,
.rm-card-add:focus-visible,
.mobile-product-add:hover,
.mobile-product-add:focus-visible {
  background: transparent !important;
}

.rm-card-add:hover::before,
.rm-card-add:focus-visible::before,
.mobile-product-add:hover::before,
.mobile-product-add:focus-visible::before {
  background: var(--teal);
}

.rm-card-add:active::before,
.mobile-product-add:active::before {
  transform: translate(-50%, -50%) scale(.9);
}

/* Basket, checkout and zoom controls share centred plus/minus geometry. */
.qty button.rm-quantity-control,
.rm-checkout-qty > button.rm-quantity-control,
.pdp-lightbox-controls button.rm-zoom-control {
  position: relative;
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--navy) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.qty button.rm-quantity-control::before,
.rm-checkout-qty > button.rm-quantity-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--cream);
  transition: background-color 150ms ease, transform 120ms ease;
  pointer-events: none;
}

.rm-quantity-control > .rm-add-icon,
.rm-quantity-control > .rm-minus-icon {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
}

.qty,
.rm-checkout-qty {
  gap: 2px;
}

.qty button.rm-quantity-control:hover::before,
.qty button.rm-quantity-control:focus-visible::before,
.rm-checkout-qty > button.rm-quantity-control:hover::before,
.rm-checkout-qty > button.rm-quantity-control:focus-visible::before {
  background: color-mix(in srgb, var(--pink) 30%, var(--cream));
}

.qty button.rm-quantity-control:active::before,
.rm-checkout-qty > button.rm-quantity-control:active::before {
  transform: scale(.88);
}

.pdp-lightbox-controls button.rm-zoom-control > svg {
  width: 19px;
  height: 19px;
}

.pdp-lightbox-controls button.rm-zoom-control:hover,
.pdp-lightbox-controls button.rm-zoom-control:focus-visible {
  background: rgba(7, 30, 61, .08) !important;
}

.rm-remove,
.rm-checkout-remove {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* One chevron treatment for hero, product-media and product-rail controls. */
.hero-arrow {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(7, 30, 61, .16) !important;
  border-radius: 50% !important;
  background: rgba(255, 248, 235, .92) !important;
  color: var(--navy) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 22px rgba(7, 30, 61, .14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-arrow.prev {
  left: 14px;
}

.hero-arrow.next {
  right: 14px;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  transform: translateY(-50%) scale(1.04) !important;
  background: var(--white) !important;
}

.hero-arrow:active {
  transform: translateY(-50%) scale(.92) !important;
}

.rm-product-rail-controls button {
  font-size: 0 !important;
  line-height: 0 !important;
}

.rm-product-rail-controls button:disabled {
  transform: none !important;
  background: var(--cream) !important;
  color: var(--navy) !important;
  opacity: .32;
}

/* Dots are real, labelled 44px buttons with a deliberately small marker. */
.hero-dots {
  align-items: center;
  gap: 0 !important;
}

button.hero-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  transform: none !important;
  cursor: pointer;
}

button.hero-dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1px solid rgba(7, 30, 61, .18);
  border-radius: 50%;
  background: rgba(255, 248, 235, .62);
  box-shadow: 0 1px 5px rgba(7, 30, 61, .15);
  transition: background-color 150ms ease, transform 150ms ease;
}

button.hero-dot.on::before,
button.hero-dot[aria-pressed="true"]::before {
  background: var(--cream);
  transform: scale(1.25);
}

.pdp-carousel button.hero-dot::before {
  border-color: rgba(255, 248, 235, .7);
  background: rgba(7, 30, 61, .42);
}

.pdp-carousel button.hero-dot.on::before,
.pdp-carousel button.hero-dot[aria-pressed="true"]::before {
  background: var(--navy);
}

.pdp-carousel:has(.hero-dots) .pdp-zoom-hint,
.pdp-carousel:has(.hero-dots) .pdp-video-hint {
  bottom: 58px;
}

/* Filter and Sort now hold the same two-line rhythm and expose active state. */
.mobile-shop-controls button {
  min-height: 56px;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  line-height: 1.05;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.mobile-shop-controls .rm-shop-control-label {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}

.mobile-shop-controls button small {
  display: block;
  min-height: 11px;
  color: #6b6170;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: none;
}

.mobile-shop-controls button b {
  min-width: 18px;
  height: 18px;
  font-size: 9px;
}

.mobile-shop-controls button.is-active,
.mobile-shop-controls button[aria-pressed="true"] {
  border-color: rgba(7, 30, 61, .48);
  background: color-mix(in srgb, var(--pink) 24%, var(--white));
  box-shadow: inset 0 0 0 1px rgba(7, 30, 61, .08);
}

.mobile-shop-controls button[aria-expanded="true"] {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(7, 30, 61, .12);
}

.mobile-shop-sheet-options a,
.pdp-thumb {
  min-height: 44px;
}

/* Ask Nat uses less screen width on phones and never covers the page ending. */
@media (max-width: 699px) {
  body.rm-has-ask-nat .home-footer-bottom {
    padding-bottom: calc(83px + env(safe-area-inset-bottom)) !important;
  }

  .ask-nat-widget {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .ask-nat-fab {
    width: 56px;
    height: 56px;
    min-height: 56px;
    gap: 0;
    padding: 5px;
  }

  .ask-nat-fab-copy {
    width: 0;
    max-width: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* Consistent input feedback without changing the established CTA palette. */
:where(button, .btn, a.btn, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(button, .btn, a.btn, [role="button"]):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

:where(button, .btn, a.btn, [role="button"]):active:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(.94);
}

:where(button, .btn, [role="button"]):disabled,
:where(.btn, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .42;
  box-shadow: none !important;
}

@media (min-width: 701px) {
  .rm-product-rail .rm-card-add {
    --rm-visible-disc-size: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rm-card-add::before,
  .mobile-product-add::before,
  .rm-quantity-control::before,
  button.hero-dot::before,
  .mobile-shop-controls button {
    transition: none !important;
  }

  .rm-product-rail {
    scroll-behavior: auto !important;
  }
}