/*!-----------------------------------------------------------------------------------
  utilities-patch.css

  WHY THIS FILE EXISTS
  --------------------
  assets/css/style.css is a PRE-COMPILED Tailwind v4 bundle shipped with the Sellzy
  theme. This project has no Tailwind toolchain (no package.json / tailwind.config /
  postcss.config), so the compiled bundle can never be regenerated here. Any Tailwind
  utility written in markup that was not already present when the theme was built
  simply does nothing — no error, no warning, it silently has no effect.

  This file back-fills the utilities the templates actually use but the bundle is
  missing. Rules live in `@layer utilities` (the same layer style.css declares) and
  this file is linked AFTER style.css, so they resolve with exactly the same cascade
  priority and precedence as genuine Tailwind utilities.

  CONVENTIONS — follow these when adding to this file
  ---------------------------------------------------
  * Escape selectors the way Tailwind does:
      md:col-span-5     ->  .md\:col-span-5
      min-w-[42px]      ->  .min-w-\[42px\]
      2xl:flex-nowrap   ->  .\32 xl\:flex-nowrap   (leading digit needs \32 + space)
  * Breakpoints, matching style.css:
      sm 40rem · md 48rem · lg 64rem · xl 80rem · 2xl 96rem
  * Shadows must reuse the --tw-* plumbing that style.css registers via @property,
    so they compose correctly with ring/inset utilities.
  * Prefer an existing compiled utility over adding a new one. Before adding here,
    grep style.css to confirm the class really is absent.

  HOW TO FIND MISSING UTILITIES
  -----------------------------
  Collect every class name that has a rule in the loaded stylesheets, collect every
  class used in the rendered HTML, and diff the two. Anything that looks like a
  Tailwind utility and appears only in the markup belongs here.
-------------------------------------------------------------------------------------*/

@layer utilities {
  /* ---- aspect-ratio -------------------------------------------------------- */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  /* ---- min-width (arbitrary values) --------------------------------------- */
  .min-w-\[30px\] {
    min-width: 30px;
  }

  .min-w-\[42px\] {
    min-width: 42px;
  }

  /* ---- elevation ----------------------------------------------------------
     The theme ships .shadow / .shadow-light-z-8|12|24 / .shadow-dark-z-24 but no
     shadow-sm / shadow-md, which the templates use. Values below are the stock
     Tailwind v4 definitions; shadow-sm is identical to the theme's own .shadow.  */
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
  }

  .shadow-md {
    --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);
  }

  .hover\:shadow-md: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);
  }

  /* ---- interaction states ------------------------------------------------- */
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  /* ---- flex / spacing ----------------------------------------------------- */
  .items-stretch {
    align-items: stretch;
  }

  /* Pushes an element to the end of its flex column — used to bottom-align the
     Add to Cart row in product cards so buttons line up across a row. */
  .mt-auto {
    margin-top: auto;
  }

  /* ---- min-width ----------------------------------------------------------
     Flex items refuse to shrink below their min-content width while min-width is
     auto. .btn sets white-space: nowrap, so a button's min-content is its full
     label — which made flex-1 buttons overflow narrow cards. min-w-0 lifts that
     floor so flex-1 can actually do its job.                                   */
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  /* ---- min-height --------------------------------------------------------- */
  /* 3rem = two lines of text-base/leading-6, so a one-line product title still
     reserves the height of two. */
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  /* ---- inset -------------------------------------------------------------- */
  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  /* ---- margin -------------------------------------------------------------
     Reserves room for .product-discount-badge's ::after tail, which is absolutely
     positioned at left-full and so sits outside the badge's own box.            */
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  /* ---- flex order ---------------------------------------------------------
     Used to promote Add to Cart above Buy Now when the CTA row wraps on narrow
     screens, while md:order-none restores the designed desktop order.          */
  .order-3 {
    order: 3;
  }

  .order-none {
    order: 0;
  }

  /* ---- responsive flex: sm (40rem) ---------------------------------------- */
  @media (min-width: 40rem) {
    .sm\:order-none {
      order: 0;
    }

    .sm\:flex-1 {
      flex: 1;
    }

    .sm\:w-auto {
      width: auto;
    }
  }

  /* ---- responsive flex: md (48rem) ---------------------------------------- */
  @media (min-width: 48rem) {
    .md\:order-none {
      order: 0;
    }

    .md\:flex-1 {
      flex: 1;
    }
  }

  /* ---- grid column spans: md (48rem) -------------------------------------- */
  @media (min-width: 48rem) {
    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }

  /* ---- flex-wrap: 2xl (96rem) --------------------------------------------- */
  @media (min-width: 96rem) {
    .\32 xl\:flex-nowrap {
      flex-wrap: nowrap;
    }
  }
}

