/**
Theme Name: The Mash
Author: Muntasir Mahmud Aumio
Author URI: https://techvibesit.com/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-mash
Template: astra
*/

.mash-condition-field .dokan-control-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mash-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.mash-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #614051;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.mash-tooltip-content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1f2933;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 20;
}

.mash-tooltip-content::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1f2933 transparent transparent transparent;
}

.mash-tooltip:hover .mash-tooltip-content,
.mash-tooltip:focus-within .mash-tooltip-content {
    opacity: 1;
    visibility: visible;
}

.mash-other-specify-wrap {
    margin-top: 20px;
}

.mash-media-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dokan-new-product-featured-img,
.dokan-product-gallery {
    position: relative;
}

.dokan-dashboard-fullwidth-template .product-edit-new-container, .product-edit-container{
    max-width: 840px;
    margin: auto;
}

.dokan-new-product-featured-img.is-dragover,
.dokan-product-gallery.is-dragover {
    outline: 2px dashed #614051;
    outline-offset: 4px;
}

button.mash-feat-image-btn, button.mash-add-product-images {
    background: transparent;
    color: #000;
}

/* ═══════════════════════════════════════════════════════════
   THE MASH — Multi-Step Dokan Product Form
   Reorganizes Dokan's existing form into a 4-step wizard.
   Does NOT remove or replace any form fields.
═══════════════════════════════════════════════════════════ */

/* ── SUPPRESS DOKAN DEFAULTS ─────────────────────────────── */

.dokan-btn-area,
form.dokan-product-edit-form > p > input[type="submit"],
.product-edit-new-container > input[type="submit"] {
    display: none !important;
}

form.dokan-product-edit-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── WIZARD WRAPPER ──────────────────────────────────────── */

#mash-wizard {
    
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ── PROGRESS HEADER ─────────────────────────────────────── */

#mash-progress {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 40px 32px 28px;
    margin-bottom: 24px;
    text-align: center;
}

/* Branding */
.mash-progress-branding {
    margin-bottom: 36px;
}

.mash-site-title {
    
    font-size: 36px;
    color: #1e2d40;
    margin: 0 0 6px;
    line-height: 1.1;
    font-weight: 400;
}

.mash-site-subtitle {
    
    font-size: 15px;
    font-weight: 600;
    color: #614051;
    margin: 0;
    letter-spacing: 0.02em;
}

.mash-section-block {
    margin-bottom: 30px;
}

#mash-pricing-container {
    background: #faf8f3;
    border: 1px solid #e8e0d4;
    border-radius: 12px;
    padding: 14px 20px;
}

.mash-section-block .mash-field-hint {
    margin-bottom: 8px;
}

.mash-panel-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* ── STEP TRACK ──────────────────────────────────────────── */

.mash-steps-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 640px;
    margin: 0 auto 28px;
}

.mash-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    cursor: pointer;
    position: relative;
}

/* Connector line between steps */
.mash-step-item::after {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    background: #d8d0c8;
    transition: background 0.4s ease;
}
.mash-step-item:last-child::after { display: none; }
.mash-step-item.completed::after  { background: #614051; }

/* Bubble */
.mash-step-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2ddd8;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #8a8078;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.mash-step-item.active .mash-step-bubble {
    background: #614051;
    color: #fff;
    box-shadow: 0 4px 16px rgba(74,144,128,0.35);
}

.mash-step-item.completed .mash-step-bubble {
    background: #614051;
    color: #fff;
    box-shadow: none;
}

.mash-step-item.completed .mash-step-num  { display: none; }
.mash-step-item.completed .mash-step-tick { display: flex; align-items: center; justify-content: center; }
.mash-step-tick                           { display: none; }
.mash-step-tick svg                       { width: 16px; height: 16px; }

/* Label */
.mash-step-label {
    font-size: 15px;
    font-weight: 500;
    color: #a09888;
    text-align: center;
    line-height: 1.3;
    max-width: 80px;
    transition: color 0.3s, font-weight 0.3s;
}

.mash-step-item.active .mash-step-label {
    color: #1e2d40;
    font-weight: 700;
}

.mash-step-item.completed .mash-step-label {
    color: #614051;
    font-weight: 500;
}

/* ── SAVE FOR LATER BAR ──────────────────────────────────── */

#mash-draft-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 14px;
}

#mash-draft-status {
    font-size: 12.5px;
    color: #9e8e7e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mash-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccc;
    display: inline-block;
}

#mash-draft-status.saved  .mash-dot { background: #6db88a; }
#mash-draft-status.saving .mash-dot { background: #e8b44a; animation: mash-pulse 1s infinite; }

@keyframes mash-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

#mash-save-draft-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #d4c9b8;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: #7c6a52;
    cursor: pointer;
    transition: all 0.2s;
    
}

#mash-save-draft-btn:hover {
    background: #faf7f3;
    border-color: #7c6a52;
}

/* ── COMPLETION BAR ──────────────────────────────────────── */

.mash-completion-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.mash-completion-label {
    font-size: 14px;
    font-weight: 700;
    color: #1e2d40;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tooltip icon after label */
.mash-completion-label::after {
    content: '?';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #614051;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.mash-completion-track {
    flex: 1;
    height: 10px;
    background: #ede8e0;
    border-radius: 99px;
    overflow: hidden;
    margin: 0;
    max-width: none;
}

.mash-completion-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: #c4a87a;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.4s ease;
}

/* Fill colour shifts as listing gets more complete */
.mash-completion-fill.mash-fill-mid  { background: #a07040; }
.mash-completion-fill.mash-fill-high { background: #614051; }

.mash-completion-pct {
    font-size: 13.5px;
    font-weight: 700;
    color: #a07040;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
    text-align: right;
    transition: color 0.4s;
}

/* ── RESTORE DRAFT BANNER ────────────────────────────────── */

#mash-restore-banner {
    background: #fdf8f0;
    border: 1px solid #e8d8b8;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: mash-slide-in 0.3s ease;
}

#mash-restore-banner p {
    margin: 0;
    font-size: 13.5px;
    color: #7c6a52;
}

.mash-restore-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.mash-restore-actions button {
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    
    transition: all 0.2s;
}

