/*
 * Aria theme overrides — minimale, scoped strict.
 *
 * Hyvä 1.4.5 + Tailwind v4 produce un styles.css în care .btn primește
 * width:100% în context flex (cauză: cascade order @layer diferit față
 * de Hyva/example demo). Plus padding-ul `.btn` nu se aplică pe submit
 * buttons (browser default 6px 0 câștigă).
 *
 * Fix: scope strict pe submit-ul mini-search și pe Add-to-Cart card.
 */

/* PDP gallery view-transition: keep the placeholder <img> visible while
   it carries an inline `view-transition-name`. The Alpine x-data
   `initGallery()` adds `invisible` (visibility:hidden) to the
   server-rendered placeholder a frame after pagereveal — which lands
   exactly in the window where the browser captures the post-transition
   snapshot. Without this override the morph PLP card → PDP gallery
   captures an empty box and the effect doesn't read. */
#gallery-main > img[style*="view-transition-name"] {
    visibility: visible !important;
}

form.minisearch button[type="submit"],
button.btn[data-addto="cart"] {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto !important;
  padding: 0.5rem 1rem !important; /* match Hyvä `.btn` defaults */
}

/*
 * Webkul wk_block.css ships a Bootstrap-era `.btn-primary` rule that overrides
 * Hyvä's oklch primary color with a lighter rgb(12,121,216), plus adds
 * uppercase text, gradient border/shadow, and a tiny `padding: 6px 0`.
 * Restore Hyvä look on Hyvä-styled buttons.
 */
.btn-primary {
  background-color: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important; /* Webkul adds dark inset text-shadow */
  text-transform: none !important; /* Webkul forces uppercase */
  opacity: 1 !important; /* Webkul forces 0.8 — washes out the color */
  /* Webkul forces padding: 6px 0; reset to Hyvä native @utility btn paddings */
  padding-block: 0.5rem !important;
  padding-inline: 1rem !important;
  font-weight: 500 !important;
  /* Webkul forces width:100% display:inline-block which makes every primary
     CTA stretch full-width (visible on empty cart, customer login, etc.).
     Restore Hyvä default — sized to content, full-width only when explicitly
     requested via .w-full / .grow utilities. */
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-lighter, var(--color-primary)) !important;
  border-color: var(--color-primary-lighter, var(--color-primary)) !important;
  opacity: 1 !important;
}
/* Cart drawer "Finalizare comandă" inherited 13px font-size from
   somewhere in the Webkul/Hyvä cascade, ending up 6px shorter than
   the secondary "Vezi și editează coșul" right beside it. Match the
   secondary's 16px / 24px line-height in the drawer footer. */
#cart-drawer .btn-primary {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* "Vezi și editează coșul" is a white .btn-secondary, but the global
   .btn :focus / :focus-visible outline uses --color-primary-darker
   (dark teal). Against a white surface that 3px ring reads as green
   and feels out of character with a neutral secondary action. Swap
   the outline for a subtle slate ring on this specific button so
   the click feedback stays accessible without screaming color. */
#cart-drawer .btn-secondary:focus,
#cart-drawer .btn-secondary:focus-visible,
#cart-drawer .btn-secondary:active {
  outline-color: rgb(156 163 175) !important; /* slate-400 */
}

/* /checkout/cart/ "Actualizează coșul" ships as .btn-secondary (white).
   Updating the cart is a positive action, not a passive one — promote
   to the primary palette so it reads like an actual CTA. */
