/*
  UX system refresh.
  Loaded last to turn the previous visual polish layers into a predictable
  ecommerce/admin experience: calm typography, compact cards, controlled media,
  clear states, accessible focus, and mobile-first flows.
*/
:root {
    --ux-font: "Vazirmatn", "IRANSansX", "IRANSans", "IranYekan", "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif;
    --ux-container: 1280px;
    --ux-page-gap: 24px;
    --ux-section-gap: 28px;
    --ux-card-pad: 16px;
    --ux-card-radius: 8px;
    --ux-control-radius: 8px;
    --ux-media-radius: 8px;
    --ux-border: #e5e7eb;
    --ux-border-strong: #d1d5db;
    --ux-muted-bg: #f8fafc;
    --ux-info: #2563eb;
    --ux-info-soft: rgb(37 99 235 / .10);
    --ux-success-soft: rgb(var(--success-rgb) / .10);
    --ux-warning-soft: rgb(249 168 37 / .16);
    --ux-danger-soft: rgb(var(--site-accent-rgb) / .10);
    --ux-shadow: 0 1px 2px rgb(15 23 42 / .05);
    --ux-shadow-hover: 0 8px 22px rgb(15 23 42 / .08);
    --ux-focus: 0 0 0 3px rgb(var(--site-accent-rgb) / .18);
}

:root[data-theme="dark"],
html[data-theme="dark"] {
    --ux-border: rgba(255, 255, 255, .10);
    --ux-border-strong: rgba(255, 255, 255, .18);
    --ux-muted-bg: rgba(255, 255, 255, .045);
    --ux-info-soft: rgb(96 165 250 / .14);
    --ux-shadow: 0 1px 2px rgb(0 0 0 / .18);
    --ux-shadow-hover: 0 10px 24px rgb(0 0 0 / .24);
}

html {
    font-size: 15px;
    scroll-padding-top: 112px;
}

body {
    font-family: var(--ux-font) !important;
    background: var(--app-bg) !important;
    color: var(--text) !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
}

body,
button,
input,
textarea,
select {
    font-family: var(--ux-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.dashboard-title,
.dk-brand__name,
.brand-block__name,
.section-heading h1,
.section-heading h2,
.section-heading h3 {
    letter-spacing: 0 !important;
    text-wrap: balance;
}

a,
button,
.btn,
.page-card,
.product-card,
.blog-card,
.category-card,
.favorite-card,
.settings-panel,
.admin-metric-card,
.form-control,
.form-select {
    transition-duration: 160ms !important;
}

:focus-visible {
    outline: none !important;
    box-shadow: var(--ux-focus) !important;
}

button:disabled,
.btn:disabled,
.btn.disabled {
    cursor: not-allowed !important;
    opacity: .58 !important;
    transform: none !important;
    box-shadow: none !important;
}

img,
video {
    max-width: 100%;
}

.page-frame {
    width: min(100% - 32px, var(--ux-container)) !important;
    margin-inline: auto;
}

.dk-main,
.shell-main {
    padding: 24px 0 44px !important;
}

.dk-main > .page-frame {
    display: grid !important;
    gap: var(--ux-page-gap) !important;
}

.page-section {
    margin-block: 0 !important;
}

.page-card,
.card,
.content-card,
.shop-card,
.product-card,
.blog-card,
.category-card,
.favorite-card,
.admin-metric-card,
.settings-panel,
.settings-mini-card,
.contact-panel,
.contact-form-card,
.contact-thread-card,
.payment-card,
.cart-item-card,
.address-card,
.address-editor-card,
.blog-admin-form-card,
.preview-panel,
.footer-section-card,
.comment-summary-card,
.comment-modal-card,
.modal-content,
.dropdown-menu,
.table-responsive,
.shop-toolbar,
.shop-filter-panel,
.product-side,
.product-media-shell,
.blog-article-aside,
.cms-page-body,
.cms-page-hero,
.alert {
    border-radius: var(--ux-card-radius) !important;
    border: 1px solid var(--ux-border) !important;
    box-shadow: var(--ux-shadow) !important;
    background: var(--surface) !important;
}

.page-card:hover,
.product-card:hover,
.blog-card:hover,
.category-card:hover,
.favorite-card:hover,
.shop-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--ux-shadow-hover) !important;
}

