/**
 * Ubercart Reboot — modern store skin (ADDITIVE OVERLAY)
 * Loaded last so it refines the existing ecommerce.css/style.css without
 * replacing them. Scoped to store-specific containers (.cbox-product,
 * .product-detail, .catalog-*) so non-store pages are untouched.
 * Rollback: remove this file + its stylesheets[] line from myozark.info.
 */

:root {
  --ozr-bg:        #ffffff;
  --ozr-card:      #ffffff;
  --ozr-ink:       #1f2733;
  --ozr-muted:     #6b7480;
  --ozr-line:      #e7eaee;
  --ozr-accent:    #4c9634;
  --ozr-accent-2:  #b8453f;   /* price/sale red */
  --ozr-radius:    14px;
  --ozr-shadow:    0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.08);
  --ozr-shadow-h:  0 6px 14px rgba(16,24,40,.10), 0 18px 40px rgba(16,24,40,.16);
}

/* ---------- CATALOG GRID: equal-height modern cards ---------- */
.view-uc-catalog .row,
.region-content .row:has(.cbox-product) { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.col-md-4:has(.cbox-product) { display: flex; padding: 12px; }

.ecom-ui.cbox-product {
  display: flex; flex-direction: column; width: 100%;
  background: var(--ozr-card);
  border: 1px solid var(--ozr-line);
  border-radius: var(--ozr-radius);
  box-shadow: var(--ozr-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ecom-ui.cbox-product:hover { transform: translateY(-4px); box-shadow: var(--ozr-shadow-h); }

/* product image area: 1:1 square, full image visible (no crop) */
.cbox-product .img-container { position: relative; background: var(--ozr-bg); aspect-ratio: 1 / 1; width: 100%; overflow: hidden; }
.cbox-product .img-container .item,
.cbox-product .img-container a.product-model { display: block; width: 100%; height: 100%; }
.cbox-product .img-container img { width: 100%; height: 100%; object-fit: contain; max-height: none; }
.ecom-ui.cbox-product .img-container .fa-search-plus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; opacity: 0;
  background: rgba(31,39,51,.72); color: #fff; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; overflow: hidden; transition: opacity .18s ease;
}
.ecom-ui.cbox-product:hover .img-container .fa-search-plus { opacity: 1; }

/* details */
.cbox-product .product-details { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cbox-product .product-details h4 { margin: 0; font-size: 15px; line-height: 1.35; }
.cbox-product .product-details h4 a.product-model {
  color: var(--ozr-ink); font-weight: 600; text-decoration: none; display: block;
}
.cbox-product .product-details h4 a.product-model:hover { color: var(--ozr-accent); }
.cbox-product .product-details hr { margin: 10px 0; border: 0; border-top: 1px solid var(--ozr-line); }

.cbox-product .catalog-price {
  float: none !important; display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--ozr-accent-2); font-weight: 700; font-size: 17px;
}
.cbox-product .catalog-price del { color: var(--ozr-muted); font-weight: 500; font-size: 13px; }

/* price row — icons removed */
.cbox-product .product-details h4 + .clearfix { display: none; }
.cbox-product .p-media { display: none !important; }
.cbox-product .product-details h4 { display: flex; flex-wrap: wrap; align-items: center; }
.cbox-product .product-details h4 > a.product-model { flex: 1 1 100%; margin-bottom: 8px; }

/* ---------- PRODUCT PAGE ---------- */
.product-detail.myozark-new ul { list-style: none; margin: 0; padding: 0; }
.product-detail.myozark-new .productName h3 { font-size: 26px; font-weight: 700; color: var(--ozr-ink); margin: 0 0 12px; }
.product-detail.myozark-new .productDescription { color: var(--ozr-muted); line-height: 1.6; display: block; margin-bottom: 16px; }
.product-detail.myozark-new .productPrice .price { color: var(--ozr-accent-2); font-size: 28px; font-weight: 800; margin: 8px 0 18px; }
.product-detail.myozark-new .productPrice .price del { color: var(--ozr-muted); font-size: 18px; font-weight: 500; margin-right: 10px; }
.product-detail.myozark-new .control-label { font-weight: 600; color: var(--ozr-ink); }
.product-detail.myozark-new li { margin-bottom: 14px; }

/* hide the broken empty placeholder image on product pages */
.addonimg img[src=""], .addonimg:empty { display: none !important; }
.product-image-detail .img-container { background: var(--ozr-bg); border-radius: var(--ozr-radius); border: 1px solid var(--ozr-line); padding: 10px; aspect-ratio: 1 / 1; overflow: hidden; }
.product-image-detail .img-container a.product-image,
.product-image-detail .img-container #mainImage { display: block; width: 100%; height: 100%; }
.product-image-detail .img-container img { width: 100%; height: 100%; object-fit: contain; }
.product-sub-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.product-sub-images .product-thumb { border: 1px solid var(--ozr-line); border-radius: 8px; padding: 4px; transition: border-color .15s ease; }
.product-sub-images .product-thumb:hover { border-color: var(--ozr-accent); }

/* ---------- BUTTONS / FORMS (store-scoped) ---------- */
.cbox-product .btn-color,
.product-detail .btn-color,
.product-detail .add-to-cart input[type="submit"],
.product-detail .node-add-to-cart {
  background: var(--ozr-accent); border: 0; color: #fff; font-weight: 600;
  border-radius: 10px; padding: 12px 22px; box-shadow: var(--ozr-shadow);
  transition: filter .15s ease, transform .05s ease;
}
.product-detail .add-to-cart input[type="submit"]:hover,
.product-detail .node-add-to-cart:hover,
.cbox-product .btn-color:hover { filter: brightness(1.06); color: #fff; }
.product-detail .add-to-cart input[type="submit"]:active { transform: translateY(1px); }

.product-detail select, .product-detail .form-select {
  border: 1px solid var(--ozr-line); border-radius: 8px; padding: 8px 10px;
  background: #fff; min-width: 90px; height: auto;
}

/* Fix: jQuery UI dialog clips native select dropdowns (overflow:hidden on .ui-dialog) */
.ui-dialog { overflow: visible !important; }
.ui-dialog .ui-dialog-content { overflow-y: auto; overflow-x: visible; }

/* attribute selectors (size/color/delivery/camper) cleaner spacing */
.product-detail .form-item, .product-detail .control-group { margin-bottom: 18px; }
.product-detail.myozark-new li { margin-bottom: 18px; }

/* Fix: ozr_store.css positions productQuantity/productButtons absolutely (works in old ecom-ui cards
   with fixed height, but overlaps attribute rows in the product modal/detail page). Return to flow. */
.product-detail.myozark-new li.productQuantity {
  position: static; bottom: auto; left: auto;
}
.product-detail.myozark-new li.productButtons .node-add-to-cart {
  position: static; bottom: auto; right: auto;
}

/* View Cart + Add Another buttons — flex row, equal height */
.product-detail .add-to-cart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#checkoutBtnHolder { display: flex; align-items: center; margin: 0; }
#modalViewCart {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 12px 22px; border-radius: 10px;
  background: var(--ozr-accent-2); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 0; box-shadow: var(--ozr-shadow);
  transition: filter .15s ease; white-space: nowrap;
}
#modalViewCart:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }

/* ---------- SIDEBAR CART ---------- */
.ozr-sidebar-cart { display: flex; gap: 8px; margin-bottom: 16px; }
.ozr-sidebar-cart-btn,
.ozr-sidebar-checkout-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: filter .15s ease;
}
.ozr-sidebar-cart-btn { background: var(--ozr-accent); color: #fff; }
.ozr-sidebar-cart-btn:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }
.ozr-sidebar-checkout-btn { background: var(--ozr-ink); color: #fff; }
.ozr-sidebar-checkout-btn:hover { filter: brightness(1.3); color: #fff; text-decoration: none; }
.ozr-cart-badge {
  background: #fff; color: var(--ozr-accent); font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; line-height: 1.6;
}

/* ---------- PAGE HEADINGS / hero ---------- */
.page-heading-two h2 { font-weight: 800; letter-spacing: .2px; color: var(--ozr-ink); }

/* ---------- SHOP-BY-CATEGORY GRID (store homepage, main column) ---------- */
.ozr-cat-grid-wrap { margin: 4px 0 30px; }
.ozr-cat-grid-title { font-weight: 800; color: var(--ozr-ink); margin: 0 0 14px; font-size: 20px; }
.ozr-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .ozr-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ozr-cat-grid { grid-template-columns: 1fr; } }
.ozr-cat-card {
  display: flex; flex-direction: column; align-items: stretch; text-align: center; overflow: hidden;
  background: var(--ozr-card); border: 1px solid var(--ozr-line); border-radius: var(--ozr-radius);
  box-shadow: var(--ozr-shadow); color: var(--ozr-ink); font-weight: 700; line-height: 1.3; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.ozr-cat-card:hover { transform: translateY(-4px); box-shadow: var(--ozr-shadow-h); border-color: var(--ozr-accent); color: var(--ozr-accent); text-decoration: none; }
.ozr-cat-card .ozr-cat-img { display: block; background: var(--ozr-bg); aspect-ratio: 1 / 1; overflow: hidden; }
.ozr-cat-card .ozr-cat-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; transition: transform .25s ease; }
.ozr-cat-card:hover .ozr-cat-img img { transform: scale(1.04); }
.ozr-cat-card .ozr-cat-name { display: block; padding: 12px 10px; font-size: 15px; }

/* ---------- BACK NAVIGATION (product pages) ---------- */
.ozr-back-nav { padding: 8px 0 0; }
.ozr-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ozr-muted); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color .15s ease;
}
.ozr-back-btn:hover { color: var(--ozr-accent); text-decoration: none; }
.ozr-back-btn .fa { font-size: 13px; }

