/*
 * Rowland Made Website V160
 * Premium UI Consistency — page-end rhythm, centred close controls and
 * site-wide flat interactive surfaces.
 *
 * The release keeps soft ambient depth for drawers and sheets, but removes
 * the inherited hard-offset "3D" treatment from controls and legacy UI cards.
 */

:root {
  --shadow: none;
  --rm-premium-border: rgba(7, 30, 61, 0.16);
  --rm-premium-hover-shadow: 0 10px 22px rgba(7, 30, 61, 0.11);
  --rm-premium-focus: var(--pink, #f68da8);
}

/* Give every composed page a calm cream pause before the protected footer. */
.rm-live-pc-page {
  padding-bottom: clamp(32px, 6vw, 76px);
}

/* Preserve the same page-end rhythm for an unpublished/legacy Shop fallback. */
.shop-page-boundary > .rm-past-shop-link:last-child {
  margin-bottom: clamp(32px, 6vw, 76px);
}

/* The Past Makes callout keeps its colour but gains cleaner internal rhythm. */
.rm-live-pc-link-banner {
  border-radius: clamp(18px, 2.4vw, 26px);
  padding: clamp(26px, 4vw, 48px);
}

/*
 * Global flat-control contract.
 * Native buttons are cleared first so inherited hard shadows cannot leak into
 * basket, checkout, filters, forms, menus or future components.
 */
button,
.btn,
.rm-live-pc-button,
.commission-send,
.commission-upload,
.item-choice > span,
.desktop-promo > b,
.rm-live-pc-link-banner > b,
.footer-social-icon,
.desktop-shop-search-v127,
.desktop-shop-search-v141,
.mobile-shop-search,
.rm-desktop-header-search {
  box-shadow: none !important;
}

:is(.btn, .rm-live-pc-button, .commission-send) {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--navy, #071e3d) !important;
  box-shadow: none !important;
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

:is(.desktop-promo > b, .rm-live-pc-link-banner > b) {
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: none !important;
}

.rm-live-pc-link-banner > b {
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.item-choice > span,
.item-choice input:checked + span {
  border-width: 1px !important;
  box-shadow: none !important;
  transform: none !important;
}

/*
 * Older customer-facing panels used the same hard-offset visual language.
 * They now follow the approved thin-border, flat resting-state standard.
 */
:is(
  .config-number,
  .idea-box,
  .config-contact,
  .footer-social-icon,
  .pdp-thumb.active,
  .commission-config,
  .commission-inspiration,
  .rosie-speech,
  .rosies-shop-prompt,
  .rm-offer-badge-pdp,
  .rm-product-offer-copy,
  .rm-checkout-basket,
  .rm-checkout-summary-card,
  .rm-checkout-form,
  .rm-checkout-success,
  .rm-checkout-empty,
  .ask-nat-conversation,
  .desktop-shop-filter-v127,
  .pdp-details-accordion,
  .nat-note,
  .ask-nat-pdp-card,
  .rm-ymal-progress,
  .rm-ask-context-v145
) {
  border-width: 1px !important;
  box-shadow: none !important;
}

/* Recommendation sheets still need ambient separation from the page. */
.rm-ymal-sheet {
  border-width: 1px !important;
  box-shadow: 0 24px 70px rgba(7, 30, 61, 0.22) !important;
}

/*
 * One optically centred X, drawn from two bars instead of a font glyph.
 * Grid overlap keeps the icon centred even when the current font metrics vary.
 */
:where(
  button[aria-label^="Close"],
  .menu .x,
  .close-round,
  .pdp-lightbox-close,
  .ask-nat-widget-close,
  .mobile-shop-sheet-head > button,
  .desktop-shop-filter-head-v141 > button,
  .rm-ymal-head > button,
  .rm-live-pc-lightbox > button
) {
  --rm-x-size: 17px;
  --rm-x-stroke: 2px;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: currentColor !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

:where(
  button[aria-label^="Close"],
  button[aria-label="Dismiss"],
  .menu .x,
  .close-round,
  .pdp-lightbox-close,
  .ask-nat-widget-close,
  .mobile-shop-sheet-head > button,
  .desktop-shop-filter-head-v141 > button,
  .rm-ymal-head > button,
  .rm-live-pc-lightbox > button,
  .page-add-success-close,
  a[aria-label="Clear search"]
)::before,
:where(
  button[aria-label^="Close"],
  button[aria-label="Dismiss"],
  .menu .x,
  .close-round,
  .pdp-lightbox-close,
  .ask-nat-widget-close,
  .mobile-shop-sheet-head > button,
  .desktop-shop-filter-head-v141 > button,
  .rm-ymal-head > button,
  .rm-live-pc-lightbox > button,
  .page-add-success-close,
  a[aria-label="Clear search"]
)::after {
  content: "";
  display: block;
  grid-area: 1 / 1;
  width: var(--rm-x-size, 17px);
  height: var(--rm-x-stroke, 2px);
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
}

:where(
  button[aria-label^="Close"],
  button[aria-label="Dismiss"],
  .menu .x,
  .close-round,
  .pdp-lightbox-close,
  .ask-nat-widget-close,
  .mobile-shop-sheet-head > button,
  .desktop-shop-filter-head-v141 > button,
  .rm-ymal-head > button,
  .rm-live-pc-lightbox > button,
  .page-add-success-close,
  a[aria-label="Clear search"]
)::before {
  transform: rotate(45deg);
}

:where(
  button[aria-label^="Close"],
  button[aria-label="Dismiss"],
  .menu .x,
  .close-round,
  .pdp-lightbox-close,
  .ask-nat-widget-close,
  .mobile-shop-sheet-head > button,
  .desktop-shop-filter-head-v141 > button,
  .rm-ymal-head > button,
  .rm-live-pc-lightbox > button,
  .page-add-success-close,
  a[aria-label="Clear search"]
)::after {
  transform: rotate(-45deg);
}

:where(button[aria-label="Dismiss"], .page-add-success-close, a[aria-label="Clear search"]) {
  --rm-x-size: 12px;
  --rm-x-stroke: 1.75px;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Accessible focus is consistent and never relies on a shadow. */
:is(button, .btn, .rm-live-pc-button, a[aria-label="Clear search"]):focus-visible,
.item-choice input:focus-visible + span {
  outline: 3px solid var(--rm-premium-focus) !important;
  outline-offset: 3px !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn, .rm-live-pc-button, .commission-send):not(:disabled):hover {
    border-color: rgba(7, 30, 61, 0.24) !important;
    box-shadow: var(--rm-premium-hover-shadow) !important;
    transform: translateY(-2px);
  }

  .item-choice:hover > span {
    box-shadow: var(--rm-premium-hover-shadow) !important;
    transform: translateY(-2px) !important;
  }
}

:is(.btn, .rm-live-pc-button, .commission-send):not(:disabled):active {
  box-shadow: none !important;
  transform: translateY(1px) !important;
}

:is(.btn, .rm-live-pc-button, .commission-send):disabled {
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .rm-live-pc-page {
    padding-bottom: 38px;
  }

  .shop-page-boundary > .rm-past-shop-link:last-child {
    margin-bottom: 38px;
  }

  .rm-live-pc-link-banner {
    gap: 16px;
    padding: 30px 24px;
  }

  .rm-ymal-sheet {
    box-shadow: 0 -18px 58px rgba(7, 30, 61, 0.22) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .rm-live-pc-button, .commission-send, .item-choice > span) {
    transition: none !important;
  }

  :is(.btn, .rm-live-pc-button, .commission-send):hover,
  :is(.btn, .rm-live-pc-button, .commission-send):active,
  .item-choice:hover > span {
    transform: none !important;
  }
}