/* Central Styles for Spice Route */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1;
}

.slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

/* --- Custom Add to Cart Styling --- */

/* --- Wrapper for the whole section --- */
.custom-add-to-cart-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

/* --- Row 1: Quantity + Add to Cart --- */
.custom-add-to-cart-wrapper form.cart {
    display: flex;
    gap: 1rem;
    width: 100%;
}

/* --- Wrapper Layout --- */
.custom-add-to-cart-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Row 1: Quantity + Add to Cart Button */
.custom-add-to-cart-wrapper form.cart {
    display: flex !important;
    gap: 1rem !important;
    width: 100%;
    margin-bottom: 0; /* Remove default WP margins */
}

/* --- Quantity Box (Light Gray) --- */
.custom-add-to-cart-wrapper .quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    border-radius: 0.75rem !important;    /* rounded-xl */
    border: 1px solid #e5e7eb;
    min-width: 140px;
    height: 3.5rem;
    padding: 0 0.5rem;
    margin: 0 !important; /* Reset WP margins */
}
.dark .custom-add-to-cart-wrapper .quantity {
    background-color: #3a2820 !important;
    border-color: #1f2937;
}

/* Input Field */
.custom-add-to-cart-wrapper .quantity input.qty {
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    -moz-appearance: textfield;
}
/* Hide Spinners */
.custom-add-to-cart-wrapper .quantity input.qty::-webkit-inner-spin-button, 
.custom-add-to-cart-wrapper .quantity input.qty::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* +/- Buttons */
.custom-add-to-cart-wrapper .quantity .qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #1b120d;
}

/* --- Add to Cart Button (The Orange Fix) --- */
/* We target 'button.single_add_to_cart_button' to be very specific */
.custom-add-to-cart-wrapper button.single_add_to_cart_button {
    flex: 1; /* Grow to fill space */
    background-color: #ec5b13 !important; /* Force Orange */
    color: white !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0 1.5rem !important;
    height: 3.5rem !important; /* Match quantity height */
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(236, 91, 19, 0.2);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.custom-add-to-cart-wrapper button.single_add_to_cart_button:hover {
    background-color: #c94a0e !important; /* Darker Orange */
    transform: translateY(-1px);
}

/* Add the Icon using pseudo-element */
.custom-add-to-cart-wrapper button.single_add_to_cart_button::before {
    content: 'shopping_bag';
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    font-weight: normal;
    margin-right: 5px;
}

/* --- Buy Now Button (Black) --- */
.custom-add-to-cart-wrapper .buy-now-btn {
    width: 100%;
    background-color: #1b120d !important;
    color: white !important;
    font-weight: 700;
    font-size: 1rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none; /* In case it's an <a> tag */
    transition: background-color 0.2s;
}
.custom-add-to-cart-wrapper .buy-now-btn:hover {
    background-color: black !important;
}

/* --- Archive/Shop Page Add to Cart Button --- */
.archive-add-to-cart-btn {
    background-color: #ec5b13 !important; /* Force Primary Orange */
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 10px 15px -3px rgba(236, 91, 19, 0.2);
}

.archive-add-to-cart-btn:hover {
    background-color: #c94a0e !important; /* Darker Orange on Hover */
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Ensure the icon text doesn't get overridden */
.archive-add-to-cart-btn span {
    color: #ffffff !important;
}

/* --- Active Menu Item Styling --- */

/* 1. Target the active page link */
.current-menu-item > a {
    color: #ec5b13 !important; /* Force Primary Orange */
    font-weight: 700 !important; /* Optional: Make it bold */
}

/* 2. Target the "parent" page (e.g., Keep 'Shop' active when viewing a single product) */
.current-menu-parent > a,
.current_page_parent > a {
    color: #ec5b13 !important;
}


/* =========================================
   FORCE OVERRIDE: CART BLOCK STYLES
   ========================================= */

/* --- 1. Main Layout & Fonts --- */
.wp-block-woocommerce-cart {
    font-family: "Be Vietnam Pro", sans-serif !important;
    max-width: 1600px;
    margin: 0 auto;
    color: #1b120d;
}

/* --- 2. Cart Items Table (Left Side) --- */
/* Remove default backgrounds to keep it clean */
.wp-block-woocommerce-cart .wc-block-cart-items {
    background: transparent !important;
    border: none !important;
}

/* Header Row */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    color: #9ca3af !important; /* Gray-400 */
    border-bottom: 1px solid #e5e7eb !important;
    background: transparent !important;
}

/* Product Rows */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 1.5rem 0 !important;
}

/* Product Name Links */
.wp-block-woocommerce-cart .wc-block-components-product-name {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #1b120d !important;
    text-decoration: none !important;
}
.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
    color: #ec5b13 !important; /* Primary Orange */
}

