@font-face {
    font-family: 'Inter';
    src: url('../font/inter-v19-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Keep the scrollbar's space reserved, so locking the page under a panel does not shift it sideways. */
html{
    scrollbar-gutter: stable;
}

/* No grey flash on links and buttons when they are tapped on phones. */
html,
a,
button,
input,
label,
select,
summary,
[role="button"]{
    -webkit-tap-highlight-color: transparent;
}

/* Mobile Account Settings detail view and nested quick editors. */
.admin-account-mobile-details {
    display: none;
}
@media screen and (max-width: 768px) {
    #modalAdminAccount .admin-account-meta,
    #modalAdminAccount > .modal-content > .scroll-modal > .form-modal {
        display: none;
    }
    #modalAdminAccount .admin-account-mobile-details {
        display: block;
    }
    #modalAdminAccount .order-details-grid {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 10px;
        background: #fff;
    }
    #modalAdminAccount .order-detail-row {
        display: grid;
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
        align-items: stretch;
    }
    #modalAdminAccount .order-detail-row:not(:last-child) > div {
        border-bottom: 1px solid #ccc;
    }
    #modalAdminAccount .td-vertical-1 {
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        padding: 12px 10px;
        color: #333;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        border-right: 1px solid #ccc;
        background: #f2f2f2;
    }
    #modalAdminAccount .td-vertical-2 {
        width: auto;
        min-width: 0;
        min-height: 48px;
        box-sizing: border-box;
        padding: 12px 10px;
        overflow-wrap: anywhere;
        color: #222;
        font-size: 12px;
        line-height: 1.5;
        background: #fbfbfb;
    }
    #modalAdminAccount .admin-account-detail-editable {
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #modalAdminAccount .admin-account-detail-editable::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 5px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }
    .admin-account-field-editor {
        z-index: 20000 !important;
    }
    .admin-account-quick-edit-form > div:not(.mobile-product-editor-actions):not(.admin-account-message) {
        margin-bottom: 12px;
    }
    .admin-account-quick-edit-form label {
        display: block;
        margin: 0 0 7px;
        color: #555;
        font-size: 12px;
    }
    .admin-account-quick-edit-form input {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        display: block;
        box-sizing: border-box;
        padding: 12px 14px;
        color: #111;
        font-size: 16px;
        outline: 0;
        border: 1px solid #ccc;
        border-radius: 10px;
        background: #fff;
    }
    .admin-account-quick-edit-form input:focus {
        border-color: #111;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
    }
}

/* Account Settings: match the Admin edit form. */
#modalAdminAccount .modal-content,
#modalAdminAccount .scroll-modal {
    border-radius: 22px;
}
#modalAdminAccount .form-modal {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#modalAdminAccount #adminAccountForm {
    display: block;
}
#modalAdminAccount #adminAccountForm .item-form {
    width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #d8d8d8;
    border-radius: 10px !important;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
#modalAdminAccount #adminAccountForm .item-form > label {
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px 14px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 0;
    border-right: 1px solid #d8d8d8;
    background: #ededed;
}
#modalAdminAccount #adminAccountForm .item-form > input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    color: #222;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    transition: background-color .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
    #modalAdminAccount #adminAccountForm .item-form:not(:focus-within):hover {
        border-color: #c9c9c9;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }
    #modalAdminAccount #adminAccountForm .item-form:not(:focus-within):hover > input {
        background-color: #fff;
        box-shadow: inset 3px 0 0 #d7d7d7;
    }
}
#modalAdminAccount #adminAccountForm .item-form:focus-within {
    position: relative;
    z-index: 2;
    border-color: #bdbdbd;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
}
#modalAdminAccount #adminAccountForm .item-form:focus-within > input {
    background-color: #fff;
    box-shadow: inset 3px 0 0 #111;
}
#modalAdminAccount #adminAccountForm > .btn-form {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin: 4px 0 0;
    padding: 12px 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    box-shadow: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media screen and (min-width: 769px) and (hover: hover) {
    #modalAdminAccount #adminAccountForm > .btn-form:hover {
        color: #111;
        border-color: #ccc;
        background: #f2f2f2;
        box-shadow: none;
    }
}
@media screen and (max-width: 768px) and (hover: none) {
    #modalAdminAccount #adminAccountForm > .btn-form:focus:not(:focus-visible){
        color: #fff;
        border-color: #111;
        background: #111;
        box-shadow: none;
    }
@media (hover: hover) {
#modalAdminAccount #adminAccountForm > .btn-form:hover{
        color: #fff;
        border-color: #111;
        background: #111;
        box-shadow: none;
    }
}
}
@media screen and (max-width: 768px) {
    #modalAdminAccount .modal-content,
    #modalAdminAccount .scroll-modal {
        border-radius: 18px 18px 0 0 !important;
    }
    #modalAdminAccount #adminAccountForm .item-form {
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
        margin-bottom: 12px;
    }
    #modalAdminAccount #adminAccountForm .item-form > label,
    #modalAdminAccount #adminAccountForm .item-form > input {
        min-height: 48px;
        padding: 11px 10px;
    }
    #modalAdminAccount #adminAccountForm .item-form > label {
        font-size: 11px;
    }
}

/* Admin authentication */
.admin-auth-page {
    min-height: 100vh;
    margin: 0;
    color: #171717;
    background:
        radial-gradient(circle at 15% 15%, rgba(33, 150, 243, .12), transparent 32%),
        radial-gradient(circle at 85% 85%, rgba(82, 199, 156, .11), transparent 30%),
        #f5f7fa;
}
.admin-auth-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 32px 20px;
}
.admin-auth-card {
    width: min(430px, 100%);
    box-sizing: border-box;
    padding: 38px;
    border: 1px solid rgba(20, 20, 20, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(26, 38, 55, .12);
    backdrop-filter: blur(12px);
}
.admin-auth-brand {
    display: inline-block;
    margin-bottom: 34px;
    color: #111;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.8px;
    text-decoration: none;
}
.admin-auth-heading { margin-bottom: 26px; }
.admin-auth-eyebrow {
    color: #2188dc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
}
.admin-auth-heading h1 {
    margin: 7px 0 8px;
    font-size: 27px;
    font-weight: 500;
}
.admin-auth-heading p,
.admin-auth-help {
    margin: 0;
    color: #707070;
    font-size: 12px;
    line-height: 1.65;
}
.admin-auth-alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    color: #a32626;
    font-size: 12px;
    border: 1px solid #f0c9c9;
    border-radius: 10px;
    background: #fff5f5;
}
.admin-auth-form { display: grid; gap: 9px; }
.admin-auth-form > label {
    margin-top: 5px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
}
.admin-auth-input-wrap { position: relative; }
.admin-auth-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #888;
    font-size: 13px;
    transform: translateY(-50%);
}
.admin-auth-input-wrap input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 45px 0 41px;
    color: #111;
    font: inherit;
    font-size: 13px;
    outline: none;
    border: 1px solid #d8dce2;
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.admin-auth-input-wrap input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .1);
}
.admin-auth-input-wrap input:is([name="email"], [name="password"], [name="password_confirmation"]) {
    padding-left: 15px;
}
.admin-auth-input-wrap input[name="email"] {
    padding-right: 15px;
}
.admin-password-toggle {
    width: 42px;
    height: 42px;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #666;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    background: transparent;
}
.admin-password-toggle > :is(i, svg) {
    display: block;
    margin: 0;
    vertical-align: middle;
}
.admin-auth-submit {
    height: 50px;
    margin-top: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 12px;
    background: #111;
    transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
.admin-auth-submit:hover{ box-shadow: 0 8px 22px rgba(0, 0, 0, .17); transform: translateY(-1px); }
}
.admin-auth-help { margin-top: 22px; text-align: center; }
/* Showcase: the demo administrator's credentials, with a button that fills them in */
.admin-auth-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 20px;
    padding: 13px 14px;
    color: #333;
    font-size: 12px;
    line-height: 1.6;
    border: 1px solid #cfe3f6;
    border-radius: 10px;
    background: #f3f8fd;
}
.admin-auth-demo strong { display: block; color: #2188dc; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; }
.admin-auth-demo code { font-family: inherit; font-weight: 500; white-space: nowrap; }
.admin-auth-demo button {
    min-height: 36px;
    padding: 0 14px;
    color: #111;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 10px;
    background: #fff;
}
.admin-auth-demo small { grid-column: 1 / -1; color: #707070; font-size: 11px; }
.admin-session-summary {
    display: flex;
    flex-direction: column;
    margin: auto 18px 10px;
    padding: 13px 12px 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
}
.admin-session-identity {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    background: transparent;
}
.admin-session-copy {
    display: flex;
    flex-direction: column;
}
.admin-session-copy > strong {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}
.admin-session-copy > small {
    margin-top: 5px;
    color: rgba(255, 255, 255, .65);
    font-size: 10px;
}
.admin-session-identity > i {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    transition: color .18s ease, transform .18s ease;
}
@media (hover: hover) {
.admin-session-identity:hover > i{ color: #fff; transform: rotate(24deg); }
}
.admin-logout-form {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.admin-logout-form button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: transparent;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
@media screen and (min-width: 769px) and (hover: hover) {
    .admin-logout-form button:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, .38);
        background: rgba(255, 255, 255, .07);
    }
}
.admin-mobile-logout-form,
.admin-mobile-account-btn { display: none; }
.admin-account-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.admin-account-meta > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
}
.admin-account-meta span { color: #777; font-size: 10px; }
.admin-account-meta strong { color: #222; font-size: 12px; font-weight: 500; }
.admin-account-message { display: none; margin-bottom: 14px; padding: 10px 12px; font-size: 12px; border-radius: 9px; }
.admin-account-message.is-success { display: block; color: #17683b; border: 1px solid #b9dfc9; background: #effaf3; }
.admin-account-message.is-error { display: block; color: #a32626; border: 1px solid #f0c9c9; background: #fff5f5; }
@media screen and (max-width: 768px) {
    .admin-auth-layout { padding: 18px 14px; }
    .admin-auth-card { padding: 28px 20px; border-radius: 20px; }
    .admin-auth-brand { margin-bottom: 28px; }
    .admin-auth-heading h1 { font-size: 24px; }
    .admin-mobile-logout-form {
        display: block;
        position: absolute;
        top: 12px;
        right: 56px;
        z-index: 4;
    }
    .admin-mobile-account-btn {
        width: 38px;
        height: 38px;
        position: absolute;
        top: 12px;
        right: 100px;
        z-index: 4;
        display: block;
        color: #222;
        border: 1px solid rgba(0, 0, 0, .14);
        border-radius: 10px;
        background: transparent;
    }
    .admin-mobile-logout-form button {
        width: 38px;
        height: 38px;
        color: #222;
        border: 1px solid rgba(0, 0, 0, .14);
        border-radius: 10px;
        background: transparent;
    }
    .admin-account-meta { grid-template-columns: 1fr; }
}

@font-face {
    font-family: 'Estedad';
    src: url('../font/Estedad-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
html {
    font-family: Arial, Helvetica, sans-serif;
    overscroll-behavior-y: none;
    background-color: #f6f2eb;
}
body {
    overscroll-behavior-y: none;
    background-color: #f6f2eb;
}
body,
button,
input,
textarea,
select {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

/* Large/heading text uses Georgia site-wide; body copy, buttons and controls stay Arial. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
}

/* Preserve Font Awesome's own font family on mobile form controls and links. */
.fa,
.fas,
.fa-solid,
.far,
.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}
.fas,
.fa-solid {
    font-weight: 900 !important;
}
.far,
.fa-regular,
.fab,
.fa-brands {
    font-weight: 400 !important;
}

/* Site-wide: no bold text anywhere. Icon glyphs above are protected by their own
   higher-specificity !important rules (.fas/.fa-solid stay at 900). */
* {
    font-weight: 400 !important;
}
html[dir="rtl"] {
    font-family: 'Estedad', Tahoma, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    font-family: 'Estedad', Tahoma, sans-serif;
}
html[dir="rtl"] .list {
    margin-right: 50px;
    margin-left: 0;
}
html[dir="rtl"] .title-index > h3,
html[dir="rtl"] .title-footer > p {
    letter-spacing: 0;
}
html[dir="rtl"] .desc-spacial,
html[dir="rtl"] .content-modal-user {
    text-align: right;
}
.language-switch > a {
    min-width: 28px;
    padding: 2px 7px;
    display: inline-block;
    text-align: center;
    font-size: 11px !important;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 12px;
}
header{
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    background-color: transparent;
    /* border: 0.5px solid #cccc; */
    transition: background-color 0.3s ease-in-out;
}
header.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   
}
thead tr {
    background-color: #e9e9e9;
}
td {
    font-size: 13px;
    padding: 15px;
}
tbody tr td {
    width: 50px;
    max-width: 50px;
    overflow: hidden;
}
a {
    all: unset;
    cursor: pointer;
    text-decoration: none;
}
button {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.header-search{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
.header-shop,
.header-blog,
.header-about,
.header-contact,
.header-faq,
.header-account,
.header-cart,
.header-product,
.header-post{
    color: #33251f;
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(51, 37, 31, .14);
}
.header-category{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
.header-register{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
.header-user{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
.header-checkout{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
.header-about-project{
    background-color: #e9e9e9;
    border-bottom: 0.5px solid #ccc;
}
/* header-index ***************** */
.header-index{
    color: #33251f;
}
.header-index .navbar,
.header-shop .navbar,
.header-blog .navbar,
.header-about .navbar,
.header-contact .navbar,
.header-faq .navbar,
.header-account .navbar,
.header-cart .navbar,
.header-product .navbar,
.header-post .navbar{
    margin: 0;
}
.header-index .navbar > .row-between,
.header-shop .navbar > .row-between,
.header-blog .navbar > .row-between,
.header-about .navbar > .row-between,
.header-contact .navbar > .row-between,
.header-faq .navbar > .row-between,
.header-account .navbar > .row-between,
.header-cart .navbar > .row-between,
.header-product .navbar > .row-between,
.header-post .navbar > .row-between{
    min-height: 70px;
    margin: 0;
    align-items: center;
}
.header-index .navbar > .row-between > .row,
.header-shop .navbar > .row-between > .row,
.header-blog .navbar > .row-between > .row,
.header-about .navbar > .row-between > .row,
.header-contact .navbar > .row-between > .row,
.header-faq .navbar > .row-between > .row,
.header-account .navbar > .row-between > .row,
.header-cart .navbar > .row-between > .row,
.header-product .navbar > .row-between > .row,
.header-index .list-icons > ul,
.header-shop .list-icons > ul,
.header-blog .list-icons > ul,
.header-about .list-icons > ul,
.header-contact .list-icons > ul,
.header-faq .list-icons > ul,
.header-account .list-icons > ul,
.header-cart .list-icons > ul,
.header-product .list-icons > ul,
.header-post .list-icons > ul{
    align-items: center;
}
.header-index .list-icons > ul,
.header-shop .list-icons > ul,
.header-blog .list-icons > ul,
.header-about .list-icons > ul,
.header-contact .list-icons > ul,
.header-faq .list-icons > ul,
.header-account .list-icons > ul,
.header-cart .list-icons > ul,
.header-product .list-icons > ul,
.header-post .list-icons > ul{
    display: flex;
}
.header-index .list-icons > ul > li,
.header-shop .list-icons > ul > li,
.header-blog .list-icons > ul > li,
.header-about .list-icons > ul > li,
.header-contact .list-icons > ul > li,
.header-faq .list-icons > ul > li,
.header-account .list-icons > ul > li,
.header-cart .list-icons > ul > li,
.header-product .list-icons > ul > li,
.header-post .list-icons > ul > li{
    display: flex;
    align-items: center;
}
.header-index .underlin-list::after,
.header-shop .underlin-list::after,
.header-blog .underlin-list::after,
.header-about .underlin-list::after,
.header-contact .underlin-list::after,
.header-faq .underlin-list::after,
.header-account .underlin-list::after,
.header-cart .underlin-list::after,
.header-product .underlin-list::after,
.header-post .underlin-list::after{
    background-color: #33251f;
}
.header-index .list,
.header-shop .list,
.header-blog .list,
.header-about .list,
.header-contact .list,
.header-faq .list,
.header-account .list,
.header-cart .list,
.header-product .list,
.header-post .list{
    margin-left: 44px;
}
.header-index .list ul,
.header-shop .list ul,
.header-blog .list ul,
.header-about .list ul,
.header-contact .list ul,
.header-faq .list ul,
.header-account .list ul,
.header-cart .list ul,
.header-product .list ul,
.header-post .list ul{
    display: flex;
    align-items: center;
    gap: 6px;
}
.header-index .list > ul > li,
.header-shop .list > ul > li,
.header-blog .list > ul > li,
.header-about .list > ul > li,
.header-contact .list > ul > li,
.header-faq .list > ul > li,
.header-account .list > ul > li,
.header-cart .list > ul > li,
.header-product .list > ul > li,
.header-post .list > ul > li{
    display: block;
    margin: 0;
    padding: 0;
}
.header-index .list > ul > li > a,
.header-shop .list > ul > li > a,
.header-blog .list > ul > li > a,
.header-about .list > ul > li > a,
.header-contact .list > ul > li > a,
.header-faq .list > ul > li > a,
.header-account .list > ul > li > a,
.header-cart .list > ul > li > a,
.header-product .list > ul > li > a,
.header-post .list > ul > li > a{
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    color: inherit;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.35px;
    line-height: 1;
    opacity: .84;
    transition: opacity .25s ease;
}
@media (hover: hover) {
.header-index .list > ul > li:is(:hover, :focus-within) > a,
.header-shop .list > ul > li:is(:hover, :focus-within) > a,
.header-blog .list > ul > li:is(:hover, :focus-within) > a,
.header-about .list > ul > li:is(:hover, :focus-within) > a,
.header-contact .list > ul > li:is(:hover, :focus-within) > a,
.header-faq .list > ul > li:is(:hover, :focus-within) > a,
.header-account .list > ul > li:is(:hover, :focus-within) > a,
.header-cart .list > ul > li:is(:hover, :focus-within) > a,
.header-product .list > ul > li:is(:hover, :focus-within) > a,
.header-post .list > ul > li:is(:hover, :focus-within) > a{
    opacity: 1;
}
}
.header-index .list .underlin-list::after,
.header-shop .list .underlin-list::after,
.header-blog .list .underlin-list::after,
.header-about .list .underlin-list::after,
.header-contact .list .underlin-list::after,
.header-faq .list .underlin-list::after,
.header-account .list .underlin-list::after,
.header-cart .list .underlin-list::after,
.header-product .list .underlin-list::after,
.header-post .list .underlin-list::after{
    right: 12px;
    bottom: 1px;
    left: 12px;
    width: auto;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease;
}
@media (hover: hover) {
.header-index .list .underlin-list:is(:hover, :focus-within)::after,
.header-shop .list .underlin-list:is(:hover, :focus-within)::after,
.header-blog .list .underlin-list:is(:hover, :focus-within)::after,
.header-about .list .underlin-list:is(:hover, :focus-within)::after,
.header-contact .list .underlin-list:is(:hover, :focus-within)::after,
.header-faq .list .underlin-list:is(:hover, :focus-within)::after,
.header-account .list .underlin-list:is(:hover, :focus-within)::after,
.header-cart .list .underlin-list:is(:hover, :focus-within)::after,
.header-product .list .underlin-list:is(:hover, :focus-within)::after,
.header-post .list .underlin-list:is(:hover, :focus-within)::after{
    width: auto;
    transform: scaleX(1);
}
}
.header-index .list > ul > li > a:focus-visible,
.header-shop .list > ul > li > a:focus-visible,
.header-blog .list > ul > li > a:focus-visible,
.header-about .list > ul > li > a:focus-visible,
.header-contact .list > ul > li > a:focus-visible,
.header-faq .list > ul > li > a:focus-visible,
.header-account .list > ul > li > a:focus-visible,
.header-cart .list > ul > li > a:focus-visible,
.header-product .list > ul > li > a:focus-visible,
.header-post .list > ul > li > a:focus-visible{
    outline: 1px solid currentColor;
    outline-offset: 3px;
}
/* header-searach-post ***************** */
.header-search-post{
    color: #ccc;
}
.header-search-post.scrolled{
    color: #000;
}
.header-search-post .underlin-list::after{
    background-color: #ccc;
}
.header-search-post.scrolled .underlin-list::after{
    background-color: #000;
}
.container{
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
}
/* Same side margins as the homepage sections: 16px on phones. */
@media screen and (max-width: 768px) {
    .container{
        width: calc(100% - 32px);
    }
}
a,
area {
    -webkit-tap-highlight-color: transparent;
}
.navbar{
    margin: 20px 0;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.logo > a{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.logo-dot { color: #9b5a33; }
.list{
    margin-left: 50px;
}
.list ul{
    list-style-type: none;
}

.list > ul >li{
    margin: 0 10px;
    display: inline-block;
}
.list > ul >li > a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}
.list-icons > ul > li{
    padding: 0 6px;
    display: inline-block;
}
.list-icons > ul {
    list-style-type: none;
}
.list-icons > ul > li > a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    /* background-color: red; */
}
.header .list-icons .header-action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: inherit;
    border-radius: 50%;
    line-height: 1;
    transition: background-color .25s ease;
}
.header .list-icons .header-action svg{
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
}
@media (hover: hover) {
.header .list-icons .header-action:is(:hover, :focus-visible){
    background-color: rgba(0, 0, 0, .08);
}
}
.header .list-icons .header-action:focus-visible{
    outline: 1px solid currentColor;
    outline-offset: 2px;
}
.header .list-icons .header-action:has(.header-account-label){
    width: auto;
    padding: 0 10px;
    border-radius: 20px;
}
.header-account-label{
    font-size: 12px;
    letter-spacing: .3px;
}
.underlin-list{
    position: relative;
    padding-bottom: 2px;
}
.underlin-list::after{
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    left: 0; bottom: 0;
    transition: width 0.5s ease;
    background-color: #000;
}
@media (hover: hover) {
.underlin-list:hover::after{
    width: 100%;
}
}
.header-mobile{
    display: none;
}
.icone-user {
    cursor: pointer;
}
.icone-user {
    position: relative;
  }
  
.hero-blog{
    width: 100%;
    height: 450px;
    position: relative;
    top: 0; left: 0;
    background-image: url('../img/blog-in-02.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;

}

/* section-slides  **************************/

.hero{
    width: 100%;
    min-height: 600px;
    /* follows the photo's 1931:814 ratio so the couple is never cropped behind the copy */
    height: 42.17vw;
    max-height: 100svh;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #e9dfd2;
    color: #33251f;
}
.hero-visual{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero-visual picture{
    display: block;
    width: 100%;
    height: 100%;
}
.hero-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    animation: heroImageReveal 1.6s ease both;
}
.hero-container{
    height: 100%;
    position: relative;
    z-index: 2;
}
.hero-content{
    width: min(650px, 54%);
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 3;
    transform: translateY(-43%);
}
.hero-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    color: #33251f;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.15s forwards;
}
.hero-eyebrow::before{
    content: "";
    width: 34px;
    height: 1px;
    display: inline-block;
    background-color: #33251f;
}
.hero-title{
    margin: 0 0 28px;
    color: #33251f;
    font-size: clamp(54px, 5.4vw, 96px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -3px;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.32s forwards;
}
.hero-title span{
    color: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
}
.hero-subtitle{
    max-width: 415px;
    margin: 0 0 38px;
    color: #756a61;
    font-size: 16px;
    line-height: 1.85;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.48s forwards;
}
.hero-cta{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    min-width: 250px;
    padding: 10px 11px 10px 24px;
    color: #f6f2eb;
    border: 1px solid #33251f;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    background-color: #33251f;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.64s forwards;
}
.hero-cta-arrow{
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 0;
    font-size: 20px;
    line-height: 1;
    transition: transform .35s ease;
}
@media (hover: hover) {
.hero-cta:hover .hero-cta-arrow{
    transform: translate(2px, -2px);
}
}
html[dir="rtl"] .hero-content{
    right: 0;
    left: auto;
}
html[dir="rtl"] .hero-visual{
    inset: 0;
}
html[dir="rtl"] .hero-visual img{
    transform: scaleX(-1);
    animation: none;
}
html[dir="rtl"] .hero-title{
    letter-spacing: 0;
    line-height: 1.25;
}
html[dir="rtl"] .hero-title span{
    letter-spacing: 0;
}
.hero-footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid rgba(51,37,31,.22);
    color: rgba(51,37,31,.72);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hero-scroll span{
    margin-left: 13px;
    font-size: 16px;
}
@keyframes heroImageReveal{
    from{ transform: scale(1.1); opacity: .65; }
    to{ transform: scale(1); opacity: 1; }
}
@keyframes heroImageRevealRtl{
    from{ transform: scaleX(-1) scale(1.1); opacity: .65; }
    to{ transform: scaleX(-1) scale(1); opacity: 1; }
}
@keyframes heroFadeUp{
    from{
        opacity: 0;
        transform: translateY(38px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroMobileImageReveal{
    from{ transform: scale(1.16); opacity: .55; }
    to{ transform: scale(1); opacity: 1; }
}
/* the hero holds its first frame until its photo is decoded (see index.php) */
.hero.is-waiting .hero-visual img,
.hero.is-waiting .hero-eyebrow,
.hero.is-waiting .hero-title,
.hero.is-waiting .hero-subtitle,
.hero.is-waiting .hero-cta{
    animation-play-state: paused;
}
@keyframes heroMobileFadeUp{
    from{ opacity: 0; transform: translate3d(0, 24px, 0); }
    to{ opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
    .hero-visual img, .hero-eyebrow, .hero-title, .hero-subtitle, .hero-cta{
        animation: none;
        opacity: 1;
    }
}
@media (min-width: 769px){
    .hero-visual img{
        animation: heroImageReveal 2.2s cubic-bezier(.18,.64,.27,1) both;
    }
    html[dir="rtl"] .hero-visual img{
        animation-name: heroImageRevealRtl;
    }
    .hero-eyebrow{ animation: heroFadeUp 1s ease-out .12s both; }
    .hero-title{ animation: heroFadeUp 1s ease-out .28s both; }
    .hero-subtitle{ animation: heroFadeUp 1s ease-out .44s both; }
    .hero-cta{ animation: heroFadeUp 1s ease-out .6s both; }
}
/* tablet: a shorter hero crops less of the photo, and a narrower copy column keeps clear of the couple */
@media (min-width: 769px) and (max-width: 1180px){
    .list{
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .hero{
        min-height: 520px;
    }
    .hero-eyebrow{
        margin-bottom: 18px;
    }
    .hero-title{
        margin-bottom: 18px;
        font-size: 48px;
    }
    .hero-subtitle{
        max-width: 290px;
        margin-bottom: 26px;
        font-size: 15px;
        line-height: 1.7;
    }
}
/* section-breadcrumb ***********************/
.breadcrumb {
    margin: 30px 15px 0 15px;
}

.breadcrumb-shop{
    width: 15%;
    margin: 5px 10px;
    display: inline-block;
}
.breadcrumb-product {
    margin: 100px 0 0;
    padding: 13px 0;
}
.list-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list-breadcrumb li {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .02em;
    white-space: nowrap;
}
.list-breadcrumb a {
    color: #555;
    transition: color .18s ease;
}
@media (hover: hover) {
.list-breadcrumb a:hover{
    color: #111;
}
}
.item-breadcrumb{
    min-width: 0;
    overflow: hidden;
    color: #8b8b8b;
    text-overflow: ellipsis;
}
.arrow-breadcrumb{
    color: #b8b8b8;
    font-size: 8px !important;
    margin: 0 11px;
}
@media (max-width: 768px) {
    .breadcrumb-product {
        margin-top: 78px;
        padding: 11px 0 8px;
    }
    .breadcrumb-product .container {
        padding-right: 16px;
        padding-left: 16px;
    }
    .list-breadcrumb li {
        font-size: 11px;
    }
    .arrow-breadcrumb {
        margin-right: 8px;
        margin-left: 8px;
        font-size: 7px !important;
    }
    .list-breadcrumb .item-breadcrumb {
        flex: 1 1 auto;
    }
}
/* section-banner  **************************/

.banner.banner-editorial {
    margin: 0;
    padding: 90px 0 0;
    background: #f6f2eb;
}
.banner-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 29px;
}
.banner-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.banner-heading h2 {
    margin: 0;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.banner-heading > p {
    max-width: 275px;
    margin: 0 0 3px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.banner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.banner-card {
    --banner-image-scale: 1;
    --banner-image-hover-scale: 1.055;
    position: relative;
    display: block;
    min-width: 0;
    height: 430px;
    overflow: hidden;
    border-radius: 0;
    background: #5b4a3e;
    color: #fff;
    isolation: isolate;
}
.banner-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--banner-image-scale));
    transition: transform .85s cubic-bezier(.18,.64,.27,1);
}
.banner-card--women,
.banner-card--men {
    --banner-image-scale: 1.22;
    --banner-image-hover-scale: 1.28;
}
.banner-card--women img { object-position: 47% center; }
.banner-card--men img { object-position: 52% center; }
.banner-card--unisex img { object-position: 48% center; }
.banner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* a warm shade only behind the copy; the faces stay clear */
    background: linear-gradient(180deg, transparent 50%, rgba(51, 37, 31, .26) 64%, rgba(51, 37, 31, .72) 100%);
}
.banner-card-content {
    position: absolute;
    right: 30px;
    bottom: 28px;
    left: 30px;
    z-index: 2;
    display: grid;
    color: #fff;
}
.banner-card-index {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    opacity: .85;
}
.banner-card-title {
    margin-bottom: 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(36px, 3.8vw, 54px);
    letter-spacing: -1.6px;
    line-height: 1;
}
.banner-card-note {
    font-size: 13px;
    line-height: 1.5;
    opacity: .9;
}
.banner-card:focus-visible {
    outline: 2px solid #9b5a33;
    outline-offset: 4px;
}
@media screen and (max-width: 900px) {
    .banner-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .banner-card { height: 360px; }
}
@media screen and (max-width: 700px) {
    .banner.banner-editorial { padding: 60px 0 0; }
    .banner-heading { display: block; margin-bottom: 25px; }
    .banner-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .banner-heading > p { max-width: 340px; margin-top: 16px; }
    .banner-card { height: 340px; }
    .banner-card-content { right: 23px; bottom: 22px; left: 23px; }
    .banner-card-title { font-size: 43px; }
}
.shadow {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}
/* section bestsellers  **************************************************************************/
.bestsellers {
    background: #f6f2eb;
    color: #33251f;
}
.bestsellers-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
}
.bestsellers-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.bestsellers-heading h2 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.bestsellers-heading-copy p {
    max-width: 340px;
    margin: 19px 0 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.bestsellers-heading-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 2px;
}
.bestsellers-heading-actions a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #33251f;
    color: #33251f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
.bestsellers-heading-actions a:hover{ color: #9b5a33; border-color: #9b5a33; }
}
.bestsellers-heading-actions a span {
    display: inline-block;
    font-size: 16px;
    line-height: .7;
    transition: transform .35s ease;
}
@media (hover: hover) {
.bestsellers-heading-actions a:hover span{ transform: translate(2px, -2px); }
}
.bestsellers-controls { display: flex; gap: 8px; }
.bestsellers .slider-container {
    position: relative;
    margin: 0;
    padding: 0;
}
.bestsellers .product-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bestsellers .product-grid::-webkit-scrollbar { display: none; }
.bestsellers-item {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}
.bestsellers .product-card { width: 100%; }
.bestsellers-image {
    aspect-ratio: 1 / 1.06;
    overflow: hidden;
    background: #e8e0d6;
}
.bestsellers-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.86);
    transition: transform .75s cubic-bezier(.18,.64,.27,1), filter .75s ease;
}
@media (hover: hover) {
    .bestsellers-item:hover img { transform: scale(1.045); filter: saturate(.96); }
    .bestsellers-item:hover h3 { color: #9b5a33; }
}
.bestsellers-item:focus-visible { outline: 2px solid #9b5a33; outline-offset: 4px; }
.bestsellers-product-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 17px 0 3px;
}
.bestsellers-product-info h3 {
    min-width: 0;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
    transition: color .25s ease;
}
.bestsellers-product-info .price {
    flex: 0 0 auto;
    color: #756a61;
    font-size: 12px;
    white-space: nowrap;
}
/* hairline arrows */
.bestsellers-controls { align-items: center; gap: 6px; }
.bestsellers .prev-btn,
.bestsellers .next-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #33251f;
    cursor: pointer;
    transition: border-color .25s ease, opacity .25s ease;
}
.bestsellers .prev-btn svg,
.bestsellers .next-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    transition: transform .35s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.bestsellers .prev-btn:not(:disabled):hover,
.bestsellers .next-btn:not(:disabled):hover{ border-color: rgba(51, 37, 31, .22); }
.bestsellers .prev-btn:not(:disabled):hover svg{ transform: translateX(-2px); }
.bestsellers .next-btn:not(:disabled):hover svg{ transform: translateX(2px); }
}
.bestsellers .prev-btn:disabled,
.bestsellers .next-btn:disabled { opacity: .3; cursor: default; }
.bestsellers .prev-btn:focus-visible,
.bestsellers .next-btn:focus-visible { outline: 1px solid #33251f; outline-offset: 2px; }
.cart .cart-trash-icon {
    width: 17px;
    height: 17px;
    display: block;
    margin: auto;
    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cart .cart-quantity-decrease:disabled {
    opacity: .55;
    cursor: wait;
}

/* special-products  *******************************************/
.special-discount{
    margin: 100px 0;
}

.slider-special {
    position: relative;
    width: 100%;
    margin-inline: 0;
    overflow: hidden;
}
.slide-items {
    display: flex;
    position: relative;
    transition: transform 0.5s ease-in-out;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 center;
}
.slide-items > a{
    display: block;
}
.item-slide{
    min-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    position: relative;
    padding: 40px;
    border-radius: 12px;
}
.item-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
    border-radius: 12px;
}
.row-item{
    position: relative;
    z-index: 2;
}

.img-spacial {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}
.img-spacial img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}
.desc-spacial{
    color: #fff;
    margin: 0 30px;
}
.desc-spacial > h3{
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 10px 0;
}
.desc-spacial > span {
    display: block;
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 400;
}
.desc-spacial  > p{
    font-size: 14px;
    margin: 0 0 10px 0;
}
.desc-spacial > a{
    color: #fff;
    outline: none;
    padding: 7px 26px;
    border: 0.5px solid #fff;
    border-radius: 20px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    margin-top: 4px;
    transform: scale(1);
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.desc-spacial > a:hover{
    color: #000;
    border-color: #fff;
    background-color: #fff;
    transform: scale(1.07);
}
}
.controls{
    position: absolute;
    top: 50%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    display: flex;
    z-index: 3;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.control-btn{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
.control-btn:hover{
    background-color: rgba(255, 255, 255, 0.52);
    transform: scale(1.05);
}
}
@media screen and (min-width: 769px) {
    .special-discount .item-slide {
        margin-right: 16px;
    }
    .slider-special:focus-within .controls{
        opacity: 1;
        visibility: visible;
    }
@media (hover: hover) {
.slider-special:hover .controls{
        opacity: 1;
        visibility: visible;
    }
}
}

/* Keep the offer image clear of the adjacent slider control on desktop. */
@media screen and (min-width: 900px) {
    .special-discount .img-spacial {
        width: calc(100% - 32px);
        margin-inline-start: 32px;
    }
}

/* category page ******************************************/
.category-product{
    margin: 100px 0;
}
.title-category {
    margin: 30px 0;
    color: #888;
    font-size: 12px;
}




/* shop page ******************************************/

@keyframes shopProductReveal {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Shop / category listing (Women, Men, Unisex) — same language as the homepage:
   cream ground, Georgia headlines, tracked "NIVOX / ..." kickers, square edges. */
.shop-page{
    padding-top: 70px;
    color: #33251f;
}
.shop-intro{
    display: grid;
    /* the copy column is just wide enough for "Women's Eyewear." on one line */
    grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
    grid-template-rows: 1fr auto;
    column-gap: 56px;
    padding: 72px 0 96px;
}
.shop-intro-copy{
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    min-width: 0;
}
.shop-crumb{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 52px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.shop-crumb a{
    color: inherit;
    transition: color .25s ease;
}
@media (hover: hover) {
.shop-crumb a:hover{
    color: #33251f;
}
}
.shop-crumb [aria-current]{
    color: #33251f;
}
.shop-kicker{
    display: block;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.shop-intro h1{
    margin: 16px 0 22px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -3px;
    text-wrap: balance;
}
.shop-intro-copy p{
    max-width: 38ch;
    margin: 0 0 40px;
    color: #756a61;
    font-size: 14px;
    line-height: 1.75;
}
.shop-groups{
    grid-column: 1;
    grid-row: 2;
    display: flex;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.shop-groups a{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -1px;
    padding: 18px 0 4px;
    border-top: 2px solid transparent;
    transition: border-color .25s ease;
}
.shop-groups a small{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 2px;
}
.shop-groups a span{
    color: #756a61;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    letter-spacing: -.4px;
    transition: color .25s ease;
}
.shop-groups a.active span{
    color: #33251f;
}
@media (hover: hover) {
.shop-groups a:hover span{
    color: #33251f;
}
}
.shop-groups a.active{
    border-top-color: #33251f;
}
.shop-intro-visual{
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    height: clamp(380px, 34vw, 520px);
    margin: 0;
    overflow: hidden;
    background-color: #e8e0d6;
}
.shop-intro-visual img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 30%;
    animation: shopVisualReveal 1.6s cubic-bezier(.18,.64,.27,1) both;
}
.shop-intro-visual::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(40, 24, 17, .55));
}
.shop-intro-visual figcaption{
    position: absolute;
    right: 28px;
    bottom: 24px;
    left: 28px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-size: 10px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.shop-intro-visual figcaption b{
    display: block;
    margin-top: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    letter-spacing: -.5px;
    text-transform: none;
}
@keyframes shopVisualReveal{
    from{ transform: scale(1.06); opacity: .8; }
    to{ transform: scale(1); opacity: 1; }
}

/* toolbar: style filters, result count, sort — sticks under the header */
.shop-toolbar{
    position: sticky;
    top: 70px;
    z-index: 20;
    border-block: 1px solid rgba(51, 37, 31, .14);
    background-color: #f6f2eb;
}
.shop-toolbar-inner{
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}
.shop-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.shop-chip{
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #33251f;
    border: 1px solid rgba(51, 37, 31, .32);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
.shop-chip:hover{
    border-color: #33251f;
}
}
.shop-chip.active{
    color: #f6f2eb;
    border-color: #33251f;
    background-color: #33251f;
}
.shop-chip:focus-visible,
.shop-groups a:focus-visible,
.shop-crumb a:focus-visible,
.shop-card a:focus-visible,
.shop-card button:focus-visible,
.shop-sort select:focus-visible,
.shop-filter-open:focus-visible{
    outline: 2px solid #9b5a33;
    outline-offset: 2px;
}
.shop-toolbar-meta{
    order: 3;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-inline-start: -16px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.shop-count{
    font-variant-numeric: tabular-nums;
}
.shop-sort{
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
    color: #33251f;
    border: 1px solid rgba(51, 37, 31, .32);
}
.shop-sort select{
    height: 14px;
    margin: 0;
    line-height: 14px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 18px 0 0;
    color: inherit;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%2333251f' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / 12px;
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.shop-filter-open{
    display: none;
}
.shop-sheet [hidden]{
    display: none !important;
}
.shop-empty-state[hidden]{
    display: none;
}
/* search results on the shop page */
.shop-toolbar[hidden]{
    display: none;
}
.shop-search{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-bottom: 12px;
    border-bottom: 1px solid #33251f;
}
.shop-search svg{
    width: 24px;
    height: 24px;
    color: #33251f;
}
.shop-search input{
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    -webkit-appearance: none;
    appearance: none;
}
.shop-search input::-webkit-search-cancel-button{
    display: none;
}
.shop-search-clear{
    display: grid;
    place-items: center;
    color: #33251f;
    cursor: pointer;
}
@media (hover: hover) {
.shop-search-clear:hover{
    color: #9b5a33;
}
}
.shop-card-coll{
    color: #756a61;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.shop-card-text h3 mark{
    background: none;
    color: #9b5a33;
}
.shop-search-term{
    color: #33251f;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}
/* desktop: On Sale sits right before Sort, both outlined */
.shop-sale-toggle{
    order: 2;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #33251f;
    border: 1px solid rgba(51, 37, 31, .32);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.shop-sale-toggle span{
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0;
    transition: color .25s ease;
}
@media (hover: hover) {
.shop-sale-toggle:hover,
.shop-sort:hover{
    border-color: #33251f;
}
}
.shop-sale-toggle[aria-pressed="true"]{
    color: #f6f2eb;
    border-color: #33251f;
    background-color: #33251f;
}
.shop-sale-toggle[aria-pressed="true"] span{
    color: #f6f2eb;
}
.shop-sale-count{
    color: #756a61;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.shop-sale-toggle[aria-pressed="true"] .shop-sale-count{
    color: rgba(246, 242, 235, .75);
}
.shop-sale-toggle:focus-visible{
    outline: 2px solid #9b5a33;
    outline-offset: 2px;
}
.shop-sale-toggle[hidden]{
    display: none;
}

/* desktop and tablet: the style bar reads like the Journal's, cells on one hairline with the
   chosen one in the shop's tint; On Sale and Sort close the row on the right */
@media (min-width: 769px) {
    .shop-toolbar-inner{
        gap: 0;
        min-height: 0;
        align-items: stretch;
    }
    .shop-chips{
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .shop-chips::-webkit-scrollbar{
        display: none;
    }
    .shop-chips li + li .shop-chip{
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .shop-chip{
        height: 100%;
        padding: 26px 24px;
        border: 0;
        background: none;
        color: #756a61;
        font-size: 11px;
        letter-spacing: 2px;
    }
    .shop-chip.active{
        color: #33251f;
        background-color: #ece3d7;
    }
    .shop-sale-toggle,
    .shop-sort{
        height: auto;
        padding: 0 24px;
        border: 0;
        border-left: 1px solid rgba(51, 37, 31, .14);
        font-size: 11px;
        letter-spacing: 2px;
    }
    .shop-sale-toggle[aria-pressed="true"]{
        color: #33251f;
        background-color: #ece3d7;
    }
    .shop-sale-toggle[aria-pressed="true"] span{
        color: #33251f;
    }
    .shop-sale-toggle[aria-pressed="true"] .shop-sale-count{
        color: #756a61;
    }
    .shop-toolbar-meta{
        align-self: stretch;
        align-items: stretch;
        margin-inline-start: 0;
    }
    .shop-sale-toggle[aria-pressed="true"]{
        border-color: rgba(51, 37, 31, .14);
    }
    /* Sort fills its cell; choosing from it tints the cell instead of ringing the small menu */
    .shop-sort select:focus-visible{
        outline: none;
    }
    .shop-sort:focus-within{
        background-color: #ece3d7;
    }
}
/* narrower screens: tighter cells so the whole row fits beside On Sale and Sort */
@media (min-width: 769px) and (max-width: 1366px) {
    .shop-chip,
    .shop-sale-toggle,
    .shop-sort{
        padding-inline: 14px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .shop-chip,
    .shop-sale-toggle,
    .shop-sort{
        padding-inline: 10px;
        letter-spacing: 1.1px;
    }
}
@media (min-width: 769px) and (hover: hover) {
    .shop-chip:hover{
        color: #33251f;
    }
}

/* product grid */
.shop-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 72px 24px;
    padding: 64px 0 108px;
    container-type: inline-size;
    transition: opacity .2s ease;
}
.shop-grid.is-loading{
    opacity: .45;
    pointer-events: none;
}
.shop-card{
    min-width: 0;
}
.shop-card-media{
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.shop-card-link{
    display: block;
    width: 100%;
    height: 100%;
}
.shop-card-media img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.shop-card-tag{
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 9px;
    color: #33251f;
    background-color: #f6f2eb;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    pointer-events: none;
}
.shop-card-quick{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    transform: translateY(100%);
    transition: transform .45s cubic-bezier(.22, .7, .25, 1);
}
.shop-card-quick:focus-within{
    transform: translateY(0);
}
@media (hover: hover) {
.shop-card-media:hover .shop-card-quick{
    transform: translateY(0);
}
}
/* touch screens cannot hover, so the bar stays visible there */
@media (hover: none){
    .shop-card-quick{
        transform: translateY(0);
    }
}
.shop-card-quick .btn-add-shop{
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #33251f;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .55);
    border-radius: 0;
    background-color: rgba(246, 242, 235, .5);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
/* keeps its own colors on hover (the shared .btn-add-shop rule turns buttons black) */
@media (hover: hover) {
.shop-card-quick .btn-add-shop:hover{
    color: #33251f;
    background-color: rgba(246, 242, 235, .5);
}
}
.shop-card-info{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}
.shop-card-text{
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.shop-card-text h3{
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.25;
}
.shop-card-price{
    color: #756a61;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.shop-card .favorite-toggle{
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    margin: -7px -8px 0 0;
    color: #33251f;
}
.shop-card .favorite-toggle svg{
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: fill .2s ease, stroke .2s ease;
}
@media (hover: hover) {
.shop-card .favorite-toggle:hover{
    color: #9b5a33;
}
}
.shop-card .favorite-toggle.active{
    color: #9b5a33;
}
.shop-card .favorite-toggle.active svg{
    fill: currentColor;
}

/* entrance: cards rise in, one after another, once their images are ready */
.shop-grid.is-reveal-pending > .shop-reveal{
    opacity: 0;
}
.shop-grid.is-reveal-active > .shop-reveal{
    animation: shopProductReveal .5s cubic-bezier(.22, .7, .25, 1) both;
    animation-delay: calc(min(var(--shop-reveal-order, 0), 5) * 60ms);
}
.shop-grid.is-swapped > *{
    animation: shopSwapFade .25s ease both;
}
@keyframes shopSwapFade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

.shop-empty-state{
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* one product row tall (photo + name and price), so switching to an empty style does not make the page jump */
    min-height: calc((100cqw - 48px) / 3 * 1.25 + 62px);
    padding: 40px 24px;
    box-sizing: border-box;
    color: #756a61;
    text-align: center;
    background-color: #efe8de;
}
.shop-empty-state h3{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -1px;
    text-wrap: balance;
}
.shop-empty-state p{
    max-width: 40ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
}
.shop-empty-link{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-bottom: 8px;
    color: #33251f;
    border-bottom: 1px solid #33251f;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.shop-empty-link:focus-visible{
    outline: 2px solid #9b5a33;
    outline-offset: 4px;
}

/* Filter & Sort sheet (mobile) */
.shop-sheet{
    position: fixed;
    inset: 0;
    z-index: 1100;
}
.shop-sheet-backdrop{
    position: absolute;
    inset: 0;
    background-color: rgba(30, 20, 15, .45);
    animation: shopSheetFade .25s ease both;
}
.shop-sheet-panel{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    color: #33251f;
    background-color: #f6f2eb;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: shopSheetUp .35s cubic-bezier(.22, .7, .25, 1) both;
}
.shop-sheet-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.shop-sheet-head h2{
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    letter-spacing: -.4px;
}
.shop-sheet-close{
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #33251f;
    border: 1px solid rgba(51, 37, 31, .32);
    font-size: 22px;
    line-height: 1;
}
.shop-sheet-body{
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}
.shop-sheet-group{
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.shop-sheet-group legend{
    float: left;
    width: 100%;
}
.shop-sheet-group legend + *{
    clear: both;
}
.shop-sheet-group legend,
.shop-sheet-label{
    display: block;
    margin-bottom: 12px;
    padding: 0;
    color: #9b5a33;
    font-size: 9px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.shop-radio{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    cursor: pointer;
}
.shop-radio input{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(51, 37, 31, .32);
    border-radius: 50%;
}
.shop-radio input::after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #33251f;
    transform: scale(0);
    transition: transform .2s ease;
}
.shop-radio input:checked::after{
    transform: scale(1);
}
.shop-radio input:focus-visible{
    outline: 2px solid #9b5a33;
    outline-offset: 2px;
}
.shop-sheet .shop-chips{
    flex-wrap: wrap;
}
.shop-price-range{
    position: relative;
    height: 30px;
}
.shop-price-range::before{
    content: "";
    position: absolute;
    top: 14px;
    right: 0;
    left: 0;
    height: 1px;
    background-color: rgba(51, 37, 31, .32);
}
.shop-price-range input{
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}
.shop-price-range input::-webkit-slider-thumb{
    width: 20px;
    height: 20px;
    border: 1px solid #33251f;
    border-radius: 0;
    background-color: #f6f2eb;
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
}
.shop-price-range input::-moz-range-thumb{
    width: 18px;
    height: 18px;
    border: 1px solid #33251f;
    border-radius: 0;
    background-color: #f6f2eb;
    pointer-events: auto;
    cursor: pointer;
}
.shop-price-values{
    display: flex;
    justify-content: space-between;
    color: #756a61;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.shop-sheet-foot{
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    padding: 14px 20px 24px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.shop-sheet-foot button{
    height: 50px;
    color: #33251f;
    border: 1px solid #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.shop-sheet-foot .shop-sheet-apply{
    color: #f6f2eb;
    background-color: #33251f;
}
@keyframes shopSheetUp{
    from{ transform: translateY(100%); }
    to{ transform: translateY(0); }
}
@keyframes shopSheetFade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}
html.shop-sheet-open{
    overflow: hidden;
}

html[dir="rtl"] .shop-intro h1,
html[dir="rtl"] .shop-groups a span{
    letter-spacing: 0;
}
html[dir="rtl"] .shop-card-tag{
    right: 16px;
    left: auto;
}
html[dir="rtl"] .shop-card .favorite-toggle{
    margin: -7px 0 0 -8px;
}

/* The bag icon replaces the text bar on phones only. */
.btn-add-text{
    display: contents;
}
.btn-add-icon,
.shop-style-picker,
.shop-filter-badge{
    display: none;
}

@media screen and (max-width: 1024px) {
    .shop-intro{
        column-gap: 32px;
    }
    .shop-grid{
        gap: 56px 16px;
    }
    .shop-empty-state{
        min-height: calc((100cqw - 32px) / 3 * 1.25 + 62px);
    }
}

@media screen and (max-width: 768px) {
    .shop-page > .container{
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }
    /* photo with the title on top, then the Women / Men / Unisex tabs */
    .shop-intro{
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        margin: 0 -16px;
        padding: 0;
    }
    .shop-intro-visual{
        grid-column: 1;
        grid-row: 1;
        height: 330px;
    }
    .shop-intro-visual::after{
        background: linear-gradient(180deg, rgba(40, 24, 17, .05) 30%, rgba(40, 24, 17, .72));
    }
    .shop-intro-visual figcaption{
        display: none;
    }
    .shop-intro-copy{
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
        padding: 0 18px 22px;
        color: #fff;
    }
    .shop-crumb{
        display: none;
    }
    .shop-intro .shop-kicker{
        color: #fff;
        font-size: 9px;
    }
    .shop-intro h1{
        margin: 10px 0 8px;
        font-size: 44px;
        letter-spacing: -2px;
    }
    .shop-intro-copy p{
        max-width: 30ch;
        margin: 0;
        color: rgba(247, 243, 233, .82);
        font-size: 12px;
        line-height: 1.6;
    }
    .shop-groups{
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 0;
        border-bottom: 1px solid rgba(51, 37, 31, .14);
    }
    .shop-groups a{
        align-items: center;
        margin: 0 0 -1px;
        padding: 24px 0 22px;
        border-top: 0;
        border-bottom: 2px solid transparent;
    }
    /* hairlines between Women / Men / Unisex, matching the line below */
    .shop-groups a + a{
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .shop-groups a small{
        display: none;
    }
    .shop-groups a span{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .shop-groups a.active{
        border-bottom-color: transparent;
        background-color: #ece3d7;
    }

    .shop-toolbar{
        margin: 10px -16px 0;
        border-top: 0;
    }
    /* search results have no style list, so Filter takes its place */
    .shop-toolbar-inner:not(:has(.shop-style-picker)) .shop-filter-open{
        grid-column: 1 / 3;
    }
    .shop-search{
        gap: 10px;
        margin-top: 22px;
        padding-bottom: 10px;
    }
    .shop-search svg{
        width: 18px;
        height: 18px;
    }
    .shop-search input{
        font-size: 26px;
        letter-spacing: -.6px;
    }
    .shop-card-coll{
        font-size: 8px;
    }
    .shop-toolbar-inner{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 12px 6px;
        padding: 14px 18px;
    }
    .shop-sale-toggle{
        grid-row: 2;
        grid-column: 2;
        height: 44px;
        padding: 0 14px;
    }
    .shop-filter-open{
        grid-row: 2;
        grid-column: 1;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 44px;
        padding: 0 16px;
        color: #33251f;
        border: 1px solid #33251f;
        font-size: 10px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }
    .shop-filter-open svg{
        width: 14px;
        height: 14px;
    }
    .shop-toolbar-meta{
        grid-row: 2;
        grid-column: 1;
        justify-self: end;
        margin: 0;
        padding-right: 16px;
        pointer-events: none;
    }
    .shop-toolbar-meta .shop-sort{
        display: none;
    }
    .shop-toolbar .shop-chips{
        display: none;
    }
    .shop-toolbar-meta{
        display: none;
    }
    .shop-filter-open{
        grid-row: 1;
        grid-column: 2;
        justify-content: center;
        gap: 8px;
        padding: 0 12px;
        letter-spacing: 1.4px;
    }
    .shop-sale-toggle{
        grid-row: 1;
        grid-column: 3;
        gap: 6px;
        margin: 0;
        padding: 0 10px;
        border-color: rgba(51, 37, 31, .32);
        letter-spacing: 1.4px;
    }
    /* lighter outlines for the three phone buttons */
    .shop-toolbar .shop-filter-open{
        border-color: rgba(51, 37, 31, .32);
    }
    /* the style list opens under its button */
    .shop-style-picker{
        position: relative;
        grid-row: 1;
        grid-column: 1;
        display: block;
        min-width: 0;
    }
    .shop-style-open{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        height: 44px;
        padding: 0 12px;
        border: 1px solid rgba(51, 37, 31, .32);
        color: #33251f;
        font-size: 10px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
    }
    .shop-style-open span{
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shop-style-open svg{
        flex: none;
        width: 11px;
        height: 11px;
        transition: transform .3s ease;
    }
    .shop-style-open[aria-expanded="true"] svg{
        transform: rotate(180deg);
    }
    .shop-style-menu{
        position: absolute;
        z-index: 30;
        top: calc(100% + 6px);
        left: 0;
        width: max(100%, 220px);
        margin: 0;
        padding: 6px 0;
        list-style: none;
        border: 1px solid rgba(51, 37, 31, .2);
        background-color: #fbf9f5;
        box-shadow: 0 24px 48px -24px rgba(51, 37, 31, .45);
    }
    .shop-style-menu[hidden]{
        display: none;
    }
    .shop-style-option{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 16px;
        color: #33251f;
        font-size: 10px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .shop-style-option.active{
        background-color: #ece3d7;
    }
    .shop-style-option.active::after{
        content: "\2713";
        font-size: 12px;
        letter-spacing: 0;
    }
    .shop-filter-badge{
        display: grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 9px;
        background-color: #9b5a33;
        color: #fff;
        font-size: 9px;
        font-style: normal;
        letter-spacing: 0;
    }
    .shop-filter-badge[hidden]{
        display: none;
    }
    .shop-chip{
        height: 32px;
        padding: 0 13px;
        font-size: 9px;
    }

    .shop-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 46px 10px;
        padding: 24px 0 64px;
    }
    .shop-card-link{
        height: auto;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background-color: #e8e0d6;
    }
    .shop-card-quick{
        left: auto;
        right: 8px;
        bottom: 8px;
        transform: none;
        transition: none;
    }
    .btn-add-text{
        display: none;
    }
    .btn-add-icon{
        display: block;
        width: 17px;
        height: 17px;
    }
    .shop-card-quick .btn-add-shop{
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .6);
        background-color: rgba(246, 242, 235, .62);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        transition: background-color .3s ease, color .3s ease;
    }
@media (hover: hover) {
.shop-card-quick .btn-add-shop:hover{
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .6);
        background-color: rgba(246, 242, 235, .62);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        transition: background-color .3s ease, color .3s ease;
    }
}
    .shop-card-quick .btn-add-shop.is-added{
        border-color: #33251f;
        background-color: #33251f;
        color: #f6f2eb;
    }
    .shop-card-info{
        gap: 6px;
        padding-top: 10px;
    }
    .shop-card-text{
        gap: 10px;
    }
    .shop-card-text h3{
        font-size: 14px;
    }
    .shop-card-price{
        font-size: 14px;
    }
    .shop-card .shop-card-price s{
        margin-left: 5px;
        font-size: 12px;
    }
    .shop-card .favorite-toggle{
        width: 28px;
        height: 28px;
        margin: -5px -6px 0 0;
    }
    .shop-card .favorite-toggle svg{
        width: 15px;
        height: 15px;
    }
    .shop-card-tag{
        top: 8px;
        left: 8px;
        padding: 4px 6px;
        font-size: 8px;
    }
    /* one row of two cards: photo plus name and price */
    .shop-empty-state{
        grid-column: 1 / -1;
        gap: 10px;
        min-height: calc((100cqw - 10px) / 2 * 1.25 + 69px);
        padding: 24px 20px;
    }
    .shop-empty-state h3{
        font-size: 24px;
        letter-spacing: -.6px;
    }
    .shop-empty-state p{
        font-size: 13px;
        line-height: 1.6;
    }
    .shop-empty-link{
        margin-top: 6px;
    }
}

@media (prefers-reduced-motion: reduce){
    .shop-intro-visual img,
    .shop-grid.is-reveal-active > .shop-reveal,
    .shop-sheet-backdrop,
    .shop-sheet-panel{
        animation: none;
    }
    .shop-grid.is-reveal-pending > .shop-reveal{
        opacity: 1;
    }
    .shop-grid.is-swapped > *{
        animation: none;
    }
}

/* shared product cards (category and search pages) **************************/
.products-slideshow{
    width: 100%;
    height: 550px;
    position: relative;
    overflow: hidden;
}
.slide-container{
    width: 100%;
    height: 100%;
    position: relative;
}
.slide-container > img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.slide-container > img.active {
    opacity: 1;
}
.underline-transition{
    color: #666;
    min-width: max-content;
    margin: 0;
    padding: 5px 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #d8d8d8;
    background-color: #fff;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
.underline-transition:hover{
    color: #000;
    background-color: #f5f5f5;
    border-color: #c7c7c7;
}
}
.underline-transition.active{
    color: #fff;
    font-weight: 600;
    border-color: #000;
    background-color: #000;
}
.underline-transition::after{
    content: none;
}
@media (hover: hover) {
.underline-transition:hover::after{
    width: 0;
}
}
.underline-transition.active::after{
    width: 0;
}
.column-product {
    transition: opacity 0.3s ease-in-out;
}
.item-product{
    flex: 0 0 25%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 25px;
    transition: opacity 0.3s ease-in-out;
}
.img-product{
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background-color: #f5f5f5;
}
.img-product > img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    vertical-align: middle;
}
.view-details{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0px; left: 0px;
    transition: 0.6s ease;
    opacity: 0;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.4);
}
@media (hover: hover) {
.img-product:hover .view-details{
    opacity: 1;
}
}
.view-details span{
    color: #fff;
    outline: none;
    border: none;
    cursor: pointer; 
    padding: 10px 40px;
    font-size: 14px;
    background: none;
    display: inline-block;
    transform: translateY(50px);
    transition: transform 0.3s ease;
}
@media (hover: hover) {
.view-details:hover span{
    transform: translateY(0px);
}
}

.name-product{
    margin-top: 25px;
}
.name-product > .row {
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
}

.product-name {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.btn-disabled-shop {
    outline: none;
    color: #000;
    padding: 4px 14px;
    border: 1px solid  #acacac;
    cursor: pointer;
    border-radius: 20px;
    font-size: 12px;
    transition: all 0.3s ease;
}
.btn-add-shop {
    outline: none;
    color: #000;
    padding: 4px 14px;
    border: 1px solid  #acacac;
    cursor: pointer;
    border-radius: 20px;
    font-size: 12px;
    transition: all 0.3s ease;
}
@media (hover: hover) {
.btn-add-shop:hover{
    color: #fff;
    background-color: #000;
}
}
.heart > button{
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.heart {
    margin-left: auto;
    flex: 0 0 auto;
}
.heart > button > i,
.heart > button > svg {
    color: #dadada;
    width: 16px;
    height: 16px;
    font-size: 16px;
}
.heart > button.active > i,
.heart > button.active > svg {
    color: #000;
}
@media (hover: hover) {
.heart > button:not(.active):hover > i,
.heart > button:not(.active):hover > svg{
    color: #000;
}
}
@media screen and (max-width: 768px) {
    .heart > button > i,
    .heart > button > svg {
        width: 15px;
        height: 15px;
        color: rgba(255, 255, 255, .72);
        font-size: 15px;
    }
    .heart > button.active > i,
.heart > button.active > svg{
        color: #fff;
    }
@media (hover: hover) {
.heart > button:not(.active):hover > i,
.heart > button:not(.active):hover > svg{
        color: #fff;
    }
}
}
.favorite-toggle:disabled {
    opacity: 0.6;
    cursor: wait;
}
.favorite-login-message {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1200;
    padding: 10px 16px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 10px;
    background-color: #000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.favorite-login-message.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* modall success  ***********************/
.modal-success {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.content-success {
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    max-height: min(78vh, 620px);
    padding: 54px 22px 28px;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    background-color: #f7f7f7;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.35s ease-in-out;
}
.content-success::-webkit-scrollbar {
    width: 8px;
}

.content-success::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 5px;
}

@media (hover: hover) {
.content-success::-webkit-scrollbar-thumb:hover{
    background-color: #555;
}
}
.modal-success.show {
    visibility: visible;
    opacity: 1;
}
.modal-success.show .content-success {
    transform: translateY(0); 
}
.row-modal-added {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    gap: 16px;
    padding: 12px;
    margin: 10px auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    position: relative;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.image-success{
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f4f4f4;
}
.image-success img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.title-modal p {
    color: #111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.product-total-price {
    color: #666;
    margin: 8px 0 0;
    display: inline-block;
    font-size: 13px;
}
.modal-quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    margin-left: auto;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background-color: #f8f8f8;
}
.modal-qty-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #111;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    font-size: 16px;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
.modal-qty-btn:hover{
    color: #fff;
    border-color: #000;
    background-color: #000;
}
}
.modal-qty-btn i {
    font-size: 12px;
}
.modal-qty-count {
    min-width: 18px;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.remove-product-btn{
    width: 28px;
    height: 28px;
    outline: none;
    padding: 0;
    cursor: pointer;
    color: #777;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 18px;
    line-height: 26px;
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    display: inline-block;
    transition: color 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) {
.remove-product-btn:hover{
    color: #fff;
    background-color: #000;
}
}
.totalPrice {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 12px auto;
    text-align: right;
    font-weight: bold;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.btn-close-modal {
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 14px; right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    color: #777;
    font-size: 24px;
    line-height: 1;
    border-radius: 0;
    background: transparent;
    transition: color 0.2s ease;
}
@media (hover: hover) {
.btn-close-modal:hover{
    color: #000;
    background-color: transparent;
}
}
.link-cart{ 
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding:  13px 16px;
    margin: 12px auto 0;
    display: block;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #000;
    background-color: #000;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
}
@media (hover: hover) {
.link-cart:hover{
    color: #000;
    border-color: #d0d0d0;
    background-color: #fff;
}
}
.empty-cart {
    width: 100%;
    max-width: 560px;
    padding: 44px 20px;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
}
.empty-cart p {
    margin: 10px 0;
}
.empty-cart a {
    color: #fff;
    padding: 8px 16px;
    display: inline-block;
    border-radius: 10px;
    background-color: #000;
}
/* section blog-index   ******************************************/

.blog-index{
    width: 100%;
    margin: 100px 0;
    position: relative;
}
.blog-index .title-index > a {
    border-radius: 20px;
}
.container-blog{
    width: 100%;
    position: relative;
}
.scroll-wrapper{
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    justify-content: flex-start;
    width: 100%;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    /* Cards are sized from this box (cqw), never from their images, and measured from it (offsetLeft). */
    container-type: inline-size;
    position: relative;
}
@media screen and (min-width: 769px) {
    .scroll-wrapper.blog-initializing {
        visibility: hidden;
    }
}
.scroll-wrapper::-webkit-scrollbar{
    display: none;
}
.item-post .img {
    overflow: hidden;
    border-radius: 10px;
}
.item-post-index{
    display: flex;
    flex: none;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px 0 0;
}
.item-post-index > a{
    height: 500px;
    width: 75%;
    flex: 0 0 75%;
    /* 75% of a box that grows with its content depended on whether the images had loaded yet. */
    width: 75cqw;
    flex: 0 0 75cqw;
    margin: 0 5px;
    border-radius: 12px;
    scroll-snap-align: center;
    touch-action: pan-x pan-y;
    overflow: hidden;
    position: relative;
}
.item{
    width: 100%;
    height: 100%;
    position: relative;
    transition: filter 0.3s ease, opacity 0.3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.item.faded {
    filter: brightness(30%);
    opacity: 0.6; 
}

.item.active-item {
    filter: brightness(100%);
    opacity: 1;
}
.item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 12px;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.description{
    right: 20px;
    position: absolute;
    bottom: 30px; left: 0;
    margin: 0 20px;
    padding: 0 5px;
    box-sizing: border-box;
    min-width: 0;
    transform: translateY(100%); 
    opacity: 0;
    z-index: 2;
    transition: transform 0.7s ease, opacity 0.7s ease;

}
.description.show {
    transform: translateY(0);
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .blog-index .item,
    .blog-index .item.faded,
    .blog-index .item.active-item {
        filter: none;
        opacity: 1;
    }
    .blog-index .item.faded::after {
        opacity: 0.7;
    }
    .blog-index .item.active-item::after {
        opacity: 0;
    }
}

.description .sp1{
    font-size: 12px;
    display: block;
    color: #fff;
}
.description .sp2{
    font-size: 14px;
    color: #fff;
    display: block;
    max-width: 100%;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}
.dot-scroller {
    text-align: center;
    margin-top: 15px;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #929292;
}


/* section benefit  ***********************************/

.sec-benefit{
    margin: 100px 0;
}
.container-benefit {
    padding: 20px;
}
.benefit {
    width: 100%;
    max-width: 700px;
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* footer  ******************************************/

footer{
    padding: 0px 0;
    background-color: #f0f0f0;
}

.title-footer{
    text-align: center;
    margin: 0 0 50px;
    padding: 20px 0;
    border-bottom: 0.5px solid #ababab;
}
.title-footer > p{
    letter-spacing: 20px;
}
.item-foo{
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    text-align: center;
    /* background-color: red; */
}
.footer-links-grid {
    width: calc(100% - 40px);
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
}
.footer-link-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}
.footer-link-group h3 {
    margin: 0 0 8px;
    color: #222;
    font-size: 13px;
    font-weight: 500;
}
.footer-link-group a {
    position: relative;
    color: #666;
    font-size: 12px;
    line-height: 1.7;
    transition: color .18s ease;
}
.footer-link-group a::after {
    width: 0;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: '';
    background: #222;
    transition: width .18s ease;
}
@media (hover: hover) {
.footer-link-group a:hover{
    color: #111;
}
}
@media (hover: hover) {
.footer-link-group a:hover::after{
    width: 100%;
}
}
.item-foo a{
    width: 80px;
    font-size: 12px;
    padding: 2px 0;
    margin: 0 0px;
    display: inline-block;
}
.item-foo > p {
    font-size: 12px;
    margin: 50px 10px 0;
}
.footer-contact {
    max-width: 620px;
}
.footer-contact > p {
    color: #666;
    line-height: 1.8;
}
.footer-contact .footer-phone {
    width: auto;
    display: inline-block;
    padding: 0;
    color: #333;
    font-size: inherit;
    white-space: nowrap;
}
.icons-footer {
    text-align: center;
}
.icons-footer > a{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    border-radius: 50%;
    transition: color .18s ease, background-color .18s ease;
}
@media (hover: hover) {
.icons-footer > a:hover{
    color: #111;
    background: rgba(255, 255, 255, 0.75);
}
}
.icons-footer > a > i,
.icons-footer > a > svg {
    width: 19px;
    height: 19px;
    font-size: 19px;
}

.end-footer{
    padding: 20px 0;
    margin: 40px 0 0;
    font-size: 12px;
    text-align: center;
    border-top: 0.5px solid #ababab;
}
.end-footer > p > a{
    color: rgb(45, 151, 208);
    font-weight: bold;
    text-decoration: underline;
}
@media screen and (max-width: 576px) {
    .title-footer {
        margin-bottom: 32px;
    }
    .footer-links-grid {
        width: calc(100% - 32px);
        grid-template-columns: repeat(2, minmax(120px, 150px));
        justify-content: center;
        gap: 30px 24px;
    }
    .footer-link-group:last-child {
        grid-column: 1 / -1;
    }
    .footer-link-group h3 {
        font-size: 12px;
    }
    .footer-link-group a {
        font-size: 11px;
    }
    .footer-contact > p {
        margin-top: 38px;
        padding: 0 12px;
        line-height: 1.9;
        overflow: visible;
        word-break: normal;
    }
}
/* Editorial site footer */
.site-footer {
    padding: 76px 0 0;
    color: #33251f;
    background: #e8e0d6;
}
.site-footer > .container { width: min(1240px, calc(100% - 80px)); }
.site-footer .title-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin: 0;
    padding: 0 0 46px;
    border-bottom: 1px solid #d7cbc0;
    text-align: left;
}
.site-footer .footer-eyebrow,
.site-footer .footer-lower-label {
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.site-footer .footer-brand > p {
    margin: 8px 0 0;
    color: #43291f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(68px, 9vw, 124px);
    letter-spacing: -7px;
    line-height: .85;
}
.site-footer .footer-brand-dot { color: #9b5a33; }
.site-footer .footer-brand-note {
    max-width: 380px;
    margin: 0 0 6px;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.4px;
    text-align: right;
    text-wrap: balance;
}
.site-footer .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(210px, 1fr);
    gap: 52px;
    padding: 43px 0 56px;
}
.site-footer .footer-links-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 22px;
    margin: 0;
}
.site-footer .footer-link-group { gap: 10px; }
.site-footer .footer-link-group h3,
.site-footer .footer-contact h3 {
    margin: 0 0 11px;
    color: #33251f;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.site-footer .footer-link-group a {
    width: fit-content;
    color: #756a61;
    font-size: 13px;
    line-height: 1.5;
}
.site-footer .footer-link-group a::after {
    right: auto;
    margin: 0;
    background: #9b5a33;
}
@media (hover: hover) {
.site-footer .footer-link-group a:hover{ color: #33251f; }
}
.site-footer .footer-contact {
    max-width: none;
    margin: 0;
    text-align: left;
}
.site-footer .footer-contact > p {
    margin: 0;
    padding: 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.75;
}
.site-footer .footer-contact .footer-phone {
    color: #33251f;
    border-bottom: 1px solid #9b5a33;
}
.site-footer .footer-lower {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #d7cbc0;
}
.site-footer .footer-social { width: auto; max-width: none; margin: 0; }
.site-footer .icons-footer { display: flex; gap: 8px; }
.site-footer .icons-footer > a {
    width: 38px;
    height: 38px;
    margin: 0;
    color: #33251f;
    border: 1px solid #d7cbc0;
    border-radius: 0;
    background: transparent;
}
@media (hover: hover) {
.site-footer .icons-footer > a:hover{
    color: #f6f2eb;
    border-color: #43291f;
    background: #43291f;
}
}
.site-footer .end-footer {
    margin: 0;
    padding: 18px 0 24px;
    border-top: 1px solid #d7cbc0;
    text-align: left;
}
.site-footer .end-footer > p { margin: 0; color: #756a61; font-size: 11px; }
.site-footer .end-footer > p > a {
    color: #33251f;
    font-weight: inherit;
    text-decoration-color: #9b5a33;
    text-underline-offset: 3px;
}
/* copyright and social links share one closing row */
.site-footer .footer-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 22px 0 26px;
    border-top: 1px solid #d7cbc0;
    color: #756a61;
    font-size: 11px;
}
.site-footer .footer-base p { margin: 0; }
.site-footer .footer-social {
    display: flex;
    gap: 28px;
}
.site-footer .footer-social a {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: #33251f;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.site-footer .footer-social a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 0;
    height: 1px;
    background-color: #9b5a33;
    transition: width .35s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.site-footer .footer-social a:hover::after{ width: 100%; }
}
.site-footer .footer-social a:focus-visible {
    outline: 1px solid #33251f;
    outline-offset: 4px;
}
html[dir="rtl"] .site-footer .title-footer,
html[dir="rtl"] .site-footer .footer-contact,
html[dir="rtl"] .site-footer .end-footer { text-align: right; }
html[dir="rtl"] .site-footer .footer-link-group { align-items: flex-start; text-align: right; }
@media screen and (max-width: 760px) {
    .site-footer { padding-top: 54px; }
    .site-footer > .container { width: calc(100% - 32px); }
    .site-footer .title-footer { display: block; padding-bottom: 34px; }
    .site-footer .footer-brand > p { font-size: clamp(66px, 18vw, 96px); letter-spacing: -5px; }
    .site-footer .footer-brand-note { max-width: none; margin-top: 23px; font-size: 22px; text-align: left; }
    .site-footer .footer-base { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; padding-top: 24px; }
    .site-footer .footer-social { gap: 22px; order: -1; }
    .site-footer .footer-main { grid-template-columns: 1fr; gap: 36px; padding: 34px 0 42px; }
    .site-footer .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
    .site-footer .footer-link-group:last-child { grid-column: auto; }
    .site-footer .footer-contact { padding-top: 28px; border-top: 1px solid #d7cbc0; }
    .site-footer .footer-contact > p { margin: 0; padding: 0; }
    .site-footer .end-footer { padding-bottom: 24px; }
}
/* search section  **************************/
.search{
    margin: 120px 0;
}
.title-search {
    margin: 30px 10px;
    color: #888;
    font-size: 12px;

}
.arrow-search {
    font-size: 10px;
    margin: 0 10px;
    display: inline-block;
}
.result-search {
    color: #000;
    font-size: 12px;

}
.not-found-page {
    min-height: 70vh;
    padding: 140px 0 80px;
    display: flex;
    align-items: center;
}
.not-found-content {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.not-found-content span {
    display: block;
    color: #d8d8d8;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
}
.not-found-content h1 {
    margin: 18px 0 10px;
    font-size: 28px;
}
.not-found-content p {
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}
.not-found-content a {
    display: inline-block;
    margin-top: 22px;
    padding: 9px 22px;
    color: #fff;
    border-radius: 999px;
    background-color: #000;
}









/* Blog page  ******************************************/
.blog{
    margin: 30px 0 60px;
}
.blog.blog-post-page {
    margin-top: 55px;
}
@media screen and (max-width: 576px) {
    .blog.blog-post-page {
        margin-top: 42px;
    }
}
.post{
    margin: 0 0 100px;
    /* background-color: red; */

}
.item-blog {
    overflow: hidden;
    border-radius: 10px;
    margin: 0 0 50px;
}
.item-blog > a{
    display: block;
    overflow: hidden;
    border-radius: 10px;
}
.item-blog > a > img{
    width: 100%;
    display: block;
    border-radius: 10px;
    vertical-align: middle;
    transform: scale(1);
    transition: transform 0.9s ease;
}
@media (hover: hover) {
.item-blog > a > img:hover{
    transform: scale(1.1);
}
}
.item-middle{
    margin: 100px 0;
}
/* .title-blog{
    height: 400px;
    display: flex;
    align-items: center;
} */
.title-blog > h1{
    color: #eae8e8;
    font-size: 50px;
}
.title-post{
    margin: 20px 0;
    transition: color 0.2s ease;
}
.summery-post{
    color: #888;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: justify;
}
.information-post{
    margin-bottom: 10px;
}
.information-post > span{
    font-size: 11px;
    display: inline-block;
}
.information-post > span::after{
    content: '\007C';
    color: #a8a8a8;
    margin: 0 5px;
    display: inline-block;
}
.information-post > div{
    font-size: 11px;
    display: inline-block;
}
.continue-read > a{
    font-size: 12px;
    padding: 2px 0;
    border-bottom: 1px solid #888;
}
@media (hover: hover) {
.continue-read > a:hover{
    color: #d2691e;
    border-bottom: 1px solid #d2691e;
}
}
.all-widget {
    margin: 0 10px 0;
}
.widget{
    margin-bottom: 50px;
}
.all-widget img {
    display: block;
    border-radius: 10px;
}
.search-blog{
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
    border: 0.5px solid #c2c2c2;
    border-radius: 25px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.search-blog:focus-within {
    border-color: #777;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.06);
}
.search-blog > form > input{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 20px;
    outline: none;
    border: none;
    border-radius: 25px;
    background: none;
    display: inline-block;
}
.search-blog > form > button{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px; top: 0px;
    outline: none;
    border: none;
    background: none;
    color: #c2c2c2;
    display: inline-block;
}
.title-widget{
    margin-bottom: 20px;
    padding: 6px 0;
    border-bottom: 0.5px solid #c2c2c2;
   
}
.list-widget ul {
    list-style-type: none;
}
.pop-post{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: start;
}
.img-popular {
    width: 110px;
    height: 78px;
    flex: 0 0 110px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f2f2f2;
}
.img-popular img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.link-img{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}
.list-widget > ul > li{
    margin-bottom: 15px;
}
.list-widget > ul > li > a,
#posts a,
.posts-container a {
    display: block;
    padding: 8px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}
@media (hover: hover) {
.list-widget > ul > li > a:hover,
#posts a:hover,
.posts-container a:hover{
    background-color: #f8f8f8;
}
}
.desc-post{
    margin-left: 15px;
}
.desc-post > a{
    font-size: 13px;
    color: #666;
}
.desc-post > p{
    font-size: 12px;
    color: #666;
}
.list-categories > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style-type: none;
}
.list-categories > ul > li{
    margin: 0;
}
.list-categories > ul > li > a,
.link-tags > a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 11px;
    color: #666;
    font-size: 11px;
    line-height: 1.4;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    background: #fff;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
#posts {
    width: 100%;
    margin: 30px 0 0;
}
.posts-container {
    width: 100%;
    margin: 10px 0 0;
}
.sidebar-filter-post,
.posts-container .sidebar-tag-post {
    width: 100%;
    display: block;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
#posts .sidebar-filter-post:hover,
.posts-container .sidebar-filter-post:hover{
    border-color: #d5d5d5;
    background: #fff;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.075);
    transform: translateY(-2px);
}
}
.sidebar-filter-post img {
    width: 100%;
    height: 135px;
    display: block;
    object-fit: cover;
    border-radius: 9px;
}
.sidebar-filter-post > p {
    margin: 11px 4px 5px;
    color: #555;
    font-size: 11px;
    line-height: 1.6;
}
@media (hover: none) {
    @media (hover: hover) {
#posts .sidebar-filter-post:hover,
.posts-container .sidebar-filter-post:hover{
        border-color: #e6e6e6;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
        transform: none;
    }
}
}
.link-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
}
.link-tags > .posts-container:empty {
    display: none;
}
.link-tags > .posts-container:not(:empty) {
    display: block;
    flex: 0 0 100%;
}
@media (hover: hover) {
.list-categories > ul > li > a:hover,
.link-tags > a:hover{
    color: #fff;
    border-color: #111;
    background-color: #111;
    transform: translateY(-1px);
}
}
.list-categories > ul > li > a.active-category,
.link-tags > a.active-tag {
    color: #fff;
    border-color: #111;
    background-color: #111;
}
@media (hover: none) {
    @media (hover: hover) {
.list-categories > ul > li > a:hover,
.link-tags > a:hover{
        color: #666;
        border-color: #d8d8d8;
        background: #fff;
        transform: none;
    }
}
    .list-categories > ul > li > a.active-category,
    .link-tags > a.active-tag {
        color: #fff;
        border-color: #111;
        background: #111;
    }
}
/* Post page  ******************************************/

.description-post-item{
    margin: 0 0 30px;
}
.title-item-post > h3{
    font-size: 20px;
}
.content-post{
    text-align: justify;
}
.title-content-post{
    color: #000;
    margin: 30px 0;
    font-weight: bold;
}
.content-post > span{
    color: #6c6c6c;
    font-size: 15px;
    line-height: 25px;
}
.tags{
    margin: 50px 0;
}
.tags > span{
    margin-right: 10px;
}
.tags > a{
    color: #888;
    font-size: 13px;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 20px;
    border: 1px solid #a8a8a8;
}
.comment {
    width: 100%;
    max-width: 680px;
}
.comment h3{
    padding: 10px 0;
}
.comment-box {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    background: #fafafa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.userIcon-comment {
    width: 10%;
}
.userIcon-comment i,
.userIcon-comment svg {
    font-size: 25px;
    color: #fff;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #afafaf88;
    background-color: #ccc;
}
.comment-user {
    width: 80%;
    margin: 0 20px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    font-size: 14px;

}
.title-user-comments {
    margin: 20px 0;
}
.comment-user h4 {
    display: inline-block;
    margin: 0 0 7px;
}
.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.comment-user span {
    color: #888;
    font-size: 12px;
    margin: 0;
}
.comment-user .comment-meta > span {
    font-size: 11px;
}
.comment-user p {
    margin: 10px 0;
}
.like-dislike button {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.like-dislike button i {
    color: #bababa;
    font-size: 20px;
}
@media (hover: hover) {
.like-dislike button i:hover{
    color: #007bff;
}
}
.leave-comment{
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    margin: 50px 0;
    padding: 28px;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    background: #fafafa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.comment-message {
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 13px;
    border-radius: 6px;
    background-color: #b2e5fb;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.comment-message.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.leave-comment > h4{
    margin-bottom: 7px;
    color: #222;
    font-size: 18px;
    font-weight: 500;
}
.leave-comment > p{
    margin: 5px 0 12px;
    color: #888;
    font-size: 13px;
}
.leave-comment form {
    width: 100%;
}
.leave-comment > form > input:not([type="hidden"]):not([type="submit"]){
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    outline: none;
    padding: 13px 14px;
    margin: 10px 0 18px;
    color: #222;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input-name-comment {
    background-color: #fff;
    
}
.leave-comment > form > textarea{
    width: 100%;
    min-height: 145px;
    box-sizing: border-box;
    padding: 14px 16px;
    margin: 10px 0;
    outline: none;
    resize: vertical;
    color: #222;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.leave-comment > form > textarea:focus,
.leave-comment > form > input:not([type="hidden"]):not([type="submit"]):focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
.btn-submit{
    min-width: 145px;
    min-height: 42px;
    padding: 10px 50px;
    color: #fff;
    outline: none;
    display: block;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 999px;
    background-color: #000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
.btn-submit:hover{
    color: #111;
    border-color: #e8e8e8;
    background-color: #fafafa;
    box-shadow: none;
}
}
@media screen and (max-width: 768px) {
    .leave-comment {
        width: 100%;
        margin: 34px 0;
        padding: 20px 14px;
        border-radius: 14px;
    }
    .leave-comment > h4 {
        font-size: 18px;
    }
    .leave-comment > p {
        font-size: 12px;
        line-height: 1.7;
    }
    .leave-comment .btn-submit {
        width: 100%;
        margin-top: 16px;
    }
    @media (hover: hover) {
.leave-comment .btn-submit:hover{
        color: #fff;
        border-color: #111;
        background: #000;
    }
}
}
.container-reply {
    margin: 40px 0;
}
.reply-box {
    padding: 14px 16px;
    margin: 12px 0;
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}
.reply-box small {
    font-size: 11px;
    margin: 0 0 0 10px;
}
.reply-form {
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .04);
}
.reply-form input:not([type="hidden"]),
.reply-form textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    outline: none;
    color: #222;
    border-radius: 12px;
    border: 1px solid #dedede;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.reply-form textarea {
    min-height: 110px;
    resize: vertical;
}
.reply-form input:not([type="hidden"]):focus,
.reply-form textarea:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
.send-reply {
    min-width: 120px;
    min-height: 40px;
    padding: 9px 28px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 999px;
    background: #000;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
.send-reply:hover{
    color: #111;
    border-color: #e8e8e8;
    background: #fafafa;
}
}
.container-btn{
    margin: 24px 0 0px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.like-dislike {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.like-dislike button {
    outline: none;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
}
.btn-reply{
    min-height: 32px;
    padding: 5px 12px;
    outline: none;
    color: #666;
    cursor: pointer;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #fff;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
@media (hover: hover) {
.btn-reply:hover{
    color: #111;
    border-color: #bbb;
    background: #f5f5f5;
}
}
.message-contact {
    background: none;
}
.field {
    transition: box-shadow 0.3s ease;
}
.field:focus {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
}
.reply-form .field:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
@media screen and (min-width: 769px) {
    .comment-box > .row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .comment-box .userIcon-comment {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 50px;
        overflow: hidden;
        border: 1px solid #afafaf88;
        border-radius: 50%;
        background: #ccc;
    }
    .comment-box .userIcon-comment i,
    .comment-box .userIcon-comment svg {
        width: 20px;
        height: 20px;
        padding: 0;
        color: #fff;
        font-size: 20px;
        line-height: 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .comment-box .comment-user {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        margin: 0 0 0 15px;
    }
    .comment-box .reply-form {
        width: calc(100% + 65px);
        margin-left: -65px;
    }
}
@media screen and (max-width: 768px) {
    .comment-box {
        padding: 12px 10px;
        border-radius: 14px;
    }
    .comment-box > .row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .comment-box .userIcon-comment {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        overflow: hidden;
        color: #fff;
        border: 1px solid #afafaf88;
        border-radius: 50%;
        background: #ccc;
    }
    .comment-box .userIcon-comment i,
    .comment-box .userIcon-comment svg {
        width: 18px;
        height: 18px;
        padding: 0;
        color: #fff;
        font-size: 20px;
        line-height: 18px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .comment-box .comment-user {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        margin: 0 0 0 12px;
    }
    .comment-box .comment-user > h4 {
        margin-top: 0;
    }
    .reply-form {
        width: calc(100% + 54px);
        margin-left: -54px;
        padding: 14px;
        border-radius: 12px;
    }
    .reply-form .send-reply {
        width: 100%;
    }
    @media (hover: hover) {
.reply-form .send-reply:hover{
        color: #fff;
        border-color: #111;
        background: #000;
    }
}
    @media (hover: hover) {
.btn-reply:hover{
        color: #666;
        border-color: #dcdcdc;
        background: #fff;
    }
}
}
.like-btn.liked i {
    color: #007bff; 
}

.dislike-btn.disliked i {
    color: #dc3545; 
}


/* search post page ****************************************/
.search-post {
    margin: 30px 0 60px;
}
/* .search-result {
    width: 700px;
} */
 .item-search {
    margin: 0 15px 30px 0;
 }
/* product-details page ****************************************/
.product-details{
    margin: 30px 0 60px;

}
.img-product-details{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    margin: 0 15px;
}
.img-product-details > .col-xs-10 {
    order: 1;
    width: 100%;
    padding: 0;
}
.img-product-details > .col-xs-2 {
    order: 2;
    width: 100%;
    padding: 0;
}
.thumnail-container{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.thumnail-item{
    position: relative;
    width: auto;
    aspect-ratio: 1 / .72;
    padding: 4px;
    cursor: pointer;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transform: scale(.96);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.thumnail-item::after {
    content: none;
}
.thumnail-item.selected-thumbnail{
    border-color: rgba(0, 0, 0, .18);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .09);
    transform: scale(1);
}
@media (hover: hover) {
.thumnail-item:hover{
    border-color: rgba(0, 0, 0, .18);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .09);
    transform: scale(1);
}
}
.thumnail-item.selected-thumbnail::after {
    opacity: 0;
}
.thumnail-item img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 0;
    opacity: .58;
    filter: saturate(.75);
    transition: opacity .25s ease, filter .25s ease;
}

.thumnail-item img.selected{
    border: 0 !important;
    opacity: 1;
    filter: none;
}
@media (hover: hover) {
.thumnail-item:hover img{ opacity: .9; filter: none; }
}
@media (hover: hover) {
.thumnail-item.selected-thumbnail:hover img{ opacity: 1; }
}

@media screen and (max-width: 768px) {
    .img-product-details {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    }
    .img-product-details > .col-xs-10 {
        order: 1;
        width: 100%;
        padding: 0 !important;
    }
    .product-details #main-image {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .img-product-details > .col-xs-2 {
        display: none;
    }
    .thumnail-container {
        width: 100%;
        margin-top: 12px;
        padding: 2px 16px 8px 2px;
        display: flex;
        flex-direction: row;
        gap: 9px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .thumnail-container::-webkit-scrollbar { display: none; }
    .thumnail-item {
        flex: 0 0 70px;
        width: 70px;
        scroll-snap-align: start;
    }

    .product-details .btn-add,
.product-details .btn-add:focus,
.product-details .btn-add:active{
        color: #000;
        background-color: #f2f2f2;
    }
@media (hover: hover) {
.product-details .btn-add:hover{
        color: #000;
        background-color: #f2f2f2;
    }
}

    .product-details .pannel-features {
        width: 100%;
        box-sizing: border-box;
        margin: 38px 0;
        padding: 0 10px;
    }
    .product-details .list-features {
        width: 100%;
        padding: 4px 0 8px;
        overflow: hidden;
    }
    .product-details .list-features ul {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding: 2px 1px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .product-details .list-features ul::-webkit-scrollbar { display: none; }
    .product-details .list-features li {
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
    }
}
.image-item{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    border-radius: 12px;
}
@media screen and (min-width: 769px) {
    .product-details .image-item {
        padding: 3px 0;
    }
}
.image-item img{
    display: block;
    border-radius: 12px;
    transition: transform .4s cubic-bezier(.22, .72, .25, 1), opacity .12s ease;
}
.image-item > img:first-child {
    position: relative;
    z-index: 1;
}
.image-item .main-image-leaving {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 2;
    object-fit: cover;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22, .72, .25, 1);
}
.expand{
    width: 35px;
    height: 35px;
    line-height: 35px;
    display: block;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    top: 10px; right: 10px;
    z-index: 6;
    color: #111;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    transition: all 0.2s ease;
}
@media (hover: hover) {
.expand:hover{
    color: #fff;
    background-color: #000;
}
}
.light-box{
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
}
.slider-lighbox{
    max-width: 85%;
    max-height: 85%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 4px solid #fff;
}
.lightbox-images{
    display: flex;
    transition: transform 0.3s ease-in-out;
}
.lightbox-images.is-hinting {
    transition: transform 0.42s cubic-bezier(0.22, 0.7, 0.25, 1);
}
@media (min-width: 769px) {
    .lightbox-images.is-hinting {
        transition-duration: .72s;
    }
}
.lightbox-swipe-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    color: #fff;
    font-size: 11px;
    letter-spacing: .08em;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 20px;
    background: rgba(255, 255, 255, .24);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 7px);
    transition: opacity .2s ease, transform .25s ease;
}
.lightbox-swipe-hint.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.lightbox-img{
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    cursor: pointer;
}
.close-lightbox{
    cursor: pointer;
    color: #ccc;
    position: absolute;
    top: 0px; right: 10px;
    font-size: 30px;
    z-index: 10;
    text-align: right;
}
.description-product{
    margin-inline-start: 45px;
}
.description-product h4{
    margin: 0 0 10px 0;
}
.description-product span{
    font-size: 16px;
    font-weight: bold;
    display: block;
}
.available-status {
    color: red;
    margin: 10px 0 0;

}
.discount {
    margin: 10px 0 0;
}
.description-product p {
    color: #888;
    font-size: 13px;
    margin: 0 0 15px 0;
}
.accompanying-items{
    margin: 30px 0;
}
.accompanying-items > h4 {
    font-size: 14px;
}
.accompanying-items > ul {
    list-style-type: disc;
}
.accompanying-items > ul > li{
    font-size: 12px;
    display: inline-block;
    background-color: #f2f2f2;
}
.li2{
    margin: 0 15px;
}
.controll-quantity{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    overflow: hidden;
    gap: 10px;
    margin: 30px 0;
}
.quantity{
    width: 120px;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 30px;
}
.plus, .mines {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.plus {
    border-radius: 0 50% 50% 0;
}
.mines {
    border-radius: 50% 0 0 50%;
}
.quantity  > div > input{
    width: 40px;
    height: 40px;
    display: block;
    border: none;
    outline: none;
    background: none;
    text-align: center;
    background-color: #f1f1f1;
}

@media (hover: hover) {
.plus:hover,
.mines:hover{
    background-color: #c8c8c8;
}
}
.btn-disabled {
    width: 120px;
    height: 40px;
    outline: none;
    cursor: pointer;
    border-radius: 30px;
    border: none;
    transition: all 0.2s ease;
    border: 1px solid #ccc;
}
.btn-add{
    width: 300px;
    height: 40px;
    outline: none;
    cursor: pointer;
    border-radius: 30px;
    border: none;
    transition: all 0.2s ease;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
}
@media (hover: hover) {
.btn-add:hover{
    color: #fff;
    border: 1px solid #ccc;
    background-color: #000;
}
}
.pannel-features{
    width: 90%;
    margin: 50px 0;
    padding: 0 30px;
    /* border: 1px solid #ccc; */
    /* background-color: #f2f2f2; */
}
.list-features{
    padding: 8px 0;
}
.key-features{
    margin: 50px 0;
    /* padding: 0 10px; */
}
.key-features > ul {
    width: 100%;
    max-width: 520px;
    /* margin: 0 auto; */
}
.key-features > ul > li {
    margin: 10px 0;
    font-size: 13px;
    display: flex;
    flex-wrap: nowrap;
    text-align: left;
}
.key-features > ul > li > .sp1 {
    background-color: #f2f2f2;
    width: 35%;
    display: block;
}
.key-features > ul > li > .sp2{
    width: 75%;
    display: block;
    margin-inline-start: 30px;
    background-color: #f2f2f2;
}
.advantages-strengths{
    margin: 50px 0;
    /* padding: 0 10px; */
}
.advantages-strengths > ul {
    width: 100%;
    max-width: 520px;
    /* margin: 0 auto; */
    list-style-type: none;
    
}
.advantages-strengths > ul > li {
    margin: 10px 0;
    font-size: 13px;
    background-color: #f2f2f2;
}
.maintenance-use{
    margin: 50px 0;
    /* padding: 0 10px; */
}
.maintenance-use > ul {
    width: 100%;
    max-width: 520px;
    /* margin: 0 auto; */
    list-style-type: none;
}
.maintenance-use > ul > li {
    margin: 10px 0;
    font-size: 13px;
    background-color: #f2f2f2;
}
.container-reviews{
    position: relative;
    padding: 30px 0;
    /* background-color: red; */
}
.pannel-reviews{
    width: 100%;
    /* max-width: 800px; */
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    /* background-color: red; */
    gap: 20px;
    /* margin: auto; */
    padding:  12px 25px;
}

.reviews{
    flex: 0 0 calc((100% - 60px) / 4);
    display: flex;
    flex-wrap: nowrap;
    /* margin: 0 auto; */
    padding: 20px;
    background-color: #fafafa;
    border: 0.5px solid #ccc;
    border-radius: 16px;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.profile-review {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    overflow: hidden;
    border: 1px solid #afafaf88;
    border-radius: 50%;
    background-color: #ccc;
}
.profile-review i,
.profile-review svg {
    width: 20px;
    height: 20px;
    padding: 0;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.comment-review {
    font-size: 14px;
    margin: 20px 0;
}
.content-review {
    width: 100%;
    margin-inline: 20px;
}
.title-review {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: space-between;
    margin: 0 0 10px 0;
}
.review-author h5 {
    margin: 0 0 7px;
}
.review-author time {
    display: block;
    color: #888;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}
.title-review > div > i,
.title-review > div > svg,
.title-review .fa-star {
    color: #ebb907;
    font-size: 13px;
}
.content-profile > p {
    color: #888;
    font-size: 14px;
}
.controll-btn{
    width: 100%;
    max-width: 900px;
    /* padding: 0 30px; */
    margin: 0 auto;
    position: absolute;
    bottom: 0;
}
.prevbtn {
    outline: none;
    border: none;
    color: #bababa;
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
    background: none;
}
.nextbtn{
    outline: none;
    border: none;
    font-size: 12px;
    padding: 5px;
    color: #bababa;
    background: none;
    cursor: pointer;
}
@media (hover: hover) {
.prevbtn:hover,
.nextbtn:hover{
    color: #000;
}
}
.no-review {
    padding: 30px;
    border: 1px solid #cccc;
    /* background-color: #ccc; */
}
.add-reviews{
    width: 100%;
    max-width: 900px;
    margin: 50px 0;
    padding: 0 30px;
}
.add-reviews > p {
    color: #888;
    font-size: 13px;
    margin: 5px 0 0 0;
}
.star-rating {
    margin: 30px 0;
}

.star-rating i {
    color: #ccc; 
    cursor: pointer;
    border: 0 !important;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    margin: 10px 2px;
    outline: none;
    transition: color 0.2s ease, transform 0.2s ease;
}
.star-rating i.rating-selected {
    color: #ebb907; 
    border: 0 !important;
    outline: none;
}
@media (hover: hover) {
.star-rating i:hover{
    transform: translateY(-1px);
}
}
.response-review {
    width: max-content;
    max-width: min(360px, calc(100vw - 30px));
    box-sizing: border-box;
    position: fixed;
    top: 88px;
    left: 20px;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    margin: 0;
    color: #245c39;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #b9dfc6;
    border-radius: 12px;
    background-color: #effaf2;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.response-review::before {
    content: "✓";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #fff;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #3b8a58;
}
.response-review.error {
    color: #8a2929;
    border-color: #efc2c2;
    background: #fff3f3;
}
.response-review.error::before {
    content: "!";
    background: #c64545;
}
.response-review.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* .form-reviews >form {
    width: 100%;
} */
.form-reviews >form > textarea {
    width: 100%;
    padding: 10px;
    outline: none;
    border: 0.5px solid #ccc;
    background: transparent;
}
.form-reviews > form > input {
    border-radius: 6px;
    outline: none;
    border: 0.5px solid #ccc;
    background: transparent;
}

.group-input-review{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.group-input-review input {
    width: 100%;
    padding: 15px 10px;
    margin: 10px 0 20px 0;
    outline: none;
    border-radius: 6px;
    background: transparent;
    border: 0.5px solid #ccc;
}
.send-reviews{
    outline: none;
    padding: 10px 50px;
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #ccc;
    background-color: #000;
    transition: all 0.3s ease; 
}
@media (hover: hover) {
.send-reviews:hover{
    color: #000;
    background-color: #f2f2f2;
}
}

/* about page  ***********************************************/


 .hero-about {
    width: 100%;
    height: 100vh;
    background-image: url('../img/sunglass-14.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
 }
 
 .container-about{
    width: 100%;
    position: absolute;
    top: 10% ; left: 0;
    overflow: hidden;
 }
.about-content{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}
.about-content h2 {
    margin: 0 0 20px;
}
.about-content p {
    color: #000;
    font-size: 14px;
}






/* contact page  ***********************************************/

.contact{
    width: 100%;
    padding: 130px 0;
}
.row-contact {
    justify-content: center;
}
.information-contact{
    --contact-accent: #333;
    --contact-soft: #f3f3f3;
    margin: 10px 15px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.045);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) {
.information-contact:hover{
    border-color: color-mix(in srgb, var(--contact-accent) 30%, #e8e8e8);
    box-shadow: 0 11px 26px rgba(0, 0, 0, 0.075);
    transform: translateX(4px);
}
}
.information-contact > a {
    display: block;
    padding: 0;
}
.information-contact > a > .row {
    min-height: 44px;
    flex-wrap: nowrap;
}
.information-contact span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    box-sizing: border-box;
    margin: 0 11px 0 0;
    color: #111;
    border: 1px solid #d9dde0;
    border-radius: 50%;
    background: var(--contact-soft);
}
.information-contact span i,
.information-contact span svg {
    width: 16px;
    height: 16px;
    padding: 0;
    color: inherit;
    font-size: 16px;
    background: transparent;
}
.information-contact p {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin: 0;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
}
.information-contact.contact-email {
    --contact-accent: #4f5b66;
    --contact-soft: #ffc53a;
}
.information-contact.contact-telegram {
    --contact-accent: #4f5b66;
    --contact-soft: #ffc53a;
}
.information-contact.contact-instagram {
    --contact-accent: #4f5b66;
    --contact-soft: #ffc53a;
}
.information-contact.contact-phone {
    --contact-accent: #4f5b66;
    --contact-soft: #ffc53a;
}
.form-contact {
    margin: 50px 0 0;
}
.input-contact {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    outline: none;
    border: none;
    margin: 10px 0;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
}
.form-contact form textarea {
    width: 100%;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    outline: none;
    border: none;
    margin: 10px 0;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
}
.submit-contact {
    width: 100%;
    outline: none;
    margin: 10px 0;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #ffc53a;
    transition: all 0.4s ease; 
}
@media (hover: hover) {
.submit-contact:hover{
    color: #000;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);

}
}
.modal-contact {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    overflow: hidden;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}
.content-modal {
    width: 90%;
    max-width: 450px;
    padding: 40px;
    opacity: 0;
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 10px;
    transition: opacity 0.3s ease;
    transform: translate(-50%, -30%);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
    background-color: #ececec;
}
.modal-contact.show .content-modal {
    opacity: 1;
}
.modal-contact.success .content-modal {
    color: #9bcb42;
}
.modal-contact.error .content-modal {
    color: red;
}
.modal-contact .content-modal i {
    font-size: 40px;
    margin-bottom: 10px;
}
.modal-contact .content-modal p {
    /* font-size: 18px; */
    margin-bottom: 10px;
    color: #000;
}


/* cart page  ************************************/
.cart {
    padding: 30px 0 100px 0;
}

.table-cart {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ccc;
}
.table-cart table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
.table-cart table tr th {
    font-size: 13px;
}
.table-mobile {
    border: 1px solid #ccc;
    display: none;
    overflow: hidden;
    border-radius: 10px;
}

.tbody-tableCart tr {
    border-top: 0.5px solid #ccc;
}
.table-mobile td{
    padding: 20px 10px;
    font-size: 13px;
}
.vertical {
    white-space: nowrap;
    background-color: #f2f2f2;
    border-right: 1px solid #ccc;
}
.cart-quantity{
    width: 105px;
    height: 35px;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    border: 0.8px solid #ccc;

}
.input-quantity{
    width: 35px;
    height: 35px;
    outline: none;
    border: none;
    text-align: center;
    border-right: 0.5px solid #ccc;
    border-left: 0.5px solid #ccc;
    background: #f2f2f2;
}

.increase, .decrease {
    width: 35px;
    height: 35px;
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
}
.increase {
    border-radius: 0 50% 50% 0;
}
.decrease {
    border-radius: 50% 0 0 50%;
}
@media (hover: hover) {
.decrease:hover,
.increase:hover{
  background-color: #e9e9e9;
}
}
.btn-remove {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.invoice {
    margin: 0 15px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ccc;
}
.invoice h4 {
    padding: 12px 10px;
    background-color: #e9e9e9;
}
.invoice div {
    font-size: 15px;
    margin: 20px 10px;
}
.btn-final {
    width: 100%;
    outline: none;
    padding: 10px 0;
    margin: 20px 0 0;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid #cccc;
    background-color: #e9e9e9;
    transition: all 0.2s ease;
}
@media (hover: hover) {
.btn-final:hover{
    color: #fff;
    border: 1px solid #000;
    background-color: #000;
}
}
.empty-tableCart {
    width: min(100% - 30px, 620px);
    box-sizing: border-box;
    padding: 52px 30px;
    margin: 60px auto;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #fafafa 100%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.06);
}
.empty-cart-icon {
    width: 78px;
    height: 78px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #222;
    font-size: 30px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}
.empty-cart-icon span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #111;
}
.empty-tableCart .empty-cart-message {
    margin: 0 0 9px;
    color: #171717;
    font-size: 20px;
    font-weight: 500;
}
.empty-tableCart .empty-cart-description {
    max-width: 390px;
    margin: 0 auto 24px;
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}
.empty-tableCart .return-to-store-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #111;
    border-radius: 12px;
    background: #111;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.12);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
@media (hover: hover) {
.empty-tableCart .return-to-store-btn:hover{
    color: #111;
    border-color: #d6d6d6;
    background: #fff;
    transform: translateY(-2px);
}
}
.empty-tableCart .return-to-store-btn i,
.empty-tableCart .return-to-store-btn svg {
    width: 12px;
}
@media screen and (max-width: 768px) {
    .empty-tableCart {
        width: calc(100% - 16px);
        padding: 38px 20px;
        margin: 28px auto 45px;
        border-radius: 15px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.055);
    }
    .empty-cart-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 18px;
        font-size: 26px;
    }
    .empty-tableCart .empty-cart-message {
        font-size: 18px;
    }
    .empty-tableCart .empty-cart-description {
        margin-bottom: 21px;
        font-size: 12px;
    }
    .empty-tableCart .return-to-store-btn {
        min-height: 41px;
        padding: 9px 18px;
        font-size: 13px;
    }
    @media (hover: hover) {
.empty-tableCart .return-to-store-btn:hover{
        color: #fff;
        border-color: #111;
        background: #111;
        transform: none;
    }
}
}
/* faqs page *******************************************/
.faqs {
    margin: 120px 0 100px;
}
.faq-page-heading {
    width: calc(100% - 30px);
    max-width: 680px;
    margin: 0 auto 38px;
    text-align: center;
}
.faq-page-heading > span {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 11px;
    color: #555;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    border: 1px solid #e1e1e1;
    border-radius: 999px;
    background: #fafafa;
}
.faq-page-heading h1 {
    margin: 0;
    color: #171717;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
}
.faq-page-heading p {
    max-width: 540px;
    margin: 12px auto 0;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
}
.faq-container {
    width: calc(100% - 30px);
    max-width: 760px;
    margin: 0 auto;
}
.faq-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.035);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open {
    border-color: #d6d6d6;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.065);
}
.faq-question {
    width: 100%;
    min-height: 58px;
    position: relative;
    padding: 16px 58px 16px 20px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    text-align: left;
    border: 0;
    background: #fff;
    outline: none;
    transition: background-color .2s ease;
}
.faq-question::after {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    content: '+';
    color: #333;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    border: 1px solid #dedede;
    border-radius: 50%;
    background: #f7f7f7;
    transform: translateY(-50%);
    transition: color .2s ease, background-color .2s ease, transform .25s ease;
}
.faq-question[aria-expanded="true"] {
    background: #fafafa;
}
@media (hover: hover) {
    .faq-question:hover {
        background: #fafafa;
    }
}
.faq-question[aria-expanded="true"]::after {
    color: #fff;
    border-color: #111;
    background: #111;
    transform: translateY(-50%) rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    opacity: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.85;
    border-top: 1px solid transparent;
    background: #fafafa;
    transition: max-height .3s ease, padding .3s ease, opacity .2s ease, border-color .2s ease;
}
.faq-answer p {
    margin: 0;
}
.faq-answer.active {
    max-height: 260px;
    padding: 16px 20px 19px;
    opacity: 1;
    border-top-color: #ededed;
}
@media screen and (max-width: 576px) {
    .faqs {
        margin: 88px 0 65px;
    }
    .faq-page-heading {
        margin-bottom: 28px;
    }
    .faq-page-heading h1 {
        font-size: 21px;
    }
    .faq-page-heading p {
        font-size: 12px;
        line-height: 1.75;
    }
    .faq-container {
        width: 100%;
    }
    .faq-item {
        margin-bottom: 8px;
        border-radius: 12px;
    }
    .faq-question {
        min-height: 54px;
        padding: 14px 51px 14px 15px;
        font-size: 12px;
    }
    .faq-question::after {
        width: 26px;
        height: 26px;
        right: 13px;
        font-size: 17px;
    }
    .faq-answer {
        padding-right: 15px;
        padding-left: 15px;
        font-size: 12px;
    }
    .faq-answer.active {
        padding: 14px 15px 17px;
    }
}

/* register page  ********************************************/
.user {
    width: 100%;
    padding: 100px 0;
}
.user-image img {
    display: block;
}
.title-user {
    margin: 0 0 20px;
    text-align: center;
}
.title-user span {
   color: #ccc;
   margin: 0 10px;
}
.title-user p {
    margin:  0 0 15px 0;
}
.title-user div {
    /* margin:  0 0 10px 0; */
    font-size: 13px;
}
.title-otp p {
    text-align: center;
    margin:  0 0 10px 0;
    font-size: 14px;
}
.form-user {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}
.form-otp {
    display: none;
}
.input-user {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    direction: ltr;
    overflow: hidden;
    border-radius: 20px;
    border: 0.5px solid #888;
}
.input-country-code {
    width: 24%;
    min-width: 72px;
    outline: none;
    border: none;
    background: none;
    height: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    color: #111;
    -webkit-text-fill-color: #111;
    font-size: 12px;
    border-right: 0.5px solid #888;
}
.selected-country-code {
    height: 22px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 4px 0 8px;
    color: #111;
    -webkit-text-fill-color: #111;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
    border-right: 0;
}
@media screen and (max-width: 768px) {
    .selected-country-code {
        font-size: 13px;
    }
}
.input-mobile {
    outline: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: 16px;
}
.input-mobile::placeholder {
    color: #b3b3b3;
}
.demo-login-hint {
    margin: 7px 8px 0;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
    text-align: start;
}
.input-otp {
    outline: none;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 20px;
    border: 0.5px solid #888;
    background: none;
}
input::placeholder {
    font-size: 12px;
}
.btn-register, .btn-opt {
    outline: none;
    color: #fff;
    width: 100%;
    padding: 10px;
    margin: 20px 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border-radius: 20px;
    border: none;
    background-color: #007bff;
}
@media (hover: hover) {
.btn-register:hover,
.btn-opt:hover{
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
}
.remember-forget {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
    color: #3A71CA;
    font-size: 12px;
    padding: 10px;
    margin: 5px 0;
}
.login-with {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
.login-with button {
    color: #007bff;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.login-with span{
    color: #007bff;
    font-size: 13px;
}
.google-login-btn,
.back-to-phone {
    color: #007bff;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
}
.google-login-btn { display: inline-flex; align-items: center; gap: 7px; }
.password-login-form { display: none; }
.otp-new-password {
    width: 100%;
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    outline: none;
}
.otp-new-password:focus { border-color: #888; }
.password-field-wrap { position: relative; margin-top: 14px; }
.password-field-wrap input {
    width: 100%;
    padding: 12px 42px 12px 14px;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    outline: none;
}
.password-field-wrap input:focus { border-color: #888; }
.password-field-wrap button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #777;
    cursor: pointer;
}
.auth-message { min-height: 18px; margin-top: 8px; color: #b3261e; font-size: 12px; }
.auth-message-global { text-align: center; margin-bottom: 10px; }
.back-to-phone { width: 100%; text-align: center; }



/* account page  ********************************************/
.account {
    margin: 130px 0;
}
/* Sidebar and panel start and end on the same side margins as the homepage. */
@media screen and (min-width: 769px) {
    .account .pannel-account{
        justify-content: space-between;
    }
}
.sidbar-account {
    border: 0.5px solid #ccc;
    border-radius: 5px;
    margin: 0 0 30px 0;
    overflow: hidden;
}
.list-account ul {
    list-style-type: none;
}
.link-tab{
    position: relative;
    font-size: 14px;
    padding: 15px;
    cursor: pointer;
    background-color: #f2f2f2;
}
.link-tab.active {
    color: #fff;
    background-color: #017BFE;
}
.border-bottom::before {
    content: "";
    width: 100%;
    height: 0.5px;
    position: absolute;
    bottom: 0; left: 0;
    background-color: #ccc;
}
.widget-account {
    width: 100%;
    min-height: 430px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
    border-radius: 5px; 
    padding: 30px;
    display: none;
    animation: fadeIn 0.3s ease forwards;
}
.widget-account.active {
    display: block;
}

/* .content-tab {
    display: none;
    animation: fadeIn 0.3s ease forwards;
}
 @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
.content-tab.active {
    display: block;
} */

.profile-account {
    padding: 20px 0;
}

.title-content-account {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: #e3e3e3;
    padding: 8px;
    margin: 20px 0;
}
.title-content-account p {
    font-size: 14px;
}
.profile {
    gap: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
}
.profile div {
    margin: 0 10px;
}
.img-profile i {
    color: #a4a4a4;
    width: 60px;
    height: 60px;
    line-height: 55px;
    font-size: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #fff;
}
.phone-number {
    font-size: 14px;
    color: #888;
    display: inline-block;
}
.item-content-account  {
    margin: 20px 0;
    padding: 0 8px;

}
.span-title {
    color: #888;
    font-size: 13px;
}
.span-content{
    color: #000;
    margin: 0 14px;
    font-size: 14px;
}
.btn-edit {
    color: #007bff;
    outline: none;
    border: none;
    cursor: pointer;
    background: none;
    margin: 0 10px;
    font-size: 12px;
    border-bottom: 1px solid #007bff;
}
.content-account {
    position: relative;
}
.content-information.hide {
    display: none;
    position: relative;
    transition: display 0.2s ease;
}
.content-information.show{
    display: block;
}
.tooltip-message {
    position: fixed;
    bottom: 50px;
    right: 0px;
    background-color: #007bff;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1000;
    color: #fff;
    text-align: center;
    transform: translateX(400px);
    transition: transform 0.5s ease; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.tooltip-message.show {
    transform: translateX(0px); 
}

.tooltip-message.hide {
    transform: translateX(400px);
}
.form-edit-information {
    display: none;
}
.form-edit-information.active {
    display: block;
}
.container-input {
    width: 100%;
    max-width: 650px;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    justify-content: space-around;
    /* background-color: red; */
}
.btn-delete {
    font-size: 25px;
    padding: 5px;
    position: absolute;
    right: 15px; top: -20px;
}
.input-group {
    width: 90%;
    position: relative;
    margin: 15px auto;
    display: flex;
    flex-wrap: nowrap;

}
.input-shaba {
    width: 90%;
    position: relative;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 6px;
    border: 0.5px solid #888;
}
.shaba-ir {
    outline: none;
    border: none;
    background: none;
    padding: 10px 0 10px 20px;
}
.shaba-input {
    outline: none;
    width: 80%;
    padding: 15px 2px;
    font-size: 14px;
    outline: none;
    border: none;
    color: #6b6b6b;
    display: inline-block;
    background: transparent;
}
.card{
    width: 90%;
}

.birthdate-select {
    width: 100%;
    border-radius: 6px;
   border: 1px solid #cccc;
}
.input-group select {
    width: 32%;
    min-width: 0;
    padding: 15px 10px ;
    font-size: 14px;
    outline: none;
    border: none;
    color: #6b6b6b;
    display: inline-block;
    border-left: 1px solid #ccc;
    background: transparent;
} 
.input-group input {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    background: transparent;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.input-shaba label {
    position: absolute;
    left: 15px;
    top: -8px;
    padding: 0 6px;
    color: #6b6b6b;
    pointer-events: none;
    font-size: 13px;
    background-color: #f2f2f2;
}
.input-group label {
    position: absolute;
    left: 15px;
    top: -8px;
    padding: 0 6px;
    color: #6b6b6b;
    pointer-events: none;
    font-size: 13px;
    background-color: #f2f2f2;
}
.input-group input:focus {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
}
.gender select {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    /* border-radius: 6px; */
    outline: none;
    font-size: 12px;
    color: #000;
    background: transparent;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.email-input {
    width: 95%;
}
.btn-group {
    width: 90%;
    margin: 10px 0;
}
.btn-group  button{
    width: 100px;
    outline: none;
    margin-right: 5px;
    border: 1px solid #ccc;
    padding: 8px 0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}
.btn-canceled {
    background-color: #cccc;
}
@media (hover: hover) {
.btn-canceled:hover{
    background-color: #f2f2f2;
}
}
.btn-verify {
    color: #fff;
    border: none;
    background-color: #000;
}
@media (hover: hover) {
.btn-verify:hover{
    color: #000;
    background-color: #cccc;
}
}

















.list-orders {
    margin: 20px 0;
}
.list-orders ul {
    list-style-type: none;
    border-bottom: 1px solid #ccc;
}
.list-orders ul li {
    padding: 8px 0;
    margin: 0 20px 0 0;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
}
.order-content {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: max-height 0.45s ease, opacity 0.3s ease, transform 0.35s ease, margin 0.35s ease;
}
.order-content.active {
    max-height: 1600px;
    opacity: 1;
    margin: 24px 0;
    transform: translateY(0);
}
.tick-delivered {
    color: #007bff;
}
.tick-success {
    color: green;
}
.tick-pending {
    color: orange;
}
.tick-failed {
    color: red;
}
.tick-refunded {
    color: #6c757d;
}
.active-tab {
    font-weight: bold;
    background-color: #dedede;
}
.active-tab-orders {
    font-weight: bold;
    color: #007bff;
    border-bottom: 2px solid #007bff;
}
.item-order {
    width: 100%;
    max-width: 800px;
    padding: 15px;
    margin: 40px auto;
    /* background-color: red; */
}
.orders-tab-timeline {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px;
}
.order-timeline {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 24px;
    position: relative;
}
.order-timeline::before {
    content: "";
    height: 2px;
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 16px;
    background-color: #d9d9d9;
}
.order-timeline-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    color: #888;
    font-size: 11px;
    text-align: center;
}
.order-timeline-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    font-size: 12px;
}
.order-timeline-step.completed .status-pending,
.order-timeline-step.active .status-pending {
    color: #fff;
    border-color: #f9cd39;
    background-color: #f9cd39;
}
.order-timeline-step.completed .status-processing,
.order-timeline-step.active .status-processing {
    color: #fff;
    border-color: orange;
    background-color: orange;
}
.order-timeline-step.completed .status-shipped,
.order-timeline-step.active .status-shipped {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
}
.order-timeline-step.completed .status-delivered,
.order-timeline-step.active .status-delivered {
    color: #fff;
    border-color: #4AB58E;
    background-color: #4AB58E;
}
.order-timeline-step.completed,
.order-timeline-step.active {
    color: #000;
}
.order-timeline-label {
    display: block;
    line-height: 1.3;
}
.order-canceled-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 0 24px;
    color: #b91c1c;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background-color: #fee2e2;
}
.order-canceled-icon {
    font-size: 14px;
}
.item-order p {
    color: #007bff;
    font-size: 14px;
    display: inline-block;
}
.item-order a {
    color: #007bff;
    font-size: 12px;
    display: inline-block;
    border-bottom: 1px solid #007bff;
}
.order-status-steps {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 15px;
}

.step {
    padding: 2px 15px;
    border-radius: 10px;
    background-color: #eee;
    color: #555;
    font-size: 11px;
}

.step.done {
    background-color: #4caf50;
    color: white;
}

.step.active {
    background-color: #ff0000;
    color: white;
}

.arrow {
    margin: 0 5px;
    color: #999;
}
.cancel-order-btn {
    color: #007bff;
    outline: none;
    padding: 0;
    border: none;
    border-bottom: 1px solid #007bff;
    cursor: pointer;
    background: none;
}

.details-order {
    margin: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.list-detailsDelivered ul {
    list-style-type: none;
}
.list-detailsDelivered ul li{
    font-size: 13px;
    margin: 20px 0;
    border-bottom: 1px solid #cccc;
}
.product-delivered {
    margin: 20px 0 0 0;
}
.product-item {
    gap: 15px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.product-item img {
    margin: 10px 0;
}
.product-item p {
    color: #000;
}
.tick-success {
    color: #41b422;
}
.title-address {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 0 30px 0;
}

.popup-message {
    padding: 8px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.popup-message.success::before{
    content: "\2713";
    padding: 5px;
}
.popup-message.success {
    background-color: #007bff;
}
.popup-message.error {
    background-color: #dc3545;
}
.popup-message.error::before {
    content: "\2715";
    padding: 5px;
}
.popup-message.warning {
    background-color: #ffc107;
    color: #000;
}

.popup-message.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-form-address{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-form-address.active{
    display: block;
}
.inline-address-form {
    display: none;
    margin: 0 0 30px;
    padding: 15px 0 5px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.inline-address-form.active {
    display: block;
}
.inline-address-form .title-content-account {
    margin: 0 0 15px;
}
.btn-delete-inline {
    color: #888;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.inline-address-form .container-input {
    max-width: 100%;
}
.inline-address-form .address-map-tools,
.inline-address-form .map,
.inline-address-form .map-helper {
    width: 95%;
}
.content-address {
    width: 100%;
    max-width: 600px;
    padding: 40px 30px; 
    margin: 100px auto;
    border-radius: 10px;
    position: relative;
    background-color: #ffff;
}
.close-address {
    position: absolute;
    right: 55px; 
    font-size: 25px;
    cursor: pointer;
}
.map {
    width: 90%;
    height: 260px;
    margin: 20px auto 8px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
}
.address-map-tools {
    width: 90%;
    display: flex;
    gap: 10px;
    margin: 20px auto 0;
}
.map-action {
    color: #333;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
.map-action:hover{
    color: #fff;
    background-color: #000;
}
}
.map-helper {
    width: 90%;
    color: #777;
    margin: 0 auto 15px;
    font-size: 12px;
}
.address-live-map .leaflet-control-attribution {
    font-size: 10px;
}
.btn-add-address {
    color: #007bff;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}
.container_addresses {
    margin: 30px 0;
    color: #6b6b6b;
    font-size: 14px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.account-favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.account-favorite-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
}
.account-favorite-image {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #fff;
}
.account-favorite-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.account-favorite-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.account-favorite-title {
    color: #111;
    font-size: 14px;
    font-weight: 600;
}
.account-favorite-content span {
    color: #666;
    font-size: 13px;
}
.account-favorite-remove {
    align-self: flex-start;
    color: #d93025;
    padding: 4px 0;
    font-size: 12px;
}
.account-favorite-remove i {
    margin-right: 5px;
}
.empty-favorites-message {
    color: #777;
    padding: 20px 0;
    font-size: 14px;
}
.address {
    color: #007bff;
    margin: 0 0 5px 0;
}

.close-address {
    position: absolute;
    right: 50px;
    top: 10px;
    font-size: 25px;
}
.user-address {
    gap: 10px;
    margin: 20px 0 0 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.edit-address-btn {
    color: #007bff;
    outline: none;
    border: none;
    font-size: 12px;
    padding: 2px 5px; 
    background: none;
    cursor: pointer;
    border-radius: 10px;
}
.delete-address{
font-size: 12px;
color: #007bff;
outline: none;
cursor: pointer;
padding: 2px 5px; 
border-radius: 10px;
border: none;
background: none;
}
.input-address {
    width: 90%;
    position: relative;
    margin: 15px auto;
}

.input-address input , select{
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    background: transparent;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.input-address label {
    position: absolute;
    left: 15px;
    top: -8px;
    padding: 0 6px;
    color: #6b6b6b;
    pointer-events: none;
    font-size: 13px;
    background-color: #fff;
}
.input-address input:focus,  select:focus {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
}
.btn-address {
    width: 90%;
    margin: 0 auto;
}

.btn-address button {
    color: #fff;
    outline: none;
    margin-right: 5px;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    background-color: #000;
    transition: all 0.3s ease;
}
@media (hover: hover) {
.btn-address button:hover{
    color: #000;
    background-color: #f2f2f2;
}
}


/* checkout page  ********************************/
.checkout-section {
    margin: 70px 0;
}
.container-checkout {
    padding: 20px;
}
.form-section {
    border-radius: 10px;
}
.title-checkout {
    margin: 20px 0;
    color: #2d2d2d;
    font-size: 15px;
} 
.input-checkout {
    width: 100%;
    position: relative;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
}

.input-checkout input {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    border-radius: 6px;
    background: #f2f2f2;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.input-checkout select {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    background: #f2f2f2;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.add-address-chechout {
    display: none;
    background-color: #fff;
}
.address-chechout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}
.address-chechout input {
    width: 49%;
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    margin: 5px 0;
    border-radius: 6px;
    background: #f2f2f2;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.input-checkout select option {
    width: 70%;
}
.input-checkout input:focus {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
}
.plaque-unit {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}
.plaque-unit input {
    border-radius: 6px;
    background-color: #f2f2f2;
}
.summery-order {
    padding: 20px;
    border-radius: 10px;
    background-color: #f2f2f2;
}
.summery-order ul {
    margin: 20px 0;
    list-style-type: none;
}
.summery-order ul li {
    margin: 20px 0;
    font-size: 14px;
}
.order-item {
    gap: 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.row-peyment-discount {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin: 30px 0;
}
.radio-group {
    font-size: 14px;
}
.radio-group p {
    margin: 0 0 10px;
}
.radio-group label {
    color: #888;
    margin: 5px 0;
    font-size: 12px;
}
.radio-group input {
    margin: 0 5px;
    font-size: 12px;
}
.discount-section p {
    font-size: 14px;
    margin: 0 0 10px;
}
.discount-section input {
    padding: 10px;
    outline: none;
    margin-right: 5px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
}
.discount-section button {
    outline: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    border: 1px solid #cccc;
} 
@media (hover: hover) {
.discount-section button:hover{
    background-color: #f3f3f3;
}
}
.gateway {
    display: none;
}
.tracking_code {
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 20px;
}
.btn-order {
    color: #fff;
    outline: none;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    margin: 10px 0;
    border: 1px solid #ccc;
    background-color: #000;
    transition: all 0.3s ease;
}
@media (hover: hover) {
.btn-order:hover{
    color: #000;
    background-color: #cccc;
}
}
.installments-form {
    background-color: #fff;
    display: none;
    padding: 20px;
    margin: 0 0 20px;
    border-radius: 6px;
}
.input-with-currency input , select{
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    border-radius: 6px;
    background: #f2f2f2;
    margin: 5px 0;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}
.input-installments {
    width: 45%;
    margin: 5px;
}
.input-installments label {
    font-size: 13px;
}
.input-installments input {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    border-radius: 6px;
    background: #f2f2f2;
    margin: 5px 0;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.otp {
    margin: 130px 0;
}












 /* model register & login *****************/
.container-modal-user {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    background-color: rgba(0, 0, 0, 0.6);
}
.container-modal-user.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, visibility 0s;
}
body.user-modal-scroll-locked {
    overscroll-behavior-y: none;
}
.content-modal-user {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    padding: 70px 30px;
    border-radius: 10px;
    position: relative;
    max-height: calc(100dvh - 32px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-14px) scale(.985);
    transition: opacity .2s ease, transform .24s cubic-bezier(.22, .7, .25, 1);
    background-color: #ffff;
}
.container-modal-user.show .content-modal-user {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.close-modal-btn {
    color: #888;
    outline: none;
    border: none;
    background: none;
    position: absolute;
    cursor: pointer;
    top: 20px;
    right: 20px;
    left: auto;
    font-size: 30px;
}


/* about project  ****************************/

.project-nivox {
  font-family: 'Tahoma', sans-serif;
  direction: rtl;
  background-color: #f9f9f9;
  padding: 60px 0;
  color: #5c5c5c;
}
.about-project {
  width: 90%;
  max-width: 900px;
  margin: 60px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
.header-nivox {
    width: 100%;
    height: 200px;
    border-radius: 12px 12px 0 0;
    border: 0.5px solid #ccc;
    background-color: #ececec;
}
.box-nivox {
    text-align: left;
    margin:  10px 40px;
    padding: 15px 0;
    border-bottom: 0.5px solid #ccc;
}
.box-nivox h1 {
    font-size: 40px;
    color: #5c5c5c;
}
.box-nivox span {
    color: #5c5c5c;
    font-size: 13px;
}
.title-project {
    text-align: center;
    color: #4e4e4e;
    margin: 30px 0;
    font-size: 20px;
    z-index: 1;
  }
.content-project {
    padding: 40px;
}
.intro-content {
    margin: 40px 0;
    line-height: 1.8;
}
.list-pages-nivox {
    margin: 40px 0 100px;
}
.sections-title {
    color: #5c5c5c;
    margin: 20px 0;
    font-size: 18px;
    padding: 0 10px;
    background-color: #f2f2f2;
}
.list-pages-nivox ul {
  padding-right: 40px;
}
.list-pages-nivox ul li {
  margin-bottom: 8px;
}
.tag {
  display: inline-block;
  background: #dedede;
  color: #5c5c5c;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin: 0px 0;

}
.list-pages-nivox p {
    line-height: 1.8;
}

.table-pages-main {
    margin: 0 0 60px;
}
.table-pages-main table {
    text-align: right;
}
.table-pages-main h2 {
    margin: 20px 0;
    color: #5c5c5c;
}
.title-table {
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    background-color: #f2f2f2;
    padding: 25px 15px;
    font-size: 14px;
}
.content-table {
    padding: 25px;
    line-height: 1.8;
    font-size: 14px;
    border-top: 0.5px solid #444;
    border-bottom: 0.5px solid #444;
}
.subtitle-project {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: #777;
}


/* pannel admin  ****************************/
.managmnet-pannel {
    margin: 0;
    height: 100vh;
    font-family: 'Tahoma', sans-serif;
}
.admin-mobile-header {
    display: none;
}
.sidebar-pannel {
    width: 320px;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    z-index: 1000;
    background-image: url('../img/blog-12.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(0, 0, 0, 0.8);
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.logo-pageAdmin {
    color: #ccc;
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}
.logo-pageAdmin a {
    font-size: 20px;
}
.list-daushboard {
    margin: 30px 0;
}
.list-daushboard ul {
    list-style-type: none;
}
.list-daushboard ul li {
    width: 100%;
    color: #bbbbbb;
    padding: 5px 10px 5px;
    display: block;
    margin: 5px 0;
    box-sizing: border-box;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.list-daushboard ul li.active{
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
@media (hover: hover) {
.list-daushboard ul li:hover{
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
}

.lightred{
    background-color: #ffe2e5;
}
.lightyellow{
    background-color: #FFF3DE;

}
.lightgreen{
    background-color: #DCFCE6;

}
.lightpurple{
    background-color: #F3E7FF;
}
.lightblue{
    background-color: #cbebf8;
}
.lightorange {
    background-color: #FFE9D4;
}

.content-dashboard {
   margin-left: 320px;
   padding: 25px;
   background-color: #fff;
}
@media screen and (min-width: 769px) {
    .content-dashboard.dashboard-active {
       background-color: #F6F9FB;
    }
}
.content-dashboard .tab-content:not(#dashboard) .item-tab {
    box-shadow: none;
}
.content-dashboard input,
.content-dashboard select,
.content-dashboard textarea,
.content-dashboard button,
.content-dashboard .item-tab,
.content-dashboard .table-tab,
.content-dashboard .table-tab table,
.content-dashboard .tab-btn,
.content-dashboard .modal-content,
.content-dashboard .custom-select-trigger,
.content-dashboard .custom-options,
.content-dashboard .custom-option,
.content-dashboard .pagination,
.content-dashboard .btn-details-tab,
.content-dashboard .btn-edit-tab,
.content-dashboard .btn-delete-tab,
.content-dashboard .btn-delete,
.content-dashboard .btn-order-tab,
.content-dashboard .link-edit-category,
.content-dashboard .link-delete-category,
.content-dashboard .link-verify,
.content-dashboard .link-reject,
.content-dashboard .link-replay,
.content-dashboard .link-delete-comments,
.content-dashboard .link-edit-tab-admin,
.content-dashboard .link-deactivation-tab-admin {
    border-radius: 10px;
}
.modal-add input,
.modal-add select,
.modal-add textarea,
.modal-add button,
.modal-add .custom-select-trigger,
.modal-add .custom-options,
.modal-add .custom-option,
.modal-add .search-input-form,
.modal-add .image-search-input {
    border-radius: 10px;
}
.content-dashboard label,
.modal-add label {
    display: inline-block;
    margin-bottom: 5px;
}
.content-dashboard .table-tab {
    overflow-x: auto;
}
.content-dashboard .table-tab table {
    overflow: hidden;
}
.tab-content{
    animation: fadeIn 0.3s ease forwards;
    padding: 0 0 20px 0;
}
.search-pannel {
    width: 30%;
    position: relative;
}
#orders .search-pannel {
    margin: 0 0 10px;
}

.input {
    width: 100%;
    outline: none;
    padding: 15px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
    transition: box-shadow 0.2s ease-in-out;
}
.search-pannel button {
    color: #888;
    position: absolute;
    top: 15px; right: 10px;
}
.row-between {
    display: flex;
    margin: 10px 0;
    justify-content: space-between;
}
.btn-add-new button {
    padding: 15px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
}
@media (hover: hover) {
.btn-add-new button:hover{
    color: #fff;
    background-color: #000;
}
}
/* tab dashboard  **********************/
.widget-dashboard-1 {
    display: grid;
    gap: 20px;
    grid-template-columns: 4fr 2fr;
}
.dashboard-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.header-dashboard {
    margin: 20px;
}
.title-dashboard p {
    margin: 0 0 10px;
    font-weight: bold;
}
.title-dashboard span {
    color: #888;
}
.dashboard-card {
    padding: 10px 20px;
    margin: 15px 10px;
    position: relative;
    border-radius: 6px;
}

/* Today's Sales */
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .header-dashboard {
    margin: 4px 8px 22px;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .title-dashboard p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .title-dashboard span {
    font-size: 13px;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card {
    min-height: 126px;
    margin: 10px 8px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(28, 39, 49, .065);
    transition: transform .2s ease, box-shadow .2s ease;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card .svg {
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .12);
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card h3 {
    margin: 51px 0 7px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card > p {
    margin: 0;
    color: #626b76;
    font-size: 13px;
    font-weight: 400;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .btn-export {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
#dashboard .widget-dashboard-1 > .dashboard-item:first-child .btn-export a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    box-sizing: border-box;
    border-color: #dedede;
    border-radius: 18px;
    background-color: #fff;
    font-size: 10px;
    font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(28, 39, 49, .1);
    }
}
@media screen and (max-width: 768px) {
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .header-dashboard {
        margin: 2px 2px 18px;
    }
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .header-dashboard > .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .btn-export {
        width: 100%;
        max-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
    }
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .btn-export a {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: 6px 4px;
        white-space: nowrap;
        font-size: 9px;
    }
    #dashboard .widget-dashboard-1 > .dashboard-item:first-child .dashboard-card {
        min-height: 120px;
        margin: 9px 0;
    }
}
.btn-export a {
    color: #888;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: none;
    font-size: 10px;
    transition: 0.2s ease-out;
}
@media (hover: hover) {
.btn-export a:hover{
    color: #000;
    background-color: #e0e0e0;
}
}
.svg {
    width: 40px;
    height: 40px;
    padding: 5px;
    color: #fff;
    position: absolute;
    border-radius: 50%;
    top: -15px; left: 15px;
    background-color: #fa5a7c;
}
.loader {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;

}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#successTooltip {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1000;
}
.dashboard-card h3 {
    margin: 30px 0 10px;
}
.title-notifications {
    margin: 0 0 20px;
}
.support-message {
    width: min(100%, 520px);
    margin: 0 auto 12px;
    position: relative;
    padding: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background-color: #fff;
}
.admin-message {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background-color: #f2f2f2;
}
.user-message {
    margin-top: 10px;
    color: #fff;
    padding: 10px 12px;
    border-radius: 9px;
    background-color: #111;
}
.support-message-time {
    display: block;
    margin-top: 3px;
    color: #888;
    font-size: 10px;
}
.toggle-reply-form {
    color: #111;
    border: none;
    padding: 5px 10px;
    margin-top: 5px;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    text-align: right;
    position: absolute;
    top: 9px; right: 12px;
}
.reply-form textarea {
    width: 100%;
    min-height: 90px;
    margin: 10px 0 8px;
    padding: 12px;
    resize: vertical;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fafafa;
}
.support-reply-success {
    display: block;
    margin-top: 10px;
    color: #318246;
    font-size: 12px;
}
.send-reply-chat {
    outline: none;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #ccc;
    background-color: #000;
    transition: 0.2s ease-out;
}
@media (hover: hover) {
.send-reply-chat:hover{
    color: #ffff;
   background-color: #000;
}
}
.dashboard-notif {
    padding: 0px 0;
    margin: 20px 0;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #fff;
    box-shadow: 0 5px 14px rgba(28, 39, 49, .07);
    transition: background-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
.dashboard-notif:hover{
    box-shadow: 0 7px 17px rgba(28, 39, 49, .1);
}
}
.item-notif-1 {
    background-color: #ffe2e5;
    border-color: #fbc0c7;
}
@media (hover: hover) {
.item-notif-1:hover{
    background-color: #fbc0c7;
}
}
.item-notif-2 {
    background-color: #DCFCE6;
    border-color: #b3efc5;
}
@media (hover: hover) {
.item-notif-2:hover{
    background-color: #b3efc5;
}
}
.item-notif-3 {
    background-color: #FFF3DE;
    border-color: #fadba1;
}
@media (hover: hover) {
.item-notif-3:hover{
    background-color: #fadba1;
}
}
.item-notif-4 {
    background-color: #cbebf8;
    border-color: #92d9f8;
}
@media (hover: hover) {
.item-notif-4:hover{
    background-color: #92d9f8;
}
}
.dashboard-notif h3 {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
.dashboard-notif  p {
    margin: 10px;
}
.modal-support {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: 10;
    top: 0; right: 0;
    background-color: red;
    background: rgba(0,0,0,0.7);
}
.modal-content-support {
    width: 90%;
    max-width: 650px;
    max-height: 80vh;
    margin: 100px auto;
    overflow-y: hidden;
    background-color: #fff;
}
.modal-scroll {
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px 20px;
  position: relative;
}

/* Dashboard notifications use the same modal language as the admin tabs. */
.dashboard-notifications-modal .modal-content {
    width: min(820px, calc(100vw - 40px));
    max-width: 820px;
    margin: 55px auto 30px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
}

.dashboard-notifications-modal .scroll-modal {
    max-height: min(86vh, 760px);
    box-sizing: border-box;
    padding: 35px 28px 28px;
    border-radius: inherit;
}

.dashboard-notifications-modal #modalTitle {
    margin: 0 0 22px;
    padding-right: 42px;
    color: #111;
    font-size: 18px;
    line-height: 1.4;
}

.dashboard-notifications-modal .close-modal {
    top: 24px;
    right: 26px;
}

.dashboard-notifications-content {
    display: grid;
    gap: 12px;
}

.dashboard-notification-entry {
    min-width: 0;
    box-sizing: border-box;
    padding: 14px;
    overflow-wrap: anywhere;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fbfbfb;
}

.dashboard-notification-entry .support-message {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.dashboard-notifications-empty {
    margin: 0;
    padding: 22px 14px;
    color: #666;
    text-align: center;
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: #fafafa;
}

.dashboard-notification-view-all {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 18px;
    padding: 11px 18px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    transition: color .18s ease, background-color .18s ease;
}

@media (hover: hover) {
.dashboard-notification-view-all:hover{
    color: #111;
    background: #f2f2f2;
}
}

/* Dashboard charts: keep X/Y labels consistently legible. */
:is(
    #chart,
    #feedbackChartSvg,
    #sales-area-chart,
    #new-users-bar-chart
) .tick text {
    font-size: 16px !important;
}

:is(#sales-area-chart, #new-users-bar-chart) .tick text {
    fill: #888 !important;
}

#sales-area-chart :is(.domain, .tick line) {
    stroke: #aaa !important;
}

@media screen and (max-width: 768px) {
    #feedbackChartSvg .tick text {
        font-size: 16px !important;
    }

    #feedbackChartSvg {
        touch-action: pan-y;
    }

    /* These charts use an 850px SVG viewBox that is scaled down on phones. */
    :is(
        #chart,
        #sales-area-chart,
        #new-users-bar-chart
    ) .tick text {
        font-size: 28px !important;
    }

    #chart .tick text {
        font-size: 25px !important;
    }

    #new-users-bar-chart .tick text {
        font-size: 25px !important;
        fill: #888 !important;
    }

    #sales-area-chart .tick text {
        font-size: 25px !important;
        fill: #888 !important;
    }

    #new-users-bar-chart > svg {
        aspect-ratio: 850 / 580 !important;
        touch-action: pan-y !important;
    }

    #sales-area-chart > svg {
        aspect-ratio: 850 / 400 !important;
        touch-action: pan-y !important;
    }

    .bar-chart-users > p {
        margin-bottom: 24px;
    }

    .dot-chart > p {
        margin-bottom: 24px;
    }

    #new-users-bar-chart {
        position: relative;
    }

    :is(
        #chart,
        #sales-area-chart,
        #new-users-bar-chart
    ) {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: visible;
    }

    #chart {
        box-sizing: border-box;
        padding-right: 8px;
        padding-left: 8px;
    }

    #chart > svg {
        touch-action: pan-y !important;
    }

    :is(
        #chart,
        #sales-area-chart,
        #new-users-bar-chart
    ) > svg {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        overflow: visible;
    }

    #dashboard :is(.bar-chart, .dot-chart, .bar-chart-users) {
        box-sizing: border-box;
        padding-right: 14px;
        padding-left: 14px;
    }

    .dashboard-notifications-modal.admin-generic-sheet .modal-content {
        width: 100%;
        max-width: none;
        max-height: min(82dvh, 680px);
        margin: 0;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: none;
    }

    .dashboard-notifications-modal.admin-generic-sheet .scroll-modal {
        max-height: min(82dvh, 680px);
        padding: 34px 16px calc(24px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
    }

    .dashboard-notifications-modal #modalTitle {
        margin-bottom: 18px;
        padding-right: 0;
        font-size: 17px;
    }

    .dashboard-notification-entry {
        padding: 12px;
    }

    .dashboard-notification-view-all {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 16px;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
}
#closeModal {
    color: #888;
    font-size: 25px;
    position: absolute;
    top: 30px; right: 30px;
    cursor: pointer;
}
.red {
    background-color: #fa5a7c;
}
.yellow {
    background-color: #FFE200;
}
.green {
    background-color: #3BD856;
}
.purple {
    background-color: #bf83ff;
}
.blue {
    background-color: #0095ff;
}
.orange {
    background-color: #FF8F0D;
}
.widget-dashboard-2 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 25px;
    margin: 30px 0;
    align-items: start; 
    justify-items: center;
}
.bar-chart {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dot-chart {
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dot-chart p{
    font-size: 18px;
}
.bar-chart p {
    font-size: 18px;
}
.productSalesData svg {
    width: 450px;
    height: 250px;
}
.product-bar {
    fill: steelblue;
}
@media (hover: hover) {
.product-bar:hover{
    fill: orange;
}
}
.axis-label {
    font-size: 14px;
}
.feedback-chart{
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px 30px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.feedback-chart p {
    font-size: 18px;
}

.bar-satisfied {
    fill: #52c79c;
}
.bar-unsatisfied {
    fill: #FFE200;
}
@media (hover: hover) {
.bar-satisfied:hover{
    fill: #52c79c;
}
}
@media (hover: hover) {
.bar-unsatisfied:hover{
    fill: #FFE200;
}
}
.axis-feedback text {
    font-size: 12px;
}
.tooltip-feedback {
    position: absolute;
    background: #fff;
    z-index: 20;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    padding: 6px 10px;
    color: #333;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    border: 1px solid #52c79c;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: opacity .2s ease;
}
.legend-box {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
}
.legend-item {
    display: flex;
    gap: 10px;
    align-items: center;
}
.legend-color {
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border-radius: 50%;
}
.list-links  {
    margin: 20px 0;
}
.list-links ul{
    list-style-type: none;
}
.list-links ul li {
    display: inline-block;
    margin: 10px 0;
}
.list-links ul li a {
    padding: 5px 8px;
    color: #888;
    border: 1px solid #888;
    margin: 8px 0;
    font-size: 10px;
    border-radius: 20px;
}
@media (hover: hover) {
.list-links ul li a:hover{
    color: #000;
    background-color: #ccc;
}
}
#chart { 
    position: relative;
}
#new-users-bar-chart {
    position: relative;
}
.bar-chart-users {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.bar-chart-users svg {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    touch-action: none;
}
.y-axis path {
    stroke: none;
}
.tooltip-chart {
    position: absolute;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #007bff;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: 0.2s ease;
}
.pie-chart {
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px 35px 20px; 
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pie-svg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pie-chart p {
    font-size: 19px;
    color: #333;
    margin: 0 0 20px 0;
}
.pie-svg  svg {
    width: 250px;
    height: 250px;
    overflow: visible;
    display: block;    
    margin: 0 auto;
    touch-action: pan-y;
}
.label {
    font-size: 12px;
    fill: #000;
    text-anchor: middle;
}
.tooltip-pie {
    position: absolute;
    background: #fff;
    border: 1px solid #007bff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    color: #333;
    white-space: nowrap;
    z-index: 1000;
}

.grid line {
    stroke: #ddd;
}

.grid path {
display: none;
}
.widget-dashboard-3 {
    display: grid;
    gap: 25px;
    grid-template-columns: 3fr 3fr;
    margin: 0;
    align-items: start; 
    justify-items: center;
}

#tooltip_sale {
    position: absolute;
    background-color: white;
    border: 1px solid #007bff;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 13px;
    color: #333;
    pointer-events: none;
    opacity: 0;
    filter: blur(1.5px);
    transform: scale(.97);
    transition: opacity .24s ease, filter .24s ease, transform .24s ease;
    z-index: 1000;
}
#tooltip_users {
    position: absolute;
    background-color: white;
    border: 1px solid #3da406;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 13px;
    color: #333;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Unified dashboard chart tooltips, based on the Reporting chart tooltip. */
#dashboard .dashboard-chart-tooltip {
    --tooltip-arrow-left: 50%;
    --tooltip-arrow-top: 50%;
    box-sizing: border-box;
    padding: 10px 14px !important;
    color: #111 !important;
    line-height: 1.35;
    white-space: nowrap;
    border: 1px solid #2196f3 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
    pointer-events: none;
    transition: opacity .24s ease, filter .24s ease, transform .24s ease, left .1s ease, top .1s ease !important;
}
#dashboard #tooltip_sale.is-visible {
    filter: blur(0);
    transform: scale(1);
}
#dashboard #tooltip_sale[data-tooltip-arrow-side="left"] {
    transform-origin: left center;
}
#dashboard #tooltip_sale[data-tooltip-arrow-side="right"] {
    transform-origin: right center;
}
#dashboard .dashboard-chart-tooltip::before,
#dashboard .dashboard-chart-tooltip::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: var(--tooltip-arrow-left);
    transform: translateX(-50%);
    pointer-events: none;
}
#dashboard .dashboard-chart-tooltip::before {
    bottom: -8px;
    border-top: 8px solid #2196f3;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
#dashboard .dashboard-chart-tooltip::after {
    bottom: -6px;
    border-top: 7px solid #fff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="left"]::before,
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="left"]::after,
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="right"]::before,
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="right"]::after {
    top: var(--tooltip-arrow-top);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="left"]::before {
    left: -8px;
    border: 8px solid transparent;
    border-right-color: #2196f3;
    border-left: 0;
}
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="left"]::after {
    left: -6px;
    border: 7px solid transparent;
    border-right-color: #fff;
    border-left: 0;
}
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="right"]::before {
    right: -8px;
    border: 8px solid transparent;
    border-right: 0;
    border-left-color: #2196f3;
}
#dashboard .dashboard-chart-tooltip[data-tooltip-arrow-side="right"]::after {
    right: -6px;
    border: 7px solid transparent;
    border-right: 0;
    border-left-color: #fff;
}

.widget-dashboard-4 {
    display: grid;
    gap: 25px;
    margin: 30px 0;
    align-items: start; 
    justify-items: center;
}
.ranking-list {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 25px 0 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ranking-list p {
    margin: 0 0 20px 20px;
}
.ranking-list .tbody-tabaleDashboard img {
    width: 60px;
    height: 60px;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
}
.progress-bar {
    height: 6px;
    border-radius: 4px;
    margin-top: 5px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
}
.rank-number {
    font-size: 20px;
    font-weight: bold;
    color: #888;
    width: 30px;
    text-align: center;
} 
.rank {
    padding: 5px 10px;
    border-radius: 6px;
}
.border-rank1 {
    color: #0095ff;
    border: 1px solid #0095ff;
}
.border-rank2 {
    color: #FF8F0D;
    border: 1px solid #FF8F0D;
}
.border-rank3 {
    color: #bf83ff;
    border: 1px solid #bf83ff;
}
.border-rank4 {
    color: #3BD856;
    border: 1px solid #3BD856;
}
.custom-border-class {
    border-top: 0.5px solid #ccc;
}
@media (hover: hover) {
.custom-border-class:hover{
    background-color: #f2f2f2;
}
}

@media screen and (min-width: 769px) {
    #dashboard .ranking-list table th:last-child,
    #dashboard .ranking-list table td:last-child {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .ranking-list .tbody-tabaleDashboard img {
        width: 56px;
        height: 56px;
    }
}
.widget-tab {
    height: 100vh;
}
.item-tab {
    background-color: #fff;
    padding: 20px;
    margin: 0 0 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 769px) {
    #products .item-tab {
        box-shadow: none;
    }
}
.title-tab {
    margin-bottom: 30px;
}
.content-dashboard .tab-content:not(#dashboard) .title-tab h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
.table-tab table {
    width: 100%;
}
.table-tab table td {
    min-width: 50px;
    white-space: nowrap;
}
.content-dashboard .table-tab thead tr,
.content-dashboard .table-tab .tr-head {
    color: #fff;
    background-color: #000;
}
.content-dashboard .table-tab thead td,
.content-dashboard .table-tab .tr-head td {
    height: auto;
    padding: 15px;
}
.table-tab tbody tr {
    border-top: 0.5px solid #ccc;
}
/* .table-tab tbody tr:nth-child(even) {
    background-color: #f2f2f2;
} */
.tr-head{
    color: #fff;
    background-color: #000;
}
.custom-select-menu {
    position: absolute;
    top: 40px;
    left: 0;
    width: 340px;
    height: 420px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.custom-select-input {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: calc(100% - 10px);
    box-sizing: border-box;
    flex-shrink: 0;
}

.custom-select-list {
    outline: none;
    max-height: 355px;
    overflow-y: auto;
}

.custom-select-option {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  user-select: none;
}

.custom-select-option:focus{
  background-color: #f0f0f0;
  outline: none;
}
@media (hover: hover) {
.custom-select-option:hover{
  background-color: #f0f0f0;
  outline: none;
}
}

.custom-select-option-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-right: 10px;
}

/* tab products - pannel admin *****************/
.status-product {
    color: #41b422;
}
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 140px;
}
.image-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
}
.image-wrapper img {
    cursor:pointer;
    object-fit:cover;
    width: 60px;
    height: 60px;
    display: block;
    border:1px solid #ccc;
    border-radius: 6px;
}
.image-wrapper img.is-uploading {
    opacity: 0.45;
    pointer-events: none;
}
.image-upload-field {
    cursor: pointer;
}
.image-upload-field::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #000;
}

.editable-image {
    cursor: pointer;
    vertical-align: middle;
}
.admin-quick-edit-guide {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 8px 0 0;
    padding: 8px 12px;
    color: #555;
    font-size: 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
}
.admin-quick-edit-guide i {
    color: #111;
    font-size: 10px;
}
.admin-quick-edit-guide .guide-mobile {
    display: none;
}
#products .editable-text,
#products .editable-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
@keyframes adminQuickEditTypingCursor {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}
.admin-quick-edit-guide :is(.guide-desktop, .guide-mobile) {
    min-height: 1em;
}
.admin-quick-edit-guide :is(.guide-desktop, .guide-mobile).is-typing::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: .95em;
    margin-left: 2px;
    vertical-align: -1px;
    background-color: currentColor;
    animation: adminQuickEditTypingCursor .65s steps(1, end) infinite;
}
@media screen and (max-width: 768px) {
    .admin-quick-edit-guide {
        width: 100%;
        box-sizing: border-box;
        margin: 8px 0 0;
    }
    .admin-quick-edit-guide .guide-desktop {
        display: none;
    }
    .admin-quick-edit-guide .guide-mobile {
        display: inline-block;
    }
    #products .editable-text,
    #products .editable-select {
        gap: 5px;
    }
}
.desc-wrapper {
  position: relative;
  display: inline-block; 
  width: 130px;          
  vertical-align: top;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
}

.desc-wrapper .editable-text,
.desc-wrapper input.editable-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  white-space: nowrap;        /* جلوگیری از شکست خطوط */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
}

/* وقتی input فعال است */
.desc-wrapper input.editable-input {
  white-space: normal; 
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.toggle-tooltip {
    color: #007bff;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    position: absolute;
    right: -20px; top: 5px;
}
.tooltip-text {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 100;
  background-color: #f9f9f9;
  color: #333;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 6px;
  width: 220px;
  text-align: left;
    white-space: normal;
}
.special-discount .desc-spacial > h3:first-child,
.special-discount .desc-spacial > h3,
.special-discount .desc-spacial > span,
.blog-index .description .sp1,
.blog-index .description .sp2 {
    color: rgba(255, 255, 255, .82);
    font-weight: 400;
}
.add-item-product {
    padding: 3px 20px;
    margin: 0 5px;
    border-radius: 6px;
    color: #4AB58E;
    cursor: pointer;
    background: none;
    border: 1px solid #4AB58E;
}
.btn-edit-tab {
    padding: 3px 10px;
    margin: 5px 2px;
    border-radius: 6px;
    color: orange;
    font-size: 12px;
    cursor: pointer;
    background: none;
    display: inline-block;
    border: 1px solid orange;
}
@media (hover: hover) {
.btn-edit-tab:hover{
    color: #fff;
    background-color: orange;
}
}
.btn-delete-tab {
    padding: 3px 7px;
    margin: 5px 4px;
    border-radius: 10px;
    font-size: 11px;
    color: red;
    cursor: pointer;
    background: none;
    display: inline-block;
    border: 1px solid red;
}
@media (hover: hover) {
.btn-delete-tab:hover{
    color: #fff;
    background-color: red;
}
}
.btn-order-tab {
    padding: 3px 10px;
    margin: 5px 2px;
    border-radius: 6px;
    color: #007bff;
    cursor: pointer;
    background: none;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #007bff;
}
@media (hover: hover) {
.btn-order-tab:hover{
    color: #fff;
    background-color: #007bff;
}
}
.highlight-row {
  animation: highlightFlash 2s ease-out;
  background-color: #fff9c4 !important; 
}
@keyframes highlightFlash {
  from { background-color: #fff9c4; }
  to { background-color: transparent; }
}

.highlight-edit {
    background-color: #B1E5FA !important;
}
.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
  margin-bottom: 1.5em;
}
#modalAddProduct .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
#modalAddProduct .item-form,
#modalAddProduct .singl-item-form {
  width: 100%;
  min-width: 0;
  margin: 5px 0 10px;
}
#modalAddProduct .item-form label,
#modalAddProduct .singl-item-form label {
  font-size: 12px;
}
#modalAddProduct .item-form input,
#modalAddProduct .item-form select,
#modalAddProduct .item-form textarea,
#modalAddProduct .singl-item-form select,
#modalAddProduct .singl-item-form textarea {
  width: 100%;
  box-sizing: border-box;
}
#modalAddProduct textarea.input {
  min-height: 100px;
  resize: vertical;
}
#modalAddProduct .custom-select-wrapper {
  margin-bottom: 12px;
}
#modalAddProduct .custom-options {
  max-height: 240px;
}
#modalAddProduct .row-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#modalAddProduct .row-gap img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  flex: 0 0 42px;
}
#modalAddProduct .row-gap span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modalAddProduct .btn-form {
  width: 100%;
  padding: 14px 20px;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #000;
  transition: all 0.2s ease;
}
@media (hover: hover) {
#modalAddProduct .btn-form:hover{
  color: #000;
  border-color: #ccc;
  background-color: #f2f2f2;
}
}

/* Add product form styled like Product Details */
#modalAddProduct .form-modal form {
  display: grid;
  gap: 0;
}
#modalAddProduct .form-row {
  display: block;
}
#modalAddProduct .item-form,
#modalAddProduct .singl-item-form {
  width: 100%;
  min-width: 0;
  margin: -1px 0 0;
  display: grid;
  grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fbfbfb;
}
#modalAddProduct .form-row:first-of-type .item-form:first-child {
  margin-top: 0;
  border-radius: 10px 10px 0 0;
}
#modalAddProduct .form-row:last-of-type .item-form:last-child {
  border-radius: 0 0 10px 10px;
}
#modalAddProduct .item-form label,
#modalAddProduct .singl-item-form label {
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  border-right: 1px solid #ccc;
  background: #f2f2f2;
}
#modalAddProduct .item-form input,
#modalAddProduct .item-form select,
#modalAddProduct .item-form textarea,
#modalAddProduct .singl-item-form input,
#modalAddProduct .singl-item-form select,
#modalAddProduct .singl-item-form textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  border: 0;
  border-radius: 0;
  background: #fbfbfb;
  transition: background-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
#modalAddProduct .item-form input:hover,
#modalAddProduct .item-form select:hover,
#modalAddProduct .item-form textarea:hover,
#modalAddProduct .singl-item-form textarea:hover{
  background: #fff;
  box-shadow: inset 3px 0 0 #d7d7d7;
}
}
#modalAddProduct .item-form input:focus,
#modalAddProduct .item-form select:focus,
#modalAddProduct .item-form textarea:focus,
#modalAddProduct .singl-item-form textarea:focus {
  background: #fff;
  box-shadow: inset 3px 0 0 #000;
}
#modalAddProduct textarea.input {
  min-height: 110px;
  resize: vertical;
}
#modalAddProduct .image-upload-field::file-selector-button {
  height: 32px;
  margin-right: 10px;
  padding: 5px 10px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f2f2f2;
}
#modalAddProduct select,
#modalAddProduct select option {
  color: #333;
  -webkit-text-fill-color: #333;
  background-color: #fbfbfb;
}
#modalAddProduct .product-image-picker {
  min-width: 0;
  min-height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  background: #fbfbfb;
  transition: background-color .15s ease, box-shadow .15s ease;
}
#modalAddProduct .product-image-picker:focus-within{
  background: #fff;
  box-shadow: inset 3px 0 0 #000;
}
@media (hover: hover) {
#modalAddProduct .product-image-picker:hover{
  background: #fff;
  box-shadow: inset 3px 0 0 #000;
}
}
#modalAddProduct .product-image-picker::before {
  content: "Choose file";
  flex: 0 0 auto;
  margin: 0 10px 0 13px;
  padding: 6px 10px;
  color: #333;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f2f2f2;
}
#modalAddProduct .product-image-picker-text {
  min-width: 0;
  padding-right: 12px;
  overflow: hidden;
  color: #777;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modalAddProduct .product-image-picker .image-upload-field {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

/* Products forms polish on desktop (field order remains unchanged) */
@media screen and (min-width: 769px) {
  #modalAddProduct,
  #modalDetailsProducts {
    padding: 34px 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .62);
  }
  #modalAddProduct .modal-content,
  #modalDetailsProducts .modal-content {
    width: min(880px, calc(100vw - 40px));
    max-width: 880px;
    max-height: calc(100dvh - 68px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    background: #f7f7f7;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  }
  #modalAddProduct .scroll-modal,
  #modalDetailsProducts .scroll-modal {
    max-height: calc(100dvh - 68px);
    box-sizing: border-box;
    padding: 0 28px 26px;
    border-radius: 18px;
    background: #f7f7f7;
    scrollbar-width: thin;
    scrollbar-color: #bbb transparent;
  }
  #modalAddProduct .scroll-modal > h4,
  #modalDetailsProducts .scroll-modal > h4 {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 -28px 22px;
    padding: 24px 68px 19px 28px;
    color: #171717;
    font-size: 20px;
    line-height: 1.25;
    border-bottom: 1px solid #dedede;
    background: rgba(247, 247, 247, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #modalDetailsProducts .editable-form-note {
    margin: -10px 0 18px;
    color: #707070;
  }
  #modalAddProduct .close-modal,
  #modalDetailsProducts .close-modal {
    width: 36px;
    height: 36px;
    position: fixed;
    top: 50px;
    right: max(calc((100vw - 880px) / 2 + 34px), 34px);
    z-index: 12;
    display: grid;
    place-items: center;
    color: #333;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    background: #ededed;
    transition: color .16s ease, background-color .16s ease;
  }
  @media (hover: hover) {
#modalAddProduct .close-modal:hover,
#modalDetailsProducts .close-modal:hover{
    color: #fff;
    background: #111;
  }
}
  #modalAddProduct .item-form,
  #modalAddProduct .singl-item-form,
  #modalDetailsProducts .item-form,
  #modalDetailsProducts .singl-item-form {
    border-color: #d8d8d8;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  #modalAddProduct .item-form:focus-within,
  #modalAddProduct .singl-item-form:focus-within,
  #modalDetailsProducts .item-form:focus-within,
  #modalDetailsProducts .singl-item-form:focus-within {
    position: relative;
    z-index: 2;
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .045);
  }
  #modalAddProduct .item-form label,
  #modalAddProduct .singl-item-form label,
  #modalDetailsProducts label {
    color: #3b3b3b;
    font-weight: 500;
    border-right-color: #d8d8d8;
    background: #ededed;
  }
  #modalAddProduct .item-form input,
  #modalAddProduct .item-form select,
  #modalAddProduct .item-form textarea,
  #modalAddProduct .singl-item-form input,
  #modalAddProduct .singl-item-form select,
  #modalAddProduct .singl-item-form textarea,
  #modalDetailsProducts .product-detail-input {
    color: #222;
    background: #fff;
  }
  #modalAddProduct .product-image-picker {
    gap: 10px;
    padding-right: 12px;
    background: #fff;
  }
  #modalAddProduct .product-image-picker::before {
    content: "Choose image";
    margin-left: 13px;
    color: #222;
    border-color: #d4d4d4;
    background: #ededed;
  }
  #modalAddProduct .product-image-picker.has-file::before {
    content: "Change image";
  }
  #modalAddProduct .product-image-picker-preview {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: none;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f2f2f2;
  }
  #modalAddProduct .product-image-picker.has-file .product-image-picker-preview {
    display: block;
  }
  #modalAddProduct #formButton,
  #modalDetailsProducts .btn-save-product-details {
    position: sticky;
    bottom: 0;
    z-index: 7;
    min-height: 48px;
    margin-top: 18px;
    border-radius: 12px;
    box-shadow: 0 -12px 20px 10px #f7f7f7;
  }
}
#modalAddCategory .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
#modalAddCategory .item-form,
#modalAddCategory .singl-item-form {
  width: 100%;
  min-width: 0;
  margin: 5px 0 10px;
}
#modalAddCategory label {
  font-size: 12px;
}
#modalAddCategory input,
#modalAddCategory select {
  width: 100%;
  box-sizing: border-box;
}
#modalAddCategory .btn-form {
  width: 100%;
  padding: 14px 20px;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #000;
  transition: all 0.2s ease;
}
@media (hover: hover) {
#modalAddCategory .btn-form:hover{
  color: #000;
  border-color: #ccc;
  background-color: #f2f2f2;
}
}
#modalEditAddress .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
#modalEditAddress .item-form,
#modalEditAddress .singl-item-form {
  width: 100%;
  min-width: 0;
  margin: 5px 0 10px;
}
#modalEditAddress label {
  font-size: 12px;
}
#modalEditAddress input,
#modalEditAddress textarea {
  width: 100%;
  box-sizing: border-box;
}
#modalEditAddress textarea {
  min-height: 100px;
  resize: vertical;
}
@media (hover: hover) and (pointer: fine) {
  #modalEditAddress :is(.item-form, .singl-item-form):hover > :is(input, textarea) {
    box-shadow: inset 3px 0 0 #d7d7d7;
  }
}
#modalEditAddress .btn-form {
  width: 100%;
  padding: 14px 20px;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #000;
  transition: all 0.2s ease;
}
@media (hover: hover) {
#modalEditAddress .btn-form:hover{
  color: #000;
  border-color: #ccc;
  background-color: #f2f2f2;
}
}
#modalEditAddress .btn-form:disabled {
  opacity: 0.6;
  cursor: wait;
}
#modalDetailsProducts .product-details-form textarea {
  min-height: 150px;
  resize: vertical;
}
#modalDetailsProducts .product-details-form input[readonly] {
  color: #777;
  cursor: not-allowed;
}
#modalDetailsProducts .modal-content {
  border-radius: 10px;
}
#modalDetailsProducts h4 {
  margin-bottom: 8px;
}
#modalDetailsProducts .editable-form-note {
  color: #777;
  font-size: 12px;
  margin: 0 0 18px;
}
#modalDetailsProducts .product-details-form {
  display: grid;
  gap: 0;
}
#modalDetailsProducts .form-row {
  display: block;
}
#modalDetailsProducts .item-form,
#modalDetailsProducts .singl-item-form {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0;
  margin-top: -1px;
}
#modalDetailsProducts .form-row:first-of-type .item-form:first-child {
  margin-top: 0;
  border-radius: 10px 10px 0 0;
}
#modalDetailsProducts .form-row:nth-last-of-type(1) .item-form:last-child {
  border-radius: 0 0 10px 10px;
}
#modalDetailsProducts label {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.4;
  padding: 12px 14px;
  margin: 0;
  background-color: #f2f2f2;
  border-right: 1px solid #ccc;
}
#modalDetailsProducts .product-detail-input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: #fbfbfb;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
#modalDetailsProducts .product-detail-input:hover{
  background-color: #fff;
  box-shadow: inset 3px 0 0 #d7d7d7;
}
}
#modalDetailsProducts .product-detail-input:focus {
  background-color: #fff;
  box-shadow: inset 3px 0 0 #000;
}
#modalDetailsProducts .product-details-form textarea.product-detail-input {
  min-height: 120px;
}
#modalDetailsProducts select,
#modalDetailsProducts select option {
  color: #333;
  -webkit-text-fill-color: #333;
  background-color: #fbfbfb;
}
#modalDetailsProducts .btn-save-product-details {
  width: 100%;
  padding: 14px 20px;
  margin-top: 16px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #000;
  transition: all 0.2s ease;
}
@media (hover: hover) {
#modalDetailsProducts .btn-save-product-details:hover{
  color: #000;
  border-color: #ccc;
  background-color: #f2f2f2;
}
}
#modalDetailsProducts .btn-save-product-details:disabled {
  opacity: 0.6;
  cursor: wait;
}
#modalDeleteProduct h3,
#modalDeleteCategory h4,
#modalDeleteDiscount h3,
#modalDeleteAdmin h3 {
  margin-bottom: 18px;
}
#deleteProductForm p,
#deleteCategoryForm p,
#deleteDiscountForm p,
#deleteAdminForm p,
.sure-delete {
  padding: 18px 0;
  color: #333;
  line-height: 1.6;
}
.buttons-delete,
.container-delete {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  justify-content: stretch;
}
.btn-delete-form,
.btn-cancel-form,
.btn-submit-delete,
.btn-submit-cancel {
  width: 100%;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.btn-delete-form,
.btn-submit-delete {
  color: #fff;
  border: 1px solid #d93025;
  background-color: #d93025;
}
@media (hover: hover) {
.btn-delete-form:hover,
.btn-submit-delete:hover{
  color: #d93025;
  background-color: #fff;
}
}
.btn-cancel-form,
.btn-submit-cancel {
  color: #333;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
}
@media (hover: hover) {
.btn-cancel-form:hover,
.btn-submit-cancel:hover{
  color: #000;
  background-color: #e6e6e6;
}
}
@media screen and (max-width: 768px) {
  #modalDetailsProducts .form-row {
    grid-template-columns: 1fr;
  }
  .buttons-delete,
  .container-delete {
    grid-template-columns: 1fr;
  }
}
#products .table-tab table,
#orders .table-tab table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
#products .table-tab td {
  width: auto;
  max-width: none;
  vertical-align: middle;
}
#products .table-tab td:nth-child(1) {
  width: 52px;
}
#products .table-tab td:nth-child(2) {
  width: 190px;
}
#products .table-tab td:nth-child(5),
#products .table-tab td:nth-child(7) {
  width: 130px;
}
#products .table-tab td:nth-child(8) {
  width: 118px;
}
#products .table-tab thead td,
#products .table-tab .tr-head td {
  border-right: 0;
  border-left: 0;
}
#products .table-tab td:not(:nth-child(2)):not(:nth-child(8)) {
  overflow: hidden;
  text-overflow: ellipsis;
}
#products .editable-text,
#products .editable-select {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.mobile-product-meta {
  display: none;
}
.mobile-product-draft-row {
  display: none;
}
#products .inline-edit-input,
#products .inline-edit-select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  box-sizing: border-box;
}
#categories .table-tab table {
  table-layout: fixed;
}
#categories .table-tab td {
  width: auto;
  max-width: none;
  vertical-align: middle;
}
#categories .table-tab tbody td {
  height: 82px;
}
#categories .table-tab td:nth-child(1) {
  width: 52px;
}
#categories .table-tab td:nth-child(2) {
  width: 90px;
}
#categories .table-tab td:nth-child(8) {
  width: 110px;
}
#categories .table-tab td:not(:nth-child(2)):not(:nth-child(8)) {
  overflow: hidden;
  text-overflow: ellipsis;
}
#categories .table-tab img {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ccc;
}
#categories .category-image-wrapper {
  margin: 0 auto;
}
#categories .editable-category-image {
  cursor: pointer;
}
#categories .editable-category-image.is-uploading {
  opacity: 0.45;
  pointer-events: none;
}
#categories .editable-text,
#categories .editable-select {
  display: inline-block;
  min-height: 35px;
  line-height: 35px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
#categories .inline-edit-input,
#categories .inline-edit-select {
  width: 100%;
  height: 35px;
  min-width: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  margin: 0;
}
#categories .category-row td:last-child {
  min-width: 0;
  max-width: none;
  white-space: normal;
  overflow: hidden;
}
#users .users-search-panel {
  margin: 10px 0 15px;
}
#users .list-tab {
  margin-left: auto;
}
#users .table-tab table {
  table-layout: fixed;
}
#users .table-tab td {
  width: auto;
  max-width: none;
  vertical-align: middle;
}
#users .table-tab tbody td {
  height: auto;
}
#users .table-tab td {
  overflow: hidden;
  text-overflow: ellipsis;
}
#users .editable-text,
#users .editable-select {
  display: inline-block;
  min-height: 35px;
  line-height: 35px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
#users .inline-edit-input,
#users .inline-edit-select {
  width: 100%;
  height: 35px;
  min-width: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  margin: 0;
}
#users .mobile-user-order-view-details,
#users .mobile-user-info-view-details,
#users .mobile-user-address-view-details,
#users .mobile-users-actions-cell,
#users .mobile-user-info-full-name-column,
#users .user-order-products-column {
  display: none !important;
}
.product-row td:last-child {
  min-width: 0;
  max-width: none;
  white-space: normal;
  text-align: left;
  overflow: hidden;
}
.custom-select-trigger {
  width: 100%;
  padding: 15px;
  border: 0.5px solid #ccc;
  cursor: pointer;
  background: #f2f2f2;
  font-size: 12px;
}
.custom-select-trigger i {
    color: #007bff;
}
.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  z-index: 1000;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.custom-option.active {
  background-color: #e0e0e0;
}
.search-input-form {
    outline: none;
    border: none;
    width: 100%;
    padding: 10px;
    background-color: #f2f2f2;
}
.custom-option {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
}
.custom-option img {
  margin-right: 10px;
  border-radius: 4px;
}
@media (hover: hover) {
.custom-option:hover{
  background-color: #f0f0f0;
}
}
.btn-delete-product {
    width: 100%;
    padding: 15px;
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
    border: 0.5px solid #000;
    background-color: #000;
}
@media (hover: hover) {
.btn-delete-product:hover{
    color: #000;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
}
/* tab orders - pannel admin *****************/
.search-general {
    width: 30%;
    margin: 0 0 10px 0;
    position: relative;
    background-color: red;
}
.search-general input {
    width: 100%;
    outline: none;
    padding: 12px 10px;
    border: 0.5px solid #ccc;
    background: #EFEFEF;

}
.search-general button {
    outline: none;
    padding:  10px;
    background: none;
    border: none;
    position: absolute;
    top: 0; right: 0;
    pointer-events: none;
}
.btn-details-tab {
    padding: 3px 8px;
    font-size: 11px;
    color: #007bff;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #007bff;
}
@media (hover: hover) {
.btn-details-tab:hover{
    color: #fff;
    background-color: #007bff;
}
}
.modal-details-order {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
}
.contant-details-order {
    width: 90%;
    max-width: 600px;
    padding: 30px;
    margin: 100px auto;
    position: relative;
    background-color: #fff;
}
.close-modal-details {
    color: #888;
    cursor: pointer;
    position: absolute;
    top: 30px; right: 30px;
    font-size: 25px;
}
.table-modal table{
    text-align: left;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ccc;
}
.td-vertical-1 {
    width: 160px;
    padding: 7px 10px;
    border-bottom: 1px solid #ccc;
    background-color: #f2f2f2;
}
.td-vertical-2 {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
}
.td-vertical-2 ul {
    list-style-type: none;
}
.btn-change-status {
    outline: none;
    border: none;
    color: #fff;
    padding: 6px 10px;
    cursor: pointer;
    border: 0.5px solid #000;
    background-color: #000;
}
@media (hover: hover) {
.btn-change-status:hover{
    color: #000;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
}
.btn-change-status:disabled,
#order-status-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
@media (hover: hover) {
.btn-change-status:disabled:hover{
    color: #fff;
    border-color: #000;
    background-color: #000;
}
}
.order-lock-message {
    display: none;
    padding: 10px 12px;
    margin: 12px 0;
    color: #9b1c1c;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 10px;
    border: 1px solid #f5b5b5;
    background-color: #fde8e8;
}
.order-lock-message.show {
    display: block;
}

/* Orders table and details align with the Products visual language. */
#orders .table-tab tbody td {
    vertical-align: middle;
}
@media screen and (min-width: 769px) {
    #orders .order-product-column-mobile {
        display: none;
    }

    #orders .table-tab table {
        width: 100%;
    }
    #orders .table-tab td {
        width: auto;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #products .table-tab td:first-child,
    #orders .table-tab td:first-child {
        padding-left: 15px;
    }
    #products .table-tab td:last-child,
    #orders .table-tab td:last-child {
        padding-right: 15px;
    }
    #orders .table-tab td:nth-child(1) {
        width: 5%;
    }
    #orders .table-tab td:nth-child(2) {
        width: 10%;
    }
    #orders .table-tab td:nth-child(3) {
        width: 10%;
    }
    #orders .table-tab td:nth-child(4) {
        width: 13%;
    }
    #orders .table-tab td:nth-child(5) {
        width: 13%;
    }
    #orders .table-tab td:nth-child(7) {
        width: 18%;
    }
    #orders .table-tab td:nth-child(8) {
        width: 18%;
    }
    #orders .table-tab td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        box-sizing: border-box;
        white-space: normal;
        text-align: left;
        overflow: hidden;
    }
}

/* Keep every admin table action independent from its column width. */
@media screen and (min-width: 769px) {
    .content-dashboard {
        --admin-table-action-width: 88px;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        box-sizing: border-box;
        white-space: normal;
        overflow: hidden;
    }
    .content-dashboard .table-tab td :is(
        .btn-details-tab,
        .btn-edit-tab,
        .btn-delete-tab,
        .btn-order-tab,
        .link-verify,
        .link-reject,
        .link-replay,
        .link-delete-comments,
        .link-edit-category,
        .link-delete-category,
        .link-edit-tab-admin,
        .link-deactivation-tab-admin,
        .btn-delete
    ) {
        width: var(--admin-table-action-width);
        min-width: var(--admin-table-action-width);
        max-width: var(--admin-table-action-width);
        min-height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 3px 2px;
        padding: 5px 6px;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
    }
}

#orders .order-product-thumbnail {
    width: 60px;
    height: auto;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}
#orders .order-product-column {
    text-align: center;
    vertical-align: middle;
}
#orders .order-product-thumbnail img {
    width: 100%;
    height: 60px;
    display: block;
    box-sizing: border-box;
    object-fit: cover;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #f2f2f2;
}
#orders .order-product-thumbnail span {
    display: block;
    margin-top: 6px;
    color: #555;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}
:is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .order-details-grid {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
}
:is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .order-detail-row {
    display: grid;
    grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
    align-items: stretch;
}
:is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .order-detail-row:not(:last-child) > div {
    border-bottom: 1px solid #ccc;
}
:is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .td-vertical-1 {
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 12px 14px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-right: 1px solid #ccc;
    border-bottom: 0;
    background: #f2f2f2;
}
:is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .td-vertical-2 {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 48px;
    box-sizing: border-box;
    padding: 12px 14px;
    color: #222;
    font-size: 12px;
    line-height: 1.5;
    border-bottom: 0;
    background: #fbfbfb;
}
#modalDetailsOrder #order_products_list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#modalDetailsOrder #order_products_list li {
    display: flex;
    align-items: center;
    gap: 12px;
}
#modalDetailsOrder #order_products_list img {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: block;
    object-fit: cover;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #f2f2f2;
}
#modalEditOrder #order-status-select {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 10px 12px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fbfbfb;
}
#modalEditOrder #order-status-select option {
    color: #333;
    background: #fbfbfb;
}
#modalEditOrder .form-modal,
#modalEditOrder #editOrderStatusForm {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#modalEditOrder .btn-change-status {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 12px 18px;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
#modalEditOrder .btn-change-status:hover{
    color: #111;
    border-color: #ccc;
    background: #f2f2f2;
}
}
@media screen and (min-width: 769px) {
    .modal-add {
        --admin-form-label-width: 170px;
    }
    #modalAddProduct .item-form,
    #modalAddProduct .singl-item-form,
    #modalDetailsProducts .item-form,
    #modalDetailsProducts .singl-item-form {
        grid-template-columns: var(--admin-form-label-width) minmax(0, 1fr);
    }
    :is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .order-detail-row {
        grid-template-columns: var(--admin-form-label-width) minmax(0, 1fr);
    }
    :is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .td-vertical-1 {
        white-space: nowrap;
    }
    #modalEditOrder #order-status-select {
        margin: 0;
        border: 0;
        border-radius: 8px;
        background: #fff;
    }
}
@media screen and (max-width: 768px) {
    .modal-add {
        --admin-mobile-form-label-width: 128px;
    }
    #orders .order-date-column {
        display: none;
    }
    #orders .order-customer-column {
        display: none;
    }
    #orders .order-product-column-desktop,
    #orders .order-payment-column {
        display: none;
    }
    #orders .table-tab td:last-child {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
        box-sizing: border-box;
        position: sticky;
        right: 0;
        z-index: 3;
        text-align: center;
        background: #fff;
    }
    #orders .table-tab .tr-head td:last-child {
        z-index: 4;
        color: #fff;
        background: #000;
    }
    #orders .table-tab .order-row.highlight-row td:last-child,
    #orders .table-tab .order-row.highlight-processing td:last-child {
        background: #fff9c4;
    }
    #orders .btn-details-tab {
        max-width: 100%;
        box-sizing: border-box;
        padding: 5px 4px;
        white-space: normal;
    }
    #orders .btn-edit-order {
        display: none !important;
    }
    #orders .table-tab td {
        padding: 22px 6px;
        font-size: 11px;
    }
    #orders .table-tab table {
        width: 100%;
        table-layout: fixed;
    }
    #orders .table-tab td:first-child {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
    }
    #products .table-tab td:last-child,
    #orders .table-tab td:last-child {
        padding-right: 6px;
        padding-left: 6px;
    }
    #orders .order-product-thumbnail {
        width: 56px;
        height: auto;
    }
    #orders .order-product-thumbnail img {
        height: 56px;
    }
    :is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .order-detail-row {
        grid-template-columns: var(--admin-mobile-form-label-width) minmax(0, 1fr);
    }
    :is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .td-vertical-1 {
        padding: 12px 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    :is(#modalDetailsOrder, #modalDetailsCategory, #modalDetailsDiscount, #modalDetailsDiscountMobile, #modalDetailsAdmin, #modalViewProductDetails, #modalDetailsBanner, #modalviewOrders, .admin-user-details-modal) .td-vertical-2 {
        padding: 12px 10px;
    }
    #modalDetailsOrder #order_products_list img {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }
    #modalDetailsOrder .order-detail-editable-row {
        position: relative;
    }
    #modalDetailsOrder .order-status-inline-edit {
        pointer-events: auto !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #modalDetailsOrder .order-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }
    #modalAddProduct .item-form,
    #modalAddProduct .singl-item-form,
    #modalDetailsProducts .item-form,
    #modalDetailsProducts .singl-item-form {
        grid-template-columns: var(--admin-mobile-form-label-width) minmax(0, 1fr);
    }
}
.highlight-row {
    background-color: #fff9c4 !important;
    transition: background-color 0.3s ease;
}
.status-cell{
    position: relative;
}
.status-tooltip {
    background-color: #0095ff;
    color: #fff;
    font-size: 13px;
    padding: 10px;
    border-radius: 6px;
    margin-top: 4px;
    position: absolute;
    top: 45px;
    animation: fadeOut 0.5s ease-in-out forwards;
    animation-delay: 2s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    opacity: 1;
}
.status-tooltip::before {
    content: "";
    position: absolute;
    top: -12px; left: 75px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #0095ff transparent;
}
@keyframes fadeOut {
    to {
        opacity: 0;
    }
}
/* .highlight-pending {
    background-color: #fff9c4 !important; 
} */
.highlight-processing {
    background-color: #fff9c4 !important; 
    transition: background-color 0.4s ease;
}
/* tab categories - pannel admin *****************/
/* .search-tab {
    width: 50%;
    max-width: 400px;
    position: relative;
} */
.search-tab input {
    width:100%;
    padding: 11px;
    outline: none;
    border: 0.5px solid #cccc;
    background-color: #EFEFEF;
}
.search-tab button {
    padding: 10px 10px;
    outline: none;
    margin: 0 5px;
    pointer-events: none;
    position: absolute;
    top: 0px; right: 0px;
    background: none;
    border: none;
}
.link-delete-category {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    margin-left: 5px;
    color: lightcoral;
    border: 1px solid lightcoral;
}
.link-edit-category {
    color: #ffbb00;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 0.5px solid #ffbb00;
}
.highlight-success {
  background-color: #d0f0c0 !important;
  transition: background-color 0.3s ease;
}

/* tab users - pannel admin *****************/
.row-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.list-tab {
    margin: 0 0 10px 0;
}
.list-tab ul {
    list-style-type: none;
}
.tab-btn{
    display: inline-block;
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
    margin: 0 10px 0 0;
    min-width: 110px;
    flex-shrink: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
.tab-btn.active {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
}
.content-tab {
    display: none;
    animation: fadeIn 0.3s ease forwards;
}
 @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
.content-tab.active {
    display: block;
}
.search-tab-users {
    margin: 0 0 15px;
}
.search-tab-users form input {
    width: 33.33%;
    outline: none;
    padding: 12px 10px;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #EFEFEF;
}
.search-tab-users form button {
    width: 50px;
    outline: none;
    padding: 11px 10px;
    margin-right: 8px;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #EFEFEF;
}
.link-verify {
    padding: 3px 10px;
    margin: 0 5px;
    border-radius: 6px;
    color: #4AB58E;
    cursor: pointer;
    background: none;
    font-size: 12px;
    border: 1px solid #4AB58E;
}
@media (hover: hover) {
.link-verify:hover{
    color: #fff;
    background-color: #4AB58E;
}
}
.link-reject {
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 6px;
    font-size: 12px;
    color: lightcoral;
    cursor: pointer;
    background: none;
    border: 1px solid lightcoral;
}
@media (hover: hover) {
.link-reject:hover{
    color: #fff;
    background-color: lightcoral;
}
}
.link-replay {
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 6px;
    font-size: 12px;
    color: #0095ff;
    cursor: pointer;
    background: none;
    border: 1px solid #0095ff;
}
@media (hover: hover) {
.link-replay:hover{
    color: #fff;
    background-color: #0095ff;
}
}
.link-replay:disabled,
.link-replay.is-replied {
    color: #777;
    cursor: default;
    border-color: #cfcfcf;
    background-color: #f2f2f2;
}
@media (hover: hover) {
.link-replay:disabled:hover,
.link-replay.is-replied:hover{
    color: #777;
    background-color: #f2f2f2;
}
}
#modalReplyComment,
#modalDeleteCommentEntry {
    display: none !important;
}
#modalReplyComment.is-open,
#modalDeleteCommentEntry.is-open {
    display: block !important;
}
.comments-reply-modal .scroll-modal {
    box-sizing: border-box;
    padding: 28px;
}
.mobile-comment-reply-editor {
    display: none;
}
.comments-reply-modal .close-modal {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.comments-reply-modal h4 {
    margin: 0 0 22px;
    color: #111;
    font-size: 17px;
    font-weight: 500;
}
.comments-reply-modal .singl-item-form {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 26px;
    border: 1px solid #d4d4d4;
    border-radius: 12px;
    background: #f6f6f6;
    transition: border-color .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
.comments-reply-modal .singl-item-form:not(:focus-within):hover{
    border-color: #c9c9c9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
}
@media (hover: hover) {
.comments-reply-modal .singl-item-form:not(:focus-within):hover .comments-reply-modal-textarea{
    box-shadow: inset 3px 0 0 #d7d7d7;
}
}
.comments-reply-modal .singl-item-form:focus-within {
    border-color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.comments-reply-modal .singl-item-form:focus-within .comments-reply-modal-textarea {
    background: #fff;
    box-shadow: inset 3px 0 0 #111;
}
.comments-reply-modal .singl-item-form label {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    color: #555;
    font-size: 12px;
    border-right: 1px solid #d4d4d4;
    border-radius: 12px 0 0 12px;
}
.comments-reply-modal-textarea {
    width: 100%;
    min-height: 132px;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    color: #222;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: #f6f6f6;
    transition: background-color .16s ease, box-shadow .16s ease;
}
.comments-reply-modal .btn-form {
    width: 100%;
    height: 42px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
@media (hover: hover) {
.comments-reply-modal .btn-form:hover{
    color: #111;
    border-color: #d4d4d4;
    background: #f6f6f6;
}
}
.comments-delete-modal .modal-content {
    width: min(520px, calc(100vw - 40px));
    max-width: 520px;
}
.comments-delete-modal .scroll-modal {
    box-sizing: border-box;
    padding: 28px;
}
.comments-delete-modal .close-modal {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.comments-delete-modal h3 {
    margin: 0 0 18px;
    color: #111;
    font-size: 17px;
    font-weight: 500;
}
.comments-delete-modal .sure-delete {
    margin: 0;
    padding: 18px 0;
    color: #333;
    line-height: 1.6;
}
.link-delete-comments {
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 6px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    background: none;
    border: 1px solid #888;
}
@media (hover: hover) {
.link-delete-comments:hover{
    color: #fff;
    background-color: #888;
}
}
.success-save {
    display: none;
    width: max-content;
    max-width: min(360px, calc(100vw - 30px));
    box-sizing: border-box;
    position: fixed;
    top: 88px;
    left: 340px;
    z-index: 10000;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    margin: 0;
    color: #174b2a;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #78b98e;
    border-radius: 12px;
    background-color: #cfead7;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.success-save::before {
    content: "✓";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #fff;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #2f7d4a;
}
@media screen and (max-width: 768px) {
    .success-save {
        top: 82px;
        left: 12px;
        max-width: calc(100vw - 24px);
    }
}
/* tab comments - pannel admin *****************/
/* .list-tab-comments {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
} */
/* .comment-tab{
    display: none;
    animation: fadeIn 0.3s ease forwards;
}
.comment-tab.active {
    display: block;
} */
/* .btn-comment {
    padding: 10px;
    margin: 20px 0;
    cursor: pointer;
    font-size: 13px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
.btn-comment.active {
    color: #fff;
    background-color: #000;
} */
.highlight-pending {
    background-color: #fff9c4 !important;
    transition: background-color 0.4s ease;
}
.highlight-approved {
    background-color: #DCFCE5 !important; 
    transition: background-color 0.4s ease;
}
.highlight-rejected {
    background-color: #FFE2E5 !important;
    transition: background-color 0.4s ease;
}
.status-approved {
    color: #4AB58E;
}
.status-reject {
    color: red;
}
/* tab discounts - pannel admin *****************/
.inputGroup-tab-discount {
    display:  flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.group-input-lable {
    width: 49%;
}
.group-input-lable label {
    width: 100%;
    font-size: 12px;
    margin: 0 4px;
}
.form-tab-discounts form label {
    width: 100%;
    font-size: 12px;
    margin: 0 4px;
}
.form-tab-discounts form input {
    width: 100%;
    padding: 15px;
    margin: 5px 0 15px 0;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #EFEFEF;
}
.group-input-lable input {
    width: 100%;
    padding: 15px;
    margin: 5px 0 15px 0;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #EFEFEF;
}
.group-input-lable select {
    width: 100%;
    padding: 15px;
    margin: 5px 0 15px 0;
    outline: none;
    border: 0.5px solid #ccc;
    background-color: #EFEFEF;
}
.product-tab {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-inactive {
  color: red;
}
.status-active {
  color: #4AB58E;
}
.content-dashboard .table-tab [data-admin-status-tone="active"] {
  color: #4AB58E !important;
  -webkit-text-fill-color: #4AB58E !important;
}
.content-dashboard .table-tab [data-admin-status-tone="inactive"] {
  color: red !important;
  -webkit-text-fill-color: red !important;
}
.status-inactive-user {
  color: orange;
}
.status-banned {
  color: red;
}
.expired-date {
  color: red;
}
.pagination {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
  border: 0.5px solid #ccc;
  background-color: #f2f2f2;
  font-family: Tahoma, sans-serif;
  margin-top: 20px;
}

.pagination a {
  text-decoration: none;
  color: blue;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
.pagination a:hover{
  background-color: #e0e0e0;
}
}

.pagination .current {
  font-weight: bold;
  padding: 6px 12px;
  font-size: 13px;
  color: black;
}

.pagination .prev,
.pagination .next {
  font-weight: normal;
  font-size: 13px;
  color: #555;
  user-select: none;
}

@media (hover: hover) {
.pagination .prev:hover,
.pagination .next:hover{
  color: #000;
  cursor: pointer;
}
}

/* tab discounts - pannel admin *****************/
.modal-add {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    display: none;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
    width: 90%;
    max-width: 560px;
    margin: 130px auto;
    position: relative;
    overflow-y: auto;
    border-radius: 10px;
    background-color: #fff;
}
.modal-content h4 {
  margin: 10px 0 20px 0;
}
html.admin-modal-root-locked {
    overflow-y: scroll;
    overscroll-behavior: none;
}
body.admin-modal-scroll-locked {
    overscroll-behavior: none;
}
@media screen and (min-width: 769px) {
    body.admin-modal-scroll-locked { overflow: clip; }
}
@media screen and (max-width: 768px) {
    html.admin-modal-root-locked {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
    }
    /* The fixed body is offset by the saved scroll position. Clipping it to
       its layout height hides later table rows behind the modal backdrop. */
    html.admin-modal-root-locked body.admin-modal-scroll-locked {
        overflow: visible !important;
        touch-action: none;
    }
    html.admin-modal-root-locked :is(
        .scroll-modal,
        .modal-scroll,
        .modal-content-support,
        .mobile-product-editor-sheet,
        .mobile-product-images-sheet,
        .admin-mobile-select-menu
    ) {
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
}
.admin-modal-scroll-locked .scroll-modal,
.admin-modal-scroll-locked .modal-scroll,
.admin-modal-scroll-locked .modal-content-support,
.admin-modal-scroll-locked .mobile-product-editor-sheet {
    overscroll-behavior: contain;
}
.scroll-modal {
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px 20px; 
    border-radius: 10px;
}
@media screen and (min-width: 992px) {
    .modal-add {
        align-items: flex-start;
        justify-content: center;
    }
    .modal-content {
        width: 92%;
        max-width: 820px;
        margin: 55px auto 30px;
    }
    .scroll-modal {
        max-height: 86vh;
        padding: 35px 28px;
    }
}
.close-modal {
    position: absolute;
    top: 30px; right: 30px;
    color: #888;
    font-size: 25px;
    cursor: pointer;
}
.box-delete {
    padding: 100px 0;
}
/* .form-tab {
    margin: 30px 0 20px;
} */
.sure-delete {
    margin: 20px 0;
}
.container-delete {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: end;
}
/* .btn-submit-delete {
    outline: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
     border: 0.5px solid red;
    background-color: red;
}
.btn-submit-delete:hover {
    background-color: #e20404;
} */
/* .btn-submit-cancel {
    outline: none;
    border: 0.5px solid #ccc;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    background-color: #EFEFEF;
}
.btn-submit-cancel:hover {
    background-color: #ccc;
} */
.link-edit-tab-admin {
    padding: 3px 15px;
    margin: 6px 3px;
    border-radius: 6px;
    color: #ffbb00;
    font-size: 12px;
    cursor: pointer;
    background: none;
    border: 1px solid #ffbb00;
}
@media (hover: hover) {
.link-edit-tab-admin:hover{
    color: #fff;
    background-color: #ffbb00;
}
}
.link-deactivation-tab-admin {
    padding: 3px 10px;
    margin: 6px 3px;
    border-radius: 6px;
    font-size: 12px;
    color: lightcoral;
    cursor: pointer;
    background: none;
    border: 1px solid lightcoral;
}
@media (hover: hover) {
.link-deactivation-tab-admin:hover{
    color: #fff;
    background-color: lightcoral;
}
}

/* tab Reporting and Analysis / pannel admin  **********/
.cards-tab-reporting {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 15px;
}
#reporting_and_analysis .title-tab h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
#reporting_and_analysis .table-tab > h3 {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
.item-card-reporting {
    min-height: 126px;
    margin: 10px 8px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(28, 39, 49, .065);
    transition: transform .2s ease, box-shadow .2s ease;
}
.item-card-reporting h4 {
    margin: 28px 0 7px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}
.item-card-reporting p {
    margin: 0;
    color: #626b76;
    font-size: 13px;
    font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
    .item-card-reporting:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(28, 39, 49, .1);
    }
}
@media screen and (max-width: 768px) {
    .item-card-reporting {
        min-height: 120px;
        margin: 9px 4px;
        padding: 16px;
    }
    .item-card-reporting h4 {
        margin-top: 27px;
        font-size: 18px;
    }
}

.cl-red {
    color: #fa5a7c;
}
.cl-yellow {
    color: #FFE200;
}
.cl-green {
    color: #3BD856;
}
.cl-blue {
    color: #0095ff;
}
.chrt-sales-tab-reporting {
    position: relative;
    width: 100%;
    height: 380px;
    box-sizing: border-box;
    margin: 30px 0 46px;
}
.chrt-sales-tab-reporting canvas {
    width: 100% !important;
    height: 100% !important;
}
@media screen and (max-width: 768px) {
    .chrt-sales-tab-reporting {
        height: 260px;
        margin: 34px 0 42px;
    }
}

/* Keep the selected general-setting values black on mobile, including iOS. */
@media screen and (max-width: 768px) {
    #setting #general select:is(
        [name="default_lang"],
        [name="time_zone"],
        [name="currency"]
    ) {
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
    }

    #setting #general select:is(
        [name="default_lang"],
        [name="time_zone"],
        [name="currency"]
    ) option {
        color: #111;
        -webkit-text-fill-color: #111;
    }
}
/* tab setting / pannel admin  **********/
.tabs-tab-setting {
    margin: 0 0 15px;
    display:  flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
}
.tabs-tab-setting ::-webkit-scrollbar {
  display: none;
}

.tabs-tab-setting  {
  -ms-overflow-style: none;  /* IE و Edge قدیمی */
  scrollbar-width: none;     /* Firefox */
}

/* .btn-tab {
    min-width: 110px;
    height: 30px;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid #ccc;
}
.btn-tab.active {
    border-color: #0095ff;
    border-bottom: 2px solid #0095ff;
    color: #0095ff;
} */
.form-row {
    display:  flex;
    gap: 15px;
}
.item-form-row {
    width: 50%;
    margin: 5px 0 10px;
}
.item-form-row label {
    font-size: 12px;
}
.item-form-row input, select, textarea{
    width: 100%;
    height: 50px;
    padding:15px;
    margin: 5px 0 10px;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
.singl-item-form-row {
    width: 100%;
    margin: 10px 0;
}
.singl-item-form-row label {
    font-size: 12px;
}
.singl-item-form-row input {
    width: 100%;
    padding: 15px;
    margin: 5px 0;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
 .save-chenges {
    outline: none;
    padding: 10px;
    margin: 10px 0;
    color: #fff;
    border: 0.5px solid #000;
    background: #000;
    cursor: pointer;
}
@media (hover: hover) {
.save-chenges:hover{
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
    color: #000;
}
}
.form-underTab-users select {
    margin: 10px 0;
}
.form-i-l label {
    font-size: 13px;
}
.form-i-l {
    margin: 15px 0;
}
.form-i-l input {
    margin-right: 10px;
}
.input-default-email label {
    font-size: 12px;
}
.input-default-email input {
    width: 100%;
    padding: 15px;
    margin: 5px 0;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}.input-meta-description label {
    font-size: 12px;
}
.input-meta-description input {
    width: 100%;
    padding: 15px;
    margin:  5px 0 10px;
    outline: none;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background-color: #f2f2f2;
}
/* ..... */

/* tab banner /pannel admin  */





.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.6s ease-out;
}
.fade-in-left.visible{
    opacity: 1;
    transform: translateX(0);
}
.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.6s ease-out;
}
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease-out;
}
.fade-in-scale.visible {
    opacity: 1;
    transform: scale(1);
}
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Home sections: one entrance for all, heading first and then the content */
.nx-reveal > .container > *,
.blog-index.nx-reveal > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s cubic-bezier(.2, .65, .3, 1), transform .9s cubic-bezier(.2, .65, .3, 1);
}
.nx-reveal > .container > :nth-child(2),
.blog-index.nx-reveal > :nth-child(2) { transition-delay: .14s; }
.nx-reveal > .container > :nth-child(n+3) { transition-delay: .26s; }
.nx-reveal.visible > .container > *,
.blog-index.nx-reveal.visible > * {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .nx-reveal > .container > *,
    .blog-index.nx-reveal > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}




@media screen and (max-width: 768px) {
    .blog .search-widget {
        display: none;
    }
    /* mobile hero: photo on top, copy below on the cream page */
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
        isolation: isolate;
        background: #f6f2eb;
    }
    .hero-visual, html[dir="rtl"] .hero-visual {
        position: relative;
        inset: auto;
        width: 100%;
        /* the photo area runs up under the clear header: the photo keeps its framing at the
           bottom and the 70px above it carries the photo's own backdrop tone */
        aspect-ratio: auto;
        height: calc(100vw * 773 / 1100 + 70px);
        margin-top: 0;
        background: linear-gradient(90deg, #e8ddd5, #efe3d9 50%, #f1e5dc);
    }
    .hero-visual img,
    html[dir="rtl"] .hero-visual img {
        object-fit: contain;
        object-position: center bottom;
        transform: none;
        animation: heroMobileImageReveal 2.4s cubic-bezier(.18,.64,.27,1) both;
        will-change: transform, opacity;
    }
    .header .container {
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }
    .header .navbar > .row-between,
    .header .navbar > .row-between > .row {
        flex-wrap: nowrap;
    }
    .header .list-icons > ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .hero-container {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 30px 18px 0;
    }
    .hero-content {
        position: relative;
        width: 100%;
        max-width: 480px;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        padding: 0;
        transform: none;
    }
    html[dir="rtl"] .hero-content {
        right: auto;
        left: auto;
    }
    .hero-eyebrow,
    .hero-title,
    .hero-subtitle,
    .hero-cta {
        opacity: 1;
        animation: heroMobileFadeUp 1.1s cubic-bezier(.18,.64,.27,1) both;
        will-change: transform, opacity;
    }
    .hero-eyebrow { animation-delay: .1s; }
    .hero-title { animation-delay: .24s; }
    .hero-subtitle { animation-delay: .38s; }
    .hero-cta { animation-delay: .52s; }
    .hero-eyebrow {
        margin-bottom: 14px;
    }
    .hero-title {
        margin-bottom: 16px;
        font-size: clamp(44px, 11.5vw, 64px);
        letter-spacing: -2px;
    }
    .hero-title span {
        letter-spacing: inherit;
    }
    .hero-subtitle {
        max-width: 360px;
        margin-bottom: 23px;
        font-size: 14px;
    }
    .hero-cta {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 8px 8px 20px;
        min-width: 0;
    }
    /* Phones: the bar under the hero would only repeat the logo, so the button ends the hero
       (76px to the next heading, as between sections). */
    .hero-footer {
        display: none;
    }
    .hero-container {
        padding-bottom: 16px;
    }
    .logo > a {
        font-size: 17px;
        letter-spacing: 2.5px;
    }
    .list {
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .item-watches{
        padding: 0 50px;
    }
    .row-center-mobile{
        justify-content: center;
    }
    .leave-comment > form > input{
        width: 100%;
    }
    .leave-comment > form > textarea{
        width: 100%;
    }
    .row-jc-start{
        justify-content: start;
    }
    .title-products > h3{
        font-size: 30px;
    }
    .title-products > p{
        font-size: 13px;
    }
    .title-products{
        width: 100%;
        position: absolute;
        bottom: -95px; left:0px;
        z-index: 10;
        text-align: center;
    }
    .bestsellers-controls {
        display: none !important;
    }
    .bestsellers {
        margin: 55px 0;
    }
    .bestsellers .slider-container {
        padding: 0;
        margin: 12px 0;
    }
    .special-discount .controls {
        display: none;
    }
    .special-discount .item-slide {
        min-width: 100%;
        flex-basis: 100%;
        margin-right: 10px;
    }
    .desc-spacial{
        margin: 30px 0;
    }
    .desc-spacial > a {
        width: 100%;
        padding: 10px 18px;
        text-align: center;
        box-sizing: border-box;
    }
    @media (hover: hover) {
.desc-spacial > a:hover{
        transform: scale(1.02);
    }
}
    .description-product{
        margin-inline-start: 87px;
        margin-top: 40px;
    }
    .key-features > ul > li{
        font-size: 12px;
    }
    .key-features > ul > li > .sp2{
        margin-inline-start: 30px;
    }
    .key-features > ul > li > .sp1 {
        width: 33%;
        display: block;
    }
    .key-features > ul > li > .sp2{
        width: 69%;
        display: block;
        margin-inline-start: 30px;
    }
    .controll-btn{
        display: none;
    }
    .reviews{
        flex: 0 0 90%;
    }
    .row-contact {
        justify-content: start;
    }
    .contact{
        width: 100%;
        padding: 50px 0;
    }
    .form-contact {
        margin: 50px 15px;
    }
    .input-contact {
        border-radius: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .submit-contact,
.submit-contact:active{
        color: #000;
        font-weight: 400;
    }
@media (hover: hover) {
.submit-contact:hover{
        color: #000;
        font-weight: 400;
    }
}
    @media (hover: hover) {
.submit-contact:hover{
        box-shadow: none;
    }
}
    .information-contact {
        margin: 9px 15px;
    }
    @media (hover: hover) {
.information-contact:hover{
        border-color: #e8e8e8;
        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.045);
        transform: none;
    }
}
    .information-contact:active {
        border-color: color-mix(in srgb, var(--contact-accent) 30%, #e8e8e8);
        background: #fafafa;
    }
   .invoice{
        margin: 20px 15px 0;
   }
   .user {
        padding: 50px 0;
    } 
    .table-cart{
        display: none;
    }  
    .table-mobile {
        margin: 0 0 30px;
        display: block;

    }
    .breadcrumb-shop{
        width: 100%;
    }
    .content-modal-user {
        width: 90%;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px 30px 80px;
        border-radius: 10px;
        background-color: #ffff;
    }
    .email-input {
        width: 90%;
    }
    .content-project {
        padding: 20px;
    }
    .prev-btn, .next-btn {
        display: none;
    }
    .search-general {
        width: 100%;
    }
    .sidbar-account {
        border: none;
        background: none;
        border-radius: none;
        margin: 0 0 15px 0;
    }
    .list-account {
        margin: 0;
    }
    .list-account ul{
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    .list-account ul ::-webkit-scrollbar {
        display: none;
    }
    .list-account ul {
        -ms-overflow-style: none; 
        scrollbar-width: none;  
    }

    .link-tab{
        position: relative;
        min-width: 110px;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
        flex-shrink: 0;
        cursor: pointer;
        display: flex;
        border-radius: 5px;
        margin: 0 10px 0 0;
        border: 0.5px solid #ccc;
        align-items: center;
        justify-content: center;
        background-color: #f2f2f2;
    }
    .table-tab{
        overflow-x: auto;
    }
    .order-timeline {
        margin-bottom: 18px;
    }
    .order-timeline-icon {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
    .order-timeline::before {
        top: 13px;
    }
    .order-timeline-step {
        font-size: 10px;
    }
    .search-pannel {
        width: 100%;
    }
    .content-dashboard .row-between {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .content-dashboard .btn-add-new,
    .content-dashboard .btn-add-new button {
        width: 100%;
    }
    #products .table-tab {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        overflow-x: visible;
        border-radius: 0;
    }
    #products .item-tab {
        padding-right: 0;
        padding-left: 0;
    }
    #products .title-tab,
    #products .row-between {
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
        margin-left: 0;
    }
    #products .search-pannel,
    #products .btn-add-new,
    #products .btn-add-new button,
    #products .admin-quick-edit-guide {
        width: 100%;
        box-sizing: border-box;
    }
    #products .table-tab table {
        table-layout: fixed;
    }
    #products .table-tab td {
        padding: 22px 6px;
        font-size: 11px;
    }
    #products .table-tab td:nth-child(1),
    #products .table-tab td:nth-child(6),
    #products .table-tab td:nth-child(7) {
        display: none;
    }
    #products .table-tab td:nth-child(2) {
        width: 70px;
    }
    #products .table-tab td:nth-child(3) {
        width: auto;
    }
    #products .table-tab td:nth-child(4),
    #products .table-tab td:nth-child(5) {
        width: 74px;
    }
    #products .table-tab td:nth-child(8) {
        width: 84px;
    }
    #products .image-gallery {
        min-width: 0;
        justify-content: center;
        gap: 0;
    }
    #products .image-wrapper {
        display: none;
        width: 56px;
        height: 56px;
    }
    #products .image-wrapper:first-child {
        display: block;
    }
    #products .image-wrapper img {
        width: 56px;
        height: 56px;
    }
    #products .product-row td:last-child .btn-details-tab,
    #products .product-row td:last-child .btn-delete-tab {
        padding: 5px 4px;
        font-size: 10px;
    }
    @media (hover: hover) {
.underline-transition:hover::after{
        width: 0;
    }
}
    .img-product {
        aspect-ratio: 1 / 1;
    }
    .content-success {
        max-height: 82vh;
        padding: 52px 12px 22px;
        border-radius: 14px 14px 0 0;
    }
    .row-modal-added {
        gap: 12px;
        padding: 10px;
    }
    .image-success {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }
    .title-modal p {
        font-size: 13px;
    }
    .modal-quantity-controls {
        gap: 6px;
        padding: 4px;
    }
    .modal-qty-btn {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }
    .totalPrice,
    .link-cart {
        max-width: 100%;
    }

}


@media screen and (max-width: 992px) {
    .managmnet-pannel {
        min-height: 100vh;
        height: auto;
        padding-top: 66px;
    }
    .admin-mobile-header {
        width: 100%;
        height: 66px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 14px 18px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1200;
        color: #fff;
        background-image: url('../img/blog-12.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.82);
        background-blend-mode: multiply;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        transition: height 0.35s ease, box-shadow 0.35s ease;
    }
    .admin-mobile-header.menu-open {
        height: 100vh;
    }
    .admin-mobile-logo {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
    }
    .admin-mobile-menu-btn {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background-color: rgba(255, 255, 255, 0.08);
    }
    .admin-mobile-menu {
        width: 100%;
        max-height: 0;
        flex: 0 0 100%;
        margin-top: 14px;
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-8px);
        border-top: 1px solid rgba(255, 255, 255, 0.28);
        transition: max-height 0.4s ease, opacity 0.28s ease, transform 0.35s ease;
    }
    .admin-mobile-menu.active,
    .admin-mobile-menu.initial-open {
        max-height: calc(100vh - 92px);
        opacity: 1;
        transform: translateY(0);
    }
    .admin-mobile-menu.initial-open {
        visibility: hidden;
    }
    .admin-mobile-menu ul {
        list-style-type: none;
        padding: 14px 0 4px;
    }
    .admin-mobile-session-summary {
        position: relative;
        margin: 40px 0 calc(16px + env(safe-area-inset-bottom));
        opacity: 0;
        transform: translateX(-18px);
        transition: opacity .28s ease, transform .28s ease;
    }
    .admin-mobile-session-summary::after {
        content: "";
        width: 1px;
        height: 20px;
        position: absolute;
        top: 50%;
        right: 45px;
        background: rgba(255, 255, 255, .22);
        transform: translateY(-50%);
    }
    .admin-mobile-menu.active .admin-mobile-session-summary {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 380ms;
    }
    .admin-mobile-session-summary .admin-logout-form button {
        color: rgba(255, 255, 255, .82);
    }
    .admin-mobile-session-summary .admin-session-identity {
        min-height: 38px;
        padding-right: 82px;
    }
    .admin-mobile-session-summary .admin-session-identity > i,
    .admin-mobile-session-summary .admin-session-identity > svg {
        position: absolute;
        top: 50%;
        right: 53px;
        width: 18px !important;
        height: 18px !important;
        font-size: 18px;
        transform: translateY(-50%);
    }
    .admin-mobile-session-summary .admin-logout-form {
        position: absolute;
        top: 50%;
        right: 7px;
        margin: 0;
        padding: 0;
        border: 0;
        transform: translateY(-50%);
    }
    .admin-mobile-session-summary .admin-logout-form button {
        width: 34px;
        height: 34px;
        min-height: 0;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .admin-mobile-session-summary .admin-logout-form button i,
    .admin-mobile-session-summary .admin-logout-form button svg {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px;
    }
    .admin-mobile-session-summary .admin-logout-form button span {
        display: none;
    }
    .admin-mobile-menu li {
        color: #bbbbbb;
        padding: 7px 12px;
        margin: 2px 0;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 15px;
        border: 1px solid transparent;
        border-radius: 9px;
        opacity: 0;
        transform: translateX(-18px);
        transition-property: color, border-color, opacity, transform;
        transition-duration: .16s, .16s, .28s, .28s;
        transition-timing-function: ease, ease, ease, ease;
        transition-delay: 0s, 0s, 0s, 0s;
    }
    .admin-mobile-menu.active li {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0s, 0s, calc(90ms + (var(--item-index, 1) * 22ms)), calc(90ms + (var(--item-index, 1) * 22ms));
    }
    .admin-mobile-menu li.active{
        color: #fff;
        border-color: rgba(255, 255, 255, .18);
        background-color: transparent;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    }
@media (hover: hover) {
.admin-mobile-menu li:hover{
        color: #fff;
        border-color: rgba(255, 255, 255, .18);
        background-color: transparent;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    }
}
    .sidebar-pannel {
        display: none;
    }

    .widget-dashboard-1 {
        grid-template-columns: 1fr;
    }
    .widget-dashboard-2 {
        grid-template-columns: 1fr;
    }
    .widget-dashboard-3 {
        grid-template-columns: 1fr;
    }
    .chart {
        grid-template-columns: 1fr;
    }
    .content-dashboard {
        margin-left: 0px;
        padding: 18px;
        background-color: #fff;
    }
    #products .mobile-product-draft-row {
        --mobile-product-add-accent: #45a873;
        --mobile-product-image-accent: #e58a2b;
        display: table-row;
    }
    #products .mobile-product-draft-row td {
        border-bottom-color: #dedede;
        background: #fff;
    }
    #products .mobile-product-draft-row .mobile-product-draft-field {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #products .mobile-product-draft-row .mobile-product-draft-field.is-empty {
        color: var(--mobile-product-image-accent);
        font-style: italic;
    }
    #products .mobile-product-draft-row .mobile-product-draft-image {
        opacity: .82;
        cursor: pointer;
        border-color: var(--mobile-product-image-accent);
        border-style: dashed;
    }
    #products .mobile-product-draft-row .mobile-product-draft-image:not([data-object-url]) {
        object-fit: contain;
        object-position: center;
        background: #fff;
    }
    #products .mobile-product-draft-row .mobile-product-draft-image[data-object-url] {
        opacity: 1;
        border-color: #ccc;
        border-style: solid;
    }
    #products .mobile-product-draft-row .mobile-product-draft-details {
        color: var(--mobile-product-add-accent);
        border-color: var(--mobile-product-add-accent);
        background: #fff;
    }
    #products .mobile-product-draft-row .mobile-product-draft-reset {
        color: var(--mobile-product-image-accent);
        border-color: var(--mobile-product-image-accent);
        background: #fff;
    }
    #products .mobile-product-draft-row.mobile-product-draft-attention td {
        animation: mobileDraftAttention 1.6s ease;
    }
    #products .row-between .btn-add-new {
        display: none;
    }
    #modalAddProduct .mobile-product-draft-managed,
    #modalAddProduct .mobile-product-draft-images-row {
        display: none !important;
    }
    #modalAddProduct .scroll-modal > h4::after {
        content: "Complete the remaining details";
        display: block;
        margin-top: 4px;
        color: #777;
        font-size: 11px;
        font-weight: 400;
    }
}

@keyframes mobileDraftAttention {
    0%, 100% { background-color: #f7f7f7; }
    35% { background-color: #fff4bd; }
}

@media screen and (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
        line-height: 1.4;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .managmnet-pannel,
    .managmnet-pannel > .content-dashboard,
    #products,
    #products .widget-tab,
    #products .item-tab,
    #products .table-tab,
    #products .table-tab table {
        background-color: #fff;
    }
    #products .item-tab {
        box-shadow: none;
    }
    .content-dashboard .item-tab,
    .content-dashboard .dashboard-item {
        box-shadow: none;
    }
    #dashboard .widget-dashboard-1 > .dashboard-item:nth-child(1),
    #dashboard .widget-dashboard-1 > .dashboard-item:nth-child(2) {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    }
    #dashboard .widget-dashboard-4,
    #dashboard .ranking-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    #dashboard .ranking-list {
        overflow-x: hidden;
    }
    #dashboard .ranking-list table {
        width: 100%;
        box-sizing: border-box;
        table-layout: fixed;
        border-collapse: collapse;
    }
    #dashboard .ranking-list table td {
        min-width: 0;
        padding: 12px 4px;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
    #dashboard .ranking-list table thead td {
        font-size: 10px;
        line-height: 1.3;
    }
    #dashboard .ranking-list table tbody td {
        font-size: 11px;
    }
    #dashboard .ranking-list table td:nth-child(1) {
        width: 20%;
        padding-right: 6px;
        padding-left: 6px;
    }
    #dashboard .ranking-list table td:nth-child(2) {
        width: 24%;
    }
    #dashboard .ranking-list table td:nth-child(3) {
        width: 18%;
    }
    #dashboard .ranking-list table td:nth-child(4) {
        width: 22%;
    }
    #dashboard .ranking-list table td:nth-child(5) {
        width: 16%;
    }
    #dashboard .ranking-list .progress-bar {
        width: 100%;
        min-width: 0;
    }
    #dashboard .ranking-list .rank {
        display: inline-block;
        max-width: 100%;
        padding: 4px 5px;
        box-sizing: border-box;
    }
    #products .product-row.highlight-row {
        animation: none;
        background-color: #fff9c4 !important;
        transition: none;
    }
}

/* Refined product details, features and review form */
.product-details .pannel-reviews,
.product-details .reviews {
    box-sizing: border-box;
}
.product-details .container-reviews {
    padding-top: 12px;
    padding-bottom: 12px;
}
.product-details .pannel-reviews {
    padding-top: 6px;
    padding-bottom: 6px;
}
.product-details .pannel-reviews > .reviews:only-child {
    flex: 0 0 100%;
    width: 100%;
}
.product-details .pannel-features > div:not(.list-features) {
    max-width: 680px;
    margin-top: 22px;
    margin-bottom: 12px;
}
.product-details .key-features > ul,
.product-details .advantages-strengths > ul,
.product-details .maintenance-use > ul {
    width: 100%;
    max-width: 680px;
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
}
.product-details .key-features > ul > li,
.product-details .advantages-strengths > ul > li,
.product-details .maintenance-use > ul > li {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 13px 15px;
    color: #555;
    line-height: 1.65;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fafafa;
}
.product-details .key-features > ul > li > .sp1,
.product-details .key-features > ul > li > .sp2 {
    box-sizing: border-box;
    margin: 0;
    background: transparent;
}
.product-details .key-features > ul > li > .sp1 {
    width: 42%;
    color: #222;
    font-weight: 600;
}
.product-details .key-features > ul > li > .sp2 {
    width: 58%;
    padding-inline-start: 18px;
    color: #777;
}
.product-details .advantages-strengths > ul > li,
.product-details .maintenance-use > ul > li {
    padding-inline-start: 39px;
}
.product-details .advantages-strengths > ul > li::before,
.product-details .maintenance-use > ul > li::before {
    position: absolute;
    inset-inline-start: 15px;
    top: 13px;
    color: #222;
    font-family: Arial, sans-serif;
    font-weight: 700;
}
.product-details .advantages-strengths > ul > li::before { content: "✓"; }
.product-details .maintenance-use > ul > li::before {
    content: "!";
    top: 15px;
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    border: 1.5px solid #222;
    border-radius: 50%;
}

.product-details .add-reviews {
    box-sizing: border-box;
    max-width: 680px;
    padding: 28px;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    background: #fafafa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.product-details .no-review {
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 22px 24px;
    color: #666;
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    background: #fafafa;
}
.product-details .no-review::before {
    content: "•••";
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #777;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
}
@media screen and (min-width: 769px) {
    .product-details .pannel-features {
        padding-inline: 15px;
    }
    .product-details .container-reviews {
        width: 100%;
        max-width: 680px;
        margin-inline-start: 15px;
    }
    .product-details .pannel-reviews {
        box-sizing: border-box;
        width: 100%;
        padding-inline: 0;
    }
    .product-details .reviews {
        flex: 0 0 calc((100% - 20px) / 2);
        box-sizing: border-box;
    }
    .product-details .no-review {
        max-width: 680px;
        margin-inline-start: 0;
    }
    .product-details .add-reviews {
        margin-inline-start: 15px;
    }
}
.product-details .add-reviews > h5 {
    color: #222;
    font-size: 18px;
    margin-bottom: 7px;
}
.product-details .star-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 12px;
    padding: 10px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
}
.product-details .star-rating span {
    color: #555;
    font-size: 13px;
}
.product-details .star-rating i {
    margin: 4px 2px;
    font-size: 20px;
}
.product-details .rating-stars {
    display: flex;
    align-items: center;
    gap: 3px;
}
.product-details .rating-star {
    width: 28px;
    height: 32px;
    padding: 0;
    color: #b8b8b8;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: color .16s ease, transform .16s ease;
}
.product-details .rating-star::before {
    content: none;
}
.product-details .rating-star i,
.product-details .rating-star svg {
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 20px;
    pointer-events: none;
}
.product-details .rating-star .rating-full {
    display: none;
}
.product-details .rating-star.rating-selected .rating-empty {
    display: none;
}
.product-details .rating-star.rating-selected .rating-full {
    display: inline-block;
}
.product-details .rating-star:focus-visible{
    color: #d7a900;
    transform: translateY(-1px) scale(1.05);
}
@media (hover: hover) {
.product-details .rating-star:hover{
    color: #d7a900;
    transform: translateY(-1px) scale(1.05);
}
}
.product-details .rating-star.rating-selected {
    color: #ebb907;
}
.product-details .form-reviews > form > textarea,
.product-details .group-input-review input {
    box-sizing: border-box;
    color: #222;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.product-details .form-reviews > form > textarea {
    min-height: 145px;
    padding: 14px 16px;
    resize: vertical;
}
.product-details .group-input-review input {
    margin: 10px 0 18px;
    padding: 13px 14px;
}
.product-details .form-reviews textarea:focus,
.product-details .group-input-review input:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
.product-details .send-reviews {
    min-width: 145px;
    min-height: 42px;
    border-color: #111;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

@media screen and (min-width: 769px) {
    .product-details .description-product {
        box-sizing: border-box;
        max-width: 520px;
        margin: 12px 20px 0 42px;
        padding: 10px 4px;
    }
    .product-details .description-product > h4:first-child {
        margin: 0 0 12px;
        color: #171717;
        font-size: 24px;
        line-height: 1.3;
    }
    .product-details .description-product > p {
        max-width: 470px;
        margin: 0 0 20px;
        color: #737373;
        font-size: 13px;
        line-height: 1.8;
    }
    .product-details .description-product > span:not(.available-status):not(.discount) {
        margin-bottom: 8px;
        color: #111;
        font-size: 22px;
        line-height: 1.2;
    }
    .product-details .available-status:not(:empty),
    .product-details .discount {
        width: fit-content;
        margin: 8px 0 0;
        padding: 5px 9px;
        font-size: 11px;
        line-height: 1.2;
        border-radius: 999px;
        background: #f2f2f2;
    }
    .product-details .available-status:not(:empty) {
        color: #b42318;
        background: #fff0ee;
    }
    .product-details .available-status:empty {
        display: none;
    }
    .product-details .accompanying-items {
        margin: 28px 0 24px;
        padding-top: 20px;
        border-top: 1px solid #e8e8e8;
    }
    .product-details .accompanying-items > h4 {
        margin: 0 0 12px;
        color: #333;
        font-size: 13px;
    }
    .product-details .accompanying-items > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .product-details .accompanying-items > ul > li {
        margin: 0;
        padding: 6px 10px;
        color: #444;
        font-size: 11px;
        line-height: 1.35;
        border: 1px solid #e5e5e5;
        border-radius: 999px;
        background: #f2f2f2;
    }
    .product-details .controll-quantity {
        width: 100%;
        margin: 24px 0 0;
    }
    .product-details .controll-quantity form {
        width: 100%;
    }
    .product-details .controll-quantity .btn-add,
    .product-details .controll-quantity .btn-disabled {
        width: 100%;
        min-height: 44px;
    }
}

@media screen and (max-width: 768px) {
    .product-details .description-product {
        box-sizing: border-box;
        width: auto;
        margin: 30px 0 0;
        padding: 0;
    }
    .product-details .description-product h4 {
        margin-bottom: 11px;
        color: #171717;
        font-size: 20px;
        line-height: 1.35;
    }
    .product-details .description-product p {
        margin-bottom: 18px;
        color: #737373;
        font-size: 13px;
        line-height: 1.8;
    }
    .product-details .description-product > span:not(.available-status):not(.discount) {
        margin-bottom: 8px;
        color: #111;
        font-size: 20px;
        line-height: 1.2;
    }
    .product-details .available-status:not(:empty),
    .product-details .discount {
        width: fit-content;
        margin: 8px 0 0;
        padding: 5px 9px;
        font-size: 11px;
        line-height: 1.2;
        border-radius: 999px;
        background: #f2f2f2;
    }
    .product-details .available-status:not(:empty) {
        color: #b42318;
        background: #fff0ee;
    }
    .product-details .available-status:empty {
        display: none;
    }
    .product-details .accompanying-items {
        margin: 25px 0 22px;
        padding-top: 18px;
        border-top: 1px solid #e8e8e8;
    }
    .product-details .accompanying-items > h4 {
        margin: 0 0 11px;
        color: #333;
        font-size: 13px;
    }
    .product-details .accompanying-items > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .product-details .accompanying-items > ul > li {
        margin: 0;
        padding: 6px 10px;
        color: #444;
        font-size: 11px;
        line-height: 1.35;
        border: 1px solid #e5e5e5;
        border-radius: 999px;
        background: #f2f2f2;
    }
    .product-details .controll-quantity {
        width: 100%;
        margin: 22px 0 0;
    }
    .product-details .controll-quantity form,
    .product-details .btn-add,
    .product-details .btn-disabled {
        width: 100%;
    }
    .product-details .pannel-features {
        width: calc(100% - 20px);
        margin: 38px 10px;
        padding: 0;
    }
    .product-details .pannel-features > div:not(.list-features) {
        margin-top: 14px;
    }
    .product-details .key-features > ul > li {
        align-items: flex-start;
        padding: 12px;
        font-size: 12px;
    }
    .product-details .key-features > ul > li > .sp1 {
        width: 44%;
    }
    .product-details .key-features > ul > li > .sp2 {
        width: 56%;
        margin: 0;
        padding-inline-start: 12px;
    }
    .product-details .container-reviews {
        padding: 12px 0;
    }
    .product-details .pannel-reviews {
        padding: 12px 10px;
    }
    .product-details .no-review {
        padding: 18px 16px;
        border-radius: 14px;
    }
    .product-details .add-reviews {
        width: calc(100% - 20px);
        margin: 34px 10px;
        padding: 20px 14px;
        border-radius: 14px;
    }
    .product-details .star-rating {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .response-review {
        top: 82px;
        left: 12px;
        max-width: calc(100vw - 24px);
    }
    .product-details .group-input-review {
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }
    .product-details .group-input-review input {
        margin: 0;
    }
    .product-details .send-reviews {
        width: 100%;
        margin-top: 16px;
    }
}

.product-details .btn-add,
.product-details .send-reviews {
    color: #fff;
    border: 1px solid #111;
    border-radius: 999px !important;
    background-color: #000;
    background-clip: padding-box;
    overflow: hidden;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.product-details .controll-quantity,
.product-details .controll-quantity form {
    border-radius: 999px;
}
.product-details .btn-add {
    -webkit-appearance: none;
    appearance: none;
    clip-path: inset(0 round 999px);
    -webkit-clip-path: inset(0 round 999px);
}
.product-details .btn-add:focus-visible,
.product-details .send-reviews:focus-visible{
    color: #111;
    border-color: #e8e8e8;
    border-radius: 999px !important;
    background-color: #fafafa;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .1);
}
@media (hover: hover) {
.product-details .btn-add:hover,
.product-details .send-reviews:hover{
    color: #111;
    border-color: #e8e8e8;
    border-radius: 999px !important;
    background-color: #fafafa;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .1);
}
}

/* One shared gap between homepage sections, without doubled padding. */
.banner,
.bestsellers,
.special-discount,
.blog-index,
.sec-benefit {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 64px;
    padding-bottom: 0;
}
.sec-benefit {
    padding-bottom: 64px;
}
.sec-benefit .container-benefit {
    padding-top: 0;
    padding-bottom: 0;
}
.sec-benefit .benefit:last-child {
    margin-bottom: 0;
}
.special-discount .title-index,
.blog-index .title-index,
.sec-benefit .title-index {
    margin-bottom: 28px;
}
.bestsellers .slider-container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 768px) {
    .banner,
    .bestsellers,
    .special-discount,
    .blog-index,
    .sec-benefit {
        padding-top: 44px;
        padding-bottom: 0;
    }
    .sec-benefit {
        padding-bottom: 44px;
    }
    .special-discount .title-index,
    .blog-index .title-index,
    .sec-benefit .title-index {
        margin-bottom: 20px;
    }
    .bestsellers .slider-container {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Give the product edit its own rhythm between the campaign banners and offers. */
.bestsellers {
    padding-top: 108px;
    padding-bottom: 105px;
}
@media screen and (max-width: 900px) and (min-width: 769px) {
    .bestsellers-item { flex-basis: calc((100% - 18px) / 2); }
}
@media screen and (max-width: 768px) {
    .banner.banner-editorial > .container,
    .bestsellers > .container {
        width: calc(100% - 32px);
    }
    .bestsellers {
        padding-top: 76px;
        padding-bottom: 73px;
    }
    .bestsellers-heading {
        display: block;
        margin-bottom: 28px;
    }
    .bestsellers-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .bestsellers-heading-copy p {
        margin-top: 16px;
    }
    .bestsellers-heading-actions { margin-top: 19px; }
    .bestsellers .product-grid { gap: 12px; }
    /* phones: taller frames, same width */
    .bestsellers-image { aspect-ratio: 4 / 5; }
    .bestsellers-item {
        flex-basis: 84%;
        scroll-snap-stop: always;
    }
    .bestsellers-product-info { padding-top: 14px; }
    .bestsellers-product-info h3 { font-size: 16px; }
}

/* Editorial offer carousel: retain each product photo as the card backdrop. */
.special-discount {
    background: #f6f2eb;
    padding-top: 0;
    padding-bottom: 108px;
}
.special-discount > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "heading actions" "slider slider";
    column-gap: 32px;
}
.special-discount .offers-heading {
    grid-area: heading;
    margin-bottom: 34px;
}
.special-discount .offers-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
}
.special-discount .offers-heading h2 {
    margin: 0;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.special-discount .offers-heading p {
    margin: 19px 0 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.special-discount .offers-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    align-self: end;
    gap: 11px;
    margin-bottom: 34px;
    padding-bottom: 2px;
}
.special-discount .offers-count {
    margin-right: 12px;
    color: #756a61;
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;
}
.special-discount .offers-count #offers-current { color: #33251f; }
.special-discount .offers-rotation,
.special-discount .control-btn {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #33251f;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 1;
    visibility: visible;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .25s ease;
}
.text-arrow-up-right { font-variant-emoji: text; }
.special-discount .offers-rotation svg {
    display: block;
    width: 18px;
    height: 18px;
}
.special-discount .control-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    transition: transform .35s cubic-bezier(.18, .64, .27, 1);
}
.special-discount .offers-rotation[aria-pressed="false"] .offer-icon-play,
.special-discount .offers-rotation[aria-pressed="true"] .offer-icon-pause { display: none; }
@media (hover: hover) {
.special-discount .offers-rotation:hover,
.special-discount .control-btn:hover{
    transform: none;
    background: transparent;
    border-color: rgba(51, 37, 31, .22);
}
.special-discount .btn-prev:hover svg{ transform: translateX(-2px); }
.special-discount .btn-next:hover svg{ transform: translateX(2px); }
}
.special-discount .offers-rotation:focus-visible,
.special-discount .control-btn:focus-visible,
.special-discount .offer-cta:focus-visible {
    outline: 1px solid #33251f;
    outline-offset: 2px;
}
.special-discount .controls {
    position: static;
    display: flex;
    gap: 2px;
    width: auto;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
.special-discount .slider-special {
    grid-area: slider;
    border-radius: 0;
}
.special-discount .item-slide {
    min-height: 480px;
    margin: 0;
    padding: clamp(32px, 5vw, 72px);
    overflow: hidden;
    border-radius: 0;
    background-color: #a58d78;
    background-position: center;
    background-size: cover;
}
.special-discount .item-slide::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(36, 25, 20, .30), rgba(36, 25, 20, .56) 48%, rgba(32, 22, 18, .78));
}
.special-discount .item-slide::after { content: none; }
.special-discount .offer-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(36px, 5vw, 88px);
    min-height: 336px;
}
.special-discount .img-spacial {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.special-discount .img-spacial img { border-radius: 0; }
.special-discount .desc-spacial {
    max-width: 480px;
    margin: 0;
    color: #fff;
}
.special-discount .offer-eyebrow {
    display: block;
    text-transform: uppercase;
    margin-bottom: 17px;
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
    letter-spacing: 2.5px;
}
.special-discount .desc-spacial h3 {
    margin: 0 0 25px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(35px, 4vw, 56px);
    font-weight: 400;
    letter-spacing: -1.6px;
    line-height: 1.08;
}
.special-discount .offer-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}
.special-discount .offer-price {
    color: #fff;
    font-size: 21px;
    letter-spacing: -.3px;
}
.special-discount .offer-price-was {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    text-decoration-color: currentColor;
}
.special-discount .offer-discount {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.special-discount .offer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-width: 175px;
    margin: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .88);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: left;
    transform: none;
    transition: none;
}
@media (hover: hover) {
.special-discount .offer-cta:hover{
    border-bottom-color: rgba(255, 255, 255, .88);
    background: transparent;
    color: #fff;
    transform: none;
}
}
.special-discount .offer-cta span {
    display: inline-block;
    font-size: 18px;
    line-height: .7;
    transition: transform .35s ease;
}
@media (hover: hover) {
.special-discount .offer-cta:hover span{ transform: translate(2px, -2px); }
}
@media screen and (max-width: 768px) {
    .special-discount {
        padding-top: 0;
        padding-bottom: 76px;
    }
    .special-discount > .container {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "heading" "slider" "actions";
    }
    .special-discount .offers-heading {
        margin-bottom: 28px;
    }
    .special-discount .offers-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .special-discount .offers-heading p { margin-top: 16px; }
    .special-discount .offers-actions {
        justify-content: flex-start;
        align-self: auto;
        margin-top: 20px;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .special-discount .offers-count {
        order: 3;
        margin-right: 0;
        margin-left: auto;
    }
    .special-discount .offers-rotation { order: 1; }
    .special-discount .controls {
        display: flex;
        order: 2;
    }
    .special-discount .offers-actions { gap: 4px; }
    .special-discount .item-slide {
        min-height: 510px;
        padding: 26px;
        background-position: center;
    }
    .special-discount .item-slide::before {
        background: linear-gradient(0deg, rgba(31, 22, 18, .78), rgba(31, 22, 18, .38) 36%, transparent 64%);
    }
    .special-discount .offer-layout {
        display: flex;
        align-items: flex-end;
        min-height: 458px;
    }
    .special-discount .img-spacial { display: none; }
    .special-discount .desc-spacial {
        width: 100%;
        max-width: none;
    }
    .special-discount .offer-eyebrow { margin-bottom: 13px; }
    .special-discount .desc-spacial h3 {
        margin-bottom: 18px;
        font-size: clamp(32px, 8vw, 43px);
    }
    .special-discount .offer-price-row { margin-bottom: 23px; }
    .special-discount .offer-cta {
        width: 100%;
        min-width: 0;
        padding: 8px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .88);
        border-bottom: 0;
    }
}

/* Editorial journal: keep the centered, selectable carousel composition. */
.blog-index {
    background: #f6f2eb;
    padding-top: 0;
    padding-bottom: 87px;
}
/* centered over the centered story carousel */
.blog-index .blog-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto 36px;
}
.blog-index .blog-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
}
.blog-index .blog-heading h2 {
    margin: 0;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.blog-index .blog-heading p {
    margin: 19px 0 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.blog-index .blog-view-all {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    margin: 0 0 2px;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid #33251f;
    border-radius: 0;
    background: transparent;
    color: #33251f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
.blog-index .blog-view-all:hover{
    color: #9b5a33;
    border-bottom-color: #9b5a33;
    background: transparent;
}
}
.blog-index .blog-view-all span {
    display: inline-block;
    font-size: 16px;
    line-height: .7;
    transition: transform .35s ease;
}
@media (hover: hover) {
.blog-index .blog-view-all:hover span{ transform: translate(2px, -2px); }
}
.blog-index .blog-view-all:focus-visible,
.blog-index .dot:focus-visible {
    outline: 2px solid #9b5a33;
    outline-offset: 3px;
}
.blog-index .item-post-index > a,
.blog-index .item,
.blog-index .item img,
.blog-index .item::after { border-radius: 0; }
.blog-index .item.faded {
    filter: brightness(.86);
    opacity: .82;
}
.blog-index .item.active-item {
    filter: none;
    opacity: 1;
}
.blog-index .item::after {
    background: linear-gradient(0deg, rgba(30, 21, 17, .84), rgba(30, 21, 17, .32) 32%, transparent 66%);
    opacity: 0;
}
.blog-index .item.active-item::after { opacity: 1; }
.blog-index .description {
    right: 30px;
    bottom: 32px;
    left: 30px;
    margin: 0;
    padding: 0;
}
.blog-index .description .sp1 {
    margin-bottom: 11px;
    color: rgba(255, 255, 255, .84);
    font-size: 11px;
    letter-spacing: 1.4px;
}
.blog-index .description .sp2 {
    max-width: 680px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.16;
}
.blog-index .dot-scroller {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 15px;
}
.blog-index .dot {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.blog-index .dot::before {
    content: '';
    width: 28px;
    height: 2px;
    background: #bdb2a8;
    transition: width .25s ease, background-color .25s ease;
}
.blog-index .dot.active::before {
    width: 36px;
    background: #33251f;
}
.blog-index .dot:focus-visible { outline-color: #33251f; }
@media screen and (max-width: 768px) {
    .blog-index { padding-bottom: 55px; }
    .blog-index .blog-heading {
        display: block;
        width: calc(100% - 32px);
        margin-bottom: 28px;
    }
    .blog-index .blog-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .blog-index .blog-heading p { margin-top: 16px; }
    .blog-index .blog-view-all { margin-top: 20px; }
    .blog-index .item-post-index > a { scroll-snap-stop: always; }
    .blog-index .item.faded {
        filter: brightness(.9);
        opacity: .88;
    }
    .blog-index .item.faded::after { opacity: .34; }
    .blog-index .item.active-item::after { opacity: 1; }
    .blog-index .description {
        right: 20px;
        bottom: 24px;
        left: 20px;
    }
    .blog-index .description .sp2 { font-size: clamp(22px, 6vw, 29px); }
}

/* The NIVOX promise: an editorial finish to the homepage. */
.sec-benefit {
    background: #f6f2eb;
    padding: 0 0 108px;
}
.sec-benefit .benefit-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 42px;
}
.sec-benefit .benefit-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
}
.sec-benefit .benefit-heading h2 {
    margin: 0;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.sec-benefit .benefit-heading p {
    max-width: 300px;
    margin: 0 0 4px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.sec-benefit .container-benefit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    border-top: 1px solid #d7cbc0;
    border-bottom: 1px solid #d7cbc0;
}
.sec-benefit .benefit {
    display: grid;
    grid-template-rows: 68px 1fr;
    align-items: stretch;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 234px;
    box-sizing: border-box;
    margin: 0;
    padding: 27px 27px 29px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.sec-benefit .benefit + .benefit { border-left: 1px solid #d7cbc0; }
.sec-benefit .benefit-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.sec-benefit .benefit-number {
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.8px;
    line-height: 1.5;
}
.sec-benefit .benefit-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.sec-benefit .benefit-copy h3 {
    max-width: 200px;
    min-height: 2.36em;
    margin: 0 0 7px;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(19px, 1.7vw, 25px);
    font-weight: 400;
    line-height: 1.18;
}
.sec-benefit .benefit-copy p {
    max-width: 240px;
    margin: 0;
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
@media screen and (max-width: 1000px) and (min-width: 601px) {
    .sec-benefit .container-benefit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec-benefit .benefit { min-height: 210px; }
    .sec-benefit .benefit:nth-child(3) { border-left: 0; }
    .sec-benefit .benefit:nth-child(n+3) { border-top: 1px solid #d7cbc0; }
}
@media screen and (max-width: 600px) {
    .sec-benefit { padding: 0 0 76px; }
    .sec-benefit .benefit-container { width: calc(100% - 32px); }
    .sec-benefit .benefit-heading { display: block; margin-bottom: 29px; }
    .sec-benefit .benefit-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .sec-benefit .benefit-heading p { margin-top: 16px; }
    .sec-benefit .container-benefit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec-benefit .benefit {
        grid-template-rows: 60px 1fr;
        min-height: 205px;
        padding: 22px 14px 20px;
        text-align: left;
    }
    .sec-benefit .benefit:nth-child(odd) { padding-left: 0; padding-right: 18px; }
    .sec-benefit .benefit:nth-child(even) { padding-left: 18px; padding-right: 0; }
    .sec-benefit .benefit + .benefit {
        border-left: 0;
    }
    .sec-benefit .benefit:nth-child(even) { border-left: 1px solid #d7cbc0; }
    .sec-benefit .benefit:nth-child(n+3) { border-top: 1px solid #d7cbc0; }
    .sec-benefit .benefit-copy h3 { font-size: clamp(18px, 4.6vw, 20px); }
    .sec-benefit .benefit-copy p { max-width: none; }
}

/* Refined account panel */
.account {
    margin: 110px 0 90px;
}
.account .pannel-account {
    align-items: flex-start;
}
.account .sidbar-account {
    padding: 6px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .list-account ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account .link-tab {
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 13px;
    color: #666;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
.account .link-tab:hover{
    color: #111;
    border-color: #e8e8e8;
    background: #fff;
}
}
.account .link-tab.active {
    color: #fff;
    border-color: #111;
    background: #111;
}
.account .account-logout-item {
    margin-top: 6px;
}
.account .account-logout-form {
    margin: 0;
}
.account .account-logout-button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 10px 13px;
    color: #666;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
.account .account-logout-button:hover{
    color: #b42318;
    border-color: #f0d1ce;
    background: #fff;
}
}
.account .account-logout-button i,
.account .account-logout-button svg {
    width: 14px;
    flex: 0 0 14px;
}
.account .widget-account {
    min-height: 430px;
    box-sizing: border-box;
    padding: 26px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
}
.account .profile-account {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .img-profile i,
.account .img-profile svg {
    color: #777;
    border-color: #e8e8e8;
}
.account .content-account + .content-account {
    margin-top: 24px;
    padding-top: 4px;
}
.account .title-content-account,
.account .title-address {
    min-height: 46px;
    box-sizing: border-box;
    align-items: center;
    margin: 0 0 14px;
    padding: 10px 13px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .title-address {
    padding-bottom: 10px;
}
.account .item-content-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid #eeeeee;
}
.account .item-content-account:last-child {
    border-bottom: 0;
}
.account .span-content {
    margin: 0;
    text-align: end;
}
.account .btn-edit,
.account .btn-add-address {
    padding: 6px 11px;
    color: #111;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.account .btn-delete {
    color: #111;
    border: 0;
    background: transparent;
}
@media (hover: hover) {
.account .btn-edit:hover,
.account .btn-add-address:hover{
    border-color: #d8d8d8;
    background: #f3f3f3;
}
}
.account .form-edit-information.active,
.account .inline-address-form.active {
    padding: 18px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .container-input {
    gap: 2px 0;
}
.account .input-group input,
.account .input-group select,
.account .input-shaba,
.account .birthdate-select {
    border-color: #dedede;
    border-radius: 10px;
    background: #fff;
}
.account .birthdate-select select {
    border-radius: 0;
}
.account .input-group label,
.account .input-shaba label {
    background: #fafafa;
}
.account .input-group input:focus,
.account .input-group select:focus,
.account .shaba-input:focus {
    border-color: #999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}
.account .btn-group button,
.account .map-action {
    min-height: 38px;
    color: #111;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    background: #fafafa;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.account .btn-group .btn-verify{
    color: #fff;
    border-color: #111;
    background: #111;
}
@media (hover: hover) {
.account .map-action:hover{
    color: #fff;
    border-color: #111;
    background: #111;
}
}
@media (hover: hover) {
.account .btn-group button:hover,
.account .btn-group .btn-verify:hover{
    color: #111;
    border-color: #e8e8e8;
    background: #fafafa;
}
}
.account .list-orders {
    margin: 18px 0;
}
.account .list-orders ul {
    display: flex;
    gap: 7px;
    padding-bottom: 8px;
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: none;
}
.account .list-orders ul::-webkit-scrollbar { display: none; }
.account .list-orders ul li {
    min-width: max-content;
    margin: 0;
    padding: 7px 13px;
    color: #666;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    background: #fff;
}
.account .list-orders ul li.active-tab-orders {
    color: #fff;
    border-color: #111;
    background: #111;
}
.account .item-order,
.account .container_addresses,
.account .account-favorite-card,
.account .empty-favorites-message {
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .item-order {
    margin: 18px auto;
    padding: 18px;
}
.account .container_addresses {
    margin: 14px 0;
    padding: 15px;
}
.account .map {
    border-color: #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.account .account-favorites-grid {
    gap: 14px;
}
.account .account-favorite-card {
    gap: 13px;
    padding: 10px;
}
.account .account-favorite-image {
    border-radius: 10px;
}
.account .account-favorite-remove {
    color: #d93025;
}
.account .empty-favorites-message {
    padding: 22px;
}

@media screen and (max-width: 768px) {
    .account {
        margin: 92px 0 60px;
    }
    .account .sidbar-account {
        margin-bottom: 14px;
        padding: 5px;
        border: 1px solid #e8e8e8;
        border-radius: 10px;
        background: #fafafa;
    }
    .account .list-account ul {
        flex-direction: row;
        gap: 7px;
        padding: 1px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    .account .list-account ul::-webkit-scrollbar { display: none; }
    .account .link-tab {
        min-width: max-content;
        min-height: 38px;
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 13px;
        font-size: 12px;
    }
    .account .account-logout-item {
        min-width: max-content;
        flex: 0 0 auto;
        margin: 0;
    }
    .account .account-logout-button {
        width: auto;
        min-height: 38px;
        padding: 8px 13px;
        font-size: 12px;
    }
    @media (hover: none) {
        @media (hover: hover) {
.account .account-logout-button:hover{
            color: #666;
            border-color: transparent;
            background: transparent;
        }
}
        .account .account-logout-button:active {
            color: #b42318;
            border-color: #f0d1ce;
            background: #fff;
        }
    }
    .account .widget-account {
        min-height: 360px;
        padding: 15px 12px;
        border-radius: 10px;
    }
    .account .profile-account {
        padding: 13px;
    }
    .account .title-content-account,
    .account .title-address {
        gap: 8px;
        padding: 9px 10px;
    }
    .account .item-content-account {
        align-items: flex-start;
        padding: 10px 7px;
    }
    .account .span-title,
    .account .span-content {
        font-size: 12px;
    }
    .account .form-edit-information.active,
    .account .inline-address-form.active {
        padding: 14px 6px;
    }
    .account .input-group,
    .account .input-shaba,
    .account .email-input {
        width: 100%;
    }
    .account .btn-group {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .account .btn-group button {
        width: 50%;
        margin: 0;
    }
    .account .form-edit-information .btn-delete {
        top: -14px;
        right: -4px;
        color: #111;
    }
    .account .account-favorites-grid {
        grid-template-columns: 1fr;
    }
    .account .account-favorite-card {
        width: 100%;
    }
    .account .address-map-tools {
        width: 100%;
        flex-wrap: wrap;
    }
    .account .map-action {
        flex: 1 1 auto;
    }
}
.product-details .send-reviews:focus-visible{
    box-shadow: none;
}
@media (hover: hover) {
.product-details .send-reviews:hover{
    box-shadow: none;
}
}

@media screen and (min-width: 769px) {
    .product-details .container-reviews {
        overflow: visible;
    }
    .product-details .pannel-reviews {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .product-details .pannel-reviews::-webkit-scrollbar { display: none; }
    .product-details .controll-btn {
        width: 100%;
        max-width: none;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    @media (hover: hover) {
.product-details .container-reviews:hover .controll-btn{
        opacity: 1;
    }
}
    .product-details .prevbtn,
    .product-details .nextbtn {
        width: 44px;
        height: 44px;
        padding: 0;
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #222;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        background: #f4f4f4;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: none;
        pointer-events: auto;
        transform: translateY(-50%);
        transition: background-color .18s ease, transform .18s ease;
    }
    .product-details .prevbtn { left: -54px; }
    .product-details .nextbtn { right: -54px; }
    .product-details .prevbtn.is-hidden,
    .product-details .nextbtn.is-hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    @media (hover: hover) {
.product-details .prevbtn:hover,
.product-details .nextbtn:hover{
        color: #222;
        background: #f1f1f1;
        transform: translateY(-50%) scale(1.05);
    }
}
}

@media screen and (max-width: 768px) {
    .product-details .pannel-reviews {
        padding-top: 6px;
        padding-bottom: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .product-details .pannel-reviews::-webkit-scrollbar { display: none; }
    .product-details .reviews {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .product-details .reviews.active-review {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }
    .product-details .reviews.faded-review {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }
    .product-details .controll-btn {
        display: none !important;
    }
}

/* Mobile cart quantity controls */
@media screen and (max-width: 768px) {
    .cart .cart-quantity {
        width: 114px;
        height: 38px;
    }
    .cart .cart-quantity .input-quantity,
    .cart .cart-quantity .decrease,
    .cart .cart-quantity .increase {
        width: 38px;
        height: 38px;
    }
    .cart .cart-quantity .input-quantity {
        border-radius: 0 !important;
        -webkit-appearance: none;
        appearance: none;
    }
    .cart .cart-quantity .decrease,
    .cart .cart-quantity .increase {
        color: #000;
        -webkit-text-fill-color: #000;
        font-size: 18px;
        font-weight: 500;
    }
    .cart .cart-trash-icon {
        width: 17px;
        height: 17px;
        display: block;
        margin: auto;
        fill: none;
        stroke: #000;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .cart .mobile-quantity-decrease:disabled {
        opacity: .55;
        cursor: wait;
    }
    .cart .cart-quantity .decrease {
        border-radius: 20px 0 0 20px;
    }
    .cart .cart-quantity .increase {
        border-radius: 0 20px 20px 0;
    }
    .cart .table-mobile .btn-remove,
.cart .table-mobile .btn-remove:focus,
.cart .table-mobile .btn-remove:active{
        color: #000;
        -webkit-text-fill-color: #000;
    }
@media (hover: hover) {
.cart .table-mobile .btn-remove:hover{
        color: #000;
        -webkit-text-fill-color: #000;
    }
}
    .cart .btn-final,
.cart .btn-final:focus,
.cart .btn-final:active{
        color: #000;
        -webkit-text-fill-color: #000;
        border-color: #ccc;
        background-color: #e9e9e9;
    }
@media (hover: hover) {
.cart .btn-final:hover{
        color: #000;
        -webkit-text-fill-color: #000;
        border-color: #ccc;
        background-color: #e9e9e9;
    }
}
}

/* Clearer visual hierarchy for account forms */
.account .widget-account {
    background: #f2f2f2;
}
.account .content-account {
    padding: 16px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
}
.account .content-account + .content-account {
    margin-top: 18px;
    padding-top: 16px;
}
.account .title-content-account,
.account .title-address {
    border-color: #dedede;
    background: #e9e9e9;
}
.account .form-edit-information.active,
.account .inline-address-form.active {
    border: 0;
    background: #f2f2f2;
    box-shadow: none;
}
.account .form-edit-information .input-group input,
.account .form-edit-information .input-group select,
.account .form-edit-information .input-shaba,
.account .form-edit-information .birthdate-select,
.account .inline-address-form .input-group input,
.account .inline-address-form .input-group select,
.account .inline-address-form .input-shaba,
.account .inline-address-form .birthdate-select {
    border-color: #c7c7c7;
    background: #f2f2f2;
}
.account .form-edit-information .input-shaba,
.account .inline-address-form .input-shaba {
    border: 1px solid #c7c7c7;
}
.account .form-edit-information .input-group label,
.account .form-edit-information .input-shaba label,
.account .inline-address-form .input-group label,
.account .inline-address-form .input-shaba label {
    background: #f2f2f2;
}
.account .form-edit-information .input-group input:focus,
.account .form-edit-information .input-group select:focus,
.account .form-edit-information .shaba-input:focus,
.account .inline-address-form .input-group input:focus,
.account .inline-address-form .input-group select:focus,
.account .inline-address-form .shaba-input:focus {
    border-color: #ccc;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
}
.account .input-shaba:focus-within {
    border-color: #ccc;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
}
.account .input-shaba .shaba-input:focus {
    box-shadow: none;
}
.account .item-order,
.account .container_addresses,
.account .account-favorite-card,
.account .empty-favorites-message {
    background: #fff;
}

@media screen and (max-width: 768px) {
    .account .content-account {
        padding: 12px 10px;
    }
    .account .content-account + .content-account {
        padding-top: 12px;
    }
}

/* Account headings sit above their information cards */
.account .content-account,
.account .content-account + .content-account {
    padding: 0;
    border: 0;
    background: transparent;
}
.account .content-account + .content-account {
    margin-top: 24px;
}
.account .content-information .title-content-account {
    margin: 0 0 10px;
}
.account .content-information .item-content-account {
    padding-inline: 13px;
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    background: #fff;
}
.account .content-information .title-content-account + .item-content-account {
    border-top: 1px solid #e2e2e2;
    border-radius: 10px 10px 0 0;
}
.account .content-information .item-content-account:last-child {
    border-bottom: 1px solid #e2e2e2;
    border-radius: 0 0 10px 10px;
}
.account .content-account .form-edit-information.active {
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .account .content-account,
    .account .content-account + .content-account {
        padding: 0;
    }
    .account .content-account + .content-account {
        margin-top: 18px;
    }
}

.account .widget-account[data-content="account"] {
    background: #f2f2f2;
}
.account .birthdate-select {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.account .birthdate-select select {
    display: block;
    flex: 1 1 0;
    height: 100%;
    margin: 0;
}
.account .input-shaba {
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* Mobile product table editor */
.mobile-product-editor {
    display: none;
}

@media screen and (max-width: 768px) {
    #products .editable-text[data-field="price"],
    #products .editable-text[data-field="stock_quantity"] {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: #c8c8c8;
        text-underline-offset: 4px;
    }
    .mobile-product-editor {
        position: fixed;
        inset: 0;
        z-index: 6000;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
    body.mobile-user-detail-editor-open .mobile-product-editor {
        z-index: 14000;
    }
    body.mobile-product-view-editor-open .mobile-product-editor {
        z-index: 14000;
    }
    body.mobile-order-detail-editor-open .mobile-product-editor {
        z-index: 14000;
    }
    body.mobile-nested-detail-editor-open .mobile-product-editor {
        z-index: 14000;
    }
    .mobile-product-editor.active {
        visibility: visible;
        pointer-events: auto;
    }
    .mobile-product-editor.closing {
        visibility: visible;
        pointer-events: none;
    }
    .mobile-product-editor-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        opacity: 0;
        background: rgba(0, 0, 0, .58);
        transition: none;
    }
    .mobile-product-editor.active .mobile-product-editor-backdrop {
        opacity: 1;
    }
    .mobile-product-editor.closing .mobile-product-editor-backdrop {
        opacity: 0;
    }
    .mobile-product-editor-sheet {
        position: absolute;
        right: 0;
        bottom: var(--admin-keyboard-inset, 0px);
        left: 0;
        box-sizing: border-box;
        padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
    }
    .mobile-product-editor.active .mobile-product-editor-sheet {
        transform: translateY(0);
    }
    .mobile-product-editor-handle {
        width: 64px;
        height: 24px;
        position: relative;
        display: block;
        margin: -10px auto 4px;
        padding: 0;
        cursor: grab;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-editor-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 10px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }
    .mobile-product-editor-sheet.is-dragging {
        transition: none;
    }
    .mobile-product-editor-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }
    .mobile-product-editor-header span {
        display: block;
        margin-bottom: 3px;
        color: #888;
        font-size: 11px;
    }
    .mobile-product-editor-header h4 {
        margin: 0;
        font-size: 17px;
    }
    .mobile-product-editor-close {
        width: 34px;
        height: 34px;
        padding: 0;
        color: #111;
        font-size: 25px;
        line-height: 1;
        border: 0;
        background: transparent;
    }
    .mobile-product-editor-label {
        display: block;
        margin: 0 0 7px;
        color: #555;
        font-size: 12px;
    }
    #mobileProductEditorInput,
    #mobileProductEditorSelect {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        display: block;
        box-sizing: border-box;
        padding: 12px 14px;
        color: #111;
        font-size: 16px;
        outline: none;
        border: 1px solid #c8c8c8;
        border-radius: 10px;
        background: #f2f2f2;
        transition: border-color .2s ease, box-shadow .2s ease;
    }
    #mobileProductEditorInput[type="date"],
    #mobileProductEditorInput[type="datetime-local"] {
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        display: block !important;
        flex: 1 1 100%;
        appearance: none;
        -webkit-appearance: none;
    }
    #mobileProductEditorInput[type="date"]::-webkit-date-and-time-value,
    #mobileProductEditorInput[type="datetime-local"]::-webkit-date-and-time-value {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
    #mobileProductEditorInput:focus,
    #mobileProductEditorSelect:focus {
        border-color: #999;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
    }
    #mobileProductEditorInput[hidden],
    #mobileProductEditorSelect[hidden] {
        display: none !important;
    }
    .mobile-product-editor-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 18px;
    }
    .mobile-product-editor-actions button {
        min-height: 44px;
        cursor: pointer;
        border-radius: 10px;
    }
    .mobile-product-editor-cancel {
        color: #111;
        border: 1px solid #d5d5d5;
        background: #f2f2f2;
    }
    .mobile-product-editor-save {
        color: #fff;
        border: 1px solid #111;
        background: #111;
    }
    .mobile-product-editor-save:disabled {
        opacity: .55;
        cursor: wait;
    }
}

@media screen and (max-width: 768px) {
    .modal-add .close-modal,
    .mobile-product-editor-close,
    .mobile-product-images-close {
        display: none !important;
    }
    #modalAddProduct,
    #modalDetailsProducts,
    #modalDeleteProduct {
        z-index: 6500;
        pointer-events: auto;
    }
    .mobile-product-editor-sheet,
    #modalAddProduct .modal-content,
    #modalDetailsProducts .modal-content,
    .mobile-product-images-sheet {
        transition-property: transform;
    }
    html.admin-keyboard-closing .mobile-product-editor-sheet,
    html.admin-keyboard-closing #modalAddProduct .modal-content,
    html.admin-keyboard-closing #modalDetailsProducts .modal-content,
    html.admin-keyboard-closing .mobile-product-images-sheet {
        transition: none !important;
    }
}

/* Product details bottom sheet on mobile */
.mobile-sheet-drag-handle {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-sheet-drag-handle {
        width: 64px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 8;
        display: block;
        padding: 0;
        cursor: grab;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        transform: translateX(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-sheet-drag-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }
    .mobile-sheet-drag-handle:active {
        cursor: grabbing;
    }
    .modal-add .modal-content.is-dragging {
        transition: none !important;
    }
    #modalDetailsProducts {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalDetailsProducts.is-mobile-sheet-open {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalDetailsProducts.is-mobile-sheet-closing {
        background-color: transparent;
    }
    #modalDetailsProducts .modal-content {
        width: 100%;
        max-width: none;
        max-height: var(--admin-sheet-max-height, 90dvh);
        margin: 0;
        position: absolute;
        right: 0;
        bottom: var(--admin-keyboard-inset, 0px);
        left: 0;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
    }
    #modalDetailsProducts.is-mobile-sheet-open .modal-content {
        transform: translateY(0);
    }
    #modalDetailsProducts .scroll-modal {
        max-height: var(--admin-sheet-max-height, 90dvh);
        box-sizing: border-box;
        padding: 28px 16px calc(92px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
    }
    #modalDetailsProducts .close-modal {
        top: 23px;
        right: 18px;
    }
    #modalDetailsProducts .btn-save-product-details {
        width: auto;
        position: fixed;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 16px;
        z-index: 10;
        margin: 0;
        box-shadow: 0 -10px 18px 8px rgba(255, 255, 255, .94);
    }
}

/* Delete product bottom sheet on mobile */
@media screen and (max-width: 768px) {
    body.delete-product-sheet-open {
        overflow: hidden;
    }
    #modalDeleteProduct {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalDeleteProduct.is-mobile-sheet-open {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalDeleteProduct.is-mobile-sheet-closing {
        background-color: transparent;
    }
    #modalDeleteProduct .modal-content {
        width: 100%;
        max-width: none;
        margin: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
    }
    #modalDeleteProduct.is-mobile-sheet-open .modal-content {
        transform: translateY(0);
    }
    #modalDeleteProduct .scroll-modal {
        box-sizing: border-box;
        padding: 30px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
    }
    #modalDeleteProduct .close-modal {
        top: 23px;
        right: 18px;
    }
}

/* Add product bottom sheet on mobile */
@media screen and (max-width: 768px) {
    html.product-form-page-locked,
    html.product-form-page-locked body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
    body.add-product-sheet-open {
        overflow: hidden;
    }
    #modalAddProduct {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalAddProduct.is-mobile-sheet-open {
        background-color: rgba(0, 0, 0, .58);
    }
    #modalAddProduct.is-mobile-sheet-closing {
        background-color: transparent;
    }
    #modalAddProduct .modal-content {
        width: 100%;
        max-width: none;
        max-height: var(--admin-sheet-max-height, 90dvh);
        margin: 0;
        position: absolute;
        right: 0;
        bottom: var(--admin-keyboard-inset, 0px);
        left: 0;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
    }
    #modalAddProduct.is-mobile-sheet-open .modal-content {
        transform: translateY(0);
    }
    #modalAddProduct .scroll-modal {
        max-height: var(--admin-sheet-max-height, 90dvh);
        box-sizing: border-box;
        padding: 28px 16px calc(92px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
    }
    #modalAddProduct .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    #modalAddProduct .close-modal {
        top: 23px;
        right: 18px;
    }
    #modalAddProduct #formButton {
        width: auto;
        position: fixed;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 16px;
        z-index: 10;
        margin: 0;
        box-shadow: 0 -10px 18px 8px rgba(255, 255, 255, .94);
    }
}

/* Disable sticky hover states for Products controls on touch devices */
@media screen and (max-width: 768px) {
    #products .btn-add-new button {
        min-height: 52px;
        padding: 16px 20px;
        color: #111;
        font-size: 14px;
        font-weight: 400;
        border-color: #ccc;
        background-color: #f2f2f2;
    }
}

#users .mobile-user-info-label {
    display: none;
}

#modalDetailsUserInfo .user-detail-email-edit {
    cursor: pointer;
}

#modalDetailsUserInfo .user-detail-editable-row {
    position: relative;
}

#modalDetailsUserInfo .user-detail-editable-row::after {
    content: "Tap to edit";
    position: absolute;
    right: 10px;
    bottom: 6px;
    color: #2a7ae0;
    font-size: 9px;
    line-height: 1;
    opacity: .85;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

#modalViewProductDetails .product-view-inline-edit.is-empty {
    color: #9a9a9a;
    font-style: italic;
}

@media screen and (max-width: 768px) and (hover: none) {
    #products button,
    #modalAddProduct button,
    #modalDetailsProducts button,
    #modalDeleteProduct button,
    .mobile-product-editor button {
        -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) {
#products .btn-add-new button:hover{
        color: #111;
        border-color: #ccc;
        background-color: #f2f2f2;
    }
}
    @media (hover: hover) {
#products .btn-details-tab:hover{
        color: #007bff;
        border-color: #007bff;
        background-color: transparent;
    }
}
    @media (hover: hover) {
#products .btn-delete-tab:hover{
        color: red;
        border-color: red;
        background-color: transparent;
    }
}
    @media (hover: hover) {
#modalAddProduct .btn-form:hover,
#modalDetailsProducts .btn-save-product-details:hover{
        color: #fff;
        border-color: #000;
        background-color: #000;
    }
}
    @media (hover: hover) {
#modalDeleteProduct .btn-delete-form:hover{
        color: #fff;
        border-color: #d93025;
        background-color: #d93025;
    }
}
    @media (hover: hover) {
#modalDeleteProduct .btn-cancel-form:hover,
.mobile-product-editor-cancel:hover{
        color: #111;
        border-color: #d5d5d5;
        background-color: #f2f2f2;
    }
}
    @media (hover: hover) {
.mobile-product-editor-save:hover{
        color: #fff;
        border-color: #111;
        background-color: #111;
    }
}
    #products button,
    #modalAddProduct button,
    #modalDetailsProducts button,
    #modalDeleteProduct button,
    .mobile-product-editor button {
        transition: none;
    }
}

/* Final Discounts action visibility contract:
   desktop keeps Edit, mobile uses View Details + inline bottom-sheet edits. */
@media screen and (min-width: 769px) {
    #discounts .table-tab .btn-edit-discount.btn-edit-tab {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 768px) {
    #discounts .table-tab .btn-edit-discount.btn-edit-tab {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    #modalReplyComment .modal-content {
        width: min(760px, calc(100vw - 40px)) !important;
        max-width: 760px !important;
    }

    #modalReplyComment .close-modal,
    #modalDeleteCommentEntry .close-modal {
        width: 36px !important;
        height: 36px !important;
        position: absolute !important;
        top: 16px !important;
        right: 18px !important;
        z-index: 12 !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        color: #333 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #ededed !important;
        transform: none !important;
    }

    #modalDeleteCommentEntry .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
    }

    @media (hover: hover) {
#modalReplyComment .close-modal:hover,
#modalDeleteCommentEntry .close-modal:hover{
        color: #fff !important;
        background: #111 !important;
    }
}

    #modalReplyComment #replyCommentForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    #modalReplyComment .singl-item-form {
        margin-bottom: 0 !important;
    }

    #modalReplyComment .btn-form {
        margin-top: 0 !important;
    }

    #modalReplyComment .singl-item-form {
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    #modalReplyComment .singl-item-form > label {
        border-radius: 12px 0 0 12px !important;
    }

    #modalReplyComment .comments-reply-modal-textarea {
        border-radius: 0 12px 12px 0 !important;
    }

    @media (hover: hover) {
#modalReplyComment .singl-item-form:not(:focus-within):hover .comments-reply-modal-textarea{
        box-shadow: inset 3px 0 0 #d7d7d7 !important;
    }
}

    #modalReplyComment .singl-item-form:focus-within .comments-reply-modal-textarea {
        box-shadow: inset 3px 0 0 #111 !important;
    }
}

@media screen and (max-width: 768px) {
    #modalDeleteCommentEntry {
        z-index: 6500;
        padding: 0;
        background: rgba(0, 0, 0, .58);
    }

    #modalDeleteCommentEntry .modal-content {
        width: 100% !important;
        max-width: none !important;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 16px 16px 0 0 !important;
        background: #fff;
        transform: translateY(105%);
        transition: transform .26s cubic-bezier(.22, .72, .25, 1);
    }

    #modalDeleteCommentEntry .comments-delete-sheet-handle {
        width: 64px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 8;
        display: block !important;
        padding: 0;
        cursor: grab;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        transform: translateX(-50%);
        -webkit-tap-highlight-color: transparent;
    }

    #modalDeleteCommentEntry .comments-delete-sheet-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }

    #modalDeleteCommentEntry.is-open.comments-sheet-open .modal-content,
    #modalDeleteCommentEntry.is-mobile-sheet-open .modal-content {
        transform: translateY(0) !important;
    }

    #modalDeleteCommentEntry.is-mobile-sheet-closing .modal-content {
        transform: translateY(105%) !important;
    }

    #modalDeleteCommentEntry .modal-content.is-dragging {
        transition: none !important;
    }

    #modalDeleteCommentEntry .scroll-modal {
        box-sizing: border-box;
        padding: 30px 18px calc(32px + env(safe-area-inset-bottom)) !important;
        border-radius: 16px 16px 0 0;
    }

    #modalDeleteCommentEntry .close-modal {
        display: none !important;
    }

    #modalDeleteCommentEntry h3 {
        margin: 0 0 18px !important;
        color: #111;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --admin-mobile-sheet-bottom-gap: 10px;
    }

    #modalAddProduct .scroll-modal,
    #modalDetailsProducts .scroll-modal {
        padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
    }

    #modalDeleteProduct .scroll-modal,
    #modalDeleteCategory .scroll-modal,
    #modalDeleteDiscount .scroll-modal,
    #modalDeleteAdmin .scroll-modal,
    #modalDeleteBanner .scroll-modal,
    #modalDeleteContentPage .scroll-modal,
    .modal-add.admin-generic-sheet .scroll-modal,
    .modal-add[id^="modalEdit"] .scroll-modal {
        padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-product-editor-sheet,
    .mobile-product-images-sheet,
    .mobile-comment-reply-sheet,
    .mobile-product-gallery-sheet {
        padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    }

}

@media screen and (min-width: 769px) {
    #comments .table-tab {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        overflow-x: auto;
    }

    #comments .table-tab table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
    }

    #comments .table-tab :is(.tr-head, tbody tr) > td {
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        padding: 15px 10px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #comments .table-tab :is(.tr-head, tbody tr) > td:first-child {
        width: 5%;
        padding-left: 15px;
    }

    #comments .table-tab[data-content="comment_post"] :is(.tr-head, tbody tr) > td:nth-child(2) {
        width: 18%;
    }

    #comments .table-tab[data-content="comment_post"] :is(.tr-head, tbody tr) > td:nth-child(3) {
        width: 12%;
    }

    #comments .table-tab[data-content="comment_post"] :is(.tr-head, tbody tr) > td:nth-child(4) {
        width: 18%;
    }

    #comments .table-tab[data-content="comment_post"] :is(.tr-head, tbody tr) > td:nth-child(5) {
        width: 9%;
    }

    #comments .table-tab[data-content="comment_post"] :is(.tr-head, tbody tr) > td:nth-child(6) {
        width: 14%;
    }

    #comments .table-tab[data-content="review_product"] :is(.tr-head, tbody tr) > td:nth-child(2) {
        width: 18%;
    }

    #comments .table-tab[data-content="review_product"] :is(.tr-head, tbody tr) > td:nth-child(3) {
        width: 12%;
    }

    #comments .table-tab[data-content="review_product"] :is(.tr-head, tbody tr) > td:nth-child(4) {
        width: 18%;
    }

    #comments .table-tab[data-content="review_product"] :is(.tr-head, tbody tr) > td:nth-child(5) {
        width: 9%;
    }

    #comments .table-tab[data-content="review_product"] :is(.tr-head, tbody tr) > td:nth-child(6) {
        width: 14%;
    }

    #comments .table-tab :is(.tr-head, tbody tr) > td:nth-last-child(2) {
        width: 12%;
    }

    #comments .table-tab :is(.tr-head, tbody tr) > td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        padding-right: 15px;
        padding-left: 15px;
    }

    #comments .table-tab tbody tr > td:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    #comments .table-tab tbody tr > td:last-child > button {
        margin-right: 0;
        margin-left: 0;
    }

    #comments .table-tab .product-tab {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    #comments .table-tab .comments-product-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 0;
    }

    #comments .table-tab .comments-product-preview img {
        width: 60px;
        height: 60px;
        flex: 0 0 60px;
        display: block;
        object-fit: cover;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

}

@media screen and (max-width: 768px) {
    #modalReplyComment {
        display: none !important;
    }

    #comments .table-tab {
        overflow: visible;
    }

    #comments .table-tab table,
    #comments .table-tab tbody {
        display: block;
        width: 100%;
    }

    #comments .table-tab .tr-head {
        display: none;
    }

    #comments .table-tab tbody tr {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 12px;
        padding: 10px 9px 12px;
        border: 1px solid #e2e2e2;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .05);
        align-items: start;
        column-gap: 10px;
        row-gap: 5px;
    }

    #comments .table-tab[data-content="comment_post"] tbody tr {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    #comments .table-tab[data-content="review_product"] tbody tr {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    #comments .table-tab tbody tr > td {
        display: flex;
        min-width: 0;
        width: auto;
        max-width: none;
        height: auto;
        box-sizing: border-box;
        padding: 0;
        text-align: center;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    #comments .comments-id-cell {
        display: none !important;
        color: #555;
        font-size: 12px;
    }

    #comments .product-tab {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    #comments .comments-user-cell {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start !important;
        color: #222;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #comments .table-tab[data-content="comment_post"] :is(.comment-status, .status-review) {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start !important;
    }

    #comments .table-tab[data-content="review_product"] .comments-rating-cell {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-content: flex-start !important;
        color: #c78b00;
        font-size: 12px;
    }

    #comments .table-tab[data-content="review_product"] .status-review {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start !important;
    }

    #comments .comments-actions-cell {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        align-items: stretch !important;
        justify-content: flex-start !important;
        justify-self: end;
        align-self: start;
        width: 82px !important;
    }

    #comments .comments-actions-cell > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 4px 6px;
        font-size: 11px;
        line-height: 1.15;
    }

    #comments .comments-product-preview {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #comments .comments-product-preview img {
        width: 68px;
        height: 68px;
        display: block;
        object-fit: cover;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    #comments .link-replay {
        display: none !important;
    }

    #comments :is(.comment-status, .status-review) {
        font-size: 11px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    #comments .comments-user-cell::before,
    #comments :is(.comment-status, .status-review)::before,
    #comments .comments-rating-cell::before {
        flex: 0 0 auto;
        margin-right: 6px;
        color: #777;
        font-size: 10px;
        line-height: 1.25;
        text-transform: none;
    }

    #comments .comments-user-cell::before {
        content: "username:";
    }

    #comments :is(.comment-status, .status-review)::before {
        content: "status:";
    }

    #comments .comments-rating-cell::before {
        content: "rating:";
    }

    #comments .comments-text-cell,
    #comments .comments-reply-cell,
    #comments .comments-date-cell {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
        text-align: left;
        border-radius: 12px;
        background: #f7f7f7;
        color: #333;
        font-size: 12px;
        line-height: 1.55;
        padding: 8px 10px !important;
        overflow-wrap: anywhere;
    }

    #comments .comments-reply-cell {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #comments .comments-reply-cell:not(.is-replied)::after {
        content: "Tap to reply";
        margin-left: auto;
        padding-left: 10px;
        color: #e58a2b;
        font-size: 10px;
        white-space: nowrap;
    }

    #comments .comments-reply-cell.is-replied {
        cursor: default;
        color: #444;
    }

    #comments .comments-text-cell::before,
    #comments .comments-reply-cell::before,
    #comments .comments-date-cell::before {
        flex: 0 0 auto;
        margin-right: 8px;
        color: #777;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    #comments .comments-text-cell::before {
        content: "Comment";
    }

    #comments .comments-reply-cell::before {
        content: "Reply";
    }

    #comments .comments-date-cell::before {
        content: "Date";
    }

    #comments .table-tab[data-content="review_product"] .comments-reply-cell {
        display: none;
    }

    body.mobile-comment-reply-open {
        overflow: hidden;
    }

    .mobile-comment-reply-editor {
        position: fixed;
        inset: 0;
        z-index: 7000;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    .mobile-comment-reply-editor.active,
    .mobile-comment-reply-editor.closing {
        visibility: visible;
    }

    .mobile-comment-reply-editor.active {
        pointer-events: auto;
    }

    .mobile-comment-reply-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, .58);
    }

    .mobile-comment-reply-editor.closing .mobile-comment-reply-backdrop {
        background: transparent;
    }

    .mobile-comment-reply-sheet {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        padding: 28px 16px calc(14px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(105%);
        transition: transform .26s cubic-bezier(.22, .72, .25, 1);
    }

    .mobile-comment-reply-editor.active .mobile-comment-reply-sheet {
        transform: translateY(0);
    }

    .mobile-comment-reply-sheet.is-dragging {
        transition: none !important;
    }

    .mobile-comment-reply-handle {
        width: 64px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        padding: 0;
        border: 0;
        background: transparent;
        transform: translateX(-50%);
    }

    .mobile-comment-reply-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 10px;
        left: 50%;
        border-radius: 999px;
        background: #d6d6d6;
        transform: translateX(-50%);
    }

    .mobile-comment-reply-header h4 {
        margin: 0 0 18px;
        color: #111;
        font-size: 15px;
        font-weight: 500;
    }

    .mobile-comment-reply-label {
        display: block;
        margin-bottom: 8px;
        color: #555;
        font-size: 12px;
    }

    .mobile-comment-reply-textarea {
        width: 100%;
        min-height: 118px;
        box-sizing: border-box;
        padding: 12px;
        color: #222;
        font-size: 13px;
        line-height: 1.6;
        resize: vertical;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 12px;
        background: #f7f7f7;
    }

    .mobile-comment-reply-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .mobile-comment-reply-actions button {
        height: 40px;
        border-radius: 10px;
        font-size: 12px;
        cursor: pointer;
    }

    .mobile-comment-reply-cancel {
        color: #555;
        border: 1px solid #ccc;
        background: #fff;
    }

    .mobile-comment-reply-save {
        color: #fff;
        border: 1px solid #111;
        background: #111;
    }
}

@media screen and (max-width: 768px) {
    #modalDeleteCommentEntry.comments-delete-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 6500 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, .58) !important;
    }

    #modalDeleteCommentEntry.comments-delete-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important;
        background: #fff !important;
        transform: translate3d(0, 105%, 0) !important;
        transition: transform .28s cubic-bezier(.22, .72, .25, 1) !important;
        will-change: transform;
    }

    #modalDeleteCommentEntry.comments-delete-modal.is-mobile-sheet-open .modal-content,
    #modalDeleteCommentEntry.comments-delete-modal.comments-sheet-open .modal-content {
        transform: translate3d(0, 0, 0) !important;
    }

    #modalDeleteCommentEntry.comments-delete-modal.is-mobile-sheet-closing .modal-content {
        transform: translate3d(0, 105%, 0) !important;
    }

    #modalDeleteCommentEntry.comments-delete-modal .modal-content.is-dragging {
        transition: none !important;
    }

    #modalDeleteCommentEntry.comments-delete-modal .comments-delete-sheet-handle {
        width: 100% !important;
        height: 30px !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 20 !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        transform: none !important;
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #modalDeleteCommentEntry.comments-delete-modal .comments-delete-sheet-handle::after {
        content: "";
        width: 38px !important;
        height: 4px !important;
        position: absolute !important;
        top: 10px !important;
        left: 50% !important;
        border-radius: 999px !important;
        background: #bdbdbd !important;
        transform: translateX(-50%) !important;
    }
}

/* Discount delete modal: match Product delete sizing and touch behavior. */
@media screen and (min-width: 769px) {
    #modalDeleteDiscount .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
    }
}
@media screen and (max-width: 768px) and (hover: none) {
    #modalDeleteDiscount .btn-delete-form:focus:not(:focus-visible){
        color: #fff;
        border-color: #d93025;
        background-color: #d93025;
        box-shadow: none;
    }
@media (hover: hover) {
#modalDeleteDiscount .btn-delete-form:hover{
        color: #fff;
        border-color: #d93025;
        background-color: #d93025;
        box-shadow: none;
    }
}
}

/* Shared mobile Edit forms, matching the Add New bottom sheets. */
@media screen and (max-width: 768px) {
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) :is(.form-modal, .form-tab) {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) :is(.form-modal, .form-tab) > form,
    #modalDetailsProducts .product-details-form {
        display: block;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .form-row {
        display: block;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        width: 100%;
        min-width: 0;
        margin: 0 0 12px;
        display: grid;
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px !important;
        background: #fff;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 11px 10px;
        color: #333;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.35;
        border: 0;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea) {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 11px 10px;
        color: #222;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        transition: background-color .16s ease, box-shadow .16s ease;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > textarea {
        min-height: 100px;
        resize: vertical;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea):focus,
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .custom-select-wrapper:focus-within {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) :is(select, option) {
        color: #333;
        -webkit-text-fill-color: #333;
        background-color: #fff;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .scroll-modal {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.btn-form, .btn-submit-form, .btn-change-status, .btn-save-product-details) {
        width: 100%;
        min-height: 48px;
        position: sticky;
        bottom: 0;
        z-index: 7;
        box-sizing: border-box;
        margin: 6px 0 0;
        padding: 12px 18px;
        color: #fff;
        border: 1px solid #111;
        border-radius: 10px;
        background: #111;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
:is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):hover{
        border-color: #d8d8d8;
        box-shadow: none;
    }
}
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    @media (hover: hover) {
:is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.btn-form, .btn-submit-form, .btn-change-status, .btn-save-product-details):hover{
        color: #fff;
        border-color: #111;
        background: #111;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
}
}

/* Shared desktop Edit forms, matching the Add New form language. */
@media screen and (min-width: 769px) {
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) {
        padding: 34px 20px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .62);
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .modal-content {
        width: min(880px, calc(100vw - 40px));
        max-width: 880px;
        max-height: calc(100dvh - 68px);
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 18px;
        background: #f7f7f7;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .scroll-modal {
        max-height: calc(100dvh - 68px);
        box-sizing: border-box;
        padding: 0 28px 26px;
        overflow-y: auto;
        border-radius: 18px;
        background: #f7f7f7;
        scrollbar-width: thin;
        scrollbar-color: #bbb transparent;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .scroll-modal > h4 {
        position: sticky;
        top: 0;
        z-index: 6;
        margin: 0 -28px 22px;
        padding: 24px 68px 19px 28px;
        color: #171717;
        font-size: 20px;
        line-height: 1.25;
        border-bottom: 1px solid #dedede;
        background: rgba(247, 247, 247, .96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .close-modal {
        width: 36px;
        height: 36px;
        position: fixed;
        top: 50px;
        right: max(calc((100vw - 880px) / 2 + 34px), 34px);
        z-index: 12;
        display: grid;
        place-items: center;
        padding: 0;
        color: #333;
        font-size: 24px;
        line-height: 1;
        border: 0;
        border-radius: 50%;
        background: #ededed;
        transition: color .16s ease, background-color .16s ease;
    }
    @media (hover: hover) {
:is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .close-modal:hover{
        color: #fff;
        background: #111;
    }
}
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) :is(.form-modal, .form-tab) > form,
    #modalDetailsProducts .product-details-form {
        display: block;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) .form-row {
        display: block;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        width: 100%;
        min-width: 0;
        margin: 0 0 14px;
        display: grid;
        grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px !important;
        background: #fff;
        transition: border-color .16s ease, box-shadow .16s ease;
    }
    @media (hover: hover) {
:is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):hover{
        border-color: #c9c9c9;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }
}
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):focus-within {
        position: relative;
        z-index: 2;
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 12px 14px;
        color: #333;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        border: 0;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 12px 14px;
        color: #222;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        transition: background-color .16s ease, box-shadow .16s ease;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > textarea {
        min-height: 110px;
        resize: vertical;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea):focus {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts) :is(select, option) {
        color: #333;
        -webkit-text-fill-color: #333;
        background-color: #fff;
    }
    :is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.btn-form, .btn-submit-form, .btn-change-status, .btn-save-product-details) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin-top: 4px;
        padding: 12px 18px;
        color: #fff;
        cursor: pointer;
        border: 1px solid #111;
        border-radius: 10px;
        background: #111;
        box-shadow: none;
        transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    }
    @media (hover: hover) {
:is(.modal-add[id^="modalEdit"], #modalDetailsProducts)
    :is(.btn-form, .btn-submit-form, .btn-change-status, .btn-save-product-details):hover{
        color: #111;
        border-color: #ccc;
        border-radius: 10px;
        background: #f2f2f2;
        box-shadow: none;
    }
}
    #modalDetailsProducts .editable-form-note {
        margin: -10px 0 18px;
        color: #707070;
    }
}

/* Categories: use a dedicated Edit bottom sheet on mobile. */
.mobile-category-edit {
    display: none;
}

.mobile-category-view-details {
    display: none;
}

@media screen and (min-width: 769px) {
    #categories .mobile-category-edit {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    #categories .mobile-category-edit {
        display: none !important;
    }
    #categories .mobile-category-view-details {
        display: flex !important;
    }
    #categories .category-row .editable-select {
        pointer-events: none;
    }
    #categories .category-row .editable-text[data-field="name"],
    #categories .category-row .editable-text[data-field="slug"],
    #categories .editable-category-image {
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }
    #modalEditCategory :is(.form-modal, #editCategoryForm) {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    #modalEditCategory #editCategoryForm {
        display: block;
    }
    #modalEditCategory :is(.item-form, .singl-item-form) {
        width: 100%;
        min-width: 0;
        margin: 0 0 12px;
        display: grid;
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px;
        background: #fff;
    }
    #modalEditCategory :is(.item-form, .singl-item-form) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 11px 10px;
        color: #333;
        font-size: 11px;
        line-height: 1.35;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    #modalEditCategory :is(.item-form, .singl-item-form) > :is(input, select) {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 11px 10px;
        color: #222;
        font-size: 16px;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
    #modalEditCategory :is(.item-form, .singl-item-form):focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    #modalEditCategory :is(.item-form, .singl-item-form) > :is(input, select):focus {
        box-shadow: inset 3px 0 0 #111;
    }
    #modalEditCategory .btn-form {
        width: 100%;
        min-height: 48px;
        position: sticky;
        bottom: 0;
        z-index: 7;
        box-sizing: border-box;
        margin: 6px 0 0;
        color: #fff;
        border: 1px solid #111;
        border-radius: 10px;
        background: #111;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
    #modalDetailsCategory .category-detail-editable-row {
        position: relative;
    }
    #modalDetailsCategory .category-detail-inline-edit {
        cursor: pointer;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }
    #modalDetailsCategory .category-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
#modalEditCategory .btn-form:hover{
        color: #fff;
        border-color: #111;
        background: #111;
    }
}
}

/* Mobile Add/Edit field order for Products, Categories and Discounts. */
@media screen and (max-width: 768px) {
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) {
        display: flex !important;
        flex-direction: column;
    }
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) > .form-row {
        display: contents !important;
    }
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        order: 10;
    }
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):has(> select) {
        order: 20;
    }
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):has(
        input[type="file"],
        .product-image-picker,
        .category-image-picker,
        .custom-select-wrapper
    ) {
        order: 30;
    }
    :is(
        #FormAdd,
        #modalDetailsProducts .product-details-form,
        #addCategoryForm,
        #editCategoryForm,
        #addDiscountForm,
        #editDiscountForm
    ) > :is(.btn-form, .btn-save-product-details) {
        order: 100;
    }

}

/* Final height contract for long mobile add/edit forms. */
@media screen and (max-width: 768px) {
    html.admin-native-keyboard-settling :is(
        #modalAddProduct,
        #modalDetailsProducts,
        #modalAddCategory,
        #modalEditCategory,
        #modalAddDiscount,
        #modalEditDiscount
    ) .modal-content,
    html.admin-native-keyboard-settling :is(
        #modalAddProduct #formButton,
        #modalDetailsProducts .btn-save-product-details,
        #modalAddCategory .btn-form,
        #modalEditCategory .btn-form,
        #modalAddDiscount .btn-form,
        #modalEditDiscount .btn-form
    ) {
        transition: none !important;
    }
    .modal-add.admin-tall-form-sheet .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
    }
    .modal-add.admin-tall-form-sheet .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile modal selects keep the text keyboard open via a custom trigger. */
.admin-mobile-select-trigger,
.admin-mobile-select-menu {
    display: none;
}

/* The mobile trigger wraps selects in the DOM; preserve their existing
   desktop row appearance while keeping the trigger itself mobile-only. */
@media screen and (min-width: 769px) {
    .modal-add .admin-mobile-select-control {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        display: block;
        align-self: stretch;
        box-sizing: border-box;
        margin: 0;
        background: #fff;
    }

    .modal-add .admin-mobile-select-control > select {
        width: 100% !important;
        min-height: 48px !important;
        display: block !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 12px 14px;
        color: #222;
        outline: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
    }
}

@media screen and (max-width: 768px) {
    .modal-add .admin-mobile-select-control {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        align-self: stretch;
    }
    .modal-add .admin-mobile-select-control > select {
        width: 1px !important;
        height: 1px !important;
        min-height: 0 !important;
        position: absolute !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .modal-add .admin-mobile-select-trigger {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 11px 32px 11px 10px;
        position: relative;
        color: #222;
        font: inherit;
        font-size: 16px;
        line-height: 1.35;
        text-align: left;
        border: 0;
        border-radius: 0;
        background: #fff;
        -webkit-tap-highlight-color: transparent;
    }
    .modal-add .admin-mobile-select-trigger::after {
        content: "⌄";
        position: absolute;
        right: 11px;
        color: #666;
        font-size: 17px;
        line-height: 1;
    }
    .admin-mobile-select-menu {
        max-height: 220px;
        position: fixed;
        z-index: 12000;
        display: none;
        box-sizing: border-box;
        padding: 5px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid #c8c8c8;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
        -webkit-overflow-scrolling: touch;
    }
    .admin-mobile-select-menu.open {
        display: grid;
    }
    .admin-mobile-select-menu.admin-mobile-product-options {
        height: auto;
        max-height: min(62dvh, 520px);
        gap: 2px;
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: none !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .admin-mobile-select-menu.admin-mobile-date-options {
        height: auto;
        max-height: min(62dvh, 520px);
        gap: 2px;
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: none !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .admin-mobile-select-option {
        width: 100%;
        min-height: 42px;
        box-sizing: border-box;
        padding: 9px 11px;
        color: #222;
        font-size: 13px;
        line-height: 1.35;
        text-align: left;
        border: 0;
        border-radius: 8px;
        background: #fff;
        -webkit-tap-highlight-color: transparent;
    }
    .admin-mobile-select-option.selected {
        background: #ededed;
    }
    .admin-mobile-product-options .admin-mobile-select-option {
        min-height: 56px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px;
    }
    .admin-mobile-product-options .admin-mobile-select-option img {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: block;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #f3f3f3;
    }
    .admin-mobile-product-options .admin-mobile-select-option span {
        min-width: 0;
        overflow: hidden;
        color: #222;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-mobile-select-option:disabled {
        color: #999;
    }
}

@media screen and (max-width: 768px) {
    /* Keep only Image, Title, Slug and Actions in the mobile Categories table. */
    #categories .table-tab :is(th, td):nth-child(5),
    #categories .table-tab :is(th, td):nth-child(6),
    #categories .table-tab :is(th, td):nth-child(7) {
        display: none;
    }
    #categories .table-tab table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }
    #categories .table-tab :is(th, td):nth-child(1) {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
    }
    #categories .table-tab :is(th, td):nth-child(2) {
        width: 70px;
    }
    #categories .table-tab :is(th, td):nth-child(3),
    #categories .table-tab :is(th, td):nth-child(4) {
        width: auto;
        min-width: 0;
    }
    #categories .table-tab :is(th, td):nth-child(8) {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
    }
    #categories .table-tab tbody td {
        height: 82px;
        padding-right: 6px;
        padding-left: 6px;
    }
    #categories .table-tab img {
        width: 58px;
        height: 58px;
    }
    #categories .editable-text {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 4px;
        white-space: nowrap;
    }

    .mobile-category-image-picker {
        min-height: 86px;
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        box-sizing: border-box;
        padding: 10px;
        overflow: hidden;
        color: #555;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid #c8c8c8;
        border-radius: 10px;
        background: #f2f2f2;
    }
    #mobileCategoryImagePreview {
        width: 66px;
        height: 66px;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border: 1px solid #d2d2d2;
        border-radius: 10px;
        background: #fff;
    }
    #mobileCategoryImageFileName {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #mobileCategoryImageInput {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

/* Prevent iOS input auto-zoom and horizontal sheet jumps while the keyboard opens. */
@media screen and (max-width: 768px) {
    :is(#modalAddCategory, #modalAddDiscount) .modal-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        right: 0;
        left: 0;
        margin-right: 0;
        margin-left: 0;
        translate: 0 0;
    }
    :is(#modalAddCategory, #modalAddDiscount) .scroll-modal {
        overflow-x: hidden;
    }
    :is(#modalAddCategory, #modalAddDiscount) :is(input, select, textarea, .custom-select-trigger) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
    html.admin-keyboard-closing :is(#modalAddCategory, #modalAddDiscount) .modal-content,
    :is(#modalAddCategory, #modalAddDiscount):focus-within .modal-content {
        right: 0;
        left: 0;
        transform: translate3d(0, 0, 0);
        transition: none !important;
    }
}

/* Content-sized Add New bottom sheets with a sticky save action on long forms. */
@media screen and (max-width: 768px) {
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) .modal-content {
        height: auto;
        max-height: min(90dvh, calc(100dvh - var(--admin-keyboard-inset, 0px)));
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) .scroll-modal {
        height: auto;
        max-height: min(90dvh, calc(100dvh - var(--admin-keyboard-inset, 0px)));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.btn-form, .btn-submit-form) {
        width: 100%;
        min-height: 48px;
        position: sticky;
        right: auto;
        bottom: calc(4px + env(safe-area-inset-bottom));
        left: auto;
        z-index: 10;
        box-sizing: border-box;
        margin: 6px 0 0;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
    #modalAddProduct #formButton {
        width: 100%;
        position: sticky;
        right: auto;
        bottom: calc(4px + env(safe-area-inset-bottom));
        left: auto;
        margin: 6px 0 0;
    }

    /* visualViewport already accounts for the keyboard in this variable.
       Do not subtract the keyboard inset a second time on these sheets. */
    :is(#modalAddCategory, #modalAddDiscount) .modal-content,
    :is(#modalAddCategory, #modalAddDiscount) .scroll-modal {
        max-height: var(--admin-sheet-max-height, 82dvh);
    }
}

/* Desktop Add New row hover: pair the row shadow with the subtle grey field line. */
@media screen and (min-width: 769px) and (hover: hover) {
    :is(
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):not(:focus-within):hover
    :is(input, select, textarea, .category-image-picker, .custom-select-wrapper) {
        background: #fff;
        box-shadow: inset 3px 0 0 #d7d7d7;
    }
}

/* Keep desktop Products modal shell above the older generic modal rules. */
@media screen and (min-width: 769px) {
    #modalAddProduct .modal-content,
    #modalDetailsProducts .modal-content,
    #modalDeleteProduct .modal-content {
        width: min(880px, calc(100vw - 40px));
        max-width: 880px;
        max-height: calc(100dvh - 68px);
        margin: 0 auto;
        border-radius: 18px;
    }
    #modalAddProduct .scroll-modal,
    #modalDetailsProducts .scroll-modal,
    #modalDeleteProduct .scroll-modal {
        max-height: calc(100dvh - 68px);
        padding: 0 28px 26px;
        border-radius: 18px;
    }
    #modalAddProduct .close-modal,
    #modalDetailsProducts .close-modal,
    #modalDeleteProduct .close-modal {
        top: 50px;
        right: max(calc((100vw - 880px) / 2 + 34px), 34px);
    }
    #modalDeleteProduct {
        padding: 34px 20px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .62);
    }
    #modalDeleteProduct .modal-content {
        width: min(520px, calc(100vw - 40px));
        max-width: 520px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .7);
        background: #f7f7f7;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    }
    #modalDeleteProduct .scroll-modal {
        box-sizing: border-box;
        background: #f7f7f7;
    }
    #modalDeleteProduct .scroll-modal > h3 {
        margin: 0 -28px 20px;
        padding: 24px 68px 19px 28px;
        color: #171717;
        font-size: 20px;
        line-height: 1.25;
        border-bottom: 1px solid #dedede;
        background: #f7f7f7;
    }
    #modalDeleteProduct .close-modal {
        width: 36px;
        height: 36px;
        position: fixed;
        z-index: 12;
        display: grid;
        place-items: center;
        color: #333;
        font-size: 24px;
        line-height: 1;
        border-radius: 50%;
        background: #ededed;
        transition: color .16s ease, background-color .16s ease;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px);
    }
    @media (hover: hover) {
#modalDeleteProduct .close-modal:hover{
        color: #fff;
        background: #111;
    }
}
    #modalDeleteDiscount {
        padding: 34px 20px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .62);
    }
    #modalDeleteDiscount .modal-content {
        width: min(520px, calc(100vw - 40px));
        max-width: 520px;
        max-height: calc(100dvh - 68px);
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 18px;
        background: #f7f7f7;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    }
    #modalDeleteDiscount .scroll-modal {
        max-height: calc(100dvh - 68px);
        box-sizing: border-box;
        padding: 0 28px 26px;
        overflow-y: auto;
        border-radius: 18px;
        background: #f7f7f7;
    }
    #modalDeleteDiscount .scroll-modal > h3 {
        margin: 0 -28px 20px;
        padding: 24px 68px 19px 28px;
        color: #171717;
        font-size: 20px;
        line-height: 1.25;
        border-bottom: 1px solid #dedede;
        background: #f7f7f7;
    }
    #modalDeleteDiscount .close-modal {
        width: 36px;
        height: 36px;
        position: fixed;
        top: 50px;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px);
        z-index: 12;
        display: grid;
        place-items: center;
        color: #333;
        font-size: 24px;
        line-height: 1;
        border-radius: 50%;
        background: #ededed;
        transition: color .16s ease, background-color .16s ease;
    }
    @media (hover: hover) {
#modalDeleteDiscount .close-modal:hover{
        color: #fff;
        background: #111;
    }
}
}

@media screen and (max-width: 768px) {
    #modalAddProduct .product-image-picker-preview {
        display: none;
    }
    .mobile-sheet-drag-handle,
    .mobile-product-images-handle {
        width: 100%;
        height: 30px;
        right: 0;
        left: 0;
        transform: none;
    }
    .mobile-product-editor-handle {
        width: calc(100% + 36px);
        height: 30px;
        margin: -10px -18px 4px;
    }
    .mobile-sheet-drag-handle::after,
    .mobile-product-images-handle::after,
    .mobile-product-editor-handle::after {
        width: 38px;
        height: 4px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Shared admin tab language: Products, Orders and the remaining management tabs */
.content-dashboard .tab-content:not(#dashboard) .item-tab {
    background: #fff;
    box-shadow: none;
}

@media screen and (min-width: 769px) {
    .content-dashboard .tab-content:not(#dashboard) .table-tab thead td,
    .content-dashboard .tab-content:not(#dashboard) .table-tab .tr-head td {
        border-right: 0;
        border-left: 0;
    }
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) {
        box-sizing: border-box;
        padding: 34px 20px;
        background: rgba(0, 0, 0, .62);
    }
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .modal-content {
        width: min(760px, calc(100vw - 40px));
        max-width: 760px;
        max-height: calc(100dvh - 68px);
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 18px;
        background: #f7f7f7;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    }
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .scroll-modal {
        max-height: calc(100dvh - 68px);
        box-sizing: border-box;
        padding: 0 28px 28px;
        overflow-y: auto;
        border-radius: 18px;
        background: #f7f7f7;
        scrollbar-width: thin;
        scrollbar-color: #bbb transparent;
    }
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .scroll-modal > h3,
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .scroll-modal > h4 {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 -28px 22px;
        padding: 24px 68px 19px 28px;
        color: #171717;
        font-size: 20px;
        line-height: 1.25;
        border-bottom: 1px solid #dedede;
        background: rgba(247, 247, 247, .96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .close-modal {
        width: 36px;
        height: 36px;
        position: fixed;
        top: 50px;
        right: max(calc((100vw - 760px) / 2 + 34px), 34px);
        z-index: 12;
        display: grid;
        place-items: center;
        padding: 0;
        color: #333;
        font-size: 24px;
        line-height: 1;
        border: 0;
        border-radius: 50%;
        background: #ededed;
        transition: color .16s ease, background-color .16s ease;
    }
    @media (hover: hover) {
.modal-add:not(#modalAddProduct):not(#modalDetailsProducts):not(#modalDeleteProduct):not(#modalReplyComment):not(#modalDeleteCommentEntry) .close-modal:hover{
        color: #fff;
        background: #111;
    }
}
    #modalDeleteCategory .modal-content,
    #modalDeleteDiscount .modal-content,
    #modalDeleteAdmin .modal-content {
        width: min(520px, calc(100vw - 40px));
        max-width: 520px;
    }
    #modalDeleteCategory .close-modal,
    #modalDeleteDiscount .close-modal,
    #modalDeleteAdmin .close-modal {
        right: max(calc((100vw - 520px) / 2 + 34px), 34px);
    }
    .modal-add.admin-generic-sheet .form-row {
        display: block;
    }
    .modal-add.admin-generic-sheet .item-form,
    .modal-add.admin-generic-sheet .singl-item-form,
    .modal-add.admin-generic-sheet .item-form-row,
    .modal-add.admin-generic-sheet .singl-item-form-row {
        width: 100%;
        min-width: 0;
        margin: -1px 0 0;
        display: grid;
        grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 0;
        background: #fff;
    }
    .modal-add.admin-generic-sheet .item-form:first-child,
    .modal-add.admin-generic-sheet .item-form-row:first-child {
        margin-top: 0;
    }
    .modal-add.admin-generic-sheet :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 12px 14px;
        color: #333;
        font-size: 12px;
        line-height: 1.4;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    .modal-add.admin-generic-sheet :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        color: #222;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
}

@media screen and (max-width: 768px) {
    .content-dashboard .tab-content:not(#dashboard) .item-tab {
        padding-right: 0;
        padding-left: 0;
        border-radius: 0;
    }
    .content-dashboard .tab-content:not(#dashboard) .title-tab,
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab > .row-between,
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab > .row-tab,
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab > .list-tab,
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab > .btn-add-new,
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab > .con-add-new,
    #orders > .widget-tab > .item-tab > .search-pannel {
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
        margin-left: 0;
    }
    .content-dashboard .tab-content:not(#dashboard) .search-pannel,
    .content-dashboard .tab-content:not(#dashboard) .btn-add-new,
    .content-dashboard .tab-content:not(#dashboard) .btn-add-new button,
    .content-dashboard .tab-content:not(#dashboard) .button-form {
        width: 100%;
        box-sizing: border-box;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-right: 0;
        margin-left: 0;
        overflow-x: auto;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab table {
        box-sizing: border-box;
    }
    .modal-add.admin-generic-sheet {
        z-index: 6500;
        padding: 0;
        pointer-events: auto;
        background: rgba(0, 0, 0, .58);
    }
    .modal-add.admin-generic-sheet.admin-sheet-closing {
        background: transparent;
    }
    .modal-add.admin-generic-sheet .modal-content {
        width: 100%;
        max-width: none;
        max-height: var(--admin-sheet-max-height, 90dvh);
        position: absolute;
        right: 0;
        bottom: var(--admin-keyboard-inset, 0px);
        left: 0;
        margin: 0;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
    }
    .modal-add.admin-generic-sheet.admin-sheet-open .modal-content {
        transform: translateY(0);
    }
    .modal-add.admin-generic-sheet .scroll-modal {
        max-height: var(--admin-sheet-max-height, 90dvh);
        box-sizing: border-box;
        padding: 30px 16px calc(22px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        background: #fff;
        -webkit-overflow-scrolling: touch;
    }
    .modal-add.admin-generic-sheet .close-modal {
        display: none !important;
    }
    .admin-generic-sheet-handle {
        width: 100%;
        height: 30px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        padding: 0;
        cursor: grab;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
    }
    .admin-generic-sheet-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }
    .modal-add.admin-generic-sheet .modal-content.is-dragging {
        transition: none;
    }
    .content-dashboard .tab-content:not(#dashboard) .highlight-row {
        animation: none;
        background-color: #fff9c4 !important;
        transition: none;
    }
}

/* Product page mobile gallery bottom sheet */
.mobile-product-gallery {
    display: none;
}

@media screen and (max-width: 768px) {
    body.mobile-product-gallery-open {
        overflow: hidden;
    }
    .product-details #main-image img,
    .product-details .thumnail-item img {
        cursor: pointer;
    }
    .product-details .expand,
    .product-details #lightbox {
        display: none !important;
    }
    .mobile-product-gallery {
        position: fixed;
        inset: 0;
        z-index: 6000;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-product-gallery.active,
    .mobile-product-gallery.closing {
        visibility: visible;
    }
    .mobile-product-gallery.active {
        pointer-events: auto;
    }
    .mobile-product-gallery-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, .58);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery.closing .mobile-product-gallery-backdrop {
        background: transparent;
    }
    .mobile-product-gallery-sheet {
        max-height: 82dvh;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        padding: 28px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-product-gallery.active .mobile-product-gallery-sheet {
        transform: translateY(0);
    }
    .mobile-product-gallery-sheet.is-dragging {
        transition: none;
    }
    .mobile-product-gallery-handle {
        width: 64px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 5;
        padding: 0;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        transform: translateX(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }
    .mobile-product-gallery-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }
    .mobile-product-gallery-header span {
        display: block;
        margin-bottom: 3px;
        color: #888;
        font-size: 11px;
    }
    .mobile-product-gallery-header h4 {
        max-width: calc(100vw - 90px);
        margin: 0;
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-product-gallery-zoom-hint {
        margin: -7px 0 10px;
        color: #777;
        font-size: 10px;
    }
    .mobile-product-gallery-close {
        width: 34px;
        height: 34px;
        padding: 0;
        color: #111;
        font-size: 25px;
        line-height: 1;
        border: 0;
        background: transparent;
    }
    .mobile-product-gallery-track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
        background: transparent;
    }
    .mobile-product-gallery-slide {
        min-width: 0;
        aspect-ratio: 1 / 1.05;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        isolation: isolate;
        cursor: pointer;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        background: #f2f2f2;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery-slide img {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        z-index: 1;
        object-fit: cover;
        user-select: none;
        transform-origin: center;
        -webkit-user-drag: none;
    }
    .mobile-product-gallery-thumbnails {
        display: none;
    }
    .mobile-product-gallery-thumbnails button {
        aspect-ratio: 1 / 1;
        padding: 3px;
        overflow: hidden;
        border: 1px solid #dedede;
        border-radius: 9px;
        background: #f2f2f2;
        transition: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery-thumbnails button.active {
        border-color: #111;
        background: #fff;
    }
    .mobile-product-gallery-thumbnails img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 6px;
    }
    .mobile-product-gallery-viewer {
        position: fixed;
        inset: 0;
        z-index: 7000;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-product-gallery-viewer.active {
        visibility: visible;
        pointer-events: auto;
    }
    .mobile-product-gallery-viewer-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, .8);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery-viewer-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;
    }
    .mobile-product-gallery-viewer-close {
        position: absolute;
        bottom: max(18px, env(safe-area-inset-bottom));
        left: 50%;
        z-index: 2;
        padding: 7px 14px;
        color: #fff;
        font-size: 11px;
        border: 0;
        border-radius: 999px;
        background: rgba(0, 0, 0, .48);
        transform: translateX(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-gallery-viewer-stage {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        touch-action: none;
        border-radius: 0;
        background: transparent;
    }
    .mobile-product-gallery-viewer-track {
        width: 100%;
        height: 100%;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-product-gallery-viewer-track::-webkit-scrollbar {
        display: none;
    }
    .mobile-product-gallery-viewer-track.is-zoomed {
        overflow: hidden;
        scroll-snap-type: none;
        touch-action: none;
    }
    .mobile-product-gallery-viewer-track.is-loop-resetting {
        scroll-snap-type: none;
    }
    .mobile-product-gallery-viewer-slide {
        min-width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        scroll-snap-align: center;
    }
    .mobile-product-gallery-viewer-stage img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        user-select: none;
        transform-origin: center;
        -webkit-user-drag: none;
    }
}

/* Mobile product image manager */
.mobile-product-images-editor {
    display: none;
}

@media screen and (max-width: 768px) {
    body.mobile-product-images-open {
        overflow: hidden;
    }
    .mobile-product-images-editor {
        position: fixed;
        inset: 0;
        z-index: 6000;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-product-images-editor.active,
    .mobile-product-images-editor.closing {
        visibility: visible;
    }
    .mobile-product-images-editor.active {
        pointer-events: auto;
    }
    .mobile-product-images-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, .58);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-images-editor.closing .mobile-product-images-backdrop {
        background: transparent;
    }
    .mobile-product-images-sheet {
        max-height: var(--admin-sheet-max-height, 82dvh);
        position: absolute;
        right: 0;
        bottom: var(--admin-keyboard-inset, 0px);
        left: 0;
        box-sizing: border-box;
        padding: 28px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, .72, .25, 1);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-product-images-editor.active .mobile-product-images-sheet {
        transform: translateY(0);
    }
    .mobile-product-images-sheet.is-dragging {
        transition: none;
    }
    .mobile-product-images-handle {
        width: 64px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 4;
        padding: 0;
        touch-action: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        transform: translateX(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-images-handle::after {
        content: "";
        width: 38px;
        height: 4px;
        position: absolute;
        top: 9px;
        left: 50%;
        border-radius: 999px;
        background: #bdbdbd;
        transform: translateX(-50%);
    }
    .mobile-product-images-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }
    .mobile-product-images-header span {
        display: block;
        margin-bottom: 3px;
        color: #888;
        font-size: 11px;
    }
    .mobile-product-images-header h4 {
        margin: 0;
        font-size: 17px;
    }
    .mobile-product-images-close {
        width: 34px;
        height: 34px;
        padding: 0;
        color: #111;
        font-size: 25px;
        line-height: 1;
        border: 0;
        background: transparent;
    }
    .mobile-product-images-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .mobile-product-image-card {
        min-width: 0;
        padding: 8px;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        background: #f2f2f2;
    }
    .mobile-product-image-preview {
        aspect-ratio: 1 / 1;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: #fff;
    }
    .mobile-product-image-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .mobile-product-image-preview span {
        position: absolute;
        top: 7px;
        left: 7px;
        padding: 4px 7px;
        color: #fff;
        font-size: 9px;
        border-radius: 999px;
        background: #111;
    }
    .mobile-product-image-card > p {
        margin: 9px 2px 7px;
        color: #444;
        font-size: 11px;
    }
    .mobile-product-image-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .mobile-product-image-card:first-child .mobile-product-image-actions {
        grid-template-columns: 1fr;
    }
    .mobile-product-images-editor[data-draft-mode="true"]
    .mobile-product-image-card:first-child .mobile-product-image-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-product-image-actions button {
        min-width: 0;
        min-height: 34px;
        padding: 6px 4px;
        font-size: 10px;
        border-radius: 8px;
        transition: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-image-replace {
        color: #fff;
        border: 1px solid #111;
        background: #111;
    }
    .mobile-product-image-remove {
        color: #d93025;
        border: 1px solid #e5b7b3;
        background: #fff;
    }
    .mobile-product-image-actions button:disabled {
        opacity: .55;
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
.mobile-product-image-replace:hover{
        color: #fff;
        border-color: #111;
        background: #111;
    }
}
    @media (hover: hover) {
.mobile-product-image-remove:hover{
        color: #d93025;
        border-color: #e5b7b3;
        background: #fff;
    }
}
}

/* Consistent table actions on mobile, based on the Products delete button. */
@media screen and (max-width: 768px) {
    .content-dashboard {
        --admin-mobile-table-action-width: 72px;
    }
    :is(
        #products,
        #orders,
        #categories,
        #users,
        #comments,
        #discounts,
        #admins,
        #banners,
        #content,
        #content_pages
    ) .table-tab td:has(> :is(
        .btn-details-tab,
        .btn-edit-tab,
        .btn-delete-tab,
        .btn-order-tab,
        .link-verify,
        .link-reject,
        .link-replay,
        .link-delete-comments,
        .link-edit-category,
        .link-delete-category,
        .link-edit-tab-admin,
        .link-deactivation-tab-admin,
        .btn-delete
    )) {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
        box-sizing: border-box;
        padding-right: 6px;
        padding-left: 6px;
        white-space: normal;
        overflow: hidden;
    }
    .content-dashboard .tab-content .table-tab td :is(
        .btn-details-tab,
        .btn-edit-tab,
        .btn-delete-tab,
        .btn-order-tab,
        .link-verify,
        .link-reject,
        .link-replay,
        .link-delete-comments,
        .link-edit-category,
        .link-delete-category,
        .link-edit-tab-admin,
        .link-deactivation-tab-admin,
        .btn-delete
    ) {
        width: var(--admin-mobile-table-action-width);
        min-width: var(--admin-mobile-table-action-width);
        max-width: var(--admin-mobile-table-action-width);
        min-height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 3px auto;
        padding: 5px 4px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
    }
}

/* Final shared spacing for every admin management table. */
.content-dashboard .tab-content:not(#dashboard) .table-tab {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
}
.content-dashboard .tab-content:not(#dashboard) .table-tab table {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
    border-spacing: 0;
}

@media screen and (min-width: 769px) {
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab {
        padding: 20px;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab {
        margin-top: 0;
        margin-bottom: 0;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab td {
        box-sizing: border-box;
        padding: 15px;
    }

    #users .table-tab table {
        table-layout: fixed;
    }

    #users .table-tab td {
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #users .table-tab td:first-child {
        width: 52px;
        min-width: 52px;
        max-width: 52px;
        padding-left: 8px;
    }

    #users .table-tab[data-content="user_information"] td:last-child {
        width: auto;
        min-width: 0;
        max-width: none;
        padding-right: 10px;
    }

    #users .table-tab[data-content="order_history"] td:last-child,
    #users .table-tab[data-content="addresses"] td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        padding-right: 8px;
        padding-left: 8px;
    }

    #users .table-tab[data-content="order_history"] .user-order-products-column {
        display: table-cell !important;
    }
    #users .table-tab[data-content="order_history"] td:nth-child(2) { width: 82px; }
    #users .table-tab[data-content="order_history"] td:nth-child(3) { width: 16%; }
    #users .table-tab[data-content="order_history"] td:nth-child(4) { width: 14%; }
    #users .table-tab[data-content="order_history"] td:nth-child(5) { width: 10%; }
    #users .table-tab[data-content="order_history"] td:nth-child(6) { width: 12%; }
    #users .table-tab[data-content="order_history"] td:nth-child(7) { width: 12%; }
    #users .table-tab[data-content="order_history"] td:nth-child(8) { width: 12%; }
    #users .table-tab[data-content="order_history"] td:nth-child(9) {
        display: none;
    }
    #users .table-tab[data-content="order_history"] .user-order-product-thumbnail {
        width: 60px;
        height: auto;
        position: relative;
        margin-right: auto;
        margin-left: auto;
    }
    #users .table-tab[data-content="order_history"] .user-order-product-thumbnail img {
        width: 100%;
        height: 60px;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border: 1px solid #dedede;
        border-radius: 10px;
        background: #f2f2f2;
    }
    #users .table-tab[data-content="order_history"] .user-order-product-thumbnail span {
        display: block;
        margin-top: 6px;
        color: #555;
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
        white-space: nowrap;
    }

    #users .table-tab[data-content="user_information"] td:nth-child(2),
    #users .table-tab[data-content="user_information"] td:nth-child(3) {
        width: 12%;
    }
    #users .table-tab[data-content="user_information"] td:nth-child(4) {
        width: 14%;
    }
    #users .table-tab[data-content="user_information"] td:nth-child(5) {
        width: 21%;
    }
    #users .table-tab[data-content="user_information"] td:nth-child(6) {
        width: 12%;
    }
    #users .table-tab[data-content="user_information"] td:nth-child(7),
    #users .table-tab[data-content="user_information"] td:nth-child(8) {
        width: 13.5%;
    }

    #users .table-tab .user-info-placeholder-field.is-empty {
        color: #9a9a9a;
        font-style: italic;
    }

    #users .table-tab[data-content="addresses"] td:nth-child(2) { width: 15%; }
    #users .table-tab[data-content="addresses"] td:nth-child(3),
    #users .table-tab[data-content="addresses"] td:nth-child(4),
    #users .table-tab[data-content="addresses"] td:nth-child(5),
    #users .table-tab[data-content="addresses"] td:nth-child(6) {
        width: 12%;
    }
    #users .table-tab[data-content="addresses"] td:nth-child(7),
    #users .table-tab[data-content="addresses"] td:nth-child(8) {
        width: 7%;
    }
    #users .table-tab[data-content="addresses"] td:nth-child(9) {
        width: 10%;
    }
}

@media screen and (max-width: 768px) {
    .content-dashboard .tab-content:not(#dashboard) > .widget-tab > .item-tab {
        padding: 20px 0;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab {
        margin: 0;
        overflow-x: auto;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }
    .content-dashboard .tab-content:not(#dashboard) .table-tab td {
        box-sizing: border-box;
        padding: 22px 6px;
        font-size: 11px;
    }

    #users .table-tab tbody tr > td {
        height: auto;
        min-height: 84px;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    #users .table-tab .tr-head > td {
        min-height: 52px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #users .mobile-users-actions-cell {
        display: flex !important;
    }

    #users .mobile-user-info-full-name-column {
        display: flex !important;
    }

    #users .desktop-user-info-label {
        display: none;
    }

    #users .mobile-user-info-label {
        display: inline;
    }

    #users .table-tab[data-content="order_history"] .user-info-placeholder-field.is-empty,
    #users .table-tab[data-content="user_information"] .user-info-placeholder-field.is-empty {
        color: #9a9a9a !important;
        font-style: italic !important;
    }

    #users .table-tab[data-content="user_information"] :is(.editable-text, .editable-select) {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #modalDetailsUserInfo .user-detail-email-edit {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #users .table-tab[data-content="addresses"] .address-mobile-quick-field {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #users .table-tab[data-content="addresses"] .btn-edit-address {
        display: none !important;
    }

    #modalDetailsUserInfo .user-detail-editable-row {
        position: relative;
    }

    #modalDetailsUserAddress .user-address-detail-edit {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #modalDetailsUserAddress .user-address-detail-editable-row {
        position: relative;
    }

    #modalDetailsUserInfo .user-detail-editable-row::after,
    #modalDetailsUserAddress .user-address-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        left: auto;
        height: auto;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    #users .mobile-user-order-view-details,
    #users .mobile-user-info-view-details,
    #users .mobile-user-address-view-details {
        display: flex !important;
    }

    #users .table-tab[data-content="order_history"] .user-order-products-column {
        display: flex !important;
    }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) {
        width: 100%;
        display: grid;
        grid-template-columns: 44px minmax(0, 1.15fr) minmax(0, .9fr) 62px 84px;
        align-items: stretch;
    }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: 1;
    }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(1) { grid-column: 1; }
    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(3) { grid-column: 2; }
    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(8) { grid-column: 3; }
    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(2) { grid-column: 4; }
    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(10) { grid-column: 5; }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9)) {
        display: none !important;
    }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(8), :nth-child(10)) {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #users .table-tab[data-content="order_history"] :is(.tr-head, .user-row) > td:nth-child(10) {
        flex-direction: column;
        padding-right: 6px;
        padding-left: 6px;
    }

    #users .user-order-product-thumbnail,
    #users .user-order-product-thumbnail img {
        width: 56px;
        height: 56px;
    }

    #users .user-order-product-thumbnail {
        height: auto;
        position: relative;
        margin: 0 auto;
    }

    #users .user-order-product-thumbnail img {
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border: 1px solid #dedede;
        border-radius: 10px;
        background: #f2f2f2;
    }

    #users .user-order-product-thumbnail span {
        display: block;
        margin-top: 6px;
        color: #555;
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
        white-space: nowrap;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) {
        width: 100%;
        display: grid;
        grid-template-columns: 42px minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .75fr) 82px;
        align-items: stretch;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: 1;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(1) { grid-column: 1; }
    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(4) { grid-column: 2; }
    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(5) { grid-column: 3; }
    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(7) { grid-column: 4; }
    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(10) { grid-column: 5; }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:is(:nth-child(2), :nth-child(3), :nth-child(6), :nth-child(8), :nth-child(9)) {
        display: none !important;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(7), :nth-child(10)) {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(10) {
        flex-direction: column;
        padding-right: 6px;
        padding-left: 6px;
    }

    #users .table-tab[data-content="user_information"] :is(.tr-head, .user-row) > td:nth-child(4) {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) {
        width: 100%;
        display: grid;
        grid-template-columns: 42px minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .8fr) 84px;
        align-items: stretch;
    }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: 1;
        box-sizing: border-box;
    }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(1) { grid-column: 1; }
    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(2) { grid-column: 2; }
    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(3) { grid-column: 3; }
    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(4) { grid-column: 4; }
    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(10) { grid-column: 5; }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) {
        display: none !important;
    }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(10)) {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
        line-height: 1.35;
    }

    #users .table-tab[data-content="addresses"] :is(.tr-head, .user-row) > td:nth-child(10) {
        flex-direction: column;
        padding-right: 6px;
        padding-left: 6px;
    }
}

/* Unified Add New controls, based on Add New Product. */
.content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) > button {
    width: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 15px;
    color: #111;
    font-size: inherit;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f2f2f2;
}
@media (hover: hover) {
.content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) > button:hover{
    color: #fff;
    border-color: #000;
    background-color: #000;
}
}

@media screen and (min-width: 769px) {
    .content-dashboard {
        --admin-desktop-control-height: 47px;
    }
    .content-dashboard .tab-content:not(#dashboard) .search-pannel .input {
        height: var(--admin-desktop-control-height);
        min-height: var(--admin-desktop-control-height);
        box-sizing: border-box;
    }
    .content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) > button {
        height: var(--admin-desktop-control-height);
        min-height: var(--admin-desktop-control-height);
        padding: 11px 18px;
        font-size: 13px;
    }
    #banners > .widget-tab > .item-tab > .btn-add-new,
    #content_pages > .widget-tab > .item-tab > .con-add-new {
        width: fit-content;
        margin: 0 0 10px auto;
    }
}

@media screen and (max-width: 768px) {
    .content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) {
        width: 100%;
        box-sizing: border-box;
    }
    .content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) > button {
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 9px 20px;
        color: #111;
        font-size: 14px;
        font-weight: 400;
        border-color: #ccc;
        background-color: #f2f2f2;
    }
    #banners > .widget-tab > .item-tab > .btn-add-new,
    #content_pages > .widget-tab > .item-tab > .con-add-new {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
.content-dashboard .tab-content:not(#dashboard) :is(.btn-add-new, .con-add-new) > button:hover{
        color: #111;
        border-color: #ccc;
        background-color: #f2f2f2;
    }
}
}

/* Vertically center and slightly enlarge admin search icons on mobile. */
@media screen and (max-width: 768px) {
    .content-dashboard .tab-content:not(#dashboard) .search-pannel button {
        width: 38px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 6px;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        padding: 0;
        color: #777;
        font-size: 16px;
        line-height: 1;
        border: 0;
        background: transparent;
        transform: none;
    }
    .content-dashboard .tab-content:not(#dashboard) .search-pannel button :is(i, svg) {
        width: 16px;
        height: 16px;
        display: block;
        font-size: 16px;
    }
}

/* Users and Comments sub-tabs match the search control height. */
#users .tab-btn,
#comments .tab-btn {
    height: var(--admin-desktop-control-height, 47px);
    min-height: var(--admin-desktop-control-height, 47px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
#users .tab-btn.active,
#comments .tab-btn.active {
    color: #fff;
    border-color: #000;
    background-color: #000;
}

@media (hover: hover) {
    #users .tab-btn:not(.active):hover,
    #comments .tab-btn:not(.active):hover {
        color: #111;
        border-color: #bbb;
        background-color: #e5e5e5;
    }
}

@media screen and (max-width: 768px) {
    .content-dashboard .tab-content:not(#dashboard) .search-pannel .input {
        height: 42px;
        min-height: 42px;
        box-sizing: border-box;
    }
    #users .tab-btn,
    #comments .tab-btn {
        height: 42px;
        min-height: 42px;
    }
}

/* Center every admin table heading and textual value across all management tabs. */
.content-dashboard .tab-content .table-tab :is(th, td) {
    text-align: center;
    vertical-align: middle;
}
.content-dashboard .tab-content .table-tab td :is(input, select, textarea) {
    text-align: center;
}
#orders .table-tab td:last-child,
#products .product-row td:last-child {
    text-align: center;
}
.content-dashboard .tab-content .table-tab td > :is(
    .btn-details-tab,
    .btn-edit-tab,
    .btn-delete-tab,
    .btn-order-tab,
    .btn-delete
) {
    margin-right: auto;
    margin-left: auto;
}

/* Add Category follows the shared admin form language. */
#modalAddCategory .form-modal form {
    display: grid;
    gap: 0;
}
#modalAddCategory .form-row {
    display: block;
    grid-template-columns: 1fr;
    gap: 0;
}
#modalAddCategory :is(.item-form, .singl-item-form) {
    width: 100%;
    min-width: 0;
    margin: -1px 0 0;
    display: grid;
    grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    background: #fff;
}
#modalAddCategory .form-row:first-child .item-form:first-child {
    margin-top: 0;
    border-radius: 10px 10px 0 0;
}
#modalAddCategory form > .singl-item-form:last-of-type {
    border-radius: 0 0 10px 10px;
}
#modalAddCategory :is(.item-form, .singl-item-form) > label {
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px 14px;
    color: #333;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #d8d8d8;
    background: #ededed;
}
#modalAddCategory :is(.item-form, .singl-item-form) > :is(input, select) {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    color: #222;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    transition: background-color .16s ease, box-shadow .16s ease;
}
#modalAddCategory :is(.item-form, .singl-item-form) > :is(input, select):focus {
    background: #fff;
    box-shadow: inset 3px 0 0 #111;
}
#modalAddCategory select,
#modalAddCategory select option {
    color: #333;
    -webkit-text-fill-color: #333;
    background-color: #fff;
}
#modalAddCategory .category-image-picker {
    min-width: 0;
    min-height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    transition: background-color .16s ease, box-shadow .16s ease;
}
#modalAddCategory .category-image-picker:focus-within {
    box-shadow: inset 3px 0 0 #111;
}
#modalAddCategory .category-image-picker::before {
    content: "Choose file";
    flex: 0 0 auto;
    margin: 0 10px 0 13px;
    padding: 6px 10px;
    color: #333;
    font-size: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f2f2f2;
}
#modalAddCategory .category-image-picker-text {
    min-width: 0;
    padding-right: 12px;
    overflow: hidden;
    color: #777;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#modalAddCategory .category-image-picker .image-upload-field {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

@media screen and (min-width: 769px) {
    #modalAddCategory .form-modal form {
        display: block;
    }
    #modalAddCategory .form-row {
        display: block;
    }
    #modalAddCategory :is(.item-form, .singl-item-form) {
        margin: 0 0 14px;
        display: grid;
        grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        border: 1px solid #d8d8d8;
        border-radius: 10px;
        background: #fff;
    }
    #modalAddCategory .form-row:first-child .item-form:first-child,
    #modalAddCategory form > .singl-item-form:last-of-type {
        margin-top: 0;
        border-radius: 10px;
    }
    #modalAddCategory :is(.item-form, .singl-item-form) > label {
        min-height: 48px;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 12px 14px;
        border: 0;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    #modalAddCategory :is(.item-form, .singl-item-form) > :is(input, select) {
        min-height: 48px;
        padding: 12px 14px;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
    #modalAddCategory :is(.item-form, .singl-item-form) > :is(input, select):focus,
    #modalAddCategory .category-image-picker:focus-within {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
    #modalAddCategory .category-image-picker {
        min-height: 48px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #fff;
    }
    #modalAddCategory .category-image-picker::before,
    #modalAddCategory .category-image-picker-text {
        display: block;
    }
    #modalAddCategory .category-image-picker .image-upload-field {
        width: 100%;
        height: 100%;
        min-height: 0;
        position: absolute;
        padding: 0;
        opacity: 0;
        border: 0;
        background: transparent;
    }
}

@media screen and (max-width: 768px) {
    #modalAddCategory :is(.item-form, .singl-item-form) {
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
    }
    #modalAddCategory .scroll-modal {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    #modalAddCategory .btn-form {
        position: sticky;
        bottom: 0;
        z-index: 7;
        min-height: 48px;
        margin: 6px 0 0;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
#modalAddCategory .btn-form:hover{
        color: #fff;
        border-color: #000;
        background-color: #000;
    }
}
}

/* Shared Add New form rows, based on Add New Category. */
@media screen and (min-width: 769px) {
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.form-modal, .form-tab) > form {
        display: block;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) .form-row {
        display: block;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        width: 100%;
        min-width: 0;
        margin: 0 0 14px;
        display: grid;
        grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px !important;
        background: #fff;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 12px 14px;
        color: #333;
        font-size: 12px;
        line-height: 1.4;
        border: 0;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 12px 14px;
        color: #222;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        transition: background-color .16s ease, box-shadow .16s ease;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > textarea {
        min-height: 110px;
        resize: vertical;
    }
    :is(
        #modalAddProduct,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(select, option) {
        color: #333;
        -webkit-text-fill-color: #333;
    }
    #modalAddDiscount .custom-select-wrapper {
        min-width: 0;
        min-height: 48px;
        margin: 0;
        align-self: stretch;
        background: #fff;
    }
    #modalAddDiscount .custom-select-trigger {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 12px 14px;
        color: #222;
        text-align: left;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
    #modalAddBanner .singl-item-form-row > input[type="file"] {
        padding: 10px 12px;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.btn-form, .btn-submit-form) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin-top: 4px;
        padding: 12px 18px;
        color: #fff;
        cursor: pointer;
        border: 1px solid #111;
        border-radius: 10px;
        background: #111;
        transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    }
    @media (hover: hover) {
:is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.btn-form, .btn-submit-form):hover{
        color: #111;
        border-color: #ccc;
        background: #f2f2f2;
    }
}

    /* Keep the Product row hover/focus cue while using the Category layout. */
    @media (hover: hover) {
#modalAddProduct :is(.item-form, .singl-item-form):hover{
        border-color: #c9c9c9;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }
}
    #modalAddProduct :is(.item-form, .singl-item-form):focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    #modalAddProduct :is(.item-form, .singl-item-form) :is(input, select, textarea):focus,
    #modalAddProduct .product-image-picker:focus-within {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
}

@media screen and (max-width: 768px) {
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) .form-row {
        display: block;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        width: 100%;
        min-width: 0;
        margin: 0 0 12px;
        display: grid;
        grid-template-columns: var(--admin-mobile-form-label-width, 128px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px !important;
        background: #fff;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > label {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 11px 10px;
        color: #333;
        font-size: 11px;
        line-height: 1.35;
        border: 0;
        border-right: 1px solid #d8d8d8;
        background: #ededed;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > :is(input, select, textarea) {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 11px 10px;
        color: #222;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) > textarea {
        min-height: 100px;
        resize: vertical;
    }
    #modalAddDiscount .custom-select-wrapper {
        min-width: 0;
        margin: 0;
        align-self: stretch;
    }
    #modalAddDiscount .custom-select-trigger {
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 0;
        background: #fff;
    }
    #modalAddBanner .singl-item-form-row > input[type="file"] {
        padding: 9px 10px;
    }
    :is(
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) .scroll-modal {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    :is(
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.btn-form, .btn-submit-form) {
        width: 100%;
        min-height: 48px;
        position: sticky;
        bottom: 0;
        z-index: 7;
        box-sizing: border-box;
        margin: 6px 0 0;
        color: #fff;
        border: 1px solid #111;
        border-radius: 10px;
        background: #111;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92);
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
:is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.btn-form, .btn-submit-form):hover{
        color: #fff;
        border-color: #111;
        background: #111;
    }
}
}

/* Shared hover and focus feedback for every Add New form. */
@media screen and (min-width: 769px) and (hover: hover) {
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) {
        transition: border-color .16s ease, box-shadow .16s ease;
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):hover {
        border-color: #c9c9c9;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }
}

:is(
    #modalAddProduct,
    #modalAddCategory,
    #modalAddDiscount,
    #modalAddAdmin,
    #modalAddBanner,
    #modalAddContentPages
) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):focus-within {
    border-color: #bdbdbd;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
}
:is(
    #modalAddProduct,
    #modalAddCategory,
    #modalAddDiscount,
    #modalAddAdmin,
    #modalAddBanner,
    #modalAddContentPages
) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) :is(input, select, textarea):focus,
:is(
    #modalAddProduct,
    #modalAddCategory,
    #modalAddDiscount,
    #modalAddAdmin,
    #modalAddBanner,
    #modalAddContentPages
) :is(.product-image-picker, .category-image-picker, .custom-select-wrapper):focus-within {
    background: #fff;
    box-shadow: inset 3px 0 0 #111;
}

@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
:is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):hover{
        border-color: #d8d8d8;
        box-shadow: none;
    }
}
    @media (hover: hover) {
:is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) :is(input, select, textarea):hover,
:is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.product-image-picker, .category-image-picker, .custom-select-wrapper):hover{
        background: #fff;
        box-shadow: none;
    }
}
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row):focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.item-form, .singl-item-form, .item-form-row, .singl-item-form-row) :is(input, select, textarea):focus,
    :is(
        #modalAddProduct,
        #modalAddCategory,
        #modalAddDiscount,
        #modalAddAdmin,
        #modalAddBanner,
        #modalAddContentPages
    ) :is(.product-image-picker, .category-image-picker, .custom-select-wrapper):focus-within {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
}

/* Prevent sticky touch-hover on Product Edit fields while preserving focus. */
@media screen and (max-width: 768px) and (hover: none) {
    @media (hover: hover) {
#modalDetailsProducts .product-detail-input:hover:not(:focus){
        background: #fff;
        box-shadow: none;
    }
}
}

/* Stable keyboard-safe Add Product sheet; other Add forms keep their prior behavior. */
.mobile-add-product-backdrop {
    display: none;
}

/* Categories mobile draft row and compact keyboard-safe Add sheet. */
.mobile-category-draft-row {
    display: none;
}

/* Discounts: mobile draft row, compact table and stable Add sheet. */
.mobile-discount-draft-row {
    display: none;
}
@media screen and (min-width: 769px) {
    #modalEditDiscount .discount-edit-product-mobile-row {
        display: none !important;
    }

    :is(#modalAddDiscount, #modalEditDiscount) .discount-form-select {
        width: 100% !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 12px 38px 12px 14px !important;
        color: #222 !important;
        -webkit-text-fill-color: #222 !important;
        outline: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
    }
    :is(#modalAddDiscount, #modalEditDiscount)
    :is(.item-form, .singl-item-form, .item-form-row):has(> .discount-form-select) {
        position: relative;
    }
    :is(#modalAddDiscount, #modalEditDiscount)
    :is(.item-form, .singl-item-form, .item-form-row):has(> .discount-form-select)::after {
        content: "⌄";
        position: absolute;
        top: 50%;
        right: 14px;
        z-index: 2;
        color: #666;
        font-size: 16px;
        line-height: 1;
        pointer-events: none;
        transform: translateY(-56%);
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-form-select:focus {
        border: 0 !important;
        background-color: #fff !important;
        box-shadow: inset 3px 0 0 #111 !important;
    }
    @media (hover: hover) {
        :is(#modalAddDiscount, #modalEditDiscount)
        :is(.item-form, .singl-item-form, .item-form-row):has(> .discount-form-select):not(:focus-within):hover {
            border-color: #c9c9c9;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        }
        :is(#modalAddDiscount, #modalEditDiscount)
        :is(.item-form, .singl-item-form, .item-form-row):has(> .discount-form-select):not(:focus-within):hover
        > .discount-form-select {
            background-color: #fff !important;
            box-shadow: inset 3px 0 0 #d7d7d7 !important;
        }
        #modalEditDiscount
        :is(.item-form, .singl-item-form, .item-form-row):not(:focus-within):hover
        > :is(input, textarea) {
            background-color: #fff !important;
            box-shadow: inset 3px 0 0 #d7d7d7 !important;
        }
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row {
        position: relative;
        z-index: 12;
        overflow: visible;
        border-radius: 10px !important;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row > label {
        border-radius: 10px 0 0 10px;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-desktop-row {
        display: block;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row .custom-select-wrapper {
        position: relative;
        z-index: 13;
        border-radius: 0 10px 10px 0;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row .custom-select-trigger {
        overflow: hidden;
        border-radius: 0 10px 10px 0;
    }
    #modalEditDiscount .discount-edit-product-picker-desktop-row .custom-select-wrapper {
        min-width: 0;
        min-height: 48px;
        margin: 0;
        align-self: stretch;
        background: #fff;
    }
    #modalEditDiscount .discount-edit-product-picker-desktop-row .custom-select-trigger {
        width: 100%;
        height: 48px;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 5px 14px;
        color: #222;
        text-align: left;
        border: 0;
        background: #fff;
    }
    #modalEditDiscount .discount-edit-product-picker-desktop-row .custom-select-trigger img {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: block;
        margin: 0;
        padding: 0;
        object-fit: cover;
        border: 0;
        border-radius: 6px;
        background: transparent;
    }
    #modalEditDiscount .discount-edit-product-picker-desktop-row .custom-select-trigger span {
        min-width: 0;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row .custom-options {
        top: calc(100% + 2px);
        right: 0;
        left: 0;
        z-index: 40;
        max-height: 280px;
        box-sizing: border-box;
        padding: 8px 0 110px;
        overflow-y: auto;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-search-input {
        width: calc(100% - 16px) !important;
        height: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        margin: 4px 8px 8px !important;
        padding: 9px 12px !important;
        color: #222 !important;
        font-size: 12px !important;
        outline: 0 !important;
        border: 1px solid #dedede !important;
        border-radius: 8px !important;
        background: #f7f7f7 !important;
        box-shadow: none !important;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row .custom-option {
        width: calc(100% - 16px);
        box-sizing: border-box;
        margin: 0 8px 4px;
        border-radius: 8px;
    }
    @media (hover: hover) {
        :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row:not(:focus-within):hover {
            border-color: #c9c9c9;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        }
        :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row:not(:focus-within):hover .custom-select-trigger {
            background-color: #fff;
            box-shadow: inset 3px 0 0 #d7d7d7;
        }
    }
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-row:focus-within .custom-select-trigger {
        background-color: #fff;
        box-shadow: inset 3px 0 0 #111;
    }
}
@media screen and (max-width: 768px) {
    :is(#modalAddDiscount, #modalEditDiscount) .discount-product-picker-desktop-row {
        display: none !important;
    }
}
#discounts .discount_row[data-discount-type="fixed"] .discount-amount-suffix {
    display: none;
}
@media screen and (min-width: 769px) {
    #discounts .btn-edit-discount {
        display: inline-flex !important;
    }
    #discounts .table-tab {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    #discounts .table-tab table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
    }
    #discounts .table-tab :is(.tr-head, tbody tr) > td {
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        padding: 15px 10px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #discounts .table-tab .discount-table-head {
        height: 48px;
    }
    #discounts .table-tab .discount-table-head > td {
        height: 48px !important;
        padding: 0 10px !important;
        line-height: 1.2;
    }
    #discounts .table-tab tbody tr:not(.mobile-discount-draft-row) > td {
        height: 104px;
    }
    #discounts .table-tab :is(td:nth-child(9), td:nth-child(10), td:nth-child(11)) {
        display: none;
    }
    #discounts .table-tab td:first-child {
        width: 5%;
        padding-left: 15px;
    }
    #discounts .table-tab td:nth-child(2) {
        width: 9%;
    }
    #discounts .table-tab td:nth-child(3) {
        width: 13%;
    }
    #discounts .table-tab td:nth-child(4),
    #discounts .table-tab td:nth-child(5),
    #discounts .table-tab td:nth-child(6),
    #discounts .table-tab td:nth-child(7) {
        width: 13%;
    }
    #discounts .table-tab td:nth-child(8) {
        width: 10%;
    }
    #discounts .table-tab td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        padding-right: 15px;
        padding-left: 15px;
    }
    #discounts .product-tab {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    #discounts .product-tab > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #discounts .product-tab img {
        width: 60px;
        height: 60px;
        display: block;
        object-fit: cover;
        box-sizing: border-box;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 10px;
    }
    #discounts .discount-product-image-wrapper {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }
    .discount-product-inline-picker {
        width: 280px;
        max-height: 310px;
        position: fixed;
        z-index: 8000;
        box-sizing: border-box;
        margin: 0;
        padding: 6px 6px 130px;
        overflow-y: auto;
        overscroll-behavior: contain;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    }
    .discount-product-inline-picker .discount-product-inline-option + .discount-product-inline-option {
        margin-top: 4px;
    }
    .discount-product-inline-option {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 6px 8px;
        color: #222;
        text-align: left;
        border: 0;
        border-radius: 8px;
        background: #fff;
    }
    .discount-product-inline-option.is-selected{
        background: #f0f0f0;
    }
@media (hover: hover) {
.discount-product-inline-option:hover{
        background: #f0f0f0;
    }
}
    .discount-product-inline-option img {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: block;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 7px;
        background: #f5f5f5;
    }
    .discount-product-inline-option span {
        min-width: 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .discount-product-inline-picker.is-saving {
        opacity: .6;
        pointer-events: none;
    }
    #discounts .table-tab td > :is(.editable-text, .editable-select) {
        max-width: 100%;
        display: inline-block;
        min-height: 35px;
        overflow: hidden;
        line-height: 35px;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
    #discounts .table-tab td:last-child :is(.btn-edit-tab, .btn-delete-tab) {
        margin: 3px auto;
    }
    #discounts .btn-edit-discount {
        display: none !important;
    }
    #modalDetailsDiscountMobile .discount-detail-inline-edit {
        position: relative;
        cursor: pointer;
        pointer-events: auto !important;
        padding-bottom: 20px !important;
        -webkit-tap-highlight-color: transparent;
    }
    #modalDetailsDiscountMobile .discount-detail-value {
        display: block;
        min-width: 0;
        padding-right: 58px;
        overflow-wrap: anywhere;
    }
    #modalDetailsDiscountMobile .discount-detail-edit-hint {
        position: absolute;
        right: 10px;
        bottom: 6px;
        z-index: 2;
        display: inline-block;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }
    #modalDetailsDiscountMobile .discount-detail-editable-row {
        position: relative;
    }
    #modalDetailsDiscountMobile .discount-detail-editable-row::after {
        content: none;
    }
    #modalDetailsDiscountMobile .discount-detail-inline-edit::after {
        content: none;
    }
}

/* The add-discount product selector belongs to the desktop form only. */
@media screen and (max-width: 768px) {
    #modalAddDiscount #desktopDiscountProductPickerRow {
        display: none !important;
    }
}

/* Isolated desktop quick-edit controls for Discounts. */
@media screen and (min-width: 769px) {
    #discounts .table-tab .discount-inline-edit-control {
        width: 120px !important;
        max-width: 120px !important;
        height: 35px !important;
        min-height: 35px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 8px 10px !important;
        color: #222;
        text-align: center !important;
        line-height: normal !important;
    }
    #discounts .table-tab td:nth-child(6):has(.discount-inline-edit-control) {
        text-overflow: clip;
    }
}
@media screen and (max-width: 768px) {
    #discounts .table-tab table {
        width: 100%;
        min-width: 360px;
        table-layout: fixed;
    }
    #discounts .table-tab :is(td:nth-child(1), td:nth-child(3), td:nth-child(7), td:nth-child(8), td:nth-child(9), td:nth-child(10), td:nth-child(11)) {
        display: none;
    }
    #discounts .table-tab td:nth-child(2) {
        width: 18%;
    }
    #discounts .table-tab td:nth-child(4) {
        width: 22%;
        min-width: 0;
    }
    #discounts .table-tab td:nth-child(5) {
        width: 19%;
        min-width: 0;
    }
    #discounts .table-tab td:nth-child(6) {
        width: 18%;
    }
    #discounts .table-tab td:nth-child(12) {
        width: 23%;
        min-width: 84px;
        max-width: none;
    }
    #discounts .table-tab :is(.tr-head, tbody tr) > td:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(7)):not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(10)):not(:nth-child(11)) {
        box-sizing: border-box;
        padding-right: 4px;
        padding-left: 4px;
        text-align: center;
        vertical-align: middle;
    }
    #discounts .product-tab {
        min-width: 0;
        display: table-cell;
        vertical-align: middle;
        overflow: hidden;
    }
    #discounts .product-tab > div {
        display: flex;
        justify-content: center;
    }
    #discounts .product-tab img {
        width: 48px;
        height: 48px;
        display: block;
        object-fit: cover;
        border-radius: 8px;
    }
    #discounts .mobile-discount-draft-row {
        display: table-row;
    }
    #discounts .mobile-discount-draft-row td {
        border-bottom-color: #cfcfcf;
        background: #f7f7f7;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-field {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-field.is-empty {
        color: #858585;
        font-style: italic;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-type.is-default {
        color: #858585;
        font-style: italic;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-product {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-product img {
        box-sizing: border-box;
        padding: 2px;
        opacity: .84;
        border: 1px dashed #aaa;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-product.has-draft-product img {
        padding: 0;
        opacity: 1;
        border-style: solid;
        border-color: #d7d7d7;
    }
    #discounts .mobile-discount-draft-row :is(.mobile-discount-draft-details, .mobile-discount-draft-reset) {
        color: #111;
        border-color: #c8c8c8;
        background: #ededed;
    }
    #discounts .mobile-discount-draft-row .mobile-discount-draft-reset {
        color: #666;
        background: #fff;
    }
    #discounts .mobile-discount-draft-row.mobile-discount-draft-attention td {
        animation: mobileDraftAttention 1.6s ease;
    }
    #mobileDiscountProductEditor .mobile-product-images-sheet {
        max-height: min(76dvh, 620px);
    }
    #mobileDiscountProductEditor .mobile-discount-product-option {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
        color: #222;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #mobileDiscountProductEditor .mobile-discount-product-option:active {
        border-color: #aaa;
        background: #e9e9e9;
    }
    #mobileDiscountProductEditor .mobile-product-image-preview {
        width: 100%;
        display: block;
    }
    #mobileDiscountProductEditor .mobile-discount-product-option strong {
        width: 100%;
        overflow: hidden;
        color: #333;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #discounts .row-between .btn-add-new {
        display: none;
    }
    #modalAddDiscount .mobile-discount-draft-managed {
        display: none !important;
    }
    :is(#modalAddDiscount, #modalEditDiscount) {
        width: 100%;
        height: var(--admin-stable-layout-height, 100vh) !important;
        min-height: var(--admin-stable-layout-height, 100vh);
        max-height: var(--admin-stable-layout-height, 100vh);
        position: fixed;
        inset: 0 0 auto;
        overflow: hidden;
        overscroll-behavior: none;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .modal-content {
        height: var(--admin-product-sheet-height, 82vh) !important;
        max-height: var(--admin-product-sheet-height, 82vh) !important;
        bottom: 0 !important;
    }
    #modalEditDiscount .modal-content {
        height: min(470px, var(--admin-sheet-max-height, 82dvh)) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
        bottom: 0 !important;
    }
    #modalAddDiscount .modal-content {
        height: min(470px, var(--admin-sheet-max-height, 82dvh)) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
        bottom: 0 !important;
    }
    html.admin-mobile-keyboard-open :is(#modalAddDiscount, #modalEditDiscount) .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
        bottom: var(--admin-keyboard-inset, 0px) !important;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        overflow-anchor: none;
        scroll-behavior: auto;
    }
    :is(#modalAddDiscount, #modalEditDiscount) .btn-form {
        width: 100% !important;
        position: sticky !important;
        right: auto !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 10;
        margin: 6px 0 0 !important;
        transform: none !important;
        box-shadow: 0 -8px 14px 6px rgba(255, 255, 255, .92) !important;
    }
}
@media screen and (max-width: 768px) {
    #categories .mobile-category-draft-row {
        display: table-row;
    }
    #categories .mobile-category-draft-row td {
        border-bottom-color: #cfcfcf;
        background: #f7f7f7;
    }
    #categories .mobile-category-draft-row .mobile-category-draft-field {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #categories .mobile-category-draft-row .mobile-category-draft-field.is-empty {
        color: #858585;
        font-style: italic;
    }
    #categories .mobile-category-draft-row .mobile-category-draft-image {
        opacity: .82;
        cursor: pointer;
        border-style: dashed;
    }
    #categories .mobile-category-draft-row .mobile-category-draft-image.has-draft-image {
        opacity: 1;
        border-style: solid;
    }
    #categories .mobile-category-draft-row :is(.mobile-category-draft-details, .mobile-category-draft-reset) {
        color: #111;
        border-color: #c8c8c8;
        background: #ededed;
    }
    #categories .mobile-category-draft-row .mobile-category-draft-reset {
        color: #666;
        background: #fff;
    }
    #categories .mobile-category-draft-row.mobile-category-draft-attention td {
        animation: mobileDraftAttention 1.6s ease;
    }
    #categories .row-between .btn-add-new {
        display: none;
    }
    #modalAddCategory .mobile-category-draft-managed {
        display: none !important;
    }
    #modalAddCategory {
        width: 100%;
        height: var(--admin-stable-layout-height, 100vh) !important;
        min-height: var(--admin-stable-layout-height, 100vh);
        max-height: var(--admin-stable-layout-height, 100vh);
        position: fixed;
        inset: 0 0 auto;
        overflow: hidden;
        overscroll-behavior: none;
    }
    #modalAddCategory .modal-content {
        height: auto !important;
        max-height: min(82vh, calc(var(--admin-visible-viewport-height, 100dvh) - 8px)) !important;
        bottom: var(--admin-viewport-bottom-inset, 0px) !important;
    }
    #modalAddCategory .scroll-modal {
        height: auto !important;
        max-height: inherit !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        overflow-anchor: none;
        scroll-behavior: auto;
    }
    #modalAddCategory .btn-form {
        width: 100% !important;
        position: sticky !important;
        right: auto !important;
        bottom: calc(4px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        margin: 6px 0 0 !important;
        transform: none !important;
    }
}
@media screen and (max-width: 768px) {
    #modalAddProduct {
        width: 100%;
        height: var(--admin-stable-layout-height, 100vh) !important;
        min-height: var(--admin-stable-layout-height, 100vh);
        max-height: var(--admin-stable-layout-height, 100vh);
        position: fixed;
        inset: 0 0 auto;
        overflow: hidden;
        overscroll-behavior: none;
    }
    #modalAddProduct .mobile-add-product-backdrop {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
    }
    #modalAddProduct .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
        z-index: 1;
        bottom: var(--admin-keyboard-inset, 0px) !important;
    }
    #modalAddProduct .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: calc(
            88px + env(safe-area-inset-bottom)
        ) !important;
        overflow-anchor: none;
        scroll-behavior: auto;
    }
    #modalAddProduct :is(input, textarea, .admin-mobile-select-trigger, .product-image-picker) {
        scroll-margin-top: 72px;
        scroll-margin-bottom: 96px;
    }
    #modalAddProduct #formButton {
        width: auto !important;
        position: absolute !important;
        right: 16px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: 16px !important;
        z-index: 20;
        margin: 0 !important;
        transform: none !important;
        box-shadow: 0 -10px 18px 8px rgba(255, 255, 255, .94) !important;
    }
}

/* Keep the desktop Discount delete close control aligned with Product delete. */
@media screen and (min-width: 769px) {
    #modalDeleteDiscount .close-modal,
    #modalDeleteCategory .close-modal {
        position: fixed !important;
        top: 50px !important;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px) !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }
    #modalDeleteCategory .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
    }

    #admins .table-tab td:last-child {
        width: 104px;
        min-width: 104px;
        max-width: 104px;
        box-sizing: border-box;
        padding-right: 8px;
        padding-left: 8px;
        text-align: center;
        vertical-align: middle;
    }
    #admins .table-tab td:last-child > :is(.btn-edit-admin, .btn-delete-admin) {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 3px auto !important;
    }
    #modalDeleteAdmin .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
    }
    #modalDeleteAdmin .close-modal {
        position: fixed !important;
        top: 50px !important;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px) !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

.admin-sensitive-change-note {
    margin: 2px 0 14px;
    padding: 11px 13px;
    color: #555;
    font-size: 11px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f2f2f2;
}

/* Admins: keep the desktop toolbar unchanged and expose Add Admin as the
   first table row on mobile. */
.mobile-admin-draft-row {
    display: none;
}

#admins .btn-details-admin {
    display: none;
}

@media screen and (max-width: 768px) {
    #admins .btn-add-new {
        display: none;
    }

    #admins .mobile-admin-draft-row {
        display: table-row;
        color: #777;
        font-style: italic;
    }

    #admins .mobile-admin-draft-row > td {
        vertical-align: middle;
        border-bottom-color: #cfcfcf;
        background: #f7f7f7;
    }

    #admins .mobile-admin-draft-row :is(.mobile-admin-draft-details, .mobile-admin-draft-reset) {
        color: #111;
        font-style: normal;
        border-color: #c8c8c8;
        background: #ededed;
    }

    #admins .mobile-admin-draft-row .mobile-admin-draft-reset {
        color: #666;
        background: #fff;
    }

    #admins .admin-mobile-quick-field {
        display: inline-block;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #admins .mobile-admin-draft-row .admin-mobile-quick-field.is-empty {
        color: #858585;
        font-style: italic;
    }

    #admins .table-tab :is(.admin-id-column, .admin-last-login-column) {
        display: none;
    }

    :is(#modalAddAdmin, #modalEditAdmin) .admin-mobile-managed-status-field {
        display: none !important;
    }

    #admins .btn-details-admin {
        display: flex;
    }

    #admins .btn-edit-admin {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form):has(select) {
        position: relative;
    }
    :is(#modalAddAdmin, #modalEditAdmin) .admin-mobile-select-control {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: block !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form) > select,
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form) .admin-mobile-select-control > select {
        all: unset !important;
        width: 100% !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 12px 38px 12px 14px !important;
        display: block !important;
        color: #222 !important;
        -webkit-text-fill-color: #222 !important;
        font: inherit !important;
        line-height: 1.4 !important;
        cursor: pointer !important;
        outline: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
    }
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form) > select:not(:focus),
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form) .admin-mobile-select-control > select:not(:focus) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    :is(#modalAddAdmin, #modalEditAdmin) :is(.item-form, .singl-item-form):has(select)::after {
        content: "⌄";
        position: absolute;
        top: 50%;
        right: 14px;
        z-index: 2;
        color: #666;
        font-size: 16px;
        line-height: 1;
        pointer-events: none;
        transform: translateY(-56%);
    }
    @media (hover: hover) {
        #modalAddAdmin :is(.item-form, .singl-item-form):has(select):not(:focus-within):hover {
            border-color: #c9c9c9;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        }
        #modalAddAdmin :is(.item-form, .singl-item-form):has(select):not(:focus-within):hover
        .admin-mobile-select-control > select {
            background-color: #fff !important;
            box-shadow: inset 3px 0 0 #d7d7d7 !important;
        }
        #modalEditAdmin :is(.item-form, .singl-item-form):not(:focus-within):hover {
            border-color: #c9c9c9;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
        }
        #modalEditAdmin :is(.item-form, .singl-item-form):not(:focus-within):hover > input,
        #modalEditAdmin :is(.item-form, .singl-item-form):not(:focus-within):hover .admin-mobile-select-control > select {
            background-color: #fff !important;
            box-shadow: inset 3px 0 0 #d7d7d7 !important;
        }
    }
    #modalEditAdmin :is(.item-form, .singl-item-form):focus-within > input,
    #modalEditAdmin :is(.item-form, .singl-item-form):focus-within .admin-mobile-select-control > select {
        background-color: #fff !important;
        box-shadow: inset 3px 0 0 #111 !important;
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    #modalDeleteAdmin .btn-delete-form:focus:not(:focus-visible){
        color: #fff;
        border-color: #d93025;
        background-color: #d93025;
        box-shadow: none;
    }
@media (hover: hover) {
#modalDeleteAdmin .btn-delete-form:hover{
        color: #fff;
        border-color: #d93025;
        background-color: #d93025;
        box-shadow: none;
    }
}
}

/* Match Add Admin's mobile sheet height and keyboard behavior to Add Discount. */
@media screen and (max-width: 768px) {
    #modalAddAdmin {
        width: 100%;
        height: var(--admin-stable-layout-height, 100vh) !important;
        min-height: var(--admin-stable-layout-height, 100vh);
        max-height: var(--admin-stable-layout-height, 100vh);
        position: fixed;
        inset: 0 0 auto;
        overflow: hidden;
        overscroll-behavior: none;
    }

    #modalAddAdmin .modal-content {
        height: 58vh !important;
        height: 58dvh !important;
        max-height: 58vh !important;
        max-height: 58dvh !important;
        bottom: 0 !important;
    }

    html.admin-mobile-keyboard-open #modalAddAdmin .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
        bottom: var(--admin-keyboard-inset, 0px) !important;
    }

    #modalAddAdmin .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overflow-anchor: none;
        scroll-behavior: auto;
    }

    #modalAddAdmin .btn-form {
        width: auto !important;
        position: absolute !important;
        right: 16px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: 16px !important;
        z-index: 20;
        margin: 0 !important;
        transform: none !important;
        box-shadow: 0 -10px 18px 8px rgba(255, 255, 255, .94) !important;
    }
}

/* Product read-only details are available on both desktop and mobile. */
#products .mobile-product-view-details {
    display: flex !important;
}

@media screen and (max-width: 768px) {
    #products .show-details-btn {
        display: none !important;
    }

    #modalViewProductDetails .td-vertical-2 {
        overflow-wrap: anywhere;
    }
}

/* Desktop Banner edit feedback and shared delete-dialog sizing. */
@media screen and (min-width: 769px) {
    #banners .table-tab {
        overflow-x: auto;
    }

    #banners .table-tab table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td {
        box-sizing: border-box;
        padding-right: 10px;
        padding-left: 10px;
        text-align: center;
        vertical-align: middle;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:first-child {
        width: 5%;
        padding-left: 15px;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(2) {
        width: 9%;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(3) {
        width: 14%;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(4) {
        width: 13%;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(5),
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(6) {
        width: 10%;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(7),
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(8) {
        width: 13%;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:last-child {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        box-sizing: border-box;
        padding-right: 15px;
        padding-left: 15px;
    }

    @media (hover: hover) {
#modalEditBanner :is(.item-form-row, .singl-item-form-row):not(:focus-within):hover > :is(input, select, textarea),
#modalEditBanner :is(.item-form-row, .singl-item-form-row):not(:focus-within):hover
    .admin-mobile-select-control > select{
        background-color: #fff !important;
        box-shadow: inset 3px 0 0 #d7d7d7 !important;
    }
}

    #modalEditBanner :is(.item-form-row, .singl-item-form-row):focus-within > :is(input, select, textarea),
    #modalEditBanner :is(.item-form-row, .singl-item-form-row):focus-within
    .admin-mobile-select-control > select {
        background-color: #fff !important;
        box-shadow: inset 3px 0 0 #111 !important;
    }

    #modalDeleteBanner .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
    }

    #modalDeleteBanner .close-modal {
        position: fixed !important;
        top: 50px !important;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px) !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #banners .banner-inline-field {
        max-width: 100%;
        min-height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 12px;
        overflow: hidden;
        color: #222;
        line-height: 1.3;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: text;
        border: 1px solid transparent;
        border-radius: 8px;
        transition: background-color .16s ease, border-color .16s ease;
    }

    #banners .banner-inline-field[data-type="select"] {
        cursor: pointer;
    }

    @media (hover: hover) {
#banners .banner-inline-field:hover{
        background: #f7f7f7;
        border-color: #dedede;
        box-shadow: none;
    }
}

    #banners .banner-inline-control {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        display: block;
        height: 35px;
        min-height: 35px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 7px 12px;
        color: #222;
        font-size: inherit;
        font-weight: inherit;
        text-align: center;
        outline: 0;
        border: 1px solid #bdbdbd;
        border-radius: 8px;
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }

    #banners .banner-inline-image-wrapper {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
    }

    #banners .banner-inline-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        border-radius: inherit;
        background: rgba(0, 0, 0, .12);
        transition: opacity .16s ease;
    }

    #banners .banner-inline-image {
        width: 60px;
        height: 60px;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 10px;
        transition: border-color .16s ease;
    }

    @media (hover: hover) {
#banners .banner-inline-image-wrapper:hover::after{
        opacity: 1;
    }
}

}

/* Match desktop quick-edit feedback across Products, Categories, Discounts and Users. */
@media screen and (min-width: 769px) {
    :is(#products, #categories, #discounts, #users) .table-tab :is(.editable-text, .editable-select) {
        max-width: 100%;
        min-height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 12px;
        overflow: hidden;
        line-height: 1.3;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        cursor: text;
        border: 1px solid transparent;
        border-radius: 8px;
        transition: background-color .16s ease, border-color .16s ease;
    }

    :is(#products, #categories, #discounts, #users) .table-tab .editable-select {
        cursor: pointer;
    }

    @media (hover: hover) {
:is(#products, #categories, #discounts, #users) .table-tab :is(.editable-text, .editable-select):hover{
        background: #f7f7f7;
        border-color: #dedede;
        box-shadow: none;
    }
}

    #products .table-tab :is(.inline-edit-input, .inline-edit-select),
    #categories .table-tab :is(.inline-edit-input, .inline-edit-select),
    #users .table-tab :is(.inline-edit-input, .inline-edit-select),
    #discounts .table-tab .discount-inline-edit-control {
        height: 35px !important;
        min-height: 35px !important;
        min-width: 0;
        display: block;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 7px 12px !important;
        color: #222;
        font-size: inherit;
        font-weight: inherit;
        line-height: normal !important;
        text-align: center !important;
        outline: 0;
        border: 1px solid #bdbdbd;
        border-radius: 8px;
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }

    #products .product-row .image-wrapper,
    #categories .category-row .category-image-wrapper,
    #discounts .discount-product-image-wrapper {
        position: relative;
        overflow: hidden;
    }

    #products .product-row .image-wrapper {
        border-radius: 6px;
    }

    #categories .category-row .category-image-wrapper,
    #discounts .discount-product-image-wrapper {
        border-radius: 10px;
    }

    #products .product-row .image-wrapper::after,
    #categories .category-row .category-image-wrapper::after,
    #discounts .discount-product-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        border-radius: inherit;
        background: rgba(0, 0, 0, .12);
        transition: opacity .16s ease;
    }

    @media (hover: hover) {
#products .product-row .image-wrapper:hover::after,
#categories .category-row .category-image-wrapper:hover::after,
#discounts .discount-product-image-wrapper:hover::after{
        opacity: 1;
    }
}
}

/* Custom file picker for Add/Edit Banner forms. */
.banner-image-picker-text {
    display: none;
}

@media screen and (min-width: 769px) {
    :is(#modalAddBanner, #modalEditBanner) .banner-image-picker {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        background: #fff;
        transition: background-color .16s ease, box-shadow .16s ease;
    }

    @media (hover: hover) {
:is(#modalAddBanner, #modalEditBanner) .banner-image-picker:hover{
        background: #fff;
        box-shadow: inset 3px 0 0 #d7d7d7;
    }
}

    :is(#modalAddBanner, #modalEditBanner) .banner-image-picker:focus-within {
        background: #fff;
        box-shadow: inset 3px 0 0 #111;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-image-picker::before {
        content: 'Choose image';
        flex: 0 0 auto;
        margin: 0 10px 0 13px;
        padding: 6px 10px;
        color: #333;
        font-size: 10px;
        line-height: 1.3;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #f2f2f2;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-image-picker-text {
        min-width: 0;
        display: block;
        padding-right: 12px;
        overflow: hidden;
        color: #777;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-image-upload-field {
        width: 100%;
        height: 100%;
        min-height: 0;
        position: absolute;
        inset: 0;
        z-index: 2;
        margin: 0;
        padding: 0;
        cursor: pointer;
        opacity: 0;
    }
}

/* Keep the Discount amount and its percent suffix inside one desktop hover target. */
@media screen and (min-width: 769px) {
    #discounts .discount-amount-quick-field {
        max-width: 100%;
        min-height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
        padding: 0 12px;
        overflow: hidden;
        line-height: 1.3;
        vertical-align: middle;
        white-space: nowrap;
        border: 1px solid transparent;
        border-radius: 8px;
        transition: background-color .16s ease, border-color .16s ease;
    }

    @media (hover: hover) {
#discounts .discount-amount-quick-field:hover{
        background: #f7f7f7;
        border-color: #dedede;
    }
}

    #discounts .discount-amount-quick-field > .editable-text {
        min-height: 0;
        padding: 0;
        overflow: visible;
        line-height: inherit;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    @media (hover: hover) {
#discounts .discount-amount-quick-field:hover > .editable-text{
        border-color: transparent;
        background: transparent;
    }
}

    #discounts .discount-amount-quick-field > .discount-amount-suffix {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        line-height: inherit;
    }

    #discounts .discount-amount-quick-field:has(.discount-inline-edit-control) {
        max-width: none;
        padding: 0;
        overflow: visible;
        border-color: transparent;
        background: transparent;
    }
}

@media screen and (max-width: 768px) {
    :is(#modalAddBanner, #modalEditBanner) .banner-image-picker {
        width: 100%;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-image-upload-field {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        padding: 9px 10px;
    }
}

/* Put the Product/Image field immediately before Actions on mobile tables. */
@media screen and (max-width: 768px) {
    :is(#products, #categories, #discounts, #admins) .table-tab table,
    :is(#products, #categories, #discounts, #admins) .table-tab :is(thead, tbody) {
        width: 100%;
        display: block;
    }

    :is(#products, #categories, #discounts, #admins) .table-tab tr > td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: 1;
    }

    :is(#products, #categories, #discounts, #admins) .table-tab tr > td[colspan] {
        grid-column: 1 / -1;
    }

    #products .table-tab :is(thead tr, tbody tr) {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 74px 74px 72px 84px;
        align-items: stretch;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(3) {
        grid-column: 1;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(4) {
        grid-column: 2;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(5) {
        grid-column: 3;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(2) {
        grid-column: 4;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(8) {
        grid-column: 5;
    }

    #admins .table-tab :is(thead tr, tbody tr) {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .72fr) minmax(0, .75fr) 84px;
        align-items: stretch;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(2) {
        grid-column: 1;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(3) {
        grid-column: 2;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(4) {
        grid-column: 3;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(5) {
        grid-column: 4;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(7) {
        grid-column: 5;
    }

    #categories .table-tab :is(thead tr, tbody tr) {
        width: 100%;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) 72px 84px;
        align-items: stretch;
    }

    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(1) {
        grid-column: 1;
    }

    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(3) {
        grid-column: 2;
    }

    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(4) {
        grid-column: 3;
    }

    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(2) {
        grid-column: 4;
    }

    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(8) {
        grid-column: 5;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) {
        width: 100%;
        display: grid;
        grid-template-columns:
            minmax(0, 22fr)
            minmax(0, 19fr)
            minmax(0, 18fr)
            minmax(72px, 18fr)
            minmax(84px, 23fr);
        align-items: stretch;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(4) {
        grid-column: 1;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(5) {
        grid-column: 2;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(6) {
        grid-column: 3;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(2) {
        grid-column: 4;
    }

    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(12) {
        grid-column: 5;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8)),
    #admins .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(7)),
    #categories .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(8)),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(12)) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(2),
    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(2),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(2) {
        padding-right: 3px;
        padding-left: 3px;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(8),
    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(7),
    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(8),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(12) {
        flex-direction: column;
    }

    #products .product-row .image-wrapper,
    #categories .category-row .category-image-wrapper,
    #discounts .discount-product-image-wrapper {
        width: 56px;
        height: 56px;
    }

    #products .product-row .editable-image,
    #categories .category-row .editable-category-image,
    #discounts .discount-product-quick-edit,
    #discounts .mobile-discount-draft-product img {
        width: 56px;
        height: 56px;
    }

    #discounts .table-tab .product-tab img {
        width: 56px !important;
        height: 56px !important;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) {
        padding-right: 8px;
        padding-left: 8px;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(3) {
        padding-left: 2px;
    }

    #products .table-tab :is(thead tr, tbody tr) > td:nth-child(8) {
        padding-right: 2px;
        padding-left: 6px;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)),
    #categories .table-tab :is(thead tr, tbody tr) > td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6)) {
        padding-right: 8px;
        padding-left: 8px;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(2),
    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(1),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(4) {
        padding-left: 2px;
    }

    #admins .table-tab :is(thead tr, tbody tr) > td:nth-child(7),
    #categories .table-tab :is(thead tr, tbody tr) > td:nth-child(8),
    #discounts .table-tab :is(.discount-table-head, tbody tr) > td:nth-child(12) {
        padding-right: 2px;
        padding-left: 6px;
    }
}

/* Shared visual language for mobile Add rows. */
@media screen and (max-width: 768px) {
    :is(
        #categories .mobile-category-draft-row,
        #discounts .mobile-discount-draft-row,
        #admins .mobile-admin-draft-row
    ) {
        --mobile-draft-add-accent: #45a873;
        --mobile-draft-guide-accent: #e58a2b;
    }

    :is(
        #categories .mobile-category-draft-row,
        #discounts .mobile-discount-draft-row,
        #admins .mobile-admin-draft-row
    ) > td {
        border-bottom-color: #dedede;
        background: #fff;
    }

    #categories .mobile-category-draft-row .mobile-category-draft-field.is-empty,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-field.is-empty,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-type.is-default,
    #admins .mobile-admin-draft-row .admin-mobile-quick-field:is(.is-empty, .is-default) {
        color: var(--mobile-draft-guide-accent);
    }

    #categories .mobile-category-draft-row > td:first-child {
        color: var(--mobile-draft-guide-accent);
    }

    #discounts .mobile-discount-draft-row .discount-amount-suffix {
        display: none;
    }

    #categories .mobile-category-draft-row .mobile-category-draft-image,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-product img {
        box-sizing: border-box;
        padding: 0;
        opacity: .86;
        border-color: var(--mobile-draft-guide-accent);
        border-style: dashed;
        object-fit: contain;
        object-position: center;
        background: #fff;
    }

    #categories .mobile-category-draft-row .mobile-category-draft-image.has-draft-image,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-product.has-draft-product img {
        opacity: 1;
        border-color: #ccc;
        border-style: solid;
        object-fit: cover;
    }

    #categories .mobile-category-draft-row .mobile-category-draft-details,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-details,
    #admins .mobile-admin-draft-row .mobile-admin-draft-details {
        color: var(--mobile-draft-add-accent);
        border-color: var(--mobile-draft-add-accent);
        background: #fff;
    }

    #categories .mobile-category-draft-row .mobile-category-draft-reset,
    #discounts .mobile-discount-draft-row .mobile-discount-draft-reset,
    #admins .mobile-admin-draft-row .mobile-admin-draft-reset {
        color: var(--mobile-draft-guide-accent);
        border-color: var(--mobile-draft-guide-accent);
        background: #fff;
    }
}

/* Match Categories mobile row rhythm to Orders. */
@media screen and (max-width: 768px) {
    #categories .table-tab tbody tr > td {
        height: auto;
        min-height: 0;
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

/* Semantic action colors shared by every admin tab. */
#modalViewProductDetails .duplicate-only-field {
    display: none;
}
#saveMobileDuplicate {
    display: none;
}
@media screen and (max-width: 768px) {
    #modalViewProductDetails.is-duplicate-view[data-duplicate-source] #saveMobileDuplicate {
        display: block;
        width: 100%;
        min-height: 48px;
        margin-top: 16px;
        border-radius: 10px;
        padding: 12px 16px;
        border: 1px solid #000;
        background: #000;
        color: #fff;
        -webkit-text-fill-color: #fff;
        font: inherit;
        font-weight: 500;
        cursor: pointer;
    }
    #modalViewProductDetails #saveMobileDuplicate:disabled {
        opacity: .6;
        cursor: wait;
    }
    #modalViewProductDetails.is-duplicate-view .duplicate-only-field {
        display: grid;
    }
}
.product-edit-fields {
    display: contents;
}
@media screen and (max-width: 768px) {
    #modalDetailsProducts.is-duplicate-editor .product-edit-fields {
        display: block;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 16px;
    }
    #modalDetailsProducts.is-duplicate-editor .product-edit-fields .form-row {
        margin: 0;
        padding: 0;
    }
    #modalDetailsProducts.is-duplicate-editor .product-edit-fields :is(.item-form, .singl-item-form) {
        margin: 0;
        border: 0;
        border-bottom: 1px solid #ccc;
        border-radius: 0 !important;
        box-shadow: none;
    }
    #modalDetailsProducts.is-duplicate-editor .product-edit-fields label {
        background: #f2f2f2;
        border-right-color: #ccc;
    }
    #modalDetailsProducts.is-duplicate-editor .product-detail-input {
        background-color: #fbfbfb;
    }
}
#products .duplicate-product-btn{
    color: #198754;
    border-color: #198754;
    background-color: transparent;
}
@media (hover: hover) {
#products .duplicate-product-btn:hover{
    color: #198754;
    border-color: #198754;
    background-color: transparent;
}
}

#products .duplicate-product-btn:active {
    background-color: rgba(25, 135, 84, .12);
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
    #products .duplicate-product-btn:hover {
        color: #fff;
        border-color: #198754;
        background-color: #198754;
    }
}

.content-dashboard {
    --admin-edit-action-color: #2f80ed;
    --admin-view-action-color: orange;
}

.content-dashboard .btn-edit-tab {
    color: var(--admin-edit-action-color);
    border-color: var(--admin-edit-action-color);
    background-color: transparent;
}

.content-dashboard .btn-view-details {
    color: var(--admin-view-action-color);
    border-color: var(--admin-view-action-color);
    background-color: transparent;
}

.content-dashboard .btn-order-tab {
    color: var(--admin-view-action-color);
    border-color: var(--admin-view-action-color);
    background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .content-dashboard .btn-edit-tab:hover {
        color: #fff;
        border-color: var(--admin-edit-action-color);
        background-color: var(--admin-edit-action-color);
    }

    .content-dashboard .btn-view-details:hover,
    .content-dashboard .btn-order-tab:hover {
        color: #fff;
        border-color: var(--admin-view-action-color);
        background-color: var(--admin-view-action-color);
    }
}

@media (hover: none), (pointer: coarse) {
    @media (hover: hover) {
.content-dashboard .btn-edit-tab:hover{
        color: var(--admin-edit-action-color);
        border-color: var(--admin-edit-action-color);
        background-color: transparent;
    }
}

    @media (hover: hover) {
.content-dashboard .btn-view-details:hover,
.content-dashboard .btn-order-tab:hover,
.content-dashboard #products .btn-view-details:hover{
        color: var(--admin-view-action-color);
        border-color: var(--admin-view-action-color);
        background-color: transparent;
    }
}

    .content-dashboard .btn-edit-tab:active {
        background-color: rgba(47, 128, 237, .12);
    }

    .content-dashboard .btn-view-details:active,
    .content-dashboard .btn-order-tab:active {
        background-color: rgba(255, 165, 0, .14);
    }
}

/* Show complete product titles and let them wrap naturally on mobile. */
@media screen and (max-width: 768px) {
    #products .table-tab tbody .product-row > td:nth-child(3) {
        text-overflow: clip;
        white-space: normal;
    }

    #products .table-tab tbody .product-row .editable-text[data-field="title"] {
        width: 100%;
        max-height: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.45;
        -webkit-line-clamp: unset;
    }
}

/* Compact Banners table and read-only details action on mobile. */
#banners .mobile-banner-view-details {
    display: none !important;
}

@media screen and (max-width: 768px) {
    #banners .mobile-banner-view-details {
        display: flex !important;
    }

    #banners .btn-edit-banner {
        display: none !important;
    }

    #banners .table-tab table,
    #banners .table-tab tbody {
        width: 100%;
        display: block;
        table-layout: fixed;
    }

    #banners .table-tab :is(.tr-head, .banner-row) {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 74px 62px 64px 84px;
        align-items: stretch;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: 1;
        box-sizing: border-box;
        padding: 20px 5px;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(1),
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(6),
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(7),
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(8) {
        display: none !important;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(3) { grid-column: 1; }
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(4) { grid-column: 2; }
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(5) { grid-column: 3; }
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(2) { grid-column: 4; }
    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(9) { grid-column: 5; }

    #banners .table-tab :is(.tr-head, .banner-row) > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(9)) {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #banners .table-tab :is(.tr-head, .banner-row) > td:nth-child(9) {
        flex-direction: column;
        padding-right: 6px;
        padding-left: 6px;
    }

    #banners .banner-inline-image-wrapper,
    #banners .banner-inline-image {
        width: 56px;
        height: 56px;
    }

    #banners .banner-inline-image {
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border: 1px solid #dedede;
        border-radius: 10px;
    }

    #banners .banner-inline-field {
        max-width: 100%;
        overflow: hidden;
        line-height: 1.4;
        text-overflow: ellipsis;
        overflow-wrap: anywhere;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #banners .banner-inline-field[data-field="title"] {
        white-space: normal;
        text-overflow: clip;
    }

    #modalDetailsBanner .td-vertical-2 {
        overflow-wrap: anywhere;
    }

    #modalDetailsBanner .banner-detail-inline-edit {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #modalDetailsBanner .banner-detail-editable-row {
        position: relative;
    }

    #modalDetailsBanner .banner-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }

    #mobileBannerImagePreview {
        width: 66px;
        height: 66px;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
        border: 1px solid #d2d2d2;
        border-radius: 10px;
        background: #fff;
    }

    #mobileBannerImageFileName {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mobileBannerImageInput {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

/* Mobile Add Banner row, aligned with the other admin draft rows. */
#banners .mobile-banner-draft-row {
    display: none;
}

@media screen and (max-width: 768px) {
    #banners > .widget-tab > .item-tab > .btn-add-new,
    #banners .banners-controls-row > .btn-add-new {
        display: none !important;
    }

    #banners .mobile-banner-draft-row {
        --mobile-banner-add-accent: #45a873;
        --mobile-banner-guide-accent: #e58a2b;
        display: grid;
    }

    #banners .mobile-banner-draft-row > td {
        border-bottom-color: #dedede;
        background: #fff;
    }

    #banners .mobile-banner-draft-row .mobile-banner-draft-field:is(.is-empty, .is-default) {
        color: var(--mobile-banner-guide-accent);
        font-style: italic;
    }

    #banners .mobile-banner-draft-row .mobile-banner-draft-image {
        padding: 0;
        opacity: .86;
        cursor: pointer;
        border-color: var(--mobile-banner-guide-accent);
        border-style: dashed;
        object-fit: contain;
        object-position: center;
        background: #fff;
    }

    #banners .mobile-banner-draft-row .mobile-banner-draft-image-wrapper.has-draft-image .mobile-banner-draft-image {
        opacity: 1;
        border-color: #dedede;
        border-style: solid;
        object-fit: cover;
    }

    #banners .mobile-banner-draft-row .mobile-banner-draft-details {
        color: var(--mobile-banner-add-accent);
        border-color: var(--mobile-banner-add-accent);
        background: #fff;
    }

    #banners .mobile-banner-draft-row .mobile-banner-draft-reset {
        color: var(--mobile-banner-guide-accent);
        border-color: var(--mobile-banner-guide-accent);
        background: #fff;
    }

    @media (hover: hover) {
#banners .mobile-banner-draft-row .mobile-banner-draft-details:hover{
        color: var(--mobile-banner-add-accent);
        border-color: var(--mobile-banner-add-accent);
        background: #fff;
    }
}

    @media (hover: hover) {
#banners .mobile-banner-draft-row .mobile-banner-draft-reset:hover{
        color: var(--mobile-banner-guide-accent);
        border-color: var(--mobile-banner-guide-accent);
        background: #fff;
    }
}
}

/* Native dates remain on desktop; mobile uses keyboard-safe custom selects. */
:is(
    #modalAddBanner .banner-mobile-date-selects,
    #modalEditBanner .banner-mobile-date-selects,
    #modalAddDiscount .discount-mobile-date-selects,
    #modalEditDiscount .discount-mobile-date-selects
) {
    display: none;
}

@media screen and (max-width: 768px) {
    :is(#modalAddBanner, #modalEditBanner) .scroll-modal > h3 {
        margin-bottom: 24px;
    }

    :is(#modalAddBanner, #modalEditBanner) form {
        display: flex !important;
        flex-direction: column;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-date-form-row {
        order: -1;
    }

    :is(#modalAddDiscount, #modalEditDiscount) .discount-date-field {
        order: -10 !important;
    }

    #modalAddDiscount .discount-add-status-field {
        order: -5 !important;
    }

    #modalEditDiscount .discount-edit-status-field {
        order: -5 !important;
    }

    #modalEditDiscount .discount-edit-product-field {
        order: -20 !important;
    }

    #modalEditDiscount .mobile-hidden-discount-quick-field {
        display: none !important;
    }

    :is(#modalAddBanner, #modalEditBanner).admin-generic-sheet .modal-content,
    :is(#modalAddBanner, #modalEditBanner).admin-tall-form-sheet .modal-content {
        height: min(470px, var(--admin-sheet-max-height, 82dvh)) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
    }

    :is(#modalAddBanner, #modalEditBanner).admin-generic-sheet .scroll-modal,
    :is(#modalAddBanner, #modalEditBanner).admin-tall-form-sheet .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    :is(#modalAddBanner, #modalEditBanner) :is(.btn-submit-form, .btn-form) {
        margin-bottom: 0 !important;
    }

    /* Keep the Banner save action fully above the software keyboard without
       changing its normal, keyboard-closed position. */
    html.admin-mobile-keyboard-open :is(
        #modalAddBanner,
        #modalEditBanner,
        #modalAddDiscount,
        #modalEditDiscount
    ) .scroll-modal {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    html.admin-mobile-keyboard-open :is(
        #modalAddBanner,
        #modalEditBanner,
        #modalAddDiscount,
        #modalEditDiscount
    ) :is(.btn-submit-form, .btn-form) {
        width: auto !important;
        position: absolute !important;
        right: 16px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: 16px !important;
        z-index: 20;
        margin: 0 !important;
    }

    :is(#modalAddBanner, #modalEditBanner) .banner-native-date-input,
    :is(#modalAddDiscount, #modalEditDiscount) .discount-native-date-input,
    :is(#modalAddBanner, #modalEditBanner) .mobile-hidden-banner-image-row,
    :is(#modalAddBanner, #modalEditBanner) .mobile-hidden-banner-table-field {
        display: none !important;
    }

    :is(
        #modalAddBanner .banner-mobile-date-selects,
        #modalEditBanner .banner-mobile-date-selects,
        #modalAddDiscount .discount-mobile-date-selects,
        #modalEditDiscount .discount-mobile-date-selects
    ) {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.18fr);
        gap: 7px;
        box-sizing: border-box;
    }

    :is(
        #modalAddBanner .banner-mobile-date-selects,
        #modalEditBanner .banner-mobile-date-selects,
        #modalAddDiscount .discount-mobile-date-selects,
        #modalEditDiscount .discount-mobile-date-selects
    ) > :is(select, .admin-mobile-select-control) {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    :is(
        #modalAddBanner .banner-mobile-date-selects,
        #modalEditBanner .banner-mobile-date-selects,
        #modalAddDiscount .discount-mobile-date-selects,
        #modalEditDiscount .discount-mobile-date-selects
    ) .admin-mobile-select-trigger {
        min-width: 0;
        padding-right: 25px;
        padding-left: 9px;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Products mobile forms only contain details that are not quick-editable in
   the visible table; keep their sheets compact until the keyboard opens. */
@media screen and (max-width: 768px) {
    :is(#modalAddProduct, #modalDetailsProducts) .product-mobile-priority-category {
        order: -30 !important;
    }

    :is(#modalAddProduct, #modalDetailsProducts) .product-mobile-priority-availability {
        order: -29 !important;
    }

    :is(#modalAddProduct, #modalDetailsProducts) .product-mobile-priority-status {
        order: -28 !important;
    }

    #modalAddProduct #FormAdd > .mobile-product-draft-images-row {
        display: none !important;
    }

    #modalDetailsProducts .mobile-product-table-managed {
        display: none !important;
    }

    #modalAddProduct .modal-content {
        height: min(620px, calc(100dvh - 74px)) !important;
        max-height: min(620px, calc(100dvh - 74px)) !important;
    }

    #modalDetailsProducts .modal-content {
        height: min(650px, calc(100dvh - 74px)) !important;
        max-height: min(650px, calc(100dvh - 74px)) !important;
    }

    :is(#modalAddProduct, #modalDetailsProducts) .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
    }

    html.admin-mobile-keyboard-open :is(#modalAddProduct, #modalDetailsProducts) .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
    }
}

/* Content Pages: functional edit/delete dialogs and a first-row mobile add
   entry, following the same visual language as the other admin tabs. */
#content_pages .btn-view-content-page {
    display: none;
}

.mobile-content-page-draft-row {
    display: none;
}

@media screen and (min-width: 769px) {
    #modalEditContentPage .form-tab > form {
        display: block;
    }

    #modalEditContentPage .form-row {
        display: block;
    }

    #modalEditContentPage .item-form-row {
        width: 100%;
        min-width: 0;
        margin: 0 0 14px;
        display: grid;
        grid-template-columns: var(--admin-form-label-width, 170px) minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-radius: 10px;
        background: #fff;
        transition: border-color .16s ease, box-shadow .16s ease;
    }

    #modalEditContentPage .item-form-row > label {
        min-height: 48px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 12px 14px;
        border-right: 1px solid #e1e1e1;
        background: #f3f3f3;
    }

    #modalEditContentPage .item-form-row > :is(input, select, textarea) {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0;
        padding: 12px 14px;
        color: #222;
        border: 0;
        outline: 0;
        background: #fff;
    }

    #modalEditContentPage .item-form-row > textarea {
        min-height: 112px;
        resize: vertical;
    }

    @media (hover: hover) {
#modalEditContentPage .item-form-row:hover{
        border-color: #c9c9c9;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }
}

    @media (hover: hover) {
#modalEditContentPage .item-form-row:hover > :is(input, select, textarea){
        box-shadow: inset 3px 0 0 #d7d7d7;
    }
}

    #modalEditContentPage .item-form-row:focus-within {
        border-color: #bdbdbd;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
    }

    #modalEditContentPage .item-form-row:focus-within > :is(input, select, textarea) {
        box-shadow: inset 3px 0 0 #111;
    }

    :is(#modalAddContentPages, #modalEditContentPage) .modal-content {
        width: min(760px, calc(100vw - 40px));
        max-width: 760px;
        border-radius: 18px;
    }

    #modalDeleteContentPage .modal-content {
        width: min(520px, calc(100vw - 40px)) !important;
        max-width: 520px !important;
        border-radius: 18px !important;
    }

    #modalDeleteContentPage .close-modal {
        position: fixed !important;
        top: 50px !important;
        right: max(calc((100vw - 520px) / 2 + 34px), 34px) !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #modalDeleteContentPage #deleteContentPageForm > p {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 768px) {
    #content_pages > .widget-tab > .item-tab > .con-add-new,
    #content_pages .content-pages-controls-row > .con-add-new {
        display: none;
    }

    #content_pages .mobile-content-page-draft-row {
        --mobile-content-page-add-accent: #45a873;
        --mobile-content-page-guide-accent: #e58a2b;
        display: grid;
    }

    #content_pages .btn-edit-content-page {
        display: none !important;
    }

    #content_pages .btn-view-content-page {
        display: flex;
    }

    #modalDetailsContentPage .content-page-detail-inline-edit {
        cursor: pointer;
        overflow-wrap: anywhere;
        -webkit-tap-highlight-color: transparent;
    }

    #modalDetailsContentPage .content-page-detail-editable-row {
        position: relative;
    }

    #modalDetailsContentPage .content-page-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }

    #content_pages .table-tab :is(thead tr, tbody tr) {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, .78fr) 64px 84px;
        align-items: stretch;
    }

    #content_pages .table-tab :is(thead tr, tbody tr) > td {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-right: 6px;
        padding-left: 6px;
        overflow-wrap: anywhere;
        text-align: center;
    }

    #content_pages .table-tab :is(thead tr, tbody tr) > td:last-child {
        flex-direction: column;
        padding-right: 2px;
        padding-left: 6px;
    }

    #content_pages .mobile-content-page-draft-row > td {
        color: #777;
        font-style: italic;
        border-bottom-color: #dedede;
        background: #fff;
    }

    #content_pages .mobile-content-page-draft-field:is(.is-empty, .is-default),
    #content_pages .mobile-content-page-draft-date {
        color: var(--mobile-content-page-guide-accent);
    }

    #content_pages .mobile-content-page-draft-field {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #content_pages .mobile-content-page-draft-details {
        color: var(--mobile-content-page-add-accent);
        font-style: normal;
        border-color: var(--mobile-content-page-add-accent);
        background: #fff;
    }

    #content_pages .mobile-content-page-draft-reset {
        color: var(--mobile-content-page-guide-accent);
        font-style: normal;
        border-color: var(--mobile-content-page-guide-accent);
        background: #fff;
    }

    :is(#modalAddContentPages, #modalEditContentPage) .modal-content {
        height: min(470px, calc(100dvh - 74px)) !important;
        max-height: min(470px, calc(100dvh - 74px)) !important;
    }

    :is(#modalAddContentPages, #modalEditContentPage) .scroll-modal {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }

    :is(#modalAddContentPages, #modalEditContentPage) .scroll-modal > h3 {
        margin-bottom: 26px !important;
    }

    html.admin-mobile-keyboard-open :is(#modalAddContentPages, #modalEditContentPage) .modal-content {
        height: var(--admin-sheet-max-height, 82dvh) !important;
        max-height: var(--admin-sheet-max-height, 82dvh) !important;
    }

    #modalDeleteContentPage .scroll-modal > h3 {
        margin-bottom: 18px !important;
    }

    #modalDeleteContentPage #deleteContentPageForm > p {
        margin: 0;
        padding: 18px 0;
        color: #333;
        line-height: 1.6;
    }

    #modalDeleteContentPage .buttons-delete {
        margin-top: 12px;
    }
}

@media screen and (max-width: 768px) and (hover: none) {
    #modalViewProductDetails .product-view-inline-edit {
        pointer-events: auto !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #modalViewProductDetails .product-view-editable-row {
        position: relative;
    }

    #modalViewProductDetails .product-view-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        left: auto;
        height: auto;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    #modalDetailsAdmin .admin-detail-inline-edit {
        pointer-events: auto !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #modalDetailsAdmin .admin-detail-editable-row {
        position: relative;
    }

    #modalDetailsAdmin .admin-detail-editable-row::after {
        content: "Tap to edit";
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: #2a7ae0;
        font-size: 9px;
        line-height: 1;
        opacity: .85;
        pointer-events: none;
    }

    @media (hover: hover) {
#content_pages .mobile-content-page-draft-details:hover{
        color: #45a873;
        border-color: #45a873;
        background: #fff;
    }
}

    @media (hover: hover) {
#content_pages .mobile-content-page-draft-reset:hover{
        color: #e58a2b;
        border-color: #e58a2b;
        background: #fff;
    }
}
}
.demo-payment-note {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #f7fafc;
    color: #425466;
    font-size: 13px;
    line-height: 1.65;
}

.demo-payment-note strong {
    color: #111827;
    font-size: 14px;
}

/* Shared close control based on the mobile navigation overlay. */
:is(.closeNav, .close-modal-btn, .search-panel-dialog .close-search) {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 0 2px;
    color: #333;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    outline: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: color .15s ease, transform .15s ease;
}
@media (hover: hover) {
:is(.closeNav, .close-modal-btn, .search-panel-dialog .close-search):hover{
    background: transparent;
    transform: scale(1.08);
}
}
@media (hover: hover) {
:is(.closeNav, .close-modal-btn, .search-panel-dialog .close-search):hover{
    color: #000;
}
}
@media (hover: none) {
    @media (hover: hover) {
:is(.closeNav, .close-modal-btn, .search-panel-dialog .close-search):hover{
        transform: none;
    }
}
    :is(.closeNav, .close-modal-btn, .search-panel-dialog .close-search):active {
        background: transparent;
        transform: scale(.94);
    }
}

/* One viewport frame for every admin sheet, including nested field editors.
   The frame already excludes the keyboard; do not subtract its inset twice. */
@media screen and (max-width: 768px) {
    html body .admin-viewport-overlay[id] {
        position: fixed !important;
        top: var(--admin-overlay-top, 0px) !important;
        bottom: auto !important;
        height: var(--admin-overlay-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--admin-overlay-height, 100dvh) !important;
        margin-top: 0 !important;
    }
    html body .admin-viewport-overlay[id] > :is(.modal-content, .mobile-product-editor-sheet, .mobile-product-images-sheet) {
        top: auto !important;
        bottom: 0 !important;
        max-height: calc(var(--admin-overlay-height, 100dvh) - 8px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    html body .admin-viewport-overlay[id] .scroll-modal {
        max-height: calc(var(--admin-overlay-height, 100dvh) - 38px) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media screen and (max-width: 360px) {
    .header .container { padding-inline: 12px; }
    .header .logo > a { font-size: 15px; letter-spacing: 2px; }
    .header .list-icons > ul > li { padding: 0 2px; }
    .header .list-icons .header-action { width: 32px; height: 32px; }
    .header .list-icons .header-action svg { width: 18px; height: 18px; }
}

/* Journal, About and Contact pages ******************************************/
/* Same language as the homepage: cream ground, Georgia headlines, rust "NIVOX / ..." kickers,
   one ink button, underlined text links, square edges. Shared pieces use the page- prefix. */
.journal-page,
.house-page,
.concierge-page{
    padding-top: 70px;
    color: #33251f;
}
.page-crumb{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-crumb a{
    color: inherit;
    transition: color .25s ease;
}
.page-crumb [aria-current]{
    color: #33251f;
}
@media (hover: hover) {
.page-crumb a:hover{
    color: #33251f;
}
}
.page-kicker{
    display: block;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.page-title{
    margin-top: 14px;
    font-size: clamp(40px, 4.3vw, 62px);
    line-height: 1.04;
    letter-spacing: -2px;
    text-wrap: balance;
}
.page-head-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: 48px;
    align-items: end;
}
/* a link in the head row keeps the width of its words, so its underline ends with them */
.page-head-row > .page-link{
    justify-self: end;
}
.page-head-row > p{
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
/* dark buttons keep their colour on hover; only the arrow moves */
.page-button{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-width: 270px;
    padding: 17px 18px 17px 24px;
    border: 1px solid #33251f;
    background-color: #33251f;
    color: #f6f2eb;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease;
}
.page-button span{
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    transition: transform .45s cubic-bezier(.18, .64, .27, 1);
}
.page-button:disabled{
    opacity: .6;
    cursor: wait;
}
.page-link{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .35s ease, border-color .35s ease;
}
.page-link span{
    display: inline-block;
    font-size: 16px;
    line-height: .7;
    transition: transform .45s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.page-link:hover{
    color: #9b5a33;
}
}
@media (hover: hover) {
.page-link:hover span,
.page-button:hover span,
.site-letters-form button:hover span{
    transform: translate(3px, -3px);
}
}
@media (hover: hover) {
.house-cta .page-link:hover{
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .6);
}
}
.page-button:focus-visible,
.page-link:focus-visible,
.page-crumb a:focus-visible{
    outline: 1px solid currentColor;
    outline-offset: 4px;
}
/* Mirrors the homepage "NIVOX Promise" grid. */
.page-cells{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    list-style: none;
}
.page-cells--three{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-cell{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 56px;
    min-height: 250px;
    padding: 28px 28px 30px;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.page-cell:first-child{
    padding-left: 0;
    border-left: 0;
}
.page-cell-label{
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.page-cell h3{
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 1.2;
}
.page-cell p{
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.page-cell .page-link{
    margin-top: 22px;
}

/* Journal (blog): laid out like a magazine rather than a product grid. */
.journal-mast{
    padding-top: 40px;
}
.journal-mast-top{
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.journal-mast-top .page-crumb{
    margin-bottom: 0;
}
.journal-name{
    margin-top: 44px;
    font-size: clamp(64px, 13vw, 188px);
    line-height: .86;
    letter-spacing: -.045em;
    white-space: nowrap;
}
.journal-name span{
    color: #9b5a33;
}
.journal-mast-sub{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
    padding: 28px 0 36px;
}
.journal-mast-sub > p:first-child{
    max-width: 46ch;
    color: #756a61;
    font-size: 16px;
    line-height: 1.85;
}
.journal-issue,
.journal-meta,
.journal-byline{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.journal-filter{
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding: 0;
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
/* the category bar stays under the fixed site header down the whole page */
.journal-filter-bar{
    position: sticky;
    top: 70px;
    z-index: 50;
    background-color: #f6f2eb;
}
/* categories as cells divided by the bar's own hairline; the chosen one takes the shop tabs' tint */
.journal-cats{
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.journal-cats::-webkit-scrollbar{
    display: none;
}
.journal-cats a{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 24px 24px;
    color: #756a61;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .25s ease, background-color .25s ease;
    cursor: pointer;
}
.journal-cats a + a{
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.journal-cats a.active{
    color: #33251f;
    background-color: #ece3d7;
}
@media (hover: hover) {
.journal-cats a:hover{
    color: #33251f;
}
}
.journal-search{
    box-sizing: border-box;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 300px;
    margin-left: auto;
    padding: 0 0 0 24px;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.journal-search input{
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 13px;
}
.journal-search input::placeholder{
    color: #756a61;
}
/* a suggestion picked from the browser keeps the bar's cream, not the browser's blue */
.journal-search input:-webkit-autofill,
.journal-search input:-webkit-autofill:hover,
.journal-search input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px #f6f2eb inset;
    -webkit-text-fill-color: #33251f;
    caret-color: #33251f;
    transition: background-color 9999s ease-out 0s;
}
.journal-search button{
    display: flex;
    color: #33251f;
}
.journal-search input::-webkit-search-cancel-button{
    display: none;
}
.journal-search button[hidden]{
    display: none;
}
.journal-search .journal-search-clear{
    color: #33251f;
    transition: opacity .25s ease;
}
@media (hover: hover) {
.journal-search .journal-search-clear:hover{
    opacity: .7;
}
}
.journal-search svg{
    width: 16px;
    height: 16px;
}

.journal-empty{
    padding: 96px 0 140px;
    color: #756a61;
    font-size: 15px;
}
.journal-cover{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 64px 0 168px;
}
.journal-cover-media{
    display: block;
    grid-column: 1 / 10;
    grid-row: 1;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #e8e0d6;
}
.journal-cover-media img,
.journal-feature-media img,
.journal-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
    will-change: transform;
}
@media (hover: hover) {
.journal-cover-media:hover img,
.journal-feature-media:hover img{
    transform: scale(1.04);
}
}
.journal-cover-copy{
    position: relative;
    z-index: 1;
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: end;
    margin-bottom: -64px;
    padding: 44px 0 0 44px;
    background-color: #f6f2eb;
}
.journal-cover-copy h2{
    margin: 16px 0 18px;
    font-size: clamp(32px, 3.3vw, 46px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-wrap: balance;
}
.journal-cover-copy h2 a,
.journal-feature-copy h3 a{
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .45s ease;
}
@media (hover: hover) {
.journal-cover:hover .journal-cover-media img,
.journal-feature:hover .journal-feature-media img{
    transform: scale(1.04);
}
}
@media (hover: hover) {
.journal-cover-copy h2 a:hover,
.journal-feature-copy h3 a:hover{
    background-size: 100% 1px;
}
}
.journal-cover-copy > p:not(.journal-byline){
    max-width: 42ch;
    color: #756a61;
    font-size: 15px;
    line-height: 1.8;
}
.journal-byline{
    display: flex;
    gap: 18px;
    margin: 24px 0 30px;
}
.journal-number{
    color: #9b5a33;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.journal-issue-section .page-head-row{
    padding-bottom: 56px;
}
.journal-feature{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
    align-items: center;
    padding-bottom: 128px;
}
.journal-feature-media{
    display: block;
    grid-column: 1 / 8;
    grid-row: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: #e8e0d6;
}
.journal-feature-copy{
    display: grid;
    justify-items: start;
    gap: 16px;
    grid-column: 9 / 13;
    grid-row: 1;
}
.journal-feature--reverse .journal-feature-media{
    grid-column: 8 / 13;
    aspect-ratio: 4 / 5;
}
.journal-feature--reverse .journal-feature-copy{
    grid-column: 2 / 7;
}
.journal-feature-copy h3{
    font-size: clamp(30px, 2.9vw, 40px);
    line-height: 1.1;
    letter-spacing: -1px;
    text-wrap: balance;
}
.journal-feature-copy > p{
    max-width: 40ch;
    color: #756a61;
    font-size: 14px;
    line-height: 1.8;
}
.journal-quote{
    padding: 112px 0;
    background-color: #e8e0d6;
}
.journal-quote blockquote p{
    max-width: 19em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3.8vw, 54px);
    font-style: italic;
    line-height: 1.14;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.journal-quote blockquote p::before{
    content: "\201C";
    display: block;
    margin-bottom: 18px;
    color: #9b5a33;
    font-size: 120px;
    font-style: normal;
    line-height: .6;
}
.journal-quote cite{
    display: block;
    margin-top: 30px;
    color: #756a61;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.journal-index{
    padding: 120px 0 80px;
}
/* a category's cover story sits close above its index, with room to breathe */
.journal-cover:last-child{
    padding-bottom: 96px;
}
/* search results sit right under the line that counts them */
.journal-index.is-search{
    padding-top: 48px;
}
.journal-index-head{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 40px;
}
.journal-rows{
    border-top: 1px solid #33251f;
}
.journal-row{
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 150px 130px 24px;
    gap: 24px;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.journal-row h3{
    font-size: clamp(24px, 2.3vw, 32px);
    line-height: 1.15;
    letter-spacing: -.8px;
    transition: transform .6s cubic-bezier(.18, .64, .27, 1), color .35s ease;
}
@media (hover: hover) {
.journal-row:hover h3{
    color: #9b5a33;
    transform: translateX(14px);
}
}
.journal-row-mobile{
    display: none;
}
.journal-row-arrow{
    justify-self: end;
    font-size: 18px;
    transition: transform .45s cubic-bezier(.18, .64, .27, 1), color .35s ease;
}
@media (hover: hover) {
.journal-row:hover .journal-row-arrow{
    color: #9b5a33;
    transform: translate(3px, -3px);
}
}
.journal-thumb{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 58%;
    width: 170px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #e8e0d6;
    box-shadow: 0 18px 40px -18px rgba(51, 37, 31, .5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) rotate(-3deg) scale(.92);
    transition: opacity .45s ease, transform .6s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.journal-row:hover .journal-thumb{
    opacity: 1;
    transform: translateY(-50%) rotate(-3deg) scale(1);
}
}
.journal-row:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 6px;
}

/* "The Private List" sign-up */
.site-letters{
    padding: 0 0 108px;
    background-color: #f6f2eb;
}
/* a card as wide as the page's content, apart from the footer, in the FAQ card's tint */
.site-letters-inner{
    box-sizing: border-box;
    padding: 72px 64px;
    background-color: #ece3d7;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
}
.site-letters-form{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #33251f;
}
.site-letters-form input{
    flex: 1;
    min-width: 0;
    padding: 16px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 16px;
}
.site-letters-form input::placeholder{
    color: #756a61;
}
.site-letters-form button{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 16px 16px;
    color: #33251f;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .35s ease;
}
.site-letters-form button span{
    display: inline-block;
    font-size: 16px;
    line-height: .7;
    transition: transform .45s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.site-letters-form button:hover{
    color: #9b5a33;
}
}
.site-letters-form button:disabled{
    opacity: .6;
    cursor: wait;
}
.site-letters-form:focus-within{
    box-shadow: 0 1px 0 #33251f;
}
.site-letters-form button:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 4px;
}
.site-letters-note{
    margin-top: 14px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.site-letters-note.is-error{
    color: #9b5a33;
}
.visually-hidden-journal{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* About: "The House" */
.house-hero{
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(min(95%, 1400px) * .46) calc(min(95%, 1400px) * .54) minmax(0, 1fr);
}
.house-hero-copy{
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 64px;
    padding: 64px 56px 36px 0;
}
.house-title{
    margin-top: 18px;
    font-size: clamp(48px, 5.4vw, 78px);
    line-height: 1.03;
    letter-spacing: -3px;
    text-wrap: balance;
}
.house-lede{
    max-width: 42ch;
    margin: 26px 0 36px;
    color: #756a61;
    font-size: 16px;
    line-height: 1.85;
}
.house-index{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(51, 37, 31, .14);
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.house-hero-media{
    grid-column: 3 / 5;
    min-height: 640px;
    overflow: hidden;
    background-color: #e8e0d6;
}
.house-hero-media img,
.house-story-media img,
.house-cta img,
.concierge-visual img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.house-hero-media img{
    object-position: 62% center;
}
.house-manifesto{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    padding: 128px 0;
}
.house-manifesto p{
    max-width: 980px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3.3vw, 46px);
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: pretty;
}
.house-manifesto p span{
    color: #756a61;
}
.house-story{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
    align-items: end;
    padding-bottom: 128px;
}
.house-story-media{
    overflow: hidden;
    background-color: #e8e0d6;
}
.house-story-media--large{
    grid-column: 1 / 6;
    aspect-ratio: 4 / 5;
}
.house-story-media--small{
    grid-column: 6 / 9;
    aspect-ratio: 3 / 4;
}
.house-story-copy{
    display: grid;
    gap: 18px;
    grid-column: 9 / 13;
}
.house-story-copy h2{
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.8px;
    text-wrap: balance;
}
.house-story-copy p{
    color: #756a61;
    font-size: 14px;
    line-height: 1.85;
}
.house-making{
    padding-bottom: 128px;
}
.house-cta{
    position: relative;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto 128px;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background-color: #e8e0d6;
    color: #fff;
}
.house-cta img{
    position: absolute;
    inset: 0;
}
.house-cta::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(51, 37, 31, .72), rgba(51, 37, 31, .15) 65%);
}
.house-cta-copy{
    position: absolute;
    z-index: 1;
    right: 56px;
    bottom: 52px;
    left: 56px;
}
.house-cta .page-kicker{
    color: rgba(255, 255, 255, .8);
}
.house-cta .page-title{
    max-width: 11em;
    color: #fff;
}
.house-cta-links{
    display: flex;
    flex-wrap: wrap;
    gap: 22px 36px;
    margin-top: 32px;
}

/* Contact: "Client Services" */
.concierge-intro{
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    padding: 72px 0 64px;
}
.concierge-title{
    margin-top: 18px;
    font-size: clamp(48px, 5.4vw, 78px);
    line-height: 1.03;
    letter-spacing: -3px;
}
.concierge-intro > p{
    max-width: 42ch;
    color: #756a61;
    font-size: 16px;
    line-height: 1.85;
}
.concierge-main{
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: start;
    padding-bottom: 128px;
}
.concierge-list{
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.concierge-list > div{
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.concierge-list dt{
    padding-top: 6px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.concierge-list dd{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.35;
}
.concierge-list dd > a{
    transition: color .25s ease;
}
@media (hover: hover) {
.concierge-list dd > a:hover{
    color: #9b5a33;
}
}
.concierge-list small{
    display: block;
    margin-top: 4px;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.6;
}
.concierge-list small a{
    border-bottom: 1px solid currentColor;
}
.concierge-visual{
    aspect-ratio: 16 / 10;
    margin-top: 40px;
    overflow: hidden;
    background-color: #e8e0d6;
}
.concierge-form{
    padding: 48px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.concierge-form h2{
    margin: 12px 0 8px;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1px;
}
.concierge-form > p{
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.concierge-form form{
    display: grid;
    gap: 28px;
    margin-top: 36px;
}
.concierge-two{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
}
.concierge-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border: 0;
}
.concierge-field label,
.concierge-field legend{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.concierge-field input,
.concierge-field textarea{
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 16px;
    resize: vertical;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.concierge-field input:focus,
.concierge-field textarea:focus{
    border-bottom-color: #33251f;
    box-shadow: 0 1px 0 #33251f;
}
.concierge-field textarea{
    min-height: 76px;
}
/* topics in an even two-by-two grid */
.concierge-topics{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.concierge-topics label{
    cursor: pointer;
}
.concierge-topics input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.concierge-topics span{
    display: block;
    padding: 12px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid rgba(51, 37, 31, .38);
    color: #33251f;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.concierge-topics input:checked + span{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
}
.concierge-topics input:focus-visible + span{
    outline: 1px solid #33251f;
    outline-offset: 3px;
}
.concierge-submit{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
}
.concierge-status{
    max-width: 30ch;
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.concierge-status.is-error{
    color: #9b5a33;
}
.concierge-help{
    padding-bottom: 128px;
}

@media (max-width: 768px) {
    .page-crumb{
        margin-bottom: 24px;
    }
    .page-title{
        font-size: 36px;
        letter-spacing: -1.2px;
    }
    .page-head-row{
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .page-head-row > .page-link{
        justify-self: start;
    }
    .page-button{
        width: 100%;
        min-width: 0;
    }
    .page-cells,
    .page-cells--three{
        grid-template-columns: minmax(0, 1fr);
        margin-top: 28px;
    }
    .page-cell{
        gap: 22px;
        min-height: 0;
        padding: 24px 0;
        border-top: 1px solid rgba(51, 37, 31, .14);
        border-left: 0;
    }
    .page-cell:first-child{
        border-top: 0;
    }
    /* About: the four making steps sit two by two */
    .house-making .page-cells{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .house-making .page-cell{
        justify-content: flex-start;
        gap: 32px;
        padding: 24px 14px 26px 0;
        border-top: 0;
    }
    .house-making .page-cell:nth-child(even){
        padding: 24px 0 26px 14px;
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .house-making .page-cell:nth-child(n+3){
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
    .house-making .page-cell h3{
        font-size: 19px;
    }

    /* phones keep the desktop's vertical rhythm */
    .journal-mast{
        padding-top: 40px;
    }
    .journal-mast-top{
        flex-direction: column;
        gap: 14px;
    }
    .journal-name{
        margin-top: 44px;
        font-size: clamp(52px, 17vw, 72px);
    }
    .journal-mast-sub{
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 28px 0 36px;
    }
    .journal-mast-sub > p:first-child{
        font-size: 15px;
    }
    .journal-filter{
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-top: 0;
        border-bottom: 0;
    }
    .journal-cats{
        margin: 0 -16px;
        border-top: 1px solid rgba(51, 37, 31, .14);
        border-bottom: 1px solid rgba(51, 37, 31, .14);
    }
    .journal-cats a{
        flex: 1 0 auto;
        justify-content: center;
        padding: 22px 18px;
        letter-spacing: 1.6px;
    }
    /* phones search from the header panel; the field returns only to refine a Journal search */
    .journal-search{
        display: none;
        width: 100%;
        height: 54px;
        margin: 0;
        padding: 0;
        border-left: 0;
    }
    .journal-search.is-searching{
        display: flex;
        border-bottom: 1px solid rgba(51, 37, 31, .14);
    }
    .journal-cover{
        grid-template-columns: minmax(0, 1fr);
        padding: 64px 0 168px;
    }
    .journal-cover-media{
        grid-column: 1;
        aspect-ratio: 4 / 5;
    }
    .journal-cover-copy{
        grid-column: 1;
        grid-row: 2;
        margin: -76px 0 0 28px;
        padding: 22px 0 0 22px;
    }
    .journal-cover-copy h2{
        margin: 12px 0 14px;
        font-size: 30px;
        letter-spacing: -.8px;
    }
    .journal-byline{
        margin: 18px 0 22px;
    }
    .journal-issue-section .page-head-row{
        padding-bottom: 56px;
    }
    .journal-feature{
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-bottom: 128px;
    }
    .journal-feature-media,
    .journal-feature-copy,
    .journal-feature--reverse .journal-feature-media,
    .journal-feature--reverse .journal-feature-copy{
        grid-column: 1;
        grid-row: auto;
    }
    .journal-feature-media{
        aspect-ratio: 4 / 3;
    }
    .journal-feature-copy h3{
        font-size: 28px;
    }
    .journal-quote{
        padding: 112px 0;
    }
    .journal-quote blockquote p::before{
        margin-bottom: 8px;
        font-size: 80px;
    }
    .journal-index{
        padding: 120px 0 56px;
    }
    /* a category page only: its cover story sits closer above the index */
    .journal-cover:last-child{
        padding-bottom: 0;
    }
    .journal-page:has(.journal-cover:last-child) .journal-index{
        padding-top: 96px;
    }
    .journal-index.is-search{
        padding-top: 36px;
    }
    .journal-index-head{
        flex-direction: column;
        align-items: start;
        margin-bottom: 40px;
    }
    .journal-row{
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 16px;
        padding: 18px 0;
    }
    .journal-row > .journal-number,
    .journal-row-cat,
    .journal-row-date,
    .journal-row-arrow{
        display: none;
    }
    .journal-row-mobile{
        display: block;
        margin-bottom: 8px;
    }
    .journal-row h3{
        font-size: 20px;
        letter-spacing: -.3px;
    }
    @media (hover: hover) {
.journal-row:hover h3{
        transform: none;
    }
}
    .journal-thumb{
        position: static;
        grid-column: 2;
        grid-row: 1;
        width: 76px;
        aspect-ratio: 1;
        box-shadow: none;
        opacity: 1;
        transform: none;
    }
@media (hover: hover) {
.journal-row:hover .journal-thumb{
        position: static;
        grid-column: 2;
        grid-row: 1;
        width: 76px;
        aspect-ratio: 1;
        box-shadow: none;
        opacity: 1;
        transform: none;
    }
}

    .site-letters{
        padding: 0 0 76px;
    }
    .site-letters-inner{
        padding: 40px 24px;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .house-hero{
        grid-template-columns: minmax(0, 1fr);
    }
    .house-hero-media{
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .house-hero-copy{
        grid-column: 1;
        gap: 36px;
        padding: 32px 16px 12px;
    }
    .house-index{
        display: none;
    }
    .house-title,
    .concierge-title{
        font-size: 46px;
        letter-spacing: -1.6px;
    }
    .house-lede{
        margin: 18px 0 26px;
        font-size: 15px;
    }
    .house-manifesto{
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 64px 0;
    }
    /* the desktop's pairing kept on phones: the larger photo wider and taller, the smaller one
       shorter, both meeting at the bottom; the story follows below */
    .house-story{
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 12px;
        padding-bottom: 72px;
    }
    .house-story-media--large{
        grid-column: 1 / 2;
    }
    .house-story-media--small{
        grid-column: 2 / 3;
    }
    .house-story-copy{
        grid-column: 1 / 3;
        margin-top: 20px;
    }
    .house-story-copy h2{
        font-size: 28px;
    }
    .house-making{
        padding-bottom: 72px;
    }
    .house-cta{
        width: calc(100% - 32px);
        aspect-ratio: 4 / 5;
        margin-bottom: 72px;
    }
    .house-cta::after{
        background: linear-gradient(0deg, rgba(51, 37, 31, .8), rgba(51, 37, 31, .05) 70%);
    }
    .house-cta-copy{
        right: 22px;
        bottom: 28px;
        left: 22px;
    }

    .concierge-intro{
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 36px 0 32px;
    }
    .concierge-intro > p{
        font-size: 15px;
    }
    .concierge-main{
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
        padding-bottom: 72px;
    }
    /* phones: the photo leads, a short crop of it, then the four ways to reach us two by two */
    .concierge-main > div:first-child{
        display: flex;
        flex-direction: column;
    }
    .concierge-visual{
        order: -1;
        aspect-ratio: 2 / 1;
        margin: 0 0 32px;
    }
    .concierge-list{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* the four ways to reach us, two by two */
    .concierge-list > div{
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 6px;
        min-width: 0;
        padding: 18px 12px 18px 0;
    }
    .concierge-list > div:nth-child(even){
        padding: 18px 0 18px 12px;
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .concierge-list dt{
        padding-top: 0;
    }
    .concierge-list dd{
        min-width: 0;
        font-size: 15px;
        letter-spacing: -.2px;
    }
    .concierge-list small{
        font-size: 11px;
    }
    .concierge-form{
        padding: 28px 20px;
    }
    .concierge-form h2{
        font-size: 30px;
    }
    /* phones: longer topics may take two lines; every chip keeps the same height */
    .concierge-topics label{
        display: flex;
    }
    .concierge-topics span{
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 8px 10px;
        font-size: 10px;
        letter-spacing: 1.2px;
        line-height: 1.4;
        white-space: normal;
    }
    .concierge-two{
        grid-template-columns: minmax(0, 1fr);
    }
    .concierge-help{
        padding-bottom: 72px;
    }
    /* the three FAQ notes slide sideways, the next one peeking in */
    .concierge-help .page-cells{
        display: flex;
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    .concierge-help .page-cells::-webkit-scrollbar{
        display: none;
    }
    .concierge-help .page-cell,
    .concierge-help .page-cell:first-child{
        flex: 0 0 78%;
        padding: 24px 18px 26px;
        border-top: 0;
        border-left: 1px solid rgba(51, 37, 31, .14);
        scroll-snap-align: start;
    }
    .concierge-help .page-cell:first-child{
        padding-left: 0;
        border-left: 0;
    }
}


/* FAQ and My Account pages ******************************************/
/* Same language as the Journal, About and Contact pages; shared page- pieces are defined above. */
.faq-page,
.account-page{
    padding-top: 70px;
    color: #33251f;
}
/* Component display rules must not override the hidden attribute used by the page scripts. */
.faq-page [hidden],
.account-page [hidden]{
    display: none !important;
}

/* FAQ */
.faq-intro{
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    padding: 72px 0 64px;
}
.faq-title,
.account-title{
    margin-top: 18px;
    font-size: clamp(48px, 5.4vw, 78px);
    line-height: 1.03;
    letter-spacing: -3px;
    text-wrap: balance;
}
.faq-intro > p{
    max-width: 44ch;
    color: #756a61;
    font-size: 16px;
    line-height: 1.85;
}
.faq-body{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding: 56px 0 112px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.faq-aside{
    position: sticky;
    top: 100px;
    display: grid;
    gap: 28px;
}
.faq-search{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #33251f;
}
.faq-search input{
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 13px;
}
.faq-search input::placeholder{
    color: #756a61;
}
.faq-search svg{
    flex: none;
    width: 16px;
    height: 16px;
}
.faq-topics{
    display: grid;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.faq-topics a{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    color: #4a3d36;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    transition: color .35s ease, padding .45s cubic-bezier(.18, .64, .27, 1);
}
.faq-topics a span{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
}
.faq-topics a.is-active{
    color: #33251f;
}
@media (hover: hover) {
.faq-topics a:hover{
    color: #33251f;
}
}
@media (hover: hover) {
.faq-topics a:hover{
    padding-left: 8px;
}
}
.faq-topics a:focus-visible,
.faq-q:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 4px;
}
.faq-group{
    scroll-margin-top: 100px;
}
.faq-group + .faq-group{
    margin-top: 72px;
}
.faq-group-head{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #33251f;
}
.faq-group-head h2{
    margin-top: 12px;
    font-size: 40px;
    line-height: 1.06;
    letter-spacing: -1.2px;
}
.faq-count{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.faq-entry{
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.faq-entry h3{
    margin: 0;
    font-size: inherit;
}
.faq-q{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 24px;
    align-items: center;
    width: 100%;
    padding: 24px 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.2px;
    text-align: left;
    transition: color .35s ease;
}
@media (hover: hover) {
.faq-q:hover{
    color: #9b5a33;
}
}
.faq-icon{
    position: relative;
    width: 28px;
    height: 28px;
    color: #33251f;
}
.faq-icon::before,
.faq-icon::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .5s cubic-bezier(.18, .64, .27, 1);
}
.faq-icon::after{
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-entry.is-open .faq-icon::after{
    transform: translate(-50%, -50%) rotate(0deg);
}
.faq-a{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.18, .64, .27, 1);
}
.faq-a > div{
    overflow: hidden;
}
.faq-a p{
    max-width: 62ch;
    padding: 0 52px 26px 0;
    color: #756a61;
    font-size: 15px;
    line-height: 1.85;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.18, .64, .27, 1);
}
.faq-entry.is-open .faq-a{
    grid-template-rows: 1fr;
}
.faq-entry.is-open .faq-a p{
    opacity: 1;
    transform: none;
}
.faq-a a,
.faq-empty a,
.account-empty a,
.account-hint a{
    border-bottom: 1px solid currentColor;
    color: #33251f;
    transition: color .35s ease;
}
@media (hover: hover) {
.faq-a a:hover,
.faq-empty a:hover,
.account-empty a:hover,
.account-hint a:hover{
    color: #9b5a33;
}
}
.faq-empty{
    padding: 28px 0;
    color: #756a61;
    font-size: 14px;
}
/* a card of its own on the page, clear of the footer below */
.faq-still{
    padding: 0 0 112px;
    background-color: transparent;
}
.faq-still-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    padding: 56px;
    background-color: #ece3d7;
}
.faq-still-inner > div:first-child > p{
    max-width: 40ch;
    margin-top: 14px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.faq-still dl{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 28px;
    margin-bottom: 30px;
}
.faq-still dt{
    padding-top: 5px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.faq-still dd{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

/* My Account */
.account-intro{
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    padding: 64px 0 48px;
}
.account-stats{
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.account-stats > div{
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 4px 0 4px 22px;
    border-right: 1px solid rgba(51, 37, 31, .14);
}
.account-stats > div:last-child{
    border-right: 0;
}
.account-stats dt,
.account-meta,
.account-dl dt,
.account-field label{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-stats dd{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1px;
}
/* tabs as cells divided by hairlines, like the Journal's category bar; Sign Out closes the bar */
.account-bar{
    /* stays under the site header like the Journal's category bar */
    position: sticky;
    top: 70px;
    z-index: 20;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background-color: #f6f2eb;
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.account-tabs{
    display: flex;
    flex: 1;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.account-tabs::-webkit-scrollbar,
.account-filters::-webkit-scrollbar{
    display: none;
}
.account-tabs button{
    display: flex;
    align-items: center;
    padding: 24px 24px;
    color: #4a3d36;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .25s ease, background-color .25s ease;
}
.account-tabs button + button{
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.account-tabs button.is-active{
    color: #33251f;
}
@media (hover: hover) {
.account-tabs button:hover{
    color: #33251f;
}
}
.account-tabs button.is-active{
    background-color: #e4d9cb;
}
.account-bar .account-signout{
    display: flex;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.account-bar .account-signout button{
    padding: 0 24px;
}
.account-filters{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.account-filters button{
    flex: none;
    padding: 11px 18px;
    border: 1px solid rgba(51, 37, 31, .38);
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
@media (hover: hover) {
.account-filters button:hover{
    border-color: #33251f;
}
}
.account-filters button.is-active{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
}
.account-tabs sup{
    margin-left: 4px;
    color: #9b5a33;
    font-size: 9px;
    letter-spacing: 1px;
}
.account-tabs button:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: -1px;
}
.account-filters button:focus-visible,
.account-signout button:focus-visible,
.account-order-row:focus-visible,
.account-text-link:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 4px;
}
.account-signout button{
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #756a61;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .35s ease;
}
.account-signout button span{
    display: inline-block;
    transition: transform .45s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.account-signout button:hover{
    color: #9b5a33;
}
}
@media (hover: hover) {
.account-signout button:hover span{
    transform: translate(3px, -3px);
}
}
.account-notice{
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid rgba(51, 37, 31, .38);
    background-color: #fbf9f5;
    font-size: 13px;
}
.account-notice.is-error{
    border-color: #9b5a33;
    color: #9b5a33;
}
.account-panel{
    padding: 48px 0 112px;
}
.account-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 28px;
}
.account-card{
    display: grid;
    align-content: start;
    gap: 20px;
    padding: 32px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.account-card-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.account-card-head h2{
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.5px;
}
.account-text-link{
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .35s ease;
}
@media (hover: hover) {
.account-text-link:hover{
    color: #9b5a33;
}
}
/* Bordered buttons for Edit, Remove, Cancel. */
.account-action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid #33251f;
    background-color: transparent;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.account-action:focus-visible{
    background-color: #33251f;
    color: #f6f2eb;
    outline: none;
}
@media (hover: hover) {
.account-action:hover{
    background-color: #33251f;
    color: #f6f2eb;
    outline: none;
}
}
/* Cancel Order sits under the totals, at its own width */
.account-order-inner > .account-action{
    justify-self: start;
}
.account-action--danger{
    border-color: #9b5a33;
    color: #9b5a33;
}
.account-action--danger:focus-visible,
.account-action--danger[data-confirm="1"]{
    border-color: #9b5a33;
    background-color: #9b5a33;
    color: #fff;
}
@media (hover: hover) {
.account-action--danger:hover{
    border-color: #9b5a33;
    background-color: #9b5a33;
    color: #fff;
}
}
.account-action:disabled{
    opacity: .55;
    cursor: wait;
}
.account-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
.account-row--center{
    align-items: center;
}
.account-status{
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid rgba(51, 37, 31, .38);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.account-status.is-processing{
    border-color: #33251f;
}
/* muted, jewel-toned status colours: amber for pending, slate blue for shipped, claret for canceled */
.account-status.is-pending{
    border-color: rgba(176, 112, 40, .55);
    background-color: rgba(176, 112, 40, .08);
    color: #9a5f1f;
}
.account-status.is-shipped{
    border-color: rgba(52, 84, 118, .5);
    background-color: rgba(52, 84, 118, .07);
    color: #345476;
}
.account-status.is-delivered{
    border-color: rgba(52, 102, 72, .5);
    background-color: rgba(52, 102, 72, .07);
    color: #346648;
}
.account-status.is-canceled,
.account-status.is-cancelled{
    border-color: rgba(128, 32, 42, .5);
    background-color: rgba(128, 32, 42, .06);
    color: #80202a;
}
.account-status.is-returned{
    border-color: rgba(94, 70, 115, .5);
    background-color: rgba(94, 70, 115, .06);
    color: #5e4673;
}
.account-timeline{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-timeline::before,
.account-timeline::after{
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    height: 1px;
}
.account-timeline::before{
    right: 6px;
    background-color: rgba(51, 37, 31, .38);
}
.account-timeline::after{
    width: var(--progress, 0%);
    background-color: #33251f;
}
.account-step{
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 12px;
}
.account-step i{
    width: 13px;
    height: 13px;
    border: 1px solid rgba(51, 37, 31, .38);
    background-color: #fbf9f5;
}
.account-step.is-done i{
    border-color: #33251f;
    background-color: #33251f;
}
.account-step.is-now i{
    border-color: #9b5a33;
    background-color: #9b5a33;
}
.account-step span{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.account-step.is-done span,
.account-step.is-now span{
    color: #33251f;
}
.account-thumbs{
    display: flex;
    gap: 10px;
}
.account-thumbs span,
.account-line-img{
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background-color: #e8e0d6;
}
.account-thumbs img,
.account-line-img img,
.account-saved img,
.account-favorite-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-figure{
    display: grid;
    gap: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    text-align: right;
}
.account-figure small{
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-dl{
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.account-dl dt,
.account-dl dd{
    /* label and value centred on the same line */
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.account-dl dd{
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
}
.account-address{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-style: normal;
    line-height: 1.55;
}
.account-address .account-meta{
    font-family: Arial, Helvetica, sans-serif;
}
.account-saved{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.account-saved a{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.account-saved img,
.account-favorite-img img{
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.account-saved a:hover img,
.account-favorite:hover .account-favorite-img img{
    transform: scale(1.04);
}
}
.account-empty{
    color: #756a61;
    font-size: 14px;
    line-height: 1.7;
}
.account-hint{
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.account-form{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 20px;
}
.account-form[hidden]{
    display: none;
}
.account-col-6{ grid-column: span 6; }
.account-col-4{ grid-column: span 4; }
.account-col-3{ grid-column: span 3; }
.account-col-2{ grid-column: span 2; }
.account-field{
    display: grid;
    gap: 6px;
    min-width: 0;
}
.account-field label em{
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}
.account-field input,
.account-field select{
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 16px;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.account-field input:focus,
.account-field select:focus{
    border-bottom-color: #33251f;
    box-shadow: 0 1px 0 #33251f;
}
.account-form-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.account-form-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.account-form-actions .page-button{
    min-width: 220px;
}
.account-form-actions .account-action{
    min-height: 56px;
    padding: 0 26px;
    font-size: 11px;
    letter-spacing: 2px;
}
#profileCard .account-form-actions{
    justify-content: flex-end;
}
.account-orders{
    border-top: 1px solid #33251f;
    transition: opacity .35s ease;
}
/* phones: orders as cards, one per row, each opening in place */
@media (max-width: 768px) {
    .account-orders{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        border-top: 0;
    }
    .account-orders .account-order{
        border: 1px solid rgba(51, 37, 31, .14);
        background-color: #fbf9f5;
    }
}
/* desktop: a folded order is one line — number and date, the frames' photos, status, total */
@media (min-width: 769px) {
    /* desktop: two orders per row, divided by hairlines like a table */
    .account-orders{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #33251f;
    }
    .account-orders .account-order{
        border-bottom: 1px solid rgba(51, 37, 31, .14);
    }
    .account-orders .account-order:nth-child(odd){
        padding-right: 32px;
    }
    .account-orders .account-order:nth-child(even){
        padding-left: 32px;
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .account-orders > .account-empty{
        grid-column: 1 / -1;
    }
    .account-orders .account-order-row{
        grid-template-columns: 170px minmax(0, 1fr) 96px 28px;
        gap: 18px;
        padding: 32px 0;
    }
    /* details open in the side panel on desktop, never inside the card */
    .account-orders .account-order-detail{
        display: none;
    }
    .account-orders .account-chevron{
        transform: rotate(-90deg);
    }
    .account-orders .account-order.is-open .account-chevron{
        background-color: transparent;
        transform: rotate(-90deg);
    }
    .account-orders .account-order-row .account-order-items{
        display: flex;
        grid-column: auto;
        grid-row: auto;
        align-items: center;
        gap: 8px;
    }
    .account-orders .account-order-row .account-order-item{
        display: block;
    }
    .account-orders .account-order-row .account-order-name{
        display: none;
    }
    .account-orders .account-order-row .account-order-more{
        padding-left: 6px;
    }
    /* the opened card lists every frame, with its name, quantity and line price */
    .account-orders .account-order-list{
        display: grid;
        gap: 12px;
    }
    .account-orders .account-order-line{
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 16px;
        align-items: center;
    }
    .account-order-line-price{
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
    }
}
@media (max-width: 768px) {
    .account-orders .account-order{
        padding: 0 18px;
    }
    /* phones already list the frames by name in the folded row */
    .account-order-list{
        display: none;
    }
}

.account-orders.is-loading{
    opacity: .4;
}
.account-orders > .account-empty{
    padding: 28px 0;
}
.account-filters{
    margin-bottom: 28px;
}
.account-order{
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.account-order-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 28px;
    gap: 18px 24px;
    align-items: center;
    width: 100%;
    padding: 22px 0;
    color: #33251f;
    text-align: left;
}
.account-order-row b{
    display: block;
    margin-bottom: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}
.account-order-row small,
.account-line small{
    display: block;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-order-status{
    display: block;
    margin-top: 10px;
}
.account-order-items{
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 10px;
    min-width: 0;
}
.account-order-item{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.account-order-thumb{
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background-color: #e8e0d6;
}
.account-order-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-order-name{
    min-width: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.3;
}
.account-order-name small{
    margin-top: 4px;
}
.account-order-more{
    padding-left: 70px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-order-total{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    text-align: right;
}
.account-chevron{
    position: relative;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(51, 37, 31, .38);
    transition: transform .5s cubic-bezier(.18, .64, .27, 1), background-color .35s ease;
}
.account-chevron::before{
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.account-order.is-open .account-chevron{
    background-color: #e8e0d6;
    transform: rotate(180deg);
}
.account-order-detail{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.18, .64, .27, 1);
}
.account-order-detail > div{
    overflow: hidden;
}
.account-order.is-open .account-order-detail{
    grid-template-rows: 1fr;
}
.account-order-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 36px;
    padding: 4px 0 32px;
}
.account-order-facts{
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 36px;
    padding-top: 12px;
}
/* order facts read like the totals below them: label on the left, value on the right */
.account-order-facts .account-dl{
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
}
.account-order-facts .account-dl dt{
    color: #33251f;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
.account-order-facts .account-dl dd{
    justify-content: flex-end;
    font-family: inherit;
    font-size: 13px;
    text-align: right;
}
.account-order-facts .account-timeline,
.account-order-facts .account-dl{
    width: 100%;
}
.account-lines{
    display: grid;
    align-content: start;
    gap: 14px;
}
.account-line{
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.account-line a{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    transition: color .35s ease;
}
@media (hover: hover) {
.account-line a:hover{
    color: #9b5a33;
}
}
.account-line-total{
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    font-size: 13px;
}
.account-line-total small,
.ty-card dd small{
    margin-left: 6px;
    color: #8a7e74;
    font-size: 11px;
    letter-spacing: .04em;
}
.account-line-total:last-child{
    padding-bottom: 0;
    border-bottom: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}
.account-addresses{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.account-span{
    grid-column: 1 / -1;
}
.account-card-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.account-card-actions [hidden]{
    display: none;
}
.account-address-name{
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.3px;
}
.account-address-card{
    align-content: space-between;
}
/* "Add a New Address" sits in the grid as a dashed tile beside the saved addresses. */
.account-add-address{
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed rgba(51, 37, 31, .38);
    color: #33251f;
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.account-add-address span{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid currentColor;
    font-size: 20px;
    letter-spacing: 0;
    transition: transform .5s cubic-bezier(.18, .64, .27, 1);
}
.account-add-address small{
    color: #756a61;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}
.account-add-address:focus-visible{
    border-color: #33251f;
    background-color: #fbf9f5;
    color: #9b5a33;
    outline: none;
}
@media (hover: hover) {
.account-add-address:hover{
    border-color: #33251f;
    background-color: #fbf9f5;
    color: #9b5a33;
    outline: none;
}
}
@media (hover: hover) {
.account-add-address:hover span{
    transform: rotate(90deg);
}
}
.account-address-form{
    margin-top: 28px;
    scroll-margin-top: 100px;
}
.account-map-canvas{
    height: 320px;
    background-color: #e8e0d6;
}
.account-map .account-hint{
    margin-top: 8px;
}
.account-form-actions .page-link{
    font-size: 10px;
}
.account-favorites{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
}
.account-favorite{
    position: relative;
    display: grid;
    gap: 14px;
}
.account-favorite-img{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.account-heart{
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(155, 90, 51, .4);
    background-color: rgba(251, 249, 245, .92);
    color: #9b5a33;
    font-size: 15px;
    transition: background-color .35s ease, color .35s ease;
}
.account-heart:focus-visible{
    background-color: #9b5a33;
    color: #fff;
    outline: none;
}
@media (hover: hover) {
.account-heart:hover{
    background-color: #9b5a33;
    color: #fff;
    outline: none;
}
}
.account-favorite-copy{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.account-favorite-copy a{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.25;
    transition: color .35s ease;
}
@media (hover: hover) {
.account-favorite-copy a:hover{
    color: #9b5a33;
}
}
.account-favorite-copy span{
    flex: none;
    color: #756a61;
    font-size: 12px;
}
.account-panel > .account-empty{
    padding: 12px 0;
}

@media (max-width: 768px) {
    .faq-intro,
    .account-intro{
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 36px 0 28px;
    }
    .faq-title,
    .account-title{
        font-size: 46px;
        letter-spacing: -1.6px;
    }
    .faq-intro > p{
        font-size: 15px;
    }
    .faq-body{
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 0 72px;
        border-top: 0;
    }
    .faq-aside{
        position: sticky;
        top: 70px;
        z-index: 20;
        gap: 18px;
        background-color: #f6f2eb;
    }
    /* phones: the topic bar is enough to find an answer, so the search field steps aside */
    .faq-search{
        display: none;
    }
    /* phones: topics as cells divided by hairlines, like the Journal's category bar;
       each tab shows its own questions (see faq.php) */
    .faq-topics{
        display: flex;
        gap: 0;
        margin: 0 -16px;
        overflow-x: auto;
        padding: 0;
        border-top: 1px solid rgba(51, 37, 31, .14);
        border-bottom: 1px solid rgba(51, 37, 31, .14);
        scrollbar-width: none;
        white-space: nowrap;
    }
    .faq-topics::-webkit-scrollbar{
        display: none;
    }
    .faq-topics a{
        flex: 1 0 auto;
        justify-content: center;
        padding: 22px 18px;
        border-bottom: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }
    .faq-topics a + a{
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    @media (hover: hover) {
.faq-topics a:hover{
        padding-left: 0;
    }
}
    .faq-topics a.is-active{
        background-color: #ece3d7;
    }
    .faq-topics a span{
        display: none;
    }
    .faq-groups{
        padding-top: 36px;
    }
    .faq-group + .faq-group{
        margin-top: 52px;
    }
    .faq-group-head h2{
        font-size: 30px;
    }
    .faq-count{
        display: none;
    }
    .faq-q{
        gap: 16px;
        padding: 20px 0;
        font-size: 18px;
    }
    .faq-a p{
        padding-right: 0;
        font-size: 14px;
    }
    .faq-still{
        padding: 0 0 72px;
    }
    .faq-still-inner{
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 20px;
    }
    /* phones: label over value, so the email and hours stay on one line inside the card */
    .faq-still dl{
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }
    .faq-still dl dd{
        margin-bottom: 12px;
        font-size: 18px;
    }
    .faq-still .page-button{
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: 1.6px;
    }

    .account-stats > div{
        padding-left: 14px;
    }
    .account-stats dd{
        font-size: 26px;
    }
    /* phones: the four tabs fill the width as cells; Sign Out sits under them on the right */
    /* phones: only the tab row stays under the header; Sign Out scrolls away under it */
    .account-bar{
        display: contents;
    }
    .account-tabs{
        position: sticky;
        top: 70px;
        z-index: 20;
        margin: 0 -16px;
        border-top: 1px solid rgba(51, 37, 31, .14);
        background-color: #f6f2eb;
    }
    /* phones: the tabs keep their own width and room, and the row scrolls sideways under a finger */
    .account-tabs{
        border-bottom: 1px solid rgba(51, 37, 31, .14);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .account-tabs button{
        flex: none;
        justify-content: center;
        padding: 22px 22px;
        font-size: 10px;
        letter-spacing: 1.8px;
        scroll-snap-align: start;
    }
    .account-bar .account-signout{
        justify-content: flex-end;
        border-left: 0;
    }
    .account-bar .account-signout button{
        padding: 14px 16px 0;
        font-size: 10px;
    }
    .account-panel{
        padding: 28px 0 56px;
    }
    .account-grid,
    .account-addresses,
    .account-order-inner{
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .account-card{
        padding: 22px 18px;
    }
    .account-dl{
        grid-template-columns: 104px minmax(0, 1fr);
    }
    .account-saved{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .account-order-row{
        grid-template-columns: minmax(0, 1fr) auto 28px;
        gap: 14px;
    }
    .account-order-name{
        font-size: 15px;
    }
    .account-order-row b{
        font-size: 18px;
    }
    .account-form{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }
    .account-col-6,
    .account-col-4,
    .account-col-3{
        grid-column: span 2;
    }
    .account-col-2{
        grid-column: span 1;
    }
    .account-form-actions,
    .account-form-buttons{
        flex-direction: column;
        align-items: stretch;
    }
    .account-form-actions .page-button,
    .account-form-actions .account-action{
        min-width: 0;
        width: 100%;
    }
    .account-add-address{
        min-height: 140px;
    }
    .account-form-actions .page-link{
        align-self: flex-start;
    }
    .account-favorites{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
    }
    .account-favorite-copy{
        flex-direction: column;
        gap: 4px;
    }
    .account-favorite-copy a{
        font-size: 15px;
    }
    .account-step span{
        font-size: 9px;
        letter-spacing: .6px;
    }
    .header-account-label{
        display: none;
    }
}

/* Shop card prices and sale tag */
.shop-card-price s{
    margin-left: 6px;
    color: #9b5a33;
    font-size: 12px;
}
.shop-card-price > span{
    color: #33251f;
}
.shop-card .btn-add-shop:disabled{
    cursor: progress;
}

/* Header search ******************************************/
/* A cream panel under the header; full screen below the header on phones. */
.nx-search{
    position: fixed;
    inset: 70px 0 0;
    z-index: 990;
    overflow: hidden;
    color: #33251f;
}
.nx-search[hidden]{
    display: none;
}
.nx-search [hidden]{
    display: none !important;
}
body.nx-search-open{
    overflow: hidden;
}
/* with the search open the header takes the panel's cream, at the top of a page or further down */
body.nx-search-open header.header{
    background-color: #f6f2eb;
    color: #33251f;
    box-shadow: 0 1px 0 rgba(51, 37, 31, .14);
}
.nx-search-scrim{
    position: absolute;
    inset: 0;
    background-color: rgba(33, 24, 20, 0);
    transition: background-color .4s ease;
}
.nx-search.is-open .nx-search-scrim{
    background-color: rgba(33, 24, 20, .5);
}
.nx-search-panel{
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #f6f2eb;
    box-shadow: 0 40px 60px -40px rgba(0, 0, 0, .35);
    /* slides down from under the header, and back up the same way */
    transform: translateY(-100%);
    transition: transform .4s cubic-bezier(.18, .64, .27, 1);
}
.nx-search.is-open .nx-search-panel{
    transform: none;
}
.nx-search-inner{
    display: grid;
    gap: 30px;
    padding: 52px 0 44px;
}
@media (min-width: 769px) {
    /* a narrower column than the page, so the panel reads as a calm sheet */
    .nx-search .nx-search-inner{
        width: min(1080px, calc(100% - 160px));
    }
}
.nx-search-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nx-search-close{
    display: grid;
    place-items: center;
    color: #33251f;
    cursor: pointer;
}
/* a hairline cross, drawn so it stays fine at this size */
.nx-search-close svg,
.shop-search-clear svg{
    display: block;
    width: 30px;
    height: 30px;
}
.nx-search-field{
    margin-top: 28px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #33251f;
}
.nx-search-field svg{
    width: 40px;
    height: 40px;
}
.nx-search-field input{
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 80px;
    line-height: 1.1;
    letter-spacing: -2.4px;
    -webkit-appearance: none;
    appearance: none;
}
.nx-search-field input::placeholder{
    color: rgba(51, 37, 31, .32);
    font-size: inherit;
    letter-spacing: inherit;
}
.nx-search-field input::-webkit-search-cancel-button{
    display: none;
}
.nx-search-clear{
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
}
.nx-search-idle{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
}
.nx-search-label{
    display: block;
    margin-bottom: 16px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.nx-search-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nx-search-chip{
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(51, 37, 31, .32);
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.nx-search-chip:focus-visible{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
}
@media (hover: hover) {
.nx-search-chip:hover{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
}
}
.nx-search-chip{
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}
/* Choose by face shape */
.nx-search-faces{
    grid-column: 1 / -1;
    padding-top: 22px;
}
.nx-search-faces-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    padding-bottom: 20px;
}
.nx-search-faces-head h2{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.4px;
}
.nx-search-faces-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.nx-search-face{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px 20px;
    color: #33251f;
    cursor: pointer;
    transition: background-color .3s ease;
}
.nx-search-face:focus-visible{
    background-color: #ece3d7;
}
@media (hover: hover) {
.nx-search-face:hover{
    background-color: #ece3d7;
}
}
.nx-search-face + .nx-search-face{
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.nx-search-face svg{
    display: block;
    width: 64px;
    height: 23px;
    margin-bottom: 20px;
    color: #33251f;
}
.nx-search-face h3{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
}
.nx-search-face-for{
    margin-top: 5px;
    color: #756a61;
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.nx-search-face p{
    margin: 0;
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.nx-search-results{
    display: grid;
    gap: 22px;
}
.nx-search-results .nx-search-label{
    margin: 0;
}
.nx-search-results-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.nx-search-heading{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -.4px;
}
.nx-search-heading small{
    margin-left: 12px;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.nx-search-all{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s ease;
}
@media (hover: hover) {
.nx-search-all:hover{
    color: #9b5a33;
}
}
.nx-search-journal{
    display: grid;
    gap: 14px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.nx-search-posts{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
/* one unbroken line above and below, hairlines between the stories */
.nx-search-post{
    box-sizing: border-box;
    display: block;
    padding: 24px 22px;
    color: #33251f;
    cursor: pointer;
}
.nx-search-post:first-child{
    padding-left: 0;
}
.nx-search-post + .nx-search-post{
    border-left: 1px solid rgba(51, 37, 31, .14);
}
@media (hover: hover) {
.nx-search-post:hover b{
    color: #9b5a33;
}
}
.nx-search-post-text{
    display: grid;
    gap: 6px;
}
.nx-search-post small{
    color: #9b5a33;
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.nx-search-post b{
    transition: color .3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}
.nx-search-post b mark{
    background: none;
    color: #9b5a33;
}
.nx-search-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 16px;
}
/* small cards: photo, then name and price, so the Journal stays in view */
.nx-search-card{
    display: grid;
    align-content: start;
    gap: 10px;
    color: #33251f;
    cursor: pointer;
    animation: nxSearchIn .5s cubic-bezier(.18, .64, .27, 1) both;
}
.nx-search-card:nth-child(2){ animation-delay: .05s; }
.nx-search-card:nth-child(3){ animation-delay: .1s; }
.nx-search-card:nth-child(4){ animation-delay: .15s; }
@keyframes nxSearchIn{
    from{ opacity: 0; transform: translateY(10px); }
}
.nx-search-img{
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.nx-search-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.nx-search-card:hover .nx-search-img img{
    transform: scale(1.04);
}
}
.nx-search-card b{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}
.nx-search-card mark{
    background: none;
    color: #9b5a33;
}
.nx-search-price{
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.nx-search-price s{
    color: #756a61;
    font-size: 12px;
}
.nx-search-empty{
    margin: 0;
    padding: 10px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.nx-search-empty small{
    display: block;
    margin-top: 8px;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.nx-search-empty button{
    padding: 0;
    border-bottom: 1px solid currentColor;
    color: #9b5a33;
    font: inherit;
    cursor: pointer;
}

/* Mobile menu ******************************************/
/* Full screen, sliding in from the right and back out the same way. */
.nx-menu{
    display: none;
}
/* phones and tablets: the full menu does not fit beside the photo, so both use this one */
@media (max-width: 1180px) {
    .nx-menu{
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        background-color: #f6f2eb;
        color: #33251f;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .6s cubic-bezier(.18, .64, .27, 1), visibility 0s linear .6s;
    }
    .nx-menu.is-open{
        transform: none;
        visibility: visible;
        transition: transform .6s cubic-bezier(.18, .64, .27, 1), visibility 0s;
    }
    body.nx-menu-open{
        overflow: hidden;
    }
    .nx-menu-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        padding: 0 16px;
        border-bottom: 1px solid rgba(51, 37, 31, .14);
    }
    .nx-menu-logo{
        font-size: 20px;
        letter-spacing: 4px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .nx-menu-close{
        position: absolute;
        top: var(--toggle-top, 16px);
        left: var(--toggle-left, calc(100% - 60px));
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        color: #33251f;
        cursor: pointer;
    }
    .nx-menu-close svg{
        width: 20px;
        height: 20px;
    }
    .nx-menu-close-bottom{
        align-self: end;
        justify-self: center;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        color: #33251f;
        cursor: pointer;
    }
    .nx-menu-close-bottom svg{
        width: 22px;
        height: 22px;
    }
    .nx-menu-body{
        display: grid;
        /* the three blocks at the top, the closing × at the bottom of what is left */
        grid-template-rows: auto auto auto 1fr;
        align-content: start;
        gap: 26px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    }
    /* the panel moves sideways only; its rows just fade in as it lands, so the two motions
       do not add up to a diagonal */
    .nx-menu-body > *{
        opacity: 0;
        transition: opacity .4s ease;
    }
    .nx-menu.is-open .nx-menu-body > *{
        opacity: 1;
        transition-delay: .2s;
    }
    .nx-menu.is-open .nx-menu-body > :nth-child(2){ transition-delay: .26s; }
    .nx-menu.is-open .nx-menu-body > :nth-child(3){ transition-delay: .32s; }
    .nx-menu.is-open .nx-menu-body > :nth-child(4){ transition-delay: .38s; }
    /* the line under the menu's own header already opens the list */
    .nx-menu-groups{
        display: grid;
    }
    .nx-menu-group{
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(51, 37, 31, .14);
        cursor: pointer;
    }
    .nx-menu-thumb{
        display: block;
        width: 64px;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background-color: #e8e0d6;
    }
    .nx-menu-thumb img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .nx-menu-group b{
        display: block;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -.8px;
    }
    .nx-menu-group i{
        color: #756a61;
        font-size: 18px;
        font-style: normal;
    }
    .nx-menu-links{
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
    .nx-menu-links a{
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(51, 37, 31, .14);
        font-size: 11px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .nx-menu-links a:nth-child(odd){
        padding-right: 16px;
        border-right: 1px solid rgba(51, 37, 31, .14);
    }
    .nx-menu-links a:nth-child(even){
        padding-left: 16px;
    }
    .nx-menu-links a span{
        color: #756a61;
    }
    .nx-menu-account{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .nx-menu-account a,
    .nx-menu-account button{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 50px;
        border: 1px solid #33251f;
        color: #33251f;
        font-size: 10px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .nx-menu-account .is-dark{
        background-color: #33251f;
        color: #f6f2eb;
    }
    .nx-menu-account svg{
        width: 16px;
        height: 16px;
    }
}
@media (max-width: 768px) {
    /* Search on phones: full screen below the header */
    .nx-search-scrim{
        display: none;
    }
    .nx-search-panel{
        height: 100%;
        box-shadow: none;
    }
    .nx-search-inner{
        gap: 26px;
        padding: 40px 0 30px;
    }
    .nx-search-field{
        gap: 12px;
        margin-top: 18px;
        padding-bottom: 10px;
    }
    .nx-search-field svg{
        width: 22px;
        height: 22px;
    }
    .nx-search-field input{
        font-size: 30px;
        letter-spacing: -.8px;
    }
    .nx-search-close svg,
    .shop-search-clear svg{
        width: 26px;
        height: 26px;
    }
    .nx-search-idle{
        gap: 24px;
    }
    .nx-search-chips{
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
        scrollbar-width: none;
    }
    .nx-search-chips::-webkit-scrollbar{
        display: none;
    }
    .nx-search-chip{
        flex: none;
        height: 34px;
        padding: 0 13px;
    }
    .nx-search-faces-head{
        display: grid;
        gap: 10px;
        padding-bottom: 20px;
    }
    .nx-search-faces{
        padding-top: 18px;
    }
    .nx-search-faces-head{
        padding-bottom: 14px;
    }
    /* three small shapes per row on phones */
    .nx-search-faces-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .nx-search-face{
        padding: 14px 10px 12px;
    }
    .nx-search-face + .nx-search-face{
        border-left: 0;
    }
    .nx-search-face:not(:nth-child(3n+1)){
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .nx-search-face:nth-child(n+4){
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
    .nx-search-face svg{
        width: 42px;
        height: 15px;
        margin-bottom: 10px;
    }
    .nx-search-face h3{
        font-size: 14px;
    }
    .nx-search-face-for{
        margin-top: 4px;
        font-size: 7.5px;
        letter-spacing: 1px;
    }
    .nx-search-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 10px;
    }
    .nx-search-card{
        gap: 8px;
    }
    /* one row on phones, so the Journal stays close; View All Results has the rest */
    .nx-search-card:nth-child(n+4){
        display: none;
    }
    .nx-search-card b{
        font-size: 13px;
    }
    .nx-search-empty{
        font-size: 20px;
    }
    .nx-search-posts{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .nx-search-post{
        padding: 18px 0;
    }
    .nx-search-post + .nx-search-post{
        border-left: 0;
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
}

/* Journal search summary ******************************************/
.journal-results{
    scroll-margin-top: 90px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 40px 0 8px;
}
.journal-results-summary{
    margin: 0;
    color: #756a61;
    font-size: 15px;
}
.journal-results-summary b{
    color: #33251f;
    font-weight: 400;
}

/* Journal story ******************************************/
.story-page{
    padding-top: 70px;
    color: #33251f;
}
.story-page [hidden]{
    display: none !important;
}
.story-head{
    max-width: 920px;
    padding: 44px 0 36px;
}
.story-head .page-kicker{
    margin-top: 34px;
}
.story-title{
    margin: 16px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -2px;
    text-wrap: balance;
}
.story-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 26px 0 0;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-meta a{
    color: #33251f;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}
.story-media{
    margin: 0;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background-color: #e8e0d6;
}
.story-media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-layout{
    display: grid;
    grid-template-columns: 220px minmax(0, 680px);
    justify-content: space-between;
    gap: 64px;
    padding-top: 64px;
}
.story-body{
    min-width: 0;
}
/* the side column: facts, then a sticky index of the story's sections */
.story-aside{
    position: sticky;
    top: 100px;
    align-self: start;
    display: grid;
    gap: 34px;
}
.story-facts{
    display: grid;
    gap: 16px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #33251f;
}
.story-facts dt{
    color: #756a61;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-facts dd{
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
}
.story-toc > span{
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-toc ol{
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.story-toc li{
    counter-increment: toc;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.story-toc a{
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 10px 0;
    color: #33251f;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: color .3s ease;
}
.story-toc a::before{
    content: counter(toc, decimal-leading-zero);
    color: #756a61;
    font-size: 10px;
    line-height: 1.9;
}
@media (hover: hover) {
.story-toc a:hover{
    color: #9b5a33;
}
}
/* opening letter, section headings, points and a pull quote */
.story-body .story-opening::first-letter{
    float: left;
    margin: 6px 12px 0 0;
    color: #9b5a33;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 74px;
    line-height: .82;
}
.story-section{
    scroll-margin-top: 100px;
    margin: 56px 0 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(51, 37, 31, .14);
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.8px;
}
.story-section--numbered{
    display: flex;
    align-items: baseline;
    gap: 18px;
}
.story-section-number{
    color: #9b5a33;
    font-size: 15px;
    letter-spacing: 1px;
}
.story-point{
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0;
}
.story-point + .story-point{
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.story-point-label{
    padding-top: 5px;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-body .story-point p{
    margin: 0;
}
.story-quote{
    margin: 48px 0;
    padding: 6px 0 6px 28px;
    border-left: 2px solid #9b5a33;
}
.story-body .story-quote p{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.35;
    letter-spacing: -.5px;
}
.story-body .story-end{
    display: flex;
    align-items: center;
    margin: 40px 0 0;
    color: #33251f;
    font-size: 11px;
    letter-spacing: 4px;
}
.story-body .story-end::after{
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 14px;
    background-color: rgba(51, 37, 31, .22);
}
.story-end span{
    color: #9b5a33;
}
/* Comment cards: byline and votes on top, the comment in Georgia beside a rust rule, then Reply.
   Desktop sets them two to a row inside unbroken lines; phones slide them (see the media query). */
.story-comments{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(51, 37, 31, .22);
    border-bottom: 1px solid rgba(51, 37, 31, .22);
}
.story-comment{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 56px 26px 56px 0;
    border: 0;
    background: none;
}
.story-comment:nth-child(even){
    padding: 56px 0 56px 26px;
    border-left: 1px solid rgba(51, 37, 31, .22);
}
.story-comment:nth-child(n+3){
    border-top: 1px solid rgba(51, 37, 31, .22);
}
.story-comment > .story-comment-head{
    order: 1;
    margin-bottom: 20px;
}
.story-comment > p{
    order: 2;
    margin: 0;
    padding-left: 0;
    border-left: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: -.2px;
}
.story-comment-head{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}
.story-comment .story-monogram{
    grid-row: 1 / 3;
    min-width: 30px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1;
}
.story-comment-head b{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.story-comment-head time{
    grid-column: 2;
    margin-left: 0;
    font-size: 9px;
}
.story-comment-head .story-comment-votes{
    grid-column: 3;
    grid-row: 1 / 3;
    gap: 10px;
}
.story-comment .story-reply{
    order: 3;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(51, 37, 31, .22);
}
.story-comment .story-reply p{
    margin-top: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}
.story-reply .story-monogram{
    font-size: 26px;
}
.story-reply .story-comment-head{
    grid-template-columns: auto minmax(0, 1fr);
}

/* comments on the left, the comment form beside them on a soft panel */
.story-conversation-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 64px;
    align-items: start;
    margin-top: 32px;
}
.story-conversation-main > .story-comments,
.story-conversation-main > .story-note,
.story-conversation-grid > .story-comment-form{
    margin-top: 0;
}
.story-comment-form{
    position: sticky;
    top: 100px;
    margin-top: 0;
    padding: 36px 34px;
    background-color: #e0d3c2;
}
.story-body{
    padding: 0 0 40px;
}
.story-body p{
    margin: 0 0 24px;
    color: #4a3b33;
    font-size: 17px;
    line-height: 1.85;
}
.story-body .story-lead{
    margin-bottom: 36px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -.3px;
}
.story-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.story-more{
    padding: 64px 0;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
/* The edit: a full-width sand band */
.story-edit{
    margin-top: 24px;
    padding: 80px 0;
    background-color: #e0d3c2;
}
.story-edit-inner{
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 2.6fr);
    gap: 56px;
    align-items: end;
}
.story-edit-intro{
    align-self: start;
    display: grid;
    gap: 18px;
    justify-items: start;
}
.story-edit-intro h2{
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1.6px;
}
.story-edit-intro p{
    max-width: 30ch;
    margin: 0 0 6px;
    color: #756a61;
    font-size: 14px;
    line-height: 1.7;
}
.story-edit .story-frames{
    margin-top: 0;
}
.story-frame-no{
    margin-top: 6px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-frame-img{
    position: relative;
}
.story-frame-shop{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background-color: rgba(246, 242, 235, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, .55);
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform .45s cubic-bezier(.22, .7, .25, 1);
}
.story-frame:focus-visible .story-frame-shop{
    transform: none;
}
@media (hover: hover) {
.story-frame:hover .story-frame-shop{
    transform: none;
}
}
.story-frames,
.story-more-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.story-frame,
.story-card{
    display: grid;
    align-content: start;
    gap: 10px;
    color: #33251f;
    cursor: pointer;
}
.story-frame-img,
.story-card-img{
    display: block;
    overflow: hidden;
    background-color: #e8e0d6;
}
.story-frame-img{
    aspect-ratio: 4 / 5;
}
.story-card-img{
    aspect-ratio: 3 / 2;
}
.story-frame-img img,
.story-card-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.story-card:hover img{
    transform: scale(1.04);
}
}
.story-frame b,
.story-card b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
}
.story-frame-price{
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
}
.story-frame-price s{
    color: #9b5a33;
    font-size: 12px;
}
.story-card small{
    margin-top: 4px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-conversation{
    padding: 64px 0 80px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.story-edit + .story-conversation{
    border-top: 0;
}
.story-comment-head time{
    color: #756a61;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.story-vote{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #756a61;
    font-size: 12px;
    cursor: pointer;
}
.story-vote svg{
    width: 16px;
    height: 16px;
}
.story-vote.is-active{
    color: #33251f;
}
@media (hover: hover) {
.story-vote:hover{
    color: #33251f;
}
}
.story-comment-votes{
    display: flex;
    align-items: center;
    gap: 12px;
}
.story-note{
    margin: 14px 0 0;
    color: #756a61;
    font-size: 14px;
}
.story-form{
    display: grid;
    gap: 16px;
    margin-top: 40px;
}
.story-form h3{
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}
.story-form .story-note{
    margin: -8px 0 4px;
}
.story-form label{
    display: grid;
    gap: 8px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.story-form input,
.story-form textarea{
    box-sizing: border-box;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    resize: vertical;
}
.story-form input:focus,
.story-form textarea:focus{
    border-bottom-color: #33251f;
}
.story-form .page-button{
    justify-self: start;
}
.story-form-message{
    margin: 0;
    color: #5b7a5a;
    font-size: 14px;
}
.story-form-message.is-error{
    color: #9b5a33;
}
@media (max-width: 768px) {
    .story-page{
        padding-top: 64px;
    }
    .story-head{
        padding: 24px 0 26px;
    }
    .story-head .page-kicker{
        margin-top: 22px;
    }
    .story-title{
        letter-spacing: -1px;
    }
    .story-media{
        aspect-ratio: 4 / 3;
        margin: 0 -16px;
    }
    .story-layout{
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-top: 40px;
    }
    .story-aside{
        position: static;
        order: 2;
    }
    .story-facts{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .story-facts dd{
        font-size: 13px;
    }
    .story-toc{
        display: none;
    }
    .story-body{
        padding: 0 0 8px;
    }
    .story-section{
        margin-top: 56px;
        font-size: 26px;
    }
    .story-point{
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
    .story-body .story-quote p{
        font-size: 22px;
    }
    .story-body .story-opening::first-letter{
        font-size: 58px;
    }
    .story-body p{
        font-size: 16px;
    }
    .story-body .story-lead{
        font-size: 20px;
    }
    .story-more,
    .story-conversation{
        padding: 72px 0;
    }
    .story-edit{
        margin-top: 40px;
        padding: 64px 0;
    }
    .story-edit-inner{
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .story-edit-intro h2{
        font-size: 40px;
    }
    /* frames slide sideways on phones, with the next one peeking in */
    .story-edit .story-frames{
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    .story-edit .story-frames::-webkit-scrollbar{
        display: none;
    }
    .story-edit .story-frame{
        flex: 0 0 70%;
        scroll-snap-align: start;
    }
    .story-frame-shop{
        display: none;
    }
    .story-frame b{
        font-size: 17px;
    }
    .story-frame-price{
        flex-wrap: wrap;
        gap: 2px 6px;
        font-size: 12px;
    }
    .story-more-grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .story-conversation-grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        margin-top: 28px;
    }
    /* Phones: each comment is a small card with a monogram and a soft quote mark */
    /* comments slide sideways, with the next card peeking in */
    /* phones: the comment cards slide sideways */
    .story-comments{
        display: flex;
        margin: 28px -16px 0;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    .story-comments::-webkit-scrollbar{
        display: none;
    }
    .story-comment{
        flex: 0 0 84%;
        scroll-snap-align: start;
        padding-top: 52px;
        padding-bottom: 52px;
    }
    /* every slide keeps room on the right, so the votes never touch the next divider */
    .story-comment,
    .story-comment:nth-child(even){
        padding-right: 18px;
    }
    .story-comment,
    .story-comment:nth-child(odd),
    .story-comment:nth-child(n+3){
        border-top: 0;
    }
    .story-comment:first-child{
        padding-left: 0;
    }
    .story-comment + .story-comment{
        padding-left: 18px;
        border-left: 1px solid rgba(51, 37, 31, .22);
    }
    .story-comment > p{
        font-size: 18px;
    }
    .story-comment-form{
        position: static;
        margin: 0 -16px;
        padding: 30px 16px;
    }
    .journal-results{
        flex-direction: column;
        gap: 12px;
        padding-top: 28px;
    }
}

/* Sign in / create account window ******************************************/
/* One quiet column: email first, Google, phone as a text link. On phones it stays a card
   with the page visible around it, and a tap on the backdrop closes it. */
.signin-modal{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    overflow-y: auto;
    background-color: rgba(33, 24, 20, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.signin-modal.show{
    opacity: 1;
    visibility: visible;
}
body.user-modal-scroll-locked{
    overflow: hidden;
}
.signin-dialog{
    position: relative;
    width: min(440px, 100%);
    padding: 48px 44px 36px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
    color: #33251f;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45);
    transform: translateY(14px);
    transition: transform .55s cubic-bezier(.18, .64, .27, 1);
}
.signin-modal.show .signin-dialog{
    transform: none;
}
.signin-dialog [hidden]{
    display: none !important;
}
.signin-close{
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(51, 37, 31, .2);
    color: #33251f;
    font-size: 18px;
    line-height: 1;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.signin-close:focus-visible{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
    outline: none;
}
@media (hover: hover) {
.signin-close:hover{
    border-color: #33251f;
    background-color: #33251f;
    color: #f6f2eb;
    outline: none;
}
}
.signin-step{
    display: grid;
    gap: 14px;
}
.signin-kicker{
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.signin-title{
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -1px;
}
.signin-text{
    margin: 0 0 10px;
    color: #756a61;
    font-size: 14px;
    line-height: 1.65;
}
.signin-text b{
    color: #33251f;
    font-weight: 400;
}
.signin-label{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.signin-input{
    width: 100%;
    margin-top: -8px;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 17px;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.signin-input:focus{
    border-bottom-color: #33251f;
    box-shadow: 0 1px 0 #33251f;
}
.signin-phone{
    display: flex;
    align-items: center;
    gap: 12px;
}
.signin-phone span{
    margin-top: -8px;
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    font-size: 17px;
}
.signin-submit{
    width: 100%;
    margin-top: 10px;
}
.signin-submit:disabled{
    opacity: .6;
    cursor: wait;
}
.signin-google{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border: 1px solid rgba(51, 37, 31, .38);
    color: #33251f;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: border-color .35s ease, background-color .35s ease;
}
.signin-google svg{
    width: 18px;
    height: 18px;
}
.signin-google:focus-visible{
    border-color: #33251f;
    background-color: #fff;
    outline: none;
}
@media (hover: hover) {
.signin-google:hover{
    border-color: #33251f;
    background-color: #fff;
    outline: none;
}
}
.signin-link{
    justify-self: center;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: #756a61;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: color .35s ease;
}
.signin-link:focus-visible{
    color: #9b5a33;
    outline: none;
}
@media (hover: hover) {
.signin-link:hover{
    color: #9b5a33;
    outline: none;
}
}
.signin-step > .signin-link{
    margin-top: 6px;
}
.signin-legal{
    margin: 0;
    color: #756a61;
    font-size: 11px;
    line-height: 1.6;
}
.signin-code{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.signin-code input{
    width: 100%;
    aspect-ratio: 1 / 1.15;
    border: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background-color: #fff;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    text-align: center;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.signin-code input:focus{
    border-color: #33251f;
    box-shadow: 0 0 0 1px #33251f;
}
.signin-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.signin-row .signin-link{
    justify-self: auto;
}
.signin-resend{
    color: #756a61;
    font-size: 12px;
}
.signin-message{
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 13px;
    line-height: 1.5;
}
.signin-guest{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(51, 37, 31, .14);
    color: #756a61;
    font-size: 12px;
}
/* Showcase: the demo button leads; the real sign-in stays visible but switched off. */
.signin-off{
    margin: 26px 0 18px;
}
.signin-off-rule{
    display: flex;
    align-items: center;
    gap: 14px;
    color: #756a61;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.signin-off-rule::before,
.signin-off-rule::after{
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(51, 37, 31, .14);
}
.signin-off p{
    margin: 12px 0 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}
.signin-step.is-showcase .signin-label,
.signin-step.is-showcase .signin-input,
.signin-step.is-showcase .signin-submit:disabled,
.signin-step.is-showcase .signin-google.is-off,
.signin-step.is-showcase .signin-link:disabled{
    opacity: .42;
    cursor: not-allowed;
    pointer-events: none;
}
.signin-step.is-showcase .signin-submit:disabled{
    pointer-events: none;
}
@media (max-width: 768px) {
    .signin-modal{
        align-items: center;
        padding: 20px 16px;
    }
    .signin-dialog{
        padding: 40px 22px 26px;
    }
    .signin-title{
        font-size: 30px;
    }
    .signin-code{
        gap: 6px;
    }
    .signin-code input{
        font-size: 22px;
    }
}

/* Shopping bag ******************************************/
.bag-page{
    padding-top: 70px;
    color: #33251f;
}
.bag-page [hidden]{
    display: none !important;
}
.bag-intro{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    padding: 64px 0 40px;
}
.bag-title{
    margin-top: 18px;
    font-size: clamp(48px, 5.4vw, 78px);
    line-height: 1.03;
    letter-spacing: -3px;
}
.bag-count{
    color: #756a61;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}
.bag-empty{
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding: 56px 0 128px;
    border-top: 1px solid #33251f;
}
.bag-empty p{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    letter-spacing: -.6px;
}
.bag-empty > span{
    margin-bottom: 18px;
    color: #756a61;
    font-size: 14px;
}
.bag-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: start;
    padding-bottom: 56px;
}
.bag-lines{
    border-top: 1px solid #33251f;
}
.bag-line{
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 18px 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    transition: opacity .3s ease;
}
.bag-line.is-busy{
    opacity: .55;
}
.bag-img{
    display: block;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.bag-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
}
/* title with the favorites heart beside it (across from it on phones) */
.bag-head{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.bag-fav{
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    color: #756a61;
    transition: color .35s ease;
}
.bag-fav svg{
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    transition: fill .35s ease;
}
@media (hover: hover) {
.bag-fav:not(.is-saved):hover{
    color: #9b5a33;
}
}
.bag-fav:focus-visible{
    color: #9b5a33;
    outline: 1px solid #9b5a33;
    outline-offset: 2px;
}
.bag-fav.is-saved{
    color: #9b5a33;
}
.bag-fav.is-saved svg{
    fill: currentColor;
}
.bag-name{
    margin-top: 4px;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.4px;
}
.bag-name a{
    transition: color .35s ease;
}
@media (hover: hover) {
.bag-name a:hover{
    color: #9b5a33;
}
}
.bag-price{
    display: grid;
    align-content: start;
    justify-items: end;
    gap: 8px;
    text-align: right;
}
.bag-price b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}
.bag-price s{
    color: #756a61;
    font-size: 13px;
}
.bag-tag{
    padding: 5px 8px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.bag-tools{
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / 4;
    align-items: center;
    align-self: end;
    gap: 22px;
}
.bag-qty{
    display: inline-flex;
    border: 1px solid rgba(51, 37, 31, .38);
}
.bag-qty button{
    width: 38px;
    height: 38px;
    color: #33251f;
    font-size: 16px;
    transition: background-color .3s ease;
}
.bag-qty button:focus-visible{
    background-color: #e8e0d6;
    outline: none;
}
@media (hover: hover) {
.bag-qty button:hover{
    background-color: #e8e0d6;
    outline: none;
}
}
.bag-qty output{
    display: grid;
    place-items: center;
    width: 40px;
    border-inline: 1px solid rgba(51, 37, 31, .14);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}
.bag-link{
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .35s ease;
}
.bag-link:focus-visible{
    color: #9b5a33;
    outline: none;
}
@media (hover: hover) {
.bag-link:hover{
    color: #9b5a33;
    outline: none;
}
}
.bag-remove{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: #756a61;
    transition: color .35s ease;
}
.bag-remove svg{
    width: 18px;
    height: 18px;
}
.bag-remove:focus-visible{
    color: #9b5a33;
    outline: 1px solid #9b5a33;
    outline-offset: 2px;
}
@media (hover: hover) {
.bag-remove:hover{
    color: #9b5a33;
}
}
.bag-link.is-saved{
    border-bottom-color: transparent;
    color: #9b5a33;
}
.bag-promise{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 112px;
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.bag-promise div{
    display: grid;
    gap: 8px;
    padding: 22px 22px 22px 0;
}
.bag-promise div + div{
    padding-left: 22px;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.bag-promise b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
}
.bag-promise span{
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.bag-summary{
    position: sticky;
    top: 100px;
    display: grid;
    gap: 22px;
    padding: 32px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
    scroll-margin-top: 90px;
}
.bag-summary h2{
    font-size: 28px;
    letter-spacing: -.6px;
}
.bag-sum{
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.bag-sum > div{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    font-size: 14px;
}
.bag-sum dt{
    color: #756a61;
}
.bag-save dd{
    color: #9b5a33;
}
.bag-sum .bag-total{
    padding-top: 18px;
    border-bottom: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}
.bag-sum .bag-total dt{
    color: #33251f;
}
.bag-note{
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.bag-actions{
    display: grid;
    gap: 12px;
}
.bag-actions .page-button{
    width: 100%;
    min-width: 0;
}
.bag-message{
    padding: 12px 14px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 13px;
    line-height: 1.5;
}
.bag-secure{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #756a61;
    font-size: 11px;
}
.bag-bar{
    display: none;
}
@media (max-width: 768px) {
    .bag-intro{
        flex-direction: column;
        align-items: start;
        gap: 10px;
        padding: 32px 0 24px;
    }
    .bag-title{
        font-size: 46px;
        letter-spacing: -1.6px;
    }
    .bag-body{
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-bottom: 48px;
    }
    .bag-promise{
        margin-bottom: 48px;
    }
    .bag-line{
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 8px 16px;
        padding: 20px 0;
    }
    .bag-img{
        grid-row: 1 / 4;
        align-self: start;
    }
    .bag-name{
        margin-top: 0;
        font-size: 18px;
    }
    .bag-price{
        display: flex;
        flex-wrap: wrap;
        grid-column: 2;
        grid-row: 2;
        align-items: baseline;
        gap: 8px;
        text-align: left;
    }
    .bag-price b{
        font-size: 18px;
    }
    .bag-tools{
        grid-column: 2;
        grid-row: 3;
        gap: 14px;
        margin-top: 6px;
    }
    .bag-qty button{
        width: 34px;
        height: 34px;
    }
    .bag-qty output{
        width: 34px;
    }
    .bag-head{
        justify-content: space-between;
        gap: 10px;
    }
    .bag-fav{
        margin-top: -4px;
        margin-right: -6px;
    }
    .bag-remove{
        width: 36px;
        height: 36px;
        margin-left: auto;
        margin-right: -6px;
    }
    .bag-promise{
        grid-template-columns: minmax(0, 1fr);
    }
    .bag-promise div,
    .bag-promise div + div{
        padding: 16px 0;
        border-left: 0;
    }
    .bag-promise div + div{
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
    .bag-summary{
        position: static;
        padding: 22px 18px;
    }
    /* hidden while the summary's own Checkout is on screen, so there is never two */
    .bag-bar{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: rgba(246, 242, 235, .86);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
        box-shadow: 0 -1px 0 rgba(51, 37, 31, .14);
        transition: transform .45s cubic-bezier(.22, .7, .25, 1), visibility 0s;
    }
    .bag-bar.is-hidden{
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .45s cubic-bezier(.22, .7, .25, 1), visibility 0s linear .45s;
    }
    .bag-bar div{
        display: grid;
        gap: 2px;
    }
    .bag-bar span{
        color: #756a61;
        font-size: 10px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }
    .bag-bar b{
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }
    .bag-bar .page-button{
        width: auto;
        min-width: 0;
        min-height: 48px;
        gap: 14px;
        padding: 0 16px 0 20px;
    }
}

/* Checkout and order confirmation ******************************************/
.page-button--ghost{
    background-color: transparent;
    color: #33251f;
}
@media (hover: hover) {
.page-button--ghost:hover{
    background-color: #33251f;
    color: #f6f2eb;
}
}
.checkout-body{
    background-color: #f6f2eb;
}
/* The global header rule makes this fixed and 70px tall; it only needs a surface. */
.co-header{
    background-color: rgba(246, 242, 235, .84);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 1px 0 rgba(51, 37, 31, .14);
    color: #33251f;
}
.co-header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 70px;
}
.co-logo{
    justify-self: start;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.co-logo span{
    color: #9b5a33;
}
.co-secure{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.co-secure svg{
    width: 13px;
    height: 13px;
}
.co-back{
    justify-self: end;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .35s ease;
}
@media (hover: hover) {
.co-back:hover{
    color: #9b5a33;
}
}
.co-page{
    padding-top: 70px;
    color: #33251f;
}
.co-page [hidden]{
    display: none !important;
}
.co-sr{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.co-intro{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    padding: 48px 0 32px;
}
.co-title{
    margin-top: 14px;
    font-size: clamp(44px, 4.4vw, 62px);
    line-height: 1.03;
    letter-spacing: -2.4px;
}
.co-progress{
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.co-progress li + li::before{
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background-color: rgba(51, 37, 31, .38);
}
.co-progress [aria-current]{
    color: #33251f;
}
.co-error{
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 14px;
}
.co-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 64px;
    align-items: start;
    padding-bottom: 88px;
}
/* each step is a card like "Your Order": paper ground, hairline edge */
.co-step{
    display: grid;
    gap: 22px;
    padding: 28px 30px 32px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.co-step + .co-step{
    margin-top: 16px;
}
.co-step-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.co-step-head h2{
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 28px;
    letter-spacing: -.6px;
}
.co-step-head h2 small{
    color: #9b5a33;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
}
.co-meta,
.co-field label{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.co-hint,
.co-desc{
    color: #756a61;
    font-size: 13px;
    line-height: 1.6;
}
.co-contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.co-contact b{
    display: block;
    margin-top: 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    overflow-wrap: anywhere;
}
.co-textlink{
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .35s ease;
}
@media (hover: hover) {
.co-textlink:hover{
    color: #9b5a33;
}
}
.co-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 20px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.co-col-6{ grid-column: span 6; }
.co-col-4{ grid-column: span 4; }
.co-col-3{ grid-column: span 3; }
.co-col-2{ grid-column: span 2; }
.co-field{
    display: grid;
    gap: 6px;
    min-width: 0;
}
.co-field label em{
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}
.co-field input,
.co-field select{
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 16px;
    transition: border-color .35s ease, box-shadow .35s ease;
}
/* inputs and the state list share one height, so a row of fields lines up */
.co-field input,
.co-field select{
    box-sizing: border-box;
    height: 46px;
}
.co-field select{
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23756a61' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 2px center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.co-field input::placeholder{
    color: #a39890;
    font-size: inherit;
}
.co-field select:has(option[value=""]:checked){
    color: #a39890;
}
.co-field input:focus,
.co-field select:focus{
    border-bottom-color: #33251f;
    box-shadow: 0 1px 0 #33251f;
}
.co-field input.is-invalid,
.co-field select.is-invalid{
    border-bottom-color: #9b5a33;
    box-shadow: 0 1px 0 #9b5a33;
}
.co-choice{
    display: grid;
    gap: 10px;
}
.co-option{
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid rgba(51, 37, 31, .18);
    background-color: transparent;
    cursor: pointer;
    transition: border-color .35s ease, background-color .35s ease;
}
@media (hover: hover) {
.co-option:hover{
    border-color: rgba(51, 37, 31, .38);
}
}
.co-option.is-static{
    cursor: default;
}
.co-option input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.co-dot{
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid rgba(51, 37, 31, .38);
    border-radius: 50%;
    transition: border-color .3s ease;
}
.co-dot::after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #33251f;
    transform: scale(0);
    transition: transform .35s cubic-bezier(.18, .64, .27, 1);
}
.co-option:has(input:checked){
    border-color: rgba(51, 37, 31, .32);
    background-color: #f1ebe2;
}
.co-option:has(input:checked) .co-dot{
    border-color: #33251f;
}
.co-option:has(input:checked) .co-dot::after{
    transform: scale(1);
}
.co-option:has(input:focus-visible){
    outline: 1px solid #33251f;
    outline-offset: 3px;
}
.co-option b{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.3;
}
.co-option .co-desc{
    display: block;
    margin-top: 4px;
}
.co-aside{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-align: right;
    text-transform: uppercase;
}
.co-tag{
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.co-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.co-cards span{
    padding: 4px 7px;
    border: 1px solid rgba(51, 37, 31, .22);
    color: #756a61;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.co-summary{
    position: sticky;
    top: 100px;
    display: grid;
    gap: 20px;
    padding: 30px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.co-toggle{
    display: none;
}
.co-summary-title{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 26px;
    letter-spacing: -.5px;
}
.co-summary-title .co-textlink{
    font-family: Arial, Helvetica, sans-serif;
}
.co-collapse{
    display: grid;
    gap: 20px;
}
.co-items{
    display: grid;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.co-item{
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}
.co-item-img{
    position: relative;
    width: 64px;
    height: 76px;
    background-color: #e8e0d6;
}
.co-item-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.co-item-img b{
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #33251f;
    color: #f6f2eb;
    font-size: 10px;
}
.co-item strong{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.3;
}
.co-item small{
    color: #9b5a33;
    font-size: 12px;
}
.co-item-price{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    text-align: right;
}
.co-item-price s{
    display: block;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.co-code{
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 14px 16px 16px;
    background-color: #f4efe8;
}
.co-code .co-field{
    flex: 1;
}
.co-code button{
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #33251f;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease;
}
@media (hover: hover) {
.co-code button:hover:not(:disabled){
    background-color: #33251f;
    color: #f6f2eb;
}
}
.co-code button:disabled{
    border-color: rgba(51, 37, 31, .38);
    color: #756a61;
    cursor: default;
}
.co-code-result{
    margin-top: -8px;
    color: #9b5a33;
    font-size: 12px;
}
.co-code-result.is-error{
    color: #9b5a33;
}
.co-sum{
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.co-sum > div{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    font-size: 14px;
}
.co-sum dt{
    color: #756a61;
}
.co-save dd{
    color: #9b5a33;
}
/* the state and rate sit quietly next to "Estimated tax"; before a state is picked the amount is a note */
.co-tax small{
    margin-left: 6px;
    color: #8a7e74;
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.co-tax dd.is-pending{
    color: #8a7e74;
}
.co-sum .co-total{
    padding-top: 16px;
    border-bottom: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
}
.co-sum .co-total dt{
    color: #33251f;
}
.co-total small{
    margin-right: 4px;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.co-place{
    width: 100%;
    min-width: 0;
}
.co-place:disabled,
.co-bar .page-button:disabled{
    opacity: .6;
    cursor: wait;
}
.co-legal{
    color: #756a61;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}
.co-legal a{
    border-bottom: 1px solid currentColor;
    color: #33251f;
}
.co-bar{
    display: none;
}
.co-footer{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 28px;
    /* same ground as the site footer, carried out to both screen edges */
    background-color: #e8e0d6;
    box-shadow: 0 0 0 100vmax #e8e0d6;
    clip-path: inset(0 -100vmax);
    color: #5a4a40;
    font-size: 11px;
}
.co-footer a{
    border-bottom: 1px solid currentColor;
}

/* Confirmation */
.ty{
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 64px 0 96px;
}
.ty-mark{
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 26px;
    border: 1px solid rgba(51, 37, 31, .32);
    border-radius: 50%;
    color: #33251f;
}
.ty-mark svg{
    width: 26px;
    height: 26px;
}
.ty-mark.is-alert{
    border-color: #9b5a33;
    color: #9b5a33;
}
.ty-title{
    margin-top: 14px;
    font-size: clamp(44px, 4.8vw, 66px);
    line-height: 1.02;
    letter-spacing: -2.6px;
}
.ty-lede{
    max-width: 46ch;
    margin-top: 18px;
    color: #756a61;
    font-size: 16px;
    line-height: 1.8;
}
.ty-lede b{
    color: #33251f;
}
.ty-next{
    margin-top: 40px;
    border-top: 1px solid #33251f;
}
.ty-next ol{
    list-style: none;
}
.ty-next li{
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.ty-next b{
    display: block;
    margin-bottom: 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}
.ty-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.ty-side{
    display: grid;
    gap: 20px;
}
.ty-card{
    display: grid;
    gap: 18px;
    padding: 30px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.ty-card dl{
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.ty-card dt,
.ty-card dd{
    padding: 12px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.ty-card dt{
    padding-top: 15px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.ty-card dd{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.5;
}
.ty-save{
    display: grid;
    gap: 12px;
    padding: 26px;
    background-color: #ece3d7;
}
.ty-save b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}
.ty-save p{
    color: #756a61;
    font-size: 13px;
    line-height: 1.6;
}
.ty-save .page-button{
    width: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .co-header-inner{
        height: 70px;
    }
    .co-logo{
        font-size: 17px;
        letter-spacing: 4px;
    }
    .co-secure span{
        display: none;
    }
    .co-intro{
        flex-direction: column;
        align-items: start;
        gap: 14px;
        padding: 24px 0 20px;
    }
    .co-title{
        font-size: 40px;
        letter-spacing: -1.4px;
    }
    .co-body{
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-bottom: 24px;
    }
    .co-summary{
        position: static;
        order: -1;
        gap: 0;
        margin-bottom: 18px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    /* folded summary: the first frame, its name and the total */
    .co-toggle{
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto 22px;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 12px 16px 12px 12px;
        border: 1px solid rgba(51, 37, 31, .14);
        background-color: #fbf9f5;
        color: #33251f;
        text-align: left;
    }
    .co-toggle-img{
        position: relative;
        display: block;
        aspect-ratio: 4 / 5;
        background-color: #e8e0d6;
    }
    .co-toggle-img img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .co-toggle-img b{
        position: absolute;
        top: -7px;
        right: -7px;
        display: grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background-color: #33251f;
        color: #fbf9f5;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 400;
    }
    .co-toggle-name{
        min-width: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        line-height: 1.3;
    }
    .co-toggle-name small{
        display: block;
        margin-top: 2px;
        color: #756a61;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
    }
    .co-toggle > b{
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        font-weight: 400;
    }
    .co-toggle i{
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        color: #33251f;
        font-style: normal;
        transition: transform .45s cubic-bezier(.18, .64, .27, 1);
    }
    .co-toggle i svg{
        width: 22px;
        height: 22px;
    }
    /* phones: the cards take a soft cream tint so each step stands apart from the page;
       a chosen option sits a shade deeper */
    .co-step,
    .co-toggle,
    .co-summary.is-open .co-collapse{
        background-color: #efe8df;
        border-color: rgba(51, 37, 31, .16);
    }
    .co-option:has(input:checked){
        background-color: #e6dccf;
    }
    /* one frame is already shown in the folded bar, so the open summary skips straight to the totals */
    .co-summary.is-single .co-items{
        display: none;
    }
    .co-code-step{
        gap: 0;
    }
    /* the card is the frame here, so the code row drops its own tint */
    .co-code-step .co-code{
        padding: 0;
        background-color: transparent;
    }
    .co-code-step .co-code-result{
        margin-top: 10px;
    }
    .co-summary.is-open .co-toggle i{
        transform: rotate(180deg);
    }
    .co-summary-title,
    .co-summary .co-place,
    .co-summary .co-legal{
        display: none;
    }
    .co-summary .co-collapse{
        display: none;
    }
    .co-summary.is-open .co-collapse{
        display: grid;
        padding: 18px 16px;
        border: 1px solid rgba(51, 37, 31, .16);
        border-top: 0;
        background-color: #efe8df;
    }
    .co-step{
        padding: 22px 18px 24px;
    }
    .co-step-head h2{
        font-size: 24px;
    }
    .co-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
    .co-col-6,
    .co-col-4,
    .co-col-3{
        grid-column: span 2;
    }
    .co-col-2{
        grid-column: span 1;
    }
    .co-option{
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .co-option .co-aside,
    .co-option .co-tag{
        grid-column: 2;
        text-align: left;
    }
    .co-bar{
        position: sticky;
        bottom: 0;
        z-index: 50;
        display: grid;
        gap: 8px;
        margin: 0 -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: rgba(246, 242, 235, .86);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
        box-shadow: 0 -1px 0 rgba(51, 37, 31, .14);
    }
    .co-bar .page-button{
        justify-content: center;
        gap: .45em;
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }
    .co-bar .page-button span{
        display: inline;
        font-size: inherit;
        line-height: inherit;
        transform: none;
        font-variant-numeric: tabular-nums;
    }
    .co-bar p{
        color: #756a61;
        font-size: 10px;
        line-height: 1.5;
        text-align: center;
    }
    .co-footer{
        flex-direction: column;
        padding-bottom: 24px;
    }

    .ty{
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 36px 0 56px;
    }
    .ty-title{
        font-size: 44px;
        letter-spacing: -1.6px;
    }
    .ty-actions .page-button{
        width: 100%;
        min-width: 0;
    }
    .ty-card{
        padding: 20px 16px;
    }
    .ty-card dl{
        grid-template-columns: 104px minmax(0, 1fr);
    }
}

/* Bag count on the header icon */
.header-action{
    position: relative;
}
.header-bag-count{
    position: absolute;
    top: 2px;
    right: -2px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: #9b5a33;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    animation: bagCountIn .45s cubic-bezier(.18, .64, .27, 1);
}
.header-bag-count[hidden]{
    display: none;
}
@keyframes bagCountIn{
    from{ transform: scale(0); }
}

/* Product page ******************************************/
.pd-page{
    padding-top: 70px;
    color: #33251f;
}
.pd-page [hidden]{
    display: none !important;
}
.pd-crumb{
    margin: 0;
    padding: 28px 0 24px;
}
.pd{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding-bottom: 96px;
}
.pd-gallery{
    position: sticky;
    top: 94px;
    display: grid;
    gap: 12px;
}
.pd-main{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    /* same width; the height stops 40px short of the viewport, measured from where the gallery starts under the breadcrumb */
    max-height: max(420px, calc(100svh - 134px - 40px));
    overflow: hidden;
    background-color: #e8e0d6;
}
/* Desktop: thin segments along the bottom of the image, one per photo */
.pd-lines{
    position: absolute;
    z-index: 2;
    left: 16px;
    right: 70px;
    bottom: 16px;
    display: flex;
    gap: 6px;
}
.pd-lines button{
    flex: 1;
    height: 22px;
    padding: 0;
    cursor: pointer;
}
.pd-lines button::after{
    content: "";
    display: block;
    height: 2px;
    background-color: rgba(251, 249, 245, .7);
    transition: background-color .35s ease;
}
.pd-lines button.is-active::after{
    background-color: #33251f;
}
@media (hover: hover) {
.pd-lines button:not(.is-active):hover::after{ background-color: #fbf9f5; }
}
.pd-lines button:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 2px;
}
.pd-slide{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity .55s ease;
}
.pd-slide.is-active{
    z-index: 1;
    opacity: 1;
}
.pd-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.18, .64, .27, 1);
}
.pd-zoom{
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    /* cream glass, like the bag button on the phone shop cards */
    border: 1px solid rgba(255, 255, 255, .6);
    background-color: rgba(246, 242, 235, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    color: #33251f;
    pointer-events: none;
}
.pd-zoom svg{
    width: 16px;
    height: 16px;
}
/* Thumbnails sit below the main image. */
.pd-dots{
    display: none;
}
.pd-info{
    display: grid;
    gap: 24px;
}
.pd-title{
    margin-top: 12px;
    font-size: clamp(34px, 3.4vw, 46px);
    line-height: 1.05;
    letter-spacing: -1.6px;
    text-wrap: balance;
}
.pd-rating{
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: #756a61;
    font-size: 12px;
}
.pd-stars{
    color: #33251f;
    font-size: 13px;
    letter-spacing: 2px;
}
.pd-rating-link{
    border-bottom: 1px solid currentColor;
    transition: color .35s ease;
}
@media (hover: hover) {
.pd-rating:hover .pd-rating-link{
    color: #9b5a33;
}
}
.pd-price-row{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
}
.pd-price{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
}
.pd-price b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
}
.pd-price s{
    color: #756a61;
    font-size: 15px;
}
.pd-tag{
    padding: 5px 8px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.pd-desc{
    max-width: 46ch;
    color: #756a61;
    font-size: 15px;
    line-height: 1.8;
}
.pd-buy{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 58px;
    gap: 10px;
    margin-top: 16px;
}
.page-button .pd-add-label,
.page-button .pd-add-label span{
    display: inline;
    font-size: inherit;
    line-height: inherit;
    transform: none;
    white-space: nowrap;
}
.page-button .pd-add-total{
    font-variant-numeric: tabular-nums;
}
.pd-qty{
    display: inline-flex;
    border: 1px solid rgba(51, 37, 31, .38);
}
.pd-qty button{
    width: 44px;
    color: #33251f;
    font-size: 16px;
    transition: background-color .3s ease;
}
.pd-qty button:focus-visible{
    background-color: #e8e0d6;
    outline: none;
}
@media (hover: hover) {
.pd-qty button:hover{
    background-color: #e8e0d6;
    outline: none;
}
}
.pd-qty input{
    width: 44px;
    border: 0;
    border-inline: 1px solid rgba(51, 37, 31, .14);
    outline: none;
    background: transparent;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    text-align: center;
}
.pd-add{
    width: 100%;
    min-width: 0;
    min-height: 58px;
}
.pd-add:disabled{
    border-color: rgba(51, 37, 31, .38);
    background-color: transparent;
    color: #756a61;
    cursor: not-allowed;
}
.pd-heart{
    display: grid;
    place-items: center;
    border: 1px solid rgba(51, 37, 31, .38);
    color: #33251f;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.pd-heart svg{
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: fill .35s ease;
}
.pd-heart:focus-visible{
    border-color: #9b5a33;
    color: #9b5a33;
    outline: none;
}
@media (hover: hover) {
.pd-heart:hover{
    border-color: #9b5a33;
    color: #9b5a33;
    outline: none;
}
}
.pd-heart.is-active{
    border-color: #9b5a33;
    background-color: #9b5a33;
    color: #fff;
}
.pd-heart.is-active svg{
    fill: currentColor;
}
.pd-stock{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #756a61;
    font-size: 13px;
}
.pd-stock i{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5b7a5a;
}
.pd-stock.is-out i{
    background-color: #9b5a33;
}
.pd-message{
    padding: 12px 14px;
    border: 1px solid #9b5a33;
    color: #9b5a33;
    font-size: 13px;
}
.pd-perks{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(51, 37, 31, .14);
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.pd-perks div{
    display: grid;
    gap: 6px;
    padding: 16px 14px 16px 0;
}
.pd-perks div + div{
    padding-left: 14px;
    border-left: 1px solid rgba(51, 37, 31, .14);
}
.pd-perks b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}
.pd-perks span{
    color: #756a61;
    font-size: 11px;
    line-height: 1.5;
}
.pd-acc{
    border-top: 1px solid #33251f;
}
.pd-acc-item{
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.pd-acc-item h2{
    margin: 0;
    font-size: inherit;
}
.pd-acc-item button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    text-align: left;
    transition: color .35s ease;
}
.pd-acc-item button:focus-visible{
    color: #9b5a33;
    outline: none;
}
@media (hover: hover) {
.pd-acc-item button:hover{
    color: #9b5a33;
    outline: none;
}
}
.pd-acc-item button i{
    position: relative;
    width: 14px;
    height: 14px;
}
.pd-acc-item button i::before,
.pd-acc-item button i::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 1px;
    background-color: currentColor;
    transition: transform .5s cubic-bezier(.18, .64, .27, 1);
}
.pd-acc-item button i::after{
    transform: rotate(90deg);
}
.pd-acc-item.is-open button i::after{
    transform: rotate(0);
}
.pd-acc-body{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s cubic-bezier(.18, .64, .27, 1);
}
.pd-acc-body > div{
    overflow: hidden;
}
.pd-acc-item.is-open .pd-acc-body{
    grid-template-rows: 1fr;
}
.pd-acc-body p{
    padding-bottom: 20px;
    color: #756a61;
    font-size: 14px;
    line-height: 1.75;
}
.pd-acc-body a{
    border-bottom: 1px solid currentColor;
    color: #33251f;
}

/* Reviews */
.pd-reviews{
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 72px 0;
    border-top: 1px solid rgba(51, 37, 31, .14);
    scroll-margin-top: 90px;
}
.pd-score{
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 26px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.pd-score b{
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 54px;
    letter-spacing: -2px;
}
.pd-bars{
    display: grid;
    gap: 7px;
    margin: 18px 0 26px;
}
.pd-bars div{
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    gap: 10px;
    align-items: center;
    color: #756a61;
    font-size: 11px;
}
.pd-bars i{
    position: relative;
    height: 4px;
    background-color: #e8e0d6;
}
.pd-bars i::after{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background-color: #33251f;
}
.pd-noreviews{
    margin: 18px 0 26px;
    color: #756a61;
    font-size: 14px;
    line-height: 1.7;
}
.pd-write{
    width: 100%;
    min-width: 0;
}
.pd-review-form{
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    padding: 26px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.pd-label,
.pd-field label{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.pd-field label em{
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}
.pd-rate{
    display: flex;
    gap: 6px;
}
.pd-rate button{
    color: rgba(51, 37, 31, .3);
    font-size: 24px;
    transition: color .25s ease, transform .3s cubic-bezier(.18, .64, .27, 1);
}
.pd-rate button:focus-visible{
    transform: scale(1.12);
    outline: none;
}
@media (hover: hover) {
.pd-rate button:hover{
    transform: scale(1.12);
    outline: none;
}
}
.pd-rate button.is-on{
    color: #33251f;
}
.pd-two{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}
.pd-field{
    display: grid;
    gap: 6px;
}
.pd-field input,
.pd-field textarea{
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(51, 37, 31, .38);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #33251f;
    font-size: 15px;
    resize: vertical;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.pd-field input:focus,
.pd-field textarea:focus{
    border-bottom-color: #33251f;
    box-shadow: 0 1px 0 #33251f;
}
.pd-review-form .page-button{
    justify-self: start;
}
.pd-review-message{
    color: #5b7a5a;
    font-size: 13px;
}
.pd-review-message.is-error{
    color: #9b5a33;
}
.pd-review-list{
    border-top: 1px solid #33251f;
}
.pd-review{
    display: grid;
    gap: 10px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.pd-review-top{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.pd-review-who{
    color: #756a61;
    font-size: 11px;
}
.pd-review p{
    max-width: 62ch;
    color: #756a61;
    font-size: 14px;
    line-height: 1.75;
}

/* You may also like */
.pd-related{
    padding: 72px 0 96px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.pd-related-head{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 32px;
}
.pd-related-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.pd-card{
    display: grid;
    gap: 14px;
}
.pd-card-img{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #e8e0d6;
}
.pd-card-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.pd-card:hover .pd-card-img img{
    transform: scale(1.04);
}
}
.pd-card-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.pd-card-row b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.25;
    transition: color .35s ease;
}
@media (hover: hover) {
.pd-card:hover .pd-card-row b{
    color: #9b5a33;
}
}
.pd-card-row span{
    flex: none;
    color: #756a61;
    font-size: 12px;
}

/* Added-to-bag notice (shop pages) */
.bag-toast{
    position: fixed;
    z-index: 1500;
    top: 84px;
    right: max(2.5%, calc((100% - 1400px) / 2));
    display: grid;
    gap: 14px;
    width: 340px;
    padding: 22px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
    box-shadow: 0 30px 60px -30px rgba(51, 37, 31, .5);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .5s cubic-bezier(.18, .64, .27, 1);
}
.bag-toast[hidden]{
    display: none;
}
.bag-toast:not(.is-visible){
    pointer-events: none;
}
.bag-toast.is-visible{
    opacity: 1;
    transform: none;
}
.bag-toast-row{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.bag-toast-img{
    width: 56px;
    height: 68px;
    overflow: hidden;
    background-color: #e8e0d6;
}
.bag-toast-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bag-toast-row b{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
}
.bag-toast-row small{
    color: #756a61;
    font-size: 12px;
}
.bag-toast-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bag-toast-actions form{
    display: grid;
}
.bag-toast-actions a,
.bag-toast-actions button{
    box-sizing: border-box;
    width: 100%;
    color: #33251f;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid #33251f;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease;
}
.bag-toast-actions .is-dark{
    background-color: #33251f;
    color: #f6f2eb;
}
@media (hover: hover) {
.bag-toast-actions a:hover{
    background-color: #33251f;
    color: #f6f2eb;
}
}
.bag-toast-close{
    position: absolute;
    top: 10px;
    right: 12px;
    color: #756a61;
    font-size: 18px;
}

/* Image viewer: the photo fills the whole screen; controls sit on it in cream glass */
.pd-lightbox{
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    background-color: #f6f2eb;
}
.pd-lightbox > img{
    width: 100vw;
    height: 100vh;
    height: 100svh;
    object-fit: cover;
}
.pd-lightbox-close,
.pd-lightbox-nav{
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background-color: rgba(246, 242, 235, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    color: #33251f;
    transition: background-color .25s ease;
}
.pd-lightbox-close svg,
.pd-lightbox-nav svg{
    width: 24px;
    height: 24px;
    transition: transform .35s cubic-bezier(.18, .64, .27, 1);
}
@media (hover: hover) {
.pd-lightbox-close:hover,
.pd-lightbox-nav:hover{ background-color: rgba(246, 242, 235, .86); }
.pd-lightbox-nav.is-prev:hover svg{ transform: translateX(-2px); }
.pd-lightbox-nav.is-next:hover svg{ transform: translateX(2px); }
}
.pd-lightbox:focus{
    outline: none;
}
.pd-lightbox-close:focus-visible,
.pd-lightbox-nav:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 2px;
}
.pd-lightbox-close{
    top: 20px;
    right: 24px;
}
.pd-lightbox-nav{
    top: 50%;
    transform: translateY(-50%);
}
.pd-lightbox-nav.is-prev{
    left: 24px;
}
.pd-lightbox-nav.is-next{
    right: 24px;
}
.pd-lightbox-count{
    position: absolute;
    bottom: 24px;
    left: 50%;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    background-color: rgba(246, 242, 235, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    color: #33251f;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.pd-lightbox-track{
    display: none;
}
.pd-bar{
    display: none;
}

@media (max-width: 768px) {
    .pd-crumb{
        padding: 16px 0 14px;
    }
    .pd{
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-bottom: 56px;
    }
    .pd-gallery{
        position: static;
        margin: 0 -16px;
        gap: 10px;
    }
    .pd-main{
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        aspect-ratio: auto;
    }
    .pd-main::-webkit-scrollbar{
        display: none;
    }
    .pd-slide{
        position: relative;
        flex: 0 0 100%;
        aspect-ratio: 4 / 5;
        opacity: 1;
        scroll-snap-align: start;
    }
    .pd-zoom,
    .pd-lines{
        display: none;
    }
    .pd-dots{
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .pd-dots i{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgba(51, 37, 31, .38);
        transition: background-color .3s ease, transform .3s ease;
    }
    .pd-dots i.is-active{
        background-color: #33251f;
        transform: scale(1.2);
    }
    .pd-title{
        font-size: 32px;
        letter-spacing: -1px;
    }
    .pd-price b{
        font-size: 26px;
    }
    /* phones: quantity on its own row above Add to Bag, so the button has room for the total */
    .pd-buy{
        grid-template-columns: minmax(0, 1fr) 56px;
        /* sits a little closer to the price and quantity rows above it */
        margin-top: -8px;
    }
    /* phones: price on the left, quantity across from it, the sale tag under the price;
       the short description moves below the stock line so the buying block reads as one */
    .pd-price-row{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 10px;
    }
    .pd-price-row .pd-price{
        grid-column: 1;
        grid-row: 1;
    }
    .pd-price-row .pd-qty{
        grid-column: 2;
        grid-row: 1;
        height: 44px;
    }
    .pd-price-row .pd-tag{
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    /* with a sale tag, the quantity sits across from the tag instead of the price */
    .pd-price-row:has(.pd-tag) .pd-qty{
        grid-row: 2;
    }
    .pd-desc{
        order: 1;
    }
    .pd-perks,
    .pd-acc{
        order: 2;
    }
    .pd-main{
        max-height: none;
    }
    .pd-qty button,
    .pd-qty input{
        width: 38px;
    }
    .pd-add{
        gap: 10px;
        padding: 0 14px 0 16px;
        font-size: 11px;
    }
    .pd-perks{
        grid-template-columns: minmax(0, 1fr);
    }
    .pd-perks div,
    .pd-perks div + div{
        padding: 12px 0;
        border-left: 0;
    }
    .pd-perks div + div{
        border-top: 1px solid rgba(51, 37, 31, .14);
    }
    .pd-reviews{
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 48px 0;
    }
    /* The "You may also like" line follows 48px below; the last review's own line doubled it. */
    .pd-review:last-child{
        border-bottom: 0;
        padding-bottom: 0;
    }
    .pd-two{
        grid-template-columns: minmax(0, 1fr);
    }
    .pd-review-form{
        padding: 20px 16px;
    }
    .pd-review-form .page-button{
        justify-self: stretch;
    }
    .pd-related{
        padding: 48px 0 56px;
    }
    .pd-related-head{
        flex-direction: column;
        align-items: start;
    }
    .pd-related-grid{
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px;
        scrollbar-width: none;
    }
    .pd-related-grid::-webkit-scrollbar{
        display: none;
    }
    .pd-card{
        flex: 0 0 62%;
        scroll-snap-align: start;
    }
    /* appears once the page's own Add to Bag has scrolled away */
    .pd-bar{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: rgba(246, 242, 235, .86);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
        box-shadow: 0 -1px 0 rgba(51, 37, 31, .14);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .45s cubic-bezier(.22, .7, .25, 1), visibility 0s linear .45s;
    }
    .pd-bar.is-shown{
        transform: none;
        visibility: visible;
        transition: transform .45s cubic-bezier(.22, .7, .25, 1), visibility 0s;
    }
    .pd-bar div{
        display: grid;
        gap: 2px;
        min-width: 0;
    }
    .pd-bar span{
        overflow: hidden;
        color: #756a61;
        font-size: 10px;
        letter-spacing: 1.6px;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .pd-bar b{
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }
    .pd-bar .page-button{
        width: auto;
        min-width: 0;
        min-height: 48px;
        gap: 12px;
    }
    .bag-toast{
        top: 78px;
        right: 16px;
        left: 16px;
        width: auto;
    }
    /* full screen: each photo fills the phone (cropped if needed) and swipes sideways; drag down to close */
    .pd-lightbox{
        display: block;
        background-color: #e8e0d6;
    }
    .pd-lightbox > img,
    .pd-lightbox-nav{
        display: none;
    }
    /* close sits centered at the bottom, for anyone who does not know to drag down */
    .pd-lightbox-close{
        top: auto;
        right: auto;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
    }
    .pd-lightbox-track{
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior: contain;
        scrollbar-width: none;
        touch-action: pan-x;
    }
    .pd-lightbox-track::-webkit-scrollbar{
        display: none;
    }
    .pd-lightbox-slide{
        flex: 0 0 100%;
        height: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .pd-lightbox-slide{
        overflow: hidden;
    }
    .pd-lightbox-slide img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center;
        will-change: transform;
    }
    /* while a photo is zoomed, one finger moves it instead of swiping to the next */
    .pd-lightbox-track.is-zoomed{
        overflow-x: hidden;
    }
    .pd-lightbox-count{
        top: calc(18px + env(safe-area-inset-top, 0px));
        bottom: auto;
    }
}

/* Header: cream glass bar on every page and width; on the home page it sits clear over the hero until scrolling starts */
header.header{
    background-color: rgba(246, 242, 235, .72);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 1px 0 rgba(51, 37, 31, .14);
    transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
header.header.scrolled{
    background-color: rgba(246, 242, 235, .84);
    box-shadow: 0 1px 0 rgba(51, 37, 31, .14);
}
header.header-index:not(.scrolled){
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* Home: "Made for Your Face", a quiet text-only guide between the two image carousels */
.face-guide {
    padding: 108px 0;
    background-color: #ece3d7;
}
.face-guide-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 42px;
}
.face-guide-kicker {
    display: block;
    margin-bottom: 12px;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}
.face-guide-heading h2 {
    margin: 0;
    color: #33251f;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.3vw, 62px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1.04;
}
.face-guide-heading p {
    max-width: 340px;
    margin: 0 0 4px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.face-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(51, 37, 31, .18);
}
.face-guide-cell {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    padding: 40px 36px 38px;
    border-bottom: 1px solid rgba(51, 37, 31, .18);
    color: #33251f;
    cursor: pointer;
}
.face-guide-cell:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(51, 37, 31, .18); }
.face-guide-cell:nth-child(3n + 1) { padding-left: 0; }
.face-guide-cell:nth-child(3n) { padding-right: 0; }
.face-guide-cell svg {
    display: block;
    width: 96px;
    height: auto;
    margin-bottom: 40px;
}
.face-guide-cell h3 {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}
.face-guide-cell p {
    margin: 0 0 24px;
    color: #756a61;
    font-size: 13px;
    line-height: 1.65;
}
.face-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: #9b5a33;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.face-guide-link span {
    display: inline-block;
    font-size: 15px;
    line-height: .7;
    transition: transform .35s ease;
}
@media (hover: hover) {
.face-guide-cell:hover .face-guide-link span { transform: translate(2px, -2px); }
}
.face-guide-cell:focus-visible {
    outline: 1px solid #33251f;
    outline-offset: -1px;
}
.face-guide + .special-discount { padding-top: 108px; }
@media screen and (max-width: 768px) {
    .face-guide { padding: 76px 0; }
    .face-guide > .container { width: calc(100% - 32px); }
    .face-guide-heading {
        display: block;
        margin-bottom: 28px;
    }
    .face-guide-heading h2 { font-size: clamp(38px, 10vw, 52px); }
    .face-guide-heading p { margin-top: 16px; }
    /* phones: the six shapes slide sideways, with the next one peeking in */
    .face-guide-grid {
        display: flex;
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
        border-bottom: 1px solid rgba(51, 37, 31, .18);
    }
    .face-guide-grid::-webkit-scrollbar { display: none; }
    .face-guide-cell,
    .face-guide-cell:nth-child(3n + 1),
    .face-guide-cell:nth-child(3n) {
        flex: 0 0 66%;
        padding: 28px 18px 26px;
        border-bottom: 0;
        border-left: 1px solid rgba(51, 37, 31, .18);
        scroll-snap-align: start;
    }
    .face-guide-cell:first-child {
        padding-left: 0;
        border-left: 0;
    }
    .face-guide-cell svg {
        width: 72px;
        margin-bottom: 26px;
    }
    .face-guide-cell h3 { font-size: 20px; }
    .face-guide-cell p { margin-bottom: 18px; }
    .face-guide + .special-discount { padding-top: 76px; }
}

/* Account: order details in a cream glass panel from the right (desktop) */
.account-drawer{
    position: fixed;
    z-index: 2050;
    inset: 0;
}
.account-drawer-scrim{
    position: absolute;
    inset: 0;
    background-color: rgba(51, 37, 31, .22);
    opacity: 0;
    transition: opacity .45s ease;
}
.account-drawer-panel{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(540px, 100%);
    box-sizing: border-box;
    padding: 32px 36px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(246, 242, 235, .94);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    box-shadow: -1px 0 0 rgba(51, 37, 31, .14);
    color: #33251f;
    outline: none;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22, .7, .25, 1);
}
.account-drawer.is-open .account-drawer-scrim{
    opacity: 1;
}
.account-drawer.is-open .account-drawer-panel{
    transform: none;
}
.account-drawer-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.account-drawer-head h2{
    margin: 10px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -.8px;
}
.account-drawer-head small{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-drawer-close{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -6px -8px 0 0;
    color: #33251f;
}
.account-drawer-close svg{
    width: 24px;
    height: 24px;
}
.account-drawer-close:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 2px;
}
.account-drawer-status{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.account-drawer-status b{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
}
.account-drawer-body .account-order-inner{
    padding: 24px 0 0;
}
.account-drawer-body .account-order-list{
    display: grid;
    gap: 12px;
}
.account-drawer-body .account-order-line{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

/* Account: an address set like a mailing label, straight on the card */
.account-label{
    position: relative;
    display: grid;
    gap: 8px;
}
.account-label-tag{
    position: absolute;
    top: 6px;
    right: 0;
    color: #9b5a33;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-label-name{
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -.2px;
}
.account-label-lines{
    color: #33251f;
    font-size: 14px;
    font-style: normal;
    line-height: 1.7;
}
.account-label-phone{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* Account: Sign Out beside the greeting on phones only */
.account-title-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.account-signout-top{
    display: none;
}
@media (max-width: 768px) {
    .account-signout-top{
        display: block;
        flex: none;
    }
    .account-signout-top button{
        min-height: 32px;
        padding: 0 14px;
        border: 1px solid #33251f;
        background-color: #33251f;
        color: #f6f2eb;
        font-size: 10px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }
    .account-signout-top button:focus-visible{
        outline: 1px solid #33251f;
        outline-offset: 2px;
    }
    /* the Sign Out under the tabs is no longer needed on phones */
    .account-bar .account-signout{
        display: none;
    }
}
/* Account forms: Cancel and Save share one, lighter height */
.account-form-actions .account-action,
.account-form-actions .page-button{
    min-height: 44px;
}
.account-form-actions .page-button{
    padding-top: 0;
    padding-bottom: 0;
}
/* Find on Map is a text link; keep it in the ink colour on every browser */
.account-form-actions button.page-link{
    -webkit-appearance: none;
    appearance: none;
    background: none;
    color: #33251f;
}
/* Favorites: a quiet Remove link under each saved frame */
.account-favorite-remove{
    justify-self: start;
    margin-top: 8px;
    padding: 0 0 2px;
    border-bottom: 1px solid currentColor;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .3s ease;
}
@media (hover: hover) {
.account-favorite-remove:hover{ color: #80202a; }
}
.account-favorite-remove:focus-visible{
    outline: 1px solid #33251f;
    outline-offset: 3px;
}

/* FAQ on phones: the chosen topic fades in */
/* a topic's questions rise into place, like the rest of the site's sections */
@keyframes faqTopicIn{
    from{ opacity: 0; transform: translateY(36px); }
    to{ opacity: 1; transform: none; }
}
@media (max-width: 768px) {
    .faq-group.is-entering{
        animation: faqTopicIn .7s cubic-bezier(.22, .7, .25, 1) both;
    }
    .faq-group + .faq-group{
        margin-top: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .faq-group.is-entering{
        animation: none;
    }
}

/* Order confirmation: what was bought, then the details */
.ty-items{
    display: grid;
    gap: 12px;
}
.ty-item{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}
.ty-item-img{
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background-color: #e8e0d6;
}
.ty-item-img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ty-item-img b{
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: #33251f;
    color: #fbf9f5;
    font-size: 10px;
    font-weight: 400;
}
.ty-item-name{
    min-width: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.3;
}
.ty-item-name small{
    display: block;
    margin-top: 3px;
    color: #756a61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.ty-item-price{
    display: grid;
    justify-items: end;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
}
.ty-item-price s{
    color: #9b5a33;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.ty-card dt.ty-total,
.ty-card dd.ty-total{
    border-bottom: 0;
}
.ty-card dd.ty-total{
    font-size: 22px;
}
.ty-ref{
    margin-top: 12px;
}

/* ---------- returns on a delivered order (account) ---------- */
.account-returns{
    display: grid;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(51, 37, 31, .14);
}
.account-return{
    display: grid;
    gap: 6px;
}
.account-return p{
    margin: 0;
}
.account-return-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    color: #33251f;
    font-size: 13px;
}
.account-return-head b{
    font-weight: 600;
    letter-spacing: .4px;
}
.account-return-items,
.account-return-text,
.account-return-policy{
    color: #5d5047;
    font-size: 13px;
    line-height: 1.6;
}
.account-return-policy{
    margin: 10px 0 0;
    color: #756a61;
}
.account-status.is-requested{
    border-color: rgba(176, 112, 40, .55);
    background-color: rgba(176, 112, 40, .08);
    color: #9a5f1f;
}
.account-status.is-approved{
    border-color: rgba(52, 84, 118, .5);
    background-color: rgba(52, 84, 118, .07);
    color: #345476;
}
.account-status.is-received,
.account-status.is-refunded{
    border-color: rgba(52, 102, 72, .5);
    background-color: rgba(52, 102, 72, .07);
    color: #346648;
}
.account-status.is-declined,
.account-status.is-expired{
    border-color: rgba(128, 32, 42, .5);
    background-color: rgba(128, 32, 42, .06);
    color: #80202a;
}
.account-return-start > .account-action{
    justify-self: start;
}
.account-return-form{
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.account-return-form[hidden]{
    display: none;
}
.account-return-title{
    margin: 0;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}
.account-return-line{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 37, 31, .1);
}
.account-return-qty{
    display: grid;
    gap: 4px;
    justify-items: end;
}
.account-return-qty > span,
.account-return-form .account-field > span{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-return-form .account-field > span small{
    letter-spacing: 0;
    text-transform: none;
}
.account-return-qty select{
    min-width: 64px;
    padding: 6px 8px;
    border: 1px solid rgba(51, 37, 31, .3);
    border-radius: 0;
    background-color: #fff;
    color: #33251f;
    font-size: 16px;
}
.account-return-form textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(51, 37, 31, .3);
    border-radius: 0;
    background-color: #fff;
    color: #33251f;
    font: 16px/1.5 inherit;
    resize: vertical;
}
.account-return-error{
    margin: 0;
    color: #80202a;
    font-size: 13px;
}
.account-return-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.account-action--solid{
    background-color: #33251f;
    color: #f6f2eb;
}
@media screen and (max-width: 768px) {
    .account-return-form{
        padding: 16px;
    }
    .account-return-actions .account-action{
        flex: 1 1 auto;
    }
}
.account-return-line .account-order-name small{
    display: block;
    margin-top: 4px;
    color: #756a61;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- account: Returns tab ---------- */
.account-returns-policy{
    max-width: 560px;
    margin: 0 auto 32px;
    color: #5d5047;
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
}
.account-returns-policy b{
    display: block;
    margin-bottom: 8px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.2px;
}
.account-returns-empty{
    max-width: 460px;
    margin: 8px auto 0;
    padding: 40px 24px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
    text-align: center;
}
.account-returns-empty b{
    display: block;
    margin-bottom: 8px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
}
.account-returns-empty p{
    margin: 0;
    color: #5d5047;
    font-size: 14px;
    line-height: 1.7;
}
.account-returns-list{
    display: grid;
    gap: 16px;
}
.account-return-card{
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.account-return-card-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(51, 37, 31, .1);
}
.account-return-card-head b{
    display: block;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
}
.account-return-card-head small{
    display: block;
    margin-top: 4px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.account-return-card-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding: 22px 24px 24px;
}
.account-return-card .account-order-list{
    display: grid;
    gap: 12px;
    align-content: start;
}
.account-return-card .account-order-line{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.account-return-card .account-order-name small{
    display: block;
    margin-top: 4px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.account-return-card-facts{
    display: grid;
    gap: 16px;
    align-content: start;
}
.account-return-card-facts .account-return-text{
    margin: 0;
}
.account-return-card-facts .account-dl{
    margin: 0;
}
.account-return-card .account-text-link{
    padding: 0;
    font: inherit;
}
.account-returns-policy .account-text-link,
.account-returns-empty .account-text-link{
    padding: 0;
    font: inherit;
    vertical-align: baseline;
}
/* on the order: one line per return, with the way to its details */
.account-returns .account-return-head .account-text-link{
    margin-left: auto;
    padding: 0;
    font-size: 12px;
}
.account-returns .account-return-head .account-status{
    margin-left: 0;
}
@media (max-width: 768px) {
    .account-return-card-head{
        padding: 18px;
    }
    .account-return-card-body{
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 18px;
    }
}
/* the Orders link inside these sentences reads as a word, not a button label */
.account-returns-policy .account-text-link,
.account-returns-empty .account-text-link{
    color: #33251f;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}

/* desktop: a taller hero (half the screen width, 720px on a 1440px screen). The photo is wider than this,
   so it crops from the copy side only; the copy column narrows to stay clear of the couple */
@media (min-width: 1181px){
    .hero{
        height: 50vw;
    }
    .hero-content{
        width: min(560px, 44%);
    }
}
/* small desktops: the photo scales with the screen but the menu does not, so on the home page the menu
   tightens to end before the boy's hair */
@media (min-width: 1181px) and (max-width: 1439px){
    .header-index .list{ margin-left: 28px; }
    .header-index .list ul{ gap: 2px; }
    .header-index .list > ul > li > a{ padding: 0 7px; }
}
@media (min-width: 1181px) and (max-width: 1259px){
    .header-index .list{ margin-left: 22px; }
    .header-index .list ul{ gap: 0; }
    .header-index .list > ul > li > a{ padding: 0 6px; letter-spacing: 1px; }
}

/* Client-advisor chat (Contact page): a quiet panel from the right, full screen on phones */
.concierge-chat-link{
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color .25s ease;
}
@media (hover: hover) {
.concierge-chat-link:hover{
    color: #9b5a33;
}
}
.nx-chat{
    position: fixed;
    inset: 0;
    z-index: 1300;
}
.nx-chat[hidden]{
    display: none;
}
body.nx-chat-open{
    overflow: hidden;
}
.nx-chat-scrim{
    position: absolute;
    inset: 0;
    background: rgba(51, 37, 31, .32);
    opacity: 0;
    transition: opacity .4s ease;
}
.nx-chat-panel{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    width: min(440px, 100%);
    background-color: #f6f2eb;
    color: #33251f;
    border-left: 1px solid rgba(51, 37, 31, .14);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.18, .64, .27, 1);
}
.nx-chat.is-open .nx-chat-scrim{
    opacity: 1;
}
.nx-chat.is-open .nx-chat-panel{
    transform: none;
}
.nx-chat-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 28px 22px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.nx-chat-head h2{
    margin-top: 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.nx-chat-status{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #756a61;
    font-size: 12px;
}
.nx-chat-status i{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #5b7a5a;
}
.nx-chat-close{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -8px -10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #33251f;
    cursor: pointer;
}
.nx-chat-close svg{
    width: 22px;
    height: 22px;
}
.nx-chat-log{
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 28px;
}
.nx-chat-note{
    color: #756a61;
    font-size: 13px;
}
.nx-chat-msg{
    display: grid;
    gap: 6px;
    max-width: 86%;
}
.nx-chat-msg.is-client{
    align-self: flex-end;
    justify-items: end;
}
.nx-chat-meta{
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.nx-chat-msg p{
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.nx-chat-msg.is-advisor p{
    background-color: #fdfbf7;
    border: 1px solid rgba(51, 37, 31, .12);
}
.nx-chat-msg.is-client p{
    background-color: #33251f;
    color: #f6f2eb;
}
.nx-chat-msg.is-typing p{
    display: flex;
    gap: 5px;
    padding: 17px 16px;
}
.nx-chat-msg.is-typing i{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #756a61;
    animation: nxChatDot 1s ease-in-out infinite;
}
.nx-chat-msg.is-typing i:nth-child(2){ animation-delay: .15s; }
.nx-chat-msg.is-typing i:nth-child(3){ animation-delay: .3s; }
@keyframes nxChatDot{
    0%, 100%{ opacity: .3; }
    50%{ opacity: 1; }
}
.nx-chat-topics{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 28px 18px;
}
.nx-chat-topics[hidden]{
    display: none;
}
.nx-chat-topics button{
    padding: 9px 13px;
    border: 1px solid rgba(51, 37, 31, .3);
    background: none;
    color: #33251f;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s ease;
}
@media (hover: hover) {
.nx-chat-topics button:hover{
    background-color: #ece3d7;
}
}
.nx-chat-form{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 0 28px;
    padding: 14px 0;
    border-top: 1px solid #33251f;
}
.nx-chat-form textarea{
    flex: 1;
    min-width: 0;
    max-height: 140px;
    padding: 10px 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: #33251f;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
}
.nx-chat-form textarea::placeholder{
    color: #756a61;
}
.nx-chat-send{
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    background-color: #33251f;
    color: #f6f2eb;
    cursor: pointer;
    transition: opacity .25s ease;
}
.nx-chat-send:disabled{
    opacity: .5;
    cursor: wait;
}
.nx-chat-send svg{
    width: 18px;
    height: 18px;
}
.nx-chat-feedback{
    min-height: 18px;
    padding: 0 28px calc(18px + env(safe-area-inset-bottom, 0px));
    color: #756a61;
    font-size: 12px;
}
.nx-chat-feedback.is-error{
    color: #9b5a33;
}
@media (max-width: 576px) {
    .nx-chat-panel{
        width: 100%;
        border-left: 0;
    }
    .nx-chat-head{
        padding: 22px 16px 18px;
    }
    .nx-chat-head h2{
        font-size: 26px;
    }
    .nx-chat-log{
        padding: 22px 16px;
    }
    .nx-chat-topics{
        padding: 0 16px 16px;
    }
    .nx-chat-form{
        margin: 0 16px;
    }
    .nx-chat-feedback{
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* with reduced motion the panel still slides, only quicker, so it is clear where it came from */
@media (prefers-reduced-motion: reduce) {
    .nx-chat-panel{
        transition-duration: .25s;
    }
}

/* phones, collection pages: Women / Men / Unisex sit on the bottom of the photo, as on desktop,
   and the style, On Sale and Filter controls below form one hairline bar (kept last so it wins
   over the earlier phone rules) */
@media (max-width: 768px) {
    .shop-intro-visual{
        height: 400px;
    }
    .shop-intro-copy{
        align-self: end;
        padding: 0 18px 108px;
    }
    .shop-intro-copy p{
        display: none;
    }
    .shop-groups{
        grid-row: 1;
        align-self: end;
        z-index: 2;
        display: flex;
        gap: 0;
        margin: 0 18px;
        padding-bottom: 6px;
        border: 0;
    }
    .shop-groups a{
        flex: 1;
        align-items: flex-start;
        gap: 6px;
        margin: 0;
        padding: 13px 16px 14px 0;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .45);
        background: none;
    }
    .shop-groups a + a{
        border-left: 0;
    }
    .shop-groups a small{
        display: block;
        color: rgba(255, 255, 255, .82);
        font-size: 9px;
        letter-spacing: 2px;
    }
    .shop-groups a span{
        color: rgba(255, 255, 255, .72);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 19px;
        letter-spacing: -.3px;
        text-transform: none;
    }
    .shop-groups a.active{
        padding-top: 12px;
        border-top: 2px solid #fff;
        background: none;
    }
    .shop-groups a.active span{
        color: #fff;
    }
    .shop-toolbar{
        margin: 0 -16px;
        border-top: 0;
    }
    .shop-toolbar-inner{
        gap: 0;
        min-height: 0;
        padding: 0;
    }
    /* the style list opens right on the bar's bottom line, a little in from the edge */
    .shop-style-menu{
        top: 100%;
        left: 16px;
    }
    .shop-style-open,
    .shop-toolbar .shop-filter-open,
    .shop-sale-toggle{
        height: 60px;
        border: 0;
    }
    .shop-style-open{
        padding: 0 16px;
    }
    .shop-style-open[aria-expanded="true"]{
        background-color: #ece3d7;
    }
    .shop-sale-toggle{
        grid-column: 2;
        padding: 0 14px;
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    .shop-sale-toggle[aria-pressed="true"]{
        color: #33251f;
        border-color: rgba(51, 37, 31, .14);
        background-color: #ece3d7;
    }
    .shop-sale-toggle[aria-pressed="true"] span,
    .shop-sale-toggle[aria-pressed="true"] .shop-sale-count{
        color: #33251f;
    }
    .shop-toolbar .shop-filter-open{
        grid-column: 3;
        padding: 0 16px;
        border-left: 1px solid rgba(51, 37, 31, .14);
    }
    /* search results have no style list: On Sale and Filter share the bar */
    .shop-toolbar-inner:not(:has(.shop-style-picker)){
        grid-template-columns: 1fr 1fr;
    }
    .shop-toolbar-inner:not(:has(.shop-style-picker)) .shop-sale-toggle{
        grid-column: 1;
        justify-content: center;
        border-left: 0;
    }
    .shop-toolbar-inner:not(:has(.shop-style-picker)) .shop-filter-open{
        grid-column: 2;
    }
}

/* the Women and Men photos are framed closer, like Unisex: the model fills more of the card */
.shop-intro-visual[data-collection="women"] img,
.shop-intro-visual[data-collection="men"] img{
    scale: 1.28;
    transform-origin: 50% 22%;
}
/* the Women photo grows from its top edge, so the hair stays in frame */
.shop-intro-visual[data-collection="women"] img{
    transform-origin: 50% 4%;
}


/* ===== Checkout: sign-in for guests, and the test card while Stripe runs in test mode ===== */
.co-signin{
    padding: 8px 14px;
    border: 1px solid #2b211c;
    background: transparent;
    color: #2b211c;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.co-signin:hover,
.co-signin:focus-visible{
    background: #2b211c;
    color: #f5efe8;
}
.co-test{
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px dashed rgba(60, 45, 38, .35);
    color: #756a61;
    font-size: 12px;
    line-height: 1.6;
}
.co-test b{
    display: block;
    margin-bottom: 2px;
    color: #9b5a33;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.co-test code{
    color: #2b211c;
    font-family: inherit;
    letter-spacing: .06em;
    white-space: nowrap;
}
@media (max-width: 560px){
    .co-signin-long{
        display: none;
    }
}

/* ===== Account: an unpaid order offers Complete Payment (row and details) next to Cancel Order ===== */
.account-pay{
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #33251f;
    background-color: #33251f;
    color: #f6f2eb;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .35s ease, color .35s ease;
}
@media (hover: hover) {
    .account-pay:hover{
        background-color: transparent;
        color: #33251f;
    }
}
.account-order-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-self: start;
}
.account-order-actions .account-action{
    text-decoration: none;
}
@media (hover: hover) {
    .account-order-actions .account-action--solid:hover{
        background-color: transparent;
        color: #33251f;
    }
}
/* phones: the two buttons share the row at equal width */
@media (max-width: 560px){
    .account-order-actions{
        flex-wrap: nowrap;
        justify-self: stretch;
    }
    .account-order-actions .account-action{
        flex: 1 1 0;
        padding: 0 8px;
        letter-spacing: 1.2px;
        white-space: nowrap;
    }
}

/* Photos on a return request */
.return-photos{
    display: grid;
    gap: 8px;
}
.return-photos-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.return-photos-head small{
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.return-photos-note{
    margin: 0;
    color: #756a61;
    font-size: 13px;
    line-height: 1.5;
}
.return-photos-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.return-photo,
.return-photo-add{
    position: relative;
    aspect-ratio: 1;
    box-sizing: border-box;
}
.return-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.return-photo.is-preparing img{
    opacity: .4;
}
.return-photo button{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background-color: #33251f;
    color: #f6f2eb;
    font-size: 16px;
    line-height: 28px;
    cursor: pointer;
}
.return-photo-add{
    display: grid;
    place-content: center;
    gap: 6px;
    border: 1px dashed rgba(51, 37, 31, .45);
    background-color: #fff;
    color: #33251f;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}
.return-photo-add[hidden]{
    display: none;
}
.return-photo-add b{
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}
.return-photos.is-missing .return-photo-add{
    border-color: #80202a;
    color: #80202a;
}
.return-card-photos{
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.return-card-photos img{
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* Returns tab: Start a Return, then an order, then the request */
.return-start{
    margin: 0 0 28px;
    padding: 0 0 28px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.return-start-bar{
    display: flex;
    justify-content: center;
}
.return-picker{
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(51, 37, 31, .14);
    background-color: #fbf9f5;
}
.return-picker[hidden]{
    display: none;
}
.return-picker-head{
    margin: 0 0 6px;
}
.return-picker-head b{
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 400;
}
.return-picker-note{
    margin: 0 0 16px;
    color: #756a61;
    font-size: 13px;
}
.return-picker-group{
    margin: 20px 0 4px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.return-pick{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid rgba(51, 37, 31, .2);
    background-color: #fff;
    color: #33251f;
    text-align: left;
}
button.return-pick{
    cursor: pointer;
}
button.return-pick:hover,
button.return-pick:focus-visible{
    border-color: #33251f;
}
.return-pick b{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
}
.return-pick small,
.return-picked small{
    display: block;
    margin-top: 4px;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.return-pick-thumbs{
    display: flex;
    gap: 6px;
}
.return-pick-thumbs img{
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.return-pick-go{
    font-size: 18px;
}
.return-pick.is-off{
    grid-template-columns: minmax(0, 1fr) auto;
    border-style: dashed;
    background-color: transparent;
    opacity: .62;
}
.return-pick-why{
    grid-column: 1 / -1;
    margin: 0;
    color: #5d5047;
    font-size: 12px;
}
.return-picked{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 37, 31, .14);
}
.return-picked b{
    display: block;
    margin-top: 2px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
}
.return-picker .account-return-form{
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
}
.return-picker-empty{
    padding: 12px 0;
    text-align: center;
}
.return-picker-empty b{
    display: block;
    margin-bottom: 8px;
    color: #33251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 400;
}
.return-picker-empty p{
    margin: 0;
    color: #756a61;
    font-size: 14px;
}
@media (max-width: 768px) {
    .return-picker{
        padding: 16px;
    }
    .return-pick{
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }
    .return-pick-go{
        display: none;
    }
}
/* the tab is wider than the order's panel: photos keep the panel's size */
.return-picker .return-photos-grid{
    max-width: 420px;
}