/*!-----------------------------------------------------------------------------------
  COMPONENTS

  Beyond the back-filled utilities above, this file also hosts small components that
  would otherwise need a pile of arbitrary Tailwind classes the pre-compiled bundle
  never emitted. These live in `@layer components` (declared by style.css) so genuine
  utilities in markup still win over them, exactly as with Tailwind's own components.

  Colour note: the shipped theme styles `.blog-pagination li a.active` with
  rgba(0, 171, 85, .08) — a GREEN tint left over from the vendor demo, which clashes
  with this project's orange --color-primary (#f15a3b). The pagination below uses its
  own class names so it does not inherit that rule.
------------------------------------------------------------------------------------*/
@layer components {
  .rvx-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  /* Shared control: numbers, prev/next and the ellipsis all share one box model so
     the row keeps a single consistent rhythm. */
  .rvx-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--color-gray-200);
    border-radius: 9999px;
    background-color: #fff;
    color: var(--color-light-secondary-text);
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
      border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
      transform 0.15s ease-in-out;
  }

  a.rvx-page:hover {
    border-color: var(--color-primary);
    background-color: rgba(241, 90, 59, 0.08);
    color: var(--color-primary);
  }

  a.rvx-page:active {
    transform: translateY(1px);
  }

  .rvx-page:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Numbers stay perfectly circular regardless of digit count up to 2 digits. */
  .rvx-page--num {
    width: 2.5rem;
    padding-inline: 0;
  }

  .rvx-page--current {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
    box-shadow: 0 4px 10px -2px rgba(241, 90, 59, 0.45);
  }

  .rvx-page--nav {
    padding-inline: 1rem;
  }

  .rvx-page--nav i {
    font-size: 1rem;
    line-height: 1;
  }

  /* Rendered inert rather than hidden at the first/last page, so the control row
     keeps the same width and nothing shifts as you page through. */
  .rvx-page--disabled {
    border-color: var(--color-gray-200);
    background-color: var(--color-gray-100);
    color: var(--color-light-disabled-text);
    cursor: not-allowed;
  }

  .rvx-page--gap {
    min-width: 1.5rem;
    border-color: transparent;
    background: none;
    color: var(--color-light-disabled-text);
    letter-spacing: 0.1em;
    cursor: default;
  }

  /* Below 480px drop the Prev/Next wording and keep just the arrows, so a long
     page list still fits on one line at 2.5rem tap targets. */
  @media (max-width: 29.9375rem) {
    .rvx-page--nav {
      width: 2.5rem;
      padding-inline: 0;
    }

    .rvx-page__label {
      display: none;
    }
  }
}

/* ── Quick view panel ────────────────────────────────────────────────────────
   Markup: includes/quick-view-content.php, injected into the sidebar shell.
   Own qv- namespace so it cannot collide with product-details.php, which is what
   went wrong with the demo sidebar this replaced.                              */
