/*
* Design Refresh v2, area D4: My Account, sign-in, cart, checkout and the
* order pages (inc/v2/account.php, woocommerce-v2/). WooCommerce markup in the
* designer's tokens: panels like .saved-order (#1b1b1b, border #4f4f4f),
* summaries like .service-gateway (plum gradient, border #515151), the .btn
* buttons, .planner-field inputs, .spec-table tables and .portal-account-notice
* notices. Everything is scoped to .hwr2 .hwr-woo (div#main of these pages);
* the v1 Tailwind rules for the same WooCommerce classes (dist/style.css) still
* load, so a few properties need !important where v1 forces them.
*/
.hwr2 .hwr-woo {
--hwr-red: #ed001e;
--hwr-panel: #1b1b1b;
--hwr-panel-border: #4f4f4f;
--hwr-line: #313131;
--hwr-muted: #a5a5a5;
--hwr-label: #cdcdcd;
--hwr-field: #1a1a1a;
--hwr-field-border: #525252;
--hwr-plum: linear-gradient(130deg, #261622, #191919);
--hwr-sticky-top: 90px;
color: #e9e9e9;
}
.hwr2 .hwr-woo *,
.hwr2 .hwr-woo *::before,
.hwr2 .hwr-woo *::after {
box-sizing: border-box;
}
.hwr2 .hwr-woo a:not(.btn):not(.button) {
color: inherit;
}
.hwr2 .hwr-woo .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hwr2 .hwr-woo img {
max-width: 100%;
height: auto;
}
/* The export gives some of these boxes display:flex, which would override [hidden]. */
.hwr2 .hwr-woo [hidden] {
display: none !important;
}
/* ---------------------------------------------------------------------------
* Page header extras: back link, header actions, the endpoint layout width.
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hwr-woo-back {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 44px;
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
color: #c4c4c4;
}
.hwr2 .hwr-woo .hwr-woo-back:hover {
color: #fff;
}
.hwr2 .hwr-woo .hwr-woo-intro__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 22px 0 0;
}
.hwr2 .hwr-woo .account-layout > div > .hwr-woo-intro__text,
.hwr2 .hwr-woo .account-layout > div > p:not(.eyebrow) {
font-size: 15px;
line-height: 1.75;
color: #d4d4d4;
max-width: 75ch;
}
.hwr2 .hwr-woo .account-layout > div > .woocommerce {
margin-top: 30px;
}
/*
* The export's .account-layout is a two-column grid (account menu + content) that only its
* .portal-scheme (dealer shell) rule turns back into one column. v2 prints no account menu there
* (the dealer sidebar has it), so the endpoint content is the grid's only child: one column in
* every chrome, also the consumer chrome of accounts without a shop role (R3-5: 190-240px wide).
*/
.hwr2 .hwr-woo .account-layout {
display: block;
}
.hwr2 .hwr-woo.hwr-woo--endpoint .account-layout > div {
max-width: 1100px;
}
.hwr2 .hwr-woo.hwr-woo--cart .current-basic-intro,
.hwr2 .hwr-woo.hwr-woo--checkout .current-basic-intro,
.hwr2 .hwr-woo.hwr-woo--order-received .current-basic-intro,
.hwr2 .hwr-woo.hwr-woo--order-pay .current-basic-intro {
padding-bottom: 30px;
}
/* ---------------------------------------------------------------------------
* Notices: the .portal-account-notice look with a red (error) or neutral accent.
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .woocommerce-notices-wrapper:empty {
display: none;
}
.hwr2 .hwr-woo .woocommerce-message,
.hwr2 .hwr-woo .woocommerce-info,
.hwr2 .hwr-woo .woocommerce-error,
.hwr2 .hwr-woo .woocommerce-NoticeGroup .woocommerce-error,
.hwr2 .hwr-woo .wc-block-components-notice-banner,
.hitek-v2 .woocommerce-notices-wrapper .woocommerce-message,
.hitek-v2 .woocommerce-notices-wrapper .woocommerce-info,
.hitek-v2 .woocommerce-notices-wrapper .woocommerce-error {
position: relative;
display: block;
margin: 0 0 22px;
padding: 16px 20px 16px 22px;
list-style: none;
background: #121212;
border: 1px solid #353535;
border-left: 3px solid #8a8a8a;
border-radius: 5px;
color: #e9e9e9;
font-size: 14px;
line-height: 1.6;
}
.hwr2 .hwr-woo .woocommerce-message,
.hitek-v2 .woocommerce-notices-wrapper .woocommerce-message {
border-left-color: #3fae6a;
}
.hwr2 .hwr-woo .woocommerce-error,
.hwr2 .hwr-woo .woocommerce-NoticeGroup .woocommerce-error,
.hitek-v2 .woocommerce-notices-wrapper .woocommerce-error {
display: block;
border-left-color: var(--hwr-red, #ed001e);
color: #ffd7dc;
}
.hwr2 .hwr-woo .woocommerce-error li {
margin: 2px 0;
}
.hwr2 .hwr-woo .woocommerce-message::before,
.hwr2 .hwr-woo .woocommerce-info::before,
.hwr2 .hwr-woo .woocommerce-error::before {
content: none;
}
.hwr2 .hwr-woo .woocommerce-message .button,
.hwr2 .hwr-woo .woocommerce-info .button {
float: right;
min-height: 44px;
margin: -6px 0 0 18px;
padding: 9px 14px;
font-size: 10px;
}
.hwr2 .hwr-woo .woocommerce-message a:not(.button),
.hwr2 .hwr-woo .woocommerce-info a:not(.button),
.hwr2 .hwr-woo .woocommerce-error a:not(.button) {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.hwr2 .hwr-woo .hitek-notice-product-name {
color: #fff;
}
/* ---------------------------------------------------------------------------
* Buttons: WooCommerce buttons take the designer .btn look; secondary actions
* the outlined .btn.secondary look. v1 forces a gradient with !important.
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .button,
.hwr2 .hwr-woo button.button,
.hwr2 .hwr-woo input.button,
.hwr2 .hwr-woo .woocommerce-Button,
.hwr2 .hwr-woo .woocommerce-button,
.hwr2 .hwr-woo :where(button[type="submit"]:not(.hwr-plain)),
.hwr2 .hwr-woo .checkout-button,
.hwr2 .hwr-woo #place_order,
.hwr2 .hwr-woo .btn,
.hwr2 .hwr-woo button[type='submit'].bg-hitek-red {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 48px;
padding: 13px 22px;
border: 1px solid #ed001e;
border-radius: 2px;
background: #ed001e !important;
color: #fff !important;
font: 700 11px/1.3 HitekInter, Inter, system-ui, sans-serif;
letter-spacing: .065em;
text-transform: uppercase;
text-decoration: none !important;
text-align: center;
white-space: normal;
box-shadow: none;
cursor: pointer;
transform: none !important;
filter: none;
transition: background .18s, border-color .18s, box-shadow .18s, opacity .18s;
}
.hwr2 .hwr-woo .button::before,
.hwr2 .hwr-woo .woocommerce-Button::before,
.hwr2 .hwr-woo .woocommerce-button::before,
.hwr2 .hwr-woo #place_order::before {
content: none !important;
}
.hwr2 .hwr-woo .button:hover,
.hwr2 .hwr-woo .woocommerce-Button:hover,
.hwr2 .hwr-woo .woocommerce-button:hover,
.hwr2 .hwr-woo :where(button[type="submit"]:not(.hwr-plain)):hover,
.hwr2 .hwr-woo .checkout-button:hover,
.hwr2 .hwr-woo #place_order:hover,
.hwr2 .hwr-woo .btn:hover {
background: #ff1430 !important;
box-shadow: 0 4px 25px #ed001e2e;
filter: none;
}
.hwr2 .hwr-woo .button:focus-visible,
.hwr2 .hwr-woo button:focus-visible,
.hwr2 .hwr-woo .btn:focus-visible,
.hwr2 .hwr-woo a:focus-visible,
.hwr2 .hwr-woo input:focus-visible,
.hwr2 .hwr-woo select:focus-visible,
.hwr2 .hwr-woo textarea:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.hwr2 .hwr-woo .btn svg,
.hwr2 .hwr-woo .button svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Secondary: outlined. */
.hwr2 .hwr-woo .btn.secondary,
.hwr2 .hwr-woo .button.secondary,
.hwr2 .hwr-woo .woocommerce-orders-table .button:not(.pay),
.hwr2 .hwr-woo .my_account_orders .button:not(.pay),
.hwr2 .hwr-woo .woocommerce-MyAccount-downloads .button,
.hwr2 .hwr-woo .woocommerce-pagination .button,
.hwr2 .hwr-woo .order-again .button,
.hwr2 .hwr-woo .woocommerce-Address .edit,
.hwr2 .hwr-woo .shipping-calculator-form .button,
.hwr2 .hwr-woo .wc-backward:not(.btn),
.hwr2 .hwr-woo .subscription_details .button,
.hwr2 .hwr-woo .woocommerce-orders-table__cell-order-actions .button {
background: transparent !important;
border-color: #666;
color: #fff !important;
}
.hwr2 .hwr-woo .btn.secondary:hover,
.hwr2 .hwr-woo .button.secondary:hover,
.hwr2 .hwr-woo .woocommerce-orders-table .button:not(.pay):hover,
.hwr2 .hwr-woo .my_account_orders .button:not(.pay):hover,
.hwr2 .hwr-woo .woocommerce-MyAccount-downloads .button:hover,
.hwr2 .hwr-woo .woocommerce-pagination .button:hover,
.hwr2 .hwr-woo .order-again .button:hover,
.hwr2 .hwr-woo .shipping-calculator-form .button:hover,
.hwr2 .hwr-woo .subscription_details .button:hover,
.hwr2 .hwr-woo .woocommerce-orders-table__cell-order-actions .button:hover {
background: #ffffff0d !important;
border-color: #fff;
box-shadow: none;
}
.hwr2 .hwr-woo .button:disabled,
.hwr2 .hwr-woo .button[disabled],
.hwr2 .hwr-woo .button.disabled,
.hwr2 .hwr-woo button[aria-disabled="true"],
.hwr2 .hwr-woo a[aria-disabled="true"] {
opacity: .45;
cursor: not-allowed;
box-shadow: none;
}
.hwr2 .hwr-woo .button.loading {
opacity: .65;
pointer-events: none;
}
.hwr2 .hwr-woo .text-link {
min-height: 44px;
color: #e9e9e9;
font-size: 12px;
}
.hwr2 .hwr-woo .text-link:hover {
color: #fff;
}
/* ---------------------------------------------------------------------------
* Forms: .planner-field inputs (16px on phones so iOS does not zoom).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .form-row,
.hwr2 .hwr-woo .woocommerce-form-row {
display: block;
float: none;
width: auto;
margin: 0 0 18px;
padding: 0;
}
.hwr2 .hwr-woo .form-row label,
.hwr2 .hwr-woo .woocommerce-form-row label,
.hwr2 .hwr-woo fieldset legend {
display: block;
margin: 0 0 7px;
color: var(--hwr-label);
font-size: 11px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .06em;
text-transform: uppercase;
}
.hwr2 .hwr-woo .form-row:focus-within label {
color: #fff;
}
.hwr2 .hwr-woo label .required,
.hwr2 .hwr-woo .required {
color: var(--hwr-red);
text-decoration: none;
border: 0;
}
.hwr2 .hwr-woo label .optional {
color: #8a8a8a;
text-transform: none;
letter-spacing: 0;
}
.hwr2 .hwr-woo input[type="text"],
.hwr2 .hwr-woo input[type="email"],
.hwr2 .hwr-woo input[type="tel"],
.hwr2 .hwr-woo input[type="url"],
.hwr2 .hwr-woo input[type="number"],
.hwr2 .hwr-woo input[type="password"],
.hwr2 .hwr-woo input[type="search"],
.hwr2 .hwr-woo input[type="date"],
.hwr2 .hwr-woo .input-text,
.hwr2 .hwr-woo .form-row .input-text,
.hwr2 .hwr-woo select,
.hwr2 .hwr-woo .form-row select,
.hwr2 .hwr-woo textarea,
.hwr2 .hwr-woo .form-row textarea {
display: block;
width: 100%;
max-width: 100%;
min-height: 46px;
margin: 0;
padding: 11px 13px;
background: var(--hwr-field);
border: 1px solid var(--hwr-field-border);
border-radius: 3px;
box-shadow: none;
color: #fff;
font: 400 14px/1.4 HitekInter, Inter, system-ui, sans-serif;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
}
.hwr2 .hwr-woo select,
.hwr2 .hwr-woo .form-row select {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdcdcd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.hwr2 .hwr-woo textarea,
.hwr2 .hwr-woo .form-row textarea {
min-height: 110px;
resize: vertical;
}
.hwr2 .hwr-woo input::placeholder,
.hwr2 .hwr-woo textarea::placeholder {
color: #8a8a8a;
opacity: 1;
}
.hwr2 .hwr-woo input:hover,
.hwr2 .hwr-woo select:hover,
.hwr2 .hwr-woo textarea:hover {
border-color: #8a8a8a;
}
.hwr2 .hwr-woo input:focus,
.hwr2 .hwr-woo select:focus,
.hwr2 .hwr-woo textarea:focus,
.hwr2 .hwr-woo .form-row .input-text:focus {
border-color: var(--hwr-red);
box-shadow: 0 0 0 1px var(--hwr-red);
outline: none;
}
.hwr2 .hwr-woo .woocommerce-invalid input.input-text,
.hwr2 .hwr-woo .woocommerce-invalid select,
.hwr2 .hwr-woo input.has-error,
.hwr2 .hwr-woo input[aria-invalid="true"] {
border-color: #ff4d5e;
}
.hwr2 .hwr-woo .checkout-inline-error-message,
.hwr2 .hwr-woo .coupon-error-notice,
.hwr2 .hwr-woo .woocommerce-input-wrapper .checkout-inline-error-message {
margin: 6px 0 0;
color: #ff8a96;
font-size: 12px;
}
.hwr2 .hwr-woo input[type="checkbox"],
.hwr2 .hwr-woo input[type="radio"] {
width: 20px;
height: 20px;
min-height: 0;
margin: 0;
accent-color: var(--hwr-red);
flex-shrink: 0;
vertical-align: middle;
}
.hwr2 .hwr-woo .woocommerce-form__label-for-checkbox,
.hwr2 .hwr-woo label.checkbox,
.hwr2 .hwr-woo .form-row label.checkbox,
.hwr2 .hwr-woo .form-row label.woocommerce-form__label-for-checkbox {
display: inline-flex;
gap: 10px;
align-items: center;
min-height: 44px;
margin: 0;
color: #e3e3e3;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
/*
* A checkbox label is the box plus one sentence that wraps normally. As inline-flex, every text
* node and inline element of a mixed label became its own column (WooCommerce Subscriptions'
* "Update the … used for all future renewals … (optional)", the newsletter opt-ins).
*/
.hwr2 .hwr-woo .woocommerce-form__label-for-checkbox:has(> input[type="checkbox"]),
.hwr2 .hwr-woo label.checkbox:has(> input[type="checkbox"]),
.hwr2 .hwr-woo .form-row label.checkbox:has(> input[type="checkbox"]),
.hwr2 .hwr-woo .form-row label.woocommerce-form__label-for-checkbox:has(> input[type="checkbox"]) {
position: relative;
display: block;
box-sizing: border-box;
padding: 12px 0 12px 30px;
line-height: 20px;
}
.hwr2 .hwr-woo .woocommerce-form__label-for-checkbox:has(> input[type="checkbox"]) > input[type="checkbox"],
.hwr2 .hwr-woo label.checkbox:has(> input[type="checkbox"]) > input[type="checkbox"] {
position: absolute;
top: 12px;
left: 0;
margin: 0;
}
/* Password show/hide (WooCommerce adds .show-password-input). */
.hwr2 .hwr-woo .password-input {
position: relative;
display: block;
}
.hwr2 .hwr-woo .password-input input {
padding-right: 52px;
}
.hwr2 .hwr-woo .show-password-input {
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 46px;
padding: 0;
border: 0;
background: transparent;
color: #cdcdcd;
cursor: pointer;
}
.hwr2 .hwr-woo .show-password-input::after {
content: '';
display: block;
width: 20px;
height: 20px;
margin: auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hwr2 .hwr-woo .show-password-input.display-password {
color: var(--hwr-red);
}
.hwr2 .hwr-woo .woocommerce-password-strength {
margin-top: 8px;
padding: 8px 12px;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
background: #2a2a2a;
color: #fff;
}
.hwr2 .hwr-woo .woocommerce-password-strength.short,
.hwr2 .hwr-woo .woocommerce-password-strength.bad {
background: #4a1219;
}
.hwr2 .hwr-woo .woocommerce-password-strength.good {
background: #3d3512;
}
.hwr2 .hwr-woo .woocommerce-password-strength.strong {
background: #173a24;
}
.hwr2 .hwr-woo .woocommerce-password-hint {
display: block;
margin-top: 6px;
color: #a5a5a5;
font-size: 12px;
}
/* selectWoo (country / state). The dropdown itself is appended to . */
.hwr2 .hwr-woo .select2-container {
width: 100% !important;
}
/* padding: 0 clears v1's `.woocommerce-checkout .select2-selection--single { padding: .6rem 0 }` (value sat 10px low). */
.hwr2 .hwr-woo .select2-container .select2-selection--single {
height: 46px;
padding: 0;
background: var(--hwr-field);
border: 1px solid var(--hwr-field-border);
border-radius: 3px;
}
.hwr2 .hwr-woo .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0 36px 0 13px !important;
color: #fff;
font-size: 14px;
line-height: 44px !important;
}
.hwr2 .hwr-woo .select2-container .select2-selection--single .select2-selection__arrow {
top: 0;
right: 6px;
height: 44px;
}
.hwr2 .hwr-woo .select2-container--focus .select2-selection--single,
.hwr2 .hwr-woo .select2-container--open .select2-selection--single {
border-color: var(--hwr-red);
}
body.hitek-v2 .select2-dropdown {
background: #1a1a1a;
border-color: #525252;
border-radius: 0 0 3px 3px;
}
body.hitek-v2 .select2-results__option {
min-height: 44px;
padding: 10px 13px;
font-size: 14px;
}
body.hitek-v2 .select2-search--dropdown .select2-search__field {
min-height: 44px;
font-size: 16px;
}
/* Fieldsets (account details: password change, dealer logo). */
.hwr2 .hwr-woo fieldset {
margin: 28px 0 22px;
padding: 22px 22px 6px;
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
background: var(--hwr-panel);
}
.hwr2 .hwr-woo fieldset legend {
padding: 0 8px;
margin: 0 0 0 -8px;
color: #fff;
font-size: 12px;
}
.hwr2 .hwr-woo input[type="file"] {
display: block;
width: 100%;
min-height: 46px;
padding: 10px;
background: var(--hwr-field);
border: 1px dashed var(--hwr-field-border);
border-radius: 3px;
color: #cdcdcd;
font-size: 14px;
}
/* Dealer logo field (inc/dealer-profile.php): a 64px circle beside a file column that may shrink. */
.hwr2 .hwr-woo fieldset .h-16.w-16.rounded-full {
flex: 0 0 64px;
}
.hwr2 .hwr-woo fieldset div:has(> input[type="file"]) {
flex: 1 1 auto;
min-width: 0;
}
.hwr2 .hwr-woo fieldset label:has(> input[name="remove_dealer_logo"]) {
min-height: 44px;
cursor: pointer;
}
.hwr2 .hwr-woo em,
.hwr2 .hwr-woo .description {
color: #a5a5a5;
font-size: 12px;
font-style: normal;
}
/* ---------------------------------------------------------------------------
* Panels and tables (the .spec-table look).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hwr-woo-panel {
padding: 27px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo h2,
.hwr2 .hwr-woo h3 {
color: #fff;
}
.hwr2 .hwr-woo .woocommerce > h2,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > h2,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > h3,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > section > h2,
.hwr2 .hwr-woo .woocommerce-order h2,
.hwr2 .hwr-woo .woocommerce-column__title,
.hwr2 .hwr-woo .woocommerce-order-details__title,
.hwr2 .hwr-woo .woocommerce-customer-details h2,
.hwr2 .hwr-woo .cart_totals > h2,
.hwr2 .hwr-woo #order_review_heading,
.hwr2 .hwr-woo .woocommerce-billing-fields > h3,
.hwr2 .hwr-woo .woocommerce-shipping-fields > h3,
.hwr2 .hwr-woo .woocommerce-additional-fields > h3 {
position: relative;
margin: 0 0 18px;
padding: 0 0 12px;
border: 0;
color: #fff;
font: 700 20px/1.4 HitekInter, Inter, system-ui, sans-serif;
letter-spacing: 0;
text-transform: uppercase;
}
.hwr2 .hwr-woo .woocommerce > h2::after,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > h2::after,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > h3::after,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > section > h2::after,
.hwr2 .hwr-woo .woocommerce-order h2::after,
.hwr2 .hwr-woo .woocommerce-column__title::after,
.hwr2 .hwr-woo .woocommerce-order-details__title::after,
.hwr2 .hwr-woo .cart_totals > h2::after,
.hwr2 .hwr-woo #order_review_heading::after,
.hwr2 .hwr-woo .woocommerce-billing-fields > h3::after,
.hwr2 .hwr-woo .woocommerce-shipping-fields > h3::after,
.hwr2 .hwr-woo .woocommerce-additional-fields > h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 2px;
background: var(--hwr-red);
}
/* Dashboard tiles at 375: the export's 2 columns keep fitting with slightly less side padding. */
@media (max-width: 400px) {
.hwr2 .hwr-woo .portal-dashboard-categories > a {
padding-inline: 12px;
}
}
.hwr2 .hwr-woo table.shop_table,
.hwr2 .hwr-woo table.woocommerce-orders-table,
.hwr2 .hwr-woo table.woocommerce-table,
.hwr2 .hwr-woo table.my_account_orders,
.hwr2 .hwr-woo table.shop_table_responsive,
.hwr2 .hwr-woo .woocommerce-MyAccount-content table {
width: 100%;
margin: 0 0 26px;
border: 1px solid var(--hwr-line);
border-collapse: collapse;
border-spacing: 0;
background: #151515;
color: #e9e9e9;
font-size: 13px;
line-height: 1.55;
}
.hwr2 .hwr-woo table th,
.hwr2 .hwr-woo table td {
padding: 12px 17px;
border: 0;
border-bottom: 1px solid var(--hwr-line);
text-align: left;
vertical-align: top;
background: transparent;
}
.hwr2 .hwr-woo table thead th {
background: #202020;
color: #eee;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
}
.hwr2 .hwr-woo table tbody th,
.hwr2 .hwr-woo table tfoot th {
color: #b3b3b3;
font-weight: 400;
}
.hwr2 .hwr-woo table tbody tr:nth-child(even) {
background: #ffffff03;
}
.hwr2 .hwr-woo table tfoot tr:last-child th,
.hwr2 .hwr-woo table tfoot tr:last-child td {
border-bottom: 0;
color: #fff;
font-weight: 700;
}
.hwr2 .hwr-woo table a {
color: #fff;
text-decoration: underline;
text-decoration-color: #ffffff4d;
text-underline-offset: 3px;
}
.hwr2 .hwr-woo table a:hover {
color: var(--hwr-red);
}
.hwr2 .hwr-woo table .button {
min-height: 44px;
padding: 9px 14px;
margin: 0 6px 6px 0;
font-size: 10px;
text-decoration: none;
}
.hwr2 .hwr-woo .woocommerce-orders-table__cell-order-status,
.hwr2 .hwr-woo .subscription-status {
white-space: nowrap;
}
/* Tables that do not stack scroll inside their own box. */
.hwr2 .hwr-woo .hwr-table-scroll {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 26px;
}
.hwr2 .hwr-woo .hwr-table-scroll > table {
margin-bottom: 0;
}
/* WooCommerce marks the order number, date and status in running text. */
.hwr2 .hwr-woo mark {
background: none;
color: #fff;
font-weight: 700;
}
/* Item meta in order tables (variation, cut request). */
.hwr2 .hwr-woo .wc-item-meta {
margin: 6px 0 0;
padding: 0;
list-style: none;
color: #c4c4c4;
font-size: 12px;
line-height: 1.6;
}
.hwr2 .hwr-woo .wc-item-meta li {
display: flex;
flex-wrap: wrap;
gap: 0 6px;
margin: 0;
}
.hwr2 .hwr-woo .wc-item-meta .wc-item-meta-label {
color: #a5a5a5;
font-weight: 400;
}
.hwr2 .hwr-woo .wc-item-meta p {
display: inline;
margin: 0;
}
.hwr2 .hwr-woo .woocommerce-table--order-details td.product-total,
.hwr2 .hwr-woo .woocommerce-table--order-details th.product-total {
width: 34%;
text-align: right;
}
.hwr2 .hwr-woo .woocommerce-table--order-details tfoot td {
text-align: right;
}
/* Status chips. */
.hwr2 .hwr-woo .hwr-status,
.hwr2 .hwr-woo mark.order-status,
.hwr2 .hwr-woo .woocommerce-order-overview mark {
display: inline-block;
padding: 3px 9px;
border: 1px solid #555;
border-radius: 20px;
background: #ffffff0a;
color: #e9e9e9;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.hwr2 .hwr-woo .hwr-status--completed {
border-color: #3fae6a80;
color: #8fe0ad;
}
.hwr2 .hwr-woo .hwr-status--processing {
border-color: #3f86ae80;
color: #9fd1f0;
}
.hwr2 .hwr-woo .hwr-status--on-hold,
.hwr2 .hwr-woo .hwr-status--pending {
border-color: #c8a24a80;
color: #f1d48f;
}
/* Pagination (orders). */
.hwr2 .hwr-woo .woocommerce-pagination {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 6px 0 26px;
}
/* Addresses. */
.hwr2 .hwr-woo .woocommerce-Addresses,
.hwr2 .hwr-woo .col2-set.addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 20px;
}
.hwr2 .hwr-woo .woocommerce-Addresses::before,
.hwr2 .hwr-woo .woocommerce-Addresses::after,
.hwr2 .hwr-woo .col2-set::before,
.hwr2 .hwr-woo .col2-set::after {
content: none;
}
.hwr2 .hwr-woo .woocommerce-Address,
.hwr2 .hwr-woo .woocommerce-Addresses .col-1,
.hwr2 .hwr-woo .woocommerce-Addresses .col-2 {
float: none;
width: auto;
max-width: none;
padding: 24px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo .woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
margin: 0 0 14px;
}
.hwr2 .hwr-woo .woocommerce-Address-title h2,
.hwr2 .hwr-woo .woocommerce-Address-title h3 {
margin: 0;
padding: 0;
font-size: 16px;
}
.hwr2 .hwr-woo .woocommerce-Address-title h2::after,
.hwr2 .hwr-woo .woocommerce-Address-title h3::after {
content: none;
}
.hwr2 .hwr-woo .woocommerce-Address .edit {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 14px;
border: 1px solid #666;
border-radius: 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
}
.hwr2 .hwr-woo address {
color: #d4d4d4;
font-size: 14px;
font-style: normal;
line-height: 1.8;
}
.hwr2 .hwr-woo .woocommerce-address-fields__field-wrapper,
.hwr2 .hwr-woo .woocommerce-billing-fields__field-wrapper,
.hwr2 .hwr-woo .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
.hwr2 .hwr-woo .woocommerce-address-fields__field-wrapper .form-row-wide,
.hwr2 .hwr-woo .woocommerce-billing-fields__field-wrapper .form-row-wide,
.hwr2 .hwr-woo .woocommerce-shipping-fields__field-wrapper .form-row-wide,
.hwr2 .hwr-woo .woocommerce-address-fields__field-wrapper .address-field:not(.form-row-first):not(.form-row-last),
.hwr2 .hwr-woo .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last),
.hwr2 .hwr-woo .woocommerce-shipping-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) {
grid-column: 1 / -1;
}
.hwr2 .hwr-woo .woocommerce-EditAccountForm,
.hwr2 .hwr-woo .woocommerce-address-fields,
.hwr2 .hwr-woo form.woocommerce-ResetPassword,
.hwr2 .hwr-woo #add_payment_method {
padding: 27px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
/*
* First and last name side by side, 18px apart like the address forms' grid (R3-55: as inline blocks
* of 50% - 10px plus a 16px margin and the whitespace between them they were wider than the row, so
* the last name wrapped under the first). WooCommerce's template prints div.clear after them.
*/
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-first,
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-last {
width: calc(50% - 9px);
}
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-first {
float: left;
}
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-last {
float: right;
}
.hwr2 .hwr-woo .clear {
clear: both;
}
/* Downloads / empty states. */
.hwr2 .hwr-woo .woocommerce-info .wc-forward,
.hwr2 .hwr-woo .woocommerce-message .wc-forward {
min-height: 44px;
padding: 9px 14px;
}
/* ---------------------------------------------------------------------------
* Dashboard: recent orders, featured, account links, resource count.
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hwr-dash-section {
margin: 0 0 45px;
}
.hwr2 .hwr-woo .hwr-dash-section__tools {
display: flex;
align-items: center;
gap: 10px;
}
.hwr2 .hwr-woo .hwr-dash-section__tools > a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 6px;
font-size: 11px;
color: #bebebe;
white-space: nowrap;
}
.hwr2 .hwr-woo .hwr-dash-section__tools > a:hover {
color: #fff;
}
.hwr2 .hwr-woo .hwr-carousel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #4a4a4a;
border-radius: 3px;
background: #121212;
color: #fff;
cursor: pointer;
}
.hwr2 .hwr-woo .hwr-carousel-btn:hover {
border-color: #fff;
}
.hwr2 .hwr-woo .hwr-carousel-btn:disabled {
opacity: .35;
cursor: default;
}
.hwr2 .hwr-woo .hwr-carousel-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.hwr2 .hwr-woo .hwr-carousel-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, calc((100% - 54px) / 4));
gap: 18px;
margin: 0;
padding: 2px 0 8px;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.hwr2 .hwr-woo .hwr-order-card {
scroll-snap-align: start;
margin: 0;
}
.hwr2 .hwr-woo .hwr-order-card > a {
display: grid;
grid-template-columns: 72px 1fr;
gap: 16px;
align-items: center;
height: 100%;
padding: 18px;
background: linear-gradient(130deg, #121212, #101010 70%);
border: 1px solid #33272e;
border-radius: 5px;
transition: border-color .18s;
}
.hwr2 .hwr-woo .hwr-order-card > a:hover {
border-color: #ed001e80;
}
.hwr2 .hwr-woo .hwr-order-card__thumb {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
overflow: hidden;
border-radius: 3px;
background: #1c1c1c;
color: #ed001e;
}
.hwr2 .hwr-woo .hwr-order-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hwr2 .hwr-woo .hwr-order-card__thumb svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.hwr2 .hwr-woo .hwr-order-card__body {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
min-width: 0;
}
.hwr2 .hwr-woo .hwr-order-card__number {
color: #fff;
font-size: 13px;
font-weight: 700;
}
.hwr2 .hwr-woo .hwr-order-card__total {
flex-basis: 100%;
color: #fff;
font-size: 18px;
}
.hwr2 .hwr-woo .hwr-order-card__date {
flex-basis: 100%;
color: #9f9f9f;
font-size: 11px;
}
.hwr2 .hwr-woo .hwr-featured-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.hwr2 .hwr-woo .hwr-featured-card {
margin: 0;
}
.hwr2 .hwr-woo .hwr-featured-card > a {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: #121212;
border: 1px solid #2c2c2c;
border-radius: 5px;
transition: border-color .18s;
}
.hwr2 .hwr-woo .hwr-featured-card > a:hover {
border-color: #ed001e80;
}
.hwr2 .hwr-woo .hwr-featured-card__image {
display: block;
aspect-ratio: 1;
background: #1a1a1a;
}
.hwr2 .hwr-woo .hwr-featured-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hwr2 .hwr-woo .hwr-featured-card__name {
display: block;
padding: 12px 14px 4px;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.hwr2 .hwr-woo .hwr-featured-card__price {
display: block;
margin-top: auto;
padding: 4px 14px 14px;
color: #cdcdcd;
font-size: 12px;
}
.hwr2 .hwr-woo .hwr-featured-card__price del {
color: #8a8a8a;
}
.hwr2 .hwr-woo .hwr-featured-card__price ins {
color: #fff;
text-decoration: none;
}
.hwr2 .hwr-woo .portal-account-grid > a {
display: flex;
align-items: center;
min-height: 54px;
transition: border-color .18s, background .18s;
}
.hwr2 .hwr-woo .portal-account-grid > a:hover {
border-color: #ed001e80;
background: #ffffff05;
}
.hwr2 .hwr-woo .portal-account-grid .hwr-account-link--customer-logout {
color: #c4c4c4;
}
.hwr2 .hwr-woo .portal-resource-strip > a {
min-height: 64px;
}
.hwr2 .hwr-woo .portal-resource-strip .hwr-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin-left: 8px;
padding: 0 6px;
border-radius: 11px;
background: #ed001e;
color: #fff;
font-size: 11px;
font-weight: 700;
}
.hwr2 .hwr-woo .portal-resource-strip .hwr-count:empty,
.hwr2 .hwr-woo .portal-resource-strip .hwr-count[data-empty] {
display: none;
}
/* ---------------------------------------------------------------------------
* Sign-in card (signed-out My Account).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo.hwr-woo--login > .woocommerce {
max-width: 780px;
margin: 0 auto;
}
.hwr2 .hwr-woo.hwr-woo--login .woocommerce-notices-wrapper,
.hwr2 .hwr-woo.hwr-woo--login .woocommerce > .woocommerce-error,
.hwr2 .hwr-woo.hwr-woo--login .woocommerce > .woocommerce-message,
.hwr2 .hwr-woo.hwr-woo--login .woocommerce > .woocommerce-info {
margin-top: 30px;
}
.hwr2 .hwr-woo .hwr-login {
max-width: 780px;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__form {
max-width: 440px;
margin: 30px auto 0;
text-align: left;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__options {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
align-items: center;
justify-content: space-between;
margin: 6px 0 4px;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__options label {
margin: 0;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__options .text-link {
gap: 8px;
color: #c4c4c4;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__form .button-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: stretch;
margin-top: 22px;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__form .button-row > * {
flex: 1 1 180px;
}
.hwr2 .hwr-woo .hwr-login .public-gate-information .button-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/*
* WooCommerce's own global/form-login.php (signed-out order-received and order-pay pages): the
* designed sign-in's layout, i.e. stacked fields, "Remember me" above a full-width Login button,
* then the lost-password link (they ran into each other on one line).
*/
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) {
max-width: 440px;
margin: 24px 0 0;
padding: 0;
border: 0;
text-align: left;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .form-row-first,
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .form-row-last {
float: none;
width: auto;
margin-right: 0;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .form-row:has(> .woocommerce-form-login__submit) {
display: flex;
flex-direction: column;
gap: 14px;
align-items: stretch;
margin: 4px 0 0;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .woocommerce-form-login__rememberme {
align-self: flex-start;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .woocommerce-form-login__submit {
width: 100%;
min-height: 54px;
margin: 0;
float: none;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .lost_password {
margin: 10px 0 0;
}
.hwr2 .hwr-woo form.woocommerce-form-login:not(.hwr-login__form) .lost_password a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #c4c4c4;
font-size: 13px;
}
/* Turnstile / captcha widgets sit inside the form. */
.hwr2 .hwr-woo .hwr-login .woo-login-captcha,
.hwr2 .hwr-woo .hwr-login [class*="turnstile"] {
margin: 4px 0 12px;
max-width: 100%;
overflow: hidden;
}
/* ---------------------------------------------------------------------------
* Lost / reset password (the .service-gateway panel holds the form).
* ------------------------------------------------------------------------ */
/*
* The export's .studio-site .service-gateway (plum gradient, 40px padding) is scoped to a
* .studio-site inside the content wrapper, which v2 puts on the wrapper itself: restated here.
*/
.hwr2 .hwr-woo .hwr-woo-gateway {
align-items: flex-start;
margin: 30px 0;
padding: 40px;
background: linear-gradient(130deg, #261622, #191919);
border: 1px solid #515151;
}
.hwr2 .hwr-woo .hwr-woo-gateway > svg {
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.hwr2 .hwr-woo .hwr-woo-gateway__body {
flex: 1;
min-width: 0;
max-width: 560px;
}
.hwr2 .hwr-woo .hwr-woo-gateway form.woocommerce-ResetPassword {
padding: 0;
background: none;
border: 0;
}
.hwr2 .hwr-woo .hwr-woo-gateway form.woocommerce-ResetPassword > p:first-child {
margin: 0 0 22px;
color: #d4d4d4;
font-size: 14px;
line-height: 1.75;
}
.hwr2 .hwr-woo .hwr-woo-gateway .woocommerce-message + p,
.hwr2 .hwr-woo .hwr-woo-gateway .woocommerce-info + p {
color: #d4d4d4;
font-size: 14px;
line-height: 1.75;
}
/* Signed in without a shop role (hitek_v2_no_dealer_notice()): the dashboard's first panel. */
.hwr2 .hwr-woo .hwr-no-dealer {
margin: 0 0 45px;
}
.hwr2 .hwr-woo .hwr-no-dealer > svg {
width: 30px;
height: 30px;
}
.hwr2 .hwr-woo .hwr-no-dealer__body {
flex: 1;
min-width: 0;
}
.hwr2 .hwr-woo .hwr-no-dealer__body h2 {
margin: 0 0 10px;
font-size: 24px;
text-transform: none;
}
.hwr2 .hwr-woo .hwr-no-dealer__body p {
margin: 0;
}
.hwr2 .hwr-woo .hwr-no-dealer__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.hwr2 .hwr-woo .hwr-no-dealer__actions .btn {
flex: 0 1 auto;
min-height: 48px;
}
@media (max-width: 540px) {
.hwr2 .hwr-woo .hwr-no-dealer__actions .btn {
flex: 1 1 100%;
}
}
/* ---------------------------------------------------------------------------
* Freebies (the .portal-account-notice panel holds the preferences form).
* The form keeps its v1 Tailwind classes (main.js toggles them on the chips).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hwr-woo-freebies {
max-width: 1000px;
}
.hwr2 .hwr-woo .hwr-woo-freebies > svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.hwr2 .hwr-woo .hwr-woo-freebies__body {
flex: 1;
min-width: 0;
}
.hwr2 .hwr-woo .hwr-woo-freebies__body h2 {
margin: 0 0 8px;
font-size: 26px;
text-transform: none;
}
.hwr2 .hwr-woo .hwr-woo-freebies__body .bg-hitek-dark,
.hwr2 .hwr-woo .hitek-cart-freebies .bg-hitek-dark {
background: #1b1b1b;
border: 1px solid #3a3a3a;
border-radius: 3px;
}
.hwr2 .hwr-woo .hitek-group-header {
min-height: 56px;
color: #fff;
}
.hwr2 .hwr-woo .hitek-subcat-chip,
.hwr2 .hwr-woo .hitek-freebie-checkbox {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 44px;
margin: 0;
padding: 8px 12px;
border-radius: 3px;
color: #d4d4d4;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.hwr2 .hwr-woo .hitek-freebie-checkbox svg {
width: 18px;
height: 18px;
}
/* Chip groups wrap instead of stacking one per line. */
.hwr2 .hwr-woo .hitek-cart-freebies .space-y-1\.5,
.hwr2 .hwr-woo .hitek-group-slugs > div,
.hwr2 .hwr-woo .hitek-group-slugs.space-y-2 {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hwr2 .hwr-woo .hitek-cart-freebies .space-y-1\.5 > *,
.hwr2 .hwr-woo .hitek-group-slugs > div > *,
.hwr2 .hwr-woo .hitek-group-slugs.space-y-2 > * {
margin: 0 !important;
}
.hwr2 .hwr-woo .hitek-subcat-chip.border-hitek-red,
.hwr2 .hwr-woo .hitek-freebie-checkbox.border-hitek-red {
border-color: #ed001e;
background: #ed001e14;
}
.hwr2 .hwr-woo .hitek-subcat-chip input,
.hwr2 .hwr-woo .hitek-freebie-checkbox input {
width: 18px;
height: 18px;
}
.hwr2 .hwr-woo #hitek-freebies-form select,
.hwr2 .hwr-woo .hitek-cart-freebies select {
display: inline-block;
width: auto;
min-width: 160px;
}
.hwr2 .hwr-woo #hitek-freebies-form button[type="submit"] {
margin-top: 22px;
}
/* ---------------------------------------------------------------------------
* Payment methods (v1 .hitek-pm card list, designer colours).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hitek-pm__list {
display: grid;
gap: 14px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
.hwr2 .hwr-woo .hitek-pm__item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 20px 22px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo .hitek-pm__item.is-primary {
border-color: #ed001e99;
background: var(--hwr-plum);
}
.hwr2 .hwr-woo .hitek-pm__name {
color: #fff;
font-size: 15px;
font-weight: 700;
}
.hwr2 .hwr-woo .hitek-pm__badge {
display: inline-block;
margin-left: 10px;
padding: 3px 9px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
vertical-align: middle;
}
.hwr2 .hwr-woo .hitek-pm__badge--primary {
background: #ed001e;
color: #fff;
}
.hwr2 .hwr-woo .hitek-pm__badge--expired {
border: 1px solid #c8a24a;
color: #f1d48f;
}
.hwr2 .hwr-woo .hitek-pm__expires {
margin-top: 4px;
color: #a5a5a5;
font-size: 12px;
}
.hwr2 .hwr-woo .hitek-pm__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.hwr2 .hwr-woo .hitek-pm__action {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 14px;
border: 1px solid #666;
border-radius: 2px;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
}
.hwr2 .hwr-woo .hitek-pm__action:hover {
border-color: #fff;
}
.hwr2 .hwr-woo .hitek-pm__action--delete:hover {
border-color: #ed001e;
color: #ff8a96;
}
.hwr2 .hwr-woo #add_payment_method #payment {
background: none;
}
.hwr2 .hwr-woo #add_payment_method .payment_methods {
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.hwr2 .hwr-woo .hitek-pm__primary-field label {
display: inline-flex;
gap: 10px;
align-items: center;
min-height: 44px;
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 400;
color: #e3e3e3;
}
.hwr2 .hwr-woo dl.variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 12px;
margin: 0 0 10px;
font-size: 12px;
line-height: 1.6;
}
.hwr2 .hwr-woo dl.variation dt {
margin: 0;
color: #a5a5a5;
font-weight: 400;
}
.hwr2 .hwr-woo dl.variation dd {
margin: 0;
color: #e9e9e9;
overflow-wrap: anywhere;
}
.hwr2 .hwr-woo dl.variation dd p {
margin: 0;
}
/* Quantity: number input with the stepper buttons account.js adds. */
.hwr2 .hwr-woo .quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid #535353;
border-radius: 3px;
background: #1e1e1e;
}
.hwr2 .hwr-woo .quantity .qty,
.hwr2 .hwr-woo .quantity input.qty {
width: 64px;
min-height: 44px;
padding: 6px 4px;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
font-size: 15px;
text-align: center;
box-shadow: none;
-moz-appearance: textfield;
}
.hwr2 .hwr-woo .quantity .qty::-webkit-outer-spin-button,
.hwr2 .hwr-woo .quantity .qty::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.hwr2 .hwr-woo .quantity .qty:focus {
box-shadow: inset 0 0 0 1px var(--hwr-red);
}
.hwr2 .hwr-woo .hwr-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
font: 400 20px/1 system-ui, sans-serif;
cursor: pointer;
}
.hwr2 .hwr-woo .hwr-qty-btn:hover {
background: #ffffff10;
}
.hwr2 .hwr-woo .hwr-qty-btn:disabled {
opacity: .35;
cursor: default;
}
.hwr2 .hwr-woo .cart-collaterals {
width: 100%;
}
.hwr2 .hwr-woo .cart_totals {
float: none;
width: 100%;
padding: 26px;
background: var(--hwr-plum);
border: 1px solid #515151;
border-radius: 2px;
}
.hwr2 .hwr-woo .cart_totals table.shop_table {
margin: 0 0 20px;
border: 0;
background: none;
}
.hwr2 .hwr-woo .cart_totals table th,
.hwr2 .hwr-woo .cart_totals table td {
padding: 12px 0;
border-bottom: 1px solid #ffffff1a;
background: none;
}
.hwr2 .hwr-woo .cart_totals table td {
text-align: right;
}
.hwr2 .hwr-woo .cart_totals table tr:nth-child(even) {
background: none;
}
.hwr2 .hwr-woo .cart_totals .order-total th,
.hwr2 .hwr-woo .cart_totals .order-total td {
padding-top: 16px;
border-bottom: 0;
color: #fff;
font-size: 18px;
font-weight: 700;
}
/* WooCommerce Subscriptions' "Recurring totals" heading row: a section label (as on the checkout). */
.hwr2 .hwr-woo .cart_totals tr.recurring-totals th {
padding: 18px 0 10px;
color: #a5a5a5;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-align: left;
text-transform: uppercase;
}
/* Coupon "[Remove]" and the removed-item "Undo?" link: 44px tall hit areas without moving the text. */
.hwr2 .hwr-woo a.woocommerce-remove-coupon,
.hitek-v2 .woocommerce-message a.restore-item {
display: inline-block;
padding: 13px 4px;
margin: -13px 0;
}
.hwr2 .hwr-woo .cart_totals .order-total small {
display: block;
color: #a5a5a5;
font-size: 11px;
font-weight: 400;
}
.hwr2 .hwr-woo .hitek-tax-checkout-note {
color: #a5a5a5;
font-size: 12px;
}
.hwr2 .hwr-woo .wc-proceed-to-checkout {
padding: 0;
}
.hwr2 .hwr-woo .wc-proceed-to-checkout .checkout-button {
display: flex;
width: 100%;
min-height: 52px;
font-size: 12px;
}
/* Shipping rates and calculator (cart totals and checkout review). */
.hwr2 .hwr-woo .woocommerce-shipping-totals td {
text-align: left;
}
.hwr2 .hwr-woo .cart_totals .woocommerce-shipping-totals th,
.hwr2 .hwr-woo .cart_totals .woocommerce-shipping-totals td {
display: block;
width: 100%;
text-align: left;
}
.hwr2 .hwr-woo .cart_totals .woocommerce-shipping-totals th {
padding-bottom: 4px;
border-bottom: 0;
}
.hwr2 .hwr-woo ul#shipping_method,
.hwr2 .hwr-woo .woocommerce-shipping-methods {
display: grid;
gap: 6px;
margin: 0 0 8px;
padding: 0;
list-style: none;
text-align: left;
}
/* Rate rows are 44px tap targets: the label fills the row beside its radio. */
.hwr2 .hwr-woo .woocommerce-shipping-methods li {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
min-height: 44px;
margin: 0;
padding: 0;
text-indent: 0;
}
.hwr2 .hwr-woo .woocommerce-shipping-methods li label {
display: block;
flex: 1;
box-sizing: border-box;
min-height: 44px;
margin: 0;
padding: 12px 0;
color: #e9e9e9;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.hwr2 .hwr-woo .hwr-ship-note {
display: block;
color: #a5a5a5;
font-size: 11px;
}
.hwr2 .hwr-woo .woocommerce-shipping-destination {
margin: 4px 0 6px;
color: #a5a5a5;
font-size: 12px;
}
.hwr2 .hwr-woo .shipping-calculator-button {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
font-size: 12px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.hwr2 .hwr-woo .shipping-calculator-form {
margin: 8px 0 4px;
padding: 16px 0 0;
}
.hwr2 .hwr-woo .shipping-calculator-form .form-row {
margin-bottom: 12px;
}
.hwr2 .hwr-woo .shipping-calculator-form .button {
width: 100%;
}
/* Below the cart: freebies, saved order list strip, upsells. */
.hwr2 .hwr-woo .hitek-cart-freebies {
margin: 0 0 22px;
padding: 22px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo .hitek-cart-freebies #hitek-cart-prefs-toggle {
min-height: 44px;
padding: 0 0 12px;
border: 0;
background: none;
color: #fff;
cursor: pointer;
}
.hwr2 .hwr-woo .hitek-cart-freebies #hitek-cart-prefs-toggle h3 {
margin: 0;
font-size: 18px;
text-transform: uppercase;
}
.hwr2 .hwr-woo .hitek-cart-freebies label:not(.hitek-subcat-chip):not(.hitek-freebie-checkbox) {
display: inline;
margin: 0;
}
.hwr2 .hwr-woo .hitek-cart-freebies button[type="submit"] {
margin-top: 16px;
}
/*
* R3-61: v1's 12px rhythm (Tailwind space-y-3 / mt-3). The chip rule's margin: 0 also hit the Snack
* Pack label (a direct child of .space-y-3, the groups are divs), and the export's
* `.hwr2 p { margin-top: 0 }` beat the note's mt-3 (its 18px bottom margin doubled the panel padding).
*/
.hwr2 .hwr-woo .hitek-cart-freebies .space-y-3 > :not([hidden]) ~ :not([hidden]) {
margin-top: 12px;
}
.hwr2 .hwr-woo .hitek-cart-freebies #hitek-cart-prefs-body > p {
margin: 12px 0 0;
}
/* R3-60: the "My Account" link reads as a link (white and underlined, like the notice links), not as the grey note. */
.hwr2 .hwr-woo .hitek-cart-freebies #hitek-cart-prefs-body > p a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.hwr2 .hwr-woo .hwr-cart-list-strip {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
align-items: center;
justify-content: space-between;
margin: 30px 0 0;
padding: 22px 0;
border-top: 1px solid #343434;
border-bottom: 1px solid #343434;
}
.hwr2 .hwr-woo .hwr-cart-list-strip > div {
display: flex;
gap: 14px;
align-items: center;
}
.hwr2 .hwr-woo .hwr-cart-list-strip svg {
width: 22px;
height: 22px;
flex-shrink: 0;
fill: none;
stroke: #ed001e;
stroke-width: 1.5;
}
.hwr2 .hwr-woo .hwr-cart-list-strip p {
margin: 0;
color: #d4d4d4;
font-size: 13px;
}
.hwr2 .hwr-woo .hwr-cart-list-strip strong {
color: #fff;
}
.hwr2 .hwr-woo .added_to_cart {
display: inline-flex;
min-height: 44px;
align-items: center;
color: #fff;
font-size: 12px;
text-decoration: underline;
}
/* Empty cart. */
.hwr2 .hwr-woo .wc-empty-cart-message .cart-empty {
margin-bottom: 18px;
}
.hwr2 .hwr-woo .order-empty .button-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
}
/* Sizes come from the export (h2 38px, p 16px); only long words are kept inside the box. */
.hwr2 .hwr-woo .order-empty h2,
.hwr2 .hwr-woo .order-empty p {
overflow-wrap: break-word;
}
/* WooCommerce blockUI over the cart / review while it reloads. */
.hwr2 .hwr-woo .blockUI.blockOverlay {
background: #0a0a0a99 !important;
}
/* ---------------------------------------------------------------------------
* Checkout.
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hitek-policy {
margin: 0 0 26px;
background: #151515;
border: 1px solid #373737;
border-radius: 2px;
}
.hwr2 .hwr-woo .hitek-policy__summary {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 14px 20px;
color: #fff;
cursor: pointer;
list-style: none;
}
.hwr2 .hwr-woo .hitek-policy__summary::-webkit-details-marker {
display: none;
}
.hwr2 .hwr-woo .hitek-policy__title {
flex: 1;
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.hwr2 .hwr-woo .hitek-policy__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 0 20px 20px;
}
.hwr2 .hwr-woo .hitek-policy__card {
padding: 16px;
background: #1b1b1b;
border: 1px solid #333;
border-radius: 3px;
color: #c4c4c4;
font-size: 12px;
line-height: 1.65;
}
.hwr2 .hwr-woo .hitek-policy__card-title {
margin: 0;
color: #fff;
font-size: 13px;
text-transform: none;
}
.hwr2 .hwr-woo .woocommerce-form-coupon-toggle .woocommerce-info {
margin-bottom: 14px;
}
.hwr2 .hwr-woo .woocommerce-form-coupon-toggle .showcoupon {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
font-weight: 700;
}
.hwr2 .hwr-woo form.checkout_coupon {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
margin: 0 0 22px;
padding: 18px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo form.checkout_coupon > p:not(.form-row) {
flex-basis: 100%;
margin: 0;
color: #c4c4c4;
font-size: 13px;
}
.hwr2 .hwr-woo form.checkout_coupon .form-row {
flex: 1 1 200px;
margin: 0;
}
.hwr2 .hwr-woo form.checkout_coupon .form-row-last {
flex: 0 0 auto;
}
.hwr2 .hwr-woo .woocommerce-additional-fields {
margin-top: 18px;
}
/* The review table renders as rows of flex boxes: table column sizing squeezed the product names
next to the shipping rows and the tier picker (WooCommerce replaces this table on every update). */
.hwr2 .hwr-woo table.woocommerce-checkout-review-order-table {
display: block;
width: 100%;
margin: 0 0 20px;
border: 0;
background: none;
font-size: 13px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table thead,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tbody,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tfoot {
display: block;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
align-items: flex-start;
justify-content: space-between;
padding: 11px 0;
border-bottom: 1px solid #ffffff1a;
background: none;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table th,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td {
display: block;
width: auto;
padding: 0;
border: 0;
background: none;
white-space: normal;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table thead tr {
padding-top: 0;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table thead th {
color: #a5a5a5;
}
/*
* Product cell: the thumbnail sits in a 48px column (absolute, left) and the name, the "× N" quantity
* and the item data flow in the column beside it (core prints ` `
* after hitek_checkout_thumbnail()'s block, so a flex or block quantity left an empty line and sat
* under the thumbnail). The name keeps at least 140px: a long subscription price wraps in its own
* column instead of squeezing the name.
*/
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name {
position: relative;
flex: 1 1 140px;
min-width: 0;
min-height: 48px;
padding: 0 0 0 60px;
color: #e9e9e9;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-total,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tfoot td {
text-align: right;
white-space: nowrap;
color: #fff;
font-weight: 700;
}
/* "$99.00 / month and a $389.00 sign-up fee": wraps between the amounts, never inside one. */
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-total {
max-width: 45%;
white-space: normal;
overflow-wrap: break-word;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-amount {
white-space: nowrap;
}
/* A total that wraps under its label (narrow columns) stays right-aligned. */
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tfoot td {
margin-left: auto;
}
/* WooCommerce Subscriptions' recurring totals: a section label, then label / amount rows like the totals above. */
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.recurring-totals {
padding: 18px 0 8px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.recurring-totals th {
flex: 1 1 100%;
color: #a5a5a5;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-align: left;
text-transform: uppercase;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.recurring-total td {
white-space: normal;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.recurring-total .woocommerce-Price-amount {
white-space: nowrap;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.order-total.recurring-total {
padding-top: 11px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .order-total.recurring-total th,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .order-total.recurring-total td {
font-size: 15px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .recurring-total .first-payment-date {
margin-top: 4px;
color: #a5a5a5;
font-size: 12px;
font-weight: 400;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .recurring-total .first-payment-date small {
font-size: inherit;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tfoot th {
width: auto;
color: #b3b3b3;
font-size: 13px;
font-weight: 400;
border: 0;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tfoot td {
border: 0;
}
/* Shipping: the rates and the tier picker take the whole row. */
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
flex: 1 1 100%;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
flex: 1 1 100%;
text-align: left;
white-space: normal;
font-weight: 400;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table tr.order-total {
padding-top: 16px;
border-bottom: 0;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .order-total th,
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .order-total td {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name .variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 10px;
margin: 8px 0 0;
font-size: 11px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name .variation dt {
float: none;
margin: 0;
color: #a5a5a5;
font-size: 11px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name .variation dd {
margin: 0;
color: #d4d4d4;
font-size: 11px;
overflow-wrap: break-word;
}
/* "× N" follows the name, beside the thumbnail (see td.product-name above). */
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .hitek-checkout-product + .product-quantity {
display: inline;
margin: 0;
font-size: 12px;
white-space: nowrap;
}
.hwr2 .hwr-woo .hitek-checkout-product {
display: block;
}
.hwr2 .hwr-woo .hitek-checkout-product-img {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
overflow: hidden;
border-radius: 3px;
background: #121212;
}
.hwr2 .hwr-woo .hitek-checkout-product-img img {
width: 48px;
height: 48px;
object-fit: cover;
}
.hwr2 .hwr-woo .hitek-checkout-product-info {
min-width: 0;
overflow-wrap: break-word;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .product-quantity {
color: #a5a5a5;
font-weight: 400;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li {
min-height: 44px;
padding: 0 12px;
font-size: 13px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
font-size: 13px;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table .woocommerce-shipping-methods input[type='radio'] {
width: 18px;
height: 18px;
}
/* Expedited tier picker (inside the review table). */
.hwr2 .hwr-woo #hitek-expedited-tier-wrap {
margin: 6px 0 10px !important;
padding: 12px;
background: #121212;
border: 1px solid #3a3a3a;
border-radius: 3px;
}
.hwr2 .hwr-woo .hitek-expedited-label {
display: block;
margin: 0 0 8px;
color: #cdcdcd;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
}
.hwr2 .hwr-woo select#hitek-expedited-tier {
min-height: 46px !important;
padding: 10px 36px 10px 12px !important;
border: 1px solid #525252 !important;
border-radius: 3px !important;
background-color: #1a1a1a !important;
font-size: 14px !important;
appearance: none !important;
}
.hwr2 .hwr-woo select#hitek-expedited-tier.no-selection {
border-color: #ed001e !important;
}
.hwr2 .hwr-woo #hitek-expedited-warning {
margin: 8px 0 0;
color: #ff8a96;
font-size: 12px;
}
.hwr2 .hwr-woo #hitek-expedited-info-btn {
display: inline-flex;
gap: 8px;
align-items: center;
min-height: 44px;
margin-top: 8px;
padding: 6px 12px;
border: 1px solid #555;
border-radius: 2px;
background: transparent;
color: #fff;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
/* Payment box. */
.hwr2 .hwr-woo #payment {
background: none;
border-radius: 0;
}
.hwr2 .hwr-woo #payment ul.payment_methods {
display: grid;
gap: 8px;
margin: 0 0 18px;
padding: 0;
border: 0;
list-style: none;
}
.hwr2 .hwr-woo #payment ul.payment_methods > li {
margin: 0;
padding: 12px 14px;
background: #151515;
border: 1px solid #3a3a3a;
border-radius: 3px;
}
.hwr2 .hwr-woo #payment ul.payment_methods > li > label {
display: inline;
margin: 0 0 0 8px;
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.hwr2 .hwr-woo #payment div.payment_box {
margin: 12px 0 0;
padding: 14px;
background: #1b1b1b;
border-radius: 3px;
color: #c4c4c4;
font-size: 13px;
}
.hwr2 .hwr-woo #payment div.payment_box::before {
content: none;
}
.hwr2 .hwr-woo #payment .place-order {
margin: 0;
padding: 0;
}
.hwr2 .hwr-woo .woocommerce-privacy-policy-text,
.hwr2 .hwr-woo .woocommerce-terms-and-conditions-wrapper {
color: #a5a5a5;
font-size: 12px;
line-height: 1.65;
}
.hwr2 .hwr-woo .woocommerce-terms-and-conditions-wrapper a {
color: #fff;
}
.hwr2 .hwr-woo #place_order {
display: flex;
width: 100%;
min-height: 54px;
margin-top: 14px;
font-size: 12px;
border-radius: 2px;
}
/* Thank-you / order details / view order. */
.hwr2 .hwr-woo ul.woocommerce-order-overview,
.hwr2 .hwr-woo ul.order_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.hwr2 .hwr-woo ul.woocommerce-order-overview li,
.hwr2 .hwr-woo ul.order_details li {
margin: 0;
padding: 16px 18px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
color: #a5a5a5;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
}
.hwr2 .hwr-woo ul.woocommerce-order-overview li strong,
.hwr2 .hwr-woo ul.order_details li strong {
display: block;
margin-top: 6px;
color: #fff;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
overflow-wrap: anywhere;
}
.hwr2 .hwr-woo .woocommerce-thankyou-order-received,
.hwr2 .hwr-woo .woocommerce-notice--success {
margin: 0 0 22px;
color: #fff;
font-size: 16px;
}
.hwr2 .hwr-woo .woocommerce-order-details,
.hwr2 .hwr-woo .woocommerce-customer-details,
.hwr2 .hwr-woo .woocommerce-order-downloads {
margin: 0 0 30px;
}
.hwr2 .hwr-woo .woocommerce-customer-details .woocommerce-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.hwr2 .hwr-woo .woocommerce-customer-details .woocommerce-column {
float: none;
width: auto;
padding: 22px;
background: var(--hwr-panel);
border: 1px solid var(--hwr-panel-border);
border-radius: 2px;
}
.hwr2 .hwr-woo .woocommerce-customer-details--phone,
.hwr2 .hwr-woo .woocommerce-customer-details--email {
margin: 6px 0 0;
}
.hwr2 .hwr-woo .order-again {
margin: 0 0 26px;
}
/* View order: freebies teaser, invoice and tracking blocks from plugins. */
.hwr2 .hwr-woo .woocommerce-order-details > .bg-hitek-dark,
.hwr2 .hwr-woo .woocommerce-MyAccount-content .bg-hitek-dark {
background: var(--hwr-plum) !important;
border: 1px solid #515151;
border-radius: 2px;
}
.hwr2 .hwr-woo .wcpdf-invoice-button,
.hwr2 .hwr-woo a.button.invoice,
.hwr2 .hwr-woo a.button.packing-slip {
margin: 0 8px 8px 0;
}
.hwr2 .hwr-woo .woocommerce-order-details + p,
.hwr2 .hwr-woo .woocommerce-MyAccount-content > p {
color: #d4d4d4;
font-size: 14px;
line-height: 1.75;
}
/* ---------------------------------------------------------------------------
* Saved order list (/order-list/, woocommerce-v2/global/order-list.php).
* ------------------------------------------------------------------------ */
.hwr2 .hwr-woo .hwr-order-list__items {
display: grid;
}
.hwr2 .hwr-woo .saved-order.hwr-ol-item {
grid-template-columns: 96px minmax(0, 1fr) auto;
gap: 22px;
align-items: start;
padding: 22px;
margin: 0 0 14px;
}
.hwr2 .hwr-woo .hwr-ol-item.is-unavailable {
border-style: dashed;
}
.hwr2 .hwr-woo .hwr-ol-item__media {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 3px;
background: #121212;
color: #ed001e;
}
.hwr2 .hwr-woo .hwr-ol-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hwr2 .hwr-woo .hwr-ol-item__media svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.hwr2 .hwr-woo .hwr-ol-item__body {
min-width: 0;
}
/* Size, line height and margin come from the export (.saved-order h2: 25px / 1.15 / 14px). */
.hwr2 .hwr-woo .saved-order.hwr-ol-item h2 {
overflow-wrap: anywhere;
}
.hwr2 .hwr-woo .saved-order p.hwr-ol-item__price {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: center;
margin: 0 0 6px;
white-space: normal;
color: #e9e9e9;
font-size: 13px;
}
.hwr2 .hwr-woo .hwr-stock {
display: inline-block;
padding: 2px 9px;
border: 1px solid #3fae6a80;
border-radius: 20px;
color: #8fe0ad;
font-size: 11px;
}
.hwr2 .hwr-woo .hwr-stock--out {
border-color: #ed001e99;
color: #ff8a96;
}
.hwr2 .hwr-woo .hwr-stock--backorder,
.hwr2 .hwr-woo .hwr-stock--short {
border-color: #c8a24a80;
color: #f1d48f;
}
.hwr2 .hwr-woo p.hwr-stock {
display: block;
border: 0;
padding: 0;
}
.hwr2 .hwr-woo .hwr-ol-item__actions {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: 'label label' 'qty qty' 'total total' 'add remove';
justify-items: end;
align-items: center;
gap: 10px;
min-width: 170px;
}
.hwr2 .hwr-woo .hwr-ol-item__qty-label {
grid-area: label;
}
.hwr2 .hwr-woo .hwr-ol-item__actions .quantity {
grid-area: qty;
}
.hwr2 .hwr-woo .hwr-ol-item__total {
grid-area: total;
}
.hwr2 .hwr-woo .hwr-ol-item__add {
grid-area: add;
}
.hwr2 .hwr-woo .hwr-ol-item__actions .order-remove {
grid-area: remove;
min-height: 44px;
}
.hwr2 .hwr-woo .hwr-ol-item__qty-label {
margin: 0;
color: #a5a5a5;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.hwr2 .hwr-woo .hwr-ol-item__total {
color: #fff;
font-size: 17px;
font-weight: 700;
white-space: nowrap;
}
.hwr2 .hwr-woo .btn.small,
.hwr2 .hwr-woo .hwr-ol-item__add {
min-height: 44px;
padding: 10px 16px;
font-size: 10px;
}
.hwr2 .hwr-woo .saved-order .order-remove {
min-width: 44px;
min-height: 44px;
border-radius: 2px;
cursor: pointer;
}
.hwr2 .hwr-woo .saved-order .order-remove:hover {
border-color: #ed001e;
color: #fff;
}
.hwr2 .hwr-woo .hwr-ol-actions {
margin: 10px 0 0;
}
.hwr2 .hwr-woo .hwr-ol-status {
min-height: 22px;
margin: 16px 0 0;
color: #d4d4d4;
font-size: 13px;
}
.hwr2 .hwr-woo .hwr-ol-cart {
margin: 10px 0 24px;
}
.hwr2 .hwr-woo.hwr-order-list .fine-print {
margin: 0;
}
.hwr2 .hwr-woo .hwr-ol-dialog textarea {
margin-top: 14px;
font-family: ui-monospace, Consolas, monospace;
font-size: 13px;
}
.hwr2 .hwr-woo .hwr-ol-dialog .close {
min-width: 44px;
min-height: 44px;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
* Expedited modals (printed in wp_footer, outside the .hwr2 wrapper).
* ------------------------------------------------------------------------ */
/*
* Above the HITEK Manager chat launcher (#hitek-chat-iframe, z-index 999998), which covered the chart.
* inset: the chat-lift script in inc/rest-api.php takes the first fixed, bottom-0 element added to
* for the widget and, on phones, gives it inline bottom: 76px / left: 12px; the modal is
* that element when it is moved to before the widget loads, which left the bottom 76px of the
* screen (and the launcher) uncovered.
*/
body.hitek-v2 #hitek-expedited-modal,
body.hitek-v2 #hitek-expedited-confirm-modal {
inset: 0 !important;
z-index: 999999;
box-sizing: border-box;
padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body.hitek-v2 #hitek-expedited-modal-backdrop,
body.hitek-v2 #hitek-expedited-confirm-backdrop {
background: #000b;
backdrop-filter: blur(5px);
}
body.hitek-v2 #hitek-expedited-modal-content,
body.hitek-v2 #hitek-expedited-confirm-content {
box-sizing: border-box;
width: min(560px, 100%);
max-height: 100%;
overflow-y: auto;
padding: 29px;
background: #141414;
border: 1px solid #676767;
border-radius: 5px;
color: #e9e9e9;
font-family: HitekInter, Inter, system-ui, sans-serif;
}
body.hitek-v2 #hitek-expedited-modal-close,
body.hitek-v2 #hitek-expedited-confirm-close {
min-width: 44px;
min-height: 44px;
color: #fff;
}
/* While one is open (account.js initDialogs), the page under it does not scroll; the gutter keeps it still. */
html.hwr-dialog-open {
overflow: hidden;
scrollbar-gutter: stable;
}
/*
* The chart scrolls inside its box on phones: the close button stays at the top.
* right: auto clears the theme's absolute `right: .75rem`, which would otherwise act
* as a sticky inset and paint the button 26px left of its float, over the title.
*/
body.hitek-v2 #hitek-expedited-modal-close {
position: sticky;
top: -14px;
right: auto;
float: right;
z-index: 2;
margin: -14px -14px 0 8px;
border-radius: 3px;
background: #141414;
}
body.hitek-v2 .hitek-confirm-checkout-btn {
min-height: 48px;
border-radius: 2px;
background: #ed001e;
text-transform: uppercase;
letter-spacing: .065em;
font-weight: 700;
}
body.hitek-v2 .hitek-goback-btn {
min-height: 48px;
border-radius: 2px;
}
/* ---------------------------------------------------------------------------
* Consumer chrome wrapper (signed-out sign-in and password pages).
* ------------------------------------------------------------------------ */
.hwr2.hwr-woo-page .hwr-woo.current-page,
.hwr2.hwr-woo-page .hwr-woo.dealer-page {
padding-bottom: 60px;
}
.hwr2.hwr-woo-page .hwr-woo.dealer-page {
width: min(1000px, calc(100% - 72px));
}
/* ---------------------------------------------------------------------------
* Responsive (the export's breakpoints: 1250, 1100, 1000, 900, 760, 700, 540).
* ------------------------------------------------------------------------ */
@media (max-width: 1250px) {
.hwr2 .hwr-woo .hwr-featured-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hwr2 .hwr-woo .hwr-carousel-track {
grid-auto-columns: minmax(250px, calc((100% - 36px) / 3));
}
}
@media (max-width: 1100px) {
.hwr2 .hwr-woo .hitek-policy__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.hwr2 .hwr-woo .hwr-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hwr2 .hwr-woo .hwr-carousel-track {
grid-auto-columns: minmax(240px, calc((100% - 18px) / 2));
}
}
@media (max-width: 767px) {
/* 16px fields on phones: iOS zooms the page into smaller ones. */
.hwr2 .hwr-woo input[type="text"],
.hwr2 .hwr-woo input[type="email"],
.hwr2 .hwr-woo input[type="tel"],
.hwr2 .hwr-woo input[type="url"],
.hwr2 .hwr-woo input[type="number"],
.hwr2 .hwr-woo input[type="password"],
.hwr2 .hwr-woo input[type="search"],
.hwr2 .hwr-woo input[type="date"],
.hwr2 .hwr-woo .input-text,
.hwr2 .hwr-woo .form-row .input-text,
.hwr2 .hwr-woo select,
.hwr2 .hwr-woo .form-row select,
.hwr2 .hwr-woo textarea,
.hwr2 .hwr-woo .form-row textarea,
.hwr2 .hwr-woo .quantity .qty,
.hwr2 .hwr-woo select#hitek-expedited-tier,
.hwr2 .hwr-woo #hitek-freebies-form select,
.hwr2 .hwr-woo .hitek-cart-freebies select,
.hwr2 .hwr-woo .select2-container .select2-selection--single .select2-selection__rendered {
font-size: 16px !important;
}
}
@media (max-width: 760px) {
.hwr2 .hwr-woo .woocommerce-Addresses,
.hwr2 .hwr-woo .col2-set.addresses,
.hwr2 .hwr-woo .woocommerce-customer-details .woocommerce-columns {
grid-template-columns: minmax(0, 1fr);
}
.hwr2 .hwr-woo .woocommerce-address-fields__field-wrapper,
.hwr2 .hwr-woo .woocommerce-billing-fields__field-wrapper,
.hwr2 .hwr-woo .woocommerce-shipping-fields__field-wrapper {
grid-template-columns: minmax(0, 1fr);
}
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-first,
.hwr2 .hwr-woo .woocommerce-EditAccountForm .form-row-last {
float: none;
width: auto;
}
/* Responsive tables stack into labelled rows (td[data-title]). */
.hwr2 .hwr-woo table.shop_table_responsive thead,
.hwr2 .hwr-woo table.my_account_orders thead {
display: none;
}
.hwr2 .hwr-woo table.shop_table_responsive tbody tr,
.hwr2 .hwr-woo table.my_account_orders tbody tr {
display: block;
padding: 8px 0;
border-bottom: 1px solid #3a3a3a;
}
.hwr2 .hwr-woo table.shop_table_responsive tbody th,
.hwr2 .hwr-woo table.shop_table_responsive tbody td,
.hwr2 .hwr-woo table.my_account_orders tbody th,
.hwr2 .hwr-woo table.my_account_orders tbody td {
display: block;
padding: 8px 16px;
border: 0;
text-align: right;
}
.hwr2 .hwr-woo table.shop_table_responsive tbody td::after,
.hwr2 .hwr-woo table.my_account_orders tbody td::after {
content: '';
display: block;
clear: both;
}
.hwr2 .hwr-woo table.shop_table_responsive tbody td[data-title]::before,
.hwr2 .hwr-woo table.shop_table_responsive tbody th[data-title]::before,
.hwr2 .hwr-woo table.my_account_orders tbody td[data-title]::before,
.hwr2 .hwr-woo table.my_account_orders tbody th[data-title]::before {
content: attr(data-title);
float: left;
margin-right: 14px;
color: #a5a5a5;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-align: left;
}
.hwr2 .hwr-woo table.shop_table_responsive .woocommerce-orders-table__cell-order-actions,
.hwr2 .hwr-woo table.my_account_orders .woocommerce-orders-table__cell-order-actions,
.hwr2 .hwr-woo table.my_account_orders td.subscription-actions,
.hwr2 .hwr-woo table.my_account_orders td.order-actions {
text-align: left;
}
/* Shipment Tracking prints inline text-align (left on the date, center on the link): stacked rows align right like the others. */
.hwr2 .hwr-woo table.my_account_tracking tbody td.date-shipped {
text-align: right !important;
}
.hwr2 .hwr-woo table.my_account_tracking tbody td.order-actions .button {
display: flex;
width: 100%;
}
.hwr2 .hwr-woo table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before,
.hwr2 .hwr-woo table.my_account_orders td.subscription-actions::before,
.hwr2 .hwr-woo table.my_account_orders td.order-actions::before {
display: none;
}
.hwr2 .hwr-woo .cart_totals table.shop_table_responsive tbody tr {
padding: 0;
border-bottom: 1px solid #ffffff1a;
}
/* The cells carry data-title labels; WooCommerce Subscriptions' "Recurring totals" heading row has no cell and stays. */
.hwr2 .hwr-woo .cart_totals table.shop_table_responsive tbody tr:not(.recurring-totals) th {
display: none;
}
.hwr2 .hwr-woo .cart_totals table.shop_table_responsive tbody tr.recurring-totals th {
padding: 18px 0 10px;
text-align: left;
}
.hwr2 .hwr-woo .cart_totals table.shop_table_responsive tbody td {
padding: 12px 0;
}
.hwr2 .hwr-woo .cart_totals .woocommerce-shipping-totals td {
display: block;
text-align: left;
}
.hwr2 .hwr-woo .cart_totals .woocommerce-shipping-totals td::before {
display: block;
float: none;
margin-bottom: 6px;
}
.hwr2 .hwr-woo .hitek-pm__item {
grid-template-columns: auto 1fr;
}
.hwr2 .hwr-woo .hitek-pm__actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.hwr2 .hwr-woo .hwr-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.hwr2 .hwr-woo .portal-section-heading {
flex-wrap: wrap;
}
}
@media (max-width: 700px) {
.hwr2 .hwr-woo .saved-order.hwr-ol-item {
grid-template-columns: 72px minmax(0, 1fr);
gap: 14px 16px;
padding: 18px;
}
.hwr2 .hwr-woo .hwr-ol-item__media {
width: 72px;
}
.hwr2 .hwr-woo .hwr-ol-item__actions {
grid-column: 1 / -1;
grid-template-columns: auto 1fr;
grid-template-areas: 'label label' 'qty total' 'add remove';
justify-items: stretch;
align-items: center;
min-width: 0;
padding-top: 14px;
border-top: 1px solid #333;
}
.hwr2 .hwr-woo .hwr-ol-item__qty-label {
grid-column: 1 / -1;
}
.hwr2 .hwr-woo .hwr-ol-item__total {
justify-self: end;
}
.hwr2 .hwr-woo .hwr-ol-item__add,
.hwr2 .hwr-woo .hwr-ol-item__actions .order-remove {
width: 100%;
}
.hwr2 .hwr-woo .hwr-ol-actions .btn,
.hwr2 .hwr-woo .hwr-ol-cart .btn {
width: 100%;
}
.hwr2 .hwr-woo .cart_totals,
.hwr2 .hwr-woo .hwr-woo-panel,
.hwr2 .hwr-woo .woocommerce-EditAccountForm,
.hwr2 .hwr-woo .woocommerce-address-fields,
.hwr2 .hwr-woo #add_payment_method {
padding: 20px 16px;
}
.hwr2 .hwr-woo .hitek-policy__grid {
grid-template-columns: minmax(0, 1fr);
padding: 0 14px 14px;
}
.hwr2 .hwr-woo .hwr-woo-intro__actions .btn {
flex: 1 1 100%;
}
.hwr2 .hwr-woo .hwr-cart-list-strip .btn {
width: 100%;
}
.hwr2.hwr-woo-page .hwr-woo.dealer-page {
width: calc(100% - 32px);
}
.hwr2 .hwr-woo .hwr-woo-gateway {
display: block;
}
.hwr2 .hwr-woo .hwr-woo-gateway > svg {
margin-bottom: 14px;
}
}
@media (max-width: 540px) {
.hwr2 .hwr-woo .hwr-woo-gateway {
padding: 25px;
}
.hwr2 .hwr-woo .woocommerce-message .button,
.hwr2 .hwr-woo .woocommerce-info .button {
float: none;
display: flex;
width: 100%;
margin: 0 0 12px;
}
.hwr2 .hwr-woo .hwr-carousel-track {
grid-auto-columns: 86%;
}
.hwr2 .hwr-woo .hwr-dash-section__tools {
width: 100%;
justify-content: flex-end;
}
.hwr2 .hwr-woo .hwr-login .hwr-login__form .button-row > *,
.hwr2 .hwr-woo .hwr-login .public-gate-information .button-row > * {
flex: 1 1 100%;
}
.hwr2 .hwr-woo ul.woocommerce-order-overview,
.hwr2 .hwr-woo ul.order_details {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hwr2 .hwr-woo .order-empty .btn {
width: 100%;
}
/*
* Checkout review, item details: each label above its value (R3-54). Beside the 48px thumbnail and
* the price the name column is about 170px at 375, so two columns left the values 52-75px and
* broke words ("Carbon Technolog / y"); stacked they wrap at word boundaries, like the cart.
*/
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name .variation {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.hwr2 .hwr-woo .woocommerce-checkout-review-order-table td.product-name .variation dd + dt {
margin-top: 6px;
}
}
/*
* Touch screens (spec §8a, R2-5; phones, and touch tablets such as iPad portrait, like D1's shell):
* - Text links get an invisible hit area at least 44px tall on every line they wrap onto, so the
* text does not move. A ::before on a link that wraps would not do: Chrome builds the containing
* block of a wrapped inline from the start of its first line to the end of its last line, so the
* box only spans the width of the last line.
* - Order numbers in the order and subscription tables (one 16px line): a ::before of at least
* 44x44 centred on the link.
* - Product names in the order details of order received / view order and in the totals of view
* subscription (td.product-name: WooCommerce's cells also carry it; the checkout review prints
* names without links): an inline link followed by "× qty" and the item meta, often on two
* lines. 14px of vertical padding gives every line its own 44px band (13px text in a 16px box;
* vertical padding of an inline box does not change the line layout; one-line rows are 45px
* apart, so the bands of two rows do not overlap), and the ::before keeps a one-line name at
* least 44x44. The padding goes while the link has keyboard focus, so the focus ring stays
* around the text.
* - Cart line names and cart upsell names (cart page only), the only content of their h2/h3: the
* ::before is anchored to the heading (position: relative on the heading, not on the link), so
* it covers every line across the heading's width, from 13px above the heading to 13px below:
* at least 22px above the middle of the first line and below the middle of the last (one line
* of a cart line name is 20.8px+, an upsell name has the theme's 28.6px min-height), 44px+ tall.
* - Text links in an error notice with one error ("Invalid order. My account" on someone else's
* view-order, "Invalid Subscription. My Account", "Lost your password?" after a failed sign-in;
* R3-57; checkout.js's "There was an error processing your order" box): the same 14px of vertical
* padding as the product names (a 14px link in a 22.4px line: 45px, inside the notice's 16px
* padding). A list of several errors (the checkout's validation errors) has an item every 24.4px,
* so its links get no padding (a padded link reached over the next item's link). checkout.js wraps
* each field error in a link to its field, the item's only content: in such a list that link is a
* block, so its whole row (the item's width, 22.4px) is the hit area and rows never overlap; it is
* inline again while it has keyboard focus, so the focus ring stays around the text. Info and
* success notices hold buttons, the checkout's 44px "Click here to enter your code" and the cart's
* "Undo?" (inline-block hit area, above).
* Each sits in its own cell or card with at least 12px of padding or plain text around it, so the
* hit area never covers another control.
* - Social Media Graphics (/my-account/category-social-media-graphics/, template-parts/
* social-media-posts.php): "Copy text" (42px) and "Download image" (a 24px text link here: its
* theme style needs .hitek-account-content, which v2's account wrapper does not carry) are 44px
* tall. Mouse users above 760px keep both as they are.
*/
@media (max-width: 760px), (pointer: coarse) {
.hwr2 .hwr-woo :is(.woocommerce-orders-table__cell-order-number, td.subscription-id, td.product-name) > a {
position: relative;
}
.hwr2 .hwr-woo :is(.woocommerce-orders-table__cell-order-number, td.subscription-id, td.product-name) > a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
.hwr2 .hwr-woo td.product-name > a,
.hwr2 .hwr-woo .woocommerce-error a:not(.button):not(.btn) {
padding-block: 14px;
}
.hwr2 .hwr-woo td.product-name > a:focus-visible,
.hwr2 .hwr-woo .woocommerce-error a:not(.button):not(.btn):focus-visible {
padding-block: 0;
}
/* A list of several errors stacks them 24.4px apart: padded links would reach over the next item's link. */
.hwr2 .hwr-woo .woocommerce-error > li:not(:only-child) a:not(.button):not(.btn) {
padding-block: 0;
}
/* checkout.js wraps each field error in a link to its field (the item's only content): it fills its row. */
.hwr2 .hwr-woo .woocommerce-error > li[data-id]:not(:only-child) > a[href^="#"] {
display: block;
}
.hwr2 .hwr-woo .woocommerce-error > li[data-id]:not(:only-child) > a[href^="#"]:focus-visible {
display: inline;
}
.hwr2 .hwr-woo .hitek-social-post__actions .hitek-social-post__copy {
min-height: 44px;
}
.hwr2 .hwr-woo .hitek-social-post__actions a.hitek-social-post__download {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.hwr2 .hwr-woo .hwr-carousel-track {
scroll-behavior: auto;
}
}