/*
 * PC Perz UCD personalization PDP styles.
 *
 * Loaded by:
 *   1. (always) [pcrus_new & defaulttheme]  B2C PDP, PC Perz UCD editor mode ( $is_pc_ucd_perz_editor = true)
 *   2. [pcrus_new theme] PC product detail page 
 *   3. [pcrus_new theme] UCD Stamps product detail page 
 */

.details_page {
    /* perz group */
    --perz-header-font-size: 1.6rem;
    --perz-header-line-height: 2rem;
    --perz-header-margin-bottom: 1.6rem;
     
    /* form field */
    --perz-field-label-font-size: 1.4rem;
    --perz-field-label-line-height: 1.6rem;
    --perz-field-char-font-size: 1.2rem;
    --perz-field-char-line-height: 1.6rem;
    --perz-text-line-height: 1.8rem;
    --perz-text-margin-top: 0.4rem;
    --perz-input-font-size: 1.4rem;
    --perz-input-line-height: 4rem;
    --perz-input-padding: .8rem 1.6rem;
    --perz-hint-line-height: 2rem;
    --perz-image-height: 2rem;
    --perz-image-info-font-size: 1.6rem;
    --perz-image-info-line-height: 2.4rem;
    --perz-image-info-icon-size: 2.4rem;
    --perz-image-info-margin: 2rem 0;
    --perz-image-info-padding: 0 0 0 3.2rem;
    --perz-icon-width: 20%;
    --perz-icon-margin-bottom: 0.6rem;
}

.details_page .container-personalize-form {
    margin-top: 1.4rem;
    padding: 1.6rem;
}

/* Personalize Group */
html[ms-theme='pcrus'] .details_page #container-quantity-head,
html[ms-theme='pcrus_new'] .details_page #container-quantity-head {
    background: var(--color-pcrus-light-grey-8, var(--bg-color-darken-info, #efefef));
    border-radius: 0;
    font-size: 1.6rem;
    padding: 0.8rem 1.6rem;
    margin-bottom: 1.6rem;
}

.details_page .container-personalize-form .personalize-group-header {
    font-size: var(--perz-header-font-size);
    line-height: var(--perz-header-line-height);
    color: var(--color-pcrus-dark-grey);
    text-transform: capitalize;
    margin-bottom: var(--perz-header-margin-bottom);
}

/* Form Header */
.details_page .container-personalize-form .personalization-header .display-name,
.details_page .upload-personalize .container-personalize .display-name {
    font-size: var(--perz-field-label-font-size);
    line-height: var(--perz-field-label-line-height);
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-pcrus-dark-grey);
}

/* - personalize area (text input) */
.details_page .container-personalize.text-personalize .form-field {
    line-height: var(--perz-text-line-height);
    margin-top: var(--perz-text-margin-top);
}

.details_page .personalize-group-content input.personalize,
.details_page .personalize-group-content .component-selector-container input,
.details_page .stamp-field-wrapper .personalize-input input {
    font-size: var(--perz-input-font-size);
    height: var(--perz-input-line-height);
    line-height: var(--perz-input-line-height);
    padding: var(--perz-input-padding);
    border-radius: 0.4rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.20);
    outline: none;
}
.details_page .personalize-group-content .component-selector-container.focus input {
    border: 0.1rem solid var(--color-pcrus-dark-grey);
    border-bottom-color: var(--border-color-base);
    border-radius: 0.4rem 0.4rem 0 0;
}

.details_page .personalize-group-content .hint-selector-item {
    height: var(--perz-input-line-height);
    line-height: var(--perz-input-line-height);
    font-size: var(--perz-input-font-size);
    padding: 0 1.4rem;
}

.details_page .hint-selector-item.selected,
.details_page .hint-selector-item:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.details_page .personalize-group-content .hint-selector-item:not(:last-child) {
    border-bottom: .1rem solid var(--border-color-base);
}

.details_page .personalize-group-content .hint {
    width: 100%;
    font-size: var(--perz-input-font-size);
    line-height: var(--perz-hint-line-height);
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 0 0.4rem 0 1.7rem;
}

