.ov-table { width:100%; border-collapse: collapse; }
.ov-table th, .ov-table td { padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle; }
.ov-td-img img { border-radius:8px; display:block; }

.ov-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0.5em 0;
}

.ov-sku, .ov-unit {
	font-size:12px;
	opacity:.75;
}

.ov-qty-wrap { display:flex; gap:8px; align-items:center; }
.ov-qty-wrap input { width:70px; }
.ov-cart-summary { margin-top:12px; display:flex; justify-content:flex-end; gap:10px; }

.ov-btn {
    display: inline-flex;
    cursor: pointer;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 4px;
    text-decoration: none;
}

.ov-cart-actions a, .ov-btn[type="submit"] {
	font-weight: bold;
}

.ov-qty { display:flex; gap:8px; align-items:center; }
.ov-qty-btn { width:34px; height:34px; }
.ov-checkout .ov-field { margin-bottom:12px; }
.ov-checkout label { display:block; font-weight:600; margin-bottom:6px; }
.ov-checkout input, .ov-checkout textarea, .ov-checkout select { width:100%; max-width:520px; }

.ov-checkout-msg {
    text-align: center;
    opacity: 0.7;
    font-size: 80%;
    line-height: 1;
    margin: 10px auto;
}

.ov-disabled[disabled] { opacity: .6; cursor: not-allowed; }
.ov-external { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.ov-cta {
  display: flex;
  align-items: center;
}

.ov-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5em;
    width: 100%;
    height: 40px;
    padding: 6px;
    border-radius: 4px;
    border-width: 0;
	font-size: 14px;
    font-weight: bold;
    background-color: #ffffff;
    color: #86c442;
	border: 1px solid;
    cursor: pointer;
}

.ov-add-btn:is(:hover,:focus) {
    background-color: #181818;
}

.ov-stepper {
    /* Layout & Positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Sizing (Box Model) */
    width: 100%;
    height: 40px;
    overflow: clip;

    /* Visual Styling (Borders & Backgrounds) */
    background-color: #86c442;
    border-radius: 4px;

    /* Typography */
    color: #ffffff;
}

.ov-step {
	/* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Sizing */
    width: 40px;
    height: 40px;
    
    /* Visuals */
    background-color: #86c442;
    color: #ffffff;
    line-height: 1;
    
    /* Reset borders globally first */
    border: 0; 
    
    /* Optional: Add cursor pointer for better UX */
    cursor: pointer;
}

.ov-step.ov-dec {
    border-right: 2px solid #72ad33;
}

.ov-step.ov-inc {
    border-left: 2px solid #72ad33;
}

.ov-step:is(:hover,:focus) {
    background-color: #6ea433;
}

.ov-step-val {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 420px) {
	.ov-step-val:after {
		content: " in cart";
	}
}

.ov-add-btn[hidden], .ov-stepper[hidden] {
    display: none;
}

/* products Loop Area */
ul.ov-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

li.ov-product {
	display: flex;
    flex-direction: column;
    position: relative;
	background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 8px;
	text-align: center;
}

li.ov-product a {
    text-decoration: none;
    color: inherit;
}

.ov-thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}

.ov-thumb {
    position: relative;
}

.ov-badge-sale {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 4px 8px;
    background: #af0505;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 0;
}

.ov-cta-wrap {
    margin-top: auto;
}

.ov-price-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    line-height: 1;
}

.ov-price-sale, .ov-price-regular {
    font-size: 20px;
    font-weight: bold;
}

.ov-price-regular.strike {
    font-size: 16px;
    font-weight: normal;
    text-decoration: line-through;
}

.ov-price-sale {
    color: #b00504;
}

/* Cart Page CSS */
/* * OrderVia Cart Table Styles
 * Responsive and user-friendly design.
 * Card/Grid layout applied globally (Mobile layout preferred).
 */

/* --- General Table Styles (Card Layout Base) --- */
.ov-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 24px;
    font-size: 16px;
    color: #333;
    /* Reset table border/background for card view */
    border: none;
    background: transparent;
}

/* Hide Header globally */
.ov-table thead {
    display: none;
}

/* Rows -> Cards Container */
.ov-table tbody {
    display: block;
}

/* Individual Card Rows */
.ov-table tbody tr {
    display: grid;
    grid-template-areas:
        "image info remove"
        "image controls price";
    grid-template-columns: 80px 1fr auto; /* Fixed image width, flexible content, auto right */
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ov-table tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.ov-table td {
    display: block;
    padding: 0;
    border: none;
    vertical-align: middle;
}

/* --- Column Specifics via Grid Areas --- */

/* 1. Image Cell */
.ov-table td:nth-child(1) {
    grid-area: image;
}

.ov-td-img {
    width: 100%;
    text-align: center;
}

.ov-td-img img {
    border-radius: 6px;
    display: block;
    object-fit: cover;
    background-color: #f0f0f0;
    width: 80px;
    height: 80px;
}

/* 2. Info Cell (Title/SKU) */
.ov-table td:nth-child(2) {
    grid-area: info;
    align-self: center;
    padding-right: 10px;
}

.ov-title {
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #222;
}

.ov-sku {
    font-size: 0.85em;
    color: #888;
}

/* 3. Qty Cell */
.ov-table td:nth-child(3) {
    grid-area: controls;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Quantity Controls */
.ov-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
}

.ov-qty-wrap button {
    background: transparent;
    border: none;
    color: #555;
    width: 32px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    line-height: 1;
}

.ov-qty-wrap button:hover {
    background-color: #f0f0f0;
    color: #000;
}

.ov-qty-wrap input {
    width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    padding: 0;
    background: #fff;
    -moz-appearance: textfield; /* Firefox remove arrows */
    border-radius: 0;
}

/* Remove Arrows from Number Input */
.ov-qty-wrap input::-webkit-outer-spin-button,
.ov-qty-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ov-unit {
    margin: 0;
    font-size: 0.85em;
    color: #888;
}

/* 4. Subtotal Cell */
.ov-table td:nth-child(4) {
    grid-area: price;
    align-self: center;
    justify-self: end;
    font-weight: 700;
    font-size: 1.1em;
    color: #222;
}

/* 5. Remove Cell */
.ov-table td:nth-child(5) {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    margin-top: -4px; /* Slight visual alignment fix */
    margin-right: -8px; /* Pull slightly right */
}

/* Remove Button */
button[data-ov-remove] {
    background: transparent;
    border: 1px solid transparent;
    color: #ccc;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

button[data-ov-remove]:hover {
    color: #e53935; /* Red */
    background-color: rgba(229, 57, 53, 0.1);
}

/* --- Cart Summary & Actions --- */
.ov-cart-summary {
    background-color: #fcfcfc;
    border: 1px solid #e5e5e5;
    border-radius: 8px; /* Fully rounded since disconnected from table */
    padding: 16px 24px;
    text-align: right;
    font-size: 1.1em;
    margin-bottom: 20px;
}

.ov-cart-summary strong {
    margin-right: 12px;
    color: #555;
}

.ov-cart-summary span {
    font-weight: 700;
    color: #222;
}

/* Checkout Page CSS */
.ov-checkout .ov-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ov-cart-actions a, form.ov-checkout button {
    background: #86c442;
    color: #ffffff;
}

form.ov-checkout button:is(:hover,:focus) {
    opacity: 0.9;
}