@layer components {
  .quick-view-sidebar-content {
    height: calc(100% - 60px);
    padding: 1.5rem;
    overflow-y: auto;
  }

  .qv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 16rem;
    color: var(--color-light-disabled-text);
    font-size: 0.9375rem;
  }

  .qv-state i {
    font-size: 1.75rem;
  }

  .qv-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 9999px;
    animation: qv-spin 0.7s linear infinite;
  }

  @keyframes qv-spin {
    to { transform: rotate(360deg); }
  }

  .qv-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  @media (min-width: 64rem) {
    .qv-panel {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  /* Gallery */
  .qv-gallery {
    width: 100%;
    flex: none;
  }

  @media (min-width: 64rem) {
    .qv-gallery { max-width: 22rem; }
  }

  .qv-gallery__main {
    position: relative;
    border-radius: 0.75rem;
    background: #f4f5f6;
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }

  .qv-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .qv-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .qv-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .qv-thumb {
    flex: none;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background: #f4f5f6;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
  }

  .qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .qv-thumb:hover { border-color: var(--color-primary-light); }
  .qv-thumb.is-active { border-color: var(--color-primary); }

  /* Details */
  .qv-details { flex: 1 1 auto; min-width: 0; }

  .qv-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .qv-title a { color: inherit; text-decoration: none; }
  .qv-title a:hover { color: var(--color-primary); }

  .qv-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
  }

  .qv-stars {
    width: 90px;
    height: 18px;
    background: url('../images/star-icon.png') repeat-x 0 0;
    overflow: hidden;
  }

  .qv-stars__fill {
    height: 18px;
    background: url('../images/star-icon.png') repeat-x 0 -18px;
  }

  .qv-rating__text span { color: var(--color-light-disabled-text); }

  .qv-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .qv-price__now { font-size: 1.375rem; font-weight: 700; color: var(--color-light-primary-text); }
  .qv-price__was { font-size: 0.9375rem; color: var(--color-light-disabled-text); text-decoration: line-through; }
  .qv-price__off { font-size: 0.875rem; font-weight: 600; color: var(--color-error, #ff5630); }

  .qv-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #229a16;
  }

  .qv-stock--out { color: var(--color-error, #ff5630); }

  .qv-short {
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.625rem;
    color: var(--color-light-secondary-text);
  }

  .qv-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-gray-300, #dfe3e8);
  }

  .qv-qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 3rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-gray-300, #dfe3e8);
    border-radius: 9999px;
  }

  .qv-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    color: var(--color-light-secondary-text);
    transition: color 0.2s ease-in-out;
  }

  .qv-qty__btn:hover { color: var(--color-primary); }

  .qv-qty__input {
    width: 2.5rem;
    text-align: center;
    font-weight: 600;
    border: 0;
    outline: none;
    background: none;
    color: var(--color-light-primary-text);
  }

  .qv-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 10rem;
    height: 3rem;
    padding-inline: 1.5rem;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }

  .qv-add i { font-size: 1.25rem; }
  .qv-add:hover { background: #d94a2d; }
  .qv-add:disabled { opacity: 0.65; cursor: not-allowed; }

  .qv-add--disabled {
    background: var(--color-gray-200);
    color: var(--color-light-disabled-text);
    flex: 1 1 auto;
  }

  .qv-wish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border: 1px solid var(--color-gray-300, #dfe3e8);
    border-radius: 9999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }

  .qv-wish:hover { border-color: var(--color-primary); }
  .qv-wish .icon-solid { display: none; color: var(--color-error, #ff5630); }
  .qv-wish.is-active .icon-outline { display: none; }
  .qv-wish.is-active .icon-solid { display: block; }
  .qv-wish.is-active { border-color: var(--color-error, #ff5630); }

  .qv-limit {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-light-disabled-text);
  }

  .qv-meta {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-gray-300, #dfe3e8);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .qv-meta li { display: flex; gap: 0.5rem; }
  .qv-meta span { min-width: 5.5rem; color: var(--color-light-disabled-text); }
  .qv-meta strong { font-weight: 500; color: var(--color-light-primary-text); }

  .qv-colors { display: inline-flex; align-items: center; gap: 0.375rem; }

  .qv-swatch {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--color-gray-300, #dfe3e8);
  }

  .qv-full {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
  }

  .qv-full:hover { text-decoration: underline; }
}

@layer components {
  /* Under 480px the row qty + add + wish cannot fit, and the default wrap strands
     the heart alone on its own line. Pair it with the stepper instead and give
     Add to Cart the full second row. */
  @media (max-width: 29.9375rem) {
    .qv-wish { order: 1; }
    .qv-add  { order: 2; flex: 1 0 100%; }
  }
}