/**
* footer.css
*
* "Change Astra footer to look more professional" — design changes #1.
*
* NOTE on scope: this file styles Astra's OWN footer markup, built via
* the native Footer Builder (Customizer → Footer Builder) rather than
* plain widget areas. Content lives in:
* Row 1, Col 1 → "HTML" element (About text)
* Row 1, Col 2 → "Social Icons" element (Instagram, TikTok, 2x Facebook)
* Row 2, Col 1 → "Menu" element, pointed at the "Footer Links" menu
* (Home, Shop, About, Contact Us, Privacy Policy,
* Refund & Return Policy, Shipping & Delivery Policy,
* Cancellation Policy)
* Row 2, Col 2 → "Widget" element → Custom HTML widget (phone/WhatsApp)
* Row 2, Col 3 → left empty
* Row 3 → Copyright element, untouched
*
* Builder elements ("HTML", "Menu", "Social Icons") render straight
* into .footer-widget-area WITHOUT a .widget wrapper — only the
* "Widget" element (a real WP sidebar) keeps .widget / .widget_* classes.
* Selectors below are written accordingly. These are Astra's documented
* builder class names — if your footer's actual markup differs, tell
* me and I'll adjust the selectors (right-click → Inspect on the live
* footer is the fastest way to confirm exact class names).
*
* WIDTH UPDATE: both max-width values below bumped from 1200px to
* 1400px, matching the rest of the site (checkout, cart, account,
* order confirmation).
*/
/* ---------------------------------------------------------------------
1. Widget area (the multi-column footer above the copyright bar)
--------------------------------------------------------------------- */
.footer-adv {
background: var(--brand-accent-dark);
padding: 56px 20px 40px;
}
.footer-adv .footer-adv-overlay {
max-width: 1400px;
margin: 0 auto;
}
/* Astra lays widget columns out as a row already; just give the
columns breathing room and a consistent top-aligned baseline. */
.footer-adv .footer-widget-area {
padding: 0 16px;
box-sizing: border-box;
}
.footer-adv .widget-title,
.footer-adv .widget h1,
.footer-adv .widget h2,
.footer-adv .widget h3,
.footer-adv .widget h4 {
font-family: var(--brand-font-display);
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
color: var(--brand-dark-fg);
margin: 0 0 20px;
letter-spacing: .08em;
position: relative;
padding-bottom: 12px;
}
.footer-adv .widget-title::after,
.footer-adv .widget h1::after,
.footer-adv .widget h2::after,
.footer-adv .widget h3::after,
.footer-adv .widget h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2px;
background: var(--brand-accent);
}
/* Small reusable icon glyphs, referenced by the contact-block rules
below. Generic phone/chat shapes, not brand logos. */
:root {
--icon-phone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.127.96.361%201.903.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E");
--icon-chat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M4%204h16a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H9l-5%204V6a2%202%200%200%201%202-2z'/%3E%3C/svg%3E");
}
.footer-adv .widget {
margin-bottom: 28px;
color: var(--brand-dark-fg-muted);
font-size: 14px;
line-height: 1.7;
}
.footer-adv .widget p {
color: var(--brand-dark-fg-muted);
margin: 0 0 10px;
}
.footer-adv .widget a {
color: var(--brand-dark-fg-muted);
text-decoration: none;
transition: color .15s ease;
}
.footer-adv .widget a:hover {
color: var(--brand-accent);
}
/* Nav/link-list widgets, IF any get added as real WP widgets (not the
builder Menu element — see section 1c below for that). */
.footer-adv .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-adv .widget ul li {
margin: 0 0 10px;
}
/* -----------------------------------------------------------------
1a. Row 1, Col 1 — "HTML" builder element (About text)
Builder elements aren't wrapped in .widget, so they need their own
text color/spacing rule. Scoped to .footer-widget-area's direct
paragraph so it doesn't bleed into Widget-element columns (which
already get the color from .widget p above).
----------------------------------------------------------------- */
.footer-adv .footer-widget-area > p,
.footer-adv .ast-builder-html-element p {
color: var(--brand-dark-fg-muted);
font-size: 14px;
line-height: 1.7;
margin: 0;
max-width: 32ch;
}
/* -----------------------------------------------------------------
1b. Row 1, Col 2 — "Social Icons" builder element
Now holds 4 entries (Instagram, TikTok, 2x Facebook) — allow wrap
on narrow columns instead of forcing one cramped row.
----------------------------------------------------------------- */
.footer-adv .ast-builder-social-elements {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.footer-adv .ast-builder-social-elements a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(217, 210, 199, 0.08);
color: var(--brand-dark-fg);
opacity: .9;
transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.footer-adv .ast-builder-social-elements a:hover {
opacity: 1;
color: var(--brand-accent);
background: rgba(217, 210, 199, 0.16);
}
/* -----------------------------------------------------------------
1c. Row 2, Col 1 — "Menu" builder element ("Footer Links": Home,
Shop, About, Contact Us, Privacy Policy, Refund & Return Policy,
Shipping & Delivery Policy, Cancellation Policy).
This is a DIFFERENT .footer-menu than the one in the bottom
copyright bar (section 2 below) — that one is deliberately kept
horizontal for a short 2-3 item menu; this one has 8 items, so it's
styled as a stacked "Quick Links" column instead, matching the look
of a normal link-list widget.
----------------------------------------------------------------- */
.footer-adv .footer-widget-area .footer-menu {
list-style: none;
display: block;
margin: 0;
padding: 0;
}
.footer-adv .footer-widget-area .footer-menu li {
margin: 0 0 10px;
}
.footer-adv .footer-widget-area .footer-menu a {
position: relative;
display: inline-block;
color: var(--brand-dark-fg-muted);
text-decoration: none;
font-size: 14px;
padding-left: 0;
transition: color .15s ease, padding-left .15s ease;
}
.footer-adv .footer-widget-area .footer-menu a:hover {
color: var(--brand-accent);
padding-left: 6px;
}
/* Faint rule between the two builder rows so the About/Social row and
the Links/Contact row read as distinct sections rather than one
undifferentiated block. */
.footer-adv .footer-adv-overlay > *:nth-child(2) {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid rgba(217, 210, 199, 0.1);
}
/* -----------------------------------------------------------------
1d. Row 2, Col 2 — "Widget" element → Custom HTML widget
(phone numbers + WhatsApp link, stacked with
, plus a small
note paragraph). This IS a real WP widget, so .widget/.widget p/
.widget a above already cover the base look — these rules just
add spacing between the two blocks and make the WhatsApp link
read as a distinct call-to-action.
----------------------------------------------------------------- */
.footer-adv .widget_custom_html p + p {
margin-top: 10px;
}
.footer-adv .widget_custom_html a {
display: inline-flex;
align-items: center;
margin-bottom: 6px;
}
.footer-adv .widget_custom_html a::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-right: 8px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.footer-adv .widget_custom_html a[href^="https://wa.me/"] {
color: var(--brand-accent);
font-weight: 500;
}
.footer-adv .widget_custom_html a[href^="https://wa.me/"]::before {
-webkit-mask-image: var(--icon-chat);
mask-image: var(--icon-chat);
}
.footer-adv .widget_custom_html a[href^="https://wa.me/"]:hover {
color: var(--brand-dark-fg);
}
/* ---------------------------------------------------------------------
2. Bottom bar (copyright text + optional separate footer menu
location, if one is ever assigned in Appearance → Menus — left
untouched per instructions, kept here only as a safety net).
--------------------------------------------------------------------- */
.ast-small-footer {
background: var(--brand-dark-bg);
border-top: 1px solid rgba(217, 210, 199, 0.12); /* faint line on --brand-dark-fg */
}
.ast-small-footer .ast-footer-overlay {
max-width: 1400px;
margin: 0 auto;
padding: 18px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ast-small-footer .ast-footer-copyright,
.ast-small-footer .ast-footer-copyright p {
color: var(--brand-dark-fg-muted);
font-size: 13px;
margin: 0;
}
.ast-small-footer .footer-menu,
.ast-small-footer .ast-footer-menu-wrap ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0;
padding: 0;
}
.ast-small-footer .footer-menu a,
.ast-small-footer .ast-footer-menu-wrap a {
color: var(--brand-dark-fg-muted);
text-decoration: none;
font-size: 13px;
transition: color .15s ease;
}
.ast-small-footer .footer-menu a:hover,
.ast-small-footer .ast-footer-menu-wrap a:hover {
color: var(--brand-accent);
}
/* ---------------------------------------------------------------------
3. Fallback — if the builder rows are ever cleared out entirely,
Astra falls back to its plain default copyright line (no
.footer-adv, just .site-info inside .ast-small-footer). Keep it
readable and on brand instead of looking unstyled.
--------------------------------------------------------------------- */
.site-footer .site-info,
.site-footer .site-info a {
color: var(--brand-dark-fg-muted);
font-size: 13px;
}
/* ---------------------------------------------------------------------
4. Mobile — stack widget columns and center the bottom bar
--------------------------------------------------------------------- */
@media (max-width: 768px) {
.footer-adv {
padding: 40px 20px 24px;
}
.footer-adv .footer-widget-area {
margin-bottom: 8px;
}
.footer-adv .footer-widget-area > p,
.footer-adv .ast-builder-html-element p {
max-width: none;
}
.ast-small-footer .ast-footer-overlay {
flex-direction: column;
text-align: center;
padding: 20px;
}
}