/* Product Images - Rounded Corners */
.wp-block-woocommerce-cart .wc-block-components-product-image {
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    overflow: hidden;
}
.wp-block-woocommerce-cart .wc-block-components-product-image img {
    border-radius: 0.75rem !important;
}

/* --- 3. Quantity Selector (Critical Override) --- */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    border-radius: 0.75rem !important;
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    border: 1px solid #e5e7eb !important;
    overflow: hidden;
    height: 2.5rem !important; /* Ensure height consistency */
}

/* Input Number */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    background: transparent !important;
    border: none !important;
    font-weight: 700 !important;
    color: #1b120d !important;
    font-size: 1rem !important;
}

/* +/- Buttons */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button {
    background: transparent !important;
    color: #1b120d !important;
    transition: background-color 0.2s;
    border: none !important;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:hover {
    background-color: rgba(0,0,0,0.05) !important;
}

/* --- 4. Right Sidebar: Cart Totals --- */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    background: #fff !important;
    padding: 2rem !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f3f4f6 !important;
}

/* Sidebar Title */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
    color: #1b120d !important;
}

/* Totals Rows */
.wp-block-woocommerce-cart .wc-block-components-totals-item {
    font-size: 1rem !important;
    padding: 0.75rem 0 !important;
    border-color: #f3f4f6 !important;
}
.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
    color: #6b7280 !important; /* Gray-500 */
}
.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
    font-weight: 700 !important;
    color: #1b120d !important;
}

/* Coupon Link */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon-link {
    color: #ec5b13 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* --- 5. "Proceed to Checkout" Button (Critical Override) --- */
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-checkout-button {
    background-color: #ec5b13 !important; /* Force Orange */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    border: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 10px 15px -3px rgba(236, 91, 19, 0.3) !important;
    text-transform: none !important;
    margin-top: 1rem !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-checkout-button:hover {
    background-color: #c94a0e !important; /* Darker Orange */
    transform: translateY(-2px);
}

/* --- 6. Remove Item (Trash Icon/Link) --- */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
    color: #ef4444 !important; /* Red text */
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
    text-decoration: underline !important;
}

/* =========================================
   FORCE OVERRIDE: CHECKOUT BLOCK STYLES
   ========================================= */

/* --- 1. Main Layout & Fonts --- */
.wp-block-woocommerce-checkout {
    font-family: "Be Vietnam Pro", sans-serif !important;
    max-width: 1600px;
    margin: 0 auto;
    color: #1b120d;
}

/* --- 2. Input Fields (Contact, Address, etc.) --- */
/* We target the input deeply to override WP defaults */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout select {
    border-radius: 0.75rem !important; /* Rounded corners */
    border: 1px solid #e5e7eb !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    height: 3rem !important;
    transition: all 0.2s ease !important;
}

/* Input Focus (Orange Glow) */
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout select:focus {
    border-color: #ec5b13 !important;
    ring: 2px solid #ec5b13 !important; /* Tailwind ring simulation */
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(236, 91, 19, 0.1) !important;
}

/* Floating Labels */
.wp-block-woocommerce-checkout label {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
}

/* --- 3. Order Summary (Right Sidebar) --- */
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
    background-color: #f9fafb !important; /* Light gray background */
    border: 1px solid #f3f4f6 !important;
    border-radius: 1.5rem !important;
    padding: 2rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

/* Product Images in Summary */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
}

/* Price Text */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
    background-color: #1b120d !important; /* Black badge */
    color: white !important;
    font-weight: bold;
}

/* --- 4. The "Place Order" Button (Critical Fix) --- */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background-color: #ec5b13 !important; /* Force Orange */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 10px 15px -3px rgba(236, 91, 19, 0.3) !important;
    width: 100%;
    margin-top: 1.5rem;
    transition: all 0.2s ease !important;
}

/* Hover State */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    background-color: #c94a0e !important; /* Darker Orange */
    transform: translateY(-2px);
}

/* --- 5. Total Price Highlight --- */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #ec5b13 !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
}

