/* Custom CSS */
/* =============================================================================
   COSMETICS (Sephora Clone) - Brand Theme
   Source: https://www.figma.com/design/9rBZxov5dHAC0hiBYCe4ih/Sephora?node-id=51-8801

   Brand Characteristics:
   - Primary: Black #000000
   - Secondary text: Dove Gray #666666
   - Typography: Helvetica Neue
   - Shape: Sharp corners (0px radius)
   ============================================================================= */

[data-theme="cosmetics"] {
  /* =========================================================================
       APPLICATION TOKENS
       Affects: buttons, inputs, links, navigation, all UI components
       ========================================================================= */

  /* Typography - Helvetica Neue throughout */
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Brand Color Primitives - Black */
  --color-brand-500: rgb(0 0 0);
  --color-brand-600: rgb(51 51 51);
  --color-brand-700: rgb(34 34 34);

  /* Semantic Colors */
  --color-bg-brand-solid: var(--color-brand-500);
  --color-bg-brand-solid_hover: var(--color-brand-600);
  --color-fg-primary: rgb(0 0 0);
  --color-fg-secondary: rgb(102 102 102);
  --color-focus-ring: var(--color-brand-500);

  /* Background Colors */
  --color-bg-primary: rgb(255 255 255);
  --color-bg-secondary: rgb(247 247 247);

  /* Border Colors */
  --color-border-subtle: rgba(0, 0, 0, 0.12);

  /* Shape - Sharp corners */
  --radius-sm: 0px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* =========================================================================
       COMPONENT TOKENS - Product Card (Slot-based)
       Matches Figma: https://www.figma.com/design/9rBZxov5dHAC0hiBYCe4ih/Sephora?node-id=51-8801
       ========================================================================= */

  /* Card Container */
  --productcard-radius: 0px;
  --productcard-bg: rgb(255 255 255);
  --productcard-shadow: none;
  --productcard-border: none;

  /* Image - No background, no radius, square aspect */
  --productcard-image-radius: 0px;
  --productcard-image-bg: transparent;
  --productcard-image-aspect-ratio: 1 / 1;
  --productcard-image-max-height: none;
  --productcard-image-padding: 1rem;

  /* Title (Brand name) - Bold 12px, black, 15px line-height */
  --productcard-title-text: rgb(0 0 0);
  --productcard-title-font-family: var(--font-body);
  --productcard-title-font-size: 12px;
  --productcard-title-font-weight: 700;
  --productcard-title-line-height: 15px;

  /* Description (Product name) - Regular 14px, black, 17.5px line-height */
  --productcard-description-text: rgb(0 0 0);
  --productcard-description-font-family: var(--font-body);
  --productcard-description-font-size: 14px;
  --productcard-description-font-weight: 400;
  --productcard-description-line-height: 17.5px;

  /* Variants text (Color count) - Regular 12px, gray #666, 15px line-height */
  --productcard-variants-text: rgb(102 102 102);
  --productcard-variants-font-size: 12px;
  --productcard-variants-font-weight: 400;
  --productcard-variants-line-height: 15px;

  /* Review stars - 13px, black filled, gray empty */
  --productcard-review-star-size: 13px;
  --productcard-review-star-filled: rgb(0 0 0);
  --productcard-review-star-empty: rgb(204 204 204);
  --productcard-review-text: rgb(0 0 0);
  --productcard-review-font-size: 12px;
  --productcard-review-gap: 2.2px;

  /* Price - Bold 16px, black, 20px line-height */
  --productcard-price-text: rgb(0 0 0);
  --productcard-price-font-size: 16px;
  --productcard-price-font-weight: 700;
  --productcard-price-line-height: 20px;

  /* Shipping - Regular 12px, black, 14.4px line-height, 15px icons */
  --productcard-shipping-text: rgb(0 0 0);
  --productcard-shipping-icon: rgb(0 0 0);
  --productcard-shipping-font-size: 12px;
  --productcard-shipping-font-weight: 400;
  --productcard-shipping-line-height: 14.4px;
  --productcard-shipping-icon-size: 15px;
  --productcard-shipping-gap: 6px;
  --productcard-shipping-padding-y: 1.2px;

  /* Quicklook - Semi-transparent black overlay on hover */
  --productcard-quickview-bg: rgba(0, 0, 0, 0.7);
  --productcard-quickview-bg-hover: rgba(0, 0, 0, 0.85);
  --productcard-quickview-text: rgb(255 255 255);
  --productcard-quickview-radius: 4px;
  --productcard-quickview-font-size: 14px;
  --productcard-quickview-font-weight: 700;
  --productcard-quickview-padding-x: 1rem;
  --productcard-quickview-padding-y: 0.5rem;

  /* Chat Quick Reply - hover effect and sharp corners */
  --color-chat-quick-reply-text-hover: rgb(128 128 128);
  --chat-quick-reply-radius: 4px;

  /* Primary Button - text turns gray on hover */
  --btn-primary-text-hover: rgb(180 180 180);

  /* Collect (Wishlist heart) - Transparent with black icon */
  --productcard-collect-bg: transparent;
  --productcard-collect-bg-hover: transparent;
  --productcard-collect-icon: rgb(0 0 0);
  --productcard-collect-icon-hover: rgb(128 128 128);
  --productcard-collect-icon-active: rgb(217 45 32);
  --productcard-collect-icon-active-hover: rgb(180 35 24);
  --productcard-collect-size: 32px;
  --productcard-collect-icon-size: 20px;

  /* =========================================================================
       COMPONENT TOKENS - Hero Banner
       ========================================================================= */
  --herobanner-height: 500px;
  --herobanner-radius: var(--radius-lg);
  --herobanner-radius-mobile: var(--radius-lg);
  --herobanner-padding-y-mobile: 1.5rem;
  --herobanner-padding-top-desktop: 3rem;
  --herobanner-content-max-width: 32rem;
  --herobanner-title-size: 2.25rem;
  --herobanner-title-size-mobile: 1.5rem;
  --herobanner-description-size: 1rem;
  --herobanner-description-size-mobile: 0.875rem;
  --herobanner-gradient-solid-stop: 45%;
  --herobanner-gradient-transparent-stop: 85%;
  --herobanner-bottom-fade-height: 12rem;
  --herobanner-title-margin-bottom: 1rem;
  --herobanner-description-margin-bottom: 1.5rem;
  --herobanner-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  --herobanner-text-color-light: rgb(255 255 255);
  --herobanner-text-color-light-secondary: rgba(255, 255, 255, 0.9);

  /* =========================================================================
       COMPONENT TOKENS - Product Grid
       ========================================================================= */
  --productgrid-padding-top: 1.5rem;
  --productgrid-overlap: 5rem;

  /* =========================================================================
       COMPONENT TOKENS - QuickView Modal
       ========================================================================= */
  --quickviewmodal-overlay-bg: rgba(0, 0, 0, 0.5);
  --quickviewmodal-bg: var(--color-bg-primary);
  --quickviewmodal-radius: 0px;
  --quickviewmodal-max-width: 700px;
  --quickviewmodal-max-height: 550px;
  --quickviewmodal-padding: 1.5rem;
  --quickviewmodal-gap: 1.5rem;

  --quickviewmodal-close-size: 2.5rem;
  --quickviewmodal-close-icon-size: 1.5rem;
  --quickviewmodal-close-color: var(--color-fg-primary);

  --quickviewmodal-image-aspect: 1 / 1;
  --quickviewmodal-image-max-width: 280px;
  --quickviewmodal-image-max-height: 280px;
  --quickviewmodal-thumbnail-size: 3rem;
  --quickviewmodal-thumbnail-border: 1px solid transparent;
  --quickviewmodal-thumbnail-selected-border: var(--color-fg-primary);

  --quickviewmodal-brand-font-size: 0.875rem;
  --quickviewmodal-brand-font-weight: 700;
  --quickviewmodal-name-font-size: 1.125rem;
  --quickviewmodal-name-font-weight: 400;
  --quickviewmodal-link-color: var(--color-fg-brand-primary);

  --quickviewmodal-button-height: 3rem;
  --quickviewmodal-button-bg: rgb(204 0 0);
  --quickviewmodal-button-hover-bg: rgb(170 0 0);
  --quickviewmodal-button-radius: 9999px;
  --quickviewmodal-button-font-weight: 600;

  --quickviewmodal-wishlist-border: 2px solid var(--color-fg-primary);
  --quickviewmodal-wishlist-radius: 9999px;

  /* =========================================================================
       COMPONENT TOKENS - Pill Button
       ========================================================================= */
  --btn-pill-bg: var(--color-bg-secondary);
  --btn-pill-bg-hover: var(--color-fg-primary);
  --btn-pill-text: var(--color-fg-secondary);
  --btn-pill-text-hover: var(--color-bg-primary);
  --btn-pill-border: var(--color-border-subtle);
}

