@charset "UTF-8";
/* ============================================
   1. HIDE DUPLICATE TEXT CATEGORY MENU
============================================ */
div.tile-store ul.cat-row {
  display: none !important;
}

/* ============================================
   2. CATEGORY GRID - EVEN SPACING
============================================ */
html#ecwid_html body#ecwid_body .ec-store .grid__categories--advanced {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

html#ecwid_html body#ecwid_body .ec-store .grid__categories--advanced .grid-category {
  flex: 0 0 19% !important;
  max-width: 19% !important;
  width: 19% !important;
  margin-bottom: 20px !important;
}

@media screen and (max-width: 900px) {
  html#ecwid_html body#ecwid_body .ec-store .grid__categories--advanced .grid-category {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    width: 32% !important;
  }
}

@media screen and (max-width: 600px) {
  html#ecwid_html body#ecwid_body .ec-store .grid__categories--advanced .grid-category {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
  }
}

/* ============================================
   3. CATEGORY TEXT COLOR + GRADIENT OVERLAY
============================================ */
html#ecwid_html body#ecwid_body .ec-store .grid-category__title,
html#ecwid_html body#ecwid_body .ec-store .grid-category__title-inner {
  color: #ffffff !important;
}

html#ecwid_html body#ecwid_body .ec-store .grid-category__shadow {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%) !important;
}

/* ============================================
   4. PRE-ORDER BADGE
============================================ */
html#ecwid_html body#ecwid_body .ec-store .grid-product__label {
  display: none !important;
}

html#ecwid_html body#ecwid_body .ec-store .product-details__label-container .ec-label.label--notice {
  background-color: #191919 !important;
}

/* 4b. Fix leftover orange on the badge's folded-corner
   triangle (a separate pseudo-element from the main box) */
html#ecwid_html body#ecwid_body .ec-store .product-details__label-container .ec-label.label--notice::before,
html#ecwid_html body#ecwid_body .ec-store .product-details__label-container .ec-label.label--notice::after {
  background-color: #191919 !important;
  border-color: #191919 !important;
}

/* ============================================
   5. PRODUCT PAGE - MAIN IMAGE
   (thumb sizing now handled in section 10 below —
   old 45px thumb rule removed to avoid conflict)
============================================ */
html#ecwid_html body#ecwid_body .ec-store .details-gallery__images {
  max-width: 420px !important;
  margin: 0 auto !important;
}

/* ============================================
   6. PRODUCT PAGE - TITLE & PRICE
============================================ */
html#ecwid_html body#ecwid_body .ec-store .product-details__product-title,
html#ecwid_html body#ecwid_body .ec-store .product-details-module__title.ec-header-h3 {
  font-size: 22px !important;
}

html#ecwid_html body#ecwid_body .ec-store .product-details__product-price,
html#ecwid_html body#ecwid_body .ec-store .ec-price-item,
html#ecwid_html body#ecwid_body .ec-store [itemprop="price"] {
  font-size: 20px !important;
}

/* ============================================
   7. PRE-ORDER / ADD TO BAG BUTTON
============================================ */
html#ecwid_html body#ecwid_body .ec-store .details-product-purchase__add-to-bag {
  width: auto !important;
  max-width: 220px !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-product-purchase__add-to-bag .form-control__button {
  padding: 10px 20px !important;
  font-size: 14px !important;
  height: auto !important;
  width: 100% !important;
}

/* ============================================
   8. RECENTLY VIEWED PRODUCTS - SMALLER, NO TEXT
   (note: this section lives outside .ec-store in the DOM,
   so selectors here do NOT include .ec-store)
============================================ */
html#ecwid_html body#ecwid_body #recently-viewed-list .recently-viewed {
  flex: 0 0 60px !important;
  max-width: 60px !important;
  width: 60px !important;
}

html#ecwid_html body#ecwid_body #recently-viewed-list .recently-viewed__thumb,
html#ecwid_html body#ecwid_body #recently-viewed-list .recently-viewed__thumb img {
  max-width: 60px !important;
  max-height: 60px !important;
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
}

html#ecwid_html body#ecwid_body #recently-viewed-list .recently-viewed__name,
html#ecwid_html body#ecwid_body #recently-viewed-list .recently-viewed__price {
  display: none !important;
}

/* ============================================
   9. PRODUCT DESCRIPTION TEXT
============================================ */
html#ecwid_html body#ecwid_body .ec-store .product-details-module__content,
html#ecwid_html body#ecwid_body .ec-store .product-details__product-description {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

html#ecwid_html body#ecwid_body .ec-store .product-details-module__title {
  font-size: 14px !important;
}

/* ============================================
   10. COMPACT RIGHT COLUMN
   (confirmed selector: div.product-details__sidebar
   wraps title, SKU, price, discount, stock, quantity, button)
============================================ */
html#ecwid_html body#ecwid_body .ec-store .product-details__sidebar > * {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

html#ecwid_html body#ecwid_body .ec-store .product-details__sidebar .details-product-purchase__add-to-bag,
html#ecwid_html body#ecwid_body .ec-store .product-details__sidebar button {
  margin-top: 4px !important;
}

/* ============================================
   11. DIVIDER + FULL-WIDTH DESCRIPTION
   (confirmed selector: div.product-details__description
   wraps the "Product Details" title + text content.
   Divider is a slim border matching the content column
   width, not the full browser width.)
============================================ */
html#ecwid_html body#ecwid_body .ec-store .product-details__description {
  max-width: none !important;
  width: 100% !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid #000000 !important;
}

/* ============================================
   12. EXPERIMENTAL: MOVE "RECENTLY VIEWED" TO BOTTOM
   (confirmed: #rvp-products is a sibling of the main
   product content inside .ecwid-productBrowser-ProductPage.
   Uses flexbox order to visually reposition it — does NOT
   move anything in the actual code, low risk to test.
   If this doesn't visibly move it, the sibling structure
   may be different than expected — tell me and we'll
   check further before trying anything else.)
============================================ */
html#ecwid_html body#ecwid_body .ecwid-productBrowser-ProductPage {
  display: flex !important;
  flex-direction: column !important;
}

html#ecwid_html body#ecwid_body .ecwid-productBrowser-ProductPage #rvp-products {
  order: 2 !important;
}

html#ecwid_html body#ecwid_body .ecwid-productBrowser-ProductPage #rvp-products ~ div:not(.ec-footer) {
  order: 1 !important;
}

html#ecwid_html body#ecwid_body .ecwid-productBrowser-ProductPage .ec-footer {
  order: 3 !important;
}

/* ============================================
   13. EXPERIMENTAL: SHOW MAIN IMAGE NAV ARROWS
   (confirmed class from DOM: details-gallery__images-controls
   — this is Ecwid's built-in prev/next control for the main
   product image, forcing it visible instead of hidden by
   default. If arrows appear but look unstyled/misplaced,
   send an Inspect screenshot of one arrow button and I'll
   refine size/position.)
============================================ */
html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-controls {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 13b. The arrow buttons exist as empty divs with no icon or
   size by default — give them shape, position, and a chevron */
html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-container {
  position: relative !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-control {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-control--left {
  left: 10px !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-control--right {
  right: 10px !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-control--left::before {
  content: "‹" !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #191919 !important;
}

html#ecwid_html body#ecwid_body .ec-store .details-gallery__images-control--right::before {
  content: "›" !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #191919 !important;
}