/* --- 6. Headings (Contact Info, Address) --- */
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout .wc-block-components-title {
    font-weight: 800 !important;
    color: #1b120d !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.wc-block-components-checkout-return-to-cart-button {
    white-space: nowrap !important;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
  margin-top: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item {
      flex-direction: column;
    gap: 20px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item:last-child>div {
  padding: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image>img {
  width: 80px !important;
  max-width: 80px !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
}


/* =========================================
   FIX: CHECKOUT FLOATING LABELS OVERLAP
   ========================================= */

/* 1. Increase Input Height & Adjust Padding */
/* This pushes the typed text down so it doesn't hit the label */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout select {
    height: 3.5rem !important;        /* Taller field to fit both */
    padding-top: 1.5rem !important;   /* Push text down */
    padding-bottom: 0.5rem !important; /* Space at bottom */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 2. Position the Label Correctly */
/* Ensures the label stays small and high up when typing */
.wp-block-woocommerce-checkout .wc-block-components-floating-label .wc-block-components-floating-label__label {
    top: 0.5rem !important;           /* Stick to top */
    font-size: 0.75rem !important;    /* Keep it small */
    color: #6b7280 !important;
    z-index: 10;
}

/* 3. Fix Dropdown/Select Arrow Position */
/* Since we made the field taller, center the arrow */
.wp-block-woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control__icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* =========================================
   ORDER RECEIVED (THANK YOU) PAGE STYLING
   ========================================= */

/* --- Main Wrapper --- */
.woocommerce-order {
    max-width: 1000px;
    margin: 0 auto;
    font-family: "Be Vietnam Pro", sans-serif;
    color: #1b120d;
}

/* --- "Thank You" Message Box --- */
.woocommerce-order p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    background-color: #ec5b13; /* Primary Orange */
    color: white;
    padding: 2rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 1rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 25px -5px rgba(236, 91, 19, 0.3);
}

/* --- Order Details List (Order #, Date, Email, Total) --- */
ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
    justify-content: space-between;
}

ul.woocommerce-order-overview li {
    background-color: #f9fafb; /* Light Gray */
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    flex: 1 1 200px; /* Responsive resizing */
    text-align: center;
    border-left: none; /* Override default WP borders */
    border-right: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #6b7280;
}

ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1b120d;
    text-transform: none;
}

/* --- Order Details Table Section --- */
.woocommerce-order-details {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    margin-bottom: 3rem;
}

.woocommerce-order-details h2 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: #1b120d;
}

/* Table Styling */
.woocommerce-table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
}

.woocommerce-table.woocommerce-table--order-details th {
    text-align: left;
    padding: 1rem 0;
    border-bottom: 2px solid #f3f4f6;
    color: #9ca3af;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.woocommerce-table.woocommerce-table--order-details td {
    padding: 1.25rem 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

/* Product Links */
.woocommerce-table.woocommerce-table--order-details td a {
    color: #1b120d;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}
.woocommerce-table.woocommerce-table--order-details td a:hover {
    color: #ec5b13;
}

/* Price & Totals */
.woocommerce-table.woocommerce-table--order-details .amount {
    font-weight: 700;
    color: #4b5563;
}

/* Highlight the Final Total Row */
.woocommerce-table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    padding-top: 1.5rem;
    font-size: 1.25rem;
    color: #ec5b13; /* Orange */
}

/* --- Customer Address Section --- */
.woocommerce-customer-details {
    background: #f9fafb;
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid #e5e7eb;
}

.woocommerce-customer-details h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Add an icon before "Billing Address" */
.woocommerce-customer-details h2::before {
    content: 'home';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    color: #ec5b13;
}

.woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.8;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
}

/* =========================================
   MY ACCOUNT PAGE STYLING
   ========================================= */

/* --- Layout Wrapper --- */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 3rem 1rem;
    font-family: "Be Vietnam Pro", sans-serif;
    color: #1b120d;
}

/* --- Left Sidebar: Navigation Menu --- */
.woocommerce-MyAccount-navigation {
    flex: 1 0 250px; /* Width of sidebar */
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff; /* White card */
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f3f4f6;
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 1rem 1.5rem;
    color: #4b5563; /* Gray-600 */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

/* Hover State */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #fff7ed; /* Light Orange */
    color: #ec5b13; /* Primary Orange */
    padding-left: 1.75rem; /* Slight slide effect */
}

/* Active State */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #ec5b13;
    color: white;
}

/* --- Right Side: Content Area --- */
.woocommerce-MyAccount-content {
    flex: 3 1 600px; /* Takes remaining space */
    background: #f9fafb; /* Light Gray Background for content area */
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid #e5e7eb;
}

/* Welcome Message */
.woocommerce-MyAccount-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

/* Links inside content (e.g., "Edit your password") */
.woocommerce-MyAccount-content a {
    color: #ec5b13;
    text-decoration: underline;
    font-weight: 600;
}

/* --- Forms (Login / Edit Address) --- */
.woocommerce-account form .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-account form input.input-text,
.woocommerce-account form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem; /* rounded-xl */
    font-size: 1rem;
    background-color: white;
    height: 3rem;
}

.woocommerce-account form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1b120d;
}

