/* ============================================================
   InsFollowTR V26 — live-ready responsive QA & checkout polish
   ============================================================ */

/* 1) Page-level horizontal overflow protection.
   `clip` prevents off-canvas decorative elements from creating a white
   scrollable strip without introducing a scrolling container that can
   interfere with sticky UI. */
html{max-width:100%;overflow-x:clip}
body.site-body{width:100%;max-width:100%;min-width:0;overflow-x:clip;position:relative}
.site-body main,.site-body header,.site-body footer,.site-body section{max-width:100%;min-width:0}
.site-body .container,.site-body .narrow{max-width:100%;min-width:0}
.site-body img,.site-body svg,.site-body video,.site-body iframe{max-width:100%}
.site-body *{min-width:0}
@supports not (overflow:clip){html,body.site-body{overflow-x:hidden}}

/* Decorative hero elements are allowed to float, but never widen the page. */
.v7-hero,.v7-visual-stage,.v8-public .v7-hero-grid,.v8-public .v8-order-widget{max-width:100%}
.v7-hero{overflow-x:clip}
.v7-visual-stage{overflow:visible}
.v8-select-portal{max-width:calc(100vw - 24px)!important;box-sizing:border-box}

/* 2) Checkout layout: all grid children may shrink safely. */
.checkout-layout,.checkout-card,.checkout-form,.checkout-block,.checkout-summary,.two-col{min-width:0}
.checkout-card{overflow:hidden}
.checkout-form label,.checkout-form label>*{min-width:0}
.checkout-form input,.checkout-form textarea,.checkout-form select{max-width:100%}

