/* =====================================================
   Custom UI Improvements – Journal3 / OpenCart
   Clean, Stable, iOS-Safe
   ===================================================== */

/* -------------------------
   Root variables
-------------------------- */
:root {
  --accent: #ffffff9f;
  --muted: #000000;
  --surface: #ffffff;
  --radius: 10px;
  --max-width: 1200px;
}

/* -------------------------
   Base / Reset
-------------------------- */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  color: #000000;
  background: #f8fafc;
  overflow-x: hidden;
}

small {
  color: var(--muted);
}

/* -------------------------
   Layout width
-------------------------- */
.wrapper,
.mega-menu-content,
.site-wrapper > .container {
  max-width: var(--max-width);
}

/* -------------------------
   Header
-------------------------- */
.site-wrapper header,
.mobile-container .mobile-wrapper-header {
  background: #0f172a;
  color: #fff;
}

.site-wrapper header a,
.site-wrapper header .top-row,
.site-wrapper header .header-top,
.site-wrapper header .mobile-wrapper-header {
  color: #fff;
}

.site-wrapper header .logo img {
  max-height: 64px;
  display: block;
}

/* -------------------------
   Product Grid / Cards
-------------------------- */
.product-layout {
  padding: 6px;
  border: none !important;
}

.product-grid {
  gap: 16px;
}

.product-thumb {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform .14s ease, box-shadow .14s ease;
  border: none !important;
}

.product-thumb:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* -------------------------
   Product Image
-------------------------- */
.product-thumb .image {
  position: relative;
  overflow: hidden;
}

.product-thumb .product-img {
  aspect-ratio: 1 / 1;
}

.product-thumb .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumb hr,
.product-thumb .divider {
  display: none !important;
}

/* -------------------------
   Card Content
-------------------------- */
.product-thumb .caption {
  padding: 14px 16px;
  flex: 0 0 auto;
}

.product-thumb .name {
  font-weight: 600;
  margin: 0 0 6px;
  color: #0f172a;
  line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
}

.product-thumb .name a {
  color: inherit;
  text-decoration: none;
}

.product-thumb .description {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.product-thumb .price {
  font-weight: 700;
  color: var(--accent);
  font-size: 1rem;
}

.product-thumb .price-old {
  color: var(--muted);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}

.product-thumb .rating-stars {
  margin-right: 6px;
}

/* -------------------------
   Buttons / CTA
-------------------------- */
.btn,
.button,
.button-group .btn {
  border-radius: 8px;
  padding: 8px 12px;
}

.product-thumb .buttons-wrapper {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.product-thumb .button-group .btn {
  flex: 1;
  padding: 9px 12px;
}

.product-thumb .btn-primary,
.button.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border: none !important;
}

/* -------------------------
   Labels & Quickview
-------------------------- */
.product-thumb .product-labels {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.product-thumb .product-label-default {
  background: var(--accent);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08);
  border: none !important;
}

.product-thumb .quickview-button {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08);
  opacity: 0;
  transform: translateY(-6px);
  transition: all .18s ease;
}

.product-thumb:hover .quickview-button {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------
   Mobile adjustments
-------------------------- */
@media (max-width: 768px) {
  .wrapper,
  .mega-menu-content,
  .site-wrapper > .container {
    padding: 0 12px;
  }

  .product-thumb .caption {
    padding: 10px;
  }

  .product-thumb .button-group .btn {
    padding: 10px;
    font-size: 14px;
  }

  .product-thumb .quickview-button {
    display: none;
  }
}

/* =====================================================
   iOS SAFARI SCROLL & VIEWPORT FIXES (CRITICAL)
   ===================================================== */

@supports (-webkit-touch-callout: none) {

  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    -webkit-overflow-scrolling: touch;
  }

  body {
    min-height: 100vh;
  }

  .site-wrapper,
  .j-container,
  .j-wrapper,
  .j-page,
  .container,
  .wrapper {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    position: relative !important;
  }

  .j-scroll,
  .scroll,
  .j-panel-body,
  .dropdown-menu,
  .mobile-menu,
  .mobile-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[style*="overflow: hidden"] {
    overflow-y: auto !important;
  }
}
/* =====================================================
   Journal3 product label BAR → BADGE fix
   (removes red horizontal bars)
   ===================================================== */

.product-thumb .product-labels {
  width: auto !important;
}

.product-thumb .product-label,
.product-thumb .product-label-default {
  width: auto !important;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

/* Prevent full-width stretching */
.product-thumb .product-labels > * {
  flex: 0 0 auto !important;
}
/* =====================================================
   Mobile product grid fix – show more products per row
   Journal3 safe override
   ===================================================== */

/* Phones: 2 products per row */
@media (max-width: 768px) {

  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-layout {
    width: auto !important;
    flex: unset !important;
  }

  .product-thumb {
    height: 100%;
  }
}

/* Large phones / small tablets: optional 3 per row */
@media (min-width: 480px) and (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .product-thumb .name {
    font-size: 14px;
  }

  .product-thumb .price {
    font-size: 14px;
  }
}
/* =====================================================
   Global product grid fix – Journal3
   Restores multi-column layout on ALL devices
   ===================================================== */

/* Base grid (desktop default) */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Ensure product items don't force full width */
.product-layout {
  width: auto !important;
  flex: unset !important;
  max-width: none !important;
}

/* Large laptops / small desktops */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablets & large phones */
@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
/* Info blocks – homepage icons */
.info-block-title {
  color: #ffffff; /* title color */
  font-weight: 600;
}

.info-block-text {
  color: rgba(255,255,255,.8); /* softer text */
  font-size: 14px;
}
@media (max-width: 768px) {
  .mobile-top-bar .links-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }
}