#mash-restore-yes { background: #7c6a52; color: #fff; border: none; }
#mash-restore-yes:hover { background: #6a5a44; }
#mash-restore-no  { background: none; border: 1px solid #d4c9b8; color: #9e8e7e; }
#mash-restore-no:hover  { background: #f5f0ea; }

/* ── STEP PANELS ─────────────────────────────────────────── */

.mash-step-panel {
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    display: none;
    animation: mash-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mash-step-panel.active { display: block; }

@keyframes mash-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mash-panel-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
}

.mash-panel-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.mash-panel-header h3 {
    font-size: 28px;
    color: #1a1410;
    margin: 0 0 4px;
}

.mash-panel-header p {
    font-size: 16px;
    color: #9e8e7e;
    margin: 0;
}

.mash-required-note {
    font-size: 12px;
    color: #b5a48a;
    margin-bottom: 20px;
    text-align: right;
}

.mash-empty-step {
    color: #b5a48a;
    font-size: 13px;
    padding: 10px 0;
}

/* Consistent label styling inside panels */
.mash-step-panel .dokan-form-group label, .product-edit-new-container label.form-label {
    font-weight: 500;
    font-size: 15px!important;
    color: #5c4d3c;
}

/* Override Dokan Form fields */
.product-edit-container .dokan-feat-image-upload {
    background: #faf8f3;
    border-radius: 8px;
}

.product-edit-container .wp-editor-wrap, .dokan-edit-row {
    border: none!important;
}

.product-edit-new-container .dokan-edit-row .dokan-section-content {
    padding: 20px 0!important;
}

.dokan-attribute-variation-options.dokan-edit-row {
    border-radius: 8px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #e8e2da!important;
    border-radius: 8px!important;
}

.dokan-theme-astra .dokan-dashboard-wrap select+.select2-container input::placeholder {
    font-size: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.dokan-dashboard .select2-search__field {
    width: 100%!important;
}

/* Required field validation highlight */
.mash-field-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192,57,43,0.12) !important;
}

/* ── NAVIGATION BAR ──────────────────────────────────────── */

#mash-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 16px;
    padding: 20px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.mash-nav-left,
.mash-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── BUTTONS ─────────────────────────────────────────────── */

.mash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 16px 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .2s, box-shadow .2s, transform .15s;
    text-decoration: none;
    line-height: 1;
    min-width: 140px;
}

/* Back — outlined teal */
.mash-btn-back {
    background: #fff !important;
    color: #614051 !important;
    border: 2px solid #614051 !important;
    box-shadow: none;
}
.mash-btn-back:hover {
    background: #eef6f4 !important;
    transform: translateY(-1px);
}

/* Next — solid terracotta */
.mash-btn-next {
    background: #c1714a!important;
    color: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(193,113,74,.25);
}
.mash-btn-next:hover {
    background: #ad6040;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(193,113,74,.35);
}

/* Publish — solid teal (distinct from Next) */
.dokan-dashboard .mash-btn-publish {
    background: #c1714a;
    color: #fff;
    border: none;
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(74,144,128,.25);
}
.mash-btn-publish:hover {
    background: #3d7a6c;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74,144,128,.35);
}

/* Save draft */
.mash-btn-save {
    background: none;
    border: 1px solid #d4c9b8;
    color: #7c6a52;
    font-size: 13px;
    padding: 8px 16px;
    min-width: auto;
}
.mash-btn-save:hover {
    background: #faf7f3;
    border-color: #7c6a52;
}

/* ── TOAST NOTIFICATION ──────────────────────────────────── */

#mash-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #2a2018;
    color: #fff;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 14px;
    
    z-index: 99999;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
    opacity: 0;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    pointer-events: none;
}

#mash-toast.show    { transform: translateX(-50%) translateY(0); opacity: 1; }
#mash-toast.error   { background: #8b2e2e; }
#mash-toast.success { background: #2e6b45; }

/* ── FULL-PAGE CENTRED LAYOUT ────────────────────────────── */
/*
 * Break the wizard out of Astra's dashboard sidebar grid.
 * The chain is:
 *   .dokan-dashboard  (flex/grid row with sidebar)
 *     .dokan-dashboard-content.dokan-layout
 *       header.dokan-dashboard-header
 *       .product-edit-new-container
 *
 * Strategy: stretch .dokan-layout to full viewport width using
 * negative margins + explicit width, then centre #mash-wizard inside it.
 */

/* Hide the "Add New Product" page title — wizard has its own branding */
.dokan-dashboard-header {
    display: none !important;
}

/* Make the dashboard content column fill the full row */
.dokan-dashboard-content.dokan-layout {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

/* Strip Dokan's container chrome */
.product-edit-new-container,
.product-edit-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    float: none !important;
}

/* Wizard itself: centred column with comfortable max-width */
#mash-wizard {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Also hide the old #mash-wizard-wrapper (pre-buildWizard progress bar) */
/* #mash-wizard-wrapper {
    display: none !important;
} */

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 600px) {
    #mash-progress { padding: 28px 16px 20px; }

    .mash-site-title    { font-size: 26px; }
    .mash-site-subtitle { font-size: 13px; }
    .mash-progress-branding { margin-bottom: 24px; }

    .mash-step-bubble   { width: 36px; height: 36px; font-size: 13px; }
    .mash-step-label    { font-size: 10px; max-width: 60px; }
    .mash-step-item::after { top: 18px; }

    .mash-step-panel,
    #mash-nav {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .mash-btn         { padding: 9px 16px; font-size: 13px; }
    .mash-btn-publish { padding: 10px 18px; font-size: 14px; }

    #mash-nav { flex-wrap: wrap; gap: 10px; }
    .mash-nav-right { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   FIBER CONTENT REPEATER — wizard UI
═══════════════════════════════════════════════════════════ */

#mash-fiber-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #f0ebe4;
}

#mash-fiber-section h4 {
    
    font-size: 17px;
    color: #1a1410;
    margin: 0 0 4px;
}

#mash-fiber-section .mash-fiber-subtitle {
    font-size: 12.5px;
    color: #9e8e7e;
    margin: 0 0 16px;
}

/* Row */
.mash-fiber-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    animation: mash-slide-in 0.2s ease;
}

