/***********************************
*********** Product CSS ************
************************************/
.woocommerce div.product .custom_upload_field_container {
    display: block;
}

.woocommerce div.product .custom_upload_field_container>label {
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
    line-height: normal;
}

.woocommerce div.product .uploader_input_file {
    font-size: 95%;
}

/* The Inch/MM toggle sits in its own row directly under the upload dock, right-aligned within that
   row ( per Andy's request ). `.uploader_unit_switch` itself stays `display: inline-flex` ( see its
   own rule further down ), so a plain `text-align: right` on this wrapping row is enough to push it
   to the right without needing flex/justify-content here. */
.woocommerce div.product .uploader_unit_switch_row {
    text-align: right;
    margin-top: 6px;
}

.woocommerce div.product .uploader_files_dock {
    border: 10px dashed #0009C8;
    background-color: #fff;
    width: 100%;
    height: 110px;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    position: relative;
    border-radius: 3px;
    position: relative;
    box-sizing: border-box;
}

.woocommerce div.product .uploader-files-dock-uploader {
    position: absolute;
    width: calc(100% - 40px);
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    line-height: 32px;
    margin: 0 auto;
    float: none;
    text-align: center;
    vertical-align: middle;
}

.woocommerce div.product .uploader-files-dock-uploader p i {
    margin-right: 10px;
}

.woocommerce div.product .uploader-files-dock-uploader span {
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: middle;
}

.woocommerce div.product span.uploader-files-dock-limit {
    position: absolute;
    bottom: 5px;
    right: 10px;
    z-index: 5;
    font-size: 15px;
    color: gray;
}

.woocommerce div.product .uploader-files-dock-uploader label.custom-upload-trigger.button {
    padding: 0 10px;
    display: inline-block;
    line-height: 30px;
    margin: 0;
    cursor: pointer;
    float: none;
    background: #ddd;
    font-weight: 600;
}

.woocommerce div.product .custom-upload-icon {
    font-family: dashicons;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in;
    vertical-align: middle;
}

.woocommerce div.product .custom-upload-icon:before {
    content: "\f316";
}

.woocommerce div.product .uploader_description {
    font-size: 95%;
    color: #666;
    margin: 5px 0 15px 0;
    clear: both;
    display: block;
}

.woocommerce div.product .uploader_notice {
    display: block;
    padding: 5px 10px;
    font-size: 90%;
    margin-top: 5px;
    background: #ffecec;
    color: #e80000;
    clear: both;
}

.woocommerce div.product .uploader_notice bdi {
    display: block;
}

.woocommerce div.product .uploader_files_completed {
    font-size: 95%;
    width: 100%;
    table-layout: fixed;
    margin-top: 15px;
}

.woocommerce div.product .uploader_files_completed .uploader_files_completed_placeholder th {
    font-weight: 500;
    text-align: center;
}

.woocommerce div.product .uploader_files_pending {
    display: block;
    font-size: 95%;
}

.woocommerce div.product .uploader_files_completed>span,
.woocommerce div.product .uploader_files_pending>span {
    display: block;
}

.woocommerce div.product .uploader_files_completed>span *,
.woocommerce div.product .uploader_files_pending>span * {
    vertical-align: middle;
}

.woocommerce div.product .uploader_files_completed>span:last-child,
.woocommerce div.product .uploader_files_pending>span:last-child {
    margin-bottom: 10px;
}

/* Cross-browser/cross-OS delete "X" - a plain CSS-drawn red circle + white X. This used to be a
   Dashicons icon-font glyph ( font-family: dashicons; content: "\f335"; ), but Dashicons isn't
   guaranteed to be enqueued on the storefront front-end by every theme, so the X would sometimes
   render as nothing at all ( reported as invisible on some Windows/desktop browsers, visible on
   macOS Safari - consistent with a missing font rather than a real browser incompatibility ). Drawn
   entirely with CSS box/pseudo-element styling below, so it has no font dependency and renders
   identically everywhere. */
.woocommerce .uploader-delete-file {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #d63638;
    transition: opacity .1s ease-in;
}

.woocommerce .uploader-delete-file:before,
.woocommerce .uploader-delete-file:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.woocommerce .uploader-delete-file:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.woocommerce .uploader-delete-file:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.woocommerce .uploader-delete-file:hover {
    opacity: .8;
}

