/* Mobile storefront v2: staged for iPhone Safari/Android verification before release. */
@media screen and (max-width: 767px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { width:100%; max-width:100%; margin:0; overflow-x:clip; }
  .container,.container-fluid,.container-xxl { width:100%; max-width:100%; }
  .BodyContainer { width:100%!important; max-width:100%!important; padding:0 12px!important; }
  .turram-checkout-tabs { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .turram-checkout-tab { min-width:0; overflow-wrap:anywhere; }
  #checkout-process-1:not([hidden]),#checkout-process-2:not([hidden]),#checkout-process-3:not([hidden]),#checkout-process-4:not([hidden]) { width:100%!important; max-width:100%!important; min-width:0!important; }
  #checkout-process-2:not([hidden]),#checkout-process-3:not([hidden]) { grid-template-columns:minmax(0,1fr)!important; }
  #checkout-process-2>.child,#checkout-process-3>.child { width:100%!important; min-width:0!important; }
  #div_delivery2,#div_pickup { width:100%!important; max-width:100%!important; float:none!important; }
  /* The existing checkout JavaScript controls these sections through inline display styles. */
  #div_delivery2[style*="display: none"],#div_pickup[style*="display: none"] { display:none!important; }
  #div_delivery2[style*="display: block"],#div_pickup[style*="display: block"] { display:block!important; }
  #shipping-address { width:100%!important; margin:0!important; float:none!important; }
  #shipping-address table { width:100%!important; table-layout:fixed; }
  #shipping-address td:first-child { font-size:13px!important; font-weight:600; }
  #checkout-process-2 .child table td { min-width:0!important; }
  #shipping-address tr,#shipping-address td { display:block!important; width:100%!important; max-width:100%!important; }
  #shipping-address input,#shipping-address select,#shipping-address textarea { width:100%!important; max-width:100%!important; min-width:0!important; font-size:16px!important; }
  input,select,textarea { max-width:100%; }
  .table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Mobile-first refinements for all shared storefront templates. */
@media screen and (max-width:767px){
 .container,.container-fluid,.container-xxl{padding-left:12px!important;padding-right:12px!important}
 .row{margin-left:-6px!important;margin-right:-6px!important}
 .row>[class*="col-"]{min-width:0;padding-left:6px!important;padding-right:6px!important}
 .navbar{padding:8px 10px!important}
 .navbar-brand{max-width:75%;min-width:0;white-space:normal}
 .navbar-brand img{width:auto;max-height:46px;object-fit:contain}
 .hero-header{padding:12px 0!important;margin:0 0 12px!important;min-height:0!important}
 .hero-header h1{font-size:clamp(21px,6vw,27px)!important;line-height:1.25}
 .card,.card-body,.modal-content{max-width:100%;min-width:0}
 .card-body{padding:12px!important}
 .btn,input[type=button],input[type=submit],button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .btn{min-height:42px;font-size:14px!important;padding:9px 12px!important}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;min-width:0;max-width:100%;box-sizing:border-box}
 .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .modal-dialog{max-width:calc(100vw - 20px)!important;margin:10px auto!important}
 .modal-header,.modal-body,.modal-footer{padding:12px!important}
 #checkout-process-1>table{width:100%!important;margin-left:0!important;table-layout:fixed}
 #checkout-process-1>table td{overflow-wrap:anywhere}
 #checkout-process-1>table td:first-child{width:70px!important}
 #checkout-process-1 input:not([type=radio]){width:100%!important;max-width:100%!important}
 #checkout-process-2>.child>table,#checkout-process-2>.child>table>tbody>tr>td{max-width:100%!important}
 #div_delivery2>div[style*="width: 75%"]{width:100%!important;float:none!important;margin:8px 0!important}
 #checkout-process-2 .child input:not([type=radio]),#checkout-process-2 .child select,#checkout-process-2 .child textarea{max-width:100%!important}
}

/* Respect the existing step visibility and avoid iOS input auto-zoom. */
@media screen and (max-width:767px){
 #checkout-process-1[hidden],#checkout-process-2[hidden],#checkout-process-3[hidden],#checkout-process-4[hidden]{display:none!important}
 #div_delivery2[style*="display: none"],#div_pickup[style*="display: none"]{display:none!important}
 #div_delivery2[style*="display: block"],#div_pickup[style*="display: block"]{display:block!important}
 input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],select,textarea{font-size:16px!important}
 #shipping-address textarea{resize:vertical}
}

