/* Custom CSS */
/* Custom CSS */
/* =============================================================================
   RTA STORE - Brand Theme
   Updated from: TheRTAStore-BrandPackage-Delivery (12_01_2024, Revised March 2026)

   Brand Characteristics:
   - Primary: Meadow Mint #2F6F5A
   - Accent: Burnished Copper #B56C42
   - Text: Slate Grey #40444F
   - Secondary: Mist Sage #9BA59F
   - Background: Bone White #F4F3EF
   - Typography: Inter (body), DM Serif Display (headings)
   - Shape: 8px buttons (.btn → border-radius .5rem on thertastore.com), 0px cards
   ============================================================================= */

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

    /* Typography - DM Serif Display for headings, Inter for body */
    --font-body: "Inter", "Helvetica Neue", sans-serif;
    --font-display: "DM Serif Display", Georgia, serif;

    /* Brand Color Primitives - Meadow Mint #2F6F5A */
    --color-brand-500: rgb(47 111 90);
    --color-brand-600: rgb(38 95 76);
    --color-brand-700: rgb(30 78 63);

    /* Accent Color - Burnished Copper #B56C42 */
    --color-accent-500: rgb(181 108 66);
    --color-accent-600: rgb(158 94 57);

    /* Neutral - Mist Sage #9BA59F */
    --color-mist-sage: rgb(155 165 159);

    /* Semantic Colors - Reference brand primitives */
    --color-bg-brand-solid: var(--color-brand-500);
    --color-brand-400: rgb(62 135 110);
    --color-bg-brand-solid_hover: var(--color-brand-400);
    --color-fg-brand-primary: var(--color-brand-500);
    --color-fg-brand-primary_hover: var(--color-brand-600);
    --color-border-brand: var(--color-brand-500);
    --color-focus-ring: var(--color-brand-500);

    /* Primary button - Meadow Mint, lightens on hover (matches RTA site) */
    --btn-primary-bg: var(--color-brand-500);
    --btn-primary-bg_hover: var(--color-brand-400);
    --btn-primary-text: rgb(255 255 255);
    --btn-primary-text_hover: rgb(255 255 255);

    /* Disabled / inactive state - Mist Sage faded */
    --btn-disabled-bg: rgb(155 165 159 / 0.4);
    --btn-disabled-text: var(--color-mist-sage);

    /* Background Colors - Bone White #F4F3EF */
    --color-bg-primary: rgb(244 243 239);
    --color-bg-secondary: rgb(255 255 255);

    /* Text Colors - Slate Grey #40444F */
    --color-fg-primary: rgb(64 68 79);
    --color-fg-secondary: rgb(64 68 79);

    /* Chat — user bubble uses a light mint tint; quick-reply pills
       use Meadow Mint with white text, lightens on hover. */
    --color-chat-user-bg: rgb(47 111 90 / 0.12);
    --color-chat-user-bg_hover: rgb(47 111 90 / 0.18);
    --color-chat-user-text: var(--color-fg-primary);

    --color-chat-quick-reply-bg: var(--color-brand-500);
    --color-chat-quick-reply-bg_hover: var(--color-brand-400);
    --color-chat-quick-reply-border: transparent;
    --color-chat-quick-reply-text: rgb(255 255 255);
    --color-chat-quick-reply-text_hover: rgb(255 255 255);

    /* Shape - thertastore.com uses border-radius: .5rem (8px) on .btn */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --button-radius: 8px;
    --chat-bubble-radius: 8px;

    /* Landing input bar - no white fade behind chat input */
    --landing-inputbar-bg: transparent;

    /* Landing showcase cards + hero - match button radius (.5rem on thertastore.com) */
    --landing-card-radius: 8px;

    /* Card labels - 14px Inter, matches RTA brand spec (catalog description size). */
    --landing-card-label-font-size: 14px;
    --landing-card-label-line-height: 20px;

    /* Chat input (landing + chat thread) - outlined card matching
       thertastore.com CTA buttons: white bg, thin neutral border, 8px radius,
       no shadow. */
    --chatinput-landing-bg: var(--color-bg-secondary);
    --chatinput-landing-border: rgb(0 0 0 / 0.15);
    --chatinput-landing-shadow: none;
    --chatinput-landing-radius: var(--button-radius);
    --chatinput-landing-radius-sm: var(--button-radius);

    --chatinput-thread-bg: var(--color-bg-secondary);
    --chatinput-thread-border: rgb(0 0 0 / 0.15);
    --chatinput-thread-shadow: none;
    --chatinput-thread-radius: var(--button-radius);
    --chatinput-thread-backdrop: none;
    --chatinput-thread-padding-y: var(--chatinput-landing-padding);
    --chatinput-thread-padding-x: var(--chatinput-landing-padding);
    --chatinput-thread-padding-y-sm: var(--chatinput-landing-padding-sm);
    --chatinput-thread-padding-x-sm: var(--chatinput-landing-padding-sm);
    --chatinput-landing-padding: 0.75rem;
    --chatinput-landing-padding-sm: 1rem;

    /* Landing headline - matches thertastore.com h2 (DM Serif 36px / #1E1E1E). */
    --landing-headline-font-family: var(--font-display);
    --landing-headline-font-size: 36px;
    --landing-headline-font-weight: 400;
    --landing-headline-line-height: 1.2;
    --landing-headline-color: #1E1E1E;
    --landing-headline-margin-bottom: 2.5rem;

    /* Branded header - icon hover uses translucent Meadow Mint */
    --brandedheader-icon-hover-bg: rgb(47 111 90 / 0.08);

    /* Favorites modal - Meadow Mint brand green for Order Sample button */
    --favoritesmodal-button-bg: var(--color-brand-500);
    --favoritesmodal-button-bg_hover: var(--color-brand-600);
    --favoritesmodal-button-text: rgb(255 255 255);
    --favoritesmodal-button-text_hover: rgb(255 255 255);

    /* PDP Canvas insight — full light border instead of left-only accent */
    --pdpcanvas-insight-border-width: 0px;

    /* PDP Canvas title — DM Serif Display, bold, 30px */
    --pdpcanvas-title-font-family: var(--font-display);
    --pdpcanvas-title-font-weight: 700;
    --pdpcanvas-title-font-size: 1.875rem;

    /* PDP Canvas price — Inter body font, 22px, Meadow Mint brand green */
    --pdpcanvas-price-text: var(--color-brand-500);
    --pdpcanvas-price-font-family: var(--font-body);
    --pdpcanvas-price-font-size: 1.375rem;

    /* PDP Canvas CTA — Meadow Mint brand green, rounded */
    --pdpcanvas-cta-bg: var(--color-brand-500);
    --pdpcanvas-cta-bg_hover: var(--color-brand-600);
    --pdpcanvas-cta-text: rgb(255 255 255);
    --pdpcanvas-cta-text_hover: rgb(255 255 255);
    --pdpcanvas-cta-radius: var(--button-radius);

    /* PDP Modal — back button: plain chevron, no bg/border */
    --pdpmodal-close-bg: transparent;
    --pdpmodal-close-bg_hover: transparent;
    --pdpmodal-close-border: none;
    --pdpmodal-close-shadow: none;
    --pdpmodal-close-text: var(--color-brand-500);
    --pdpmodal-close-size: 1.25rem;
    --pdpmodal-close-icon-size: 1.25rem;
    --pdpmodal-close-icon-stroke: 1.5;

    /* Cart Panel — close button: dark slate circle, white X */
    --cartpanel-close-bg: rgb(64 68 79);
    --cartpanel-close-bg_hover: rgb(0 0 0);
    --cartpanel-close-text: rgb(255 255 255);
    --cartpanel-close-text_hover: rgb(255 255 255);
    --cartpanel-close-radius: 9999px;
    --cartpanel-close-size: 1.75rem;
    --cartpanel-close-icon-size: 0.875rem;

    /* Cart Panel — header: bold Inter, slightly smaller */
    --cartpanel-header-font-family: var(--font-body);
    --cartpanel-header-font-weight: 700;
    --cartpanel-header-font-size: 1.125rem;

    /* Cart Panel — item title & price */
    --cartpanel-item-title-font-family: var(--font-body);
    --cartpanel-item-title-font-size: 1rem;
    --cartpanel-item-title-font-weight: 700;
    --cartpanel-item-price-font-family: var(--font-body);
    --cartpanel-item-price-font-size: 1rem;
    --cartpanel-item-price-font-weight: 500;

    /* Cart Panel — stepper: light grey hover */
    --cartpanel-stepper-btn-bg_hover: rgb(0 0 0 / 0.06);

    /* Cart Panel — remove button: Burnished Copper, squared, same height as stepper */
    --cartpanel-remove-bg: var(--color-accent-500);
    --cartpanel-remove-bg_hover: var(--color-accent-600);
    --cartpanel-remove-text: rgb(255 255 255);
    --cartpanel-remove-text_hover: rgb(255 255 255);
    --cartpanel-remove-radius: 4px;
    --cartpanel-remove-size: var(--cartpanel-stepper-btn-size);

    /* Quantity Stepper — match cart panel stepper look */
    --quantitystepper-border: var(--color-border-primary);
    --quantitystepper-radius: var(--cartpanel-stepper-radius);
    --quantitystepper-btn-bg: transparent;
    --quantitystepper-btn-bg_hover: var(--cartpanel-stepper-btn-bg_hover);
    --quantitystepper-btn-size: var(--cartpanel-stepper-btn-size);
    --quantitystepper-value-width: var(--cartpanel-stepper-value-width);
    --quantitystepper-value-font-size: var(--cartpanel-stepper-value-font-size);
    --quantitystepper-label-display: none;

    /* =========================================================================
       COMPONENT TOKENS - Catalog (RtaResponseProductResult)
       Used by the generated RTA product grid and cards
       ========================================================================= */

    /* Catalog Container */
    --color-catalog-container-bg: var(--color-bg-primary);
    --catalog-radius-container: 0px;

    /* Catalog Card */
    --color-catalog-card-bg: var(--color-bg-secondary);
    --catalog-radius-card: 4px;
    --catalog-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --catalog-card-border: none;

    /* Catalog Image */
    --color-catalog-image-bg: var(--color-bg-primary);

    /* Catalog Badge (Compare) */
    --color-catalog-badge-text: var(--color-brand-500);
    --catalog-radius-badge: 20px;
    --text-catalog-badge: 12px;
    --text-catalog-badge--line-height: 18px;

    /* Catalog Title - DM Serif Display */
    --color-catalog-title-text: var(--color-fg-primary);
    --text-catalog-title: 20px;
    --text-catalog-title--line-height: 24px;

    /* Catalog Description/Link */
    --color-catalog-description-text: var(--color-fg-primary);
    --color-catalog-link-text: var(--color-brand-500);
    --text-catalog-description: 14px;
    --text-catalog-description--line-height: 20px;

    /* Catalog Rating */
    --color-catalog-rating-filled: var(--color-accent-500);
    --color-catalog-rating-empty: var(--color-mist-sage);

    /* Catalog Shipping */
    --color-catalog-shipping-text: var(--color-fg-primary);
    --color-catalog-shipping-icon: var(--color-brand-500);

    /* Catalog Buttons - Burnished Copper accent for CTAs */
    --color-catalog-button-bg: var(--color-accent-500);
    --color-catalog-button-bg_hover: var(--color-accent-600);
    --color-catalog-button-text: rgb(255 255 255);
    --color-catalog-button-secondary-bg: transparent;
    --color-catalog-button-secondary-bg_hover: var(--color-brand-500);
    --color-catalog-button-secondary-border: var(--color-brand-500);
    --color-catalog-button-secondary-text: var(--color-brand-500);
    --color-catalog-button-secondary-text_hover: rgb(255 255 255);
    --catalog-radius-button: 8px;
    --catalog-button-gap: 12px;

    /* Catalog Pills */
    --catalog-radius-pill: 8px;

    /* =========================================================================
       COMPONENT TOKENS - Product Card (Slot-based)
       Affects: product card component only
       ========================================================================= */

    /* Card container - Minimal radius, subtle drop shadow */
    --productcard-radius: 4px;
    --productcard-bg: var(--color-bg-secondary);
    --productcard-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --productcard-border: none;

    /* Image */
    --productcard-image-radius: 0px;
    --productcard-image-padding: 1rem;

    /* Title - DM Serif Display, 20px, 24px line-height */
    --productcard-title-text: var(--color-fg-primary);
    --productcard-title-font-family: var(--font-display);
    --productcard-title-font-size: 20px;
    --productcard-title-font-weight: 400;
    --productcard-title-line-height: 24px;

    /* Review stars - Burnished Copper filled, Mist Sage empty */
    --productcard-review-star-filled: var(--color-accent-500);
    --productcard-review-star-empty: var(--color-mist-sage);
    --productcard-review-text: var(--color-fg-primary);

    /* Description - Inter Medium 14px, brand color */
    --productcard-description-text: var(--color-brand-500);
    --productcard-description-font-size: 14px;
    --productcard-description-font-weight: 500;

    /* Shipping - Inter Medium 16px, 22px line-height */
    --productcard-shipping-text: var(--color-fg-primary);
    --productcard-shipping-icon: var(--color-brand-500);
    --productcard-shipping-font-size: 16px;
    --productcard-shipping-gap: 5px;
    --productcard-shipping-font-weight: 500;

    /* Add to Cart button - Meadow Mint brand green, outlined style */
    --productcard-cart-bg: transparent;
    --productcard-cart-bg_hover: var(--color-brand-500);
    --productcard-cart-text: var(--color-brand-500);
    --productcard-cart-text_hover: rgb(255 255 255);
    --productcard-cart-border: 1px solid var(--color-brand-500);
    --productcard-cart-radius: 8px;
    --productcard-cart-padding-x: 5px;
    --productcard-cart-padding-y: 13px;
    --productcard-cart-font-size: 16px;
    --productcard-cart-font-weight: 600;

    /* External Product Link - Solid Burnished Copper */
    --productcard-extlink-border: none;
    --productcard-extlink-text: rgb(255 255 255);
    --productcard-extlink-bg: var(--color-accent-500);
    --productcard-extlink-bg_hover: var(--color-accent-600);
    --productcard-extlink-text_hover: rgb(255 255 255);
    --productcard-extlink-radius: 8px;
    --productcard-extlink-padding-x: 4px;
    --productcard-extlink-padding-y: 14px;
    --productcard-extlink-font-size: 16px;
    --productcard-extlink-font-weight: 500;

    /* Collect / Heart - Compact icon, no background */
    --productcard-collect-size: 24px;
    --productcard-collect-icon-size: 14px;
    --productcard-collect-radius: 9999px;
    --productcard-collect-bg: rgb(255 255 255 / 0.85);
    --productcard-collect-icon: var(--color-brand-500);
    --productcard-collect-icon_hover: var(--color-fg-error-primary);
    --productcard-collect-shadow: none;

    /* Quick view / Compare badge - Pill shape with icon */
    --productcard-quickview-radius: 20px;
    --productcard-quickview-bg: var(--color-bg-secondary);
    --productcard-quickview-text: var(--color-brand-500);
    --productcard-quickview-font-size: 12px;
    --productcard-quickview-font-weight: 500;
}