.section-heading,
.account-section-head,
.admin-hero,
.cart-hero .d-flex {
    align-items: end !important;
    gap: 16px !important;
}

.section-heading h1,
.section-heading h2,
.section-heading h3,
.dashboard-title {
    font-size: 1.28rem !important;
    line-height: 1.55 !important;
}

.section-kicker {
    color: var(--site-accent) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

.hero-title {
    font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

.hero-subtitle,
.section-subtitle {
    max-width: 68ch !important;
    color: var(--text-muted) !important;
}

.btn,
.icon-button,
.dk-icon-button,
.header-action,
.nav-chip,
.dk-nav-chip,
.quantity-stepper,
.quantity-stepper__btn,
.form-control,
.form-select,
textarea,
.input-group-text,
.input-with-icon,
.footer-socials__item,
.footer-enamad,
.thumb-grid__item,
.badge,
.status-pill,
.chip-soft,
.filter-chip {
    border-radius: var(--ux-control-radius) !important;
}

.btn {
    min-height: 40px !important;
    padding: 9px 14px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    white-space: normal;
    text-align: center;
}

.btn-sm {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: .84rem !important;
}

.btn-lg {
    min-height: 46px !important;
    padding: 11px 16px !important;
    font-size: .98rem !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--ux-shadow-hover) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select {
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-color: var(--ux-border-strong) !important;
    background: var(--surface) !important;
}

textarea,
textarea.form-control {
    min-height: 108px !important;
}

.form-label {
    min-height: 0 !important;
    margin-bottom: 6px !important;
    color: var(--text-muted) !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
}

.field,
.field-stack,
.form-field,
.settings-field {
    display: grid !important;
    gap: 6px !important;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon__icon {
    position: absolute;
    inset-inline-start: 12px;
    z-index: 1;
    color: var(--text-soft);
    pointer-events: none;
}

.input-with-icon .form-control {
    padding-inline-start: 40px !important;
}

.row {
    --row-gap: 16px;
}

.home-hero,
.shop-hero,
.cart-hero,
.payment-hero,
.contact-hero,
.cms-page-hero,
.category-hero,
.admin-hero,
.account-hero-card,
.product-hero,
.blog-hero-card {
    border-radius: var(--ux-card-radius) !important;
    padding: 20px !important;
    background: var(--surface) !important;
    box-shadow: var(--ux-shadow) !important;
    overflow: hidden !important;
}

.home-hero::before,
.shop-hero::before,
.admin-hero::before,
.account-hero-card::before,
.category-card::before,
.product-media-shell--premium::before {
    display: none !important;
}

.home-hero {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
    gap: 20px !important;
}

.hero-actions {
    gap: 10px !important;
}

.hero-visual-card {
    min-height: 280px !important;
    max-height: 360px !important;
    border-radius: var(--ux-media-radius) !important;
    box-shadow: none !important;
}

.hero-visual-card--image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hero-visual-card__overlay {
    inset: auto 12px 12px 12px !important;
    padding: 14px !important;
    border-radius: var(--ux-card-radius) !important;
}

.hero-stats,
.stat-grid,
.shop-stats,
.home-stat-grid,
.payment-summary-grid,
.comment-summary-grid,
.admin-metric-grid,
.account-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
    gap: 12px !important;
}

.stat-card,
.home-stat-card,
.trust-card,
.payment-summary-item,
.comment-summary-card,
.admin-metric-card,
.account-stat {
    padding: 14px !important;
    border-radius: var(--ux-card-radius) !important;
}

.dk-header {
    box-shadow: 0 1px 0 var(--ux-border) !important;
}

.dk-header__topline {
    height: 2px !important;
    animation: none !important;
}

.dk-header__inner {
    min-height: 68px !important;
    grid-template-columns: auto minmax(280px, 1fr) auto !important;
    gap: 16px !important;
}

.dk-brand__logo,
.brand-block__logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--ux-control-radius) !important;
}