/* Buttons */
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[name="save_account_details"],
.woocommerce-account button[name="save_address"] {
    background-color: #1b120d; /* Black */
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button:hover {
    background-color: #ec5b13; /* Orange on hover */
}

/* --- Order History Table --- */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.woocommerce-account .woocommerce-orders-table th {
    text-align: left;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #9ca3af;
    border-bottom: 1px solid #e5e7eb;
}

.woocommerce-account .woocommerce-orders-table__row {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border-radius: 0.5rem;
}

.woocommerce-account .woocommerce-orders-table__cell {
    padding: 1.25rem 1rem;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

/* Round the corners of the table rows */
.woocommerce-account .woocommerce-orders-table__cell:first-child {
    border-left: 1px solid #f3f4f6;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}
.woocommerce-account .woocommerce-orders-table__cell:last-child {
    border-right: 1px solid #f3f4f6;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* Status Badges */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
    font-weight: 700;
    color: #1b120d;
    text-transform: capitalize;
}

/* View Button */
.woocommerce-account .woocommerce-button.view {
    background-color: #f3f4f6;
    color: #1b120d;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.85rem;
}
.woocommerce-account .woocommerce-button.view:hover {
    background-color: #ec5b13;
    color: white;
}

/* --- Addresses Section --- */
.woocommerce-account .u-columns.woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
/* Mobile stack */
@media (max-width: 768px) {
    .woocommerce-account .u-columns.woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}

.woocommerce-account address {
    font-style: normal;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    margin-top: 1rem;
    color: #4b5563;
}

.woocommerce-account .woocommerce-Address-title h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.woocommerce-account .edit {
    font-size: 0.85rem;
    float: right;
    margin-top: -2rem; /* Pull it up next to title */
}

.woocommerce-account .u-columns.woocommerce-Addresses {
  display: flex
}

.woocommerce-account .addresses .title .edit {
  float: left;
}

.woocommerce-account .edit {
  margin-top: 4px;
}

/* =========================================
   FIX: HEADER SEARCH ON WOOCOMMERCE PAGES
   ========================================= */

/* 1. Force the wrapper to stay flexible and the correct height */
header label > div {
    display: flex !important;
    align-items: center !important;
    height: 2.5rem !important; /* Enforce h-10 (40px) */
    background-color: #f3ebe7 !important; /* Force beige bg */
    border: none !important;
}
.dark header label > div {
    background-color: #3a2820 !important;
}

/* 2. Reset the Input Field styles */
/* WooCommerce tries to add white bg and borders here; we must remove them */
header label input[type="text"] {
    background-color: transparent !important; /* Keep it see-through */
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    height: 100% !important;
    min-height: 0 !important; /* Override WC min-height */
    color: #1b120d !important;
    font-size: 0.875rem !important; /* text-sm */
}

/* 3. Fix the Search Icon Alignment */
header label .material-symbols-outlined {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    line-height: 1 !important;
}

/* =========================================
   PAGINATION STYLING (Search & Archive)
   ========================================= */
ul.page-numbers {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.page-numbers li {
    margin: 0;
}

ul.page-numbers li a,
ul.page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* size-10 */
    height: 2.5rem;
    border-radius: 0.5rem; /* rounded-lg */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    color: #1b120d;
}

/* Default / Inactive Links */
ul.page-numbers li a {
    background-color: transparent;
}
ul.page-numbers li a:hover {
    background-color: #f3f4f6; /* gray-100 */
}

/* Active Page */
ul.page-numbers li span.current {
    background-color: #ec5b13; /* Primary Orange */
    color: white;
}

/* =========================================
   SHOP PAGE SORTING DROPDOWN STYLING
   ========================================= */

/* 1. Reset the wrapper margin */
.woocommerce-ordering {
    margin: 0 !important; /* Remove default margins to align with text */
}

/* 2. Style the Select Box */
.woocommerce-ordering select.orderby {
    appearance: none;        /* Remove default arrow (standard) */
    -webkit-appearance: none; /* Remove default arrow (Safari/Chrome) */
    -moz-appearance: none;    /* Remove default arrow (Firefox) */
    
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Light Gray border */
    border-radius: 0.75rem;    /* rounded-xl (Matches your buttons) */
    
    padding: 0.6rem 2.5rem 0.6rem 1rem; /* Extra right padding for the arrow */
    
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563; /* Gray-600 */
    
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow */

    /* Custom SVG Arrow (Gray) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

/* 3. Hover State */
.woocommerce-ordering select.orderby:hover {
    border-color: #ec5b13; /* Primary Orange Border */
    color: #1b120d;        /* Darker Text */
    
    /* Change arrow color to Orange on hover */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ec5b13' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* 4. Focus State (When clicked) */
.woocommerce-ordering select.orderby:focus {
    border-color: #ec5b13;
    box-shadow: 0 0 0 4px rgba(236, 91, 19, 0.1); /* Orange Glow Ring */
}

.woocommerce img, .woocommerce-page img {
  height: 100%;
}

/* =========================================
   SHOP CARD PRICE STYLING
   Targeting: .tejashry-card-price
   ========================================= */

/* 1. Flex layout to align prices neatly */
.tejashry-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline; /* Aligns text by the baseline */
    gap: 0.5rem; /* Space between old and new price */
}

/* 2. The Sale Price (<ins> tag) */
.tejashry-card-price ins {
    color: #ec5b13; /* Primary Orange */
    font-weight: 900;
    font-size: 1.25rem; /* Slightly larger */
    text-decoration: none; /* Remove default underline */
    background: transparent;
    order: 2; /* Ensure it appears second if needed */
}

/* 3. The Regular/Old Price (<del> tag) */
.tejashry-card-price del {
    color: #9ca3af; /* Gray-400 */
    font-weight: 500;
    font-size: 0.9rem; /* Smaller than sale price */
    text-decoration: line-through; /* Strikethrough */
    opacity: 0.8;
    order: 1;
}

/* Dark Mode Adjustments */
.dark .tejashry-card-price del {
    color: #6b7280; /* Darker gray for dark mode */
}


/* =========================================
   FOOLPROOF SINGLE PRODUCT PRICE STYLING
   ========================================= */

/* 1. LAYOUT: Ensure they sit side-by-side */
.tejashry-single-price,
.tejashry-single-price .price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 1rem !important; /* Space between prices */
}

/* 2. THE DEFAULT LOOK (Big & Orange)
   This targets the "Sale Price" AND "Regular Price" automatically */
.tejashry-single-price,
.tejashry-single-price span, 
.tejashry-single-price bdi,
.tejashry-single-price ins {
    color: #ec5b13 !important;      /* Orange */
    font-size: 2.25rem !important;  /* Big text (36px) */
    font-weight: 900 !important;    /* Extra Bold */
    text-decoration: none !important;
    background: transparent !important;
    line-height: 1 !important;
}

/* 3. THE OLD PRICE OVERRIDE (Small & Gray)
   This forces the "strikethrough" price to ignore the rule above */
.tejashry-single-price del,
.tejashry-single-price del span,
.tejashry-single-price del bdi {
    color: #9ca3af !important;      /* Gray */
    font-size: 1.25rem !important;  /* Small text (20px) */
    font-weight: 500 !important;    /* Medium weight */
    text-decoration: line-through !important;
    opacity: 0.8;
}

/* Dark Mode Adjustment for Old Price */
.dark .tejashry-single-price del span,
.dark .tejashry-single-price del bdi {
    color: #6b7280 !important;
}

/* =========================================
   EMPTY CART STATE STYLING
   ========================================= */

/* --- 1. Container Layout --- */
/* Center everything and add breathing room */
.wp-block-woocommerce-cart .wc-block-cart--empty,
.woocommerce-cart .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
    text-align: center;
    min-height: 50vh; /* Takes up half the screen height nicely */
}

/* --- 2. The "Ghost" Icon --- */
/* Adds a big gray bag icon above the text */
.wp-block-woocommerce-cart .wc-block-cart--empty::before,
.woocommerce-cart .cart-empty::before {
    font-family: 'Material Symbols Outlined';
    content: "\e8cc"; /* 'shopping_cart' icon code */
    font-size: 6rem;
    color: #f3f4f6; /* Very light gray */
    margin-bottom: 1.5rem;
    font-weight: normal;
    line-height: 1;
}
/* Dark mode adjustment for the icon */
.dark .wp-block-woocommerce-cart .wc-block-cart--empty::before,
.dark .woocommerce-cart .cart-empty::before {
    color: #374151; /* Dark gray */
}

/* --- 3. The Title ("Your cart is empty") --- */
.wp-block-woocommerce-cart .wc-block-cart__empty-title,
.woocommerce-cart .cart-empty {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #1b120d !important;
    margin-bottom: 1rem !important;
    background: transparent !important;
}
.dark .wp-block-woocommerce-cart .wc-block-cart__empty-title,
.dark .woocommerce-cart .cart-empty {
    color: white !important;
}

/* --- 4. The Subtext (if any) --- */
.wp-block-woocommerce-cart .wc-block-cart__empty-text {
    color: #6b7280;
    font-size: 1.1rem;
    max-width: 400px;
    margin: 0 auto 2rem auto;
}

/* --- 5. The "Start Shopping" Button --- */
/* Styles the button to match your Orange Pill buttons */
.wp-block-woocommerce-cart .wp-block-button__link,
.woocommerce-cart .return-to-shop .button {
    background-color: #ec5b13 !important; /* Primary Orange */
    color: white !important;
    border-radius: 9999px !important; /* Full pill shape */
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px -1px rgba(236, 91, 19, 0.2) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}

/* Button Hover State */
.wp-block-woocommerce-cart .wp-block-button__link:hover,
.woocommerce-cart .return-to-shop .button:hover {
    background-color: #c94a0e !important; /* Darker Orange */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(236, 91, 19, 0.3) !important;
}

/* Add a small arrow icon inside the button (Optional fancy touch) */
.wp-block-woocommerce-cart .wp-block-button__link::after,
.woocommerce-cart .return-to-shop .button::after {
    font-family: 'Material Symbols Outlined';
    content: "\e5c8"; /* 'arrow_forward' */
    font-size: 1.1rem;
    font-weight: bold;
}

/* =========================================
   HIDE 'VIEW CART' ICON ON SHOP PAGE
   ========================================= */

/* 1. Hide the specific "View Cart" link WooCommerce injects */
a.added_to_cart,
a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* 2. Safety Check: Ensure the button container only shows your button */
/* This assumes your main button is the first-child */
.archive-add-to-cart-btn + a {
    display: none !important;
}

/* =========================================
   CONTACT FORM 7 STYLING (Tejashri Theme)
   ========================================= */

/* 1. Layout & Spacing */
.tejashry-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
}

/* The Grid (2 Columns on Desktop) */
.tejashry-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .tejashry-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* 2. Labels */
.tejashry-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1b120d;
}