/* =========================================================================
   RTA STORE - Utility Classes
   Custom styling for RTA-specific components
   ========================================================================= */

[data-theme="rtastore"] .catalog-rating {
    color: var(--color-catalog-rating-filled);
}

[data-theme="rtastore"] .catalog-rating-empty {
    color: var(--color-catalog-rating-empty);
}

[data-theme="rtastore"] .catalog-shipping {
    color: var(--color-catalog-shipping-text);
}

[data-theme="rtastore"] .catalog-button-primary:hover {
    background-color: var(--color-catalog-button-bg_hover);
}

[data-theme="rtastore"] .catalog-button-secondary:hover {
    background-color: var(--color-catalog-button-secondary-bg_hover);
    color: var(--color-catalog-button-secondary-text_hover);
}

/* BrandedHeader replaces SimpleHeader — hide the logo, floating cart button,
   and fixed favorites pill. All are re-rendered inside BrandedHeader. */
[data-theme="rtastore"] [data-simple-header="logo"] {
    display: none;
}
[data-theme="rtastore"] [data-simple-header="cart"] {
    display: none;
}
[data-theme="rtastore"] [data-favorites-pill="fixed"] {
    display: none;
}

/* ResponseExternalLink CTA — match the brand button radius so it reads as
   part of the same button system. */