.dk-brand__name,
.brand-block__name {
    font-size: 1.12rem !important;
}

.dk-search {
    height: 46px !important;
    border-radius: var(--ux-control-radius) !important;
    background: var(--ux-muted-bg) !important;
    box-shadow: none !important;
}

.dk-navbar {
    height: 42px !important;
}

.dk-nav-chip,
.nav-chip {
    height: 36px !important;
}

.shop-toolbar {
    display: grid !important;
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: end !important;
    padding: 16px !important;
}

.shop-toolbar__title {
    display: grid;
    gap: 4px;
}

.shop-toolbar__summary {
    color: var(--text-soft);
    font-size: .84rem;
    font-weight: 750;
}

.shop-toolbar__filters {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) auto auto auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.shop-toolbar__toggle {
    min-height: 44px !important;
    padding: 0 12px !important;
    border-color: var(--ux-border) !important;
    background: var(--ux-muted-bg) !important;
    white-space: nowrap;
}

.shop-grid,
.blog-grid,
.blog-grid--polished,
.category-grid,
.favorite-grid,
.content-grid,
.feature-grid,
.trust-grid,
.testimonial-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
}

.shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)) !important;
}

.blog-grid,
.blog-grid--polished {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

.category-grid,
.favorite-grid,
.content-grid,
.feature-grid,
.trust-grid,
.testimonial-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

.shop-grid > .product-card,
.shop-grid > .product-card:nth-child(n),
.blog-grid > .blog-card,
.blog-grid > .blog-card:nth-child(n),
.category-grid > .category-card,
.category-grid > .category-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
}

.product-card,
.blog-card,
.favorite-card,
.shop-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    isolation: isolate;
}

.product-card__media,
.shop-card__media {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ux-border) !important;
    border-radius: 0 !important;
    background: var(--ux-muted-bg) !important;
    display: grid !important;
    place-items: center !important;
}

.product-card__media::before,
.product-card__media::after,
.shop-card__media::before,
.shop-card__media::after,
.product-card__media-glow {
    display: none !important;
}

.product-card__media > img,
.shop-card__media > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 74% !important;
    max-height: 74% !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: var(--ux-media-radius) !important;
    clip-path: none !important;
}

.product-placeholder,
.product-card__media .product-placeholder,
.shop-card__media .product-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--ux-media-radius) !important;
}

.product-placeholder__svg {
    width: 68% !important;
    max-width: 154px !important;
}

.product-card__discount-badge {
    inset-block-start: 10px !important;
    inset-inline-start: 10px !important;
    min-height: 26px !important;
    border-radius: var(--ux-control-radius) !important;
    box-shadow: none !important;
}

.product-card__body,
.blog-card__body,
.shop-card__body,
.favorite-card__body {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    min-height: 0 !important;
}

.product-card__meta {
    min-height: 0 !important;
    gap: 6px !important;
}

.product-card__title {
    min-height: 0 !important;
    color: var(--text) !important;
    font-size: .94rem !important;
    font-weight: 850 !important;
    line-height: 1.65 !important;
}

.product-card__excerpt {
    margin: 0 !important;
    min-height: 0 !important;
    color: var(--text-muted) !important;
}

.product-card__footer {
    margin-top: auto !important;
    align-items: end !important;
    gap: 10px !important;
}

.product-card__price {
    text-align: start !important;
}

.product-card__price strong {
    font-size: 1rem;
}

.product-card__stock {
    min-height: 28px !important;
    border-radius: var(--ux-control-radius) !important;
    background: var(--ux-success-soft) !important;
    color: var(--success) !important;
}

.product-card__stock.is-low {
    background: var(--ux-warning-soft) !important;
    color: #9a6700 !important;
}

.product-card__actions {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--ux-border) !important;
}

.product-card__actions--in-cart {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.product-card__actions + .btn {
    margin-top: 8px !important;
}

.shop-quantity-input {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
}

.blog-card__media,
.favorite-card__media {
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ux-border) !important;
}

.blog-card__media img,
.blog-card__fallback,
.favorite-card__media img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.blog-card__body h2,
.blog-card__body h3 {
    line-height: 1.6 !important;
}