.mash-fiber-select {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #e8e2da;
    border-radius: 9px;
    
    font-size: 13.5px;
    color: #2a2018;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239e8e7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color .2s;
}
.mash-fiber-select:focus { outline: none; border-color: #7c6a52; }

.mash-fiber-pct {
    width: 44px;
    border: none;
    outline: none;
    
    font-size: 14px;
    font-weight: 600;
    color: #2a2018;
    padding: 9px 0;
    text-align: right;
    background: transparent;
}
.mash-fiber-pct-sym {
    font-size: 13px;
    color: #9e8e7e;
    font-weight: 500;
}

/* Remove button */
.mash-fiber-remove {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e8e2da;
    background: none;
    color: #b5a48a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.mash-fiber-remove:hover { background: #fdf0ee; border-color: #c0392b; color: #c0392b; }

.mash-fiber-content-free-text-wrap {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Total indicator */
#mash-fiber-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 9px;
    background: #faf7f3;
    border: 1px solid #e8e2da;
    font-size: 13px;
}
#mash-fiber-total-row.valid   { background: #f0f7f3; border-color: #6db88a; }
#mash-fiber-total-row.over    { background: #fdf0ee; border-color: #c0392b; }

#mash-fiber-total-label { color: #9e8e7e; font-weight: 500; }
#mash-fiber-total-val   { font-weight: 700; font-size: 15px; color: #2a2018; }
#mash-fiber-total-row.valid #mash-fiber-total-val { color: #4a7c59; }
#mash-fiber-total-row.over  #mash-fiber-total-val { color: #c0392b; }
#mash-fiber-total-msg   { font-size: 12px; color: #9e8e7e; }
#mash-fiber-total-row.valid #mash-fiber-total-msg { color: #4a7c59; }
#mash-fiber-total-row.over  #mash-fiber-total-msg { color: #c0392b; }

/* Add button */
#mash-fiber-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: none;
    border: 1.5px dashed #d4c9b8;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #7c6a52;
    cursor: pointer;
    
    transition: all .2s;
    width: 100%;
    justify-content: center;
}
#mash-fiber-add:hover { background: #faf7f3; border-color: #7c6a52; border-style: solid; }

/* ═══════════════════════════════════════════════════════════
   ATTRIBUTES UI — category-specific fields
═══════════════════════════════════════════════════════════ */

/* Hide Dokan's native attribute panel chrome — but NOT our custom list inside it */
.dokan-attribute-wrapper,
#dokan-product-attributes,
.dokan-add-product-attribute,
.dokan_add_product_attribute,
.dokan-attributes-add-btn,
.attribute_add_btn { display: none !important; }

/* Hide the wrapper only when it contains Dokan's native add-attribute UI,
   not when it contains our mash-rendered list */
.dokan-product-attribute-wrapper:not(:has(.dokan-attribute-option-list)) {
    display: none !important;
}

#mash-attributes-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #f0ebe4;
}
#mash-attributes-section h4 {
    
    font-size: 17px;
    color: #1a1410;
    margin: 0 0 18px;
}

/* Category heading inside the attr body */
.mash-attr-cat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9e8e7e;
    margin-bottom: 18px;
}

/* Empty / prompt state */
.mash-attr-no-category {
    padding: 20px;
    background: #faf7f3;
    border: 1.5px dashed #d4c9b8;
    border-radius: 10px;
    color: #9e8e7e;
    font-size: 13.5px;
    text-align: center;
}

/* Individual field */
.mash-attr-field {
    margin-bottom: 20px;
}
.mash-attr-field:last-child { margin-bottom: 0; }

.mash-attr-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7c6a52;
    margin-bottom: 8px;
}
.mash-attr-tip {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #b5a48a;
}

.mash-section-block input {
    border-radius: 8px;
}

