/* Warehouse (WMS) — product page sizes */
.wms-availability { margin: 6px 0 10px; font-size: 15px; font-weight: 600; color: #222; }
.wms-av-value { font-weight: 700; }
.wms-av-in .wms-av-value { color: #2e9d2e; }
.wms-av-low .wms-av-value { color: #f39c12; }
.wms-av-out .wms-av-value { color: #999; }

/* Size boxes */
.wms-sizes-style .wms-size { display: inline-block; margin: 0 8px 8px 0; padding: 0; vertical-align: top; }
.wms-sizes-style .wms-size + .wms-size { margin-top: 0; }

/* Default theme: the label is the box */
.wms-sizes-style:not(.wms-j) .wms-size label { position: relative; display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; margin: 0; padding: 0 10px; border: 1.5px solid #222; background: #fff; color: #222; font-weight: 700; cursor: pointer; }
.wms-sizes-style:not(.wms-j) .wms-size input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
.wms-sizes-style:not(.wms-j) .wms-size.wms-checked label { background: #0a8a0a; border-color: #0a8a0a; color: #fff; }
.wms-sizes-style:not(.wms-j) .wms-size.wms-out label { border-color: #ccc; color: #aaa; cursor: not-allowed; background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc 50%, transparent calc(50% + 1px)); }

/* Journal 3: the option wrapper is the box. Journal's own option rules are
   very specific (.product-info .product-details .product-options .push-option …),
   so the colours are forced. */
.wms-sizes-style.wms-j .wms-size label { margin: 0; }
.wms-sizes-style.wms-j .wms-size .option-wrapper { display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 10px; border: 1.5px solid #222 !important; border-radius: 0 !important; background: #fff !important; color: #222 !important; box-shadow: none !important; font-weight: 700; }
.wms-sizes-style.wms-j .wms-size .option-value { font-weight: 700; color: inherit !important; }
.wms-sizes-style.wms-j .wms-size:not(.wms-out) .option-wrapper:hover { border-color: #0a8a0a !important; }
.wms-sizes-style.wms-j .wms-size.wms-checked .option-wrapper { background: #0a8a0a !important; border-color: #0a8a0a !important; color: #fff !important; }
.wms-sizes-style.wms-j .wms-size.wms-out .option-wrapper { border-color: #ccc !important; color: #aaa !important; cursor: not-allowed; background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc 50%, transparent calc(50% + 1px)) !important; }

.wms-sizes .wms-size.wms-out label { cursor: not-allowed; }
.wms-sizes:not(.wms-sizes-style) .wms-size.wms-out { opacity: .45; text-decoration: line-through; }