.blog-card__footer {
    margin-top: auto !important;
    border-top: 1px solid var(--ux-border) !important;
}

.category-card {
    min-height: 84px !important;
    padding: 14px !important;
}

.product-detail-layout,
.product-detail-layout.product-hero__layout {
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

.product-media-shell,
.product-media-shell--premium {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    padding: 16px !important;
    background: var(--surface) !important;
}

.product-media-badges {
    position: static !important;
    margin: 0 !important;
}

.product-main-image {
    width: 100% !important;
    height: min(420px, 52vh) !important;
    max-height: 420px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    padding: 16px !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-media-radius) !important;
    background: var(--ux-muted-bg) !important;
    clip-path: none !important;
}

.thumb-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

.thumb-grid__item {
    padding: 4px !important;
    border-color: var(--ux-border-strong) !important;
    background: var(--surface) !important;
}

.thumb-grid__item.is-active {
    border-color: var(--site-accent) !important;
    box-shadow: var(--ux-focus) !important;
}

.thumb-grid__item img {
    object-fit: contain !important;
    border-radius: calc(var(--ux-media-radius) - 2px) !important;
    background: var(--ux-muted-bg);
}

.product-buybox,
.product-side {
    display: grid !important;
    gap: 12px !important;
}

.product-detail-title {
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
}

.product-trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 4px 0 8px !important;
}

.product-trust-strip span,
.variant-panel,
.variant-chip,
.feature-glass,
.glass-kv-row,
.summary-row {
    border-radius: var(--ux-control-radius) !important;
}

.price-box,
.product-price-panel {
    position: static !important;
    margin-bottom: 8px !important;
}

.product-action-panel {
    display: grid !important;
    gap: 10px !important;
}

.product-detail-content-grid,
.blog-article-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    gap: 20px !important;
}

.blog-article-main {
    padding: 18px !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-card-radius) !important;
    background: var(--surface) !important;
}

.blog-article-hero-media {
    width: min(100%, 720px) !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto 16px !important;
    border-radius: var(--ux-media-radius) !important;
    background: var(--ux-muted-bg) !important;
}

.blog-article-hero-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.blog-article-content img,
.cms-page-body img,
.cms-page-live-content img,
.product-description img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    margin-inline: auto;
    border-radius: var(--ux-media-radius) !important;
}

.product-line-thumb,
.product-line-thumb img,
.product-line-thumb__fallback {
    border-radius: var(--ux-media-radius) !important;
}

.product-line-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: var(--ux-muted-bg) !important;
}

.cart-item-card,
.payment-line,
.product-line,
.dashboard-item,
.admin-list-row,
.contact-reply-item {
    align-items: center !important;
}

.cart-summary--sticky,
.price-box,
.shop-filter-panel,
.blog-article-aside,
.product-info-card,
.account-pro-sidebar,
.checkout-summary-panel {
    top: 104px !important;
}

.checkout-page {
    display: grid !important;
    gap: 18px !important;
    padding: 18px !important;
}

.checkout-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.checkout-step {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-card-radius);
    background: var(--ux-muted-bg);
    color: var(--text-muted);
    font-weight: 800;
}

.checkout-step__number {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--ux-control-radius);
    background: var(--surface);
    border: 1px solid var(--ux-border-strong);
}

.checkout-step.is-active {
    border-color: rgb(var(--site-accent-rgb) / .42);
    background: var(--site-accent-soft);
    color: var(--site-accent);
}

.checkout-step.is-active .checkout-step__number,
.checkout-step.is-complete .checkout-step__number {
    background: var(--site-accent);
    color: var(--site-accent-contrast);
    border-color: var(--site-accent);
}

.checkout-step.is-complete {
    border-color: rgb(var(--success-rgb) / .32);
    background: var(--ux-success-soft);
    color: var(--success);
}

.checkout-progress {
    height: 8px !important;
    border-radius: var(--ux-control-radius) !important;
    background: var(--ux-muted-bg) !important;
    overflow: hidden;
}

.checkout-progress .progress-bar {
    background: var(--site-accent) !important;
}