/* Text / number input */
.mash-attr-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e8e2da;
    border-radius: 10px;
    
    font-size: 14px;
    color: #2a2018;
    background: #fff;
    transition: border-color .2s;
    box-sizing: border-box;
}
.mash-attr-input:focus { outline: none; border-color: #7c6a52; box-shadow: 0 0 0 3px rgba(124,106,82,.1); }

/* Number row with unit */
.mash-attr-number-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mash-attr-number-row .mash-attr-input {
    width: 140px;
    flex-shrink: 0;
}
.mash-attr-unit {
    font-size: 13px;
    color: #9e8e7e;
    font-weight: 500;
}

/* Dropdown */
.mash-attr-select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid #e8e2da;
    border-radius: 10px;
    
    font-size: 14px;
    color: #2a2018;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239e8e7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .2s;
    box-sizing: border-box;
}
.mash-attr-select:focus { outline: none; border-color: #7c6a52; box-shadow: 0 0 0 3px rgba(124,106,82,.1); }

/* Tag chips (multi-select) */
.mash-attr-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.mash-attr-tag {
    padding: 6px 14px;
    border: 1px solid #e8e2da;
    border-radius: 99px;
    
    font-size: 13px;
    color: #7c6a52;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.mash-attr-tag:hover { border-color: #b5a48a; background: #fdf9f5; }
.mash-attr-tag.selected {
    background: #7c6a52;
    border-color: #7c6a52;
    color: #fff;
    font-weight: 500;
}

/* Checkbox fields (e.g. Yardage is estimate, Handmade?) */
.mash-attr-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mash-attr-cb-input {
    width: 18px;
    height: 18px;
    accent-color: #7c6a52;
    cursor: pointer;
    flex-shrink: 0;
}
.mash-attr-cb-label {
    font-size: 14px;
    color: #2a2018;
    cursor: pointer;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY CARD GRID
   Replaces Dokan's modal-based category dropdown.
═══════════════════════════════════════════════════════════ */

/* Step 0 panel — transparent, no white card box */
.mash-step-panel[data-step="0"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.mash-step-panel[data-step="0"] .mash-panel-header {
    display: none !important;
}

/* Section wrapper */
.mash-cat-section {
    text-align: center;
    padding: 8px 0 0;
}

.mash-cat-heading {
    margin-bottom: 36px;
}

.mash-cat-title {
    
    font-size: 38px;
    font-weight: 400;
    color: #1e2d40;
    margin: 0 0 10px;
    line-height: 1.15;
}

.mash-cat-subtitle {
    
    font-size: 16px;
    color: #7a6e65;
    margin: 0;
    font-weight: 400;
}

.mash-cat-footer {
    margin-top: 28px;
    
    font-size: 14px;
    color: #9e8e7e;
}

.mash-cat-label {
    
    font-weight: 600;
    font-size: 13.5px;
    color: #5c4d3c;
    display: block;
    margin-bottom: 14px;
}

/* Grid — 3 columns */
.mash-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 0;
    text-align: left;
}

/* Cards — beat Dokan button styles with scope */
.mash-cat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 32px 20px 28px !important;
    background: #f7f4f0 !important;
    background-color: #f7f4f0 !important;
    background-image: none !important;
    border: 1px solid #e4ddd4 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s, background 0.18s !important;
    font-family: 'DM Sans', sans-serif !important;
    text-align: center !important;
    min-height: 140px !important;
    width: 100% !important;
    box-shadow: none !important;
    color: #2a2018 !important;
    text-shadow: none !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    outline: none !important;
}

.mash-cat-card:hover {
    border-color: #c4a882 !important;
    box-shadow: 0 4px 18px rgba(124,106,82,0.10) !important;
    transform: translateY(-3px) !important;
    background: #f0ebe4 !important;
    background-color: #f0ebe4 !important;
    background-image: none !important;
    color: #2a2018 !important;
}

.mash-cat-card.mash-cat-selected {
    border-color: #a07040 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(160,112,64,0.12) !important;
    background: #fdf6ee !important;
    background-color: #fdf6ee !important;
    background-image: none !important;
}

.mash-cat-emoji {
    display: block !important;
    line-height: 1 !important;
}

.mash-cat-icon {
    width: 56px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.mash-cat-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.mash-cat-card.mash-cat-selected .mash-cat-name {
    color: #7c5a2a !important;
    font-weight: 600 !important;
}

/* Hide Dokan's original category modal trigger */
.dokan-category-open-modal,
.dokan-single-cat-add-btn,
.dokan-select-product-category-remove-container,
.dokan-new-cat-ui-title + span .dokan-select-product-category {
    display: none !important;
}


/* Progress bar CSS */
/* Row layout */
/* ═══════════════════════════════════════════════════════════
   LISTING COMPLETENESS BAR
   Sticky card injected by JS after each step's panel header.
   Stays visible as the vendor scrolls through the form.
═══════════════════════════════════════════════════════════ */

.mash-completeness-bar {
    position: relative;
    z-index: 200;
    margin: 0 0 24px;
}

/* Fixed state — applied by JS when bar scrolls past viewport top */
.mash-completeness-bar.mash-bar-fixed {
    position: fixed;
    /* top / left / width set inline by JS to align with the panel */
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    margin: 0;
}


.mash-completeness-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #faf8f3;
    border: 1px solid #e8e0d4;
    border-radius: 12px;
    padding: 14px 20px;
}

/* "Listing Completeness ?" label */
.mash-completeness-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e2d40;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* The ? tooltip circle */
.mash-completeness-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #614051;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: default;
    flex-shrink: 0;
    line-height: 1;
}

/* Track (background bar) */
.mash-bar-track {
    flex: 1;
    height: 10px;
    background: #e8e2da;
    border-radius: 999px;
    overflow: hidden;
    min-width: 60px;
}

/* Fill */
.mash-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #c4a87a; /* default warm tan — matches screenshot */
    transition: width .4s ease, background-color .3s ease;
}

.mash-bar-fill.mash-fill-low  { background: #c4a87a; }
.mash-bar-fill.mash-fill-mid  { background: #a07040; }
.mash-bar-fill.mash-fill-high { background: #614051; }

/* "20% — Getting started" label */
#mash-pct-label {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.mash-pct-low  { color: #c4a87a; }
.mash-pct-mid  { color: #a07040; }
.mash-pct-high { color: #614051; }


@media (max-width: 720px) {
    .mash-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mash-cat-title { font-size: 28px; }
    .mash-cat-card  { padding: 24px 14px 20px !important; min-height: 120px !important; }
    .mash-cat-emoji { font-size: 32px !important; }
    .mash-cat-name  { font-size: 13px !important; }
}

@media (max-width: 480px) {
    .mash-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mash-cat-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   FIBER CONTENT — CHECKBOX CHIP GRID
   Rendered by html-product-attribute.php for pa_fiber-content.
   Hidden checkboxes POST attribute_values[i][] to Dokan natively.
═══════════════════════════════════════════════════════════ */

.mash-attr-hint {
    font-size: 12px;
    font-weight: 400;
    color: #614051;
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
}

.mash-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Hide the real checkbox — the label IS the chip */
.mash-checkbox-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.mash-checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #d8d0c6;
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 400;
    color: #5c4d3c;
    background: #FFF;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1;
}

.mash-checkbox-chip::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 1px solid #c4b8a8;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.mash-checkbox-chip:hover {
    border-color: #a09080;
    background: #faf7f3;
}

.mash-checkbox-chip.is-checked {
    background: #614051;
    border-color: #614051;
    color: #fff!important;
    font-weight: 500;
}

.mash-checkbox-chip.is-checked::before {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%234a9080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/10px no-repeat;
    border-color: rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════════════
   FIBER CONTENT PERCENTAGE SECTION
   Appended below the checkbox grid by mash-multistep.js.
   Shows one pct input per checked fiber, plus running total.
═══════════════════════════════════════════════════════════ */

#mash-fiber-pct-section {
    display: none; /* shown by JS when selections exist */
    margin-top: 14px;
    background: #f5f2ed;
    border-radius: 10px;
    padding: 20px;
}

/* Grid of label + input rows */
#mash-fiber-pct-rows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 10px;
}

.mash-fiber-pct-row {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: mash-slide-in 0.2s ease;
}

.mash-fiber-pct-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #3d3228;
    white-space: nowrap;
}

/* Percentage input + % symbol */
.mash-fiber-pct-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid #d8d0c6;
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
    transition: border-color .2s;
    width: 80px;
    flex-shrink: 0;
}
.mash-fiber-pct-wrap:focus-within { border-color: #7c6a52; }

.mash-fiber-pct-input {
    width: 50px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: #2a2018;
    padding: 4px 0;
    background: transparent;
    -moz-appearance: textfield;
}
.mash-fiber-pct-input::-webkit-outer-spin-button,
.mash-fiber-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mash-fiber-pct-single-val {
    font-size: 14px;
    font-weight: 600;
    color: #2a2018;
}

.mash-fiber-pct-sym {
    font-size: 13px;
    color: #9e8e7e;
    font-weight: 500;
}

/* Total row */
#mash-fiber-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #e0d8ce;
    font-size: 13px;
}

#mash-fiber-total-label {
    color: #7c6a52;
    font-weight: 400;
}

