/*
Theme Name: Helbetica Cart Theme
Theme URI: https://cervezapuntapiedras.com.ar
Author: Helbetica Cart
Author URI: https://cervezapuntapiedras.com.ar
Description: Child theme optimizado para Helbetica Cart con funcionalidades WooCommerce y páginas de menú personalizadas
Version: 1.0.0
Template: twentytwentyfive
Text Domain: helbetica-cart
*/
/* Custom styles for Helbetica Cart - Dark Mode Theme */
/* Global Reset */
*, *::before, *::after {
box-sizing: border-box;
}
/* Global Dark Mode Styles */
body {
background-color: #0a0a0a;
color: #e0e0e0;
overflow-x: hidden;
}
/* Override parent theme backgrounds */
.wp-site-blocks,
.entry-content,
.wp-block-post-content {
background-color: transparent !important;
}
/* Product Categories Container */
.helbetica-categories-container {
max-width: 1500px;
margin: 0 auto;
padding: 2rem;
background-color: #0a0a0a;
color: #e0e0e0;
box-sizing: border-box;
overflow-x: hidden;
}
/* Page Header with Address Selector */
.helbetica-page-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.helbetica-categories-container .page-title,
.helbetica-categories-container h1,
.woocommerce-products-header__title {
color: #ffffff;
margin-bottom: 0;
text-align: center;
font-size: 2.5rem;
margin-top: 0;
}
/* Navigation Menu Styles */
.helbetica-navigation {
background-color: #1a1a1a;
padding: 0;
margin-bottom: 0rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
border-bottom: 2px solid #2a2a2a;
position: relative;
}
/* Nav Wrapper: logo + menu row */
.helbetica-nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1500px;
margin: 0 auto;
padding: 0 2rem;
gap: 1.5rem;
}
.helbetica-nav-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.helbetica-nav-logo img {
max-height: calc(40px + 2rem);
width: auto;
display: block;
}
.helbetica-nav-menu {
display: flex;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
max-width: 1500px;
margin: 0 auto;
gap: 2rem;
flex-wrap: nowrap;
align-items: center;
flex: 1;
}
.helbetica-nav-menu li {
margin: 0;
padding: 1rem 0;
}
/* Push first menu item (user) to the left, rest to the right */
.helbetica-nav-menu li:first-child {
margin-right: auto;
}
.helbetica-nav-menu a {
color: #e0e0e0;
text-decoration: none;
padding: 1rem 1.5rem;
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.95rem;
}
.helbetica-nav-menu a:hover {
color: #f39c12;
background-color: #2a2a2a;
transform: translateY(-2px);
}
.helbetica-nav-menu .current-menu-item > a,
.helbetica-nav-menu .current_page_item > a {
color: #f39c12;
background-color: #2a2a2a;
}
/* Sub-menu styles */
.helbetica-nav-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #0a0a0a;
border: 1px solid #2a2a2a;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
min-width: 200px;
}
.helbetica-nav-menu li:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.helbetica-nav-menu .sub-menu li {
width: 100%;
}
.helbetica-nav-menu .sub-menu a {
display: block;
padding: 0.75rem 1rem;
border-radius: 0;
font-size: 0.9rem;
border-bottom: 1px solid #1a1a1a;
}
.helbetica-nav-menu .sub-menu a:hover {
background-color: #1a1a1a;
transform: none;
}
/* Navigation notice for admins */
.helbetica-nav-notice {
text-align: center;
padding: 1rem;
color: #b0b0b0;
}
.helbetica-nav-notice a {
color: #f39c12;
text-decoration: none;
}
.helbetica-nav-notice a:hover {
text-decoration: underline;
}
/* WordPress Block Navigation compatibility */
.helbetica-navigation .wp-block-navigation {
max-width: 1500px;
margin: 0 auto;
}
.helbetica-navigation .wp-block-navigation-item__label {
color: #e0e0e0;
transition: color 0.3s ease;
}
.helbetica-navigation .wp-block-navigation-item__label:hover {
color: #f39c12;
}
/* Cart Menu Item Styles */
.helbetica-cart-menu-item {
position: relative;
}
.helbetica-cart-link {
display: flex !important;
align-items: center;
gap: 0.5rem;
position: relative;
}
.helbetica-cart-icon {
width: 24px;
height: 24px;
color: #e0e0e0;
transition: color 0.3s ease;
}
.helbetica-cart-link:hover .helbetica-cart-icon {
color: #f39c12;
}
.helbetica-cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #f39c12;
color: #0a0a0a;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
min-width: 20px;
padding: 0 4px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.helbetica-cart-count[data-count="0"] {
display: none;
}
.helbetica-cart-link:hover .helbetica-cart-count {
background: #e67e22;
transform: scale(1.1);
}
/* Category Covers */
.helbetica-category-covers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.helbetica-category-cover {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #1a1a1a;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #2a2a2a;
}
.helbetica-category-cover:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
border-color: #f39c12;
}
.helbetica-category-cover img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.helbetica-category-cover:hover img {
opacity: 0.9;
}
.helbetica-category-cover h2 {
position: relative;
z-index: 2;
color: #ffffff;
background: rgba(0, 0, 0, 0.8);
padding: 1rem 2rem;
margin: 0;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Inline Product Cards Grid */
.helbetica-product-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.helbetica-inline-product-card {
background: #1a1a1a;
border-radius: 12px;
overflow: visible;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border: 1px solid #2a2a2a;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.helbetica-inline-product-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}
/* Product header with featured image */
.helbetica-product-header {
height: 250px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px 12px 0 0;
transition: background-image 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
/* Category name bar - centered inside header */
.helbetica-category-name-bar {
background: rgba(0, 0, 0, 0.55);
padding: 0.75rem 1.5rem;
width: 100%;
}
.helbetica-category-name-bar h2 {
color: #ffffff;
margin: 0;
font-size: 1.25rem;
font-weight: bolder;
letter-spacing: 1px;
text-align: left;
margin-bottom: 0.15rem;
}
/* Category Description (in header) */
.helbetica-category-description {
font-size: 13px;
color: rgba(218, 208, 214, 1);
margin: 0;
font-style: italic;
font-weight: 400;
text-align: left;
}
/* Product content area */
.helbetica-product-content {
padding: 1.5rem;
background: #1a1a1a;
}
.helbetica-product-content .helbetica-product-title {
color: #ffffff;
font-size: 1.1rem;
margin: 0;
font-weight: 500;
}
/* Variations styling for inline cards */
.helbetica-inline-product-card .helbetica-product-variants {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
.helbetica-inline-product-card .helbetica-variant-option {
display: flex;
align-items: center;
}
.helbetica-inline-product-card .helbetica-variant-radio {
display: none;
}
.helbetica-inline-product-card .helbetica-variant-label {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.5rem 1rem;
min-height: 52px;
background: #252525;
border: 1px solid #333;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.helbetica-inline-product-card .helbetica-variant-label:hover {
background: #2a2a2a;
border-color: #444;
}
.helbetica-inline-product-card .helbetica-variant-radio:checked + .helbetica-variant-label {
background: #333;
border-color: #f39c12;
box-shadow: 0 0 0 1px #f39c12;
}
.helbetica-inline-product-card .helbetica-variant-name {
color: #e0e0e0;
font-weight: 500;
text-transform: uppercase;
font-size: 0.9rem;
}
/* Variant info wrapper (name + description) */
.helbetica-inline-product-card .helbetica-variant-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
/* Variant description (term description) */
.helbetica-inline-product-card .helbetica-variant-description {
font-size: 11px;
color: rgba(218, 208, 214, 1);
font-weight: 300;
text-transform: none;
}
/* Variant swatch (mini thumbnail) */
.helbetica-inline-product-card .helbetica-variant-swatch {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 4px;
object-fit: cover;
margin-right: 10px;
border: 1px solid #444;
transition: border-color 0.2s ease;
}
.helbetica-inline-product-card .helbetica-variant-radio:checked + .helbetica-variant-label .helbetica-variant-swatch {
border-color: #f39c12;
}
.helbetica-inline-product-card .helbetica-variant-price {
color: #ffffff;
font-weight: 600;
font-size: 0.95rem;
}
/* Add to cart button for inline cards */
.helbetica-inline-product-card .helbetica-add-to-cart {
width: 100%;
padding: 0.875rem 1.5rem;
background: #333;
color: #999;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 0.5rem;
}
.helbetica-inline-product-card .helbetica-add-to-cart:not(:disabled) {
background: #f39c12;
color: #0a0a0a;
}
.helbetica-inline-product-card .helbetica-add-to-cart:not(:disabled):hover {
background: #e67e22;
transform: translateY(-2px);
}
.helbetica-inline-product-card .helbetica-add-to-cart:disabled {
cursor: not-allowed;
opacity: 0.7;
}
/* Cart controls for inline cards */
.helbetica-inline-product-card .helbetica-cart-controls {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.helbetica-inline-product-card .helbetica-quantity-input {
width: 60px;
padding: 0.875rem 0.5rem;
background: #252525;
border: 1px solid #333;
border-radius: 6px;
color: #e0e0e0;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
transition: all 0.2s ease;
-moz-appearance: textfield;
}
.helbetica-inline-product-card .helbetica-quantity-input::-webkit-outer-spin-button,
.helbetica-inline-product-card .helbetica-quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.helbetica-inline-product-card .helbetica-quantity-input:focus {
outline: none;
border-color: #f39c12;
background: #2a2a2a;
}
.helbetica-inline-product-card .helbetica-quantity-input:disabled {
background: #1a1a1a;
border-color: #2a2a2a;
color: #666;
cursor: not-allowed;
}
.helbetica-inline-product-card .helbetica-quantity-input:not(:disabled) {
border-color: #f39c12;
}
.helbetica-inline-product-card .helbetica-add-to-cart {
flex: 1;
margin-top: 0;
}
/* Variant cart qty indicator for inline cards */
.helbetica-inline-product-card .helbetica-variant-cart-qty {
color: #f39c12;
font-weight: 700;
}
/* Products Display Area */
.helbetica-products-display {
display: none;
animation: fadeIn 0.5s ease;
}
.helbetica-products-display.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Subcategory Radio Buttons (for Sandwich) */
.helbetica-subcategory-selector {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
justify-content: center;
}
.helbetica-subcategory-radio {
display: none;
}
.helbetica-subcategory-label {
padding: 0.75rem 2rem;
border: 2px solid #3a3a3a;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
background: #1a1a1a;
color: #e0e0e0;
}
.helbetica-subcategory-label:hover {
border-color: #f39c12;
color: #f39c12;
}
.helbetica-subcategory-radio:checked + .helbetica-subcategory-label {
background: #f39c12;
color: #0a0a0a;
border-color: #f39c12;
font-weight: 600;
}
/* Products Grid */
.helbetica-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
/* Individual Product Card */
.helbetica-product-card {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.helbetica-product-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border-color: #3a3a3a;
transform: translateY(-2px);
}
.helbetica-product-title {
font-size: 1.25rem;
margin-bottom: 1rem;
color: #ffffff;
font-weight: 600;
}
/* Product Description */
.helbetica-product-description {
margin: 0.5rem 0 0.75rem 0;
color: rgba(218, 208, 214, 1);
font-size: 12px;
line-height: 1.4;
font-weight: 300;
}
.helbetica-product-description p {
margin: 0.25rem 0;
}
/* Product description in inline cards */
.helbetica-inline-product-card .helbetica-product-description {
margin: 0.25rem 0 0.75rem 0;
}
/* Product Price */
.helbetica-product-price {
color: #f39c12;
font-size: 1.1rem;
font-weight: 600;
margin: 1rem 0;
}
/* Variable Product Variants (for Tabla) */
.helbetica-product-variants {
margin: 1rem 0;
}
.helbetica-variant-option {
display: block;
margin-bottom: 0.75rem;
}
.helbetica-variant-radio {
display: none;
}
.helbetica-variant-label {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border: 2px solid #2a2a2a;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: #0f0f0f;
color: #e0e0e0;
}
.helbetica-variant-label:hover {
border-color: #f39c12;
background: #1a1a1a;
}
.helbetica-variant-radio:checked + .helbetica-variant-label {
border-color: #f39c12;
background: #f39c12;
color: #0a0a0a;
}
.helbetica-variant-name {
font-weight: 500;
}
.helbetica-variant-price {
font-weight: 600;
}
/* Variant cart quantity indicator */
.helbetica-variant-cart-qty {
color: #f39c12;
font-weight: 700;
}
/* Cart Controls Container */
.helbetica-cart-controls {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
align-items: stretch;
}
/* Quantity Wrapper with +/- buttons */
.helbetica-qty-wrapper {
display: flex;
align-items: center;
background: #0f0f0f;
border: 2px solid #2a2a2a;
border-radius: 8px;
overflow: hidden;
}
.helbetica-qty-wrapper:has(.helbetica-quantity-input:not(:disabled)) {
border-color: #f39c12;
}
.helbetica-qty-wrapper .helbetica-qty-btn {
width: 36px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #888;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.helbetica-qty-wrapper .helbetica-qty-btn:not(:disabled):hover {
background: rgba(243, 156, 18, 0.2);
color: #f39c12;
}
.helbetica-qty-wrapper .helbetica-qty-btn:disabled {
color: #444;
cursor: not-allowed;
}
.helbetica-qty-wrapper .helbetica-quantity-input {
width: 50px;
height: 44px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
/* Quantity Input Field */
.helbetica-quantity-input {
width: 70px;
padding: 0.75rem 0.5rem;
background: #0f0f0f;
border: 2px solid #2a2a2a;
border-radius: 8px;
color: #e0e0e0;
font-size: 1rem;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
-moz-appearance: textfield;
}
.helbetica-quantity-input::-webkit-outer-spin-button,
.helbetica-quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.helbetica-quantity-input:focus {
outline: none;
border-color: #f39c12;
background: #1a1a1a;
}
.helbetica-quantity-input:disabled {
background: #1a1a1a;
border-color: #1a1a1a;
color: #666;
cursor: not-allowed;
}
/* Add to Cart Button */
.helbetica-add-to-cart {
flex: 1;
padding: 0.75rem 1.5rem;
background: #f39c12;
color: #0a0a0a;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.helbetica-add-to-cart:hover {
background: #e67e22;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
}
.helbetica-add-to-cart:disabled {
background: #2a2a2a;
color: #666;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Loading State */
.helbetica-loading {
text-align: center;
padding: 2rem;
}
.helbetica-loading::after {
content: "";
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid #2a2a2a;
border-top: 3px solid #f39c12;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Back Button */
.helbetica-back-button {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0.5rem 1.5rem;
background: #1a1a1a;
border: 1px solid #3a3a3a;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
color: #e0e0e0;
transition: all 0.3s ease;
}
.helbetica-back-button:hover {
background: #2a2a2a;
border-color: #f39c12;
color: #f39c12;
}
/* WooCommerce Overrides for Dark Mode */
.woocommerce-page {
background-color: #0a0a0a;
color: #e0e0e0;
}
.woocommerce-breadcrumb {
color: #b0b0b0;
}
.woocommerce-breadcrumb a {
color: #f39c12;
}
/* =============================================================================
Responsive Design
============================================================================= */
/* Large Tablet / Small Desktop (1024px - 1200px) */
@media (max-width: 1200px) {
.helbetica-categories-container {
padding: 1.5rem;
}
.helbetica-product-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.helbetica-categories-container {
padding: 1.25rem;
}
.helbetica-categories-container .page-title,
.helbetica-categories-container h1 {
font-size: 2.25rem;
}
.helbetica-category-covers {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.helbetica-product-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.helbetica-products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.helbetica-product-header {
height: 200px;
}
.helbetica-inline-product-card .helbetica-variant-label {
padding: 0.4rem 0.85rem;
min-height: 48px;
}
.helbetica-nav-menu {
gap: 0.5rem;
}
.helbetica-nav-menu a {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
}
/* Large Mobile / Small Tablet (576px - 768px) */
@media (max-width: 768px) {
.helbetica-categories-container {
padding: 1rem;
}
.helbetica-categories-container .page-title,
.helbetica-categories-container h1 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.helbetica-category-covers {
grid-template-columns: 1fr;
gap: 1rem;
}
.helbetica-subcategory-selector {
flex-direction: column;
gap: 0.75rem;
}
.helbetica-subcategory-label {
width: 100%;
text-align: center;
}
.helbetica-products-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.helbetica-product-cards-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.helbetica-product-header {
height: 120px;
}
.helbetica-category-name-bar h2 {
font-size: 1.1rem;
}
.helbetica-category-description {
font-size: 12px;
}
.helbetica-product-content {
padding: 1rem;
}
.helbetica-product-title {
font-size: 1rem;
}
.helbetica-product-description {
font-size: 11px;
}
.helbetica-inline-product-card .helbetica-variant-description {
font-size: 10px;
}
.helbetica-inline-product-card .helbetica-variant-swatch {
width: 24px;
height: 24px;
min-width: 24px;
margin-right: 8px;
}
.helbetica-inline-product-card .helbetica-variant-label {
padding: 0.35rem 0.75rem;
min-height: 44px;
}
.helbetica-inline-product-card .helbetica-variant-name {
font-size: 0.85rem;
}
.helbetica-inline-product-card .helbetica-variant-price {
font-size: 0.9rem;
}
.helbetica-cart-controls {
gap: 0.4rem;
}
.helbetica-quantity-input {
width: 60px;
padding: 0.6rem 0.4rem;
font-size: 0.9rem;
}
.helbetica-add-to-cart {
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.helbetica-navigation {
padding: 0.5rem 0;
}
/* Nav menu responsive handled in NAV WRAPPER RESPONSIVE section below */
.helbetica-cart-count {
position: static;
margin-left: 0.5rem;
top: auto;
right: auto;
}
.helbetica-back-button {
padding: 0.4rem 1rem;
font-size: 0.9rem;
}
}
/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
.helbetica-categories-container {
padding: 0.75rem;
}
.helbetica-categories-container .page-title,
.helbetica-categories-container h1 {
font-size: 1.5rem;
}
.helbetica-inline-product-card {
border-radius: 8px;
}
.helbetica-product-header {
height: 100px;
border-radius: 8px 8px 0 0;
}
.helbetica-category-name-bar {
padding: 0.5rem;
}
.helbetica-category-name-bar h2 {
font-size: 1rem;
}
.helbetica-category-description {
font-size: 11px;
}
.helbetica-product-content {
padding: 0.75rem;
}
.helbetica-product-title {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.helbetica-product-description {
font-size: 10px;
margin: 0.25rem 0 0.5rem 0;
}
.helbetica-inline-product-card .helbetica-variant-description {
font-size: 9px;
}
.helbetica-inline-product-card .helbetica-variant-swatch {
width: 22px;
height: 22px;
min-width: 22px;
margin-right: 6px;
border-radius: 3px;
}
.helbetica-product-variants {
margin: 0.5rem 0;
gap: 0.4rem;
}
.helbetica-variant-option {
margin-bottom: 0.5rem;
}
.helbetica-inline-product-card .helbetica-variant-label {
padding: 0.3rem 0.6rem;
min-height: 40px;
border-radius: 4px;
}
.helbetica-inline-product-card .helbetica-variant-name {
font-size: 0.8rem;
}
.helbetica-inline-product-card .helbetica-variant-price {
font-size: 0.85rem;
}
.helbetica-cart-controls {
margin-top: 0.75rem;
}
.helbetica-inline-product-card .helbetica-quantity-input {
width: 55px;
padding: 0.6rem 0.35rem;
font-size: 0.85rem;
}
.helbetica-inline-product-card .helbetica-add-to-cart {
padding: 0.6rem 0.75rem;
font-size: 0.8rem;
letter-spacing: 0.3px;
}
.helbetica-nav-menu a {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.helbetica-back-button {
margin-bottom: 1rem;
padding: 0.35rem 0.75rem;
font-size: 0.85rem;
}
}
/* Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
.helbetica-categories-container {
padding: 0.5rem;
}
.helbetica-categories-container .page-title,
.helbetica-categories-container h1 {
font-size: 1.35rem;
}
.helbetica-product-header {
height: 80px;
}
.helbetica-category-name-bar h2 {
font-size: 0.9rem;
}
.helbetica-product-content {
padding: 0.6rem;
}
.helbetica-inline-product-card .helbetica-variant-label {
padding: 0.25rem 0.5rem;
min-height: 38px;
}
.helbetica-inline-product-card .helbetica-variant-name {
font-size: 0.75rem;
}
.helbetica-inline-product-card .helbetica-variant-price {
font-size: 0.8rem;
}
.helbetica-inline-product-card .helbetica-quantity-input {
width: 50px;
padding: 0.5rem 0.25rem;
}
.helbetica-inline-product-card .helbetica-add-to-cart {
padding: 0.5rem 0.5rem;
font-size: 0.75rem;
}
}
/* ============================================================================
CART COMPONENTS
============================================================================ */
/* Cart Page */
.helbetica-cart-page {
min-height: 100vh;
background: var(--helbetica-dark, #131314);
padding: 2rem 1rem;
}
.helbetica-cart-container {
max-width: 800px;
margin: 0 auto;
}
.helbetica-cart-title {
color: #ffffff;
font-size: 2rem;
font-weight: 300;
margin-bottom: 2rem;
text-align: center;
}
.helbetica-cart-content {
background: var(--helbetica-gray, #1a1a1b);
border-radius: 12px;
padding: 1.5rem;
}
.helbetica-cart-continue {
margin-top: 2rem;
text-align: center;
}
/* Cart Empty State */
.helbetica-cart-empty {
text-align: center;
padding: 3rem 1rem;
}
.helbetica-cart-empty-icon {
color: #666;
margin-bottom: 1rem;
}
.helbetica-cart-empty p {
color: #888;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
/* Cart Groups */
.helbetica-cart-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.helbetica-cart-group {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 1.5rem;
}
.helbetica-cart-group:last-child {
border-bottom: none;
padding-bottom: 0;
}
.helbetica-cart-group-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.helbetica-cart-group-image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
}
.helbetica-cart-group-info {
flex: 1;
}
.helbetica-cart-group-category {
display: block;
font-size: 0.7rem;
color: var(--helbetica-orange, #f39c12);
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
.helbetica-cart-group-name {
color: #ffffff;
font-size: 1rem;
font-weight: 500;
margin: 0;
}
/* Cart Items */
.helbetica-cart-group-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-left: 0;
}
/* Group Subtotal */
.helbetica-cart-group-subtotal {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--helbetica-light-gray, #dad0d6);
font-size: 0.875rem;
}
.helbetica-cart-group-subtotal-value {
font-weight: 600;
color: var(--helbetica-orange, #f39c12);
}
.helbetica-cart-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.045);
border-radius: 8px;
}
.helbetica-cart-item-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
.helbetica-cart-item-swatch {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 4px;
object-fit: cover;
border: 1px solid #444;
}
.helbetica-cart-item-details {
flex: 1;
min-width: 0;
}
.helbetica-cart-item-name {
display: block;
color: #ffffff;
font-size: 0.9rem;
font-weight: 400;
}
.helbetica-cart-item-price {
display: block;
color: #888;
font-size: 0.8rem;
line-height: 0.8rem;
margin-top: 0.25rem;
}
.helbetica-cart-item-price-prefix {
font-size: 0.6rem;
line-height: 0.8rem;
}
.helbetica-cart-item-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Quantity Controls */
.helbetica-cart-item-qty {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.helbetica-qty-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
padding: 0;
}
.helbetica-qty-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.helbetica-cart-item-qty-input {
width: 36px;
height: 28px;
text-align: center;
background: transparent;
border: none;
color: #ffffff;
font-size: 0.875rem;
-moz-appearance: textfield;
}
.helbetica-cart-item-qty-input::-webkit-outer-spin-button,
.helbetica-cart-item-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.helbetica-cart-item-qty-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.05);
}
.helbetica-cart-item-qty-input.changed {
background: rgba(243, 156, 18, 0.2);
}
.helbetica-cart-item-subtotal {
color: #ffffff;
font-size: 0.9rem;
font-weight: 500;
min-width: 70px;
text-align: right;
}
.helbetica-cart-item-remove {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #666;
cursor: pointer;
transition: color 0.2s;
}
.helbetica-cart-item-remove:hover {
color: #e74c3c;
}
/* Cart Addresses */
.helbetica-cart-addresses {
margin-top: auto;
padding: 0.75rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.helbetica-cart-address-row {
display: flex;
align-items: center;
gap: 0.5rem;
color: #aaa;
font-size: 0.85rem;
}
.helbetica-cart-address-row svg {
flex-shrink: 0;
opacity: 0.6;
}
.helbetica-cart-address-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.helbetica-cart-address-label {
color: #ccc;
font-weight: 500;
}
.helbetica-cart-address-prefix {
color: #9ca3af;
font-weight: 400;
}
.helbetica-cart-address-badges {
display: inline-flex;
gap: 0.25rem;
}
.helbetica-address-badge-sm {
font-size: 0.6rem;
padding: 0.1rem 0.4rem;
}
.helbetica-cart-address-empty {
color: #666;
font-style: italic;
}
/* Cart Totals */
.helbetica-cart-totals {
margin-top: 0rem;
padding-top: 0rem;
}
.helbetica-cart-totals-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
color: #888;
font-size: 0.95rem;
}
.helbetica-cart-totals-total {
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Cart Actions */
.helbetica-cart-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.helbetica-cart-actions .helbetica-button {
flex: 1;
min-width: 140px;
}
/* Buttons */
.helbetica-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.helbetica-button-primary {
background: var(--helbetica-orange, #f39c12);
color: #000000;
}
.helbetica-button-primary:hover {
background: #e67e22;
transform: translateY(-1px);
}
.helbetica-button-secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.helbetica-button-secondary:hover {
background: rgba(255, 255, 255, 0.15);
}
.helbetica-button-outline {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.helbetica-button-outline:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
}
/* ============================================================================
CART SIDEBAR
============================================================================ */
.helbetica-cart-sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 9998;
}
.helbetica-cart-sidebar-overlay.active {
opacity: 1;
visibility: visible;
}
.helbetica-cart-sidebar {
position: fixed;
top: 0;
right: 0;
width: 550px;
max-width: 90vw;
height: 100vh;
background: var(--helbetica-gray, #1a1a1b);
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
z-index: 9999;
display: flex;
flex-direction: column;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}
.helbetica-cart-sidebar.active {
transform: translateX(0);
}
.helbetica-cart-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.helbetica-cart-sidebar-header h2 {
color: #ffffff;
font-size: 1.25rem;
font-weight: 500;
margin: 0;
}
.helbetica-cart-sidebar-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #888;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
}
.helbetica-cart-sidebar-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.helbetica-cart-sidebar-content {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
min-height: 0;
}
.helbetica-cart-sidebar-content > .helbetica-cart-items {
flex-shrink: 0;
}
/* Sidebar specific adjustments */
.helbetica-cart-sidebar .helbetica-cart-item {
padding: 0.5rem 0.5rem 0.5rem 1rem;
}
.helbetica-cart-sidebar .helbetica-cart-group-image {
width: 40px;
height: 40px;
}
.helbetica-cart-sidebar .helbetica-cart-actions {
flex-direction: column;
}
.helbetica-cart-sidebar .helbetica-cart-actions .helbetica-button {
width: 100%;
}
/* Empty Cart Button */
.helbetica-cart-empty-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
cursor: pointer;
padding: 0.5rem;
margin-top: 0.5rem;
transition: color 0.2s ease;
text-decoration: underline;
text-underline-offset: 2px;
}
.helbetica-cart-empty-btn:hover {
color: rgba(255, 255, 255, 0.7);
}
/* ============================================================================
CONFIRMATION MODAL
============================================================================ */
.helbetica-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10002;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.helbetica-modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Delete confirmation modal needs higher z-index */
#deleteAddressModal {
z-index: 10003;
}
.helbetica-modal {
background: linear-gradient(145deg, #1e1e1f 0%, #1a1a1b 100%);
border-radius: 16px;
padding: 2rem;
max-width: 360px;
width: 90%;
text-align: center;
transform: scale(0.95) translateY(10px);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.helbetica-modal-overlay.active .helbetica-modal {
transform: scale(1) translateY(0);
}
.helbetica-modal-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(243, 156, 18, 0.1);
}
.helbetica-modal-icon svg {
width: 32px;
height: 32px;
color: var(--helbetica-orange, #f39c12);
}
.helbetica-modal-icon-warning {
background: rgba(220, 53, 69, 0.1);
}
.helbetica-modal-icon-warning svg {
color: #dc3545;
}
.helbetica-modal-title {
color: #ffffff;
font-size: 1.35rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
letter-spacing: -0.02em;
}
.helbetica-modal-subtitle {
color: #707070;
font-size: 0.75rem;
font-weight: 400;
margin: 0 0 0.75rem 0;
line-height: 1.4;
}
.helbetica-modal-message {
color: #a0a0a0;
font-size: 0.95rem;
margin: 0 0 1.75rem 0;
line-height: 1.5;
}
.helbetica-modal-actions {
display: flex;
gap: 0.875rem;
justify-content: center;
}
.helbetica-modal-btn {
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
min-width: 110px;
position: relative;
overflow: hidden;
}
.helbetica-modal-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
pointer-events: none;
}
.helbetica-modal-btn-cancel {
background: rgba(255, 255, 255, 0.08);
color: #b0b0b0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.helbetica-modal-btn-cancel:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.helbetica-modal-btn-confirm {
background: linear-gradient(135deg, var(--helbetica-orange, #f39c12) 0%, #e67e22 100%);
color: #000000;
box-shadow: 0 4px 14px rgba(243, 156, 18, 0.3);
}
.helbetica-modal-btn-confirm:hover {
background: linear-gradient(135deg, #f5a623 0%, #f39c12 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
}
.helbetica-modal-btn-danger {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: #ffffff;
box-shadow: 0 4px 14px rgba(220, 53, 69, 0.3);
}
.helbetica-modal-btn-danger:hover {
background: linear-gradient(135deg, #e74c3c 0%, #dc3545 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}
.helbetica-modal-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Button Focus States for Accessibility */
.helbetica-modal-btn:focus-visible {
outline: 2px solid var(--helbetica-orange, #f39c12);
outline-offset: 2px;
}
.helbetica-modal-btn-cancel:focus-visible {
outline-color: #ffffff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.helbetica-modal-btn-confirm:focus-visible {
box-shadow:
0 0 0 4px rgba(243, 156, 18, 0.3),
0 4px 14px rgba(243, 156, 18, 0.3);
}
.helbetica-modal-btn-danger:focus-visible {
outline-color: #dc3545;
box-shadow:
0 0 0 4px rgba(220, 53, 69, 0.3),
0 4px 14px rgba(220, 53, 69, 0.3);
}
/* Active/pressed state */
.helbetica-modal-btn:active:not(:disabled) {
transform: translateY(0) scale(0.98);
}
/* Spacing before totals */
.helbetica-cart-items {
padding-bottom: 1rem;
}
/* ============================================================================
FLOATING CART BUTTON (FAB)
============================================================================ */
.helbetica-cart-fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--helbetica-orange, #f39c12);
color: #000000;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
transition: all 0.3s;
z-index: 9998;
}
.helbetica-cart-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(243, 156, 18, 0.5);
}
.helbetica-cart-fab-icon {
width: 24px;
height: 24px;
}
.helbetica-cart-fab-count {
position: absolute;
top: -5px;
right: -5px;
min-width: 24px;
height: 24px;
padding: 0 6px;
background: #e74c3c;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.helbetica-cart-fab-count:empty,
.helbetica-cart-fab-count[data-count="0"] {
display: none;
}
/* ============================================================================
CART RESPONSIVE
============================================================================ */
@media (max-width: 768px) {
.helbetica-cart-page {
padding: 1rem;
}
.helbetica-cart-title {
font-size: 1.5rem;
}
.helbetica-cart-content {
padding: 1rem;
}
.helbetica-cart-item {
flex-wrap: wrap;
}
.helbetica-cart-item-info {
flex-basis: 100%;
margin-bottom: 0.5rem;
}
.helbetica-cart-item-controls {
width: 100%;
justify-content: space-between;
}
.helbetica-cart-sidebar {
width: 100%;
max-width: 100%;
}
.helbetica-cart-fab {
bottom: 1rem;
right: 1rem;
width: 56px;
height: 56px;
}
}
@media (max-width: 480px) {
.helbetica-cart-group-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.helbetica-cart-group-image {
width: 100%;
height: 80px;
border-radius: 8px;
}
.helbetica-cart-item-subtotal {
min-width: auto;
}
.helbetica-cart-actions {
flex-direction: column;
}
.helbetica-cart-actions .helbetica-button {
width: 100%;
}
}
/* ============================================================================
ADDRESS MANAGEMENT SYSTEM
============================================================================ */
/* Address Selector (Header Button via Shortcode) */
/* Override nav menu styles when containing address selector */
.helbetica-nav-menu li:has(.helbetica-address-selector) > a {
padding: 0;
background: transparent !important;
transform: none !important;
}
.helbetica-nav-menu li:has(.helbetica-address-selector) > a:hover {
background: transparent !important;
transform: none !important;
}
.helbetica-address-selector {
display: flex;
align-items: center;
width: 100%;
}
.helbetica-address-trigger {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #e0e0e0;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
max-width: 320px;
position: relative;
overflow: hidden;
}
.helbetica-address-trigger::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.25s ease;
}
.helbetica-address-trigger:hover {
background: linear-gradient(135deg, rgba(243, 156, 18, 0.25) 0%, rgba(243, 156, 18, 0.12) 100%);
border-color: var(--helbetica-orange, #f39c12);
transform: translateY(-2px);
box-shadow:
0 4px 20px rgba(243, 156, 18, 0.4),
0 0 0 2px rgba(243, 156, 18, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.helbetica-address-trigger:hover::before {
opacity: 1;
}
.helbetica-address-trigger:hover .helbetica-address-icon {
transform: scale(1.1);
filter: drop-shadow(0 0 4px rgba(243, 156, 18, 0.5));
}
.helbetica-address-trigger:hover .helbetica-address-chevron {
transform: translateY(2px);
}
.helbetica-address-trigger:active {
transform: translateY(0);
box-shadow:
0 2px 8px rgba(243, 156, 18, 0.2),
inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Neutralize parent when nav-action button is inside a WP menu item */
.helbetica-nav-menu li:has(button.helbetica-nav-action) > a {
padding: 0;
background: transparent !important;
transform: none !important;
}
.helbetica-nav-menu li:has(button.helbetica-nav-action) > a:hover {
background: transparent !important;
transform: none !important;
}
/* Compact nav action button (same height + hover as address trigger, no width stretch) */
.helbetica-nav-action a,
button.helbetica-nav-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0rem 1rem;
min-height: 48px;
box-sizing: border-box;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: var(--helbetica-orange, #f39c12);
font-size: 0.875rem;
font-family: inherit;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-decoration: none;
white-space: nowrap;
}
.helbetica-nav-action a:hover,
button.helbetica-nav-action:hover {
background: linear-gradient(135deg, rgba(243, 156, 18, 0.25) 0%, rgba(243, 156, 18, 0.12) 100%);
border-color: var(--helbetica-orange, #f39c12);
transform: translateY(-2px);
box-shadow:
0 4px 20px rgba(243, 156, 18, 0.4),
0 0 0 2px rgba(243, 156, 18, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.helbetica-nav-action a:active,
button.helbetica-nav-action:active {
transform: translateY(0);
box-shadow:
0 2px 8px rgba(243, 156, 18, 0.2),
inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
button.helbetica-nav-action svg {
flex-shrink: 0;
color: var(--helbetica-orange, #f39c12);
transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button.helbetica-nav-action:hover svg {
color: #ffffff;
}
.helbetica-nav-action-text {
display: flex;
flex-direction: column;
line-height: 1.2;
text-align: left;
}
.helbetica-nav-action-label {
font-size: 0.65rem;
color: #707070;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
margin-bottom: 2px;
}
.helbetica-nav-action-value {
font-weight: 500;
color: #ffffff;
}
.helbetica-nav-action a {
display: inline-flex;
align-items: center;
}
.helbetica-nav-action a svg {
flex-shrink: 0;
color: var(--helbetica-orange, #f39c12);
transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-nav-action a:hover svg {
color: #ffffff;
}
/* Logout item — flex participant, visually demoted */
.helbetica-logout-item {
padding: 0 !important;
margin-left: 0.5rem;
}
.helbetica-logout-item > a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #707070 !important;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.helbetica-logout-item > a:hover {
background: transparent !important;
transform: none !important;
}
.helbetica-logout-item > a svg {
width: 20px;
height: 20px;
color: #707070;
transition: color 0.2s ease;
}
.helbetica-logout-item > a:hover svg,
.helbetica-logout-item > a:hover .helbetica-nav-action-value {
color: #ffffff;
}
.helbetica-logout-item .helbetica-nav-action-label {
color: #707070;
transition: all 0.2s ease;
}
.helbetica-logout-item>a:hover .helbetica-nav-action-label {
text-indent: 8px;
}
.helbetica-logout-item .helbetica-nav-action-value {
color: #707070;
font-weight: 500;
transition: color 0.2s ease;
}
.helbetica-address-trigger svg {
flex-shrink: 0;
color: var(--helbetica-orange, #f39c12);
position: relative;
z-index: 1;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-address-text {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
flex: 1;
overflow: hidden;
position: relative;
z-index: 1;
}
.helbetica-address-label {
font-size: 0.65rem;
color: #707070;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
}
.helbetica-address-value {
font-size: 0.875rem;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
font-weight: 500;
}
/* Address Modal - Large Variant */
.helbetica-modal-lg {
max-width: 520px;
width: 95%;
max-height: 90vh;
padding: 0;
text-align: left;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.helbetica-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.25rem 1.5rem;
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.helbetica-modal-header-text {
flex: 1;
min-width: 0;
}
.helbetica-modal-header h3 {
color: #ffffff;
font-size: 1.15rem;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
.helbetica-modal-close {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #666;
cursor: pointer;
border-radius: 10px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-modal-close svg {
width: 18px;
height: 18px;
}
.helbetica-modal-close:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
transform: rotate(90deg);
}
.helbetica-modal-body {
padding: 1.5rem;
max-height: calc(100vh - 200px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
scroll-behavior: smooth;
}
.helbetica-modal-body::-webkit-scrollbar {
width: 6px;
}
.helbetica-modal-body::-webkit-scrollbar-track {
background: transparent;
}
.helbetica-modal-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.helbetica-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.helbetica-modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Address Views */
.helbetica-address-view-hidden {
display: none !important;
}
/* Address List */
.helbetica-address-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 1.25rem;
}
.helbetica-address-item {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.helbetica-address-item::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
padding: 1px;
background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.helbetica-address-item:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.helbetica-address-item:hover::before {
opacity: 1;
}
.helbetica-address-item.selected {
border-color: var(--helbetica-orange, #f39c12);
background: linear-gradient(135deg, rgba(243, 156, 18, 0.08) 0%, rgba(243, 156, 18, 0.03) 100%);
box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
}
.helbetica-address-item.selected::before {
background: linear-gradient(135deg, rgba(243, 156, 18, 0.2) 0%, transparent 100%);
opacity: 1;
}
.helbetica-address-item-content {
display: flex;
align-items: flex-start;
gap: 0.875rem;
flex: 1;
cursor: pointer;
min-width: 0;
margin-top: 0.5rem;
}
.helbetica-address-radio {
margin-top: 0.2rem;
width: 20px;
height: 20px;
accent-color: var(--helbetica-orange, #f39c12);
cursor: pointer;
flex-shrink: 0;
}
.helbetica-address-item-info {
flex: 1;
min-width: 0;
}
.helbetica-address-item-header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.375rem;
flex-wrap: wrap;
}
.helbetica-address-item-label {
color: #ffffff;
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.01em;
}
.helbetica-address-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.6rem;
color: #000000;
font-size: 0.625rem;
font-weight: 700;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.helbetica-address-badge-billing {
background: linear-gradient(135deg, var(--helbetica-orange, #f39c12) 0%, #e67e22 100%);
color: #000000;
box-shadow: 0 2px 4px rgba(243, 156, 18, 0.2);
}
.helbetica-address-item-details {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.helbetica-address-item-address {
color: #a0a0a0;
font-size: 0.875rem;
line-height: 1.4;
}
.helbetica-address-item-city {
color: #808080;
font-size: 0.825rem;
line-height: 1.3;
}
.helbetica-address-item-phone {
color: #707070;
font-size: 0.8rem;
margin-top: 0.125rem;
}
.helbetica-address-item-actions {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.helbetica-address-edit-btn,
.helbetica-address-billing-btn,
.helbetica-address-delete-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #606060;
cursor: pointer;
border-radius: 10px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-address-edit-btn svg,
.helbetica-address-billing-btn svg,
.helbetica-address-delete-btn svg {
width: 16px;
height: 16px;
}
.helbetica-address-edit-btn:hover {
background: rgba(243, 156, 18, 0.1);
border-color: rgba(243, 156, 18, 0.3);
color: var(--helbetica-orange, #f39c12);
transform: scale(1.05);
}
.helbetica-address-delete-btn:hover {
background: rgba(220, 53, 69, 0.1);
border-color: rgba(220, 53, 69, 0.3);
color: #dc3545;
transform: scale(1.05);
}
/* Billing button - active state (this is the billing address) */
.helbetica-address-billing-btn.active {
background: rgba(243, 156, 18, 0.15);
border-color: rgba(243, 156, 18, 0.4);
color: var(--helbetica-orange, #f39c12);
}
/* Billing button - hover on inactive */
.helbetica-address-billing-btn:not(.active):hover {
background: rgba(243, 156, 18, 0.1);
border-color: rgba(243, 156, 18, 0.3);
color: var(--helbetica-orange, #f39c12);
transform: scale(1.05);
}
/* Address Empty State */
.helbetica-address-empty {
text-align: center;
padding: 3rem 1.5rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 16px;
margin-bottom: 1rem;
}
.helbetica-address-empty svg {
color: #3a3a3a;
margin-bottom: 1.25rem;
width: 56px;
height: 56px;
}
.helbetica-address-empty p {
color: #707070;
margin: 0.375rem 0;
font-size: 0.95rem;
}
.helbetica-address-empty p:first-of-type {
color: #909090;
font-weight: 500;
}
.helbetica-address-empty-hint {
font-size: 0.85rem;
color: #555 !important;
}
/* Address Loading State */
.helbetica-address-loading {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
padding: 3rem;
color: #707070;
font-size: 0.9rem;
}
.helbetica-address-loading::before {
content: "";
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--helbetica-orange, #f39c12);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Add Address Button */
.helbetica-address-add-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
width: 100%;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, rgba(243, 156, 18, 0.08) 0%, rgba(243, 156, 18, 0.03) 100%);
border: 1px dashed rgba(243, 156, 18, 0.3);
border-radius: 14px;
color: var(--helbetica-orange, #f39c12);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-address-add-btn svg {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.helbetica-address-add-btn:hover {
background: linear-gradient(135deg, rgba(243, 156, 18, 0.15) 0%, rgba(243, 156, 18, 0.08) 100%);
border-color: var(--helbetica-orange, #f39c12);
border-style: solid;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}
.helbetica-address-add-btn:hover svg {
transform: rotate(90deg);
}
.helbetica-address-add-btn:active {
transform: translateY(0);
}
/* Address Form */
.helbetica-address-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.helbetica-form-row {
display: flex;
gap: 1rem;
}
.helbetica-form-row .helbetica-form-group {
flex: 1;
}
.helbetica-form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.helbetica-form-group label {
color: #b0b0b0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 0.25rem;
}
.helbetica-form-group label .required {
color: var(--helbetica-orange, #f39c12);
margin-left: 2px;
}
.helbetica-form-input,
.helbetica-form-textarea,
.helbetica-form-select,
.helbetica-address-form input[type="text"],
.helbetica-address-form input[type="tel"],
.helbetica-address-form textarea {
padding: 0.9rem 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #ffffff;
font-size: 0.95rem;
font-family: inherit;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}
.helbetica-form-input:hover,
.helbetica-form-textarea:hover,
.helbetica-form-select:hover,
.helbetica-address-form input[type="text"]:hover,
.helbetica-address-form input[type="tel"]:hover,
.helbetica-address-form textarea:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2);
}
.helbetica-form-input:focus,
.helbetica-form-textarea:focus,
.helbetica-form-select:focus,
.helbetica-address-form input[type="text"]:focus,
.helbetica-address-form input[type="tel"]:focus,
.helbetica-address-form textarea:focus {
outline: none;
border-color: var(--helbetica-orange, #f39c12);
background: rgba(243, 156, 18, 0.06);
box-shadow:
0 0 0 3px rgba(243, 156, 18, 0.15),
0 1px 3px rgba(0, 0, 0, 0.15) inset;
}
.helbetica-form-input::placeholder,
.helbetica-form-textarea::placeholder,
.helbetica-address-form input::placeholder,
.helbetica-address-form textarea::placeholder {
color: #606060;
font-style: normal;
font-weight: 400;
opacity: 0.9;
}
.helbetica-form-textarea,
.helbetica-address-form textarea {
min-height: 80px;
resize: vertical;
line-height: 1.5;
}
.helbetica-form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.helbetica-form-select option {
background: #1a1a1b;
color: #ffffff;
}
/* Checkbox Group - Custom Design */
.helbetica-checkbox-label {
display: inline-flex;
align-items: center;
gap: 0.875rem;
cursor: pointer;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.helbetica-checkbox-label:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}
/* Hide native checkbox */
.helbetica-checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Custom checkbox box */
.helbetica-checkbox-label .helbetica-checkbox-box {
position: relative;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
/* Checkmark icon */
.helbetica-checkbox-label .helbetica-checkbox-box::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid transparent;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) scale(0);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.helbetica-checkbox-label span {
color: #b0b0b0;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s ease;
}
/* Hover state for checkbox box */
.helbetica-checkbox-label:hover .helbetica-checkbox-box {
border-color: var(--helbetica-orange, #f39c12);
background: rgba(243, 156, 18, 0.08);
}
/* Checked state */
.helbetica-checkbox-label:has(input:checked) {
background: rgba(243, 156, 18, 0.1);
border-color: rgba(243, 156, 18, 0.35);
}
.helbetica-checkbox-label:has(input:checked) .helbetica-checkbox-box {
background: var(--helbetica-orange, #f39c12);
border-color: var(--helbetica-orange, #f39c12);
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}
.helbetica-checkbox-label:has(input:checked) .helbetica-checkbox-box::after {
border-color: #000000;
transform: rotate(45deg) scale(1);
}
.helbetica-checkbox-label:has(input:checked) span {
color: #ffffff;
}
/* Focus state for accessibility */
.helbetica-checkbox-label:has(input:focus-visible) {
outline: 2px solid var(--helbetica-orange, #f39c12);
outline-offset: 2px;
}
.helbetica-checkbox-label:has(input:focus-visible) .helbetica-checkbox-box {
border-color: var(--helbetica-orange, #f39c12);
box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
}
/* Form Section Divider */
.helbetica-form-section {
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.helbetica-form-section-title {
color: #666;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
/* Form Actions */
.helbetica-form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
padding-top: 1.25rem;
margin-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Base button styles enhancement */
.helbetica-form-actions .helbetica-modal-btn {
min-width: 140px;
padding: 0.875rem 1.5rem;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.3px;
}
/* Form Back Button */
.helbetica-address-back-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #888;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 1.25rem;
}
.helbetica-address-back-btn svg {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.helbetica-address-back-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--helbetica-orange, #f39c12);
color: var(--helbetica-orange, #f39c12);
}
.helbetica-address-back-btn:hover svg {
transform: translateX(-3px);
}
/* Modal Button Variants */
.helbetica-modal-btn-primary {
background: var(--helbetica-orange, #f39c12);
color: #000000;
}
.helbetica-modal-btn-primary:hover {
background: #e67e22;
}
.helbetica-modal-btn-primary:disabled {
background: #555;
color: #888;
cursor: not-allowed;
}
.helbetica-modal-btn-danger {
background: #dc3545;
color: #ffffff;
}
.helbetica-modal-btn-danger:hover {
background: #c82333;
}
/* Delete Confirmation Modal */
#deleteAddressModal .helbetica-modal {
max-width: 360px;
text-align: center;
padding: 2rem;
}
/* ============================================================================
ADDRESS RESPONSIVE
============================================================================ */
@media (max-width: 767px) {
.helbetica-address-trigger {
padding: 0.5rem 0.875rem;
}
.helbetica-address-value {
font-size: 0.8rem;
}
.helbetica-modal-lg {
width: calc(100% - 1.5rem);
max-width: calc(100% - 1.5rem);
max-height: 85vh;
}
/* Address modal: top-anchored with scroll */
#addressModal {
align-items: flex-start;
padding-top: 2rem;
}
#addressModal .helbetica-modal-lg {
width: calc(100% - 1.5rem);
max-width: calc(100% - 1.5rem);
max-height: calc(100vh - 4rem);
}
.helbetica-modal-body {
max-height: calc(85vh - 120px);
overflow-y: auto;
}
.helbetica-form-row {
flex-direction: column;
gap: 1.125rem;
}
.helbetica-address-item {
padding: 1rem;
border-radius: 12px;
flex-wrap: wrap;
}
.helbetica-address-item-content {
flex: 1 1 100%;
min-width: 0;
}
.helbetica-address-item-actions {
flex-direction: row;
width: 100%;
justify-content: flex-end;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
gap: 0.5rem;
}
.helbetica-address-add-btn {
padding: 0.875rem 1rem;
border-radius: 12px;
}
.helbetica-form-actions {
flex-direction: column-reverse;
gap: 0.75rem;
}
.helbetica-form-actions .helbetica-modal-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 479px) {
.helbetica-address-trigger {
padding: 0.4rem 0.625rem;
gap: 0.375rem;
}
.helbetica-nav-action a,
button.helbetica-nav-action {
padding: 0.4rem 0.625rem;
font-size: 0.75rem;
border-radius: 10px;
}
.helbetica-address-trigger svg {
width: 18px;
height: 18px;
}
.helbetica-address-label {
font-size: 0.6rem;
}
.helbetica-address-value {
font-size: 0.75rem;
}
.helbetica-modal-header {
padding: 1rem 1.25rem;
}
.helbetica-modal-header h3 {
font-size: 1rem;
}
.helbetica-modal-close {
width: 34px;
height: 34px;
}
.helbetica-modal-body {
padding: 1.25rem;
}
.helbetica-modal-footer {
padding: 1rem 1.25rem;
flex-direction: column;
}
.helbetica-modal-footer .helbetica-modal-btn {
width: 100%;
}
.helbetica-form-input,
.helbetica-form-textarea,
.helbetica-form-select {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
}
/* ========================================
LOGIN WALL
======================================== */
body.page-template-page-puntos-de-venta #header,
body.page-template-page-puntos-de-venta #footer,
body.page-template-template-helbetica-products #header,
body.page-template-template-helbetica-products #footer {
display: none;
}
.helbetica-login-wall {
min-height: calc(100vh - 48px);
display: flex;
align-items: center;
justify-content: center;
background: #0a0a0a;
padding: 2rem 1rem;
}
.helbetica-login-container {
width: 100%;
max-width: 400px;
}
/* Brand */
.helbetica-login-brand {
text-align: center;
margin-bottom: 2.5rem;
}
.helbetica-login-logo {
max-width: 260px;
max-height: 220px;
width: auto;
height: auto;
margin: 0 auto 1.25rem;
display: block;
border-radius: 12px;
object-fit: contain;
}
.helbetica-login-title {
font-size: 1.5rem;
font-weight: 700;
color: #f39c12;
margin: 0 0 0.25rem;
letter-spacing: 0.02em;
}
.helbetica-login-subtitle {
font-size: 1.2rem;
color: #8a8a8a;
margin: 0;
}
/* Steps */
.helbetica-login-step-title {
font-size: 1.125rem;
font-weight: 600;
color: #dad0d6;
margin: 0 0 0.5rem;
text-align: center;
}
.helbetica-login-step-desc {
font-size: 0.875rem;
color: #8a8a8a;
margin: 0 0 1.5rem;
line-height: 1.5;
text-align: center;
}
/* Form */
.helbetica-login-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.helbetica-login-field {
display: flex;
flex-direction: column;
}
.helbetica-login-input-wrapper {
display: flex;
align-items: center;
background: #1a1a1b;
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s;
}
.helbetica-login-input-wrapper:focus-within {
border-color: #f39c12;
}
.helbetica-login-input-prefix {
padding: 0.75rem 0.75rem 0.75rem 1rem;
color: #8a8a8a;
font-size: 0.875rem;
white-space: nowrap;
user-select: none;
border-right: 1px solid #333;
}
.helbetica-login-input-wrapper input {
flex: 1;
background: transparent;
border: none;
padding: 0.75rem;
color: #dad0d6;
font-size: 1rem;
outline: none;
font-family: inherit;
}
.helbetica-login-input-wrapper input::placeholder {
color: #555;
}
/* OTP code input */
#loginOtpCode {
background: #1a1a1b;
border: 1px solid #333;
border-radius: 8px;
padding: 0.75rem 1rem;
color: #dad0d6;
font-size: 1.5rem;
text-align: center;
letter-spacing: 0.5em;
font-family: 'Courier New', monospace;
outline: none;
transition: border-color 0.2s;
}
#loginOtpCode:focus {
border-color: #f39c12;
}
#loginOtpCode::placeholder {
color: #444;
letter-spacing: 0.3em;
}
/* Button */
.helbetica-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1.5rem;
background: #f39c12;
color: #131314;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, opacity 0.2s;
font-family: inherit;
text-decoration: none;
}
.helbetica-login-btn:hover {
background: #e08e0b;
}
.helbetica-login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.helbetica-login-btn-whatsapp {
background: #25D366;
color: #fff;
margin-bottom: 1rem;
}
.helbetica-login-btn-whatsapp:hover {
background: #1ebe5d;
}
/* Actions (resend, back) */
.helbetica-login-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.helbetica-login-link {
background: none;
border: none;
color: #f39c12;
font-size: 0.875rem;
cursor: pointer;
padding: 0;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.helbetica-login-link:hover {
color: #e08e0b;
}
/* Feedback */
.helbetica-login-feedback {
margin-top: 1rem;
}
.helbetica-login-feedback-success {
padding: 0.75rem 1rem;
background: rgba(40, 167, 69, 0.15);
border: 1px solid rgba(40, 167, 69, 0.3);
border-radius: 8px;
color: #28a745;
font-size: 0.875rem;
}
.helbetica-login-feedback-error {
padding: 0.75rem 1rem;
background: rgba(220, 53, 69, 0.15);
border: 1px solid rgba(220, 53, 69, 0.3);
border-radius: 8px;
color: #dc3545;
font-size: 0.875rem;
}
/* Not registered */
.helbetica-login-not-registered {
text-align: center;
}
.helbetica-login-not-registered .helbetica-login-step-desc {
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 480px) {
.helbetica-login-container {
padding: 0;
}
.helbetica-login-title {
font-size: 1.25rem;
}
#loginOtpCode {
font-size: 1.25rem;
letter-spacing: 0.3em;
}
}
/* ========================================================================
CHECKOUT MODAL
======================================================================== */
.helbetica-checkout-view-hidden {
display: none !important;
}
.helbetica-checkout-section {
margin-bottom: 1.5rem;
}
.helbetica-checkout-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: #dad0d6;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(218, 208, 214, 0.15);
}
.helbetica-checkout-section-title svg {
flex-shrink: 0;
color: #f39c12;
}
.helbetica-checkout-optional {
font-weight: 400;
font-size: 0.8rem;
color: rgba(218, 208, 214, 0.5);
}
/* Checkout items summary */
.helbetica-checkout-item-group {
margin-bottom: 1rem;
}
.helbetica-checkout-group-name {
font-size: 0.85rem;
font-weight: 600;
color: #f39c12;
margin-bottom: 0.25rem;
}
.helbetica-checkout-item-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
font-size: 0.85rem;
color: #dad0d6;
}
.helbetica-checkout-item-grouped .helbetica-checkout-item-name {
font-weight: 600;
color: #f39c12;
}
.helbetica-checkout-item-qty {
flex-shrink: 0;
color: rgba(218, 208, 214, 0.6);
min-width: 2.5rem;
text-align: left;
}
.helbetica-checkout-item-name {
flex: 1;
}
.helbetica-checkout-item-price {
flex-shrink: 0;
font-weight: 500;
min-width: 7rem;
text-align: right;
}
.helbetica-checkout-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
margin-top: 0.5rem;
border-top: 2px solid rgba(218, 208, 214, 0.15);
font-size: 1.1rem;
font-weight: 700;
color: #dad0d6;
}
/* Checkout address */
.helbetica-checkout-address-text {
font-size: 0.9rem;
color: #dad0d6;
line-height: 1.5;
padding: 0.75rem;
background: rgba(218, 208, 214, 0.05);
border-radius: 8px;
border: 1px solid rgba(218, 208, 214, 0.1);
}
.helbetica-checkout-no-address {
font-size: 0.9rem;
color: #e74c3c;
padding: 0.75rem;
background: rgba(231, 76, 60, 0.1);
border-radius: 8px;
border: 1px solid rgba(231, 76, 60, 0.2);
}
/* Checkout notes */
.helbetica-checkout-notes {
width: 100%;
padding: 0.75rem;
background: rgba(218, 208, 214, 0.05);
border: 1px solid rgba(218, 208, 214, 0.15);
border-radius: 8px;
color: #dad0d6;
font-size: 0.9rem;
font-family: inherit;
resize: vertical;
transition: border-color 0.2s;
}
.helbetica-checkout-notes:focus {
outline: none;
border-color: #f39c12;
}
.helbetica-checkout-notes::placeholder {
color: rgba(218, 208, 214, 0.4);
}
/* Modal footer */
.helbetica-modal-footer {
display: flex;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid rgba(218, 208, 214, 0.1);
justify-content: flex-end;
}
/* Success view */
.helbetica-checkout-success {
text-align: center;
padding: 2rem 1rem;
}
.helbetica-checkout-success-icon {
margin-bottom: 1rem;
}
.helbetica-checkout-success-icon svg {
color: #2ecc71;
}
.helbetica-checkout-success-title {
font-size: 1.3rem;
font-weight: 700;
color: #dad0d6;
margin-bottom: 0.75rem;
}
.helbetica-checkout-success-message {
font-size: 0.95rem;
color: rgba(218, 208, 214, 0.8);
margin-bottom: 0.5rem;
}
.helbetica-checkout-success-total {
font-size: 1.1rem;
color: #dad0d6;
margin-bottom: 1rem;
}
.helbetica-checkout-success-whatsapp {
font-size: 0.85rem;
color: rgba(218, 208, 214, 0.5);
font-style: italic;
}
/* Error view */
.helbetica-checkout-error {
text-align: center;
padding: 2rem 1rem;
}
.helbetica-checkout-error-icon {
margin-bottom: 1rem;
}
.helbetica-checkout-error-icon svg {
color: #e74c3c;
}
.helbetica-checkout-error-title {
font-size: 1.3rem;
font-weight: 700;
color: #dad0d6;
margin-bottom: 0.75rem;
}
.helbetica-checkout-error-message {
font-size: 0.95rem;
color: rgba(218, 208, 214, 0.8);
}
/* ========================================================================
ORDER HISTORY
======================================================================== */
.helbetica-page-header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.helbetica-order-history-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem !important;
padding: 0.4rem 0.75rem !important;
white-space: nowrap;
}
.helbetica-order-history-btn svg {
flex-shrink: 0;
}
.helbetica-button-sm {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
.helbetica-order-history-loading {
text-align: center;
padding: 2rem;
color: rgba(218, 208, 214, 0.5);
}
.helbetica-order-history-empty {
text-align: center;
padding: 2rem 1rem;
color: rgba(218, 208, 214, 0.5);
}
.helbetica-order-history-empty svg {
margin-bottom: 0.75rem;
opacity: 0.4;
}
.helbetica-order-history-list {
max-height: 60vh;
overflow-y: auto;
}
/* Order cards */
.helbetica-order-card {
background: rgba(218, 208, 214, 0.05);
border: 1px solid rgba(218, 208, 214, 0.1);
border-radius: 10px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.helbetica-order-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(218, 208, 214, 0.08);
flex-wrap: wrap;
gap: 0.5rem;
}
.helbetica-order-card-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.helbetica-order-number {
font-weight: 700;
color: #dad0d6;
font-size: 0.95rem;
}
.helbetica-order-date {
font-size: 0.8rem;
color: rgba(218, 208, 214, 0.5);
}
.helbetica-order-card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.helbetica-order-status {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
}
.helbetica-order-status-processing {
background: rgba(243, 156, 18, 0.15);
color: #f39c12;
}
.helbetica-order-status-completed {
background: rgba(46, 204, 113, 0.15);
color: #2ecc71;
}
.helbetica-order-status-on-hold {
background: rgba(52, 152, 219, 0.15);
color: #3498db;
}
.helbetica-order-status-cancelled {
background: rgba(231, 76, 60, 0.15);
color: #e74c3c;
}
.helbetica-order-total {
font-weight: 700;
color: #dad0d6;
font-size: 0.95rem;
}
.helbetica-order-card-items {
padding: 0.5rem 1rem;
}
.helbetica-order-card-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
font-size: 0.85rem;
color: rgba(218, 208, 214, 0.8);
}
.helbetica-order-card-item.helbetica-order-item-unavailable {
opacity: 0.4;
text-decoration: line-through;
}
.helbetica-order-item-qty {
flex-shrink: 0;
color: rgba(218, 208, 214, 0.5);
min-width: 2rem;
}
.helbetica-order-item-name {
flex: 1;
}
.helbetica-order-item-total {
flex-shrink: 0;
}
.helbetica-order-card-actions {
padding: 0.5rem 1rem 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.helbetica-order-address-label {
font-size: 0.8rem;
color: #9ca3af;
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.helbetica-reorder-btn {
background: transparent !important;
border: 1px solid #f39c12 !important;
color: #f39c12 !important;
font-size: 0.8rem !important;
padding: 0.35rem 0.75rem !important;
border-radius: 6px !important;
cursor: pointer;
transition: all 0.2s;
}
.helbetica-reorder-btn:hover {
background: rgba(243, 156, 18, 0.1) !important;
}
.helbetica-reorder-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Toast notification */
.helbetica-toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(1rem);
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
z-index: 100001;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
max-width: 90vw;
text-align: center;
}
.helbetica-toast.active {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.helbetica-toast-success {
background: #2ecc71;
color: #fff;
}
.helbetica-toast-error {
background: #e74c3c;
color: #fff;
}
/* Responsive */
@media (max-width: 480px) {
.helbetica-order-card-header {
flex-direction: column;
align-items: flex-start;
}
.helbetica-checkout-item-row {
font-size: 0.8rem;
}
.helbetica-modal-footer {
flex-direction: column;
}
.helbetica-modal-footer .helbetica-modal-btn {
width: 100%;
}
}
/* ============================================================================
USER INFO SHORTCODE (Nav)
============================================================================ */
/* Neutralize parent when user-info span is inside a WP menu item */
.helbetica-nav-menu li:has(.helbetica-user-info) > a {
padding: 0;
background: transparent !important;
transform: none !important;
}
.helbetica-nav-menu li:has(.helbetica-user-info) > a:hover {
background: transparent !important;
transform: none !important;
}
.helbetica-user-info {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.04);
/* border: 1px solid rgba(255, 255, 255, 0.12); */
/* border-left: 2px solid var(--helbetica-orange, #f39c12); */
/* border-right: 2px solid var(--helbetica-orange, #f39c12); */
border-radius: 12px;
cursor: default;
color: #dad0d6;
font-size: 0.85rem;
white-space: nowrap;
text-transform: none;
letter-spacing: normal;
}
.helbetica-user-info-flag {
flex-shrink: 0;
}
.helbetica-user-info-icon {
flex-shrink: 0;
color: var(--helbetica-orange, #f39c12);
width: 20px;
height: 20px;
}
.helbetica-user-info-details {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.helbetica-user-info-meta {
font-size: 0.65rem;
color: #707070;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
margin-bottom: 2px;
}
.helbetica-user-info-value {
font-weight: 500;
font-size: 0.875rem;
color: #ffffff;
}
.helbetica-user-info-phone {
font-size: 0.7rem;
color: #8a8a8a;
font-variant-numeric: tabular-nums;
}
/* ============================================================================
NAV WRAPPER RESPONSIVE
============================================================================ */
/* --- Tablet: condensed single row ---------------------------------------- */
@media (max-width: 1023px) {
.helbetica-nav-wrapper {
padding: 0 1rem;
gap: 1rem;
}
.helbetica-nav-logo img {
max-height: 100px;
}
.helbetica-nav-menu {
gap: 1rem;
}
/* Hide small uppercase labels (HISTÓRICO, ENVIAR A, SESIÓN) */
.helbetica-nav-action-label,
.helbetica-address-label {
display: none;
}
/* Truncate address value */
.helbetica-address-value {
max-width: 180px;
}
/* Hide LOG OUT text, keep icon */
.helbetica-logout-item .helbetica-nav-action-text {
display: none;
}
}
/* --- Mobile: two-row compact layout -------------------------------------- */
@media (max-width: 767px) {
.helbetica-nav-wrapper {
padding: 0.5rem 0.75rem;
gap: 0.5rem;
}
.helbetica-nav-logo img {
max-height: 100px;
}
.helbetica-nav-menu {
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
}
.helbetica-nav-menu li {
padding: 0.25rem 0;
}
/* Row 1: user info grows to fill, pushing logout to the right */
.helbetica-nav-menu li:first-child {
flex: 1 1 auto;
margin-right: 0;
}
/* Logout icon stays on Row 1 next to user info */
.helbetica-logout-item {
order: 2;
flex: 0 0 auto;
margin-left: 0;
}
/* Hide MIS PEDIDOS text label, keep icon */
.helbetica-nav-menu li:has(button.helbetica-nav-action) .helbetica-nav-action-text {
display: none;
}
/* Row 2: address forces a new line via large basis, leaves room for icon */
.helbetica-nav-menu li:has(.helbetica-address-selector) {
order: 10;
flex: 1 1 calc(100% - 56px);
min-width: 0;
}
/* MIS PEDIDOS sits at end of Row 2 */
.helbetica-nav-menu li:has(button.helbetica-nav-action) {
order: 11;
flex: 0 0 auto;
}
/* Address stretches on mobile */
.helbetica-address-trigger {
max-width: 100%;
}
.helbetica-address-value {
max-width: 100%;
}
/* Hide user info meta on mobile */
.helbetica-user-info-meta {
display: none;
}
.helbetica-user-info {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
/* Compact nav action buttons */
.helbetica-nav-action a,
button.helbetica-nav-action {
min-height: 40px;
padding: 0.4rem 0.75rem;
}
.helbetica-logout-item > a {
padding: 0.4rem 0.75rem !important;
}
}
/* --- Small mobile: extra compactness ------------------------------------- */
@media (max-width: 479px) {
.helbetica-nav-wrapper {
padding: 0.375rem 0.5rem;
}
.helbetica-nav-logo img {
max-height: 90px;
}
.helbetica-user-info {
padding: 0.35rem 0.625rem;
font-size: 0.75rem;
gap: 0.375rem;
}
.helbetica-user-info-flag {
width: 16px;
height: 11px;
}
.helbetica-user-info-icon {
width: 15px;
height: 15px;
}
}