/* ========================================================================== Grainhouse – theme styles Tokens are set in :root (colours come from the customizer via inline CSS). ========================================================================== */ :root { --gh-primary: #c8743c; --gh-primary-rgb: 200, 116, 60; --gh-primary-dark: #ad6333; --gh-primary-soft: #f8ede4; --gh-secondary: #2b2a28; --gh-secondary-rgb: 43, 42, 40; --gh-text: #2b2a28; --gh-muted: #777670; --gh-faint: #a9a7a0; --gh-line: #e7e4df; --gh-line-strong: #d6d2cb; --gh-bg: #ffffff; --gh-bg-soft: #f7f4ef; --gh-bg-alt: #f1ede6; --gh-success: #4f8a4a; --gh-danger: #d0453a; --gh-warning: #e0a63a; --gh-radius: 6px; --gh-radius-lg: 14px; --gh-shadow: 0 10px 30px rgba(43, 42, 40, 0.10); --gh-shadow-sm: 0 2px 8px rgba(43, 42, 40, 0.08); --gh-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gh-container: 1290px; --gh-gutter: 20px; --gh-shop-columns: 4; --gh-header-height: 72px; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--gh-font); font-size: 15px; line-height: 1.6; color: var(--gh-text); background: var(--gh-bg); -webkit-font-smoothing: antialiased; } body.gh-no-scroll { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; transition: color .2s ease; } a:hover { color: var(--gh-primary); } h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 700; line-height: 1.25; color: var(--gh-secondary); letter-spacing: -0.01em; } h1 { font-size: clamp(28px, 3.4vw, 40px); } h2 { font-size: clamp(24px, 2.6vw, 30px); } h3 { font-size: 20px; } h4 { font-size: 17px; } h5 { font-size: 15px; } h6 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } p { margin: 0 0 1.2em; } ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gh-line); } th { font-weight: 700; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select, textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--gh-line-strong); border-radius: var(--gh-radius); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gh-primary); box-shadow: 0 0 0 3px rgba(var(--gh-primary-rgb), .18); } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232b2a28' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } label { font-weight: 600; font-size: 14px; } hr { border: 0; border-top: 1px solid var(--gh-line); margin: 2em 0; } blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 3px solid var(--gh-primary); background: var(--gh-bg-soft); font-size: 17px; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } pre { padding: 1em; background: var(--gh-bg-soft); overflow: auto; border-radius: var(--gh-radius); } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 16px; background: var(--gh-secondary); color: #fff; clip: auto; clip-path: none; width: auto; height: auto; } .gh-container { width: 100%; max-width: calc(var(--gh-container) + var(--gh-gutter) * 2); margin: 0 auto; padding: 0 var(--gh-gutter); } .gh-muted { color: var(--gh-muted); } .gh-icon { flex: none; } /* Buttons */ .gh-btn, .button, .wp-element-button, .wp-block-button__link, button[type="submit"]:not(.gh-search__submit):not(.gh-offcanvas__search button), input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid var(--gh-secondary); border-radius: var(--gh-radius); background: var(--gh-secondary); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .01em; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; text-decoration: none; -webkit-appearance: none; appearance: none; } .gh-btn:hover, .button:hover, .wp-block-button__link:hover, button[type="submit"]:not(.gh-search__submit):hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--gh-primary); border-color: var(--gh-primary); color: #fff; } .gh-btn--primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .single_add_to_cart_button { background: var(--gh-primary); border-color: var(--gh-primary); } .gh-btn--primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .single_add_to_cart_button:hover { background: var(--gh-primary-dark); border-color: var(--gh-primary-dark); } .gh-btn--ghost { background: transparent; color: var(--gh-secondary); } .gh-btn--ghost:hover { background: var(--gh-secondary); color: #fff; } .gh-btn--dark { background: var(--gh-secondary); border-color: var(--gh-secondary); } .gh-btn--lg { padding: 15px 30px; font-size: 15px; } .button.disabled, .button:disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .5; cursor: not-allowed; } .button.loading { position: relative; color: transparent !important; } .button.loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: gh-spin .7s linear infinite; } @keyframes gh-spin { to { transform: rotate(360deg); } } .added_to_cart { display: none; } /* Badges / pills */ .gh-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; pointer-events: none; } .gh-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--gh-secondary); } .gh-badge--sale { background: var(--gh-danger); } .gh-badge--hot { background: var(--gh-primary); } .gh-badge--new { background: var(--gh-success); } .gh-badge--out { background: #8c8a84; } .gh-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .gh-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .gh-stock--in { color: var(--gh-success); } .gh-stock--low { color: var(--gh-warning); } .gh-stock--out { color: var(--gh-danger); } .gh-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-primary); margin-bottom: 14px; } .gh-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gh-primary); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; } /* Stars */ .gh-stars { display: inline-flex; gap: 1px; color: #e3b23c; vertical-align: middle; } .gh-stars__star { display: inline-flex; color: var(--gh-line-strong); } .gh-stars__star.is-full { color: #e3b23c; } .gh-stars__star.is-half { background: linear-gradient(90deg, #e3b23c 50%, var(--gh-line-strong) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .gh-stars__count { margin-left: 6px; font-size: 13px; color: var(--gh-muted); vertical-align: middle; } /* Empty state */ .gh-empty { text-align: center; padding: 70px 20px; max-width: 520px; margin: 0 auto; } .gh-empty .gh-icon { color: var(--gh-faint); margin-bottom: 18px; } .gh-empty p { color: var(--gh-muted); } /* Toasts */ .gh-toasts { position: fixed; right: 20px; bottom: 90px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .gh-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--gh-radius); background: var(--gh-secondary); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--gh-shadow); animation: gh-toast .3s ease; pointer-events: auto; } .gh-toast a { color: var(--gh-primary); filter: brightness(1.3); } @keyframes gh-toast { from { opacity: 0; transform: translateY(10px); } } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .gh-topbar { background: var(--gh-secondary); color: rgba(255,255,255,.8); font-size: 12.5px; font-weight: 600; } .gh-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; } .gh-topbar__right { display: flex; align-items: center; gap: 22px; } .gh-topbar__menu { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; } .gh-topbar a:hover { color: #fff; } .gh-topbar__email { display: inline-flex; align-items: center; gap: 6px; } .gh-social { display: flex; gap: 6px; } .gh-social__link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: background .2s ease, color .2s ease; } .gh-social__link:hover { background: rgba(255,255,255,.12); color: #fff; } .gh-header { position: relative; z-index: 100; background: #fff; } .gh-header__main { border-bottom: 1px solid var(--gh-line); } .gh-header__inner { display: flex; align-items: center; gap: 28px; min-height: 90px; } .gh-header__burger { display: none; padding: 8px; border: 0; background: none; color: var(--gh-secondary); } .gh-branding { flex: none; } .gh-branding img { max-height: 48px; width: auto; } .gh-branding__text { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--gh-secondary); } .gh-branding__text:hover { color: var(--gh-secondary); } .gh-branding__mark { color: var(--gh-primary); } /* Search */ .gh-search { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; max-width: 640px; margin: 0 auto; border: 2px solid var(--gh-line-strong); border-radius: 999px; background: #fff; transition: border-color .2s ease; } .gh-search:focus-within { border-color: var(--gh-secondary); } .gh-search__cat { width: auto; max-width: 180px; border: 0; border-right: 1px solid var(--gh-line); border-radius: 999px 0 0 999px; padding: 0 34px 0 18px; font-size: 13px; font-weight: 600; background-color: var(--gh-bg-soft); box-shadow: none !important; } .gh-search__input { border: 0; border-radius: 0; padding: 12px 18px; background: transparent; box-shadow: none !important; min-width: 0; } .gh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .gh-search__submit { flex: none; width: 52px; border: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--gh-secondary); display: inline-flex; align-items: center; justify-content: center; } .gh-search__submit:hover { color: var(--gh-primary); } .gh-search__results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 50; background: #fff; border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow); border: 1px solid var(--gh-line); overflow: hidden; } .gh-search__results[hidden] { display: none; } .gh-search-result { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--gh-line); } .gh-search-result:hover { background: var(--gh-bg-soft); } .gh-search-result img { width: 52px; height: 58px; object-fit: cover; border-radius: 4px; background: var(--gh-bg-soft); flex: none; } .gh-search-result__title { font-weight: 700; font-size: 14px; display: block; } .gh-search-result__meta { font-size: 12px; color: var(--gh-muted); } .gh-search-result__price { margin-left: auto; font-weight: 700; font-size: 14px; white-space: nowrap; } .gh-search-result__price del { color: var(--gh-faint); font-weight: 400; margin-right: 4px; } .gh-search__all, .gh-search__none { display: block; padding: 12px 16px; text-align: center; font-weight: 700; font-size: 13px; } .gh-search__none { color: var(--gh-muted); font-weight: 500; } /* Header actions */ .gh-header-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; } .gh-header-actions__item { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px; border: 0; background: none; color: var(--gh-secondary); font-weight: 700; font-size: 13px; line-height: 1; border-radius: var(--gh-radius); transition: color .2s ease; } .gh-header-actions__item:hover { color: var(--gh-primary); } .gh-header-actions__item .gh-count { position: absolute; top: 4px; left: 24px; } .gh-header-actions__label { white-space: nowrap; } .gh-header-actions__search { display: none; } .gh-cart-total { font-size: 14px; } .gh-cart-total .woocommerce-Price-amount { font-weight: 800; } /* Navigation row */ .gh-header__nav { border-bottom: 1px solid var(--gh-line); background: #fff; } .gh-header__nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .gh-header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; white-space: nowrap; } .gh-nav { position: relative; flex: 1 1 auto; } .gh-menu, .gh-menu ul { list-style: none; margin: 0; padding: 0; } .gh-menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .gh-menu > li { position: relative; } .gh-menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 16px 14px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gh-secondary); position: relative; } .gh-menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--gh-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .gh-menu > li:hover > a::after, .gh-menu > li.current-menu-item > a::after, .gh-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } .gh-menu > li:hover > a { color: var(--gh-primary); } .gh-menu-caret { margin-left: 2px; opacity: .6; } .gh-menu .sub-menu .gh-menu-caret { display: none; } .gh-menu-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--gh-primary); vertical-align: middle; margin-left: 4px; position: relative; top: -6px; } .gh-menu-badge--new { background: var(--gh-success); } .gh-menu-badge--sale { background: var(--gh-danger); } /* Dropdowns */ .gh-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; padding: 10px 0; background: #fff; border: 1px solid var(--gh-line); border-radius: 0 0 var(--gh-radius-lg) var(--gh-radius-lg); box-shadow: var(--gh-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; } .gh-menu li:hover > .sub-menu, .gh-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .gh-menu .sub-menu li { position: relative; } .gh-menu .sub-menu a { display: block; padding: 8px 22px; font-size: 14px; font-weight: 500; color: var(--gh-text); } .gh-menu .sub-menu a:hover { color: var(--gh-primary); } .gh-menu .sub-menu .sub-menu { top: -10px; left: 100%; } /* Mega menu: the top-level item's children become columns */ .gh-menu > li.gh-mega { position: static; } .gh-menu > li.gh-mega > .sub-menu { left: 0; right: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 30px 34px; border-radius: 0 0 var(--gh-radius-lg) var(--gh-radius-lg); } .gh-menu > li.gh-mega > .sub-menu > li > a { padding: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gh-secondary); border-bottom: 1px solid var(--gh-line); margin-bottom: 12px; } .gh-menu > li.gh-mega > .sub-menu .sub-menu { position: static; display: block; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0; min-width: 0; } .gh-menu > li.gh-mega > .sub-menu .sub-menu a { padding: 6px 0; } /* Sticky */ .gh-header__sentinel { height: 1px; } .gh-sticky-header .gh-header__nav { position: sticky; top: 0; z-index: 90; transition: box-shadow .2s ease; } .gh-sticky-header .gh-header__nav.is-stuck { box-shadow: 0 6px 20px rgba(0,0,0,.08); } .admin-bar.gh-sticky-header .gh-header__nav { top: 32px; } /* Page header */ .gh-page-header { padding: 36px 0 26px; background: var(--gh-bg-soft); margin-bottom: 40px; text-align: center; } .gh-page-header--compact { padding: 18px 0; margin-bottom: 30px; text-align: left; background: transparent; border-bottom: 1px solid var(--gh-line); } .gh-page-header__title { margin-bottom: 8px; } .gh-page-header__desc { max-width: 720px; margin: 14px auto 0; color: var(--gh-muted); } .gh-breadcrumb, .woocommerce-breadcrumb { font-size: 13px; color: var(--gh-muted); display: flex; flex-wrap: wrap; justify-content: inherit; gap: 4px; } .gh-page-header:not(.gh-page-header--compact) .gh-breadcrumb { justify-content: center; } .gh-breadcrumb a:hover { color: var(--gh-primary); } .gh-breadcrumb__sep { color: var(--gh-faint); padding: 0 6px; } /* -------------------------------------------------------------------------- Off-canvas panels, modal, overlays -------------------------------------------------------------------------- */ .gh-offcanvas-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(43,42,40,.55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; backdrop-filter: blur(2px); } .gh-offcanvas-backdrop.is-visible { opacity: 1; visibility: visible; } .gh-offcanvas { position: fixed; top: 0; bottom: 0; left: 0; z-index: 950; width: min(360px, 92vw); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: var(--gh-shadow); } .gh-offcanvas--right { left: auto; right: 0; transform: translateX(100%); } .gh-offcanvas.is-open { transform: translateX(0); } .gh-offcanvas__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gh-line); } .gh-offcanvas__title { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; } .gh-offcanvas__close { display: inline-flex; padding: 6px; border: 0; background: none; color: var(--gh-secondary); border-radius: 50%; } .gh-offcanvas__close:hover { background: var(--gh-bg-soft); } .gh-offcanvas__body { flex: 1 1 auto; overflow-y: auto; padding: 20px; } .gh-offcanvas__search { display: flex; flex: 1; border: 1px solid var(--gh-line-strong); border-radius: 999px; overflow: hidden; } .gh-offcanvas__search input { border: 0; box-shadow: none !important; padding: 9px 16px; } .gh-offcanvas__search button { border: 0; background: none; padding: 0 14px; color: var(--gh-secondary); } .gh-offcanvas__links { display: grid; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--gh-line); } .gh-offcanvas__links a { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 600; } .gh-offcanvas .gh-social { margin-top: 20px; } .gh-offcanvas .gh-social__link { border: 1px solid var(--gh-line); } .gh-mobile-tabs { display: flex; border-bottom: 1px solid var(--gh-line); margin-bottom: 14px; } .gh-mobile-tabs button { flex: 1; padding: 10px; border: 0; border-bottom: 2px solid transparent; background: none; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; color: var(--gh-muted); } .gh-mobile-tabs button.is-active { color: var(--gh-secondary); border-bottom-color: var(--gh-primary); } .gh-mobile-panel { display: none; } .gh-mobile-panel.is-active { display: block; } .gh-mobile-menu, .gh-mobile-menu ul, .gh-mobile-panel > ul { list-style: none; margin: 0; padding: 0; } .gh-mobile-menu li, .gh-mobile-panel > ul > li { border-bottom: 1px solid var(--gh-line); } .gh-mobile-menu li li { border: 0; } .gh-mobile-menu a, .gh-mobile-panel > ul a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-weight: 600; } .gh-mobile-menu li li a { padding: 8px 0 8px 16px; font-weight: 500; color: var(--gh-muted); } .gh-mobile-menu .sub-menu { display: none; padding-bottom: 8px; } .gh-mobile-menu li.is-open > .sub-menu { display: block; } .gh-mobile-menu li.is-open > a .gh-menu-caret { transform: rotate(180deg); } .gh-mobile-panel .count { color: var(--gh-faint); font-size: 13px; } .gh-search-overlay { position: fixed; inset: 0; z-index: 960; background: #fff; padding: 60px 0; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } .gh-search-overlay.is-open { opacity: 1; visibility: visible; } .gh-search-overlay__close { position: absolute; top: 16px; right: 16px; border: 0; background: none; padding: 8px; } .gh-search--overlay { max-width: 760px; border-width: 0 0 2px; border-radius: 0; margin-top: 30px; } .gh-search--overlay .gh-search__input { font-size: 22px; padding: 14px 0; } .gh-search-overlay__popular { max-width: 760px; margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gh-search-overlay__popular span { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--gh-muted); margin-bottom: 4px; } .gh-search-overlay__popular a { padding: 6px 14px; border: 1px solid var(--gh-line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; } .gh-search-overlay__popular a:hover { border-color: var(--gh-primary); } .gh-modal { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } .gh-modal.is-open { opacity: 1; visibility: visible; } .gh-modal__backdrop { position: absolute; inset: 0; background: rgba(43,42,40,.6); } .gh-modal__dialog { position: relative; width: min(1040px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow); transform: translateY(16px); transition: transform .25s ease; } .gh-modal.is-open .gh-modal__dialog { transform: translateY(0); } .gh-modal__dialog--narrow { width: min(640px, 100%); } .gh-modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; padding: 8px; border: 0; border-radius: 50%; background: #fff; color: var(--gh-secondary); box-shadow: var(--gh-shadow-sm); } .gh-modal__content { padding: 32px; min-height: 200px; } .gh-modal__content.is-loading { display: flex; align-items: center; justify-content: center; } .gh-spinner { width: 36px; height: 36px; border: 3px solid var(--gh-line); border-top-color: var(--gh-primary); border-radius: 50%; animation: gh-spin .8s linear infinite; } /* Scroll to top */ .gh-scroll-top { position: fixed; right: 20px; bottom: 24px; z-index: 800; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gh-secondary); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--gh-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; } .gh-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; } .gh-scroll-top:hover { background: var(--gh-primary); } /* -------------------------------------------------------------------------- Front page -------------------------------------------------------------------------- */ .gh-section { padding: 36px 0; } .gh-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .gh-section__head--center { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .gh-section__title { margin: 0; } .gh-section__subtitle { margin: 6px 0 0; color: var(--gh-muted); } .gh-section__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--gh-primary); padding-bottom: 2px; } .gh-hero { background: var(--gh-bg-soft); overflow: hidden; } .gh-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; min-height: 560px; } .gh-hero__copy { padding: 60px 0; } .gh-hero__title { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 20px; } .gh-hero__text { font-size: 17px; color: var(--gh-muted); max-width: 520px; margin-bottom: 30px; } .gh-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .gh-hero__note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gh-muted); } .gh-hero__media { position: relative; align-self: stretch; display: flex; align-items: flex-end; } .gh-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; border-radius: var(--gh-radius-lg) var(--gh-radius-lg) 0 0; } .gh-hero__placeholder { width: 100%; aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; color: var(--gh-primary); background: var(--gh-primary-soft); border-radius: var(--gh-radius-lg); } .gh-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 28px var(--gh-gutter); border-bottom: 1px solid var(--gh-line); } .gh-feature { display: flex; align-items: center; gap: 14px; } .gh-feature__icon { flex: none; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gh-primary-soft); color: var(--gh-primary); } .gh-feature strong { display: block; font-size: 15px; } .gh-feature span { font-size: 13px; color: var(--gh-muted); } .gh-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; gap: 18px; } .gh-cat-tile { position: relative; display: block; border-radius: var(--gh-radius-lg); overflow: hidden; background: var(--gh-bg-soft); } .gh-cat-tile--featured { grid-column: span 2; grid-row: span 2; } .gh-cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gh-cat-tile:hover img { transform: scale(1.05); } .gh-cat-tile__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gh-faint); } .gh-cat-tile__body { position: absolute; left: 20px; bottom: 20px; padding: 12px 18px; background: #fff; border-radius: var(--gh-radius); box-shadow: var(--gh-shadow-sm); display: flex; flex-direction: column; } .gh-cat-tile__name { font-weight: 800; font-size: 16px; color: var(--gh-secondary); } .gh-cat-tile__count { font-size: 12px; color: var(--gh-muted); } .gh-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .gh-tabs__tab { padding: 9px 20px; border: 1px solid var(--gh-line-strong); border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; color: var(--gh-muted); transition: all .2s ease; } .gh-tabs__tab:hover { color: var(--gh-secondary); border-color: var(--gh-secondary); } .gh-tabs__tab.is-active { background: var(--gh-secondary); border-color: var(--gh-secondary); color: #fff; } .gh-tabs__panel { display: none; } .gh-tabs__panel.is-active { display: block; animation: gh-fade .3s ease; } @keyframes gh-fade { from { opacity: 0; transform: translateY(6px); } } .gh-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gh-banner { position: relative; display: block; aspect-ratio: 3/2; border-radius: var(--gh-radius-lg); overflow: hidden; background: var(--gh-bg-soft); color: var(--gh-secondary); } .gh-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gh-banner:hover img { transform: scale(1.04); } .gh-banner__body { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(43,42,40,.55) 100%); color: #fff; } .gh-banner__text { font-size: 13px; font-weight: 600; opacity: .9; } .gh-banner__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .gh-banner__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .gh-banner:hover { color: #fff; } .gh-carousel { position: relative; } .gh-carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; } .gh-carousel__track::-webkit-scrollbar { display: none; } .gh-products--carousel { display: flex !important; grid-template-columns: none !important; } .gh-products--carousel > li { flex: 0 0 calc((100% - 3 * 20px) / 4); scroll-snap-align: start; } .gh-carousel__arrow { position: absolute; top: 34%; z-index: 3; width: 44px; height: 44px; border: 1px solid var(--gh-line); border-radius: 50%; background: #fff; color: var(--gh-secondary); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--gh-shadow-sm); transition: all .2s ease; } .gh-carousel__arrow:hover { background: var(--gh-secondary); color: #fff; } .gh-carousel__arrow--prev { left: -22px; } .gh-carousel__arrow--next { right: -22px; } .gh-carousel__arrow[disabled] { opacity: .3; pointer-events: none; } .gh-brands { padding: 10px 0 30px; } .gh-brands__track { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); overflow: hidden; } .gh-brand { display: flex; align-items: center; justify-content: center; padding: 22px 18px; border-right: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; min-height: 92px; } .gh-brand:hover { opacity: 1; filter: none; } .gh-brand:nth-child(6n) { border-right: 0; } .gh-brand:nth-last-child(-n+6) { border-bottom: 0; } .gh-brand img { max-height: 36px; width: auto; } .gh-brand__name { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; } /* -------------------------------------------------------------------------- Product grid & cards -------------------------------------------------------------------------- */ ul.products, .gh-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--gh-shop-columns), minmax(0, 1fr)); gap: 30px 20px; } .gh-products.columns-2 { --gh-shop-columns: 2; } .gh-products.columns-3 { --gh-shop-columns: 3; } .gh-products.columns-4 { --gh-shop-columns: 4; } .gh-products.columns-5 { --gh-shop-columns: 5; } .gh-products.columns-6 { --gh-shop-columns: 6; } ul.products::before, ul.products::after { display: none; } .gh-card { position: relative; display: flex; flex-direction: column; margin: 0; } .gh-card__media { position: relative; overflow: hidden; border-radius: var(--gh-radius-lg); background: var(--gh-bg-soft); aspect-ratio: 7/8; } .gh-card__link { display: block; width: 100%; height: 100%; } .gh-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform .6s ease; } .gh-card__img--secondary { opacity: 0; } .gh-card:hover .gh-card__img--primary { transform: scale(1.03); } .gh-card:hover .gh-card__img--secondary { opacity: 1; } .gh-card__actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(10px); transition: opacity .25s ease, transform .25s ease; } .gh-card:hover .gh-card__actions, .gh-card:focus-within .gh-card__actions { opacity: 1; transform: none; } .gh-card__actions .gh-list-btn, .gh-card__actions .gh-quick-view-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--gh-shadow-sm); } .gh-card__hover-cart { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px; transform: translateY(100%); transition: transform .25s ease; } .gh-card__hover-cart .gh-card__cart { width: 100%; } .gh-card__body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 6px; } .gh-card__cats { font-size: 12px; color: var(--gh-muted); } .gh-card__cats a:hover { color: var(--gh-primary); } .gh-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; } .gh-card__title a:hover { color: var(--gh-primary); } .gh-card__rating { line-height: 1; } .gh-card__price, .price { font-weight: 800; font-size: 16px; color: var(--gh-secondary); } .price del, .gh-card__price del, .gh-search-result__price del { color: var(--gh-faint); font-weight: 500; font-size: .88em; } .price ins, .gh-card__price ins { text-decoration: none; color: var(--gh-danger); } .price .screen-reader-text { display: none; } .gh-card__excerpt { display: none; color: var(--gh-muted); font-size: 14px; } .gh-card__footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .gh-card__footer-actions { display: none; gap: 6px; } .gh-card__cart { padding: 9px 16px; font-size: 13px; } .gh-card__cart.loading { pointer-events: none; } .gh-card__cart.added { background: var(--gh-success); border-color: var(--gh-success); } .gh-card__swatches { display: flex; align-items: center; gap: 6px; } .gh-card__swatches-more { font-size: 11px; color: var(--gh-muted); } /* Hover style: full-width button over the image */ .gh-products--hover-button .gh-card__footer .gh-card__cart { display: none; } .gh-products--hover-button .gh-card:hover .gh-card__hover-cart { transform: translateY(0); } .gh-products--hover-button .gh-card__footer-actions { display: none; } /* Hover style: alt – icons live in the footer */ .gh-products--hover-alt .gh-card__actions { display: none; } .gh-products--hover-alt .gh-card__footer-actions { display: flex; } /* List view */ .gh-products--list { grid-template-columns: 1fr !important; gap: 24px; } .gh-products--list .gh-card { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; padding-bottom: 24px; border-bottom: 1px solid var(--gh-line); } .gh-products--list .gh-card__body { padding: 8px 0 0; gap: 10px; } .gh-products--list .gh-card__title { font-size: 20px; } .gh-products--list .gh-card__excerpt { display: block; } .gh-products--list .gh-card__actions { display: none; } .gh-products--list .gh-card__hover-cart { display: none; } .gh-products--list .gh-card__footer .gh-card__cart { display: inline-flex; } .gh-products--list .gh-card__footer-actions { display: flex; } /* Icon buttons (wishlist/compare/quick view) */ .gh-list-btn, .gh-quick-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 36px; height: 36px; border: 1px solid var(--gh-line); border-radius: 50%; background: #fff; color: var(--gh-secondary); transition: all .2s ease; } .gh-list-btn:hover, .gh-quick-view-btn:hover { background: var(--gh-secondary); border-color: var(--gh-secondary); color: #fff; } .gh-list-btn.is-active { color: var(--gh-primary); border-color: var(--gh-primary); } .gh-list-btn.is-active .gh-icon-heart { fill: currentColor; } .gh-list-btn--labelled { width: auto; height: auto; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; } .gh-list-btn.is-loading { opacity: .5; pointer-events: none; } /* Swatches */ .gh-swatch { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gh-line-strong); background: #fff; cursor: pointer; transition: all .15s ease; } .gh-swatch--color { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch, #ccc); box-shadow: inset 0 0 0 2px #fff; } .gh-swatch--mini { width: 16px; height: 16px; box-shadow: none; border-color: rgba(0,0,0,.12); } .gh-swatch--label { min-width: 40px; height: 36px; padding: 0 12px; border-radius: var(--gh-radius); font-size: 13px; font-weight: 700; } .gh-swatch:hover { border-color: var(--gh-secondary); } .gh-swatch.is-selected { border-color: var(--gh-secondary); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gh-secondary); } .gh-swatch--label.is-selected { background: var(--gh-secondary); color: #fff; box-shadow: none; } .gh-swatch.is-disabled { opacity: .35; pointer-events: none; text-decoration: line-through; } .gh-card__swatches .gh-swatch { width: 16px; height: 16px; cursor: default; } .gh-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .gh-swatch-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gh-swatch-select--visible { position: static !important; width: auto; height: auto; clip: auto; } /* -------------------------------------------------------------------------- Shop archive -------------------------------------------------------------------------- */ .gh-wc-main { padding-bottom: 50px; } .gh-shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; } .gh-sidebar-right .gh-shop-layout { grid-template-columns: minmax(0, 1fr) 270px; } .gh-sidebar-right .gh-shop-sidebar { order: 2; } .gh-sidebar-none .gh-shop-layout { grid-template-columns: 1fr; } .gh-shop-content { min-width: 0; } .gh-cat-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; scrollbar-width: thin; } .gh-cat-strip__item { flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid var(--gh-line); border-radius: 999px; transition: border-color .2s ease; line-height: 1.3; } .gh-cat-strip__item img, .gh-cat-strip__placeholder { grid-row: span 2; } .gh-cat-strip__item:hover { border-color: var(--gh-secondary); color: inherit; } .gh-cat-strip__item img, .gh-cat-strip__placeholder { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--gh-bg-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--gh-muted); } .gh-cat-strip__name { font-weight: 700; font-size: 14px; display: block; } .gh-cat-strip__count { font-size: 12px; color: var(--gh-muted); display: block; } .gh-shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 12px 0; margin-bottom: 26px; border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); font-size: 13px; } .gh-shop-toolbar__left, .gh-shop-toolbar__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .gh-shop-toolbar__filters { display: none; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--gh-line-strong); border-radius: 999px; background: #fff; font-weight: 700; font-size: 13px; } .woocommerce-result-count { margin: 0; color: var(--gh-muted); } .gh-shop-toolbar__per-page { display: flex; align-items: center; gap: 4px; } .gh-shop-toolbar__per-page span { color: var(--gh-muted); margin-right: 6px; } .gh-shop-toolbar__per-page a { padding: 4px 7px; border-radius: 4px; font-weight: 700; color: var(--gh-muted); } .gh-shop-toolbar__per-page a.is-active, .gh-shop-toolbar__per-page a:hover { color: var(--gh-secondary); background: var(--gh-bg-soft); } .gh-shop-toolbar__views { display: flex; gap: 2px; } .gh-shop-toolbar__views a { display: inline-flex; padding: 6px; border-radius: 4px; color: var(--gh-faint); } .gh-shop-toolbar__views a.is-active, .gh-shop-toolbar__views a:hover { color: var(--gh-secondary); background: var(--gh-bg-soft); } .woocommerce-ordering select { width: auto; padding: 8px 34px 8px 12px; font-size: 13px; font-weight: 600; border-radius: 999px; } .woocommerce-ordering { margin: 0; } /* Pagination */ .woocommerce-pagination, .gh-pagination { margin-top: 44px; } .woocommerce-pagination ul.page-numbers, .gh-pagination .nav-links { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; border: 0; } .woocommerce-pagination ul.page-numbers li { border: 0; } .page-numbers a, .page-numbers span, .gh-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--gh-line); border-radius: 50%; font-weight: 700; font-size: 14px; transition: all .2s ease; } .page-numbers a:hover, .gh-pagination a.page-numbers:hover { border-color: var(--gh-secondary); color: var(--gh-secondary); } .page-numbers span.current, .gh-pagination .page-numbers.current { background: var(--gh-secondary); border-color: var(--gh-secondary); color: #fff; } .page-numbers .dots, .gh-pagination .dots { border: 0; } /* Sidebar widgets */ .widget { margin-bottom: 36px; } .widget-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gh-line); } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 0; font-size: 14px; } .widget li a { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; } .widget li .count, .gh-filter-list__count { margin-left: auto; font-size: 12px; color: var(--gh-faint); flex: none; } .widget .children { flex-basis: 100%; padding-left: 18px; } .gh-footer .widget li, .gh-blog-sidebar .widget li { display: block; } .widget_product_categories li.current-cat > a, .widget_layered_nav li.chosen a, .gh-filter-list li.is-active a { color: var(--gh-primary); font-weight: 700; } .gh-filter-list__check, .widget_layered_nav li a::before, .widget_product_categories li a::before, .widget_rating_filter li a::before { content: ""; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--gh-line-strong); border-radius: 4px; background: #fff; color: #fff; transition: all .15s ease; } .widget_layered_nav li a[data-swatch]::before { display: none; } .gh-filter-list__check .gh-icon { opacity: 0; } .gh-filter-list li.is-active .gh-filter-list__check, .widget_layered_nav li.chosen a::before, .widget_product_categories li.current-cat > a::before { background: var(--gh-secondary); border-color: var(--gh-secondary); } .gh-filter-list li.is-active .gh-filter-list__check .gh-icon { opacity: 1; } .widget_layered_nav li.chosen a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } .widget_rating_filter .star-rating { display: inline-block; } .widget_layered_nav_filters li a { display: inline-flex; padding: 4px 10px; border: 1px solid var(--gh-line); border-radius: 999px; font-size: 12px; } .widget_layered_nav_filters li a::before { content: "×"; color: var(--gh-danger); font-weight: 800; border: 0; width: auto; height: auto; background: none; } .widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; gap: 6px; } .widget_layered_nav_filters li { padding: 0; } /* Price slider (jQuery UI) */ .price_slider_wrapper { padding-top: 6px; } .price_slider { position: relative; height: 4px; margin: 10px 8px 22px; background: var(--gh-line); border-radius: 2px; } .price_slider .ui-slider-range { position: absolute; top: 0; height: 100%; background: var(--gh-secondary); border-radius: 2px; } .price_slider .ui-slider-handle { position: absolute; top: -7px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--gh-secondary); cursor: grab; outline: none; } .price_slider .ui-slider-handle:last-child { margin-left: -9px; } .price_slider_amount { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; } .price_slider_amount .button { padding: 8px 14px; font-size: 12px; order: 2; } .price_slider_amount .price_label { order: 1; color: var(--gh-muted); } .price_slider_amount .price_label span { font-weight: 700; color: var(--gh-secondary); } .price_slider_amount .clear { display: none; } /* Product list widgets */ .product_list_widget { list-style: none; margin: 0; padding: 0; } .product_list_widget li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gh-line); } .product_list_widget li:last-child { border-bottom: 0; } .product_list_widget li a { display: contents; } .product_list_widget li img { grid-row: span 3; width: 64px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--gh-bg-soft); } .product_list_widget li .product-title, .product_list_widget li a > span:not(.woocommerce-Price-amount) { font-weight: 700; font-size: 14px; } .product_list_widget li .gh-stars { font-size: 12px; } .product_list_widget li .amount, .product_list_widget li .woocommerce-Price-amount { font-weight: 700; font-size: 14px; } .product_list_widget li del .woocommerce-Price-amount { color: var(--gh-faint); font-weight: 400; } .product_list_widget li ins { text-decoration: none; } /* -------------------------------------------------------------------------- Mini cart (off-canvas) -------------------------------------------------------------------------- */ .gh-shipping-bar { margin-bottom: 20px; padding: 14px 16px; border-radius: var(--gh-radius); background: var(--gh-bg-soft); } .gh-shipping-bar__text { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; } .gh-shipping-bar__track { height: 6px; border-radius: 3px; background: var(--gh-line); overflow: hidden; } .gh-shipping-bar__track span { display: block; height: 100%; background: var(--gh-primary); border-radius: 3px; transition: width .4s ease; } .gh-shipping-bar.is-complete .gh-shipping-bar__track span { background: var(--gh-success); } .gh-shipping-bar.is-complete .gh-shipping-bar__text { color: var(--gh-success); } .widget_shopping_cart_content .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gh-line); } .woocommerce-mini-cart-item a:not(.remove) { font-weight: 700; font-size: 14px; display: contents; } .woocommerce-mini-cart-item img { grid-row: span 2; width: 70px; height: 80px; object-fit: cover; border-radius: 6px; background: var(--gh-bg-soft); } .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gh-line); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--gh-muted); } .woocommerce-mini-cart-item .remove:hover { color: #fff; background: var(--gh-danger); border-color: var(--gh-danger); } .woocommerce-mini-cart-item .quantity { grid-column: 2; font-size: 13px; color: var(--gh-muted); } .woocommerce-mini-cart-item .variation { grid-column: 2; margin: 0; font-size: 12px; color: var(--gh-muted); display: flex; flex-wrap: wrap; gap: 0 6px; } .woocommerce-mini-cart-item .variation dt, .woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; } .woocommerce-mini-cart-item .variation dd p { display: inline; margin: 0; } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 18px 0; font-size: 16px; font-weight: 800; border-bottom: 1px solid var(--gh-line); margin-bottom: 16px; } .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; } .woocommerce-mini-cart__buttons .button { width: 100%; } .woocommerce-mini-cart__empty-message { text-align: center; padding: 40px 0; color: var(--gh-muted); } /* -------------------------------------------------------------------------- Single product -------------------------------------------------------------------------- */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px 60px; position: relative; } .single-product div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.gh-badges) { grid-column: 1 / -1; } .single-product div.product .gh-badges { top: 12px; left: 12px; } .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image { border-radius: var(--gh-radius-lg); overflow: hidden; background: var(--gh-bg-soft); } .woocommerce-product-gallery__image img { width: 100%; height: auto; } .woocommerce-product-gallery__image a { display: block; } .woocommerce-product-gallery .flex-viewport { border-radius: var(--gh-radius-lg); overflow: hidden; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 0; padding: 0; } .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 7/8; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .6; border: 2px solid transparent; transition: all .2s ease; background: var(--gh-bg-soft); } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--gh-secondary); } .woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--gh-shadow-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 0; } .woocommerce-product-gallery__trigger::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--gh-secondary); border-radius: 50%; } .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; width: 2px; height: 7px; background: var(--gh-secondary); transform: rotate(-45deg); margin: 14px 0 0 14px; } .woocommerce-product-gallery img.zoomImg { border-radius: 0; } .summary.entry-summary { min-width: 0; } .gh-product-nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; } .gh-product-nav__link { position: relative; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--gh-line); border-radius: 50%; color: var(--gh-muted); } .gh-product-nav__link:hover { border-color: var(--gh-secondary); color: var(--gh-secondary); } .gh-product-nav__card { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; gap: 12px; align-items: center; width: 240px; padding: 10px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius); box-shadow: var(--gh-shadow); font-size: 13px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s ease; color: var(--gh-text); text-align: left; } .gh-product-nav__link--prev .gh-product-nav__card { right: auto; left: 0; } .gh-product-nav__link:hover .gh-product-nav__card { opacity: 1; visibility: visible; transform: none; } .gh-product-nav__card img { width: 52px; height: 58px; object-fit: cover; border-radius: 4px; } .gh-product-nav__card strong { display: block; } .product_title { font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; } .summary .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; } .summary .woocommerce-review-link { color: var(--gh-muted); } .summary .price { font-size: 26px; margin: 10px 0 18px; display: block; } .summary .price del { font-size: .7em; } .woocommerce-product-details__short-description { color: var(--gh-muted); font-size: 15px; } .woocommerce-product-details__short-description ul { padding-left: 1.2em; } .gh-stock { margin-bottom: 14px; } .summary .stock { font-weight: 600; font-size: 13px; } .summary .stock.in-stock { color: var(--gh-success); } .summary .stock.out-of-stock { color: var(--gh-danger); } /* Variations table */ table.variations { margin: 0 0 18px; } table.variations th, table.variations td { border: 0; padding: 8px 0; vertical-align: top; } table.variations th.label { width: 90px; padding-top: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; } table.variations td.value { position: relative; } table.variations select { width: auto; min-width: 180px; } .reset_variations { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--gh-muted); text-decoration: underline; } .woocommerce-variation { margin-bottom: 14px; } .woocommerce-variation-price .price { font-size: 22px; margin: 0; } .woocommerce-variation-availability p { margin: 6px 0 0; font-size: 13px; } .woocommerce-variation-description p { color: var(--gh-muted); } /* Add to cart row + quantity */ form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 20px 0 20px; } form.cart.variations_form { display: block; } form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--gh-line-strong); border-radius: var(--gh-radius); overflow: hidden; height: 48px; } .quantity .qty { width: 56px; border: 0; text-align: center; padding: 0; box-shadow: none !important; -moz-appearance: textfield; font-weight: 700; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity .gh-qty-btn { width: 36px; border: 0; background: var(--gh-bg-soft); color: var(--gh-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .quantity .gh-qty-btn:hover { background: var(--gh-line); } .quantity .screen-reader-text { display: none; } .single_add_to_cart_button { height: 48px; padding: 0 34px; font-size: 15px; flex: 1 1 auto; min-width: 200px; } .woocommerce-variation-add-to-cart .quantity { height: 48px; } .gh-single-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .gh-trust { list-style: none; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--gh-line); border-radius: var(--gh-radius); display: grid; gap: 8px; } .gh-trust li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; } .gh-trust .gh-icon { color: var(--gh-primary); } .product_meta { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--gh-line); font-size: 13px; color: var(--gh-muted); } .product_meta > span { display: block; } .product_meta a { color: var(--gh-text); font-weight: 600; } .product_meta .sku { color: var(--gh-text); font-weight: 600; } .gh-share { display: flex; align-items: center; gap: 6px; margin-top: 16px; } .gh-share__label { font-size: 13px; font-weight: 700; margin-right: 6px; } .gh-share__link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--gh-line); border-radius: 50%; color: var(--gh-muted); } .gh-share__link:hover { background: var(--gh-secondary); border-color: var(--gh-secondary); color: #fff; } /* Tabs */ .woocommerce-tabs { margin-top: 30px; } .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; margin: 0 0 30px; padding: 0; border-bottom: 1px solid var(--gh-line); } .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; } .woocommerce-tabs ul.tabs li a { display: block; padding: 14px 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gh-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--gh-secondary); border-bottom-color: var(--gh-secondary); } .woocommerce-tabs .panel { max-width: 920px; margin: 0 auto; } .woocommerce-tabs .panel > h2:first-child { display: none; } .woocommerce-tabs .panel h2 { font-size: 22px; } table.shop_attributes th { width: 30%; color: var(--gh-muted); font-weight: 600; } table.shop_attributes p { margin: 0; } .gh-brand-tab__head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; } .gh-brand-tab__head img { max-height: 40px; width: auto; } .gh-brand-tab__head h3 { margin: 0; } .gh-brand-tab h4 { margin-top: 30px; } /* Reviews */ #reviews .commentlist { list-style: none; margin: 0 0 30px; padding: 0; } #reviews .comment_container { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--gh-line); } #reviews .comment_container img.avatar { border-radius: 50%; width: 56px; height: 56px; } #reviews .comment-text .meta { margin: 4px 0 8px; font-size: 13px; color: var(--gh-muted); } #reviews .comment-text .meta strong { color: var(--gh-text); } #reviews .comment-text .description p:last-child { margin: 0; } #reviews .woocommerce-noreviews { color: var(--gh-muted); } #review_form_wrapper { margin-top: 30px; padding: 30px; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); } .comment-reply-title { display: block; font-size: 20px; font-weight: 800; margin-bottom: 10px; } .comment-form { display: grid; gap: 14px; } .comment-form p { margin: 0; } .comment-form label { display: block; margin-bottom: 6px; } .comment-form .comment-form-author, .comment-form .comment-form-email { display: inline-block; } .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; } .comment-form-cookies-consent label { font-weight: 500; margin: 0; } p.stars { display: inline-flex; gap: 2px; margin: 0; line-height: 1; } p.stars a { position: relative; display: inline-block; width: 22px; height: 22px; font-size: 0; color: var(--gh-line-strong); text-decoration: none; } p.stars a::before { content: "★"; font-size: 22px; line-height: 22px; color: inherit; } p.stars:hover a { color: #e3b23c; } p.stars a:hover ~ a { color: var(--gh-line-strong); } p.stars.selected a.active, p.stars.selected a.active ~ a { color: var(--gh-line-strong); } p.stars.selected a:not(.active) { color: #e3b23c; } p.stars.selected a.active { color: #e3b23c; } .comment-form-rating label { display: inline-block; margin-right: 10px; } .comment-form-rating select#rating { display: none; } /* Related / upsells */ .related.products, .up-sells.products, .cross-sells { margin-top: 60px; } .related.products > h2, .up-sells.products > h2, .cross-sells > h2 { text-align: center; margin-bottom: 30px; } /* Sticky add to cart */ .gh-sticky-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; background: #fff; border-top: 1px solid var(--gh-line); box-shadow: 0 -8px 30px rgba(0,0,0,.08); transform: translateY(100%); transition: transform .3s ease; } .gh-sticky-cart.is-visible { transform: translateY(0); } .gh-sticky-cart__inner { display: flex; align-items: center; gap: 18px; padding: 10px var(--gh-gutter); } .gh-sticky-cart img { width: 54px; height: 60px; object-fit: cover; border-radius: 6px; } .gh-sticky-cart__info { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gh-sticky-cart__info strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-sticky-cart__price { font-weight: 800; } .gh-size-table th, .gh-size-table td { text-align: center; padding: 10px; } .gh-size-table thead th { background: var(--gh-bg-soft); } /* Quick view */ .gh-quick-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } .gh-quick-view__gallery { position: relative; } .gh-qv-slider { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--gh-radius-lg); scrollbar-width: none; } .gh-qv-slider::-webkit-scrollbar { display: none; } .gh-qv-slider__slide { flex: 0 0 100%; scroll-snap-align: start; background: var(--gh-bg-soft); } .gh-qv-slider__slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 7/8; } .gh-quick-view__summary .product_title { font-size: 26px; } .gh-quick-view__summary .price { font-size: 22px; margin: 10px 0 14px; display: block; } .gh-quick-view__excerpt { color: var(--gh-muted); font-size: 14px; } .gh-quick-view__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--gh-primary); } /* -------------------------------------------------------------------------- Cart / checkout / account (classic templates) + notices -------------------------------------------------------------------------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; margin: 0 0 24px; border-radius: var(--gh-radius); background: var(--gh-bg-soft); border-left: 4px solid var(--gh-success); font-size: 14px; list-style: none; } .woocommerce-info { border-left-color: var(--gh-primary); } .woocommerce-error { border-left-color: var(--gh-danger); } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; margin-left: auto; padding: 8px 14px; font-size: 13px; } .woocommerce-error li { list-style: none; } .woocommerce form .form-row { margin-bottom: 14px; } .woocommerce form .form-row label { display: block; margin-bottom: 6px; } .woocommerce form .form-row .required { color: var(--gh-danger); text-decoration: none; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; } .woocommerce form .form-row-first { margin-right: 12px; } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { max-width: 480px; padding: 30px; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); } .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } .woocommerce-form-login__rememberme span { font-weight: 500; } .woocommerce-LostPassword { font-size: 13px; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--gh-muted); } .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .u-columns > .col-1, .u-columns > .col-2 { width: auto; float: none; } table.shop_table { border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } table.shop_table th { background: var(--gh-bg-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } table.shop_table td.product-thumbnail img { width: 70px; height: 78px; object-fit: cover; border-radius: 6px; } table.shop_table td.product-remove a.remove { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--gh-line); font-size: 18px; color: var(--gh-muted); } table.shop_table td.product-remove a.remove:hover { background: var(--gh-danger); border-color: var(--gh-danger); color: #fff; } table.shop_table td.product-name a { font-weight: 700; } table.shop_table .variation { font-size: 12px; color: var(--gh-muted); margin: 4px 0 0; } table.shop_table .variation dt, table.shop_table .variation dd { display: inline; margin: 0; } table.shop_table .variation dd p { display: inline; } table.shop_table td.actions { padding: 16px; } table.shop_table td.actions .coupon { display: inline-flex; gap: 8px; float: left; } table.shop_table td.actions .coupon input { width: 180px; } table.shop_table td.actions > .button { float: right; } .cart-collaterals { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 40px; margin-top: 40px; align-items: start; } .cart-collaterals .cart_totals { grid-column: 2; } .cart-collaterals .cross-sells { grid-column: 1; grid-row: 1; margin: 0; } .cart_totals h2 { font-size: 20px; } .cart_totals table.shop_table th { background: none; text-transform: none; letter-spacing: 0; font-size: 14px; width: 40%; } .wc-proceed-to-checkout .button { width: 100%; margin-top: 10px; } .woocommerce-shipping-destination { font-size: 13px; color: var(--gh-muted); } #shipping_method { list-style: none; margin: 0; padding: 0; } #shipping_method li { display: flex; gap: 8px; align-items: center; padding: 4px 0; } #shipping_method li label { font-weight: 500; margin: 0; } .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } #order_review_heading { margin-top: 40px; } #payment { background: var(--gh-bg-soft); border-radius: var(--gh-radius-lg); padding: 24px; } #payment ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; } #payment ul.wc_payment_methods li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gh-line); } #payment ul.wc_payment_methods li label { font-weight: 600; margin: 0; } #payment .payment_box { width: 100%; padding: 10px 14px; background: #fff; border-radius: var(--gh-radius); font-size: 13px; color: var(--gh-muted); } #payment .payment_box p:last-child { margin: 0; } #place_order { width: 100%; } .woocommerce-checkout-review-order-table tfoot th { background: none; text-transform: none; letter-spacing: 0; } .woocommerce-order { display: grid; gap: 30px; } .woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0; padding: 20px; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); font-size: 13px; color: var(--gh-muted); } .woocommerce-order-overview strong { display: block; color: var(--gh-text); font-size: 15px; } .woocommerce-thankyou-order-received { font-size: 20px; font-weight: 700; } .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 50px; align-items: start; } .woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); overflow: hidden; } .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 18px; font-weight: 600; border-bottom: 1px solid var(--gh-line); } .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--gh-secondary); color: #fff; } .woocommerce-MyAccount-navigation li a:hover { background: var(--gh-bg-soft); } .woocommerce-MyAccount-navigation li.is-active a:hover { background: var(--gh-secondary); } .woocommerce-MyAccount-content .woocommerce-message { margin-top: 0; } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; } .woocommerce-Address address { padding: 16px; background: var(--gh-bg-soft); border-radius: var(--gh-radius); font-style: normal; } .woocommerce-orders-table .button { padding: 6px 12px; font-size: 12px; } fieldset { border: 1px solid var(--gh-line); border-radius: var(--gh-radius); padding: 14px 18px; margin: 20px 0; } legend { padding: 0 8px; font-weight: 700; } .select2-container .select2-selection--single { height: 46px; border: 1px solid var(--gh-line-strong); border-radius: var(--gh-radius); } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 14px; } .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; } .woocommerce-input-wrapper { display: block; } /* WC blocks – keep consistent with theme colours */ .wc-block-components-button:not(.is-link) { background: var(--gh-secondary) !important; border-radius: var(--gh-radius) !important; } .wc-block-components-button:not(.is-link):hover { background: var(--gh-primary) !important; } .wc-block-cart, .wc-block-checkout { font-family: var(--gh-font); } /* Wishlist / compare pages */ .gh-compare__scroll { overflow-x: auto; } .gh-compare__table { min-width: 720px; } .gh-compare__table th { width: 180px; background: var(--gh-bg-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; vertical-align: top; } .gh-compare__table td { width: calc((100% - 180px) / var(--gh-compare-cols, 3)); vertical-align: top; position: relative; } .gh-compare__row--image th { background: none; } .gh-compare__row--image td img { width: 100%; max-width: 220px; aspect-ratio: 7/8; object-fit: cover; border-radius: var(--gh-radius-lg); } .gh-compare__row--image h4 { margin: 10px 0 8px; font-size: 15px; } .gh-compare__remove { position: absolute; top: 20px; right: 20px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--gh-shadow-sm); display: inline-flex; align-items: center; justify-content: center; } .gh-compare__remove:hover { background: var(--gh-danger); color: #fff; } .gh-compare__row--image .button { padding: 8px 14px; font-size: 13px; } /* -------------------------------------------------------------------------- Blog -------------------------------------------------------------------------- */ .gh-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 50px; align-items: start; padding-bottom: 60px; } .gh-blog-no-sidebar .gh-blog-layout { grid-template-columns: minmax(0, 860px); justify-content: center; } .gh-site-main { min-width: 0; } .gh-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } .gh-posts--grid { grid-template-columns: repeat(3, 1fr); } .gh-post-card { display: flex; flex-direction: column; } .gh-post-card__thumb { position: relative; display: block; border-radius: var(--gh-radius-lg); overflow: hidden; background: var(--gh-bg-soft); aspect-ratio: 8/5; } .gh-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gh-post-card:hover .gh-post-card__thumb img { transform: scale(1.04); } .gh-date-badge { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 6px 8px; border-radius: var(--gh-radius); background: #fff; box-shadow: var(--gh-shadow-sm); line-height: 1.1; } .gh-date-badge__day { font-size: 18px; font-weight: 800; } .gh-date-badge__month { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gh-muted); } .gh-post-card__body { padding: 18px 4px 0; } .gh-post-card__cats { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gh-primary); margin-bottom: 8px; } .gh-post-card__title { font-size: 20px; margin-bottom: 8px; } .gh-post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--gh-muted); margin-bottom: 12px; } .gh-post-meta a { color: var(--gh-text); font-weight: 600; } .gh-post-meta__comments { display: inline-flex; align-items: center; gap: 4px; } .gh-post-card__excerpt { color: var(--gh-muted); font-size: 14px; } .gh-post-card__excerpt p { margin: 0; } .gh-post-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .gh-post-card--search { grid-column: 1 / -1; display: grid; grid-template-columns: 200px 1fr; gap: 24px; } .gh-post-card--search .gh-post-card__thumb { aspect-ratio: 1; } .gh-entry__header { text-align: center; margin-bottom: 30px; } .gh-entry__header .gh-post-meta { justify-content: center; } .gh-entry__title { margin-bottom: 14px; } .gh-entry__thumb { border-radius: var(--gh-radius-lg); overflow: hidden; margin-bottom: 36px; } .gh-entry__thumb img { width: 100%; } .entry-content { font-size: 16px; line-height: 1.75; } .entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; } .entry-content > .alignwide { max-width: 1000px; } .entry-content > .alignfull { max-width: none; } .entry-content h2 { margin-top: 1.6em; } .entry-content img { border-radius: var(--gh-radius); } .gh-page .entry-content > * { max-width: none; } .gh-page .entry-content > p, .gh-page .entry-content > h2, .gh-page .entry-content > h3, .gh-page .entry-content > ul, .gh-page .entry-content > ol, .gh-page .entry-content > .wp-block-details { max-width: 820px; margin-left: 0; } .wp-block-details { border: 1px solid var(--gh-line); border-radius: var(--gh-radius); padding: 14px 18px; margin-bottom: 12px; } .wp-block-details summary { font-weight: 700; cursor: pointer; } .wp-block-details[open] summary { margin-bottom: 8px; } .wp-block-columns { gap: 30px; } .gh-contact-form p { margin-bottom: 14px; } .gh-contact-form label { display: block; margin-bottom: 6px; } .gh-entry__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gh-line); } .gh-entry__tags { display: flex; flex-wrap: wrap; gap: 6px; } .gh-entry__tags a { padding: 4px 12px; border: 1px solid var(--gh-line); border-radius: 999px; font-size: 12px; font-weight: 600; } .gh-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; } .gh-post-nav .nav-links { display: contents; } .gh-post-nav a { display: block; padding: 18px 20px; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); } .gh-post-nav .nav-next { text-align: right; grid-column: 2; } .gh-post-nav__label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gh-muted); margin-bottom: 4px; } .gh-post-nav__title { font-weight: 700; } .gh-comments { margin-top: 50px; } .gh-comments__list { list-style: none; margin: 0 0 30px; padding: 0; } .gh-comments__list .children { list-style: none; padding-left: 50px; } .gh-comments__list .comment-body { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gh-line); } .gh-comments__list .comment-body .avatar { border-radius: 50%; } .gh-comments__list .comment-meta { grid-column: 2; } .gh-comments__list .comment-content, .gh-comments__list .reply { grid-column: 2; } .gh-comments__list .comment-metadata { font-size: 13px; color: var(--gh-muted); } .gh-comments__list .reply a { font-size: 13px; font-weight: 700; } .gh-archive-desc { max-width: 720px; margin-bottom: 30px; color: var(--gh-muted); } .gh-blog-sidebar .widget li a { display: block; } .gh-blog-sidebar .widget_search form, .gh-blog-sidebar .wp-block-search__inside-wrapper { display: flex; gap: 8px; } .gh-blog-sidebar .widget_search label { display: none; } .widget_recent_entries .post-date { display: block; font-size: 12px; color: var(--gh-faint); } .wp-block-search__button { padding: 10px 16px; } .gh-404 { text-align: center; padding: 40px 0 80px; max-width: 560px; margin: 0 auto; } .gh-404__code { font-size: 120px; font-weight: 800; line-height: 1; color: var(--gh-primary-soft); -webkit-text-stroke: 2px var(--gh-primary); margin-bottom: 10px; } .gh-404 .gh-search--inline { margin: 24px auto; } .gh-404 p { color: var(--gh-muted); } /* -------------------------------------------------------------------------- Newsletter + footer -------------------------------------------------------------------------- */ .gh-newsletter { background: var(--gh-primary-soft); padding: 50px 0; margin-top: 40px; } .gh-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; } .gh-newsletter__title { margin-bottom: 8px; } .gh-newsletter__text { margin: 0; color: var(--gh-muted); } .gh-newsletter__form { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .gh-newsletter__form input { height: 50px; border-radius: 999px; padding: 0 22px; } .gh-newsletter__form .gh-btn { height: 50px; border-radius: 999px; padding: 0 28px; } .gh-newsletter__note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--gh-muted); } .gh-newsletter__success { grid-column: 1 / -1; font-weight: 700; color: var(--gh-success); } .gh-footer { background: var(--gh-secondary); color: rgba(255,255,255,.72); font-size: 14px; } .gh-footer a:hover { color: #fff; } .gh-footer__widgets { padding: 60px 0 30px; border-bottom: 1px solid rgba(255,255,255,.1); } .gh-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .gh-footer .widget-title { color: #fff; border-bottom-color: rgba(255,255,255,.12); } .gh-footer .widget li { padding: 4px 0; } .gh-footer .textwidget p { white-space: pre-line; } .gh-footer__bottom { padding: 22px 0; } .gh-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; font-size: 13px; } .gh-footer__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; } .gh-footer__payments { display: flex; gap: 8px; } .gh-footer__payments span { padding: 4px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; } /* Mobile bottom navbar */ .gh-mobile-navbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 870; background: #fff; border-top: 1px solid var(--gh-line); box-shadow: 0 -6px 20px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); } .gh-mobile-navbar__item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gh-secondary); } .gh-mobile-navbar__item .gh-count { position: absolute; top: 4px; left: calc(50% + 4px); } .gh-mobile-navbar__item--filters { display: none; } body.post-type-archive-product .gh-mobile-navbar__item--filters, body.tax-product_cat .gh-mobile-navbar__item--filters, body.tax-product_tag .gh-mobile-navbar__item--filters, body.tax-product_brand .gh-mobile-navbar__item--filters { display: flex; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .gh-cat-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; } .gh-products--carousel > li { flex-basis: calc((100% - 2 * 20px) / 3); } .gh-carousel__arrow--prev { left: 0; } .gh-carousel__arrow--next { right: 0; } .gh-menu > li > a { padding: 16px 10px; font-size: 13px; } } @media (max-width: 1024px) { .gh-shop-layout, .gh-sidebar-right .gh-shop-layout { grid-template-columns: 1fr; } .gh-shop-toolbar__filters { display: inline-flex; } .gh-header__nav { display: none; } .gh-header__burger { display: inline-flex; } .gh-header__inner { min-height: 70px; gap: 16px; } .gh-header__main { position: sticky; top: 0; z-index: 95; } .admin-bar .gh-header__main { top: 32px; } .gh-header-actions__label { display: none; } .gh-search { max-width: none; } .gh-search__cat { display: none; } .gh-products, ul.products { --gh-shop-columns: 3; } .gh-products.columns-4, .gh-products.columns-5, .gh-products.columns-6 { --gh-shop-columns: 3; } .gh-features { grid-template-columns: repeat(2, 1fr); } .gh-brands__track { grid-template-columns: repeat(4, 1fr); } .gh-brand:nth-child(6n) { border-right: 1px solid var(--gh-line); } .gh-brand:nth-child(4n) { border-right: 0; } .gh-brand:nth-last-child(-n+6) { border-bottom: 1px solid var(--gh-line); } .gh-brand:nth-last-child(-n+4) { border-bottom: 0; } .gh-blog-layout { grid-template-columns: 1fr; } .gh-footer__grid { grid-template-columns: 1fr 1fr; } .single-product div.product { gap: 36px; } .gh-hero__inner { min-height: 0; } .gh-products--list .gh-card { grid-template-columns: 220px 1fr; } .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 30px; } .cart-collaterals { grid-template-columns: 1fr; } .cart-collaterals .cart_totals, .cart-collaterals .cross-sells { grid-column: 1; grid-row: auto; } } @media (min-width: 1025px) { /* The filter sidebar is a static column on desktop */ .gh-offcanvas--filters { position: static; width: auto; transform: none; box-shadow: none; display: block; z-index: auto; } .gh-offcanvas--filters .gh-offcanvas__head { display: none; } .gh-offcanvas--filters .gh-offcanvas__body { padding: 0; overflow: visible; } .gh-card__actions .gh-list-btn, .gh-card__actions .gh-quick-view-btn { border: 0; } } @media (max-width: 782px) { .admin-bar .gh-header__main { top: 46px; } } @media (max-width: 768px) { body { font-size: 14.5px; } .gh-topbar__right { display: none; } .gh-topbar__inner { justify-content: center; text-align: center; } .gh-header__inner > .gh-search { display: none; } .gh-header-actions__search { display: inline-flex; } .gh-header-actions__item { padding: 8px; } .gh-header-actions__item .gh-count { left: 20px; } .gh-products, ul.products, .gh-products.columns-3, .gh-products.columns-4 { --gh-shop-columns: 2; gap: 24px 14px; } .gh-products--carousel > li { flex-basis: calc((100% - 14px) / 2); } .gh-card__actions { opacity: 1; transform: none; } .gh-card__actions .gh-list-btn--compare, .gh-card__actions .gh-quick-view-btn { display: none; } .gh-card__cart { padding: 8px 12px; font-size: 12px; } .gh-card__cart span { display: none; } .gh-products--list .gh-card__cart span { display: inline; } .gh-products--hover-button .gh-card__hover-cart { display: none; } .gh-products--hover-button .gh-card__footer .gh-card__cart { display: inline-flex; } .gh-hero__inner { grid-template-columns: 1fr; gap: 0; } .gh-hero__copy { padding: 44px 0 30px; } .gh-hero__img { border-radius: var(--gh-radius-lg); max-height: 360px; } .gh-hero__media { padding-bottom: 30px; } .gh-cat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .gh-cat-tile--featured { grid-column: span 2; grid-row: span 1; } .gh-cat-tile__body { left: 12px; bottom: 12px; padding: 8px 12px; } .gh-banners { grid-template-columns: 1fr; } .gh-banner { aspect-ratio: 2/1; } .gh-section { padding: 26px 0; } .gh-section__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; } .gh-section__head--center { align-items: center; } .gh-posts, .gh-posts--grid { grid-template-columns: 1fr; } .gh-post-card--search { grid-template-columns: 1fr; } .single-product div.product { grid-template-columns: 1fr; gap: 30px; } .single_add_to_cart_button { min-width: 0; } .woocommerce-tabs ul.tabs { gap: 0 20px; } .woocommerce-tabs ul.tabs li a { font-size: 13px; } .gh-quick-view { grid-template-columns: 1fr; gap: 20px; } .gh-modal__content { padding: 22px; } .gh-newsletter__inner { grid-template-columns: 1fr; } .gh-newsletter__form { grid-template-columns: 1fr; } .gh-footer__grid { grid-template-columns: 1fr; gap: 24px; } .gh-footer__bottom-inner { justify-content: center; text-align: center; } .gh-has-mobile-navbar .gh-mobile-navbar { display: flex; } .gh-has-mobile-navbar .gh-footer { padding-bottom: 58px; } .gh-has-mobile-navbar .gh-scroll-top, .gh-has-mobile-navbar .gh-toasts { bottom: 80px; } .gh-has-mobile-navbar .gh-sticky-cart { bottom: 58px; } .gh-products--list .gh-card { grid-template-columns: 1fr; gap: 14px; } .gh-shop-toolbar__per-page { display: none; } .gh-page-header { padding: 24px 0 18px; margin-bottom: 26px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; } .u-columns, .woocommerce-checkout .col2-set, .woocommerce-Addresses { grid-template-columns: 1fr; } table.shop_table td.actions .coupon, table.shop_table td.actions > .button { float: none; width: 100%; margin-top: 10px; } table.shop_table td.actions .coupon input { width: 100%; } .woocommerce-cart table.shop_table thead { display: none; } .woocommerce-cart table.shop_table tr { display: grid; grid-template-columns: 70px 1fr; gap: 6px 14px; padding: 14px; border-bottom: 1px solid var(--gh-line); } .woocommerce-cart table.shop_table td { border: 0; padding: 0; } .woocommerce-cart table.shop_table td.product-thumbnail { grid-row: span 4; } .woocommerce-cart table.shop_table td.product-remove { position: absolute; right: 14px; } .woocommerce-cart table.shop_table tr.cart_item { position: relative; } .woocommerce-cart table.shop_table td.actions { display: block; } .gh-post-nav { grid-template-columns: 1fr; } .gh-post-nav .nav-next { grid-column: 1; } .gh-features { grid-template-columns: 1fr; } .gh-brands__track { grid-template-columns: repeat(2, 1fr); } .gh-brand:nth-child(4n) { border-right: 1px solid var(--gh-line); } .gh-brand:nth-child(2n) { border-right: 0; } .gh-brand:nth-last-child(-n+4) { border-bottom: 1px solid var(--gh-line); } .gh-brand:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 480px) { .gh-branding__text { font-size: 22px; } .gh-header-actions__item:not(.gh-header-actions__cart):not(.gh-header-actions__search) { display: none; } .gh-hero__title { font-size: 32px; } .gh-cat-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .gh-card__footer { flex-wrap: wrap; } .woocommerce-product-gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); } .gh-404__code { font-size: 90px; } } @media (hover: none) { .gh-card__actions { opacity: 1; transform: none; } } @media print { .gh-header, .gh-footer, .gh-newsletter, .gh-mobile-navbar, .gh-scroll-top, .gh-sticky-cart, .gh-offcanvas { display: none !important; } }