.checkout-step-panel,
.checkout-summary-panel,
.checkout-address-option {
    border-color: var(--ux-border) !important;
    border-radius: var(--ux-card-radius) !important;
    background: var(--surface) !important;
}

.checkout-step-panel {
    display: grid !important;
    gap: 16px !important;
}

.checkout-address-option {
    cursor: pointer;
}

.checkout-address-option:hover,
.checkout-address-option.is-selected {
    border-color: rgb(var(--site-accent-rgb) / .42) !important;
    background: var(--site-accent-soft) !important;
}

.checkout-summary-panel {
    position: sticky;
}

.checkout-summary-panel .product-line {
    align-items: center !important;
    border-radius: var(--ux-card-radius) !important;
    background: var(--ux-muted-bg) !important;
}

.account-pro-shell {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 20px !important;
}

.account-pro-sidebar {
    padding: 16px !important;
}

.account-profile-mini {
    display: grid;
    gap: 12px;
}

.account-profile-mini__name {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.45;
}

.account-profile-mini__email {
    color: var(--text-soft);
    font-size: .84rem;
    overflow-wrap: anywhere;
}

.account-pro-nav {
    margin-top: 16px;
}

.account-pro-nav a {
    border-radius: var(--ux-control-radius) !important;
}

.address-manager-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
    gap: 16px !important;
}

.address-card,
.address-editor-card {
    padding: 14px !important;
}

.address-card.is-active {
    border-color: rgb(var(--site-accent-rgb) / .44) !important;
}

.favorite-card__media {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    background: var(--ux-muted-bg);
}

.favorite-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-hero {
    margin-bottom: 0 !important;
}

.admin-metric-grid {
    margin-top: 0 !important;
}

.admin-search {
    border-radius: var(--ux-card-radius) !important;
    background: var(--surface) !important;
}

.settings-nav {
    gap: 8px !important;
}

.settings-nav a,
.list-group-item-action {
    border-radius: var(--ux-control-radius) !important;
}

.dk-footer {
    padding: 28px 0 24px !important;
}

.dk-footer-services,
.dk-footer__grid--dynamic,
.footer-grid {
    gap: 18px !important;
}

.dk-footer-service,
.footer-trust__item {
    border-radius: var(--ux-card-radius) !important;
}

.footer-enamad {
    width: 104px !important;
    min-height: 104px !important;
}

.footer-enamad img {
    max-height: 82px !important;
    object-fit: contain !important;
}

