/* ==========================================================================
Gold Top — Template redesign, sitewide layer
Loaded after polish.css. Scoped under .has-goldtop-polish.gt-redesign.
§1 tokens · §2 buttons/eyebrow/container · §3 utility bar · §4 header
§5 category nav · §6 footer · §7 joinchat + sticky · §8 mobile drawer
========================================================================== */
/* --- §1 Tokens ------------------------------------------------------- */
.has-goldtop-polish.gt-redesign {
--gt-ink: #111114;
--gt-ink-2: #1a1a1e;
--gt-ink-3: #26262c;
--gt-on-ink: #f5f2ea;
--gt-on-ink-muted: #b8b4ab;
--gt-cream: #f5f2ea;
--gt-cream-2: #ece7db;
--gt-display: 'Fjalla One', 'Arial Narrow', sans-serif;
--gt-container: 1280px;
--gt-gutter: 24px;
}
@media (max-width: 768px) {
.has-goldtop-polish.gt-redesign { --gt-gutter: 16px; }
}
/* --- §2 Buttons, eyebrow, container ---------------------------------- */
.has-goldtop-polish.gt-redesign .gt-container {
max-width: var(--gt-container);
margin: 0 auto;
padding: 0 var(--gt-gutter);
}
.has-goldtop-polish.gt-redesign .gt-eyebrow {
display: inline-block;
margin: 0 0 8px;
color: var(--gt-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
.has-goldtop-polish.gt-redesign .gt-section-title {
margin: 0 0 20px;
font-family: var(--gt-display);
font-weight: 400;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.05;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.has-goldtop-polish.gt-redesign .gt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 26px;
border: 1.5px solid transparent;
border-radius: var(--gt-radius-pill);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color var(--gt-dur-base) var(--gt-ease), color var(--gt-dur-base) var(--gt-ease),
border-color var(--gt-dur-base) var(--gt-ease), transform var(--gt-dur-base) var(--gt-ease),
box-shadow var(--gt-dur-base) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign .gt-btn:focus-visible { outline: 2px solid var(--gt-accent); outline-offset: 3px; }
.has-goldtop-polish.gt-redesign .gt-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.has-goldtop-polish.gt-redesign .gt-btn--primary {
background: var(--gt-accent);
border-color: var(--gt-accent);
color: #fff;
box-shadow: 0 8px 20px rgba(243, 91, 4, 0.28);
}
.has-goldtop-polish.gt-redesign .gt-btn--primary:hover {
background: var(--gt-accent-hover);
border-color: var(--gt-accent-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(243, 91, 4, 0.36);
}
.has-goldtop-polish.gt-redesign .gt-btn--ghost { background: transparent; color: var(--gt-text); border-color: currentColor; }
.has-goldtop-polish.gt-redesign .gt-btn--ghost:hover { background: var(--gt-text); color: #fff; }
.has-goldtop-polish.gt-redesign .gt-btn--ghost-on-dark { color: var(--gt-on-ink); border-color: rgba(245, 242, 234, 0.7); }
.has-goldtop-polish.gt-redesign .gt-btn--ghost-on-dark:hover { background: var(--gt-on-ink); color: var(--gt-ink); }
.has-goldtop-polish.gt-redesign .gt-btn--sm { min-height: 40px; padding: 0 20px; font-size: 13px; }
.has-goldtop-polish.gt-redesign .gt-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gt-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: gap var(--gt-dur-fast) var(--gt-ease), color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign .gt-cta-link:hover { color: var(--gt-accent-hover); gap: 12px; }
.has-goldtop-polish.gt-redesign .gt-cta-link svg { width: 14px; height: 14px; }
.has-goldtop-polish.gt-redesign .gt-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* --- §5 Category nav (cream bar under the header) -------------------- */
.has-goldtop-polish.gt-redesign .gt-catnav {
background: var(--gt-cream);
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.has-goldtop-polish.gt-redesign .gt-catnav__inner { max-width: var(--gt-container); margin: 0 auto; padding: 8px var(--gt-gutter); }
.has-goldtop-polish.gt-redesign .gt-catnav__list {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 8px; align-items: stretch;
}
.has-goldtop-polish.gt-redesign .gt-catnav__item { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.has-goldtop-polish.gt-redesign .gt-catnav__pill {
display: flex; align-items: center; justify-content: center; gap: 9px;
height: 40px; padding: 0 12px;
border-radius: var(--gt-radius-pill);
color: var(--gt-text); text-decoration: none;
font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
transition: background-color var(--gt-dur-fast) var(--gt-ease), color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign .gt-catnav__icon { color: var(--gt-accent); flex: 0 0 auto; }
.has-goldtop-polish.gt-redesign .gt-catnav__chev { opacity: 0.6; transition: transform var(--gt-dur-base) var(--gt-ease); }
.has-goldtop-polish.gt-redesign .gt-catnav__item:hover > .gt-catnav__pill,
.has-goldtop-polish.gt-redesign .gt-catnav__item:focus-within > .gt-catnav__pill { background: #fff; color: var(--gt-accent); box-shadow: var(--gt-shadow-sm); }
.has-goldtop-polish.gt-redesign .gt-catnav__item:hover .gt-catnav__chev,
.has-goldtop-polish.gt-redesign .gt-catnav__item:focus-within .gt-catnav__chev { transform: rotate(180deg); }
.has-goldtop-polish.gt-redesign .gt-catnav__item.is-accent > .gt-catnav__pill { background: var(--gt-accent); color: #fff; }
.has-goldtop-polish.gt-redesign .gt-catnav__item.is-accent > .gt-catnav__pill .gt-catnav__icon { color: #fff; }
.has-goldtop-polish.gt-redesign .gt-catnav__item.is-accent:hover > .gt-catnav__pill { background: var(--gt-accent-hover); color: #fff; }
.has-goldtop-polish.gt-redesign .gt-catnav__panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
min-width: 240px; padding: 10px 0;
background: #fff; border-radius: var(--gt-radius-md);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14), 0 3px 8px rgba(15, 23, 42, 0.06);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity var(--gt-dur-base) var(--gt-ease), transform var(--gt-dur-base) var(--gt-ease), visibility var(--gt-dur-base);
}
.has-goldtop-polish.gt-redesign .gt-catnav__item:hover > .gt-catnav__panel,
.has-goldtop-polish.gt-redesign .gt-catnav__item:focus-within > .gt-catnav__panel,
.has-goldtop-polish.gt-redesign .gt-catnav__item.is-open > .gt-catnav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.has-goldtop-polish.gt-redesign .gt-catnav__cols { list-style: none; margin: 0; padding: 0; columns: 1; }
.has-goldtop-polish.gt-redesign .gt-catnav__cols--two { columns: 2; column-gap: 0; min-width: 440px; }
.has-goldtop-polish.gt-redesign .gt-catnav__cols li { break-inside: avoid; margin: 0; }
.has-goldtop-polish.gt-redesign .gt-catnav__cols a {
display: block; padding: 8px 18px;
color: var(--gt-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.has-goldtop-polish.gt-redesign .gt-catnav__cols a:hover,
.has-goldtop-polish.gt-redesign .gt-catnav__cols a:focus-visible { background: var(--gt-accent-soft); color: var(--gt-accent); outline: none; }
@media (max-width: 1024px) {
.has-goldtop-polish.gt-redesign .gt-catnav__list { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.has-goldtop-polish.gt-redesign .gt-catnav__list::-webkit-scrollbar { display: none; }
.has-goldtop-polish.gt-redesign .gt-catnav__item { flex: 0 0 auto; scroll-snap-align: start; }
.has-goldtop-polish.gt-redesign .gt-catnav__pill { background: #fff; height: 38px; }
.has-goldtop-polish.gt-redesign .gt-catnav__panel { display: none; }
.has-goldtop-polish.gt-redesign .gt-catnav__chev { display: none; }
}
/* --- §4 Header (Astra primary row, dark) ----------------------------- */
.has-goldtop-polish.gt-redesign #masthead .ast-primary-header-bar,
.has-goldtop-polish.gt-redesign #masthead .main-header-bar,
.has-goldtop-polish.gt-redesign #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
background: var(--gt-ink);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: none;
}
.has-goldtop-polish.gt-redesign #masthead .site-primary-header-wrap { min-height: 76px; }
.has-goldtop-polish.gt-redesign #masthead .site-header-primary-section-center { flex: 1 1 auto; justify-content: center; }
.has-goldtop-polish.gt-redesign #masthead .site-header-primary-section-right { gap: 8px; }
.has-goldtop-polish.gt-redesign #masthead .custom-logo { max-height: 62px; width: auto; height: auto; }
/* Pill search */
.has-goldtop-polish.gt-redesign .gt-hsearch {
position: relative; display: flex; align-items: center;
width: min(560px, 100%); margin: 0 24px;
}
.has-goldtop-polish.gt-redesign .gt-hsearch__input {
width: 100%; height: 48px; padding: 0 52px 0 22px;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--gt-radius-pill); color: var(--gt-on-ink); font-size: 14px;
transition: background-color var(--gt-dur-fast) var(--gt-ease), border-color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign .gt-hsearch__input::placeholder { color: var(--gt-on-ink-muted); }
.has-goldtop-polish.gt-redesign .gt-hsearch__input:focus {
outline: none; background: rgba(255, 255, 255, 0.1); border-color: var(--gt-accent);
box-shadow: 0 0 0 3px rgba(243, 91, 4, 0.18);
}
.has-goldtop-polish.gt-redesign .gt-hsearch__btn {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--gt-on-ink); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.has-goldtop-polish.gt-redesign .gt-hsearch__btn:hover { color: var(--gt-accent); }
/* Account + cart: white icons, orange on hover, text label on desktop.
Note (Step 5 live inspection): this Astra build has no .ast-cart-menu-wrap
or .count badge — the cart icon type is "icon + price total", so the icon
and price live directly inside the anchor .cart-container (inside
.ast-site-header-cart-li, inside .ast-site-header-cart). Selectors below
target .cart-container in place of the brief's .ast-cart-menu-wrap; the
.count rule is kept as a harmless no-op in case the cart-icon-type option
is ever switched to show an item-count badge. */
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart a,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container { color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap:hover,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart a:hover { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap svg,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart svg { fill: currentColor; }
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--gt-radius-md);
}
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap::after { content: 'Mi cuenta'; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container::after { content: 'Carrito'; }
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap::after,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container::after {
font-size: 13px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container .count,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .count {
background: var(--gt-accent); color: #fff; border: 0;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
@media (max-width: 921px) {
.has-goldtop-polish.gt-redesign #masthead .ast-header-account-wrap::after,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container::after { content: none; }
}
@media (max-width: 768px) {
.has-goldtop-polish.gt-redesign .gt-hsearch { display: none; }
.has-goldtop-polish.gt-redesign #masthead .site-primary-header-wrap { min-height: 64px; }
.has-goldtop-polish.gt-redesign #masthead .custom-logo { max-height: 46px; }
.has-goldtop-polish.gt-redesign #masthead .ast-mobile-header-wrap .ast-primary-header-bar { background: var(--gt-ink); }
.has-goldtop-polish.gt-redesign #masthead .ast-button-wrap .menu-toggle,
.has-goldtop-polish.gt-redesign #masthead .ast-button-wrap .menu-toggle .ast-icon { color: var(--gt-on-ink); }
}
/* --- §8 Mobile drawer (Astra popup) ---------------------------------- */
.has-goldtop-polish.gt-redesign #ast-mobile-popup .ast-mobile-popup-inner { background: var(--gt-ink); color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign #ast-mobile-popup .ast-mobile-popup-header .menu-toggle-close { color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign #ast-mobile-popup .main-header-menu .menu-item > .menu-link {
color: var(--gt-on-ink); border-color: rgba(255, 255, 255, 0.06);
}
.has-goldtop-polish.gt-redesign #ast-mobile-popup .main-header-menu .menu-item > .menu-link:hover,
.has-goldtop-polish.gt-redesign #ast-mobile-popup .main-header-menu .current-menu-item > .menu-link { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign #ast-mobile-popup .main-header-menu .ast-menu-toggle { color: var(--gt-on-ink-muted); }
.has-goldtop-polish.gt-redesign #ast-mobile-popup .sub-menu { background: var(--gt-ink-2); }
/* --- §3 Utility bar --------------------------------------------------- */
.has-goldtop-polish.gt-redesign .gt-utility-bar {
background: var(--gt-ink); color: var(--gt-on-ink);
font-size: 12.5px; line-height: 1.3;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.has-goldtop-polish.gt-redesign .gt-utility-bar__inner {
max-width: var(--gt-container); margin: 0 auto; padding: 8px var(--gt-gutter);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.has-goldtop-polish.gt-redesign .gt-utility-bar__perks,
.has-goldtop-polish.gt-redesign .gt-utility-bar__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.has-goldtop-polish.gt-redesign .gt-utility-bar__perk { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.has-goldtop-polish.gt-redesign .gt-utility-bar__perk svg { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign .gt-utility-bar__link { color: var(--gt-on-ink); text-decoration: none; font-weight: 500; }
.has-goldtop-polish.gt-redesign .gt-utility-bar__link:hover { color: var(--gt-accent); }
@media (max-width: 768px) {
.has-goldtop-polish.gt-redesign .gt-utility-bar__links { display: none; }
.has-goldtop-polish.gt-redesign .gt-utility-bar__inner { justify-content: center; padding: 6px var(--gt-gutter); font-size: 11.5px; }
.has-goldtop-polish.gt-redesign .gt-utility-bar__perks { gap: 14px; }
}
/* --- §6 Footer -------------------------------------------------------- */
.has-goldtop-polish.gt-redesign #colophon { background: var(--gt-ink); color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign .gt-footer { background: var(--gt-ink); color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign .gt-footer__inner {
max-width: var(--gt-container); margin: 0 auto; padding: 56px var(--gt-gutter) 40px;
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px;
}
.has-goldtop-polish.gt-redesign .gt-footer__logo img { max-height: 48px; width: auto; }
.has-goldtop-polish.gt-redesign .gt-footer__tagline { margin: 14px 0 0; color: var(--gt-on-ink-muted); font-size: 14px; max-width: 32ch; }
.has-goldtop-polish.gt-redesign .gt-footer__socials { display: flex; gap: 10px; margin-top: 18px; }
.has-goldtop-polish.gt-redesign .gt-footer__social {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
background: rgba(255, 255, 255, 0.06); color: var(--gt-on-ink); transition: background-color var(--gt-dur-fast) var(--gt-ease), color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign .gt-footer__social:hover { background: var(--gt-accent); color: #fff; }
.has-goldtop-polish.gt-redesign .gt-footer__heading {
margin: 0 0 14px; color: var(--gt-accent); font-family: inherit;
font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.has-goldtop-polish.gt-redesign .gt-footer__list,
.has-goldtop-polish.gt-redesign .gt-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.has-goldtop-polish.gt-redesign .gt-footer__link { color: var(--gt-on-ink); text-decoration: none; font-size: 14px; }
.has-goldtop-polish.gt-redesign .gt-footer__link:hover { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign .gt-footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign .gt-footer__contact svg { color: var(--gt-accent); flex: 0 0 auto; margin-top: 2px; }
.has-goldtop-polish.gt-redesign .gt-footer__contact a { color: inherit; text-decoration: none; }
.has-goldtop-polish.gt-redesign .gt-footer__contact a:hover { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign .gt-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 18px var(--gt-gutter); text-align: center; }
.has-goldtop-polish.gt-redesign .gt-footer .gt-footer-contact__copyright {
background: none; max-width: none; border-radius: 0; padding: 0;
color: var(--gt-on-ink-muted); font-size: 13px;
}
@media (max-width: 900px) {
.has-goldtop-polish.gt-redesign .gt-footer__inner { grid-template-columns: 1fr 1fr; padding: 40px var(--gt-gutter) 28px; }
.has-goldtop-polish.gt-redesign .gt-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.has-goldtop-polish.gt-redesign .gt-footer__inner { grid-template-columns: 1fr; gap: 24px; }
}
/* --- §7 Joinchat button + sticky bar (dark variants) ------------------ */
/* Joinchat: keep the plugin, move it bottom-right and paint it orange.
The plugin's own .joinchat--left rules pin the inner button and tooltip
to the LEFT of a 0-width container; we re-pin them to the right so the
button doesn't overflow the viewport when the admin option is "left". */
.has-goldtop-polish.gt-redesign .joinchat { left: auto !important; right: 20px !important; }
.has-goldtop-polish.gt-redesign .joinchat--left { left: auto !important; right: 20px !important; }
.has-goldtop-polish.gt-redesign .joinchat--left .joinchat__button { left: auto !important; right: 8px !important; }
.has-goldtop-polish.gt-redesign .joinchat--left .joinchat__tooltip { left: auto !important; right: calc(var(--s) + 16px) !important; }
.has-goldtop-polish.gt-redesign .joinchat--left .joinchat__tooltip::after { left: auto; right: -6px; border-width: 6px 0 6px 8px; border-right-color: transparent; border-left-color: #fff; }
.has-goldtop-polish.gt-redesign .joinchat--left .joinchat__qr { left: auto !important; right: 8px !important; }
.has-goldtop-polish.gt-redesign .joinchat--left .joinchat__badge { left: auto !important; right: 4px !important; }
.has-goldtop-polish.gt-redesign .joinchat__button { background-color: var(--gt-accent) !important; box-shadow: 0 10px 24px rgba(243,91,4,.36), 0 4px 12px rgba(15,23,42,.16) !important; }
.has-goldtop-polish.gt-redesign .joinchat__button:hover { background-color: var(--gt-accent-hover) !important; }
.has-goldtop-polish.gt-redesign .joinchat__tooltip { right: 0; left: auto; }
/* Sticky condensed header: ink instead of white so it matches the header. */
.has-goldtop-polish.gt-redesign .gt-sticky { background: var(--gt-ink); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.has-goldtop-polish.gt-redesign .gt-sticky__search-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign .gt-sticky__search-input::placeholder { color: var(--gt-on-ink-muted); }
.has-goldtop-polish.gt-redesign .gt-sticky__search-btn { background: var(--gt-accent); color: #fff; }
.has-goldtop-polish.gt-redesign .gt-sticky-cart,
.has-goldtop-polish.gt-redesign .gt-sticky__search-mobile,
.has-goldtop-polish.gt-redesign .gt-sticky__logo-text { color: var(--gt-on-ink); }
.has-goldtop-polish.gt-redesign .gt-sticky-cart__count { background: var(--gt-accent); color: #fff; }
/* --- §9 Shop archive cards: add-to-cart button ----------------------- */
/* Shop, category, tag and search-result cards. The AJAX "Agregar al
carrito" becomes the redesign's primary pill (orange, white uppercase
label, cart icon, full card width); "Leer más" (no ajax) is a ghost pill.
WooCommerce's own .loading / .added states and the injected "Ver carrito"
link are kept and restyled. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 44px;
margin-top: auto;
padding: 0 18px;
border: 1.5px solid var(--gt-accent);
border-radius: var(--gt-radius-pill);
background: var(--gt-accent);
color: #fff;
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
box-shadow: 0 6px 16px rgba(243, 91, 4, 0.22);
transition:
background-color var(--gt-dur-base) var(--gt-ease),
border-color var(--gt-dur-base) var(--gt-ease),
color var(--gt-dur-base) var(--gt-ease),
transform var(--gt-dur-base) var(--gt-ease),
box-shadow var(--gt-dur-base) var(--gt-ease);
}
/* Cart icon before the label (mask so it takes the text colour). */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button.add_to_cart_button::before {
content: '';
width: 16px;
height: 16px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button:hover,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button:focus-visible {
background: var(--gt-accent-hover);
border-color: var(--gt-accent-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(243, 91, 4, 0.32);
outline: none;
}
/* "Leer más" (no AJAX add) → ghost pill. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button:not(.add_to_cart_button) {
background: transparent;
color: var(--gt-accent);
box-shadow: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button:not(.add_to_cart_button):hover {
background: var(--gt-accent);
color: #fff;
}
/* WooCommerce AJAX states: keep the pill steady while loading, confirm when added. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button.loading {
opacity: 0.75;
transform: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button.loading::after {
position: static;
margin-left: 4px;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button.added {
background: var(--gt-ink);
border-color: var(--gt-ink);
box-shadow: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.button.added::after {
display: none;
}
/* "Ver carrito" link WooCommerce injects after a successful add. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.added_to_cart {
display: block;
margin-top: 8px;
text-align: center;
color: var(--gt-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag, .search-results) ul.products > li.product > .astra-shop-summary-wrap > a.added_to_cart:hover {
color: var(--gt-accent-hover);
text-decoration: underline;
}
/* --- §10 Shop sidebar (search + category tree) ------------------------ */
/* Shop, category and tag archives. Widgets are flat; the search block and
the WooCommerce "Product Categories List" block get the redesign look.
Tree collapsing (chevrons, current branch open) is driven by redesign.js,
which adds .gt-cats to the block and .has-children/.is-open/.is-current
to the list items. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary {
padding: 8px 20px 200px 28px;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .widget,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .ast-woo-sidebar-widget {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0 0 28px;
box-shadow: none;
}
/* Search block */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__label {
display: block;
margin: 0 0 10px;
padding: 0;
border: 0;
color: var(--gt-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__inside-wrapper {
display: flex;
align-items: stretch;
gap: 8px;
border: 0;
padding: 0;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__input {
flex: 1 1 auto;
min-width: 0;
height: 42px;
padding: 0 16px;
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-pill);
background: var(--gt-surface);
color: var(--gt-text);
font-size: 14px;
transition: border-color var(--gt-dur-fast) var(--gt-ease), box-shadow var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__input:focus {
outline: none;
border-color: var(--gt-accent);
box-shadow: 0 0 0 3px var(--gt-accent-soft);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__button {
flex: 0 0 auto;
height: 42px;
margin: 0;
padding: 0 18px;
border: 1.5px solid var(--gt-accent);
border-radius: var(--gt-radius-pill);
background: var(--gt-accent);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 6px 16px rgba(243, 91, 4, 0.22);
transition: background-color var(--gt-dur-base) var(--gt-ease), border-color var(--gt-dur-base) var(--gt-ease), transform var(--gt-dur-base) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wp-block-search__button:hover {
background: var(--gt-accent-hover);
border-color: var(--gt-accent-hover);
transform: translateY(-1px);
}
/* Category tree */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories::before {
content: 'Categorías';
display: block;
margin: 0 0 10px;
color: var(--gt-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list {
list-style: none;
margin: 0;
padding: 0;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item {
margin: 0;
padding: 0;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
border-bottom: 1px solid var(--gt-border);
}
/* Row: [toggle] name ……… count */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cats .gt-cat-row {
display: flex;
align-items: center;
gap: 6px;
min-height: 40px;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item > .gt-cat-row > a,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item > a {
flex: 1 1 auto;
min-width: 0;
color: var(--gt-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
line-height: 1.3;
transition: color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item a:hover {
color: var(--gt-accent);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item.is-current > .gt-cat-row > a {
color: var(--gt-accent);
font-weight: 700;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item-count {
flex: 0 0 auto;
min-width: 26px;
padding: 2px 8px;
border-radius: var(--gt-radius-pill);
background: var(--gt-surface-alt);
color: var(--gt-text-muted);
font-size: 11px;
font-weight: 600;
text-align: center;
line-height: 1.4;
}
/* Children: indented, lighter, hairline on the left; hidden until opened */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-1,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-2 {
margin: 0 0 8px 10px;
padding-left: 12px;
border-left: 2px solid var(--gt-cream-2);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-1 .gt-cat-row,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-2 .gt-cat-row {
min-height: 32px;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-1 > li > .gt-cat-row > a,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list--depth-2 > li > .gt-cat-row > a {
font-size: 13.5px;
font-weight: 500;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cats .has-children > .wc-block-product-categories-list {
display: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cats .has-children.is-open > .wc-block-product-categories-list {
display: block;
}
/* Chevron toggle button */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cat-toggle {
flex: 0 0 auto;
width: 26px;
height: 26px;
margin: 0 0 0 -4px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--gt-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--gt-dur-fast) var(--gt-ease), color var(--gt-dur-fast) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cat-toggle:hover,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cat-toggle:focus-visible {
background: var(--gt-accent-soft);
color: var(--gt-accent);
outline: none;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cat-toggle svg {
width: 12px;
height: 12px;
transition: transform var(--gt-dur-base) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .has-children.is-open > .gt-cat-row > .gt-cat-toggle svg {
transform: rotate(90deg);
}
/* Leaf rows align with parent names (space where the chevron would be). */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cats .gt-cat-row--leaf {
padding-left: 22px;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .gt-cats .is-hidden {
display: none;
}
@media (max-width: 921px) {
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary {
padding: 8px 0 40px;
}
}
/* --- §11 Header cart element (Astra woo-cart) ------------------------ */
/* Astra's inline CSS paints the icon and badge black (Customizer defaults),
invisible on the dark header, and puts the "$0" total before the icon.
Re-order to [icon + badge] [Carrito] [total] with light icon, orange
badge and a muted total; the label comes from §4's ::after. */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 0;
border-radius: var(--gt-radius-md);
color: var(--gt-on-ink);
text-decoration: none;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container::after { order: 2; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-addon-cart-wrap {
display: contents;
color: var(--gt-on-ink);
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart i.astra-icon {
order: 1;
position: relative;
display: inline-flex;
align-items: center;
padding: 0;
margin: 0;
font-size: 0;
line-height: 1;
color: var(--gt-on-ink);
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart i.astra-icon .ast-icon,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart i.astra-icon svg {
display: block;
width: 22px;
height: 22px;
fill: currentColor;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart i.astra-icon svg path { fill: currentColor; }
/* Count badge (Astra renders it as ::after with data-cart-total) */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-addon-cart-wrap .ast-icon-shopping-cart:after,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart i.astra-icon:after {
top: -9px;
right: -11px;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 5px;
border: 0;
border-radius: 999px;
background-color: var(--gt-accent);
color: #fff;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Total: after the label, muted */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-woo-header-cart-info-wrap {
order: 3;
display: inline-block;
padding: 0;
line-height: 1;
color: var(--gt-on-ink-muted);
font-size: 12px;
font-weight: 600;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container:hover,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container:hover .ast-addon-cart-wrap,
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container:hover i.astra-icon { color: var(--gt-accent); }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container:hover .ast-woo-header-cart-info-wrap { color: var(--gt-on-ink); }
@media (max-width: 921px) {
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-woo-header-cart-info-wrap { display: none; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .cart-container { padding: 6px; }
}
/* --- §12 Header search width ------------------------------------------ */
/* Astra's centre-column layout sizes the middle cell to its content
(1fr auto 1fr), which shrink-wraps the search pill. Give the primary row
a flexible centre column and let the form fill it up to 640px. */
.has-goldtop-polish.gt-redesign #masthead .ast-primary-header-bar .ast-builder-grid-row.ast-grid-center-col-layout {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.has-goldtop-polish.gt-redesign #masthead .ast-primary-header-bar .site-header-primary-section-center {
min-width: 0;
width: 100%;
justify-content: center;
}
.has-goldtop-polish.gt-redesign #masthead .ast-primary-header-bar .site-header-primary-section-center > .ast-builder-layout-element {
flex: 1 1 auto;
min-width: 0;
display: flex;
justify-content: center;
}
.has-goldtop-polish.gt-redesign .gt-hsearch {
width: 100%;
max-width: 640px;
margin: 0 20px;
}
@media (max-width: 1100px) {
.has-goldtop-polish.gt-redesign .gt-hsearch { max-width: 480px; margin: 0 12px; }
}
/* Sidebar category counts: drop WooCommerce's "( )" pseudo-elements, bigger number. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item-count::before,
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item-count::after {
content: none !important;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #secondary .wc-block-product-categories-list-item-count {
min-width: 30px;
padding: 3px 9px;
font-size: 13px;
font-weight: 700;
color: var(--gt-text);
background: var(--gt-cream-2);
}
/* --- §13 Header cart dropdown (Astra mini-cart on hover) -------------- */
/* Panel: white card, rounded, soft shadow. Empty state: muted message with
a cart glyph + primary "Continuar comprando". Filled state: compact item
rows, subtotal with orange amount, "Ver carrito" ghost + "Finalizar
compra" primary, stacked. */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart {
width: 320px;
padding: 0;
border: 0;
border-radius: var(--gt-radius-lg);
background: #fff;
color: var(--gt-text);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08);
overflow: hidden;
font-size: 14px;
line-height: 1.45;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart:before { display: none; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart:after {
border-width: 7px;
border-bottom-color: #fff;
right: 22px;
}
/* Empty state */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart_content > .woocommerce-mini-cart__empty-message { display: none; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-mini-cart-empty {
padding: 26px 22px 22px;
text-align: center;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-mini-cart-message {
padding: 0 0 18px;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-mini-cart-message::before {
content: '';
display: block;
width: 40px;
height: 40px;
margin: 0 auto 12px;
background: var(--gt-accent);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0.85;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-mini-cart-message .woocommerce-mini-cart__empty-message {
display: block;
margin: 0;
color: var(--gt-text-muted);
font-size: 14px;
font-weight: 500;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .ast-mini-cart-empty .woocommerce-mini-cart__buttons { margin: 0; }
/* Buttons (both states) */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
margin: 0;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 0;
padding: 0 18px;
border: 1.5px solid var(--gt-accent);
border-radius: var(--gt-radius-pill);
background: var(--gt-accent);
color: #fff;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 6px 16px rgba(243, 91, 4, 0.22);
transition: background-color var(--gt-dur-base) var(--gt-ease), border-color var(--gt-dur-base) var(--gt-ease), color var(--gt-dur-base) var(--gt-ease), transform var(--gt-dur-base) var(--gt-ease);
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:hover {
background: var(--gt-accent-hover);
border-color: var(--gt-accent-hover);
color: #fff;
transform: translateY(-1px);
}
/* "Ver carrito" (the non-checkout button when the cart has items) → ghost */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):not(.ast-continue-shopping) {
background: transparent;
color: var(--gt-accent);
box-shadow: none;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):not(.ast-continue-shopping):hover {
background: var(--gt-accent);
color: #fff;
}
/* Filled state: items */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget {
margin: 0;
padding: 10px 18px 4px;
max-height: 50vh;
overflow-y: auto;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item {
position: relative;
display: grid;
grid-template-columns: 52px 1fr 20px;
gap: 4px 12px;
align-items: center;
padding: 10px 0;
margin: 0;
border-bottom: 1px solid var(--gt-border);
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item:last-child { border-bottom: 0; }
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item a.remove {
position: static;
grid-column: 3;
grid-row: 1 / span 2;
width: 22px;
height: 22px;
line-height: 20px;
border: 1px solid var(--gt-border);
border-radius: 50%;
color: var(--gt-text-muted) !important;
font-size: 15px;
text-align: center;
background: #fff;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item a.remove:hover {
background: var(--gt-danger);
border-color: var(--gt-danger);
color: #fff !important;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item > a:not(.remove) {
display: contents;
color: var(--gt-text);
font-weight: 600;
font-size: 13.5px;
line-height: 1.3;
text-decoration: none;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item img {
grid-column: 1;
grid-row: 1 / span 2;
width: 52px;
max-width: 52px;
height: 52px;
margin: 0;
object-fit: contain;
border-radius: var(--gt-radius-sm);
background: var(--gt-surface-alt);
float: none;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item .quantity {
grid-column: 2;
grid-row: 2;
color: var(--gt-text-muted);
font-size: 12.5px;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart .product_list_widget li.mini_cart_item .quantity .amount { color: var(--gt-text); font-weight: 700; }
/* Filled state: total + buttons */
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0;
padding: 12px 18px;
border-top: 1px solid var(--gt-border);
background: var(--gt-cream);
font-size: 13px;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__total strong {
width: auto;
color: var(--gt-text-muted);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 11.5px;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__total .amount {
width: auto;
padding: 0;
color: var(--gt-accent);
font-size: 16px;
font-weight: 800;
}
.has-goldtop-polish.gt-redesign #masthead .ast-site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__buttons {
padding: 14px 18px 18px;
}
/* --- §14 Archive title accent ----------------------------------------- */
/* Replaces the thin 2px rule under "AMPLIFICADORES" etc. with a short,
rounded gradient bar that carries a soft orange glow, plus a hairline
echo beneath it — reads as a deliberate accent rather than a border. */
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title {
font-family: var(--gt-display);
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
padding-bottom: 0.45em;
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title::after {
content: '';
display: block;
width: 56px;
height: 5px;
margin: 0.4em auto 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--gt-accent) 0%, #ff9a4a 100%);
box-shadow: 0 6px 16px rgba(243, 91, 4, 0.32);
}
.has-goldtop-polish.gt-redesign:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 160px;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, rgba(243, 91, 4, 0) 0%, rgba(243, 91, 4, 0.35) 50%, rgba(243, 91, 4, 0) 100%);
}