/*
Theme Name: WoodMart Child
Description: Hightcraft WoodMart Child Theme
Author: Hightcraft
Template: woodmart
Version: 1.0.0
Text Domain: woodmart-child
*/
/* ==========================================================
HIGHTCRAFT REGISTER PAGE
CLEAN V22 — rebuilt from scratch
URL: /my-account/?action=register
IMPORTANT:
This file intentionally removes all previous V14-V21
mobile Hero patches. There is only ONE rule-set for each
breakpoint, so rules no longer fight each other.
========================================================== */
/* ==========================================================
01. BRAND VARIABLES
========================================================== */
body.hc-register-mode,
.login-form-side {
--hc-primary: #177785;
--hc-primary-hover: #105f6b;
--hc-heading: #123f49;
--hc-text: #26343a;
--hc-muted: #728086;
--hc-red: #d34b53;
--hc-border: #d8dede;
--hc-soft-border: #ebe8e2;
--hc-soft-bg: #faf9f7;
}
/* ==========================================================
02. REMOVE WOODMART'S NATIVE TITLE IMAGE LAYER
Register page only.
WoodMart can render the global page-title image as a real
![]()
/. We hide that one and use only our own CSS
image, preventing the double-background problem.
========================================================== */
body.hc-register-mode
:is(.wd-page-title, .page-title)
picture,
body.hc-register-mode
:is(.wd-page-title, .page-title)
img,
body.hc-register-mode
:is(
.wd-page-title-bg,
.wd-page-title-image,
.page-title-bg,
.page-title-image
) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ==========================================================
03. DESKTOP TOP AREA
≥ 1025px
One single custom image is painted behind both the Header
and the title area. WoodMart's Header positioning itself is
left alone so dropdowns/click behavior stay native.
========================================================== */
@media (min-width: 1025px) {
body.hc-register-mode
.wd-page-wrapper.website-wrapper {
position: relative !important;
isolation: isolate;
background: #ffffff !important;
background-image: none !important;
}
body.hc-register-mode
.wd-page-wrapper.website-wrapper::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 330px;
z-index: 0;
background-color: #f3eee5;
background-image:
linear-gradient(
rgba(248, 244, 237, 0.10),
rgba(248, 244, 237, 0.10)
),
url("https://www.hightcraft.com/wp-content/uploads/2026/09/hightcraft-1.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
pointer-events: none;
}
body.hc-register-mode
:is(.page-title, .wd-page-title) {
position: relative !important;
z-index: 1 !important;
min-height: 230px !important;
margin-top: 0 !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
body.hc-register-mode
:is(
.page-title > .container,
.wd-page-title > .container,
.page-title .container,
.wd-page-title .container,
.page-title-content,
.wd-page-title-content
) {
background: transparent !important;
background-image: none !important;
}
/* Desktop page-title wording */
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(.title, .entry-title, .page-title-heading) {
font-size: 0 !important;
color: transparent !important;
}
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(.title, .entry-title, .page-title-heading)::before {
content: "Create Account";
display: block;
font-family:
var(--wd-title-font),
Georgia,
serif;
font-size: 32px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--hc-heading);
}
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(.title, .entry-title, .page-title-heading)::after {
content:
"Join Hightcraft and start your creative journey";
display: block;
margin-top: 9px;
font-family:
var(--wd-text-font),
Arial,
sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #68777c;
}
/* Header stays clickable and dropdowns stay above Hero */
body.hc-register-mode
header.whb-header {
z-index: 1000 !important;
overflow: visible !important;
}
body.hc-register-mode
:is(
.whb-main-header,
.whb-general-header,
.whb-row,
.whb-column
) {
overflow: visible !important;
}
body.hc-register-mode
header.whb-header
:is(
.wd-dropdown,
.sub-menu,
.wd-sub-menu,
.wd-dropdown-menu,
.wd-dropdown-results
) {
z-index: 10000 !important;
}
body.hc-register-mode
.whb-general-header
:is(.whb-flex-row, .whb-column) {
align-items: center !important;
}
body.hc-register-mode
.whb-general-header
:is(.wd-nav, .wd-nav-main)
> li
> a {
display: flex !important;
align-items: center !important;
height: 100% !important;
line-height: 1.2 !important;
}
body.hc-register-mode
.main-page-wrapper {
position: relative !important;
z-index: auto !important;
background: transparent !important;
background-image: none !important;
}
}
/* ==========================================================
04. TABLET / MOBILE HEADER
≤ 1024px
Header is normal-flow and full-width.
No boxed/over-content spacer is allowed here.
========================================================== */
@media (max-width: 1024px) {
body.hc-register-mode
header.whb-header.whb-boxed,
body.hc-register-mode
header.whb-header.whb-overcontent,
body.hc-register-mode
.whb-header.whb-boxed {
position: relative !important;
top: 0 !important;
right: auto !important;
left: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transform: none !important;
z-index: 100 !important;
}
body.hc-register-mode
.whb-main-header {
position: relative !important;
top: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transform: none !important;
}
body.hc-register-mode
.whb-main-header::before,
body.hc-register-mode
.whb-main-header::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.hc-register-mode
:is(.whb-top-bar, .whb-general-header) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
body.hc-register-mode
.whb-general-header {
background: #ffffff !important;
box-shadow:
0 2px 8px rgba(25, 42, 48, 0.045) !important;
}
body.hc-register-mode
:is(
.whb-top-bar > .container,
.whb-general-header > .container,
.whb-main-header .container
) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
body.hc-register-mode
.whb-header-bottom {
display: none !important;
}
}
/* ==========================================================
05. BREADCRUMB TEXT
========================================================== */
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(
.breadcrumbs,
.wd-breadcrumbs,
.woocommerce-breadcrumb
) {
margin-top: 13px !important;
font-size: 0 !important;
}
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(
.breadcrumbs,
.wd-breadcrumbs,
.woocommerce-breadcrumb
)
> * {
display: none !important;
}
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(
.breadcrumbs,
.wd-breadcrumbs,
.woocommerce-breadcrumb
)::after {
content: "Home / Create Account";
font-family:
var(--wd-text-font),
Arial,
sans-serif;
font-size: 11px;
font-weight: 400;
color: #758084;
}
/* ==========================================================
21. MOBILE HERO
≤ 767px
IMPORTANT:
This is now the ONLY mobile title implementation.
The title and subtitle are generated from the stable
Page Title .container. No root pseudo-element and no JS.
========================================================== */
@media (max-width: 767px) {
body.hc-register-mode
:is(.page-title, .wd-page-title) {
position: relative !important;
min-height: 172px !important;
height: 172px !important;
margin: 0 !important;
padding: 0 !important;
background-color: #f3eee5 !important;
background-image:
linear-gradient(
rgba(248, 244, 237, 0.08),
rgba(248, 244, 237, 0.08)
),
url("https://www.hightcraft.com/wp-content/uploads/2026/09/hightcraft-1.webp")
!important;
background-repeat: no-repeat !important;
background-size: 100% 100%, 142% 100% !important;
background-position: center top !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Hide WoodMart's real mobile title node */
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(.title, .entry-title, .page-title-heading) {
display: none !important;
}
/* Stable Hero content container */
body.hc-register-mode
:is(.page-title, .wd-page-title)
> .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 172px !important;
min-height: 172px !important;
margin: 0 !important;
padding:
18px
20px
14px
!important;
position: relative !important;
top: 0 !important;
bottom: auto !important;
transform: none !important;
overflow: visible !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* Mobile Hero title */
body.hc-register-mode
:is(.page-title, .wd-page-title)
> .container::before {
content: "Join Hightcraft";
display: block;
order: 1;
margin: 0 !important;
padding: 0 !important;
font-family:
var(--wd-title-font),
Georgia,
serif;
font-size: 20px;
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--hc-heading);
}
/* Mobile Hero subtitle */
body.hc-register-mode
:is(.page-title, .wd-page-title)
> .container::after {
content:
"Start your creative journey with us";
display: block;
order: 2;
margin:
7px
0
0
!important;
padding: 0 !important;
font-family:
var(--wd-text-font),
Arial,
sans-serif;
font-size: 10.5px;
font-weight: 400;
line-height: 1.4;
color: #68777c;
}
/* Breadcrumb is third */
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(
.breadcrumbs,
.wd-breadcrumbs,
.woocommerce-breadcrumb
) {
order: 3;
margin:
10px
0
0
!important;
line-height: 1.35 !important;
}
body.hc-register-mode
:is(.page-title, .wd-page-title)
:is(
.breadcrumbs,
.wd-breadcrumbs,
.woocommerce-breadcrumb
)::after {
font-size: 10px !important;
color: #7a8589 !important;
}
/* Compact registration content */
body.hc-register-mode
.main-page-wrapper {
background: #ffffff !important;
padding:
0
0
88px
!important;
}
body.hc-register-mode
#customer_login {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.hc-register-mode
.wd-registration-page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding:
26px
22px
20px
!important;
box-sizing: border-box !important;
}
body.hc-register-mode
#customer_login > .col-login,
body.hc-register-mode
#customer_login > div:has(.woocommerce-form-register) {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.hc-register-mode
#customer_login h2 {
margin: 0 0 20px !important;
}
body.hc-register-mode
#customer_login h2::before {
font-size: 24px !important;
line-height: 1.18 !important;
}
body.hc-register-mode
#customer_login h2::after {
max-width: 330px !important;
margin-top: 7px !important;
font-size: 10.5px !important;
line-height: 1.45 !important;
}
body.hc-register-mode
.woocommerce-form-register label {
margin-bottom: 6px !important;
font-size: 12px !important;
}
body.hc-register-mode
.woocommerce-form-register
.form-row {
margin-bottom: 13px !important;
}
body.hc-register-mode
.woocommerce-form-register
input:is(
.input-text,
[type="text"],
[type="email"],
[type="password"]
) {
height: 46px !important;
border-radius: 6px !important;
font-size: 12.5px !important;
}
body.hc-register-mode
.woocommerce-form-register
:is(
button[name="register"],
.woocommerce-form-register__submit
) {
height: 42px !important;
border-radius: 5px !important;
font-size: 11.5px !important;
letter-spacing: 0.045em !important;
}
body.hc-register-mode
.woocommerce-form-register
> p:has(.login-side-opener),
body.hc-register-mode
.woocommerce-form-register
.woocommerce-privacy-policy-text:has(.login-side-opener) {
margin-top: 11px !important;
font-size: 10.5px !important;
}
body.hc-register-mode
.hc-register-trust {
width: calc(100% + 44px) !important;
max-width: none !important;
margin:
20px
-22px
-20px
!important;
padding:
16px
4px
16px
!important;
background: #faf9f7 !important;
border-top:
1px solid var(--hc-soft-border) !important;
border-bottom:
1px solid var(--hc-soft-border) !important;
}
body.hc-register-mode
.hc-trust-item {
flex-direction: column;
gap: 6px;
min-height: 60px;
padding: 0 6px;
font-size: 9px;
text-align: center;
}
}
@media (max-width: 420px) {
body.hc-register-mode
:is(.page-title, .wd-page-title) {
background-size: 100% 100%, 142% 100% !important;
}
}
/* ==========================================================
06. PAGE CONTENT
========================================================== */
body.hc-register-mode .main-page-wrapper {
padding-top: 34px !important;
padding-bottom: 42px !important;
}
@media (max-width: 1024px) {
body.hc-register-mode .main-page-wrapper {
background: #ffffff !important;
}
}
/* ==========================================================
07. REMOVE DEFAULT LOGIN AREA
========================================================== */
body.hc-register-mode #customer_login .col-register-text,
body.hc-register-mode #customer_login .woocommerce-form-login,
body.hc-register-mode #customer_login .wd-login-divider,
body.hc-register-mode .wd-switch-to-register {
display: none !important;
}
/* ==========================================================
08. REGISTER WRAPPER
========================================================== */
body.hc-register-mode .wd-registration-page,
body.hc-register-mode #customer_login {
width: 100% !important;
max-width: 560px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
}
body.hc-register-mode #customer_login {
display: block !important;
}
/* ==========================================================
09. REGISTER CARD
========================================================== */
body.hc-register-mode #customer_login > .col-login,
body.hc-register-mode
#customer_login > div:has(.woocommerce-form-register) {
float: none !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin: 0 !important;
padding: 32px 42px 30px !important;
background: #ffffff !important;
border: 1px solid var(--hc-soft-border) !important;
border-radius: 9px !important;
box-shadow:
0 14px 42px rgba(26, 43, 48, 0.065) !important;
box-sizing: border-box !important;
}
/* ==========================================================
10. REGISTER TITLE
========================================================== */
body.hc-register-mode #customer_login h2 {
margin: 0 0 27px !important;
font-size: 0 !important;
text-align: center !important;
}
body.hc-register-mode #customer_login h2::before {
content: "Create Your Account";
display: block;
font-family: var(--wd-title-font), Georgia, serif;
font-size: 27px;
font-weight: 500;
line-height: 1.2;
color: var(--hc-heading);
}
body.hc-register-mode #customer_login h2::after {
content:
"Join our craft-loving community! Create an account to track your orders, save your favorite items, and more.";
display: block;
max-width: 390px;
margin: 9px auto 0;
font-family: var(--wd-text-font), Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.55;
color: var(--hc-muted);
}
/* ==========================================================
11. REGISTER FORM
========================================================== */
body.hc-register-mode .woocommerce-form-register {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.hc-register-mode
.woocommerce-form-register .form-row {
float: none !important;
width: 100% !important;
margin: 0 0 17px !important;
padding: 0 !important;
}
/* ==========================================================
12. LABELS
========================================================== */
body.hc-register-mode
.woocommerce-form-register label {
display: block !important;
margin: 0 0 7px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #26383e !important;
}
body.hc-register-mode .required,
.login-form-side .required {
color: var(--hc-red) !important;
}
/* ==========================================================
13. INPUTS
========================================================== */
body.hc-register-mode
.woocommerce-form-register
input:is(
.input-text,
[type="text"],
[type="email"],
[type="password"]
) {
width: 100% !important;
height: 46px !important;
margin: 0 !important;
padding: 0 42px !important;
background: #ffffff !important;
border: 1px solid var(--hc-border) !important;
border-radius: 6px !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
font-size: 13px !important;
color: var(--hc-text) !important;
}
body.hc-register-mode
.woocommerce-form-register input:focus {
border-color: var(--hc-primary) !important;
box-shadow:
0 0 0 2px rgba(23, 119, 133, 0.08) !important;
}
body.hc-register-mode
.woocommerce-form-register input::placeholder {
color: #9aa3a6 !important;
opacity: 1;
}
/* ==========================================================
14. INPUT ICONS
========================================================== */
/* Username */
body.hc-register-mode #reg_username {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2367787D' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E")
!important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
/* Email */
body.hc-register-mode #reg_email {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2367787D' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")
!important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
/* Password */
body.hc-register-mode #reg_password {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2367787D' stroke-width='1.7'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
!important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
/* ==========================================================
15. PASSWORD EYE
========================================================== */
body.hc-register-mode .password-input {
position: relative !important;
}
body.hc-register-mode .show-password-input {
position: absolute !important;
top: 50% !important;
right: 15px !important;
transform: translateY(-50%) !important;
}
/* ==========================================================
16. REGISTER BUTTON
========================================================== */
body.hc-register-mode
.woocommerce-form-register
.form-row:has(button[name="register"]) {
order: 90 !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
}
body.hc-register-mode
.woocommerce-form-register
:is(
button[name="register"],
.woocommerce-form-register__submit
) {
width: 100% !important;
height: 44px !important;
padding: 0 20px !important;
background: var(--hc-primary) !important;
border: 1px solid var(--hc-primary) !important;
border-radius: 6px !important;
box-shadow: none !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.05em;
transition:
background-color .2s ease,
border-color .2s ease !important;
}
body.hc-register-mode
.woocommerce-form-register
button[name="register"]:hover {
background: var(--hc-primary-hover) !important;
border-color: var(--hc-primary-hover) !important;
}
/* ==========================================================
17. ALREADY HAVE AN ACCOUNT / LOG IN
========================================================== */
body.hc-register-mode
.woocommerce-form-register
> p:has(.login-side-opener),
body.hc-register-mode
.woocommerce-form-register
.woocommerce-privacy-policy-text:has(.login-side-opener) {
order: 100 !important;
margin: 14px 0 0 !important;
text-align: center !important;
font-size: 12px !important;
color: var(--hc-muted) !important;
}
body.hc-register-mode
.woocommerce-form-register
.login-side-opener {
color: var(--hc-primary-hover) !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom:
1px solid rgba(16, 95, 107, 0.40) !important;
}
body.hc-register-mode
.woocommerce-form-register
.login-side-opener:hover {
color: var(--hc-primary) !important;
border-bottom-color: var(--hc-primary) !important;
}
/* ==========================================================
18. TRUST STRIP
========================================================== */
body.hc-register-mode .hc-register-trust {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
width: calc(100% - 40px);
max-width: 560px;
margin: 24px auto 0;
}
body.hc-register-mode .hc-trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
padding: 0 8px;
border-right: 1px solid #e5e1da;
font-size: 10px;
line-height: 1.4;
color: #4d5c61;
}
body.hc-register-mode
.hc-trust-item:last-child {
border-right: 0;
}
body.hc-register-mode .hc-trust-icon {
width: 21px;
min-width: 21px;
color: var(--hc-heading);
}
body.hc-register-mode .hc-trust-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================
19. REMOVE EXCESS HEIGHT
========================================================== */
body.hc-register-mode
:is(
.content-layout-wrapper,
.site-content,
article,
.entry-content,
.woocommerce,
.woocommerce-my-account-wrapper
) {
min-height: 0 !important;
height: auto !important;
}
body.hc-register-mode .wd-prefooter {
display: none !important;
}
/* ==========================================================
20. TABLET
========================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
body.hc-register-mode
:is(.page-title, .wd-page-title) {
background-position: center top !important;
}
body.hc-register-mode
.main-page-wrapper {
padding-top: 28px !important;
}
}
/* ==========================================================
23. SMALL MOBILE
========================================================== */
@media (max-width: 400px) {
body.hc-register-mode
.wd-registration-page {
padding-left: 18px !important;
padding-right: 18px !important;
}
body.hc-register-mode
.hc-register-trust {
width: calc(100% + 36px) !important;
margin-left: -18px !important;
margin-right: -18px !important;
}
}
/* ==========================================================
24. LOGIN SIDEBAR
========================================================== */
.login-form-side .wd-heading .title {
color: var(--hc-heading) !important;
}
.login-form-side
.woocommerce-form-login
input:is(
[type="text"],
[type="email"],
[type="password"]
) {
height: 48px !important;
padding-left: 16px !important;
padding-right: 16px !important;
background: #ffffff !important;
border: 1px solid var(--hc-border) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.login-form-side
.woocommerce-form-login
input:focus {
border-color: var(--hc-primary) !important;
box-shadow:
0 0 0 2px rgba(23, 119, 133, 0.08) !important;
}
.login-form-side
.woocommerce-form-login
:is(
button[type="submit"],
.woocommerce-form-login__submit
) {
width: 100% !important;
height: 44px !important;
padding: 0 20px !important;
background: var(--hc-primary) !important;
border: 1px solid var(--hc-primary) !important;
border-radius: 6px !important;
box-shadow: none !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.04em;
}
.login-form-side
.woocommerce-form-login
:is(
button[type="submit"],
.woocommerce-form-login__submit
):hover {
background: var(--hc-primary-hover) !important;
border-color: var(--hc-primary-hover) !important;
}
.login-form-side
:is(
a[href*="lost-password"],
.lost_password a,
.woocommerce-LostPassword a
) {
color: var(--hc-primary) !important;
text-decoration: none !important;
}
.login-form-side
:is(
a[href*="lost-password"],
.lost_password a,
.woocommerce-LostPassword a
):hover {
color: var(--hc-primary-hover) !important;
}
.login-form-side
.woocommerce-form-login__rememberme {
color: #4f5d62 !important;
}
.login-form-side
.create-account-question p {
color: var(--hc-text) !important;
}
.login-form-side
.create-account-question a {
color: var(--hc-primary) !important;
background: transparent !important;
border: 0 !important;
border-bottom:
1px solid rgba(23, 119, 133, .45) !important;
border-radius: 0 !important;
padding: 0 0 2px !important;
box-shadow: none !important;
text-decoration: none !important;
}
.login-form-side
.create-account-question a:hover {
color: var(--hc-primary-hover) !important;
border-bottom-color: var(--hc-primary-hover) !important;
}
/* ==========================================================
25. MOBILE LOGIN SIDEBAR
========================================================== */
@media (max-width: 767px) {
.login-form-side
.woocommerce-form-login
input:is(
[type="text"],
[type="email"],
[type="password"]
) {
height: 48px !important;
border-radius: 6px !important;
}
.login-form-side
.woocommerce-form-login
:is(
button[type="submit"],
.woocommerce-form-login__submit
) {
height: 44px !important;
border-radius: 6px !important;
}
}
/* ==========================================================
HIGHTCRAFT REGISTER — MOBILE LAYOUT FINAL OVERRIDE V23
Fixes the two issues visible after clean V22:
1) WoodMart mobile header/clone still reserving blank height.
2) Desktop register-card rules appearing again on mobile
because the generic rules are later in the stylesheet.
Register page only. Desktop is untouched.
========================================================== */
@media (max-width: 1024px) {
/* Do not let WoodMart reserve invisible Header height */
body.hc-register-mode
header.whb-header,
body.hc-register-mode
.whb-main-header {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/*
* WoodMart's sticky clone is not needed on this custom
* Register layout and can leave an invisible spacer.
*/
body.hc-register-mode
:is(
.whb-sticky-header.whb-clone,
header.whb-sticky-header.whb-clone
) {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Hero follows the visible Header immediately */
body.hc-register-mode
:is(.page-title, .wd-page-title) {
margin-top: 0 !important;
}
}
@media (max-width: 767px) {
/* Registration area starts immediately after the compact Hero */
body.hc-register-mode
.main-page-wrapper {
padding:
0
0
88px
!important;
background: #ffffff !important;
}
/*
* Mobile is intentionally NOT a floating desktop card.
* The form sits directly on the white page.
*/
body.hc-register-mode
.wd-registration-page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding:
26px
22px
20px
!important;
box-sizing: border-box !important;
}
body.hc-register-mode
#customer_login {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.hc-register-mode
#customer_login > .col-login,
body.hc-register-mode
#customer_login > div:has(.woocommerce-form-register) {
float: none !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Keep the compact mobile typography/input sizing from V22 */
body.hc-register-mode
#customer_login h2 {
margin: 0 0 20px !important;
}
body.hc-register-mode
#customer_login h2::before {
font-size: 24px !important;
line-height: 1.18 !important;
}
body.hc-register-mode
#customer_login h2::after {
max-width: 330px !important;
margin-top: 7px !important;
font-size: 10.5px !important;
line-height: 1.45 !important;
}
body.hc-register-mode
.woocommerce-form-register
input:is(
.input-text,
[type="text"],
[type="email"],
[type="password"]
) {
height: 46px !important;
border-radius: 6px !important;
font-size: 12.5px !important;
}
body.hc-register-mode
.woocommerce-form-register
:is(
button[name="register"],
.woocommerce-form-register__submit
) {
height: 42px !important;
border-radius: 5px !important;
font-size: 11.5px !important;
}
}
/* ==========================================================
HIGHTCRAFT REGISTER — MOBILE HERO EDGE FIX V24
Removes the white strip above the Hero and the beige strip
below/at the edge of the background image.
========================================================== */
@media (max-width: 767px) {
/* WoodMart page-title lives inside .main-page-wrapper */
html body.hc-register-mode
.main-page-wrapper {
padding-top: 0 !important;
}
/* The Hero itself must touch the visible Header */
html body.hc-register-mode
.main-page-wrapper
> :is(.page-title, .wd-page-title),
html body.hc-register-mode
:is(.page-title, .wd-page-title) {
margin-top: 0 !important;
margin-bottom: 0 !important;
background-size:
100% 100%,
142% 100%
!important;
background-position:
center center,
center center
!important;
background-color: transparent !important;
}
/* Re-create breathing room after the Hero, not before it */
html body.hc-register-mode
.wd-registration-page {
padding-top: 26px !important;
}
}
/* ==========================================================
HIGHTCRAFT REGISTER — SPACING TUNE V25
Mobile:
Hero -> registration spacing: 26px -> 16px (-10px)
Desktop:
Hero -> registration spacing: 34px -> 64px (+30px)
Only spacing is changed.
========================================================== */
@media (max-width: 767px) {
html body.hc-register-mode
.wd-registration-page {
padding-top: 16px !important;
}
}
@media (min-width: 1025px) {
html body.hc-register-mode
.main-page-wrapper {
padding-top: 64px !important;
}
}
/* ==========================================================
HIGHTCRAFT — STANDARD INNER PAGE MOBILE HEADER V32
Final architecture for ordinary inner pages:
- Header is in NORMAL DOCUMENT FLOW.
- The whole mobile Header is STICKY at top: 0.
- Header does NOT overlap the Page Title background.
- WoodMart's separate sticky clone is disabled here.
- No JS-measured offsets and no negative margins.
Excludes Homepage, Register and Our Story via PHP body class.
========================================================== */
@media (max-width: 1024px) {
/* ------------------------------------------------------
1. Original Header = normal-flow sticky Header
------------------------------------------------------ */
html body.hc-standard-inner-page
header.whb-header {
position: sticky !important;
top: 0 !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
translate: none !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
border-radius: 0 !important;
z-index: 9999 !important;
transition: none !important;
will-change: auto !important;
}
/*
* WoodMart's over-content / boxed / hide-on-scroll classes
* must not change the geometry of this mobile Header.
*/
html body.hc-standard-inner-page
header.whb-header.whb-overcontent,
html body.hc-standard-inner-page
header.whb-header.whb-boxed,
html body.hc-standard-inner-page
header.whb-header.whb-scroll-slide,
html body.hc-standard-inner-page
header.whb-header.whb-hide-on-scroll {
position: sticky !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
translate: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ------------------------------------------------------
2. Disable WoodMart's second sticky clone
------------------------------------------------------ */
html body.hc-standard-inner-page
.whb-sticky-header.whb-clone,
html body.hc-standard-inner-page
header.whb-sticky-header.whb-clone {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ------------------------------------------------------
3. Header internal wrapper stays in normal flow
------------------------------------------------------ */
html body.hc-standard-inner-page
.whb-main-header {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
translate: none !important;
overflow: visible !important;
transition: none !important;
}
html body.hc-standard-inner-page
.whb-main-header::before,
html body.hc-standard-inner-page
.whb-main-header::after {
content: none !important;
display: none !important;
}
/* ------------------------------------------------------
4. Mobile rows = true full width
------------------------------------------------------ */
html body.hc-standard-inner-page
:is(
.whb-top-bar,
.whb-general-header
) {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
html body.hc-standard-inner-page
:is(
.whb-top-bar > .container,
.whb-general-header > .container,
.whb-main-header .container
) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* ------------------------------------------------------
5. Page Title starts AFTER Header — never behind it
------------------------------------------------------ */
html body.hc-standard-inner-page
.wd-page-wrapper.website-wrapper,
html body.hc-standard-inner-page
.main-page-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
transform: none !important;
translate: none !important;
}
html body.hc-standard-inner-page
:is(.page-title, .wd-page-title) {
position: relative !important;
top: auto !important;
margin-top: 0 !important;
transform: none !important;
translate: none !important;
z-index: 1 !important;
}
/*
* Do NOT add Header-height padding to Page Title.
* The Header already occupies space in normal flow.
*/
html body.hc-standard-inner-page
:is(.page-title, .wd-page-title)
> .container {
margin-top: 0 !important;
transform: none !important;
translate: none !important;
}
/* Not used in the mobile header layout */
html body.hc-standard-inner-page
.whb-header-bottom {
display: none !important;
}
}
/* ==========================================================
HIGHTCRAFT — SHOP / PRODUCT ARCHIVE MOBILE V33
Applies only to:
- Shop archive
- Product categories
- Product tags
Keeps V32 Header behavior untouched.
========================================================== */
@media (max-width: 767px) {
/* ------------------------------------------------------
1. SHORT SHOP HERO
------------------------------------------------------ */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
:is(.page-title, .wd-page-title) {
min-height: 170px !important;
height: 170px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
:is(.page-title, .wd-page-title)
> .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 170px !important;
min-height: 170px !important;
margin: 0 !important;
padding: 8px 20px !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 2 !important;
text-align: center !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
:is(.page-title, .wd-page-title)
:is(.title, .entry-title, .page-title-heading) {
margin: 0 !important;
font-size: 34px !important;
font-weight: 500 !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.wd-page-title
.wd-nav-product-cat {
margin-top: 10px !important;
margin-bottom: 0 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.wd-page-title
.wd-nav-product-cat > li > a {
font-size: 15px !important;
line-height: 1.25 !important;
}
/* ------------------------------------------------------
2. SHOP CONTENT WIDTH
------------------------------------------------------ */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.main-page-wrapper
> .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* ------------------------------------------------------
3. SHOP LOOP HEAD
WoodMart structure:
.shop-loop-head
> .wd-shop-tools:first-child (breadcrumb/results)
> .wd-shop-tools:last-child (sidebar/sort tools)
------------------------------------------------------ */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head {
display: block !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
}
/* Row 1: Home / Shop + result count */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head
> .wd-shop-tools:first-child {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 12px 0 !important;
gap: 12px !important;
border-top: 0 !important;
border-bottom: 1px solid #e9e6e1 !important;
box-sizing: border-box !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head
> .wd-shop-tools:first-child
.wd-breadcrumbs {
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head
> .wd-shop-tools:first-child
.woocommerce-result-count {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
}
/* Row 2: Show sidebar + sorting */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head
> .wd-shop-tools:last-child {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 50px !important;
margin: 0 !important;
padding: 10px 0 !important;
gap: 10px !important;
border-top: 0 !important;
border-bottom: 1px solid #e9e6e1 !important;
box-sizing: border-box !important;
}
/* Remove margins from every child in row 2 */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.shop-loop-head
> .wd-shop-tools:last-child
> * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.wd-show-sidebar-btn {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.3 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
:is(
.woocommerce-ordering,
.wd-products-per-page,
.wd-products-shop-view,
.wd-shop-view,
.wd-products-per-row
) {
margin: 0 !important;
}
/* ------------------------------------------------------
4. REMOVE WOODMART'S EXTRA LOOP-HEAD VERTICAL SPACE
------------------------------------------------------ */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
:is(
.shop-loop-head + .wd-shop-filters,
.shop-loop-head + .filters-area
) {
margin-top: 0 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.site-content {
padding-top: 0 !important;
}
/* ------------------------------------------------------
5. PRODUCT GRID
Keep it clean; no heavy card UI.
------------------------------------------------------ */
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.products {
margin-top: 0 !important;
column-gap: 12px !important;
row-gap: 22px !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.product-grid-item {
margin-bottom: 0 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.product-grid-item
.product-image-link {
overflow: hidden !important;
border-radius: 6px !important;
background: #faf9f7 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.product-grid-item
.wd-entities-title {
margin-top: 9px !important;
margin-bottom: 5px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.product-grid-item
.wd-product-cats {
margin-bottom: 4px !important;
font-size: 11px !important;
color: #a2a2a2 !important;
}
html body.hc-standard-inner-page:is(
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag
)
.product-grid-item
.price {
margin-top: 3px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
}
/* ==========================================================
HIGHTCRAFT — MOBILE OFF-CANVAS MENU LAYER FIX V34
Problem:
On standard inner pages the sticky Header from V32 has a high
z-index, so WoodMart's mobile off-canvas menu opens BEHIND the
Header. The menu itself is there, but its Search/Craft Kits
area is hidden underneath the black promo bar + white Header.
Fix:
- Keep the existing sticky Header.
- Put WoodMart mobile navigation above Header + bottom toolbar.
- Put the dark page overlay just below the navigation panel.
- Force the navigation panel to start at viewport top.
Homepage / Register / Our Story remain unchanged.
========================================================== */
@media (max-width: 1024px) {
/* Sticky header remains above normal page content */
html body.hc-standard-inner-page
header.whb-header {
z-index: 9000 !important;
}
/* WoodMart mobile navigation drawer */
html body.hc-standard-inner-page
.mobile-nav,
html body.hc-standard-inner-page
.mobile-nav.wd-side-hidden {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
height: 100dvh !important;
max-height: 100dvh !important;
z-index: 100002 !important;
}
/*
* WoodMart backdrop.
* Must be above Header / toolbar, but below the drawer.
*/
html body.hc-standard-inner-page
.wd-close-side {
z-index: 100001 !important;
}
/*
* Bottom mobile toolbar must not float above an opened menu.
*/
html body.hc-standard-inner-page
:is(
.wd-toolbar,
.wd-toolbar-shop,
.wd-toolbar-container
) {
z-index: 8999 !important;
}
}