@media (max-width: 1199.98px) {
    .dk-header__inner {
        grid-template-columns: auto auto !important;
    }

    .dk-search--premium {
        display: none !important;
    }

    .home-hero,
    .product-detail-layout,
    .product-detail-layout.product-hero__layout,
    .product-detail-content-grid,
    .blog-article-layout,
    .account-pro-shell,
    .address-manager-grid {
        grid-template-columns: 1fr !important;
    }

    .cart-summary--sticky,
    .price-box,
    .shop-filter-panel,
    .blog-article-aside,
    .product-info-card,
    .account-pro-sidebar,
    .checkout-summary-panel {
        position: static !important;
    }

    .shop-toolbar {
        grid-template-columns: 1fr !important;
    }

    .shop-toolbar__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --ux-page-gap: 18px;
        --ux-section-gap: 20px;
        --ux-card-pad: 14px;
    }

    html {
        font-size: 14px;
    }

    .page-frame {
        width: min(100% - 16px, var(--ux-container)) !important;
    }

    .dk-main,
    .shell-main {
        padding: 16px 0 82px !important;
    }

    .home-hero,
    .shop-toolbar,
    .cart-hero,
    .payment-hero,
    .contact-hero,
    .cms-page-hero,
    .category-hero,
    .admin-hero,
    .account-hero-card,
    .product-hero,
    .blog-hero-card {
        padding: 14px !important;
    }

    .hero-title,
    .home-hero .hero-title,
    .product-detail-title {
        font-size: 1.45rem !important;
    }

    .section-heading,
    .account-section-head,
    .cart-hero .d-flex,
    .admin-hero,
    .blog-card__footer,
    .product-card__footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .section-heading .btn,
    .hero-actions .btn,
    .cart-hero .btn,
    .admin-hero .btn,
    .account-section-head .btn {
        width: 100%;
    }

    .shop-toolbar__filters {
        grid-template-columns: 1fr !important;
    }

    .shop-toolbar__filters > .btn {
        width: 100%;
    }

    .shop-grid,
    .blog-grid,
    .blog-grid--polished,
    .category-grid,
    .favorite-grid,
    .content-grid,
    .feature-grid {
        grid-template-columns: 1fr !important;
    }

    .product-card__media,
    .shop-card__media {
        aspect-ratio: 4 / 3 !important;
    }

    .product-card__media > img,
    .shop-card__media > img {
        max-width: 68% !important;
        max-height: 68% !important;
    }

    .product-card__actions,
    .product-card__actions--in-cart {
        grid-template-columns: 1fr !important;
    }

    .product-main-image {
        height: 280px !important;
        max-height: 280px !important;
    }

    .product-trust-strip,
    .checkout-stepper {
        grid-template-columns: 1fr !important;
    }

    .checkout-page {
        padding: 14px !important;
    }

    .checkout-page > .d-flex:first-child,
    .checkout-step-panel .d-flex.justify-content-between,
    .checkout-step-panel .d-flex.justify-content-end,
    .cart-item-card,
    .payment-line,
    .product-line,
    .dashboard-item,
    .admin-list-row,
    .contact-reply-item {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .checkout-step-panel .btn,
    .address-card__actions .btn,
    .favorite-card .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .product-main-image {
        height: 240px !important;
        max-height: 240px !important;
    }

    .product-card__media > img,
    .shop-card__media > img {
        max-width: 64% !important;
        max-height: 64% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Admin and ticket layout repair */
.admin-main {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-subtle) 74%, var(--app-bg) 26%), var(--app-bg));
}

.admin-main .page-frame {
    width: min(100% - 28px, 1480px) !important;
    gap: 18px !important;
}

.admin-main .page-card,
.admin-main .card,
.admin-main .settings-panel,
.admin-main .admin-metric-card,
.admin-main .feature-card,
.admin-main .blog-admin-form-card {
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / .05) !important;
}

.admin-main .page-card:hover,
.admin-main .card:hover,
.admin-main .settings-panel:hover,
.admin-main .feature-card:hover {
    transform: none !important;
}

.admin-main .table th,
.admin-main .table td {
    padding: 10px 12px !important;
}

.admin-main .table th {
    white-space: nowrap;
}

.admin-main .btn-group {
    gap: 6px;
}

.admin-main .btn-group .btn {
    border-radius: 8px !important;
}

.admin-main .list-group {
    display: grid;
    gap: 8px;
}

.admin-main .list-group-item,
.admin-main .list-group-item-action {
    width: 100%;
    text-align: start;
}

.admin-main textarea.form-control,
.admin-main textarea {
    min-height: 92px !important;
}

.contact-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 18px;
    align-items: start;
}

.contact-support-grid__form,
.contact-support-grid__tickets {
    min-width: 0;
}

.contact-form-card,
.contact-panel {
    padding: 18px !important;
}

.contact-support-grid__tickets .contact-panel {
    position: sticky;
    top: 104px;
}

.contact-form-card .row,
.contact-panel .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.contact-ticket-list,
.admin-ticket-list {
    display: grid !important;
    gap: 8px !important;
    overflow: auto;
    padding-inline-end: 2px;
}

.contact-ticket-list {
    max-height: 330px;
}

.contact-ticket-list__item,
.admin-ticket-list__item {
    min-height: 0 !important;
    display: grid !important;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.contact-ticket-list__item:hover,
.admin-ticket-list__item:hover,
.contact-ticket-list__item.active,
.admin-ticket-list__item.active {
    border-color: rgb(var(--site-accent-rgb) / .36) !important;
    background: var(--site-accent-soft) !important;
    color: var(--text) !important;
}

.contact-ticket-thread {
    display: grid;
    gap: 12px;
    padding: 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ux-border) !important;
    background: var(--ux-muted-bg) !important;
}

