/* Shop CSS - Tailwind without daisyUI
   This is the CSS bundle for public shop pages (localhost:4001).
   It excludes daisyUI which is only needed for admin pages.
   See app.css for the full admin version. */

@import "tailwindcss" source(none);
@source "../css";
@source "../js";
/* Only scan shop-specific files, not admin pages */
@source "../../lib/simpleshop_theme_web/live/shop";
@source "../../lib/simpleshop_theme_web/components/shop_components.ex";
@source "../../lib/simpleshop_theme_web/components/shop_components";
@source "../../lib/simpleshop_theme_web/components/page_templates";
@source "../../lib/simpleshop_theme_web/components/layouts/shop.html.heex";
@source "../../lib/simpleshop_theme_web/components/layouts/shop_root.html.heex";

/* Heroicons plugin */
@plugin "../vendor/heroicons";

/* NO daisyUI - shop pages use the custom .themed system instead */

/* Add variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }

/* Theme CSS - Layer 1: Primitives (fixed CSS variables) */
@import "./theme-primitives.css";

/* Theme CSS - Layer 2: Shared styles only (.themed selectors)
   Note: .preview-frame rules are still included but unused on shop pages.
   This is acceptable as it's only ~5KB and splitting adds complexity. */
@import "./theme-layer2-attributes.css";

/* Theme CSS - Layer 3: Semantic aliases */
@import "./theme-semantic.css";

/* Cart drawer open state styles */
.cart-drawer.open {
  right: 0 !important;
}

.cart-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Product gallery thumbnail styles */
.pdp-thumbnail {
  border: 2px solid var(--t-border-default);
  transition: border-color 0.15s ease;
}

.pdp-thumbnail-active {
  border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
}