/* 3. Inputs & Textarea */
.tejashry-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e5e7eb; /* Light Gray */
    background-color: #f9fafb; /* Very Light Gray */
    border-radius: 12px;       /* Matches 'rounded-xl' */
    font-family: inherit;
    font-size: 16px;
    color: #1b120d;
    outline: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box; /* Crucial for width: 100% */
}

/* Textarea specific height */
textarea.tejashry-input {
    height: auto;
    min-height: 160px;
    padding: 16px;
    resize: vertical;
}

/* Focus State (The Orange Glow) */
.tejashry-input:focus {
    border-color: #ec5b13;
    box-shadow: 0 0 0 1px #ec5b13;
    background-color: #ffffff;
}

/* 4. The Submit Button */
.tejashry-btn {
    width: 100%;
    background-color: #ec5b13;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 24px;
    border: none;
    border-radius: 9999px; /* Pill Shape */
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tejashry-btn:hover {
    background-color: #d44e0b; /* Darker Orange */
    transform: translateY(-2px);
}

/* 5. Helper Text */
.tejashry-note {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin-top: 10px;
}

.tejashry-note a {
    color: #1b120d;
    text-decoration: underline;
}

.tejashry-note a:hover {
    color: #ec5b13;
}

/* =========================================
   LOGIN & SIGN UP PAGE STYLES (LOGGED-OUT ONLY)
   ========================================= */

/* 1. Page Background & Container Layout */
body.logged-out.woocommerce-account,
body.woocommerce-lost-password {
    background-color: #fcf9f8; /* Warm off-white background */
}

/* This targets the main wrapper to fix the "Huge Gap" issue */
body.logged-out.woocommerce-account .woocommerce,
body.woocommerce-lost-password .woocommerce {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0px !important; /* Forces elements to touch, removing the spread */
    min-height: 50vh;
}


/* 3. The Form Card (White Box) */
body.logged-out form.login,
body.logged-out form.register,
body.woocommerce-lost-password form.lost_reset_password {
    background-color: #ffffff;
    border: 1px solid #f3ebe7;
    border-radius: 16px;
    padding: 2.5rem !important;
    box-shadow: 0 10px 30px -5px rgba(236, 91, 19, 0.08); /* Soft orange shadow */
    max-width: 420px;
    width: 100%;
    margin: 0 auto !important; /* Centered */
}

/* 5. Input Fields */
body.logged-out input.input-text,
body.woocommerce-lost-password input.input-text {
    background-color: #fcf9f8;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    color: #1b120d;
    width: 100%;
    font-family: 'Be Vietnam Pro', sans-serif;
    transition: all 0.2s ease;
}

/* Input Focus (Orange Ring) */
body.logged-out input.input-text:focus,
body.woocommerce-lost-password input.input-text:focus {
    border-color: #ec5b13;
    box-shadow: 0 0 0 1px #ec5b13;
    outline: none;
}

/* 6. Labels */
body.logged-out label {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #1b120d;
    margin-bottom: 0.5rem;
    display: block;
}

/* 7. Buttons (Primary Orange) */
body.logged-out button.button,
body.woocommerce-lost-password button.button {
    background-color: #ec5b13 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    width: 100%;
    margin-top: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 91, 19, 0.2);
}