.contact-ticket-thread > .mb-3,
.contact-ticket-thread [style*="white-space"] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.contact-reply-item {
    display: grid !important;
    gap: 4px !important;
    align-items: start !important;
    justify-content: stretch !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ux-border) !important;
    background: var(--surface) !important;
}

.admin-ticket-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-ticket-workspace__list,
.admin-ticket-workspace__detail {
    min-width: 0;
}

.admin-ticket-workspace__list {
    position: sticky;
    top: 104px;
}

.admin-ticket-card {
    padding: 18px !important;
    border-radius: 8px !important;
}

.admin-ticket-card--list {
    max-height: calc(100dvh - 128px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.admin-ticket-card--detail {
    min-height: 520px;
}

.admin-ticket-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr);
    gap: 10px;
}

.admin-ticket-filters > * {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-block: 0 !important;
}

.admin-ticket-list {
    max-height: calc(100dvh - 270px);
}

.admin-ticket-message,
.admin-ticket-reply {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--ux-border);
    background: var(--surface);
    overflow-wrap: anywhere;
}

.admin-ticket-reply {
    display: grid;
    gap: 4px;
}

.admin-ticket-reply.is-admin {
    background: var(--site-accent-soft);
    border-color: rgb(var(--site-accent-rgb) / .22);
}

.admin-ticket-reply.is-customer {
    background: var(--surface);
}

@media (max-width: 1199.98px) {
    .contact-support-grid,
    .admin-ticket-workspace {
        grid-template-columns: 1fr;
    }

    .contact-support-grid__tickets .contact-panel,
    .admin-ticket-workspace__list {
        position: static;
    }

    .admin-ticket-card--list,
    .admin-ticket-list,
    .contact-ticket-list {
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .admin-main .page-frame {
        width: min(100% - 16px, 1480px) !important;
        gap: 14px !important;
    }

    .admin-ticket-card,
    .contact-form-card,
    .contact-panel {
        padding: 14px !important;
    }

    .admin-ticket-filters {
        grid-template-columns: 1fr;
    }

    .admin-ticket-card--detail .d-flex,
    .contact-ticket-thread .d-flex {
        align-items: stretch !important;
    }
}

/* CMS, blog editor, and home carousel polish */
.admin-main .admin-content-workspace {
    display: grid;
    gap: 18px;
}

.admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-main .form-control,
.admin-main .form-select {
    min-height: 44px;
    border-radius: 8px !important;
    border-color: var(--ux-border) !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
}

.admin-main textarea.form-control {
    line-height: 1.85;
    resize: vertical;
}

.admin-main .form-label {
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 850;
    color: var(--text);
}

.admin-main .btn {
    min-height: 38px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.admin-form-grid {
    display: grid;
    gap: 12px;
}

.admin-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-stack {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cms-manager-shell {
    overflow: visible;
}

.cms-manager-grid {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.cms-page-picker,
.cms-empty-editor,
.cms-editor-panel,
.cms-preview-card {
    min-width: 0;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    background: var(--surface);
}

.cms-page-picker {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

.cms-page-picker__head,
.cms-editor-panel__head,
.cms-preview-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cms-page-picker-grid {
    display: grid;
    gap: 8px;
    max-height: calc(100dvh - 260px);
    overflow: auto;
    padding-inline-end: 2px;
}

.cms-page-select {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    text-align: start;
}

.cms-page-select:hover,
.cms-page-select--active {
    border-color: rgb(var(--site-accent-rgb) / .38);
    background: var(--site-accent-soft);
}

.cms-page-select__meta,
.cms-page-select__desc {
    color: var(--text-muted);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-empty-editor,
.cms-editor-panel {
    padding: 14px;
}

.cms-editor-panel {
    display: grid;
    gap: 14px;
}

.cms-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 14px;
    align-items: start;
}

.cms-editor-column {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.cms-preview-card {
    position: sticky;
    top: 104px;
    padding: 14px;
    display: grid;
    gap: 12px;
    max-height: calc(100dvh - 128px);
    overflow: auto;
}

.cms-page-live-content,
.blog-article-content {
    overflow-wrap: anywhere;
}

.cms-page-live-content figure,
.blog-article-content figure {
    margin: 18px 0;
}

.cms-page-live-content figure img,
.blog-article-content figure img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
}

.cms-page-live-content figcaption,
.blog-article-content figcaption {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: .86rem;
}

.writer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    background: var(--ux-muted-bg);
}

.writer-tool-button {
    position: relative;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
    overflow: hidden;
}

.writer-tool-button:hover {
    border-color: rgb(var(--site-accent-rgb) / .34);
    color: var(--site-accent);
    background: var(--surface);
}

.writer-tool-button--file {
    margin: 0;
}

.writer-tool-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cms-editor-shell__html,
.blog-content-editor {
    min-height: 300px !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .9rem;
    direction: ltr;
    text-align: left;
}

.admin-main .blog-admin-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
}

.admin-main .blog-admin-layout > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
    gap: 18px !important;
    align-items: start !important;
    margin: 0 !important;
}

.admin-main .blog-admin-layout > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

.admin-main .blog-admin-layout .row .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.admin-main .blog-admin-form-card {
    position: sticky;
    top: 104px;
}

.admin-main .blog-admin-layout .table-responsive {
    border: 1px solid var(--ux-border);
    border-radius: 8px;
}

.admin-main .blog-admin-layout .table {
    min-width: 760px;
}

.home-blog-carousel {
    overflow: hidden;
    padding: 2px;
}

.home-blog-track {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.home-blog-track.is-animated {
    width: max-content;
    animation: homeBlogSlide 34s linear infinite;
}

.home-blog-carousel:hover .home-blog-track.is-animated {
    animation-play-state: paused;
}

.home-blog-card {
    flex: 0 0 clamp(280px, 28vw, 360px);
    display: grid;
    grid-template-rows: 165px minmax(0, 1fr);
    overflow: hidden;
}

.home-blog-card__media {
    display: block;
    min-width: 0;
    background: var(--ux-muted-bg);
}

.home-blog-card__media img,
.home-blog-card__fallback {
    width: 100%;
    height: 100%;
}

.home-blog-card__media img {
    display: block;
    object-fit: cover;
}

.home-blog-card__fallback {
    display: grid;
    place-items: center;
    color: var(--site-accent);
}

.home-blog-card__body {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.home-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-muted);
    font-size: .78rem;
}

.home-blog-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
}

.home-blog-card h3 a {
    color: var(--text);
}

.home-blog-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-blog-card .btn {
    justify-self: start;
    margin-top: auto;
}

.related-products-panel {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ux-border);
}