button[data-cart-item-update] {
  background-color: var(--color-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}
button[data-cart-item-update]:hover,
button[data-cart-item-update]:focus {
  background-color: var(--color-primary-lighter, var(--color-primary)) !important;
  border-color: var(--color-primary-lighter, var(--color-primary)) !important;
}

/* Cart-page "Finalizează comanda" inherited 13px font / 8px padding
   from the global .btn cascade, ending up at 37px tall — too small
   for a primary CTA on the cart sidebar. Bump font + line-height to
   the cart-drawer dimensions (16/24) and use 8px vertical padding
   so the button lands at ~40px tall, not the previous 50px. */
.btn-checkout {
  font-size: 16px !important;
  line-height: 24px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* /customer/address/edit/ — reorder the 2-col grid so City sits to the
   LEFT of ZIP and Region (Județ) to the LEFT of Country (Țară). The
   upstream template renders them in DOM order ZIP, City, Country, Region
   which yields: ZIP|City / Country|Region. We just shuffle visual order
   via grid `order` on each .field-reserved column.
   On mobile the grid collapses to one column — switch the order so the
   stack reads Județ, Oraș, Cod poștal, Țară top-to-bottom (most-specific
   first, country last). */
.form-address-edit .field-reserved.taxvat   { order: 0; }
.form-address-edit .field-reserved.city     { order: 1; }
.form-address-edit .field-reserved.zip      { order: 2; }
.form-address-edit .field-reserved.region   { order: 3; }
.form-address-edit .field-reserved.country  { order: 4; }
@media (max-width: 767px) {
  .form-address-edit .field-reserved.region   { order: 1; }
  .form-address-edit .field-reserved.city     { order: 2; }
  .form-address-edit .field-reserved.zip      { order: 3; }
  .form-address-edit .field-reserved.country  { order: 4; }
}

/* Cart full-page loader (Hyva_Theme/ui/loading.phtml) renders a 54px
   spinner + an `ml-10` "Se încarcă..." text in a single flex row,
   centered as a group. The trailing text shifts the spinner left of
   viewport-center, looking off-balance on mobile. Hide the text and
   shrink the spinner to ~32px so the dead-centred icon doesn't
   dominate the screen. */
section.cart-form > .z-50.fixed.inset-0 .ml-10 {
  display: none !important;
}
section.cart-form > .z-50.fixed.inset-0 svg {
  width: 32px !important;
  height: 32px !important;
}

/*
 * Slider workarounds (snap-track grid, h-[Npx] heights, marqueeScroll
 * animation) used to live here because Aria didn't have a Tailwind
 * build pipeline — the arbitrary utility classes on Hyvä UI slider
 * templates weren't picked up by the parent theme's pre-generated
 * Tailwind CSS. Since `web/tailwind/` is set up now and runs via
 * `./scripts/tailwind-build.sh`, those classes generate correctly
 * and the manual fallbacks were removed.
 */

/*
 * Empty category state — when a category has no products, Magento's
 * catalog_category_view layout still renders the 2-column grid (filter
 * sidebar + main), so the "no products" message ends up offset right
 * with empty space on the left. Collapse to single column + center
 * the message when .column.main holds nothing but the empty message.
 */
.columns:has(> .column.main > .message.info.empty:only-child) {
  display: block !important;
}
.columns:has(> .column.main > .message.info.empty:only-child) > .sidebar {
  display: none !important;
}
/*
 * Empty-state styling for "no products" / "no search results" messages.
 * Default Magento renders a thin blue 1px-bordered notice box that looks
 * like a system error. Re-skin as a friendly empty-state card with a
 * subtle SVG icon, larger typography, and no border — matches the rest
 * of the Hyvä UI vocabulary (cards on neutral surface, no harsh chrome).
 */
.message.info.empty,
.column.main > .message.notice:not(.wk-profile-alert),
.column.main > .message.info:not(.wk-profile-alert) {
  max-width: 640px !important;
  margin: 1rem auto 4rem auto !important;
  text-align: center !important;
  padding: 1rem 1.5rem 2rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-fg-secondary, #6b7280) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}
.message.info.empty::before,
.column.main > .message.notice:not(.wk-profile-alert)::before,
.column.main > .message.info:not(.wk-profile-alert)::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 1.5rem !important;
  background-color: var(--color-fg-secondary, #6b7280) !important;
  opacity: 0.35 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/><path d='m8 11 6 0'/></svg>") no-repeat center / contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/><path d='m8 11 6 0'/></svg>") no-repeat center / contain !important;
}

/* Webkul `.wk-profile-alert` ("Atenție! Completează Profilul tău X")
   inherits the global .message:not(.empty) toast style — but it's
   semantically a tight inline notice ("Atenție! Completează Profilul
   tău"), not a multi-line system message. The generic .message rules
   give it three things that hurt readability here:
     1. `justify-content: space-between` (from .message base) +
        `flex: 1 1 auto` on every <span> child — so the four words
        spread across the full row width with hundreds of px of empty
        space between "Completează" and "Profilul tău".
     2. A 80x80-equivalent ::before info icon styled for hero alerts —
        oversized for a one-line inline note.
     3. A heavy padding + shadow that turn an inline hint into a slab.
   Tighten everything: pack children left, no per-child flex grow,
   skip the icon, smaller padding. */
.wk-profile-alert.message:not(.empty) {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  column-gap: 4px !important;
  row-gap: 0 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}
.wk-profile-alert.message:not(.empty) > * {
  flex: 0 0 auto !important;
}
.wk-profile-alert.message:not(.empty)::before {
  display: none !important;
}
.wk-profile-alert.message:not(.empty) > a { text-decoration: underline; }
.wk-profile-alert.message:not(.empty) > .wk-close {
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.6;
  align-self: center;
  font-size: 13px;
}
.wk-profile-alert.message:not(.empty) > .wk-close:hover { opacity: 1; }

/* Active-filter chips — render outside the mobile collapse so users see
   active filters at a glance. Tighten the default Hyvä state.phtml card
   so it looks like inline chips, not another collapsible block. */
.aria-active-filters .filter-current:empty {
  display: none;
}
.aria-active-filters .filter-current {
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 12px;
}
.aria-active-filters .filter-current > h3 {
  display: none; /* hide the redundant "Filtre active" toggle header */
}
.aria-active-filters .filter-current .items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
}
.aria-active-filters .filter-current .item {
  background: var(--color-primary, #2563eb);
  color: #fff;
  padding: 4px 8px 4px 12px;
  border-radius: 9999px;
  font-size: 13px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  justify-content: flex-start !important;
}
.aria-active-filters .filter-current .item .filter-label {
  display: none !important; /* "Preț" label is redundant given the value */
}
.aria-active-filters .filter-current .item .filter-value {
  font-size: 13px !important;
  font-weight: 500;
}
.aria-active-filters .filter-current .item .action.remove {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 2px !important;
  color: #fff !important;
}
.aria-active-filters .filter-current .item .action.remove svg {
  width: 14px;
  height: 14px;
}
.aria-active-filters .filter-current .item .action.remove:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* "Clear All" link below the chips */
.aria-active-filters .block.filter-actions {
  margin: 8px 0 0;
}
.aria-active-filters .block.filter-actions a {
  font-size: 13px;
  color: var(--color-fg-secondary, #6b7280);
  text-decoration: underline;
}

/*
 * Suppress the native <dialog>::backdrop — we render our own fade-able
 * backdrop in cart-backdrop.phtml because the native one can't fade-out
 * (Hyvä's x-htmldialog yanks the dialog from the top layer the instant
 * it calls dialog.close()) and flickers during item-delete section
 * reloads (briefly retoggles [open]).
 */
#cart-drawer::backdrop {
  background: transparent !important;
}

/*
 * Hyvä's `cart-drawer-loading` block injects a fixed inset-0 bg-white/70
 * loading overlay that covers the WHOLE viewport (it's positioned fixed
 * even though it lives inside the dialog). When you delete an item or
 * change qty, the entire drawer turns white for ~200ms — looks like the
 * drawer briefly disappears. Reposition it absolute within the drawer
 * and drop the white tint, so the spinner alone hovers over the items
 * list while the AJAX call resolves.
 */
#cart-drawer > .z-50.fixed.inset-0 {
  position: absolute !important;
  background-color: transparent !important;
  pointer-events: none;
}
#cart-drawer > .z-50.fixed.inset-0 > .flex {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
  padding: 12px 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/*
 * Webkul Marketplace ships orange "MAGENTO MULTI VENDOR MARKETPLACE"
 * banner + a default seller avatar (banner-image.png, noimage.png) that
 * dominate the seller profile pages. The actual files in pub/media are
 * already replaced with neutral grays on aria.ro, but pub/media is
 * gitignored so a fresh deploy gets the orange ones back. Hide via CSS
 * so the page looks clean even on first deploy. Sellers upload their
 * own banner / logo and these rules stop matching once the URL changes.
 */
img[src$="/avatar/default/banner-image.png"] {
  visibility: hidden !important;
  height: 0 !important;
}
img[src$="/avatar/default/noimage.png"] {
  border-radius: 9999px;
  background: #f1f5f9;
}

/*
 * Webkul Marketplace pages wrap large content blocks inside heading
 * elements like `.wk-mp-page-title.legend` (font-size 28.8px) and
 * `.wk-mp-design`, so any descendant — actions toolbar, form fields,
 * buttons, table cells, even plain text labels like the "Resetează"
 * inside a button — inherits that huge font-size. Reset everywhere.
 *
 * Scoped to `[class*="wk-mp-"]` so it doesn't leak to the rest of the
 * site, but broad enough to hit every form-y/control-y descendant.
 */
[class*="wk-mp-"] .actions-toolbar,
[class*="wk-mp-"] .actions-toolbar *,
[class*="wk-mp-"] .field,
[class*="wk-mp-"] .field *,
[class*="wk-mp-"] form button,
[class*="wk-mp-"] form input,
[class*="wk-mp-"] form select,
[class*="wk-mp-"] form textarea,
[class*="wk-mp-"] form label,
[class*="wk-mp-"] table th,
[class*="wk-mp-"] table td,
[class*="wk-mp-"] .pager,
[class*="wk-mp-"] .pager * {
  font-size: 15px;
  line-height: 1.4;
}
[class*="wk-mp-"] .actions-toolbar .btn,
[class*="wk-mp-"] form button.btn {
  padding: 8px 16px !important;
}
/* Section headers inside Webkul wrappers — keep them legibly sized
   but not 28.8px. */
[class*="wk-mp-"] h1,
[class*="wk-mp-"] h2 {
  font-size: 24px;
  line-height: 1.3;
}
[class*="wk-mp-"] h3 {
  font-size: 18px;
  line-height: 1.3;
}

/*
 * Native <input type="file"> renders an unstyled "Choose File" button
 * + "No file chosen" text. The text labels are user-agent controlled
 * (browser locale picks RO/EN automatically), but the button visual
 * styling is ours via ::file-selector-button. Match Hyvä button look.
 */
[class*="wk-mp-"] input[type="file"]::file-selector-button {
  background-color: var(--color-primary, #2563eb);
  color: #fff;
  border: 1px solid var(--color-primary, #2563eb);
  border-radius: 6px;
  padding: 6px 14px;
  margin-right: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
[class*="wk-mp-"] input[type="file"]::file-selector-button:hover {
  background-color: var(--color-primary-lighter, #1e40af);
  border-color: var(--color-primary-lighter, #1e40af);
}

/* Shop title — Webkul forces text-transform:capitalize, which mangles
   domain-style names like "tipfs.aria.ro" → "Tipfs.Aria.Ro". Cover
   both layout1 (collection) and layout2 (profile) class names. */
.wk-mp-collection-seller-title,
.wk-mp-collection-seller-title a,
.wk-mp-layout2-seller-title,
a.wk-mp-layout2-seller-title {
  text-transform: none !important;
}

/*
 * Public seller profile page (marketplace/seller/profile/...) is one
 * of the routes Webkul's Hyvä-compat module doesn't cover, so the
 * layout falls back to bare HTML — no container, no max-width, the
 * Report Seller modal renders inline because its show/hide JS
 * relies on RequireJS which isn't loaded under Hyvä. Cosmetic
 * patches to make it presentable until we rewrite the page proper.
 */
body.marketplace-seller-profile main.page-main > .columns,
body.marketplace-seller-profile main.page-main > .columns > .column.main {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
/* Modal content (Report Seller form, success/error notice) — hide
   until JS toggles a class. Without RequireJS the modal popup never
   opens, so the form just sits in the page flow under the seller
   header. Cover both layout1 and layout2 wrappers. */
body.marketplace-seller-profile .wk-mp-modals-wrapper,
body.marketplace-seller-profile .modal-popup,
body.marketplace-seller-profile #wk-mp-flag-message,
body.marketplace-seller-profile #wk-mp-flag-thank-message,
body.marketplace-seller-profile .wk-alert-modal-content,
body.marketplace-seller-profile .wk-flag-status-content,
body.marketplace-seller-profile .seller-report-form {
  display: none !important;
}

/* Empty-products message on seller-shop pages: was sitting halfway down
   the column. Hug the top of the content area. */
.column.main > .message.info.empty {
  margin-top: 0.5rem;
}

/* Footer bottom row: "aria.ro" (text-xl 20px) and "Confidențialitate"
   (text-sm 14px) sat in a flex with items-center, so their mid-lines
   matched but their baselines didn't — the smaller text looked offset
   higher. Force baseline alignment so the visible text bottoms line up. */
footer .container.py-6.flex {
  align-items: baseline !important;
}
@media (max-width: 639px) {
  /* On mobile the row stacks vertically — baseline alignment is irrelevant
     and would make spacing look weird. Restore stretched alignment. */
  footer .container.py-6.flex {
    align-items: stretch !important;
  }
}

/*
 * Programmatic focus targets — wrappers Magento marks tabindex="-1" so
 * skip-links and dialog focus return have somewhere to land. Safari
 * applies a default :focus-visible outline to them when the cart drawer
 * closes, leaving a big blue rectangle around the content area. Drop
 * the outline on these wrappers; the skip-link itself keeps its own
 * focus style, so keyboard-skip flow stays accessible.
 */
#contentarea:focus,
#contentarea:focus-visible,
#maincontent:focus,
#maincontent:focus-visible,
main.page-main:focus,
main.page-main:focus-visible,
.page-wrapper:focus,
.page-wrapper:focus-visible,
.columns:focus,
.columns:focus-visible,
.column.main:focus,
.column.main:focus-visible {
  outline: none !important;
}

/* Tailwind v4's ring utilities don't compose into box-shadow on slider
   marker dots (--tw-ring-shadow is set but the rendered box-shadow
   stays zero). Apply the ring as a direct shadow on the active dot.
   Selector matches Hyvä's pager markers (button with aria-current +
   data-target-id pointing to a slide). */
button[data-target-id][aria-current="true"] {
  box-shadow: 0 0 0 4px #fff;
}

/* Global flash-message bar (#messages from Magento_Theme/templates/messages.phtml).
   Default Magento .message.error renders as a 1px-bordered red box with bold
   black text on pink — feels rudimentary on mobile. Restyle to a modern
   alert pattern: soft tint background, 4px left accent bar, leading icon,
   generous padding, subtle shadow, no hard outer border. Each type gets
   its own --msg-* tokens so the base rule stays one block. */
/* Apply alert pattern to all .message types EXCEPT the page-level
   empty-state hero card (which is .message.info.empty inside .column.main).
   That one keeps its hero styling defined earlier. */
.message:not(.empty) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  margin: 0 0 8px !important;
  border: none !important;
  border-left: 4px solid var(--msg-accent) !important;
  border-radius: 8px !important;
  background: var(--msg-bg) !important;
  color: var(--msg-fg) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  text-align: left !important;
  flex-direction: row !important;
  max-width: none !important;
}
.message:not(.empty)::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: var(--msg-accent);
  -webkit-mask: var(--msg-icon) center / 20px 20px no-repeat;
          mask: var(--msg-icon) center / 20px 20px no-repeat;
  margin: 1px 0 0 0;
}
.message:not(.empty) > span {
  flex: 1 1 auto;
}
.message:not(.empty) > button {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--msg-fg) !important;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.message:not(.empty) > button:hover {
  opacity: 1;
}
/* Per-type tokens. Hue picks: red for error, amber for notice/warning,
   emerald for success, sky for info. All at lightness ~92% bg / ~40% fg. */
.message.error {
  --msg-accent: #dc2626;
  --msg-bg: #fef2f2;
  --msg-fg: #7f1d1d;
  --msg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>');
}
.message.success {
  --msg-accent: #16a34a;
  --msg-bg: #f0fdf4;
  --msg-fg: #14532d;
  --msg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>');
}
.message.notice,
.message.warning {
  --msg-accent: #d97706;
  --msg-bg: #fffbeb;
  --msg-fg: #78350f;
  --msg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.515 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>');
}
.message.info {
  --msg-accent: #0284c7;
  --msg-bg: #f0f9ff;
  --msg-fg: #0c4a6e;
  --msg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>');
}

/* Webkul on vendor product pages injects a 435×136 `mp-wk-block`
   (seller card with rating, contact button) into the SAME flex container
   as the wishlist + compare buttons. Default flex `align-items: normal`
   stretches every item to match the tallest sibling, so wishlist/compare
   become 40×136 pale columns. Force them to keep their natural square
   shape regardless of what siblings Webkul adds. */
#add-to-wishlist,
#add-to-compare {
  align-self: flex-start;
  height: auto;
}

/* Webkul "recently added products" grid on the seller-profile page wraps
   each product in a Magento Luma <li class="product-item"> with no width
   constraint. On mobile the placeholder image (480×480 fixed in
   pub/media) overflows the viewport and pushes the layout. Cap the
   grid items + ensure images stay inside their container. */
.aria-seller-tabs .product-items {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .aria-seller-tabs .product-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .aria-seller-tabs .product-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.aria-seller-tabs .product-item {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.aria-seller-tabs .product-item img {
  max-width: 100%;
  height: auto;
  display: block;
}
.aria-seller-tabs .product-item-info {
  display: block;
  width: 100%;
}
.aria-seller-tabs .product-item-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f8fafc;
}
.aria-seller-tabs .product-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aria-seller-tabs .product-item-details {
  padding: 0.75rem 0.25rem;
}
/* Webkul collection.css applies display:inline-block + margin:0 9% to
   .wk-mp-collection-container, which on the profile page squeezes the
   product grid into a 198px column on mobile (no children to fill it).
   Reset to a normal block so our grid uses the full panel width.
   Same for the empty .wk-mp-collection-left sidebar slot. */
.aria-seller-tabs .wk-mp-collection-container {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}
.aria-seller-tabs .wk-mp-collection-left:empty {
  display: none !important;
}
.aria-seller-tabs .wk-mp-collection-right {
  width: 100% !important;
  float: none !important;
}
/* Magento's image-helper writes inline <style>.product-image-container-N {
   width: 360px; height: 360px;}</style> per product. On the seller profile
   tab grid that's wider than a 2-col cell, so the image overflows the
   card. Force it to fill its cell. */
.aria-seller-tabs [class^="product-image-container"],
.aria-seller-tabs [class*=" product-image-container"] {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.aria-seller-tabs .product-image-wrapper {
  padding-bottom: 100% !important;
  height: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f8fafc;
}
.aria-seller-tabs .product-image-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}
/* The seller profile lives inside .columns / .column.main which add side
   padding. Counter that on the tab wrapper so it spans the full viewport
   width on mobile. */
.marketplace-seller-profile .columns,
.marketplace-seller-profile .column.main,
.marketplace-seller-collection .columns,
.marketplace-seller-collection .column.main,
.marketplace-seller-feedback .columns,
.marketplace-seller-feedback .column.main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Seller-collection product cards: cap inline image-container width
   that Magento writes per product (width:360px) so cards stay inside
   their grid cell on every viewport. */
.aria-seller-collection [class^="product-image-container"],
.aria-seller-collection [class*=" product-image-container"] {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.aria-seller-collection .product-image-wrapper {
  padding-bottom: 100% !important;
  height: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f8fafc;
}
.aria-seller-collection .product-image-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}
/* Webkul collection-container inline-block undo (same as for tabs panel) */
.aria-seller-collection .wk-mp-collection-container {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}
.aria-seller-collection .wk-mp-collection-left:empty {
  display: none !important;
}

/* Main nav menu: Hyvä template uses .flex-wrap on the UL which lets
   "Reduceri" wrap to a second line on viewports between lg (1024px)
   and ~1400px. Force single line at our nav breakpoint and tighten
   the gap so all 6 top-level items fit.
   ALSO drop the upstream py-4 padding to py-1 (8px) so the desktop
   menu fits inside our 77px sticky-header envelope; otherwise the
   menu's 32px vertical padding pushes #header to ~99px tall and the
   bar overlaps the breadcrumb that sits at y=77px. */
@media (min-width: 768px) {
  header nav > ul.flex.flex-wrap {
    flex-wrap: nowrap !important;
    column-gap: 1rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  header nav > ul.flex.flex-wrap > li {
    white-space: nowrap;
  }
}

/* Webkul ships a global `a:hover { color: rgb(234, 121, 0); }` rule
   in wk_block.css (orange-red) that bleeds through to every link on
   the storefront, including the main nav menu items. Inherit color
   from the surrounding text instead of forcing the Webkul orange. */
a:hover { color: inherit; }
header nav a:hover,
header nav a:focus { color: var(--color-primary, currentColor); }

/* Headroom-style header (test): #header is always position:fixed at the
   viewport top. Default visible (transform:none). When Alpine detects a
   scroll-down past threshold, it adds `aria-header-hidden` which slides
   the bar up out of view; scroll-up removes the class to slide it back.
   .page-header reserves min-height equal to the bar so layout doesn't
   jump when #header is taken out of flow. */
.page-header { min-height: 77px; }
#header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  transition: transform 0.25s ease;
  will-change: transform;
}
#header.aria-header-hidden {
  transform: translateY(-100%);
}

/* Mobile + tablet header (burger mode, sub-lg):
   [☰] [🔍] ........ [aria] ........ [👤] [🛒] */
@media (max-width: 1023px) {
  #header > .container.flex {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
  }
  /* Push every non-positioned grandchild (script tags, hidden desktop
     nav) out of the layout so they can't claim grid cells and bump the
     logo onto a second row. */
  #header > .container.flex > script,
  #header > .container.flex > .navigation.hidden {
    display: none !important;
  }
  /* Burger menu wrapper: column 1, row 1 */
  #header > .container.flex > [x-data*="initMobileMenu"],
  #header > .container.flex > .lg\:hidden {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  /* Search toggle: column 2, row 1 */
  #header > .container.flex > .aria-search-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  /* Logo: column 3, row 1, centered visually */
  #header > .container.flex > div:first-child {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: auto !important;
    padding-bottom: 0 !important;
  }
  /* Icons cluster (account, cart, etc.): column 4, row 1 */
  #header > .container.flex > .flex.items-center {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 0.25rem !important;
  }
}

