/**
 * ov_custom.css — ovetikkunat.fi overrides for responsive_classic_ov
 * Loaded LAST (after responsive_*.css) from common/html_header.php.
 * Brand: orange #f78e21, text #333, footer #f3f3f3, font Open Sans (same as ovetikkunat.fi)
 * All own changes live here, so the original template CSS stays untouched.
 */

:root {
  --ov-orange: #f78e21;
  --ov-orange-dark: #d9741a;
  --ov-text: #333333;
  --ov-dark: #333333;
  --ov-light: #f3f3f3;
  --ov-border: #e2e2e2;
}

/* ---------- Base look (all devices) ---------- */
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ov-text);
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, h4, .centerBoxHeading, .leftBoxHeading, .rightBoxHeading { font-family: "Open Sans", Arial, sans-serif; }
h1 { color: var(--ov-orange); font-weight: 600; }
a:link, a:visited { color: var(--ov-orange); }
a:hover { color: var(--ov-orange-dark); }

#mainWrapper { background: #fff; }
#headerWrapper { border-bottom: 3px solid var(--ov-orange); }

/* Top bar: dark like ovetikkunat.fi, links uppercase/bold */
#navMain ul li a, #navSupp ul li a { text-transform: uppercase; font-weight: 700; font-size: 13px; }
#navMain ul li a:hover, #navSupp ul li a:hover { color: var(--ov-orange); }
#navCatTabsWrapper { background: var(--ov-orange); }
#navCatTabs li a { font-weight: 600; }

/* Side box headings */
.leftBoxHeading, .rightBoxHeading, .centerBoxHeading { background: var(--ov-dark); }
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover { color: var(--ov-orange); }

/* Buttons: orange, rounded */
input.submit_button, span.normal_button, .cssButton, .button,
span.cssButton.normal_button.button.button_goto_prod_details,
span.cssButton.normal_button.button.button_in_cart {
  background: var(--ov-orange) !important;
  color: #fff !important;
  border-radius: 4px;
  border: none;
}
input.submit_button:hover, span.normal_button:hover, input.cssButtonHover, .cssButton:hover,
.button_goto_prod_details:hover, .button_in_cart:hover {
  background: var(--ov-orange-dark) !important;
  color: #fff !important;
}

