@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap);
/**
 * Shadow DOM CSS Fixes
 *
 * ONLY styles that don't work properly in Shadow DOM.
 * Colors, backgrounds, and text colors work fine - not included here.
 */

/* ============================================
   FONTS - Must be imported in Shadow DOM
   ============================================ */

:host {
  --font-open-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-playfair-display: "Playfair Display", ui-serif, Georgia, serif;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.font-sans {
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/* Font weights - explicit declarations for Shadow DOM */
.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extrabold {
  font-weight: 800 !important;
}

.font-serif,
[style*="--font-playfair-display"] {
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
}

/* ============================================
   ACCESSIBILITY - Screen reader only
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   PSEUDO-ELEMENTS - After/Before states
   ============================================ */
/* Active filter button underline */
.after\:absolute::after {
  content: "";
  position: absolute;
}

.after\:bottom-0::after {
  bottom: 0;
}

.after\:left-0::after {
  left: 0;
}

.after\:right-0::after {
  right: 0;
}

.after\:h-0\.5::after {
  height: 0.125rem;
}

.after\:bg-aco-dark-gray::after {
  background-color: #36363a;
}

.after\:bg-aco-dark-gray\/50::after {
  background-color: rgba(54, 54, 58, 0.5);
}

/* Hover states for filter buttons */
.hover\:after\:absolute:hover::after {
  content: "";
  position: absolute;
}

.hover\:after\:bottom-0:hover::after {
  bottom: 0;
}

.hover\:after\:left-0:hover::after {
  left: 0;
}

.hover\:after\:right-0:hover::after {
  right: 0;
}

.hover\:after\:h-0\.5:hover::after {
  height: 0.125rem;
}

.hover\:after\:bg-aco-dark-gray\/50:hover::after {
  background-color: rgba(54, 54, 58, 0.5);
}

/* ============================================
   BORDERS - Divider lines, card borders
   ============================================ */
.border {
  border-width: 1px;
  border-style: solid;
}

.border-2 {
  border-width: 2px;
  border-style: solid;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
}

/* Border Colors - ACO brand colors */
.border-aco-dark-gray\/10 {
  border-color: rgba(54, 54, 58, 0.1);
}

.border-aco-dark-gray\/15 {
  border-color: rgba(54, 54, 58, 0.15);
}

.border-aco-dark-gray\/20 {
  border-color: rgba(54, 54, 58, 0.2);
}

.border-aco-yellow {
  border-color: #ffe357;
}

.border-gray-200 {
  border-color: rgb(229, 231, 235);
}

.border-gray-300 {
  border-color: rgb(209, 213, 219);
}

.border-pinpin-dark-blue {
  border-color: #002571;
}

.border-olio-muted-red\/35 {
  border-color: rgba(142, 80, 89, 0.35);
}

/* ============================================
   FOCUS STATES - Input borders and rings
   ============================================ */
*:focus-visible {
  outline: none;
}

/* Focus within container */
.has-\[\:focus\]\:border-aco-yellow:has(:focus),
.has-\[\:focus\]\:border-aco-yellow:focus-within {
  border-color: #ffe357 !important;
}

.has-\[\:focus\]\:shadow-none:has(:focus),
.has-\[\:focus\]\:shadow-none:focus-within {
  box-shadow: none !important;
}

/* Focus Rings */
.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}

.focus-visible\:ring-aco-yellow\/20:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 227, 87, 0.2);
}

.focus-visible\:ring-aco-dark-gray\/20:focus-visible {
  box-shadow: 0 0 0 2px rgba(54, 54, 58, 0.2);
}

.focus-visible\:ring-offset-2:focus-visible {
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff),
    0 0 0 calc(2px + 2px) var(--tw-ring-color, currentColor);
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px currentColor;
}

.focus\:ring-aco-dark-gray\/20:focus {
  box-shadow: 0 0 0 2px rgba(54, 54, 58, 0.2);
}

.focus\:ring-offset-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff),
    0 0 0 calc(2px + 2px) var(--tw-ring-color, currentColor);
}

/* ============================================
   DROP SHADOWS - Cards and buttons
   ============================================ */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Custom shadows used by components where arbitrary Tailwind shadow values
   are not emitted in Shadow DOM builds. */
.shadow-treatment-showcase-tabs {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PINPIN DEALS - Overlay layer in Shadow DOM
   ============================================ */
.deal-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Custom shadow for cards */
.shadow-\[0_0_10px_rgba\(54\,54\,58\,0\.1\)\] {
  box-shadow: 0 0 10px rgba(54, 54, 58, 0.1);
}

/* Drop shadows */
.drop-shadow-\[0_2px_6px_rgba\(54\,54\,58\,0\.06\)\] {
  filter: drop-shadow(0 2px 6px rgba(54, 54, 58, 0.06));
}

/* Input inset shadow */
.shadow-\[inset_0_1\.5px_1\.5px_0_rgba\(54\,54\,58\,0\.05\)\] {
  box-shadow: inset 0 1.5px 1.5px 0 rgba(54, 54, 58, 0.05);
}

/* ============================================
   TRANSFORMS - Button hover/active states
   ============================================ */
.hover\:scale-\[1\.005\]:hover {
  transform: scale(1.005);
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.active\:scale-\[0\.98\]:active {
  transform: scale(0.98);
}

.active\:scale-95:active {
  transform: scale(0.95);
}

/* Translate utilities */
.translate-y-0 {
  transform: translateY(0);
}

.translate-y-1 {
  transform: translateY(0.25rem);
}

.-translate-y-1 {
  transform: translateY(-0.25rem);
}

.-translate-y-2 {
  transform: translateY(-0.5rem);
}

.hover\:-translate-y-0\.5:hover {
  transform: translateY(-0.125rem);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

/* Shared card hover behavior for Olio cards */
.olio-card-hover {
  transition:
    transform 300ms ease-in-out,
    box-shadow 300ms ease-in-out;
  box-shadow: 0 4px 10px rgba(142, 80, 89, 0.15);
}

@media (hover: hover) {
  .olio-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(142, 80, 89, 0.2);
  }
}

/* Rotate utilities */
.rotate-0 {
  transform: rotate(0deg);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.-rotate-45 {
  transform: rotate(-45deg);
}

.-rotate-90 {
  transform: rotate(-90deg);
}

/* Combined transforms */
.translate-y-0.rotate-0 {
  transform: translateY(0) rotate(0deg);
}

.translate-y-1.rotate-45 {
  transform: translateY(0.25rem) rotate(45deg);
}

.-translate-y-2.-rotate-45 {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* Scale utilities */
.scale-0 {
  transform: scale(0);
}

.scale-90 {
  transform: scale(0.9);
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

/* ============================================
   OPACITY
   ============================================ */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* ============================================
   DISABLED STATES
   ============================================ */
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:hover\:scale-100:disabled:hover {
  transform: scale(1);
}

.disabled\:active\:scale-100:disabled:active {
  transform: scale(1);
}

.disabled\:hover\:shadow-none:disabled:hover {
  box-shadow: none;
}

/* ============================================
   TRANSITIONS
   ============================================ */
.transition {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* Easing functions */
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   TEXT ALIGNMENT - For Shadow DOM
   ============================================ */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ============================================
   ISOLATION - Stacking context
   ============================================ */
.isolate {
  isolation: isolate;
}

/* ============================================
   BLUR / FILTER - Glass effects
   ============================================ */
.blur-none {
  filter: blur(0px);
}

.blur-sm {
  filter: blur(4px);
}

.blur {
  filter: blur(8px);
}

.blur-md {
  filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}