/* Desktop header (lg+): logo on the left, nav centered, search glued
   to the icons cluster on the right with the cluster's own md:gap-1
   (4px) so search ↔ customer ↔ cart sit at equal spacing. The nav
   uses auto margins on both sides — that consumes the spare space
   between logo and the search/icons group symmetrically, so the
   topmenu lands in the centre of the row instead of packed next to
   the logo. */
@media (min-width: 1024px) {
  #header > .container.flex {
    flex-wrap: nowrap !important;
  }
  #header > .container.flex > div.sm\:order-1,
  #header > .container.flex > .aria-search-toggle,
  #header > .container.flex > .flex.items-center {
    order: 0 !important;
  }
  /* Tailwind preflight allows <img> to shrink — without this the logo
     can collapse to 0 when the row is tight. */
  #header > .container.flex > div.sm\:order-1 {
    flex-shrink: 0;
  }
  /* Centre the topmenu in the row by absorbing the spare space on
     both sides via auto margins. */
  #header > .container.flex > .navigation {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #header > .container.flex > .aria-search-toggle {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
  }
}

/* Hyvä's #compare-link uses `class="invisible"` (visibility:hidden)
   when the compare list is empty, which keeps the 36px slot but
   leaves it blank — visually pushing the search icon away from the
   account icon. Collapse to display:none in the empty state so the
   row tightens up; Alpine flips the class back when the count goes
   above 0 and the button reappears in flow. */
