/*
 * Digitnet Store Core - Safe Mobile Foundation v3.0.4.2.51.1
 * Purpose: adaptive mobile presentation only.
 * No WooCommerce forms, cart, checkout, payment, add-to-cart or settings-save logic is changed here.
 */

:root{
  --dn-mobile-breakpoint: 767px;
  --dn-tablet-breakpoint: 1024px;
}

/* Tablet: keep desktop content available, but make the heavy home modules lighter. */
@media (min-width: 768px) and (max-width: 1024px){
  #dnClickTrustBar.dn-click-trustbar{
    margin-top:12px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  #dnClickTrustBar .dn-trustbar-track{
    display:flex !important;
    grid-template-columns:none !important;
    min-width:max-content;
  }
  #dnClickTrustBar .dn-trust-item{
    width:260px !important;
    min-width:260px !important;
    min-height:76px !important;
    padding:14px 16px !important;
    scroll-snap-align:start;
  }
  .dn-shop-solution-section .solutions{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    gap:12px !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:4px;
  }
  .dn-shop-solution-section .solution{
    flex:0 0 210px !important;
    min-width:210px !important;
    scroll-snap-align:start;
  }
}

/* Phone: keep homepage business blocks visible, but make them compact and scroll-safe.
   v7.0.9 recovery: earlier mobile optimisation hid trust/service blocks entirely,
   which made users think blocks were not loading on mobile. */
@media (max-width: 767px){
  #dnClickTrustBar,
  #dnTrustLandingArea,
  .dn-shop-solution-section,
  [data-dn-mobile-optional="trust-bar"],
  [data-dn-mobile-optional="trust-landing"],
  [data-dn-mobile-optional="shop-solution"]{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    content-visibility:visible !important;
  }

  #dnClickTrustBar.dn-click-trustbar{
    margin-top:14px !important;
    padding:0 !important;
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  #dnClickTrustBar .dn-trust-item{
    flex:0 0 222px !important;
    min-width:222px !important;
    min-height:74px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:13px 14px !important;
    border:1px solid #e6e9ef !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 6px 18px rgba(16,24,40,.06) !important;
    scroll-snap-align:start;
  }

  #dnClickTrustBar .dn-trust-copy,
  #dnClickTrustBar .dn-trust-copy strong,
  #dnClickTrustBar .dn-trust-copy small{
    min-width:0 !important;
    white-space:normal !important;
  }

  #dnTrustLandingArea{
    margin-top:12px !important;
  }

  #dnTrustLandingArea .dn-trust-landing-page{
    border-radius:16px !important;
    box-shadow:0 8px 22px rgba(16,24,40,.06) !important;
  }

  #dnTrustLandingArea .dn-trust-landing-page:first-child:not(.active){
    display:block !important;
  }

  #dnTrustLandingArea .dn-trust-landing-header,
  #dnTrustLandingArea .dn-trust-landing-body,
  #dnTrustLandingArea .dn-trust-landing-footer{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #dnTrustLandingArea .dn-trust-landing-header h2{
    font-size:20px !important;
    line-height:1.22 !important;
  }

  #dnTrustLandingArea .dn-trust-landing-body{
    display:block !important;
  }

  #dnTrustLandingArea .dn-trust-visual{
    display:none !important;
  }

  .dn-shop-solution-section .solutions{
    display:flex !important;
    grid-template-columns:none !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:6px !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .dn-shop-solution-section .solution{
    flex:0 0 150px !important;
    min-width:150px !important;
    padding:14px 10px !important;
    scroll-snap-align:start;
  }

  .dn-shop-solution-section .solution .photo{
    height:58px !important;
    margin-bottom:8px !important;
    font-size:28px !important;
  }

  #dnHomepageView{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #dnHomepageView .section{
    margin-top:18px !important;
  }

  #dnHomepageView .section-title{
    align-items:flex-end !important;
    gap:12px !important;
    margin-bottom:10px !important;
  }

  #dnHomepageView .section-title h2{
    font-size:17px !important;
    line-height:1.18 !important;
    letter-spacing:.03em !important;
  }

  #dnHomepageView .section-title h2:after{
    width:40px !important;
    height:3px !important;
    margin-top:6px !important;
  }

  #dnHomepageView .view{
    font-size:11px !important;
    white-space:nowrap !important;
  }

  /* Keep product areas adaptive without changing product/card logic. */
  #dnHomepageView .product-row,
  #dnHomepageView .compact-row,
  #dnHomepageView .dn-recent-track,
  #dnHomepageView .dn-showcase-grid,
  #dnHomepageView .dn-featured-grid{
    gap:10px !important;
  }

  #dnHomepageView img{
    max-width:100%;
    height:auto;
  }
}

@media (max-width: 420px){
  #dnHomepageView{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #dnHomepageView .section-title h2{
    font-size:16px !important;
  }
}

/* ==========================================================
   Digitnet V3.0.4.2.51.2 - Adaptive Compact Single Product Icon Row
   Purpose: keep the small support/value icons horizontal and compact on mobile.
   Scope: CSS-only. Does not touch WooCommerce add-to-cart/cart/checkout logic.
   ========================================================== */