[data-theme="rtastore"] a[data-branded-cta] {
    border-radius: var(--button-radius);
}

/* Send-message button keeps the brand color across landing AND chat-thread,
   regardless of input-empty disabled state — matches thertastore.com's
   always-on CTA affordance. */
[data-theme="rtastore"] button[data-chat-input="send"] {
    background-color: var(--color-bg-brand-solid);
    color: var(--btn-primary-text);
}
[data-theme="rtastore"] button[data-chat-input="send"] svg {
    color: var(--btn-primary-text);
}
[data-theme="rtastore"] button[data-chat-input="send"]:hover,
[data-theme="rtastore"] button[data-chat-input="send"][data-hovered] {
    background-color: var(--color-bg-brand-solid_hover);
    color: var(--btn-primary-text_hover);
}
[data-theme="rtastore"] button[data-chat-input="send"]:hover svg,
[data-theme="rtastore"] button[data-chat-input="send"][data-hovered] svg {
    color: var(--btn-primary-text_hover);
}

/* Landing showcase grid - fixed-width cards that keep their size as the
   viewport narrows. Cards are aspect-ratio 1/1, so flexible column widths
   would resize the cards as the viewport changes. Instead: lock each column
   to ~215px (the natural desktop size) and let the row wrap from 4 across
   to 2×2 when the viewport can no longer fit four. */