body.logged-out button.button:hover,
body.woocommerce-lost-password button.button:hover {
    background-color: #d64d0d !important;
    transform: scale(1.02);
}

/* 8. Error Messages Wrapper (Spacing Fix) */
body.logged-out .woocommerce-notices-wrapper {
    width: 100%;
    max-width: 420px;
    margin-bottom: 1rem; /* Space between error and form */
}

/* 9. Layout Tightening */
body.logged-out .woocommerce-form-row {
    margin-bottom: 1rem !important;
}

/* Cart small device */

.is-small table.wc-block-cart-items .wc-block-cart-items__row {
    display: flex;
    flex-direction: column;
}

.is-small table.wc-block-cart-items .wc-block-cart-items__row img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    margin-bottom: 1rem !important;
}

/* =========================================
   WORDPRESS PAGE / GUTENBERG STYLES
   ========================================= */

/* 1. Base Typography & Spacing */
.wp-content {
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1.75;
    font-size: 1.125rem; /* 18px */
    max-width: 800px;    /* Optimizes reading width inside the 1200px container */
    margin: 0 auto;
}

/* 2. Paragraphs & Lists */
.wp-content p {
    margin-bottom: 1.5rem;
}

.wp-content ul, 
.wp-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.wp-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.wp-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

/* 3. Headings (Inside content) */
.wp-content h1, .wp-content h2, .wp-content h3, 
.wp-content h4, .wp-content h5, .wp-content h6 {
    color: inherit; /* Uses the dark/light color set in page.php */
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
}