#header #compare-link.invisible {
  display: none !important;
}

/* Category listing — configurable products render their price as
   `<p class="minimal-price"><span class="price-label">Începând de la</span>
   <span class="price">14,00 RON</span></p>`. Inside a 3-col grid card the
   prefix forces a 2-line price box, which makes the row stretch ~24px
   taller than a row of pure simple products. mt-auto then pushes the
   "Configurați" button to the bottom of the taller row, so visually the
   button reads as "lower" than its 1-line-priced "Adaugă în coș" neighbours.
   Drop the prefix on listings — the button text ("Configurați" vs "Adaugă
   în coș") already distinguishes configurable from simple. PDP keeps the
   prefix because there it's helpful context next to swatches. */
.product-item .minimal-price .price-label {
  display: none !important;
}

/* Listing card action row alignment. The Hyvä template's outer action
   container is `flex flex-wrap items-center` and holds the primary CTA
   ("Adaugă în coș" / "Configurați") plus a secondary cluster
   (wishlist + compare icons). With flex-wrap, whether the cluster wraps
   to its own line depends on whether primary+cluster fit the card width:
   - Long primary like "Adaugă în coș" → cluster wraps (action row ~110px tall)
   - Short primary like "Configurați" → cluster fits beside it (action row ~54px)
   Both cards are stretched to identical heights by flexbox, so mt-auto
   pushes each action row to the card bottom — but because the action
   rows differ by ~56px in height, the primary BUTTON within them ends up
   at different Y positions: configurable button reads as "lower" than
   its neighbours. Force the secondary cluster onto its own line so both
   cards always render the same 2-row action area. */
