/* =====================================================================
[HC COLOUR GUIDE] Where the product card colours are set
---------------------------------------------------------------------
CARD TEXT COLOURS -> file: assets/css/hc-woo.css
- Brand name (gold #b8860b) ........... .hc-card__brand (color)
- Product title (grey #666) ........... .woocommerce li.product a.hc-card__title (color)
NOTE: a high-specificity selector is required - otherwise the WooCommerce
".woocommerce li.product a{color:inherit}" rule overrides it.
- Variable price (green #40bd7a) ...... .hc-card__price.hc-price--from (color)
Simple product price is NOT touched (separate).
BUTTON COLOURS -> file: style.css (this file, below around line 246)
- "Add to cart" (SIMPLE in-stock) ..... light green main + dark green hover
MAIN block: body...hc-card__atc { background/border/color }
HOVER block: body...hc-card__atc:hover { background/border }
- "Select options" (VARIABLE in-stock) 1.7.289: exactly the same as Add to cart
(light green main + dark green hover; same in dark mode in hc-dark.css)
1.7.290: "options" icon (slider bars) - Add to cart keeps the cart icon
MAIN block: body...hc-card__select { ... }
HOVER block: body...hc-card__select:hover { ... }
NOTE: buttons are written with high specificity (body a.hc-card__atc.hc-btn--icon etc)
+ !important - required to beat theme/WooCommerce rules.
"Receive Stock Alert" (OUT OF STOCK) -> file: assets/css/hc-woo.css
- Main colour (white bg + orange) ..... .hc-card .hc-bis-alert
- Hover (light orange #fff7ef) ........ .hc-card .hc-bis-alert:hover (background)
Each setting rule has an [HC AYAR] comment next to it - search for it.
===================================================================== */
/*
Theme Name: HC Child
Description: Custom child theme on Kadence.
Author: HC
Template: kadence
Version: 0.9.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hc-child
*/
/* =====================================================================
1. HC DESIGN TOKENS — single source of truth for all HC styling.
Mockup references: website-design-*-NEW.jpg (June 2026 set).
===================================================================== */
:root {
/* --- Brand --- */
--hc-primary: #f18833; /* Brand orange: CTAs, accents, store name in badge */
--hc-primary-dark: #d9731f; /* hover/active */
--hc-primary-soft: #fdf3e7; /* light tinted backgrounds (banners, highlights) */
/* --- Text & surfaces --- */
--hc-text: #1f1f1f;
--hc-text-muted: #6b6b6b;
--hc-bg: #ffffff;
--hc-bg-soft: #f6f6f6; /* page background behind cards */
--hc-border: #e5e5e5;
/* --- Price --- */
--hc-price: #2eaf69; /* current price (green, as in mockups) */
--hc-price-old: #9b9b9b; /* struck-through old price */
/* --- Product card (STRICT order: image > badge > name > price > button) --- */
--hc-card-radius: 15px; /* product image border radius — STRICT */
--hc-card-bg: #ffffff;
--hc-card-border: #ececec;
--hc-card-shadow: 0 1px 4px rgba(0,0,0,.06);
--hc-card-shadow-hover: 0 4px 14px rgba(0,0,0,.10);
/* --- Store identity (used by badge + future per-store theming) --- */
--hc-store-badge-text: var(--hc-primary);
--hc-store-badge-flag-size: 18px;
/* --- Buttons --- */
--hc-btn-radius: 8px;
--hc-btn-buy-external-bg: #a8e063; /* green BUY IN X STORE */
--hc-btn-buy-external-text: #1f1f1f;
--hc-btn-disabled-bg: #e9e9e9; /* Out of Stock */
--hc-btn-disabled-text: #8a8a8a;
/* --- Status --- */
--hc-success: #2eaf69;
--hc-warning: #f5a623;
--hc-danger: #d0454c;
/* --- Layout --- */
--hc-container-max: 1520px;
--hc-gap: 20px;
}
/* =====================================================================
2. GLOBAL BASELINE (minimal; component CSS arrives per-template in Phase 3)
===================================================================== */
body {
color: var(--hc-text);
}
a { transition: color .15s ease; }
/* Generic HC button primitive — Phase 3 components extend these classes. */
.hc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
width: 100%;
padding: .7em 1.1em;
border: 0;
border-radius: var(--hc-btn-radius);
background: var(--hc-primary);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
.hc-btn:hover { background: var(--hc-primary-dark); color: #fff; }
.hc-btn:active { transform: translateY(1px); }
.hc-btn--external { background: var(--hc-btn-buy-external-bg); color: var(--hc-btn-buy-external-text); }
.hc-btn--disabled,
.hc-btn[disabled] { background: var(--hc-btn-disabled-bg); color: var(--hc-btn-disabled-text); cursor: not-allowed; }
/* Price primitives */
.hc-price { color: var(--hc-price); font-weight: 700; }
.hc-price--old { color: var(--hc-price-old); text-decoration: line-through; font-weight: 400; }
.hc-price--from::before { content: "from "; color: #666666; font-weight: 700; } /* [HC AYAR] "from" text colour + font same as hc-card__title (#666, 700) */
/* LANGUAGE-AWARE PREFIX (30 Aug 2026). CSS content does not go through
translation; a fixed "from" appeared in five languages (de/fr/it/pt/es).
Values are taken from the theme catalogues (theme text domain):
de=ab fr=des it=da pt=desde es=desde. English default stays above. */
html[lang^="de"] .hc-price--from::before{ content:"ab "; }
html[lang^="fr"] .hc-price--from::before{ content:"dès "; }
html[lang^="it"] .hc-price--from::before{ content:"da "; }
html[lang^="pt"] .hc-price--from::before{ content:"desde "; }
html[lang^="es"] .hc-price--from::before{ content:"desde "; }
/* ja (18 Sep 2026, J-61): prefix is EMPTIED - Japanese has no "from" prefix. The 〜 SUFFIX IS LEFT OUT ON PURPOSE: the card price
shows a RANGE ("min - max"), so a suffix would land after the top price (the official Woo ja pack also
shows the range as "%1$s - %2$s"). Permanent fix later: move the text to gettext (T-CSS-1). */
html[lang^="ja"] .hc-price--from::before{ content:""; }
/* ko (+ C4 29 Sep 2026, K-19): prefix is EMPTIED - same reason as ja J-61. Permanent fix T-CSS-1. */
html[lang^="ko"] .hc-price--from::before{ content:""; }
/* ar (C4-A11, 1 Oct 2026): price prefix; text only. */
html[lang^="ar"] .hc-price--from::before{ content:"ابتداءً من "; }
/* nl / ru / vi / zh (C4-A37 / C4-A38, 3 Oct 2026): canonical theme catalogue msgid "from"; zh "起" suffix -> ja / ko style (empty prefix). Version: hc-tema-css-surum.php */
html[lang^="nl"] .hc-price--from::before{ content:"vanaf "; }
html[lang^="ru"] .hc-price--from::before{ content:"от "; }
html[lang^="vi"] .hc-price--from::before{ content:"từ "; }
html[lang^="zh"] .hc-price--from::before{ content:""; }
/* Store badge primitive (flag + store name) */
.hc-store-badge {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: .85em;
font-weight: 600;
color: var(--hc-store-badge-text);
}
.hc-store-badge img,
.hc-store-badge .hc-flag {
width: var(--hc-store-badge-flag-size);
height: auto;
border-radius: 2px;
}
/* NOTE: No page-builder CSS. No !important unless fighting a third-party
plugin style, and then documented inline with a reason. Mobile-first. */
/* =====================================================================
8. HC FOOTER (replaces Kadence footer; rendered via inc/template-tags.php)
===================================================================== */
.site-footer .site-footer-wrap{ display:none; } /* hide any leftover Kadence footer */
.hc-foot{ background:#333333; color:#cfcbc7; }
.hc-foot__slogan{ background:#2a2a2a; border-bottom:1px solid rgba(255,255,255,.07); }
.hc-foot__slogan-in{ max-width:1600px; margin:0 auto; padding:20px 50px; display:flex; align-items:center; justify-content:center; gap:22px; }
.hc-foot__slogan-in::before, .hc-foot__slogan-in::after{ content:''; height:2px; flex:1; max-width:160px; background:#f18833; border-radius:2px; }
.hc-foot__slogan-in span{ font-size:15px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#f18833; white-space:nowrap; }
.hc-foot__main{ max-width:1600px; margin:0 auto; padding:48px 40px 36px; display:grid; grid-template-columns:1.5fr 0.9fr 1.55fr 0.8fr 0.95fr; gap:30px; }
.hc-foot__main > .hc-foot__col:nth-child(3){ padding-left:22px; }
.hc-foot__brand img{ height:56px; width:auto; margin:0 0 16px; }
.hc-foot__brand p{ font-size:13.5px; line-height:1.7; color:#d8d4d0; margin:0 0 16px; max-width:310px; }
.hc-foot__email{ font-size:13.5px; color:#e8e5e2; text-decoration:none; display:inline-block; margin:0 0 16px; }
.hc-foot__email b{ color:#f18833; }
.hc-foot__social{ display:flex; gap:10px; }
.hc-foot__social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#cfcbc7; text-decoration:none; transition:all .2s; }
.hc-foot__social a:hover{ background:#f18833; color:#fff; }
.hc-foot__social svg{ width:16px; height:16px; }
.hc-foot__col h4{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.hc-foot__col ul{ list-style:none; margin:0; padding:0; }
.hc-foot__col li{ margin:0 0 8px; }
.hc-foot__col a{ font-size:13px; color:#e8e5e2; text-decoration:none; transition:color .2s; line-height:1.4; white-space:nowrap; }
.hc-foot__col a:hover{ color:#f18833; }
.hc-foot__loc a{ display:flex; align-items:center; gap:9px; }
.hc-foot__loc .flag{ width:20px; height:20px; border-radius:50%; object-fit:contain; flex:0 0 20px; } /* hc-foot fixes 1.3.1 */
.hc-foot__legal{ border-top:1px solid rgba(255,255,255,.08); background:#2c2c2c; }
.hc-foot__legal-in{ max-width:1600px; margin:0 auto; padding:18px 40px; text-align:center; }
.hc-foot__legal-warn{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 12px; }
.hc-foot__age{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:2px solid #f18833; color:#f18833; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.hc-foot__legal-warn span{ font-size:12.5px; font-weight:600; color:#ffffff; line-height:1.4; }
/* 1.7.301 (7 Nov): on phones the 18+ badge sits above the sentence, centred */
@media (max-width:767px){ .hc-foot__legal-warn{ flex-direction:column; gap:10px; } .hc-foot__legal-warn span{ display:block; text-align:center; } }
.hc-foot__legal-txt{ font-size:11px; line-height:1.55; color:#cdc9c5; }
.hc-foot__legal-disc{ display:block; max-width:1100px; margin:0 auto; }
.hc-foot__legal-disc p{ margin:0 0 6px; }
.hc-foot__bottom{ border-top:1px solid rgba(255,255,255,.08); }
.hc-foot__bottom-in{ max-width:1600px; margin:0 auto; padding:20px 50px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hc-foot__copy{ font-size:12.5px; color:#cfcbc7; }
.hc-foot__copy a{ color:#e8e5e2; text-decoration:none; margin-left:14px; }
.hc-foot__copy a:hover{ color:#f18833; }
.hc-foot__pay{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hc-foot__pay img{ width:58px; height:36px; max-width:none; object-fit:contain; background:#fff; border-radius:5px; padding:2px 4px; box-sizing:border-box; }
@media (max-width:1024px){
.hc-foot__main{ grid-template-columns:1fr 1fr; gap:30px; padding:36px 20px 28px; }
.hc-foot__brand{ grid-column:1/-1; }
.hc-foot__main > .hc-foot__col:nth-child(3){ padding-left:0; }
.hc-foot__slogan-in,.hc-foot__bottom-in,.hc-foot__legal-in{ padding:18px 20px; }
.hc-foot__bottom-in{ flex-direction:column; align-items:flex-start; }
.hc-foot__slogan-in span{ font-size:12px; letter-spacing:.12em; white-space:normal; text-align:center; }
.hc-foot__slogan-in::before, .hc-foot__slogan-in::after{ max-width:40px; }
.hc-foot__col a{ white-space:normal; }
}
/* HC FOOTER - column heading button + phone accordion (theme 1.7.280, 21 Oct, design B)
Setting: Customize > Footer > "Mobile: collapsible link groups" (hc_footer_mobile_accordion). Desktop unchanged. */
.hc-foot .hc-foot__tgl,.hc-foot .hc-foot__tgl:hover,.hc-foot .hc-foot__tgl:focus{ display:block; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; line-height:inherit; cursor:default; }
.hc-foot__tgl-ic,.hc-foot__tgl-ch{ display:none; }
@media (max-width:767px){
.hc-foot--acc .hc-foot__main{ grid-template-columns:minmax(0,1fr); gap:8px; }
.hc-foot--acc .hc-foot__brand{ margin:0 0 14px; }
.hc-foot--acc .hc-foot__col{ background:#3d3d3d; border-radius:12px; }
.hc-foot--acc .hc-foot__col h4{ margin:0; font-size:15px; font-weight:700; letter-spacing:.01em; text-transform:none; }
.hc-foot--acc .hc-foot__tgl,.hc-foot--acc .hc-foot__tgl:hover,.hc-foot--acc .hc-foot__tgl:focus{ display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; min-height:56px; padding:12px 14px; cursor:pointer; border-radius:12px; -webkit-tap-highlight-color:transparent; }
.hc-foot--acc .hc-foot__tgl:focus-visible{ outline:2px solid #f18833; outline-offset:-2px; }
.hc-foot--acc .hc-foot__tgl-ic{ display:flex; align-items:center; justify-content:center; flex:0 0 32px; height:32px; border-radius:9px; background:rgba(241,136,51,.16); color:#f18833; }
.hc-foot--acc .hc-foot__tgl-ic svg{ width:17px; height:17px; }
.hc-foot--acc .hc-foot__tgl-ch{ display:block; flex:0 0 18px; width:18px; height:18px; margin-inline-start:auto; color:#bdb8b3; transition:transform .25s ease,color .25s ease; }
.hc-foot--acc .hc-foot__col.is-open .hc-foot__tgl-ch{ transform:rotate(180deg); color:#f18833; }
.hc-foot--acc.hc-foot--js .hc-foot__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.hc-foot--acc.hc-foot--js .hc-foot__col.is-open .hc-foot__body{ grid-template-rows:1fr; }
.hc-foot--acc .hc-foot__body > ul{ overflow:hidden; min-height:0; padding:0; padding-inline:58px 14px; }
.hc-foot--acc .hc-foot__body > ul::after{ content:""; display:block; height:8px; }
.hc-foot--acc .hc-foot__col li{ margin:0; }
.hc-foot--acc .hc-foot__col a{ display:block; padding:8px 0; font-size:14.5px; }
.hc-foot--acc .hc-foot__loc a{ display:flex; }
}
/* HC FOOTER — Operated by / regulatory line (1.3.2) */
.hc-foot__operated{ background:#262626; border-top:1px solid rgba(255,255,255,.06); }
.hc-foot__operated-in{ max-width:1600px; margin:0 auto; padding:14px 50px; text-align:left; font-size:12.5px; line-height:1.55; color:#8a857f; }
.hc-foot__operated-in b{ color:#cfcbc7; font-weight:700; }
.hc-foot__operated-in .sep{ color:#5a5550; margin:0 7px; }
.hc-foot__operated-in .reg{ font-style:italic; }
.hc-foot__operated-in a{ color:#e8a36b; text-decoration:underline; font-style:italic; }
.hc-foot__operated-in a:hover{ color:#f18833; }
/* bottom bar copy left-aligned */
.hc-foot__copy{ text-align:left; }
@media (max-width:1024px){ .hc-foot__operated-in{ padding:14px 20px; white-space:normal; } }
/* HOME PAGE phone check (21 Oct, item 13): bottom row links must not break mid-word;
copyright on its own line, links wrap as whole units (13 languages + RTL) */
.hc-foot__copy a{ white-space:nowrap; }
@media (max-width:1024px){
.hc-foot__copy{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; line-height:1.5; }
.hc-foot__copy a, html[dir="rtl"] .hc-foot__copy a{ margin-left:0; margin-right:0; }
}
/* 1.7.302 (7 Nov): footer centred on phones - brand logo, description, email, social icons, copyright + links, Operated by.
Payment logos unchanged. html[dir] variants are also written so they beat the RTL rules (hc-rtl.css). */
@media (max-width:767px){
.hc-foot__brand{ text-align:center; }
.hc-foot__brand img{ display:block; margin-left:auto; margin-right:auto; }
.hc-foot__brand p{ margin-left:auto; margin-right:auto; }
.hc-foot__social{ justify-content:center; }
.hc-foot__copy, html[dir="rtl"] .hc-foot__copy{ align-self:stretch; justify-content:center; text-align:center; }
.hc-foot__operated-in, html[dir="rtl"] .hc-foot__operated-in{ text-align:center; }
}
/* =====================================================================
HERO STORE SELECTOR - active chip orange theme + global.svg icon (1.3.5)
store chip active orange
===================================================================== */
body .hc-storeselect .hc-storebar__item.is-active,
body .hc-storebar__item.is-active{
border-color:#f18833 !important;
background-color:#fdf0e7 !important;
background:#fdf0e7 !important;
color:#f18833 !important;
}
body .hc-storebar__item.is-active span,
body .hc-storebar__item.is-active .hc-globe,
body .hc-storebar__item.is-active > span{
color:#f18833 !important;
}
body .hc-storebar__item.is-active .hc-check{
background-color:#f18833 !important;
}
/* Global chip globe icon -> global.svg */
.hc-storebar__item .hc-globe{
background-image:url('/wp-content/themes/hc-child/assets/flags/global.svg') !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:transparent !important;
border-radius:50% !important;
width:20px !important;
height:20px !important;
-webkit-mask:none !important;
mask:none !important;
}
/* =====================================================================
STORE CHIP hover + status + PRODUCT CARD badge/button orange (1.3.6)
store chip hover + card orange
===================================================================== */
/* 1) store chip hover state orange */
body .hc-storebar__item:hover{
border-color:#f18833 !important;
background-color:#fdf0e7 !important;
}
/* 2) "Showing all products from" status box orange */
body .hc-storebar__status{
border-color:#f6c9a6 !important;
background-color:#fdf0e7 !important;
}
body .hc-storebar__status span,
body .hc-storebar__status b,
body .hc-storebar__status strong{
color:#f18833 !important;
}
/* 3) "Ships from X Store" badge border -> #f18833 (all store variants) */
body span.hc-origin{
border-color:#c5dd8f !important;
}
/* [HC AYAR] "Add to cart" button (in-stock SIMPLE product) -> light green main + dark green hover.
High specificity (body a.hc-card__atc.hc-btn--icon etc.) is required to beat WooCommerce/theme rules.
MAIN: background/background-color/border/color in the first block below | HOVER: second block (:hover) */
body .hc-card__body .hc-card__atc,
body .hc-btn.hc-card__atc,
body a.hc-card__atc.hc-btn--icon,
body .product .hc-card__atc,
body li.product .hc-card__atc{
background-color:#e7f5c4 !important;
background:#e7f5c4 !important;
border:1px solid #c5dd8f !important;
color:#4a6b1e !important;
}
body .hc-card__body .hc-card__atc:hover,
body .hc-btn.hc-card__atc:hover,
body a.hc-card__atc.hc-btn--icon:hover,
body .product .hc-card__atc:hover,
body li.product .hc-card__atc:hover{
background-color:#d4e89a !important;
background:#d4e89a !important;
border:1px solid #b2cd72 !important;
color:#4a6b1e !important;
}
/* [HC AYAR] "Select options" button (in-stock VARIABLE product) -> 1.7.289: exactly the same as "Add to cart"
(was light orange #fff7ef / border #f18833 / text #b85e0f, hover #ffe8d6). If the colour changes, change it together with Add to cart above.
MAIN: first block | HOVER: second block (:hover) */
body .hc-card__body .hc-card__select,
body .hc-btn.hc-card__select,
body a.hc-card__select.hc-btn--icon,
body .product .hc-card__select,
body li.product .hc-card__select{
background-color:#e7f5c4 !important;
background:#e7f5c4 !important;
border:1px solid #c5dd8f !important;
color:#4a6b1e !important;
}
body .hc-card__body .hc-card__select:hover,
body .hc-btn.hc-card__select:hover,
body a.hc-card__select.hc-btn--icon:hover,
body .product .hc-card__select:hover,
body li.product .hc-card__select:hover{
background-color:#d4e89a !important;
background:#d4e89a !important;
border:1px solid #b2cd72 !important;
color:#4a6b1e !important;
}
/* [HC AYAR] "Select options" icon -> 1.7.290 (option B): an "options" icon instead of the cart
(three slider bars). Colour stays the same (.hc-card .hc-btn--icon::before #7a3d0f); Add to cart keeps the cart icon.
Why: Select options does not add to cart, it opens the product page to pick a pack. */
.hc-card .hc-card__select.hc-btn--icon::before{
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* =====================================================================
NEW IN STOCK — homepage latest-products slider (1.3.8)
===================================================================== */
.hc-newin{ max-width:1600px; margin:0 auto; padding:60px 40px 20px; }
.hc-newin__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 28px; }
.hc-newin__eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#f18833; margin:0 0 8px; }
.hc-newin__title{ font-size:30px; font-weight:800; color:#555454; margin:0; line-height:1.15; }
.hc-newin__sub{ font-size:14.5px; color:#6b6b6b; margin:8px 0 0; }
.hc-newin__nav{ display:flex; gap:10px; flex:0 0 auto; }
.hc-newin__btn{ width:44px; height:44px; border-radius:50%; border:1.5px solid #e5e5e5; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; color:#1f1f1f; }
.hc-newin__btn:hover{ border-color:#f18833; color:#f18833; }
.hc-newin__btn svg{ width:18px; height:18px; }
.hc-newin__viewport{ overflow:hidden; }
.hc-newin__track{ display:flex; gap:22px; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.hc-newin__card{ flex:0 0 calc((100% - 66px)/4); box-sizing:border-box; background:#fff; border:1px solid #ececec; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; cursor:pointer; }
.hc-newin__card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.10); transform:translateY(-3px); }
.hc-newin__imgwrap{ position:relative; aspect-ratio:1/1; background:#f6f6f6; overflow:hidden; }
.hc-newin__imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-newin__tag{ position:absolute; top:12px; left:12px; background:#f18833; color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:20px; text-transform:uppercase; }
.hc-newin__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.hc-newin__badge{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; border:1.5px solid #f18833; border-radius:20px; padding:4px 11px 4px 6px; font-size:11.5px; font-weight:700; color:#1f1f1f; }
.hc-newin__badge img{ width:18px; height:18px; border-radius:50%; object-fit:contain; }
.hc-newin__name{ font-size:15px; font-weight:700; color:#1f1f1f; line-height:1.35; margin:0; }
.hc-newin__price{ font-size:16px; font-weight:800; color:#1f1f1f; margin-top:auto; }
.hc-newin__price .from{ font-size:12px; font-weight:600; color:#8a8a8a; margin-right:4px; }
.hc-newin__price del{ color:#9b9b9b; font-weight:600; font-size:13px; margin-right:6px; }
.hc-newin__price ins{ text-decoration:none; }
@media (max-width:1024px){ .hc-newin{ padding:48px 20px 16px; } .hc-newin__card{ flex:0 0 calc((100% - 22px)/2); } .hc-newin__title{ font-size:24px; } }
@media (max-width:560px){ .hc-newin__card{ flex:0 0 85%; } }
/* ==========================================================================
HC LOST PASSWORD - /lost-password/ (UR Pro, page-id 64711)
Card same as my-account: -100px top margin, 14px radius, 0 8px 28px rgba(0,0,0,.14)
min-height: resets the Kadence sticky-footer stretch -> footer gap 80px
========================================================================== */
body.hc-pg-lostpw article.entry.content-bg{
box-shadow:none !important;
}
body.hc-pg-lostpw #user-registration.user-registration{
max-width:1280px !important;
width:100%;
margin:-100px auto 0 !important;
background:#fff !important;
border-radius:14px !important;
box-shadow:0 8px 28px rgba(0,0,0,.14) !important;
padding:30px !important;
min-height:0;
}
body.hc-pg-lostpw #user-registration .ur-frontend-form{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:40px 0 !important;
max-width:520px;
width:100%;
margin:0 auto;
}
@media (max-width:782px){
body.hc-pg-lostpw #user-registration.user-registration{
padding:16px !important;
border-radius:12px !important;
min-height:0;
}
body.hc-pg-lostpw #user-registration .ur-frontend-form{
padding:24px 8px !important;
}
}
@media (max-width:1024px){
body.hc-pg-lostpw #user-registration.user-registration{
margin-top:0 !important; /* my-account has no margin on mobile either - 56px below the hero */
}
}
/* Kadence sticky-footer: on short pages #inner-wrap stretches and pushes the footer down.
Resetting .site min-height on this page makes the gaps the same as my-account
(desktop 80px, mobile 32px article->footer) so the card does not need to be inflated. */
body.hc-pg-lostpw .site{
min-height:0 !important;
}
/* --- /lost-password/?reset-link-sent=true - success screen --- */
body.hc-pg-lostpw #user-registration .ur-message-container{
max-width:520px;
margin:0 auto;
padding:80px 0;
}
body.hc-pg-lostpw #user-registration .ur-message-content{
text-align:center;
line-height:1.65;
margin-bottom:32px;
}
body.hc-pg-lostpw #user-registration .user-registration-message{
border-radius:8px;
}
body.hc-pg-lostpw .hc-back-to-login{
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
background:#f18833;
color:#fff !important;
border-radius:4px;
padding:14px 32px;
font-size:16px;
font-weight:500;
text-decoration:none;
transition:background .2s;
}
body.hc-pg-lostpw .hc-back-to-login:hover{
background:#d9741f;
}
/* --- /lost-password/?show-reset-form=true - new password screen --- */
body.hc-pg-lostpw .user-registration-ResetPassword .ur-form-grid > p:first-child{
text-align:center;
font-size:24px;
font-weight:700;
line-height:1.3;
margin:0 0 28px;
color:#1f1f1f;
}
body.hc-pg-lostpw .user-registration-ResetPassword .user-registration-Button{
width:100%;
padding:14px 32px;
font-size:16px;
font-weight:500;
border-radius:4px;
}
body.hc-pg-lostpw .user-registration-ResetPassword .user-registration-form-row.form-row{
margin-top:8px;
}
/* ==========================================================================
HC LOGIN - /login/ (UR Pro, page-id 64709)
Card same as lost-password / my-account. The wrapper is fixed at 520px in the
Customizer, so the card is widened here and the form stays in a 520px column.
========================================================================== */
body.hc-pg-login .site{
min-height:0 !important; /* Kadence sticky-footer stretch */
}
body.hc-pg-login article.entry.content-bg{
box-shadow:none !important; /* thin grey line below the card */
}
body.hc-pg-login #user-registration{
max-width:1280px !important;
width:100%;
margin:-100px auto 0 !important;
background:#fff !important;
border-radius:14px !important;
box-shadow:0 8px 28px rgba(0,0,0,.14) !important;
padding:30px !important;
}
body.hc-pg-login #user-registration .ur-frontend-form{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:40px 0 !important;
max-width:520px;
width:100%;
margin:0 auto !important;
}
@media (max-width:1024px){
body.hc-pg-login #user-registration{
margin-top:0 !important;
}
}
@media (max-width:782px){
body.hc-pg-login #user-registration{
padding:16px !important;
border-radius:12px !important;
}
body.hc-pg-login #user-registration .ur-frontend-form{
padding:24px 8px !important;
}
}
/* ==========================================================================
HC LOGIN (2) - /my-account/ logged-out view (page-id 10)
UR prints the login form on my-account when the visitor is not logged in (normal
behaviour). The card look (14px radius, shadow, -100px margin) already comes from UR's own
.user-registration rule; only the width, footer stretch and inner form column
are set here.
The wrapper id is #user-registration when logged in as well, so
:not(.logged-in) + :not(.user-registration-MyAccount) targets ONLY the login
view - the account card is not affected.
========================================================================== */
body:not(.logged-in).hc-pg-myaccount .site{
min-height:0 !important;
}
body:not(.logged-in).hc-pg-myaccount #user-registration:not(.user-registration-MyAccount){
max-width:1280px !important;
width:100%;
padding:30px !important;
}
body:not(.logged-in).hc-pg-myaccount #user-registration:not(.user-registration-MyAccount) .ur-frontend-form{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:40px 0 !important;
max-width:520px;
width:100%;
margin:0 auto !important;
}
@media (max-width:782px){
body:not(.logged-in).hc-pg-myaccount #user-registration:not(.user-registration-MyAccount){
padding:16px !important;
border-radius:12px !important;
}
body:not(.logged-in).hc-pg-myaccount #user-registration:not(.user-registration-MyAccount) .ur-frontend-form{
padding:24px 8px !important;
}
}
/* --- /login/ logged-in user: "You are already logged in" message --- */
body.logged-in.hc-pg-login #user-registration{
text-align:center;
padding:80px 30px !important;
font-size:16px;
line-height:1.6;
}
body.logged-in.hc-pg-login #user-registration a{
color:#f18833;
font-weight:500;
text-decoration:underline;
}
/* --- /lost-password/ error message: aligned with the form column --- */
body.hc-pg-lostpw #user-registration .user-registration-error,
body.hc-pg-lostpw #user-registration .user-registration-message-container{
max-width:520px;
margin:0 auto 20px;
box-sizing:border-box;
}
/* ==========================================================================
HC REGISTRATION - /registration/ (UR Pro, page-id 64708)
This page has NO separate #user-registration wrapper; .ur-frontend-form
is both card and form. The card is applied to it, and the inner form.register goes into a 520px column.
========================================================================== */
body.hc-pg-registration .site{
min-height:0 !important; /* Kadence sticky-footer stretch */
}
body.hc-pg-registration article.entry.content-bg{
box-shadow:none !important; /* thin grey line below the card */
}
body.hc-pg-registration .ur-frontend-form{
max-width:1280px !important;
width:100%;
margin:-100px auto 0 !important;
background:#fff !important;
border:0 !important;
border-radius:14px !important;
box-shadow:0 8px 28px rgba(0,0,0,.14) !important;
padding:70px 30px !important;
}
body.hc-pg-registration .ur-frontend-form form.register{
max-width:520px;
width:100%;
margin:0 auto;
}
body.hc-pg-registration .ur-frontend-form .ur-button-container{
width:100% !important;
max-width:none !important;
display:block !important;
margin-top:8px;
}
body.hc-pg-registration .ur-frontend-form .ur-submit-button{
width:100% !important;
display:block !important;
padding:14px 32px !important;
font-size:16px !important;
font-weight:500 !important;
border-radius:4px !important;
}
@media (max-width:1024px){
body.hc-pg-registration .ur-frontend-form{
margin-top:0 !important;
}
}
@media (max-width:782px){
body.hc-pg-registration .ur-frontend-form{
padding:24px 16px !important;
border-radius:12px !important;
}
}