/*
 Theme Name: Steelblue Pro Child — Ultimate (for-steelblue-pro)
 Template: steelblue-pro
 Version: 2.1.2
 Description: Amazon-like header + Info Box, crash-safe guards. Menu on click, site-colored buttons, related at bottom.
*/

/* ====== Theme vars & base ====== */
:root{
  --outerrim-accent: var(--sb-accent, var(--sb-header-bg, #1f8bd6));
  --outerrim-accent-contrast: var(--sb-header-text, #ffffff);
  --outerrim-card-border: rgba(255,255,255,.14);
  --outerrim-text: var(--sb-body-text, #e5f1ff);
}
.entry-content, .site, body { color: var(--outerrim-text); }
.entry-content a { color: var(--outerrim-accent); }
.entry-content .button,
.entry-content .wp-element-button,
.entry-content button{
  background: var(--outerrim-accent);
  color: var(--outerrim-accent-contrast);
  border:0; border-radius:12px; padding:10px 16px;
}

/* ====== Product header layout ====== */
.single-product .type-product.product,
.single-product .woocommerce div.product,
.single-product div.product{
  display:grid!important;
  grid-template-columns:minmax(560px,620px) 1fr!important;
  gap:32px!important; align-items:start!important; width:100%!important;
}

/* Gallery (custom) */
.outerrim-gallery{ display:grid!important; grid-template-columns:1fr 88px!important; gap:14px!important; }
.outerrim-main{ grid-column:1!important; }
.outerrim-thumbs{ grid-column:2!important; display:flex!important; flex-direction:column!important; gap:10px!important; max-height:560px!important; overflow:auto!important; }
.outerrim-thumb{ width:88px; height:88px; border:1px solid var(--outerrim-card-border); border-radius:12px; padding:6px; display:grid; place-items:center; cursor:pointer; background:inherit; }
.outerrim-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.outerrim-thumb.is-active{ outline:2px solid var(--outerrim-accent); outline-offset:1px; }
.outerrim-main-inner{ position:relative; border:1px solid var(--outerrim-card-border); border-radius:14px; display:grid; place-items:center; height:560px; background:inherit; }
.outerrim-main-img{ max-width:96%; max-height:96%; object-fit:contain; cursor:zoom-in; }

/* Hover zoom (desktop only) */
@media (hover:hover){
  .outerrim-zoom-pane{
    position:absolute; top:0; right:-520px; width:500px; height:560px;
    background-repeat:no-repeat; background-size:200% auto;
    border:1px solid var(--outerrim-card-border);
    border-radius:14px; background:inherit; display:none; z-index:3;
  }
  .outerrim-main-inner:hover .outerrim-zoom-pane{ display:block; }
}

/* Summary */
.single-product .summary,
.single-product .woocommerce div.product .summary{ padding:12px 32px!important; }

/* Hide duplicate title outside summary */
.single-product .entry-header,
.single-product h1.product_title:not(.summary .product_title){ display:none!important; }

/* Tabs full width under header */
.single-product .woocommerce-tabs,
.single-product .product .woocommerce-tabs,
.single-product .woocommerce-tabs .wc-tabs-wrapper,
.single-product .woocommerce-tabs .panel{
  grid-column:1 / -1!important; width:100%!important; max-width:100%!important;
  padding-left:32px!important; padding-right:32px!important;
}
.single-product .woocommerce-tabs .wc-tabs{ margin-left:32px!important; margin-right:32px!important; }

/* Info block */
.outerrim-info-box{ grid-column:1 / -1!important; margin:24px 16px 0; }
.outerrim-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.outerrim-info-card{ border:1px solid var(--outerrim-card-border); border-radius:14px; overflow:hidden; background:inherit; }
.outerrim-info-card img{ display:block; width:100%; height:auto; }

/* Related & banner margins */
.outerrim-product-banner-wrap, .single-product .related{ margin-left:16px!important; margin-right:16px!important; }
.single-product .related{ margin-top:32px!important; }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.single_add_to_cart_button, .add_to_cart_button, .woocommerce .button.alt{
  background: var(--outerrim-accent)!important;
  color: var(--outerrim-accent-contrast)!important;
  border:0!important; border-radius:12px!important; box-shadow:none!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover,
.single_add_to_cart_button:hover, .add_to_cart_button:hover{ filter:brightness(1.06); }

/* Shop grid thumbs: no-crop, framed */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  width:100%!important; height:auto!important; aspect-ratio:1/1!important;
  object-fit:contain!important; object-position:center!important;
  padding:10px 16px!important; border:1px solid var(--outerrim-card-border)!important; border-radius:14px!important; background:inherit!important;
}

/* Floating cart */
.outerrim-cart-fab{
  position:fixed; right:16px; bottom:18px; z-index:9999;
  background: var(--outerrim-accent); color: var(--outerrim-accent-contrast);
  border:1px solid var(--outerrim-card-border); border-radius:999px; padding:10px 14px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.outerrim-cart-fab .count{
  display:inline-flex; min-width:18px; height:18px; line-height:18px; font-size:12px;
  justify-content:center; align-items:center; padding:0 6px; border-radius:999px; background:#fff; color:#1f3b64;
}

/* Desktop menu dropdowns */
nav .menu li.menu-item-has-children{ position:relative; }
nav .menu li.menu-item-has-children > .sub-menu{
  position:absolute; left:0; top:calc(100% - 1px); display:none; min-width:240px;
  background: rgba(10,25,40,.98); border:1px solid var(--outerrim-card-border); border-radius:12px; padding:8px 0; margin:0; z-index:9999;
}
nav .menu li.menu-item-has-children.open > .sub-menu{ display:block; }
nav .menu li.menu-item-has-children > .sub-menu a{ display:block; padding:8px 12px; white-space:nowrap; }

/* ====== Responsive ====== */
@media (max-width:992px){
  .single-product .type-product.product,
  .single-product .woocommerce div.product,
  .single-product div.product{ grid-template-columns:1fr!important; gap:18px!important; }

  .outerrim-gallery{ grid-template-columns:1fr!important; }
  .outerrim-thumbs{ grid-column:1!important; flex-direction:row!important; max-height:none; }
  .outerrim-main-inner{ height:calc(72vw)!important; }

  .single-product .summary{ padding-left:16px!important; padding-right:16px!important; }
  .single-product .woocommerce-tabs,
  .single-product .woocommerce-tabs .wc-tabs-wrapper,
  .single-product .woocommerce-tabs .panel{ padding-left:16px!important; padding-right:16px!important; }
  .single-product .woocommerce-tabs .wc-tabs{ margin-left:16px!important; margin-right:16px!important; }

  .outerrim-info-grid{ grid-template-columns:1fr; }
  nav .menu li.menu-item-has-children > .sub-menu{ position:static; border:none; background:transparent; padding:0; }
}

/* ====== (Optioneel) fallback voor niet-custom gallery: thumbnails onder main (mobiel) ====== */
@media (max-width:768px){
  .woocommerce div.product .woocommerce-product-gallery{ margin-bottom:20px!important; overflow:visible!important; }
  .woocommerce div.product .flex-control-thumbs{ display:flex!important; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .woocommerce div.product .flex-control-thumbs li{ flex:0 0 auto; width:80px; margin:0!important; }
  .woocommerce div.product .flex-control-thumbs img{ width:100%; height:70px; object-fit:cover; border-radius:6px; }
}