.related-product-list {
    display: grid;
    gap: 8px;
}

.related-product-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--ux-border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
}

.related-product-card:hover {
    border-color: rgb(var(--site-accent-rgb) / .34);
    background: var(--site-accent-soft);
}

.related-product-card__media {
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--ux-muted-bg);
}

.related-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.related-product-card__fallback {
    color: var(--site-accent);
}

.related-product-card__body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.related-product-card__body strong,
.related-product-card__body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-product-card__body small {
    color: var(--text-muted);
}

.related-product-card__body b {
    color: var(--site-accent);
    font-size: .88rem;
}

@keyframes homeBlogSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 1199.98px) {
    .cms-manager-grid,
    .cms-editor-layout,
    .admin-main .blog-admin-layout > .row {
        grid-template-columns: 1fr !important;
    }

    .cms-page-picker,
    .cms-preview-card,
    .admin-main .blog-admin-form-card {
        position: static;
        max-height: none;
    }

    .cms-page-picker-grid {
        max-height: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-header-actions,
    .admin-header-actions .btn,
    .admin-main .blog-admin-layout .btn,
    .cms-editor-panel__head .btn {
        width: 100%;
    }

    .admin-form-grid--two,
    .cms-page-picker-grid {
        grid-template-columns: 1fr;
    }

    .writer-tool-button {
        flex: 1 1 calc(50% - 6px);
    }

    .home-blog-card {
        flex-basis: calc(100vw - 44px);
    }

    .related-product-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-blog-track.is-animated {
        animation: none !important;
    }
}