#mash-fiber-total-val {
    font-weight: 700;
    font-size: 14px;
    color: #2a2018;
    transition: color 0.3s;
}

#mash-fiber-total-row.valid #mash-fiber-total-val { color: #4a7c59; }
#mash-fiber-total-row.over  #mash-fiber-total-val { color: #c0392b; }

/* ═══════════════════════════════════════════════════════════
   YARDAGE RANGE FIELD
   Number input + yds/m toggle + estimate checkbox.
═══════════════════════════════════════════════════════════ */

.mash-yardage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.mash-yardage-input {
    width: 120px !important;
    flex-shrink: 0;
    padding: 10px 14px !important;
    border: 1px solid #e8e2da !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #2a2018 !important;
    background: #fff !important;
    transition: border-color .2s !important;
    -moz-appearance: textfield;
}
.mash-yardage-input::-webkit-outer-spin-button,
.mash-yardage-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mash-yardage-input:focus {
    outline: none !important;
    border-color: #7c6a52 !important;
    box-shadow: 0 0 0 3px rgba(124,106,82,.1) !important;
}

/* Unit toggle pill */
.mash-unit-toggle {
    display: flex;
    border: 1px solid #e8e2da;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.dokan-dashboard .mash-unit-btn {
    padding: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #9e8e7e;
    background-color: #FFF;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

/* .mash-unit-btn + .mash-unit-btn {
    border-left: 1px solid #e8e2da;
} */

.dokan-dashboard .mash-unit-btn.active {
    background: #614051;
    color: #fff;
    font-weight: 600;
}

.mash-unit-btn:hover:not(.active) {
    background: #f5f0ea;
    color: #5c4d3c;
}

/* Estimate checkbox row */
.mash-estimate-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 400 !important;
    color: #5c4d3c !important;
    cursor: pointer;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.mash-estimate-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #614051;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   QUANTITY FIELD
   Number input with static "skeins/balls" unit label.
═══════════════════════════════════════════════════════════ */

.mash-quantity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.mash-quantity-input {
    width: 120px !important;
    flex-shrink: 0;
    padding: 10px 14px !important;
    border: 1px solid #e8e2da !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #2a2018 !important;
    background: #fff !important;
    transition: border-color .2s !important;
    -moz-appearance: textfield;
}
.mash-quantity-input::-webkit-outer-spin-button,
.mash-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mash-quantity-input:focus {
    outline: none !important;
    border-color: #7c6a52 !important;
    box-shadow: 0 0 0 3px rgba(124,106,82,.1) !important;
}

.mash-quantity-unit {
    font-size: 14px;
    color: #7a6e65;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   PLAIN DESCRIPTION TEXTAREA
   Hides TinyMCE chrome if the filter doesn't fully suppress it.
   .mash-plain-textarea is added via the editor args filter.
═══════════════════════════════════════════════════════════ */

/* Hide the Visual/Code tab switcher */
.dokan-product-edit-form .wp-editor-tabs,
.dokan-product-edit-form .mce-toolbar-grp,
.dokan-product-edit-form .mce-top-part,
.dokan-product-edit-form .mce-menubar,
.dokan-product-edit-form .mce-toolbar,
.dokan-product-edit-form .wp-media-buttons {
    display: none !important;
}

/* Style the raw textarea to match the rest of the form */
.dokan-product-edit-form .wp-editor-area,
.dokan-product-edit-form textarea.mash-plain-textarea,
.dokan-product-edit-form #description,
.dokan-product-edit-form #post_content {
    width: 100% !important;
    padding: 12px 14px;
    border: 1px solid #e8e2da;
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s;
}

.dokan-product-edit-form .wp-editor-area:focus,
.dokan-product-edit-form textarea.mash-plain-textarea:focus {
    outline: none !important;
    border-color: #7c6a52 !important;
    box-shadow: 0 0 0 3px rgba(124,106,82,.1) !important;
}

/* Collapse the TinyMCE iframe wrapper if it still renders */
.dokan-product-edit-form .wp-editor-container {
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BRAND SELECT — grouped optgroups
   Select2 renders <optgroup label> as .select2-results__group
═══════════════════════════════════════════════════════════ */

/* Optgroup heading */
.mash-brand-select + .select2-container .select2-results__group,
.select2-results__group {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #9e8e7e !important;
    padding: 10px 14px 4px !important;
    pointer-events: none !important;
}
.mash-brand-select { appearance: none !important; }

/* Items inside groups — indent slightly */
.select2-results__option:not(.select2-results__group) {
    padding-left: 22px !important;
}

/* Highlighted / selected item */
.select2-results__option--highlighted {
    background: #614051 !important;
    color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
    background: #f0f7f4 !important;
    color: #2a6054 !important;
}

/* ═══════════════════════════════════════════════════════════
   PRICE FIELD — "Your Price" input with $ addon
   Overrides Dokan's default dokan-input-group styling to give
   the price field a large, prominent appearance.
═══════════════════════════════════════════════════════════ */

/* Strip the default vendor-earning label Dokan injects */
.dokan-product-edit-form .vendor-earning {
    display: none !important;
}

/* Wrapper — remove any extra bottom margin Dokan adds */
.dokan-product-edit-form .dokan-price-container .content-half-part.regular-price {
    width: 100% !important;
    max-width: 100% !important;
}

/* The input-group that holds $ + number */
.dokan-product-edit-form .content-half-part.regular-price .dokan-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #e8e2da;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    margin-top: 8px;
}

.dokan-product-edit-form .content-half-part.regular-price .dokan-input-group:focus-within {
    border-color: #7c6a52;
    box-shadow: 0 0 0 3px rgba(124,106,82,.1);
}

/* $ symbol badge */
.dokan-product-edit-form .content-half-part.regular-price .dokan-input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 24px 0 16px;
    font-weight: 500;
    font-size: 28px;
    color: #5c4d3c;
    background: transparent;
    border: none;
    border-right: 1px solid #e8e2da;
    line-height: 1;
    flex-shrink: 0;
}

