/* ==========================================================================
   Custom Add to Cart Widget – Styles
   ========================================================================== */

/* Structural resets — !important only where needed to beat themes */
.catw-wrapper,
.catw-wrapper *,
.catw-wrapper *::before,
.catw-wrapper *::after { box-sizing: border-box !important; }

.catw-wrapper button,
.catw-wrapper input[type="number"],
.catw-wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    outline: none;
}

.catw-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    font-family: inherit;
    width: 100%;
}

.catw-wrapper .catw-price-section,
.catw-wrapper .catw-variation-section,
.catw-wrapper .catw-tiers-section { margin-bottom: 20px; }

/* ==========================================================================
   PRICE
   ========================================================================== */
.catw-wrapper .catw-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px 10px;
    margin-bottom: 6px;
}
.catw-wrapper .catw-main-price { font-size: 36px; font-weight: 800; color: #0F1418; line-height: 1; letter-spacing: -0.5px; }
.catw-wrapper .catw-ex-vat-label { font-size: 12px; font-weight: 500; color: #6E7986; letter-spacing: 0.04em; align-self: center; }
.catw-wrapper .catw-original-price { font-size: 16px; font-weight: 400; color: #6E7986; align-self: center; }
.catw-wrapper .catw-original-price del { text-decoration: line-through; text-decoration-color: #aaa; }
.catw-wrapper .catw-vat-row { display: flex !important; align-items: center !important; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.catw-wrapper .catw-vat-dot { color: #dd0000; font-size: 16px; line-height: 1; flex-shrink: 0; }
.catw-wrapper .catw-inc-vat { font-size: 12px; color: #6E7986; font-weight: 400; letter-spacing: 0.04em; }
.catw-wrapper .catw-inc-vat b { color: #0F1418; font-weight: 700; }

/* ==========================================================================
   VARIATION SELECTS
   ========================================================================== */
.catw-wrapper .catw-variation-section { display: flex !important; flex-direction: column !important; gap: 12px; }
.catw-wrapper .catw-variation-group { display: flex !important; flex-direction: column !important; gap: 5px; }
.catw-wrapper .catw-variation-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #6E7986; cursor: default !important; display: block !important; }
.catw-wrapper .catw-variation-select {
    appearance: none !important; -webkit-appearance: none !important;
    width: 100%; max-width: 300px; padding: 10px 36px 10px 14px;
    font-size: 14px; font-weight: 500; color: #0F1418; background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7986' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important;
    border: 1.5px solid #ECEEF1; border-radius: 6px; cursor: pointer !important; transition: border-color 0.2s ease;
}
.catw-wrapper .catw-variation-select:focus { border-color: #0F1418; box-shadow: 0 0 0 3px rgba(15,20,24,0.08); }
.catw-wrapper input[type="hidden"],
.catw-wrapper .catw-variation-id {
    display: none !important; width: 0 !important; height: 0 !important; padding: 0 !important;
    margin: 0 !important; border: 0 !important; position: absolute !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important; pointer-events: none !important;
}

/* ==========================================================================
   BULK PRICING TIERS
   ========================================================================== */
.catw-wrapper .catw-tiers-label { display: block !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6E7986; margin-bottom: 8px; line-height: 1; }
.catw-wrapper .catw-tiers-section { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.catw-wrapper .catw-tier-item {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: space-between !important;
    gap: 4px; min-height: 58px; padding: 10px 12px;
    background-color: #ffffff; border: 1px solid #ECEEF1; border-radius: 6px;
    cursor: pointer !important; user-select: none !important;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    color: #0F1418; line-height: inherit; text-align: left !important;
    width: auto !important; height: auto !important; margin: 0 !important; box-shadow: none;
}
.catw-wrapper .catw-tier-item:hover:not(.active) { background-color: #F7F8FA; border-color: #d0d0d0; }
.catw-wrapper .catw-tier-item:active { transform: scale(0.97); }
.catw-wrapper .catw-tier-item.active { background-color: #0F1418; border-color: #0F1418; color: #ffffff; }
.catw-wrapper .catw-tier-label-text { display: block !important; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; line-height: 1; color: inherit; }
.catw-wrapper .catw-tier-item.active .catw-tier-label-text { opacity: 0.75; }
.catw-wrapper .catw-tier-price-text { display: block !important; font-size: 13px; font-weight: 700; line-height: 1.2; color: inherit; }

/* ==========================================================================
   ACTION ROW
   ========================================================================== */
.catw-wrapper .catw-action-row { display: flex !important; align-items: stretch !important; gap: 10px; margin-bottom: 10px; }
.catw-wrapper .catw-qty-wrapper {
    display: flex !important; align-items: stretch !important; height: 52px;
    border: 1px solid #ECEEF1; border-radius: 6px; overflow: hidden !important;
    background: #ffffff; flex-shrink: 0 !important; padding: 0 !important; margin: 0; box-shadow: none;
}
.catw-wrapper .catw-qty-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 44px; min-width: 44px; height: 100% !important; padding: 0 !important; margin: 0 !important;
    flex-shrink: 0 !important; background-color: #ffffff; background-image: none !important;
    color: #0F1418; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer !important; transition: background-color 0.13s;
}
.catw-wrapper .catw-qty-btn:hover { background-color: #F7F8FA; }
.catw-wrapper .catw-qty-btn:focus { outline: none !important; box-shadow: none !important; }
.catw-wrapper .catw-qty-btn:disabled { opacity: 0.3; cursor: not-allowed !important; }
.catw-wrapper .catw-qty-minus { border-right: 1px solid #ECEEF1 !important; }
.catw-wrapper .catw-qty-plus  { border-left:  1px solid #ECEEF1 !important; }
.catw-wrapper .catw-qty-input {
    width: 50px; height: 100% !important; text-align: center !important;
    border: none !important; background: transparent !important; background-image: none !important;
    font-size: 14px; font-weight: 700; color: #0F1418;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    -moz-appearance: textfield !important; appearance: textfield !important;
}
.catw-wrapper .catw-qty-input::-webkit-outer-spin-button,
.catw-wrapper .catw-qty-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

.catw-wrapper .catw-add-to-cart-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100%; box-sizing: border-box;
    gap: 6px; min-height: 52px; padding: 0 22px; margin: 0 !important;
    background-color: #0F1418; background-image: none !important; color: #ffffff;
    border: none; border-radius: 6px; box-shadow: none;
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important;
    transition: background-color 0.18s, color 0.18s, transform 0.1s;
}
.catw-wrapper .catw-add-to-cart-btn:hover:not(:disabled) { background-color: #F4920B; color: #0F1418; }
.catw-wrapper .catw-add-to-cart-btn:active:not(:disabled) { transform: scale(0.98); }
.catw-wrapper .catw-add-to-cart-btn:disabled { opacity: 0.6; cursor: not-allowed !important; }
.catw-wrapper .catw-add-to-cart-btn:focus { outline: none !important; box-shadow: none !important; }
.catw-wrapper .catw-btn-text { display: inline-flex !important; align-items: center !important; gap: 4px; pointer-events: none !important; }
.catw-wrapper .catw-btn-arrow { transition: transform 0.2s ease; display: inline-block !important; }
.catw-wrapper .catw-add-to-cart-btn:hover:not(:disabled) .catw-btn-arrow { transform: translateX(3px); }
.catw-wrapper .catw-btn-loader { display: flex !important; align-items: center !important; justify-content: center !important; }
.catw-wrapper .catw-spinner { width: 20px !important; height: 20px !important; animation: catw-spin 0.75s linear infinite !important; }
@keyframes catw-spin { to { transform: rotate(360deg); } }

.catw-wrapper .catw-wishlist-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 52px; min-width: 52px; height: 52px; padding: 0 !important; margin: 0 !important;
    flex-shrink: 0 !important; background-color: #ffffff; background-image: none !important;
    color: #0F1418; border: 1px solid #ECEEF1; border-radius: 6px; box-shadow: none;
    cursor: pointer !important; transition: color 0.18s, border-color 0.18s, background-color 0.15s;
}
.catw-wrapper .catw-wishlist-btn svg { width: 20px; height: 20px; flex-shrink: 0 !important; transition: fill 0.18s; fill: none !important; stroke: currentColor !important; }
.catw-wrapper .catw-wishlist-btn:hover { color: #F4920B; border-color: #F4920B; background-color: #fff8f0; }
.catw-wrapper .catw-wishlist-btn.active { color: #F4920B; border-color: #F4920B; }
.catw-wrapper .catw-wishlist-btn.active svg { fill: #F4920B !important; }
.catw-wrapper .catw-wishlist-btn:focus { outline: none !important; box-shadow: none !important; }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.catw-wrapper .catw-message { margin-top: 14px; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1.45; border: 1px solid transparent; }
.catw-wrapper .catw-message.catw-success { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.catw-wrapper .catw-message.catw-error   { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) { .catw-wrapper .catw-tiers-section { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .catw-wrapper { padding: 18px 14px; }
    .catw-wrapper .catw-main-price { font-size: 28px; }
    .catw-wrapper .catw-tiers-section { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .catw-wrapper .catw-action-row { flex-wrap: wrap; gap: 8px; }
    .catw-wrapper .catw-add-to-cart-btn { flex: 1 0 calc(100% - 62px) !important; order: 2 !important; }
    .catw-wrapper .catw-qty-wrapper { order: 1 !important; flex: 1 !important; }
    .catw-wrapper .catw-wishlist-btn { order: 1 !important; }
}
@media (max-width: 360px) { .catw-wrapper .catw-add-to-cart-btn { flex: 1 0 100% !important; order: 3 !important; } }