/* Native controls retain the existing site's colors and work without Bootstrap JS. */
.navbar .dropdown { position: relative; }
.navbar .dropdown > .dropdown-menu { display: none; }
.navbar .dropdown.open > .dropdown-menu { display: block; z-index: 1100; }
.sns-shipping { width: 100%; min-width: 0; container: shipping / inline-size; max-width: 820px; margin: 0 auto; padding: 20px 25px; box-sizing: border-box; }
.sns-shipping h1 { font-size: 26px; }
.sns-shipping h2 { font-size: 22px; font-weight: normal; margin: 20px 0 14px; }
.sns-shipping .sns-origin { display: table; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; padding: 12px 15px; min-width: 185px; }
.sns-address-trigger, .sns-checkout { min-width: 210px; }
.sns-shipping-help { color: #800080; font-size: 14px; }
.sns-material-table-wrap { width: 100%; min-width: 0; max-width: 100%; }
.sns-shipping .sns-material-table { width: 100%; max-width: 100%; min-width: 0; table-layout: fixed; box-sizing: border-box; }
.sns-material-table th { vertical-align: bottom; }
.sns-material-table td { vertical-align: middle; }
.sns-material-table .sns-col-material { width: 40%; }
.sns-material-table .sns-col-quantity { width: 15%; }
.sns-material-table .sns-col-action { width: 13%; }
.sns-material-table .sns-col-unit, .sns-material-table .sns-col-cost { width: 16%; }
.sns-material-table th, .sns-material-table td { min-width: 0; overflow-wrap: anywhere; box-sizing: border-box; }
.sns-material-table td:nth-last-child(-n+2) { text-align: right; white-space: normal; }
.sns-shipping form { margin: 0; }
.sns-shipping input, .sns-shipping select { box-sizing: border-box; }
#add-material-form { display: flex; width: 100%; min-width: 0; gap: 8px; align-items: center; }
#cart-material { flex: 1 1 0; width: 0; max-width: 100%; min-width: 0; margin: 0; }
#cart-add-qty, .sns-quantity-form input[type=number] { width: 64px; max-width: 100%; height: 30px; margin: 0; }
.sns-quantity-form .btn { display: block; max-width: 100%; padding-left: 5px; padding-right: 5px; margin-top: 4px; }
#cart-add-qty { flex: 0 1 60px; min-width: 0; }
#add-material-form > .btn { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }
.sns-material-line .sns-cancel-link { max-width: 100%; overflow-wrap: anywhere; }
.sns-empty-cart { text-align: center; }
.sns-cart-total { font-size: 22px; font-weight: bold; border-top: 3px solid #444 !important; }
.sns-total-label { text-align: right; }
.sns-coupon-form { display: flex; gap: 5px; align-items: center; padding: 0 0 18px; }
.sns-coupon-form input { width: 140px; margin: 0; }
.sns-cancel-link { padding: 0; border: 0; background: transparent; color: #007daa; cursor: pointer; text-decoration: underline; font: inherit; }
.sns-shipping-note { margin-top: 20px; line-height: 2; }
.sns-address-dialog { position: fixed; inset: 0; width: 400px; max-width: calc(100% - 32px); height: fit-content; max-height: calc(100vh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 6px; margin: auto; background: white; color: #333; box-shadow: 0 4px 16px #0006; z-index: 2000; }
.sns-address-dialog:not([open]) { display: none; }
.sns-address-dialog::backdrop { background: #000b; }
.sns-address-dialog h2 { margin: 0; padding: 12px 15px; background: #49afc8; color: white; font-size: 20px; font-weight: bold; }
.sns-address-body { padding: 18px; }
.sns-address-body label { display: block; margin: 12px 0 4px; }
.sns-address-body input { width: 100%; min-height: 30px; }
.sns-address-body #cart-zip { width: 130px; }
.sns-address-footer { padding: 15px; border-top: 1px solid #ddd; background: #f5f5f5; text-align: center; }
.sns-address-footer .btn { display: block; min-width: 210px; margin: 0 auto 10px; }
.sns-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .sns-shipping { padding: 12px; } .sns-address-dialog { width: calc(100% - 32px); } }
/* Override fixed widths inherited from the old marketing-page stylesheet. */
#content .sns-shipping h1 { color: #333 !important; width: auto; text-align: left; }
#content .sns-shipping h2 { width: auto; margin: 20px 0 14px; }
#content .sns-shipping p { width: auto; margin: 12px 0 !important; }
#content .sns-shipping p.sns-shipping-help { color: #800080 !important; font-size: 14px; line-height: 1.4; }
#content .sns-shipping .alert-success { color: #468847 !important; }
#content .sns-shipping .sns-address-dialog h2 { width: auto; margin: 0; color: white !important; font-weight: bold !important; font-size: 20px; line-height: 1.3; }
#content .sns-shipping .sns-address-dialog p { width: auto; font-size: 14px; line-height: 1.5; margin: 0 0 14px !important; }
#content .sns-shipping .btn-primary { background: #35a2bd linear-gradient(#52bdd5,#2895b1); border-color: #2f96b0; color: white; }
#content .sns-shipping .sns-shipping-note { color: #555 !important; font-size: 14px; line-height: 2; }
.sns-address-dialog { box-sizing: border-box; overflow-x: hidden; }

/* Stack actual line items when their container is narrow; never force a scrolling table. */
@container shipping (max-width: 560px) {
    .sns-material-table colgroup, .sns-material-table thead { display: none; }
    .sns-shipping .sns-material-table, .sns-material-table tbody { display: block; width: 100%; }
    .sns-material-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width: 100%; }
    .sns-material-table td { display: block; width: auto; border-left: 0; }
    .sns-material-line td:first-child { grid-column: 1 / -1; font-weight: bold; }
    .sns-material-line td:nth-child(2), .sns-material-line td:nth-child(3) { text-align: left; }
    .sns-material-line td[data-label]::before { content: attr(data-label) ": "; font-weight: bold; }
    .sns-material-line .sns-quantity-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .sns-quantity-form .btn { display: inline-block; margin-top: 0; }
    .sns-material-table .sns-material-add-controls, .sns-material-table .sns-empty-cart { grid-column: 1 / -1; }
    .sns-material-table .sns-cart-total { font-size: 18px; }
    .sns-material-table .sns-total-label { text-align: left; }
}