@media (max-width: 767px){
  body.single-product #dnProductPage .dn-sp-icons,
  #dnProductPage .dn-sp-icons{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:minmax(118px, 1fr) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    scroll-snap-type:x proximity !important;
    padding:2px 2px 8px !important;
    margin:10px 0 16px !important;
    scrollbar-width:thin !important;
  }

  body.single-product #dnProductPage .dn-sp-icon,
  #dnProductPage .dn-sp-icon{
    min-width:118px !important;
    min-height:78px !important;
    scroll-snap-align:start !important;
    border-radius:14px !important;
    padding:9px 8px !important;
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    align-content:center !important;
    justify-items:center !important;
    text-align:center !important;
  }

  body.single-product #dnProductPage .dn-sp-icon i,
  #dnProductPage .dn-sp-icon i{
    width:32px !important;
    height:32px !important;
    margin:0 0 5px !important;
    font-size:15px !important;
  }

  body.single-product #dnProductPage .dn-sp-icon b,
  #dnProductPage .dn-sp-icon b{
    font-size:12px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    max-width:100% !important;
  }

  body.single-product #dnProductPage .dn-sp-icon small,
  #dnProductPage .dn-sp-icon small{
    font-size:11px !important;
    line-height:1.15 !important;
    margin-top:3px !important;
    white-space:normal !important;
  }
}

@media (min-width: 421px) and (max-width: 767px){
  body.single-product #dnProductPage .dn-sp-icons,
  #dnProductPage .dn-sp-icons{
    grid-auto-columns:calc((100% - 20px) / 3) !important;
  }
}

@media (max-width: 420px){
  body.single-product #dnProductPage .dn-sp-icons,
  #dnProductPage .dn-sp-icons{
    grid-auto-columns:calc((100% - 10px) / 2) !important;
  }

  body.single-product #dnProductPage .dn-sp-icon,
  #dnProductPage .dn-sp-icon{
    min-width:0 !important;
    min-height:74px !important;
    padding:8px 7px !important;
  }
}

/* ==========================================================
   Digitnet V3.0.4.2.51.3 - Adaptive Variant Details Row
   Purpose: keep Qty / Price / Size exactly in the desktop row pattern on mobile.
   Scope: CSS-only. Does not change WooCommerce/product/variant/cart logic.
   ========================================================== */

/* Global single-product safeguard: the details pill remains a 3-column row and scales to its container. */
body.single-product #dnProductPage .dn-variant-details,
body.single-product #dnProductPage #dnVariantDetails,
#dnProductPage .dn-variant-details,
#dnProductPage #dnVariantDetails{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  max-width:min(100%, 575px) !important;
  min-width:0 !important;
}

body.single-product #dnProductPage .dn-variant-details span,
body.single-product #dnProductPage #dnVariantDetails span,
#dnProductPage .dn-variant-details span,
#dnProductPage #dnVariantDetails span{
  min-width:0 !important;
}

body.single-product #dnProductPage .dn-variant-details b,
body.single-product #dnProductPage #dnVariantDetails b,
#dnProductPage .dn-variant-details b,
#dnProductPage #dnVariantDetails b{
  white-space:nowrap !important;
}

body.single-product #dnProductPage .dn-variant-details strong,
body.single-product #dnProductPage #dnVariantDetails strong,
#dnProductPage .dn-variant-details strong,
#dnProductPage #dnVariantDetails strong{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* Phone: keep the same 3-column desktop structure, only reduce internal spacing/typography. */
@media (max-width: 767px){
  body.single-product #dnProductPage .dn-variant-details,
  body.single-product #dnProductPage #dnVariantDetails,
  #dnProductPage .dn-variant-details,
  #dnProductPage #dnVariantDetails{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:clamp(5px, 1.8vw, 8px) !important;
    padding:clamp(9px, 2.8vw, 12px) clamp(10px, 3.2vw, 14px) !important;
    border-radius:clamp(14px, 4vw, 18px) !important;
    max-width:100% !important;
  }

  body.single-product #dnProductPage .dn-variant-details b,
  body.single-product #dnProductPage #dnVariantDetails b,
  #dnProductPage .dn-variant-details b,
  #dnProductPage #dnVariantDetails b{
    font-size:clamp(10px, 2.7vw, 12px) !important;
    line-height:1.12 !important;
  }

  body.single-product #dnProductPage .dn-variant-details strong,
  body.single-product #dnProductPage #dnVariantDetails strong,
  #dnProductPage .dn-variant-details strong,
  #dnProductPage #dnVariantDetails strong{
    font-size:clamp(12px, 3.4vw, 16px) !important;
    line-height:1.12 !important;
  }
}

/* Very small phones: still no vertical stacking; allow compact text wrapping inside each column only. */
@media (max-width: 380px){
  body.single-product #dnProductPage .dn-variant-details,
  body.single-product #dnProductPage #dnVariantDetails,
  #dnProductPage .dn-variant-details,
  #dnProductPage #dnVariantDetails{
    gap:5px !important;
    padding:8px 9px !important;
  }

  body.single-product #dnProductPage .dn-variant-details strong,
  body.single-product #dnProductPage #dnVariantDetails strong,
  #dnProductPage .dn-variant-details strong,
  #dnProductPage #dnVariantDetails strong{
    font-size:12px !important;
  }
}