/* 
 Theme Name:     MicroDelta Packaging 
 Author:         HoneyMedia
 Author URI:     https://www.honeymedia.uk/
 Template:       Divi
 Version:        1.0
 Description:    Child Theme based on DIVI Premium Theme
*/ 

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

@import url("https://use.typekit.net/sdf6ztc.css");

/* =========================================================
   1) Typography (brand fonts)
   ========================================================= */
h1, h2, h3, h4 {
    font-family: "ofelia-display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	padding-bottom: 15px;
}

html, body, p, li, a {
  font-family: "comma-sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 300 !important;
}

/* Keep for legacy / utility usage */
.sans-font { 
  font-family: "Source Sans 3", sans-serif !important;
}

/* =========================================================
   2) Generic utilities / minor site tweaks
   ========================================================= */

#product-additional-information .yith_ywraq_add_item_response_message {font-size: 0.9em;}
#main-content > .clearfix { display: none; }
ul#menu-footer-bottom-menu .menu-item {display: inline-block; margin: 0 5px;}
#yith-ywrq-table-list .product-thumbnail img {max-height: 5vw; width: auto; }
#product-additional-information span.product-acf-value {font-size: 1.2em !important; color: #e87d26 !important;}
#product-additional-information .yith_ywraq_add_item_response_message {font-size: 0.9em;}
.vertical-align { display: flex; flex-direction: column; justify-content: center;}
.dsm_card_carousel_child_subtitle {margin-bottom: 10px;}
.team-row h4 {margin: 10px auto; font-size:1.2em;}
span.et_pb_scroll_top.et-pb-icon.et-visible, span.et_pb_scroll_top.et-pb-icon.et-hidden { right: 25px; border-radius: 50px; background: #e87d26; }
.dwe_out_of_stock_product>div {opacity: 1 !important;}
@media (max-width: 980px) {#how-we-work .social-icon-global.et_pb_module.et_pb_text_align_right {text-align: left !important;}}
.canvas-menu-style.dsm_menu_0_tb_header .dsm-menu .menu-item-has-children .sub-menu {margin-top: 20px;}
.canvas-menu-style.dsm_menu_0_tb_header .dsm-menu .menu-item-has-children .sub-menu>li { margin-top: 5px; margin-bottom: 5px; }
#menu-bar .et_pb_column  {margin-bottom: 0px !important;} 
ul.dwe_woo_products_pagination>li>a {border-radius: 50px; border: 1px white solid; width: 2em; height: 2em;line-height: 1.4em;}
.product-categories-set .dsm_card_carousel_child::hover > .et_pb_module_inner>.dsm_card_wrapper>h3 {color: #ffffff !important;}
.post-contener-contener img {margin:20px auto !important;} 
.et_pb_widget.widget_block {margin-bottom: 1em !important;}
.product-category-list:before{content:'Packaging Range';font-size: 23px; display: block; margin-bottom: 0.5em; font-weight: 700; color: #e87d26;}
.product-category-list>ul>li {display: inline-block; font-size: 1em; padding: 3px 5px; appearance: none; background: transparent; border: 1px solid #dddddd; border-radius: 5px; color: #222222; cursor: pointer; font-size: .8em; padding: .25em .75em .15em;}
/* .product-category-list>ul>li:hover, .product-category-list>ul>li>span:hover {background: #e87d26; color: #ffffff;} 
.wc-block-product-filters__overlay-content {padding: 2em !important;} */
.post-contener-contener.mdp-lightbox-scope .gallery-item {margin: 5px auto;}
.post-contener-contener.mdp-lightbox-scope .gallery-item img {margin: 0px !important;}
.post-contener-contener iframe, .post-contener-contener video {margin: 3vh auto;}
.post-contener-contener h2, .post-contener-contener h3, .post-contener-contener h4 {margin-top: 1em;}

@media (max-width: 768px) {
	.et_pb_button>span, .et_pb_button {font-weight: 500 !important;}
}

/* Menu Icons */

.header-menu .menu-dispenser-icon > a, .header-menu .menu-container-icon > a, .header-menu .menu-closures-icon > a, .header-menu .menu-home-garden-icon > a { position: relative; padding-left: 2.4em; }
.menu-dispenser-icon > a::before, .menu-container-icon > a::before, .menu-closures-icon > a::before, .menu-home-garden-icon > a::before  { content:""; position:absolute; left:0px; top:25%; transform:translateY(-50%); width:2em; height:2em; opacity:.9; }
.header-menu .menu-dispenser-icon > a::before {background: url("/wp-content/uploads/dispensers-category-icon-micro-delta-packaging-uk.svg") center/contain no-repeat; }
.header-menu .menu-container-icon > a::before {background: url("/wp-content/uploads/containers-category-icon-micro-delta-packaging-uk.svg") center/contain no-repeat; }
.header-menu .menu-closures-icon > a::before {background: url("/wp-content/uploads/closures-category-icon-micro-delta-packaging-uk.svg") center/contain no-repeat; }
.header-menu .menu-home-garden-icon > a::before {background: url("/wp-content/uploads/home-garden-category-orange-icon-micro-delta-packaging-uk.svg") center/contain no-repeat; }

/* filter */
.filters-column {z-index: 999 !important;}

/* Filter icons */
.colour-attr .wp-block-heading::before, .capacity-attr .wp-block-heading::before, .neck-attr .wp-block-heading::before, .output-attr .wp-block-heading::before { content:""; position:absolute; left:0; top:30%; transform:translateY(-50%); width:1.4em; height:1.4em; }
.colour-attr .wp-block-heading, .capacity-attr .wp-block-heading, .neck-attr .wp-block-heading, .output-attr .wp-block-heading {position: relative; padding-left: 1.75em; }	
.colour-attr .wp-block-heading::before {background: url("/wp-content/uploads/colours-attribute-packaging-icon.svg") center/contain no-repeat; }
.capacity-attr .wp-block-heading::before {background: url("/wp-content/uploads/capacity-attribute-packaging-icon.svg") center/contain no-repeat; }
.neck-attr .wp-block-heading::before {background: url("/wp-content/uploads/neck-sizes-attribute-packaging-icon.svg") center/contain no-repeat; }
.output-attr .wp-block-heading::before {background: url("/wp-content/uploads/outputs-attribute-packaging-icon.svg") center/contain no-repeat; }

.wc-block-product-filter-chips__item {border: 1px solid color-mix(in srgb, currentColor 10%, transparent) !important; border-radius: 5px !important;}
.wc-block-product-filter-chips__item:hover {border: 1px solid #e87d26 !important; background-color: #e87d26 !important; color: #ffffff;}

/* =========================================================
   3) Product page visuals
   ========================================================= */
.woocommerce img.product-main-image,
.woocommerce-page img.product-main-image {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,0.15))
    drop-shadow(0 24px 48px rgba(0,0,0,0.08));
}

/* =========================================================
   Unified tooltip system (ATTR + RES icons)
   ========================================================= */

.mdp-attr-icon::after,
.mdp-res-icon::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6rem);
  transform: translateX(-10%);

  /* --- sizing logic --- */
  max-width: 300px;
  width: max-content;
  min-width: 8rem;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;

  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(0,0,0,0.12);

  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);

  font-size: 0.85rem;
  font-style: standard;
  line-height: 1.35;
  color: #111;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 160ms ease, visibility 160ms ease;
  z-index: 9999;
}


/* =========================================================
   4) WooCommerce: Attributes UI (icons + tooltip + swatches)
   Used by shortcode: [mdp_product_attributes_auto]
   ========================================================= */

/* Container */
.mdp-attr-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Row layout — FUTURE-PROOF: icon stays top when values wrap */
.mdp-attr-row {
  display: flex;
  align-items: center;  
  gap: 0.6rem;
}

/* Values: can wrap naturally */
.mdp-attr-values {
  line-height: 0.75;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;          /* allow wrapping for long lists */
  gap: 0.4rem;
  font-size: 1.2em !important;
}

/* Icon wrapper */
.mdp-attr-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);

  cursor: help;
  user-select: none;

  flex: 0 0 auto;           /* fixed icon column */
  flex-shrink: 0;
  align-self: flex-start;   /* future-proof even if row alignment changes */
  margin-top: 0.15em;       /* optical alignment to first text line */
}

