/* /public/assets/littoral/product-quantity.css */
:root{--product-control-size:44px}
.public-topbar .top-actions>.navbar-account{min-height:var(--product-control-size)}
.product-card{container-type:inline-size}
.product-card .product-body{padding-bottom:12px}
.product-card .card-action-row{margin-top:auto;padding-top:12px;flex-wrap:wrap}
[data-sync-quantity]{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;width:100%;min-width:0}
.card-action-row [data-sync-quantity]{flex:1 0 100%;width:100%;min-width:0;gap:8px}
[data-sync-quantity] .product-quantity-stepper{grid-column:1/-1;grid-row:1;display:flex;align-items:center;min-width:0;min-height:var(--product-control-size);box-sizing:border-box;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
[data-sync-quantity]:has([data-product-view]) .product-quantity-stepper{grid-column:2/-1}
[data-sync-quantity] .product-quantity-stepper input{width:48px!important;flex:1 1 48px!important;min-width:40px;min-height:var(--product-control-size);height:var(--product-control-size);box-sizing:border-box;padding:6px 2px!important;margin:0;border:0!important;border-radius:0;text-align:center;font-size:16px}
[data-sync-quantity] .product-quantity-stepper button{width:44px;min-width:44px;flex:0 0 44px;min-height:var(--product-control-size);height:var(--product-control-size);padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:23px}
[data-sync-quantity] [data-quantity-apply]{grid-column:1/3;grid-row:2;display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:var(--product-control-size);height:var(--product-control-size);padding:10px 14px;white-space:nowrap;font-size:14px;box-sizing:border-box}
[data-sync-quantity] [data-product-remove],[data-sync-quantity] a[data-product-view]{width:44px;min-width:44px;min-height:var(--product-control-size);height:var(--product-control-size);padding:10px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
[data-sync-quantity] a[data-product-view]{grid-column:1;grid-row:1}
[data-sync-quantity] [data-product-remove]{grid-column:3;grid-row:2}
[data-sync-quantity] [data-product-remove] svg,[data-sync-quantity] a[data-product-view] svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-sync-quantity] [data-product-remove]:disabled{opacity:.35;cursor:default}
[data-sync-quantity] .product-quantity-stepper button:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
/* On wide cards all commands fit in their requested order on one row. */
@container(min-width:370px){
 .product-card [data-sync-quantity]:has([data-product-view]){grid-template-columns:44px 138px minmax(76px,1fr) 44px}
 .product-card [data-sync-quantity]:has([data-product-view]) .product-quantity-stepper{grid-column:2;grid-row:1}
 .product-card [data-sync-quantity]:has([data-product-view]) [data-quantity-apply]{grid-column:3;grid-row:1}
 .product-card [data-sync-quantity]:has([data-product-view]) [data-product-remove]{grid-column:4;grid-row:1}
}
.product-sheet-info [data-sync-quantity],.compatible-content [data-sync-quantity]{width:100%}
/* Desktop keeps three columns. The DOM also follows the mobile reading order. */
.product-sheet-grid>.product-sheet-media{grid-column:1;grid-row:1}
.product-sheet-grid>.product-sheet-purchase{grid-column:2;grid-row:2}
.product-sheet-grid>.product-sheet-info{grid-column:2;grid-row:1}
.product-sheet-grid>.product-sheet-documents{grid-column:1;grid-row:2/span 2;min-width:0}
.product-sheet-grid>.compatible-products{grid-column:3;grid-row:1/span 3}
.product-sheet-purchase [data-sync-quantity]{width:100%}
@media(max-width:900px){
 .product-sheet-grid>.product-sheet-media,.product-sheet-grid>.product-sheet-purchase,.product-sheet-grid>.product-sheet-info,.product-sheet-grid>.product-sheet-documents,.product-sheet-grid>.compatible-products{grid-column:1;grid-row:auto}
 .product-sheet-grid>.product-sheet-media{order:1}
 .product-sheet-grid>.product-sheet-purchase{order:2}
 .product-sheet-grid>.compatible-products{order:3}
 .product-sheet-grid>.product-sheet-info{order:4}
 .product-sheet-grid>.product-sheet-documents{order:5}
}