/* Number input itself */
.dokan-product-edit-form .content-half-part.regular-price .dokan-product-regular-price,
.dokan-product-edit-form .content-half-part.regular-price input[name="_regular_price"] {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 18px 16px !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #1e1a14 !important;
    line-height: 1 !important;
    min-width: 0;
    -moz-appearance: textfield;
}

.dokan-product-edit-form .content-half-part.regular-price input[name="_regular_price"]::-webkit-outer-spin-button,
.dokan-product-edit-form .content-half-part.regular-price input[name="_regular_price"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.content-half-part.regular-price {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   PRICE FEE CALCULATOR CARD
   Rendered by PHP (edit-product-single.php), values updated
   live by mash-multistep.js on price input change.
═══════════════════════════════════════════════════════════ */

#mash-fee-card {
    margin-top: 14px;
    font-size: 15px;
}

.mash-fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.mash-fee-label {
    color: #7a6e65;
    font-weight: 400;
}

.mash-fee-val {
    color: #5c4d3c;
    font-weight: 500;
}

.mash-fee-divider {
    height: 1px;
    background: #ddd6cc;
    margin: 10px 0 8px;
}

.mash-fee-keep-row {
    padding-top: 2px;
}

.mash-fee-keep-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e2d40;
}

.mash-fee-keep-val {
    font-size: 18px;
    font-weight: 700;
    color: #9e8e7e; /* neutral — no price entered yet */
    transition: color .3s;
}

.mash-fee-keep-val.mash-fee-keep-positive {
    color: #4a7c59;
}

.mash-fee-keep-val.mash-fee-keep-negative {
    color: #c0392b;
}

/* ═══════════════════════════════════════════════════════════
   SHIPPING UI
   Two radio-card options — "Buyer pays" expands to show
   the flat rate input when selected.
═══════════════════════════════════════════════════════════ */

.mash-shipping-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each option is a full-width card label */
.mash-shipping-option {
    display: block;
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    user-select: none;
}

.mash-shipping-option:hover {
    border-color: #b5a898;
}

.mash-shipping-option.is-selected {
    border-color: #614051;
    box-shadow: 0 0 0 3px rgba(74,144,128,.1);
}

/* Hide the native radio — we style it as a custom circle */
.mash-shipping-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Row: custom radio circle + label text */
.mash-shipping-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #2a2018;
}

/* Custom radio circle via ::before on the label span */
.mash-shipping-option-label::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c8bcb0;
    background: #fff;
    transition: border-color .2s, background .2s;
    box-sizing: border-box;
}

.mash-shipping-option.is-selected .mash-shipping-option-label::before {
    border-color: #614051;
    border-width: 6px;
    background: #fff;
}

/* Flat rate sub-fields — hidden unless option is selected */
.mash-shipping-flat-fields {
    display: none;
    margin-top: 14px;
    padding-left: 32px; /* align under label text */
}

.mash-shipping-option.is-selected .mash-shipping-flat-fields {
    display: block;
}

/* $ + input row */
.mash-shipping-rate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mash-shipping-rate-label {
    font-size: 14px;
    color: #7a6e65;
    font-weight: 400;
    white-space: nowrap;
}

.mash-shipping-currency {
    font-size: 15px;
    font-weight: 500;
    color: #5c4d3c;
}

.mash-shipping-rate-input {
    width: 120px !important;
    padding: 10px 14px !important;
    border: 1px solid #e8e2da !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1e1a14 !important;
    background: #fff !important;
    transition: border-color .2s !important;
    -moz-appearance: textfield;
}

.mash-shipping-rate-input::-webkit-outer-spin-button,
.mash-shipping-rate-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mash-shipping-rate-input:focus {
    outline: none !important;
    border-color: #7c6a52 !important;
    box-shadow: 0 0 0 3px rgba(124,106,82,.1) !important;
}

/* Hint text below flat rate input */
.mash-shipping-hint {
    font-size: 13px;
    color: #614051;
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   SHIPPING BADGE — single product page
   Rendered by mash_display_shipping_on_product()
═══════════════════════════════════════════════════════════ */

.mash-product-shipping {
    margin-top: 10px;
}

.mash-shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.mash-shipping-free {
    background: #eaf4f1;
    color: #2e7d62;
}

.mash-shipping-flat {
    background: #faf8f3;
    color: #5c4d3c;
}

/* ═══════════════════════════════════════════════════════════
   BRANDING HEADER
   Rendered by PHP above the JS wizard wrapper.
   Sits above the step bubbles on every step.
═══════════════════════════════════════════════════════════ */

#mash-branding-header {
    text-align: center;
    padding: 12px 0 20px;
}

.mash-brand-title {
    
    font-size: 36px;
    font-weight: 400;
    color: #1e2d40;
    margin: 0 0 6px;
    line-height: 1.15;
}

.mash-brand-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: #614051;
    letter-spacing: .04em;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   REVIEW & PUBLISH — Step 4
═══════════════════════════════════════════════════════════ */

/* Hero card — image + title + desc + price */
.mash-rv-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #faf8f3;
    border: 1px solid #e8e2da;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
}

.mash-rv-hero-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #faf8f3;
}

.mash-rv-hero-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background: #faf8f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.mash-rv-hero-body {
    flex: 1;
    min-width: 0;
}

.mash-rv-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2d40;
    margin: 0 0 4px;
    line-height: 1.3;
}

.mash-rv-desc {
    font-size: 14px;
    color: #7a6e65;
    margin: 0 0 10px;
    line-height: 1.5;
}

.mash-rv-price {
    font-size: 22px;
    font-weight: 700;
    color: #c1714a;
    display: block;
}

/* Details card — Category / Details / Shipping with Edit links */
.mash-rv-details {
    background: #faf8f3;
    border: 1px solid #e8e2da;
    border-radius: 14px;
    padding: 6px 20px;
    margin-bottom: 14px;
}