/* =========================================================================
   COSMETICS (Sephora Clone) - Utility Classes
   Custom styling for Sephora-specific components
   ========================================================================= */

/* Star rating colors */
[data-theme="cosmetics"] .catalog-rating {
  color: var(--productcard-review-star-filled);
}

[data-theme="cosmetics"] .catalog-rating-empty {
  color: var(--productcard-review-star-empty);
}

/* Shipping row styling */
[data-theme="cosmetics"] .catalog-shipping {
  color: var(--productcard-shipping-text);
}

/* Product card container */
[data-theme="cosmetics"] .cosmetics-product-card,
[data-theme="cosmetics"] [data-slot="product-card"] {
  border-radius: var(--productcard-radius);
}

/* Chat quick reply button hover - only for unselected (white bg) buttons */
[data-theme="cosmetics"] button.text-chat-quick-reply-text:hover {
  color: var(--color-chat-quick-reply-text-hover);
}

/* Selected button hover - text turns slightly gray */
[data-theme="cosmetics"] button.bg-chat-user-bg:hover {
  color: var(--btn-primary-text-hover);
}

/* Remove focus ring outline for Cosmetics buttons */
[data-theme="cosmetics"] button.bg-chat-user-bg:focus,
[data-theme="cosmetics"] button.bg-chat-user-bg:focus-visible {
  outline: none;
  box-shadow: none;
  --tw-ring-offset-width: 0;
  --tw-ring-width: 0;
}


/* Layout utility classes from component config */
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --color-white: #fff;
  --spacing: 0.25rem;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.top-2 {
  top: calc(var(--spacing) * 2);
}
.right-0 {
  right: calc(var(--spacing) * 0);
}
.right-2 {
  right: calc(var(--spacing) * 2);
}
.bottom-0 {
  bottom: calc(var(--spacing) * 0);
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.z-10 {
  z-index: 10;
}
.mx-auto {
  margin-inline: auto;
}
.mt-auto {
  margin-top: auto;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-col {
  flex-direction: column;
}
.items-end {
  align-items: flex-end;
}
.gap-\[1\.5px\] {
  gap: 1.5px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.bg-\[var\(--productcard-image-bg\)\] {
  background-color: var(--productcard-image-bg);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.pt-\[4\.5px\] {
  padding-top: 4.5px;
}
.pt-\[6\.5px\] {
  padding-top: 6.5px;
}
.opacity-0 {
  opacity: 0%;
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.group-hover\:opacity-100 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
}
.hover\:bg-white {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-white);
    }
  }
}
.hover\:shadow-md {
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-duration: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}