/* Shared desktop markup adapts to mobile; keep legacy mobile templates disabled. */
#miracle-site, #miracle-site .shop-content, #miracle-site .miracle-shell {min-width:0}
#miracle-site .register, #miracle-site .mbskin {max-width:100%}
#miracle-site input, #miracle-site select, #miracle-site textarea {max-width:100%;min-width:0}
#miracle-site .miracle-search-panel form {grid-template-columns:auto minmax(0,1fr) auto auto}
#miracle-site .miracle-login-dialog {max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
body:has(.catalog-modal.is-open) #miracle-top-btn,
body.miracle-login-open #miracle-top-btn {display:none!important}

@media screen and (max-width:1024px) {
  #miracle-site .sod_left, #miracle-site .sod_right {float:none;display:block;width:100%;margin:0 0 24px;min-width:0}
  #miracle-site #smb_my_ov, #miracle-site #smb_my_list {float:none;width:100%;margin-right:0}
}

@media screen and (max-width:860px) {
  #miracle-site .miracle-main-nav {max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
  #miracle-site .miracle-main-nav a {min-height:44px;display:flex;align-items:center}
  #miracle-site .miracle-mobile-toggle {min-width:36px;min-height:44px;padding:8px}
  #miracle-site .miracle-nav-actions {flex-shrink:0}
  #miracle-site .miracle-search-open {min-width:32px;min-height:44px}
  #miracle-site .miracle-login-trigger {min-height:44px}
  /* Keep wide data tables readable and scroll them locally, not the whole page. */
  #miracle-site #sod_bsk .tbl_head01,
  #miracle-site #sod_frm .od_prd_list,
  #miracle-site #sod_fin .od_prd_list,
  #miracle-site #smb_my .tbl_wrap,
  #miracle-site #sod_fin_list,
  #miracle-site #sod_v .tbl_head01 {max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #miracle-site #sod_bsk .tbl_head01 table,
  #miracle-site #sod_frm .od_prd_list table {min-width:640px}
}

@media screen and (max-width:600px) {
  #miracle-site #sod_bsk_list #mod_option_frm {left:50%;width:calc(100% - 28px);max-height:calc(100dvh - 32px);margin:0;transform:translate(-50%,-50%);overflow-y:auto}
  #miracle-site .shop-content:not(.is_index) {padding-top:24px!important;padding-bottom:48px!important}
  #miracle-site .miracle-page-title {font-size:25px!important;margin-bottom:22px!important}
  #miracle-site .miracle-logo {font-size:17px;gap:5px}
  #miracle-site .miracle-logo-mark, #miracle-site .miracle-logo-mark img {width:28px;height:28px;flex-basis:28px}
  #miracle-site .miracle-nav {gap:4px}
  #miracle-site .miracle-nav-actions {gap:3px}
  #miracle-site .miracle-hero h1 {font-size:clamp(29px,8vw,35px)}
  #miracle-site .miracle-hero-actions {gap:12px;flex-wrap:wrap}
  #miracle-site .miracle-footer-bottom a, #miracle-site .miracle-footer-grid p {overflow-wrap:anywhere}
  #miracle-site input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
  #miracle-site select, #miracle-site textarea {font-size:16px}
  #miracle-site #fregisterform .register_form_inner ul {padding:16px}
  #miracle-site #fregisterform .register_form_inner h2 {padding:16px;font-size:17px}
  #miracle-site #fregisterform .mc-company {padding:18px 16px;margin:20px 0}
  #miracle-site #fregisterform label, #miracle-site #fregisterform p {overflow-wrap:anywhere}
  #miracle-site #fregisterform .full_input {width:100%}
  #miracle-site #fregisterform input[type=password] {width:100%;margin-left:0}
  #miracle-site #fregisterform li.half_input {float:none;width:100%;margin-right:0}
  #miracle-site #fregisterform .btn_confirm {display:flex;gap:10px}
  #miracle-site #fregisterform .btn_confirm .btn_submit,
  #miracle-site #fregisterform .btn_confirm .btn_close {display:flex;align-items:center;justify-content:center;float:none;width:auto;flex:1;margin:0;line-height:1.3}
  #miracle-site #captcha {display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%}
  #miracle-site #captcha #captcha_key {width:80px;margin:0}
  #miracle-site #captcha #captcha_info {flex-basis:100%;line-height:1.6;letter-spacing:0;overflow-wrap:anywhere}
  #miracle-site #captcha button {flex-shrink:0}
  #miracle-site .mc-agreements {padding:0;margin:20px 0}
  #miracle-site .mc-agreements .actions {margin:20px 0;gap:8px}
  #miracle-site .mc-agreements .actions button, #miracle-site .mc-agreements .actions a {padding:0 18px}
  #miracle-site #mb_login #login_fs, #miracle-site #mb_login #mb_login_notmb {padding:22px 16px}
  #miracle-site .miracle-login-dialog {padding:28px 20px}
  #miracle-site .miracle-login-options {gap:8px;flex-wrap:wrap}
  #miracle-site #sod_bsk_tot li {float:none;width:100%;padding:14px;border-left:0}
  #miracle-site #sod_bsk_act {display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  #miracle-site #sod_bsk_act a, #miracle-site #sod_bsk_act button, #miracle-site #sod_bsk_act input {max-width:100%;white-space:normal}
  #miracle-site #sod_frm .tbl_frm01 th, #miracle-site #sod_frm .tbl_frm01 td {display:block;width:100%;height:auto}
  #miracle-site #sod_frm .tbl_frm01 th {padding:12px 10px 4px}
  #miracle-site #sod_frm .tbl_frm01 td {padding:4px 10px 14px}
  #miracle-site #sod_frm .tbl_frm01 input:not([type=checkbox]):not([type=radio]), #miracle-site #sod_frm .tbl_frm01 select {max-width:100%}
}
/* Tall certificate packaging: widen artwork by 30%, keeping height and hover effects. */
img[src*="/catalog-tall-v3/"] {scale:1.3 1;transform-origin:center}