/* Prices */
.productSpecialPrice, .productSalePrice, .productPriceDiscount { color: #c0392b; }
#productPrices, .productBasePrice { font-weight: 700; }

/* Calmer hover on product/category boxes (original had very large shadows) */
.centerBoxContentsListing:hover, .centerBoxContents:hover,
.categoryListBoxContents:hover, .centerBoxContentsFeatured:hover,
.centerBoxContentsNew:hover, .centerBoxContentsSpecials:hover, .specialsListBoxContents:hover {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  border-radius: 6px;
}

/* Footer like ovetikkunat.fi */
#navSuppWrapper { background: var(--ov-dark); }
#siteinfoLegal, #siteinfoIP, #bannerSix { background: var(--ov-light); color: var(--ov-text); border-color: var(--ov-light); }
#siteinfoLegal a { color: var(--ov-orange); }

/* Image thumbnails: orange frame instead of blue */
.image-grid img { border: 1px solid var(--ov-border); box-shadow: none; border-radius: 4px; }

/* Main image: show it is tappable (zoom icon) */
#productMainImage a { position: relative; display: inline-block; }
#productMainImage a::after {
  content: "\f00e";                      /* Font Awesome magnifier-plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute; right: 8px; bottom: 14px;
  width: 36px; height: 36px; line-height: 36px; text-align: center;
  border-radius: 50%;
  background: rgba(247,142,33,.9); color: #fff; font-size: 16px;
  pointer-events: none;
}

/* Image modal (big image): fill screen, easy close */
.imgmodal { background-color: rgba(0,0,0,.9); }
.imgmodal-content {
  background: transparent;
  width: 100vw; max-width: 100vw; max-height: 100vh;
  padding: 10px; box-sizing: border-box;
  color: #fff;
}
.imgmodal-content img.centered-image { max-width: 100%; max-height: 82vh; width: auto; height: auto; }
.imgmodal-close { top: 12px; right: 12px; font-size: 36px; color: #fff; }

/* =========================================================
   PHONES (and small tablets)
   ========================================================= */
@media (max-width: 767px) {

  body { font-size: 16px; }
  /* no sideways page scroll */
  html, body { overflow-x: hidden; }
  #mainWrapper, #contentMainWrapper, .centerColumn { width: 100% !important; box-sizing: border-box; }
  .centerColumn { padding: 0 10px; }
  table { max-width: 100%; }
  #shoppingCartDefault table, #checkoutConfirmDefault table { display: block; overflow-x: auto; }

  /* iOS: inputs ≥16px so the phone doesn't zoom in */
  input, select, textarea { font-size: 16px !important; }

  /* Logo centred and not too big */
  div#logo { float: none; margin: 12px auto 8px; text-align: center; }
  div#logo img { max-width: 70vw; height: auto; }
  #tagline { display: none; }

  /* Bigger tap targets in the top bar */
  #navMain ul li a { display: inline-block; padding: 10px 12px; font-size: 18px; }
  .header .fa-bars { color: #fff; }

  /* ---------- Categories: 2 tiles per row ---------- */
  div.categoryListBoxContents,
  div.categoryListBoxContents.centeredContent {
    width: 48% !important;
    float: left !important;
    clear: none !important;
    margin: 0 1% 10px 1% !important;
    padding: 8px 4px !important;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ov-border);
    border-radius: 6px;
    min-height: 150px;
  }
  div.categoryListBoxContents img {
    width: 100%; height: 110px; object-fit: contain; margin-bottom: 6px;
  }
  div.categoryListBoxContents a {
    font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ov-text);
    display: block; line-height: 1.3;
  }
  /* product grids also 2 per row */
  div.centerBoxContentsProducts.centeredContent,
  div.centerBoxContentsNew.centeredContent,
  div.centerBoxContentsFeatured.centeredContent,
  div.centerBoxContentsSpecials.centeredContent,
  div.specialsListBoxContents {
    width: 48% !important; float: left !important; clear: none !important;
    margin: 0 1% 10px 1% !important; box-sizing: border-box;
  }
  .row.row-clms-1 .gridlayout, .row.row-clms-2 .gridlayout { width: 49%; }

  /* Category image + description on top of a category page */
  #categoryImgListing img { max-height: 160px; width: auto; }
  #categoryDescription { font-size: 15px; }

  /* Mobile menu (hamburger): readable list */
  .mm-menu .mm-listview > li > a, .mm-menu .mm-listview > li > span { padding: 14px 20px; font-size: 16px; }
  .mm-menu .mm-listview > li.mm-selected > a { color: var(--ov-orange); }

  /* ---------- Product page ---------- */
  #pinfo-left, #pinfo-right { width: 100% !important; float: none !important; margin: 0 !important; }
  #productMainImage { float: none; width: 100%; margin: 0 0 10px; text-align: center; }
  #productMainImage a { display: block; }
  #productMainImage img {
    width: 100%; max-height: 65vh; object-fit: contain; background: #fff;
  }
  #productName, h1#productName { font-size: 22px; line-height: 1.25; margin: 10px 0; }

  /* Additional images: one swipeable row of big thumbnails */
  #productAdditionalImages.image-grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
    margin-bottom: 10px;
  }
  #productAdditionalImages.image-grid::before { display: none; content: none; }
  #productAdditionalImages.image-grid > div.back {
    flex: 0 0 30%;
    scroll-snap-align: start;
    float: none;
  }
  #productAdditionalImages.image-grid > div.back img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  }

  /* Add to cart: full width, big */
  #cartAdd { width: 100%; box-sizing: border-box; text-align: center; }
  #cartAdd input[type=text], #cartAdd input[type=number] { width: 70px; height: 44px; text-align: center; }
  #cartAdd input.submit_button, #cartAdd .button_in_cart {
    display: block; width: 100%; padding: 14px 0 !important; font-size: 18px; margin-top: 8px;
  }
  .wrapperAttribsOptions select { width: 100%; height: 44px; }

  /* Product listing table rows: image left, text right, no squeeze */
  .productListing-data img { max-width: 100px; height: auto; }
}

/* Very small phones: categories still 2 per row but smaller images */
@media (max-width: 360px) {
  div.categoryListBoxContents img { height: 85px; }
  #productAdditionalImages.image-grid > div.back { flex-basis: 40%; }
}