.mdp-attr-item{
  display:inline-block;
  white-space:nowrap;
}

.mdp-attr-sep{
  white-space:pre;   /* zachowuje spację po przecinku */
}


/* SVG icon rendering — keep ORIGINAL colours from the SVG file */
.mdp-attr-icon::before {
  content: "";
  width: 2em !important;
  height: 2em !important;
  display: block;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Desktop: hover only where hover exists */
@media (hover: hover) and (pointer: fine) {
  .mdp-attr-icon:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

/* Keyboard accessibility (no sticky on mouse click) */
.mdp-attr-icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Touch: tooltip only while pressed */
@media (hover: none) {
  .mdp-attr-icon:active::after {
    opacity: 1;
    visibility: visible;
  }
}

/* Swatches */
.mdp-colours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mdp-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  display: inline-block;
}

/* Custom colour swatch (premium rainbow) */
.mdp-swatch--multicolor {
  background: conic-gradient(
    from 0deg,
    #e63946,
    #f1a208,
    #f9dc5c,
    #4caf50,
    #4dd0e1,
    #5e60ce,
    #9b5de5,
    #e63946
  );
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 0 1px rgba(255,255,255,0.6);
}

/* =========================================================
   5) Icon mapping (upload files with matching names)
   Pattern:
   /wp-content/uploads/{slug}-attribute-packaging-icon.svg
   ========================================================= */
.mdp-attr-icon.icon-outputs::before {
  background-image: url("/wp-content/uploads/outputs-attribute-packaging-icon.svg");
}

.mdp-attr-icon.icon-colours::before {
  background-image: url("/wp-content/uploads/colours-attribute-packaging-icon.svg");
}

.mdp-attr-icon.icon-capacity::before {
  background-image: url("/wp-content/uploads/capacity-attribute-packaging-icon.svg");
}

.mdp-attr-icon.icon-neck-sizes::before {
  background-image: url("/wp-content/uploads/neck-sizes-attribute-packaging-icon.svg");
}

/* =========================================================
   6) Misc Woo UI (existing)
   ========================================================= */
.yith_ywraq_add_item_response_message {
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: 700;
  color: green;
}

.md-wc-adjacent.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}