.wp-content h2 { font-size: 2rem; }
.wp-content h3 { font-size: 1.75rem; }
.wp-content h4 { font-size: 1.5rem; }

/* 4. Links */
.wp-content a {
    color: #ec5b13; /* Primary Orange */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.2s;
}

.wp-content a:hover {
    color: #d64d0d;
    text-decoration: none;
}

/* 5. Blockquotes */
.wp-content blockquote {
    border-left: 4px solid #ec5b13;
    background-color: rgba(236, 91, 19, 0.05); /* Very light orange tint */
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    font-style: italic;
    border-radius: 0 12px 12px 0;
}

.wp-content blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ec5b13;
}

/* 6. Images & Figures */
.wp-content figure {
    margin: 2rem 0;
}

.wp-content img {
    border-radius: 12px;
    height: auto;
    max-width: 100%;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.wp-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    opacity: 0.7;
}

/* 7. Buttons (Gutenberg Blocks) */
.wp-block-button {
    margin-bottom: 1.5rem;
}

.wp-block-button__link {
    background-color: #ec5b13 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(236, 91, 19, 0.25);
    border: none !important;
    display: inline-block;
}

.wp-block-button__link:hover {
    background-color: #d64d0d !important;
    transform: translateY(-2px);
}

/* Outline Button Style */
.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #ec5b13 !important;
    color: #ec5b13 !important;
    box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
    background-color: #ec5b13 !important;
    color: #ffffff !important;
}

/* 8. Tables */
.wp-block-table {
    margin-bottom: 2rem;
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    display: block; /* Enables scrolling on small screens */
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th {
    background-color: #221610; /* Dark background for header */
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 1rem;
}

.wp-block-table td {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 1rem;
}

/* Dark mode overrides for Tables */
.dark .wp-block-table td {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* =========================================
   COMMENTS SECTION STYLES
   ========================================= */

/* 1. Comments Area Wrapper */
#comments {
    font-family: 'Be Vietnam Pro', sans-serif;
    color: #4b5563;
}

#comments h3 { /* "X Comments" Title */
    font-size: 1.5rem;
    font-weight: 800;
    color: #1b120d;
    margin-bottom: 2rem;
}

/* 2. The Comment List */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list li.comment {
    margin-bottom: 2rem;
    list-style: none;
}

/* 3. Individual Comment Body */
.comment-body {
    display: flex;
    gap: 1.25rem;
    position: relative;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f3ebe7;
}

/* 4. Avatar (User Image) */
.comment-body .avatar {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid #f3ebe7;
}

/* 5. Comment Content Wrapper */
.comment-meta {
    flex-grow: 1;
}

/* Author Name */
.comment-author cite {
    font-style: normal;
    font-weight: 800;
    font-size: 1rem;
    color: #1b120d;
    margin-right: 0.5rem;
}

.comment-author .says {
    display: none; /* Hides "says:" */
}

/* Date & Time */
.comment-metadata {
    display: inline-block;
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-metadata a {
    text-decoration: none;
    color: inherit;
}

/* The Comment Text */
.comment-content {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
}

/* 6. Reply Button */
.reply {
    margin-top: 0.5rem;
}

.comment-reply-link {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ec5b13; /* Primary Orange */
    text-decoration: none;
    border: 1px solid #ec5b13;
    padding: 4px 12px;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.comment-reply-link:hover {
    background-color: #ec5b13;
    color: #fff;
}

/* 7. Nested Comments (Replies) */
.children {
    list-style: none;
    padding-left: 0;
    margin-left: 3rem; /* Indent replies */
    margin-top: 2rem;
    border-left: 2px solid #f3ebe7; /* Vertical line guide */
}

.children li.comment {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem; /* Space from the vertical line */
}

/* 8. The "Leave a Reply" Form */
#respond {
    margin-top: 3rem;
    background: #fcf9f8; /* Light BG */
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid #f3ebe7;
}

#reply-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1b120d;
    margin-bottom: 1.5rem;
    display: block;
}

