/* ========================================================================== Rutbalibas — main stylesheet (plain CSS, mobile-first, no framework) 1. Tokens 2. Base 3. Utilities 4. Buttons 5. Header 6. Nav / mega menu 7. Hero 8. Section heads 9. Collections 10. Product cards 11. Promo 12. Trust 13. Instagram 14. Newsletter 15. Footer 16. Drawers / modal 17. Mini cart 18. Quick view 19. WooCommerce pages 20. Motion states ========================================================================== */ /* 1. Tokens --------------------------------------------------------------- */ :root { --c-cream: #faf7f1; --c-cream-2: #f5eee3; --c-sand: #eee2cf; --c-green: #0f3b2c; --c-green-2: #164a38; --c-green-3: #1f5a45; --c-gold: #b58738; --c-gold-soft: #d8b273; --c-gold-pale: #ead7b2; --c-ink: #1d2521; --c-muted: #6c716b; --c-line: #e7ddcc; --c-white: #fff; --c-sale: #c2352b; --c-maroon: #8f1d22; --c-success: #2f7a4f; --f-serif: "Cormorant Garamond", "Times New Roman", serif; --f-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1240px; --gutter: 16px; --radius: 4px; --header-h: 64px; --card-ratio: 8 / 7; --shadow-sm: 0 1px 2px rgba(29, 37, 33, .06), 0 2px 8px rgba(29, 37, 33, .04); --shadow-md: 0 10px 30px -12px rgba(15, 59, 44, .25); --shadow-lg: 0 30px 80px -20px rgba(15, 59, 44, .35); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --section-y: clamp(40px, 6vw, 72px); } @media (min-width: 768px) { :root { --gutter: 24px; --header-h: 76px; } } @media (min-width: 1200px) { :root { --gutter: 32px; } } /* 2. Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--c-cream); color: var(--c-ink); font: 400 15px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--c-gold); } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; } ::selection { background: var(--c-gold-pale); color: var(--c-green); } /* 3. Utilities ------------------------------------------------------------ */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .screen-reader-text, .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: var(--c-green); color: #fff; padding: 10px 16px; } .skip-link:focus { top: 12px; color: #fff; } .icon { flex: none; } /* 4. Buttons -------------------------------------------------------------- */ .btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 22px; border: 1px solid transparent; border-radius: 2px; font: 500 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .btn .icon { transition: transform .35s var(--ease-out); } .btn:hover .icon--arrow { transform: translateX(4px); } .btn:active { transform: translateY(1px); } .btn--primary, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt, .woocommerce #respond input#submit { background: var(--c-green); color: #fff; } .btn--primary:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button.alt:hover { background: var(--c-green-3); color: #fff; box-shadow: var(--shadow-md); } .btn--gold { background: var(--c-gold-soft); color: var(--c-green); } .btn--gold:hover { background: var(--c-gold-pale); color: var(--c-green); } .btn--outline { background: transparent; border-color: currentColor; } .btn--block { width: 100%; } .btn.loading { opacity: .7; pointer-events: none; } .btn.loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rb-spin .7s linear infinite; } @keyframes rb-spin { to { transform: rotate(360deg); } } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: none; border-radius: 50%; color: var(--c-green); transition: background-color .25s var(--ease), color .25s var(--ease); } .icon-btn:hover { background: var(--c-cream-2); color: var(--c-green); } .count-bubble { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--c-green); color: #fff; font: 600 10px/1 var(--f-sans); box-shadow: 0 0 0 2px var(--c-white); transition: transform .35s var(--ease-out); } .count-bubble.is-empty { transform: scale(0); } .count-bubble.is-bump { animation: rb-bump .5s var(--ease-out); } @keyframes rb-bump { 40% { transform: scale(1.45); } } /* 5. Announcement + header ---------------------------------------------- */ .announce { background: var(--c-green); color: #f3ead9; font-size: 12px; letter-spacing: .02em; overflow: hidden; } .announce__track { display: grid; height: 34px; } .announce__item { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); transform: translateY(8px); } .announce__item.is-active, .announce__item:first-child:only-child { opacity: 1; transform: none; } .announce__item a:hover { color: var(--c-gold-soft); } .announce .icon { color: var(--c-gold-soft); } @media (min-width: 900px) { .announce__track { display: flex; justify-content: space-around; max-width: var(--container); margin: auto; padding-inline: var(--gutter); } .announce__item { opacity: 1; transform: none; } } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease); } .site-header.is-scrolled { border-color: var(--c-line); box-shadow: 0 6px 24px -18px rgba(15, 59, 44, .45); } .site-header.is-hidden { transform: translateY(-100%); } .site-header__inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); transition: height .35s var(--ease); } .site-header.is-scrolled .site-header__inner { height: calc(var(--header-h) - 10px); } .site-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } .site-header__account { display: none; } @media (min-width: 600px) { .site-header__account { display: inline-grid; } } .brand { display: grid; grid-template-columns: auto; justify-items: center; line-height: 1; color: var(--c-green); transform-origin: left center; transition: transform .35s var(--ease); } .site-header.is-scrolled .brand { transform: scale(.86); } .brand:hover { color: var(--c-green); } .brand__mark { color: var(--c-gold); margin-bottom: -2px; } .brand__name { font: 600 22px/1 var(--f-serif); letter-spacing: .06em; white-space: nowrap; } .brand__tag { margin-top: 4px; font: 500 7px/1 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--c-gold); } .brand__img { max-height: calc(var(--header-h) - 18px); width: auto; } .brand--light { color: #fff; } .brand--light:hover { color: #fff; } @media (min-width: 768px) { .brand__name { font-size: 27px; } .brand__tag { font-size: 8px; } } /* Search */ body.search { display: block !important; } form.search { position: relative; display: none; } .search__input { width: 250px; height: 40px; padding: 0 42px 0 16px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-white); font-size: 13px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), width .35s var(--ease-out); } .search__input::placeholder { color: #9a9d97; } .search__input:focus { outline: none; border-color: var(--c-gold-soft); box-shadow: 0 0 0 3px rgba(216, 178, 115, .2); } .search__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; color: var(--c-green); cursor: pointer; z-index: 2; padding: 0; transition: color .2s var(--ease), transform .2s var(--ease); } .search__btn:hover { color: var(--c-gold); } .search__btn:active { transform: translateY(-50%) scale(.92); } .search__btn svg { pointer-events: none; display: block; } .site-header__search-toggle { display: inline-grid; cursor: pointer; } .site-header__search-toggle svg { pointer-events: none; } @media (min-width: 1100px) { .site-header form.search { display: block; margin-right: 10px; } .site-header__search-toggle { display: none; } .site-header form.search .search__input { width: 250px; } .site-header form.search:focus-within .search__input, .site-header form.search.has-value .search__input { width: 285px; } } /* Mobile search: slides down beneath header */ @media (max-width: 1099px) { .site-header form.search.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 12px var(--gutter); background: var(--c-white); border-bottom: 1px solid var(--c-line); animation: rb-drop .35s var(--ease-out); box-shadow: 0 8px 24px -12px rgba(15, 59, 44, .25); } .site-header form.search.is-open .search__input { width: 100%; } .site-header form.search.is-open .search__btn { right: calc(var(--gutter) + 4px); } } @keyframes rb-drop { from { opacity: 0; transform: translateY(-8px); } } /* 6. Primary nav + mega menu -------------------------------------------- */ .site-header__burger { margin-left: -8px; } .site-header .nav { display: none; } @media (min-width: 1024px) { .site-header__burger { display: none; } .site-header .nav { display: block; margin-left: clamp(24px, 5vw, 72px); } .brand { justify-items: center; } } .nav__menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); } .nav__menu > li { position: relative; display: flex; align-items: center; } .nav__menu > li > a { position: relative; display: block; padding: 26px 0; font-size: 14px; font-weight: 500; color: var(--c-ink); } .nav__menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: var(--c-gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); } .nav__menu > li:hover > a::after, .nav__menu > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .nav__menu .menu-item--sale > a, .nav__menu .sale > a { color: var(--c-sale); } .nav__toggle { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--c-muted); transition: transform .3s var(--ease); } .site-header .nav .sub-menu { position: absolute; top: 100%; left: -20px; min-width: 220px; padding: 14px 0; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s; } .site-header .nav li:hover > .sub-menu, .site-header .nav li.is-open > .sub-menu, .site-header .nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .site-header .nav li.is-open > .nav__toggle, .site-header .nav li:hover > .nav__toggle { transform: rotate(180deg); } .site-header .nav .sub-menu a { display: block; padding: 8px 22px; font-size: 14px; color: var(--c-ink); } .site-header .nav .sub-menu a:hover { color: var(--c-gold); padding-left: 26px; transition: padding .3s var(--ease), color .3s; } /* Mega panel: top-level item with CSS class "mega" */ .site-header .nav .has-mega { position: static; } .site-header .nav .has-mega > .sub-menu { left: 50%; width: min(1100px, calc(100vw - 48px)); translate: -50% 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 32px; padding: 30px 36px; } .site-header .nav .has-mega > .sub-menu > li > a { padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--c-line); font: 600 19px/1.2 var(--f-serif); color: var(--c-green); } .site-header .nav .has-mega > .sub-menu > li > a:hover { padding-left: 0; } .site-header .nav .has-mega .sub-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0; min-width: 0; } .site-header .nav .has-mega .sub-menu .sub-menu a { padding: 5px 0; color: var(--c-muted); } .site-header .nav .has-mega .sub-menu .sub-menu a:hover { padding-left: 4px; color: var(--c-gold); } /* 7. Hero ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #f7efe3 0%, #efe2cc 55%, #e5d3b5 100%); isolation: isolate; } .hero__slides { display: grid; } .hero__slide { grid-area: 1 / 1; position: relative; display: grid; align-items: center; min-height: clamp(520px, 80vh, 640px); visibility: hidden; opacity: 0; transition: opacity .9s var(--ease), visibility .9s; } .hero__slide.is-active { visibility: visible; opacity: 1; z-index: 1; } .hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero__media picture, .hero__img { width: 100%; height: 115%; object-fit: cover; object-position: 70% center; } .hero__slide--right .hero__img { object-position: 30% center; } .hero__media::after { /* legibility wash for text on the left */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 247, 241, .92) 0%, rgba(250, 247, 241, .75) 45%, rgba(250, 247, 241, 0) 75%); } .hero__slide--light .hero__media::after { background: linear-gradient(180deg, rgba(10, 30, 22, .7), rgba(10, 30, 22, .2) 70%); } @media (min-width: 768px) { .hero__media::after { background: linear-gradient(90deg, rgba(250, 247, 241, .96) 0%, rgba(250, 247, 241, .82) 30%, rgba(250, 247, 241, 0) 55%); } .hero__slide--right .hero__media::after { background: linear-gradient(270deg, rgba(250, 247, 241, .96) 0%, rgba(250, 247, 241, .82) 30%, rgba(250, 247, 241, 0) 55%); } .hero__slide--light .hero__media::after { background: linear-gradient(90deg, rgba(10, 30, 22, .75), rgba(10, 30, 22, 0) 60%); } } .hero__content { position: relative; align-self: start; padding-top: 56px; padding-bottom: 90px; } @media (min-width: 768px) { .hero__content { align-self: center; padding-block: 60px; } } .hero__copy { max-width: 520px; } @media (min-width: 768px) { .hero__copy { padding-left: clamp(0px, 5vw, 56px); } } .hero__slide--right .hero__copy { margin-left: auto; } .hero__eyebrow { margin-bottom: 14px; font: 500 12px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); } .hero__title { font: 600 clamp(42px, 7vw, 76px)/1.02 var(--f-serif); color: var(--c-green); letter-spacing: -.005em; } /* Mask for the slide-up reveal. Cormorant's caps/descenders need ~1.2em, so the mask gets extra room above and below; negative margins keep the visual line spacing unchanged. */ .hero__title .line { display: block; overflow: hidden; padding: .14em .04em .12em 0; margin: -.14em 0 -.12em; } .hero__title .line > span { display: inline-block; } .hero__accent { color: var(--c-gold); } .hero__sub { max-width: 330px; margin-top: 18px; font-size: clamp(15px, 1.4vw, 17px); color: #2e3833; } .hero__cta { margin-top: 28px; } .hero__slide--light .hero__title, .hero__slide--light .hero__sub { color: #fff; } .hero__slide--light .hero__accent { color: var(--c-gold-soft); } .hero__side { display: none; position: absolute; right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: 110px; text-align: center; font: 500 11px/2 var(--f-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold); } .hero__side .icon { margin: 10px auto 0; } @media (min-width: 1100px) { .hero__side { display: block; } } .hero__leaf { position: absolute; left: -44px; top: 12px; z-index: 2; width: clamp(90px, 11vw, 150px); color: var(--c-gold); opacity: .7; pointer-events: none; } @media (max-width: 767px) { .hero__leaf { display: none; } } .hero__dots { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3; display: flex; gap: 10px; } @media (min-width: 768px) { .hero__dots { padding-left: calc(var(--gutter) + clamp(0px, 5vw, 56px)); } } .hero__dot { width: 12px; height: 12px; padding: 0; border: 1px solid var(--c-green); border-radius: 50%; background: transparent; transition: background-color .3s var(--ease), width .45s var(--ease-out); overflow: hidden; } .hero__dot.is-active { background: var(--c-green); } /* 8. Section heads -------------------------------------------------------- */ .section-head { position: relative; display: grid; justify-items: center; margin-bottom: clamp(20px, 3vw, 30px); text-align: center; } .section-head__ornament { color: var(--c-gold); margin-bottom: 2px; } .section-head__title { display: flex; align-items: center; gap: 18px; font: 500 clamp(16px, 1.8vw, 19px)/1.2 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-green); } .section-head__rule { display: block; width: clamp(28px, 6vw, 64px); height: 1px; background: currentColor; opacity: .55; transform-origin: center; } .section-head__link { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--c-green); } @media (min-width: 768px) { .section-head__link { position: absolute; right: 0; bottom: 4px; margin: 0; } } /* 9. Collections --------------------------------------------------------- */ .collections { padding-bottom: 0; } .collections__grid { display: grid; gap: 16px; } @media (min-width: 768px) { .collections--cards .collections__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } .col-card__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-sand); color: var(--c-green); } .col-card__link:hover { color: var(--c-green); } .collections--cards .col-card__link { aspect-ratio: 7 / 4; } .col-card__media { position: absolute; inset: 0; } .col-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .col-card__link:hover .col-card__media img { transform: scale(1.06); } .col-card__body { position: absolute; inset: 0 auto 0 0; width: 52%; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 4vw, 40px); background: linear-gradient(90deg, rgba(250, 247, 241, .92) 55%, rgba(250, 247, 241, 0)); } .col-card--right .col-card__body { inset: 0 0 0 auto; background: linear-gradient(270deg, rgba(250, 247, 241, .92) 55%, rgba(250, 247, 241, 0)); padding-left: 12%; } .col-card__title { font: 600 clamp(26px, 3.6vw, 40px)/1 var(--f-serif); max-width: 7ch; } .col-card__text { margin-top: 12px; max-width: 24ch; font-size: clamp(12px, 1.1vw, 14px); color: #3d4641; } .col-card__cta { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px; padding-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .col-card__cta::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease-out); } .col-card__link:hover .col-card__cta::after { transform: scaleX(1.25); } .col-card__link:hover .col-card__cta .icon { transform: translateX(4px); } .col-card__cta .icon { transition: transform .35s var(--ease-out); } .collections--circles .collections__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 24px 16px; } .collections--circles .col-card__link { background: none; text-align: center; overflow: visible; } .collections--circles .col-card__media { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-sand); box-shadow: 0 0 0 1px var(--c-line), 0 0 0 6px var(--c-cream), 0 0 0 7px var(--c-gold-pale); } .collections--circles .col-card__body { position: static; width: auto; padding: 14px 0 0; background: none; } .collections--circles .col-card__title { font-size: 21px; max-width: none; } /* 10. Product grid + cards ----------------------------------------------- */ .products-section { padding-bottom: 8px; } .product-grid, .woocommerce ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; } @media (min-width: 768px) { .product-grid, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 1024px) { .product-grid, .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product.p-card { width: auto; margin: 0; float: none; } .p-card { position: relative; display: flex; flex-direction: column; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .5s var(--ease), transform .5s var(--ease-out); } .p-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .p-card__media { position: relative; overflow: hidden; margin: 8px 8px 0; border-radius: 2px; background: var(--c-sand); aspect-ratio: var(--card-ratio); } .p-card__img-link { position: absolute; inset: 0; } .p-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform-origin: center top; transition: transform 1.1s var(--ease-out), opacity .6s var(--ease); } .p-card:hover .p-card__img { transform: scale(1.08); } .p-card__img--hover { opacity: 0; } .p-card__media.has-hover:hover .p-card__img--hover { opacity: 1; } .p-card__badges { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 5px; z-index: 2; pointer-events: none; } .badge { padding: 4px 8px; border-radius: 2px; font: 600 10px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; background: var(--c-white); color: var(--c-green); box-shadow: var(--shadow-sm); } .badge--sale { background: var(--c-sale); color: #fff; } .badge--new { background: var(--c-green); color: #fff; } .badge--custom { background: var(--c-gold-soft); color: var(--c-green); } .badge--soldout { background: #555; color: #fff; } .p-card__wish { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-green); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-out), color .3s, background-color .3s; } .p-card__wish:hover { transform: scale(1.1); } .p-card__wish[aria-pressed="true"] { color: var(--c-sale); } .p-card__wish[aria-pressed="true"] .icon path { fill: currentColor; } .p-card__wish.is-pop { animation: rb-bump .5s var(--ease-out); } .p-card__quick { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 30px; background: rgba(255, 255, 255, .95); color: var(--c-green); font: 500 11px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-md); opacity: 0; transform: translate(-50%, 12px); transition: opacity .4s var(--ease), transform .45s var(--ease-out), background-color .3s; } .p-card__quick:hover { background: var(--c-green); color: #fff; } .p-card:hover .p-card__quick, .p-card__quick:focus-visible { opacity: 1; transform: translate(-50%, 0); } @media (hover: none) { .p-card__quick { opacity: 1; transform: translate(-50%, 0); padding: 8px; } .p-card__quick span { display: none; } } .p-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 12px 12px; } .p-card__title { font: 500 13px/1.35 var(--f-sans); color: var(--c-ink); } @media (min-width: 768px) { .p-card__title { font-size: 14px; } } .p-card__meta { margin-top: 2px; font-size: 12px; color: var(--c-muted); } .p-card__price { margin: 6px 0 12px; font: 600 16px/1.2 var(--f-sans); color: var(--c-gold); } .p-card__price del { margin-right: 6px; font-size: 13px; font-weight: 400; color: var(--c-muted); } .p-card__price ins { text-decoration: none; } .p-card__atc { margin-top: auto; min-height: 38px; padding: 10px 12px; font-size: 11px; } .p-card__atc .icon { width: 15px; height: 15px; } .p-card .added_to_cart { display: none !important; } .p-card__atc.added::after { content: "✓"; margin-left: 4px; } /* 11. Promo split banner ------------------------------------------------- */ .promo { position: relative; display: grid; margin-top: var(--section-y); background: var(--c-green); color: #f3ead9; overflow: hidden; } @media (min-width: 768px) { .promo { grid-template-columns: 1.35fr 1fr; min-height: 300px; } .promo--img-right .promo__media { order: 2; } } .promo__media { position: relative; min-height: 220px; overflow: hidden; background: var(--c-green-2); } .promo__media img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; } @media (min-width: 768px) { .promo--img-left .promo__media::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 30%; background: linear-gradient(90deg, rgba(15, 59, 44, 0), var(--c-green)); } .promo--img-right .promo__media::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient(270deg, rgba(15, 59, 44, 0), var(--c-green)); } } .promo__panel { position: relative; display: flex; align-items: center; padding: clamp(32px, 5vw, 56px) var(--gutter); } @media (min-width: 768px) { .promo__panel { padding-inline: 8px clamp(40px, 7vw, 110px); } } .promo__leaf { position: absolute; right: -24px; bottom: -36px; width: 120px; color: var(--c-gold-soft); opacity: .35; transform: scaleX(-1); pointer-events: none; } .promo__copy { position: relative; max-width: 380px; } .promo__eyebrow { margin-bottom: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold-soft); } .promo__title { font: 500 clamp(32px, 3.6vw, 44px)/1.08 var(--f-serif); color: #f6eedf; } .promo__text { margin: 14px 0 22px; font-size: 14px; color: rgba(243, 234, 217, .85); } .countdown { margin: -6px 0 24px; } .countdown__label { margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold-soft); } .countdown__units { display: flex; gap: 10px; } .countdown__unit { display: grid; justify-items: center; min-width: 58px; padding: 10px 6px 8px; border: 1px solid rgba(216, 178, 115, .4); border-radius: 2px; } .countdown__unit b { font: 600 26px/1 var(--f-serif); color: #fff; font-variant-numeric: tabular-nums; } .countdown__unit small { margin-top: 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 234, 217, .7); } /* 12. Trust badges -------------------------------------------------------- */ .trust { margin-top: var(--section-y); background: var(--c-cream-2); border-block: 1px solid var(--c-line); } .trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; padding-block: 26px; } @media (min-width: 900px) { .trust__list { grid-template-columns: repeat(4, 1fr); padding-block: 22px; } } .trust__item { display: flex; align-items: center; gap: 14px; } @media (min-width: 900px) { .trust__item { justify-content: center; } .trust__item + .trust__item { border-left: 1px solid var(--c-line); } } .trust__icon { color: var(--c-gold); transition: transform .6s var(--ease-out); } .trust__item:hover .trust__icon { transform: translateY(-3px) rotate(-6deg); } .trust__title { display: block; font-size: 13px; font-weight: 600; color: var(--c-green); } .trust__text { display: block; font-size: 12px; color: var(--c-muted); } /* 13. Instagram ----------------------------------------------------------- */ .insta { padding-bottom: 0; } .insta__head { margin-bottom: 20px; text-align: center; } .insta__title { font: 600 clamp(18px, 2vw, 21px)/1.2 var(--f-sans); letter-spacing: .04em; color: var(--c-green); } .insta__sub { margin-top: 4px; font-size: 13px; color: var(--c-muted); } .insta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-inline: 6px; } @media (min-width: 1024px) { .insta__grid { grid-template-columns: repeat(8, 1fr); gap: 8px; padding-inline: 16px; } } .insta__tile a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--c-sand); } .insta__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .insta__overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(15, 59, 44, .45); opacity: 0; transition: opacity .4s var(--ease); } .insta__tile a:hover img { transform: scale(1.1); } .insta__tile a:hover .insta__overlay { opacity: 1; } /* 14. Newsletter ---------------------------------------------------------- */ .newsletter { position: relative; margin-top: var(--section-y); background: var(--c-green); color: #f3ead9; overflow: hidden; } .newsletter__inner { position: relative; z-index: 1; display: grid; gap: 22px; padding-block: 40px; } @media (min-width: 900px) { .newsletter__inner { grid-template-columns: 1fr 1fr; align-items: center; padding-block: 44px; padding-inline: calc(var(--gutter) + 90px); } } .newsletter__copy { display: flex; align-items: center; gap: 18px; } .newsletter__icon { color: var(--c-gold-soft); } .newsletter__title { font: 500 clamp(20px, 2vw, 24px)/1.2 var(--f-sans); color: #fff; } .newsletter__text { margin-top: 4px; font-size: 13px; color: rgba(243, 234, 217, .8); } .newsletter__form { position: relative; display: flex; flex-wrap: wrap; gap: 8px; } .newsletter__form input[type="email"] { flex: 1 1 220px; height: 46px; padding: 0 16px; border: 1px solid transparent; border-radius: 2px; background: #fff; color: var(--c-ink); font-size: 14px; } .newsletter__form input[type="email"]:focus { outline: none; border-color: var(--c-gold-soft); box-shadow: 0 0 0 3px rgba(216, 178, 115, .35); } .newsletter__form .btn { min-height: 46px; padding-inline: 28px; } .newsletter__msg { flex-basis: 100%; min-height: 1.4em; font-size: 13px; color: var(--c-gold-soft); } .newsletter__msg.is-error { color: #ffb4a8; } .newsletter__leaf { position: absolute; width: 140px; color: var(--c-gold-soft); opacity: .35; pointer-events: none; } .newsletter__leaf--l { left: -30px; bottom: -40px; } .newsletter__leaf--r { right: -30px; top: -40px; transform: rotate(180deg); } @media (max-width: 899px) { .newsletter__leaf--l { display: none; } } /* 15. Footer -------------------------------------------------------------- */ .site-footer { background: #0b2f23; color: rgba(243, 234, 217, .78); font-size: 14px; } .site-footer a:hover { color: var(--c-gold-soft); } .site-footer__main { display: grid; gap: 32px; padding-block: 48px 36px; border-top: 1px solid rgba(216, 178, 115, .18); } @media (min-width: 600px) { .site-footer__main { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__main { display: flex; gap: 48px; } .site-footer__main > * { flex: 1 1 0; } .site-footer__main > .site-footer__brand { flex-grow: 1.6; } } .site-footer__brand .brand { justify-items: start; margin-bottom: 14px; } .site-footer__brand .brand__mark { color: var(--c-gold-soft); } .site-footer__brand p { max-width: 34ch; } .site-footer__title { margin-bottom: 14px; font: 600 12px/1.2 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-soft); } .site-footer__links li + li { margin-top: 8px; } .site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; } .site-footer__contact li + li { margin-top: 10px; } .site-footer__contact .icon { margin-top: 3px; color: var(--c-gold-soft); } .social { display: flex; gap: 8px; margin-top: 18px; } .social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(216, 178, 115, .35); border-radius: 50%; transition: background-color .3s, color .3s, transform .3s var(--ease-out); } .social a:hover { background: var(--c-gold-soft); color: var(--c-green); transform: translateY(-2px); } .site-footer__bottom { border-top: 1px solid rgba(216, 178, 115, .15); } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; font-size: 12px; } .payments { display: flex; flex-wrap: wrap; gap: 6px; } .pay-badge { display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 8px; border-radius: 3px; background: #fff; color: #1a1f71; font: 700 10px/1 var(--f-sans); letter-spacing: .04em; } .pay-badge--mastercard { color: #eb001b; } .pay-badge--rupay { color: #097939; } .pay-badge--upi { color: #5f259f; } .pay-badge--amex { color: #2e77bb; } .pay-badge--cod { color: var(--c-green); } /* 16. Drawers, overlay, modal, toast ------------------------------------ */ .overlay { position: fixed; inset: 0; z-index: 90; background: rgba(12, 30, 23, .45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .4s var(--ease); } .overlay.is-visible { opacity: 1; } .drawer { position: fixed; top: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; width: min(420px, 92vw); background: var(--c-cream); box-shadow: var(--shadow-lg); transition: transform .55s var(--ease-out); } .drawer--right { right: 0; transform: translateX(105%); } .drawer--left { left: 0; transform: translateX(-105%); width: min(360px, 88vw); } .drawer.is-open { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--c-line); } .drawer__title { font: 600 22px/1 var(--f-serif); color: var(--c-green); } .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; } .mnav .nav__menu { display: block; } .mnav .nav__menu > li { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); } .mnav .nav__menu > li > a { flex: 1; padding: 14px 0; font: 600 20px/1.2 var(--f-serif); color: var(--c-green); } .mnav .nav__menu > li > a::after { display: none; } .mnav .nav__toggle { width: 44px; height: auto; } .mnav .sub-menu { flex-basis: 100%; display: none; padding: 0 0 12px 12px; } .mnav li.is-open > .sub-menu { display: block; animation: rb-drop .35s var(--ease-out); } .mnav li.is-open > .nav__toggle { transform: rotate(180deg); } .mnav .sub-menu a { display: block; padding: 7px 0; color: var(--c-muted); } form.search--drawer { display: block; margin-bottom: 12px; } form.search--drawer .search__input { width: 100%; } .modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; pointer-events: none; } .modal[hidden] { display: none; } .modal__panel { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--c-cream); border-radius: var(--radius); box-shadow: var(--shadow-lg); pointer-events: auto; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .4s var(--ease), transform .5s var(--ease-out); } .modal.is-open .modal__panel { opacity: 1; transform: none; } .modal__close { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(255, 255, 255, .9); } .modal__content.is-loading { min-height: 360px; display: grid; place-items: center; } .modal__content.is-loading::after { content: ""; width: 28px; height: 28px; border: 2px solid var(--c-green); border-right-color: transparent; border-radius: 50%; animation: rb-spin .8s linear infinite; } .toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; padding: 12px 20px; border-radius: 30px; background: var(--c-green); color: #fff; font-size: 13px; box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease-out); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } body.is-locked { overflow: hidden; } /* 17. Mini cart ----------------------------------------------------------- */ .rb-ship-progress { padding: 14px 22px; background: var(--c-cream-2); border-bottom: 1px solid var(--c-line); font-size: 13px; } .rb-ship-progress strong { color: var(--c-green); } .rb-ship-progress__bar { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--c-line); overflow: hidden; } .rb-ship-progress__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft)); transition: width .8s var(--ease-out); } .widget_shopping_cart_content .woocommerce-mini-cart { display: grid; gap: 14px; } .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 4px 14px; padding: 0 28px 14px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; } .woocommerce-mini-cart-item > a:not(.remove) { display: contents; font-weight: 500; color: var(--c-ink); } .woocommerce-mini-cart-item img { grid-row: span 3; width: 76px; height: 90px; object-fit: cover; object-position: center top; border-radius: 2px; } .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--c-muted); font-size: 13px; } .woocommerce-mini-cart-item .quantity .amount { color: var(--c-gold); font-weight: 600; } .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--c-muted) !important; font-size: 18px; line-height: 1; } .woocommerce-mini-cart-item .remove:hover { background: var(--c-sale); color: #fff !important; } .woocommerce-mini-cart-item dl.variation { grid-column: 2; margin: 0; font-size: 12px; color: var(--c-muted); } .woocommerce-mini-cart-item dl.variation dt, .woocommerce-mini-cart-item dl.variation dd { display: inline; margin: 0; } .woocommerce-mini-cart-item dl.variation p { display: inline; } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 20px 0 14px; font-size: 16px; } .woocommerce-mini-cart__total .amount { font-weight: 600; color: var(--c-green); } .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; } .woocommerce-mini-cart__buttons .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 14px 20px; border: 1px solid var(--c-green); border-radius: 2px; background: var(--c-green); color: #fff; font: 500 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s var(--ease), color .3s var(--ease); } .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--c-green-3); color: #fff; } .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: var(--c-green) !important; color: #fff !important; } .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent !important; color: var(--c-green) !important; border-color: var(--c-green) !important; } .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--c-muted); } /* 18. Quick view ---------------------------------------------------------- */ .qv { display: grid; } @media (min-width: 768px) { .qv { grid-template-columns: 1fr 1fr; } } .qv__gallery { padding: 16px; } .qv__main { display: grid; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--c-sand); } .qv__main img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .5s var(--ease); } .qv__main img.is-active, .qv__main img:only-child { opacity: 1; } .qv__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; } .qv__thumb { flex: none; width: 58px; height: 58px; padding: 0; border: 1px solid transparent; border-radius: 2px; overflow: hidden; background: none; opacity: .6; transition: opacity .3s, border-color .3s; } .qv__thumb.is-active, .qv__thumb:hover { opacity: 1; border-color: var(--c-gold); } .qv__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .qv__summary { padding: 8px 22px 28px; } @media (min-width: 768px) { .qv__summary { padding: 48px 36px 36px 16px; } } .qv__eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); } .qv__title { margin-top: 6px; font: 600 clamp(26px, 3vw, 34px)/1.1 var(--f-serif); color: var(--c-green); } .qv__price { margin-top: 10px; font-size: 20px; font-weight: 600; color: var(--c-gold); } .qv__price del { color: var(--c-muted); font-size: 15px; font-weight: 400; margin-right: 6px; } .qv__price ins { text-decoration: none; } .qv__desc { margin-top: 14px; font-size: 14px; color: #414a45; } .qv__cart { margin-top: 20px; } .qv__cart form.cart { display: flex; flex-wrap: wrap; gap: 10px; } .qv__cart .variations_form { display: block; } .qv__cart table.variations { width: 100%; margin-bottom: 14px; border-collapse: collapse; } .qv__cart table.variations th, .qv__cart table.variations td { display: block; padding: 0 0 6px; text-align: left; font-size: 13px; } .qv__cart select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } .qv__cart .reset_variations { font-size: 12px; color: var(--c-muted); } .qv__cart .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; gap: 10px; margin-top: 10px; } .qv__cart .quantity .qty { width: 70px; height: 44px; text-align: center; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } .qv__cart .single_add_to_cart_button { flex: 1; min-height: 44px; padding: 12px 22px; border: 0; border-radius: 2px; background: var(--c-green); color: #fff; font: 500 12px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s var(--ease); } .qv__cart .single_add_to_cart_button:hover { background: var(--c-green-3); } .qv__cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; } .qv__cart .stock { width: 100%; margin: 0; font-size: 13px; color: var(--c-green); } .qv__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 13px; font-weight: 500; color: var(--c-green); border-bottom: 1px solid currentColor; } /* 19. Generic + WooCommerce pages ---------------------------------------- */ .page-main { padding-block: 40px 64px; } .shop-main { padding: 0; } .shop-main > .woocommerce-notices-wrapper { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 16px auto 0; padding-inline: var(--gutter); } .page-head { margin-bottom: 28px; text-align: center; } .page-head__title, .woocommerce-products-header__title { font: 600 clamp(32px, 4vw, 46px)/1.1 var(--f-serif); color: var(--c-green); } .entry__content { max-width: 1100px; margin-inline: auto; } /* Plain text pages (policies etc.): readable measure + rhythm. Direct children only, so Cart/Checkout markup is untouched. */ .page-main .entry__content:has(> p:first-child) { max-width: 760px; font-size: 15px; line-height: 1.75; color: var(--c-ink); } .page-main .entry__content > p { margin: 0 0 14px; } .page-main .entry__content > h2 { margin: 36px 0 12px; font: 600 26px/1.2 var(--f-serif); color: var(--c-green); } .page-main .entry__content > ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; } .page-main .entry__content > ul > li { margin-bottom: 6px; padding-left: 4px; } .page-main .entry__content > ul > li::marker { color: var(--c-gold); } .page-main .entry__content strong { font-weight: 600; color: var(--c-green); } .woocommerce .woocommerce-breadcrumb { margin-bottom: 18px; font-size: 13px; color: var(--c-muted); } .woocommerce .woocommerce-result-count { font-size: 13px; color: var(--c-muted); } .woocommerce .woocommerce-ordering select { height: 40px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } .woocommerce span.onsale { background: var(--c-sale); border-radius: 2px; min-height: 0; min-width: 0; padding: 6px 10px; line-height: 1; font-size: 11px; } .woocommerce div.product .product_title { font: 600 clamp(30px, 3.4vw, 42px)/1.1 var(--f-serif); color: var(--c-green); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--c-gold); font-weight: 600; font-size: 22px; } .wishlist-empty { display: grid; justify-items: center; gap: 18px; padding: 40px 0; color: var(--c-muted); } .wishlist-empty[hidden] { display: none; } /* 20. Motion start states (only when JS is running; removed by GSAP) ---- */ .js:not(.rb-no-anim) [data-reveal], .js:not(.rb-no-anim) [data-hero-anim] { opacity: 0; } .js:not(.rb-no-anim) .hero__slide:not(.is-active) [data-hero-anim] { opacity: 0; } .rb-no-anim [data-reveal], .rb-no-anim [data-hero-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-hero-anim] { opacity: 1 !important; } } /* ========================================================================== INNER PAGES 21. Active nav 22. Page banner & breadcrumb 23. Shop / category archive 24. Trust variants 25. Product page 26. Accordion 27. Cart 28. Login / register 29. WooCommerce base (notices, forms, tables, account) ========================================================================== */ /* 21. Active nav ---------------------------------------------------------- */ .nav__menu > .current-menu-item > a, .nav__menu > .current-menu-ancestor > a, .nav__menu > .current-menu-parent > a, .nav__menu > .current-product_cat-ancestor > a { color: var(--c-gold); } .mnav .nav__menu > .current-menu-item > a, .mnav .nav__menu > .current-menu-ancestor > a { color: var(--c-gold); } /* 22. Page banner & breadcrumb ------------------------------------------- */ .page-banner { position: relative; display: grid; align-items: center; overflow: hidden; isolation: isolate; min-height: 200px; background: linear-gradient(100deg, #f8f1e6 0%, #f1e6d3 60%, #ead9bd 100%); } @media (min-width: 768px) { .page-banner--lg { min-height: 300px; } .page-banner--sm { min-height: 220px; } } .page-banner__media { position: absolute; inset: 0 0 0 auto; width: 100%; z-index: -1; } @media (min-width: 768px) { .page-banner__media { width: 64%; } } .page-banner__media img { width: 100%; height: 115%; object-fit: cover; object-position: 60% center; } .page-banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248, 241, 230, .95) 0%, rgba(248, 241, 230, .7) 40%, rgba(248, 241, 230, .1) 75%); } @media (min-width: 768px) { .page-banner__media::after { background: linear-gradient(90deg, #f6eee1 0%, rgba(246, 238, 225, .6) 22%, rgba(246, 238, 225, 0) 45%); } } .page-banner__content { position: relative; padding-block: 36px; } @media (min-width: 768px) { .page-banner__content { padding-left: calc(var(--gutter) + clamp(0px, 7vw, 110px)); } } .page-banner__title { max-width: 11ch; font: 600 clamp(34px, 5vw, 58px)/1.02 var(--f-serif); color: var(--c-green); } .page-banner__sub { max-width: 32ch; margin-top: 12px; font-size: clamp(14px, 1.3vw, 17px); color: #33403a; } .page-banner__leaf { position: absolute; left: -38px; top: -10px; width: clamp(80px, 9vw, 130px); color: var(--c-gold); opacity: .7; pointer-events: none; } .breadcrumb { padding-block: 14px; font-size: 12px; color: var(--c-muted); } .breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .breadcrumb a { color: var(--c-ink); } .breadcrumb a:hover { color: var(--c-gold); } .breadcrumb__sep { display: inline-flex; color: var(--c-muted); opacity: .7; } /* 23. Shop / category archive -------------------------------------------- */ .archive { padding-bottom: var(--section-y); } .archive .section-head__title, .section-head__title--serif, .pdp__related-title, .archive__heading { font: 500 clamp(22px, 2.4vw, 28px)/1.15 var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--c-green); } .subcats { padding-block: 8px 34px; } .subcats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 600px) { .subcats__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .subcats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } } .subcat a { display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-white); box-shadow: var(--shadow-sm); color: var(--c-ink); transition: box-shadow .4s var(--ease), transform .5s var(--ease-out); } .subcat a:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); color: var(--c-green); } .subcat__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); } .subcat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .subcat a:hover .subcat__media img { transform: scale(1.08); } .subcat__name { display: block; padding: 10px 6px 12px; text-align: center; font-size: 13px; font-weight: 500; } .archive__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 18px; } .archive__toolbar .woocommerce-result-count { margin: 0; font-size: 13px; color: var(--c-muted); } .archive__sort { position: relative; display: flex; align-items: center; margin-left: auto; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-white); } .archive__sort-label { padding-left: 12px; font-size: 12px; color: var(--c-muted); white-space: nowrap; } .archive__sort .woocommerce-ordering { margin: 0; } .archive__sort select { height: 38px; padding: 0 34px 0 6px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--c-ink); appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231d2521' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .archive__sort select:focus { outline: none; } .archive__sort:focus-within { border-color: var(--c-gold-soft); } /* WooCommerce loop reset so theme cards win over any leftover core rules */ .woocommerce ul.products li.p-card .p-card__media img { width: 100%; height: 100%; margin: 0; } .woocommerce ul.products li.p-card { padding: 0; text-align: left; } .woocommerce-no-products-found .woocommerce-info { margin-top: 20px; } .woocommerce-pagination { margin-top: 34px; } .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; gap: 6px; border: 0; } .woocommerce-pagination .page-numbers li { border: 0; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-white); font-size: 13px; color: var(--c-ink); transition: background-color .25s, color .25s, border-color .25s; } .woocommerce-pagination .page-numbers a:hover { border-color: var(--c-green); color: var(--c-green); } .woocommerce-pagination .page-numbers span.current { background: var(--c-green); border-color: var(--c-green); color: #fff; } /* 24. Trust variants ------------------------------------------------------ */ .trust--row, .trust--stack { margin: 0; background: none; border: 0; } .trust--row .trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 18px 0; border-block: 1px solid var(--c-line); } @media (min-width: 900px) { .trust--row .trust__list { grid-template-columns: repeat(var(--n, 4), 1fr); } .trust--row .trust__list[data-count="3"] { --n: 3; } } .trust--row .trust__item { justify-content: flex-start; gap: 12px; border: 0 !important; } .trust--row .trust__title { font-size: 12px; } .trust--row .trust__text { font-size: 11px; } .trust--stack { background: var(--c-cream-2); border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } .trust--stack .trust__list { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 8px; } .trust--stack .trust__item { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 0 6px; text-align: center; } .trust--stack .trust__item + .trust__item { border-left: 1px solid var(--c-line); } .trust--stack .trust__title { font-size: 12px; } .trust--stack .trust__text { font-size: 11px; } /* 25. Product page -------------------------------------------------------- */ .pdp { padding-bottom: var(--section-y); } .pdp__top { display: grid; gap: 24px; margin-bottom: 26px; } @media (min-width: 900px) { .pdp__top { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } } .pdp__gallery { display: grid; gap: 10px; } @media (min-width: 900px) { .pdp__gallery { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; position: sticky; top: calc(var(--header-h) + 12px); } .pdp__thumbs { flex-direction: column; overflow-y: auto; max-height: 560px; } } .pdp__thumbs { order: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } @media (min-width: 900px) { .pdp__thumbs { order: 0; } } .pdp__thumb { flex: none; width: 70px; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-sand); opacity: .65; transition: opacity .3s, border-color .3s; } @media (min-width: 900px) { .pdp__thumb { width: 100%; } } .pdp__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .pdp__thumb.is-active, .pdp__thumb:hover { opacity: 1; border-color: var(--c-gold); } .pdp__stage { position: relative; display: grid; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--c-sand); } .pdp__slide { grid-area: 1 / 1; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; cursor: zoom-in; } .pdp__slide.is-active { opacity: 1; visibility: visible; } .pdp__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s var(--ease-out); } .pdp__slide.is-zoomed img { transform: scale(2); } .pdp__wish { top: 14px; right: 14px; width: 38px; height: 38px; } .pdp__zoom { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-green); box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, .08)); transition: transform .3s var(--ease-out), background .3s; } .pdp__zoom:hover { transform: scale(1.08); background: #fff; } /* Full-screen image viewer */ .lightbox { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; background: rgba(12, 30, 23, .97); opacity: 0; transition: opacity .35s var(--ease); touch-action: pan-y; } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox__frame { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; cursor: zoom-in; } .lightbox__frame.is-zoomed { cursor: zoom-out; } .lightbox__img { max-width: min(100vw - 32px, 1100px); max-height: calc(100vh - 100px); object-fit: contain; transition: transform .35s var(--ease-out); user-select: none; -webkit-user-drag: none; } .lightbox__frame.is-zoomed .lightbox__img { transform: scale(2.2); transition: none; } .lightbox__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: background .3s; } .lightbox__btn:hover { background: rgba(255, 255, 255, .25); } .lightbox__close { top: 16px; right: 16px; } .lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); } .lightbox__count { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 13px; letter-spacing: .08em; } .pdp__stage .p-card__badges { left: 14px; top: 14px; } .pdp__title { font: 600 clamp(28px, 3.2vw, 38px)/1.1 var(--f-serif); color: var(--c-green); } .pdp__summary .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; } .pdp__price { margin-top: 12px; font: 600 clamp(22px, 2.2vw, 26px)/1.2 var(--f-sans); color: var(--c-maroon); } .pdp__price del { margin-right: 8px; font-size: .7em; font-weight: 400; color: var(--c-muted); } .pdp__price ins { text-decoration: none; } .price-note { margin-top: 4px; font-size: 12px; color: var(--c-muted); } .pdp__excerpt { margin-top: 16px; font-size: 14px; color: #3d4641; } .pdp__specs { display: grid; gap: 8px; margin: 22px 0 0; font-size: 14px; } .pdp__specs div { display: grid; grid-template-columns: 110px 1fr; } .pdp__specs dt { color: var(--c-ink); font-weight: 500; } .pdp__specs dd { margin: 0; color: #3d4641; } .pdp__specs dd::before { content: ": "; } .pdp__cart { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 18px; margin-top: 28px; } .pdp__qty-label { grid-column: 1 / -1; font-size: 14px; font-weight: 500; } .pdp__cart > form.cart:not(.variations_form) { display: contents; } .pdp__cart > form.cart:not(.variations_form) .quantity { grid-row: 2; grid-column: 1; } .pdp__cart > .stock { grid-row: 2; grid-column: 2; margin: 0; font-size: 13px; font-weight: 500; color: var(--c-success); } .pdp__cart > .stock.out-of-stock { color: var(--c-sale); } .pdp__cart > form.cart:not(.variations_form) .single_add_to_cart_button { grid-row: 3; grid-column: 1 / -1; } .pdp__cart > .variations_form { grid-column: 1 / -1; } .pdp__cart .single_add_to_cart_button, .qv__cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 2px; background: var(--c-green); color: #fff; font: 500 15px/1 var(--f-sans); letter-spacing: .02em; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); } .pdp__cart .single_add_to_cart_button::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2.8l2.4 12.2h11.6L21 7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2.8l2.4 12.2h11.6L21 7H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .pdp__cart .single_add_to_cart_button:hover { background: var(--c-green-3); box-shadow: var(--shadow-md); } .pdp__cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; } .pdp__cart .single_add_to_cart_button.loading { opacity: .75; } .pdp__cart table.variations { width: 100%; margin-bottom: 12px; border-collapse: collapse; } .pdp__cart table.variations th, .pdp__cart table.variations td { display: block; padding: 0 0 6px; text-align: left; font-size: 14px; } .pdp__cart table.variations select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } .pdp__cart .reset_variations { font-size: 12px; color: var(--c-muted); } .pdp__cart .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 12px; } .pdp__cart .woocommerce-variation-price .price { font-size: 20px; font-weight: 600; color: var(--c-maroon); } .pdp__summary .product_meta { display: grid; gap: 4px; margin-top: 22px; font-size: 12px; color: var(--c-muted); } .pdp__summary .product_meta a { color: var(--c-ink); } .pdp .trust--row { margin-bottom: 26px; } .pdp__related { margin-top: var(--section-y); } .pdp__related-title { margin-bottom: 18px; } /* Quantity stepper (product, quick view, cart) */ .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-white); } .quantity .qty { width: 52px; height: 42px; padding: 0; border: 0; border-inline: 1px solid var(--c-line); background: transparent; text-align: center; font-size: 15px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity .qty:focus { outline: none; background: var(--c-cream); } .qty-btn { width: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--c-ink); transition: background-color .2s, color .2s; } .qty-btn:hover { background: var(--c-cream-2); color: var(--c-green); } .quantity:has(.qty[type="hidden"]) .qty-btn { display: none; } /* 26. Accordion ----------------------------------------------------------- */ .accordion { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .accordion__item + .accordion__item { border-top: 1px solid var(--c-line); } .accordion__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 15px; font-weight: 500; color: var(--c-ink); cursor: pointer; list-style: none; transition: color .25s var(--ease), background-color .25s; } .accordion__head::-webkit-details-marker { display: none; } .accordion__head:hover { color: var(--c-green); background: var(--c-cream); } .accordion__head .icon { transition: transform .35s var(--ease-out); } .accordion__item[open] > .accordion__head { color: var(--c-green); } .accordion__item[open] > .accordion__head .icon { transform: rotate(180deg); } .accordion__body { overflow: hidden; padding: 0 20px 20px; font-size: 14px; color: #3d4641; } .accordion__body p + p { margin-top: 10px; } .accordion__body table { width: 100%; border-collapse: collapse; } .accordion__body th, .accordion__body td { padding: 8px 0; border-bottom: 1px solid var(--c-line); text-align: left; font-weight: 400; vertical-align: top; } .accordion__body th { width: 160px; font-weight: 500; color: var(--c-ink); } .accordion__body td p { margin: 0; } /* 27. Cart ---------------------------------------------------------------- */ .cart-page { padding-bottom: var(--section-y); } .cart-layout { display: grid; gap: 24px; align-items: start; } @media (min-width: 1024px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; } .cart-side { position: sticky; top: calc(var(--header-h) + 12px); } } .cart-panel { padding: 14px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } @media (min-width: 768px) { .cart-panel { padding: 18px 12px 12px; } } .cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 14px; } .cart-panel__title { font: 500 20px/1.2 var(--f-sans); color: var(--c-ink); } .cart-panel__clear { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-maroon); } .cart-panel__clear:hover { color: var(--c-sale); } .cart-item { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px; align-items: center; padding: 14px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-cream); } .cart-item + .cart-item { margin-top: 10px; } @media (min-width: 768px) { .cart-item { grid-template-columns: 124px 1fr auto 56px; padding: 12px 14px; } } .cart-item__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: 2px; } .cart-item__name { font-size: 16px; font-weight: 500; line-height: 1.3; } .cart-item__name a { color: var(--c-ink); } .cart-item__name a:hover { color: var(--c-green); } .cart-item__line { font-size: 13px; line-height: 1.55; color: var(--c-muted); } .cart-item__line span { color: #555b56; } .cart-item__info .variation { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); } .cart-item__info .variation dt, .cart-item__info .variation dd { display: inline; margin: 0; } .cart-item__info .variation dd p { display: inline; } .cart-item__price { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--c-maroon); } .cart-item__qty { grid-column: 2; } @media (min-width: 768px) { .cart-item__qty { grid-column: auto; } } .cart-item__remove { position: absolute; top: 10px; right: 10px; } @media (min-width: 768px) { .cart-item__remove { position: static; justify-self: center; } } .cart-item__remove .remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--c-ink); transition: background-color .25s, color .25s; } .cart-item__remove .remove:hover { background: #fbe9e7; color: var(--c-sale); } .cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; } .cart-actions__back { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--c-ink); } .cart-actions__back .icon.is-flipped { transform: scaleX(-1); transition: transform .3s var(--ease-out); } .cart-actions__back:hover .icon.is-flipped { transform: scaleX(-1) translateX(4px); } .cart-actions__coupon { margin-left: auto; font-size: 13px; } .cart-actions__coupon summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--c-green); list-style: none; } .cart-actions__coupon summary::-webkit-details-marker { display: none; } .coupon__row { display: flex; gap: 6px; margin-top: 8px; } .coupon__row .input-text { height: 42px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } .cart-actions__update { gap: 8px; color: var(--c-green); border-color: var(--c-gold-soft); letter-spacing: .02em; text-transform: none; font-size: 14px; } .cart-actions__update:hover { background: var(--c-cream-2); } .cart-actions__update[disabled] { opacity: .55; cursor: default; } .order-summary { padding: 22px 22px 24px; border: 1px solid var(--c-line); border-radius: var(--radius) var(--radius) 0 0; background: var(--c-white); } .order-summary__title { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--c-line); font: 500 26px/1.1 var(--f-serif); color: var(--c-green); } .order-summary__rows { display: grid; gap: 10px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); font-size: 15px; } .order-summary__row { display: flex; justify-content: space-between; gap: 12px; } .order-summary__row dt { color: var(--c-ink); } .order-summary__row dd { margin: 0; text-align: right; font-weight: 500; } .order-summary__row dd.is-muted { font-weight: 400; font-size: 14px; color: var(--c-muted); } .order-summary__row .woocommerce-remove-coupon { margin-left: 4px; font-size: 12px; color: var(--c-sale); } .order-summary__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; font-weight: 500; } .order-summary__total strong { font-size: 24px; font-weight: 600; } .order-summary .price-note { text-align: right; } .wc-proceed-to-checkout { margin-top: 18px; } .wc-proceed-to-checkout .checkout-button { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 14px 20px; border: 0; border-radius: 2px; background: var(--c-gold-soft); color: var(--c-green); font: 500 16px/1 var(--f-sans); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); } .wc-proceed-to-checkout .checkout-button::after { content: "→"; transition: transform .3s var(--ease-out); } .wc-proceed-to-checkout .checkout-button:hover { background: var(--c-gold-pale); color: var(--c-green); box-shadow: var(--shadow-md); } .wc-proceed-to-checkout .checkout-button:hover::after { transform: translateX(4px); } .or-divider { display: flex; align-items: center; gap: 14px; margin: 16px 0; font-size: 12px; color: var(--c-ink); } .or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); } .btn--gold-outline { min-height: 48px; border-color: var(--c-gold-soft); color: var(--c-gold); background: transparent; text-transform: none; letter-spacing: .02em; font-size: 15px; } .btn--gold-outline:hover { background: var(--c-cream-2); color: var(--c-gold); } .cart-suggest { margin-top: var(--section-y); } .product-grid--row { grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 768px) { .product-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .product-grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .product-grid--row .p-card { flex-direction: row; } .product-grid--row .p-card__media { flex: 0 0 44%; margin: 8px 0 8px 8px; aspect-ratio: auto; min-height: 140px; } .product-grid--row .p-card__body { justify-content: center; padding: 12px; } .product-grid--row .p-card__quick { display: none; } .product-grid--row .p-card__wish { width: 28px; height: 28px; } .product-grid--row .p-card__price { color: var(--c-maroon); } .cart-empty-state { display: grid; justify-items: center; gap: 18px; max-width: 460px; margin: 20px auto 0; padding: 48px 24px; text-align: center; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .cart-empty-state__icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--c-cream-2); color: var(--c-gold); } .cart-empty-state .wc-empty-cart-message .cart-empty { margin: 0; padding: 0; border: 0; background: none; font: 500 24px/1.2 var(--f-serif); color: var(--c-green); } .cart-empty-state .wc-empty-cart-message .cart-empty::before { display: none; } /* 28. Login / register ---------------------------------------------------- */ .auth-main { background: var(--c-cream); } .auth { position: relative; display: grid; align-content: start; overflow-x: clip; } @media (min-width: 900px) { /* 50/50 split: photo on one half, card centred in the other at every width */ .auth { grid-template-columns: 1fr 1fr; align-items: center; align-content: center; min-height: clamp(700px, calc(100vh - var(--header-h) - 34px), 900px); } .auth::after { content: ""; position: absolute; inset: 0 0 0 50%; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 45%, rgba(234, 215, 178, .35), transparent 70%), linear-gradient(180deg, #faf6ee 0%, #f5eee2 100%); } .auth--register::after { inset: 0 50% 0 0; } } .auth__media { position: relative; height: 240px; overflow: hidden; background: var(--c-sand); } @media (min-width: 900px) { .auth__media { position: absolute; inset: 0 auto 0 0; width: 50%; height: auto; z-index: 1; } .auth--register .auth__media { inset: 0 0 0 auto; } } .auth__media img { width: 100%; height: 100%; object-fit: cover; } .auth__card { position: relative; z-index: 1; width: calc(100% - 2 * var(--gutter)); max-width: 440px; margin: -60px auto 40px; padding: 34px 26px 30px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fdfbf7; box-shadow: var(--shadow-lg); } @media (min-width: 900px) { .auth__card { grid-column: 2; width: min(480px, calc(100% - 64px)); max-width: none; margin: 56px auto; padding: 56px 48px 44px; justify-self: center; z-index: 2; } .auth--register .auth__card { grid-column: 1; grid-row: 1; margin: 40px auto; padding: 44px 44px 40px; } } .auth__leaf { position: absolute; width: 110px; color: var(--c-gold); opacity: .55; pointer-events: none; } .auth__leaf--top { left: -60px; top: -40px; } .auth__leaf--bottom { right: -18px; bottom: -24px; transform: rotate(160deg); } @media (max-width: 899px) { .auth__leaf--top { display: none; } } .auth__title { font: 600 clamp(34px, 3.8vw, 44px)/1.05 var(--f-serif); color: var(--c-green); } .auth__text { margin: 12px 0 26px; font-size: 16px; color: #33403a; } .auth__form { display: grid; gap: 18px; } .auth__form .btn--lg { margin-top: 6px; } .auth__switch { margin-top: 26px; text-align: center; font-size: 15px; color: #33403a; } .auth--login .auth__switch { text-align: left; } .auth__switch a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-weight: 500; color: var(--c-gold); } .auth__switch a:hover { color: var(--c-green); } .auth__social > * { display: grid; gap: 10px; } .auth__trust { padding-block: 10px 40px; } .auth__trust .trust__list { border: 0; } .field { display: grid; gap: 8px; } .field label, .field__label-row { font-size: 14px; font-weight: 500; color: var(--c-ink); } .field__label-row { display: flex; justify-content: space-between; gap: 8px; } .field__aside { font-weight: 400; color: var(--c-gold); } .field__aside:hover { color: var(--c-green); } .field__control { position: relative; } .field__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #4b524d; pointer-events: none; } .field__control .input-text { width: 100%; height: 48px; padding: 0 44px 0 46px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; font-size: 14px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field__control .input-text::placeholder { color: #9a9d97; } .field__control .input-text:focus { outline: none; border-color: var(--c-gold-soft); box-shadow: 0 0 0 3px rgba(216, 178, 115, .2); } .field__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #4b524d; } .field__toggle[aria-pressed="true"] { color: var(--c-gold); } .field__hint { font-size: 12px; color: var(--c-muted); } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #33403a; cursor: pointer; } .check input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--c-green); } .check a { color: var(--c-gold); } .btn--lg { min-height: 52px; font-size: 16px; text-transform: none; letter-spacing: .02em; } /* 29. WooCommerce base (theme replaces woocommerce-general.css) ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 18px 14px 46px; border: 1px solid var(--c-line); border-left: 3px solid var(--c-green); border-radius: 2px; background: var(--c-white); font-size: 14px; list-style: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: "✓"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-green); color: #fff; font-size: 11px; } .woocommerce-info { border-left-color: var(--c-gold-soft); } .woocommerce-info::before { content: "i"; background: var(--c-gold); font-weight: 600; } .woocommerce-error { border-left-color: var(--c-sale); display: block; } .woocommerce-error::before { content: "!"; background: var(--c-sale); font-weight: 600; top: 16px; transform: none; } .woocommerce-error li + li { margin-top: 4px; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; min-height: 36px !important; padding: 8px 14px !important; } .woocommerce-message .button { background: var(--c-green); color: #fff; } .woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; } .woocommerce form .form-row label { font-size: 14px; font-weight: 500; } .woocommerce form .form-row .required { color: var(--c-sale); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page .select2-container .select2-selection--single { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; font-size: 14px; } .woocommerce form .form-row textarea { min-height: 110px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--c-gold-soft); box-shadow: 0 0 0 3px rgba(216, 178, 115, .2); } .woocommerce form .password-input { position: relative; display: block; } .woocommerce form .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: none; } .shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); background: var(--c-white); font-size: 14px; } .shop_table th, .shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); text-align: left; } .shop_table thead th { background: var(--c-cream-2); font-weight: 500; color: var(--c-green); } .shop_table .button { min-height: 34px !important; padding: 8px 12px !important; font-size: 11px !important; } .woocommerce-MyAccount-content p { margin-bottom: 12px; } .woocommerce-MyAccount-content p a:not(.button):not(.btn), .woocommerce-MyAccount-content td a:not(.button) { color: var(--c-gold); } .woocommerce-Addresses { display: grid; gap: 20px; } @media (min-width: 768px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } } .woocommerce-Address, .woocommerce-ResetPassword, .woocommerce-form-login:not(.auth__form) { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .woocommerce-ResetPassword { max-width: 520px; margin-inline: auto; } /* Star ratings without the WooCommerce icon font */ .star-rating { position: relative; display: inline-block; overflow: hidden; width: 5.6em; height: 1.1em; font-size: 14px; line-height: 1; letter-spacing: .12em; } .star-rating::before { content: "★★★★★"; position: absolute; inset: 0; color: var(--c-line); } .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; padding-top: 1.5em; } .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: var(--c-gold); } p.stars a { position: relative; display: inline-block; width: 1.2em; overflow: hidden; text-indent: 999px; color: var(--c-gold); } p.stars a::before { content: "☆"; position: absolute; inset: 0; text-indent: 0; } p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before { content: "☆"; } p.stars:hover a::before, p.stars.selected a::before { content: "★"; } p.stars.selected a.active ~ a::before, p.stars a:hover ~ a::before { content: "☆"; } #reviews .commentlist { display: grid; gap: 16px; margin-bottom: 20px; } #reviews .comment_container { display: flex; gap: 12px; } #reviews .avatar { width: 40px; height: 40px; border-radius: 50%; } #review_form .comment-form { display: grid; gap: 12px; } #review_form textarea, #review_form input[type="text"], #review_form input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; } #review_form .submit { min-height: 44px; padding: 0 22px; border: 0; background: var(--c-green); color: #fff; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } /* blockUI overlay used by cart.js */ .blockUI.blockOverlay { background: rgba(250, 247, 241, .7) !important; } /* Neutralise woocommerce-layout.css floats inside the custom product layout */ .woocommerce div.product.pdp div.summary, .woocommerce div.product.pdp div.images { float: none; width: auto; margin: 0; } .woocommerce div.product.pdp { position: static; } .accordion__body.entry__content { max-width: none; margin: 0; } .pdp__cart button.single_add_to_cart_button.button, .qv__cart button.single_add_to_cart_button.button { min-height: 52px; padding: 14px 22px; text-transform: none; letter-spacing: .02em; font-size: 16px; } /* woocommerce-layout.css sets `.woocommerce-page img { height:auto }` and floats the cart totals */ .p-card .p-card__img { height: 100%; } .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { width: auto; float: none; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: auto; } /* .button.alt in the generic button group is (0,3,0); match + beat it */ .wc-proceed-to-checkout a.checkout-button.button { background: var(--c-gold-soft); color: var(--c-green); text-transform: none; letter-spacing: .01em; font-size: 16px; } .wc-proceed-to-checkout a.checkout-button.button:hover { background: var(--c-gold-pale); color: var(--c-green); } /* ========================================================================== 30. My Account (logged in) ========================================================================== */ .account-page { padding-block: 8px var(--section-y); } .account-main .woocommerce > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 18px; } .account { display: grid; gap: 22px; align-items: start; } @media (min-width: 900px) { .account { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; } .account__side { position: sticky; top: calc(var(--header-h) + 12px); } } /* Sidebar */ .account-profile { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--c-line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-3) 100%); color: #f3ead9; overflow: hidden; } .account-profile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border: 1px solid rgba(216, 178, 115, .35); border-radius: 50%; } .account-profile__avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-green); font: 600 20px/1 var(--f-serif); letter-spacing: .04em; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); } .account-profile__meta { min-width: 0; display: grid; gap: 2px; } .account-profile__name { font: 600 20px/1.15 var(--f-serif); color: #fff; } .account-profile__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(243, 234, 217, .75); } .account-nav ul { border: 1px solid var(--c-line); border-radius: 0 0 var(--radius) var(--radius); background: var(--c-white); overflow: hidden; } .account-nav li + li { border-top: 1px solid var(--c-line); } .account-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--c-ink); transition: background-color .25s var(--ease), color .25s var(--ease), padding .3s var(--ease-out); } .account-nav a > .icon:first-child { color: var(--c-gold); } .account-nav__chev { margin-left: auto; color: var(--c-muted); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease-out); } .account-nav a:hover { background: var(--c-cream); color: var(--c-green); padding-left: 22px; } .account-nav a:hover .account-nav__chev { opacity: 1; transform: none; } .account-nav .is-active a { background: var(--c-cream-2); color: var(--c-green); } .account-nav .is-active a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-gold); } .account-nav .is-active .account-nav__chev { opacity: 1; transform: none; color: var(--c-gold); } .account-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--c-maroon); } .account-nav .woocommerce-MyAccount-navigation-link--customer-logout a > .icon:first-child { color: var(--c-maroon); } @media (max-width: 899px) { /* Horizontal scrollable tabs on phones */ .account-profile { border-radius: var(--radius); border-bottom: 1px solid var(--c-line); margin-bottom: 10px; } .account-nav ul { display: flex; overflow-x: auto; border-radius: var(--radius); scrollbar-width: none; } .account-nav ul::-webkit-scrollbar { display: none; } .account-nav li { flex: none; } .account-nav li + li { border-top: 0; border-left: 1px solid var(--c-line); } .account-nav a { padding: 12px 16px; white-space: nowrap; font-size: 13px; } .account-nav a:hover { padding-left: 16px; } .account-nav__chev { display: none; } .account-nav .is-active a::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; } } /* Content panel */ .account__content { min-width: 0; } .account__content > h2, .account__content > h3, .account__content .woocommerce-column__title, .account__content .woocommerce-order-details__title, .account__content .woocommerce-customer-details h2, .account__content legend { margin-bottom: 14px; font: 500 24px/1.2 var(--f-serif); color: var(--c-green); } .account__content > p { color: #3d4641; } .account__content mark { background: none; font-weight: 600; color: var(--c-green); } /* Dashboard */ .dash-hello { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius); background: linear-gradient(100deg, #f8f1e6 0%, #f1e6d3 100%); } .dash-hello > div { position: relative; z-index: 1; max-width: 460px; } .dash-hello .btn { position: relative; z-index: 1; } .dash-hello__title { font: 600 clamp(28px, 3vw, 36px)/1.05 var(--f-serif); color: var(--c-green); } .dash-hello__text { margin-top: 8px; font-size: 14px; color: #3d4641; } .dash-hello__leaf { position: absolute; right: 150px; bottom: -60px; width: 120px; color: var(--c-gold); opacity: .35; transform: rotate(40deg); pointer-events: none; } @media (max-width: 600px) { .dash-hello__leaf { right: -30px; } } .dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; } .dash-stat { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .dash-stat__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-cream-2); color: var(--c-gold); } .dash-stat__value { display: block; font: 600 24px/1.1 var(--f-serif); color: var(--c-green); } .dash-stat__value .woocommerce-Price-amount { font-family: var(--f-serif); } .dash-stat__label { display: block; font-size: 12px; color: var(--c-muted); } @media (max-width: 600px) { .dash-stats { gap: 8px; } .dash-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; } .dash-stat__icon { width: 38px; height: 38px; } .dash-stat__value { font-size: 20px; } } .dash-card { padding: 20px 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .dash-card__title { font: 500 22px/1.2 var(--f-serif); color: var(--c-green); } .dash-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--c-green); } .order-list { display: grid; } .order-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 28px; align-items: center; gap: 14px; padding: 12px 0; } .order-row + .order-row { border-top: 1px solid var(--c-line); } .order-row__thumb { width: 56px; height: 56px; overflow: hidden; border-radius: 2px; background: var(--c-sand); } .order-row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .order-row__main { display: grid; gap: 2px; min-width: 0; font-size: 14px; } .order-row__meta { font-size: 12px; color: var(--c-muted); } .order-row__total { font-weight: 600; color: var(--c-maroon); white-space: nowrap; } .order-row__view { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--c-green); transition: background-color .25s; } .order-row__view:hover { background: var(--c-cream-2); } @media (max-width: 600px) { .order-row { grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 4px 12px; } .order-row__thumb { width: 48px; height: 48px; grid-row: span 2; } .order-row .status-pill { grid-column: 2; justify-self: start; } .order-row__total { grid-column: 2; grid-row: 3; } .order-row__view { grid-column: 3; grid-row: 1 / span 2; } } .dash-empty { display: grid; justify-items: center; gap: 12px; padding: 26px 0 10px; text-align: center; color: var(--c-muted); } .dash-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-cream-2); color: var(--c-gold); } .status-pill { display: inline-block; padding: 5px 10px; border-radius: 30px; background: var(--c-cream-2); color: var(--c-ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .status-pill--completed { background: #e3f1e8; color: var(--c-success); } .status-pill--processing { background: #fdf2dc; color: #9a6a12; } .status-pill--on-hold, .status-pill--pending { background: #eef0f4; color: #4a5568; } .status-pill--cancelled, .status-pill--failed, .status-pill--refunded { background: #fbe9e7; color: var(--c-sale); } .dash-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } @media (max-width: 600px) { .dash-links { grid-template-columns: 1fr; } } .dash-link { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-ink); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease-out); } .dash-link:hover { border-color: var(--c-gold-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--c-ink); } .dash-link__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-cream-2); color: var(--c-gold); transition: background-color .3s, color .3s; } .dash-link:hover .dash-link__icon { background: var(--c-green); color: #fff; } .dash-link strong { display: block; font-size: 14px; font-weight: 600; color: var(--c-green); } .dash-link span span { display: block; font-size: 12px; color: var(--c-muted); } .dash-link__arrow { margin-left: auto; color: var(--c-gold); transition: transform .3s var(--ease-out); } .dash-link:hover .dash-link__arrow { transform: translateX(4px); } /* Orders table */ .account__content .woocommerce-orders-table { border-radius: var(--radius); overflow: hidden; } .account__content .woocommerce-orders-table th, .account__content .woocommerce-orders-table td { padding: 14px 16px; vertical-align: middle; } .account__content .woocommerce-orders-table__cell-order-number a { font-weight: 600; color: var(--c-green); } .account__content .woocommerce-orders-table__cell-order-status { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-gold); } .account__content .woocommerce-orders-table__cell-order-actions { text-align: right; } .account__content .woocommerce-orders-table .button { margin: 2px 0 2px 6px; background: transparent; border: 1px solid var(--c-green); color: var(--c-green); } .account__content .woocommerce-orders-table .button:hover { background: var(--c-green); color: #fff; } @media (max-width: 767px) { .account__content .woocommerce-orders-table thead { display: none; } .account__content .woocommerce-orders-table, .account__content .woocommerce-orders-table tbody { display: block; border: 0; background: none; } .account__content .woocommerce-orders-table tr { display: grid; margin-bottom: 10px; padding: 8px 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .account__content .woocommerce-orders-table td, .account__content .woocommerce-orders-table th[scope="row"] { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; border: 0; text-align: right; } .account__content .woocommerce-orders-table td::before, .account__content .woocommerce-orders-table th[scope="row"]::before { content: attr(data-title); font-weight: 500; color: var(--c-muted); text-align: left; } .account__content .woocommerce-orders-table__cell-order-actions::before { display: none; } } .account__content .woocommerce-pagination { display: flex; justify-content: space-between; margin-top: 16px; } /* Single order */ .account__content .woocommerce-order-details, .account__content .woocommerce-customer-details { margin-top: 22px; } .account__content .order-again .button { margin-top: 12px; } .account__content address { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); font-style: normal; line-height: 1.7; color: #3d4641; } .account__content .woocommerce-customer-details--phone, .account__content .woocommerce-customer-details--email { margin: 6px 0 0; } .account__content .woocommerce-columns--addresses { display: grid; gap: 16px; } @media (min-width: 768px) { .account__content .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } } .account__content .woocommerce-columns--addresses .woocommerce-column { float: none; width: auto; } .account__content .woocommerce-table--order-details tfoot th { font-weight: 500; } /* Addresses */ .account__content .woocommerce-Addresses { display: grid; gap: 16px; margin-top: 14px; } @media (min-width: 768px) { .account__content .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } } .account__content .woocommerce-Addresses::before, .account__content .woocommerce-Addresses::after { display: none; } .account__content .woocommerce-Address { float: none !important; width: auto !important; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); overflow: hidden; } .account__content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--c-line); background: var(--c-cream-2); } .account__content .woocommerce-Address-title::before, .account__content .woocommerce-Address-title::after { display: none; } .account__content .woocommerce-Address-title h2 { margin: 0; font: 500 20px/1.2 var(--f-serif); color: var(--c-green); } .account__content .woocommerce-Address-title .edit { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--c-gold-soft); border-radius: 30px; font-size: 12px; font-weight: 500; color: var(--c-green); } .account__content .woocommerce-Address-title .edit:hover { background: var(--c-gold-soft); } .account__content .woocommerce-Address address { border: 0; border-radius: 0; } /* Forms: edit account / edit address */ .account__content form.woocommerce-EditAccountForm, .account__content .woocommerce-address-fields, .account__content form .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .account__content form.woocommerce-EditAccountForm, .account__content form:has(.woocommerce-address-fields) { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); } .account__content .woocommerce-address-fields { display: block; } .account__content form .form-row { grid-column: 1 / -1; float: none !important; width: auto !important; } .account__content form .form-row-first { grid-column: 1; } .account__content form .form-row-last { grid-column: 2; } @media (max-width: 600px) { .account__content form.woocommerce-EditAccountForm, .account__content form .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .account__content form .form-row-first, .account__content form .form-row-last { grid-column: 1; } } .account__content form fieldset { grid-column: 1 / -1; margin: 10px 0 6px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--c-line); } .account__content form fieldset legend { padding: 0; font-size: 20px; } .account__content form .clear { display: none; } .account__content form > p:last-of-type, .account__content .woocommerce-address-fields > p:last-child { grid-column: 1 / -1; margin: 6px 0 0; } .account__content form em, .account__content form .description { display: block; font-size: 12px; font-style: normal; color: var(--c-muted); } .account__content form .woocommerce-Button, .account__content form button[type="submit"] { min-width: 200px; } .account__content .select2-container .select2-selection--single { display: flex; align-items: center; } .account__content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; } /* Downloads / payment methods empty info */ .account__content .woocommerce-info { background: var(--c-white); } /* woocommerce-layout.css floats nav (30%) and content (68%) */ .woocommerce-account .account .woocommerce-MyAccount-navigation, .woocommerce-account .account .woocommerce-MyAccount-content { float: none; width: auto; } .woocommerce-account .account::before, .woocommerce-account .account::after { display: none; } /* Grid children default to min-width:auto — let the scrollable tab row shrink on phones */ .account > * { min-width: 0; } .account-nav, .account-nav ul { max-width: 100%; } @media (max-width: 767px) { .account__content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { display: block; } .account__content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total::before { float: left; } } /* ========================================================================== 31. Brand lockup (logo monogram + wordmark) ========================================================================== */ .brand__text { display: grid; justify-items: center; } .brand--lockup { display: flex; align-items: center; gap: 10px; } .brand--lockup .brand__img { width: auto; height: 50px; max-height: none; transition: height .35s var(--ease); } .brand--lockup .brand__text { justify-items: start; } .brand--lockup .brand__tag { letter-spacing: .34em; } @media (min-width: 768px) { .brand--lockup .brand__img { height: 62px; } .brand--lockup { gap: 12px; } .brand--lockup .brand__name { font-size: 29px; } .brand--lockup .brand__tag { font-size: 8.5px; margin-top: 5px; } } @media (max-width: 767px) { .brand--lockup { gap: 7px; min-width: 0; } .brand--lockup .brand__img { height: 40px; } .brand--lockup .brand__name { font-size: 19px; letter-spacing: .04em; } .brand--lockup .brand__tag { font-size: 6.5px; letter-spacing: .26em; } } @media (max-width: 400px) { .brand--lockup .brand__img { height: 34px; } .brand--lockup .brand__name { font-size: 16px; } .brand--lockup .brand__tag { font-size: 5.5px; letter-spacing: .22em; } .site-header__actions { gap: 0; } .site-header__actions .icon-btn { width: 38px; } } .site-header.is-scrolled .brand--lockup { transform: scale(.9); } .site-footer__brand .brand--lockup { display: inline-flex; margin-bottom: 18px; transform: none; } .site-footer__brand .brand--lockup .brand__img { height: 64px; } .site-footer__brand .brand--lockup .brand__name { font-size: 28px; color: #f6eedf; } .site-footer__brand .brand--lockup .brand__tag { font-size: 8.5px; margin-top: 5px; color: var(--c-gold-soft); } .site-footer__brand .brand--lockup:hover .brand__name { color: #fff; } /* ========================================================================== 32. Size selection + Size Chart (stitched products) ========================================================================== */ /* Variation table: the size row shows our buttons instead of label + dropdown */ table.variations tr:has(.rb-sizes) th.label { display: none; } table.variations tr:has(.rb-sizes) td.value { display: block; padding: 0; } table.variations:has(.rb-sizes) .reset_variations { display: none !important; } .pdp__cart:has(.variations_form) .pdp__qty-label { display: none; } .pdp__cart .variations_form .woocommerce-variation-add-to-cart::before { content: "Quantity:"; grid-column: 1 / -1; font-size: 14px; font-weight: 500; } .pdp__cart .variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { grid-column: 1 / -1; } .woocommerce-variation-availability .stock { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--c-success); } .woocommerce-variation-availability .stock.out-of-stock { color: var(--c-sale); } .rb-sizes { margin-bottom: 6px; } .rb-sizes__head { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; } .rb-sizes__label { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); } .rb-sizes__chart { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold); } .rb-sizes__chart:hover { color: var(--c-green); } .rb-sizes__chart .icon:last-child { transition: transform .3s var(--ease-out); } .rb-sizes__chart:hover .icon:last-child { transform: translateX(3px); } .rb-sizes__list { display: flex; flex-wrap: wrap; gap: 12px; } .rb-size { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1.5px solid #d8d4cc; border-radius: 50%; background: var(--c-white); font: 600 14px/1 var(--f-sans); color: var(--c-ink); overflow: hidden; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-out), box-shadow .3s; } .rb-size:hover:not(:disabled) { border-color: var(--c-green); color: var(--c-green); transform: translateY(-2px); } .rb-size.is-selected { border-color: var(--c-green); background: var(--c-green); color: #fff; box-shadow: 0 0 0 3px var(--c-cream), 0 0 0 4px var(--c-gold-soft); } .rb-size.is-oos, .rb-size:disabled { border-color: #e4e0d8; color: #c6c2ba; background: #fbfaf7; cursor: not-allowed; } .rb-size.is-oos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .75px), #d6d1c7 calc(50% - .75px), #d6d1c7 calc(50% + .75px), transparent calc(50% + .75px)); } .rb-sizes__hint { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--c-sale); } .rb-sizes__select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .rb-sizes.is-shake .rb-sizes__list { animation: rb-shake .45s var(--ease); } @keyframes rb-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .qv .rb-size { width: 46px; height: 46px; font-size: 13px; } /* Modal */ .size-modal__panel { display: flex; flex-direction: column; width: min(1080px, 100%); max-height: calc(100vh - 32px); overflow: hidden; background: var(--c-white); } .size-modal__top { position: relative; flex: none; border-bottom: 1px solid var(--c-line); } .size-modal__tabs { display: grid; grid-template-columns: 1fr 1fr; margin-right: 56px; } .size-modal__tab { position: relative; padding: 20px 12px 18px; border: 0; background: none; font: 500 clamp(17px, 2vw, 22px)/1.2 var(--f-serif); color: var(--c-ink); transition: color .25s; } .size-modal__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-gold); transform: scaleX(0); transition: transform .4s var(--ease-out); } .size-modal__tab.is-active { color: var(--c-green); font-weight: 600; } .size-modal__tab.is-active::after { transform: scaleX(1); } .size-modal__tab:hover { color: var(--c-green); } .size-modal__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .size-modal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .size-modal__panel-body { padding: 20px clamp(14px, 3vw, 28px) 24px; } .size-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .size-modal__product { font-size: 14px; color: var(--c-muted); } .unit-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--c-line); border-radius: 30px; background: var(--c-cream); } .unit-toggle__btn { min-width: 44px; height: 36px; padding: 0 12px; border: 0; border-radius: 30px; background: transparent; font-size: 15px; font-weight: 500; color: var(--c-muted); transition: background-color .3s var(--ease), color .3s; } .unit-toggle__btn.is-active { background: var(--c-green); color: #fff; box-shadow: var(--shadow-sm); } .size-rec { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 20px; border-radius: var(--radius); background: linear-gradient(100deg, #f7e7e4 0%, #f6eee2 60%, #f8f3df 100%); font-size: 15px; color: var(--c-ink); } .size-rec::after { content: ""; position: absolute; left: 36px; bottom: -8px; border: 8px solid transparent; border-top-color: #f7e7e4; border-bottom: 0; } .size-rec__icon { flex: none; color: var(--c-green); } .size-rec a { font-weight: 600; color: var(--c-maroon); } .size-table-wrap { overflow-x: auto; border-top: 1px solid var(--c-line); -webkit-overflow-scrolling: touch; } .size-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 15px; text-align: center; } .size-table th, .size-table td { padding: 14px 10px; border-bottom: 1px solid var(--c-line); white-space: nowrap; } .size-table thead th { padding-block: 16px; font-weight: 500; line-height: 1.3; white-space: normal; vertical-align: middle; color: var(--c-ink); background: var(--c-white); } .size-table__unit { display: block; } .size-table tbody th { font-weight: 600; color: var(--c-ink); } .size-table tbody tr { cursor: pointer; transition: background-color .2s; } .size-table tbody tr:hover:not(.is-oos) { background: var(--c-cream); } .size-table tbody tr.is-selected { background: var(--c-cream-2); } .size-table tbody tr.is-selected th { color: var(--c-green); } .size-table tbody tr.is-oos { cursor: not-allowed; } .size-table tbody tr.is-oos th, .size-table tbody tr.is-oos td { color: #b7b3ab; text-decoration: line-through; text-decoration-color: #a8a49c; } .size-table tbody tr.is-recommended th::after { content: "★"; margin-left: 4px; font-size: 11px; color: var(--c-gold); text-decoration: none; display: inline-block; } .size-table__pick { width: 48px; } /* first two columns stay visible while scrolling sideways on phones */ .size-table .size-table__pick, .size-table tr > :nth-child(2) { position: sticky; background: inherit; z-index: 1; } .size-table .size-table__pick { left: 0; } .size-table tr > :nth-child(2) { left: 48px; box-shadow: 1px 0 0 var(--c-line); } .size-table tbody tr { background: var(--c-white); } .size-radio { display: inline-grid; place-items: center; cursor: inherit; } .size-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; } .size-radio span { width: 22px; height: 22px; border: 1.5px solid #cfcac1; border-radius: 50%; background: #fff; transition: border-color .25s, box-shadow .25s; } .size-radio input:checked + span { border-color: var(--c-green); box-shadow: inset 0 0 0 5px var(--c-green); } .size-radio input:focus-visible + span { outline: 2px solid var(--c-gold); outline-offset: 2px; } .size-radio input:disabled + span { border-color: #e2ded6; background: #f6f4ef; } .size-modal__note { margin: 18px calc(-1 * clamp(14px, 3vw, 28px)) 0; padding: 14px 20px; background: var(--c-cream); text-align: center; font-size: 13px; color: #4b524d; } /* How to measure */ .measure { display: grid; gap: 26px; align-items: start; } @media (min-width: 768px) { .measure { grid-template-columns: 280px 1fr; gap: 40px; } } .measure__figure { margin: 0; padding: 18px; border-radius: var(--radius); background: var(--c-cream); text-align: center; } .measure__figure img { width: 100%; height: auto; } .measure-svg { width: 100%; max-width: 260px; margin: auto; color: var(--c-gold); } .measure-svg__form { fill: #f3e8d6; stroke: #c9b28a; stroke-width: 1.4; } .measure-svg__stand { fill: none; stroke: #b9a27a; stroke-width: 3; stroke-linecap: round; } .measure-svg__seam { fill: none; stroke: #d9c8a8; stroke-width: 1; stroke-dasharray: 3 4; } .measure-svg__tape { fill: none; stroke: var(--c-maroon); stroke-width: 1.8; stroke-dasharray: 5 3; } .measure-svg__line { fill: none; stroke: currentColor; stroke-width: 1.6; } .measure-svg__guide { fill: none; stroke: #c9bfae; stroke-width: 1; stroke-dasharray: 2 3; } .measure-svg__num circle { fill: var(--c-green); } .measure-svg__num text { fill: #fff; font: 600 11px var(--f-sans); text-anchor: middle; } .measure__title { margin-bottom: 14px; font: 600 24px/1.2 var(--f-serif); color: var(--c-green); } .measure__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .measure__steps li { position: relative; padding-left: 40px; font-size: 14px; color: #3d4641; counter-increment: step; } .measure__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-green); color: #fff; font-size: 12px; font-weight: 600; } .measure__steps strong { display: block; margin-bottom: 2px; font-size: 15px; color: var(--c-ink); } .measure__tip { display: flex; gap: 10px; margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--c-gold-soft); background: var(--c-cream); font-size: 13px; color: #4b524d; } .measure__tip .icon { flex: none; margin-top: 2px; color: var(--c-gold); } .size-modal__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px clamp(14px, 3vw, 28px); border-top: 1px solid var(--c-line); background: var(--c-white); } .size-modal__chosen { font-size: 14px; color: var(--c-muted); } .size-modal__chosen strong { color: var(--c-green); font-size: 16px; } .size-modal__foot .btn { min-width: 180px; } .size-modal__foot .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } @media (max-width: 600px) { .size-modal { padding: 0; align-items: end; } .size-modal__panel { max-height: 92vh; border-radius: 12px 12px 0 0; } .size-modal__foot .btn { min-width: 0; flex: 1; } } /* ========================================================================== 33. Centred card grids — when a row isn't full (e.g. 3 fabrics, 2 products) the cards sit in the middle instead of hugging the left edge. Flex + a --cols/--gap pair keeps card widths identical to the old grid. ========================================================================== */ .product-grid, .woocommerce ul.products, .subcats__grid, .collections--cards .collections__grid { --cols: 2; --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); } .product-grid > *, .woocommerce ul.products > li, .subcats__grid > *, .collections--cards .collections__grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; } .woocommerce ul.products > li.p-card { width: auto; margin: 0; } /* Product grids: 2 → 3 → 4 */ @media (min-width: 768px) { .product-grid, .woocommerce ul.products { --cols: 3; --gap: 18px; } } @media (min-width: 1024px) { .product-grid, .woocommerce ul.products { --cols: 4; --gap: 20px; } } /* Horizontal "You May Also Like" cards (cart): 1 → 2 → 4 */ .product-grid.product-grid--row { --cols: 1; --gap: 16px; } @media (min-width: 768px) { .product-grid.product-grid--row { --cols: 2; } } @media (min-width: 1200px) { .product-grid.product-grid--row { --cols: 4; } } /* "Shop by Fabric" tiles: 3 → 4 → 5 */ .subcats__grid { --cols: 3; --gap: 10px; } @media (min-width: 600px) { .subcats__grid { --cols: 4; } } @media (min-width: 1024px) { .subcats__grid { --cols: 5; --gap: 14px; } } /* Homepage collection banners: 1 → 2 */ .collections--cards .collections__grid { --cols: 1; --gap: 16px; } @media (min-width: 768px) { .collections--cards .collections__grid { --cols: 2; --gap: 20px; } } /* Collection circles: fixed-width tracks, centred */ .collections--circles .collections__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 170px)); justify-content: center; } /* Selected size must stay white-on-green even while hovered (hover rule is more specific) */ .rb-size.is-selected, .rb-size.is-selected:hover:not(:disabled) { border-color: var(--c-green); background: var(--c-green); color: #fff; transform: none; } /* 28. Return & Exchange Policy Notices ------------------------------------- */ .pdp__policy-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--c-gold-soft); border-radius: var(--radius); background: rgba(216, 178, 115, .08); font-size: 13px; line-height: 1.45; color: var(--c-ink); } .pdp__policy-note-icon { flex-shrink: 0; color: var(--c-gold); margin-top: 1px; } .pdp__policy-note strong { color: var(--c-green); font-weight: 600; } .pdp__policy-note a { color: var(--c-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; } .pdp__policy-note a:hover { color: var(--c-gold); } .pdp-policy-callout { display: flex; gap: 14px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--c-line); border-left: 4px solid var(--c-gold); border-radius: var(--radius); background: var(--c-cream); } .pdp-policy-callout__icon { flex-shrink: 0; color: var(--c-gold); margin-top: 2px; } .pdp-policy-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px; background: var(--c-green); color: #fff; margin-bottom: 6px; } .pdp-policy-badge--subtle { background: var(--c-cream-2); color: var(--c-green); border: 1px solid var(--c-line); } .pdp-policy-callout__title { display: block; font-size: 14px; color: var(--c-green); margin-bottom: 4px; } .pdp-policy-callout p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #3d4641; } .pdp-policy-callout__sub { font-size: 12px !important; color: #555 !important; margin-bottom: 8px !important; } .pdp-policy-callout__link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-green); text-transform: uppercase; letter-spacing: .06em; } .pdp-policy-callout__link:hover { color: var(--c-gold); } .drawer__policy-bar { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--c-cream-2); border-bottom: 1px solid var(--c-line); font-size: 11.5px; line-height: 1.35; color: var(--c-ink); } .drawer__policy-bar svg { flex-shrink: 0; color: var(--c-gold); } .drawer__policy-bar span { font-weight: 500; } .checkout__policy-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--c-gold-soft); border-radius: var(--radius); background: rgba(216, 178, 115, .08); font-size: 13px; line-height: 1.45; color: var(--c-ink); } .checkout__policy-notice-icon { flex-shrink: 0; color: var(--c-gold); margin-top: 1px; } .checkout__policy-notice strong { display: block; color: var(--c-green); font-weight: 600; margin-bottom: 4px; } .checkout__policy-notice p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; } .checkout__policy-notice p:last-child { margin-bottom: 0; } .checkout__policy-notice a { color: var(--c-green); font-weight: 600; text-decoration: underline; margin-left: 4px; }