.mash-rv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0ebe4;
}

.mash-rv-row:last-child {
    border-bottom: none;
}

.mash-rv-row-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mash-rv-row-label {
    font-size: 13px;
    color: #9e8e7e;
    font-weight: 400;
}

.mash-rv-row-val {
    font-size: 15px;
    font-weight: 600;
    color: #1e2d40;
}

.mash-rv-edit {
    font-size: 13.5px;
    font-weight: 500;
    color: #614051;
    text-decoration: underline;
    text-underline-offset: 2px;
    flex-shrink: 0;
    margin-left: 16px;
}

.mash-rv-edit:hover {
    color: #3d7a6c;
}

/* Pricing summary card */
.mash-rv-pricing {
    background: #faf8f3;
    border: 1px solid #e8e2da;
    border-radius: 14px;
    padding: 6px 20px 0;
}

.mash-rv-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.mash-rv-price-label {
    font-size: 15px;
    color: #7a6e65;
    font-weight: 400;
}

.mash-rv-price-val {
    font-size: 14px;
    color: #2a2018;
    font-weight: 400;
}

.mash-rv-price-divider {
    height: 1px;
    background: #e8e2da;
}

.mash-rv-buyer-pays .mash-rv-price-label {
    font-size: 15px;
    font-weight: 700;
    color: #1e2d40;
}

.mash-rv-buyer-pays .mash-rv-price-val {
    font-size: 15px;
    font-weight: 700;
    color: #1e2d40;
}

/* You keep — highlighted row at bottom */
.mash-rv-you-keep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #faf8f3;
    border-radius: 0 0 14px 14px;
    margin: 0 -20px;
    padding: 16px 20px;
}

.mash-rv-you-keep-label {
    font-size: 15px;
    font-weight: 700;
    color: #1e2d40;
}

.mash-rv-you-keep-val {
    font-size: 22px;
    font-weight: 700;
    color: #9e8e7e;
    transition: color .3s;
}

.mash-rv-you-keep-val.positive {
    color: #4a7c59;
}

/* Muted italic for unfilled review values */
.mash-rv-not-set {
    color: #b5a48a;
    font-style: italic;
    font-weight: 400;
}
/* ═══════════════════════════════════════════════════════════
   YARN ATTRIBUTE TIERS
   Three collapsible/expandable grouped sections for the
   Yarn category's Step 2 attribute panel.
═══════════════════════════════════════════════════════════ */

/* Strip the old flat wrapper chrome when tiers are in play */
.mash-tier ~ .dokan-attribute-option-list[aria-hidden="true"] {
    display: none !important;
}

/* ── Base tier card ──────────────────────────────────────── */
.mash-tier {
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* ── Tier 1 — Quick Details (teal/blue tint) ─────────────── */
.mash-tier-1 {
    background: #f0f7f5;
    border: 1px solid #c8e2dc;
}

/* ── Tier 2 — Fiber & Color Details (warm yellow) ─────────── */
.mash-tier-2 {
    background: #fff;
    border: 1px solid #e8e2da;
}

/* ── Tier 3 — Advanced Details (soft lavender) ────────────── */
.mash-tier-3 {
    background: #fff;
    border: 1px solid #e8e2da;
}

/* ── Tier header ─────────────────────────────────────────── */
.mash-tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
}

.mash-tier-1 .mash-tier-header {
    padding: 18px 20px 4px;
}

.mash-tier-toggle {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.mash-tier-2 .mash-tier-toggle:hover,
.mash-tier-3 .mash-tier-toggle:hover {
    background: #faf8f4;
}

.mash-tier-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mash-tier-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e2d40;
    line-height: 1.3;
}

.mash-tier-1 .mash-tier-title {
    font-size: 14.5px;
    color: #2a4a42;
}

.mash-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    background: #614051;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.mash-tier-expand-label {
    font-size: 13px;
    font-weight: 500;
    color: #9e8e7e;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s;
}

.mash-tier-toggle:hover .mash-tier-expand-label {
    color: #614051;
}

/* ── Tier body ───────────────────────────────────────────── */
.mash-tier-body {
    padding: 4px 20px 20px;
}

.mash-tier-1 .mash-tier-body {
    padding: 8px 20px 20px;
}

/* Collapsed state */
.mash-tier-collapsed {
    display: none;
}

/* Expanded state */
.mash-tier-expanded {
    display: block;
}

/* Expand icon arrow on collapsible headers */
.mash-tier-toggle .mash-tier-expand-label::after {
    content: ' ▾';
    font-size: 10px;
    opacity: 0.6;
}

.mash-tier-open .mash-tier-toggle .mash-tier-expand-label::after {
    content: ' ▴';
}

/* ── Tier grid layouts ───────────────────────────────────── */
.mash-tier-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 8px;
}

.mash-tier-grid-2col {
    grid-template-columns: 1fr 1fr;
}

.mash-tier-full {
    margin-bottom: 8px;
}

/* Remove bottom margin on the last field in a tier */
.mash-tier-body .mash-tier-full:last-child,
.mash-tier-body .mash-tier-grid:last-child {
    margin-bottom: 0;
}

/* ── Field label overrides inside tiers ──────────────────── */
.mash-tier .dokan-control-label,
.mash-tier .mash-attr-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5c6e68 !important;
    letter-spacing: 0.03em;
    text-transform: none;
    margin-bottom: 6px;
    display: block;
}