/* Package cards: quantity and price have dedicated rows, so they cannot collide. */
.v25-package-options{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  align-items:stretch!important;
}
.v25-package-option{display:block!important;min-width:0!important;height:100%}
.v25-package-option>span{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:126px!important;
  padding:16px 12px 13px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:0!important;
  overflow:hidden!important;
}
.v25-package-option.is-popular>span{padding-top:34px!important}
.v25-package-quantity{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:flex-end!important;
  gap:5px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.v25-package-quantity strong{
  display:block!important;
  flex:0 1 auto!important;
  max-width:100%!important;
  margin:0!important;
  font:760 clamp(14px,1.25vw,18px)/1.08 Sora,Inter,sans-serif!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.v25-package-quantity small{
  display:block!important;
  flex:none!important;
  margin:0 0 1px!important;
  padding:0!important;
  font:700 7px/1.1 Inter,sans-serif!important;
  color:#989eaa!important;
}
.v25-package-price{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:9px 0 0!important;
  padding:0!important;
  font:760 clamp(10px,.95vw,12px)/1.2 Sora,Inter,sans-serif!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.v25-package-option .v10-shopier-label{
  position:static!important;
  display:block!important;
  flex:0 0 auto!important;
  max-width:100%!important;
  margin:5px 0 0!important;
  padding:0!important;
  font-size:6px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.v25-package-option .v10-order-popular{
  left:10px!important;right:auto!important;top:9px!important;
  max-width:calc(100% - 42px)!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.v25-package-option>span>i{right:10px!important;top:10px!important;z-index:2}

/* 3) Payment methods are real visual choices rather than a dropdown. */
.v26-payment-cards{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  gap:9px!important;
}
.v25-payment-card{min-width:0!important;overflow:hidden!important}
.v25-pay-copy{min-width:0!important}
.v25-pay-copy small,.v25-pay-copy strong,.v25-pay-copy em{max-width:100%!important}
.v25-payment-card[aria-checked="true"]{box-shadow:0 0 0 3px rgba(110,87,228,.08),0 10px 26px rgba(69,53,145,.06)}

/* Bank details are intentionally post-order only. */
.checkout-form .v24-bank-preview,.checkout-form .v24-bank-grid,.checkout-form .bank-box{display:none!important}

/* Preselected legal acknowledgements remain editable, but require no initial click. */
.v26-legal-preselected label{background:linear-gradient(180deg,#fbfcfd,#f8fafb)!important}
.v26-legal-preselected input:checked{accent-color:#6550d3}

/* Long IBANs / references cannot widen the result screen. */
.v24-order-reference,.v24-bank-card,.v24-bank-main,.v24-success-summary article{min-width:0}
.v24-order-reference strong,.v24-bank-main strong,.v24-success-summary strong{
  max-width:100%;overflow-wrap:anywhere;word-break:break-word
}
.v24-bank-main strong{font-variant-numeric:tabular-nums}

/* Shopier modal respects dynamic mobile viewport and safe areas. */
.v25-shopier-modal,.v25-shopier-loading{width:100%;max-width:100%;height:100vh;height:100dvh}
.v25-shopier-modal{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.v25-shopier-close{right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top))}
.v25-shopier-modal.three-d-active .v25-shopier-shell{height:100vh!important;height:100dvh!important;max-width:100%!important}

/* 4) Tablet */
@media(max-width:1120px){
  .v25-package-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .v23-blog-hero>.container,.v23-article-head{min-width:0}
}

@media(max-width:920px){
  .checkout-layout{grid-template-columns:minmax(0,1fr)!important}
  .checkout-summary{position:static!important;width:100%}
  .v7-visual-stage{overflow-x:clip}
}

/* 5) Mobile QA. 16px form controls prevent iOS Safari auto-zoom, which is a
   common cause of the viewport appearing shifted with a white strip. */
@media(max-width:720px){
  body.v10-public{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  body.v26-mobile-menu-open{overflow:hidden!important}
  .site-body .container,.site-body .narrow,.v7-public .container,.v6-public .container{
    width:calc(100% - 24px)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important
  }
  .v6-header .nav-wrap{min-width:0}
  .brand-copy{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand-copy small{overflow:hidden;text-overflow:ellipsis}
  .main-nav.v6-main-nav{
    left:12px!important;right:12px!important;top:calc(100% + 6px)!important;
    width:auto!important;max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 98px)!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain
  }
  .main-nav.v6-main-nav a,.main-nav.v6-main-nav .nav-dropdown-trigger{font-size:12px!important}
  .i18n-mobile-languages a{font-size:10px!important;min-width:38px!important}

  /* Inputs stay readable and do not trigger iOS focus zoom. */
  .checkout-form input,.checkout-form textarea,.checkout-form select,
  .track-form input,.track-form select,.account-section input,.account-section textarea{
    font-size:16px!important
  }
  .checkout-card{padding:18px!important;border-radius:18px!important}
  .checkout-form{gap:15px!important}
  .checkout-block{gap:13px!important;padding-bottom:19px!important}
  .checkout-block-title{align-items:flex-start!important}
  .checkout-block-title>span{width:36px!important;height:36px!important;flex:0 0 36px!important}
  .checkout-block-title h3{font-size:14px!important;line-height:1.3!important}
  .checkout-block-title p{font-size:11px!important;line-height:1.45!important}
  .checkout-form label>span,.v24-target-label>span{font-size:12px!important}
  .field-help,.v24-target-label>small{font-size:10px!important;line-height:1.45!important}

  .two-col{grid-template-columns:minmax(0,1fr)!important;gap:11px!important}
  .v25-contact-coupon{grid-template-columns:minmax(0,1fr)!important}

  .v25-package-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .v25-package-option>span{min-height:120px!important;padding:15px 11px 12px!important}
  .v25-package-option.is-popular>span{padding-top:34px!important}
  .v25-package-quantity strong{font-size:15px!important}
  .v25-package-quantity small{font-size:9px!important}
  .v25-package-price{font-size:12px!important;margin-top:8px!important}
  .v25-package-option .v10-shopier-label{font-size:8px!important}
  .v25-package-option .v10-order-popular{font-size:7px!important}

  .v25-payment-title{align-items:flex-start!important}
  .v25-payment-title>div>span{font-size:12px!important}
  .v25-payment-title>div>small{font-size:10px!important;line-height:1.4!important}
  .v26-payment-cards{grid-template-columns:minmax(0,1fr)!important}
  .v25-payment-card{min-height:78px!important;grid-template-columns:43px minmax(0,1fr) 24px!important;padding:12px!important}
  .v25-pay-icon{width:41px!important;height:41px!important}
  .v25-pay-copy small{font-size:9px!important}
  .v25-pay-copy strong{font-size:12px!important;margin:2px 0!important}
  .v25-pay-copy em{font-size:9px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important}
  .v25-shopier-help{font-size:9px!important}

  .v24-target-field{gap:8px!important}
  .v24-target-label{align-items:flex-end!important;gap:8px!important}
  .v24-target-input{grid-template-columns:40px minmax(0,1fr) auto!important}
  .v24-target-input>span{height:52px!important;font-size:16px!important}
  .v24-target-input input{height:52px!important;min-height:52px!important;padding-left:11px!important;padding-right:8px!important}
  .v24-target-input button{font-size:10px!important;margin-right:6px!important;padding:8px!important}
  .v24-target-help{gap:5px!important}
  .v24-target-help span{font-size:9px!important;line-height:1.45!important}
  .v24-target-preview small{font-size:8px!important}.v24-target-preview strong{font-size:10px!important}.v24-target-preview em{font-size:8px!important}

  .v17-checkout-legal{gap:7px!important}
  .v17-checkout-legal label{padding:12px!important;gap:10px!important}
  .v17-checkout-legal span{font-size:10px!important;line-height:1.55!important}
  .v17-checkout-trust{align-items:flex-start!important}
  .v17-checkout-trust strong{font-size:11px!important}.v17-checkout-trust p{font-size:9px!important;line-height:1.45!important}

  .checkout-summary{padding:17px!important}
  .checkout-summary h3{font-size:16px!important}
  .summary-line,.summary-total{font-size:11px!important}.summary-total strong{font-size:22px!important}
  .summary-safe p{font-size:9px!important}

  .v24-order-reference{align-items:flex-start!important;flex-wrap:wrap!important}
  .v24-order-reference>div{flex:1 1 180px!important}
  .v24-order-reference strong{font-size:13px!important;letter-spacing:.025em!important}
  .v24-bank-card{grid-template-columns:38px minmax(0,1fr) 42px!important;gap:8px!important}
  .v24-bank-main strong{font-size:12px!important;letter-spacing:.025em!important;line-height:1.45!important}
  .v24-copy-icon{width:40px!important}
  .v24-payment-panel{padding:15px!important}
  .v24-payment-panel h3{font-size:15px!important}.v24-payment-panel header p{font-size:9px!important}

  /* Mobile bottom navigation accounts for iPhone safe area and never widens viewport. */
  .v10-mobile-nav{
    left:8px!important;right:8px!important;bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:calc(100vw - 16px)!important;height:66px!important
  }
  .v10-mobile-nav a>small{font-size:9px!important}

  /* Homepage decorative layer stays inside the viewport on touch layouts. */
  .v8-public .v7-visual-stage{width:100%!important;max-width:100%!important;overflow:clip!important}
  .v8-public .v8-order-widget{width:calc(100% - 4px)!important;max-width:520px!important}
  .v8-public .v7-social-orb,.v8-public .v7-glass-chip{max-width:100%}

  /* Blog and content pages */
  .v23-blog-search{width:100%!important;max-width:100%!important}
  .v23-blog-search input{font-size:16px!important}
  .v23-blog-categories>.container{width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .v23-article-head figure{max-width:100%!important}
  .v23-prose{overflow-wrap:anywhere}
  .v17-footer-policies{min-width:0!important}
}

@media(max-width:520px){
  .order-head{padding-top:36px!important}
  .order-head .container{gap:12px!important}
  .order-head h1{font-size:31px!important}
  .order-head-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .order-head-actions .btn{width:100%!important;text-align:center!important}

  .v25-package-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v25-package-option>span{min-height:116px!important}
  .v25-package-quantity strong{font-size:14px!important}
  .v25-package-price{font-size:11px!important}

  .v24-success-top h2{font-size:21px!important}.v24-success-top p{font-size:10px!important}
  .v24-success-actions{display:grid!important;grid-template-columns:1fr!important}
  .v24-success-actions .btn,.v24-new-order-link{width:100%!important}

  .v6-footer-top,.v6-footer-bottom{min-width:0!important}
  .v6-footer-bottom>div{flex-wrap:wrap!important}
}

@media(max-width:360px){
  .site-body .container,.site-body .narrow,.v7-public .container,.v6-public .container{width:calc(100% - 18px)!important}
  .v25-package-options{grid-template-columns:minmax(0,1fr)!important}
  .v25-package-option>span{min-height:100px!important}
  .v25-package-quantity strong{font-size:16px!important}
  .v25-package-price{font-size:12px!important}
  .v24-target-input{grid-template-columns:36px minmax(0,1fr)!important}
  .v24-target-input button{grid-column:1/-1;margin:0 6px 6px!important}
  .order-head-actions{grid-template-columns:1fr!important}
}

/* Landscape phones / short mobile viewports */
@media(max-height:520px) and (max-width:900px){
  .main-nav.v6-main-nav{max-height:calc(100dvh - 82px)!important}
  .v25-shopier-loading-card{padding:18px!important}
  .v25-shopier-loading-card .v25-spinner{width:38px;height:38px}
}

/* Respect reduced motion for production accessibility. */
@media(prefers-reduced-motion:reduce){
  .v25-payment-card,.v25-package-option>span,.v24-bank-card,.v10-mobile-nav,.v7-social-orb,.v7-glass-chip{transition:none!important;animation:none!important}
}