/* Pinned to the thumb-wrap's own top-left corner ( inside its reserved label gutter ), rather than
   flowing as plain inline content before the wrap - that kept the X button clear of the rotated Height
   label on narrow/portrait thumbnails ( e.g. most TIFF uploads ), where the label's vertical center
   sits much higher up the row and could otherwise land right where the X used to be. */
.woocommerce div.product .uploader-thumb-wrap .uploader-delete-file {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 0;
    z-index: 3;
}

.woocommerce div.product .uploader_progress {
    margin-left: 3px;
    margin-right: 3px;
    font-weight: 600;
}

.woocommerce div.product .uploader_progress {
    margin-left: 3px;
    margin-right: 3px;
    font-weight: 600;
}

.woocommerce div.product table.uploader_files_completed thead,
.woocommerce div.product table.uploader_files_completed tbody,
.woocommerce div.product table.uploader_files_completed tfoot {
    border: 1px solid #f1f1f1;
    background-color: #fefefe;
}

.woocommerce div.product table.uploader_files_completed thead th,
.woocommerce div.product table.uploader_files_completed thead td,
.woocommerce div.product table.uploader_files_completed tfoot th,
.woocommerce div.product table.uploader_files_completed tfoot td {
    padding: .5rem .625rem .625rem;
    font-weight: 700;
    border: none;
}

.woocommerce div.product table.uploader_files_completed thead tr,
.woocommerce div.product table.uploader_files_completed tfoot tr {
    background: transparent;
}

.woocommerce div.product table.uploader_files_completed thead,
.woocommerce div.product table.uploader_files_completed tbody,
table tfoot {
    border: none;
    background-color: rgba(0, 0, 0, 0.01);
}

.woocommerce div.product table.uploader_files_completed thead {
    background: #f8f8f8;
    color: #0a0a0a;
}

.woocommerce div.product table.uploader_files_completed tbody th,
.woocommerce div.product table.uploader_files_completed tbody td {
    padding: .5rem .625rem .625rem;
}

.woocommerce div.product table.uploader_files_completed thead {
    background: rgba(0, 0, 0, 0.02);
    color: inherit;
}

/* Each uploaded file now renders as 3 consecutive rows ( data row, dedicated filename row, warning/
   no-warning row ), not 2 - plain `:nth-child(even)` striped individual ROWS regardless of that
   grouping, so the shading fell out of sync with file boundaries ( sometimes the filename row shaded,
   sometimes the warning row, looking like random noise ). Group rows in 3s instead, and shade every
   other FILE ( 2nd, 4th, 6th... - i.e. rows 4,5,6 then 10,11,12 then 16,17,18... = every row where
   ( position mod 6 ) is 4, 5, or 0 ). */
.woocommerce div.product table.uploader_files_completed tbody tr:nth-child(6n+4),
.woocommerce div.product table.uploader_files_completed tbody tr:nth-child(6n+5),
.woocommerce div.product table.uploader_files_completed tbody tr:nth-child(6n) {
    background-color: rgba(0, 0, 0, 0.03);
}

.woocommerce div.product .uploader_files_completed_titles th {
    text-align: center;
}

.woocommerce div.product .completed.custom-uploaded-file>td {
    position: relative;
}

.woocommerce div.product .completed.custom-uploaded-file>td>.uploader-delete-file {
    position: relative;
}

.woocommerce div.product .completed.custom-uploaded-file>td>bdi {
    word-break: break-all;
}

.woocommerce div.product .completed.custom-uploaded-file>td>strong {
    font-weight: 600;
}

/* Dedicated full-width row for the filename ( spans every column, X button to sub-total price ) so it
   never has to squeeze in next to the thumbnail. */
.woocommerce div.product .uploader-filename-row>td {
    font-size: 95%;
    word-break: break-all;
    padding-top: 0;
}

.woocommerce div.product .uploader-filename-row>td>strong {
    font-weight: 600;
}

.woocommerce div.product form.cart table {
    border-width: 0 0 1px;
}

/* Table is `table-layout: fixed`, so these widths ( set on the header row's th's ) are what actually
   fix each column's width. `.uploader-filename` gets a guaranteed minimum so the thumbnail always has
   room to render without spilling into the Width/Height columns - this matters most once the SQFT/Price
   columns are showing too, since those extra unweighted columns would otherwise squeeze it further. */