[data-theme="rtastore"] [data-landing="grid"] {
    grid-template-columns: repeat(4, 215px);
    justify-content: center;
}

/* Below the four-across threshold, drop straight to a 2×2 grid (skip a
   three-up + orphan layout). 950px ≈ 4 cards (215×4) + 3 gaps + contentInner
   padding. */
@media (max-width: 949px) {
    [data-theme="rtastore"] [data-landing="grid"] {
        grid-template-columns: repeat(2, 215px);
    }
}

/* Very narrow viewports can't fit two 215px columns side-by-side — fall
   back to flexible columns so cards shrink to fit instead of overflowing. */
@media (max-width: 499px) {
    [data-theme="rtastore"] [data-landing="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-theme="rtastore"] [data-landing="grid"] > *:nth-child(n + 5) {
    display: none;
}

/* Landing showcase — fit within the viewport and center the whole stack
   (headline + cards + chat input) as one block. Defaults: root is min-h 100vh
   and inputBar is fixed to bottom; both override for rtastore. */
[data-theme="rtastore"] [data-landing="root"] {
    min-height: 0;
    flex: 1;
    justify-content: center;
}

[data-theme="rtastore"] [data-landing="content-scroll"] {
    flex: none;
    padding-bottom: 0;
    align-items: center;
}

[data-theme="rtastore"] [data-landing="content-inner"] {
    text-align: center;
    padding-bottom: 2.75rem;
    max-width: 960px;
}

/* Chat input flows below the cards instead of being pinned to the viewport. */
[data-theme="rtastore"] [data-landing="input-bar"] {
    position: static;
    padding: 0 1.5rem;
}

/* PDP insight — full light-grey border instead of left-only accent */
[data-theme="rtastore"] [data-pdp-slot="insight"] {
    border: 1px solid rgb(0 0 0 / 0.1);
}

/* Hide brand name in PDP canvas — RTA products use numeric IDs as brand
   names (e.g. "54") which aren't meaningful to display. */
[data-theme="rtastore"] [data-pdp-slot="brand"] {
    display: none;
}

/* Product card subtle shadow */
[data-theme="rtastore"] .rta-product-card,
[data-theme="rtastore"] [data-slot="product-card"] {
    box-shadow: var(--productcard-shadow);
    border-radius: var(--productcard-radius);
}


/* Scoped layout utilities from component config */
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --spacing: 0.25rem;
}
[data-component-config="productCard"] .absolute {
  position: absolute;
}
[data-component-config="productCard"] .relative {
  position: relative;
}
[data-component-config="productCard"] .top-\[5px\] {
  top: 5px;
}
[data-component-config="productCard"] .right-\[8px\] {
  right: 8px;
}
[data-component-config="productCard"] .mt-auto {
  margin-top: auto;
}
[data-component-config="productCard"] .flex {
  display: flex;
}
[data-component-config="productCard"] .min-w-\[136px\] {
  min-width: 136px;
}
[data-component-config="productCard"] .flex-1 {
  flex: 1;
}
[data-component-config="productCard"] .flex-col {
  flex-direction: column;
}
[data-component-config="productCard"] .flex-row {
  flex-direction: row;
}
[data-component-config="productCard"] .justify-between {
  justify-content: space-between;
}
[data-component-config="productCard"] .gap-2 {
  gap: calc(var(--spacing) * 2);
}
[data-component-config="productCard"] .gap-3 {
  gap: calc(var(--spacing) * 3);
}
[data-component-config="productCard"] .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
[data-component-config="productCard"] .py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .py-\[2px\] {
  padding-block: 2px;
}
[data-component-config="productCard"] .py-\[6px\] {
  padding-block: 6px;
}
[data-component-config="productCard"] .pt-2\.5 {
  padding-top: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .pb-2\.5 {
  padding-bottom: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
[data-component-config="productCard"] .leading-\[18px\] {
  --tw-leading: 18px;
  line-height: 18px;
}
[data-component-config="productCard"] .leading-\[22px\] {
  --tw-leading: 22px;
  line-height: 22px;
}
[data-component-config="productCard"] .capitalize {
  text-transform: capitalize;
}
[data-component-config="productCard"] .hover\:underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@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-leading: initial;
    }
  }
}