/* Stacked legacy tables on narrow screens; keep order totals legible. */
@media(max-width:767px){
 .BodyContainer table:not(.table-responsive table){max-width:100%;}
 .BodyContainer td,.BodyContainer th{overflow-wrap:anywhere;word-break:normal}
 #checkout-process-2 .child:nth-of-type(2){min-width:0!important;overflow-wrap:anywhere}
 #checkout-process-2 .child:nth-of-type(2) table{width:100%!important;max-width:100%!important}
 #checkout-process-2 .child:nth-of-type(2) td{padding:6px 3px!important;font-size:14px!important}
 #checkout-process-2 #show_total_value{font-size:21px!important;white-space:normal!important}
 #checkout-process-2 #show_delivery_value{font-size:14px!important;white-space:normal!important}
 #checkout-process-2 #btn_place_order{width:100%!important;max-width:100%!important}
 #checkout-process-2 #btn_place_order input{width:100%!important;min-height:46px!important}
 .footer,.footer .container{max-width:100%!important}
}

/* Mobile account, cart, and confirmation views. */
@media screen and (max-width:767px){
 .BodyContainer>div,.BodyContainer>section{max-width:100%;min-width:0}
 .BodyContainer input[type=button],.BodyContainer input[type=submit]{max-width:100%;min-height:44px}
 .BodyContainer .form-control{width:100%;max-width:100%;font-size:16px!important}
 .BodyContainer .form-group{margin-bottom:12px}
 .BodyContainer h1{font-size:24px!important;line-height:1.25}
 .BodyContainer h2{font-size:21px!important;line-height:1.3}
 .BodyContainer h3{font-size:18px!important;line-height:1.35}
 #continue-shopping,#proceed-to-pay{width:100%!important;max-width:100%!important;margin:6px 0!important}
 .table-responsive table{min-width:0}
 .table-responsive th,.table-responsive td{padding:6px!important;white-space:normal;overflow-wrap:anywhere}
}