.details_page .container-personalize.perz-hint-tappable .hint {
    pointer-events: auto;
    cursor: text;
    -webkit-touch-callout: none;
}

.details_page .personalize-group-content input.personalize,
.details_page .personalize-group-content .hint-selector-container,
.details_page .personalize-group-content .hint-selector-item {
    -webkit-touch-callout: none;
}

/* - personalize area (upload image) */
.details_page .upload-personalize .container-personalize .upload-header {
    height: var(--perz-image-height);
}

.details_page .upload-personalize .container-personalize .form-field.show-expand {
    border-color: var(--color-pcrus-indigo);
}

html[ms-theme='pcrus'] .details_page .upload-panel .upload-header .g-icon-arrow,
html[ms-theme='pcrus_new'] .details_page .upload-panel .upload-header .g-icon-arrow {
    width: 1rem !important;
}

.details_page .upload-panel .upload-area .upload-area-inner-container {
    margin-top: 0.8rem;
}

html[ms-theme='pcrus'] .details_page .container-personalize-form .upload-personalize .upload-panel,
html[ms-theme='pcrus_new'] .details_page .container-personalize-form .upload-personalize .upload-panel {
    background: var(--color-white);
    padding: 0.8rem 1.6rem;
}

.details_page .container-personalize-form .upload-personalize .upload-panel.uploaded,
.details_page .container-personalize-form .upload-personalize .upload-panel.uploading {
    background-color: #f7faff;
    border-color: #d9d9d9;
}

.details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner {
    border-radius: 0.8rem;
    border: 0.1rem dashed var(--color-primary);
    background: var(--color-white);
}

.details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .icon-update {
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 0.4rem;
    background: url("/templates/images/icons/icon-upload-pc.svg") no-repeat;
    background-size: 100% 100%;
}
.details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .icon-update >img {
    display: none;
}

.details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .upload-text {
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-pcrus-dark-indigo-op60);
    margin-bottom: 0;
}

.details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .upload-tip {
    color: #a4a4a4;
}

html[ms-theme='pcrus'] .details_page .container-image-info,
html[ms-theme='pcrus_new'] .details_page .container-image-info {
    padding: var(--perz-image-info-padding);
    margin: var(--perz-image-info-margin);
    position: relative;
}
html[ms-theme='pcrus'] .details_page .container-image-info .image-note,
html[ms-theme='pcrus_new'] .details_page .container-image-info .image-note {
    margin-bottom: 0;
    font-size: var(--perz-image-info-font-size);
    line-height: var(--perz-image-info-line-height);
    font-weight: var(--font-weight-regular);
}
html[ms-theme='pcrus'] .details_page .container-image-info .image-note .note,
html[ms-theme='pcrus_new'] .details_page .container-image-info .image-note .note {
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-pcrus-dark-indigo-op60);
}
html[ms-theme='pcrus'] .container-image-info .image-info-text .info-text,
html[ms-theme='pcrus_new'] .container-image-info .image-info-text .info-text {
    font-size: var(--perz-image-info-font-size);
    line-height: var(--perz-image-info-line-height);
    font-weight: var(--font-weight-regular);
    text-decoration: underline;
    margin-left: 0 !important;
}
html[ms-theme='pcrus'] .details_page .container-image-info .image-info-text .info-icon,
html[ms-theme='pcrus_new'] .details_page .container-image-info .image-info-text .info-icon {
    display: none;
}
html[ms-theme='pcrus'] .details_page .container-image-info::before,
html[ms-theme='pcrus_new'] .details_page .container-image-info::before {
    width: var(--perz-image-info-icon-size);
    height: var(--perz-image-info-icon-size);
    background-image: url(/templates/images/icons/icon-info-pc.svg);
    display: block;
    background-size: 100% 100%;
    content: '';
    position: absolute;
    left: 0;
}

/* WEB-125608: match live PUK PERSONALIZE chrome on converted PC Perz
   (desktop and mobile). .container-pc-ucd-perz and .container-personalize-form
   are the same element, so compound selectors are required. */