.product-item div.mt-auto.flex.flex-wrap.items-center > div.flex.flex-wrap {
  flex-basis: 100%;
}

/* On 2-column marketplace/account pages, Hyvä renders `.page.messages` at
   the top of `.page-main`, spanning the FULL content container width — so
   error/success bars visually sit above BOTH the sidebar nav and the main
   column. User reads it as "the error appears above the left menu" which
   is disorienting because the action they took (Save in form) is in the
   right column. Push the slab content right on lg+ so it aligns with the
   main column. Sidebar width is ~25% of the columns container, so use
   percentage padding which adapts across viewports. */
/* When `.page.messages` is moved into `.column.main` (see JS in product
   add/create templates), strip the container max-width + padding so the
   visible `.message` box aligns flush-top with the sidebar (.sidebar)
   on its left, not 12px below. Default `.messages.container` has
   `mx-auto py-3` which adds 12px top padding — kill it for relocated
   messages. */
.column.main > .page.messages .messages.container {
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}
/* Sits at top of `.column.main`, aligned with the sidebar's first card.
   Aria base styles.css ships `.page.messages { position:sticky; top:0 }`
   for global toast behavior — undo that for the relocated copy inside
   .column.main so the message scrolls naturally with the form content
   instead of glueing to the top of the viewport. */