.woocommerce div.product .uploader_files_completed .uploader-filename {
    width: 230px;
}

.woocommerce div.product .uploader_files_completed .uploader-width,
.woocommerce div.product .uploader_files_completed .uploader-height {
    width: 120px;
}

.woocommerce div.product .uploader_files_completed .uploader-qty {
    width: 80px;
}

.woocommerce div.product .uploader_files_completed .uploader-sqft {
    width: 70px;
}

.woocommerce div.product .uploader_files_completed .uploader-price {
    width: 90px;
}

/* Inch/MM display-unit toggle.
   Many themes apply their own generic styling to every <button> element on the page ( full width,
   brand color, uppercase text, etc. - the same look as the "Browse..."/"Add to cart" buttons ).
   Our selectors here are already more specific than a bare "button" or ".woocommerce button" rule,
   but `!important` is added defensively so this toggle can't be pulled out of shape by a theme
   stylesheet that happens to load after ours or that used `!important` itself. */
.woocommerce div.product .uploader_unit_switch {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    /* Sits beside the upload dock now (see the flex layout rules near the top of this file) - the
       parent's `gap` already provides spacing, so no margin needed here. */
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, .2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: none !important;
    box-shadow: none !important;
}

.woocommerce div.product .uploader-unit-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.woocommerce div.product .uploader-unit-btn+.uploader-unit-btn {
    border-left: 1px solid rgba(0, 0, 0, .2) !important;
}

.woocommerce div.product .uploader-unit-btn.active {
    background: #333 !important;
    color: #fff !important;
}

/* Horizontal-scroll safety net: if the table ever ends up wider than the space available ( most likely
   in SQFT mode, with 6 columns instead of 4 ), it scrolls instead of visually breaking/getting cut off. */
.woocommerce div.product .uploader_files_completed_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tighter column widths ( and smaller text ) specifically when the SQFT/Price columns are showing, so
   the 6-column table has a much better chance of fitting without needing to scroll at all. */
