/** * Cugino's Premium Theme - WooCommerce Styles * Complete styling for all WooCommerce pages * Matching the dark luxury aesthetic with warm gold accents * * Color Palette: * - Blacks: #000000, #0B0B0B, #0F0F0F, #1A1A1A, #252525 * - Gold: #E9A84A (primary), #F2BE6A (light), #D4923A (dark) * - Grays: #737373, #A3A3A3, #D4D4D4 * - White: #FFFFFF */ /* ========================================= VARIABLES (inherit from main.css) ========================================= */ :root { --color-gold-rgb: 233, 168, 74; } /* ========================================= GLOBAL WOOCOMMERCE RESET ========================================= */ .woocommerce, .woocommerce-page { color: var(--color-gray-300); background: var(--color-black-deep); } /* IMPORTANT: WooCommerce adds `woocommerce` class on , so `.woocommerce a` would affect header/footer too. Keep Woo link styling restricted to the content area only. */ body.woocommerce #content a { color: var(--color-gold); transition: var(--transition-base); } body.woocommerce #content a:hover { color: var(--color-gold-light); } /* IMPORTANT: WooCommerce adds `woocommerce` class on , so `.woocommerce a` affects header/footer links too. Keep global link color, but never override branded buttons. */ body.woocommerce a.btn-gold, body.woocommerce .btn-gold, body.woocommerce a.btn.btn-gold, body.woocommerce .btn.btn-gold { color: var(--color-black) !important; } body.woocommerce a.btn-gold:hover, body.woocommerce .btn-gold:hover, body.woocommerce a.btn.btn-gold:hover, body.woocommerce .btn.btn-gold:hover { color: var(--color-black) !important; } body.woocommerce .btn-gold svg, body.woocommerce a.btn-gold svg { stroke: currentColor; } /* ========================================= FORCE SPACING FOR WOOCOMMERCE PAGES ========================================= */ body.woocommerce-page #content, body.woocommerce-cart #content, body.woocommerce-checkout #content, body.woocommerce-account #content { padding-top: 0px !important; } body.woocommerce-page .site-main, body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main, body.woocommerce-account .site-main { padding-top: 40px !important; min-height: 80vh; } /* Account page spacing: header is fixed, so reserve full header height to avoid collisions */ body.woocommerce-account .site-main { min-height: unset !important; padding-top: calc(var(--header-height) + 20px) !important; padding-bottom: 56px; } /* If the Woo wrapper header is used on account pages, it already sits inside .site-main */ body.woocommerce-account .woo-page-header { padding-top: var(--space-3xl); } /* Cart page: avoid huge empty vertical space */ body.woocommerce-cart .site-main { min-height: unset !important; padding-top: calc(var(--header-height) + 20px) !important; padding-bottom: 56px; } /* Checkout page spacing */ body.woocommerce-checkout .site-main { min-height: unset !important; padding-top: calc(var(--header-height) + 20px) !important; padding-bottom: 56px; } /* Override for single product */ body.single-product .site-main { padding-top: 0 !important; } /* Hide any floating/overlay images on cart */ body.woocommerce-cart .woocommerce-notices-wrapper img, body.woocommerce-cart .woocommerce img:not(.attachment-woocommerce_thumbnail), body.woocommerce-cart .cart-empty img, body.woocommerce-cart .woocommerce > img { display: none !important; } /* Force proper z-index for header */ body.woocommerce-page .site-header, body.woocommerce-cart .site-header { z-index: 9999 !important; position: fixed !important; } /* Desktop + mobile: keep header solid on account pages (prevents visual bleed/collision) */ body.woocommerce-account .site-header { background: rgba(11, 11, 11, 0.96) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } body.woocommerce-account .site-header::before { opacity: 0 !important; } /* Mobile: keep header solid on WooCommerce pages to avoid content "bleeding" behind the header before JS toggles `.scrolled`. */ @media (max-width: 768px) { body.woocommerce-page .site-header { background: rgba(11, 11, 11, 0.96) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } body.woocommerce-page .site-header::before { opacity: 0 !important; } } /* ========================================= CUSTOM PAGE HEADER ========================================= */ .woo-page-header { padding-top: calc(var(--header-height) + var(--space-3xl)); padding-bottom: var(--space-2xl); background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black-deep) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: center; } .page-header-content { margin-bottom: var(--space-xl); } .page-header-title { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: 500; color: var(--color-white); margin: 0 0 var(--space-md); letter-spacing: -0.02em; } .page-header-subtitle { font-size: var(--font-size-lg); color: var(--color-gray-400); margin: 0; } .page-header-decoration { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); } .page-header-decoration .decoration-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .page-header-decoration .decoration-icon { color: var(--color-gold); font-size: var(--font-size-sm); } /* Content Wrapper - NO padding-top when header exists */ .woo-content-wrapper { padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); min-height: 60vh; background: linear-gradient(180deg, var(--color-black-deep) 0%, var(--color-black-soft) 100%); } /* Account page: add breathing room so the content doesn't feel glued to the viewport edges */ body.woocommerce-account .woo-content-wrapper { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); margin-left: var(--space-xl); margin-right: var(--space-xl); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; } @media (max-width: 768px) { body.woocommerce-account .woo-content-wrapper { margin-left: var(--space-lg); margin-right: var(--space-lg); border-radius: 16px; } } @media (max-width: 480px) { body.woocommerce-account .woo-content-wrapper { margin-left: var(--space-md); margin-right: var(--space-md); border-radius: 14px; } } /* When there's no page header (like product pages), add top padding */ .woo-page-product .woo-content-wrapper { padding-top: calc(var(--header-height) + var(--space-3xl)); } .cuginos-shop-wrapper { position: relative; } /* ========================================= HIDE DEFAULT WOOCOMMERCE TITLES (We use our custom page header instead) ========================================= */ .woocommerce-page .entry-title, .woocommerce-page .page-title:not(.page-header-title), .woocommerce-cart .woocommerce > h1, .woocommerce-checkout .woocommerce > h1, .woocommerce-account .woocommerce > h2:first-child { display: none !important; } /* ========================================= PAGE TITLES & HEADERS ========================================= */ .woocommerce-products-header, .woocommerce-page .page-title, .woocommerce .page-title, .woocommerce-order-received .woocommerce-thankyou-order-received, .woocommerce-checkout h3, .woocommerce-cart h1, .woocommerce-account h2 { font-family: var(--font-heading); color: var(--color-white); letter-spacing: -0.02em; } .woocommerce-products-header__title { font-size: var(--font-size-4xl); margin-bottom: var(--space-xl); text-align: center; position: relative; padding-bottom: var(--space-lg); } .woocommerce-products-header__title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } /* Breadcrumbs Custom */ .woocommerce-breadcrumb { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-bottom: var(--space-xl); padding: var(--space-md) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce-breadcrumb a { color: var(--color-gray-400); } .woocommerce-breadcrumb a:hover { color: var(--color-gold); } /* ========================================= BUTTONS - All WooCommerce Buttons ========================================= */ .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce #respond input#submit, .woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.button.alt, .woocommerce .checkout-button, .woocommerce #place_order, .woocommerce .wc-proceed-to-checkout a.checkout-button { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-black) !important; border: none; border-radius: var(--radius-sm); padding: var(--space-md) var(--space-xl); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); text-decoration: none; box-shadow: 0 4px 15px rgba(var(--color-gold-rgb), 0.2); } .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce .checkout-button:hover, .woocommerce #place_order:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--color-gold-rgb), 0.4); } .woocommerce button.button:active, .woocommerce a.button:active { transform: translateY(0); } .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button:disabled { background: var(--color-gray-700) !important; color: var(--color-gray-500) !important; cursor: not-allowed; opacity: 0.7; box-shadow: none; transform: none; } /* Secondary/Outline Buttons */ .woocommerce a.button.wc-backward, .woocommerce .woocommerce-mini-cart__buttons a:not(.checkout) { background: transparent; border: 1px solid var(--color-gold); color: var(--color-gold) !important; box-shadow: none; } .woocommerce a.button.wc-backward:hover, .woocommerce .woocommerce-mini-cart__buttons a:not(.checkout):hover { background: rgba(var(--color-gold-rgb), 0.1); border-color: var(--color-gold-light); color: var(--color-gold-light) !important; box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.2); } /* ========================================= FORM ELEMENTS ========================================= */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce textarea, .woocommerce select, .select2-container--default .select2-selection--single { background: var(--color-black-medium) !important; border: 1px solid var(--color-gray-700) !important; border-radius: var(--radius-sm) !important; color: var(--color-white) !important; padding: var(--space-md) !important; font-family: var(--font-body); font-size: var(--font-size-base); transition: all 0.3s ease; width: 100%; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="password"]:focus, .woocommerce textarea:focus { border-color: var(--color-gold) !important; outline: none; box-shadow: 0 0 0 3px rgba(var(--color-gold-rgb), 0.15), 0 0 20px rgba(var(--color-gold-rgb), 0.1); } /* Select2 Dropdown */ .select2-container--default .select2-selection--single { height: auto !important; min-height: 48px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-white) !important; line-height: 1.5; padding: var(--space-sm) 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } .select2-dropdown { background: var(--color-black-medium) !important; border: 1px solid var(--color-gray-700) !important; border-radius: var(--radius-sm) !important; } .select2-container--default .select2-results__option { padding: var(--space-md); color: var(--color-gray-300); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option:hover { background: rgba(var(--color-gold-rgb), 0.2) !important; color: var(--color-gold) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(var(--color-gold-rgb), 0.1) !important; } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--color-black-light) !important; border: 1px solid var(--color-gray-700) !important; color: var(--color-white) !important; padding: var(--space-sm); } /* Labels */ .woocommerce form .form-row label, .woocommerce-page form .form-row label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-300); margin-bottom: var(--space-sm); display: block; } .woocommerce form .form-row .required { color: var(--color-gold); font-weight: 700; } /* Checkbox & Radio */ .woocommerce form .form-row input[type="checkbox"], .woocommerce form .form-row input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background: var(--color-black-medium); border: 2px solid var(--color-gray-700); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; position: relative; } .woocommerce form .form-row input[type="radio"] { border-radius: 50%; } .woocommerce form .form-row input[type="checkbox"]:checked, .woocommerce form .form-row input[type="radio"]:checked { background: var(--color-gold); border-color: var(--color-gold); } .woocommerce form .form-row input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-black); font-size: 12px; font-weight: bold; } .woocommerce form .form-row input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--color-black); border-radius: 50%; } /* ========================================= PRODUCT PRICE STYLING ========================================= */ .woocommerce .price, .woocommerce .amount, .woocommerce-Price-amount { font-family: var(--font-heading); color: var(--color-white); } .woocommerce del, .woocommerce del .amount { color: var(--color-gray-600); text-decoration: line-through; opacity: 0.7; } .woocommerce ins { text-decoration: none; background: transparent; } .woocommerce ins .amount { color: var(--color-gold); font-weight: 600; } /* ========================================= SHOP PAGE - PRODUCT GRID ========================================= */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); padding: 0; margin: 0; } .woocommerce ul.products li.product { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.4s ease; margin: 0 !important; padding: 0 !important; position: relative; } .woocommerce ul.products li.product:hover { border-color: rgba(var(--color-gold-rgb), 0.3); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--color-gold-rgb), 0.1); } /* Product Image Container */ .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .woocommerce-loop-product__link img { width: 100%; height: 280px; object-fit: contain; background: linear-gradient(180deg, var(--color-black-soft) 0%, var(--color-black-medium) 100%); padding: var(--space-lg); transition: all 0.4s ease; } .woocommerce ul.products li.product:hover img { transform: scale(1.05); } /* Product Info */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 500; color: var(--color-white); padding: var(--space-md) var(--space-lg) var(--space-sm); margin: 0; transition: color 0.3s ease; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-gold); } .woocommerce ul.products li.product .price { padding: 0 var(--space-lg); font-size: var(--font-size-xl); } .woocommerce ul.products li.product .button { margin: var(--space-md) var(--space-lg) var(--space-lg); width: calc(100% - var(--space-lg) * 2); } /* Product Badges */ .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, .badge-sale { position: absolute; top: var(--space-md); left: var(--space-md); background: var(--color-gold); color: var(--color-black); font-size: var(--font-size-xs); font-weight: 700; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; z-index: 10; } /* Star Rating */ .woocommerce .star-rating { color: var(--color-gold); font-size: var(--font-size-sm); margin: var(--space-sm) var(--space-lg); } .woocommerce .star-rating::before { color: var(--color-gray-700); } /* ========================================= SINGLE PRODUCT PAGE - CLEAN DESIGN ========================================= */ .cuginos-single-product { background: var(--color-black-deep); } /* Single Product Page Reset */ .cuginos-single-product, body.single-product .site-main.cuginos-single-product { padding: 0 !important; margin: 0 !important; } /* Product Section */ .product-section { padding: 20px 0 48px !important; /* header 80px + 20px space */ margin: 0 !important; } /* Breadcrumb */ .product-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-gray-500); margin: 0 0 20px 0 !important; padding: 0 !important; } .product-breadcrumb a { color: var(--color-gray-400); } .product-breadcrumb a:hover { color: var(--color-gold); } .product-breadcrumb .sep { color: var(--color-gray-600); } .product-breadcrumb .current { color: var(--color-gold); } /* Product Grid */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } /* Gallery */ .product-gallery { position: sticky; top: calc(var(--header-height) + 24px); } .gallery-main { position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 32px; margin-bottom: 16px; } .gallery-main .badge-sale { position: absolute; top: 16px; left: 16px; background: var(--color-gold); color: var(--color-black); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 4px; z-index: 2; } .gallery-main .main-img { width: 100%; max-height: 420px; object-fit: contain; display: block; margin: 0 auto; transition: opacity 0.2s ease; } .gallery-thumbs { display: flex; gap: 10px; } .gallery-thumbs .thumb { flex: 1; max-width: 80px; aspect-ratio: 1; padding: 0; background: rgba(255, 255, 255, 0.02); border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.5; transition: all 0.2s ease; } .gallery-thumbs .thumb:hover, .gallery-thumbs .thumb.active { border-color: var(--color-gold); opacity: 1; } .gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; } /* Product Info */ .product-info { padding-top: 8px; } .product-info .product-title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 36px); font-weight: 500; color: var(--color-white); margin: 0 0 12px; line-height: 1.2; } .product-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .product-rating .stars { display: flex; gap: 2px; } .product-rating .star { color: var(--color-gray-600); font-size: 16px; } .product-rating .star.filled { color: var(--color-gold); } .product-rating .rating-link { font-size: 13px; color: var(--color-gray-400); } .product-rating .rating-link:hover { color: var(--color-gold); } /* Price */ .product-info .product-price { font-family: var(--font-heading); font-size: 32px; font-weight: 600; color: var(--color-gold); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .product-info .product-price del { color: var(--color-gray-600); font-size: 20px; margin-right: 12px; } .product-info .product-price ins { text-decoration: none; } /* Excerpt */ .product-excerpt { color: var(--color-gray-400); font-size: 15px; line-height: 1.7; margin-bottom: 24px; } .product-excerpt p { margin: 0 0 12px; } .product-excerpt p:last-child { margin-bottom: 0; } /* Purchase */ .product-purchase { margin-bottom: 24px; } .cart-form { display: flex; gap: 12px; } .qty-wrap { display: flex; align-items: center; background: var(--color-black-medium); border: 1px solid var(--color-gray-700); border-radius: 8px; overflow: hidden; } .qty-wrap .qty-btn { width: 40px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-white); font-size: 18px; cursor: pointer; transition: background 0.2s; } .qty-wrap .qty-btn:hover { background: rgba(255, 255, 255, 0.1); } .qty-wrap .qty-input { width: 50px; height: 48px; text-align: center; background: none; border: none; border-left: 1px solid var(--color-gray-700); border-right: 1px solid var(--color-gray-700); color: var(--color-white); font-size: 15px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; } .qty-wrap .qty-input::-webkit-outer-spin-button, .qty-wrap .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .btn-cart { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(233, 168, 74, 0.25); } .btn-cart:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(233, 168, 74, 0.35); } /* Trust Row */ .trust-row { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 20px; } .trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-gray-400); } .trust-item svg { color: var(--color-gold); flex-shrink: 0; } /* Product Meta */ .product-meta { display: flex; flex-direction: column; gap: 6px; } .meta-row { font-size: 13px; color: var(--color-gray-500); } .meta-row strong { color: var(--color-gray-400); font-weight: 500; } .meta-row a { color: var(--color-gold); } /* ========================================= PRODUCT TABS SECTION ========================================= */ .product-tabs-section { padding: 48px 0 64px; background: rgba(255, 255, 255, 0.01); border-top: 1px solid rgba(255, 255, 255, 0.05); } .tabs-nav { display: flex; gap: 4px; margin-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tabs-nav .tab-btn { padding: 14px 24px; background: none; border: none; color: var(--color-gray-500); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: color 0.2s; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs-nav .tab-btn:hover { color: var(--color-gray-300); } .tabs-nav .tab-btn.active { color: var(--color-gold); border-bottom-color: var(--color-gold); } .tabs-content .tab-pane { display: none; } .tabs-content .tab-pane.active { display: block; animation: fadeUp 0.3s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .desc-content { max-width: 800px; color: var(--color-gray-300); font-size: 15px; line-height: 1.8; } .desc-content p { margin-bottom: 16px; } .desc-content h4, .desc-content strong { color: var(--color-white); } .desc-content ul, .desc-content ol { margin: 16px 0; padding-left: 24px; } .desc-content li { margin-bottom: 8px; list-style: disc; } /* Feature cards inside description */ .desc-content .benefit-card, .desc-content .feature-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; width: 100%; box-sizing: border-box; } .desc-content .benefit-card .benefit-icon, .desc-content .feature-card .feature-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(233, 168, 74, 0.1); border: 1px solid rgba(233, 168, 74, 0.3); border-radius: 50%; color: var(--color-gold); } .desc-content .benefit-card > div:last-child, .desc-content .feature-card > div:last-child { flex: 1; } .desc-content .benefit-card h4, .desc-content .feature-card h4 { margin: 0 0 4px 0; font-size: 16px; } .desc-content .benefit-card p, .desc-content .feature-card p { margin: 0; font-size: 14px; color: var(--color-gray-400); } .no-content { color: var(--color-gray-500); font-style: italic; } /* Product Hero Section */ .product-hero-section { padding-top: calc(var(--header-height) + var(--space-2xl)); padding-bottom: var(--space-3xl); } /* Breadcrumb */ .product-breadcrumb { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-2xl); font-size: var(--font-size-sm); color: var(--color-gray-500); } .product-breadcrumb a { color: var(--color-gray-400); transition: color 0.3s ease; } .product-breadcrumb a:hover { color: var(--color-gold); } .product-breadcrumb .separator { color: var(--color-gray-600); } .product-breadcrumb .current { color: var(--color-gold); } /* Product Hero Grid */ .product-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl); align-items: start; } /* Product Gallery */ .product-gallery-wrapper { position: sticky; top: calc(var(--header-height) + var(--space-xl)); } .product-main-image { position: relative; background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); padding: var(--space-2xl); overflow: hidden; } .product-main-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,168,74,0.3), transparent); } .product-badge { position: absolute; top: var(--space-lg); left: var(--space-lg); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; z-index: 10; } .product-badge.sale-badge { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-black); } .main-product-image { width: 100%; height: auto; max-height: 500px; object-fit: contain; display: block; margin: 0 auto; transition: transform 0.5s ease; } .product-image-zoom { display: block; position: relative; } .product-image-zoom:hover .main-product-image { transform: scale(1.05); } .zoom-icon { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold); opacity: 0; transform: scale(0.8); transition: all 0.3s ease; } .product-image-zoom:hover .zoom-icon { opacity: 1; transform: scale(1); } /* Thumbnails */ .product-thumbnails { display: flex; gap: var(--space-md); margin-top: var(--space-lg); } .thumbnail-item { flex: 1; max-width: 80px; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; opacity: 0.5; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.02); } .thumbnail-item:hover, .thumbnail-item.active { border-color: var(--color-gold); opacity: 1; } .thumbnail-item img { width: 100%; height: 100%; object-fit: cover; } /* Product Info Wrapper */ .product-info-wrapper { padding-left: var(--space-xl); } /* Product Header */ .product-header { margin-bottom: var(--space-xl); } .product-title { font-family: var(--font-heading); font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl)); font-weight: 500; color: var(--color-white); margin: 0 0 var(--space-md); letter-spacing: -0.02em; line-height: 1.2; } .product-rating { display: flex; align-items: center; gap: var(--space-md); } .product-rating .stars { display: flex; gap: 2px; } .product-rating .star { color: var(--color-gold); font-size: var(--font-size-lg); } .product-rating .star.empty { color: var(--color-gray-600); } .product-rating .rating-text { font-size: var(--font-size-sm); color: var(--color-gray-400); } /* Price Block */ .product-price-block { padding: var(--space-xl); background: rgba(233, 168, 74, 0.05); border: 1px solid rgba(233, 168, 74, 0.15); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); } .price-display { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 600; color: var(--color-gold); margin-bottom: var(--space-xs); } .price-display del { color: var(--color-gray-500); font-size: var(--font-size-xl); margin-right: var(--space-sm); } .price-display ins { text-decoration: none; } .price-note { font-size: var(--font-size-sm); color: var(--color-gray-400); } /* Short Description */ .product-short-description { color: var(--color-gray-300); font-size: var(--font-size-base); line-height: 1.8; margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .product-short-description p { margin-bottom: var(--space-md); } .product-short-description p:last-child { margin-bottom: 0; } /* Add to Cart Section */ .product-add-to-cart { margin-bottom: var(--space-xl); } .product-add-to-cart form.cart { display: flex; gap: var(--space-md); flex-wrap: wrap; } .product-add-to-cart .quantity { display: flex; align-items: center; background: var(--color-black-medium); border: 1px solid var(--color-gray-700); border-radius: var(--radius-md); overflow: hidden; } .product-add-to-cart .quantity .qty { width: 80px; height: 56px; text-align: center; background: transparent; border: none; color: var(--color-white); font-size: var(--font-size-lg); font-weight: 600; } .product-add-to-cart .quantity .qty:focus { outline: none; } .product-add-to-cart button.single_add_to_cart_button { flex: 1; min-width: 200px; height: 56px; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-black) !important; border: none; border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(233, 168, 74, 0.3); } .product-add-to-cart button.single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(233, 168, 74, 0.4); } /* Trust Badges */ .trust-badges { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); } .trust-badge { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; } .trust-badge svg { color: var(--color-gold); width: 28px; height: 28px; } .trust-badge span { font-size: var(--font-size-xs); color: var(--color-gray-400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } /* Product Meta Info */ .product-meta-info { padding-top: var(--space-lg); border-top: 1px solid rgba(255, 255, 255, 0.05); } .meta-item { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; font-size: var(--font-size-sm); } .meta-label { color: var(--color-gray-500); } .meta-value { color: var(--color-gray-300); } .meta-value a { color: var(--color-gold); transition: color 0.3s ease; } .meta-value a:hover { color: var(--color-gold-light); } /* ========================================= PRODUCT DETAILS SECTION ========================================= */ .product-details-section { padding: var(--space-4xl) 0; background: rgba(255, 255, 255, 0.01); border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Custom Tabs */ .product-tabs-wrapper { max-width: 1000px; margin: 0 auto; } .tabs-navigation { display: flex; gap: var(--space-xs); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-2xl); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tab-btn { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: transparent; border: none; color: var(--color-gray-500); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn svg { width: 18px; height: 18px; opacity: 0.7; transition: opacity 0.3s ease; } .tab-btn:hover { color: var(--color-gold); } .tab-btn:hover svg { opacity: 1; } .tab-btn.active { color: var(--color-gold); border-bottom-color: var(--color-gold); } .tab-btn.active svg { opacity: 1; } /* Tab Panels */ .tabs-content { position: relative; } .tab-panel { display: none; animation: fadeIn 0.4s ease; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-content-inner { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-3xl); } .tab-content-inner h3 { font-family: var(--font-heading); font-size: var(--font-size-xl); color: var(--color-white); margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Description Content */ .description-content { color: var(--color-gray-300); line-height: 1.9; } .description-content p { margin-bottom: var(--space-lg); } .description-content h4, .description-content strong { color: var(--color-white); } .description-content ul, .description-content ol { margin: var(--space-lg) 0; padding-left: var(--space-xl); } .description-content li { margin-bottom: var(--space-sm); position: relative; padding-left: var(--space-md); } .description-content li::before { content: '•'; color: var(--color-gold); position: absolute; left: 0; } /* Benefits Grid */ .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .benefit-card { padding: var(--space-xl); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); text-align: center; transition: all 0.3s ease; } .benefit-card:hover { border-color: rgba(233, 168, 74, 0.3); transform: translateY(-4px); } .benefit-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(233, 168, 74, 0.1); border-radius: 50%; margin: 0 auto var(--space-lg); } .benefit-icon svg { color: var(--color-gold); } .benefit-card h4 { font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--color-white); margin-bottom: var(--space-sm); } .benefit-card p { color: var(--color-gray-400); font-size: var(--font-size-sm); line-height: 1.6; margin: 0; } .benefit-content { flex: 1; } /* How To Steps */ .howto-steps { display: flex; flex-direction: column; gap: var(--space-xl); } .step-item { display: flex; gap: var(--space-xl); align-items: flex-start; } .step-number { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-black); font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 700; border-radius: 50%; flex-shrink: 0; } .step-content h4 { font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--color-white); margin-bottom: var(--space-sm); } .step-content p { color: var(--color-gray-400); line-height: 1.7; margin: 0; } .pro-tip { margin-top: var(--space-2xl); padding: var(--space-lg); background: rgba(233, 168, 74, 0.08); border-left: 3px solid var(--color-gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-gray-300); } .pro-tip strong { color: var(--color-gold); } /* ========================================= RELATED PRODUCTS SECTION ========================================= */ .related-products-section { padding: var(--space-4xl) 0; background: var(--color-black-deep); border-top: 1px solid rgba(255, 255, 255, 0.05); } .related-products-section .section-header { text-align: center; margin-bottom: var(--space-3xl); } .related-products-section .section-header h2 { font-family: var(--font-heading); font-size: var(--font-size-2xl); color: var(--color-white); margin-bottom: var(--space-lg); } .related-products-section .header-decoration { display: flex; align-items: center; justify-content: center; gap: var(--space-md); } .related-products-section .header-decoration .line { width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .related-products-section .header-decoration .icon { color: var(--color-gold); font-size: var(--font-size-sm); } .related-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } /* Single product spacing IMPORTANT: do NOT add padding to `.single-product` (body has this class). It creates a huge blank band under the fixed header. */ body.single-product { padding-top: 0 !important; } /* Apply the (small) offset under the fixed header to the actual product section */ body.single-product .product-section { padding-top: calc(var(--header-height) + 16px) !important; } @media (max-width: 768px) { body.single-product .product-section { padding-top: calc(var(--header-height) + 4px) !important; } } @media (max-width: 480px) { body.single-product .product-section { padding-top: calc(var(--header-height) + 2px) !important; } } .woocommerce div.product { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; } /* Product Gallery */ .woocommerce div.product div.images { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-xl); padding: var(--space-2xl); position: sticky; top: calc(var(--header-height) + var(--space-xl)); } .woocommerce div.product div.images img { border-radius: var(--radius-lg); transition: transform 0.4s ease; } .woocommerce div.product div.images img:hover { transform: scale(1.02); } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 40px; height: 40px; background: rgba(var(--color-gold-rgb), 0.2); border: 1px solid var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); z-index: 10; transition: all 0.3s ease; } .woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover { background: var(--color-gold); color: var(--color-black); } /* Thumbnails */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: var(--space-md); margin-top: var(--space-lg); padding: 0; } .woocommerce div.product div.images .flex-control-thumbs li { width: calc(25% - var(--space-md) * 3 / 4); opacity: 0.5; transition: all 0.3s ease; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; } .woocommerce div.product div.images .flex-control-thumbs li:hover, .woocommerce div.product div.images .flex-control-thumbs li.flex-active { opacity: 1; border-color: var(--color-gold); } /* Product Summary */ .woocommerce div.product div.summary { padding: 0; } .woocommerce div.product .product_title { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 500; color: var(--color-white); margin-bottom: var(--space-md); letter-spacing: -0.02em; } .woocommerce div.product p.price { font-size: var(--font-size-2xl); margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce div.product p.price .amount { color: var(--color-gold); } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--color-gray-400); font-size: var(--font-size-base); line-height: 1.8; margin-bottom: var(--space-xl); } .woocommerce div.product .woocommerce-product-details__short-description p { margin-bottom: var(--space-md); } /* Add to Cart Form */ .woocommerce div.product form.cart { display: flex; align-items: stretch; gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-lg); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); } .woocommerce div.product form.cart .quantity { display: flex; align-items: center; background: var(--color-black-medium); border: 1px solid var(--color-gray-700); border-radius: var(--radius-md); overflow: hidden; } .woocommerce div.product form.cart .quantity .qty { width: 70px; height: 54px; text-align: center; background: transparent; border: none; color: var(--color-white); font-size: var(--font-size-lg); font-weight: 600; } .woocommerce div.product form.cart .quantity .qty:focus { outline: none; } .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1; height: 54px; font-size: var(--font-size-base); } /* Product Meta */ .woocommerce div.product .product_meta { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: var(--space-xl); margin-top: var(--space-xl); font-size: var(--font-size-sm); color: var(--color-gray-500); } .woocommerce div.product .product_meta > span { display: block; margin-bottom: var(--space-sm); padding: var(--space-sm) 0; } .woocommerce div.product .product_meta a { color: var(--color-gold); } .woocommerce div.product .product_meta a:hover { color: var(--color-gold-light); } /* Product Tabs */ .woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-3xl); padding-top: var(--space-3xl); border-top: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--space-xs); padding: 0; margin-bottom: var(--space-xl); border-bottom: 1px solid rgba(255, 255, 255, 0.05); overflow-x: auto; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: none; padding: 0; margin: 0 0 -1px 0; position: relative; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--space-md) var(--space-xl); color: var(--color-gray-500); font-weight: 500; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; border-bottom: 2px solid transparent; white-space: nowrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-gold); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-gold); border-bottom-color: var(--color-gold); } .woocommerce div.product .woocommerce-tabs .panel { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); padding: var(--space-2xl); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-lg); color: var(--color-white); } .woocommerce div.product .woocommerce-tabs .panel p { color: var(--color-gray-400); line-height: 1.8; } /* Reviews */ .woocommerce #reviews #comments ol.commentlist { padding: 0; } .woocommerce #reviews #comments ol.commentlist li { margin-bottom: var(--space-xl); padding: var(--space-xl); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); } .woocommerce #reviews #comments ol.commentlist li .comment_container { display: flex; gap: 16px; align-items: flex-start; } .woocommerce #reviews #comments ol.commentlist li img.avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--color-gold); padding: 2px; margin: 0; float: none; } .woocommerce #reviews #comments ol.commentlist li .comment-text { margin-left: 0; border: none; padding: 0; flex: 1; min-width: 0; } .woocommerce #reviews #comments ol.commentlist li .meta { color: var(--color-gray-500); font-size: var(--font-size-sm); } .woocommerce #reviews #comments ol.commentlist li .meta strong { color: var(--color-white); } .woocommerce #reviews #comments ol.commentlist li .description p { color: var(--color-gray-300); } /* Review Form */ .woocommerce #review_form #respond { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); padding: var(--space-2xl); margin-top: var(--space-xl); } .woocommerce #reviews { color: var(--color-gray-300); } .woocommerce #reviews h2 { letter-spacing: -0.01em; } .woocommerce #reviews .woocommerce-noreviews { margin: 0; padding: var(--space-lg); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); color: var(--color-gray-400); } .woocommerce #reviews #comments h2, .woocommerce #reviews #review_form_wrapper h2 { margin: 0 0 var(--space-lg); font-size: var(--font-size-xl); color: var(--color-white); } .woocommerce #reviews #comments { margin-bottom: var(--space-2xl); } .woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating { margin: 0 0 var(--space-sm); } .woocommerce #reviews #comments ol.commentlist li .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .woocommerce #reviews #comments ol.commentlist li .meta time { color: var(--color-gray-600); font-size: var(--font-size-xs); } .woocommerce #review_form #respond form { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } .woocommerce #review_form #respond p { margin: 0; } .woocommerce #review_form #respond label { display: inline-block; margin-bottom: var(--space-xs); color: var(--color-gray-300); font-size: var(--font-size-sm); } .woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"], .woocommerce #review_form #respond input[type="url"], .woocommerce #review_form #respond textarea { width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); color: var(--color-white); padding: 14px 14px; transition: var(--transition-base); outline: none; } .woocommerce #review_form #respond textarea { min-height: 140px; resize: vertical; } .woocommerce #review_form #respond input:focus, .woocommerce #review_form #respond textarea:focus { border-color: rgba(var(--color-gold-rgb), 0.55); box-shadow: 0 0 0 6px rgba(var(--color-gold-rgb), 0.08); } @media (min-width: 768px) { .woocommerce #review_form #respond form { grid-template-columns: 1fr 1fr; column-gap: 16px; } .woocommerce #review_form #respond .comment-form-rating, .woocommerce #review_form #respond .comment-form-comment, .woocommerce #review_form #respond .comment-form-cookies-consent, .woocommerce #review_form #respond .form-submit { grid-column: 1 / -1; } } .woocommerce #review_form #respond .comment-reply-title { font-size: var(--font-size-xl); color: var(--color-white); margin-bottom: var(--space-lg); } .woocommerce #review_form #respond .comment-form-rating { margin-bottom: var(--space-lg); } .woocommerce #review_form #respond .comment-form-rating label { color: var(--color-gray-300); } /* Star input (works even if default WooCommerce CSS isn't loaded) */ .woocommerce #review_form #respond p.stars { margin: 6px 0 0; } .woocommerce #review_form #respond p.stars span { display: inline-flex; gap: 8px; align-items: center; } .woocommerce #review_form #respond p.stars a { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; text-decoration: none; font-size: 0; /* hide "1 of 5 stars" text */ line-height: 0; color: transparent; user-select: none; } .woocommerce #review_form #respond p.stars a::before { content: "★"; font-size: 20px; line-height: 1; color: rgba(255, 255, 255, 0.22); transition: var(--transition-base); transform: translateY(-0.5px); } /* Hover preview */ .woocommerce #review_form #respond p.stars:hover a::before { color: rgba(var(--color-gold-rgb), 0.7); } .woocommerce #review_form #respond p.stars a:hover ~ a::before { color: rgba(255, 255, 255, 0.18); } /* Selected rating */ .woocommerce #review_form #respond p.stars.selected a::before { color: rgba(var(--color-gold-rgb), 0.85); } .woocommerce #review_form #respond p.stars.selected a.active ~ a::before { color: rgba(255, 255, 255, 0.18); } .woocommerce #review_form #respond p.stars a:focus-visible { outline: none; } .woocommerce #review_form #respond p.stars a:focus-visible::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; box-shadow: 0 0 0 6px rgba(var(--color-gold-rgb), 0.10); } .woocommerce #review_form #respond .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; color: var(--color-gray-500); font-size: var(--font-size-sm); } .woocommerce #review_form #respond .comment-form-cookies-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-gold); } .woocommerce #review_form #respond .form-submit { margin-top: var(--space-sm); } .woocommerce #review_form #respond .form-submit input[type="submit"], .woocommerce #review_form #respond .form-submit button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid rgba(var(--color-gold-rgb), 0.9); background: var(--color-gold); color: var(--color-black); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: var(--transition-base); } .woocommerce #review_form #respond .form-submit input[type="submit"]:hover, .woocommerce #review_form #respond .form-submit button[type="submit"]:hover { filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(var(--color-gold-rgb), 0.08); } .woocommerce #review_form #respond .form-submit input[type="submit"]:disabled, .woocommerce #review_form #respond .form-submit button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* Star display fallback (review list + anywhere WooCommerce renders .star-rating) */ .woocommerce .star-rating { position: relative; display: inline-block; width: 6.2em; height: 1em; line-height: 1; font-size: 14px; margin: 0; overflow: hidden; vertical-align: middle; } .woocommerce .star-rating::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: rgba(255, 255, 255, 0.18); letter-spacing: 0.18em; } .woocommerce .star-rating span { position: absolute; top: 0; left: 0; height: 1em; overflow: hidden; display: block; /* Hide WooCommerce text like "Rated 5 out of 5" without affecting the gold overlay */ color: transparent; text-shadow: none; } .woocommerce .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: var(--color-gold) !important; letter-spacing: 0.18em; font-size: 14px; line-height: 1; } /* Related Products */ .woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; margin-top: var(--space-3xl); padding-top: var(--space-3xl); border-top: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-2xl); text-align: center; } /* ========================================= CART PAGE ========================================= */ /* Cart Page Title */ .woocommerce-cart .woocommerce h1, .woocommerce-cart .entry-title { font-size: var(--font-size-3xl); text-align: center; margin-bottom: var(--space-3xl); position: relative; } .woocommerce-cart .woocommerce h1::after { content: ''; position: absolute; bottom: -var(--space-md); left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--color-gold); } /* ========================================= CART (BLOCKS) - Premium Layout ========================================= */ body.woocommerce-cart .wp-block-woocommerce-cart, body.woocommerce-cart .wc-block-cart { color: var(--color-gray-300); width: 100%; } /* Main two-column layout: items + sidebar */ @media (min-width: 992px) { body.woocommerce-cart .wc-block-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; width: 100%; } body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar { position: sticky; top: calc(var(--header-height) + 16px); } } /* Cards */ body.woocommerce-cart .wc-block-cart .wc-block-cart__main, body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); width: 100%; max-width: none; box-sizing: border-box; } /* Center the whole cart block nicely within the page container */ body.woocommerce-cart .wp-block-woocommerce-cart { max-width: 1160px; margin: 0 auto; } /* Ensure Woo blocks don't constrain widths */ body.woocommerce-cart .wc-block-cart__main, body.woocommerce-cart .wc-block-components-sidebar, body.woocommerce-cart .wc-block-components-sidebar-layout, body.woocommerce-cart .wc-block-cart-items { max-width: none !important; width: 100% !important; } /* Headings inside blocks */ body.woocommerce-cart .wc-block-cart h2, body.woocommerce-cart .wc-block-cart h3 { font-family: var(--font-heading); color: var(--color-white); letter-spacing: 0.02em; } /* Totals emphasis */ body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__value, body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item__value { color: var(--color-white); } body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item__value { color: var(--color-gold); font-weight: 700; } /* “Add coupon” link/button */ body.woocommerce-cart .wc-block-cart .wc-block-components-panel__button, body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__button { color: var(--color-gold) !important; } /* Primary checkout button */ body.woocommerce-cart .wc-block-cart .wc-block-components-button { border-radius: 12px !important; min-height: 54px !important; padding: 0 18px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; width: 100% !important; max-width: none !important; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; } body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link) { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%) !important; color: var(--color-black) !important; border: none !important; box-shadow: 0 10px 30px rgba(var(--color-gold-rgb), 0.25) !important; } body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link):hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(var(--color-gold-rgb), 0.35) !important; } /* Item rows */ body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row { border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); border-radius: 14px; padding: 16px; margin-bottom: 14px; } body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row:last-child { margin-bottom: 0; } /* Header row (PRODUCT / TOTAL) */ body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px; margin-bottom: 14px; opacity: 0.95; } body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header span { color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; } body.woocommerce-cart .wc-block-cart .wc-block-cart-item__product-name { font-family: var(--font-heading); color: var(--color-white); } body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices { color: var(--color-gold); } /* Quantity selector in blocks */ body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(0, 0, 0, 0.25); } body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button, body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__input { color: var(--color-white); } body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__input { font-weight: 700; } /* Coupon panel styling */ body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 14px; margin-top: 14px; } body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon input[type="text"] { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--color-white); border-radius: 12px; min-height: 48px; padding: 0 14px; } body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon input[type="text"]:focus { outline: none; border-color: rgba(var(--color-gold-rgb), 0.6); box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.10); } body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__button { min-height: 48px !important; border-radius: 12px !important; padding: 0 16px !important; } /* Remove link */ body.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link { color: rgba(255, 255, 255, 0.65) !important; } body.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--color-gold) !important; } @media (max-width: 991px) { body.woocommerce-cart .wc-block-cart .wc-block-cart__main, body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar { padding: 18px; border-radius: 14px; } } /* ========================================= CHECKOUT (BLOCKS) - Premium Layout ========================================= */ body.woocommerce-checkout .wp-block-woocommerce-checkout, body.woocommerce-checkout .wc-block-checkout { max-width: 1160px; margin: 0 auto; width: 100%; color: var(--color-gray-300); padding: 0 var(--container-padding); box-sizing: border-box; } /* Force dark form controls in browsers that respect color-scheme */ body.woocommerce-checkout { color-scheme: dark; } /* ========================================= WC BLOCKS "SELECT" (this is the gray one in your screenshot) Classes are: .wc-blocks-components-select__container / __select ========================================= */ body.woocommerce-checkout .wc-blocks-components-select, body.woocommerce-checkout .wc-blocks-components-select__container { background: rgba(0, 0, 0, 0.48) !important; background-color: rgba(0, 0, 0, 0.48) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 12px !important; box-sizing: border-box; } body.woocommerce-checkout .wc-blocks-components-select__select { background: transparent !important; background-color: transparent !important; color: var(--color-white) !important; border: none !important; /* container carries the border */ -webkit-appearance: none; appearance: none; color-scheme: dark; } body.woocommerce-checkout .wc-blocks-components-select__select:focus { outline: none !important; } /* Native dropdown options (where supported by the browser) */ body.woocommerce-checkout .wc-blocks-components-select__select option, body.woocommerce-checkout .wc-blocks-components-select__select optgroup { background-color: #0b0b0b; color: #ffffff; } body.woocommerce-checkout .wc-blocks-components-select__select optgroup { font-weight: 700; } body.woocommerce-checkout .wc-blocks-components-select__container:focus-within { border-color: rgba(var(--color-gold-rgb), 0.65) !important; box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.12) !important; } @media (min-width: 992px) { /* Woo Blocks layout container (this is the element that actually holds main + sidebar) */ body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; width: 100%; } body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-main { min-width: 0; } body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar { min-width: 320px; position: sticky; top: calc(var(--header-height) + 16px); } } /* Cards (form + sidebar) */ body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__main, body.woocommerce-checkout .wc-block-checkout .wc-block-components-main, body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); box-sizing: border-box; width: 100%; max-width: none; } body.woocommerce-checkout .wc-block-checkout h2, body.woocommerce-checkout .wc-block-checkout h3 { font-family: var(--font-heading); color: var(--color-white); letter-spacing: 0.02em; } /* Inputs: dark theme */ body.woocommerce-checkout .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-textarea textarea, body.woocommerce-checkout .wc-block-components-select__select, body.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input, body.woocommerce-checkout .wc-block-components-text-input input[type="email"], body.woocommerce-checkout .wc-block-components-text-input input[type="tel"], body.woocommerce-checkout .wc-block-components-text-input input[type="text"] { background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--color-white) !important; border-radius: 12px !important; min-height: 52px; } /* Some themes/plugins style the SELECT wrapper (container) instead of the doesn't re-paint itself light */ body.woocommerce-checkout .wc-block-components-select__select { background: rgba(0, 0, 0, 0.48) !important; background-color: rgba(0, 0, 0, 0.48) !important; background-image: none !important; color: var(--color-white) !important; -webkit-appearance: none; appearance: none; color-scheme: dark; } /* Some browsers/themes apply a light background via shorthand on the native