/* Cart: legacy row font sizes were viewport units and edit control was only 3vw wide. */
@media screen and (max-width:767px){
 .turram-cart-scroll{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 .turram-cart-table{min-width:660px!important;width:100%;border-collapse:separate}
 .turram-cart-table td{font-size:13px!important;vertical-align:middle}
 .turram-cart-table .product-row td div{font-size:13px!important;line-height:1.4!important}
 .turram-cart-table .product-row td img{width:48px!important;height:48px!important;object-fit:cover}
 .turram-cart-table .product-row button[data-target="#exampleModalScrollable"]{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:5px!important}
 .turram-cart-table .remove-item-btn{min-width:36px!important;min-height:36px!important}
 #cart_message_div .close{margin-left:0!important;position:absolute;right:10px;top:5px}
}

/* Phone cart cards: transform the existing eight-column cart without touching PHP calculations. */
@media(max-width:767px){
 .turram-cart-scroll{overflow:visible!important;border:0!important;box-shadow:none!important;background:transparent!important}
 .turram-cart-table{display:block!important;min-width:0!important;width:100%!important;border:0!important;background:transparent!important}
 .turram-cart-table>tbody{display:block!important;width:100%!important}
 .turram-cart-table>tbody>tr:first-child{display:none!important}
 .turram-cart-table tr.product-row{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;gap:5px 9px;width:100%!important;min-width:0!important;margin:0 0 8px!important;padding:12px!important;border:1px solid #e5e7eb!important;border-radius:12px!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.04)!important}
 .turram-cart-table tr.product-row>td{display:block!important;min-width:0!important;width:auto!important;padding:2px!important;text-align:left!important;align-self:center}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(1){display:none!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(2){grid-column:1;grid-row:1/3}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(3){grid-column:2/4;grid-row:1;overflow-wrap:anywhere;font-weight:600}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(4){grid-column:2;grid-row:2}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(5){display:none!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(6){grid-column:2;grid-row:3}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(6)::before{content:"Qty: ";font-weight:600}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(7){grid-column:3;grid-row:3;text-align:right!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(8){grid-column:3;grid-row:2;text-align:right!important;font-weight:700}
 .turram-cart-table tr[id^="item-modifier-"]{display:block!important;margin:-8px 0 8px!important;padding:6px 12px 8px!important;background:#f9fafb!important;border-top:0!important}
 .turram-cart-table tr[id^="item-modifier-"]>td{display:none!important}
 .turram-cart-table tr[id^="item-modifier-"]>td:nth-child(3),.turram-cart-table tr[id^="item-modifier-"]>td:nth-child(4){display:block!important;width:100%!important}
 .turram-cart-table tr[id^="item-description-"]{display:flex!important;justify-content:space-between;gap:10px;padding:7px 12px!important;margin:-8px 0 14px!important;border-top:0!important;background:#f9fafb!important}
 .turram-cart-table tr[id^="item-description-"]>td{display:none!important}
 .turram-cart-table tr[id^="item-description-"]>td:nth-child(4),.turram-cart-table tr[id^="item-description-"]>td:nth-child(8){display:block!important}
}

/* iOS safe-area padding and mobile cart legibility. */
@media(max-width:767px){
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 .turram-cart-table tr[id^="item-modifier-"]>td:nth-child(4){font-size:13px!important;color:#475467}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(3) button{display:inline-flex!important;align-items:center;justify-content:center}
 .turram-cart-table tr[id^="item-description-"]>td:nth-child(8){text-align:right!important}
}

/* Small phones: remove horizontal clipping from cart cards and action controls. */
@media(max-width:390px){
 .turram-cart-table tr.product-row{grid-template-columns:48px minmax(0,1fr) auto;gap:4px 7px;padding:9px!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(2) img{width:44px!important;height:44px!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(3){font-size:13px!important}
 .turram-cart-table tr[id^="item-details-"]>td:nth-child(8){font-size:13px!important}
 #continue-shopping,#proceed-to-pay{display:block!important;width:100%!important}
}

/* Account pages: legacy 20%-30% left offsets and 3-column form tables are desktop-only. */
@media screen and (max-width:767px){
 #edit-profile,#change-password{float:none!important;margin:0!important;padding:12px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
 #edit-profile>table,#change-password>table{display:block!important;width:100%!important;border-spacing:0!important}
 #edit-profile>table>tbody,#change-password>table>tbody{display:block!important;width:100%!important}
 #edit-profile>table>tbody>tr,#change-password>table>tbody>tr{display:block!important;width:100%!important;margin-bottom:12px!important}
 #edit-profile>table>tbody>tr>td,#change-password>table>tbody>tr>td{display:block!important;width:100%!important;max-width:100%!important;padding:3px 0!important;box-sizing:border-box!important}
 #edit-profile>table>tbody>tr>td:nth-child(2),#change-password>table>tbody>tr>td:nth-child(2){display:none!important}
 #edit-profile>table>tbody>tr>td:first-child,#change-password>table>tbody>tr>td:first-child{font-weight:600!important;font-size:14px!important}
 #edit-profile>table>tbody>tr>td[colspan],#change-password>table>tbody>tr>td[colspan]{display:none!important}
 #edit-profile input,#edit-profile select,#change-password input{max-width:100%!important;width:100%!important;box-sizing:border-box!important}
 #edit-profile #edit-profile-btn,#change-password #change-password-btn{min-height:46px!important}
 #printTable{width:100%!important;max-width:100%!important;margin:0 auto!important;table-layout:fixed}
 #printTable td{font-size:13px!important;overflow-wrap:anywhere}
}

/* Mobile checkout layout correction based on real Android screenshots, 2026-10-17. */
@media screen and (max-width:767px){
 html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
 *,*::before,*::after{box-sizing:border-box}
 .BodyContainer{width:100%!important;max-width:100vw!important;padding:0 12px!important;margin:12px auto 24px!important;overflow:visible!important}
 .turram-checkout-back,.turram-checkout-tabs{width:100%!important;max-width:100vw!important;padding-left:12px!important;padding-right:12px!important;box-sizing:border-box!important}
 .turram-checkout-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 .turram-checkout-tab{width:100%!important;min-width:0!important;font-size:11px!important;padding:10px 3px!important;line-height:1.35!important;overflow-wrap:anywhere}
 #checkout-process-1:not([hidden]){width:100%!important;max-width:100%!important;margin:0!important;padding:18px 14px!important;overflow:visible!important}
 #checkout-process-1>span:first-of-type{display:block!important;font-size:18px!important;margin:0 0 14px!important;line-height:1.4!important}
 #checkout-process-1>table,#checkout-process-1>table>tbody{display:block!important;width:100%!important;max-width:100%!important;table-layout:auto!important;border-spacing:0!important;margin:0!important}
 #checkout-process-1>table>tbody>tr{display:block!important;width:100%!important;margin:0 0 14px!important}
 #checkout-process-1>table>tbody>tr>td{display:block!important;width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;min-width:0!important}
 #checkout-process-1>table>tbody>tr>td:first-child{width:100%!important;padding:0 0 5px!important;font-weight:600!important}
 #checkout-process-1>table>tbody>tr>td:first-child:empty{display:none!important}
 #checkout-process-1 input:not([type=radio]):not([type=button]){display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:46px!important;font-size:16px!important}
 #checkout-process-1 input[type=button]{width:100%!important;max-width:100%!important;min-height:48px!important;margin-top:10px!important}
 #checkout-process-1 input[type=radio]{display:inline-block!important;vertical-align:middle!important;margin-right:9px!important}
 #checkout-process-1 #password-container{max-width:100%!important}
 #checkout-process-1 #password-container input{width:100%!important}
 #checkout-process-1 [id$="_message_div"],#checkout-process-1 .alert{max-width:100%!important;overflow-wrap:anywhere}
 #checkout-process-2:not([hidden]),#checkout-process-3:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
 #checkout-process-2>.child,#checkout-process-3>.child{width:100%!important;max-width:100%!important;min-width:0!important;padding:18px 14px!important;margin:0!important;overflow:visible!important}
 #checkout-process-2>.child>span.btn{margin-bottom:16px!important}
 #checkout-process-2 .child table{width:100%!important;max-width:100%!important;table-layout:auto!important}
 #checkout-process-2 .child td{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}
 #checkout-process-2 #shipping-address{margin:0!important;width:100%!important;max-width:100%!important}
 #checkout-process-2 #shipping-address table,#checkout-process-2 #shipping-address tbody,#checkout-process-2 #shipping-address tr,#checkout-process-2 #shipping-address td{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
 #checkout-process-2 #shipping-address tr{margin-bottom:14px!important}
 #checkout-process-2 #shipping-address td{padding:2px 0!important}
 #checkout-process-2 #shipping-address td:first-child{padding-bottom:5px!important;font-weight:650!important}
 #checkout-process-2 #shipping-address input,#checkout-process-2 #shipping-address select,#checkout-process-2 #shipping-address textarea{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;font-size:16px!important}
 #checkout-process-2 #div_pickup,#checkout-process-2 #div_delivery2{max-width:100%!important;min-width:0!important}
 #checkout-process-2 #radio_order_type1,#checkout-process-2 #radio_order_type2{width:18px!important;height:18px!important}
 #checkout-process-2 .child>span[style*="margin-left: 25%"]{margin-left:0!important;display:inline-block!important;margin:10px 0 14px 16px!important}
 #checkout-process-2 .child>span:has(>input[name="radio_order_type"]){font-size:16px!important;white-space:nowrap}
 #checkout-process-2 #btn_place_order{grid-column:1!important;width:100%!important}
 #checkout-process-2 #btn_place_order input{width:100%!important;min-height:48px!important}
}

/* Checkout fulfilment controls: readable, touch-friendly and responsive. */
.turram-fulfilment-choice{display:inline-flex!important;align-items:center!important;gap:11px;vertical-align:top;min-width:180px;max-width:100%;padding:12px 16px;margin:0 10px 12px 0!important;border:2px solid #d5dce4;border-radius:12px;background:#fff;color:#1d2939!important;cursor:pointer;box-sizing:border-box}
.turram-fulfilment-choice:has(input:checked){border-color:#20794d;background:#edf8f1}
.turram-fulfilment-choice input{flex:none;width:20px!important;height:20px!important;margin:0!important;accent-color:#20794d}
.turram-fulfilment-choice span{display:flex;flex-direction:column;gap:3px;min-width:0}
.turram-fulfilment-choice strong{font-size:16px;color:#1d2939}
.turram-fulfilment-choice small{font-size:12px;color:#475467;line-height:1.4}
.turram-fulfilment-choice:focus-within{outline:3px solid rgba(32,121,77,.24);outline-offset:2px}
@media(max-width:767px){.turram-fulfilment-choice{display:flex!important;width:100%;margin:0 0 10px!important;min-height:64px}.turram-fulfilment-choice strong{font-size:16px!important}#div_pickup,#div_delivery2{clear:both!important;margin-top:14px!important}#div_pickup label,#div_delivery2 label{display:block;margin:10px 0 5px;font-weight:600}#div_pickup input,#div_pickup select,#div_delivery2 input,#div_delivery2 select{min-height:44px}}

/* Responsive container and cart overflow patch - 2026-10-18 */
@media screen and (max-width:1199px){
 .MainContainer,.HeaderContainer{width:100%!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
 .HeaderContent{width:100%!important;max-width:100%!important;margin-left:0!important;box-sizing:border-box!important}
 .BodyContainer{width:100%!important;max-width:100%!important;margin:12px auto 24px!important;box-sizing:border-box!important}
 #checkout-process-1{max-width:100%!important;box-sizing:border-box!important}
 .navbar #cart{width:auto!important;max-width:125px!important;padding-left:10px!important;padding-right:10px!important}
}