.error-message {
    color: red;
    font-size: 12px;
}

#loginPageForm .label-box input,
#registerPageForm .label-box input {
  width: 15px;
}

/* product details page */

.label-customizer-panel { display: none; }
.label-customizer-panel.active { display: block; }
.product-image-panel.hidden { display: none; }

.customize-toggle-btn {
    background: #5D5EB2; color: #fff; border: none;
    padding: 10px 22px; border-radius: 8px; font-weight: 700;
    font-size: .9rem; cursor: pointer; margin: 14px 0;
    transition: background .15s;
}
.customize-toggle-btn:hover { background: #2B2B37; }
.customize-toggle-btn.active { background: #2B2B37; }

#live-label-wrap {
    border-radius: 10px; padding: 12px;
    min-height: 180px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 14px;
    border: 1px solid #080808;
}
#live-label-canvas { max-width: 100%; border-radius: 6px; }

/* ── Attribute selector sections ── */
.lbl-attr-wrapper {
    padding-right: 10px;
    display: none;
}
.lbl-attr-section {
    padding: 12px 14px; 
}
.lbl-attr-section h6 {
    font-size: 1.25rem;
    font-family: "Poppins", sans-serif;
    color: #222222;
    margin-bottom: 15px;
}
.lbl-attr-section h6 .scope-tag {
    display: inline-block; padding: 1px 7px; border-radius: 20px;
    font-size: .65rem; font-weight: 800; margin-left: 6px;
    vertical-align: middle;
}
.scope-outer { background: rgba(212,255,42,.18); color: #6a7a00; }
.scope-inner { background: rgba(168,85,247,.15); color: #7c3aed; }
.scope-text  { background: rgba(42,255,204,.15); color: #0e7a5f; }
.scope-obj   { background: rgba(77,136,255,.15); color: #1d4ed8; }

/* Carousel styles */
.attr-carousel {
    display: flex;
    gap: 16px;
    align-items: center;
}
.attr-carousel .carousel-container {
    display: flex;
    gap: 10px;
    padding: 12px;
    scrollbar-width: none;
    flex-grow: 1;
    overflow-x: auto;
}
.attr-carousel .carousel-container::-webkit-scrollbar {
    height: 4px;
}
.attr-carousel .carousel-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}
.carousel-btn {
    background: #f8f9fa;
    border: 1px solid #2c3e50;
    border-radius: 50%;
    min-width: 38px;
    min-height: 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    font-size: 22px;
}

/* palette items */
.palette-item {
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.palette-item.active {
    position: relative;
}
.palette-item.active::after {
    content: "✔";
    position: absolute;
    bottom: 4px;
    right: 6px;
    color: rgb(255, 255, 255);
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(154, 205, 50);
    border-radius: 50%;
}

.pal-swatch.pal-img { padding: 0; }
.pal-swatch.pal-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.pal-shape-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f3f3f3;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    transition: all .14s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pal-shape-btn.active { border-color: #9acd32 !important;}
.shape-preview {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pal-font-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: all .14s;
    white-space: nowrap;
}
.palette-item.active { border-color: #9acd32 !important;}

.pal-size-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid #ddd;
    background: #f3f3f3;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    transition: all .14s;
}
.pal-size-btn.active { border-color: #111; background: #111; color: #fff; }

.pal-border-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid #ddd;
    background: #f3f3f3;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    transition: all .14s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pal-border-btn.active { border-color: #111; background: #111; color: #fff; }
.pal-border-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}
.border-style-preview {
    width: 20px;
    height: 2px;
    background: currentColor;
}
.border-style-preview.dashed { background: repeating-linear-gradient(90deg, currentColor, currentColor 4px, transparent 4px, transparent 8px); }
.border-style-preview.dotted { background: repeating-linear-gradient(90deg, currentColor, currentColor 2px, transparent 2px, transparent 6px); }

/* text inputs */
.lbl-text-input {
    width: 100%; padding: 10px; border: 1px solid #ddd;
    border-radius: 6px; font-size: 18px; margin-bottom: 6px;
    outline: none; transition: border .15s;
}
.lbl-text-input:focus { border-color: #888; }
/* discount info */
.discount-info {
    margin-top: 15px;
}
.discount-info i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* tabs */
.product-tabs {
    margin-top: 30px;
}
.nav-tabs .nav-link {
    color: #555;
    font-weight: 600;
    border: none;
    border-bottom: none;
}
.nav-tabs .nav-link.active {
    color: #fff;
    background: #5D5EB2;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border: none;
}
.tab-content {
    padding: 20px 0;
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

.product-pagination nav {
  display: flex;
  justify-content: center;
}

/* cart toast */
.cart-added-toast {
    position: fixed; top: 80px; right: 20px; background: #198754;
    color: #fff; padding: 12px 24px; border-radius: 8px;
    font-weight: 600; z-index: 9999; display: none;
}

/* ===== Container ===== */
.price-range-container {
    position: relative;
    width: 100%;
}

/* ===== Range wrapper ===== */
.range-inputs {
    position: relative;
    height: 15px;
}

/* ===== Both sliders overlap ===== */
.range-inputs input[type="range"] {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #5D5EB2;
    pointer-events: none; /* allow overlap */
    -webkit-appearance: none;
}

/* ===== Track (same for both) ===== */
.range-inputs input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #5D5EB2; /* neutral track */
    border-radius: 2px;
}

.range-inputs input[type="range"]::-moz-range-track {
    height: 4px;
    background: #5D5EB2;
    border-radius: 2px;
}

/* REMOVE blue fill (important) */
.range-inputs input[type="range"]::-moz-range-progress {
    background: #5D5EB2;
}

/* ===== Thumb (handle) ===== */
.range-inputs input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background: #5D5EB2;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    position: relative;
    z-index: 2;
}

.range-inputs input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    height: 14px;
    width: 14px;
    background: #5D5EB2;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* ===== Fix overlapping thumb priority ===== */
#minPriceRange {
    z-index: 3;
    border: none;
}

#maxPriceRange {
    z-index: 4;
    border: none;
}

/* ===== Optional: Hover effect ===== */
.range-inputs input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.range-inputs input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* cart page */

/* ── Base ── */
.hl-checkout {
    background: #f4f5f7;
    padding-bottom: 40px;
}

/* ── Progress bar ── */
.hlco-progress {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    padding: 14px 0 10px;
    position: sticky;
    top: 0;
    z-index: 110;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.hlco-steps {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hlco-step {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hlco-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d0d5dd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: #98a2b3;
    transition: all .25s;
}
.hlco-label {
    font-size: 13px;
    font-weight: 600;
    color: #98a2b3;
    transition: color .25s;
}
.hlco-line {
    flex: 1;
    height: 2px;
    background: #e4e7ec;
    max-width: 72px;
    margin: 0 6px;
    transition: background .3s;
    border-radius: 2px;
}
.hlco-line.done { background: #16a34a; }
.hlco-step.active .hlco-circle { background: #4338ca; border-color: #4338ca; color: #fff; }
.hlco-step.active .hlco-label  { color: #4338ca; }
.hlco-step.done .hlco-circle   { background: #16a34a; border-color: #16a34a; color: #fff; }
.hlco-step.done .hlco-label    { color: #16a34a; }
.hlco-mobile-step-label {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 8px;
}

/* ── Layout grid ── */
.hlco-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding-top: 28px;
    align-items: start;
}
@media (max-width: 991px) {
    .hlco-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 16px;
    }
}

/* ── Cards ── */
.hlco-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e8eaed;
}
.hlco-card-delivery {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
}
.hlco-card-inner-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #1a1d2e;
}

/* ── Panel header ── */
.hlco-panel-header { margin-bottom: 20px; }
.hlco-panel-title  { font-size: 1.4rem; font-weight: 800; color: #1a1d2e; margin-bottom: 4px; }
.hlco-panel-sub    { font-size: 14px; color: #6b7280; margin-bottom: 0; }

/* ── Cart item cards ── */
.hlco-item-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow .2s, border-color .2s;
}
.hlco-item-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); border-color: #d0d5dd; }
.hlco-item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e8eaed;
    background: #f4f5f7;
    flex-shrink: 0;
}

canvas.hlco-item-canvas {
    display: block;
}
.hlco-item-info { flex: 1; min-width: 0; }
.hlco-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d2e;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hlco-item-meta  { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.hlco-item-btns  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlco-edit-btn {
    font-size: 11px;
    font-weight: 600;
    color: #4338ca;
    border: 1.5px solid #4338ca;
    border-radius: 20px;
    padding: 2px 10px;
    background: none;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    line-height: 1.6;
}
.hlco-edit-btn:hover { background: #4338ca; color: #fff; }
.hlco-remove-btn {
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
    border: 1.5px solid #dc2626;
    border-radius: 20px;
    padding: 2px 10px;
    background: none;
    cursor: pointer;
    transition: all .2s;
    line-height: 1.6;
}
.hlco-remove-btn:hover { background: #dc2626; color: #fff; }
.hlco-item-price-col {
    text-align: right;
    flex-shrink: 0;
}
.hlco-item-total { font-size: 16px; font-weight: 800; color: #1a1d2e; }
.hlco-item-each  { font-size: 12px; color: #6b7280; }

/* ── Qty stepper ── */
.hlco-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f5f7;
    border-radius: 8px;
    padding: 4px 6px;
}
.hlco-qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #e8eaed;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #374151;
    transition: background .15s;
    flex-shrink: 0;
}
.hlco-qty-btn:hover { background: #e8eaed; }
.hlco-qty-val { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; }

/* ── Action row ── */
.hlco-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    .hlco-actions { flex-direction: column; }
    .hlco-actions .btn { width: 100%; }
}
.hlco-trust { font-size: 12px; color: #9ca3af; }

/* ── Buttons ── */
.hlco-btn-primary {
    background: #4338ca;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 14px;
    transition: background .2s, transform .1s;
}
.hlco-btn-primary:hover  { background: #3730a3; color: #fff; transform: translateY(-1px); }
.hlco-btn-primary:active { transform: translateY(0); }
.hlco-btn-secondary {
    background: #fff;
    color: #374151;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: border-color .2s, background .2s;
}
.hlco-btn-secondary:hover { border-color: #9ca3af; background: #f9fafb; color: #374151; }
.hlco-btn-place {
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 32px;
    font-weight: 800;
    font-size: 15px;
    transition: opacity .2s, transform .1s;
    letter-spacing: .3px;
}
.hlco-btn-place:hover  { opacity: .92; color: #fff; transform: translateY(-1px); }
.hlco-btn-edit {
    background: #fff;
    color: #6b7280;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    transition: all .2s;
    flex-shrink: 0;
}
.hlco-btn-edit:hover { border-color: #9ca3af; color: #374151; }

/* ── Payment methods ── */
.hlco-pm-option {
    border: 2px solid #e8eaed;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color .2s, background .2s;
}
.hlco-pm-option:hover    { border-color: #a5b4fc; background: #f5f3ff; }
.hlco-pm-option.selected { border-color: #4338ca; background: #eef2ff; }
.hlco-pm-option input[type=radio] { accent-color: #4338ca; width: 16px; height: 16px; }
.hlco-pm-name  { font-weight: 700; font-size: 14px; color: #1a1d2e; }
.hlco-pm-desc  { font-size: 12px; color: #6b7280; }
.hlco-pm-icon  { font-size: 22px; width: 32px; text-align: center; }

/* ── Review step ── */

.hlco-review-row  { display: flex; justify-content: space-between; align-items: flex-start; }
.hlco-review-label { font-weight: 700; font-size: 14px; color: #1a1d2e; }
.hlco-review-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.hlco-review-item:last-child { border-bottom: none; }
.hlco-review-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e8eaed;
    background: #f4f5f7;
    flex-shrink: 0;
}

/* ── Order summary sidebar ── */
.hlco-summary-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    padding: 24px;
    position: sticky;
    top: 76px;
    margin-top: 45px;
}
.hlco-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    color: #374151;
}
.hlco-sum-total { font-size: 18px; font-weight: 800; color: #1a1d2e; }
.hlco-sum-thumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}
.hlco-sum-thumb-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e8eaed;
    background: #f4f5f7;
    flex-shrink: 0;
}
.hlco-trust-section { border-top: 1px solid #f3f4f6; padding-top: 14px; }
.hlco-trust-item { font-size: 12px; color: #6b7280; padding: 4px 0; }

/* ── Thank you ── */
.hlco-thankyou-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8eaed;
    padding: 56px 32px;
    text-align: center;
}
.hlco-thankyou-icon { font-size: 64px; color: #16a34a; }
.hlco-ty-info { background: #f4f5f7; border-radius: 10px; padding: 16px 20px; text-align: left; }
.hlco-ty-info-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }

/* ── Empty cart ── */
.empty-cart-icon { font-size: 56px; color: #d0d5dd; }

/* ── Mobile sticky CTA ── */
.hlco-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    z-index: 200;
}
.hlco-sticky-btn { border-radius: 10px; padding: 14px; font-size: 16px; font-weight: 800; }

.search-form-wrapper {
    display: flex;
    margin-top: 1px;
    width: 100%;
}

#hlco-shipping-card input {
  width: 14px;
}

#hlco-shipping-card span {
  font-size: 14px;
}

ul#variation-meta li {
    margin-bottom: 5px;
}

ul.product-meta-list li {
    margin-bottom: 5px;
}