/* Scoped layout utilities from component config */
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --spacing: 0.25rem;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-component-config="productCard"] .absolute {
  position: absolute;
}
[data-component-config="productCard"] .relative {
  position: relative;
}
[data-component-config="productCard"] .top-\[5px\] {
  top: 5px;
}
[data-component-config="productCard"] .right-\[8px\] {
  right: 8px;
}
[data-component-config="productCard"] .mt-auto {
  margin-top: auto;
}
[data-component-config="productCard"] .flex {
  display: flex;
}
[data-component-config="productCard"] .flex-1 {
  flex: 1;
}
[data-component-config="productCard"] .flex-col {
  flex-direction: column;
}
[data-component-config="productCard"] .flex-row {
  flex-direction: row;
}
[data-component-config="productCard"] .justify-between {
  justify-content: space-between;
}
[data-component-config="productCard"] .gap-2 {
  gap: calc(var(--spacing) * 2);
}
[data-component-config="productCard"] .gap-3 {
  gap: calc(var(--spacing) * 3);
}
[data-component-config="productCard"] .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
[data-component-config="productCard"] .py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .py-\[2px\] {
  padding-block: 2px;
}
[data-component-config="productCard"] .pt-2\.5 {
  padding-top: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .pb-2\.5 {
  padding-bottom: calc(var(--spacing) * 2.5);
}
[data-component-config="productCard"] .pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
[data-component-config="productCard"] .leading-\[22px\] {
  --tw-leading: 22px;
  line-height: 22px;
}
[data-component-config="productCard"] .opacity-0 {
  opacity: 0%;
}
[data-component-config="productCard"] .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));
}
[data-component-config="productCard"] .group-hover\:opacity-100 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
}
[data-component-config="productCard"] .hover\:underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
[data-component-config="productCard"] .\[\&\[aria-pressed\=true\]\]\:opacity-100 {
  &[aria-pressed=true] {
    opacity: 100%;
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@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-leading: initial;
    }
  }
}