.column.main > .page.messages {
  position: static !important;
  margin-block: 1px 1.5rem;
}
.column.main > .page.messages .message {
  margin-bottom: 0 !important;
}

/* Vendor product form — category tree:
   1. Chip list (.wk-selected-cats) above the tree shows what's checked
      so the seller doesn't have to expand each branch to verify selection.
   2. Tree node highlight via `:has(input:checked)` — light-green band
      with a left accent on every checked container, easy to spot when
      scrolling a long tree. */
.wk-selected-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: 12px;
  padding: 8px 12px;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: 6px;
  min-height: 38px;
  align-items: center;
}
.wk-selected-cats .wk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary, #0f766e);
  color: #fff;
  padding: 3px 4px 3px 12px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1.2;
}
.wk-selected-cats .wk-chip-remove {
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  border-radius: 9999px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.wk-selected-cats .wk-chip-remove:hover {
  background: rgba(255, 255, 255, 0.32);
}
.wk-selected-cats .wk-empty {
  color: var(--color-fg-secondary, #6b7280);
  font-size: 13px;
}
/* Reserve the highlight space on every container so checked rows
   don't shift horizontally when the border appears. Only color
   changes between checked/unchecked. */
.wk-category .wk-cat-container {
  border-left: 3px solid transparent;
  padding-inline-start: 6px;
  margin-inline-start: -9px;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.12s ease, border-left-color 0.12s ease;
}
.wk-category .wk-cat-container:has(> input[type="checkbox"]:checked) {
  background: rgb(236 253 245);
  border-left-color: var(--color-primary, #0f766e);
}

/* Webkul's `.wk-plus` toggle keeps its 15×18 footprint, but when the
   user clicks, JS swaps the class to `.wk-plus_click` (state marker)
   which has NO CSS — span collapses → row content shifts left.
   Then a `<span class="wk-node-loader">` is appended absolute-positioned
   at `left: 15px` which is OUTSIDE the original plus footprint, so the
   loader appears to the right of where the + was — feels disjointed.
   Restore the dimensions on the click state + park the loader inside
   the original plus footprint so the icon swaps in place. Same fix
   for the leaf-node variant (.wk-plusend_click). */
.wk-plus_click,
.wk-plusend_click {
  display: block !important;
  height: 18px !important;
  width: 15px !important;
  float: left !important;
  position: relative !important;
  background: transparent !important;
}
.wk-plus_click .wk-node-loader,
.wk-plusend_click .wk-node-loader {
  left: 0 !important;
}

/* Vendor product form: make required-field labels visually scannable.
   Webkul renders `<div class="field required">` for every required field
   but doesn't append the conventional `*` indicator next to the label.
   Add a red asterisk via ::after so the seller can spot at-a-glance which
   fields are mandatory. Scope to the marketplace product form only. */
#edit-product .field.required > label::after,
#edit-product .field.field-reserved.required > label::after,
#form-customer-product-new .field.required > label::after {
  content: " *";
  color: #dc2626;
  font-weight: 600;
}
#edit-product .field.required > label,
#edit-product .field.field-reserved.required > label,
#form-customer-product-new .field.required > label {
  /* Tighten the gap between label text and asterisk */
  white-space: normal;
}

/* Reviews tab content — strip the py-6 wrapper padding from review_list
   and drop the form's top-border separator so it lines up with Descriere
   and Detalii panels (no extra top margin). */
.aria-product-tab-panel #customer-review-list { padding-top: 0 !important; padding-bottom: 0 !important; }
.aria-product-tab-panel .aria-review-form {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
}
.aria-product-tab-panel #customer-review-list + .aria-review-form {
  border-top: 1px solid #e5e7eb !important;
}
.aria-product-tab-panel:not(:has(#customer-review-list)) .aria-review-form,
.aria-product-tab-panel .aria-review-form:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Marketplace dashboard "Contactează administratorul" modal — vendor
   dashboard.phtml stamps `border border-10 border-blue-800` on the dialog,
   producing a heavy electric-blue frame around a too-narrow box. Strip the
   frame and widen the dialog. Scope by the aria-ask-admin content wrapper
   so we don't touch other modals. */
[role="dialog"]:has(> .aria-ask-admin) {
  border-color: #e5e7eb !important;
  border-width: 1px !important;
  max-width: 36rem !important;
  width: calc(100vw - 2rem) !important;
  padding: 1.5rem !important;
}

/* Form layout stability — required-field wrappers.

   Hyvä's default `.field-reserved` uses a negative-margin trick on the
   last `<ul.messages>` to "absorb" the wrapper's bottom margin: with an
   error visible, the next field sits flush; with no error, a 28px gap
   appears. That looks fine static, but it means every time the seller
   triggers/clears a validation error (typing into a flagged field, or
   toggling "Are greutate? Nu" which silences a stale error), the whole
   form below twitches by 20-28px.

   Switch to absolute positioning: reserve a fixed slot of vertical
   space below the input (padding-block-end), then pin the error UL —
   and Webkul's hand-rolled `.mage-error` div — into that slot. Wrapper
   height stays identical with or without an error, so the form below
   doesn't move. */
#edit-product .field.field-reserved {
  position: relative;
  margin-block-end: 0.5rem;
  padding-block-end: 1.5rem;
}
#edit-product .field.field-reserved ul.messages:last-of-type,
#edit-product .field.field-reserved .mage-error {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  margin: 0 !important;
  font-size: 0.75rem;
  line-height: 1.15;
}