/* ---------- RESPONSIVE STORE HERO (node 13858) ---------- */
/* image-only hero: cover + center, with a fluid viewport-proportional height */
.page-node-13858 .hero-img.header-img {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.page-node-13858 .section-band.section-hero-home {
  padding-top: 0 !important; padding-bottom: 0 !important;
  height: 34vw; max-height: 520px; min-height: 240px;
}
@media (max-width: 767px) { .page-node-13858 .section-band.section-hero-home { height: 40vw; min-height: 170px; } }
@media (max-width: 480px) { .page-node-13858 .section-band.section-hero-home { height: 91vw; min-height: 140px; } }

/* Smaller cart / catalog page heading on tablet + below */
@media (max-width: 1000px) {
    .page-cart .page-heading-two h2, .page-catalog .page-heading-two h2 {
        font-size: 2rem !important;
    }
}

/* Mobile sidebar menu: left-align + spacing */
@media (max-width: 480px) {
    .ecommerce .sidebar .menu li {
        margin: 8px 0px;
        text-align: left !important;
    }
}

/* Mobile: tighten section-body top margin */
@media (max-width: 480px) {
    .section-body {
        margin-top: 1rem !important;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) { .col-md-4:has(.cbox-product) { width: 50%; } }
@media (max-width: 600px)  { .col-md-4:has(.cbox-product) { width: 100%; }
  .product-detail.myozark-new .productName h3 { font-size: 22px; }
}