/* Utrady Website Studio 1.3.4.0 — VISUAL CONTRACT / COMMERCE
 * Scope: only websites that have published Website Studio (.ws2-body).
 * No Javascript, tax, price, inventory, gateway, account or checkout business rules.
 * Loaded AFTER legacy theme CSS, commerce CSS, palette definitions and experience CSS.
 */

/* Each theme/palette publishes semantic tokens on body. Never override their values
 * with fixed dark-mode colors. The same token contract covers all commerce pages. */
.ws2-body {
  --ws134-ink: var(--ws2-fg);
  --ws134-quiet: var(--ws2-muted);
  --ws134-paper: var(--ws2-panel);
  --ws134-canvas: var(--ws2-bg);
  --ws134-action: var(--ws2-accent);
  --ws134-money: var(--ws2-accent);
  --ws134-action-ink: var(--ws2-contrast);
  --ws134-edge: var(--ws2-line);
  --ws134-photo: #ffffff;
  --ws134-photo-ink: #24342e;
  color: var(--ws134-ink);
  background: var(--ws134-canvas);
  color-scheme: light;
}
/* Accent ink is slightly deeper than the action fill on 3 light palettes: WCAG 4.5:1. */
.ws2-body.ws2-palette-jade { --ws134-money: #076954; }
.ws2-body.ws2-palette-cobre { --ws134-money: #884219; }
.ws2-body.ws2-palette-coral { --ws134-money: #9c2944; }

.ws2-body.ws2-theme-nova.ws2-palette-original,
.ws2-body.ws2-palette-noche { color-scheme: dark; }

/* Shared public chrome: category, catalog, product, cart and account are visually
 * descended from the PUBLISHED theme/palette (never the unsaved editor draft). */
.ws2-body .ws2-main {
  color: var(--ws134-ink);
  background: var(--ws134-canvas);
}
.ws2-body .ws2-header,
.ws2-body .ws2-footer,
.ws2-body .ws2-account-menu,
.ws2-body .ws2-mobile-links {
  background: var(--ws134-paper) !important;
  color: var(--ws134-ink) !important;
  border-color: var(--ws134-edge) !important;
}
.ws2-body .ws2-header .ws2-brand,
.ws2-body .ws2-header .ws2-nav a,
.ws2-body .ws2-header .ws2-account,
.ws2-body .ws2-header .ws2-user-label,
.ws2-body .ws2-footer-brand strong,
.ws2-body .ws2-footer-grid b,
.ws2-body .ws2-account-menu a,
.ws2-body .ws2-account-menu button,
.ws2-body .ws2-mobile-links a,
.ws2-body .ws2-mobile-links button {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-account-menu a:hover,
.ws2-body .ws2-account-menu button:hover,
.ws2-body .ws2-mobile-links a:hover {
  background: var(--ws134-canvas) !important;
}
.ws2-body .ws2-footer-grid a,
.ws2-body .ws2-footer-grid p,
.ws2-body .ws2-footer-grid span { color: var(--ws134-quiet) !important; }
.ws2-body .ws2-intro h1,
.ws2-body .ws2-intro h2,
.ws2-body .ws2-page .ws2-recent-heading h2 {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-intro p,
.ws2-body .ws2-recent-heading p { color: var(--ws134-quiet) !important; }
.ws2-body .ws2-intro .ws2-eyebrow,
.ws2-body .ws2-recent-kicker { color: var(--ws134-action) !important; }

/* Filter fields / sorting controls should never use black text on Nova or Noche. */
.ws2-body .ws2-filter-panel {
  background: var(--ws134-paper) !important;
  border: 1px solid var(--ws134-edge) !important;
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-filter-panel .ws2-filter-field label {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-filter-panel input,
.ws2-body .ws2-filter-panel select,
.ws2-body .ws2-header-search input {
  color: var(--ws134-ink) !important;
  background: var(--ws134-paper) !important;
  border-color: var(--ws134-edge) !important;
}
.ws2-body .ws2-filter-panel input::placeholder,
.ws2-body .ws2-header-search input::placeholder {
  color: var(--ws134-quiet) !important;
  opacity: 1;
}
.ws2-body .ws2-filter-panel select option {
  color: var(--ws134-ink);
  background: var(--ws134-paper);
}
.ws2-body .ws2-filter-clear,
.ws2-body .ws2-filter-clear a,
.ws2-body .ws2-filter-clear button {
  color: var(--ws134-ink) !important;
  border-color: var(--ws134-edge) !important;
}

/* Product imagery is neutral (white) so photography is never tinted/cropped.
 * Text stays on a contrasting surface, including original dark Nova. */
.ws2-body .ws2-result-card,
.ws2-body .ws2-recent-card {
  background: var(--ws134-paper) !important;
  color: var(--ws134-ink) !important;
  border: 1px solid var(--ws134-edge) !important;
  overflow: hidden;
  text-decoration: none !important;
}
.ws2-body .ws2-result-media,
.ws2-body .ws2-recent-image {
  background: var(--ws134-photo) !important;
  color: var(--ws134-photo-ink) !important;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ws2-body .ws2-result-media img,
.ws2-body .ws2-recent-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
}
.ws2-body .ws2-result-body,
.ws2-body .ws2-recent-info {
  background: var(--ws134-paper) !important;
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-result-body strong,
.ws2-body .ws2-result-body a,
.ws2-body .ws2-recent-info strong,
.ws2-body .ws2-recent-info a {
  color: var(--ws134-ink) !important;
  opacity: 1;
}
.ws2-body .ws2-result-body small,
.ws2-body .ws2-result-body span:not([class*='price']),
.ws2-body .ws2-recent-info span {
  color: var(--ws134-quiet) !important;
}
.ws2-body .ws2-result-body b,
.ws2-body .ws2-recent-info b {
  color: var(--ws134-money) !important;
  font-weight: 800;
}
.ws2-body .ws2-result-card:focus-visible,
.ws2-body .ws2-recent-card:focus-visible {
  outline: 3px solid var(--ws134-action);
  outline-offset: 3px;
}
.ws2-body .ws2-result-card:hover,
.ws2-body .ws2-recent-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.10); }

/* Existing Livewire templates remain untouched. Override ONLY presentation of
 * their Tailwind utility classes inside the opt-in Studio wrapper. */
.ws2-body .ws2-legacy {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-legacy .bg-white,
.ws2-body .ws2-legacy .bg-gray-50,
.ws2-body .ws2-legacy .bg-gray-100 {
  background-color: var(--ws134-paper) !important;
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-legacy .text-black,
.ws2-body .ws2-legacy .text-gray-900,
.ws2-body .ws2-legacy .text-gray-800,
.ws2-body .ws2-legacy .text-gray-700 {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-legacy .text-gray-600,
.ws2-body .ws2-legacy .text-gray-500,
.ws2-body .ws2-legacy .text-gray-400 {
  color: var(--ws134-quiet) !important;
}
.ws2-body .ws2-legacy .text-primary-600,
.ws2-body .ws2-legacy .text-primary-500,
.ws2-body .ws2-legacy [class*='text-primary-'] {
  color: var(--ws134-money) !important;
}
.ws2-body .ws2-legacy button.bg-primary-600,
.ws2-body .ws2-legacy button.bg-primary-500,
.ws2-body .ws2-legacy .bg-primary-600,
.ws2-body .ws2-legacy .bg-primary-500,
.ws2-body .ws2-legacy button[class*='bg-primary-'] {
  background: var(--ws134-action) !important;
  color: var(--ws134-action-ink) !important;
  border-color: var(--ws134-action) !important;
}
.ws2-body .ws2-legacy button.bg-primary-600 *,
.ws2-body .ws2-legacy button.bg-primary-500 *,
.ws2-body .ws2-legacy button[class*='bg-primary-'] * {
  color: var(--ws134-action-ink) !important;
}

/* Product detail has bare utility headings/price fields that previously rendered
 * BLACK on dark Nova. Explicitly resolve these against the actual card surface. */
.ws2-body .ws2-page-product-details .ws2-legacy p.text-xl,
.ws2-body .ws2-page-product-details .ws2-legacy p.text-lg:not(.line-through) {
  color: var(--ws134-ink) !important;
}
.ws2-body .ws2-page-product-details .ws2-legacy p.text-2xl.font-semibold.text-primary-600,
.ws2-body .ws2-page-product-details .ws2-legacy p.text-2xl,
.ws2-body .ws2-page-product-details .ws2-legacy p.text-primary-600,
.ws2-body .ws2-page-product-details .ws2-legacy .text-primary-600 {
  color: var(--ws134-money) !important;
}
.ws2-body .ws2-page-product-details .ws2-legacy button:not([class*='bg-primary-']):not([class*='bg-red-']):not([class*='bg-green-']) {
  color: var(--ws134-ink);
  border-color: var(--ws134-edge);
}
.ws2-body .ws2-page-product-details .ws2-legacy img {
  object-fit: contain !important;
  object-position: center;
}
.ws2-body .ws2-page-product-details .ws2-legacy [data-fancybox='gallery'] {
  background: var(--ws134-photo);
}

/* Cart/account/checkout: improve legibility WITHOUT changing any calculated
 * totals or functions and without interfering with gateway widgets/iframes. */
.ws2-body .ws2-page-cart .ws2-legacy,
.ws2-body .ws2-page-checkout .ws2-legacy,
.ws2-body .ws2-page-profile .ws2-legacy,
.ws2-body .ws2-page-orders .ws2-legacy {
  color: var(--ws134-ink);
}
.ws2-body .ws2-legacy th,
.ws2-body .ws2-legacy table td {
  color: var(--ws134-ink);
  border-color: var(--ws134-edge);
}
.ws2-body .ws2-legacy input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.ws2-body .ws2-legacy select,
.ws2-body .ws2-legacy textarea {
  background: var(--ws134-paper) !important;
  color: var(--ws134-ink) !important;
  border-color: var(--ws134-edge) !important;
}
.ws2-body .ws2-legacy input::placeholder,
.ws2-body .ws2-legacy textarea::placeholder {
  color: var(--ws134-quiet) !important;
  opacity: 1;
}
.ws2-body .ws2-legacy option {
  color: var(--ws134-ink);
  background: var(--ws134-paper);
}

/* Product-first mobile layouts: images and actual commerce info remain visible,
 * cards keep accessible touch targets; no reordering of payment elements. */
@media (max-width: 760px) {
  .ws2-body .ws2-result-grid,
  .ws2-body .ws2-recent-grid { gap: 12px !important; }
  .ws2-body .ws2-result-media,
  .ws2-body .ws2-recent-image { aspect-ratio: 1 / 1 !important; padding: 7px !important; }
  .ws2-body .ws2-result-body,
  .ws2-body .ws2-recent-info { padding: 12px !important; }
  .ws2-body .ws2-recent-info strong { min-height: 0; }
  .ws2-body .ws2-intro { padding: 24px 0 26px !important; margin-bottom: 20px !important; }
  .ws2-body .ws2-intro h1 { font-size: clamp(28px, 7vw, 45px) !important; }
}
@media (max-width: 420px) {
  .ws2-body .ws2-result-grid,
  .ws2-body .ws2-recent-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ws2-body .ws2-result-body,
  .ws2-body .ws2-recent-info { padding: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ws2-body .ws2-result-card,
  .ws2-body .ws2-recent-card,
  .ws2-body .ws2-result-media img { transform: none !important; transition: none !important; }
}