#reply-title small a {
    color: #ec5b13;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

/* Form Layout */
.comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.comment-notes, 
.logged-in-as {
    width: 100%;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

/* Input Fields Styling (Matching Contact Form) */
.comment-form p {
    margin-bottom: 0;
    width: 100%;
}

.comment-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1b120d;
    margin-bottom: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #ec5b13;
    box-shadow: 0 0 0 1px #ec5b13;
}

/* Two Column Layout for Name/Email */
.comment-form-author,
.comment-form-email {
    width: 100%;
}

@media (min-width: 768px) {
    .comment-form-author,
    .comment-form-email {
        width: calc(50% - 0.5rem); /* Side by side on desktop */
    }
}

/* Submit Button */
.form-submit {
    margin-top: 1rem;
}

.submit {
    background-color: #ec5b13;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit:hover {
    background-color: #d64d0d;
}

/* Dark Mode Overrides (Optional, if you use dark mode) */
.dark #respond {
    background-color: #2a1e17;
    border-color: #3a2820;
}

.dark #comments h3, 
.dark #reply-title, 
.dark .comment-author cite,
.dark .comment-form label {
    color: #ffffff;
}

.dark .comment-content,
.dark .comment-notes {
    color: #9ca3af;
}

.dark .comment-form input, 
.dark .comment-form textarea {
    background-color: #32241d;
    border-color: #3a2820;
    color: #ffffff;
}

/* =========================================
   HEADER SEARCH BAR FIXES
   ========================================= */

/* 1. Default: Hide on Mobile (Fixes the issue) */
#header-search-container {
    display: none;
}

/* 2. Desktop Only: Force visible on screens larger than 768px */
@media (min-width: 768px) {
    #header-search-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important; 
        max-width: 300px;
    }
}

/* 3. Force the Input Field to be visible and wide */
/* We only apply this when the parent is visible */
input.header-search-input {
    display: block !important;
    width: 100% !important;
    min-width: 150px !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 100% !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 4. Ensure the placeholder color stays correct */
input.header-search-input::placeholder {
    color: #9a664c !important;
    opacity: 1 !important;
}

/* Dark Mode Placeholder */
.dark input.header-search-input::placeholder {
    color: #ccb0a3 !important;
}


/* Mobile Menu Dynamic Links Styling */
.mobile-nav-wrapper ul li a {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500;    /* font-medium */
    color: #1b120d;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.mobile-nav-wrapper ul li a:hover {
    color: #ec5b13; /* Primary Orange */
}

/* Footer Menu Styling */
.footer-nav ul li a {
    color: #9ca3af; /* text-gray-400 */
    font-size: 0.875rem; /* text-sm */
    transition: color 0.2s;
    text-decoration: none;
}

.footer-nav ul li a:hover {
    color: #ec5b13; /* primary color */
}


/* --------------------------------------------------------- */
/* RESTORE DEFAULT DROPDOWNS                                 */
/* --------------------------------------------------------- */

/* Make sure the variations table is visible again */
table.variations {
    display: table !important; /* Restore table */
    width: 100%;
    margin-bottom: 20px;
    border: none;
}

/* Style the Labels (e.g., "Weight") */
table.variations label {
    font-weight: 800;
    color: #1b120d;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Style the Dropdown Select Box */
table.variations select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
    font-size: 16px;
    color: #1b120d;
    cursor: pointer;
}

/* Show the "Clear" link nicely */
a.reset_variations {
    display: inline-block !important;
    font-size: 12px;
    color: #ec5b13;
    margin-top: 5px;
    text-decoration: none;
}

/* --------------------------------------------------------- */
/* KEEP THE SIDE-BY-SIDE ADD TO CART LAYOUT                  */
/* --------------------------------------------------------- */

.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
}

/* Quantity Input Width */
.woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 100px !important;
    width: 100px !important;
    margin: 0 !important;
}

/* Add to Cart Button Width */
.woocommerce-variation-add-to-cart button.single_add_to_cart_button {
    flex-grow: 1 !important;
    width: auto !important;
    background-color: #ec5b13;
    color: white;
    border-radius: 0.75rem;
    font-weight: 700;
}

/* Ensure the button is visible */
.single_add_to_cart_button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Hide the Custom Grid & Fake Buttons we made */
.tj-variation-grid-wrapper, 
#tj_custom_atc, 
#tj_custom_atc_link {
    display: none !important;
}