/* ============================================================
eCellar Custom CSS — Rewrite v2
============================================================
TABLE OF CONTENTS
1. Wrapper & Iframe Safety
1b. Unified Heading Pattern
2. Forms & Shared Components (modals, alerts, validation)
3. MiniCart
4. SideCart & Sidekick
5. Main Cart (.ecp_Cart)
6. Product Grid & Cards (was ecellar-products.css)
7. Allocation Cart (.ecp_AllocationCart)
8. Order Review (.ecp_OrderReview)
9. Checkout (.ecp_Checkout, .ecp_CheckoutThankYou)
10. Account, Auth & Club
11. Dashboard, Orders & Order Detail
12. Scrollbars
13. Media Queries (480 / 550 / 768 / 992 / 1024)
============================================================ */
/* ============================================================
1. WRAPPER & IFRAME SAFETY
============================================================ */
/* --- 1a. Wrapper base --- */
.ecp-wrapper {
font-family: var(--public-font-body);
color: var(--ecellar-text-primary);
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* --- 1b. Iframe safety resets --- */
/*
* RULE 1 of 2 — Global iframe reset
* .public-theme iframe sets min-height: 100vh and pointer-events: none
* for Vimeo background videos. Without these !important overrides,
* every eCellar iframe (payment fields, secure inputs) becomes
* 100vh tall and unclickable.
*/
.ecp-wrapper iframe {
min-height: auto !important;
pointer-events: auto !important;
}
/*
* RULE 2 of 2 — Payment iframe layout
* eCellar's Global Payments iframes inside .ecp-payfields-wrapper
* need explicit block display and positioning to render correctly
* within the payment form grid. !important needed because the CDN
* default stylesheet sets conflicting inline/static values.
*/
.ecp-wrapper .ecp-payfields-wrapper iframe {
width: 100%;
display: block !important;
position: relative !important;
z-index: 1;
}
/* --- 1c. Payment container (pangalatic wrapper divs) --- */
.ecp-wrapper div[id*="ecp-pangalatic"] {
width: 100%;
display: block;
position: relative;
}
/*
* Pangalatic iframe children — !important needed because these dynamically
* injected iframes can inherit conflicting styles from the CDN or
* the .public-theme iframe reset.
*/
.ecp-wrapper div[id*="ecp-pangalatic"] iframe {
width: 100% !important;
display: block !important;
pointer-events: auto !important;
position: relative !important;
z-index: 1 !important;
border: none;
}
/*
* Direct targeting of Global Payments secure iframes by ID pattern.
* Belt-and-suspenders: guarantees clickability even if DOM structure changes.
*/
.ecp-wrapper iframe[id*="secure-payment-field"] {
pointer-events: auto !important;
display: block !important;
width: 100% !important;
position: relative !important;
z-index: 1 !important;
}
/* --- 1d. Payment form spacing --- */
/* Tighten grid rows inside payment fields */
.ecp-wrapper .ecp-payfields-wrapper .ecp-grid {
margin-bottom: 0.75rem;
}
.ecp-wrapper .ecp-payfields-wrapper .ecp-grid:last-child {
margin-bottom: 0;
}
/* Scrunched fieldset: minimal stacking gap to match input margins */
.ecp-wrapper .ecp-form-fieldset-scrunched .ecp-grid {
margin-bottom: 4px;
}
.ecp-wrapper .ecp-form-fieldset-scrunched .ecp-grid:last-child {
margin-bottom: 0;
}
.ecp-wrapper .ecp-payfields-wrapper .ecp-grid-row {
margin-bottom: 0;
}
/* Remove bottom margin on grid columns in payment forms */
.ecp-wrapper .ecp-payfields-wrapper [class*="ecp-grid-col-"] {
margin-bottom: 0;
box-sizing: border-box;
}
/* Horizontal gap between side-by-side payment columns (MM/YYYY | CVV) */
.ecp-wrapper .ecp-payfields-wrapper .ecp-grid-col-6 + .ecp-grid-col-6 {
padding-left: 4px;
}
/* PayField container divs with generated IDs — zero out extra margin */
.ecp-wrapper #ecp-pangalatic-nunya,
.ecp-wrapper #ecp-exparte,
.ecp-wrapper #ecp-crushed-velvet,
.ecp-wrapper #ecp-gp-submit {
margin-bottom: 0;
}
/* ============================================================
1b. UNIFIED HEADING PATTERN
============================================================
Establishes a consistent heading hierarchy across all eCellar views.
Individual views override only what they need (font-size, border style).
============================================================ */
/* --- Base heading styles (all levels) --- */
.ecp-wrapper h1,
.ecp-wrapper h2,
.ecp-wrapper h3,
.ecp-wrapper h4,
.ecp-wrapper h5 {
font-family: var(--public-font-heading);
color: var(--ecellar-text-primary);
line-height: 1.25;
margin: 0 0 1rem;
}
/* --- Heading weight hierarchy --- */
.ecp-wrapper h1 {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.ecp-wrapper h2 {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.ecp-wrapper h3 {
font-size: 1.25rem;
font-weight: 600;
}
.ecp-wrapper h4 {
font-size: 1.05rem;
font-weight: 600;
}
.ecp-wrapper h5 {
font-size: 1rem;
font-weight: 500;
color: var(--ecellar-text-secondary);
}
/* ============================================================
2. FORMS & SHARED COMPONENTS
============================================================ */
/* --- 2a. Form container --- */
.ecp-wrapper .ecp-form {
margin-bottom: 24px;
color: var(--ecellar-surface-text);
background-color: transparent;
padding: 1.5rem;
border-radius: 8px;
border: none;
}
/* --- 2a. Form title --- */
.ecp-wrapper .ecp-form-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
border-bottom: 2px solid var(--ecellar-accent);
padding-bottom: 12px;
}
/* --- 2a. Summary text --- */
.ecp-wrapper p.ecp-summary {
color: var(--ecellar-text-primary);
}
.ecp-wrapper p.ecp-micro-summary {
color: var(--ecellar-text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.ecp-wrapper p.ecp-summary-heading {
color: var(--ecellar-text-primary);
margin-bottom: 1rem;
font-weight: bold;
}
/* --- 2a. Inputs, selects, textareas --- */
.ecp-wrapper .ecp-form input[type=text],
.ecp-wrapper .ecp-form input[type=date],
.ecp-wrapper .ecp-form input[type=number],
.ecp-wrapper .ecp-form input[type=password],
.ecp-wrapper .ecp-form input[type=email],
.ecp-wrapper .ecp-form input[type=tel],
.ecp-wrapper .ecp-form select {
border: 1px solid var(--ecellar-border);
border-radius: 4px;
box-sizing: border-box;
display: block;
margin-bottom: 1rem;
padding: 0.75rem 0.5rem;
width: 100%;
background-color: var(--ecellar-bg-input);
color: var(--ecellar-surface-text);
font-family: inherit;
font-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp-wrapper .ecp-form textarea {
border: 1px solid var(--ecellar-border);
border-radius: 4px;
box-sizing: border-box;
padding: 0.75rem 0.5rem;
width: 100%;
background-color: var(--ecellar-bg-input);
color: var(--ecellar-surface-text);
font-family: inherit;
font-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-height: 120px;
margin-bottom: 1rem;
}
/* --- 2a. Select custom arrow --- */
.ecp-wrapper .ecp-form select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem top 50%;
background-size: 0.65rem auto;
padding-right: 2rem;
}
/* --- 2a. Focus states — accent border + glow --- */
.ecp-wrapper .ecp-form input[type=text]:focus,
.ecp-wrapper .ecp-form input[type=date]:focus,
.ecp-wrapper .ecp-form input[type=number]:focus,
.ecp-wrapper .ecp-form input[type=password]:focus,
.ecp-wrapper .ecp-form input[type=email]:focus,
.ecp-wrapper .ecp-form input[type=tel]:focus,
.ecp-wrapper .ecp-form select:focus,
.ecp-wrapper .ecp-form textarea:focus {
outline: none;
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
}
/* --- 2a. Labels --- */
.ecp-wrapper .ecp-form-input-label {
display: block;
padding: 0.75rem 0;
color: var(--ecellar-surface-text-secondary);
font-weight: 500;
}
.ecp-wrapper .ecp-form-input-info {
display: block;
padding: 0.5rem 0;
color: var(--ecellar-surface-text-secondary);
font-size: 0.875rem;
}
/* --- 2a. Form tip --- */
.ecp-wrapper .ecp-form-tip {
color: var(--ecellar-surface-text-secondary);
font-size: 0.875rem;
margin-bottom: 1rem;
background-color: var(--ecellar-accent-bg-subtle);
padding: 0.75rem;
border-radius: 4px;
border-left: 3px solid var(--ecellar-accent);
}
/* --- 2a. Buttons — primary (accent fill) --- */
.ecp-wrapper .ecp-form button {
border-radius: 4px;
display: block;
margin-bottom: 1rem;
text-align: center;
width: 100%;
background-color: var(--ecellar-accent);
border: none;
color: var(--ecellar-accent-text);
font-weight: 600;
padding: 0.75rem 1rem;
cursor: pointer;
font-family: inherit;
font-size: 16px;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp-wrapper .ecp-form button:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
.ecp-wrapper .ecp-form button:active {
transform: translateY(1px);
}
/* --- 2a. Buttons — disabled state --- */
.ecp-wrapper .ecp-form button:disabled,
.ecp-wrapper .ecp-form button[disabled] {
background-color: var(--ecellar-bg-disabled);
color: var(--ecellar-text-muted);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* --- 2a. Buttons — secondary (outline) --- */
.ecp-wrapper .ecp-form button.ecp-btn-secondary,
.ecp-wrapper .ecp-form button.ecp-form-btn-secondary {
background-color: transparent;
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent);
}
.ecp-wrapper .ecp-form button.ecp-btn-secondary:hover,
.ecp-wrapper .ecp-form button.ecp-form-btn-secondary:hover {
background-color: var(--ecellar-accent-bg-subtle);
color: var(--ecellar-accent);
}
/* --- 2a. Inline buttons & inputs --- */
.ecp-wrapper .ecp-form button.ecp-inline,
.ecp-wrapper .ecp-form input.ecp-inline {
display: inline-block;
margin-bottom: 0;
width: auto;
}
/* --- 2a. Inline form layout --- */
.ecp-wrapper .ecp-form.ecp-form-inline label {
margin-right: 0.25rem;
}
.ecp-wrapper .ecp-form.ecp-form-inline button,
.ecp-wrapper .ecp-form.ecp-form-inline input {
display: inline-block;
margin: 0 0 0 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
width: auto;
}
.ecp-wrapper .ecp-form.ecp-form-inline button {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.ecp-wrapper .ecp-form.ecp-form-inline input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ecp-wrapper .ecp-form.ecp-form-inline .ecp-form-inline-result {
font-size: 0.9rem;
margin-top: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
/* --- 2a. Fieldsets --- */
.ecp-wrapper .ecp-form-fieldset {
margin-bottom: 1.5rem;
border: none;
padding: 0;
}
.ecp-wrapper .ecp-form-fieldset-scrunched {
margin-bottom: 1.5rem;
border: none;
padding: 0;
}
.ecp-wrapper .ecp-form-fieldset-scrunched input[type=text],
.ecp-wrapper .ecp-form-fieldset-scrunched input[type=date],
.ecp-wrapper .ecp-form-fieldset-scrunched input[type=number],
.ecp-wrapper .ecp-form-fieldset-scrunched input[type=password],
.ecp-wrapper .ecp-form-fieldset-scrunched input[type=email],
.ecp-wrapper .ecp-form-fieldset-scrunched select {
margin-bottom: 2px;
margin-top: -1px;
position: relative;
}
.ecp-wrapper .ecp-form-fieldset-scrunched input:first-child,
.ecp-wrapper .ecp-form-fieldset-scrunched select:first-child {
border-radius: 4px 4px 0 0;
}
.ecp-wrapper .ecp-form-fieldset-scrunched input:last-child,
.ecp-wrapper .ecp-form-fieldset-scrunched select:last-child {
border-radius: 0 0 4px 4px;
}
/* --- 2a. Input stack (label + number input) --- */
.ecp-wrapper .ecp-form-input-stack {
margin-bottom: 1rem;
}
.ecp-wrapper .ecp-form-input-stack label {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp-wrapper .ecp-form-input-stack input[type="number"] {
display: inline-block;
margin-right: 0.5rem;
width: auto;
}
/* --- 2a. Sized left column layout --- */
.ecp-wrapper .ecp-form .ecp-sized-left-col {
display: flex;
}
.ecp-wrapper .ecp-form .ecp-sized-left-col > p:first-child {
flex: 0 0 7rem;
margin: 0;
}
.ecp-wrapper .ecp-form .ecp-sized-left-col > label {
align-self: center;
flex: 0 0 7rem;
margin: 0;
}
/* --- 2a. Button set (2-column) --- */
.ecp-wrapper .ecp-form-buttonset-2 button {
width: 47%;
}
.ecp-wrapper .ecp-form-buttonset-2 button:first-child {
float: left;
}
.ecp-wrapper .ecp-form-buttonset-2 button:last-child {
float: right;
}
/* --- 2a. Link set --- */
.ecp-wrapper .ecp-form-linkset a {
margin-right: 1rem;
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp-wrapper .ecp-form-linkset a:last-child {
margin-right: 0;
}
.ecp-wrapper .ecp-form-linkset a:hover {
color: var(--ecellar-surface-text);
text-decoration: underline;
}
/* --- 2a. Radio buttons --- */
.ecp-wrapper ul.ecp-form-radios {
list-style-type: none;
margin: 0;
padding: 0;
}
.ecp-wrapper ul.ecp-form-radios li {
margin-bottom: 1rem;
display: flex;
align-items: center;
color: var(--ecellar-surface-text);
}
.ecp-wrapper ul.ecp-form-radios li input[type=radio] {
margin-right: 0.5rem;
accent-color: var(--ecellar-accent);
}
/* --- 2a. Checkboxes --- */
.ecp-wrapper ul.ecp-form-checkboxes {
list-style-type: none;
margin: 0;
padding: 0;
}
.ecp-wrapper ul.ecp-form-checkboxes li {
margin-bottom: 1rem;
display: flex;
align-items: center;
color: var(--ecellar-text-primary);
}
.ecp-wrapper ul.ecp-form-checkboxes li input[type=checkbox] {
margin-right: 0.5rem;
accent-color: var(--ecellar-accent);
}
/* --- 2a. Form row columns --- */
.ecp-wrapper .ecp-form-row::after {
content: "";
display: table;
clear: both;
}
.ecp-wrapper [class*=ecp-form-row-col-] {
display: block;
float: left;
padding: 0 0.5rem;
box-sizing: border-box;
}
.ecp-wrapper [class*=ecp-form-row-col-]:first-child {
padding-left: 0;
}
.ecp-wrapper [class*=ecp-form-row-col-]:last-child {
padding-right: 0;
}
.ecp-wrapper .ecp-form-row-col-20 {
width: 20%;
}
.ecp-wrapper .ecp-form-row-col-25 {
width: 25%;
}
.ecp-wrapper .ecp-form-row-col-75 {
width: 75%;
}
.ecp-wrapper .ecp-form-row-col-80 {
width: 80%;
}
/* --- 2b. Shared Components — Theme Overrides --- */
/* --- 2b. Modals --- */
.ecp-wrapper .ecp-modal,
.ecp-wrapper .ecp-modal-small {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.ecp-wrapper .ecp-modal h2,
.ecp-wrapper .ecp-modal-small h2 {
color: var(--ecellar-surface-text);
border-bottom: 2px solid var(--ecellar-accent);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.ecp-wrapper .ecp-modal-content,
.ecp-wrapper .ecp-modal-small-content {
color: var(--ecellar-surface-text);
}
/* --- 2b. Notification box --- */
.ecp-wrapper .ecp-notification-box {
border: 1px solid var(--ecellar-accent);
border-radius: 6px;
overflow: hidden;
}
.ecp-wrapper .ecp-notification-box-header {
background-color: var(--ecellar-accent-bg-subtle);
border-bottom: 1px solid var(--ecellar-border-subtle);
color: var(--ecellar-surface-text);
padding: 0.75rem 1rem;
}
.ecp-wrapper .ecp-notification-box-content {
background-color: var(--ecellar-card-bg);
color: var(--ecellar-surface-text);
padding: 0.75rem 1rem;
}
/* --- 2b. Alert box (success) --- */
.ecp-wrapper .ecp-alert-box {
background-color: var(--ecellar-card-bg);
/* semantic: green for success */
color: #22c55e;
border-left: 4px solid #22c55e;
border-radius: 6px;
padding: 0.75rem 1rem;
}
/* --- 2b. Validation box (error) --- */
.ecp-wrapper .ecp-validation-box {
background-color: var(--ecellar-card-bg);
/* semantic: red for errors */
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
border-left: 4px solid #ef4444;
border-radius: 6px;
padding: 0.75rem 1rem;
}
/* --- 2b. Status indicators --- */
.ecp-wrapper .ecp-status-fail {
/* semantic: red for failure */
background-color: rgba(239, 68, 68, 0.15);
color: #ef4444;
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.ecp-wrapper .ecp-status-pass {
/* semantic: green for success */
background-color: rgba(34, 197, 94, 0.15);
color: #22c55e;
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
/* --- 2b. Callout box --- */
.ecp-wrapper .ecp-callout-box {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
padding: 1rem;
color: var(--ecellar-text-primary);
}
.ecp-wrapper .ecp-callout-warning {
background-color: var(--ecellar-card-bg);
/* semantic: amber for warning */
border: 2px solid rgba(245, 158, 11, 0.4);
border-left: 4px solid #f59e0b;
border-radius: 6px;
padding: 1rem;
color: var(--ecellar-text-primary);
text-align: center;
}
.ecp-wrapper .ecp-callout-footer {
border-top: 1px solid var(--ecellar-border-subtle);
color: var(--ecellar-text-secondary);
}
/* --- 2b. Box & Card --- */
.ecp-wrapper .ecp-box {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
color: var(--ecellar-text-primary);
}
.ecp-wrapper .ecp-box-header {
border-bottom: 1px solid var(--ecellar-border-subtle);
color: var(--ecellar-text-primary);
padding: 0.75rem 1rem;
}
.ecp-wrapper .ecp-card {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
color: var(--ecellar-text-primary);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp-wrapper .ecp-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
/* --- 2b. Section subtitle & message --- */
.ecp-wrapper .ecp-section-subtitle {
background-color: var(--ecellar-accent-bg-subtle);
color: var(--ecellar-text-primary);
border-radius: 4px;
padding: 0.75rem 1rem;
font-weight: 600;
}
.ecp-wrapper .ecp-section-message {
color: var(--ecellar-text-secondary);
}
/* --- 2b. Dropdown — override internal custom properties --- */
.ecp-wrapper .ecp-dropdown {
--color-border: var(--ecellar-border);
--color-caret: var(--ecellar-text-muted);
--color-bg: var(--ecellar-bg-input);
--color-hover-bg: var(--ecellar-accent-bg-subtle);
}
.ecp-wrapper .ecp-dropdown-toggle {
color: var(--ecellar-text-primary);
border-radius: 4px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp-wrapper .ecp-dropdown-toggle:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp-wrapper .ecp-dropdown-menu {
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
margin-top: 4px;
}
.ecp-wrapper .ecp-dropdown-menu li a {
color: var(--ecellar-text-primary);
padding: 0.5rem 0.75rem;
display: block;
text-decoration: none;
transition: background-color 0.2s ease;
}
/* Account nav links sit on card-bg surface — use surface text, not page text */
.ecp-wrapper .ecp_AccountNavWrapper .ecp-dropdown-menu li a {
color: var(--ecellar-surface-text);
}
/* --- 2b. Subtotals & Grand totals --- */
.ecp-wrapper .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
color: var(--ecellar-text-primary);
}
.ecp-wrapper .ecp-grandtotals {
border-top: 2px solid var(--ecellar-accent);
color: var(--ecellar-text-primary);
}
/* --- 2b. Price, warning, hint --- */
.ecp-wrapper .ecp-price-discounted {
color: var(--ecellar-accent);
font-weight: 600;
}
.ecp-wrapper .ecp-price-regular {
color: var(--ecellar-text-muted);
}
.ecp-wrapper .ecp-warning {
/* semantic: red for warnings */
color: #ef4444;
}
.ecp-wrapper .ecp-hint {
color: var(--ecellar-text-muted);
}
/* --- 2b. Address & Payment method data lists --- */
.ecp-wrapper dl.ecp-address,
.ecp-wrapper dl.ecp-payment-method {
color: var(--ecellar-text-primary);
}
.ecp-wrapper dl.ecp-address dt,
.ecp-wrapper dl.ecp-payment-method dt {
color: var(--ecellar-text-secondary);
font-weight: 600;
}
.ecp-wrapper dl.ecp-address dd,
.ecp-wrapper dl.ecp-payment-method dd {
color: var(--ecellar-text-primary);
}
/* --- 2b. Grid row borders --- */
.ecp-wrapper .ecp-grid-row-bottomline {
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp-wrapper .ecp-grid-row-topline {
border-top: 1px solid var(--ecellar-border-subtle);
}
.ecp-wrapper .ecp-grid-row-splitter {
border-top: 1px dashed var(--ecellar-border-subtle);
}
/* ============================================================
3. MINICART
============================================================ */
/* --- 3. Container — floating themed card with depth shadow --- */
.ecp-minicart {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
width: 340px;
max-width: 90vw;
font-family: var(--public-font-body);
color: var(--ecellar-text-primary);
overflow: hidden;
}
/* --- 3. Header — title, count badge, close button --- */
.ecp-minicart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp-minicart-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
color: var(--ecellar-text-primary);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ecp-minicart-count {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border-radius: 10px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
margin-left: 8px;
line-height: 1.4;
}
.ecp-minicart-close {
background: none;
border: none;
color: var(--ecellar-text-muted);
cursor: pointer;
font-size: 20px;
padding: 4px;
line-height: 1;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ecp-minicart-close:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
}
/* --- 3. Body — scrollable items area --- */
.ecp-minicart-body {
padding: 0;
max-height: 55vh;
overflow-y: auto;
}
/* --- 3. Empty state — centered, aspirational --- */
.ecp-minicart-empty {
text-align: center;
padding: 40px 24px;
color: var(--ecellar-text-muted);
font-size: 14px;
}
/* --- 3. Items list --- */
.ecp-minicart-items {
list-style: none;
padding: 0;
margin: 0;
}
/* --- 3. Individual item — image, details, price, quantity, remove --- */
.ecp-minicart-item {
display: flex;
padding: 12px 16px;
border-bottom: 1px solid var(--ecellar-border-subtle);
position: relative;
transition: background-color 0.2s ease;
}
.ecp-minicart-item:last-child {
border-bottom: none;
}
/* --- 3. Item hover — subtle bg shift, remove button reveal --- */
.ecp-minicart-item:hover {
background-color: var(--ecellar-accent-bg-subtle);
}
.ecp-minicart-item-image {
width: 56px;
height: 72px;
overflow: hidden;
margin-right: 12px;
flex-shrink: 0;
}
.ecp-minicart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.ecp-minicart-item-details {
flex: 1;
min-width: 0;
}
.ecp-minicart-item-name {
font-weight: 500;
font-size: 14px;
margin-bottom: 4px;
color: var(--ecellar-text-primary);
line-height: 1.3;
}
.ecp-minicart-item-price {
font-weight: 600;
font-size: 14px;
color: var(--ecellar-accent);
margin-top: 4px;
}
.ecp-minicart-item-quantity {
font-size: 12px;
color: var(--ecellar-text-muted);
margin-top: 2px;
}
/* --- 3. Remove button — invisible until item hovered --- */
.ecp-minicart-item-remove {
position: absolute;
top: 10px;
right: 12px;
width: 24px;
height: 24px;
background: none;
border: none;
color: var(--ecellar-text-muted);
cursor: pointer;
font-size: 14px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 4px;
opacity: 0;
transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.ecp-minicart-item:hover .ecp-minicart-item-remove {
opacity: 1;
}
.ecp-minicart-item-remove:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
}
/* --- 3. Footer — subtotal + action buttons --- */
.ecp-minicart-footer {
padding: 14px 16px;
border-top: 1px solid var(--ecellar-border);
}
.ecp-minicart-subtotal {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.ecp-minicart-subtotal-label {
font-size: 14px;
font-weight: 600;
color: var(--ecellar-text-primary);
}
.ecp-minicart-subtotal-value {
font-size: 16px;
font-weight: 700;
color: var(--ecellar-accent);
}
/* --- 3. Action buttons — View Cart (outline) + Checkout (accent fill) --- */
.ecp-minicart-actions {
display: flex;
gap: 10px;
}
.ecp-minicart-view-cart,
.ecp-minicart-checkout {
flex: 1;
padding: 10px 12px;
border-radius: 4px;
text-align: center;
font-weight: 600;
font-size: 13px;
cursor: pointer;
text-decoration: none;
display: block;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* View Cart — outline style */
.ecp-minicart-view-cart {
background-color: transparent;
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent);
}
.ecp-minicart-view-cart:hover {
background-color: var(--ecellar-accent-bg-subtle);
border-color: var(--ecellar-accent-hover);
color: var(--ecellar-accent);
}
/* Checkout — accent fill with hover glow */
.ecp-minicart-checkout {
background-color: var(--ecellar-accent);
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent-text);
}
.ecp-minicart-checkout:hover {
background-color: var(--ecellar-accent-hover);
border-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 12px var(--ecellar-accent-shadow);
}
/* ============================================================
4. SIDECART & SIDEKICK
============================================================ */
/* --- 4a. SideCart container --- */
/*
* CDN default: white bg, full-width mobile, 500px at 550px breakpoint,
* flex column, z-index 499. We override colors, width, and shadow.
* !important on position/display needed because CDN sets them inline-style.
*/
.ecp-sidecart {
background-color: var(--public-color-background);
color: var(--public-color-text);
font-family: var(--public-font-body);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
width: 480px;
max-width: 95vw;
z-index: 999;
overflow-x: hidden;
}
/* --- 4a. Slide animation — work with eCellar's transition classes --- */
.ecp-transition-slide-from-right-start {
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.ecp-transition-slide-from-right-show {
transform: translateX(0);
}
/* --- 4a. Backdrop overlay --- */
.ecp-sidecart-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 998;
}
/* --- 4b. SideCart header --- */
.ecp-sidecart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--ecellar-border-subtle);
background-color: var(--public-color-background);
position: sticky;
top: 0;
z-index: 10;
}
.ecp-sidecart-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--ecellar-text-primary);
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Close button (dismiss link) */
.ecp-sidecart-header .ecp-dismiss-link-2 {
background: none;
border: none;
color: var(--ecellar-text-muted);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ecp-sidecart-header .ecp-dismiss-link-2:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
}
.ecp-sidecart-header .ecp-dismiss-link-2 svg {
fill: currentColor;
width: 24px;
height: 24px;
}
/* --- 4c. SideCart content area --- */
.ecp-sidecart-content {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
/* CDN default: padding: 1.5rem — override to remove horizontal padding */
padding: 20px 0 !important;
box-sizing: border-box;
width: 100%;
min-width: 0;
/* CDN sets height:100vh — override to let flex handle it */
height: auto !important;
background-color: transparent;
}
/* Add horizontal padding to content children.
The form.ecp-form gets NO padding so .ecp-suggestions can span full width.
Instead, padding is applied to inner children of the form. */
.ecp-sidecart-content > *:not(.ecp-form):not(form) {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Form itself: no horizontal padding — suggestions needs full width.
display:flex for child ordering (suggestions order:2, products order:1).
!important required because CDN loads AFTER our CSS. */
.ecp-sidecart-content > .ecp-form,
.ecp-sidecart-content > form,
.ecp-sidecart .ecp-form,
.ecp_SideCart .ecp-form {
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background-color: transparent;
}
/* Form children get padding except suggestions.
!important required because CDN loads AFTER our CSS. */
.ecp-sidecart .ecp-form > *:not(.ecp-suggestions),
.ecp-sidecart form > .ecp-section,
.ecp_SideCart .ecp-form > *:not(.ecp-suggestions) {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Nuclear: force box-sizing on all sidecart children.
CDN grid system causes cart items to sit side-by-side. */
.ecp-sidecart *,
.ecp_SideCart * {
box-sizing: border-box !important;
}
/* Constrain direct children to sidecart width — but exempt
.ecp-slider-slides children which scroll horizontally,
and suggestions section which breaks out of padding */
.ecp-sidecart > *,
.ecp-sidecart-content > * {
max-width: 100% !important;
}
/* Suggestions spans full width — no padding constraint */
.ecp-sidecart .ecp-suggestions {
max-width: none !important;
}
.ecp-sidecart [class*="ecp-grid-col-"],
.ecp-sidecart [class*="ecp-form-row-col-"],
.ecp-sidecart [class*="ecp-buttonset-col-"],
.ecp-sidecart .ecp-columns-left,
.ecp-sidecart .ecp-columns-right,
.ecp-sidecart .ecp-left,
.ecp-sidecart .ecp-right,
.ecp_SideCart [class*="ecp-grid-col-"],
.ecp_SideCart [class*="ecp-form-row-col-"],
.ecp_SideCart .ecp-columns-left,
.ecp_SideCart .ecp-columns-right {
float: none !important;
width: 100% !important;
clear: both !important;
}
/* Force products section to be a vertical block container */
.ecp-sidecart .ecp-section[data-ecp-handle="products"],
.ecp_SideCart .ecp-section[data-ecp-handle="products"],
.ecp-sidecart [role="list"],
.ecp_SideCart [role="list"] {
display: block !important;
width: 100% !important;
float: none !important;
}
/* --- 4d. SideCart empty state --- */
.ecp-sidecart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
min-height: 200px;
/* CDN sets height:100vh — override for proper centering */
height: auto !important; /* CDN override: default is height:100vh */
}
.ecp-sidecart-empty p,
.ecp-sidecart-empty-message p {
color: var(--ecellar-text-muted);
font-size: 1rem;
margin-bottom: 20px;
}
.ecp-sidecart-empty button,
.ecp-sidecart-empty-message button {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp-sidecart-empty button:hover,
.ecp-sidecart-empty-message button:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* --- 4e. Cart items heading (CSS-generated, matches suggestions h3 style) --- */
.ecp-sidecart .ecp-section[data-ecp-handle="products"]::before {
content: "Your Cart";
display: block;
color: var(--ecellar-text-secondary);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 0 12px;
margin: 0;
text-align: center;
}
/* --- 4e. Cart items — each item is a full-width row (image left, details right) --- */
.ecp-sidecart .ecp-cart-item,
.ecp_SideCart .ecp-cart-item {
display: flex !important;
gap: 14px;
padding: 14px;
background-color: var(--ecellar-card-bg);
border-radius: 8px;
margin-bottom: 8px;
width: 100% !important;
min-width: 0;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ecp-sidecart .ecp-cart-item:last-child {
margin-bottom: 0;
}
.ecp-sidecart .ecp-cart-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Item image — vertical rectangle for wine bottles */
.ecp-sidecart .ecp-cart-item-image,
.ecp_SideCart .ecp-cart-item-image {
flex: 0 0 90px !important;
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
height: 120px !important;
min-height: 120px !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 6px;
background-color: #fff;
padding: 0;
}
.ecp-sidecart .ecp-cart-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: scale(1.25);
}
/* Item details wrapper */
.ecp-sidecart .ecp-cart-item-details,
.ecp-sidecart .ecp-cart-item-product {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
/* Product name */
.ecp-sidecart .ecp-cart-item-product-name h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
color: var(--ecellar-surface-text);
}
.ecp-sidecart .ecp-cart-item-product-name h3 a {
color: var(--ecellar-surface-text);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp-sidecart .ecp-cart-item-product-name h3 a:hover {
color: var(--ecellar-accent);
}
/* Product info row (name + remove button)
!important: CDN sets margin-bottom:1rem via .ecp_SideCart */
.ecp-sidecart .ecp-cart-item-product-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0 !important;
gap: 8px;
color: var(--ecellar-surface-text-secondary);
}
/* Cart item detail row (price, quantity, total)
Grid layout sidesteps CDN's flex:2/flex:1 on children.
!important on all properties — CDN loads dynamically and can override. */
.ecp-sidecart .ecp-cart-item-detail,
.ecp_SideCart .ecp-cart-item-detail {
display: grid !important;
grid-template-columns: 1fr auto auto !important;
gap: 16px !important;
align-items: center !important;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--ecellar-border-subtle);
}
/* Price — takes remaining space, truncates if squeezed */
.ecp-sidecart .ecp-cart-item-price,
.ecp_SideCart .ecp-cart-item-price {
min-width: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ecp-sidecart .ecp-cart-item-price .ecp-price {
color: var(--ecellar-surface-text);
font-weight: 600;
}
/* Quantity selector — auto-sized to content */
.ecp-sidecart .ecp-cart-item-quantity,
.ecp_SideCart .ecp-cart-item-quantity {
text-align: center !important;
margin-right: 12px !important;
}
.ecp-sidecart .ecp-cart-item-quantity select {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
color: var(--ecellar-surface-text);
padding: 6px 24px 6px 10px !important;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
transition: border-color 0.2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px 6px;
}
.ecp-sidecart .ecp-cart-item-quantity select:hover {
border-color: var(--ecellar-accent);
}
/* Item total — accent, never wraps */
.ecp-sidecart .ecp-cart-item-total,
.ecp_SideCart .ecp-cart-item-total {
text-align: right !important;
white-space: nowrap !important;
color: var(--ecellar-surface-text);
margin-left: 4px !important;
}
.ecp-sidecart .ecp-cart-item-total strong {
color: var(--ecellar-accent);
font-size: 1rem;
}
/* Remove item button — subtle → accent on hover */
.ecp-sidecart .ecp-cart-item-remove {
opacity: 0.5;
transition: opacity 0.2s ease;
padding: 4px;
cursor: pointer;
background: none;
border: none;
}
.ecp-sidecart .ecp-cart-item-remove:hover {
opacity: 1;
}
.ecp-sidecart .ecp-cart-item-remove svg {
fill: var(--ecellar-surface-text-muted);
width: 18px;
height: 18px;
transition: fill 0.2s ease;
}
.ecp-sidecart .ecp-cart-item-remove:hover svg {
fill: var(--ecellar-accent);
}
/* --- 4f. Cart summary & grid rows --- */
.ecp-sidecart .ecp-cart-summary {
color: var(--ecellar-text-primary);
}
.ecp-sidecart .ecp-grid-row {
color: var(--ecellar-text-primary);
padding: 6px 0;
}
.ecp-sidecart .ecp-grid-row span {
color: var(--ecellar-text-primary);
}
/* Section containers — flex children of .ecp-sidecart-content for ordering control.
Suggestions section needs overflow:visible for slider arrows. */
.ecp-sidecart .ecp-section,
.ecp_SideCart .ecp-section {
display: block !important;
width: 100% !important;
min-width: 0;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
overflow: hidden;
}
/* Suggestions container clips content; arrows are inside .ecp-slider */
.ecp-sidecart .ecp-suggestions,
.ecp_SideCart .ecp-suggestions {
overflow: hidden !important;
}
/* Ordering: suggestions first (top), products below, summary last.
.ecp-suggestions is a direct child of .ecp-form (NOT inside .ecp-section).
.ecp-section[data-ecp-handle="products"] IS an .ecp-section. */
.ecp-sidecart .ecp-suggestions { order: 1; }
.ecp-sidecart .ecp-section[data-ecp-handle="products"] { order: 2; }
.ecp-sidecart .ecp-section[data-ecp-handle="summary"] { order: 3; }
/* --- 4g. Suggestion carousel/slider --- */
.ecp-sidecart .ecp-suggestions {
background-color: transparent;
padding: 12px 0 !important;
border-radius: 8px;
margin: 0 0 12px !important;
width: 100% !important;
min-width: 0;
box-sizing: border-box !important;
overflow: hidden !important;
}
.ecp-sidecart .ecp-suggestions h3 {
color: var(--ecellar-text-secondary);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 12px;
padding: 0 20px;
}
/* Slider container — overflow hidden clips next slide from peeking out.
CDN default: margin: 0 -1.5rem; padding: 0 1.5rem — kill both. */
.ecp-sidecart .ecp-slider {
position: relative;
width: 100% !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* Slides — smooth horizontal scroll. !important to beat CDN. */
.ecp-sidecart .ecp-slider-slides {
display: flex !important;
gap: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 4px 10px 8px !important;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
width: 100% !important;
box-sizing: border-box !important;
list-style: none !important;
margin: 0 !important;
scrollbar-width: thin;
scrollbar-color: var(--ecellar-scrollbar-thumb) var(--ecellar-scrollbar-track);
}
/* Hide webkit scrollbar for cleaner look */
.ecp-sidecart .ecp-slider-slides::-webkit-scrollbar {
height: 4px;
}
.ecp-sidecart .ecp-slider-slides::-webkit-scrollbar-track {
background: var(--ecellar-scrollbar-track);
border-radius: 2px;
}
.ecp-sidecart .ecp-slider-slides::-webkit-scrollbar-thumb {
background: var(--ecellar-scrollbar-thumb);
border-radius: 2px;
}
/* Individual slide card — compact cards, ~2 visible at a time.
CDN default: flex: 1 0 100%; background: #eaeaea — override both. */
.ecp-sidecart .ecp-slider-slides li {
flex: 0 0 60% !important;
min-width: 0 !important;
max-width: 60% !important;
width: 60% !important;
margin: 0 6px 0 0 !important;
background-color: var(--ecellar-card-bg) !important;
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 8px !important;
box-sizing: border-box !important;
list-style: none;
margin: 0;
display: flex;
align-items: stretch;
scroll-snap-align: start;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp-sidecart .ecp-slider-slides li:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
/* Suggestion card layout — horizontal: image left, info right.
CDN default: padding: 1rem 1.5rem — override to tighten. */
.ecp-sidecart .ecp-suggestion,
.ecp_SideCart .ecp-suggestion {
display: flex !important;
flex-direction: row !important;
height: 100%;
gap: 10px !important;
align-items: center !important;
padding: 0 !important;
}
/* Suggestion image */
.ecp-sidecart .ecp-suggestion-image {
flex: 0 0 90px;
width: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
overflow: hidden;
}
.ecp-sidecart .ecp-suggestion-image img {
width: 100%;
height: 100%;
max-height: 400px;
object-fit: contain;
display: block;
}
/* Suggestion info */
.ecp-sidecart .ecp-suggestion-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.ecp-sidecart .ecp-suggestion-name h4 {
font-size: 0.8rem;
color: var(--ecellar-surface-text);
margin: 0;
line-height: 1.2;
font-weight: 600;
}
.ecp-sidecart .ecp-suggestion-name h4 a {
color: var(--ecellar-surface-text);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s ease;
}
.ecp-sidecart .ecp-suggestion-name h4 a:hover {
color: var(--ecellar-accent);
}
/* Suggestion detail — price + add button */
.ecp-sidecart .ecp-suggestion-detail {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
}
.ecp-sidecart .ecp-suggestion-price .ecp-price {
font-size: 1rem;
color: var(--ecellar-accent);
font-weight: 700;
}
.ecp-sidecart .ecp-suggestion-action button {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp-sidecart .ecp-suggestion-action button:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* Slider arrows */
.ecp-sidecart .ecp-slider-arrow {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
opacity: 0.9;
transition: opacity 0.2s ease, background-color 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
font-size: 1.1rem;
line-height: 1;
}
.ecp-sidecart .ecp-slider-arrow:hover {
opacity: 1;
background-color: var(--ecellar-accent-hover);
}
.ecp-sidecart .ecp-slider-arrow-prev {
left: 8px;
}
.ecp-sidecart .ecp-slider-arrow-next {
right: 8px;
}
/* --- 4h. SideCart footer — pinned with scroll-depth shadow --- */
.ecp-sidecart-footer {
border-top: 2px solid var(--ecellar-border);
padding: 16px 20px;
background-color: var(--public-color-background);
/* CDN default: #eaeaea bg — override to match theme */
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
flex: none;
}
.ecp-sidecart-footer button {
margin-bottom: 0;
}
/* Button pair — Continue Shopping + Checkout */
.ecp-sidecart .ecp-button-pair {
display: flex;
gap: 10px;
margin-top: 16px;
}
.ecp-sidecart .ecp-button-pair button {
flex: 1;
padding: 12px;
font-size: 0.95rem;
border-radius: 4px;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* First button — Continue Shopping (secondary) */
.ecp-sidecart .ecp-button-pair button:first-child {
background-color: transparent;
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent);
}
.ecp-sidecart .ecp-button-pair button:first-child:hover {
background-color: var(--ecellar-accent-bg-subtle);
}
/* Last button — Checkout (primary accent fill) */
.ecp-sidecart .ecp-button-pair button:last-child {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
}
.ecp-sidecart .ecp-button-pair button:last-child:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 12px var(--ecellar-accent-shadow);
}
/* --- 4i. SideCart custom scrollbar --- */
.ecp-sidecart-content::-webkit-scrollbar {
width: 6px;
}
.ecp-sidecart-content::-webkit-scrollbar-track {
background: var(--ecellar-scrollbar-track);
}
.ecp-sidecart-content::-webkit-scrollbar-thumb {
background: var(--ecellar-scrollbar-thumb);
border-radius: 3px;
}
.ecp-sidecart-content::-webkit-scrollbar-thumb:hover {
background: var(--ecellar-text-muted);
}
/* Firefox scrollbar */
.ecp-sidecart-content {
scrollbar-width: thin;
scrollbar-color: var(--ecellar-scrollbar-thumb) var(--ecellar-scrollbar-track);
}
/* --- 4j. SideCart form inputs (promo codes etc.) --- */
.ecp-sidecart .ecp-form input[type="text"] {
background-color: var(--ecellar-bg-input);
border: 1px solid var(--ecellar-border);
color: var(--ecellar-text-primary);
}
/* --- 4k. SideCart links --- */
.ecp-sidecart a {
color: var(--ecellar-accent);
transition: color 0.2s ease;
}
.ecp-sidecart a:hover {
color: var(--ecellar-accent-hover);
}
/* Dismiss link (generic close link used across eCellar) */
.ecp-sidecart a.ecp-dismiss-link {
color: var(--ecellar-text-muted);
text-decoration: none;
}
.ecp-sidecart a.ecp-dismiss-link:hover {
color: var(--ecellar-accent);
}
/* ============================================================
4L. SIDEKICK (Added to Cart confirmation)
============================================================ */
/* --- 4l. Sidekick container --- */
/*
* CDN default: white bg, fixed top 0, full-width mobile,
* 400px + border at 550px. We override for themed slide-in panel.
*/
.ecp-sidekick {
background-color: var(--ecellar-card-bg);
color: var(--ecellar-surface-text);
font-family: var(--public-font-body);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
border: 1px solid var(--ecellar-border-subtle);
border-right: none;
z-index: 1000;
}
/* --- 4l. Sidekick header --- */
.ecp-sidekick-header {
background-color: var(--ecellar-accent-bg-subtle);
border-bottom: 1px solid var(--ecellar-border-subtle);
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.ecp-sidekick-header h2 {
color: var(--ecellar-surface-text);
font-size: 1rem;
font-weight: 700;
margin: 0;
padding: 0 1rem;
line-height: 3rem;
display: flex;
align-items: center;
gap: 8px;
}
/* Success indicator — accent checkmark before title */
.ecp-sidekick-header h2::before {
content: "\2713";
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
/* Sidekick dismiss link */
.ecp-sidekick-header .ecp-dismiss-link {
color: var(--ecellar-surface-text-muted);
text-decoration: none;
padding-right: 1rem;
line-height: 3rem;
transition: color 0.2s ease;
}
.ecp-sidekick-header .ecp-dismiss-link:hover {
color: var(--ecellar-accent);
}
/* --- 4l. Sidekick content --- */
.ecp-sidekick-content {
padding: 16px;
color: var(--ecellar-surface-text);
}
/* Product info within sidekick */
.ecp-sidekick .ecp-product-image img {
border-radius: 6px;
max-height: 120px;
object-fit: contain;
}
.ecp-sidekick .ecp-product-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--ecellar-surface-text);
line-height: 1.3;
margin: 8px 0 4px;
}
.ecp-sidekick .ecp-price {
color: var(--ecellar-accent);
font-weight: 700;
font-size: 1rem;
}
/* Sidekick buttons — same pattern as SideCart */
.ecp-sidekick button {
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Continue Shopping — outline */
.ecp-sidekick .ecp-btn-secondary,
.ecp-sidekick .ecp-form-btn-secondary {
background-color: transparent;
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent);
}
.ecp-sidekick .ecp-btn-secondary:hover,
.ecp-sidekick .ecp-form-btn-secondary:hover {
background-color: var(--ecellar-accent-bg-subtle);
}
/* View Cart — accent fill */
.ecp-sidekick .ecp-button-pair button:last-child {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
}
.ecp-sidekick .ecp-button-pair button:last-child:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 12px var(--ecellar-accent-shadow);
}
/* Sidekick links */
.ecp-sidekick a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp-sidekick a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* Sidekick suggestion (if present) */
.ecp-sidekick .ecp-suggestion-name h4 {
color: var(--ecellar-surface-text);
font-size: 0.875rem;
}
.ecp-sidekick .ecp-suggestion-price .ecp-price {
color: var(--ecellar-accent);
}
/* ============================================================
5. MAIN CART (.ecp_Cart)
============================================================ */
/* --- 5a. Cart container & header --- */
.ecp_Cart {
max-width: 1200px;
margin: 0 auto;
padding: 24px 20px;
color: var(--ecellar-text-primary);
font-family: var(--public-font-body);
}
.ecp_Cart h1 {
font-family: var(--public-font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin: 0 0 8px;
padding-bottom: 16px;
border-bottom: 2px solid var(--ecellar-accent);
}
.ecp_Cart .item-count {
font-size: 1rem;
color: var(--ecellar-text-secondary);
margin-bottom: 32px;
}
/* Hide redundant cart contents header */
.ecp_Cart .ecp-cart-contents-header {
display: none;
}
/* --- 5b. Cart wrapper — 2-column on desktop, stacked on mobile --- */
.ecp_Cart .ecp-cart-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
/* CDN grid system causes cart items to sit side-by-side — force full-width stacking */
.ecp_Cart [class*="ecp-grid-col-"],
.ecp_Cart [class*="ecp-form-row-col-"],
.ecp_Cart [class*="ecp-buttonset-col-"],
.ecp_Cart .ecp-columns-left,
.ecp_Cart .ecp-columns-right,
.ecp_Cart .ecp-left,
.ecp_Cart .ecp-right {
float: none !important;
width: 100% !important;
clear: both !important;
}
/* Force products section to be a vertical block container */
.ecp_Cart .ecp-section[data-ecp-handle="products"],
.ecp_Cart [role="list"] {
display: block !important;
width: 100% !important;
float: none !important;
}
/* --- 5c. Cart items — card-on-surface style (matches sidecart) --- */
.ecp_Cart .ecp-cart-item {
display: flex !important;
gap: 16px;
padding: 16px;
background-color: var(--ecellar-card-bg);
border-radius: 8px;
margin-bottom: 10px;
width: 100% !important;
min-width: 0;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
position: relative;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ecp_Cart .ecp-cart-item:last-child {
margin-bottom: 0;
}
.ecp_Cart .ecp-cart-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Item image — vertical rectangle for wine bottles */
.ecp_Cart .ecp-cart-item-image {
flex: 0 0 90px !important;
width: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
height: 120px !important;
min-height: 120px !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 6px;
background-color: #fff;
padding: 0;
}
.ecp_Cart .ecp-cart-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: scale(1.25);
}
/* Item details (title + per-unit price) */
.ecp_Cart .ecp-cart-item-details {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-width: 0;
}
.ecp_Cart .ecp-cart-item-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--ecellar-surface-text);
line-height: 1.3;
}
.ecp_Cart .ecp-cart-item-title a {
color: var(--ecellar-surface-text);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_Cart .ecp-cart-item-title a:hover {
color: var(--ecellar-accent);
}
.ecp_Cart .ecp-cart-item-price {
font-size: 0.875rem;
color: var(--ecellar-surface-text-secondary);
font-weight: 400;
margin: 0;
}
/* Product name link (h3 variant used inside some cart items) */
.ecp_Cart .ecp-cart-item-product-name h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--ecellar-surface-text);
}
.ecp_Cart .ecp-cart-item-product-name h3 a {
color: var(--ecellar-surface-text);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_Cart .ecp-cart-item-product-name h3 a:hover {
color: var(--ecellar-accent);
}
/* Product info row */
.ecp_Cart .ecp-cart-item-product-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0 !important;
gap: 8px;
color: var(--ecellar-surface-text-secondary);
font-size: 0.875rem;
}
/* Cart item detail row (price, quantity, total) — grid layout */
.ecp_Cart .ecp-cart-item-detail {
display: grid !important;
grid-template-columns: 1fr auto auto !important;
gap: 16px !important;
align-items: center !important;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--ecellar-border-subtle);
}
/* --- 5d. Quantity select — fully themed --- */
.ecp_Cart .ecp-cart-item-quantity {
flex: 0 0 auto;
display: flex;
align-items: center;
text-align: center !important;
margin-right: 12px !important;
}
.ecp_Cart .ecp-cart-item-quantity select {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
color: var(--ecellar-surface-text);
padding: 6px 24px 6px 10px !important;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
transition: border-color 0.2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px 6px;
}
.ecp_Cart .ecp-cart-item-quantity select:hover {
border-color: var(--ecellar-accent);
}
.ecp_Cart .ecp-cart-item-quantity select:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
/* --- 5e. Line total --- */
.ecp_Cart .ecp-cart-item-total {
flex: 0 0 auto;
min-width: 72px;
text-align: right !important;
white-space: nowrap !important;
color: var(--ecellar-surface-text);
display: flex;
align-items: center;
justify-content: flex-end;
}
.ecp_Cart .ecp-cart-item-total .total-value,
.ecp_Cart .ecp-cart-item-total strong,
.ecp_Cart .ecp-cart-item-total .ecp-price {
font-size: 1rem;
font-weight: 600;
color: var(--ecellar-accent);
}
/* --- 5f. Remove button — subtle → accent on hover --- */
.ecp_Cart .ecp-cart-item-remove {
opacity: 0.5;
transition: opacity 0.2s ease;
padding: 4px;
cursor: pointer;
background: none;
border: none;
position: absolute;
top: 12px;
right: 12px;
}
.ecp_Cart .ecp-cart-item-remove:hover {
opacity: 1;
}
.ecp_Cart .ecp-cart-item-remove svg {
fill: var(--ecellar-surface-text-muted);
width: 18px;
height: 18px;
transition: fill 0.2s ease;
}
.ecp_Cart .ecp-cart-item-remove:hover svg {
fill: var(--ecellar-accent);
}
/* --- 5g. Allocation section within cart --- */
.ecp_Cart .ecp-section[data-ecp-handle="allocation_section"] {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--ecellar-border-subtle);
}
.ecp_Cart .ecp-section[data-ecp-handle="allocation_section"] h3.ecp-section-subtitle,
.ecp_Cart .ecp-section[data-ecp-handle="allocation_section"] .ecp-section-title {
background-color: var(--ecellar-accent-bg-subtle);
color: var(--ecellar-text-primary);
padding: 10px 16px;
margin: 0 0 16px;
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
border-left: 3px solid var(--ecellar-accent);
}
.ecp_Cart .ecp-section[data-ecp-handle="allocation_section"] .ecp-list-item {
padding: 12px 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_Cart .ecp-section[data-ecp-handle="allocation_section"] .ecp-list-item:last-child {
border-bottom: none;
}
/* --- 5h. Order summary sidebar --- */
.ecp_Cart .ecp-cart-summary {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
padding: 24px;
}
.ecp_Cart .ecp-cart-summary h2,
.ecp_Cart .ecp-cart-summary h3 {
font-family: var(--public-font-heading);
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--ecellar-accent);
color: var(--ecellar-surface-text);
}
/* Summary rows (subtotal, tax, shipping, discounts) */
.ecp_Cart .ecp-cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 0.9375rem;
}
.ecp_Cart .ecp-cart-summary-label {
color: var(--ecellar-surface-text-secondary);
font-weight: 400;
}
.ecp_Cart .ecp-cart-summary-value {
color: var(--ecellar-surface-text);
font-weight: 500;
}
/* Discount row — accent color for savings */
.ecp_Cart .ecp-cart-summary-row.discount .ecp-cart-summary-value {
color: var(--ecellar-accent);
}
/* Grand total row — larger, bolder */
.ecp_Cart .ecp-cart-summary-row.total,
.ecp_Cart .ecp-cart-summary-row:last-of-type {
padding-top: 12px;
margin-top: 8px;
border-top: 2px solid var(--ecellar-accent);
}
.ecp_Cart .ecp-cart-summary-row.total .ecp-cart-summary-label,
.ecp_Cart .ecp-cart-summary-row:last-of-type .ecp-cart-summary-label {
font-size: 1.0625rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_Cart .ecp-cart-summary-row.total .ecp-cart-summary-value,
.ecp_Cart .ecp-cart-summary-row:last-of-type .ecp-cart-summary-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
/* Subtotals & grandtotals in summary context */
.ecp_Cart .ecp-cart-summary .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 12px;
margin-top: 8px;
}
.ecp_Cart .ecp-cart-summary .ecp-grandtotals {
border-top: 2px solid var(--ecellar-accent);
padding-top: 12px;
margin-top: 8px;
}
/* Grid rows within summary */
.ecp_Cart .ecp-cart-summary .ecp-grid-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
color: var(--ecellar-surface-text);
}
.ecp_Cart .ecp-cart-summary .ecp-grid-row span:first-child {
color: var(--ecellar-surface-text-secondary);
}
/* Checkout button — full-width accent with hover glow */
.ecp_Cart .ecp-cart-summary button[data-ecp-action="checkout"],
.ecp_Cart .ecp-cart-summary .ecp-form-btn,
.ecp_Cart .ecp-cart-summary .ecp-btn-primary {
width: 100%;
padding: 14px 16px;
margin-top: 20px;
border-radius: 4px;
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.02em;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp_Cart .ecp-cart-summary button[data-ecp-action="checkout"]:hover,
.ecp_Cart .ecp-cart-summary .ecp-form-btn:hover,
.ecp_Cart .ecp-cart-summary .ecp-btn-primary:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 16px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
/* Continue Shopping link within summary */
.ecp_Cart .ecp-cart-summary a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_Cart .ecp-cart-summary a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* Promo code input in summary */
.ecp_Cart .ecp-cart-summary input[type="text"] {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
color: var(--ecellar-surface-text);
border-radius: 4px;
padding: 8px 12px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_Cart .ecp-cart-summary input[type="text"]:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
/* ============================================================
6. PRODUCT GRID & CARDS (was ecellar-products.css)
============================================================ */
/* --- 6a. Category containers --- */
.ecp_CategoriesList,
.ecp_CategoryWithProducts,
.ecp-component[data-ecp-view="categorieslist"],
.ecp-component[data-ecp-view="categorywithproducts"] {
width: 100%;
margin-bottom: 40px;
display: block;
}
.ecp_CategoriesList__Category,
.ecp_CategoryWithProducts__Category,
.ecp-category-section {
width: 100%;
margin-bottom: 48px;
display: block;
}
/* --- 6b. Category title — centered with horizontal rules on each side --- */
.ecp_CategoriesList__Category h2,
.ecp_CategoryWithProducts h2,
.ecp-category-title {
font-family: var(--public-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin: 0 0 24px;
text-align: center;
display: flex;
align-items: center;
gap: 24px;
}
/* Horizontal rules flanking title text */
.ecp_CategoriesList__Category h2::before,
.ecp_CategoriesList__Category h2::after,
.ecp_CategoryWithProducts h2::before,
.ecp_CategoryWithProducts h2::after,
.ecp-category-title::before,
.ecp-category-title::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--ecellar-accent);
opacity: 0.6;
}
/* --- 6c. Product grid — 3-column base (responsive breakpoints in Phase 19) --- */
.ecp_CategoryWithProducts .ecp-x-list,
.ecp_CategoriesList__Category .ecp-x-list,
.ecp-products-list,
.ecp-products,
.ecp-wrapper [data-ecp-handle="products"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin: 24px 0;
width: 100%;
}
/* --- 6d. Product card — elevated surface with hover lift --- */
.ecp-wrapper .ecp-list-item {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
will-change: transform;
backface-visibility: hidden;
}
.ecp-wrapper .ecp-list-item:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
border-color: var(--ecellar-accent);
}
/* --- 6d-i. Card image — overflow hidden for hover zoom --- */
.ecp-wrapper .ecp-list-item .ecp-columns {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 4px 20px 0;
width: 100%;
box-sizing: border-box;
}
.ecp-wrapper .ecp-list-item .ecp-columns-left {
width: 100%;
text-align: center;
overflow: hidden;
margin-bottom: 12px;
background-color: #fff;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
}
.ecp-wrapper .ecp-list-item .ecp-columns-left img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 240px;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
will-change: transform;
backface-visibility: hidden;
}
/* Image zoom on card hover */
.ecp-wrapper .ecp-list-item:hover .ecp-columns-left img {
transform: scale(1.03);
}
.ecp-wrapper .ecp-list-item .ecp-columns-right {
width: 100%;
text-align: center;
}
/* --- 6d-ii. Card title --- */
.ecp-wrapper .ecp-list-item h3 {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 8px;
padding: 20px 20px 0;
color: var(--ecellar-surface-text);
line-height: 1.3;
text-align: center;
}
.ecp-wrapper .ecp-list-item h3 a {
color: var(--ecellar-surface-text);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp-wrapper .ecp-list-item h3 a:hover {
color: var(--ecellar-accent);
}
/* --- 6d-iii. Card price --- */
.ecp-wrapper .ecp-list-item .ecp-price {
font-size: 1.125rem;
color: var(--ecellar-surface-text);
font-weight: 700;
margin: 8px auto;
text-align: center;
}
/* --- 6d-iv. Card description / HTML content --- */
.ecp-wrapper .ecp-list-item .ecp-html-content {
color: var(--ecellar-surface-text-muted);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 12px;
padding: 0 20px;
flex-grow: 1;
text-align: center;
}
/* --- 6d-v. Card quantity + add-to-cart form --- */
.ecp-wrapper .ecp-list-item .ecp-section[data-ecp-handle="available"] {
margin-top: auto;
padding: 0 20px 20px;
width: 100%;
box-sizing: border-box;
}
.ecp-wrapper .ecp-list-item .ecp-form {
margin: 0;
padding: 0;
background: none;
border: none;
}
.ecp-wrapper .ecp-list-item .ecp-form-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
flex-wrap: nowrap;
}
.ecp-wrapper .ecp-list-item .ecp-form-row-col-25 {
flex: 0 0 auto;
width: auto;
padding: 0;
}
.ecp-wrapper .ecp-list-item .ecp-form-row-col-75 {
flex: 1;
width: auto;
padding: 0;
}
.ecp-wrapper .ecp-list-item .ecp-quantity-control {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.ecp-wrapper .ecp-list-item select[name="product_qty"] {
width: 56px;
text-align: center;
text-align-last: center;
padding: 10px 8px;
border: 1px solid var(--ecellar-border);
border-radius: 4px;
background-color: var(--ecellar-bg-input);
color: var(--ecellar-surface-text);
font-size: 0.9375rem;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp-wrapper .ecp-list-item select[name="product_qty"]:hover {
border-color: var(--ecellar-accent);
}
.ecp-wrapper .ecp-list-item select[name="product_qty"]:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
/* --- 6d-vi. Add-to-cart button — accent fill, confident --- */
.ecp-wrapper .ecp-list-item button[data-ecp-action="add-to-cart"] {
width: 100%;
padding: 10px 16px;
font-size: 0.9375rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: var(--public-radius-button);
background-color: var(--ecellar-accent);
border: none;
color: var(--ecellar-accent-text);
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp-wrapper .ecp-list-item button[data-ecp-action="add-to-cart"]:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 12px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
/* Form tip ("You have X in cart") */
.ecp-wrapper .ecp-list-item .ecp-form-tip {
font-size: 0.8125rem;
color: var(--ecellar-text-muted);
margin-top: 6px;
text-align: center;
}
/* --- 6e. Sale price display — muted strikethrough + accent current --- */
.ecp-wrapper .ecp-list-item .ecp-price-discounted {
font-size: 1.125rem;
color: var(--ecellar-accent);
font-weight: 700;
display: inline-block;
margin-right: 8px;
}
.ecp-wrapper .ecp-list-item .ecp-price-regular {
font-size: 0.9375rem;
color: var(--ecellar-text-muted);
text-decoration: line-through;
display: inline-block;
font-weight: 400;
}
/* --- 6f. Callout box (unavailable / allocated products) --- */
.ecp-wrapper .ecp-list-item .ecp-callout-box {
background-color: var(--ecellar-accent-bg-subtle);
border: 1px solid var(--ecellar-accent-muted);
padding: 12px;
border-radius: 4px;
text-align: center;
color: var(--ecellar-accent);
margin: 0 20px 20px;
}
.ecp-wrapper .ecp-list-item .ecp-callout-box [data-ecp-handle^="status_"] {
color: var(--ecellar-accent);
font-weight: 500;
}
/* Allocation-only status — rewrite text */
.ecp-wrapper .ecp-list-item .ecp-callout-box [data-ecp-handle="status_restricted_allocated"] {
font-size: 0;
}
.ecp-wrapper .ecp-list-item .ecp-callout-box [data-ecp-handle="status_restricted_allocated"]::after {
content: "LIST MEMBER ALLOCATION ONLY";
font-size: 0.8125rem;
color: var(--ecellar-accent);
font-weight: 600;
letter-spacing: 0.04em;
}
/* --- 6f. HTML subtitle (category subtitles) --- */
.ecp-wrapper .ecp-html-subtitle {
text-align: center;
margin-bottom: 16px;
color: var(--ecellar-text-secondary);
}
/* --- 6f. General text content within product wrapper --- */
.ecp-wrapper .ecp-html-content {
color: var(--ecellar-text-secondary);
}
.ecp-wrapper .ecp-description,
.ecp-wrapper .ecp-subtitle,
.ecp-wrapper .ecp-message,
.ecp-wrapper .ecp-info {
color: var(--ecellar-text-secondary);
}
/* ============================================================
6G. PRODUCT DETAIL PAGE (.ecp_ProductDetail)
============================================================ */
/* --- 6g. Detail container --- */
.ecp_ProductDetail {
max-width: 1200px;
margin: 48px auto 32px;
padding: 0 20px;
color: var(--ecellar-text-primary);
}
/* --- 6g. Detail title — prominent with accent underline --- */
.ecp_ProductDetail h2 {
font-family: var(--public-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin: 0 0 8px;
padding-bottom: 12px;
border-bottom: 2px solid var(--ecellar-accent);
display: inline-block;
}
/* Subtitle */
.ecp_ProductDetail div.ecp-html-subtitle {
font-style: italic;
color: var(--ecellar-text-secondary);
margin-bottom: 16px;
}
/* --- 6g. Detail columns — image left, info right --- */
.ecp_ProductDetail .ecp-columns {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-bottom: 2rem;
padding-top: 24px;
}
.ecp_ProductDetail .ecp-columns-left {
flex: 0 0 40%;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
background-color: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.ecp_ProductDetail .ecp-columns-left img {
max-width: 340px;
width: 100%;
height: auto;
object-fit: contain;
aspect-ratio: 3/4;
border-radius: 8px;
}
.ecp_ProductDetail .ecp-columns-right {
flex: 1;
min-width: 0;
color: var(--ecellar-text-primary);
}
/* --- 6g. Detail price — large and clear --- */
.ecp_ProductDetail .ecp-price {
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-accent);
margin-bottom: 1rem;
}
.ecp_ProductDetail .ecp-price-discounted {
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-accent);
display: inline-block;
}
.ecp_ProductDetail .ecp-price-regular {
font-size: 1.25rem;
color: var(--ecellar-text-muted);
text-decoration: line-through;
display: inline-block;
padding-left: 12px;
font-weight: 400;
}
/* --- 6g. Detail quantity selector --- */
.ecp_ProductDetail select[name="product_qty"] {
text-align: center;
text-align-last: center;
width: 100%;
max-width: 150px;
padding: 10px;
border: 1px solid var(--ecellar-border);
border-radius: 4px;
background-color: var(--ecellar-bg-input);
color: var(--ecellar-text-primary);
font-size: 0.9375rem;
margin-bottom: 16px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_ProductDetail select[name="product_qty"]:hover {
border-color: var(--ecellar-accent);
}
.ecp_ProductDetail select[name="product_qty"]:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
/* --- 6g. Detail sections & forms --- */
.ecp_ProductDetail .ecp-section {
margin-bottom: 2rem;
}
.ecp_ProductDetail .ecp-form {
margin-bottom: 2rem;
}
.ecp_ProductDetail .ecp-form p {
color: var(--ecellar-text-secondary);
margin-bottom: 1rem;
}
/* --- 6g. Detail add-to-cart — large, accent, unmissable --- */
.ecp_ProductDetail .ecp-form button {
width: 100%;
max-width: 400px;
padding: 14px 28px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: var(--public-radius-button);
background-color: var(--ecellar-accent);
border: none;
color: var(--ecellar-accent-text);
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp_ProductDetail .ecp-form button:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 16px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
.ecp_ProductDetail .ecp-form-tip {
font-size: 0.875rem;
margin: 8px 0 0;
color: var(--ecellar-text-muted);
}
/* --- 6g. Detail callout box --- */
.ecp_ProductDetail .ecp-callout-box {
text-align: center;
background-color: var(--ecellar-accent-bg-subtle);
border: 1px solid var(--ecellar-accent-muted);
padding: 16px;
border-radius: 4px;
color: var(--ecellar-accent);
margin-bottom: 1rem;
}
/* ============================================================
6H. PRODUCT TABS
============================================================ */
.ecp-product-tabs {
margin-top: 32px;
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ecp-product-tab-headers {
display: flex;
border-bottom: 1px solid var(--ecellar-border-subtle);
margin-bottom: 20px;
gap: 0;
}
.ecp-product-tab-header {
padding: 10px 20px;
cursor: pointer;
color: var(--ecellar-text-secondary);
font-weight: 500;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ecp-product-tab-header:hover {
color: var(--ecellar-accent);
}
.ecp-product-tab-header.active {
color: var(--ecellar-accent);
border-bottom-color: var(--ecellar-accent);
}
.ecp-product-tab-content {
padding: 12px;
color: var(--ecellar-text-primary);
line-height: 1.6;
display: none;
}
.ecp-product-tab-content.active {
display: block;
}
/* ============================================================
6I. RELATED PRODUCTS
============================================================ */
.ecp-product-related {
margin-top: 48px;
}
.ecp-product-related-title {
font-family: var(--public-font-heading);
font-size: 1.375rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin-bottom: 24px;
padding-bottom: 8px;
border-bottom: 2px solid var(--ecellar-accent);
display: inline-block;
}
.ecp-product-related-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* --- 5k. Empty cart state --- */
.ecp_Cart .ecp-cart-empty,
.ecp_Cart .ecp-empty-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 64px 24px;
min-height: 300px;
}
.ecp_Cart .ecp-cart-empty p,
.ecp_Cart .ecp-empty-message p {
color: var(--ecellar-text-muted);
font-size: 1.125rem;
margin-bottom: 24px;
max-width: 400px;
}
.ecp_Cart .ecp-cart-empty a,
.ecp_Cart .ecp-empty-message a,
.ecp_Cart .ecp-cart-empty button,
.ecp_Cart .ecp-empty-message button {
display: inline-block;
padding: 12px 32px;
border: 1px solid var(--ecellar-accent);
border-radius: 4px;
background-color: transparent;
color: var(--ecellar-accent);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_Cart .ecp-cart-empty a:hover,
.ecp_Cart .ecp-empty-message a:hover,
.ecp_Cart .ecp-cart-empty button:hover,
.ecp_Cart .ecp-empty-message button:hover {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
box-shadow: 0 2px 12px var(--ecellar-accent-shadow);
}
/* ============================================================
7. ALLOCATION CART (.ecp_AllocationCart)
============================================================
Multi-step allocation flow: stepper nav, product selection,
quantity controls, review summary. Exclusive club experience.
============================================================ */
/* --- 7a. Allocation container --- */
.ecp_AllocationCart {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* --- 7b. Stepper navigation --- */
.ecp_AllocationCart ul.ecp-stepper {
padding: 1rem 0;
list-style: none;
margin: 0 0 2rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.ecp_AllocationCart .ecp-stepper-step {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--ecellar-bg-disabled);
color: var(--ecellar-text-muted);
border: 2px solid var(--ecellar-border);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
cursor: default;
transition: all 0.3s ease;
}
.ecp_AllocationCart .ecp-stepper-line {
flex-grow: 1;
height: 3px;
background-color: var(--ecellar-border);
margin: 0 6px;
transition: background-color 0.3s ease;
max-width: 80px;
}
.ecp_AllocationCart .ecp-stepper-step.ecp-stepper-active {
background-color: var(--ecellar-accent);
border-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
cursor: pointer;
box-shadow: 0 0 12px var(--ecellar-accent-shadow);
}
.ecp_AllocationCart .ecp-stepper-line.ecp-stepper-active {
background-color: var(--ecellar-accent);
}
/* --- 7c. Allocation headings --- */
.ecp_AllocationCart h3 {
border-bottom: 2px solid var(--ecellar-accent);
padding-bottom: 0.5rem;
color: var(--ecellar-text-primary);
font-family: var(--public-font-heading);
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.ecp_AllocationCart h4 {
line-height: 1.4;
margin-bottom: 1rem;
color: var(--ecellar-surface-text);
font-size: 1.2rem;
text-align: center;
font-weight: 600;
}
.ecp_AllocationCart div.ecp-html-subtitle {
font-style: italic;
margin: 0.5rem 0 0;
color: var(--ecellar-text-secondary);
}
/* --- 7d. Allocation intro content --- */
.ecp_AllocationCart > .ecp-html-content p {
margin-bottom: 1em;
line-height: 1.6;
color: var(--ecellar-text-secondary);
}
.ecp_AllocationCart > .ecp-html-content p:last-child {
margin-bottom: 0;
}
/* --- 7e. Column layout (image + info) --- */
.ecp_AllocationCart .ecp-columns {
margin: 1rem 0 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.ecp_AllocationCart .ecp-columns-left {
width: 40%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.ecp_AllocationCart .ecp-columns-left img {
max-width: 100%;
height: auto;
border-radius: 4px;
object-fit: contain;
}
.ecp_AllocationCart .ecp-columns-right {
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* --- 7f. Product selection grid --- */
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 24px 0;
width: 100%;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item {
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 0;
background-color: var(--ecellar-card-bg);
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
border-color: var(--ecellar-accent);
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item:last-child {
border: 1px solid var(--ecellar-border-subtle);
}
/* Nested list items within allocation cards */
.ecp_AllocationCart .ecp-list-item .ecp-list-item {
border-bottom: none;
margin-bottom: 1rem;
}
.ecp_AllocationCart .ecp-list-item .ecp-list-item ul.ecp-attributes {
display: inline-block;
}
.ecp_AllocationCart .ecp-list-item .ecp-list-item ul.ecp-attributes li {
float: left;
margin-right: 2rem;
}
/* --- 7g. Quantity rows — single-line flex layout --- */
/* Each row: [Label] [Select] ... [Subtotal:] [$0.00] */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row[data-ecp-handle="quantity_row"],
.ecp_AllocationCart .ecp-list-item .ecp-grid-row[data-ecp-handle="limited_request_row"] {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
margin-bottom: 0.5rem;
gap: 0.375rem;
}
/* Reset eCellar grid-col widths — let flex handle sizing */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span[class*="ecp-grid-col-"] {
width: auto !important; /* Override eCellar CDN .ecp-grid-col-3 percentage width */
float: none !important; /* Override eCellar CDN float: left */
padding: 0;
line-height: 1.4;
color: var(--ecellar-surface-text);
font-size: 0.9rem;
flex: 0 1 auto;
min-width: 0;
}
/* Label — "Purchase:" / "Request:" */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-grid-col-3:nth-child(1) {
flex: 0 0 auto;
white-space: nowrap;
}
/* Select dropdown container */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-grid-col-3:nth-child(2) {
flex: 0 0 auto;
}
/* "Subtotal:" / "Value:" label — push to the right */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-grid-col-3:nth-child(3) {
margin-left: auto;
text-align: right;
white-space: nowrap;
}
/* Dollar value — right-aligned, never clip */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-grid-col-3:nth-child(4) {
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
}
/* Labels inside grid rows */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row label.ecp-form-input-label {
display: inline;
padding: 0;
margin: 0;
font-weight: 500;
font-size: 0.9rem;
color: var(--ecellar-surface-text);
}
/* Info spans inside grid rows */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-form-input-info {
display: inline;
padding: 0;
margin: 0;
font-size: 0.9rem;
color: var(--ecellar-surface-text);
}
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span.ecp-form-input-info[data-ecp-handle] {
font-weight: 600;
}
/* --- 7h. Select & input controls --- */
.ecp_AllocationCart select,
.ecp_AllocationCart input[type=text] {
text-align: center;
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
color: var(--ecellar-surface-text);
padding: 0.75rem 0.5rem;
width: 100%;
max-width: 150px;
margin: 0 auto 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_AllocationCart select:focus,
.ecp_AllocationCart input[type=text]:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_AllocationCart select {
text-align-last: center;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 0.65rem auto;
padding-right: 2rem;
}
/* Selects within allocation product cards — compact inline */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row select {
display: inline-block;
width: auto;
min-width: 48px;
box-sizing: border-box;
padding: 0.2rem 1.5rem 0.2rem 0.4rem;
margin: 0;
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
color: var(--ecellar-surface-text);
font-size: 0.9rem;
font-family: inherit;
cursor: pointer;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 0.6em auto;
vertical-align: middle;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_AllocationCart .ecp-list-item .ecp-grid-row select:hover {
border-color: var(--ecellar-accent);
}
.ecp_AllocationCart .ecp-list-item .ecp-grid-row select:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_AllocationCart select option {
color: var(--ecellar-surface-text);
background-color: var(--ecellar-card-bg);
}
/* --- 7i. Stacked allocation controls (block layout) --- */
.ecp_AllocationCart .allocation-controls-block {
margin-top: 1.5rem;
width: 100%;
}
.ecp_AllocationCart .control-group {
margin-bottom: 1.25rem;
}
.ecp_AllocationCart .control-label {
display: block;
font-size: 0.9rem;
color: var(--ecellar-surface-text);
font-weight: 500;
text-align: left;
margin-bottom: 0.4rem;
}
.ecp_AllocationCart .control-input {
display: block;
width: 100%;
max-width: 100px;
margin: 0 0 0.6rem 0;
text-align: center;
text-align-last: center;
background-color: var(--ecellar-bg-input);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
color: var(--ecellar-surface-text);
padding: 0.5rem;
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_AllocationCart .control-input:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_AllocationCart input.control-input {
padding: 0.5rem;
}
.ecp_AllocationCart .control-value-line {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.9rem;
color: var(--ecellar-surface-text);
padding-top: 0.2rem;
}
.ecp_AllocationCart .value-label {
font-weight: 500;
}
.ecp_AllocationCart .value-amount {
font-weight: 600;
}
/* --- 7j. Disabled states --- */
.ecp_AllocationCart select[disabled],
.ecp_AllocationCart input[type=text][disabled] {
background-color: var(--ecellar-bg-disabled);
color: var(--ecellar-surface-text-muted);
border-color: var(--ecellar-border-subtle);
opacity: 0.7;
cursor: not-allowed;
}
/* --- 7k. Form labels & info --- */
.ecp_AllocationCart .ecp-form-input-label,
.ecp_AllocationCart .ecp-form-input-info {
color: var(--ecellar-surface-text);
}
/* --- 7l. Prices --- */
.ecp_AllocationCart .ecp-price {
font-size: 1.2rem;
margin-bottom: 1rem;
color: var(--ecellar-accent);
font-weight: 600;
text-align: center;
}
.ecp_AllocationCart .ecp-list-item .ecp-price {
margin-bottom: 0.5rem;
text-align: center;
}
/* --- 7m. Product card content --- */
.ecp_AllocationCart .ecp-list-item .ecp-html-content {
font-size: 0.9rem;
line-height: 1.5;
color: var(--ecellar-surface-text-secondary);
}
/* Product card images within grid */
.ecp_AllocationCart .ecp-list-item img {
max-width: 100%;
height: auto;
border-radius: 4px;
object-fit: contain;
margin-bottom: 0.75rem;
}
/* --- 7m-2. Links within allocation --- */
.ecp_AllocationCart a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_AllocationCart a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- 7n. Sections & subtotals (review step) --- */
.ecp_AllocationCart .ecp-section {
margin-bottom: 2rem;
}
.ecp_AllocationCart .ecp-subtotals {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 2rem;
color: var(--ecellar-accent);
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
}
/* --- 7n-2. Summary of Selections panel --- */
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] h3 {
color: var(--ecellar-surface-text);
font-family: var(--public-font-heading);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--ecellar-accent);
}
/* Reset nested .ecp-section margins inside summary */
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-section {
margin-bottom: 0;
}
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-grid {
margin: 0;
}
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0;
margin: 0;
}
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-grid-row span {
color: var(--ecellar-surface-text-secondary);
font-size: 0.95rem;
float: none !important;
width: auto !important;
padding: 0;
}
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-grid-row span[role="cell"] {
color: var(--ecellar-surface-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Splitter row between purchase and request sections */
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] .ecp-grid-row-splitter {
border-top: 1px solid var(--ecellar-border-subtle);
margin-top: 0.35rem;
padding-top: 0.45rem;
}
/* Request section inner wrapper */
.ecp_AllocationCart .ecp-section[aria-labelledby="ecpi_summary_title"] [data-ecp-handle="request_summary"] {
margin-top: 0;
}
/* --- 7o. Section messages --- */
.ecp_AllocationCart .ecp-section-message {
color: var(--ecellar-surface-text-secondary);
background-color: var(--ecellar-accent-bg-subtle);
text-align: center;
padding: 1rem;
border-radius: 6px;
margin: 1rem 0;
border: 1px solid var(--ecellar-border-subtle);
}
.ecp_AllocationCart .ecp-list-item .ecp-section-message {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
/* --- 7p. Callout warnings --- */
.ecp_AllocationCart .ecp-callout-warning {
background-color: var(--ecellar-accent-bg-subtle);
border: 1px solid var(--ecellar-accent-muted);
border-radius: 6px;
padding: 1rem;
margin-bottom: 1rem;
color: var(--ecellar-surface-text);
}
/* --- 7q. Allocation callout box (dashboard CTA) --- */
@keyframes ecpAllocationGlow {
0%, 100% {
box-shadow: 0 0 18px var(--ecellar-accent-shadow),
0 0 6px var(--ecellar-accent-shadow),
0 2px 12px rgba(0, 0, 0, 0.1);
border-color: var(--ecellar-accent-muted);
}
50% {
box-shadow: 0 0 40px var(--ecellar-accent-shadow),
0 0 80px var(--ecellar-accent-shadow),
0 4px 16px rgba(0, 0, 0, 0.15);
border-color: var(--ecellar-accent);
}
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"] {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-accent-muted);
border-radius: 8px;
padding: 22px 30px;
margin: 20px auto 30px;
max-width: 1040px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ecellar-surface-text);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.5px;
animation: ecpAllocationGlow 3s ease-in-out infinite;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"]:hover {
transform: translateY(-2px);
animation-play-state: paused;
border-color: var(--ecellar-accent);
box-shadow: 0 0 50px var(--ecellar-accent-shadow),
0 0 100px var(--ecellar-accent-shadow),
0 4px 20px rgba(0, 0, 0, 0.15);
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"] svg {
display: none;
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"] a {
color: var(--ecellar-accent);
text-decoration: none;
font-weight: 700;
font-size: 1.25rem;
transition: color 0.2s ease;
text-transform: uppercase;
letter-spacing: 2px;
margin-left: 5px;
display: inline-flex;
align-items: center;
gap: 12px;
}
/* Arrow */
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"] a::after {
content: "→";
display: inline-block;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"]:hover a::after {
transform: translateX(6px);
}
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"]:hover a {
color: var(--ecellar-accent-hover);
}
/* Invisible overlay — anchors to the box (position:relative), not the link */
.ecp-wrapper .ecp-callout-box[data-ecp-handle="allocation_message"] a::before {
content: "";
position: absolute;
inset: 0;
}
/* --- 7r. Allocation buttons / CTA --- */
.ecp_AllocationCart button {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 4px;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 1rem;
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp_AllocationCart button:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 2px 12px var(--ecellar-accent-shadow);
}
.ecp_AllocationCart button:active {
transform: translateY(1px);
}
.ecp_AllocationCart button:disabled,
.ecp_AllocationCart button[disabled] {
background-color: var(--ecellar-bg-disabled);
color: var(--ecellar-text-muted);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* --- 7s. Allocation unavailable --- */
.ecp_AllocationUnavailable .ecp-summary {
margin-bottom: 2rem;
background-color: var(--ecellar-accent-bg-subtle);
padding: 1.5rem;
border-radius: 6px;
border: 1px solid var(--ecellar-border);
color: var(--ecellar-text-primary);
}
/* ============================================================
8. ORDER REVIEW (.ecp_OrderReview)
============================================================
ARCHITECTURE RULE: NO joint selectors with Checkout (.ecp_Checkout).
These are COMPLETELY SEPARATE sections. The old file used combined
selectors that caused theme conflicts (P0 bug). Never repeat this.
============================================================ */
/* --- 8a. Container --- */
.ecp_OrderReview {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
font-family: var(--public-font-body);
color: var(--ecellar-text-primary);
}
/* --- 8b. Section headers (h2) — clean with accent underline --- */
.ecp_OrderReview h2 {
font-family: var(--public-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-text-primary);
border-bottom: 2px solid var(--ecellar-accent);
padding-bottom: 12px;
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
/* --- 8c. Summary text --- */
.ecp_OrderReview p.ecp-summary {
color: var(--ecellar-text-secondary);
font-size: 0.95rem;
margin-bottom: 2rem;
line-height: 1.6;
}
/* --- 8d. Sections — elevated cards --- */
.ecp_OrderReview .ecp-section {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
position: relative;
transition: box-shadow 0.3s ease;
color: var(--ecellar-surface-text);
}
.ecp_OrderReview .ecp-section:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* --- 8d. Section h3 — clean with accent border --- */
.ecp_OrderReview .ecp-section h3,
.ecp_OrderReview h3 {
font-family: var(--public-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--ecellar-surface-text);
border-bottom: 1px solid var(--ecellar-accent);
padding-bottom: 8px;
margin-bottom: 1.25rem;
}
/* --- 8d. Section h4 — item-level headings --- */
.ecp_OrderReview h4 {
font-size: 1rem;
font-weight: 500;
color: var(--ecellar-surface-text);
line-height: 1.3;
margin: 0;
}
/* --- 8e. Section menu (edit links) --- */
.ecp_OrderReview .ecp-section-menu {
position: absolute;
top: 1.25rem;
right: 1.5rem;
color: var(--ecellar-accent);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 0.2s ease;
}
.ecp_OrderReview .ecp-section-menu:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- 8e-b. Address display within order review --- */
.ecp_OrderReview dl.ecp-address {
margin: 0;
}
.ecp_OrderReview dl.ecp-address dt {
font-weight: 600;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text);
}
.ecp_OrderReview dl.ecp-address dd {
margin-left: 0;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
line-height: 1.5;
}
.ecp_OrderReview dl.ecp-address dd:last-child {
padding-bottom: 0;
}
/* --- 8e-c. Payment method display within order review --- */
.ecp_OrderReview dl.ecp-payment-method {
margin: 0;
}
.ecp_OrderReview dl.ecp-payment-method dt {
font-weight: 600;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text);
}
.ecp_OrderReview dl.ecp-payment-method dd {
margin-left: 0;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderReview dl.ecp-payment-method dd:last-child {
padding-bottom: 0;
}
/* --- 8e-d. Summary text within order review sections --- */
.ecp_OrderReview .ecp-section p.ecp-summary {
color: var(--ecellar-surface-text-secondary);
}
/* --- 8f. Cart items list --- */
.ecp_OrderReview div[data-ecp-handle="cart_items"],
.ecp_OrderReview .ecp-x-list[data-ecp-handle="cart_items"] {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
margin: 0 0 2rem 0;
padding: 0;
list-style: none;
}
/* --- 8g. Individual cart item row --- */
.ecp_OrderReview .ecp-list-item {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1rem 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
box-sizing: border-box;
position: relative;
transition: background-color 0.2s ease;
}
.ecp_OrderReview .ecp-list-item:last-child {
border-bottom: none;
}
/* --- 8g. Grid inside list items --- */
.ecp_OrderReview .ecp-list-item .ecp-grid {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.15rem;
}
.ecp_OrderReview .ecp-list-item .ecp-grid-row {
margin-bottom: 0.25rem;
}
/* Title row */
.ecp_OrderReview .ecp-list-item .ecp-grid-row h4 {
display: inline-block;
float: left;
}
.ecp_OrderReview .ecp-list-item .ecp-grid-row ul {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}
.ecp_OrderReview .ecp-list-item .ecp-grid-row ul li {
float: left;
margin-left: 2rem;
color: var(--ecellar-surface-text-secondary);
font-size: 0.9rem;
}
/* --- 8h. Product image thumbnails --- */
.ecp_OrderReview .ecp-cart-item-image {
width: 100px;
height: 130px;
border-radius: 6px;
overflow: hidden;
background-color: var(--ecellar-bg-input);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ecp_OrderReview .ecp-cart-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* --- 8i. Cart item details --- */
.ecp_OrderReview .ecp-cart-item-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.ecp_OrderReview .ecp-cart-item-title {
font-size: 1rem;
font-weight: 600;
color: var(--ecellar-surface-text);
margin: 0;
line-height: 1.4;
}
/* --- 8j. Price and quantity --- */
.ecp_OrderReview .ecp-cart-item-price {
font-size: 1.1rem;
font-weight: 600;
color: var(--ecellar-accent);
line-height: 1.2;
}
.ecp_OrderReview .ecp-cart-item-original-price {
font-size: 0.9rem;
color: var(--ecellar-surface-text-muted);
text-decoration: line-through;
margin-bottom: 0.15rem;
}
.ecp_OrderReview .ecp-cart-item-quantity {
font-size: 0.9rem;
color: var(--ecellar-surface-text-secondary);
font-weight: 500;
}
.ecp_OrderReview .ecp-cart-item-crv {
font-size: 0.8rem;
color: var(--ecellar-surface-text-muted);
margin-top: 0.15rem;
}
/* --- 8k. Remove button --- */
.ecp_OrderReview .ecp-list-item-remove {
position: absolute;
top: 1rem;
right: 0;
width: 24px;
height: 24px;
color: var(--ecellar-surface-text-muted);
cursor: pointer;
font-size: 1rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ecp_OrderReview .ecp-list-item-remove:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
}
/* --- 8l. Subtotals — clear hierarchy --- */
.ecp_OrderReview .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_OrderReview .ecp-subtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
font-size: 0.95rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderReview .ecp-subtotals .ecp-price {
font-weight: 500;
color: var(--ecellar-surface-text);
}
/* --- 8m. Grand total — large, bold, accent, unmissable --- */
.ecp_OrderReview .ecp-grandtotals {
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_OrderReview .ecp-grandtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_OrderReview .ecp-grandtotals .ecp-price {
color: var(--ecellar-accent);
font-size: 1.35rem;
font-weight: 700;
}
/* --- 8n. Callout warning --- */
.ecp_OrderReview .ecp-callout-warning {
margin-bottom: 2rem;
padding-top: 2rem;
}
/* --- 8o. Form elements (gift cards, promo codes) --- */
.ecp_OrderReview .ecp-form label {
display: block;
font-size: 0.9rem;
color: var(--ecellar-surface-text-secondary);
margin-bottom: 0.5rem;
}
.ecp_OrderReview .ecp-form label.ecp-inline {
display: inline-block;
}
.ecp_OrderReview .ecp-form input.ecp-inline {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
/* --- 8p. Standalone inputs (not in .ecp-form) --- */
.ecp_OrderReview select,
.ecp_OrderReview textarea,
.ecp_OrderReview input[type=text] {
background-color: var(--ecellar-bg-input);
color: var(--ecellar-surface-text);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
padding: 0.75rem 0.5rem;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_OrderReview select:focus,
.ecp_OrderReview textarea:focus,
.ecp_OrderReview input[type=text]:focus {
outline: none;
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
}
/* --- 8q. Alert & validation boxes --- */
.ecp_OrderReview .ecp-alert-box,
.ecp_OrderReview .ecp-validation-box {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* ============================================================
9. CHECKOUT (.ecp_Checkout, .ecp_CheckoutThankYou, .ecp_OrderAdjust)
============================================================
ARCHITECTURE RULE: NO joint selectors with OrderReview.
Checkout and OrderReview are 100% isolated sections.
============================================================ */
/* --- 9a. Checkout stepper — step progress indicator --- */
.ecp-wrapper ul.ecp-stepper {
display: flex;
align-items: center;
list-style: none;
margin: 0 0 2rem 0;
padding: 0;
color: var(--ecellar-text-muted);
}
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-step {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 2px solid var(--ecellar-border);
font-size: 0.85rem;
font-weight: 600;
color: var(--ecellar-text-muted);
background: var(--ecellar-bg-page);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-line {
flex: 0 0 2rem;
height: 2px;
background-color: var(--ecellar-border);
margin: 0;
transition: background-color 0.3s ease;
z-index: 1;
}
/* Active step — accent filled */
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-step.ecp-stepper-active {
background-color: var(--ecellar-accent);
border-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
cursor: pointer;
box-shadow: 0 0 0 4px var(--ecellar-accent-shadow);
}
/* Hover on clickable completed steps */
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-step.ecp-stepper-active:hover {
box-shadow: 0 0 0 6px var(--ecellar-accent-shadow);
}
/* --- 9b. Checkout locate account --- */
.ecp_CheckoutLocateAccount {
max-width: 480px;
}
.ecp_CheckoutLocateAccount button {
margin-bottom: 2rem;
}
.ecp_CheckoutLocateAccount .ecp-item-list {
list-style: none;
padding: 0;
margin: 0;
}
.ecp_CheckoutLocateAccount .ecp-item-list li {
margin-bottom: 0.75rem;
padding: 1rem;
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_CheckoutLocateAccount .ecp-item-list li:last-child {
margin-bottom: 0;
}
.ecp_CheckoutLocateAccount .ecp-item-list li:hover {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 1px var(--ecellar-accent-shadow);
}
/* --- 9c. Guest checkout --- */
.ecp_CreateGuestCustomer {
max-width: 480px;
}
.ecp_CreateGuestCustomer label {
display: block;
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--ecellar-surface-text);
font-size: 0.9rem;
}
.ecp_CreateGuestCustomer .ecp-section {
margin-bottom: 2rem;
}
/* --- 9d. Checkout sections — surface cards --- */
/*
* Each checkout step (Shipping, Payment, Billing) appears as an
* elevated surface card, matching sidecart cart items and the
* OrderReview section treatment. Section menus (edit links) pin
* absolute top-right of the card — identical to OrderReview.
*/
.ecp_Checkout .ecp-section {
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
position: relative;
transition: box-shadow 0.3s ease;
color: var(--ecellar-surface-text);
}
.ecp_CheckoutLocateAccount .ecp-section,
.ecp_CreateGuestCustomer .ecp-section {
margin-bottom: 2rem;
}
.ecp_Checkout h3 {
font-family: var(--public-font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--ecellar-surface-text);
border-bottom: 1px solid var(--ecellar-accent);
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
/* Section menu (edit links) — absolute top-right of card */
.ecp_Checkout .ecp-section-menu {
position: absolute;
top: 1.25rem;
right: 1.5rem;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
/* Fallback: handles case where section-menu is a wrapper div with an inside */
.ecp_Checkout .ecp-section-menu a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_Checkout .ecp-section-menu:hover,
.ecp_Checkout .ecp-section-menu a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* Summary text in completed steps */
.ecp_Checkout p.ecp-summary {
color: var(--ecellar-surface-text-secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
}
/* --- 9e. Address display within checkout --- */
.ecp_Checkout dl.ecp-address,
.ecp_CheckoutThankYou dl.ecp-address {
margin: 0;
}
.ecp_Checkout dl.ecp-address dt,
.ecp_CheckoutThankYou dl.ecp-address dt {
font-weight: 600;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text);
}
.ecp_Checkout dl.ecp-address dd,
.ecp_CheckoutThankYou dl.ecp-address dd {
margin-left: 0;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
line-height: 1.5;
}
.ecp_Checkout dl.ecp-address dd:last-child,
.ecp_CheckoutThankYou dl.ecp-address dd:last-child {
padding-bottom: 0;
}
/* --- 9f. Shipping address edit/delete — checkout variants --- */
.ecp_EditShippingAddress--checkout .ecp-callout-box,
.ecp_EditShippingAddress .ecp-callout-box {
margin-bottom: 1rem;
text-align: center;
}
.ecp_DeleteShippingAddress--checkout .ecp-modal-content,
.ecp_DeleteShippingAddress .ecp-modal-content {
padding: 2rem 0;
}
.ecp_DeleteShippingAddress--checkout .ecp-modal-content dl.ecp-address,
.ecp_DeleteShippingAddress .ecp-modal-content dl.ecp-address {
margin-bottom: 0;
}
/* --- 9g. Billing address — checkout variant --- */
.ecp_CreateBillingAddress--checkout input[type=checkbox] {
margin-right: 0.5rem;
accent-color: var(--ecellar-accent);
}
/* --- 9h. Payment method display --- */
.ecp_Checkout dl.ecp-payment-method,
.ecp_CheckoutThankYou dl.ecp-payment-method {
margin: 0;
}
.ecp_Checkout dl.ecp-payment-method dt,
.ecp_CheckoutThankYou dl.ecp-payment-method dt {
font-weight: 600;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text);
}
.ecp_Checkout dl.ecp-payment-method dd,
.ecp_CheckoutThankYou dl.ecp-payment-method dd {
margin-left: 0;
padding-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_Checkout dl.ecp-payment-method dd:last-child,
.ecp_CheckoutThankYou dl.ecp-payment-method dd:last-child {
padding-bottom: 0;
}
/* --- 9i. Select payment method — card list --- */
.ecp_SelectPaymentMethod .ecp-card,
.ecp_PaymentMethods .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_SelectPaymentMethod .ecp-card:hover,
.ecp_PaymentMethods .ecp-card:hover {
border-color: var(--ecellar-accent);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
.ecp_SelectPaymentMethod .ecp-card:last-child,
.ecp_PaymentMethods .ecp-card:last-child {
margin-bottom: 1rem;
}
.ecp_SelectPaymentMethod .ecp-card dl.ecp-payment-method,
.ecp_PaymentMethods dl.ecp-payment-method {
margin-bottom: 0;
}
/* Delete payment method — checkout modal */
.ecp_DeletePaymentMethod--checkout .ecp-modal-content,
.ecp_DeletePaymentMethod .ecp-modal-content {
padding: 2rem 0;
}
.ecp_DeletePaymentMethod--checkout .ecp-modal-content dl.ecp-payment-method,
.ecp_DeletePaymentMethod .ecp-modal-content dl.ecp-payment-method {
margin-bottom: 0;
}
/* --- 9j. Payment fields — clean, trustworthy, secure feel --- */
/*
* Payment section needs extra polish. This is where trust converts
* to money. Clean lines, clear labels, generous spacing.
*/
.ecp_Checkout .ecp-payfields-wrapper {
/* Use input bg instead of card-bg to avoid same-color card-in-card.
Creates a distinct, secure-feeling inset for the payment fields. */
background: var(--ecellar-bg-input);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.5rem;
}
.ecp_Checkout .ecp-form-fieldset {
margin-bottom: 1.25rem;
}
.ecp_Checkout .ecp-form-fieldset:last-child {
margin-bottom: 0;
}
/* Scrunched fieldsets for stacked payment inputs */
.ecp_Checkout .ecp-form-fieldset-scrunched {
margin-bottom: 1rem;
}
.ecp_Checkout .ecp-form-fieldset-scrunched iframe,
.ecp_Checkout .ecp-form-fieldset-scrunched input[type=text],
.ecp_Checkout .ecp-form-fieldset-scrunched input[type=number],
.ecp_Checkout .ecp-form-fieldset-scrunched select {
margin-bottom: 0;
margin-top: -1px;
}
/* --- 9k. Checkout form labels --- */
.ecp_Checkout .ecp-form label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: var(--ecellar-surface-text-secondary);
margin-bottom: 0.5rem;
}
/* --- 9l. Checkout order summary sidebar --- */
.ecp_Checkout .ecp-list-item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_Checkout .ecp-list-item:last-child {
border-bottom: none;
}
.ecp_Checkout .ecp-list-item h4 {
display: inline-block;
float: left;
font-size: 0.95rem;
font-weight: 600;
color: var(--ecellar-surface-text);
line-height: 1.2;
margin: 0;
}
.ecp_Checkout .ecp-list-item ul {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}
.ecp_Checkout .ecp-list-item ul li {
float: left;
margin-left: 2rem;
color: var(--ecellar-surface-text-secondary);
font-size: 0.9rem;
}
/* Subtotals */
.ecp_Checkout .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 0.75rem;
margin-top: 0.5rem;
}
.ecp_Checkout .ecp-subtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.35rem;
font-size: 0.9rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_Checkout .ecp-subtotals .ecp-price {
font-weight: 500;
color: var(--ecellar-surface-text);
}
/* Grand totals */
.ecp_Checkout .ecp-grandtotals {
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_Checkout .ecp-grandtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_Checkout .ecp-grandtotals .ecp-price {
color: var(--ecellar-accent);
font-size: 1.25rem;
font-weight: 700;
}
/* --- 9m. "Place Order" button — THE big CTA --- */
/*
* The final "Place Order" button should feel significant.
* Slightly larger, deeper shadow, accent glow on hover.
*/
.ecp_Checkout button[type="submit"],
.ecp_Checkout .ecp-btn-primary {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 6px;
padding: 1rem 2rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
width: 100%;
text-align: center;
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.ecp_Checkout button[type="submit"]:hover,
.ecp_Checkout .ecp-btn-primary:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 16px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
.ecp_Checkout button[type="submit"]:active,
.ecp_Checkout .ecp-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 4px var(--ecellar-accent-shadow);
}
/* Secondary buttons — scoped to known eCellar button classes only */
.ecp_Checkout .ecp-btn-secondary,
.ecp_Checkout .ecp-form button:not([type="submit"]) {
background: transparent;
color: var(--ecellar-accent);
border: 1px solid var(--ecellar-accent);
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
width: 100%;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_Checkout .ecp-btn-secondary:hover,
.ecp_Checkout .ecp-form button:not([type="submit"]):hover {
background-color: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* --- 9n. Standalone inputs (not in .ecp-form) --- */
.ecp_Checkout select,
.ecp_Checkout textarea,
.ecp_Checkout input[type=text] {
background-color: var(--ecellar-bg-input);
color: var(--ecellar-surface-text);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
padding: 0.75rem 0.5rem;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_Checkout select:focus,
.ecp_Checkout textarea:focus,
.ecp_Checkout input[type=text]:focus {
outline: none;
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
}
/* --- 9o. Checkout callout & validation --- */
.ecp_Checkout .ecp-callout-warning {
margin-bottom: 2rem;
padding-top: 2rem;
}
.ecp_Checkout .ecp-alert-box,
.ecp_Checkout .ecp-validation-box {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* --- 9o. Order Pay (pay for existing order) --- */
/* OrderPay h3 styled in Section 11e */
.ecp_OrderPay .ecp-section {
margin-bottom: 2rem;
}
.ecp_OrderPay .ecp-grid-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.75rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderPay .ecp-grid-row:last-child {
margin-bottom: 0.75rem;
}
.ecp_OrderPay select {
margin-bottom: 1rem;
margin-top: 1rem;
}
/* OrderPay action button */
.ecp_OrderPay button[type="submit"],
.ecp_OrderPay .ecp-btn-primary {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 6px;
padding: 0.85rem 1.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
width: 100%;
text-align: center;
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.ecp_OrderPay button[type="submit"]:hover,
.ecp_OrderPay .ecp-btn-primary:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 12px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
.ecp_OrderPay button[type="submit"]:active,
.ecp_OrderPay .ecp-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 4px var(--ecellar-accent-shadow);
}
/* ============================================================
9-THANKYOU. CHECKOUT THANK YOU (.ecp_CheckoutThankYou)
============================================================ */
/* --- 9p. ThankYou container — celebration, not cheese --- */
.ecp_CheckoutThankYou {
max-width: 720px;
margin: 0 auto;
}
/* Confirmation heading — generous, confident, celebratory */
.ecp_CheckoutThankYou h2 {
font-family: var(--public-font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin-bottom: 0.75rem;
text-align: center;
letter-spacing: -0.01em;
}
/* Order number — accent accent accent */
.ecp_CheckoutThankYou h3 {
font-family: var(--public-font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--ecellar-accent);
border-bottom: 1px solid var(--ecellar-accent);
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
/* Sections — order summary, shipping info, next steps */
.ecp_CheckoutThankYou .ecp-section {
margin-bottom: 2rem;
padding: 1.25rem;
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
color: var(--ecellar-surface-text);
}
.ecp_CheckoutThankYou .ecp-section:last-child {
margin-bottom: 0;
}
/* Grid rows — item lines, totals */
.ecp_CheckoutThankYou .ecp-grid-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
font-size: 0.95rem;
}
/* Subtotals */
.ecp_CheckoutThankYou .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 0.75rem;
margin-top: 0.75rem;
}
.ecp_CheckoutThankYou .ecp-subtotals .ecp-grid-row {
margin-bottom: 0.35rem;
}
.ecp_CheckoutThankYou .ecp-subtotals .ecp-price {
font-weight: 500;
color: var(--ecellar-surface-text);
}
/* Grand totals */
.ecp_CheckoutThankYou .ecp-grandtotals {
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_CheckoutThankYou .ecp-grandtotals .ecp-grid-row {
font-size: 1.15rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_CheckoutThankYou .ecp-grandtotals .ecp-price {
color: var(--ecellar-accent);
font-size: 1.2rem;
font-weight: 700;
}
/* List items — order line items */
.ecp_CheckoutThankYou .ecp-list-item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_CheckoutThankYou .ecp-list-item:last-child {
border-bottom: none;
}
.ecp_CheckoutThankYou .ecp-list-item h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--ecellar-surface-text);
line-height: 1.3;
margin: 0 0 0.25rem;
}
.ecp_CheckoutThankYou .ecp-list-item .ecp-price {
color: var(--ecellar-accent);
font-weight: 600;
}
/* "Continue Shopping" CTA — inviting, not pushy */
.ecp_CheckoutThankYou a.ecp-btn,
.ecp_CheckoutThankYou button.ecp-btn {
display: inline-block;
margin-top: 1.5rem;
padding: 0.75rem 2rem;
border: 1px solid var(--ecellar-accent);
border-radius: 6px;
color: var(--ecellar-accent);
background: transparent;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_CheckoutThankYou a.ecp-btn:hover,
.ecp_CheckoutThankYou button.ecp-btn:hover {
background-color: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* Confirmation alert box — themed success */
.ecp_CheckoutThankYou .ecp-alert-box {
text-align: center;
padding: 1.25rem;
margin-bottom: 1.5rem;
border-radius: 8px;
background: var(--ecellar-accent-bg-subtle);
color: var(--ecellar-accent);
font-weight: 600;
font-size: 1rem;
}
/* ============================================================
9-ORDERADJUST. ORDER ADJUST (.ecp_OrderAdjust)
============================================================ */
/* --- 9q. OrderAdjust container --- */
.ecp_OrderAdjust {
max-width: 900px;
}
/* Box layout — collapsible sections */
.ecp_OrderAdjust .ecp-box {
margin-bottom: 1.25rem;
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
overflow: hidden;
color: var(--ecellar-surface-text);
}
.ecp_OrderAdjust .ecp-box-header {
background-color: var(--ecellar-bg-input);
border-bottom: 1px solid var(--ecellar-border-subtle);
padding: 0.75rem 1rem;
font-weight: 600;
color: var(--ecellar-surface-text);
}
.ecp_OrderAdjust .ecp-box-content {
padding: 1rem;
}
/* Two-column layout */
.ecp_OrderAdjust .ecp-columns-left {
width: 30%;
float: left;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderAdjust .ecp-columns-right {
width: 70%;
float: left;
}
/* Clearfix for float columns */
.ecp_OrderAdjust .ecp-box-content::after {
content: "";
display: table;
clear: both;
}
/* Callout box */
.ecp_OrderAdjust .ecp-callout-box {
margin-bottom: 1rem;
}
/* Form controls — centered alignment for inputs/selects */
.ecp_OrderAdjust select,
.ecp_OrderAdjust input[type=text] {
float: right;
text-align: center;
background: var(--ecellar-bg-input);
border: 1px solid var(--ecellar-border);
border-radius: 4px;
color: var(--ecellar-surface-text);
padding: 0.5rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_OrderAdjust select:focus,
.ecp_OrderAdjust input[type=text]:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_OrderAdjust select {
text-align-last: center;
}
/* Disabled state */
.ecp_OrderAdjust select[disabled],
.ecp_OrderAdjust input[type=text][disabled] {
background-color: var(--ecellar-bg-disabled);
color: var(--ecellar-text-muted);
cursor: not-allowed;
}
/* Item list */
.ecp_OrderAdjust .ecp-x-list h4 {
line-height: 1.25rem;
font-weight: 600;
color: var(--ecellar-surface-text);
}
.ecp_OrderAdjust .ecp-x-list h4 .ecp-attributes span {
margin-left: 2rem;
white-space: nowrap;
font-weight: normal;
color: var(--ecellar-surface-text-secondary);
}
/* Subtotals & grand totals */
.ecp_OrderAdjust .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 0.75rem;
margin-top: 0.75rem;
}
.ecp_OrderAdjust .ecp-subtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.35rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderAdjust .ecp-grandtotals {
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_OrderAdjust .ecp-grandtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
font-size: 1.15rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_OrderAdjust .ecp-grandtotals .ecp-price {
color: var(--ecellar-accent);
font-weight: 700;
}
/* Action buttons */
.ecp_OrderAdjust button[type="submit"],
.ecp_OrderAdjust .ecp-btn-primary {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 6px;
padding: 0.85rem 1.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
width: 100%;
text-align: center;
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.ecp_OrderAdjust button[type="submit"]:hover,
.ecp_OrderAdjust .ecp-btn-primary:hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 12px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
.ecp_OrderAdjust button[type="submit"]:active,
.ecp_OrderAdjust .ecp-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 4px var(--ecellar-accent-shadow);
}
/* Alert & validation boxes */
.ecp_OrderAdjust .ecp-alert-box,
.ecp_OrderAdjust .ecp-validation-box {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* ============================================================
9b. PAYMENT & ADDRESS MANAGEMENT
PaymentMethods, SelectPaymentMethod, ShippingAddresses,
SelectShippingAddress, EditShippingAddress — account & checkout
============================================================ */
/* --- 9b-a. Page-level containers --- */
.ecp_PaymentMethods,
.ecp_ShippingAddresses {
color: var(--ecellar-text-primary);
}
.ecp_PaymentMethods h1,
.ecp_PaymentMethods h2,
.ecp_ShippingAddresses h1,
.ecp_ShippingAddresses h2 {
margin-bottom: 1.5rem;
}
/* --- 9b-b. Saved card / address card list --- */
.ecp_PaymentMethods .ecp-list-item,
.ecp_ShippingAddresses .ecp-list-item {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.ecp_PaymentMethods .ecp-list-item:hover,
.ecp_ShippingAddresses .ecp-list-item:hover {
border-color: var(--ecellar-accent);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
/* Saved cards using .ecp-card (SelectPaymentMethod already styled in 9i —
these are the standalone PaymentMethods account page cards) */
.ecp_PaymentMethods .ecp-card .ecp-card-topper {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ecellar-surface-text-muted);
margin-bottom: 0.75rem;
}
/* --- 9b-c. Address cards using .ecp-card --- */
.ecp_ShippingAddresses .ecp-card,
.ecp_SelectShippingAddress .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_ShippingAddresses .ecp-card:hover,
.ecp_SelectShippingAddress .ecp-card:hover {
border-color: var(--ecellar-accent);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
.ecp_ShippingAddresses .ecp-card:last-child,
.ecp_SelectShippingAddress .ecp-card:last-child {
margin-bottom: 1rem;
}
.ecp_ShippingAddresses .ecp-card .ecp-card-topper,
.ecp_SelectShippingAddress .ecp-card .ecp-card-topper {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ecellar-surface-text-muted);
margin-bottom: 0.75rem;
}
/* --- 9b-d. Address & payment data lists inside cards --- */
.ecp_PaymentMethods dl.ecp-payment-method,
.ecp_ShippingAddresses dl.ecp-address,
.ecp_SelectShippingAddress dl.ecp-address {
margin: 0;
line-height: 1.6;
}
.ecp_PaymentMethods dl.ecp-payment-method dt,
.ecp_ShippingAddresses dl.ecp-address dt,
.ecp_SelectShippingAddress dl.ecp-address dt {
font-weight: 600;
color: var(--ecellar-surface-text);
margin-bottom: 0.25rem;
}
.ecp_PaymentMethods dl.ecp-payment-method dd,
.ecp_ShippingAddresses dl.ecp-address dd,
.ecp_SelectShippingAddress dl.ecp-address dd {
margin-left: 0;
color: var(--ecellar-surface-text-secondary);
margin-bottom: 0.35rem;
}
.ecp_PaymentMethods dl.ecp-payment-method dd:last-child,
.ecp_ShippingAddresses dl.ecp-address dd:last-child,
.ecp_SelectShippingAddress dl.ecp-address dd:last-child {
margin-bottom: 0;
}
/* --- 9b-e. Selected / default state --- */
.ecp_SelectPaymentMethod .ecp-card.ecp-active,
.ecp_PaymentMethods .ecp-card.ecp-active,
.ecp_SelectShippingAddress .ecp-card.ecp-active,
.ecp_ShippingAddresses .ecp-card.ecp-active,
.ecp_SelectPaymentMethod .ecp-list-item.ecp-active,
.ecp_PaymentMethods .ecp-list-item.ecp-active,
.ecp_SelectShippingAddress .ecp-list-item.ecp-active,
.ecp_ShippingAddresses .ecp-list-item.ecp-active {
border: 2px solid var(--ecellar-accent);
background: var(--ecellar-accent-bg-subtle);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow), 0 2px 8px var(--ecellar-accent-shadow);
}
/* --- 9b-f. Action links (Edit / Delete / Set Default) --- */
.ecp_PaymentMethods .ecp-section-menu a,
.ecp_ShippingAddresses .ecp-section-menu a,
.ecp_PaymentMethods .ecp-linkset-right a,
.ecp_ShippingAddresses .ecp-linkset-right a,
.ecp_PaymentMethods .ecp-form-linkset a,
.ecp_ShippingAddresses .ecp-form-linkset a {
color: var(--ecellar-surface-text-secondary);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.ecp_PaymentMethods .ecp-section-menu a:hover,
.ecp_ShippingAddresses .ecp-section-menu a:hover,
.ecp_PaymentMethods .ecp-linkset-right a:hover,
.ecp_ShippingAddresses .ecp-linkset-right a:hover,
.ecp_PaymentMethods .ecp-form-linkset a:hover,
.ecp_ShippingAddresses .ecp-form-linkset a:hover {
color: var(--ecellar-accent);
}
/* --- 9b-g. "Add New" button — accent outline --- */
.ecp_PaymentMethods button.ecp-secondary,
.ecp_ShippingAddresses button.ecp-secondary,
.ecp_PaymentMethods button.ecp-tertiary,
.ecp_ShippingAddresses button.ecp-tertiary {
background: transparent;
border: 1px solid var(--ecellar-accent);
color: var(--ecellar-accent);
border-radius: 6px;
padding: 0.65rem 1.25rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_PaymentMethods button.ecp-secondary:hover,
.ecp_ShippingAddresses button.ecp-secondary:hover,
.ecp_PaymentMethods button.ecp-tertiary:hover,
.ecp_ShippingAddresses button.ecp-tertiary:hover {
background: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* Pickup option — style as full-width outline button */
.ecp_SelectShippingAddress a.ecp-option,
.ecp_CreateShippingAddress a.ecp-option,
.ecp_CreateShippingAddress--checkout a.ecp-option,
[class*="CreateShippingAddress"] a.ecp-option,
.ecp_Checkout a.ecp-option {
display: block;
width: 100%;
text-align: center;
padding: 0.75rem 1.25rem;
border: 1px solid var(--ecellar-accent);
border-radius: 6px;
color: var(--ecellar-accent);
background: transparent;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 1.5rem;
}
.ecp_SelectShippingAddress a.ecp-option:hover,
.ecp_CreateShippingAddress a.ecp-option:hover,
.ecp_CreateShippingAddress--checkout a.ecp-option:hover,
[class*="CreateShippingAddress"] a.ecp-option:hover,
.ecp_Checkout a.ecp-option:hover {
background: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* Primary action buttons within payment/address pages */
.ecp_PaymentMethods button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline),
.ecp_ShippingAddresses button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline) {
background-color: var(--ecellar-accent);
color: var(--ecellar-accent-text);
border: none;
border-radius: 6px;
padding: 0.75rem 1.25rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.ecp_PaymentMethods button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline):hover,
.ecp_ShippingAddresses button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline):hover {
background-color: var(--ecellar-accent-hover);
box-shadow: 0 4px 12px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
.ecp_PaymentMethods button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline):active,
.ecp_ShippingAddresses button:not(.ecp-secondary):not(.ecp-tertiary):not(.ecp-inline):active {
transform: translateY(0);
box-shadow: 0 1px 4px var(--ecellar-accent-shadow);
}
/* --- 9b-h. Button pair / buttonset layout --- */
.ecp_PaymentMethods .ecp-button-pair,
.ecp_ShippingAddresses .ecp-button-pair,
.ecp_EditShippingAddress .ecp-button-pair {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.ecp_PaymentMethods .ecp-button-list,
.ecp_ShippingAddresses .ecp-button-list {
margin-top: 1.5rem;
}
/* --- 9b-i. Edit shipping address page --- */
.ecp_EditShippingAddress {
color: var(--ecellar-text-primary);
}
.ecp_EditShippingAddress h1,
.ecp_EditShippingAddress h2 {
margin-bottom: 1.5rem;
}
/* Form labels inherit from Section 2 — add extra polish */
.ecp_EditShippingAddress .ecp-form label {
color: var(--ecellar-surface-text-secondary);
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: block;
}
/* Callout box already styled in 9f but reinforced here for standalone context */
/* Radio/checkbox lists */
.ecp_EditShippingAddress ul.ecp-form-radios li,
.ecp_EditShippingAddress ul.ecp-form-checkboxes li {
color: var(--ecellar-surface-text);
margin-bottom: 0.75rem;
}
.ecp_EditShippingAddress input[type=radio],
.ecp_EditShippingAddress input[type=checkbox] {
accent-color: var(--ecellar-accent);
margin-right: 0.5rem;
}
/* --- 9b-j. Select shipping address page --- */
.ecp_SelectShippingAddress {
color: var(--ecellar-text-primary);
}
.ecp_SelectShippingAddress h1,
.ecp_SelectShippingAddress h2 {
margin-bottom: 1.5rem;
}
.ecp_SelectShippingAddress .ecp-callout-box {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
padding: 1rem;
color: var(--ecellar-surface-text-secondary);
margin-bottom: 1.5rem;
}
/* --- 9b-k. Select payment method page --- */
.ecp_SelectPaymentMethod {
color: var(--ecellar-text-primary);
}
.ecp_SelectPaymentMethod h1,
.ecp_SelectPaymentMethod h2 {
margin-bottom: 1.5rem;
}
/* Payment fields wrapper within SelectPaymentMethod — trust feel */
.ecp_SelectPaymentMethod .ecp-payfields-wrapper {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.5rem;
}
.ecp_SelectPaymentMethod .ecp-form-fieldset {
margin-bottom: 1.25rem;
}
.ecp_SelectPaymentMethod .ecp-form-fieldset:last-child {
margin-bottom: 0;
}
/* Scrunched fieldsets for stacked payment inputs */
.ecp_SelectPaymentMethod .ecp-form-fieldset-scrunched {
margin-bottom: 1rem;
}
.ecp_SelectPaymentMethod .ecp-form-fieldset-scrunched iframe,
.ecp_SelectPaymentMethod .ecp-form-fieldset-scrunched input[type=text],
.ecp_SelectPaymentMethod .ecp-form-fieldset-scrunched input[type=number],
.ecp_SelectPaymentMethod .ecp-form-fieldset-scrunched select {
margin-bottom: 0;
margin-top: -1px;
}
/* --- 9b-l. Delete modals — confirmation feel --- */
.ecp_DeletePaymentMethod .ecp-modal,
.ecp_DeletePaymentMethod--checkout .ecp-modal,
.ecp_DeleteShippingAddress .ecp-modal,
.ecp_DeleteShippingAddress--checkout .ecp-modal {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ecp_DeletePaymentMethod .ecp-modal h2,
.ecp_DeletePaymentMethod--checkout .ecp-modal h2,
.ecp_DeleteShippingAddress .ecp-modal h2,
.ecp_DeleteShippingAddress--checkout .ecp-modal h2 {
color: var(--ecellar-surface-text);
border-bottom-color: var(--ecellar-border-subtle);
}
.ecp_DeletePaymentMethod .ecp-modal-footer,
.ecp_DeletePaymentMethod--checkout .ecp-modal-footer,
.ecp_DeleteShippingAddress .ecp-modal-footer,
.ecp_DeleteShippingAddress--checkout .ecp-modal-footer {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* --- 9b-m. Pickup location selection --- */
.ecp_SelectPickupLocation {
color: var(--ecellar-text-primary);
}
.ecp_SelectPickupLocation h1,
.ecp_SelectPickupLocation h2 {
margin-bottom: 1.5rem;
}
.ecp_SelectPickupLocation .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_SelectPickupLocation .ecp-card:hover {
border-color: var(--ecellar-accent);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
.ecp_SelectPickupLocation .ecp-card.ecp-active {
border: 2px solid var(--ecellar-accent);
background: var(--ecellar-accent-bg-subtle);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow), 0 2px 8px var(--ecellar-accent-shadow);
}
/* Sections within payment/address pages */
.ecp_PaymentMethods .ecp-section,
.ecp_ShippingAddresses .ecp-section,
.ecp_SelectPaymentMethod .ecp-section,
.ecp_SelectShippingAddress .ecp-section {
margin-bottom: 1.5rem;
}
.ecp_PaymentMethods .ecp-section-topline,
.ecp_ShippingAddresses .ecp-section-topline {
border-top-color: var(--ecellar-border-subtle);
padding-top: 1.5rem;
}
.ecp_PaymentMethods .ecp-section-bottomline,
.ecp_ShippingAddresses .ecp-section-bottomline {
border-bottom-color: var(--ecellar-border-subtle);
padding-bottom: 1.5rem;
}
/* Highlight first item — default payment/address indicator */
.ecp_PaymentMethods .ecp-highlight-first > :first-child,
.ecp_ShippingAddresses .ecp-highlight-first > :first-child {
border-color: var(--ecellar-accent);
border-width: 2px;
background: var(--ecellar-accent-bg-subtle);
}
/* Alert & validation boxes */
.ecp_PaymentMethods .ecp-alert-box,
.ecp_PaymentMethods .ecp-validation-box,
.ecp_ShippingAddresses .ecp-alert-box,
.ecp_ShippingAddresses .ecp-validation-box,
.ecp_EditShippingAddress .ecp-alert-box,
.ecp_EditShippingAddress .ecp-validation-box {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* ============================================================
10. ACCOUNT NAVIGATION (.ecp_AccountNav)
============================================================ */
/* --- 10a. Nav wrapper --- */
.ecp_AccountNavWrapper {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 12px;
padding: 16px;
margin: 24px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
position: relative;
}
/* Accent shimmer gradient line across top */
.ecp_AccountNavWrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ecellar-accent-muted), transparent);
animation: acct-nav-shimmer 3s ease-in-out infinite;
border-radius: 12px 12px 0 0;
}
.ecp_AccountNav {
width: 100%;
}
/* --- 10b. Navigation list container --- */
.ecp_AccountNav .ecp-item-list,
.ecp_AccountNav ul,
.ecp_AccountNavWrapper ul,
.ecp_AccountNav .ecp-dropdown-menu,
.ecp-dropdown[data-ecp-handle="nav_dropdown"] .ecp-dropdown-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
border: none;
box-shadow: none;
width: 100%;
}
/* --- 10c. Navigation items --- */
.ecp_AccountNav li,
.ecp_AccountNavWrapper li {
margin: 0;
padding: 0;
position: relative;
border-radius: 8px;
overflow: hidden;
transition: background 0.2s ease;
border: none;
}
/* --- 10d. Navigation links — default state --- */
.ecp_AccountNav li a,
.ecp_AccountNavWrapper li a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: var(--ecellar-surface-text);
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
position: relative;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
border-left: 3px solid transparent;
}
/* --- 10e. Navigation links — hover state --- */
.ecp_AccountNav li a:hover,
.ecp_AccountNavWrapper li a:hover {
color: var(--ecellar-accent);
background: var(--ecellar-accent-bg-subtle);
transform: translateX(4px);
border-left-color: var(--ecellar-accent-muted);
}
/* --- 10f. Navigation links — active state --- */
.ecp_AccountNav li a.active,
.ecp_AccountNav li a.ecp-active-link,
.ecp_AccountNav li.active a,
.ecp_AccountNavWrapper li a.active,
.ecp_AccountNavWrapper li a.ecp-active-link,
.ecp_AccountNavWrapper li.active a,
.ecp_AccountNav li a[aria-current="page"],
.ecp_AccountNavWrapper li a[aria-current="page"] {
color: var(--ecellar-accent);
background: var(--ecellar-accent-bg-subtle);
font-weight: 500;
border-left-color: var(--ecellar-accent);
animation: acct-nav-pulse-bar 2s ease-in-out infinite;
}
/* --- 10g. Icons --- */
.ecp_AccountNav li a svg,
.ecp_AccountNav li a .icon,
.ecp_AccountNav li a [class*="icon"],
.ecp_AccountNavWrapper li a svg,
.ecp_AccountNavWrapper li a .icon,
.ecp_AccountNavWrapper li a [class*="icon"] {
width: 18px;
height: 18px;
min-width: 18px;
fill: var(--ecellar-surface-text-secondary);
color: var(--ecellar-surface-text-secondary);
transition: fill 0.2s ease, color 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
/* Icons — hover */
.ecp_AccountNav li a:hover svg,
.ecp_AccountNav li a:hover .icon,
.ecp_AccountNav li a:hover [class*="icon"],
.ecp_AccountNavWrapper li a:hover svg,
.ecp_AccountNavWrapper li a:hover .icon,
.ecp_AccountNavWrapper li a:hover [class*="icon"] {
fill: var(--ecellar-accent);
color: var(--ecellar-accent);
transform: scale(1.1);
}
/* Icons — active */
.ecp_AccountNav li a.active svg,
.ecp_AccountNav li a.ecp-active-link svg,
.ecp_AccountNav li.active a svg,
.ecp_AccountNavWrapper li a.active svg,
.ecp_AccountNavWrapper li a.ecp-active-link svg,
.ecp_AccountNavWrapper li.active a svg,
.ecp_AccountNav li a.active .icon,
.ecp_AccountNav li a.ecp-active-link .icon,
.ecp_AccountNavWrapper li a.active .icon,
.ecp_AccountNavWrapper li a.ecp-active-link .icon {
fill: var(--ecellar-accent);
color: var(--ecellar-accent);
}
/* --- 10h. Dropdown toggle hidden — nav always expanded --- */
.ecp_AccountNavWrapper .ecp-dropdown-toggle,
.ecp-dropdown[data-ecp-handle="nav_dropdown"] > button {
display: none;
}
/* --- 10i. Dividers/separators --- */
.ecp_AccountNav .divider,
.ecp_AccountNav .separator,
.ecp_AccountNav hr,
.ecp_AccountNavWrapper .divider,
.ecp_AccountNavWrapper .separator,
.ecp_AccountNavWrapper hr {
height: 1px;
background: var(--ecellar-border-subtle);
border: none;
margin: 8px 0;
width: 100%;
}
/* --- 10j. Animations --- */
@keyframes acct-nav-shimmer {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
@keyframes acct-nav-pulse-bar {
0%, 100% {
border-left-width: 3px;
}
50% {
border-left-width: 5px;
}
}
/* ============================================================
10b. AUTH PAGES
(JoinList, JoinClub, ForgotPassword, ResetPassword,
CreateAccount, CustomerExists, ChangeUsername, JoinNewsletter)
============================================================ */
/* --- 10b-1. Shared auth page container — centered, inviting --- */
.ecp_JoinList,
.ecp_JoinClub,
.ecp_ForgotPassword,
.ecp_ResetPassword,
.ecp_CreateAccount,
.ecp_CustomerExists,
.ecp_ChangeUsername,
.ecp_JoinNewsletter {
max-width: 520px;
margin: 0 auto;
padding: 32px 0;
}
/* JoinClub wizard needs more room for tier cards */
.ecp_JoinClub {
max-width: 680px;
}
/* --- 10b-2. Auth page headings --- */
.ecp_JoinList h2,
.ecp_JoinClub h2,
.ecp_ForgotPassword h2,
.ecp_ResetPassword h2,
.ecp_CreateAccount h2,
.ecp_CustomerExists h2,
.ecp_ChangeUsername h2,
.ecp_JoinNewsletter h2 {
font-family: var(--public-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--ecellar-text-primary);
margin: 0 0 1.5rem;
line-height: 1.2;
}
/* Section headings (h3) — inside forms, steps, etc. */
.ecp_JoinList h3,
.ecp_ForgotPassword h3,
.ecp_ResetPassword h3,
.ecp_CreateAccount h3,
.ecp_ChangeUsername h3 {
font-family: var(--public-font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--ecellar-text-primary);
border-bottom: 1px solid var(--ecellar-border-subtle);
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
/* --- 10b-3. Auth page body text & links --- */
.ecp_JoinList p,
.ecp_JoinClub p,
.ecp_ForgotPassword p,
.ecp_ResetPassword p,
.ecp_CreateAccount p,
.ecp_CustomerExists p,
.ecp_ChangeUsername p {
color: var(--ecellar-text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.ecp_JoinList a,
.ecp_JoinClub a,
.ecp_ForgotPassword a,
.ecp_ResetPassword a,
.ecp_CreateAccount a,
.ecp_CustomerExists a,
.ecp_ChangeUsername a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_JoinList a:hover,
.ecp_JoinClub a:hover,
.ecp_ForgotPassword a:hover,
.ecp_ResetPassword a:hover,
.ecp_CreateAccount a:hover,
.ecp_CustomerExists a:hover,
.ecp_ChangeUsername a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- 10b-4. Auth sections --- */
.ecp_JoinList .ecp-section,
.ecp_CreateAccount .ecp-section {
margin-bottom: 2rem;
}
.ecp_JoinList .ecp-section:last-child,
.ecp_CreateAccount .ecp-section:last-child {
margin-bottom: 0;
}
/* --- 10b-5. Auth labels --- */
.ecp_JoinList label,
.ecp_CreateAccount label {
display: block;
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--ecellar-text-primary);
font-size: 0.9rem;
}
/* --- 10b-6. HTML content blocks (rich text descriptions) --- */
.ecp_JoinList div.ecp-html-content {
margin-bottom: 2rem;
color: var(--ecellar-text-secondary);
line-height: 1.6;
}
/* --- 10b-7. Auth item lists --- */
.ecp_ForgotPassword .ecp-item-list li {
margin-bottom: 0.5rem;
color: var(--ecellar-text-secondary);
}
/* ThankYou item list is inside .ecp-item-list with card-bg — use surface token */
.ecp_JoinClub__ThankYou .ecp-item-list li {
margin-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_ForgotPassword .ecp-item-list li:last-child,
.ecp_JoinClub__ThankYou .ecp-item-list li:last-child {
margin-bottom: 0;
}
/* --- 10b-8. Auth buttons --- */
.ecp_ForgotPassword button,
.ecp_ResetPassword button {
margin-bottom: 2rem;
}
/* --- 10b-9. CreateAccount callout --- */
.ecp_CreateAccount .ecp-callout-box {
margin-bottom: 1rem;
text-align: center;
}
/* --- 10b-10. CustomerExists modal --- */
.ecp_CustomerExists .ecp-modal-content {
padding: 2rem 0;
color: var(--ecellar-text-secondary);
}
/* --- 10b-11. ChangeUsername heading --- */
.ecp_ChangeUsername h2 {
line-height: 1.2;
}
/* ============================================================
10b-JOIN. JOIN CLUB WIZARD (.ecp_JoinClub)
============================================================ */
/* --- Wizard step titles — override CDN #eaeaea bg --- */
.ecp_JoinClub h3 {
font-family: var(--public-font-heading);
font-size: 1.3rem;
font-weight: 600;
color: var(--ecellar-surface-text);
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
/* --- SelectTier --- */
.ecp_JoinClub__SelectTier h3 {
font-size: 1.15rem;
background: transparent;
border: none;
border-bottom: 1px solid var(--ecellar-border-subtle);
border-radius: 0;
padding: 0 0 0.75rem;
margin-bottom: 1.25rem;
line-height: 1.4;
}
/* Tier cards — elevated, hoverable */
.ecp_JoinClub__SelectTier .ecp-list-item {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.ecp_JoinClub__SelectTier .ecp-list-item:last-child {
margin-bottom: 0;
}
.ecp_JoinClub__SelectTier .ecp-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
border-color: var(--ecellar-accent-muted);
}
/* Selected tier — accent glow */
.ecp_JoinClub__SelectTier .ecp-list-item.selected,
.ecp_JoinClub__SelectTier .ecp-list-item.ecp-selected,
.ecp_JoinClub__SelectTier .ecp-list-item input[type="radio"]:checked ~ * {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 1px var(--ecellar-accent), 0 4px 16px var(--ecellar-accent-shadow);
}
/* Tier name */
.ecp_JoinClub__SelectTier .ecp-list-item h4,
.ecp_JoinClub__SelectTier .ecp-list-item h3 {
font-family: var(--public-font-heading);
color: var(--ecellar-surface-text);
font-weight: 600;
}
/* Tier price */
.ecp_JoinClub__SelectTier .ecp-list-item .ecp-price {
color: var(--ecellar-accent);
font-weight: 600;
font-size: 1.1rem;
}
/* Tier description */
.ecp_JoinClub__SelectTier .ecp-list-item p,
.ecp_JoinClub__SelectTier .ecp-list-item .ecp-description {
color: var(--ecellar-surface-text-secondary);
line-height: 1.5;
margin-top: 0.5rem;
}
/* --- CreateBillingAddress --- */
.ecp_JoinClub__CreateBillingAddress input[type=checkbox] {
margin-right: 0.5rem;
}
/* --- CreateCustomer (within JoinClub) --- */
.ecp_JoinClub__CreateCustomer p.ecp-warning {
margin-top: 1rem;
color: var(--ecellar-text-secondary);
}
/* --- Review --- */
.ecp_JoinClub__Review p.ecp-summary {
margin-bottom: 1rem;
color: var(--ecellar-text-secondary);
line-height: 1.5;
}
.ecp_JoinClub__Review h3 {
font-size: 1.1rem;
background: transparent;
border: none;
border-bottom: 1px solid var(--ecellar-border-subtle);
border-radius: 0;
padding: 0 0 0.5rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.ecp_JoinClub__Review .ecp-section {
margin-bottom: 2rem;
}
.ecp_JoinClub__Review .ecp-section-menu {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ecp_JoinClub__Review .ecp-section-menu a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_JoinClub__Review .ecp-section-menu a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
.ecp_JoinClub__Review textarea[name=account_note] {
margin-bottom: 1rem;
}
.ecp_JoinClub__Review .ecp-form label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
color: var(--ecellar-text-primary);
}
/* --- ThankYou — celebratory --- */
.ecp_JoinClub__ThankYou {
text-align: center;
padding: 2rem 0;
}
.ecp_JoinClub__ThankYou h2 {
font-family: var(--public-font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--ecellar-accent);
margin-bottom: 1rem;
}
.ecp_JoinClub__ThankYou p {
color: var(--ecellar-text-secondary);
font-size: 1.05rem;
line-height: 1.6;
max-width: 480px;
margin: 0 auto 1.5rem;
}
.ecp_JoinClub__ThankYou .ecp-item-list {
text-align: left;
max-width: 400px;
margin: 1.5rem auto;
padding: 1.25rem;
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
}
/* Continue / CTA button in ThankYou */
.ecp_JoinClub__ThankYou a.ecp-btn,
.ecp_JoinClub__ThankYou button.ecp-btn {
display: inline-block;
margin-top: 1.5rem;
padding: 0.75rem 2rem;
background: transparent;
color: var(--ecellar-accent);
border: 1px solid var(--ecellar-accent);
border-radius: 6px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_JoinClub__ThankYou a.ecp-btn:hover,
.ecp_JoinClub__ThankYou button.ecp-btn:hover {
background-color: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* ============================================================
10b-NEWS. JOIN NEWSLETTER (.ecp_JoinNewsletter)
============================================================ */
.ecp_JoinNewsletter {
container: ecp-newsletter-signup / inline-size;
}
.ecp_JoinNewsletter h3 {
font-family: var(--public-font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--ecellar-text-primary);
line-height: 1.4;
margin-bottom: 1rem;
}
@container ecp-newsletter-signup (min-width: 750px) {
.ecp_JoinNewsletter .ecp-form {
display: flex;
flex-flow: row;
}
.ecp_JoinNewsletter .ecp-form > button,
.ecp_JoinNewsletter .ecp-form > input {
width: 100%;
margin: 0 0.25rem 0 0;
}
}
/* ============================================================
10c. CLUB PAGES
(ClubSubscriptions, EditClubSubscription,
CreateClubSubscription, SuspendClubSubscription,
CancelClubSubscription, ClubSubscriptionThankYou)
============================================================ */
/* --- 10c-1. Shared club page container --- */
.ecp_ClubSubscriptions,
.ecp_EditClubSubscription,
.ecp_CreateClubSubscription,
.ecp_SuspendClubSubscription,
.ecp_CancelClubSubscription,
.ecp_ClubSubscriptionThankYou {
color: var(--ecellar-text-primary);
}
/* --- 10c-2. Club heading overrides — override CDN #edefef bg --- */
.ecp_ClubSubscriptions h3,
.ecp_CreateClubSubscription h3 {
font-family: var(--public-font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--ecellar-surface-text);
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 0.875rem 1.125rem;
margin-bottom: 1.25rem;
}
.ecp_EditClubSubscription h3 {
font-family: var(--public-font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--ecellar-text-primary);
border-bottom: 1px solid var(--ecellar-border-subtle);
line-height: 1.2;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
/* --- 10c-3. Section h4 — sub-headings --- */
.ecp_ClubSubscriptions h4,
.ecp_EditClubSubscription .ecp-form h4,
.ecp_CreateClubSubscription .ecp-form h4 {
font-family: var(--public-font-heading);
font-size: 1.05rem;
font-weight: 600;
color: var(--ecellar-surface-text);
border-bottom: 1px solid var(--ecellar-border-subtle);
line-height: 1.2;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.ecp_ClubSubscriptions .ecp-card .ecp-section:last-child h4 {
border-bottom: none;
padding-bottom: 0;
}
/* --- 10c-4. Subscription cards — elevated with status intent --- */
.ecp_ClubSubscriptions .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ecp_ClubSubscriptions .ecp-card:last-child {
margin-bottom: 1rem;
}
.ecp_ClubSubscriptions .ecp-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
/* --- 10c-5. Sections within cards --- */
.ecp_ClubSubscriptions .ecp-section {
margin-bottom: 1.75rem;
}
.ecp_ClubSubscriptions .ecp-section:last-child {
margin-bottom: 0.75rem;
}
/* Section menu (action links) */
.ecp_ClubSubscriptions .ecp-section-menu {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.ecp_ClubSubscriptions .ecp-section-menu a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_ClubSubscriptions .ecp-section-menu a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- 10c-6. Address & payment definition lists --- */
.ecp_ClubSubscriptions dl.ecp-address dt,
.ecp_ClubSubscriptions dl.ecp-payment-method dt {
font-weight: normal;
color: var(--ecellar-surface-text-secondary);
font-size: 0.875rem;
}
.ecp_ClubSubscriptions dl.ecp-address dd,
.ecp_ClubSubscriptions dl.ecp-payment-method dd {
color: var(--ecellar-surface-text);
}
/* --- 10c-7. HTML content blocks --- */
.ecp_ClubSubscriptions div.ecp-html-content {
color: var(--ecellar-surface-text-secondary);
margin-bottom: 1.75rem;
line-height: 1.6;
}
/* --- 10c-8. Callout box within subscriptions --- */
.ecp_ClubSubscriptions .ecp-callout-box {
font-size: 0.9rem;
margin-top: 1rem;
text-align: center;
color: var(--ecellar-surface-text-secondary);
}
/* --- 10c-9. Status badges — semantic tinted backgrounds --- */
.ecp_ClubSubscriptions .ecp-status,
.ecp_ClubSubscriptions .ecp-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.625rem;
border-radius: 100px;
line-height: 1.3;
}
/* Active — subtle green tint */
.ecp_ClubSubscriptions .ecp-status-active,
.ecp_ClubSubscriptions .ecp-badge-active {
background: rgba(34, 197, 94, 0.12);
color: rgb(34, 197, 94);
border: 1px solid rgba(34, 197, 94, 0.25);
}
/* Paused / Suspended — amber */
.ecp_ClubSubscriptions .ecp-status-suspended,
.ecp_ClubSubscriptions .ecp-badge-suspended,
.ecp_ClubSubscriptions .ecp-status-paused,
.ecp_ClubSubscriptions .ecp-badge-paused {
background: rgba(245, 158, 11, 0.12);
color: rgb(245, 158, 11);
border: 1px solid rgba(245, 158, 11, 0.25);
}
/* Cancelled — muted red */
.ecp_ClubSubscriptions .ecp-status-cancelled,
.ecp_ClubSubscriptions .ecp-badge-cancelled,
.ecp_ClubSubscriptions .ecp-status-canceled,
.ecp_ClubSubscriptions .ecp-badge-canceled {
background: rgba(239, 68, 68, 0.1);
color: rgb(239, 68, 68);
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* ============================================================
10c-EDIT. EDIT CLUB SUBSCRIPTION (.ecp_EditClubSubscription)
============================================================ */
/* --- Edit card container --- */
.ecp_EditClubSubscription .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.ecp_EditClubSubscription .ecp-card button {
margin-bottom: 0;
margin-top: 1.5rem;
}
/* --- Column layout — wider content area --- */
.ecp_EditClubSubscription .ecp-columns-left {
width: 10%;
}
.ecp_EditClubSubscription .ecp-columns-right {
width: 90%;
}
/* --- Tier list items --- */
.ecp_EditClubSubscription .ecp-list-item {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_EditClubSubscription .ecp-list-item:hover {
border-color: var(--ecellar-accent-muted);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* Highlighted first item (selected tier) */
.ecp_EditClubSubscription .ecp-highlight-first .ecp-list-item:first-child {
border-color: var(--ecellar-accent);
border-width: 2px;
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
}
/* Non-highlighted default: no dashed border */
.ecp_EditClubSubscription .ecp-list-item:first-child {
border-bottom: 1px solid var(--ecellar-border-subtle);
padding-bottom: 1.25rem;
}
/* --- Callout box within list items --- */
.ecp_EditClubSubscription .ecp-list-item .ecp-callout-box {
font-size: 0.9rem;
margin-top: 1rem;
padding: 0.625rem;
text-align: center;
color: var(--ecellar-text-secondary);
background: var(--ecellar-accent-bg-subtle);
border-radius: 6px;
}
/* --- Form input labels & number inputs --- */
.ecp_EditClubSubscription .ecp-form-input-label {
margin-left: 0.5rem;
color: var(--ecellar-text-secondary);
}
.ecp_EditClubSubscription .ecp-form-input-stack input[type="number"] {
text-align: center;
width: 20%;
}
.ecp_EditClubSubscription .ecp-form-row input[type="number"] {
text-align: center;
}
/* --- Callout warning --- */
.ecp_EditClubSubscription .ecp-callout-warning {
margin-top: 1rem;
}
/* ============================================================
10c-CREATE. CREATE CLUB SUBSCRIPTION (.ecp_CreateClubSubscription)
============================================================ */
/* --- Column layout --- */
.ecp_CreateClubSubscription .ecp-columns-left {
width: 10%;
}
.ecp_CreateClubSubscription .ecp-columns-right {
width: 90%;
}
/* --- Sections --- */
.ecp_CreateClubSubscription .ecp-section {
margin-bottom: 1.75rem;
}
.ecp_CreateClubSubscription .ecp-section:last-child {
margin-bottom: 0.75rem;
}
/* Section menu — action links matching h3 padding */
.ecp_CreateClubSubscription .ecp-section-menu {
font-size: 0.9rem;
padding: 0.875rem 1.125rem;
color: var(--ecellar-text-secondary);
}
.ecp_CreateClubSubscription .ecp-section-menu a {
color: var(--ecellar-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_CreateClubSubscription .ecp-section-menu a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- Card container --- */
.ecp_CreateClubSubscription .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.ecp_CreateClubSubscription .ecp-card button {
margin-bottom: 0;
margin-top: 1.5rem;
}
/* --- Form labels --- */
.ecp_CreateClubSubscription .ecp-form label {
display: inherit;
font-size: inherit;
color: var(--ecellar-text-secondary);
}
/* --- Tier list items — hoverable cards --- */
.ecp_CreateClubSubscription .ecp-list-item {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ecp_CreateClubSubscription .ecp-list-item:hover {
border-color: var(--ecellar-accent-muted);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
transform: translateY(-1px);
}
/* Callout box within list items */
.ecp_CreateClubSubscription .ecp-list-item .ecp-callout-box {
font-size: 0.9rem;
margin-top: 1rem;
padding: 0.625rem;
text-align: center;
color: var(--ecellar-text-secondary);
background: var(--ecellar-accent-bg-subtle);
border-radius: 6px;
}
/* --- Callout footer — themed borders --- */
.ecp_CreateClubSubscription .ecp-callout-footer {
border-top: 1px solid var(--ecellar-border-subtle);
font-size: 0.9rem;
margin-top: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
color: var(--ecellar-text-secondary);
}
.ecp_CreateClubSubscription .ecp-callout-footer:first-child {
margin-top: 1rem;
}
.ecp_CreateClubSubscription .ecp-callout-footer:last-child {
border-bottom: 1px solid var(--ecellar-border-subtle);
}
/* --- Callout box & warning --- */
.ecp_CreateClubSubscription .ecp-callout-box {
padding: 1rem;
color: var(--ecellar-text-secondary);
}
.ecp_CreateClubSubscription .ecp-callout-box .ecp-html-content {
margin-bottom: 0;
}
.ecp_CreateClubSubscription .ecp-form .ecp-callout-box label {
margin-bottom: 0;
}
.ecp_CreateClubSubscription .ecp-callout-warning {
margin-top: 1rem;
}
/* --- Form input labels & number inputs --- */
.ecp_CreateClubSubscription .ecp-form-input-label {
margin-left: 0.5rem;
color: var(--ecellar-text-secondary);
}
.ecp_CreateClubSubscription .ecp-form-input-stack input[type="number"] {
text-align: center;
width: 20%;
}
.ecp_CreateClubSubscription .ecp-form-row input[type="number"] {
text-align: center;
}
/* ============================================================
10c-SUSPEND. SUSPEND CLUB SUBSCRIPTION (.ecp_SuspendClubSubscription)
============================================================ */
.ecp_SuspendClubSubscription {
color: var(--ecellar-text-primary);
}
.ecp_SuspendClubSubscription dl.ecp-address dt {
font-weight: normal;
color: var(--ecellar-text-secondary);
font-size: 0.875rem;
}
.ecp_SuspendClubSubscription dl.ecp-address dt,
.ecp_SuspendClubSubscription dl.ecp-address dd {
padding-bottom: 0;
}
.ecp_SuspendClubSubscription dl.ecp-address dd {
color: var(--ecellar-text-primary);
}
.ecp_SuspendClubSubscription select {
margin-bottom: 0;
background: var(--ecellar-bg-input);
color: var(--ecellar-text-primary);
border: 1px solid var(--ecellar-border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_SuspendClubSubscription select:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_SuspendClubSubscription .ecp-bottomline {
padding-bottom: 1.75rem;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_SuspendClubSubscription .ecp-form-input-label {
font-weight: 600;
color: var(--ecellar-text-primary);
}
/* ============================================================
10c-CANCEL. CANCEL CLUB SUBSCRIPTION (.ecp_CancelClubSubscription)
============================================================ */
.ecp_CancelClubSubscription {
color: var(--ecellar-text-primary);
}
.ecp_CancelClubSubscription dl.ecp-address dt {
font-weight: normal;
color: var(--ecellar-text-secondary);
font-size: 0.875rem;
}
.ecp_CancelClubSubscription dl.ecp-address dt,
.ecp_CancelClubSubscription dl.ecp-address dd {
padding-bottom: 0;
}
.ecp_CancelClubSubscription dl.ecp-address dd {
color: var(--ecellar-text-primary);
}
.ecp_CancelClubSubscription select {
margin-bottom: 0;
background: var(--ecellar-bg-input);
color: var(--ecellar-text-primary);
border: 1px solid var(--ecellar-border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_CancelClubSubscription select:focus {
border-color: var(--ecellar-accent);
box-shadow: 0 0 0 3px var(--ecellar-accent-shadow);
outline: none;
}
.ecp_CancelClubSubscription .ecp-bottomline {
padding-bottom: 1.75rem;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_CancelClubSubscription .ecp-form-input-label {
font-weight: 600;
color: var(--ecellar-text-primary);
}
/* Cancel action — muted red, visible but not dominant */
.ecp_CancelClubSubscription button.ecp-btn-primary,
.ecp_CancelClubSubscription button[type="submit"] {
background: rgba(239, 68, 68, 0.15);
color: rgb(239, 68, 68);
border: 1px solid rgba(239, 68, 68, 0.3);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_CancelClubSubscription button.ecp-btn-primary:hover,
.ecp_CancelClubSubscription button[type="submit"]:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}
/* ============================================================
10c-THANKYOU. CLUB SUBSCRIPTION THANK YOU (.ecp_ClubSubscriptionThankYou)
============================================================ */
.ecp_ClubSubscriptionThankYou {
text-align: center;
}
.ecp_ClubSubscriptionThankYou h2 {
font-family: var(--public-font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--ecellar-text-primary);
line-height: 1.2;
margin-bottom: 1rem;
}
.ecp_ClubSubscriptionThankYou p {
color: var(--ecellar-text-secondary);
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.ecp_ClubSubscriptionThankYou .ecp-item-list {
text-align: left;
max-width: 400px;
margin: 1.5rem auto;
}
.ecp_ClubSubscriptionThankYou .ecp-item-list li {
margin-bottom: 0.5rem;
color: var(--ecellar-text-primary);
padding: 0.375rem 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
}
.ecp_ClubSubscriptionThankYou .ecp-item-list li:last-child {
border-bottom: none;
}
/* CTA buttons */
.ecp_ClubSubscriptionThankYou a.ecp-btn,
.ecp_ClubSubscriptionThankYou button.ecp-btn {
display: inline-block;
margin-top: 1.5rem;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_ClubSubscriptionThankYou a.ecp-btn:hover,
.ecp_ClubSubscriptionThankYou button.ecp-btn:hover {
background-color: var(--ecellar-accent-bg-subtle);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* ============================================================
11. DASHBOARD, ORDERS & ORDER DETAIL
============================================================
Dashboard: account home with box-set action cards.
Orders: order history list with status indicators.
Order Detail: full order view with items, totals, shipping/payment.
Reservations: reservation views themed consistently.
DeclinedOrders: declined order management.
============================================================ */
/* -----------------------------------------------------------
11a. DASHBOARD (.ecp_Dashboard)
----------------------------------------------------------- */
/* --- 11a-1. Dashboard container --- */
.ecp_Dashboard {
color: var(--ecellar-text-primary);
}
/* --- 11a-2. Dashboard callout box (card updater, allocation CTA) --- */
.ecp_Dashboard .ecp-callout-box {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
color: var(--ecellar-surface-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ecp_Dashboard .ecp-callout-box:hover {
border-color: var(--ecellar-accent-muted);
box-shadow: 0 2px 8px var(--ecellar-accent-shadow);
}
/* --- 11a-3. Dashboard callout warning --- */
.ecp_Dashboard .ecp-callout-warning {
border-radius: 10px;
margin-bottom: 1rem;
padding: 1rem;
text-align: left;
}
/* --- 11a-4. Dashboard item list (quick links) --- */
.ecp_Dashboard .ecp-item-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.ecp_Dashboard .ecp-item-list li {
margin-bottom: 0.25rem;
}
.ecp_Dashboard .ecp-item-list li a {
color: var(--ecellar-text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
padding: 0.5rem 0.75rem;
display: block;
border-radius: 6px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ecp_Dashboard .ecp-item-list li a:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
}
/* Allocation link — highlighted CTA */
.ecp_Dashboard .ecp-item-list li[data-ecp-handle="allocation_link"] {
border-top: 1px solid var(--ecellar-border-subtle);
border-bottom: 1px solid var(--ecellar-border-subtle);
padding: 0.5rem 0;
margin: 0.75rem 0;
}
.ecp_Dashboard .ecp-item-list li[data-ecp-handle="allocation_link"] a {
color: var(--ecellar-text-primary);
font-weight: 600;
}
.ecp_Dashboard .ecp-item-list li[data-ecp-handle="allocation_link"] a:hover {
color: var(--ecellar-accent);
}
/* -----------------------------------------------------------
11a-BOX. BOX-SET GRID (.ecp-box-set)
----------------------------------------------------------- */
/* --- 11a-box-1. Container --- */
.ecp-box-set {
background-color: transparent;
padding: 1.5rem 0;
}
/* --- 11a-box-2. Grid layout --- */
.ecp-box-set-items {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
/* --- 11a-box-3. Individual cards --- */
.ecp-box-set-item {
flex: 1 1 300px;
max-width: 500px;
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ecp-box-set-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border-color: var(--ecellar-accent-muted);
}
/* --- 11a-box-4. Card content container --- */
.ecp-box-set-item .ecp-box-set-item-box {
padding: 1.5rem;
background-color: var(--ecellar-card-bg);
max-height: 600px;
overflow-y: auto;
color: var(--ecellar-surface-text);
}
/* --- 11a-box-5. Section headers --- */
.ecp-box-set-item h3 {
color: var(--ecellar-surface-text);
font-family: var(--public-font-heading);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--ecellar-accent);
text-transform: none;
letter-spacing: normal;
}
/* --- 11a-box-6. Item list within cards --- */
.ecp-box-set .ecp-item-list {
list-style: none;
padding: 0;
margin: 0;
}
/* Force row layout on li — covers the case where eCellar renders the SVG
as a sibling of rather than inside it */
.ecp-box-set .ecp-item-list li {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2px;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.ecp-box-set .ecp-item-list li:hover {
/* hover handled on the inside, not the li, to avoid double-highlight */
}
/* --- 11a-box-7. Links with icons --- */
.ecp-box-set-item .ecp-box-set-item-box a {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 0.75rem;
flex: 1;
padding: 0.625rem 0.75rem;
color: var(--ecellar-surface-text);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.ecp-box-set-item .ecp-box-set-item-box a:hover {
color: var(--ecellar-accent);
background-color: var(--ecellar-accent-bg-subtle);
border-radius: 6px;
}
/* --- 11a-box-8. SVG icons --- */
.ecp-box-set-item .ecp-box-set-item-box a svg {
width: 20px;
height: 20px;
min-width: 20px;
flex-shrink: 0;
fill: currentColor;
transition: transform 0.2s ease;
}
.ecp-box-set-item .ecp-box-set-item-box a:hover svg {
transform: scale(1.1);
fill: var(--ecellar-accent);
}
/* --- 11a-box-9. Sign-out link (last item) --- */
.ecp-box-set .ecp-item-list li:last-child {
margin-top: 0.75rem;
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 0.75rem;
}
.ecp-box-set .ecp-item-list li:last-child a {
color: var(--ecellar-surface-text-secondary);
}
.ecp-box-set .ecp-item-list li:last-child a:hover {
color: var(--ecellar-accent);
}
/* --- 11a-box-10. Box-set scrollbars --- */
.ecp-box-set-item-box::-webkit-scrollbar {
width: 6px;
}
.ecp-box-set-item-box::-webkit-scrollbar-track {
background: var(--ecellar-scrollbar-track);
border-radius: 3px;
}
.ecp-box-set-item-box::-webkit-scrollbar-thumb {
background: var(--ecellar-scrollbar-thumb);
border-radius: 3px;
}
.ecp-box-set-item-box::-webkit-scrollbar-thumb:hover {
background: var(--ecellar-accent-muted);
}
/* -----------------------------------------------------------
11b. ORDERS (.ecp_Orders)
----------------------------------------------------------- */
/* --- 11b-1. Container --- */
.ecp_Orders {
color: var(--ecellar-text-primary);
}
/* --- 11b-2. Orders heading --- */
.ecp_Orders h3 {
font-family: var(--public-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--ecellar-text-primary);
border-bottom: 2px solid var(--ecellar-accent);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
}
.ecp_Orders h4 {
font-size: 1.05rem;
font-weight: 600;
color: var(--ecellar-text-primary);
margin-bottom: 0.75rem;
}
/* --- 11b-3. Orders list --- */
.ecp_Orders .ecp-x-list[data-ecp-handle="orders"] {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
/* --- 11b-4. Individual order card --- */
.ecp_Orders .ecp-list-item {
background-color: var(--ecellar-card-bg);
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
color: var(--ecellar-surface-text);
}
.ecp_Orders .ecp-list-item:hover {
border-color: var(--ecellar-accent-muted);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.ecp_Orders .ecp-list-item:last-child {
margin-bottom: 0;
}
/* --- 11b-5. Card topper (date, order number) --- */
.ecp_Orders .ecp-card-topper {
font-size: 0.875rem;
color: var(--ecellar-surface-text-muted);
margin-bottom: 1rem;
padding: 0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ecp_Orders .ecp-card-topper .ecp-right {
float: right;
}
/* --- 11b-6. Card body --- */
.ecp_Orders .ecp-card {
background-color: transparent;
padding: 0;
color: var(--ecellar-surface-text);
}
.ecp_Orders .ecp-card h4 {
font-size: 1.05rem;
font-weight: 600;
color: var(--ecellar-surface-text);
margin-bottom: 0.75rem;
}
/* --- 11b-7. Address display --- */
.ecp_Orders .ecp-address,
.ecp_Orders dl.ecp-address {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_Orders .ecp-address dt,
.ecp_Orders dl.ecp-address dt {
font-weight: 600;
color: var(--ecellar-surface-text);
margin-bottom: 0.25rem;
padding-bottom: 0;
}
.ecp_Orders dl.ecp-address dd {
padding-bottom: 0;
}
.ecp_Orders dl.ecp-address dd:last-child {
padding-bottom: 0;
}
/* --- 11b-8. Status & action row --- */
.ecp_Orders .ecp-card .ecp-clearfix {
font-size: 0.9rem;
color: var(--ecellar-surface-text);
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--ecellar-border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
}
.ecp_Orders .ecp-card .ecp-clearfix .ecp-right {
float: right;
}
.ecp_Orders .ecp-card .ecp-clearfix a {
color: var(--ecellar-accent);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
margin-left: 1rem;
}
.ecp_Orders .ecp-card .ecp-clearfix a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* --- 11b-9. Back to dashboard button --- */
.ecp_Orders .ecp-form button[data-ecp-action="load-dashboard"] {
margin-top: 1.5rem;
}
/* -----------------------------------------------------------
11c. ORDER DETAIL (.ecp_OrderDetail)
----------------------------------------------------------- */
/* --- 11c-1. Container --- */
.ecp_OrderDetail {
color: var(--ecellar-text-primary);
}
/* --- 11c-2. Headings --- */
.ecp_OrderDetail h2 {
font-family: var(--public-font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--ecellar-text-primary);
border-bottom: 2px solid var(--ecellar-accent);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.ecp_OrderDetail h3 {
font-family: var(--public-font-heading);
font-size: 1.2rem;
font-weight: 600;
color: var(--ecellar-text-primary);
border-bottom: 1px solid var(--ecellar-accent);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.ecp_OrderDetail h4 {
font-size: 1rem;
font-weight: 500;
color: var(--ecellar-text-primary);
line-height: 1.3;
margin-bottom: 0.5rem;
}
/* --- 11c-3. Sections — elevated cards --- */
.ecp_OrderDetail .ecp-section {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
transition: box-shadow 0.2s ease;
color: var(--ecellar-surface-text);
}
.ecp_OrderDetail .ecp-section:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* --- 11c-4. Labels --- */
.ecp_OrderDetail label {
font-weight: 600;
color: var(--ecellar-surface-text);
margin-bottom: 0.5rem;
}
/* --- 11c-5. Product list --- */
.ecp_OrderDetail .ecp-x-list[data-ecp-handle="products"] {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.ecp_OrderDetail .ecp-x-list[data-ecp-handle="products"] .ecp-list-item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--ecellar-border-subtle);
margin: 0;
}
.ecp_OrderDetail .ecp-x-list[data-ecp-handle="products"] .ecp-list-item:last-child {
border-bottom: none;
}
/* Item list with ul */
.ecp_OrderDetail ul.ecp-item-list li {
margin-bottom: 1rem;
}
.ecp_OrderDetail ul.ecp-item-list li:last-child {
margin-bottom: 0;
}
/* --- 11c-6. Cart item rows --- */
.ecp_OrderDetail .ecp-list-item .ecp-grid-row {
margin-bottom: 0.25rem;
}
/* Title row */
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(1) h4 {
font-size: 0.95rem;
font-weight: 500;
color: var(--ecellar-surface-text);
line-height: 1.3;
margin: 0 0 0.25rem 0;
padding: 0;
}
/* Price row — visible with clean styling */
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(2) {
color: var(--ecellar-surface-text-secondary);
font-size: 0.9rem;
}
.ecp_OrderDetail .ecp-price-regular {
padding-left: 1rem;
}
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(2) .ecp-price {
color: var(--ecellar-surface-text);
font-weight: 500;
}
/* Quantity/Total row */
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(3) {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 0.25rem;
color: var(--ecellar-surface-text-secondary);
font-size: 0.9rem;
}
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(3) .ecp-grid-col-2 {
color: var(--ecellar-surface-text);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5ch;
}
.ecp_OrderDetail .ecp-list-item .ecp-grid-row:nth-of-type(3) .ecp-grid-col-6 {
font-weight: 600;
color: var(--ecellar-surface-text);
font-size: 0.95rem;
}
/* CRV deposit row — hidden */
.ecp_OrderDetail .ecp-list-item div[data-ecp-handle="crv_deposit"] {
display: none;
}
/* --- 11c-7. Subtotals --- */
.ecp_OrderDetail .ecp-subtotals {
border-top: 1px solid var(--ecellar-border-subtle);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_OrderDetail .ecp-subtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
font-size: 0.95rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderDetail .ecp-subtotals .ecp-price {
font-weight: 500;
color: var(--ecellar-surface-text);
}
/* --- 11c-8. Grand total --- */
.ecp_OrderDetail .ecp-grandtotals {
border-top: 2px solid var(--ecellar-border);
padding-top: 1rem;
margin-top: 0.5rem;
}
.ecp_OrderDetail .ecp-grandtotals .ecp-grid-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--ecellar-surface-text);
}
.ecp_OrderDetail .ecp-grandtotals .ecp-price {
color: var(--ecellar-accent);
font-size: 1.3rem;
font-weight: 700;
}
/* --- 11c-9. Shipping & payment address --- */
.ecp_OrderDetail dl.ecp-address {
margin-bottom: 1rem;
line-height: 1.6;
color: var(--ecellar-surface-text-secondary);
}
.ecp_OrderDetail dl.ecp-address dt {
font-weight: 600;
color: var(--ecellar-surface-text);
padding-bottom: 0;
}
.ecp_OrderDetail dl.ecp-address dd {
padding-bottom: 0;
color: var(--ecellar-surface-text-secondary);
}
/* --- 11c-10. Tracking info --- */
.ecp_OrderDetail [data-ecp-handle="tracking_info_section"] {
margin-top: 1rem;
padding: 1rem;
background: var(--ecellar-accent-bg-subtle);
border: 1px solid var(--ecellar-accent-muted);
border-radius: 8px;
}
.ecp_OrderDetail [data-ecp-handle="tracking_info_section"] a {
color: var(--ecellar-accent);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.ecp_OrderDetail [data-ecp-handle="tracking_info_section"] a:hover {
color: var(--ecellar-accent-hover);
text-decoration: underline;
}
/* -----------------------------------------------------------
11d. RESERVATIONS (.ecp_Reservations)
----------------------------------------------------------- */
.ecp_Reservations {
color: var(--ecellar-text-primary);
}
.ecp_Reservations h3 {
font-family: var(--public-font-heading);
font-size: 1.2rem;
font-weight: 600;
color: var(--ecellar-surface-text);
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
.ecp_Reservations h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--ecellar-surface-text);
line-height: 1.2;
margin-bottom: 1rem;
}
.ecp_Reservations h5 {
font-size: 1rem;
font-weight: 500;
color: var(--ecellar-text-secondary);
margin-bottom: 1rem;
}
.ecp_Reservations .ecp-section {
margin-bottom: 2rem;
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 10px;
padding: 1.25rem 1.5rem;
color: var(--ecellar-surface-text);
}
.ecp_Reservations .ecp-section:last-child {
margin-bottom: 1rem;
}
.ecp_Reservations .ecp-card {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
color: var(--ecellar-surface-text);
}
.ecp_Reservations .ecp-card:last-child {
margin-bottom: 0;
}
.ecp_Reservations .ecp-card .ecp-item-list {
margin-bottom: 1rem;
}
.ecp_Reservations .ecp-card .ecp-item-list li {
margin-bottom: 0.5rem;
color: var(--ecellar-surface-text-secondary);
}
.ecp_Reservations .ecp-card dl.ecp-address dt {
font-weight: normal;
color: var(--ecellar-surface-text-secondary);
}
.ecp_Reservations .ecp-card dl.ecp-address dd {
color: var(--ecellar-surface-text);
}
/* -----------------------------------------------------------
11e. DECLINED ORDERS (.ecp_DeclinedOrders)
----------------------------------------------------------- */
.ecp_DeclinedOrders {
color: var(--ecellar-text-primary);
}
.ecp_DeclinedOrders h3 {
font-family: var(--public-font-heading);
font-size: 1.2rem;
font-weight: 600;
color: var(--ecellar-surface-text);
background-color: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
.ecp_DeclinedOrders .ecp-list-item {
background: var(--ecellar-card-bg);
border: 1px solid var(--ecellar-border-subtle);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
color: var(--ecellar-surface-text);
}
.ecp_DeclinedOrders .ecp-list-item:hover {
border-color: var(--ecellar-accent-muted);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ecp_DeclinedOrders .ecp-columns-left {
width: 10%;
}
.ecp_DeclinedOrders .ecp-columns-right {
width: 90%;
}
/* --- 11e. OrderPay --- */
.ecp_OrderPay {
color: var(--ecellar-text-primary);
}
.ecp_OrderPay h3 {
font-size: 1.2rem;
border-bottom: 1px solid var(--ecellar-accent);
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}
/* ============================================================
12. Scrollbars
============================================================ */
/* --- 12a. Webkit scrollbars (Chrome, Safari, Edge) --- */
.ecp-wrapper ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.ecp-wrapper ::-webkit-scrollbar-track {
background: var(--ecellar-scrollbar-track);
border-radius: 3px;
}
.ecp-wrapper ::-webkit-scrollbar-thumb {
background: var(--ecellar-scrollbar-thumb);
border-radius: 3px;
transition: background 0.2s ease;
}
.ecp-wrapper ::-webkit-scrollbar-thumb:hover {
background: var(--ecellar-accent-muted);
}
/* --- 12b. Firefox scrollbars --- */
.ecp-wrapper {
scrollbar-width: thin;
scrollbar-color: var(--ecellar-scrollbar-thumb) var(--ecellar-scrollbar-track);
}
.ecp-sidecart {
scrollbar-width: thin;
scrollbar-color: var(--ecellar-scrollbar-thumb) var(--ecellar-scrollbar-track);
}
/* ============================================================
13. MEDIA QUERIES (480 / 550 / 768 / 992 / 1024)
============================================================
ALL responsive styles consolidated here. Mobile is where most
wine purchases happen — every view must feel intentionally
designed for each size, not just "not broken."
Breakpoint strategy (desktop-first):
1024px — Desktop cart 2-column, minor adjustments
992px — Small desktop: product grid 2-col, reduced spacing
768px — Tablet: stacking begins, form columns collapse
550px — eCellar SideCart default breakpoint, allocation 2-col
480px — Phone: 1-col everything, full-width CTAs, stepper scroll
============================================================ */
/* -----------------------------------------------------------
13a. DESKTOP (min-width: 1024px)
Cart 2-column layout, sticky summary sidebar
----------------------------------------------------------- */
@media (min-width: 1024px) {
.ecp_Cart .ecp-cart-wrapper {
flex-direction: row;
align-items: flex-start;
}
.ecp_Cart .ecp-cart-contents {
flex: 1;
margin-right: 32px;
min-width: 0;
}
.ecp_Cart .ecp-cart-contents .ecp-section[data-ecp-handle="products"] {
width: 100%;
}
.ecp_Cart .ecp-cart-summary {
flex: 0 0 360px;
position: sticky;
top: 24px;
}
}
/* -----------------------------------------------------------
13b. SMALL DESKTOP (max-width: 992px)
Product grids to 2-col, slightly tighter spacing
----------------------------------------------------------- */
@media (max-width: 992px) {
/* Product grid — 3 to 2 columns */
.ecp_CategoryWithProducts .ecp-x-list,
.ecp_CategoriesList__Category .ecp-x-list,
.ecp-products-list,
.ecp-products,
.ecp-wrapper [data-ecp-handle="products"] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Related products — 3 to 2 columns */
.ecp-product-related-items {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Allocation product grid — 3 to 2 columns */
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Product detail — tighten gap */
.ecp_ProductDetail .ecp-columns {
gap: 24px;
}
/* Product tabs — tighter padding */
.ecp-product-tabs {
padding: 20px;
}
/* Wrapper — slightly tighter */
.ecp-wrapper {
padding: 16px;
}
/* Order Review sections — tighter padding */
.ecp_OrderReview .ecp-section {
padding: 1rem 1.25rem;
}
/* Box-set cards — allow smaller min */
.ecp-box-set-item {
flex: 1 1 260px;
}
}
/* -----------------------------------------------------------
13c. TABLET (max-width: 768px)
Stacking begins. Form columns collapse. Cart items tighten.
Typography scales down. Touch targets enforced.
----------------------------------------------------------- */
@media (max-width: 768px) {
/* --- Wrapper --- */
.ecp-wrapper {
padding: 12px;
}
/* --- Typography — scale headings proportionally --- */
.ecp_CategoriesList__Category h2,
.ecp_CategoryWithProducts h2,
.ecp-category-title {
font-size: 1.375rem;
margin-bottom: 16px;
padding-bottom: 10px;
}
.ecp_OrderReview h2 {
font-size: 1.375rem;
}
.ecp_ProductDetail h2 {
font-size: 1.375rem;
}
.ecp_CheckoutThankYou h2 {
font-size: 1.5rem;
}
/* Auth page headings */
.ecp_JoinList h2,
.ecp_JoinClub h2,
.ecp_ForgotPassword h2,
.ecp_ResetPassword h2,
.ecp_CreateAccount h2,
.ecp_CustomerExists h2,
.ecp_ChangeUsername h2,
.ecp_JoinNewsletter h2 {
font-size: 1.375rem;
}
/* --- Product grid — stay at 2-col --- */
.ecp_CategoryWithProducts .ecp-x-list,
.ecp_CategoriesList__Category .ecp-x-list,
.ecp-products-list,
.ecp-products,
.ecp-wrapper [data-ecp-handle="products"] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Product card — tighter padding */
.ecp-wrapper .ecp-list-item .ecp-columns {
padding: 16px 16px 0;
}
.ecp-wrapper .ecp-list-item .ecp-columns-left img {
max-height: 200px;
}
.ecp-wrapper .ecp-list-item h3 {
font-size: 1rem;
padding: 0 16px;
}
.ecp-wrapper .ecp-list-item .ecp-html-content {
padding: 0 16px;
font-size: 0.8125rem;
}
.ecp-wrapper .ecp-list-item .ecp-section[data-ecp-handle="available"] {
padding: 0 16px 16px;
}
/* Related products — 2-col */
.ecp-product-related-items {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ecp-product-related {
margin-top: 32px;
}
/* --- Product Detail — stack columns --- */
.ecp_ProductDetail {
margin-top: 24px;
padding: 0 12px;
}
.ecp_ProductDetail .ecp-columns {
flex-direction: column;
gap: 20px;
}
.ecp_ProductDetail .ecp-columns-left {
flex: 0 0 auto;
width: 100%;
}
.ecp_ProductDetail .ecp-columns-left img {
max-width: 280px;
}
.ecp_ProductDetail .ecp-columns-right {
width: 100%;
}
/* Product tabs — horizontal scroll for many tabs */
.ecp-product-tab-headers {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ecp-product-tab-headers::-webkit-scrollbar {
display: none;
}
.ecp-product-tab-header {
white-space: nowrap;
padding: 10px 16px;
flex-shrink: 0;
}
.ecp-product-tabs {
padding: 16px;
}
/* --- Main Cart --- */
.ecp_Cart {
padding: 16px;
}
.ecp_Cart h1 {
font-size: 1.5rem;
}
.ecp_Cart .ecp-cart-item {
gap: 12px;
padding: 12px;
}
.ecp_Cart .ecp-cart-item-image {
flex: 0 0 72px !important;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 96px !important;
min-height: 96px !important;
}
.ecp_Cart .ecp-cart-item-total {
min-width: 60px;
}
.ecp_Cart .ecp-cart-item-remove {
top: 8px;
right: 8px;
}
.ecp_Cart .ecp-cart-summary {
padding: 20px;
}
/* --- Order Review --- */
.ecp_OrderReview {
padding: 0 0.5rem;
}
.ecp_OrderReview .ecp-section {
padding: 1rem;
margin-bottom: 1.25rem;
}
.ecp_OrderReview .ecp-cart-item-image {
width: 72px;
height: 96px;
}
.ecp_OrderReview .ecp-list-item {
gap: 0.75rem;
}
/* Float-based grids inside order items — stack */
.ecp_OrderReview .ecp-list-item .ecp-grid-row h4 {
float: none;
display: block;
}
.ecp_OrderReview .ecp-list-item .ecp-grid-row ul li {
float: none;
margin-left: 0;
display: block;
}
/* --- Checkout --- */
.ecp_Checkout .ecp-payfields-wrapper {
padding: 1rem;
}
.ecp_Checkout h3 {
font-size: 1.05rem;
}
/* Checkout item float lists — stack */
.ecp_Checkout .ecp-list-item h4 {
float: none;
display: block;
}
.ecp_Checkout .ecp-list-item ul li {
float: none;
margin-left: 0;
display: block;
}
/* --- Form columns — collapse to full width --- */
.ecp-wrapper [class*=ecp-form-row-col-] {
float: none;
width: 100%;
padding: 0;
}
.ecp-wrapper [class*=ecp-form-row-col-]:first-child,
.ecp-wrapper [class*=ecp-form-row-col-]:last-child {
padding: 0;
}
/* --- Allocation Cart --- */
.ecp_AllocationCart h3 {
font-size: 1.25rem;
}
.ecp_AllocationCart .ecp-columns {
flex-direction: column;
align-items: center;
}
.ecp_AllocationCart .ecp-columns-left {
width: 100%;
margin-bottom: 1rem;
}
.ecp_AllocationCart .ecp-columns-right {
width: 100%;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item {
padding: 1.25rem;
}
/* --- Stepper — tighter on tablet --- */
.ecp_AllocationCart ul.ecp-stepper {
margin-bottom: 1.5rem;
}
.ecp_AllocationCart .ecp-stepper-line {
max-width: 48px;
}
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-line {
flex: 0 0 1.5rem;
}
/* --- Dashboard box-set — smaller cards --- */
.ecp-box-set-item {
flex: 1 1 240px;
}
.ecp-box-set-item-box {
padding: 1.25rem;
}
/* --- Orders --- */
.ecp_Orders .ecp-list-item {
padding: 1rem;
}
.ecp_Orders .ecp-card-topper {
flex-direction: column;
gap: 0.25rem;
}
.ecp_Orders .ecp-card-topper .ecp-right {
float: none;
}
/* --- Order Detail --- */
.ecp_OrderDetail h2 {
font-size: 1.25rem;
}
/* --- Club — subscription cards --- */
.ecp_ClubSubscriptions .ecp-card {
padding: 1.25rem;
}
/* --- Auth pages — tighter padding --- */
.ecp_JoinList,
.ecp_JoinClub,
.ecp_ForgotPassword,
.ecp_ResetPassword,
.ecp_CreateAccount,
.ecp_CustomerExists,
.ecp_ChangeUsername,
.ecp_JoinNewsletter {
padding: 24px 0;
}
.ecp_JoinClub {
max-width: 100%;
}
/* --- Touch targets — minimum 44px on interactive elements --- */
.ecp-wrapper button,
.ecp-wrapper input[type="submit"],
.ecp-wrapper select {
min-height: 44px;
}
.ecp_AccountNav li a,
.ecp_AccountNavWrapper li a {
min-height: 44px;
padding: 12px 16px;
}
.ecp-box-set .ecp-item-list a {
min-height: 44px;
}
/* Checkout thank you — narrower max-width */
.ecp_CheckoutThankYou {
max-width: 100%;
}
.ecp_CheckoutThankYou .ecp-section {
padding: 1rem;
}
/* Category margins */
.ecp_CategoriesList__Category,
.ecp_CategoryWithProducts__Category,
.ecp-category-section {
margin-bottom: 32px;
}
/* Dashboard callout — stack */
.ecp_Dashboard .ecp-callout-box {
padding: 0.875rem 1rem;
}
}
/* -----------------------------------------------------------
13d. SIDECART BREAKPOINT (max-width: 550px)
Match eCellar's default 550px breakpoint. SideCart goes
full-width. Sidekick goes full-width.
----------------------------------------------------------- */
@media (max-width: 550px) {
/* --- SideCart — full-screen feel --- */
.ecp-sidecart {
width: 100vw;
max-width: 100vw;
}
.ecp-sidecart-header {
padding: 14px 16px;
}
.ecp-sidecart-content {
padding: 16px;
}
.ecp-sidecart-footer {
padding: 14px 16px;
}
/* SideCart cart items — tighter */
.ecp-sidecart .ecp-cart-item {
gap: 10px;
padding: 12px 0;
}
.ecp-sidecart .ecp-cart-item-image {
flex: 0 0 60px !important;
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
height: 84px !important;
min-height: 84px !important;
}
/* SideCart detail row — tighter on mobile */
.ecp-sidecart .ecp-cart-item-detail {
gap: 6px;
}
.ecp-sidecart .ecp-cart-item-price .ecp-price {
font-size: 0.8125rem;
}
.ecp-sidecart .ecp-cart-item-quantity select {
padding: 4px 6px;
font-size: 0.8125rem;
}
.ecp-sidecart .ecp-cart-item-total strong {
font-size: 0.875rem;
}
/* SideCart suggestion slider — smaller cards */
.ecp-sidecart .ecp-slider-slides li {
flex: 0 0 200px;
min-width: 200px;
max-width: 200px;
}
/* SideCart button pair — stack vertically */
.ecp-sidecart .ecp-button-pair {
flex-direction: column;
gap: 8px;
}
.ecp-sidecart .ecp-button-pair button {
width: 100%;
}
/* --- Sidekick — full width --- */
.ecp-sidekick {
width: 100vw;
max-width: 100vw;
}
/* --- Product grid — single column at 550px --- */
.ecp_CategoryWithProducts .ecp-x-list,
.ecp_CategoriesList__Category .ecp-x-list,
.ecp-products-list,
.ecp-products,
.ecp-wrapper [data-ecp-handle="products"] {
grid-template-columns: 1fr;
gap: 16px;
}
/* Related products — single column */
.ecp-product-related-items {
grid-template-columns: 1fr;
gap: 16px;
}
/* --- Allocation grid — single column at 550px --- */
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] {
grid-template-columns: 1fr;
gap: 12px;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item {
padding: 1rem;
}
/* Allocation quantity row — stack label/value pairs */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span[class*="ecp-grid-col-"] {
text-align: left;
}
.ecp_AllocationCart .ecp-list-item .ecp-list-item ul.ecp-attributes li {
float: none;
margin-right: 0;
margin-bottom: 0.25rem;
}
}
/* -----------------------------------------------------------
13e. PHONE (max-width: 480px)
Single-column everything. Full-width CTAs. Stepper scroll.
Account nav as horizontal scrollable pills. Aggressive
spacing reduction while preserving breathing room.
----------------------------------------------------------- */
@media (max-width: 480px) {
/* --- Wrapper — compact --- */
.ecp-wrapper {
padding: 8px;
}
/* --- Typography — phone scale --- */
.ecp_CategoriesList__Category h2,
.ecp_CategoryWithProducts h2,
.ecp-category-title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.ecp_AllocationCart h3 {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.ecp_AllocationCart h4 {
font-size: 1.05rem;
}
.ecp_OrderReview h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.ecp_OrderReview .ecp-section h3,
.ecp_OrderReview h3 {
font-size: 1.05rem;
}
.ecp_Checkout h3 {
font-size: 1rem;
}
.ecp_CheckoutThankYou h2 {
font-size: 1.375rem;
}
.ecp_Orders h3 {
font-size: 1.1rem;
}
.ecp_OrderDetail h2 {
font-size: 1.125rem;
}
/* Auth headings */
.ecp_JoinList h2,
.ecp_JoinClub h2,
.ecp_ForgotPassword h2,
.ecp_ResetPassword h2,
.ecp_CreateAccount h2,
.ecp_CustomerExists h2,
.ecp_ChangeUsername h2,
.ecp_JoinNewsletter h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
/* --- Product grid — single column (reinforced from 550px) --- */
.ecp_CategoryWithProducts .ecp-x-list,
.ecp_CategoriesList__Category .ecp-x-list,
.ecp-products-list,
.ecp-products,
.ecp-wrapper [data-ecp-handle="products"] {
grid-template-columns: 1fr;
gap: 16px;
}
/* Product card — slightly larger image in single col */
.ecp-wrapper .ecp-list-item .ecp-columns-left img {
max-height: 220px;
}
/* Related products — single column */
.ecp-product-related-items {
grid-template-columns: 1fr;
gap: 16px;
}
.ecp-product-related {
margin-top: 24px;
}
.ecp-product-related-title {
font-size: 1.2rem;
}
/* --- Product Detail --- */
.ecp_ProductDetail {
margin-top: 16px;
padding: 0 8px;
}
.ecp_ProductDetail .ecp-columns-left img {
max-width: 240px;
}
.ecp-product-tabs {
padding: 12px;
margin-top: 24px;
}
.ecp-product-tab-header {
padding: 8px 12px;
font-size: 0.875rem;
}
/* --- Main Cart — compact --- */
.ecp_Cart {
padding: 12px;
}
.ecp_Cart h1 {
font-size: 1.25rem;
}
.ecp_Cart .ecp-cart-item {
gap: 10px;
padding: 10px;
}
.ecp_Cart .ecp-cart-item-image {
flex: 0 0 56px !important;
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
height: 76px !important;
min-height: 76px !important;
}
.ecp_Cart .ecp-cart-item-title {
font-size: 0.9rem;
}
.ecp_Cart .ecp-cart-item-quantity select {
padding: 6px 20px 6px 8px !important;
min-height: 44px;
}
.ecp_Cart .ecp-cart-item-total {
min-width: 52px;
}
.ecp_Cart .ecp-cart-item-total .total-value,
.ecp_Cart .ecp-cart-item-total strong,
.ecp_Cart .ecp-cart-item-total .ecp-price {
font-size: 0.9rem;
}
.ecp_Cart .ecp-cart-summary {
padding: 16px;
}
/* Empty cart state — tighter */
.ecp_Cart .ecp-cart-empty,
.ecp_Cart .ecp-empty-message {
padding: 40px 16px;
min-height: 200px;
}
/* --- Order Review — compact --- */
.ecp_OrderReview .ecp-section {
padding: 0.875rem;
margin-bottom: 1rem;
}
/* Section edit link — position relative on mobile */
.ecp_OrderReview .ecp-section-menu {
position: relative;
top: auto;
right: auto;
margin-bottom: 0.5rem;
}
.ecp_OrderReview .ecp-cart-item-image {
width: 56px;
height: 72px;
}
.ecp_OrderReview .ecp-list-item {
gap: 0.625rem;
padding: 0.75rem 0;
}
.ecp_OrderReview .ecp-cart-item-price {
font-size: 1rem;
}
/* --- Checkout — compact --- */
.ecp_Checkout .ecp-payfields-wrapper {
padding: 0.875rem;
}
.ecp_Checkout .ecp-grandtotals .ecp-grid-row {
font-size: 1.05rem;
}
.ecp_Checkout .ecp-grandtotals .ecp-price {
font-size: 1.1rem;
}
.ecp_CheckoutLocateAccount {
max-width: 100%;
}
.ecp_CreateGuestCustomer {
max-width: 100%;
}
/* --- Checkout Thank You --- */
.ecp_CheckoutThankYou .ecp-section {
padding: 0.875rem;
}
/* --- Stepper — horizontal scroll with snap --- */
.ecp_AllocationCart ul.ecp-stepper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
padding: 0.75rem 0;
margin-bottom: 1.25rem;
scrollbar-width: none;
}
.ecp_AllocationCart ul.ecp-stepper::-webkit-scrollbar {
display: none;
}
.ecp_AllocationCart .ecp-stepper-step {
flex-shrink: 0;
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.ecp_AllocationCart .ecp-stepper-line {
flex-shrink: 0;
max-width: 32px;
min-width: 20px;
}
/* Checkout stepper — also scrollable */
.ecp-wrapper ul.ecp-stepper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 1.25rem;
}
.ecp-wrapper ul.ecp-stepper::-webkit-scrollbar {
display: none;
}
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-step {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
font-size: 0.75rem;
}
.ecp-wrapper ul.ecp-stepper li.ecp-stepper-line {
flex: 0 0 1.25rem;
flex-shrink: 0;
}
/* --- Allocation grid — single column --- */
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] {
grid-template-columns: 1fr;
gap: 12px;
}
.ecp_AllocationCart div[data-ecp-handle="allocated_products"] > .ecp-list-item {
padding: 1rem;
}
/* Allocation quantity rows — tighter on phone */
.ecp_AllocationCart .ecp-list-item .ecp-grid-row[data-ecp-handle="quantity_row"],
.ecp_AllocationCart .ecp-list-item .ecp-grid-row[data-ecp-handle="limited_request_row"] {
gap: 0.25rem;
}
.ecp_AllocationCart .ecp-list-item .ecp-grid-row span[class*="ecp-grid-col-"] {
min-width: 0;
font-size: 0.75rem;
}
.ecp_AllocationCart .ecp-list-item .ecp-grid-row select {
font-size: 0.75rem;
min-width: 42px;
padding: 0.15rem 1.25rem 0.15rem 0.3rem;
}
/* --- Account nav — horizontal scrollable pills --- */
.ecp_AccountNavWrapper {
padding: 8px;
margin: 16px 0;
border-radius: 8px;
}
.ecp_AccountNav .ecp-item-list,
.ecp_AccountNav ul,
.ecp_AccountNavWrapper ul,
.ecp_AccountNav .ecp-dropdown-menu,
.ecp-dropdown[data-ecp-handle="nav_dropdown"] .ecp-dropdown-menu {
flex-direction: row;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 6px;
padding-bottom: 4px;
scrollbar-width: none;
}
.ecp_AccountNav .ecp-item-list::-webkit-scrollbar,
.ecp_AccountNav ul::-webkit-scrollbar,
.ecp_AccountNavWrapper ul::-webkit-scrollbar {
display: none;
}
.ecp_AccountNav li,
.ecp_AccountNavWrapper li {
flex-shrink: 0;
}
.ecp_AccountNav li a,
.ecp_AccountNavWrapper li a {
white-space: nowrap;
padding: 8px 14px;
border-left: none;
border-bottom: 2px solid transparent;
border-radius: 100px;
font-size: 13px;
min-height: 44px;
display: flex;
align-items: center;
gap: 6px;
background: var(--ecellar-bg-input);
}
.ecp_AccountNav li a:hover,
.ecp_AccountNavWrapper li a:hover {
transform: none;
border-left-color: transparent;
}
/* Active pill style */
.ecp_AccountNav li a.active,
.ecp_AccountNav li a.ecp-active-link,
.ecp_AccountNav li.active a,
.ecp_AccountNavWrapper li a.active,
.ecp_AccountNavWrapper li a.ecp-active-link,
.ecp_AccountNavWrapper li.active a,
.ecp_AccountNav li a[aria-current="page"],
.ecp_AccountNavWrapper li a[aria-current="page"] {
border-left: none;
border-left-color: transparent;
background: var(--ecellar-accent-bg-subtle);
border-bottom-color: var(--ecellar-accent);
animation: none;
}
/* Hide icons in pill mode for space */
.ecp_AccountNav li a svg,
.ecp_AccountNav li a .icon,
.ecp_AccountNav li a [class*="icon"],
.ecp_AccountNavWrapper li a svg,
.ecp_AccountNavWrapper li a .icon,
.ecp_AccountNavWrapper li a [class*="icon"] {
display: none;
}
/* Dividers hidden in horizontal mode */
.ecp_AccountNav .divider,
.ecp_AccountNav .separator,
.ecp_AccountNav hr,
.ecp_AccountNavWrapper .divider,
.ecp_AccountNavWrapper .separator,
.ecp_AccountNavWrapper hr {
display: none;
}
/* --- Dashboard --- */
.ecp-box-set-items {
gap: 1rem;
}
.ecp-box-set-item {
flex: 1 1 100%;
max-width: 100%;
}
.ecp-box-set-item-box {
padding: 1rem;
max-height: none;
}
.ecp_Dashboard .ecp-callout-box {
flex-direction: column;
text-align: center;
padding: 0.75rem;
gap: 0.5rem;
}
/* --- Orders — compact cards --- */
.ecp_Orders .ecp-list-item {
padding: 0.875rem 1rem;
}
.ecp_Orders .ecp-card .ecp-clearfix {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.ecp_Orders .ecp-card .ecp-clearfix .ecp-right {
float: none;
}
.ecp_Orders .ecp-card .ecp-clearfix a {
margin-left: 0;
}
/* --- Club — compact --- */
.ecp_ClubSubscriptions .ecp-card {
padding: 1rem;
}
/* --- Auth pages — full width --- */
.ecp_JoinList,
.ecp_JoinClub,
.ecp_ForgotPassword,
.ecp_ResetPassword,
.ecp_CreateAccount,
.ecp_CustomerExists,
.ecp_ChangeUsername,
.ecp_JoinNewsletter {
max-width: 100%;
padding: 16px 0;
}
/* JoinClub tier cards — tighter */
.ecp_JoinClub__SelectTier .ecp-list-item {
padding: 1rem;
margin-bottom: 1rem;
}
/* Club step headings */
.ecp_JoinClub h3 {
padding: 0.75rem 1rem;
font-size: 1.1rem;
}
/* --- Modals — full width on phone --- */
.ecp-wrapper .ecp-modal,
.ecp-wrapper .ecp-modal-small {
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
padding: 1.25rem;
}
/* --- Buttons — generous, tappable --- */
.ecp-wrapper button,
.ecp-wrapper input[type="submit"],
.ecp-wrapper .ecp-btn-primary,
.ecp-wrapper .ecp-btn-secondary {
min-height: 48px;
font-size: 0.95rem;
}
/* Category section spacing */
.ecp_CategoriesList__Category,
.ecp_CategoryWithProducts__Category,
.ecp-category-section {
margin-bottom: 24px;
}
/* SideCart header title */
.ecp-sidecart-header h2 {
font-size: 1.1rem;
}
}