/* ============================================================================ ACCELPIX — WooCommerce / WordPress page skin Matches the design language of the new static site (index.html). Load AFTER WooCommerce's own stylesheets and after the theme remnant. wp_enqueue_style('accelpix-woo', ..., array('woocommerce-general'), '1.0'); Everything reads from the tokens declared in the new shell (:root and [data-theme="dark"]). The alias layer below falls back to the light values if a token is ever missing, so the file cannot render colourless. Contents 00 Token bridge 01 Page shell + containers 02 Typography inside .woocommerce 03 Notices, messages, errors 04 Buttons 05 Form controls (inputs, selects, select2, checkbox, radio, quantity) 06 My Account (nav + content) 07 Tables (orders, downloads, shop_table) 08 Order details / thank-you / addresses 09 Cart 10 Checkout 11 Payment methods + Razorpay 12 Shop archive, product cards, pagination, breadcrumb 13 Single product, variations, tabs, related 14 Login / Register page (custom markup + RegistrationMagic) 15 Lost password + reset 16 Misc: blockUI, tooltips, password toggle, print 17 Responsive ========================================================================= */ /* ============================================================ 00 — TOKEN BRIDGE ============================================================ */ body{ --wc-navy:var(--navy,#2B2E7F); --wc-navy-700:var(--navy-700,#22245F); --wc-navy-900:var(--navy-900,#14163A); --wc-orange:var(--orange,#F7941D); --wc-orange-600:var(--orange-600,#E07E0A); --wc-ink:var(--ink,#14163A); --wc-ink-2:var(--ink-2,#4A4F73); --wc-ink-3:var(--ink-3,#767C9C); --wc-canvas:var(--canvas,#F5F6FB); --wc-surface:var(--surface,#FFFFFF); --wc-surface-2:var(--surface-2,#FAFBFF); --wc-rail:var(--rail,#E3E6F2); --wc-rail-2:var(--rail-2,#EDEFF8); --wc-pos:var(--pos,#0E9F6E); --wc-neg:var(--neg,#D9534F); --wc-shadow-sm:var(--shadow-sm,0 1px 2px rgba(20,22,58,.06),0 2px 8px rgba(20,22,58,.05)); --wc-shadow-md:var(--shadow-md,0 4px 12px rgba(20,22,58,.07),0 16px 40px rgba(20,22,58,.08)); --wc-shadow-lg:var(--shadow-lg,0 8px 24px rgba(20,22,58,.10),0 32px 72px rgba(20,22,58,.14)); --wc-ring:var(--ring,rgba(43,46,127,.35)); --wc-grad-brand:var(--grad-brand,linear-gradient(120deg,#2B2E7F 0%,#3F44B5 55%,#5A61D8 100%)); --wc-grad-flame:var(--grad-flame,linear-gradient(120deg,#F7941D 0%,#FBB040 100%)); --wc-r-sm:var(--r-sm,8px); --wc-r-md:var(--r-md,14px); --wc-r-lg:var(--r-lg,20px); --wc-r-xl:var(--r-xl,28px); --wc-maxw:var(--maxw,1240px); --wc-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --wc-display:Sora,Inter,sans-serif; --wc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --wc-field-h:52px; } /* WooCommerce ships a handful of hard-coded greys and pinks. Neutralise the ones that leak through no matter which template is rendering. */ .woocommerce, .woocommerce-page{ color:var(--wc-ink); font-family:var(--wc-font); } /* ============================================================ 01 — PAGE SHELL + CONTAINERS ============================================================ */ body.woocommerce-page, body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.single-product, body.post-type-archive-product, body.tax-product_cat{ background:var(--wc-canvas); } /* The theme container is gone; give the content column the same rhythm the static pages use. */ #main{ background:var(--wc-canvas); padding:0; } #main .wgl-container, #main > .wgl-container{ width:100%; max-width:var(--wc-maxw); margin-inline:auto; padding-inline:24px; } #main-content.wgl_col-12, #main-content{ width:100%; padding:clamp(32px,4.5vw,64px) 0 clamp(56px,7vw,96px); } /* The login template strips .wgl-container off with jQuery — put the gutter back on the element that survives. */ body.woocommerce-account #main-content > .woocommerce{ width:100%; } /* Optional page banner. Add this markup above the content on any Woo page:
Account

Your orders

*/ .woo-head{ border-bottom:1px solid var(--wc-rail); background:var(--wc-surface); } .woo-head__in{ max-width:var(--wc-maxw);margin-inline:auto;padding:clamp(28px,4vw,52px) 24px; } .woo-head h1{ font-family:var(--wc-display);font-weight:800;letter-spacing:-.024em;line-height:1.1; font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0;color:var(--wc-ink); } .woo-eyebrow{ display:inline-flex;align-items:center;gap:10px;margin-bottom:14px; font-family:var(--wc-mono);font-size:.72rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--wc-orange); } .woo-eyebrow::before{content:"";width:22px;height:2px;background:var(--wc-orange);border-radius:2px} /* ============================================================ 02 — TYPOGRAPHY INSIDE .woocommerce ============================================================ */ .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4, .woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3{ font-family:var(--wc-display); font-weight:800; letter-spacing:-.022em; line-height:1.15; color:var(--wc-ink); margin:0 0 16px; } .woocommerce h2{font-size:clamp(1.4rem,2.4vw,1.9rem)} .woocommerce h3{font-size:clamp(1.08rem,1.7vw,1.3rem)} .woocommerce h4{font-size:1.02rem} .woocommerce p{margin:0 0 14px;color:var(--wc-ink-2);line-height:1.65} .woocommerce p:last-child{margin-bottom:0} /* The old theme paints white for its dark panels. That rule outlives main.css in one of the remaining stylesheets and made order numbers, dates and the "Hello NAME" line invisible, so this one is forced. */ .woocommerce strong, .woocommerce b, .woocommerce-page strong, .woocommerce-MyAccount-content strong, .woocommerce ul.order_details li strong, .woocommerce-order strong{color:var(--wc-ink)!important;font-weight:650} .woocommerce a{color:var(--wc-navy);transition:color .18s} .woocommerce a:hover{color:var(--wc-orange-600)} .woocommerce hr, .woocommerce .clear + hr{border:0;border-top:1px solid var(--wc-rail);margin:28px 0} /* Currency and every number reads on the mono rail, same as the pricing board on the static site. */ .woocommerce .woocommerce-Price-amount, .woocommerce .amount, .woocommerce .order-total .amount, .woocommerce ins .amount{ font-family:var(--wc-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; font-weight:600; color:var(--wc-ink); } .woocommerce .woocommerce-Price-currencySymbol{font-weight:500;opacity:.72;margin-right:1px} .woocommerce del, .woocommerce del .amount{color:var(--wc-ink-3);font-weight:500;text-decoration-thickness:1px} .woocommerce ins{background:none;text-decoration:none} .woocommerce .required, .woocommerce .required_field{color:var(--wc-orange-600);text-decoration:none;border:0;font-weight:600} .woocommerce .optional{color:var(--wc-ink-3);font-weight:400;font-size:.86em} .woocommerce .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ============================================================ 03 — NOTICES, MESSAGES, ERRORS ============================================================ */ /* :empty fails on a wrapper containing only a newline, and WordPress always emits one. An element that is invisible but still present becomes a grid item and silently pushes every later item into the wrong cell — the cause of the swapped My Account columns. Test for element children instead. */ .woocommerce-notices-wrapper:not(:has(> *)){display:none!important;margin:0!important} .woocommerce-notices-wrapper{margin-bottom:24px} .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error{ position:relative; list-style:none; margin:0 0 20px; padding:16px 20px 16px 52px; border:1px solid var(--wc-rail); border-left-width:3px; border-radius:var(--wc-r-md); background:var(--wc-surface); box-shadow:var(--wc-shadow-sm); font-size:.92rem; line-height:1.55; color:var(--wc-ink); display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before{ content:""; position:absolute;left:20px;top:50%;transform:translateY(-50%); width:18px;height:18px;border-radius:50%; background:currentColor;opacity:.16; } .woocommerce .woocommerce-message{border-left-color:var(--wc-pos);color:var(--wc-ink)} .woocommerce .woocommerce-message::before{background:var(--wc-pos);opacity:1; -webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat; mask:url("data:image/svg+xml;utf8,") center/13px no-repeat} .woocommerce .woocommerce-info{border-left-color:var(--wc-navy)} .woocommerce .woocommerce-info::before{background:var(--wc-navy);opacity:1; -webkit-mask:url("data:image/svg+xml;utf8,") center/18px no-repeat; mask:url("data:image/svg+xml;utf8,") center/18px no-repeat} .woocommerce .woocommerce-error{ border-left-color:var(--wc-neg); background:color-mix(in srgb,var(--wc-neg) 6%,var(--wc-surface)); } .woocommerce .woocommerce-error::before{background:var(--wc-neg);opacity:1; -webkit-mask:url("data:image/svg+xml;utf8,") center/18px no-repeat; mask:url("data:image/svg+xml;utf8,") center/18px no-repeat} .woocommerce .woocommerce-error li{margin:0;padding:0;list-style:none;width:100%} .woocommerce .woocommerce-error li + li{margin-top:6px} .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button{margin-left:auto;flex:none} /* Field-level validation */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-selection{ border-color:var(--wc-neg)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--wc-neg) 18%,transparent)!important; } .woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--wc-pos)!important} .rm-form-field-invalid-msg, .woocommerce-error-message{color:var(--wc-neg)!important;font-size:.82rem;margin-top:6px;display:block} /* Theme message boxes that survived (seofy) */ .seofy_module_message_box{ border-radius:var(--wc-r-md)!important; border:1px solid var(--wc-rail)!important; background:var(--wc-surface)!important; color:var(--wc-ink)!important; box-shadow:var(--wc-shadow-sm); padding:16px 20px!important; } .seofy_module_message_box.type_error{border-left:3px solid var(--wc-neg)!important} .seofy_module_message_box .message_text{color:var(--wc-ink-2)!important} /* ============================================================ 04 — BUTTONS ============================================================ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .woocommerce-Button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, #btn-razorpay, #btn-razorpay-cancel{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px; min-height:46px; border:1px solid transparent; border-radius:999px; background:var(--wc-grad-brand); color:#fff; font-family:var(--wc-font); font-weight:600; font-size:.94rem; line-height:1.2; letter-spacing:.005em; text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer; box-shadow:0 6px 18px rgba(43,46,127,.24); transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,color .18s,border-color .18s; text-shadow:none; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .woocommerce-Button:hover, #btn-razorpay:hover{ background:var(--wc-grad-brand); color:#fff; transform:translateY(-2px); box-shadow:0 10px 30px rgba(43,46,127,.34); } .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active{transform:translateY(0)} .woocommerce .button:focus-visible, .woocommerce input:focus-visible, .woocommerce select:focus-visible, .woocommerce textarea:focus-visible, .woocommerce a:focus-visible{outline:2px solid var(--wc-orange);outline-offset:3px} /* Primary / commit actions carry the flame gradient — one per screen. */ .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .woocommerce #place_order, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, #btn-razorpay{ background:var(--wc-grad-flame); color:#1A1200; box-shadow:0 6px 18px rgba(247,148,29,.32); } .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #place_order:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, #btn-razorpay:hover{ background:var(--wc-grad-flame); color:#1A1200; box-shadow:0 10px 30px rgba(247,148,29,.44); } /* Quiet actions: view order, cancel, update cart, continue shopping */ .woocommerce .woocommerce-orders-table__cell-order-actions .button, .woocommerce .woocommerce-button.view, .woocommerce .button.cancel, .woocommerce .button.wc-backward, .woocommerce .woocommerce-Button--next, .woocommerce .woocommerce-Button--previous, .woocommerce button.button[name="update_cart"], .woocommerce input.button[name="update_cart"], .woocommerce a.button.wc-forward:not(.alt):not(.checkout-button), #btn-razorpay-cancel{ background:var(--wc-surface); color:var(--wc-ink); border-color:var(--wc-rail); box-shadow:var(--wc-shadow-sm); } .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover, .woocommerce .woocommerce-button.view:hover, .woocommerce .button.cancel:hover, .woocommerce .button.wc-backward:hover, .woocommerce .woocommerce-Button--next:hover, #btn-razorpay-cancel:hover{ background:var(--wc-surface); color:var(--wc-navy); border-color:var(--wc-navy); box-shadow:var(--wc-shadow-md); } .woocommerce .button.cancel:hover{color:var(--wc-neg);border-color:var(--wc-neg)} .woocommerce .button.small, .woocommerce .woocommerce-orders-table .button{padding:9px 18px;min-height:38px;font-size:.84rem} /* A 50%-opacity gradient pill reads as a coloured smudge with unreadable text. Disabled controls go flat and quiet instead. */ .woocommerce .button:disabled, .woocommerce .button.disabled, .woocommerce button.button[disabled], .woocommerce input.button[disabled]{ background:var(--wc-rail-2)!important; color:var(--wc-ink-3)!important; border-color:var(--wc-rail)!important; cursor:not-allowed; opacity:1; transform:none!important; box-shadow:none!important; } /* Razorpay pair on the pay-for-order screen */ #btn-razorpay,#btn-razorpay-cancel{margin:0 10px 10px 0} #msg-razorpay-success{background:var(--wc-surface)!important;border:1px solid var(--wc-rail)!important;border-left:3px solid var(--wc-navy)!important;border-radius:var(--wc-r-md)!important;padding:16px 20px!important;color:var(--wc-ink)!important} /* ============================================================ 05 — FORM CONTROLS ============================================================ */ .woocommerce form .form-row{ margin:0 0 18px; padding:0; display:block; } .woocommerce form .form-row label, .woocommerce-page form .form-row label, .woocommerce label{ display:block; margin-bottom:7px; font-size:.84rem; font-weight:600; letter-spacing:.01em; color:var(--wc-ink-2); line-height:1.4; } .woocommerce form .form-row label.checkbox, .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{ display:flex;align-items:center;gap:10px;margin:0;font-weight:500;color:var(--wc-ink-2); } .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="url"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce input[type="search"], .woocommerce input[type="date"], .woocommerce select, .woocommerce textarea, .woocommerce .input-text, .woocommerce .woocommerce-Input{ width:100%; min-height:var(--wc-field-h); padding:13px 16px; border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); background:var(--wc-surface); color:var(--wc-ink); font-family:var(--wc-font); font-size:.94rem; line-height:1.4; box-shadow:none; transition:border-color .18s,box-shadow .18s,background .18s; appearance:none;-webkit-appearance:none; } .woocommerce textarea{min-height:120px;padding-top:14px;resize:vertical;line-height:1.6} .woocommerce input::placeholder, .woocommerce textarea::placeholder{color:var(--wc-ink-3);opacity:1} .woocommerce input:hover, .woocommerce select:hover, .woocommerce textarea:hover{border-color:color-mix(in srgb,var(--wc-navy) 35%,var(--wc-rail))} .woocommerce input:focus, .woocommerce select:focus, .woocommerce textarea:focus, .woocommerce .input-text:focus{ outline:0; border-color:var(--wc-navy); box-shadow:0 0 0 3px var(--wc-ring); background:var(--wc-surface); } /* Native select gets its own chevron since appearance is stripped. */ .woocommerce select{ padding-right:44px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 16px center; background-size:14px; cursor:pointer; } [data-theme="dark"] .woocommerce select{ background-image:url("data:image/svg+xml;utf8,"); } .woocommerce select option{background:var(--wc-surface);color:var(--wc-ink)} /* Checkbox + radio */ .woocommerce input[type="checkbox"], .woocommerce input[type="radio"]{ appearance:none;-webkit-appearance:none; width:20px;height:20px;min-height:20px;flex:none; margin:0;padding:0; border:1.5px solid var(--wc-rail); background:var(--wc-surface); cursor:pointer; transition:border-color .16s,background .16s,box-shadow .16s; position:relative;top:0; } .woocommerce input[type="checkbox"]{border-radius:6px} .woocommerce input[type="radio"]{border-radius:50%} .woocommerce input[type="checkbox"]:hover, .woocommerce input[type="radio"]:hover{border-color:var(--wc-navy)} .woocommerce input[type="checkbox"]:checked{ background:var(--wc-navy);border-color:var(--wc-navy); background-image:url("data:image/svg+xml;utf8,"); background-size:12px;background-position:center;background-repeat:no-repeat; } .woocommerce input[type="radio"]:checked{ border-color:var(--wc-navy);border-width:6px;background:var(--wc-surface); } .woocommerce input[type="checkbox"]:focus-visible, .woocommerce input[type="radio"]:focus-visible{box-shadow:0 0 0 3px var(--wc-ring);outline:0} /* Password reveal button */ .woocommerce .password-input, .woocommerce .woocommerce-password-strength ~ .password-input{position:relative;display:block;width:100%} .woocommerce .show-password-input{ position:absolute;right:8px;top:50%;transform:translateY(-50%); width:38px;height:38px;border-radius:10px;border:0;background:transparent;cursor:pointer; display:grid;place-items:center; } /* .woocommerce .show-password-input::after{ content:"";width:19px;height:19px;background:var(--wc-ink-3); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; transition:background .16s; } */ /* .woocommerce .show-password-input:hover::after, .woocommerce .show-password-input.display-password::after{background:var(--wc-navy)} */ /* Password strength meter */ .woocommerce .woocommerce-password-strength{ border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:600;text-align:left; margin-top:8px;border:1px solid var(--wc-rail);background:var(--wc-surface-2); } .woocommerce .woocommerce-password-strength.strong{color:var(--wc-pos);border-color:color-mix(in srgb,var(--wc-pos) 40%,var(--wc-rail))} .woocommerce .woocommerce-password-strength.good{color:var(--wc-navy)} .woocommerce .woocommerce-password-strength.short, .woocommerce .woocommerce-password-strength.bad{color:var(--wc-neg);border-color:color-mix(in srgb,var(--wc-neg) 40%,var(--wc-rail))} .woocommerce .woocommerce-password-hint{display:block;margin-top:6px;font-size:.8rem;color:var(--wc-ink-3)} /* Quantity stepper */ .woocommerce .quantity{display:inline-flex;align-items:center} .woocommerce .quantity .qty{ width:92px;min-height:46px;text-align:center;padding:10px 8px; font-family:var(--wc-mono);font-variant-numeric:tabular-nums;font-weight:600; border-radius:999px; } .woocommerce .quantity input[type=number]{-moz-appearance:textfield} .woocommerce .quantity input::-webkit-outer-spin-button, .woocommerce .quantity input::-webkit-inner-spin-button{opacity:1;height:32px} /* Two-column form rows (Woo's own grid) */ .woocommerce form .form-row-first, .woocommerce form .form-row-last{width:100%;float:none} @media (min-width:600px){ .woocommerce form .form-row-first, .woocommerce form .form-row-last{width:calc(50% - 9px);float:left} .woocommerce form .form-row-last{float:right} } .woocommerce form .form-row-wide, .woocommerce form .form-row.form-row-wide{clear:both;width:100%} .woocommerce .clear{clear:both} /* select2 (country / state pickers) */ .woocommerce .select2-container--default .select2-selection--single{ height:var(--wc-field-h); border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); background:var(--wc-surface); display:flex;align-items:center;padding:0 16px; transition:border-color .18s,box-shadow .18s; } .woocommerce .select2-container--default .select2-selection--single:hover{border-color:color-mix(in srgb,var(--wc-navy) 35%,var(--wc-rail))} .woocommerce .select2-container--default.select2-container--open .select2-selection--single, .woocommerce .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--wc-navy);box-shadow:0 0 0 3px var(--wc-ring); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--wc-ink);line-height:1.4;padding:0;font-size:.94rem; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--wc-ink-3)} .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%;right:14px;top:0;display:flex;align-items:center; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b{ border:0;width:14px;height:14px;margin:0;left:0;top:auto;position:static; background:var(--wc-ink-3); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* The dropdown renders at the end of , outside .woocommerce. */ .select2-dropdown{ border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); background:var(--wc-surface); box-shadow:var(--wc-shadow-lg); overflow:hidden; z-index:9999; } .select2-search--dropdown{padding:10px} .select2-container--default .select2-search--dropdown .select2-search__field{ border:1px solid var(--wc-rail);border-radius:10px;padding:10px 12px; background:var(--wc-surface-2);color:var(--wc-ink);font-family:var(--wc-font); } .select2-container--default .select2-search--dropdown .select2-search__field:focus{ outline:0;border-color:var(--wc-navy);box-shadow:0 0 0 3px var(--wc-ring); } .select2-container--default .select2-results__option{padding:10px 14px;font-size:.9rem;color:var(--wc-ink-2)} .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--wc-rail-2);color:var(--wc-navy)} .select2-container--default .select2-results__option[aria-selected=true]{background:var(--wc-rail-2);color:var(--wc-ink);font-weight:600} .select2-results__options{max-height:280px} /* ============================================================ 06 — MY ACCOUNT ============================================================ */ .woocommerce-account .woocommerce{ display:grid; grid-template-columns:264px minmax(0,1fr); gap:28px; align-items:start; } /* Never rely on auto-placement here: WooCommerce and the theme both inject stray wrappers before the nav, and one invisible extra child is enough to put the sidebar in the content column and the content in the sidebar. */ .woocommerce-account .woocommerce > *{grid-column:1/-1} .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{grid-column:1} .woocommerce-account .woocommerce > .woocommerce-MyAccount-content{grid-column:2} /* The login/register screen is a single full-bleed panel, not the 2-up. */ .woocommerce-account:not(.logged-in) .woocommerce, .woocommerce-account .woocommerce:has(> .login_page), .woocommerce-account .woocommerce:has(> .woocommerce-ResetPassword){ display:block; } .woocommerce-account .woocommerce-MyAccount-navigation{ position:sticky;top:calc(var(--head-h,72px) + 20px); background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-sm); padding:10px; width:auto!important;float:none!important; } .woocommerce-account .woocommerce-MyAccount-navigation ul{margin:0;padding:0;list-style:none} .woocommerce-account .woocommerce-MyAccount-navigation ul li{margin:0;padding:0;list-style:none;border:0} .woocommerce-account .woocommerce-MyAccount-navigation ul li::before{content:none} .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ display:flex;align-items:center;gap:11px; padding:11px 14px; border-radius:11px; font-size:.9rem;font-weight:550; color:var(--wc-ink-2); transition:background .16s,color .16s,transform .16s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before{ content:"";width:17px;height:17px;flex:none;background:currentColor;opacity:.75; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{background:var(--wc-rail-2);color:var(--wc-navy)} .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ background:var(--wc-rail-2); color:var(--wc-navy); font-weight:700; position:relative; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after{ content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px; border-radius:0 3px 3px 0;background:var(--wc-orange); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ border-top:1px solid var(--wc-rail);border-radius:0 0 11px 11px;margin-top:6px;padding-top:15px; } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{color:var(--wc-neg)} /* Per-item glyphs, matching the account dropdown in the new header. */ .woocommerce-MyAccount-navigation-link--dashboard a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--orders a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--downloads a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--edit-address a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--edit-account a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--customer-logout a::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} .woocommerce-account .woocommerce-MyAccount-content{ width:auto!important;float:none!important;max-width:100%; background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-sm); padding:clamp(22px,3vw,36px); min-width:0; } .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{ font-family:var(--wc-display);font-weight:700;font-size:1.15rem;color:var(--wc-ink); letter-spacing:-.015em;margin-bottom:10px; } .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type strong{color:var(--wc-navy) !important;} .woocommerce-account .woocommerce-MyAccount-content mark, .woocommerce mark{background:color-mix(in srgb,var(--wc-orange) 18%,transparent);color:var(--wc-ink);padding:1px 5px;border-radius:5px} /* Edit-account / edit-address fieldsets */ .woocommerce-EditAccountForm fieldset, .woocommerce form fieldset{ border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); padding:22px; margin:26px 0 22px; background:var(--wc-surface-2); } .woocommerce form fieldset legend{ font-family:var(--wc-display);font-weight:700;font-size:1rem;color:var(--wc-ink); padding:0 10px;margin-left:-10px; } .woocommerce-Addresses{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px; } .woocommerce-Address{ border:1px solid var(--wc-rail);border-radius:var(--wc-r-md); background:var(--wc-surface-2);padding:22px;width:auto;float:none; } .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .woocommerce-Address-title h2,.woocommerce-Address-title h3{margin:0;font-size:1.02rem} .woocommerce-Address-title .edit{ font-size:.8rem;font-weight:600;color:var(--wc-navy); border-bottom:1px solid transparent;transition:border-color .18s; } .woocommerce-Address-title .edit:hover{border-bottom-color:var(--wc-orange)} .woocommerce-Address address{font-style:normal;color:var(--wc-ink-2);line-height:1.7;font-size:.92rem} /* ============================================================ 07 — TABLES ============================================================ */ .woocommerce table.shop_table, .woocommerce table.woocommerce-orders-table, .woocommerce table.woocommerce-table--order-details, .woocommerce table.woocommerce-MyAccount-downloads, .woocommerce table.wishlist_table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); overflow:hidden; background:var(--wc-surface); margin:0 0 26px; font-size:.92rem; } .woocommerce table.shop_table thead th, .woocommerce table.shop_table th{ background:var(--wc-surface-2); border-bottom:1px solid var(--wc-rail); padding:14px 18px; text-align:left; font-family:var(--wc-mono); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--wc-ink-3); white-space:nowrap; } .woocommerce table.shop_table td{ padding:16px 18px; border-bottom:1px solid var(--wc-rail-2); color:var(--wc-ink-2); vertical-align:middle; background:transparent; } .woocommerce table.shop_table tbody tr:last-child td{border-bottom:0} .woocommerce table.shop_table tbody tr{transition:background .15s} .woocommerce table.shop_table tbody tr:hover td{background:var(--wc-rail-2)} .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td{ padding:14px 18px; border-top:1px solid var(--wc-rail); background:var(--wc-surface-2); font-weight:600; color:var(--wc-ink); } .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce table.shop_table tfoot tr:last-child td{ font-size:1.02rem; background:color-mix(in srgb,var(--wc-navy) 5%,var(--wc-surface-2)); } .woocommerce table.shop_table .product-name a{font-weight:600;color:var(--wc-ink)} .woocommerce table.shop_table .product-name a:hover{color:var(--wc-navy)} .woocommerce table.shop_table td.product-total, .woocommerce table.shop_table td.product-subtotal, .woocommerce table.shop_table .woocommerce-orders-table__cell-order-total, .woocommerce table.shop_table th.product-total{text-align:right} .woocommerce table.shop_table .woocommerce-orders-table__header-order-total{text-align:right} /* Order number reads as an identifier */ .woocommerce .woocommerce-orders-table__cell-order-number a{ font-family:var(--wc-mono);font-weight:600;color:var(--wc-navy); } .woocommerce .woocommerce-orders-table__cell-order-date{color:var(--wc-ink-3);white-space:nowrap} .woocommerce .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap} .woocommerce .woocommerce-orders-table__cell-order-actions .button{margin:3px 0 3px 8px} /* Order status pill, driven by the row modifier class Woo already emits. */ .woocommerce .woocommerce-orders-table__cell-order-status{white-space:nowrap} .woocommerce .woocommerce-orders-table__cell-order-status::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:50%; margin-right:8px;vertical-align:middle;background:var(--wc-ink-3); } .woocommerce tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{color:var(--wc-pos);font-weight:600} .woocommerce tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before{background:var(--wc-pos)} .woocommerce tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{color:var(--wc-navy);font-weight:600} .woocommerce tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before{background:var(--wc-navy)} .woocommerce tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status, .woocommerce tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status{color:var(--wc-orange-600);font-weight:600} .woocommerce tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before, .woocommerce tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before{background:var(--wc-orange)} .woocommerce tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status, .woocommerce tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status{color:var(--wc-neg);font-weight:600} .woocommerce tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before, .woocommerce tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before{background:var(--wc-neg)} /* Item meta inside order tables (variation attributes) */ /* Two-column grid put the value in whatever width was left after the label, which broke "1 Month" onto two lines in both the cart and the 400px order panel. Inline pairs with a forced break after each one wrap as a unit. */ .woocommerce .variation{ display:block;margin:6px 0 0;padding:0; font-size:.82rem;color:var(--wc-ink-3);line-height:1.5; } .woocommerce .variation dt{display:inline;margin:0;font-weight:600;color:var(--wc-ink-3)} .woocommerce .variation dd{display:inline;margin:0 0 0 5px;color:var(--wc-ink-2)} .woocommerce .variation dd p{display:inline;margin:0} .woocommerce .variation dd::after{content:"\A";white-space:pre} .woocommerce .wc-item-meta{ display:block;margin:6px 0 0;padding:0;list-style:none; font-size:.82rem;color:var(--wc-ink-3);line-height:1.5; } .woocommerce .wc-item-meta li{ display:flex;flex-wrap:wrap;gap:0 5px;margin:0;padding:0;list-style:none; } /* Sentence case, not mono caps: "SUBSCRIPTION PERIOD:" is 19 characters of letterspaced uppercase and wrapped to three lines in the 400px checkout column, dragging its value out of alignment. */ .woocommerce .wc-item-meta-label{ font-size:.82rem;font-weight:600;color:var(--wc-ink-3);flex:none; } .woocommerce .wc-item-meta p{margin:0;color:var(--wc-ink-2)} .woocommerce .product-quantity{color:var(--wc-ink-3);font-family:var(--wc-mono)} /* Downloads table */ .woocommerce .woocommerce-MyAccount-downloads .download-product a{font-weight:600;color:var(--wc-ink)} .woocommerce .woocommerce-MyAccount-downloads .download-remaining{font-family:var(--wc-mono)} /* Pagination */ .woocommerce .woocommerce-pagination, .woocommerce nav.woocommerce-pagination{margin:26px 0;text-align:center} .woocommerce .woocommerce-pagination ul{display:inline-flex;gap:6px;border:0;margin:0;padding:0;list-style:none} .woocommerce .woocommerce-pagination ul li{border:0;margin:0;overflow:visible} .woocommerce .woocommerce-pagination ul li a, .woocommerce .woocommerce-pagination ul li span{ display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px; border:1px solid var(--wc-rail);border-radius:12px;background:var(--wc-surface); color:var(--wc-ink-2);font-weight:600;font-size:.9rem;transition:.18s; } .woocommerce .woocommerce-pagination ul li a:hover{border-color:var(--wc-navy);color:var(--wc-navy);transform:translateY(-1px)} .woocommerce .woocommerce-pagination ul li span.current{background:var(--wc-grad-brand);border-color:transparent;color:#fff} .woocommerce .woocommerce-pagination--without-numbers{display:flex;gap:10px;justify-content:flex-start} /* ============================================================ 08 — ORDER DETAILS / THANK YOU ============================================================ */ .woocommerce ul.order_details{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin:0 0 28px; padding:0; list-style:none; border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); overflow:hidden; background:var(--wc-surface); box-shadow:var(--wc-shadow-sm); } .woocommerce ul.order_details li{ float:none;margin:0;padding:20px 22px;border:0; border-right:1px solid var(--wc-rail); font-family:var(--wc-mono); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--wc-ink-3); list-style:none; } .woocommerce ul.order_details li:last-child{border-right:0} .woocommerce ul.order_details li strong{ display:block;margin-top:8px; font-family:var(--wc-display); font-size:1.02rem; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--wc-ink); } .woocommerce ul.order_details li.total strong{color:var(--wc-navy)} .woocommerce ul.order_details li.total strong .amount{font-family:var(--wc-mono)} .woocommerce .woocommerce-order h2, .woocommerce .woocommerce-column__title{ font-size:1.12rem;margin:30px 0 14px; padding-bottom:12px;border-bottom:1px solid var(--wc-rail); } .woocommerce .woocommerce-columns--addresses{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px; } .woocommerce .woocommerce-columns--addresses .woocommerce-column{ width:auto;float:none; border:1px solid var(--wc-rail);border-radius:var(--wc-r-md); background:var(--wc-surface-2);padding:22px; } .woocommerce .woocommerce-customer-details address{ border:0;padding:0;border-radius:0;font-style:normal; color:var(--wc-ink-2);line-height:1.7;font-size:.92rem; } /* ============================================================ 09 — CART ============================================================ */ .woocommerce-cart .woocommerce{ display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop{grid-column:1/-1} .woocommerce-cart form.woocommerce-cart-form{grid-column:1;min-width:0} .woocommerce-cart .cart-collaterals{ grid-column:2;width:auto;float:none; position:sticky;top:calc(var(--head-h,72px) + 20px); } .woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none} /* This site's cart template lists headers as Product, (blank), Price, Quantity, Total but body cells as thumbnail, name, price, quantity, subtotal — so every label sat one column left of its data. The labels are re-pointed here rather than by editing cart.php. */ .woocommerce table.woocommerce-cart-form__contents thead th.product-name{font-size:0;letter-spacing:0} .woocommerce table.woocommerce-cart-form__contents thead th.product-thumbnail{width:88px} .woocommerce table.woocommerce-cart-form__contents thead th.product-thumbnail::after{ content:"Product"; font-family:var(--wc-mono);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--wc-ink-3); } /* Lines are sold individually, so the quantity input renders hidden and the column is an empty gutter. Hidden only when no row has a real input. */ .woocommerce table.woocommerce-cart-form__contents:not(:has(.product-quantity input:not([type="hidden"]))) th.product-quantity, .woocommerce table.woocommerce-cart-form__contents:not(:has(.product-quantity input:not([type="hidden"]))) td.product-quantity{display:none} .woocommerce table.cart .product-thumbnail img{ width:64px;height:64px;max-width:none;object-fit:contain;padding:6px; background:var(--wc-surface-2);border-radius:12px;border:1px solid var(--wc-rail); } /* width:1% plus the shell's img{max-width:100%} collapsed the thumbnail to a sliver. The cell gets a real width and the image is exempted from the cap. */ .woocommerce table.cart td.product-thumbnail{width:88px;padding-right:0} .woocommerce table.cart td.product-name{padding-left:16px;width:auto} /* Money and control columns shrink to their content so the product column — which carries the wrapping variation meta — takes all remaining width. */ .woocommerce table.cart th.product-price, .woocommerce table.cart td.product-price, .woocommerce table.cart th.product-subtotal, .woocommerce table.cart td.product-subtotal, .woocommerce table.cart th.product-quantity, .woocommerce table.cart td.product-quantity, .woocommerce table.cart th.product-remove, .woocommerce table.cart td.product-remove{width:1%;white-space:nowrap} .woocommerce table.cart th.product-subtotal{text-align:right} .woocommerce table.cart td.product-remove{padding-left:24px} .woocommerce table.cart td.product-remove a.remove{ display:grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--wc-rail-2);color:var(--wc-ink-3)!important;font-size:18px;line-height:1; transition:.16s;text-decoration:none; } .woocommerce table.cart td.product-remove a.remove:hover{background:var(--wc-neg);color:#fff!important} .woocommerce table.cart td.actions{background:var(--wc-surface-2)} .woocommerce table.cart td.actions .coupon{display:flex;gap:10px;align-items:center;float:none;margin-bottom:12px;flex-wrap:wrap} .woocommerce table.cart td.actions .coupon label{display:none} .woocommerce table.cart td.actions .coupon .input-text{width:auto;min-width:200px;flex:1 1 200px;border-radius:999px} .woocommerce table.cart td.actions > .button{float:right} .woocommerce .cart_totals{ background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-md); padding:26px; } .woocommerce .cart_totals h2{ font-size:1.05rem;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--wc-rail); } .woocommerce .cart_totals table.shop_table{border:0;border-radius:0;margin:0;background:transparent} .woocommerce .cart_totals table.shop_table th{ background:transparent;border:0;padding:12px 0;font-family:var(--wc-font); font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--wc-ink-2); } .woocommerce .cart_totals table.shop_table td{ background:transparent;border:0;padding:12px 0;text-align:right;color:var(--wc-ink); } .woocommerce .cart_totals tr.cart-subtotal td, .woocommerce .cart_totals tr.shipping td{border-bottom:1px solid var(--wc-rail-2)} .woocommerce .cart_totals tr.order-total th, .woocommerce .cart_totals tr.order-total td{ padding-top:18px;border-top:1px solid var(--wc-rail);font-weight:700;color:var(--wc-ink); } .woocommerce .cart_totals tr.order-total .amount{font-size:1.35rem;color:var(--wc-navy)} .woocommerce .cart_totals .includes_tax, .woocommerce .cart_totals small{display:block;font-size:.76rem;color:var(--wc-ink-3);font-weight:400;font-family:var(--wc-font)} /* the "(includes … GST)" note carries its own .amount span, which line 1024 was blowing up to Total size — keep it small, muted and on one line */ .woocommerce .cart_totals tr.order-total .includes_tax{margin-top:4px;white-space:nowrap;line-height:1.4} .woocommerce .cart_totals tr.order-total .includes_tax .amount, .woocommerce .cart_totals tr.order-total small .amount{ font-size:.76rem;font-weight:400;color:var(--wc-ink-3);font-family:var(--wc-font); } .woocommerce .wc-proceed-to-checkout{padding:18px 0 0} .woocommerce .wc-proceed-to-checkout .checkout-button{width:100%;font-size:1rem;padding:15px 26px} .woocommerce .cart-empty{text-align:center;padding:44px 0;font-size:1.05rem} .woocommerce .return-to-shop{text-align:center;padding-bottom:20px} /* ============================================================ 10 — CHECKOUT ============================================================ */ /* Floats, not grid. The checkout form has a variable number of children (coupon toggle, login box, additional fields, third-party panels) and grid auto-placement pushed #order_review into a third row underneath the billing card. Floating the two right-hand children keeps them at the top of the right column no matter how many siblings appear on the left. */ .woocommerce-checkout form.checkout{display:block} .woocommerce-checkout form.checkout::after{content:"";display:table;clear:both} @media (min-width:961px){ .woocommerce-checkout form.checkout > #customer_details, .woocommerce-checkout form.checkout > .woocommerce-additional-fields, .woocommerce-checkout form.checkout > .woocommerce-shipping-fields{ float:left;clear:left;width:calc(100% - 428px); } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review{ float:right;clear:right;width:400px; } } /* No width here: it has the same specificity as the float rule above and, coming later, was overriding calc() back to 100% — which is why the order panel dropped below the billing card. */ .woocommerce-checkout form.checkout > .col2-set, .woocommerce-checkout form.checkout #customer_details{min-width:0} .woocommerce-checkout form.checkout > #order_review_heading{ margin:0 0 14px;font-size:1.05rem; } .woocommerce-checkout form.checkout > #order_review{ background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-md); padding:26px; margin-bottom:26px; } /* Billing / shipping panel */ .woocommerce .col2-set{width:100%;margin:0} .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2{ width:100%;float:none; background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-sm); padding:clamp(22px,3vw,32px); } .woocommerce .col2-set .col-2{margin-top:22px} .woocommerce .col2-set h3, .woocommerce #customer_details h3{ font-size:1.08rem;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--wc-rail); } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper{display:block} /* Review table inside the sticky panel */ .woocommerce-checkout #order_review table.shop_table{ border:0;border-radius:0;margin:0;background:transparent; } .woocommerce-checkout #order_review table.shop_table thead th{ background:transparent;border-bottom:1px solid var(--wc-rail);padding:0 0 12px; } .woocommerce-checkout #order_review table.shop_table tbody td{ background:transparent;border-bottom:1px solid var(--wc-rail-2);padding:14px 0; } .woocommerce-checkout #order_review table.shop_table tbody tr:hover td{background:transparent} .woocommerce-checkout #order_review table.shop_table tfoot th, .woocommerce-checkout #order_review table.shop_table tfoot td{ background:transparent;border:0;border-bottom:1px solid var(--wc-rail-2);padding:12px 0; font-family:var(--wc-font);font-weight:500;font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--wc-ink-2); } .woocommerce-checkout #order_review table.shop_table tfoot td{text-align:right;color:var(--wc-ink)} .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th, .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td{ border-bottom:0;border-top:1px solid var(--wc-rail);padding-top:18px;font-weight:700;color:var(--wc-ink); } .woocommerce-checkout #order_review tr.order-total .amount{font-size:1.35rem;color:var(--wc-navy)} /* keep the checkout "(includes … GST)" figure small & muted too */ .woocommerce-checkout #order_review tr.order-total .includes_tax{white-space:nowrap;line-height:1.4} .woocommerce-checkout #order_review tr.order-total .includes_tax .amount, .woocommerce-checkout #order_review tr.order-total small .amount{ font-size:.76rem;font-weight:400;color:var(--wc-ink-3);font-family:var(--wc-font); } .woocommerce-checkout #order_review .product-name{font-weight:600;color:var(--wc-ink);padding-right:14px} /* Coupon toggle */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{margin-bottom:20px} .woocommerce form.checkout_coupon{ border:1px solid var(--wc-rail);border-radius:var(--wc-r-md); background:var(--wc-surface-2);padding:22px;margin:0 0 24px; } .woocommerce form.checkout_coupon .form-row{margin-bottom:0} /* Login-at-checkout box */ .woocommerce form.woocommerce-form-login.login, .woocommerce form.login{ border:1px solid var(--wc-rail);border-radius:var(--wc-r-lg); background:var(--wc-surface);padding:26px;margin:0 0 26px; } /* Terms + place order */ .woocommerce .woocommerce-terms-and-conditions-wrapper{margin:18px 0} .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row{margin-bottom:0} .woocommerce .woocommerce-terms-and-conditions-wrapper label.checkbox, .woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox{ display:flex;align-items:flex-start;gap:10px;flex-wrap:nowrap; font-size:.86rem;line-height:1.5; } .woocommerce .woocommerce-terms-and-conditions-wrapper label input[type="checkbox"]{margin-top:1px} .woocommerce .woocommerce-terms-and-conditions-wrapper .required{margin-left:-6px} .woocommerce .woocommerce-privacy-policy-text:empty{display:none} .woocommerce .woocommerce-terms-and-conditions{ border:1px solid var(--wc-rail);border-radius:var(--wc-r-md);background:var(--wc-surface-2); padding:16px;font-size:.86rem;color:var(--wc-ink-2); } .woocommerce .validate-required.woocommerce-validated label.checkbox{color:var(--wc-ink-2)} .woocommerce #place_order{width:100%;font-size:1rem;padding:15px 26px;margin-top:6px} .woocommerce .place-order{margin-top:8px} /* ============================================================ 11 — PAYMENT METHODS ============================================================ */ .woocommerce ul.wc_payment_methods, .woocommerce ul.payment_methods{ list-style:none;margin:18px 0 0;padding:0;border:0; display:flex;flex-direction:column;gap:10px; } /* The radio input is a SIBLING of the label, not a child, so the row has to be the flex container — otherwise the input lands on its own line above the label and reads as a missing control. */ /* The radio is a SIBLING of the label, and WooCommerce inlines style="display:none" on it whenever there is only one gateway. A grid with a fixed radio column therefore left a dead first column and pushed the gateway logo onto its own line. Flex handles both cases. */ .woocommerce ul.wc_payment_methods li{ list-style:none;margin:0; display:flex;flex-wrap:wrap;align-items:center; gap:0 12px; padding:16px 18px; border:1px solid var(--wc-rail); border-radius:var(--wc-r-md); background:var(--wc-surface-2); transition:border-color .18s,background .18s,box-shadow .18s; } .woocommerce ul.wc_payment_methods li::before{content:none} .woocommerce ul.wc_payment_methods li:hover{border-color:color-mix(in srgb,var(--wc-navy) 40%,var(--wc-rail))} .woocommerce ul.wc_payment_methods li:has(input:checked){ border-color:var(--wc-navy); background:color-mix(in srgb,var(--wc-navy) 5%,var(--wc-surface)); box-shadow:0 0 0 3px var(--wc-ring); } .woocommerce ul.wc_payment_methods li > input[type="radio"]{flex:none;margin:0} .woocommerce ul.wc_payment_methods li label{ flex:1 1 auto;min-width:0; display:flex;align-items:center;gap:12px; margin:0;padding:0;cursor:pointer; font-size:.94rem;font-weight:600;color:var(--wc-ink); } .woocommerce ul.wc_payment_methods li label img{ max-height:22px;width:auto;margin-left:auto;flex:none;border-radius:4px; } .woocommerce ul.wc_payment_methods li .payment_box{ flex:1 0 100%; background:transparent!important; border:0;border-top:1px solid var(--wc-rail); margin:14px 0 0;padding:14px 0 0; font-size:.86rem;color:var(--wc-ink-2);line-height:1.6; } /* WooCommerce draws a CSS-triangle callout above the description box. It has no meaning once the box is inside the card, and it rendered as a stray grey arrow. */ .woocommerce ul.wc_payment_methods li .payment_box::before, .woocommerce ul.wc_payment_methods li .payment_box::after{content:none!important;border:0!important;display:none!important} /* With a single hidden-radio gateway, the row still needs to read as chosen. */ .woocommerce ul.wc_payment_methods li:only-child{ border-color:var(--wc-navy); background:color-mix(in srgb,var(--wc-navy) 4%,var(--wc-surface)); } /* one gateway is not a choice, so it shouldn't wear a selection ring */ .woocommerce ul.wc_payment_methods li:only-child:has(input:checked){box-shadow:none} .woocommerce ul.wc_payment_methods li .payment_box::before{content:none} .woocommerce ul.wc_payment_methods li .payment_box p:last-child{margin-bottom:0} .woocommerce .payment_method_razorpay label img{max-height:22px} .woocommerce .about_paypal{font-size:.8rem;margin-left:8px} /* ============================================================ 12 — SHOP ARCHIVE / PRODUCT CARDS ============================================================ */ .woocommerce .woocommerce-products-header{margin-bottom:24px} .woocommerce .woocommerce-products-header__title{margin:0} .woocommerce .woocommerce-breadcrumb{ font-size:.84rem;color:var(--wc-ink-3);margin:0 0 22px; display:flex;flex-wrap:wrap;gap:8px;align-items:center; } .woocommerce .woocommerce-breadcrumb a{color:var(--wc-ink-2)} .woocommerce .woocommerce-breadcrumb a:hover{color:var(--wc-navy)} .woocommerce .woocommerce-result-count{color:var(--wc-ink-3);font-size:.86rem;margin:0 0 20px;float:none} .woocommerce .woocommerce-ordering{float:none;margin:0 0 22px} .woocommerce .woocommerce-ordering select{width:auto;min-width:230px;border-radius:999px} @media (min-width:768px){ .woocommerce .woocommerce-result-count{float:left;line-height:52px;margin-bottom:0} .woocommerce .woocommerce-ordering{float:right} .woocommerce ul.products{clear:both} } .woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; margin:0 0 34px; padding:0; list-style:none; } .woocommerce ul.products.columns-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .woocommerce ul.products.columns-3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .woocommerce ul.products li.product{ width:auto!important;margin:0!important;float:none!important;padding:0; display:flex;flex-direction:column; background:var(--wc-surface); border:1px solid var(--wc-rail); border-radius:var(--wc-r-lg); box-shadow:var(--wc-shadow-sm); overflow:hidden; transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s; position:relative; } .woocommerce ul.products li.product::before{content:none} .woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:var(--wc-shadow-md); border-color:color-mix(in srgb,var(--wc-navy) 28%,var(--wc-rail)); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1} .woocommerce ul.products li.product img{ width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0; border-bottom:1px solid var(--wc-rail);background:var(--wc-surface-2); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3{ font-family:var(--wc-display);font-size:1rem;font-weight:700;letter-spacing:-.014em; color:var(--wc-ink);padding:18px 20px 0;margin:0;line-height:1.35; } .woocommerce ul.products li.product .price{ display:block;padding:8px 20px 0;margin:0; font-family:var(--wc-mono);font-variant-numeric:tabular-nums; font-size:1.02rem;font-weight:600;color:var(--wc-navy); } .woocommerce ul.products li.product .price del{font-size:.85em;margin-right:6px} .woocommerce ul.products li.product .price ins{font-weight:700} .woocommerce ul.products li.product .product-table-desc, .woocommerce ul.products li.product .woocommerce-product-details__short-description{ padding:10px 20px 0;font-size:.86rem;color:var(--wc-ink-2);line-height:1.55; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .add_to_cart_button{ margin:16px 20px 20px;align-self:flex-start;padding:10px 20px;min-height:40px;font-size:.86rem; } .woocommerce ul.products li.product .onsale, .woocommerce span.onsale{ position:absolute;top:14px;left:14px;right:auto;z-index:2; min-height:0;min-width:0;line-height:1;margin:0;padding:7px 13px; border-radius:999px; background:var(--wc-grad-flame); color:#1A1200; font-family:var(--wc-mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; box-shadow:0 4px 12px rgba(247,148,29,.3); } .woocommerce .products .star-rating, .woocommerce .star-rating{color:var(--wc-orange);margin:8px 20px 0;font-size:.85em} .woocommerce .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:14px} .woocommerce .woocommerce-review-link{color:var(--wc-ink-3);font-size:.84rem} /* ============================================================ 13 — SINGLE PRODUCT ============================================================ */ .woocommerce div.product{margin-bottom:40px} .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product div.images{ width:100%;float:none;margin-bottom:26px; } .woocommerce div.product div.images img{ border-radius:var(--wc-r-lg);border:1px solid var(--wc-rail);background:var(--wc-surface); } .woocommerce div.product div.summary{width:100%;float:none;margin:0} .woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before{ display: none !important; } /* NOTE: the single-product two-column layout (summary left / description right, gallery hidden) is defined once in the consolidated block at the very end of this file — see "Single variable product". */ .woocommerce div.product .product_title{ font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px; } .woocommerce div.product p.price, .woocommerce div.product span.price{ font-family:var(--wc-mono);font-variant-numeric:tabular-nums; font-size:1.6rem;font-weight:700;color:var(--wc-navy);margin:0 0 18px; } .woocommerce div.product .woocommerce-product-details__short-description{ color:var(--wc-ink-2);line-height:1.7;margin-bottom:22px; padding-bottom:22px;border-bottom:1px solid var(--wc-rail); } .woocommerce div.product form.cart{margin:22px 0} .woocommerce div.product form.cart div.quantity{margin-right:12px} .woocommerce div.product .single_add_to_cart_button{padding:14px 30px;min-height:50px} .woocommerce div.product .product_meta{ margin-top:24px;padding-top:20px;border-top:1px solid var(--wc-rail); font-size:.84rem;color:var(--wc-ink-3);display:flex;flex-direction:column;gap:7px; } .woocommerce div.product .product_meta > span{display:block} .woocommerce div.product .product_meta .sku, .woocommerce div.product .product_meta a{color:var(--wc-ink-2)} .woocommerce div.product .stock{font-weight:600} .woocommerce div.product .stock.in-stock{color:var(--wc-pos)} .woocommerce div.product .stock.out-of-stock{color:var(--wc-neg)} /* Variations */ .woocommerce div.product form.cart table.variations{ width:100%;border:0;margin:0 0 20px;border-collapse:separate;border-spacing:0 14px; } .woocommerce div.product form.cart table.variations tr{display:block} .woocommerce div.product form.cart table.variations td{display:block;padding:0;border:0;background:transparent} .woocommerce div.product form.cart table.variations td.label{margin-bottom:7px} .woocommerce div.product form.cart table.variations td.label label{ font-size:.72rem;font-family:var(--wc-mono);letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--wc-ink-3);margin:0; } .woocommerce div.product form.cart table.variations td.value select{max-width:100%} .woocommerce div.product form.cart .reset_variations{ display:inline-block;margin-top:10px;font-size:.82rem;color:var(--wc-ink-3); } .woocommerce div.product form.cart .reset_variations:hover{color:var(--wc-neg)} .woocommerce div.product .single_variation_wrap{ background:var(--wc-surface-2);border:1px solid var(--wc-rail); border-radius:var(--wc-r-md);padding:20px; } .woocommerce div.product .woocommerce-variation-price{margin-bottom:16px} .woocommerce div.product .woocommerce-variation-price .price{font-size:1.4rem} .woocommerce div.product .variations_button{display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* Tabs */ .woocommerce div.product .woocommerce-tabs{margin-top:48px} .woocommerce div.product .woocommerce-tabs ul.tabs{ margin:0 0 -1px;padding:0;list-style:none;display:flex;gap:4px;flex-wrap:wrap; border-bottom:1px solid var(--wc-rail); } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after{content:none;border:0} .woocommerce div.product .woocommerce-tabs ul.tabs li{ margin:0;padding:0;border:0;background:transparent;border-radius:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block;padding:13px 20px;font-weight:600;font-size:.9rem;color:var(--wc-ink-2); border-bottom:2px solid transparent;transition:color .18s,border-color .18s; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--wc-navy)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--wc-navy);border-bottom-color:var(--wc-orange)} .woocommerce div.product .woocommerce-tabs .panel{ margin:0;padding:28px 0 0;border:0;background:transparent;box-shadow:none; color:var(--wc-ink-2);line-height:1.75; } .woocommerce div.product .woocommerce-tabs .panel h2{font-size:1.15rem;margin-bottom:14px} .woocommerce div.product .woocommerce-tabs .panel table{ width:100%;border-collapse:separate;border-spacing:0; border:1px solid var(--wc-rail);border-radius:var(--wc-r-md);overflow:hidden; } .woocommerce div.product .woocommerce-tabs .panel table th, .woocommerce div.product .woocommerce-tabs .panel table td{ padding:13px 18px;border-bottom:1px solid var(--wc-rail-2);text-align:left; } .woocommerce div.product .woocommerce-tabs .panel table th{background:var(--wc-surface-2);color:var(--wc-ink);font-weight:600} /* Related / upsells */ .woocommerce .related, .woocommerce .upsells{margin-top:56px;padding-top:40px;border-top:1px solid var(--wc-rail)} .woocommerce .related > h2, .woocommerce .upsells > h2{margin-bottom:24px} /* ============================================================ 14 — LOGIN / REGISTER PAGE The template ships an inline