/* ==========================================================================
Terea Express – WooCommerce overrides
========================================================================== */
/* ================================================================
NEW SHOP PAGE DESIGN - Clean Modern Layout
================================================================ */
/* Shop Hero Section */
.terea-shop-hero {
background: linear-gradient(135deg, #111111 0%, #1a1a1a 50%, #0a0a0a 100%);
color: #fff;
padding: 48px 20px 32px;
position: relative;
overflow: hidden;
}
.terea-shop-hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.terea-shop-hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.terea-shop-hero-content {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.terea-shop-hero-text {
max-width: 600px;
}
.terea-shop-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.terea-shop-hero-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 800;
margin: 0 0 12px;
line-height: 1.2;
letter-spacing: -0.02em;
}
.terea-shop-hero-desc {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
margin: 0;
}
.terea-shop-hero-perks {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 28px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.terea-perk-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
opacity: 0.95;
}
.terea-perk-item svg {
flex-shrink: 0;
opacity: 0.9;
}
/* Shop Container */
.terea-shop-container {
max-width: 1400px;
margin: 0 auto;
padding: 24px 20px 64px;
min-width: 0;
overflow-x: clip;
}
/* Category Chips — single-row horizontal scroll */
.terea-category-chips-wrap {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 4px 0 8px;
}
.terea-category-chips {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 16px 4px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.terea-category-chips::-webkit-scrollbar { display: none; }
.terea-category-chips-wrap.is-scrollable::before,
.terea-category-chips-wrap.is-scrollable::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 36px;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.2s ease;
}
.terea-category-chips-wrap.is-scrollable::before {
left: 0;
background: linear-gradient(90deg, #fff 20%, transparent);
}
.terea-category-chips-wrap.is-scrollable::after {
right: 0;
background: linear-gradient(270deg, #fff 20%, transparent);
}
.terea-category-chips-wrap.can-scroll-left::before,
.terea-category-chips-wrap.can-scroll-right::after {
opacity: 1;
}
.terea-category-chips-scroll {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #fff;
color: #334155;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.terea-category-chips-scroll:hover {
background: var(--tx-primary, #111111);
border-color: var(--tx-primary, #111111);
color: #fff;
}
.terea-category-chips-scroll--prev { left: 0; }
.terea-category-chips-scroll--next { right: 0; }
.terea-category-chips-wrap.is-scrollable .terea-category-chips {
padding-left: 40px;
padding-right: 40px;
}
.terea-category-chips .terea-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: #fff;
border: 1.5px solid #e8eaed;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: #475569;
white-space: nowrap;
text-decoration: none;
scroll-snap-align: start;
transition: all 0.2s ease;
}
.terea-category-chips .terea-chip:hover {
border-color: var(--tx-primary, #e11d2e);
color: #0f172a;
}
.terea-category-chips .terea-chip.active {
background: var(--tx-primary, #111111);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 12px color-mix(in srgb, var(--tx-primary, #111111) 30%, transparent);
}
.terea-category-chips .terea-chip-count {
font-size: 12px;
padding: 2px 8px;
background: rgba(0, 0, 0, 0.08);
border-radius: 999px;
}
.terea-category-chips .terea-chip.active .terea-chip-count {
background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 760px) {
.terea-category-chips-scroll { display: none; }
.terea-category-chips-wrap.is-scrollable .terea-category-chips {
padding-left: 4px;
padding-right: 4px;
}
}
/* Shop Layout */
.terea-shop-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 28px;
margin-top: 24px;
align-items: start;
width: 100%;
max-width: 100%;
overflow: visible;
}
/* Filters Sidebar */
.terea-filters-sidebar {
background: #fff;
border: 1px solid #e8eaed;
border-radius: 16px;
padding: 0;
position: sticky;
top: calc(var(--tx-header-offset, 120px) + 12px);
overflow-y: auto;
}
.terea-filters-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 16px;
border-bottom: 1px solid #e8eaed;
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.terea-filters-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.terea-filters-title svg { color: #e11d2e; }
.terea-filters-close {
display: none;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: none;
border-radius: 10px;
cursor: pointer;
color: #64748b;
transition: all 0.2s ease;
}
.terea-filters-close:hover {
background: #e2e8f0;
color: #0f172a;
}
/* Filter Sections */
.terea-filter-section {
padding: 20px;
border-bottom: 1px solid #f1f5f9;
}
.terea-filter-section:last-child { border-bottom: none; }
.terea-filter-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #0f172a;
margin: 0 0 14px;
}
.terea-filter-section-title svg { color: #e11d2e; }
.terea-filter-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.terea-filter-list li a,
.terea-filter-list li label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
color: #475569;
transition: all 0.15s ease;
cursor: pointer;
}
.terea-filter-list li a:hover,
.terea-filter-list li.active a,
.terea-filter-list li label:hover {
background: #f6f6f6;
color: #0f172a;
}
.terea-filter-list li.active a {
background: rgba(20, 184, 166, 0.1);
color: #e11d2e;
font-weight: 600;
}
.terea-filter-count {
font-size: 12px;
padding: 2px 8px;
background: #f1f5f9;
border-radius: 999px;
color: #64748b;
}
.terea-filter-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.terea-filter-badge--green {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.terea-filter-badge--red {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
/* Checkbox Filter */
.terea-filter-list--checkboxes li {
position: relative;
}
.terea-checkbox-label {
display: flex !important;
align-items: center;
gap: 10px;
cursor: pointer;
}
.terea-checkbox-label input {
display: none;
}
.terea-checkbox-custom {
width: 18px;
height: 18px;
border: 2px solid #e2e8f0;
border-radius: 4px;
flex-shrink: 0;
position: relative;
transition: all 0.15s ease;
}
.terea-checkbox-label input:checked + .terea-checkbox-custom {
background: #e11d2e;
border-color: #e11d2e;
}
.terea-checkbox-label input:checked + .terea-checkbox-custom::after {
content: '';
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
/* Price Filter Form */
.terea-price-filter-form { display: flex; flex-direction: column; gap: 12px; }
.terea-price-inputs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.terea-price-input-group {
flex: 1;
min-width: 100px;
}
.terea-price-label {
display: block;
font-size: 10px;
font-weight: 700;
color: #64748b;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.terea-price-input-wrap {
display: flex;
align-items: center;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.terea-price-input-wrap:focus-within { border-color: #e11d2e; }
.terea-price-currency {
padding: 8px 6px 8px 10px;
font-size: 11px;
font-weight: 700;
color: #64748b;
background: #f1f5f9;
border-right: 1px solid #e2e8f0;
}
.terea-price-input-wrap input {
flex: 1;
border: none;
padding: 8px 10px 8px 6px;
font-size: 13px;
font-weight: 600;
color: #0f172a;
background: transparent;
width: 100%;
min-width: 0;
}
.terea-price-input-wrap input:focus { outline: none; }
.terea-price-divider { color: #94a3b8; font-weight: 600; flex-shrink: 0; font-size: 12px; }
.terea-price-filter-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: linear-gradient(135deg, #e11d2e 0%, var(--tx-accent) 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.terea-price-filter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}
/* Reassurance Box */
.terea-filter-reassurance {
padding: 20px;
background: #f8fafc;
border-radius: 0 0 16px 16px;
}
.terea-reassurance-box {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
}
.terea-reassurance-box:not(:last-child) { border-bottom: 1px solid #e2e8f0; }
.terea-reassurance-box svg { color: #e11d2e; flex-shrink: 0; margin-top: 2px; }
.terea-reassurance-box strong {
display: block;
font-size: 13px;
font-weight: 700;
color: #0f172a;
margin-bottom: 2px;
}
.terea-reassurance-box span { font-size: 12px; color: #64748b; }
/* Products Area */
.terea-products-area { min-width: 0; }
/* Products Toolbar */
.terea-products-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: #fff;
border: 1px solid #e8eef2;
border-radius: 14px;
margin-bottom: 22px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.terea-products-toolbar .woocommerce-ordering,
.terea-toolbar-actions .woocommerce-ordering {
margin: 0;
}
.terea-products-toolbar .woocommerce-ordering select {
min-height: 42px;
padding: 8px 36px 8px 14px;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
background: #fff;
font-size: 13px;
font-weight: 600;
color: #0f172a;
cursor: pointer;
}
.terea-products-toolbar .woocommerce-result-count {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #64748b;
}
.terea-filter-toggle {
display: none;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: all 0.2s ease;
}
.terea-filter-toggle:hover {
border-color: #e11d2e;
color: #0f172a;
}
.terea-toolbar-info {
flex: 1;
font-size: 14px;
color: #64748b;
}
.terea-toolbar-actions { display: flex; align-items: center; gap: 12px; }
/* Products Grid - wrapper is a block; the UL is the 4-column grid */
.terea-products-area {
min-width: 0;
width: 100%;
}
.terea-products-grid,
.archive-product-main .terea-products-grid {
display: contents !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
grid-template-columns: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
ul.products::before,
ul.products::after,
.terea-products-grid ul.products::before,
.terea-products-grid ul.products::after {
content: none !important;
display: none !important;
}
.terea-products-grid ul.products,
.terea-products-grid ul.products.columns-2,
.terea-products-grid ul.products.columns-3,
.terea-products-grid ul.products.columns-4,
.archive-product-main ul.products,
.woocommerce ul.products,
ul.products,
.terea-shop-content ul.products,
.terea-wc-container ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
align-items: stretch !important;
}
@media (max-width: 1100px) {
.terea-products-grid ul.products,
.terea-products-grid ul.products.columns-2,
.terea-products-grid ul.products.columns-3,
.terea-products-grid ul.products.columns-4,
.archive-product-main ul.products,
.woocommerce ul.products,
ul.products,
.terea-shop-content ul.products,
.terea-wc-container ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
}
@media (max-width: 820px) {
.terea-products-grid ul.products,
.terea-products-grid ul.products.columns-2,
.terea-products-grid ul.products.columns-3,
.terea-products-grid ul.products.columns-4,
.archive-product-main ul.products,
.woocommerce ul.products,
ul.products,
.terea-shop-content ul.products,
.terea-wc-container ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
}
@media (max-width: 768px) {
.wh-archive-main ul.products,
.wh-archive-main .terea-products-list,
.i3d-archive ul.products,
.archive-product-main ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
.terea-products-grid .terea-no-products {
grid-column: unset;
width: 100%;
}
/* Product Card - Square media, modern shop UI */
.terea-products-grid ul.products > li,
.terea-products-grid ul.products > li.product,
ul.products > li,
ul.products > li.product,
ul.products > article.terea-product-card,
.terea-product-card-wrap,
.terea-product-card {
background: #ffffff !important;
border: 1px solid var(--tx-border) !important;
border-radius: 18px !important;
overflow: hidden !important;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
float: none !important;
clear: none !important;
list-style: none !important;
min-width: 0 !important;
box-shadow: var(--tx-shadow-sm) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
position: relative !important;
}
.terea-product-card-wrap > .terea-product-card {
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
ul.products > li:hover,
ul.products > li.product:hover,
ul.products > article.terea-product-card:hover,
.terea-product-card-wrap:hover,
.terea-product-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--tx-shadow-lg) !important;
border-color: color-mix(in srgb, var(--tx-primary) 35%, var(--tx-border)) !important;
}
/* Product Card Media — always square */
.terea-product-card-media-wrap {
position: relative;
width: 100%;
}
.terea-products-grid .terea-product-card-media,
ul.products .terea-product-card-media,
.terea-product-card-media {
position: relative;
display: block !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
overflow: hidden;
background: linear-gradient(180deg, var(--tx-primary-50) 0%, #ffffff 72%) !important;
}
.terea-product-card-quick {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.terea-product-card-quick:hover,
.terea-product-card-quick:focus-visible {
transform: scale(1.08);
background: var(--tx-accent, #c8102e);
color: #fff;
outline: none;
}
ul.products .terea-product-card-media img,
ul.products > li .terea-product-card-media img,
ul.products > li img.attachment-terea-card,
ul.products li.product .terea-product-card-media img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center center !important;
padding: 20px !important;
background: #fff !important;
display: block !important;
margin: 0 !important;
border-radius: 12px !important;
transform: none !important;
transition: opacity 0.25s ease !important;
}
ul.products > li:hover .terea-product-card-media img,
ul.products > li.product:hover .terea-product-card-media img,
.terea-product-card:hover .terea-product-card-media img {
transform: none !important;
}
/* Badge positioning on full-width media */
ul.products .terea-product-badge {
top: 10px;
left: 10px;
right: auto;
width: auto;
max-width: calc(100% - 20px);
padding: 6px 10px;
font-size: 11px;
border-radius: 999px;
white-space: nowrap;
z-index: 3;
}
ul.products .terea-product-badge--hot {
left: auto;
right: 10px;
}
/* Product Badges */
.terea-product-badge {
position: absolute;
top: 10px;
left: 10px;
right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: calc(100% - 20px);
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
z-index: 3;
white-space: nowrap;
line-height: 1;
pointer-events: none;
}
.terea-product-badge--sale {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.terea-product-tag {
position: absolute;
bottom: auto;
top: 10px;
right: 10px;
left: auto;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
color: var(--tx-primary-2);
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.85);
}
/* Product Card Body */
.terea-product-card-body {
padding: 14px 16px 16px !important;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-height: 0;
}
.terea-product-card-category {
display: inline-flex !important;
align-self: flex-start;
position: relative;
z-index: 2;
font-size: 10.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--tx-primary) !important;
background: var(--tx-primary-50) !important;
padding: 4px 10px !important;
border-radius: 999px !important;
text-decoration: none !important;
line-height: 1.2 !important;
}
.terea-product-card-category:hover {
background: var(--tx-primary) !important;
color: #fff !important;
}
.terea-product-card-title {
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 0 !important;
min-height: calc(1.35em * 3);
}
.terea-product-card-title a {
color: #0f172a !important;
text-decoration: none !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.terea-product-card-title a:hover {
color: var(--tx-primary) !important;
}
/* Rating */
.terea-product-rating {
display: flex !important;
align-items: center;
gap: 6px;
font-size: 12px;
min-height: 18px;
}
.terea-stars {
display: flex;
gap: 2px;
}
.terea-star {
color: #e2e8f0;
}
.terea-star.is-filled {
color: var(--tx-accent);
}
.terea-product-rating-text {
font-weight: 700;
color: #0f172a;
}
.terea-product-rating-count {
color: #94a3b8;
font-size: 11px;
}
/* Price */
.terea-product-card-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: auto;
padding-top: 4px;
min-height: 2.6em;
}
.terea-product-card-actions {
margin-top: 4px;
position: relative;
z-index: 2;
}
.terea-product-card-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.terea-product-card-price .price,
.terea-product-card-price .price-sale,
.terea-product-card-price .price-regular {
font-family: var(--tx-font-heading);
font-size: 17px;
font-weight: 800;
color: var(--tx-primary);
line-height: 1.2;
}
.terea-product-card-price del {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
}
.terea-product-card-price ins {
text-decoration: none;
}
.price-save {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
font-size: 11px;
font-weight: 800;
color: #15803d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
padding: 4px 10px;
border-radius: 999px;
line-height: 1.2;
white-space: nowrap;
}
.price-save-label {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 10px;
opacity: 0.9;
}
.price-save-amount,
.price-save-amount .woocommerce-Price-amount,
.price-save-amount .amount {
font-weight: 800;
color: inherit;
font-size: 11px;
}
.price-save-amount .woocommerce-Price-currencySymbol {
margin-inline: 0 1px;
}
/* Add to Cart Button */
.terea-quick-add-form {
margin-top: 4px;
}
.terea-quick-add-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 11px 16px;
background: var(--tx-primary);
color: #fff;
border: none;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.22s ease;
text-decoration: none;
box-shadow: 0 6px 16px color-mix(in srgb, var(--tx-primary) 28%, transparent);
}
.terea-quick-add-btn:hover {
transform: translateY(-1px);
background: var(--tx-primary-2);
box-shadow: 0 10px 22px color-mix(in srgb, var(--tx-primary) 36%, transparent);
color: #fff;
}
.terea-quick-add-btn--select {
background: #fff;
color: var(--tx-primary);
border: 1.5px solid var(--tx-primary);
box-shadow: none;
}
.terea-quick-add-btn--select:hover {
background: var(--tx-primary);
color: #fff;
border-color: var(--tx-primary);
}
.terea-quick-add-btn--disabled {
background: #f1f5f9;
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
}
/* Product Badges */
.terea-product-badge {
position: absolute;
top: 10px;
left: 10px;
right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: calc(100% - 20px);
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
z-index: 3;
white-space: nowrap;
line-height: 1;
pointer-events: none;
}
.terea-product-badge--sale {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.terea-product-tag {
position: absolute;
bottom: auto;
top: 10px;
right: 10px;
left: auto;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
color: var(--tx-primary-2);
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.85);
}
/* Sale Badge Override */
.woocommerce span.onsale,
ul.products li span.onsale {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 5px 10px !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
min-width: auto !important;
min-height: auto !important;
}
/* No Products */
.terea-no-products {
text-align: center;
padding: 80px 20px;
background: #fff;
border: 1px dashed #e2e8f0;
border-radius: 16px;
grid-column: 1 / -1;
}
.terea-no-products svg { color: #cbd5e1; margin-bottom: 20px; }
.terea-no-products h3 {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px;
}
.terea-no-products p { font-size: 14px; color: #64748b; margin: 0 0 24px; }
.terea-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #e11d2e 0%, var(--tx-accent) 100%);
color: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
transition: all 0.2s ease;
}
.terea-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
}
/* Filter Backdrop */
.terea-filters-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
opacity: 0;
transition: opacity 0.3s ease;
}
.terea-filters-backdrop.is-open {
display: block;
opacity: 1;
}
/* ================================================================
END NEW SHOP PAGE DESIGN
================================================================ */
/* Shop wrapper */
.terea-wc-container { padding-top: 16px; padding-bottom: 64px; }
/* Archive grid */
.terea-shop-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
margin-top: 24px;
}
.terea-shop-sidebar .widget {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 18px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.terea-shop-sidebar .widget-title {
font-family: var(--tx-font-heading);
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tx-primary);
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--tx-border);
}
.terea-shop-sidebar .widget-title svg { color: var(--tx-accent); flex-shrink: 0; }
.terea-filter-list,
.terea-filter-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.terea-filter-list { display: flex; flex-direction: column; gap: 2px; }
.terea-filter-sublist {
display: flex;
flex-direction: column;
gap: 0;
margin: 4px 0 6px 14px;
padding-left: 14px;
border-left: 1.5px solid var(--tx-border);
}
.terea-filter-list > li > a,
.terea-filter-sublist > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--tx-text);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.terea-filter-list > li > a:hover,
.terea-filter-sublist > li > a:hover {
background: var(--tx-bg-soft);
color: var(--tx-accent-2);
}
.terea-filter-list > li.is-active > a,
.terea-filter-sublist > li.is-active > a {
background: var(--tx-primary);
color: #fff;
font-weight: 700;
}
.terea-filter-list > li.is-active > a .terea-filter-count,
.terea-filter-sublist > li.is-active > a .terea-filter-count {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.terea-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 8px;
background: var(--tx-bg-soft);
color: var(--tx-muted);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
/* Reassurance panel at bottom of sidebar */
.terea-filter-reassurance {
background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%) !important;
border-color: rgba(200, 16, 46, 0.2) !important;
}
.terea-reassurance-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.terea-reassurance-item:last-child { border-bottom: 0; }
.terea-reassurance-item svg {
color: var(--tx-accent);
flex-shrink: 0;
margin-top: 2px;
}
.terea-reassurance-item strong {
display: block;
color: var(--tx-primary);
font-size: 13px;
font-weight: 700;
margin-bottom: 2px;
}
.terea-reassurance-item span {
color: var(--tx-muted);
font-size: 12px;
line-height: 1.4;
}
.woocommerce-products-header { margin-bottom: 8px; }
.woocommerce-products-title { color: var(--tx-primary); }
/* Toolbar */
.woocommerce-result-count, .woocommerce-ordering { margin-bottom: 16px; font-size: 14px; color: var(--tx-muted); }
.woocommerce-ordering select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--tx-border); }
/* Single product */
.terea-single-product-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
margin-top: 16px;
}
.terea-single-gallery { background: var(--tx-bg-soft); border-radius: var(--tx-radius-lg); padding: 24px; }
.terea-single-cats {
font-size: 13px;
color: var(--tx-accent-2);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
margin-bottom: 8px;
}
.terea-single-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
margin: 0 0 8px;
color: var(--tx-primary);
}
.terea-single-rating { color: var(--tx-accent); margin-bottom: 16px; }
.terea-single-price {
font-size: 1.6rem;
color: var(--tx-primary);
margin: 12px 0;
font-weight: 700;
}
.terea-single-price del { color: var(--tx-muted); margin-right: 8px; }
.terea-single-short { color: var(--tx-muted); margin-bottom: 24px; }
.single_add_to_cart_button {
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #fff;
padding: 14px 28px;
border-radius: var(--tx-radius);
border: none;
font-weight: 700;
cursor: pointer;
transition: var(--tx-transition);
box-shadow: 0 6px 18px -8px rgba(17, 17, 17, 0.55);
}
.single_add_to_cart_button:hover {
background: linear-gradient(135deg, var(--tx-primary-2) 0%, var(--tx-primary-3) 100%);
box-shadow: 0 10px 22px -8px rgba(17, 17, 17, 0.65);
transform: translateY(-1px);
}
.terea-single-summary .quantity { margin-bottom: 16px; }
.terea-single-summary .quantity input {
width: 80px;
padding: 10px;
border: 1px solid var(--tx-border);
border-radius: 8px;
font-size: 16px;
}
/* Tabs */
.woocommerce-tabs {
margin-top: 48px;
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 24px;
}
.woocommerce-tabs ul.tabs {
list-style: none;
display: flex;
gap: 16px;
padding: 0;
margin: 0 0 16px;
border-bottom: 1px solid var(--tx-border);
}
.woocommerce-tabs ul.tabs li a {
display: block;
padding: 8px 12px;
font-weight: 600;
color: var(--tx-muted);
border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
color: var(--tx-primary);
border-color: var(--tx-accent);
}
/* Related / upsells */
.related.products, .upsells.products {
margin-top: 48px;
}
.related h2, .upsells h2 {
text-align: center;
color: var(--tx-primary);
margin-bottom: 24px;
}
/* Cart */
.terea-cart-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
margin-top: 24px;
}
.terea-cart-form, .terea-cart-totals {
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 24px;
}
.woocommerce-cart-form__contents {
width: 100%;
border-collapse: collapse;
}
.woocommerce-cart-form__contents th {
text-align: left;
font-size: 13px;
text-transform: uppercase;
color: var(--tx-muted);
padding: 8px 12px;
border-bottom: 1px solid var(--tx-border);
}
.woocommerce-cart-form__contents td {
padding: 16px 12px;
border-bottom: 1px solid var(--tx-border);
vertical-align: middle;
}
.product-remove .remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--tx-bg-soft);
color: var(--tx-danger);
font-size: 18px;
line-height: 1;
}
.product-thumbnail img { max-width: 80px; border-radius: 6px; }
.product-name a { font-weight: 600; color: var(--tx-primary); }
.product-quantity input.qty { width: 70px; padding: 6px; border: 1px solid var(--tx-border); border-radius: 6px; }
.cart_totals table { width: 100%; }
.cart_totals th, .cart_totals td { padding: 8px 0; }
.cart_totals th { text-align: left; color: var(--tx-muted); font-weight: 500; }
.cart_totals td { text-align: right; font-weight: 600; }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 18px; color: var(--tx-primary); }
.checkout-button {
display: block;
width: 100%;
margin-top: 16px;
padding: 14px;
background: var(--tx-accent);
color: #fff;
text-align: center;
border-radius: var(--tx-radius);
font-weight: 600;
}
.checkout-button:hover { background: var(--tx-accent-2); }
.coupon input { padding: 8px 12px; border: 1px solid var(--tx-border); border-radius: 6px; }
/* Checkout - WooCommerce form inputs */
.woocommerce form .form-row label { font-weight: 600; color: var(--tx-primary); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
padding: 10px 12px;
border: 1px solid var(--tx-border);
border-radius: 8px;
width: 100%;
font-size: 14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--tx-primary);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}
/* ==========================================================================
My Account ? Terea Express Custom Styles
========================================================================== */
/* Wrapper */
.terea-myaccount-wrapper {
padding-top: 24px;
padding-bottom: 64px;
}
.terea-myaccount-main .site-main {
padding: 0;
}
/* Grid layout */
.terea-myaccount-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 32px;
align-items: start;
margin-top: 24px;
}
/* ---- Account Sidebar ---- */
.terea-account-sidebar {
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
overflow: hidden;
position: sticky;
top: 88px;
box-shadow: var(--tx-shadow);
}
.terea-account-user {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 20px;
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.terea-account-avatar {
flex-shrink: 0;
}
.terea-account-avatar img {
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
object-fit: cover;
display: block;
}
.terea-account-user-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
overflow: hidden;
}
.terea-account-greeting {
font-size: 11px;
color: rgba(255,255,255,0.6);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.terea-account-name {
font-size: 15px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Account navigation menu */
.woocommerce-MyAccount-navigation {
padding: 8px 0 16px;
}
.terea-account-menu {
list-style: none;
margin: 0;
padding: 0;
}
.terea-account-menu-item {
margin: 0;
}
.terea-account-menu-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
font-size: 14px;
font-weight: 500;
color: var(--tx-text);
border-left: 3px solid transparent;
transition: all 0.15s ease;
}
.terea-account-menu-item a:hover {
background: var(--tx-bg-soft);
color: var(--tx-primary);
border-left-color: var(--tx-border);
}
.terea-account-menu-item.is-active a,
.terea-account-menu-item a[aria-current="page"] {
background: rgba(200, 16, 46, 0.08);
color: var(--tx-accent-2);
font-weight: 600;
border-left-color: var(--tx-accent);
}
.terea-menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: currentColor;
opacity: 0.6;
width: 20px;
height: 20px;
}
.terea-account-menu-item.is-active .terea-menu-icon,
.terea-account-menu-item a[aria-current="page"] .terea-menu-icon {
opacity: 1;
color: var(--tx-accent-2);
}
.terea-menu-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.terea-logout-link {
color: var(--tx-danger) !important;
}
.terea-logout-link .terea-menu-icon { color: var(--tx-danger); }
.terea-logout-link:hover {
background: rgba(220, 38, 38, 0.06) !important;
border-left-color: var(--tx-danger) !important;
}
/* Divider before logout */
.terea-account-menu li:last-child { border-top: 1px solid var(--tx-border); margin-top: 6px; }
/* ---- Account Content ---- */
.woocommerce-MyAccount-content {
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 28px;
box-shadow: var(--tx-shadow);
}
/* Page title header inside content area */
.terea-account-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 2px solid var(--tx-border);
}
.terea-account-page-title {
font-size: 20px;
font-weight: 700;
color: var(--tx-primary);
margin: 0;
}
.terea-account-page-desc {
font-size: 13px;
color: var(--tx-muted);
margin: -16px 0 24px;
padding-bottom: 20px;
border-bottom: 2px solid var(--tx-border);
}
/* ---- Dashboard ---- */
.terea-dashboard {}
.terea-dashboard-welcome {
display: flex;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, rgba(200,16,46,0.08), rgba(200,16,46,0.04));
border: 1px solid rgba(200,16,46,0.2);
border-radius: var(--tx-radius);
margin-bottom: 24px;
}
.terea-dashboard-welcome-icon {
width: 48px;
height: 48px;
background: var(--tx-accent);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.terea-dashboard-welcome-text { flex: 1; }
.terea-dashboard-greeting {
font-size: 15px;
margin: 0 0 4px;
color: var(--tx-primary);
}
.terea-dashboard-greeting strong { color: var(--tx-primary); }
.terea-logout-inline {
color: var(--tx-danger);
font-size: 13px;
margin-left: 8px;
font-weight: 500;
}
.terea-logout-inline:hover { text-decoration: underline; }
.terea-dashboard-subtext {
font-size: 13px;
color: var(--tx-muted);
margin: 0;
line-height: 1.6;
}
.terea-dashboard-subtext a { color: var(--tx-accent-2); text-decoration: underline; }
/* Stats cards */
.terea-dashboard-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 8px;
}
.terea-stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.terea-stat-card--action {
text-decoration: none;
cursor: pointer;
}
.terea-stat-card--action:hover {
border-color: var(--tx-accent);
box-shadow: 0 4px 12px rgba(200,16,46,0.15), 0 0 0 3px rgba(200,16,46,0.08);
transform: translateY(-1px);
}
.terea-stat-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(200,16,46,0.1);
color: var(--tx-accent-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.terea-stat-card--action .terea-stat-icon {
background: var(--tx-bg-soft);
color: var(--tx-primary);
}
.terea-stat-card--action:hover .terea-stat-icon {
background: rgba(200,16,46,0.12);
color: var(--tx-accent-2);
}
.terea-stat-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.terea-stat-number {
font-size: 22px;
font-weight: 800;
color: var(--tx-primary);
line-height: 1.1;
}
.terea-stat-label {
font-size: 13px;
color: var(--tx-muted);
font-weight: 500;
}
.terea-stat-arrow {
font-size: 18px;
color: var(--tx-muted);
margin-left: auto;
flex-shrink: 0;
}
.terea-stat-card--action:hover .terea-stat-arrow { color: var(--tx-accent-2); }
/* ---- Orders ---- */
.terea-orders-section {}
.terea-orders-table-wrapper {
overflow-x: auto;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
margin: 16px 0 24px;
}
.woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.woocommerce-orders-table thead tr {
background: var(--tx-bg-soft);
border-bottom: 2px solid var(--tx-border);
}
.woocommerce-orders-table th {
text-align: left;
padding: 12px 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tx-muted);
white-space: nowrap;
}
.woocommerce-orders-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--tx-border);
vertical-align: middle;
color: var(--tx-text);
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: none; }
.woocommerce-orders-table tbody tr:hover td {
background: rgba(200,16,46,0.03);
}
.terea-order-number {
font-weight: 700;
color: var(--tx-primary);
text-decoration: none;
}
.terea-order-number:hover { color: var(--tx-accent-2); text-decoration: underline; }
.terea-order-total { font-weight: 600; color: var(--tx-primary); }
/* Status badges */
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.status-badge--pending {
background: rgba(107,114,128,0.1);
color: #6b7280;
}
.status-badge--processing {
background: rgba(59,130,246,0.1);
color: #2563eb;
}
.status-badge--onhold {
background: rgba(200,16,46,0.12);
color: var(--tx-accent-2);
}
.status-badge--completed {
background: rgba(22,163,74,0.1);
color: var(--tx-success);
}
.status-badge--cancelled {
background: rgba(220,38,38,0.08);
color: var(--tx-danger);
}
.status-badge--refunded {
background: rgba(107,114,128,0.1);
color: #6b7280;
}
.status-badge--failed {
background: rgba(220,38,38,0.08);
color: var(--tx-danger);
}
/* Order detail */
.terea-order-detail-meta-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding: 12px 16px;
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
}
.terea-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--tx-text);
}
.terea-meta-sep {
color: var(--tx-border);
font-weight: 300;
}
.terea-order-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px;
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
margin-bottom: 24px;
}
.terea-order-detail-title {
font-size: 20px;
font-weight: 700;
color: var(--tx-primary);
margin: 0 0 4px;
}
.terea-order-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--tx-muted);
margin: 0;
}
.terea-order-number { font-weight: 700; color: var(--tx-primary); font-size: 15px; }
.terea-order-notes {
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
padding: 20px;
margin-bottom: 24px;
}
.terea-order-notes-title {
font-size: 14px;
font-weight: 700;
color: var(--tx-primary);
margin: 0 0 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.woocommerce-OrderUpdates { padding: 0; margin: 0; list-style: none; }
.woocommerce-OrderUpdate {
padding: 12px 0;
border-bottom: 1px solid var(--tx-border);
}
.woocommerce-OrderUpdate:last-child { border-bottom: none; }
.woocommerce-OrderUpdate-meta {
font-size: 12px;
color: var(--tx-muted);
margin: 0 0 6px;
font-weight: 600;
}
.woocommerce-OrderUpdate-description { font-size: 14px; color: var(--tx-text); margin: 0; }
/* ---- Buttons ---- */
.terea-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: var(--tx-radius);
font-weight: 600;
font-size: 14px;
text-decoration: none;
cursor: pointer;
border: none;
transition: var(--tx-transition);
white-space: nowrap;
}
.terea-btn--primary {
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #fff;
box-shadow: 0 6px 16px -8px rgba(17, 17, 17, 0.55);
}
.terea-btn--primary:hover {
background: linear-gradient(135deg, var(--tx-primary-2) 0%, var(--tx-primary-3) 100%);
color: #fff;
box-shadow: 0 10px 22px -8px rgba(17, 17, 17, 0.65);
}
.terea-btn--outline {
background: transparent;
border: 1px solid var(--tx-border);
color: var(--tx-primary);
}
.terea-btn--outline:hover {
border-color: var(--tx-primary);
background: var(--tx-primary);
color: #fff;
}
.terea-btn--danger {
background: transparent;
border: 1px solid rgba(220,38,38,0.3);
color: var(--tx-danger);
}
.terea-btn--danger:hover {
background: var(--tx-danger);
color: #fff;
border-color: var(--tx-danger);
}
.terea-btn--sm { padding: 7px 14px; font-size: 13px; }
.woocommerce-button.button {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: var(--tx-radius);
font-weight: 600;
font-size: 14px;
text-decoration: none;
background: var(--tx-primary);
color: #fff;
border: none;
transition: var(--tx-transition);
cursor: pointer;
}
.woocommerce-button.button:hover {
background: var(--tx-accent);
color: #fff;
}
.woocommerce-pagination {
display: flex;
gap: 12px;
margin-top: 16px;
}
/* ---- Empty states ---- */
.terea-empty-state {
text-align: center;
padding: 56px 24px;
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
}
.terea-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
background: rgba(200,16,46,0.1);
color: var(--tx-accent-2);
display: flex;
align-items: center;
justify-content: center;
}
.terea-empty-title {
font-size: 20px;
font-weight: 700;
color: var(--tx-primary);
margin: 0 0 8px;
}
.terea-empty-desc {
color: var(--tx-muted);
font-size: 14px;
max-width: 400px;
margin: 0 auto 24px;
}
/* ---- Forms ---- */
.terea-form-card {
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
overflow: hidden;
}
.terea-form-card-header {
padding: 24px 28px;
border-bottom: 1px solid var(--tx-border);
background: var(--tx-bg-soft);
display: flex;
align-items: center;
gap: 14px;
}
.terea-form-card-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(200,16,46,0.1);
color: var(--tx-accent-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.terea-form-card-title {
font-size: 18px;
font-weight: 700;
color: var(--tx-primary);
margin: 0;
}
.terea-form-card-subtitle {
font-size: 13px;
color: var(--tx-muted);
margin: 4px 0 0;
}
.terea-form-card form {
padding: 24px 28px;
}
.woocommerce form .form-row {
margin-bottom: 18px;
}
.woocommerce form .form-row label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--tx-primary);
margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--tx-danger); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--tx-border);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
color: var(--tx-text);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--tx-accent);
box-shadow: 0 0 0 3px rgba(200,16,46,0.15);
outline: none;
}
.woocommerce form .form-row input[aria-invalid="true"],
.woocommerce form .form-row textarea[aria-invalid="true"] {
border-color: var(--tx-danger);
}
.woocommerce form .form-row input[disabled] {
background: var(--tx-bg-soft);
cursor: not-allowed;
}
.terea-form-hint {
display: block;
font-size: 12px;
color: var(--tx-muted);
margin-top: 4px;
}
.woocommerce form fieldset {
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
padding: 20px;
margin: 8px 0 24px;
}
.woocommerce form fieldset legend {
font-size: 13px;
font-weight: 700;
color: var(--tx-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 8px;
}
.terea-form-divider {
text-align: center;
position: relative;
margin: 8px 0 24px;
border-top: 1px solid var(--tx-border);
}
.terea-form-divider span {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--tx-bg-card);
padding: 0 14px;
font-size: 12px;
font-weight: 700;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.terea-form-grid {
display: grid;
gap: 16px;
}
.terea-form-grid--2 {
grid-template-columns: 1fr 1fr;
}
.terea-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
/* ---- Section headers ---- */
.terea-section-header {
margin-bottom: 20px;
}
.terea-section-title {
font-size: 20px;
font-weight: 700;
color: var(--tx-primary);
margin: 0 0 4px;
}
/* ---- Orders pagination ---- */
.terea-orders-pagination {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 16px;
}
/* ---- Payment methods ---- */
.terea-payment-methods-section { margin-bottom: 24px; }
.terea-payment-methods-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.terea-payment-method-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
transition: var(--tx-transition);
}
.terea-payment-method-card.is-default {
border-color: var(--tx-accent);
background: rgba(200,16,46,0.03);
}
.terea-payment-method-info {
display: flex;
align-items: center;
gap: 14px;
}
.terea-payment-method-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--tx-bg-soft);
color: var(--tx-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.terea-payment-method-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.terea-payment-method-name { font-size: 14px; font-weight: 600; color: var(--tx-primary); }
.terea-payment-method-default-badge {
display: inline-block;
background: var(--tx-accent);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.terea-payment-method-expires { font-size: 12px; color: var(--tx-muted); }
.terea-payment-method-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.terea-add-payment-method { margin-top: 16px; }
/* ---- Downloads ---- */
.terea-downloads-section { margin-bottom: 8px; }
.terea-downloads-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.terea-download-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
}
.terea-download-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(22,163,74,0.1);
color: var(--tx-success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.terea-download-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.terea-download-name { font-size: 14px; font-weight: 600; color: var(--tx-primary); }
.terea-download-remaining { font-size: 12px; color: var(--tx-muted); }
/* ---- Addresses ---- */
.terea-addresses-section {}
.terea-addresses-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.terea-address-card {
background: var(--tx-bg-card);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
overflow: hidden;
}
.terea-address-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--tx-bg-soft);
border-bottom: 1px solid var(--tx-border);
}
.terea-address-card-icon {
color: var(--tx-accent-2);
display: flex;
align-items: center;
}
.terea-address-card-title {
flex: 1;
font-size: 14px;
font-weight: 700;
color: var(--tx-primary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.terea-address-edit-btn {
font-size: 13px;
font-weight: 600;
color: var(--tx-accent-2);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(200,16,46,0.3);
transition: var(--tx-transition);
}
.terea-address-edit-btn:hover {
background: var(--tx-accent);
border-color: var(--tx-accent);
color: #fff;
}
.terea-address-card-body { padding: 18px 20px; }
.terea-address-display {
font-size: 14px;
color: var(--tx-text);
line-height: 1.7;
}
.terea-address-empty {
font-size: 14px;
color: var(--tx-muted);
font-style: italic;
margin: 0;
}
/* ---- WooCommerce notices (styled globally) ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: var(--tx-radius);
margin-bottom: 20px;
font-size: 14px;
border: 1px solid;
}
.woocommerce-message {
background: rgba(22,163,74,0.08);
border-color: rgba(22,163,74,0.3);
color: var(--tx-success);
}
.woocommerce-error {
background: rgba(220,38,38,0.08);
border-color: rgba(220,38,38,0.3);
color: var(--tx-danger);
}
.woocommerce-info {
background: rgba(59,130,246,0.08);
border-color: rgba(59,130,246,0.3);
color: #2563eb;
}
.woocommerce-error li { list-style: none; }
/* ==========================================================================
Responsive ? My Account
========================================================================== */
/* ==========================================================================
UPGRADE 1 ? Shop / Category archive toolbar + grid
========================================================================== */
.terea-wc-container {
padding-top: 8px;
padding-bottom: 80px;
background: var(--tx-bg-soft);
min-height: 60vh;
}
.terea-wc-container > .container { position: relative; }
.terea-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 16px 22px;
margin-top: 24px;
margin-bottom: 24px;
background: linear-gradient(135deg, rgba(17, 17, 17, 0.03) 0%, rgba(255, 255, 255, 1) 100%);
border: 1px solid rgba(17, 17, 17, 0.14);
border-radius: 16px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
position: relative;
}
.terea-shop-toolbar::before {
content: "";
position: absolute;
top: 0;
left: 22px;
right: 22px;
height: 2px;
background: linear-gradient(90deg, var(--tx-primary) 0%, var(--tx-accent) 100%);
border-radius: 2px;
}
.terea-shop-grid .woocommerce-breadcrumb {
margin-top: 18px;
}
/* Breadcrumb polish ? applies to cart, checkout, shop, etc. */
.woocommerce-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 18px 0 4px;
padding: 10px 16px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 999px;
font-size: 13px;
color: var(--tx-muted);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.woocommerce-breadcrumb a {
color: var(--tx-text);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease;
}
.woocommerce-breadcrumb a:hover { color: var(--tx-accent-2); }
.woocommerce-breadcrumb .separator {
color: var(--tx-muted);
opacity: 0.6;
font-size: 12px;
}
.terea-shop-toolbar .woocommerce-result-count {
margin: 0;
font-size: 13.5px;
color: var(--tx-muted);
display: inline-flex;
align-items: center;
gap: 8px;
}
.terea-shop-toolbar .woocommerce-result-count::before {
content: "";
width: 6px;
height: 6px;
background: var(--tx-primary);
border-radius: 50%;
flex-shrink: 0;
}
.terea-shop-toolbar .woocommerce-result-count strong {
color: var(--tx-primary);
font-weight: 700;
}
.terea-shop-toolbar .woocommerce-ordering {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.terea-shop-toolbar .woocommerce-ordering::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.terea-shop-toolbar .woocommerce-ordering select {
padding: 10px 36px 10px 14px;
border: 1.5px solid rgba(17, 17, 17, 0.2);
border-radius: 10px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
padding-right: 36px;
font-size: 13.5px;
font-weight: 600;
color: var(--tx-text);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
min-width: 180px;
}
.terea-shop-toolbar .woocommerce-ordering select:hover,
.terea-shop-toolbar .woocommerce-ordering select:focus {
border-color: var(--tx-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.14);
background-color: rgba(17, 17, 17, 0.03);
}
.terea-shop-sidebar .widget {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.terea-shop-sidebar .widget-title,
.terea-shop-sidebar .woocommerce-widget-title {
font-family: var(--tx-font-heading) !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--tx-text) !important;
margin: 0 0 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--tx-border);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.terea-shop-sidebar .widget-title::before,
.terea-shop-sidebar .woocommerce-widget-title::before {
content: "";
width: 4px;
height: 14px;
background: var(--tx-primary);
border-radius: 2px;
}
.terea-shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
.terea-shop-sidebar ul li { padding: 4px 0; }
.terea-shop-sidebar ul a {
color: var(--tx-text) !important;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-size: 14px;
transition: color 0.15s ease, padding-left 0.2s ease;
border-radius: 4px;
}
.terea-shop-sidebar ul a:hover {
color: var(--tx-primary) !important;
padding-left: 6px;
}
.terea-shop-sidebar ul li.current-cat > a,
.terea-shop-sidebar ul li.is-active > a {
color: var(--tx-primary) !important;
font-weight: 700;
}
.terea-shop-sidebar .count,
.terea-filter-count {
background: var(--tx-bg-soft);
color: var(--tx-muted);
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
font-weight: 600;
flex-shrink: 0;
}
.terea-filter-rating-list .terea-filter-rating-stars {
display: inline-flex;
gap: 1px;
font-size: 14px;
line-height: 1;
}
.terea-filter-star {
color: #e2e8f0;
}
.terea-filter-star.is-filled {
color: var(--tx-accent);
}
.terea-filter-widget ul.terea-filter-list > li > a {
padding: 7px 10px !important;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
.terea-filter-widget ul.terea-filter-list > li > a:hover {
background: rgba(17, 17, 17, 0.06);
padding-left: 12px !important;
}
.terea-filter-widget ul.terea-filter-list > li.is-active > a {
background: rgba(17, 17, 17, 0.08);
}
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
padding: 4px 0 !important;
}
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a {
padding: 6px 0 !important;
}
.terea-shop-sidebar .price_slider_wrapper .ui-slider {
background: var(--tx-border) !important;
border-radius: 4px;
height: 4px;
}
.terea-shop-sidebar .price_slider_wrapper .ui-slider-range {
background: var(--tx-accent) !important;
}
.terea-shop-sidebar .price_slider_wrapper .ui-slider-handle {
background: var(--tx-accent) !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 6px rgba(200, 16, 46, 0.4) !important;
border-radius: 50% !important;
width: 16px !important;
height: 16px !important;
top: -7px !important;
}
.terea-shop-sidebar .price_slider_wrapper .button {
background: var(--tx-primary) !important;
color: #fff !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 13px !important;
}
.terea-price-range { display: flex; flex-direction: column; gap: 10px; }
.terea-price-range-fields { display: flex; align-items: center; gap: 8px; }
.terea-price-range-fields label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--tx-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.terea-price-range-fields input[type="number"] {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--tx-border);
border-radius: 6px;
font-size: 13px;
background: #fff;
color: var(--tx-text);
}
.terea-price-range-fields input[type="number"]:focus { outline: none; border-color: var(--tx-primary); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12); }
.terea-price-range-sep { color: var(--tx-muted); font-weight: 700; padding-top: 18px; }
.terea-price-range-submit {
background: var(--tx-primary);
color: #fff;
border: none;
padding: 9px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.2s ease;
}
.terea-price-range-submit:hover { background: var(--tx-primary-2); }
/* Product grid - Force 4 columns everywhere */
color: #0f172a;
width: 100%;
background: transparent;
}
.terea-price-input-wrap input:focus { outline: none; }
.terea-price-input-wrap input::placeholder { color: #94a3b8; font-weight: 400; }
.terea-price-separator {
color: #94a3b8;
font-weight: 600;
flex-shrink: 0;
}
.terea-price-filter-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #e11d2e 0%, var(--tx-accent) 100%);
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.terea-price-filter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}
/* Pagination — modern pill track */
.woocommerce-pagination {
display: flex;
justify-content: center;
margin-top: 36px;
padding: 8px 0 0;
}
.woocommerce-pagination ul {
display: inline-flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.woocommerce-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
background: #fff;
color: #0f172a;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.18s ease;
line-height: 1;
}
.woocommerce-pagination .page-numbers:hover {
background: var(--tx-primary-50, #f6f6f6);
border-color: color-mix(in srgb, var(--tx-primary, #111111) 45%, #e2e8f0);
color: var(--tx-primary, #111111);
}
.woocommerce-pagination .page-numbers.current {
background: var(--tx-primary, #111111);
border-color: var(--tx-primary, #111111);
color: #fff;
box-shadow: 0 8px 18px color-mix(in srgb, var(--tx-primary, #111111) 32%, transparent);
}
.woocommerce-pagination .page-numbers.current:hover {
background: var(--tx-primary, #111111);
color: #fff;
}
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
background: #fff;
color: var(--tx-primary, #111111);
border-color: #e2e8f0;
}
.woocommerce-pagination .page-numbers.prev:hover,
.woocommerce-pagination .page-numbers.next:hover {
background: var(--tx-primary-50, #f6f6f6);
border-color: var(--tx-primary, #111111);
color: var(--tx-primary, #111111);
}
.woocommerce-pagination .page-numbers.dots {
background: transparent;
border: none;
box-shadow: none;
cursor: default;
color: #94a3b8;
padding: 0 2px;
min-width: 20px;
font-size: 16px;
}
.woocommerce-pagination .page-numbers.dots:hover {
color: #94a3b8;
}
/* Category bottom content (admin-managed) */
.terea-cat-bottom {
margin: 40px 0 8px;
padding: 0;
}
.terea-cat-bottom-card {
position: relative;
background:
linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
border: 1px solid #e8edf2;
border-radius: 24px;
padding: 28px 28px 30px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.terea-cat-bottom-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--tx-primary, #111111), color-mix(in srgb, var(--tx-primary, #111111) 40%, var(--tx-accent)));
}
.terea-cat-bottom-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
padding: 5px 10px;
border-radius: 999px;
background: var(--tx-primary-50, #f6f6f6);
color: var(--tx-primary, #111111);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.terea-cat-bottom-title {
margin: 0 0 14px;
font-family: var(--tx-font-heading);
font-size: clamp(1.25rem, 2.2vw, 1.65rem);
font-weight: 750;
line-height: 1.25;
color: #0f172a;
letter-spacing: -0.02em;
}
.terea-cat-bottom-body {
color: #475569;
font-size: 15px;
line-height: 1.7;
}
.terea-cat-bottom-body > *:first-child { margin-top: 0; }
.terea-cat-bottom-body > *:last-child { margin-bottom: 0; }
.terea-cat-bottom-body p { margin: 0 0 0.9em; }
.terea-cat-bottom-body h2,
.terea-cat-bottom-body h3,
.terea-cat-bottom-body h4 {
margin: 1.2em 0 0.45em;
color: #0f172a;
font-family: var(--tx-font-heading);
line-height: 1.3;
}
.terea-cat-bottom-body ul,
.terea-cat-bottom-body ol {
margin: 0 0 1em;
padding-left: 1.2em;
}
.terea-cat-bottom-body li { margin: 0.35em 0; }
.terea-cat-bottom-body a {
color: var(--tx-primary, #111111);
font-weight: 650;
text-decoration: underline;
text-underline-offset: 2px;
}
.terea-cat-bottom-body a:hover { color: var(--tx-primary-2, #000000); }
.terea-cat-bottom-body img {
max-width: 100%;
height: auto;
border-radius: 14px;
}
@media (max-width: 640px) {
.terea-cat-bottom { margin-top: 28px; }
.terea-cat-bottom-card {
padding: 22px 18px 24px;
border-radius: 18px;
}
.terea-cat-bottom-body { font-size: 14.5px; }
}
/* ==========================================================================
Archive (shop / category) hero banner
========================================================================== */
.terea-archive-banner {
position: relative;
margin-top: 24px;
padding: 0;
border-radius: var(--tx-radius-lg);
overflow: hidden;
background:
radial-gradient(circle at 80% 20%, rgba(200, 16, 46, 0.18) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(15, 23, 42, 0.05) 0%, transparent 50%),
linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
box-shadow: 0 14px 40px -20px rgba(15, 23, 42, 0.55);
display: flex;
align-items: stretch;
}
.terea-archive-banner::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
linear-gradient(135deg, transparent 40%, rgba(200, 16, 46, 0.06) 100%);
pointer-events: none;
z-index: 1;
}
.terea-archive-banner-inner {
position: relative;
padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 56px);
max-width: 760px;
flex: 1 1 auto;
z-index: 2;
}
.terea-archive-banner-media {
position: relative;
width: clamp(180px, 32%, 360px);
flex-shrink: 0;
align-self: stretch;
overflow: hidden;
z-index: 2;
}
.terea-archive-banner-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.terea-archive-banner-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.6) 0%, transparent 40%);
z-index: 1;
pointer-events: none;
}
.terea-archive-banner-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(200, 16, 46, 0.15);
border: 1px solid rgba(200, 16, 46, 0.4);
color: var(--tx-accent);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 18px;
}
.terea-archive-banner-eyebrow svg { color: var(--tx-accent); }
.terea-archive-banner-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.7rem, 4vw, 2.6rem);
font-weight: 800;
margin: 0 0 12px;
color: #fff;
line-height: 1.2;
letter-spacing: -0.015em;
}
.terea-archive-banner-subtitle {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(14px, 1.5vw, 16px);
line-height: 1.65;
margin: 0 0 22px;
max-width: 600px;
}
.terea-archive-banner-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.terea-archive-banner-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
backdrop-filter: blur(4px);
}
.terea-archive-banner-chip svg { color: var(--tx-accent); }
/* Quick category navigation chips below the banner */
.terea-archive-subnav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
}
.terea-archive-subnav a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
backdrop-filter: blur(4px);
transition: background 0.2s ease, border-color 0.2s ease;
}
.terea-archive-subnav a:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.terea-archive-subnav a.is-current {
background: var(--tx-accent);
border-color: var(--tx-accent);
color: #0f172a;
}
.terea-subnav-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
}
.terea-archive-subnav a.is-current .terea-subnav-count {
background: rgba(15, 23, 42, 0.18);
color: #0f172a;
}
/* Category description block above products */
.term-description {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 18px 20px;
margin: 24px 0;
color: var(--tx-muted);
font-size: 14px;
line-height: 1.7;
}
/* ==========================================================================
NEW SINGLE PRODUCT PAGE - Clean Modern Design
========================================================================== */
/* Container */
.terea-product-container {
max-width: 1280px;
margin: 0 auto;
padding: 24px 20px 80px;
}
/* Product Layout Grid */
.terea-product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-top: 20px;
align-items: start;
}
/* ── Gallery ── */
.terea-product-gallery {
position: sticky;
top: 100px;
}
.terea-gallery-main {
position: relative;
background: #fff;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e8eaed;
}
.terea-gallery-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 0;
transition: none;
}
.terea-gallery-main:hover .terea-gallery-image {
transform: none;
}
/* Badge */
.terea-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10;
}
.terea-badge--sale {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
}
/* Thumbnails */
.terea-gallery-thumbnails {
display: flex;
gap: 12px;
margin-top: 16px;
overflow-x: auto;
padding-bottom: 8px;
}
.terea-thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 12px;
border: 2px solid #e8eaed;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
background: none;
padding: 0;
}
.terea-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.terea-thumb:hover {
border-color: #e11d2e;
}
.terea-thumb.active {
border-color: #e11d2e;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}
/* ── Product Info ── */
.terea-product-info {
padding-top: 8px;
}
/* Category */
.terea-product-category {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tx-accent);
background: rgba(200, 16, 46, 0.1);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 12px;
}
/* Title */
.terea-product-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 800;
color: #0f172a;
margin: 0 0 16px;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* Rating */
.terea-product-rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.terea-stars {
display: flex;
gap: 2px;
}
.terea-star {
font-size: 18px;
color: #e8eaed;
}
.terea-star.filled {
color: var(--tx-accent);
}
.terea-rating-text {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
/* Price */
.terea-product-price {
font-family: var(--tx-font-heading);
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 800;
color: #0f172a;
margin: 0 0 20px;
display: flex;
align-items: baseline;
gap: 12px;
letter-spacing: -0.01em;
}
.terea-product-price del {
font-size: 0.6em;
font-weight: 600;
color: #94a3b8;
text-decoration: line-through;
}
.terea-product-price ins {
background: none;
text-decoration: none;
}
.terea-product-price .woocommerce-Price-amount {
color: inherit;
}
/* Excerpt */
.terea-product-excerpt {
font-size: 15px;
line-height: 1.7;
color: #64748b;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e8eaed;
}
/* Stock Info */
.terea-stock-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #10b981;
margin-bottom: 20px;
}
.terea-stock-info svg {
flex-shrink: 0;
}
.terea-stock--out {
color: #ef4444;
}
/* ── Options (Attributes) ── */
.terea-product-options {
margin-bottom: 24px;
}
.terea-option-group {
margin-bottom: 16px;
}
.terea-option-label {
display: block;
font-size: 14px;
font-weight: 700;
color: #0f172a;
margin-bottom: 10px;
}
.terea-option-values {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.terea-option-btn {
padding: 10px 18px;
border: 2px solid #e8eaed;
border-radius: 10px;
background: #fff;
font-size: 14px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: all 0.2s ease;
}
.terea-option-btn:hover {
border-color: #e11d2e;
color: #0f172a;
}
.terea-option-btn.active {
border-color: #e11d2e;
background: rgba(20, 184, 166, 0.08);
color: #0f172a;
}
/* ── Add to Cart Form ── */
.terea-add-to-cart-form {
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border: 1px solid #e8eaed;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
}
/* Quantity Row */
.terea-quantity-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.terea-qty-label {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.terea-qty-control {
display: flex;
align-items: center;
border: 2px solid #e8eaed;
border-radius: 12px;
overflow: hidden;
}
.terea-qty-btn {
width: 44px;
height: 44px;
border: none;
background: #f8fafc;
font-size: 20px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.terea-qty-btn:hover {
background: #e11d2e;
color: #fff;
}
.terea-qty-control input {
width: 60px;
height: 44px;
border: none;
border-left: 1px solid #e8eaed;
border-right: 1px solid #e8eaed;
text-align: center;
font-size: 16px;
font-weight: 700;
color: #0f172a;
-moz-appearance: textfield;
}
.terea-qty-control input::-webkit-outer-spin-button,
.terea-qty-control input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Add to Cart Button */
.terea-add-to-cart-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
background: linear-gradient(135deg, #e11d2e 0%, var(--tx-accent) 100%);
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}
.terea-add-to-cart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(20, 184, 166, 0.45);
}
.terea-add-to-cart-btn:active {
transform: translateY(0);
}
/* Product Meta */
.terea-product-meta {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 0;
border-top: 1px solid #e8eaed;
margin-bottom: 20px;
}
.terea-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.terea-meta-label {
color: #64748b;
font-weight: 500;
}
.terea-meta-value {
color: #0f172a;
font-weight: 600;
}
.terea-meta-value a {
color: #e11d2e;
}
.terea-meta-value a:hover {
text-decoration: underline;
}
/* Trust Badges */
.terea-trust-badges {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background: #f8fafc;
border-radius: 12px;
}
.terea-trust-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 600;
color: #475569;
}
.terea-trust-item svg {
flex-shrink: 0;
color: #e11d2e;
}
/* ── Product Tabs ── */
.terea-product-tabs {
margin-top: 60px;
}
.terea-tabs-nav {
display: flex;
gap: 0;
border-bottom: 2px solid #e8eaed;
margin-bottom: 32px;
overflow-x: auto;
}
.terea-tab-btn {
padding: 14px 24px;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: 15px;
font-weight: 700;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.terea-tab-btn:hover {
color: #0f172a;
}
.terea-tab-btn.active {
color: #e11d2e;
border-bottom-color: #e11d2e;
}
.terea-tab-count {
font-size: 12px;
color: #94a3b8;
margin-left: 4px;
}
.terea-tab-panel {
display: none;
}
.terea-tab-panel.active {
display: block;
}
.terea-tab-panel h2:first-child {
display: none;
}
.terea-tab-panel p {
font-size: 15px;
line-height: 1.8;
color: #475569;
margin-bottom: 16px;
}
.terea-tab-panel ul {
margin: 0 0 16px 20px;
}
.terea-tab-panel li {
font-size: 15px;
line-height: 1.8;
color: #475569;
margin-bottom: 8px;
}
/* Table styles for additional info */
.terea-tab-panel table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.terea-tab-panel table th,
.terea-tab-panel table td {
padding: 12px 16px;
border-bottom: 1px solid #e8eaed;
text-align: left;
font-size: 14px;
}
.terea-tab-panel table th {
font-weight: 700;
color: #0f172a;
width: 40%;
}
.terea-tab-panel table td {
color: #475569;
}
/* ==========================================================================
Responsive - Single Product Page
========================================================================== */
.terea-single-product {
padding-bottom: 64px;
}
.terea-single-product-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
margin-top: 28px;
align-items: start;
}
.terea-single-gallery {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 28px;
position: sticky;
top: 100px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.terea-single-gallery .woocommerce-product-gallery__image { display: block; }
.terea-single-gallery .woocommerce-product-gallery__image img {
border-radius: var(--tx-radius);
width: 100%;
height: auto;
}
.terea-single-gallery .flex-control-thumbs {
list-style: none !important;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 12px 0 0;
padding: 0 !important;
}
.terea-single-gallery .flex-control-thumbs li { margin: 0 !important; padding: 0 !important; }
.terea-single-gallery .flex-control-thumbs img {
width: 100%;
height: auto;
border-radius: 6px;
border: 2px solid var(--tx-border);
cursor: pointer;
opacity: 0.6;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.terea-single-gallery .flex-control-thumbs img:hover { opacity: 1; }
.terea-single-gallery .flex-control-thumbs li img.flex-active {
opacity: 1;
border-color: var(--tx-accent);
}
.terea-single-cats {
display: inline-block;
font-size: 12px;
color: var(--tx-accent-2);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 10px;
padding: 4px 12px;
background: rgba(200,16,46,0.1);
border-radius: 999px;
}
.terea-single-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
margin: 0 0 12px;
color: var(--tx-primary);
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.01em;
}
.terea-single-rating {
color: var(--tx-accent);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.terea-single-price {
display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--tx-font-heading);
font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--tx-primary);
margin: 16px 0 22px;
font-weight: 800;
letter-spacing: -0.01em;
}
.terea-single-price del {
color: var(--tx-muted);
margin-right: 0;
font-size: 0.7em;
font-weight: 600;
}
.terea-single-price ins { background: none; text-decoration: none; }
.terea-single-price .amount { color: inherit; }
.terea-single-short {
color: var(--tx-muted);
margin-bottom: 28px;
font-size: 15px;
line-height: 1.7;
padding-bottom: 28px;
border-bottom: 1px solid var(--tx-border);
}
.terea-single-cart-form {
background: linear-gradient(180deg, #fef9f0 0%, #fff 100%);
border: 1px solid rgba(200,16,46,0.2);
border-radius: var(--tx-radius-lg);
padding: 22px;
margin-bottom: 24px;
}
.terea-single-summary .quantity {
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.terea-single-summary .quantity input {
width: 90px !important;
padding: 12px 14px !important;
border: 1.5px solid var(--tx-border) !important;
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 600 !important;
text-align: center;
}
.terea-single-summary .quantity label {
font-size: 13px;
font-weight: 600;
color: var(--tx-primary);
margin-right: 8px;
}
.single_add_to_cart_button {
width: 100%;
background: var(--tx-accent) !important;
color: #fff !important;
padding: 16px 28px !important;
border-radius: var(--tx-radius) !important;
border: none !important;
font-weight: 700 !important;
font-size: 15px !important;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 8px !important;
box-shadow: 0 6px 18px -8px rgba(200,16,46,0.6);
}
.single_add_to_cart_button:hover {
background: var(--tx-accent-2) !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(217,119,6,0.7) !important;
}
.single_add_to_cart_button:active { transform: translateY(0); }
.single_add_to_cart_button.loading {
opacity: 0.7;
pointer-events: none;
}
.single_add_to_cart_button.loading::after {
content: "";
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: terea-spin 0.6s linear infinite;
display: inline-block;
}
@keyframes terea-spin { to { transform: rotate(360deg); } }
/* Product meta block (SKU, categories, tags) */
.terea-single-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 0 0;
border-top: 1px solid var(--tx-border);
color: var(--tx-muted);
font-size: 13px;
}
.terea-single-meta .posted_in,
.terea-single-meta .tagged_as {
display: inline-block;
margin-right: 8px;
}
.terea-single-meta .posted_in a,
.terea-single-meta .tagged_as a {
color: var(--tx-accent-2);
font-weight: 600;
transition: color 0.15s ease;
}
.terea-single-meta .posted_in a:hover,
.terea-single-meta .tagged_as a:hover {
color: var(--tx-primary);
text-decoration: underline;
}
.sku_wrapper { color: var(--tx-muted); font-size: 13px; }
.sku_wrapper .sku {
color: var(--tx-primary);
font-weight: 600;
background: var(--tx-bg-soft);
padding: 2px 8px;
border-radius: 4px;
margin-left: 4px;
font-family: 'JetBrains Mono', monospace;
}
/* Trust row in product summary */
.terea-single-trust {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 24px;
padding: 18px 0 0;
border-top: 1px solid var(--tx-border);
}
.terea-single-trust-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
font-size: 12px;
color: var(--tx-text);
font-weight: 600;
line-height: 1.3;
}
.terea-single-trust-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--tx-accent);
}
/* Tabs — theme single-product template only (not Elementor widgets) */
body:not(.elementor-page) .woocommerce-tabs,
.terea-product-tabs .woocommerce-tabs,
.single-product .site-main > .terea-product-layout .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs {
margin-top: 56px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
body:not(.elementor-editor-active) .woocommerce div.product:not(.elementor-widget *) .woocommerce-tabs ul.tabs,
.terea-product-tabs .woocommerce-tabs ul.tabs {
list-style: none;
display: flex;
gap: 0;
padding: 0 !important;
margin: 0 !important;
background: var(--tx-bg-soft);
border-bottom: 1px solid var(--tx-border);
overflow-x: auto;
flex-wrap: nowrap;
}
.terea-product-tabs .woocommerce-tabs ul.tabs li,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
display: block !important;
float: none !important;
}
.terea-product-tabs .woocommerce-tabs ul.tabs li a,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block !important;
padding: 16px 24px !important;
font-weight: 700 !important;
font-size: 14px !important;
color: var(--tx-muted) !important;
border-bottom: 3px solid transparent !important;
transition: all 0.15s ease !important;
text-decoration: none !important;
margin: 0 !important;
background: transparent !important;
}
.terea-product-tabs .woocommerce-tabs ul.tabs li a:hover,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--tx-primary) !important;
}
.terea-product-tabs .woocommerce-tabs ul.tabs li.active a,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--tx-primary) !important;
border-color: var(--tx-accent) !important;
background: #fff !important;
margin-bottom: -1px !important;
}
.terea-product-tabs .woocommerce-tabs .panel,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs .panel {
padding: 28px;
}
.terea-product-tabs .woocommerce-tabs .panel h2,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs .panel h2 {
font-size: 18px;
margin-top: 0;
}
.terea-product-tabs .woocommerce-tabs .panel p,
.terea-product-tabs .woocommerce-tabs .panel li,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs .panel p,
body:not(.elementor-page):not(.elementor-editor-active) .woocommerce div.product .woocommerce-tabs .panel li {
color: var(--tx-text);
line-height: 1.7;
}
/* Related/upsells */
.related.products, .upsells.products {
margin-top: 56px;
}
.related.products > h2,
.upsells.products > h2 {
text-align: center;
color: var(--tx-primary);
margin-bottom: 28px;
font-family: var(--tx-font-heading);
font-weight: 800;
letter-spacing: -0.01em;
}
/* Reviews */
#reviews #comments h2,
#reviews .comment-reply-title {
font-family: var(--tx-font-heading);
color: var(--tx-primary);
font-weight: 800;
}
#reviews .commentlist {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px;
}
#reviews .commentlist li {
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
padding: 18px 20px;
margin-bottom: 12px;
}
#reviews .comment-text p { margin-top: 8px; }
#review_form {
background: var(--tx-bg-soft);
padding: 20px;
border-radius: var(--tx-radius);
border: 1px solid var(--tx-border);
}
#review_form .form-submit .submit {
background: var(--tx-accent) !important;
color: #fff !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: 700 !important;
cursor: pointer;
}
/* Stock badge */
.stock.in-stock {
display: inline-block;
background: rgba(22,163,74,0.1);
color: var(--tx-success);
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 18px;
}
.stock.out-of-stock {
display: inline-block;
background: rgba(220,38,38,0.1);
color: var(--tx-danger);
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 18px;
}
/* Variable product swatches */
.terea-single-summary .variations {
margin-bottom: 16px;
width: 100%;
}
.terea-single-summary .variations td { padding: 6px 0; vertical-align: middle; }
.terea-single-summary .variations label {
font-size: 13px;
font-weight: 600;
color: var(--tx-primary);
margin-bottom: 0;
}
.terea-single-summary .variations select {
padding: 10px 14px;
border: 1.5px solid var(--tx-border);
border-radius: 8px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.terea-single-summary .reset_variations {
color: var(--tx-muted);
text-decoration: underline;
font-size: 13px;
margin-left: 10px;
}
/* ==========================================================================
UPGRADE 3 ? Cart page polish
========================================================================== */
.cart-main .terea-wc-container { background: var(--tx-bg); }
/* Cart page header (eyebrow + title) */
.terea-cart-page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin: 4px 0 18px;
padding: 18px 20px;
background: #fff;
border: 1px solid #e8edf2;
border-radius: 18px;
color: var(--tx-text);
box-shadow: none;
position: relative;
overflow: hidden;
}
.terea-cart-page-header::before { display: none; }
.terea-cart-page-header-left {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
}
.terea-cart-page-header-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--tx-primary);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.terea-cart-page-header-eyebrow svg { color: var(--tx-primary); }
.terea-cart-page-header-title {
font-family: var(--tx-font-heading);
color: var(--tx-text);
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
font-weight: 700;
margin: 0;
line-height: 1.25;
letter-spacing: -0.02em;
}
.terea-cart-page-header-right {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--tx-primary-50);
border: 1px solid color-mix(in srgb, var(--tx-primary) 16%, transparent);
border-radius: 999px;
font-size: 13px;
font-weight: 650;
color: var(--tx-primary);
backdrop-filter: none;
}
.terea-cart-page-header-right svg { color: var(--tx-primary); }
.terea-cart-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 28px;
margin-top: 24px;
align-items: start;
}
.terea-cart-grid > * { min-width: 0; }
.terea-cart-form,
.terea-cart-totals {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 24px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
min-width: 0;
overflow: visible;
}
.terea-cart-totals {
position: sticky;
top: calc(var(--tx-header-offset, 120px) + 16px);
}
/* Cart table ? auto layout with column widths */
.woocommerce-cart-form__contents {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
}
.woocommerce-cart-form__contents colgroup col { display: table-column; }
.woocommerce-cart-form__contents thead th {
text-align: left;
font-size: 11px;
text-transform: uppercase;
color: var(--tx-muted);
font-weight: 700;
letter-spacing: 0.08em;
padding: 12px 14px;
border-bottom: 2px solid var(--tx-border);
background: var(--tx-bg-soft);
}
.woocommerce-cart-form__contents thead th:first-child {
border-top-left-radius: 10px;
padding-left: 18px;
}
.woocommerce-cart-form__contents thead th:last-child {
border-top-right-radius: 10px;
padding-right: 18px;
}
.woocommerce-cart-form__contents tbody td {
padding: 22px 14px;
border-bottom: 1px solid var(--tx-border);
vertical-align: middle;
font-size: 14px;
}
.woocommerce-cart-form__contents tbody td:first-child { padding-left: 18px; }
.woocommerce-cart-form__contents tbody td:last-child { padding-right: 18px; }
.woocommerce-cart-form__contents tbody tr {
transition: background 0.15s ease;
}
.woocommerce-cart-form__contents tbody tr:hover td { background: var(--tx-bg-soft); }
.woocommerce-cart-form__contents tbody tr:last-child td {
border-bottom: 0;
}
/* Column widths ? product gets the most space, others compact */
.woocommerce-cart-form__contents th.product-remove,
.woocommerce-cart-form__contents td.product-remove { width: 44px; padding-left: 6px; padding-right: 6px; }
.woocommerce-cart-form__contents th.product-thumbnail,
.woocommerce-cart-form__contents td.product-thumbnail { width: 110px; }
.woocommerce-cart-form__contents th.product-name,
.woocommerce-cart-form__contents td.product-name { min-width: 180px; }
.woocommerce-cart-form__contents th.product-price,
.woocommerce-cart-form__contents td.product-price { width: 130px; white-space: nowrap; }
.woocommerce-cart-form__contents th.product-quantity,
.woocommerce-cart-form__contents td.product-quantity { width: 170px; }
.woocommerce-cart-form__contents th.product-subtotal,
.woocommerce-cart-form__contents td.product-subtotal { width: 130px; white-space: nowrap; text-align: right; }
.product-remove .remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(220,38,38,0.08);
color: var(--tx-danger);
font-size: 18px;
line-height: 1;
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.product-remove .remove:hover {
background: var(--tx-danger);
color: #fff;
transform: rotate(90deg);
}
.product-thumbnail a {
display: inline-block;
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: 12px;
padding: 8px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.product-thumbnail a:hover {
transform: scale(1.05);
border-color: var(--tx-accent);
}
.product-thumbnail img {
max-width: 84px;
height: auto;
display: block;
border-radius: 6px;
}
.product-name {
display: flex;
flex-direction: column;
gap: 4px;
}
.product-name a {
font-weight: 700;
color: var(--tx-primary);
font-size: 15px;
text-decoration: none;
line-height: 1.4;
}
.product-name a:hover { color: var(--tx-accent-2); }
.product-name .variation {
font-size: 12px;
color: var(--tx-muted);
margin-top: 4px;
}
.product-name .variation dt,
.product-name .variation dd { display: inline-block; margin: 0; font-size: 12px; }
.product-name .variation dt { color: var(--tx-muted); margin-right: 4px; }
.product-name .variation dd { color: var(--tx-text); font-weight: 600; margin-right: 8px; }
.product-name .variation p { margin: 0; }
.product-price, .product-subtotal {
font-weight: 700;
color: var(--tx-primary);
font-size: 15px;
white-space: nowrap;
}
.product-price .amount,
.product-subtotal .amount { color: var(--tx-primary); font-weight: 700; }
.product-price del,
.product-subtotal del {
color: var(--tx-muted);
font-weight: 500;
margin-right: 6px;
font-size: 13px;
}
/* Quantity stepper ? proper width */
.product-quantity {
min-width: 140px;
}
.terea-qty-input {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--tx-border);
border-radius: 10px;
background: #fff;
overflow: hidden;
height: 42px;
min-width: 130px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.terea-qty-input .quantity {
display: flex;
align-items: stretch;
margin: 0;
width: auto;
}
.terea-qty-input:focus-within {
border-color: var(--tx-accent);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
.terea-qty-input button {
width: 36px;
height: 100%;
background: var(--tx-bg-soft);
border: 0;
color: var(--tx-primary);
cursor: pointer;
font-size: 18px;
font-weight: 700;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.terea-qty-input button:hover {
background: var(--tx-accent);
color: #fff;
}
.terea-qty-input input.qty {
width: 56px !important;
height: 100%;
text-align: center;
border: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
background: transparent;
padding: 0 !important;
border-radius: 0 !important;
-moz-appearance: textfield;
flex: 1 1 auto;
min-width: 0;
}
.terea-qty-input input.qty::-webkit-outer-spin-button,
.terea-qty-input input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart-form__contents .actions {
background: var(--tx-bg-soft) !important;
padding: 18px 14px !important;
border-radius: 8px !important;
}
.terea-cart-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.terea-cart-actions-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.terea-cart-continue {
font-size: 14px;
font-weight: 700;
color: var(--tx-primary);
text-decoration: none;
}
.terea-cart-continue:hover { text-decoration: underline; }
.woocommerce-cart-form__contents .actions .coupon {
display: inline-flex;
align-items: center;
gap: 10px;
float: none;
}
.woocommerce-cart-form__contents .actions .coupon label {
display: none;
}
.coupon #coupon_code {
padding: 10px 14px !important;
border: 1.5px solid var(--tx-border) !important;
border-radius: 8px !important;
font-size: 14px !important;
width: 200px !important;
height: auto;
}
.coupon .button {
background: var(--tx-primary) !important;
color: #fff !important;
border: none !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.coupon .button:hover {
background: var(--tx-accent) !important;
}
.woocommerce-cart-form__contents .actions button[name="update_cart"] {
float: none;
background: var(--tx-primary) !important;
color: #fff !important;
border: none !important;
padding: 11px 22px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.woocommerce-cart-form__contents .actions button[name="update_cart"]:hover {
background: var(--tx-accent) !important;
}
/* Cart totals */
.terea-cart-totals > h2,
.terea-cart-totals .cart_totals h2 {
font-family: var(--tx-font-heading);
font-size: 20px;
font-weight: 700;
color: var(--tx-text);
margin: 0 0 18px;
padding: 0 0 14px;
border-bottom: 1px solid var(--tx-border);
display: flex;
align-items: center;
gap: 10px;
}
.terea-cart-totals > h2::before,
.terea-cart-totals .cart_totals h2::before {
content: "";
width: 5px;
height: 22px;
background: var(--tx-primary);
border-radius: 3px;
}
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td {
padding: 12px 0;
vertical-align: middle;
}
.cart_totals th {
text-align: left;
color: var(--tx-muted);
font-weight: 500;
font-size: 14px;
}
.cart_totals td {
text-align: right;
font-weight: 700;
color: var(--tx-primary);
}
.cart_totals .order-total th,
.cart_totals .order-total td {
font-size: 22px;
color: var(--tx-primary);
padding-top: 16px;
border-top: 2px solid var(--tx-border);
margin-top: 8px;
}
.cart_totals .order-total td .amount { color: var(--tx-accent-2); }
.terea-cart-totals .checkout-button {
display: block;
width: 100%;
margin-top: 20px;
padding: 16px;
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%) !important;
color: #fff !important;
text-align: center;
border-radius: var(--tx-radius);
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
border: none !important;
box-shadow: 0 6px 18px -8px rgba(17,17,17,0.55);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.terea-cart-totals .checkout-button:hover {
background: linear-gradient(135deg, var(--tx-primary-2) 0%, var(--tx-primary-3) 100%) !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(17,17,17,0.65) !important;
color: #fff !important;
}
.terea-cart-promo {
margin-top: 18px;
background: linear-gradient(180deg, var(--tx-primary-50) 0%, #fff 100%);
border: 1px solid rgba(17, 17, 17, 0.2);
border-radius: var(--tx-radius);
padding: 14px 16px;
font-size: 13px;
color: var(--tx-text);
display: flex;
align-items: center;
gap: 10px;
}
.terea-cart-promo svg {
width: 18px;
height: 18px;
color: var(--tx-primary);
flex-shrink: 0;
}
.terea-cart-promo strong { color: var(--tx-primary-2); }
/* ==========================================================================
UPGRADE 4 ? Checkout page polish
========================================================================== */
.checkout-main .terea-wc-container { background: var(--tx-bg); }
/* ---------- Hero / steps band ---------- */
.terea-checkout-hero {
background: #fff;
color: var(--tx-text);
border: 1px solid #e8edf2;
border-radius: 18px;
padding: 22px 24px;
margin: 12px 0 20px;
position: relative;
overflow: hidden;
box-shadow: none;
}
.terea-checkout-hero::before { display: none; }
.terea-checkout-hero-inner { position: relative; z-index: 1; max-width: 640px; }
.terea-checkout-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--tx-primary-50);
color: var(--tx-primary);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
border: 1px solid color-mix(in srgb, var(--tx-primary) 16%, transparent);
}
.terea-checkout-hero-eyebrow svg { color: var(--tx-primary); }
.terea-checkout-hero-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
font-weight: 700;
margin: 0 0 6px;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--tx-text);
}
.terea-checkout-hero-sub {
color: #64748b;
font-size: 14px;
margin: 0 0 18px;
max-width: 520px;
}
.terea-checkout-steps {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.terea-checkout-steps li {
display: flex !important;
align-items: center;
gap: 10px;
color: #94a3b8;
font-size: 13px;
font-weight: 600;
position: relative;
}
.terea-checkout-steps li.is-current {
color: var(--tx-primary);
}
.terea-checkout-steps li:not(:last-child)::after {
content: "";
width: 28px;
height: 1px;
background: #e2e8f0;
display: inline-block;
}
.terea-checkout-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f1f5f9;
color: #64748b;
font-weight: 800;
font-size: 13px;
border: 1px solid #e2e8f0;
}
.terea-checkout-steps li.is-current .terea-checkout-step-num {
background: var(--tx-primary);
border-color: var(--tx-primary);
color: #fff;
box-shadow: none;
}
.terea-checkout-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 28px;
margin-top: 24px;
align-items: start;
}
.terea-checkout-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.terea-checkout-panel {
background: #fff;
border: 1px solid #e8edf2;
border-radius: 18px;
padding: 24px;
box-shadow: none;
position: relative;
margin-top: 16px;
}
.terea-checkout-panel-head {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid var(--tx-border);
}
.terea-checkout-panel-step {
display: inline-flex;
align-self: flex-start;
align-items: center;
background: var(--tx-primary-soft);
color: var(--tx-primary-2);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 10px;
border-radius: 999px;
}
.terea-checkout-panel-title {
font-family: var(--tx-font-heading);
color: var(--tx-primary);
font-size: 18px;
font-weight: 800;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.3;
}
.terea-checkout-panel-title svg { color: var(--tx-primary); flex-shrink: 0; }
.terea-checkout-panel-sub {
color: var(--tx-muted);
font-size: 13px;
margin: 0;
line-height: 1.5;
}
.terea-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Checkout sidebar */
.terea-checkout-sidebar {
position: sticky;
top: calc(var(--tx-header-offset, 120px) + 16px);
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
/* Order review in sidebar - clean table styling */
#order_review_heading { display: none; }
.woocommerce-checkout-review-order {
margin: 0;
}
.woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: 10px 0;
vertical-align: top;
}
.woocommerce-checkout-review-order-table tfoot th {
border-top: 1px solid var(--tx-border);
padding-top: 12px;
text-align: left;
color: var(--tx-muted);
font-weight: 500;
font-size: 14px;
}
.woocommerce-checkout-review-order-table tfoot td {
border-top: 1px solid var(--tx-border);
padding-top: 12px;
text-align: right;
font-weight: 700;
color: var(--tx-primary);
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
font-size: 18px;
border-top: 2px solid var(--tx-border);
padding-top: 14px;
}
.woocommerce-checkout-review-order-table .order-total td .amount {
color: var(--tx-primary);
}
.woocommerce-checkout-review-order-table .product-name {
color: var(--tx-text);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
padding-right: 12px;
}
.woocommerce-checkout-review-order-table .product-total {
color: var(--tx-primary);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.woocommerce-checkout-review-order-table .product-quantity {
color: var(--tx-muted);
font-weight: 500;
font-size: 12px;
}
/* Shipping methods — full-width selectable cards with a separated cost.
WooCommerce core uses ul#shipping_method (ID) + text-indent on and
display:inline on labels. Those rules must be beaten or the selected
radio ::after paints over the whole card on mobile. */
.woocommerce-checkout-review-order-table .terea-shipping-totals td,
.cart_totals .terea-shipping-totals td,
.shop_table .terea-shipping-totals td,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.shipping td,
.woocommerce table.shop_table_responsive tr.shipping td {
display: table-cell !important;
width: 100% !important;
float: none !important;
clear: none !important;
text-align: left !important;
font-weight: 500 !important;
font-size: 14px !important;
color: var(--tx-text) !important;
padding: 14px 0 8px !important;
border-top: 1px solid var(--tx-border);
vertical-align: top;
}
.woocommerce table.shop_table_responsive tr.terea-shipping-totals td::before,
.woocommerce table.shop_table_responsive tr.shipping td::before,
.shop_table_responsive .terea-shipping-totals td::before,
.terea-shipping-totals td::before,
.woocommerce-checkout-review-order-table tr.shipping td::before {
content: none !important;
display: none !important;
float: none !important;
}
.terea-shipping {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.terea-shipping-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 2px;
}
.terea-shipping-head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--tx-primary-50);
color: var(--tx-primary);
flex-shrink: 0;
}
.terea-shipping-head-label {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tx-text);
}
.woocommerce ul#shipping_method.terea-shipping-methods,
.woocommerce-page ul#shipping_method.terea-shipping-methods,
.woocommerce-checkout ul#shipping_method.terea-shipping-methods,
ul#shipping_method.terea-shipping-methods,
.terea-shipping-methods {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods li,
.woocommerce-page ul#shipping_method.terea-shipping-methods li,
.woocommerce-checkout ul#shipping_method.terea-shipping-methods li,
ul#shipping_method.terea-shipping-methods li,
.terea-shipping-methods li {
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important;
list-style: none !important;
line-height: normal !important;
position: relative;
width: 100% !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods li *,
ul#shipping_method.terea-shipping-methods li * {
text-indent: 0 !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods input.shipping_method,
.woocommerce-page ul#shipping_method.terea-shipping-methods input.shipping_method,
.woocommerce-checkout ul#shipping_method.terea-shipping-methods input.shipping_method,
ul#shipping_method.terea-shipping-methods input.shipping_method,
.terea-shipping-methods input.shipping_method {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
pointer-events: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label,
.woocommerce-page ul#shipping_method.terea-shipping-methods label,
.woocommerce-checkout ul#shipping_method.terea-shipping-methods label,
ul#shipping_method.terea-shipping-methods label,
.terea-shipping-methods label {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 12px 12px 12px 14px !important;
background: #fff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
cursor: pointer;
text-align: left !important;
text-indent: 0 !important;
color: var(--tx-text) !important;
font-weight: 500 !important;
line-height: 1.35 !important;
float: none !important;
position: relative;
overflow: visible;
transition: border-color 0.15s ease, background 0.15s ease;
box-shadow: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label:hover,
.terea-shipping-methods label:hover {
border-color: rgba(17, 17, 17, 0.45) !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) label,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected label,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option--solo label,
.terea-shipping-option:has(input:checked) label,
.terea-shipping-option.is-selected label,
.terea-shipping-option--solo label {
border-color: var(--tx-primary) !important;
background: var(--tx-primary-50) !important;
box-shadow: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label:focus-within,
.terea-shipping-methods label:focus-within {
outline: 2px solid var(--tx-primary);
outline-offset: 2px;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-radio,
ul#shipping_method.terea-shipping-methods .terea-shipping-radio,
.terea-shipping-radio {
display: block !important;
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #cbd5e1 !important;
border-radius: 50% !important;
background: #fff !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
isolation: isolate;
contain: layout paint;
float: none !important;
align-self: flex-start;
margin-top: 2px !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) .terea-shipping-radio,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected .terea-shipping-radio,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option--solo .terea-shipping-radio,
.terea-shipping-option:has(input:checked) .terea-shipping-radio,
.terea-shipping-option.is-selected .terea-shipping-radio,
.terea-shipping-option--solo .terea-shipping-radio {
border-color: var(--tx-primary) !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-radio::before,
.terea-shipping-radio::before {
content: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) .terea-shipping-radio::after,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected .terea-shipping-radio::after,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option--solo .terea-shipping-radio::after,
.terea-shipping-option:has(input:checked) .terea-shipping-radio::after,
.terea-shipping-option.is-selected .terea-shipping-radio::after,
.terea-shipping-option--solo .terea-shipping-radio::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 3px !important;
right: 3px !important;
bottom: 3px !important;
left: 3px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--tx-primary) !important;
box-shadow: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-copy,
.terea-shipping-copy {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-title,
.terea-shipping-title {
display: block !important;
font-size: 13.5px !important;
font-weight: 800 !important;
color: var(--tx-text) !important;
line-height: 1.3 !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-zones,
.terea-shipping-zones {
display: block !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--tx-muted) !important;
line-height: 1.4 !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-price,
.terea-shipping-price {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center;
min-width: 88px !important;
margin: 0 !important;
padding: 7px 10px !important;
border-radius: 9px !important;
background: var(--tx-primary-50) !important;
border: 1px solid rgba(17, 17, 17, 0.18) !important;
color: var(--tx-primary) !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
text-align: center !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
float: none !important;
position: relative !important;
z-index: 1;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) .terea-shipping-price,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected .terea-shipping-price,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option--solo .terea-shipping-price,
.terea-shipping-option:has(input:checked) .terea-shipping-price,
.terea-shipping-option.is-selected .terea-shipping-price,
.terea-shipping-option--solo .terea-shipping-price {
background: var(--tx-primary) !important;
border-color: var(--tx-primary) !important;
color: #fff !important;
}
.terea-shipping-price .amount,
.terea-shipping-price .woocommerce-Price-amount,
.terea-shipping-price .woocommerce-Price-currencySymbol,
.terea-shipping-recap-amount .amount,
.terea-shipping-recap-amount .woocommerce-Price-amount {
color: inherit !important;
font-weight: 800 !important;
font-size: inherit !important;
white-space: nowrap !important;
}
.terea-shipping-price .woocommerce-Price-currencySymbol {
font-size: 11px;
font-weight: 700;
opacity: 0.9;
margin-inline-start: 2px;
}
.terea-shipping-free {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.terea-shipping-recap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 4px 2px;
font-size: 13px;
}
.terea-shipping-recap-label {
color: var(--tx-muted);
font-weight: 600;
}
.terea-shipping-recap-amount {
color: var(--tx-primary);
font-size: 15px;
font-weight: 800;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.terea-shipping .woocommerce-shipping-destination {
margin: 0;
font-size: 12px;
color: var(--tx-muted);
}
/* Hide empty field wrappers and empty containers - with high specificity */
body.woocommerce-checkout .terea-checkout-form .woocommerce-billing-fields__field-wrapper:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-shipping-fields__field-wrapper:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-additional-fields__field-wrapper:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-account-fields:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-billing-fields > p:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-shipping-fields > p:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-additional-fields > p:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-billing-fields:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-shipping-fields:empty,
body.woocommerce-checkout .terea-checkout-form .woocommerce-additional-fields:empty {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* Checkout notices must stay visible so validation errors can be read. */
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message {
display: block;
}
body.woocommerce-checkout form.checkout {
display: block;
width: 100%;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-login-toggle {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 12px;
padding: 14px 16px;
margin: 0 0 16px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
display: block;
margin: 0;
padding: 0;
background: none;
border: 0;
color: var(--tx-text);
}
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
body.woocommerce-checkout form.checkout_coupon .form-row,
body.woocommerce-checkout form.woocommerce-form-login .form-row {
margin: 0;
}
body.woocommerce-checkout form.checkout_coupon .input-text {
min-width: 200px;
padding: 10px 12px;
border: 1.5px solid var(--tx-border);
border-radius: 8px;
}
.terea-checkout-summary-card #payment {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--tx-border);
background: transparent;
border-left: 0;
border-right: 0;
border-bottom: 0;
padding-left: 0;
padding-right: 0;
}
.terea-checkout-login-required {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 16px;
padding: 28px;
text-align: center;
}
/* Remove margin from empty paragraphs */
body.woocommerce-checkout .terea-checkout-form p:empty {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
display: none !important;
}
/* Ensure checkout panels have no unexpected margins */
body.woocommerce-checkout .terea-checkout-panel .woocommerce-billing-fields,
body.woocommerce-checkout .terea-checkout-panel .woocommerce-shipping-fields,
body.woocommerce-checkout .terea-checkout-panel .woocommerce-additional-fields,
body.woocommerce-checkout .terea-checkout-panel .woocommerce-account-fields {
margin: 0;
padding: 0;
}
/* Force hide any WooCommerce field rows that are empty */
body.woocommerce-checkout .terea-checkout-form .form-row:empty {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* WC default field overrides - applied inside our panels */
.terea-checkout-form .woocommerce-billing-fields__field-wrapper,
.terea-checkout-form .woocommerce-shipping-fields__field-wrapper,
.terea-checkout-form .woocommerce-additional-fields__field-wrapper,
.terea-checkout-form .woocommerce-account-fields,
.terea-checkout-form .woocommerce-shipping-fields,
.terea-checkout-form #billing_address_2_field,
.terea-checkout-form #shipping_address_2_field {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.terea-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row,
.terea-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row,
.terea-checkout-form .woocommerce-additional-fields__field-wrapper > .form-row {
flex: 1 1 calc(50% - 7px);
min-width: 0;
}
.terea-checkout-form .form-row.form-row-wide,
.terea-checkout-form .form-row.notes,
.terea-checkout-form .form-row.woocommerce-account-fields,
.terea-checkout-form .form-row#billing_email_field,
.terea-checkout-form .form-row#billing_phone_field {
flex: 1 1 100% !important;
}
/* Hide the default WC inside-panel headings since our panel header replaces them. */
.terea-checkout-form #customer_details > .col-1 > h3,
.terea-checkout-form #customer_details > .col-2 > h3,
.terea-checkout-form .woocommerce-shipping-fields > h3,
.terea-checkout-form .woocommerce-billing-fields > h3,
.terea-checkout-form .woocommerce-additional-fields > h3 {
display: none !important;
}
.terea-checkout-form #customer_details,
.terea-checkout-form #customer_details > .col-1,
.terea-checkout-form #customer_details > .col-2 {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.woocommerce form .form-row {
margin-bottom: 0;
padding: 0;
}
.woocommerce form .form-row label {
display: block !important;
font-size: 13px;
font-weight: 600;
color: var(--tx-primary);
margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--tx-danger); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--tx-border);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
color: var(--tx-text);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.woocommerce form .form-row select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--tx-primary);
box-shadow: 0 0 0 3px rgba(17,17,17,0.15);
outline: none;
}
.woocommerce form .form-row input[aria-invalid="true"] {
border-color: var(--tx-danger);
}
.woocommerce form .form-row .select2-container {
width: 100% !important;
}
.woocommerce form .form-row .select2-container .select2-selection--single {
border-radius: 10px !important;
border: 1.5px solid var(--tx-border) !important;
padding: 8px 12px !important;
height: auto !important;
min-height: 44px;
font-size: 14px;
}
/* WC inline checkboxes (create account, ship to billing) */
.woocommerce form .form-row .woocommerce-form__input-checkbox,
.woocommerce form .form-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--tx-primary);
margin-right: 8px;
vertical-align: -3px;
}
.woocommerce form .form-row .checkbox + label,
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row > label.checkbox {
display: inline-flex !important;
align-items: center;
font-weight: 500;
color: var(--tx-text);
cursor: pointer;
}
/* Ship to different address toggle */
.terea-checkout-form .woocommerce-shipping-fields #ship-to-different-address {
background: var(--tx-primary-soft);
border-radius: 10px;
padding: 12px 14px;
margin: 0 0 18px;
border: 1px dashed rgba(17, 17, 17, 0.35);
}
.terea-checkout-form .woocommerce-shipping-fields #ship-to-different-address label {
color: var(--tx-primary);
font-size: 13px;
}
/* Order notes textarea */
.terea-checkout-form .woocommerce-additional-fields textarea {
min-height: 96px;
resize: vertical;
}
/* Payment gateway box */
.wh-checkout-pay-trust {
margin: 0 0 14px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 10px;
}
.wh-checkout-pay-trust__label {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tx-muted);
}
.wh-checkout-pay-trust__icons {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.wh-checkout-pay-trust__icons img,
.footer-payment-icons img.wh-pay-badge {
height: 30px;
width: auto;
max-width: 64px;
object-fit: contain;
border-radius: 4px;
background: #fff;
}
#payment .payment_methods .wh-gateway-icon {
max-height: 24px;
width: auto;
margin-left: 8px;
vertical-align: middle;
}
#payment {
background: var(--tx-bg-soft);
border-radius: var(--tx-radius);
border: 1px solid var(--tx-border);
margin-top: 18px;
padding: 16px 18px;
}
#payment .payment_methods {
list-style: none !important;
padding: 0 !important;
margin: 0 0 12px !important;
border-bottom: 0 !important;
}
#payment .payment_methods li {
background: #fff !important;
border: 1.5px solid var(--tx-border) !important;
border-radius: 10px !important;
padding: 14px 16px !important;
margin-bottom: 10px !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#payment .payment_methods li:has(input:checked),
.wc_payment_method.payment_method_active {
border-color: var(--tx-primary) !important;
box-shadow: 0 0 0 3px rgba(17,17,17,0.12);
}
#payment .payment_methods label {
font-weight: 700 !important;
color: var(--tx-primary) !important;
font-size: 14px !important;
cursor: pointer;
}
#payment .payment_box {
background: var(--tx-bg-soft) !important;
border: 1px solid var(--tx-border) !important;
border-radius: 8px !important;
margin: 10px 0 0 !important;
padding: 12px 14px !important;
font-size: 13px !important;
}
#payment .payment_box p { color: var(--tx-muted); margin: 0 0 8px; }
#payment .payment_box::before { display: none !important; }
#place_order {
width: 100%;
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%) !important;
color: #fff !important;
padding: 16px !important;
border-radius: var(--tx-radius) !important;
border: none !important;
font-weight: 800 !important;
font-size: 15px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
margin-top: 14px;
box-shadow: 0 8px 22px -10px rgba(17,17,17,0.65);
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
#place_order:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(17,17,17,0.7) !important;
filter: brightness(1.05);
}
#place_order::after {
content: none;
}
.woocommerce-privacy-policy-text { font-size: 12px; color: var(--tx-muted); line-height: 1.6; }
.woocommerce-checkout-payment .woocommerce-privacy-policy-text a { color: var(--tx-primary); }
/* ==========================================================================
Cart + Checkout — clean order summary / totals
========================================================================== */
/* Shared money formatting (AED / RTL-safe) */
.terea-cart-totals .woocommerce-Price-amount,
.terea-cart-totals .amount,
.terea-checkout-summary-card .woocommerce-Price-amount,
.terea-checkout-summary-card .amount,
.woocommerce-cart-form__contents .woocommerce-Price-amount,
.woocommerce-cart-form__contents .amount {
display: inline-block;
direction: ltr;
unicode-bidi: isolate;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Cart cards */
.terea-cart-form,
.terea-cart-totals {
background: #fff;
border: 1px solid #e8edf2;
border-radius: 18px;
padding: 22px 22px 24px;
box-shadow: none;
}
.terea-cart-totals > h2,
.terea-cart-totals .cart_totals h2 {
font-family: var(--tx-font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--tx-text);
margin: 0 0 16px;
padding: 0 0 14px;
border-bottom: 1px solid #eef2f6;
display: flex;
align-items: center;
gap: 10px;
}
.terea-cart-totals > h2::before,
.terea-cart-totals .cart_totals h2::before {
content: "";
display: inline-block;
width: 4px;
height: 18px;
background: var(--tx-primary);
border-radius: 4px;
flex-shrink: 0;
}
.cart_totals th,
.cart_totals td {
padding: 10px 0;
border: 0;
}
.cart_totals th {
color: #64748b;
font-weight: 600;
font-size: 14px;
}
.cart_totals td {
color: var(--tx-primary);
font-weight: 700;
font-size: 14px;
}
.cart_totals .order-total th,
.cart_totals .order-total td {
font-size: 1.15rem;
padding-top: 14px;
margin-top: 4px;
border-top: 1px solid #e8edf2;
color: var(--tx-text);
}
.cart_totals .order-total td,
.cart_totals .order-total td .amount {
color: var(--tx-primary) !important;
font-weight: 800;
font-size: 1.35rem;
}
.terea-cart-totals .checkout-button {
margin-top: 18px;
border-radius: 12px;
text-transform: none;
letter-spacing: 0;
font-size: 15px;
box-shadow: 0 8px 18px color-mix(in srgb, var(--tx-primary) 28%, transparent);
}
/* Cart table tighten */
.woocommerce-cart-form__contents thead th {
background: #f8fafc;
border-bottom: 1px solid #e8edf2;
padding: 10px 12px;
font-size: 11px;
}
.woocommerce-cart-form__contents tbody td {
padding: 16px 12px;
border-bottom: 1px solid #f1f5f9;
}
.woocommerce-cart-form__contents tbody tr:hover td {
background: #fafbfc;
}
.woocommerce-cart-form__contents .product-name a {
color: var(--tx-text);
font-weight: 650;
text-decoration: none;
}
.woocommerce-cart-form__contents .product-name a:hover {
color: var(--tx-primary);
}
.woocommerce-cart-form__contents .product-thumbnail img {
border-radius: 10px;
border: 1px solid #eef2f6;
}
.terea-cart-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: #fff5f5;
color: #dc2626 !important;
font-size: 18px;
line-height: 1;
text-decoration: none !important;
}
.terea-cart-remove:hover {
background: #fee2e2;
}
/* Checkout summary card */
.terea-checkout-summary-card {
background: #fff !important;
border: 1px solid #e8edf2 !important;
border-radius: 18px !important;
padding: 20px 20px 22px !important;
box-shadow: none !important;
}
.terea-checkout-summary-head {
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #eef2f6;
}
.terea-checkout-summary-title {
font-family: var(--tx-font-heading);
color: var(--tx-text) !important;
font-weight: 700;
font-size: 1.15rem;
gap: 8px;
}
.terea-checkout-summary-title svg {
color: var(--tx-primary);
width: 18px;
height: 18px;
}
.terea-checkout-summary-count {
background: var(--tx-primary-50);
color: var(--tx-primary);
border: 1px solid color-mix(in srgb, var(--tx-primary) 18%, transparent);
padding: 4px 10px;
font-size: 11.5px;
font-weight: 750;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table {
margin: 0 0 4px;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table thead th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
font-weight: 750;
padding: 0 0 10px;
border-bottom: 1px solid #eef2f6;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table thead th.product-total {
color: var(--tx-primary);
text-align: right;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table tbody td {
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .product-name {
font-size: 13.5px;
font-weight: 650;
color: #0f172a;
padding-right: 10px;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .product-quantity {
display: inline-block;
margin-top: 2px;
color: #94a3b8;
font-size: 12px;
font-weight: 600;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .product-total {
font-size: 13.5px;
font-weight: 750;
color: var(--tx-primary);
text-align: right;
vertical-align: top;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table tfoot th,
.terea-checkout-summary-card .woocommerce-checkout-review-order-table tfoot td {
border-top: 0;
padding: 10px 0;
font-size: 14px;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table tfoot th {
color: #64748b;
font-weight: 650;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table tfoot td {
color: var(--tx-primary);
font-weight: 750;
text-align: right;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .cart-subtotal th,
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .cart-subtotal td {
border-top: 1px solid #eef2f6;
padding-top: 12px;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total th,
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total td {
border-top: 1px solid #e8edf2;
padding-top: 14px;
font-size: 1.05rem;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total th {
color: #334155;
font-weight: 750;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total td,
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total td .amount {
color: var(--tx-primary) !important;
font-size: 1.35rem;
font-weight: 800;
}
/* Shipping block inside summary */
.terea-checkout-summary-card .terea-shipping,
.terea-cart-totals .terea-shipping {
gap: 8px;
margin-top: 4px;
}
.terea-shipping-head {
margin: 2px 0 4px;
}
.terea-shipping-head-icon {
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--tx-primary-50);
}
.terea-shipping-head-label {
font-size: 12px;
letter-spacing: 0.05em;
color: #0f172a;
}
.woocommerce ul#shipping_method.terea-shipping-methods label,
.terea-shipping-methods label {
gap: 10px !important;
padding: 11px 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label:hover,
.terea-shipping-methods label:hover {
border-color: color-mix(in srgb, var(--tx-primary) 40%, #e2e8f0) !important;
background: #fcfffe !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) label,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected label,
.terea-shipping-option:has(input:checked) label,
.terea-shipping-option.is-selected label {
border-color: var(--tx-primary) !important;
background: var(--tx-primary-50) !important;
box-shadow: none !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-title,
.terea-shipping-title {
font-size: 13px !important;
font-weight: 750 !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-zones,
.terea-shipping-zones {
font-size: 11.5px !important;
color: #64748b !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-price,
.terea-shipping-price {
min-width: 82px !important;
padding: 6px 9px !important;
border-radius: 999px !important;
border: 0 !important;
background: #f6f6f6 !important;
color: var(--tx-primary) !important;
font-size: 12.5px !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option:has(input:checked) .terea-shipping-price,
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-option.is-selected .terea-shipping-price,
.terea-shipping-option:has(input:checked) .terea-shipping-price,
.terea-shipping-option.is-selected .terea-shipping-price {
background: var(--tx-primary) !important;
color: #fff !important;
}
.terea-shipping-price .woocommerce-Price-amount,
.terea-shipping-price .amount,
.terea-shipping-recap-amount .woocommerce-Price-amount,
.terea-shipping-recap-amount .amount {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
.terea-shipping-recap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed #e2e8f0;
font-size: 13px;
}
.terea-shipping-recap-label {
color: #64748b;
font-weight: 600;
}
.terea-shipping-recap-amount {
color: var(--tx-primary);
font-weight: 800;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
/* Payment card match summary */
.terea-checkout-payment-card {
border: 1px solid #e8edf2 !important;
border-radius: 18px !important;
padding: 20px !important;
box-shadow: none !important;
}
.terea-checkout-payment-title {
color: var(--tx-text) !important;
font-size: 1.05rem;
font-weight: 700;
}
.terea-checkout-panel {
border: 1px solid #e8edf2;
border-radius: 18px;
box-shadow: none;
}
@media (max-width: 767px) {
.terea-cart-form,
.terea-cart-totals,
.terea-checkout-summary-card,
.terea-checkout-payment-card,
.terea-checkout-panel {
border-radius: 14px !important;
padding: 16px !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label,
.terea-shipping-methods label {
padding: 10px !important;
gap: 8px !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-price,
.terea-shipping-price {
min-width: 74px !important;
font-size: 12px !important;
padding: 5px 8px !important;
}
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total td,
.terea-checkout-summary-card .woocommerce-checkout-review-order-table .order-total td .amount {
font-size: 1.2rem !important;
}
}
/* Checkout sidebar - payment card */
.terea-checkout-payment-card {
background: #fff !important;
border: 1px solid #e8edf2 !important;
border-radius: 18px !important;
padding: 20px !important;
box-shadow: none !important;
}
.terea-checkout-payment-head {
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #eef2f6;
}
.terea-checkout-payment-title {
font-family: var(--tx-font-heading);
color: var(--tx-text);
font-weight: 700;
font-size: 1.05rem;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.2;
}
.terea-checkout-payment-title svg {
color: var(--tx-primary);
flex-shrink: 0;
}
.terea-checkout-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #eef2f6;
}
.terea-checkout-summary-title {
font-family: var(--tx-font-heading);
color: var(--tx-text);
font-weight: 700;
font-size: 1.15rem;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.2;
}
.terea-checkout-summary-title svg { color: var(--tx-primary); flex-shrink: 0; }
.terea-checkout-summary-count {
display: inline-flex;
align-items: center;
background: var(--tx-primary-50);
color: var(--tx-primary);
border: 1px solid color-mix(in srgb, var(--tx-primary) 18%, transparent);
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 750;
}
/* Cart review-product lines */
.woocommerce-checkout-review-order-table .product-name {
color: var(--tx-text);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
padding-right: 12px;
}
.woocommerce-checkout-review-order-table .product-total {
color: var(--tx-primary);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.woocommerce-checkout-review-order-table .product-quantity {
color: var(--tx-muted);
font-weight: 500;
font-size: 12px;
}
/* Checkout help card */
.terea-checkout-help {
background: #fff !important;
border: 1px solid #e8edf2 !important;
border-radius: 18px !important;
padding: 18px 20px !important;
display: flex;
align-items: flex-start;
gap: 14px;
}
.terea-checkout-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--tx-primary);
color: #fff;
flex-shrink: 0;
}
.terea-checkout-help svg { color: var(--tx-primary); }
.terea-checkout-help strong {
display: block;
color: var(--tx-primary);
font-size: 14px;
margin-bottom: 4px;
font-weight: 800;
}
.terea-checkout-help p {
color: var(--tx-muted);
font-size: 13px;
margin: 0 0 10px;
line-height: 1.5;
}
.terea-checkout-help-link {
color: var(--tx-primary) !important;
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.terea-checkout-help-link:hover {
text-decoration: underline;
}
/* Checkout trust card */
.terea-checkout-trust {
background: #fff !important;
border: 1px solid var(--tx-border) !important;
border-radius: var(--tx-radius-lg) !important;
padding: 20px 22px !important;
display: flex !important;
flex-direction: column;
gap: 12px;
}
.terea-checkout-trust-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--tx-text);
font-weight: 500;
}
.terea-checkout-trust-item svg {
width: 36px;
height: 36px;
color: var(--tx-primary);
flex-shrink: 0;
padding: 8px;
background: var(--tx-primary-soft);
border-radius: 10px;
}
/* Checkout payment chips */
.terea-checkout-payments {
background: #fff !important;
border: 1px solid var(--tx-border) !important;
border-radius: var(--tx-radius-lg) !important;
padding: 18px 22px !important;
}
.terea-checkout-payments-label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.terea-checkout-payments-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.terea-checkout-payments-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
background: var(--tx-bg-soft);
border: 1px solid var(--tx-border);
border-radius: 6px;
font-size: 11px;
font-weight: 800;
color: var(--tx-text);
letter-spacing: 0.04em;
}
/* Coupon + login toggles (WC default look) */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
background: var(--tx-primary-soft) !important;
color: var(--tx-primary-2) !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 16px !important;
font-size: 13px !important;
display: flex;
align-items: center;
gap: 8px;
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a {
color: var(--tx-primary) !important;
font-weight: 700;
text-decoration: underline;
margin-left: auto;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }
.checkout_coupon.woocommerce-form-coupon,
.woocommerce-form.woocommerce-form-login {
background: var(--tx-bg-soft);
border-radius: var(--tx-radius);
padding: 14px 16px;
margin-bottom: 16px;
border: 1px solid var(--tx-border);
}
.checkout_coupon .form-row,
.woocommerce-form-login .form-row {
display: flex !important;
gap: 8px;
}
.checkout_coupon button[type="submit"],
.woocommerce-form-login button[type="submit"] {
background: var(--tx-primary) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-weight: 700 !important;
cursor: pointer;
transition: background 0.2s ease;
}
.checkout_coupon button[type="submit"]:hover,
.woocommerce-form-login button[type="submit"]:hover {
background: var(--tx-primary-2) !important;
}
/* Term & conditions + privacy wrapper */
.woocommerce-terms-and-conditions-wrapper {
margin: 12px 0;
font-size: 13px;
}
.woocommerce-terms-and-conditions-wrapper a { color: var(--tx-primary); }
/* Coupon chip on cart review table */
.coupon-terea-code {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Wider hero on small screens */
/* Hide duplicate checkout heading */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 { display: none !important; }
/* Checkout trust card */
.terea-checkout-trust {
display: flex;
flex-direction: column;
gap: 12px;
}
.terea-checkout-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--tx-text);
}
.terea-checkout-trust-item svg {
width: 18px;
height: 18px;
color: var(--tx-accent);
flex-shrink: 0;
}
.terea-checkout-trust-item strong,
.terea-checkout-trust-item span { color: var(--tx-text); }
/* ==========================================================================
UPGRADE 5 ? Terms / Privacy / Policy pages
========================================================================== */
.terea-policy-page {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 40px clamp(20px, 4vw, 56px);
margin-top: 24px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
color: var(--tx-text);
font-size: 15px;
line-height: 1.8;
}
.terea-policy-page > h1,
.terea-policy-page > .entry-title {
font-family: var(--tx-font-heading);
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--tx-primary);
margin: 0 0 8px;
font-weight: 800;
letter-spacing: -0.01em;
padding-bottom: 16px;
border-bottom: 2px solid var(--tx-border);
}
.terea-policy-page > .entry-content {
margin-top: 24px;
}
.terea-policy-page .entry-content > h2,
.terea-policy-page .entry-content > h3,
.terea-policy-page h2,
.terea-policy-page h3 {
font-family: var(--tx-font-heading);
color: var(--tx-primary);
font-weight: 800;
margin: 32px 0 14px;
letter-spacing: -0.005em;
padding-bottom: 6px;
}
.terea-policy-page h2 { font-size: 1.4rem; border-bottom: 1px solid var(--tx-border); padding-bottom: 10px; }
.terea-policy-page h3 { font-size: 1.15rem; }
.terea-policy-page h2:first-child,
.terea-policy-page h3:first-child { margin-top: 0; }
.terea-policy-page p {
color: var(--tx-text);
margin-bottom: 16px;
font-size: 15px;
line-height: 1.8;
}
.terea-policy-page ul,
.terea-policy-page ol {
padding-left: 22px;
margin-bottom: 18px;
}
.terea-policy-page li {
margin-bottom: 8px;
line-height: 1.8;
color: var(--tx-text);
}
.terea-policy-page ul li::marker { color: var(--tx-accent); }
.terea-policy-page a {
color: var(--tx-accent-2);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
transition: color 0.15s ease;
}
.terea-policy-page a:hover { color: var(--tx-primary); }
.terea-policy-page strong { color: var(--tx-primary); }
.terea-policy-page blockquote {
margin: 18px 0;
padding: 14px 20px;
background: linear-gradient(180deg, #fef9f0 0%, #fff 100%);
border-left: 4px solid var(--tx-accent);
border-radius: 6px;
font-style: italic;
color: var(--tx-text);
}
.terea-policy-page hr {
border: 0;
border-top: 1px solid var(--tx-border);
margin: 32px 0;
}
.terea-policy-page table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 24px;
}
.terea-policy-page th,
.terea-policy-page td {
padding: 12px 14px;
border: 1px solid var(--tx-border);
text-align: left;
font-size: 14px;
}
.terea-policy-page th {
background: var(--tx-bg-soft);
font-weight: 700;
color: var(--tx-primary);
}
/* ==========================================================================
MOBILE RESPONSIVE FIXES — Shop / Category / Cart / Checkout / Account
========================================================================== */
/* ── Shop / Category Page ───────────────────────────────────────────────── */
/* Hero section on mobile */
/* Category chips on mobile */
/* Toolbar on mobile */
/* Shop container padding on mobile — constrain to viewport */
/* Product grid — generous 2 columns with comfortable gaps on mobile */
/* Product card — spacious, magazine-style mobile layout */
/* Shop hero — clean mobile layout */
/* Products toolbar — compact and functional on mobile */
/* Category chips — scrollable with safe edge padding on mobile */
/* Breadcrumb on mobile */
/* No-products state */
/* ── Cart Page ──────────────────────────────────────────────────────────── */
/* Cart page header on mobile */
/* Cart grid — stacked on mobile */
/* Cart table — block/card layout on mobile */
/* Cart actions row on mobile */
/* Cart totals card on mobile */
/* ── Checkout Page ─────────────────────────────────────────────────────── */
/* Checkout hero on mobile */
/* Checkout grid on mobile */
/* Checkout panels on mobile */
/* Checkout sidebar on mobile */
/* ── My Account Page ──────────────────────────────────────────────────── */
/* Account wrapper on mobile */
/* Account grid — sidebar becomes top nav on mobile */
/* Account dashboard on mobile */
/* Account orders table on mobile */
/* ── Single Product Page ──────────────────────────────────────────────── */
/* ── Page / Archive headers on mobile ─────────────────────────────────── */
/* ── Footer on mobile ─────────────────────────────────────────────────── */
/* ── General: prevent horizontal overflow on mobile ─────────────────── */
.terea-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 100010;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.terea-drawer-backdrop.is-open {
opacity: 1;
visibility: visible;
}
.terea-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 100vw);
background: #fff;
box-shadow: -24px 0 60px -20px rgba(15, 23, 42, 0.25);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
z-index: 100011;
display: flex;
flex-direction: column;
visibility: hidden;
}
.terea-drawer.is-open {
transform: translateX(0);
visibility: visible;
}
.terea-drawer-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--tx-border);
background: #fff;
position: relative;
}
.terea-drawer-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 3px;
background: linear-gradient(90deg, var(--tx-primary), var(--tx-primary-2));
}
.terea-drawer-title {
font-family: var(--tx-font-heading);
font-size: 18px;
font-weight: 600;
color: var(--tx-text);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.terea-drawer-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--tx-accent, #c8102e);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.terea-drawer-count[hidden] {
display: none !important;
}
.terea-drawer.is-empty .terea-drawer-footer,
.terea-drawer-footer[hidden] {
display: none !important;
}
.terea-drawer-title-icon {
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, var(--tx-primary), var(--tx-primary-2));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.terea-drawer-close {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--tx-border);
background: var(--tx-bg-soft);
color: var(--tx-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.terea-drawer-close:hover {
background: var(--tx-danger);
color: #fff;
border-color: var(--tx-danger);
transform: rotate(90deg);
}
.terea-drawer-body {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
background: var(--tx-bg-soft);
-webkit-overflow-scrolling: touch;
}
.terea-drawer-body::-webkit-scrollbar { width: 6px; }
.terea-drawer-body::-webkit-scrollbar-track { background: transparent; }
.terea-drawer-body::-webkit-scrollbar-thumb {
background: var(--tx-border);
border-radius: 3px;
}
.terea-drawer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 16px;
text-align: center;
}
.terea-drawer-empty-icon {
width: 80px;
height: 80px;
margin-bottom: 18px;
border-radius: 50%;
background: rgba(200,16,46,0.1);
color: var(--tx-accent-2);
display: inline-flex;
align-items: center;
justify-content: center;
}
.terea-drawer-empty-title {
font-family: var(--tx-font-heading);
font-size: 17px;
font-weight: 700;
color: var(--tx-primary);
margin: 0 0 6px;
}
.terea-drawer-empty-sub {
font-size: 14px;
color: var(--tx-muted);
margin: 0;
}
.terea-drawer-empty-cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 16px;
min-height: 42px;
padding: 0 18px;
border-radius: 10px;
background: #111;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
transition: background 0.2s ease, transform 0.2s ease;
}
.terea-drawer-empty-cta:hover {
background: var(--tx-accent, #c8102e);
color: #fff;
transform: translateY(-1px);
}
.terea-drawer-products {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.terea-drawer-item {
display: flex;
gap: 12px;
padding: 12px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
position: relative;
}
.terea-drawer-item:hover {
border-color: rgba(200,16,46,0.3);
}
.terea-drawer-item.is-updated {
border-color: var(--tx-success);
box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
.terea-drawer-thumb {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid var(--tx-border);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.terea-drawer-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.terea-drawer-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.terea-drawer-name {
font-size: 14px;
font-weight: 600;
color: var(--tx-primary);
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.terea-drawer-name a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.terea-drawer-name a:hover { color: var(--tx-accent-2); }
.terea-drawer-variation {
font-size: 12px;
color: var(--tx-muted);
line-height: 1.4;
margin: 0;
}
.terea-drawer-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
}
.terea-drawer-price {
font-size: 14px;
font-weight: 700;
color: var(--tx-primary);
margin: 0;
}
.terea-drawer-qty {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--tx-border);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.terea-drawer-qty button {
width: 26px;
height: 28px;
background: var(--tx-bg-soft);
border: 0;
color: var(--tx-primary);
cursor: pointer;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.terea-drawer-qty button:hover { background: var(--tx-accent); color: #fff; }
.terea-drawer-qty input {
width: 36px;
height: 28px;
text-align: center;
border: 0 !important;
background: transparent;
font-size: 13px !important;
font-weight: 700 !important;
padding: 0 !important;
border-radius: 0 !important;
-moz-appearance: textfield;
}
.terea-drawer-qty input::-webkit-outer-spin-button,
.terea-drawer-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.terea-drawer-remove {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 0;
background: rgba(220,38,38,0.1);
color: var(--tx-danger);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease;
}
.terea-drawer-remove:hover {
background: var(--tx-danger);
color: #fff;
}
.terea-drawer-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 16px;
color: var(--tx-muted);
gap: 12px;
}
.terea-drawer-loading .spinner {
width: 28px;
height: 28px;
border: 3px solid var(--tx-border);
border-top-color: var(--tx-accent);
border-radius: 50%;
animation: terea-spin 0.8s linear infinite;
}
.terea-drawer-success {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
margin-bottom: 16px;
background: rgba(22,163,74,0.08);
border: 1px solid rgba(22,163,74,0.25);
border-radius: var(--tx-radius);
color: var(--tx-success);
font-weight: 600;
font-size: 14px;
}
.terea-drawer-success-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background: var(--tx-success);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.terea-drawer-success-text strong { color: var(--tx-primary); display: block; line-height: 1.3; }
.terea-drawer-success-text span { font-weight: 500; font-size: 13px; }
.terea-drawer-footer {
flex-shrink: 0;
padding: 20px 24px;
background: #fff;
border-top: 1px solid var(--tx-border);
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
box-sizing: border-box;
}
.terea-drawer-summary {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
min-width: 0;
}
.terea-drawer-progress {
margin: 0;
padding: 14px 16px;
background: linear-gradient(180deg, #fef9f0 0%, #fff 100%);
border: 1px solid rgba(200,16,46,0.3);
border-radius: var(--tx-radius);
font-size: 13px;
color: var(--tx-text);
width: 100%;
box-sizing: border-box;
}
.terea-drawer-progress-msg { font-weight: 600; color: var(--tx-primary); margin-bottom: 8px; line-height: 1.4; }
.terea-drawer-progress-bar {
height: 6px;
background: var(--tx-border);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.terea-drawer-progress-bar > span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--tx-accent), var(--tx-accent-2));
border-radius: 999px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.terea-drawer-progress.is-done .terea-drawer-progress-bar > span {
background: linear-gradient(90deg, var(--tx-success), var(--tx-accent));
width: 100%;
}
.terea-drawer-totals,
.terea-drawer-totals-list {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
margin: 0;
padding: 0;
min-width: 0;
}
.terea-drawer-totals-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 8px 0;
font-size: 14px;
color: var(--tx-muted);
box-sizing: border-box;
}
.terea-drawer-totals-label {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--tx-muted);
}
.terea-drawer-totals-value,
.terea-drawer-totals-row strong {
flex: 0 0 auto;
color: var(--tx-text);
font-weight: 700;
text-align: end;
white-space: nowrap;
}
.terea-drawer-totals-value .woocommerce-Price-amount,
.terea-drawer-totals-value .amount,
.terea-drawer-price .woocommerce-Price-amount,
.terea-drawer-price .amount,
.terea-drawer-summary .woocommerce-Price-amount,
.terea-drawer-summary .amount {
display: inline-block;
direction: ltr;
unicode-bidi: isolate;
white-space: nowrap;
font-weight: inherit;
color: inherit;
}
.terea-drawer-totals-row--saving strong { color: var(--tx-success); }
.terea-drawer-totals-row--total {
margin-top: 4px;
padding-top: 14px;
border-top: 2px solid var(--tx-border);
font-size: 17px;
}
.terea-drawer-totals-row--total .terea-drawer-totals-label {
font-size: 15px;
font-weight: 700;
color: var(--tx-text);
}
.terea-drawer-totals-row--total strong,
.terea-drawer-totals-row--total .terea-drawer-grand {
font-family: var(--tx-font-heading);
font-size: 22px;
font-weight: 800;
color: var(--tx-primary);
}
.terea-drawer-actions {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.terea-drawer-upsell {
margin-top: 16px;
padding: 16px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius);
}
.terea-drawer-upsell-title {
font-size: 12px;
font-weight: 700;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 10px;
}
.terea-drawer-upsell-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.terea-drawer-upsell-item {
display: flex;
gap: 10px;
align-items: center;
}
.terea-drawer-upsell-thumb {
width: 44px;
height: 44px;
border-radius: 6px;
border: 1px solid var(--tx-border);
flex-shrink: 0;
background: #fff;
}
.terea-drawer-upsell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.terea-drawer-upsell-info { flex: 1; min-width: 0; }
.terea-drawer-upsell-name {
font-size: 13px;
font-weight: 600;
color: var(--tx-primary);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.terea-drawer-upsell-price {
font-size: 12px;
color: var(--tx-accent-2);
font-weight: 700;
}
.terea-drawer-upsell-btn {
background: var(--tx-primary);
color: #fff;
border: 0;
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
transition: background 0.15s ease;
}
.terea-drawer-upsell-btn:hover { background: var(--tx-accent); }
.terea-drawer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
border-radius: var(--tx-radius);
font-weight: 700;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
border: none;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.terea-drawer-btn--checkout {
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #fff;
box-shadow: 0 6px 18px -8px rgba(17,17,17,0.55);
}
.terea-drawer-btn--checkout:hover {
background: linear-gradient(135deg, var(--tx-primary-2) 0%, var(--tx-primary-3) 100%);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(17,17,17,0.65);
}
.terea-drawer-btn--cart {
background: #fff;
color: var(--tx-primary);
border: 1.5px solid var(--tx-border);
}
.terea-drawer-btn--cart:hover {
border-color: var(--tx-primary);
background: var(--tx-bg-soft);
color: var(--tx-primary);
}
/* Floating cart button (header) gets a "shake" animation when item is added */
.terea-cart-pulse { animation: terea-cart-pulse 0.6s ease; }
@keyframes terea-cart-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* Inline notification fallback (when drawer is closed) */
.terea-cart-toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99997;
display: none;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
color: #0f172a;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
font-size: 14px;
font-weight: 600;
max-width: min(380px, calc(100vw - 32px));
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
}
.terea-cart-toast.is-visible {
display: flex;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.terea-cart-toast[hidden] {
display: none !important;
}
.terea-cart-toast svg { flex-shrink: 0; }
/* When drawer is open, allow body scroll lock */
body.terea-drawer-open { overflow: hidden; }
/* ==========================================================================
Empty cart page state
========================================================================== */
.terea-cart-empty {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
padding: 56px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.terea-cart-empty .terea-empty-icon {
width: 84px;
height: 84px;
margin: 0;
border-radius: 50%;
background: rgba(200,16,46,0.1);
color: var(--tx-accent-2);
display: inline-flex;
align-items: center;
justify-content: center;
}
.terea-cart-empty .terea-empty-title {
font-family: var(--tx-font-heading);
font-size: 22px;
font-weight: 800;
color: var(--tx-primary);
margin: 0;
}
.terea-cart-empty .terea-empty-desc {
color: var(--tx-muted);
font-size: 15px;
max-width: 380px;
margin: 0 0 6px;
}
.terea-cart-empty .terea-btn--lg {
padding: 14px 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.terea-cart-empty .terea-btn--primary {
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #fff;
}
.terea-cart-empty .terea-btn--primary:hover {
background: linear-gradient(135deg, var(--tx-primary-2) 0%, var(--tx-primary-3) 100%);
color: #fff;
}
/* ==========================================================================
Auth (Login / Register) cards
========================================================================== */
.terea-auth-wrap {
margin-top: 24px;
display: grid;
gap: 20px;
}
.terea-auth-wrap--split {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
align-items: start;
}
.terea-auth-card {
margin: 0;
}
.terea-auth-card form { padding: 24px 28px; }
.terea-auth-card .terea-btn--block {
display: block;
width: 100%;
padding: 14px 20px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: center;
font-size: 14px;
}
.terea-auth-card .terea-btn--outline {
background: #fff;
color: var(--tx-primary);
border: 1.5px solid var(--tx-border);
}
.terea-auth-card .terea-btn--outline:hover {
border-color: var(--tx-primary);
background: var(--tx-bg-soft);
color: var(--tx-primary);
}
.terea-form-row-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 0 16px;
flex-wrap: wrap;
font-size: 13px;
}
.terea-form-row-inline .woocommerce-form__label-for-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tx-text);
margin: 0;
font-weight: 500;
}
.terea-form-row-inline .woocommerce-form__label-for-checkbox input[type=checkbox] {
width: 16px;
height: 16px;
accent-color: var(--tx-accent);
}
.terea-lost-password {
color: var(--tx-accent-2);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
.terea-lost-password:hover { color: var(--tx-primary); }
/* ==========================================================================
UPGRADE 7 ? Generic content typography for pages
========================================================================== */
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
color: var(--tx-primary);
margin-top: 28px;
margin-bottom: 12px;
font-weight: 800;
letter-spacing: -0.01em;
font-family: var(--tx-font-heading);
}
.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.2rem; }
.entry-content p { line-height: 1.75; margin-bottom: 14px; color: var(--tx-text); }
.entry-content ul, .entry-content ol { margin-bottom: 16px; }
.entry-content li { line-height: 1.7; margin-bottom: 6px; }
.entry-content a { color: var(--tx-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--tx-primary); }
.entry-content img { border-radius: var(--tx-radius); }
.entry-content pre,
.entry-content code { background: var(--tx-bg-soft); border-radius: 6px; }
.entry-content pre { padding: 14px 16px; overflow-x: auto; }
.entry-content code { padding: 2px 6px; font-size: 0.92em; }
.entry-content pre code { padding: 0; background: transparent; }
/* Related products polish */
section.related.products,
.up-sells.related.products {
margin-top: 56px;
padding: 32px;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
section.related.products > h2,
.up-sells.related.products > h2 {
font-family: var(--tx-font-heading);
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
color: var(--tx-primary);
margin: 0 0 24px;
font-weight: 800;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 12px;
}
section.related.products > h2::before,
.up-sells.related.products > h2::before {
content: "";
width: 5px;
height: 22px;
background: var(--tx-accent);
border-radius: 3px;
}
section.related.products ul.products,
.up-sells.related.products ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
}
section.related.products ul.products > li,
.up-sells.related.products ul.products > li {
background: #fff;
border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-lg);
overflow: hidden;
margin: 0 !important;
width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column;
}
/* Mobile shop filter sidebar trigger ? desktop hidden */
.terea-mobile-filter-trigger { display: none; }
.terea-shop-sidebar-backdrop { display: none; }
.terea-shop-sidebar-close { display: none; }
/* ==========================================================================
Mobile filter sidebar ? slides up from bottom on small screens
========================================================================== */
.terea-mobile-filter-trigger {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
margin: 12px 0 14px;
background: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-2) 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 4px 12px rgba(17, 17, 17, 0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.terea-mobile-filter-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 17, 17, 0.24); }
.terea-mobile-filter-trigger:active { transform: translateY(0); }
.terea-mobile-filter-trigger svg { flex-shrink: 0; }
.terea-shop-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
z-index: 88;
transition: opacity 0.3s ease;
}
.terea-shop-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
.terea-shop-sidebar-close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(17, 17, 17, 0.08);
border: 1px solid rgba(17, 17, 17, 0.18);
color: var(--tx-primary);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
z-index: 2;
}
.terea-shop-sidebar-close:hover { background: rgba(17, 17, 17, 0.16); }
body.terea-filters-open { overflow: hidden; }
/* ==========================================================================
Mobile improvements — shop, cart, category
========================================================================== */
/* Category grid — 2 columns on mobile */
/* Cart drawer — action buttons stack and go full-width on mobile */
/* Filter sidebar — bottom sheet polish on mobile */
/* Shop hero perks — column stack on small screens */
/* ==========================================================================
Card payment surcharge notice at checkout
========================================================================== */
.terea-card-fee-notice {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 12px 14px;
background: rgba(200, 16, 46, 0.08);
border: 1px solid rgba(200, 16, 46, 0.3);
border-radius: var(--tx-radius);
font-size: 13px;
color: #92400e;
font-weight: 500;
line-height: 1.4;
animation: terea-fee-in 0.25s ease;
}
.terea-card-fee-notice svg {
flex-shrink: 0;
color: var(--tx-accent);
}
@keyframes terea-fee-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Card Payment gateway radio label styling */
.woocommerce-checkout #payment ul.payment_methods li label[for="payment_method_terea_card_payment"] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--tx-primary);
}
/* ==========================================================================
Related Products — Single Product Page
========================================================================== */
.terea-related-products {
margin-top: 56px;
padding: 36px 36px 32px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 20px rgba(15, 23, 42, 0.04);
border: 1px solid #f1f5f9;
}
.terea-related-products-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1.5px solid #f1f5f9;
}
.terea-related-products-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--tx-font-heading);
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
margin: 0;
}
.terea-related-products-title svg {
color: #111111;
flex-shrink: 0;
}
.terea-related-products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.terea-related-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.terea-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
}
.terea-related-card-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
.terea-related-card-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f8fafc;
}
.terea-related-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
padding: 0;
transition: none;
}
.terea-related-card:hover .terea-related-card-image img {
transform: none;
}
.terea-related-card-image .terea-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
.terea-related-card-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 14px 16px;
flex: 1;
}
.terea-related-card-title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.terea-related-card-rating {
display: flex;
align-items: center;
gap: 2px;
}
.terea-related-card-rating .terea-star {
font-size: 11px;
color: #e2e8f0;
}
.terea-related-card-rating .terea-star.filled {
color: var(--tx-accent);
}
.terea-related-card-rating span:last-child {
font-size: 11px;
color: #94a3b8;
margin-left: 3px;
}
.terea-related-card-price {
font-size: 15px;
font-weight: 800;
color: #111111;
margin-top: auto;
}
.terea-related-card-price del {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
margin-right: 6px;
}
.terea-related-card-price ins {
text-decoration: none;
}
.terea-related-add-btn {
position: absolute;
bottom: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #111111;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.8) translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.terea-related-card:hover .terea-add-btn,
.terea-related-card:hover .terea-related-add-btn {
opacity: 1;
transform: scale(1) translateY(0);
}
.terea-related-add-btn:hover {
background: #1a1a1a;
transform: scale(1.08);
}
/* Tablet */
@media (max-width: 900px) {
.terea-related-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width: 640px) {
.terea-related-products {
padding: 24px 20px;
}
.terea-related-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.terea-related-add-btn {
opacity: 1;
transform: scale(1) translateY(0);
width: 32px;
height: 32px;
bottom: 10px;
right: 10px;
}
.terea-related-card-body {
padding: 10px 10px 12px;
}
.terea-related-card-title {
font-size: 13px;
}
}
/* Very small */
@media (max-width: 360px) {
.terea-related-products-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Cart + checkout — tablet and mobile
========================================================================== */
@media (max-width: 1100px) {
.terea-cart-grid,
.terea-checkout-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.terea-cart-totals,
.terea-checkout-sidebar {
position: static;
width: 100%;
}
.terea-wc-container {
padding-left: 0;
padding-right: 0;
padding-bottom: 40px;
}
.cart-main .container,
.checkout-main .container,
.terea-wc-container.container {
max-width: 100%;
}
}
@media (max-width: 1023px) {
.terea-cart-page-header,
.terea-checkout-hero {
padding: 18px 18px;
margin: 8px 0 16px;
border-radius: 16px;
}
.terea-cart-page-header-title {
font-size: 1.35rem;
}
.terea-checkout-hero-title {
font-size: 1.35rem;
}
.terea-checkout-steps li:not(:last-child)::after {
width: 16px;
}
.woocommerce-cart-form__contents {
display: block;
width: 100%;
}
.woocommerce-cart-form__contents thead,
.woocommerce-cart-form__contents > colgroup {
display: none;
}
.woocommerce-cart-form__contents tbody {
display: flex;
flex-direction: column;
gap: 12px;
}
.woocommerce-cart-form__contents tbody tr.cart_item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
background: #fff;
border: 1px solid var(--tx-border);
border-radius: 14px;
padding: 14px;
position: relative;
gap: 0;
}
.woocommerce-cart-form__contents tbody td {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: none;
width: 100%;
min-width: 0;
}
.woocommerce-cart-form__contents tbody td::before {
content: attr(data-title) ": ";
font-size: 11px;
font-weight: 700;
color: var(--tx-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 8px;
}
.woocommerce-cart-form__contents td.product-thumbnail {
position: absolute;
top: 14px;
left: 14px;
width: auto;
padding: 0;
}
.woocommerce-cart-form__contents td.product-thumbnail::before { content: none; }
.woocommerce-cart-form__contents td.product-thumbnail img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 10px;
}
.woocommerce-cart-form__contents td.product-name {
padding: 0 36px 8px 84px;
min-height: 72px;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.woocommerce-cart-form__contents td.product-name::before { content: none; }
.woocommerce-cart-form__contents td.product-remove {
position: absolute;
top: 10px;
right: 10px;
width: auto;
padding: 0;
}
.woocommerce-cart-form__contents td.product-remove::before { content: none; }
.woocommerce-cart-form__contents td.product-price,
.woocommerce-cart-form__contents td.product-quantity,
.woocommerce-cart-form__contents td.product-subtotal {
padding-left: 0;
padding-right: 0;
}
.woocommerce-cart-form__contents .actions,
.woocommerce-cart-form__contents tr:last-child {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}
.woocommerce-cart-form__contents .actions td {
display: block;
width: 100%;
padding: 0;
}
.woocommerce-cart-form__contents .actions td::before { content: none; }
.terea-cart-actions,
.terea-cart-actions-right,
.woocommerce-cart-form__contents .actions .coupon {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0;
gap: 10px;
}
.coupon #coupon_code {
width: 100% !important;
max-width: 100%;
}
.woocommerce-cart-form__contents .actions button[name="update_cart"],
.terea-cart-totals .checkout-button,
.woocommerce-checkout #place_order {
width: 100%;
}
.terea-checkout-form .woocommerce-billing-fields__field-wrapper,
.terea-checkout-form .woocommerce-shipping-fields__field-wrapper,
.terea-checkout-form .woocommerce-additional-fields__field-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.terea-checkout-form .woocommerce-billing-fields__field-wrapper > .form-row,
.terea-checkout-form .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide {
flex: 1 1 100% !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
.terea-checkout-panel,
.terea-checkout-summary-card,
.terea-checkout-payment-card {
padding: 18px !important;
}
.woocommerce-checkout-review-order-table {
width: 100%;
table-layout: fixed;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
word-break: normal;
overflow-wrap: break-word;
}
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .amount,
.woocommerce-checkout-review-order-table .terea-shipping-price,
.woocommerce-checkout-review-order-table .terea-shipping-recap-amount {
word-break: keep-all;
overflow-wrap: normal;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
.woocommerce-checkout-review-order-table .terea-shipping-totals td,
.woocommerce-checkout-review-order-table tr.shipping td {
display: block !important;
width: 100% !important;
float: none !important;
text-align: left !important;
padding: 12px 0 8px !important;
overflow-wrap: normal;
word-break: normal;
}
.woocommerce ul#shipping_method.terea-shipping-methods,
ul#shipping_method.terea-shipping-methods {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods li {
padding: 0 !important;
text-indent: 0 !important;
width: 100% !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods label,
.terea-shipping-methods label {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 11px 10px 11px 12px !important;
gap: 10px !important;
width: 100% !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-radio,
.terea-shipping-radio {
display: block !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
flex: 0 0 20px !important;
}
.woocommerce ul#shipping_method.terea-shipping-methods .terea-shipping-price,
.terea-shipping-price {
min-width: 0 !important;
padding: 6px 8px !important;
font-size: 12px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.woocommerce-checkout #payment .payment_methods {
padding: 0;
}
.woocommerce-checkout #payment .place-order {
margin: 16px 0 0;
padding: 0;
}
.select2-container {
width: 100% !important;
max-width: 100%;
}
}
@media (max-width: 767px) {
.cart-main .terea-wc-container,
.checkout-main .terea-wc-container {
padding-top: 8px;
padding-bottom: 32px;
}
.terea-cart-form,
.terea-cart-totals {
padding: 16px;
background: #fff;
border: 1px solid #e8edf2;
border-radius: 14px;
box-shadow: none;
}
.terea-checkout-sidebar { order: 0; }
.terea-qty-input {
width: 100%;
max-width: 160px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="email"] {
font-size: 16px;
}
.terea-checkout-steps {
gap: 8px;
}
.terea-checkout-steps li {
font-size: 12px;
}
}
/* Final cart/checkout clean overrides */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .amount,
.cart_totals .woocommerce-Price-amount,
.cart_totals .amount {
direction: ltr;
unicode-bidi: isolate;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.terea-checkout-trust,
.terea-checkout-payments {
border: 1px solid #e8edf2 !important;
border-radius: 18px !important;
box-shadow: none !important;
}
.terea-cart-form,
.terea-cart-totals {
box-shadow: none !important;
}