/* =========================================================
   7) [MODULE:WOOCOMMERCE:ACF_RESOURCE_BUTTONS] @1.0.0
   Δ Resource icon buttons (ACF + Woo gallery) with tooltip and SVG background-image mapping.
   Rollback: remove this block.
   ========================================================= */

/* Row container for [mdp_resource_buttons] */
.mdp-res-row{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  flex-wrap:wrap;
}

/* Clickable wrapper */
.mdp-res-btn{
  display:inline-flex;
  align-items:flex-start;
  text-decoration:none;
}

/* Icon matches your attribute icon styling */
.mdp-res-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:3rem;
  height:3rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);

  cursor:help;
  user-select:none;

  flex:0 0 auto;
  flex-shrink:0;
  align-self:flex-start;    /* future-proof */
  margin-top:0.15em;        /* optical alignment */
}

/* SVG rendering (keep original SVG colours) */
.mdp-res-icon::before{
  content:"";
  width:4em;
  height:4em;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}


@media (hover:hover) and (pointer:fine){
  .mdp-res-icon:hover::after{ opacity:1; visibility:visible; }
}
.mdp-res-icon:focus-visible::after{ opacity:1; visibility:visible; }
@media (hover:none){
  .mdp-res-icon:active::after{ opacity:1; visibility:visible; }
}

/* Icon mapping (upload SVGs and keep naming consistent) */
.mdp-res-icon.icon-video::before{
  background-image:url("/wp-content/uploads/video-attribute-packaging-icon.svg");
}
.mdp-res-icon.icon-technical-data-sheet::before{
  background-image:url("/wp-content/uploads/technical-data-sheet-attribute-packaging-icon.svg");
}
.mdp-res-icon.icon-product-card::before{
  background-image:url("/wp-content/uploads/product-card-attribute-packaging-icon.svg");
}
.mdp-res-icon.icon-technical-drawings::before{
  background-image:url("/wp-content/uploads/technical-drawings-attribute-packaging-icon.svg");
}
.mdp-res-icon.icon-certificates-and-declarations::before{
  background-image:url("/wp-content/uploads/certificates-and-declarations-attribute-packaging-icon.svg");
}
.mdp-res-icon.icon-gallery::before{
  background-image:url("/wp-content/uploads/gallery-attribute-packaging-icon.svg");
}

/* Icon nav (Prev | Back | Next) */
.md-wc-icon-nav{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.md-wc-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;  
  cursor: pointer;
  user-select: none;

  border: 1px solid rgba(0,0,0,.25);
  border-radius: 999px; /* zmień na 999px jeśli ma być idealne kółko */
  background: rgba(255,255,255,.85);

  color: #111;
  text-decoration: none;
  line-height: 1;

  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}

.mdp-video-embed{
  width: 100%;
  max-width: 100%;
}

.mdp-video-embed__inner{
  width: 100%;
  height: 100%;
}

.mdp-video-embed iframe,
.mdp-video-embed video,
.mdp-video-embed object,
.mdp-video-embed embed{
  width: 100% !important;
  height: 100% !important;
  display: block;
  max-width: 100% !important;
}

 /* .mdp-attr-icon {
    position: relative;

 
    user-select: none;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.15em
2.16px
;
}

*/

.md-wc-icon-btn:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(0,0,0,.45);
}

.md-wc-icon-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.55);
  outline-offset: 2px;
}

.md-wc-icon-btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}

.canvas-menu-style a { font-family: "ofelia-display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;     font-weight: 600 !important; }

#product-additional-information .product-acf-value {font-size: 1.2em !important; color: #e87d26 !important;}
#product-additional-information .yith_ywraq_add_item_response_message {font-size: 0.9em;}
.et_pb_module.et_pb_wc_breadcrumb.et_pb_wc_breadcrumb_0_tb_body.product-breadcrumbs.et_pb_bg_layout_.et_pb_text_align_left.et_had_animation {
    margin-bottom: 15px;
}