/* Remove the outer <li> padding Dokan normally adds */
.mash-tier .mash-attr-row,
.mash-tier li.mash-attr-row {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mash-tier .dokan-form-group {
    margin-bottom: 0;
}

/* ── Divider between fields inside tier-body ─────────────── */
.mash-tier-body .mash-tier-field + .mash-tier-field {
    margin-top: 2px;
}

/* ── ATTRIBUTE GROUPING: YARN ────────────────────────────── */

.mash-attr-card {
    background: #faf8f3;
    border: 1px solid #e8e2da;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.mash-attr-card-title {
    font-size: 16px;
    font-weight: 500;
    color: #1e2d40;
    margin-bottom: 14px!important;
}

.mash-attr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mash-attr-list > li:last-child {
    margin-bottom: 0;
}

.mash-attr-accordion {
    background: #fff;
    border: 1px solid #e8e2da;
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.mash-attr-accordion summary {
    background-color: #faf8f3;
    cursor: pointer;
    list-style: none;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #1e2d40;
    position: relative;
    user-select: none;
}

.mash-attr-accordion summary::-webkit-details-marker {
    display: none;
}

.mash-attr-accordion summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
    color: #7c6a52;
}

.mash-attr-accordion[open] summary::after {
    content: '−';
}

.mash-badge-improves-search {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: #614051;
    border-radius: 999px;
    vertical-align: middle;
}

.mash-quantity-field.content-half-part {
    padding-left: 0!important;
}

.mash-attr-accordion-body {
    padding: 18px 20px 18px;
}

.mash-attr-accordion-body .dokan-attribute-option-list,
.mash-attr-card .dokan-attribute-option-list {
    margin: 0;
    padding: 0;
}

.mash-attr-card .product-attribute-list,
.mash-attr-accordion .product-attribute-list {
    border-bottom: 1px solid #f0ece6;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.mash-attr-card .product-attribute-list:last-child,
.mash-attr-accordion .product-attribute-list:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.mash-brand-field .select2-selection__rendered {
    font-size: 16px;;
}

/* Free text fields */
.mash-attr-list input[type="text"] {
    background-color: #FFF;
    border-radius: 8px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .mash-tier-grid-2col {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE FIXES — THE MASH MULTISTEP DOKAN FORM
   Add at the very end of mash-multistep.css
========================================================= */

html,
body {
    overflow-x: hidden;
}

@media (max-width: 767px) {

    /* --- Dokan dashboard layout reset --- */
    .dokan-dashboard-wrap,
    .dokan-dashboard-content,
    .dokan-dashboard-content article,
    .dokan-dashboard-content .entry-content,
    .product-edit-container,
    .product-edit-new-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* In some Dokan/Astra layouts the content keeps desktop offset */
    .dokan-dashboard .dokan-dashboard-wrap .dokan-dashboard-content {
        float: none !important;
        margin-left: 0 !important;
    }

    /* --- Main wizard wrapper --- */
    #mash-wizard {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    #mash-branding-header {
        padding: 8px 0 16px !important;
    }

    .mash-brand-title,
    .mash-site-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }

    .mash-brand-subtitle,
    .mash-site-subtitle {
        font-size: 13px !important;
    }

    /* --- Progress / stepper --- */
    #mash-progress {
        padding: 20px 12px 16px !important;
        margin-bottom: 16px !important;
    }

    .mash-steps-track {
        max-width: 100% !important;
        margin: 0 auto 18px !important;
    }

    .mash-step-item {
        min-width: 0 !important;
    }

    .mash-step-bubble {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    .mash-step-item::after {
        top: 17px !important;
        left: calc(50% + 18px) !important;
        right: calc(-50% + 18px) !important;
    }

    .mash-step-label {
        font-size: 10px !important;
        max-width: 58px !important;
        line-height: 1.25 !important;
    }

    /* --- Draft / completeness rows --- */
    #mash-draft-bar,
    .mash-completion-row,
    .mash-completeness-inner {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .mash-completion-row,
    .mash-completeness-inner {
        padding: 12px 14px !important;
    }

    .mash-completion-label,
    .mash-completeness-title,
    #mash-pct-label {
        white-space: normal !important;
    }

    .mash-bar-track {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Disable fixed sticky completeness bar on mobile */
    .mash-completeness-bar.mash-bar-fixed {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        box-shadow: none !important;
    }

    /* --- Step panels --- */
    .mash-step-panel {
        padding: 18px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    .mash-panel-header {
        margin-bottom: 18px !important;
        padding-bottom: 10px !important;
    }

    .mash-panel-header h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        word-break: break-word;
    }

    .mash-panel-header p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .mash-section-block {
        margin-bottom: 20px !important;
    }

    /* --- Category section --- */
    .mash-cat-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .mash-cat-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .mash-cat-card {
        min-height: 110px !important;
        padding: 20px 14px !important;
        border-radius: 14px !important;
    }

    .mash-cat-emoji {
        font-size: 30px !important;
    }

    .mash-cat-name {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* --- Inputs / editors / select2 --- */
    .dokan-form-group,
    .dokan-form-group input,
    .dokan-form-group textarea,
    .dokan-form-group select,
    .select2-container,
    .select2-selection,
    .wp-editor-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wp-editor-container textarea.wp-editor-area {
        min-height: 160px !important;
    }

    /* --- Product images area --- */
    .dokan-feat-image-upload,
    .dokan-product-gallery,
    #product_images_container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .product_images {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding-left: 0 !important;
    }

    .product_images li {
        width: calc(50% - 5px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- Attribute chips / custom rows --- */
    .mash-checkbox-grid,
    .mash-condition-grid {
        gap: 8px !important;
    }

    .mash-checkbox-chip {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .mash-quantity-row,
    .mash-yardage-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .mash-quantity-input,
    .mash-yardage-input,
    .mash-total-weight-input,
    .mash-brand-select {
        width: 100% !important;
    }

    .mash-unit-toggle {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* --- Pricing / shipping / review cards --- */
    .mash-tier-grid,
    .mash-tier-grid-2col {
        grid-template-columns: 1fr !important;
    }

    #mash-pricing-container {
        padding: 12px !important;
    }

    .mash-rv-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .mash-rv-hero-img,
    .mash-rv-hero-placeholder {
        width: 72px !important;
        height: 72px !important;
    }

    /* --- Bottom nav buttons --- */
    #mash-nav {
        padding: 14px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .mash-nav-left,
    .mash-nav-right {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }

    .mash-panel-nav {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .mash-btn,
    .mash-btn-back,
    .mash-btn-next,
    .mash-btn-publish {
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    #mash-wizard {
        padding: 0 10px !important;
    }

    .mash-brand-title,
    .mash-site-title {
        font-size: 24px !important;
    }

    .mash-panel-header h3 {
        font-size: 21px !important;
    }

    .mash-step-label {
        font-size: 9px !important;
        max-width: 52px !important;
    }

    .product_images li {
        width: 100% !important;
    }
}