/* ========================================================================== APEZ AUDIO — design system ========================================================================== */ :root{ --bg:#0a0a0b; --bg2:#101013; --bg3:#0c0c0e; --surf:#141417; --surf2:#1a1a1f; --surf3:#17171b; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --tx:#ededf0; --tx-soft:#c4c4ca; --mut:#9a9aa1; --mut2:#7c7c83; --mut3:#5f5f66; --accent:#f2f2f4; --accent-hover:#ffffff; --maxw:1200px; --font-disp:'Archivo Expanded','Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--tx); font-family:var(--font-body); -webkit-font-smoothing:antialiased; line-height:1.5; } img{ max-width:100%; height:auto; } h1,h2,h3,h4{ font-family:var(--font-disp); margin:0; font-weight:700; letter-spacing:-.01em; } a{ color:var(--tx); text-decoration:none; transition:color .2s ease; } a:hover{ color:var(--accent-hover); } ::selection{ background:rgba(255,255,255,.20); color:#fff; } .disp{ font-family:var(--font-disp); } i.ph, i[class^="ph-"], i[class*=" ph-"]{ line-height:1; display:inline-block; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:32px; padding-right:32px; } .screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } @keyframes apez-pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} } /* ---- buttons ------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--font-disp); font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:11px; border:none; transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease; } .btn-primary{ background:var(--accent); color:var(--bg); padding:15px 26px; font-size:14px; } .btn-primary:hover{ background:var(--accent-hover); color:var(--bg); transform:translateY(-2px); } .btn-sm{ padding:11px 16px; font-size:12px; border-radius:9px; } .btn-block{ width:100%; justify-content:center; padding:15px; font-size:14px; letter-spacing:.05em; } .btn-ghost{ background:transparent; border:1px solid var(--line2); color:var(--tx); font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-radius:11px; padding:13px 20px; font-size:13px; cursor:pointer; } .btn-ghost:hover{ border-color:#fff; color:#fff; } .icon-btn{ width:38px; height:38px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--tx-soft); cursor:pointer; transition:all .2s ease; } .icon-btn:hover{ border-color:var(--line2); color:#fff; } /* ========================================================================== Announcement + nav ========================================================================== */ .announce{ text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-soft); padding:9px 16px; background:linear-gradient(90deg,#141417,#0f0f12,#141417); border-bottom:1px solid var(--line); } .announce strong{ color:#fff; font-weight:600; } .nav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 32px; background:rgba(10,10,11,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav__logo img{ height:38px; width:auto; display:block; } .nav__menu{ display:flex; align-items:center; gap:30px; } .nav__menu ul, .footer__links ul, .mnav__links ul{ list-style:none; margin:0; padding:0; display:contents; } .nav__menu li, .footer__links li, .mnav__links li{ list-style:none; margin:0; } .nav__menu a{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-soft); } .nav__menu a:hover, .nav__menu a.current-menu-item{ color:#fff; } .nav__actions{ display:flex; align-items:center; gap:8px; } .nav__cart{ position:relative; height:38px; display:flex; align-items:center; gap:8px; padding:0 14px 0 12px; background:var(--accent); border:1px solid var(--accent); border-radius:9px; color:var(--bg); cursor:pointer; font-weight:600; font-size:13px; font-family:var(--font-body); } .nav__cart:hover{ background:#fff; color:var(--bg); } .nav__burger{ display:none; } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; padding:76px 32px 84px; } .hero__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 90% at 78% 20%, rgba(255,255,255,.06) 0%, transparent 55%), radial-gradient(50% 60% at 10% 90%, rgba(255,255,255,.03) 0%, transparent 60%); } .hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; } .hero__title{ font-size:clamp(40px,5vw,68px); line-height:.98; text-transform:uppercase; color:#fff; } .hero__lede{ margin:22px 0 0; max-width:440px; color:#a6a6ad; font-size:16px; line-height:1.6; } .hero__cta{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; } .hero__formats{ margin-top:30px; color:var(--mut2); font-size:13px; letter-spacing:.06em; } .hero__media{ position:relative; } .hero__media::before{ content:""; position:absolute; inset:-6% -4%; background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.10), transparent 70%); filter:blur(20px); } .hero__frame{ position:relative; border:1px solid var(--line2); border-radius:16px; overflow:hidden; background:#050506; box-shadow:0 40px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); } .hero__frame img{ display:block; width:100%; height:auto; } /* ========================================================================== Trust strip ========================================================================== */ .trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg3); } .trust__inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:22px 32px; } .trust__item{ display:flex; align-items:center; gap:10px; color:var(--mut); font-size:13px; } .trust__item i{ font-size:19px; color:#fff; } /* ========================================================================== Section header ========================================================================== */ .section{ padding:80px 32px 40px; } .section--pad{ padding:80px 32px; } .eyebrow{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut2); margin-bottom:12px; } .section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; } .section__title{ font-size:clamp(28px,3.4vw,44px); text-transform:uppercase; color:#fff; } /* ---- filter tabs --------------------------------------------------------- */ .tabs{ display:flex; gap:8px; flex-wrap:wrap; } .tab{ padding:9px 16px; border-radius:100px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; font-family:var(--font-disp); font-weight:600; transition:all .2s ease; background:transparent; color:var(--tx-soft); border:1px solid var(--line2); } .tab:hover{ color:#fff; border-color:#fff; } .tab.is-active{ background:var(--accent); color:var(--bg); border-color:var(--accent); } /* ========================================================================== Product grid + cards ========================================================================== */ .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .card{ display:flex; flex-direction:column; background:linear-gradient(180deg,#141417,#0f0f12); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s ease, border-color .25s ease; } .card:hover{ transform:translateY(-5px); border-color:var(--line2); } .card__media{ position:relative; height:210px; display:grid; place-items:center; padding:22px; background:radial-gradient(80% 90% at 50% 20%, #17171b 0%, #0b0b0d 75%); border-bottom:1px solid var(--line); overflow:hidden; } .card__media img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); } .card__badge{ position:absolute; top:12px; left:12px; z-index:2; padding:5px 10px; background:var(--accent); color:var(--bg); font-size:11px; font-weight:700; letter-spacing:.06em; border-radius:6px; } /* ---- "Coming soon" products ---- */ .card__badge--soon, .product-badge--soon{ text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-disp); font-weight:700; background:rgba(14,14,17,.72); color:#fff; border:1px solid var(--line2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .product-badge--soon{ position:absolute; top:16px; left:16px; z-index:2; padding:8px 14px; font-size:12px; border-radius:100px; } .card--soon .card__media img{ filter:grayscale(.35) opacity(.9); } .card__price .amount--soon{ color:var(--mut); font-size:16px; letter-spacing:.06em; text-transform:uppercase; } /* disabled "Coming soon" button (loop + single) */ .btn-soon{ background:var(--surf2)!important; color:var(--mut)!important; border:1px solid var(--line2)!important; cursor:default; pointer-events:none; box-shadow:none!important; transform:none!important; } .cart--soon{ margin:30px 0; } .cart--soon .btn-soon{ display:inline-block; padding:15px 28px; font-size:14px; border-radius:11px; } .cart--soon__note{ margin:12px 0 0; color:var(--mut2); font-size:13px; } .card__body{ display:flex; flex-direction:column; gap:12px; padding:22px; flex:1; } .card__cat{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut2); } .card__title{ font-size:22px; text-transform:uppercase; color:#fff; } .card__title a{ color:#fff; } .card__desc{ margin:0; color:var(--mut); font-size:14px; line-height:1.55; flex:1; } .card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; } .card__price{ display:flex; align-items:baseline; gap:9px; } .card__price .amount{ font-family:var(--font-disp); font-size:26px; font-weight:700; color:#fff; } .card__price del{ font-size:15px; color:var(--mut3); } .card__price del .amount{ font-size:15px; color:var(--mut3); font-weight:400; } .card__price ins{ text-decoration:none; } /* ========================================================================== Why APEZ ========================================================================== */ .why{ border-top:1px solid var(--line); background:var(--bg3); } .why__inner{ max-width:var(--maxw); margin:0 auto; padding:76px 32px; } .why__head{ text-align:center; margin-bottom:48px; } .why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .feature{ padding:28px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surf); } .feature__icon{ width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:12px; margin-bottom:18px; } .feature__icon i{ font-size:24px; color:#fff; } .feature h4{ font-size:16px; color:#fff; text-transform:uppercase; margin-bottom:8px; } .feature p{ margin:0; color:var(--mut); font-size:13px; line-height:1.55; } /* ========================================================================== Newsletter ========================================================================== */ .news__inner{ max-width:var(--maxw); margin:0 auto; padding:80px 32px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .news h2{ font-size:clamp(26px,3vw,38px); text-transform:uppercase; color:#fff; line-height:1.02; } .news p{ margin:18px 0 0; color:var(--mut); font-size:15px; line-height:1.6; max-width:420px; } .news__form{ display:flex; gap:10px; } .news__form input{ flex:1; padding:15px 18px; background:var(--surf); border:1px solid var(--line2); border-radius:11px; color:#fff; font-size:15px; font-family:var(--font-body); outline:none; } .news__form input:focus{ border-color:var(--line2); } .news__form button{ padding:15px 24px; font-size:13px; white-space:nowrap; } .news__fine{ margin:12px 0 0; color:var(--mut3); font-size:12px; } .news__ok{ display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line2); border-radius:12px; background:var(--surf); } .news__ok i{ font-size:24px; color:#fff; } /* ========================================================================== Footer ========================================================================== */ .footer{ border-top:1px solid var(--line); background:var(--bg); } .footer__top{ max-width:var(--maxw); margin:0 auto; padding:56px 32px 30px; display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:40px; } /* .footer prefix beats WooCommerce's .woocommerce-page img{height:auto} on product pages */ .footer .footer__logo{ height:40px; width:auto; margin-bottom:18px; } .footer__about{ margin:0; color:var(--mut2); font-size:13px; line-height:1.6; max-width:260px; } .footer__social{ display:flex; gap:10px; margin-top:22px; } .footer__social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--tx-soft); } .footer__social a:hover{ border-color:var(--line2); color:#fff; } .footer__col h5{ font-family:var(--font-body); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 16px; font-weight:600; } .footer__links{ display:flex; flex-direction:column; gap:11px; font-size:14px; } .footer__links a{ color:var(--mut); } .footer__links a:hover{ color:#fff; } .footer__bar{ border-top:1px solid var(--line); } .footer__bar-inner{ max-width:var(--maxw); margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mut3); font-size:12px; } .footer__bar-inner a{ color:var(--mut3); } .footer__bar-inner a:hover{ color:#fff; } .footer__legal{ display:flex; gap:20px; } /* ========================================================================== Cart drawer ========================================================================== */ .drawer-backdrop{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); transition:opacity .3s ease; opacity:0; pointer-events:none; } .drawer-backdrop.is-open{ opacity:1; pointer-events:auto; } .drawer{ position:fixed; top:0; right:0; z-index:61; height:100vh; width:min(420px,100vw); display:flex; flex-direction:column; background:#0e0e11; border-left:1px solid var(--line2); transform:translateX(105%); transition:transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s ease; } /* shadow only while open — off-screen it would otherwise bleed a gradient onto the page's right edge */ .drawer.is-open{ transform:translateX(0); box-shadow:-30px 0 80px rgba(0,0,0,.6); } .drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); } .drawer__title{ display:flex; align-items:center; gap:10px; } .drawer__title i{ font-size:20px; color:#fff; } .drawer__title span.disp{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; } .drawer__count{ color:var(--mut3); font-size:13px; } .drawer__body{ flex:1; overflow-y:auto; padding:16px 24px; } .drawer__empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; text-align:center; color:var(--mut3); padding:40px 0; } .drawer__empty > i{ font-size:44px; color:#2c2c31; } .drawer__empty div{ color:var(--mut); } .mini-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); } .mini-item__media{ width:64px; height:64px; flex-shrink:0; display:grid; place-items:center; padding:8px; background:var(--surf3); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .mini-item__media img{ max-width:100%; max-height:100%; object-fit:contain; } .mini-item__main{ flex:1; min-width:0; } .mini-item__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .mini-item__name{ flex:1; min-width:0; font-family:var(--font-disp); font-weight:600; text-transform:uppercase; font-size:14px; line-height:1.25; color:#fff; overflow-wrap:anywhere; } .mini-item__name a{ color:#fff; } .mini-item__cat{ color:var(--mut2); font-size:12px; margin-top:2px; } .mini-item__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; } .qty{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:8px; overflow:hidden; } .qty button{ width:30px; height:30px; display:grid; place-items:center; background:transparent; border:none; color:var(--tx-soft); cursor:pointer; } .qty button:hover{ background:var(--surf2); color:#fff; } .qty span{ min-width:30px; text-align:center; font-size:14px; color:#fff; } .mini-item__price{ font-family:var(--font-disp); font-weight:600; color:#fff; } .mini-item__remove{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:transparent; border:none; color:var(--mut3); cursor:pointer; padding:0; line-height:1; } .mini-item__remove i{ font-size:16px; } .mini-item__remove:hover{ color:#fff; } .drawer__foot{ padding:20px 24px; border-top:1px solid var(--line2); background:var(--bg3); } .drawer__subtotal{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .drawer__subtotal span:first-child{ color:var(--mut); font-size:14px; } .drawer__subtotal .amount, .drawer__subtotal b{ font-family:var(--font-disp); font-size:22px; font-weight:700; color:#fff; } .drawer__note{ color:var(--mut3); font-size:12px; margin-bottom:16px; } .drawer__foot .btn-ghost{ margin-top:10px; width:100%; text-align:center; justify-content:center; } /* ========================================================================== WooCommerce page scaffolding (shop / product / cart / checkout / account) ========================================================================== */ .page-hero{ position:relative; padding:60px 32px 40px; border-bottom:1px solid var(--line); background:var(--bg3); } .page-hero__inner{ max-width:var(--maxw); margin:0 auto; } .page-hero h1{ font-size:clamp(30px,4vw,52px); text-transform:uppercase; color:#fff; } .breadcrumb, .woocommerce-breadcrumb{ max-width:var(--maxw); margin:0 auto; padding:18px 32px; color:var(--mut2); font-size:12px; letter-spacing:.06em; text-transform:uppercase; } .breadcrumb a, .woocommerce-breadcrumb a{ color:var(--mut); } .content{ max-width:var(--maxw); margin:0 auto; padding:48px 32px 80px; } .content--narrow{ max-width:820px; } .entry-content h2{ text-transform:uppercase; color:#fff; margin:32px 0 14px; font-size:26px; } .entry-content p{ color:var(--mut); line-height:1.7; } .entry-content a{ color:#fff; text-decoration:none; } .entry-content a:hover{ text-decoration:underline; text-underline-offset:3px; } /* WooCommerce notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments{ position:relative; list-style:none; margin:0 0 24px; padding:16px 20px; border-radius:12px; border:1px solid var(--line2); background:var(--surf); color:var(--tx); font-size:14px; } .woocommerce-error{ border-color:#5a2b2b; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color:#fff; font-weight:600; } /* leave room for WooCommerce's absolutely-positioned status icon and re-center it */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ padding-left:50px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ top:50%; left:20px; transform:translateY(-50%); font-size:17px; line-height:1; } /* WC also adds a ::after clearfix — in a flex row it becomes a phantom item that steals the space-between end slot, stranding action buttons (e.g. "Browse products") in the middle. */ .woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after{ content:none; display:none; } /* info & success are a single
holding the text (+ optional button): one centered flex row */ .woocommerce-message, .woocommerce-info{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* errors render as : stack the messages, each li is its own centered row */ .woocommerce-error{ display:flex; flex-direction:column; justify-content:center; gap:8px; } .woocommerce-error > li{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{ flex-shrink:0; } .woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-element-button{ background:var(--accent); color:var(--bg)!important; border:none; border-radius:9px; cursor:pointer; font-family:var(--font-disp); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; padding:12px 18px; transition:background .2s ease, transform .2s ease; } .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{ background:#fff; color:var(--bg)!important; transform:translateY(-1px); } .woocommerce .button.alt, .woocommerce button.button.alt{ background:var(--accent); } /* Shop archive built from our own markup — hide default WC ordering/result count noise */ .woocommerce-result-count, .woocommerce-ordering{ color:var(--mut2); font-size:13px; } /* single product */ .product-single{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start; } .product-gallery{ position:relative; border:1px solid var(--line2); border-radius:16px; overflow:hidden; background:radial-gradient(80% 90% at 50% 20%, #17171b 0%, #0b0b0d 75%); box-shadow:0 40px 90px rgba(0,0,0,.6); } .product-gallery img{ display:block; width:100%; height:auto; } .product-summary .cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut2); margin-bottom:14px; } .product-summary h1{ font-size:clamp(30px,4vw,48px); text-transform:uppercase; color:#fff; line-height:1; } .product-summary .price{ font-family:var(--font-disp); font-weight:700; color:#fff; font-size:34px; margin:22px 0; display:flex; align-items:baseline; gap:12px; } .product-summary .price del .amount{ color:var(--mut3); font-size:22px; font-weight:400; } .product-summary .price ins{ text-decoration:none; } .product-summary .woocommerce-product-details__short-description{ color:var(--mut); line-height:1.7; font-size:16px; max-width:48ch; } .product-summary form.cart{ margin:30px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .product-summary form.cart .quantity input{ width:70px; padding:13px; background:var(--surf); border:1px solid var(--line2); border-radius:9px; color:#fff; font-size:15px; text-align:center; } .product-summary .single_add_to_cart_button{ padding:15px 28px!important; font-size:14px!important; border-radius:11px!important; } .product-meta{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 26px; color:var(--mut2); font-size:13px; } .product-meta strong{ color:var(--tx); font-weight:600; } .product-formats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; } .product-formats span{ border:1px solid var(--line2); border-radius:100px; padding:7px 14px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-soft); } .woocommerce-tabs{ margin-top:64px; } .woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:8px; padding:0; margin:0 0 24px; flex-wrap:wrap; } .woocommerce-tabs ul.tabs li{ } .woocommerce-tabs ul.tabs li a{ display:inline-block; padding:9px 16px; border:1px solid var(--line2); border-radius:100px; font-family:var(--font-disp); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx-soft); } .woocommerce-tabs ul.tabs li.active a{ background:var(--accent); color:var(--bg); border-color:var(--accent); } .woocommerce-tabs .panel h2{ text-transform:uppercase; color:#fff; font-size:22px; margin-bottom:14px; } .woocommerce-tabs .panel p, .woocommerce-tabs .panel li{ color:var(--mut); line-height:1.7; } /* related products reuse .product-grid via woocommerce content-product override */ .related.products > h2, .up-sells > h2, .cross-sells > h2{ text-transform:uppercase; color:#fff; font-size:26px; margin:0 0 26px; } .related.products, .up-sells{ margin-top:72px; } /* cart + checkout tables */ .woocommerce table.shop_table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:14px; overflow:hidden; } .woocommerce table.shop_table th{ text-align:left; padding:16px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut2); background:var(--surf); border-bottom:1px solid var(--line); } .woocommerce table.shop_table td{ padding:16px; border-bottom:1px solid var(--line); color:var(--tx); vertical-align:middle; } .woocommerce table.shop_table img{ width:56px; border-radius:8px; border:1px solid var(--line); } .woocommerce .cart-collaterals, .woocommerce-cart-form{ } .cart_totals h2, .woocommerce-checkout h3, #order_review_heading{ text-transform:uppercase; color:#fff; font-size:20px; margin-bottom:16px; } .woocommerce form .form-row label{ color:var(--mut); font-size:13px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select, .woocommerce form .form-row select{ background:var(--surf); border:1px solid var(--line2); border-radius:9px; color:#fff; padding:12px 14px; } .woocommerce #payment, .woocommerce-checkout #payment{ background:var(--surf); border:1px solid var(--line); border-radius:14px; } .woocommerce #payment .payment_box{ background:var(--surf2); color:var(--mut); } /* select2 (country / state): the container is only a wrapper — give it no border/padding of its own, and make the inner selection the single bordered field (avoids a border-inside-a-border). */ .woocommerce .select2-container{ border:0!important; background:transparent!important; padding:0!important; } .select2-container--default .select2-selection--single{ box-sizing:border-box!important; min-height:47px!important; height:auto!important; padding:11px 14px!important; background:var(--surf)!important; border:1px solid var(--line2)!important; border-radius:9px!important; color:#fff!important; display:flex!important; align-items:center!important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ padding:0!important; line-height:1.4!important; color:#fff!important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ top:50%!important; transform:translateY(-50%)!important; right:10px!important; } .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-top-color:var(--mut)!important; } .select2-dropdown{ background:var(--surf)!important; border:1px solid var(--line2)!important; color:#fff!important; } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--surf2)!important; color:#fff!important; } .select2-container--default .select2-search--dropdown .select2-search__field{ background:var(--bg2)!important; border:1px solid var(--line2)!important; color:#fff!important; } /* account pages use the full content width (page.php caps other pages at content--narrow) */ .woocommerce-account .content--narrow{ max-width:var(--maxw); } /* account — logged-in dashboard: sidebar nav + content card */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; } /* WooCommerce clears its float layout with ::before/::after — in a grid container those become phantom cells that shove the nav/content into the wrong tracks. Kill them, and undo WC's float + fixed width so each panel fills its own column. */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after{ content:none; display:none; } .woocommerce-account .woocommerce-MyAccount-navigation{ float:none; width:auto; margin:0; } .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .woocommerce-account .woocommerce-MyAccount-navigation a{ display:block; padding:12px 16px; border:1px solid var(--line); border-radius:10px; color:var(--tx-soft); font-size:13px; font-weight:500; letter-spacing:.02em; text-decoration:none; transition:background .18s ease, color .18s ease, border-color .18s ease; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover{ color:#fff; border-color:var(--line2); background:var(--surf2); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--surf); color:#fff; border-color:var(--line2); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--mut2); } /* content panel as a card matching the rest of the site */ .woocommerce-account .woocommerce-MyAccount-content{ float:none; width:auto; margin:0; color:var(--mut); border:1px solid var(--line); border-radius:16px; background:var(--surf); padding:30px 32px; min-width:0; } .woocommerce-account .woocommerce-MyAccount-content p{ line-height:1.7; margin:0 0 16px; } .woocommerce-account .woocommerce-MyAccount-content p:last-child{ margin-bottom:0; } .woocommerce-account .woocommerce-MyAccount-content strong{ color:var(--tx); } .woocommerce-account .woocommerce-MyAccount-content a{ color:#fff; text-decoration:none; } .woocommerce-account .woocommerce-MyAccount-content a:hover{ text-decoration:underline; text-underline-offset:3px; } /* Account details / edit form — two-column top rows, grouped password fieldset */ .woocommerce-account .woocommerce-EditAccountForm{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } .woocommerce-account .woocommerce-EditAccountForm > .form-row-wide, .woocommerce-account .woocommerce-EditAccountForm > fieldset, .woocommerce-account .woocommerce-EditAccountForm > p:last-of-type{ grid-column:1 / -1; } .woocommerce-account .woocommerce-EditAccountForm > .form-row-first{ grid-column:1; } .woocommerce-account .woocommerce-EditAccountForm > .form-row-last{ grid-column:2; } /* breathing room above the Save changes / Save address button */ .woocommerce-account .woocommerce-EditAccountForm > p:last-of-type, .woocommerce-account .woocommerce-address-fields__field-wrapper + p{ margin-top:24px; } /* WC forces float + width:47% on these rows — reset so each fills its grid cell */ .woocommerce-account .woocommerce-EditAccountForm .form-row{ float:none; width:auto; margin:0 0 16px; } .woocommerce-account .woocommerce-EditAccountForm .clear{ display:none; } .woocommerce-account .woocommerce-EditAccountForm span.description{ display:block; margin-top:6px; color:var(--mut2); font-size:12px; } /* Password-change section: borderless so its fields line up with the fields above, separated by a top divider + heading instead of an inset box. */ .woocommerce-account fieldset{ border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0 0; margin:16px 0 0; min-inline-size:0; } .woocommerce-account fieldset legend{ /* float removes the legend's special border-straddling behaviour so it reads as a plain heading */ float:left; width:100%; padding:0; margin:0 0 16px; color:#fff; font-family:var(--font-disp); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; } /* password show/hide toggle — WC ships a #111 SVG that vanishes on the dark inputs; recolor it light */ .woocommerce-account .show-password-input::before, .woocommerce-account .hide-password-input::before{ filter:brightness(0) invert(0.7); } .woocommerce-account .show-password-input:hover::before, .woocommerce-account .hide-password-input:hover::before{ filter:brightness(0) invert(1); } /* password strength meter — readable pill tuned for the dark theme (WC ships a pale bar) */ .woocommerce-password-strength{ margin:8px 0 0; padding:9px 14px; border-radius:9px; border:1px solid var(--line2); background:var(--surf2); color:var(--tx); font-size:12px; font-weight:600; letter-spacing:.02em; text-align:left; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad{ background:rgba(201,45,45,.14); border-color:rgba(201,45,45,.45); color:#ff9d9d; } .woocommerce-password-strength.good{ background:rgba(206,146,0,.14); border-color:rgba(206,146,0,.5); color:#ffcf7a; } .woocommerce-password-strength.strong{ background:rgba(38,168,92,.16); border-color:rgba(38,168,92,.5); color:#8fe3ab; } .woocommerce-password-hint{ display:block; margin:8px 0 0; color:var(--mut2); font-size:12px; line-height:1.6; } @media (max-width:820px){ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ grid-template-columns:1fr; gap:24px; } .woocommerce-account .woocommerce-EditAccountForm{ grid-template-columns:1fr; } .woocommerce-account .woocommerce-EditAccountForm > .form-row-first, .woocommerce-account .woocommerce-EditAccountForm > .form-row-last{ grid-column:1; } } /* account — login / register (logged-out): single centered card with tabs */ .account-auth{ max-width:520px; margin:24px auto; border:1px solid var(--line); border-radius:16px; background:var(--surf); overflow:hidden; } .account-auth__tabs{ display:flex; border-bottom:1px solid var(--line); } .account-auth__tab{ flex:1; padding:16px 12px; background:transparent; border:none; cursor:pointer; font-family:var(--font-disp); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s ease, border-color .2s ease; } .account-auth__tab:hover{ color:var(--tx); } .account-auth__tab.is-active{ color:#fff; border-bottom-color:#fff; } .account-auth__panel{ display:none; padding:36px; } .account-auth__panel.is-active{ display:block; } /* neutralise WooCommerce's default form.login / form.register card border */ .account-auth .woocommerce-form.login, .account-auth .woocommerce-form.register, .account-auth__panel form{ margin:0 !important; border:0 !important; padding:0 !important; border-radius:0 !important; background:transparent !important; } /* keep the standalone Login card (registration disabled) looking like a card too */ .account-auth--single{ padding:0; } .account-auth--single .account-auth__panel{ padding:36px; } .woocommerce-account .woocommerce-ResetPassword.lost_reset_password{ max-width:520px; border:1px solid var(--line); border-radius:16px; background:var(--surf); padding:36px; margin:24px auto; } .woocommerce-account .woocommerce-form-row, .woocommerce-account .woocommerce-form-login p, .woocommerce-account .woocommerce-form-register p, .woocommerce-account .lost_reset_password p{ margin:0 0 16px; } .woocommerce-account form label{ display:block; color:var(--mut); font-size:13px; margin:0 0 8px; } .woocommerce-account form .required{ color:var(--tx); border:0; text-decoration:none; } .woocommerce-account form .woocommerce-Input, .woocommerce-account form input.input-text, .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"]{ width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:9px; color:#fff; padding:13px 14px; font-size:15px; font-family:var(--font-body); outline:none; } .woocommerce-account form input:focus{ border-color:#fff; } .woocommerce-account .woocommerce-form-login__rememberme, .woocommerce-account form label.woocommerce-form__label-for-checkbox{ display:flex; align-items:center; gap:8px; color:var(--mut); font-size:13px; margin:0; } .woocommerce-account .woocommerce-form-login__rememberme input, .woocommerce-account form label.woocommerce-form__label-for-checkbox input{ width:auto; margin:0; } .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register__submit, .woocommerce-account .woocommerce-Button{ margin-top:4px; } .woocommerce-account .woocommerce-LostPassword{ margin:14px 0 0; } .woocommerce-account .woocommerce-LostPassword a{ color:var(--tx-soft); font-size:13px; } .woocommerce-account .woocommerce-LostPassword a:hover{ color:#fff; } .woocommerce-account .woocommerce-privacy-policy-text p{ color:var(--mut2); font-size:12px; } /* lost-password / reset screens live in a single centered card */ .woocommerce-account .woocommerce > .woocommerce-ResetPassword{ max-width:520px; margin:24px auto; } .woocommerce-account .woocommerce-ResetPassword .woocommerce-Button{ width:auto; } @media (max-width:720px){ .woocommerce-account .u-columns.col2-set{ grid-template-columns:1fr; } } /* pagination */ .woocommerce-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; justify-content:center; margin-top:40px; } .woocommerce-pagination a, .woocommerce-pagination span{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--line2); border-radius:9px; color:var(--tx-soft); } .woocommerce-pagination span.current{ background:var(--accent); color:var(--bg); border-color:var(--accent); } /* ========================================================================== Single product — undo WooCommerce's default 48%/float summary width ========================================================================== */ .product-single .summary, .product-single .product-summary{ width:100% !important; float:none !important; margin:0 !important; } .product-single .product-gallery{ float:none !important; width:auto !important; } /* Quantity + add-to-cart on one line, aligned to the left */ .product-summary form.cart{ flex-wrap:nowrap; justify-content:flex-start; } .product-summary form.cart .quantity{ margin:0 !important; float:none; } .product-summary form.cart .quantity input{ margin:0; } .product-summary .single_add_to_cart_button{ white-space:nowrap; flex:0 0 auto; float:none; margin:0; } /* ========================================================================== Review form (single product → Reviews tab) — clean, consistent layout ========================================================================== */ #reviews{ max-width:640px; } #reviews .woocommerce-Reviews-title, #reviews .comment-reply-title{ color:#fff; text-transform:uppercase; font-size:22px; margin:0 0 18px; } #reviews .comment-reply-title{ font-size:18px; } #reviews .woocommerce-noreviews{ margin-bottom:24px; } #reviews #respond.comment-respond{ margin-top:8px; } #reviews #respond .comment-notes{ color:var(--mut2); font-size:13px; margin:0 0 20px; } /* each field is its own stacked block: label on top, control full width */ #reviews .comment-form{ display:flex; flex-direction:column; gap:18px; } #reviews .comment-form > p, #reviews .comment-form .comment-form-rating{ margin:0; display:flex; flex-direction:column; align-items:flex-start; } #reviews .comment-form label{ display:block; margin:0 0 8px; color:var(--mut); font-size:13px; letter-spacing:.02em; } #reviews .comment-form .required{ color:var(--tx); } #reviews .comment-form input[type="text"], #reviews .comment-form input[type="email"], #reviews .comment-form input[type="url"], #reviews .comment-form textarea{ width:100%; background:var(--surf); border:1px solid var(--line2); border-radius:9px; color:#fff; padding:12px 14px; font-family:var(--font-body); font-size:15px; outline:none; } #reviews .comment-form textarea{ min-height:130px; resize:vertical; } #reviews .comment-form input:focus, #reviews .comment-form textarea:focus{ border-color:#fff; } #reviews .comment-form input::placeholder, #reviews .comment-form textarea::placeholder{ color:var(--mut2); opacity:1; } /* star rating row */ #reviews .comment-form-rating .stars{ margin:0; display:inline-flex; gap:2px; } #reviews .stars a{ color:var(--mut2); } #reviews .stars a:hover, #reviews .stars a.active, #reviews .stars.selected a.active{ color:#fff; } #reviews select#rating{ background:var(--surf); border:1px solid var(--line2); border-radius:9px; color:#fff; padding:10px 12px; } /* cookies consent: checkbox inline with its label */ #reviews .comment-form-cookies-consent{ flex-direction:row !important; align-items:center; gap:10px; } #reviews .comment-form-cookies-consent input{ width:auto; margin:0; } #reviews .comment-form-cookies-consent label{ margin:0; } /* submit button: sized to content, not full width */ #reviews .form-submit{ margin:4px 0 0; } #reviews .form-submit input[type="submit"]{ width:auto; display:inline-flex; } /* existing reviews list — one clean card per review */ #reviews .commentlist{ list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:14px; } #reviews .commentlist li{ margin:0; } #reviews .commentlist .comment_container{ display:flex; align-items:flex-start; gap:16px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surf); position:static; } /* rounded, correctly-sized, top-aligned avatar */ #reviews .commentlist img.avatar{ width:48px !important; height:48px !important; border-radius:50% !important; object-fit:cover; flex-shrink:0; margin:0 !important; padding:0 !important; position:static !important; float:none !important; border:1px solid var(--line2); } /* kill WooCommerce's inner speech-bubble box so it's a single flat card */ #reviews .commentlist .comment-text{ flex:1; min-width:0; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; } #reviews .commentlist .comment-text::before, #reviews .commentlist .comment-text::after{ display:none !important; } #reviews .commentlist .meta{ color:var(--mut2); font-size:13px; margin:0 0 10px; line-height:1.5; display:flex; flex-wrap:wrap; align-items:center; gap:6px; } #reviews .commentlist .meta .woocommerce-review__author, #reviews .commentlist .meta strong{ color:#fff; font-weight:600; font-size:14px; } #reviews .commentlist .meta .woocommerce-review__verified{ color:var(--mut2); font-style:normal; } #reviews .commentlist .description{ color:var(--mut); line-height:1.6; } #reviews .commentlist .description p{ margin:0; color:var(--mut); } /* rating stars sit at the top-right of the meta row */ #reviews .commentlist .star-rating{ margin-left:auto; color:#fff; } #reviews .star-rating::before{ color:var(--mut3); } #reviews .star-rating span::before{ color:#fff; } /* ========================================================================== WooCommerce Blocks — dark-theme the Cart & Checkout blocks ========================================================================== */ .wc-block-checkout, .wc-block-cart{ --wc-input-border-gray:var(--line2); } /* text inputs / textareas / selects */ .wc-block-checkout input:not([type="checkbox"]):not([type="radio"]), .wc-block-checkout textarea, .wc-block-checkout select, .wc-block-cart input:not([type="checkbox"]):not([type="radio"]), .wc-block-components-text-input input, .wc-block-components-textarea{ background:var(--surf) !important; color:var(--tx) !important; border:1px solid var(--line2) !important; border-radius:9px !important; } .wc-block-components-text-input input:focus, .wc-block-checkout input:focus, .wc-block-checkout textarea:focus{ border-color:#fff !important; box-shadow:none !important; } /* select dropdowns: the block wraps the