.woocommerce div.product .uploader-sqft-mode .uploader_files_completed {
    font-size: 88%;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-filename {
    width: 180px;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-width,
.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-height {
    width: 85px;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-qty {
    width: 55px;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-sqft {
    width: 50px;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed .uploader-price {
    width: 65px;
}

.woocommerce div.product .uploader-sqft-mode .uploader_files_completed thead th,
.woocommerce div.product .uploader-sqft-mode .uploader_files_completed tbody td {
    padding: .4rem .4rem .5rem;
}

.woocommerce div.product form.cart .uploader-sqft-mode table.uploader_files_completed input {
    padding: 4px;
    max-width: 55px;
}

.woocommerce div.product .uploader-sqft-mode .uploader-thumb-wrap {
    padding-left: 36px;
    margin-right: 6px;
}

.woocommerce div.product .uploader-sqft-mode .uploader-thumb-canvas {
    max-width: 120px;
    max-height: 120px;
}

.woocommerce div.product form.cart table.uploader_files_completed td {
    padding: 5px 9px;
    border: none;
    background: transparent;
}

.woocommerce div.product form.cart table.uploader_files_completed .completed.custom-uploaded-file>td {
    font-size: 95%;
}

.woocommerce div.product form.cart table.uploader_files_completed .warning.custom-uploaded-file>td {
    color: red;
    font-size: 90%;
}

.woocommerce div.product form.cart table.uploader_files_completed .custom-uploaded-file>td.uploader-sqin,
.woocommerce div.product form.cart table.uploader_files_completed .custom-uploaded-file>td.uploader-sqft,
.woocommerce div.product form.cart table.uploader_files_completed .custom-uploaded-file>td.uploader-price {
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}

.woocommerce div.product form.cart table.uploader_files_completed input {
    text-align: center;
    padding: 5px;
    border: 1px solid #e7e7e7;
    display: inline-block;
    max-width: 70px;
    margin-bottom: 0;
}

.woocommerce div.product form.cart table.uploader_files_completed .uploader-unit {
    display: inline-block;
    margin-left: 5px;
}

.woocommerce div.product .uploader_file_controls {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    line-height: 32px;
}

.woocommerce div.product .uploader_file_controls:before,
.uploader_file_controls:after {
    content: '';
    clear: both;
    display: table;
}

.woocommerce div.product .uploader_file_controls_title {
    float: left;
    font-weight: 600;
}

.woocommerce div.product .uploader_file_control_buttons {
    float: right;
}

.woocommerce div.product .gdwcu-switch-field {
    display: flex;
    margin-bottom: 0px;
    overflow: hidden;
}

.woocommerce div.product .gdwcu-switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.woocommerce div.product .gdwcu-switch-field label {
    background-color: #f4f4f4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
    font-weight: 600;
    margin: 0;
}

.woocommerce div.product .gdwcu-switch-field label:hover {
    cursor: pointer;
}

.woocommerce div.product .gdwcu-switch-field input:checked+label {
    background-color: #03a9f4;
    box-shadow: none;
    color: #fff;
}

.woocommerce div.product .gdwcu-switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.woocommerce div.product .gdwcu-switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}
.custom-uploader-sqin-or-sqft-enabled.woocommerce div.product form.cart div.quantity .qty {
    display: none !important;
}
/* .custom-uploader-sqin-or-sqft-enabled .woocommerce .quantity .qty {
    display: none!important;
    min-width: 90px;
} */

/***********************************
************* Cart CSS *************
************************************/
.woocommerce-cart table.cart .quantity .qty {
    min-width: 90px;
}

/* The client-generated snapshot ( checkerboard + baked-in Width/Height labels ) shown per uploaded
   file on the Cart page. */
/* Sizing/border/spacing now come from an inline style written by render_snapshot_thumbnail_html() in
   class-woocommerce-custom-uploader.php (driven by the "Thumbnail Display Size" setting, and so that
   the same markup still looks right in order emails, which typically strip <style> blocks). This rule
   is just a fallback for anything unusual that strips inline styles instead. */
.uploader-cart-thumb {
    display: block;
    height: auto;
    margin: 4px 0 6px;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* Lightbox for the above thumbnail, opened by includes/assets/js/uploader-lightbox.js on click - shows
   the same image ( already the full-resolution stored snapshot, only shrunk for the inline display via
   the block above ) at its actual size against a dimmed backdrop. Un-scoped ( not `.woocommerce ...` )
   since this overlay is appended directly to <body>, same reasoning as the resize popup on the product
   page. */
body.uploader-lightbox-open {
    overflow: hidden;
}

.uploader-lightbox-overlay {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.uploader-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
    cursor: default;
}

.uploader-lightbox-close {
    position: fixed;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 100001;
}

.woocommerce-cart table.cart .uploader_data_list {
    list-style-type: none;
    margin: 0;
}

.woocommerce-cart table.cart .uploader_data_list>li {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 15px;
    position: relative;
}

.woocommerce-cart table.cart .uploader_data_list>li:before,
.woocommerce-cart table.cart .uploader_data_list>li:after {
    content: '';
    clear: both;
    display: table;
}

.woocommerce-cart table.cart .uploader_data_item_disc {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

.woocommerce-cart table.cart .uploader_data_item {
    width: 100%;
    float: left;
    clear: both;
}

.woocommerce-cart table.cart .uploader_data_item:before,
.woocommerce-cart table.cart .uploader_data_item:after {
    content: '';
    clear: both;
    display: table;
}

.woocommerce-cart table.cart .uploader_data_name {
    float: left;
    width: auto;
    max-width: calc(100% - 55px);
    line-height: 30px;
}

.woocommerce-cart table.cart .uploader_data_qty {
    float: right;
    width: 55px;
}

.woocommerce-cart table.cart .uploader-data-qty {
    display: block;
    width: 100%;
    max-width: 65px;
    padding: 5px 13px;
    padding-right: 0px !important;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    text-align: center;
}

.woocommerce .cart table.uploader_data_table {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .1);
    margin-top: 10px;
    font-size: 12px;
    width: 100%;
}

.woocommerce-cart table.cart table.uploader_data_table th,
.woocommerce-cart table.cart table.uploader_data_table td {
    padding: 15px 15px;
}

.woocommerce-cart table.cart table.uploader_data_table tbody th,
.woocommerce-cart table.cart table.uploader_data_table tfoot td,
.woocommerce-cart table.cart table.uploader_data_table tfoot th {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.woocommerce-cart table.cart table.uploader_data_table>thead>tr>th:nth-child(2) {
    min-width: 85px;
}

.woocommerce-cart table.cart table.uploader_data_table>thead>tr>th:nth-child(3) {
    min-width: 65px;
}

/***********************************
****** Product page thumbnail ******
************************************/
.woocommerce div.product .uploader-thumb-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding-top: 30px;
    padding-left: 52px;
}

/* Shrink-wraps to the canvas's actual rendered box by default, so the labels ( percentage-positioned
   against this element ) stay centered on the image regardless of its aspect ratio. For a very
   thin/short (extreme aspect ratio) image, JS ( gdriveSyncThumbBoxSize() ) grows this box past the
   canvas's own size with an explicit min-width/min-height, whenever the canvas alone would be
   narrower/shorter than its own dimension label needs to be - the flex centering here is what keeps
   the actual image centered (both horizontally and vertically) inside that enlarged box rather than
   pinned to one corner. */
.woocommerce div.product .uploader-thumb-imgbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

.woocommerce div.product .uploader-thumb-wrap.uploader-thumb-ready {
    cursor: zoom-in;
}

.woocommerce div.product .uploader-thumb-wrap.uploader-thumb-ready:hover .uploader-thumb-canvas {
    border-color: #0009C8;
}

.woocommerce div.product .uploader-thumb-canvas {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: #fff;
}

.woocommerce div.product .uploader-thumb-wrap.uploader-thumb-unavailable .uploader-thumb-canvas {
    display: none;
}

/* Fallback placeholder icon shown when a preview couldn't be generated ( e.g. an exotic/unsupported
   TIFF variant ) - the actual file upload is completely unaffected either way. */
.woocommerce div.product .uploader-thumb-wrap.uploader-thumb-unavailable:after {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: 3px;
    background-color: #f5f5f5;
}

/* Un-scoped on purpose: the resize popup renders its own copy of these labels appended directly to
   <body>, outside the ".woocommerce div.product" wrapper the rest of this stylesheet is scoped to. */
.uploader-dim-label {
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #222;
    background: rgba(255, 255, 255, .85);
    padding: 3px 6px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
}

/* Horizontally centered above the image's top edge. */
.woocommerce div.product .uploader-dim-label.uploader-dim-top {
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
}

/* Vertically centered along the image's left edge, reading bottom-to-top. Every attempt at this using
   `rotate(-90deg)` on a normal horizontal-text box turned out to have the same underlying flaw: CSS
   `transform-origin`'s default (the box's own center) is calculated from the box's WIDTH, and that width
   is exactly what changes with the text ("16inch" vs "10.57inch") - so the rotation pivot always drifted
   sideways as the text got longer, no matter which edge (`left` or `right`) the box was positioned from,
   or how large a fixed width was used to try to compensate (a bigger fixed width just moved the pivot by
   a bigger constant amount, eventually pushing it off-screen entirely).
   The fix is to stop rotating a horizontal text box after the fact, and instead lay the text out
   NATIVELY vertically with `writing-mode`, the same way CJK vertical text (or a chart's Y-axis label)
   works. Under `writing-mode: vertical-rl`, the box's WIDTH becomes a small constant ( roughly one
   character's worth ) and its HEIGHT becomes the text's own length - which is the opposite, and correct,
   relationship for what we're positioning: `right: 100%` ( width-independent, since width is now small
   and constant ) keeps it a fixed distance from the image regardless of text length, and
   `translateY(-50%)` ( which uses the box's own height - now equal to the full text run - as its
   percentage basis ) correctly centers the WHOLE label on the image's vertical middle no matter how long
   the text is. `rotate(180deg)` flips `vertical-rl`'s default top-to-bottom/clockwise-character reading
   into the bottom-to-top/counter-clockwise-character orientation we want ( matching the old rotate(-90deg)
   look ), and a 180-degree rotation is symmetric around the box's center, so unlike -90deg it introduces
   no directional drift at all. */
.woocommerce div.product .uploader-dim-label.uploader-dim-left {
    top: 50%;
    right: 100%;
    margin-right: 8px;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

/***********************************
****** Resize popup ( product page ) ******
************************************/
body.uploader-resize-popup-active {
    overflow: hidden;
}

.uploader-resize-popup {
    display: none;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.uploader-resize-popup.open {
    display: block;
}

.uploader-resize-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
}

.uploader-resize-popup-panel {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    display: flex;
    box-sizing: border-box;
    padding: 20px;
}

.uploader-resize-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    padding: 5px 10px;
}

/* 3x3 grid: corner spacers, top/bottom horizontal rulers, left/right vertical rulers, and the
   interactive viewport in the middle. DOM order (corner, ruler-top, corner, ruler-left, viewport,
   ruler-right, corner, ruler-bottom, corner) matches this layout row by row. */
.uploader-resize-popup-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    grid-template-rows: 38px 1fr 38px;
    background: #fafafa;
    border-radius: 3px;
    overflow: hidden;
}

.uploader-resize-popup-corner {
    background: #f4f4f4;
}

.uploader-resize-popup-ruler {
    display: block;
    background: #f4f4f4;
}

.uploader-resize-popup-ruler-top,
.uploader-resize-popup-ruler-bottom {
    width: 100%;
    height: 38px;
}

.uploader-resize-popup-ruler-left,
.uploader-resize-popup-ruler-right {
    width: 38px;
    height: 100%;
}

.uploader-resize-popup-viewport {
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: default;
}

.uploader-resize-popup-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.uploader-resize-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    background: #0009C8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
    touch-action: none;
    z-index: 2;
}

.uploader-resize-handle.handle-tl,
.uploader-resize-handle.handle-br {
    cursor: nwse-resize;
}

.uploader-resize-handle.handle-tr,
.uploader-resize-handle.handle-bl {
    cursor: nesw-resize;
}

.uploader-resize-handle.dragging {
    background: #ff5722;
}

.uploader-popup-dim-top,
.uploader-popup-dim-left {
    font-size: 16px;
    z-index: 1;
}

/* Same pattern as the inline product-page thumbnail's labels ( already confirmed working there ) -
   `left`/`top` here are set in JS as absolute pixel anchor points ( image top-center / left-middle ),
   the transform just centers the label on that anchor. */
.uploader-popup-dim-top {
    transform: translateX(-50%);
}

/* Same writing-mode fix as the inline thumbnail's Height label ( see the long comment on
   .uploader-dim-label.uploader-dim-left for the full rotate(-90deg)-vs-writing-mode explanation ).
   JS still computes `right` as a plain pixel value each render, which stays correct here since
   writing-mode makes this box's WIDTH small and constant regardless of text length. */
.uploader-popup-dim-left {
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

.uploader-resize-popup-fields {
    flex: 0 0 220px;
    padding-left: 25px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Forced to `display:block; width:100%` explicitly, rather than relying on default button flow -
   both buttons are the same width this way regardless of their label length, and stack with a
   guaranteed gap ( margin-bottom on Reset ) so there's no risk of clicking one when meaning the other.
   `!important` throughout: the theme/WooCommerce's own `.button` styling was overriding the plain
   ( non-important ) version of these rules - most likely a `margin: 0 !important` reset on buttons
   somewhere upstream - which is why Reset and Apply were still touching with no gap between them. */
.uploader-resize-popup-fields .uploader-resize-popup-reset,
.uploader-resize-popup-fields .uploader-resize-popup-apply {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.uploader-resize-popup-reset {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.uploader-resize-popup-apply {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

.uploader-resize-popup-fields label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 13px;
}

.uploader-resize-popup-fields input {
    width: 100px;
    padding: 6px;
    font-size: 14px;
    margin-top: 4px;
}

.uploader-resize-popup-filename {
    font-weight: 700;
    font-size: 13px;
    word-break: break-word;
    margin-top: 30px;
    margin-bottom: 20px;
}

.uploader-resize-popup-warning {
    color: #d63638;
    font-size: 12px;
}

.uploader-resize-popup-hint {
    color: #777;
    font-size: 11px;
    margin-top: 20px;
}

@media (max-width: 782px) {
    .uploader-resize-popup-panel {
        flex-direction: column;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    .uploader-resize-popup-fields {
        flex: 0 0 auto;
        padding-left: 0;
        padding-top: 15px;
    }
}