.details_page .container-pc-ucd-perz.container-personalize-form .personalize-group-header {
    color: var(--text-color-caption, #445664);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* WEB-125608 G: field names (Photo *, Any Message *) are caption #445664.
   Unscoped .display-name above uses --color-pcrus-dark-grey (#999999). */
.details_page .container-pc-ucd-perz .personalization-header .display-name,
.details_page .container-pc-ucd-perz .upload-personalize .container-personalize .display-name {
    color: var(--text-color-caption, #445664);
}

.details_page .container-pc-ucd-perz.container-personalize-form .upload-personalize .upload-panel.uploaded,
.details_page .container-pc-ucd-perz.container-personalize-form .upload-personalize .upload-panel.uploading {
    background-color: #f7faff;
    border-color: #d9d9d9;
}

.details_page .container-pc-ucd-perz .upload-panel .upload-area .upload-area-inner-container .upload-area-inner {
    background-color: #f7faff;
}

html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info {
    padding: 0;
    font-size: 1.2rem;
}

html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info .image-note,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info .image-note,
html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info .image-info-text .info-text,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info .image-info-text .info-text {
    font-size: 1.2rem;
    line-height: 1.6rem;
}

/* WEB-125608 G/H: drop-zone copy is #445664 and semibold like live PUK.
   Unscoped .upload-text above forces regular + faded indigo with !important. */
.details_page .container-pc-ucd-perz .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .upload-text {
    color: var(--text-color-caption, #445664);
    font-weight: var(--font-weight-semibold) !important;
    line-height: 2rem;
}

/* WEB-125608 G/I/J: "Note:" is caption color + semibold; restore mb10 between
   Note and More info (unscoped .image-note zeros margin-bottom). */
html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info .image-note,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info .image-note {
    margin-bottom: 1rem;
    color: var(--text-color-caption, #445664);
}

html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info .image-note .note,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info .image-note .note {
    color: var(--text-color-caption, #445664);
    font-weight: var(--font-weight-semibold) !important;
}

html[ms-theme='pcrus'] .details_page .container-pc-ucd-perz .container-image-info::before,
html[ms-theme='pcrus_new'] .details_page .container-pc-ucd-perz .container-image-info::before {
    display: none;
}

.details_page .upload-personalize .uploaded-area-inner {
    flex-wrap: nowrap;
}

.details_page .upload-personalize .uploaded-area-inner .uploaded-area-info {
    width: auto;
    flex: 1;
}

.details_page .upload-personalize .uploaded-area-inner .uploaded-area-info .img-info {
    padding-right: 1.6rem;
    padding-left: 0.5rem;
    line-height: 2rem;
}

.details_page .upload-personalize .uploaded-area-inner .uploaded-area-btn {
    white-space: nowrap;
    width: 10rem;
    font-size: 1.4rem;
}

.details_page .uploaded-area-inner .uploaded-area-info .display-img {
    width: 4.5rem !important;
    height: 4rem !important;
}

html[ms-theme='pcrus'] .details_page .upload-panel .upload-header .g-icon-arrow,
html[ms-theme='pcrus_new'] .details_page .upload-panel .upload-header .g-icon-arrow {
    background: none;
}

html[ms-theme='pcrus'] .details_page .upload-panel .upload-header .g-icon-arrow::after,
html[ms-theme='pcrus_new'] .details_page .upload-panel .upload-header .g-icon-arrow::after {
    border-left: 0.2rem solid #8193c9;
    border-top: 0.2rem solid #8193c9;
    content: '';
    display: inline-block;
    height: 0.9rem;
    width: 0.9rem;
    box-sizing: border-box;
}

html[ms-theme='pcrus'] .details_page .upload-panel .upload-header .g-icon-arrow-up,
html[ms-theme='pcrus_new'] .details_page .upload-panel .upload-header .g-icon-arrow-up {
    transform: rotate(225deg);
}

html[ms-theme='pcrus'] .details_page .upload-panel .upload-header .g-icon-arrow-down,
html[ms-theme='pcrus_new'] .details_page .upload-panel .upload-header .g-icon-arrow-down {
    transform: rotate(45deg);
}

/*  - personalize area (image requirement) */
.details_page .image-info-area {
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-caption);
}

/* - personalize area  (image upload dialog) */
.details_page .container-customize-photo {
    margin-top: 0;
    margin-bottom: 0;
}

html[ms-theme='pcrus'] .details_page .filters-panel .filter-item .filter-name,
html[ms-theme='pcrus_new'] .details_page .filters-panel .filter-item .filter-name {
    color: #818181;
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4rem;
    margin-top: 0.4rem;
    text-align: center;
}

html[ms-theme='pcrus'] .details_page .customize-photo-inner-container .dynamic-panel .operate-buttons .crop-button,
html[ms-theme='pcrus_new'] .details_page .customize-photo-inner-container .dynamic-panel .operate-buttons .crop-button {
    font-size: 1.2rem;
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
}

.details_page .customize-photo-inner-container .dynamic-panel .operate-buttons .choose {
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold) !important;
}

/* - personalize area (Perz Icon) */
.details_page .container-personalize.text-personalize .g-form-select .selector-text {
    color: var(--text-color-hint);
    word-spacing: normal;
}

/* PCRUS/PCRUK card-style icon picker (pcrus + pcrus_new desktop themes).
   Default-theme cohort sites (e.g. LLANE) keep the legacy detail.css bordered
   grid from detail_pc. */
html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection {
    background-color: var(--color-pcrus-light-grey-2);
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-titlebar,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-titlebar {
    border-bottom: 1px solid var(--border-color-base) !important;
    padding: 0.5rem 2.5rem;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-title,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-title {
    font-size: 2.4rem;
    line-height: 3rem;
    font-family: var(--font-family-secondary);
    font-weight: 600;
    margin-top: 0;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-titlebar-close,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-titlebar-close {
    right: 1rem;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content {
    background-color: var(--color-pcrus-light-grey-2);
    padding: 1.6rem 0 1.5rem;
    /* Defensive: jQuery UI's default ui-dialog-content has overflow:auto, but
       this block is explicit so themes that reset overflow can't break the
       option list scrolling when the dialog body is taller than maxHeight. */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Body scroll lock toggled by pc_personalize_fields.js openDialog() open/close
   handlers. Pairs with jQuery UI's modal overlay so the PDP behind the icon
   selection dialog stays put while the user scrolls the option list. */
body.dialog-perz-selection-open {
    overflow: hidden;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar {
    background-color: var(--color-pcrus-light-grey-2);
    width: 0.5rem;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar-thumb,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    width: 0.5rem;
    border-radius: var(--btn-border-radius);
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar-track,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .ui-dialog-content::-webkit-scrollbar-track {
    background: var(--scrollbar-trace-color);
    border-radius: var(--btn-border-radius);
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .container-breed,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .container-breed,
html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item-container,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item-container {
    border: none;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .container-breed,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .container-breed {
    padding: 0 1.6rem;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item-container,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item-container {
    margin-bottom: var(--perz-icon-margin-bottom);
    width: var(--perz-icon-width);
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10rem;
    background: #fff;
    border-radius: 1.6rem;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 0.8rem;
    cursor: pointer;
    height: 100%;
    box-shadow: 0 2.5rem 5rem -1.2rem rgba(0, 0, 0, 0.25);
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item img,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item img {
    display: block;
    max-height: 8rem;
    max-width: calc(100% - 1.6rem);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0.8rem 0.8rem 0;
}

html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item .select-item-label,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item .select-item-label,
html[ms-theme='pcrus'] .details_page .ui-dialog.dialog-perz-selection .select-item>div,
html[ms-theme='pcrus_new'] .details_page .ui-dialog.dialog-perz-selection .select-item>div {
    margin: 0.4rem 0.8rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: center;
}

/* - personalize area (add Perz Group) */
.details_page .container-personalize-form .add-group {
    color: var(--color-pcrus-indigo);
}

.details_page .container-personalize-form .icon-plus path {
    fill: var(--color-pcrus-indigo);
}

/* - personlize location */
.details_page .container-personalize.location-text .form-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.details_page .container-personalize.location-text .form-field input.personalize {
    flex: 1;
}

.details_page .container-personalize.location-text .location {
    font-weight: var(--font-weight-semibold);
    font-size: 1.2rem;
    width: 15rem;
    height: 4rem;
    border: none;
    margin-left: 1rem;
    letter-spacing: .05rem;
    text-align: center;
    padding: 0;
    line-height: 4rem;
}

.details_page .container-personalize.location-text .form-field .error-info {
    width: 100%;
}

.details_page .container-personalize.location-text .geo-powered>.icon-google {
    margin-left: 0.5rem;
}

@media only screen and (max-width: 575px) {
    .details_page {
        /* perz group */
        --perz-header-font-size: 3.58vmin;
        --perz-header-line-height: 5.12vmin;
        --perz-header-margin-bottom: 3.07vmin;
        
        /* form field */
        --perz-field-label-font-size: 3.58vmin;
        --perz-field-label-line-height: 4.1vmin;
        --perz-field-char-font-size: 3.07vmin;
        --perz-field-char-line-height: 4.1vmin;
        --perz-text-line-height: 4.61vmin;
        --perz-text-margin-top: 1.025vmin;
        --perz-input-font-size: 3.58vmin;
        --perz-input-line-height: 10.25vmin;
        --perz-input-padding: 2.05vmin 3.07vmin;
        --perz-hint-line-height: 5.12vmin;
        --perz-image-height: 5.12vmin;
        --perz-image-info-font-size: 3.58vmin;
        --perz-image-info-line-height: 5.12vmin;
        --perz-image-info-icon-size: 6.15vmin;
        --perz-image-info-margin: 5.12vmin 0;
        --perz-image-info-padding: 0 0 0 8.2vmin;
        --perz-icon-width: 33.33%;
        --perz-icon-margin-bottom: 4.1vmin;
    }

    /* - personalize group form */
    html[ms-theme='pcrus'] .details_page .container-personalize-form,
    html[ms-theme='pcrus_new'] .details_page .container-personalize-form {
        padding-bottom: 0.01rem;
        margin: 1.6rem -4vmin 0;
    }
    .details_page .container-personalize-form .personalize-group-header {
        text-transform: uppercase;
        font-size: 4.1vmin;
    }
    .details_page .container-personalize-form .personalization-header .display-name {
        font-weight: var(--font-weight-regular) !important;
    }

    /* - personalize area (upload image) */
    /* WEB-125608: converted PC Perz on master pcrus keeps the white upload card. */
    .details_page .container-personalize-form:not(.container-pc-ucd-perz) .upload-personalize .container-personalize .form-field {
        border: none;
        padding: 0;
        background: none;
        margin-bottom: 3.58vmin;
    }
}

/* desktop */
@media only screen and (min-width: 576px) {
    .details_page .sticky-content {
        /* ucd pdp desktop need sticky */
        position: sticky;
        top: 0;
    }

    /* - personalize group form*/
    .details_page .container-personalize-form {
        background: var(--color-pcrus-light-grey-8, var(--bg-color-darken-info, #efefef));
    }
    .details_page .container-personalize-form .personalization-header .chars-left {
        color: var(--color-pcrus-dark-indigo-op60);
        font-size: var(--perz-field-char-font-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--perz-field-char-line-height);
    }
}

/* WEB-125870: network converted PC Perz (default/gifts/stkus/…) keeps live
   detail_pc photo chrome. PCR pcrus / pcrus_new keep the rules above.
   This file is only loaded for $is_pc_ucd_perz_editor, so wrapping paper
   and classic UCD are unchanged. */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-personalize-form .upload-personalize .upload-panel.uploaded,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-personalize-form .upload-personalize .upload-panel.uploading,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz.container-personalize-form .upload-personalize .upload-panel.uploaded,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz.container-personalize-form .upload-personalize .upload-panel.uploading {
    background-color: var(--bg-color-default);
    border-color: var(--border-color-base);
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .upload-panel .upload-area .upload-area-inner-container .upload-area-inner {
    background-color: var(--bg-color-default);
    border: 0.2rem dashed var(--border-color-base);
    border-radius: 1.2rem;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .icon-update {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    background: none;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .icon-update > img {
    display: block;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .upload-text {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--font-weight-bold) !important;
    color: inherit;
    margin-bottom: 1rem;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-panel .upload-area .upload-area-inner-container .upload-area-inner .upload-tip {
    color: var(--color-default);
}

/* WEB-125870: live photo_editor does not restyle Original. PCR #818181
   is scoped above; inherit body color (and photo_editor font-size-sm). */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .filters-panel .filter-item .filter-name {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .container-image-info {
    padding: 0 1rem;
    margin: 0 0 1rem;
    font-size: var(--font-size-sm);
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info::before,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .container-image-info::before {
    display: none;
    content: none;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info .image-note,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .container-image-info .image-note {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info .image-note .note,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .container-image-info .image-note .note {
    color: inherit;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info .image-info-text {
    display: inline-flex;
    align-items: center;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info .image-info-text .info-icon {
    display: inline-block;
    width: 14px;
    height: auto;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-image-info .image-info-text .info-text,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .container-image-info .image-info-text .info-text {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-decoration: none;
    margin-left: 0.5rem !important;
    color: var(--link-color-primary);
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .customize-photo-inner-container .dynamic-panel .operate-buttons .crop-button {
    font-size: 1.6rem;
}

/* WEB-125925: live PC stacks options with select-box mt10; tooltip-list
   margin-top stacked on option margin-top. Qty-head / message form keep
   detail.css padding instead of PCR 1.6rem / 0.01rem collapse. Live PC
   notice under qty/ATC uses mt10 (pc-delivery-notice). */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page [data-selection-tooltip-parent] [data-selection-tooltip-list] {
    margin-top: 0;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page #container-quantity-head {
    margin-bottom: 1rem;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-personalize-form {
    margin-top: 1rem;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .product-operate ~ .message-us-only {
    margin-top: 1rem;
}

/* WEB-125925: live PC option rows inherit body/container-detail (Lato 1.6rem,
   regular title, bold selected caption). attr_selection.php is shared UUCD/B2B
   chrome (secondary/medium + 1.4rem swatch text) — do not change that file. */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-main-options .component-selectable-elements .title {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-main-options .component-selectable-elements.box .title .selected-caption {
    font-weight: bold;
}

html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-main-options .component-selectable-elements.box .container-selection-items .container-option-item .option-text,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-main-options .component-selectable-elements.box .container-selection-items .container-option-item .option-multiple {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* WEB-125870: PP/network perz field labels inherit live select-box chrome
   (Lato / site body), not PCR medium 1.4rem + caption #445664. */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-personalize-form .personalization-header .display-name,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .upload-personalize .container-personalize .display-name,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .personalization-header .display-name,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-pc-ucd-perz .upload-personalize .container-personalize .display-name {
    font-family: inherit;
    font-weight: inherit !important;
    font-size: inherit;
    color: inherit;
}

/* WEB-125870: live YMAL titles are links (--link-color). Converted
   entire_clickable cards use <p class="design-title"> (--text-color-secondary). */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-ymal .design-title,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-ymal .design-title p,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-you-may-like .design-title,
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-you-may-like .design-title p {
    color: inherit;
}

/* WEB-125870: live detail_pc overlays NEW on the thumb (position:absolute
   on the span). default/css/main.css leaves that commented out; STK/OWD/BAU
   then sit in document flow. Gifts uucd paints a secondary pill on the
   container — restore live primary chip on the span only for PC Perz. */
html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-designs .designs-tag-new span {
    position: absolute;
}

html[ms-theme='gifts'] .details_page .container-designs .designs-tag-new {
    background: none;
    border-radius: 0;
    color: inherit;
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: static;
}

html[ms-theme='gifts'] .details_page .container-designs .designs-tag-new span {
    background: var(--color-primary);
    bottom: 0;
    color: #ffffff;
    font-size: 1.2rem;
    left: 0;
    line-height: 1.7rem;
    padding: 0 .3rem;
    position: absolute;
}

@media only screen and (max-width: 575px) {
    html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-personalize-form {
        padding: 1.6rem;
        margin: 1rem 0 0;
    }

    html:not([ms-theme='pcrus']):not([ms-theme='pcrus_new']) .details_page .container-main-options .component-selectable-elements .title {
        font-weight: inherit;
    }
}