/* ========================================================================== Airshape: webshop (Figma Demo18_Home, SingleProduct, Cart, Checkout, CheckoutSuccess, DashboardOrders) Loaded only on WooCommerce pages. Uses the tokens from main.css; the shop is always light. Figma "demo 18/*" colours are renamed to --shop-* ("PolySans Trial" → DM Sans). ========================================================================== */ :root { --shop-dark: #1f3735; /* demo 18/dark 1 */ --shop-dark-2: rgba(31, 55, 53, 0.92); /* demo 18/dark 2 */ --shop-green: rgba(67, 96, 0, 0.14); /* demo 18/fill 2 */ --shop-pink: rgba(144, 0, 77, 0.14); /* demo 18/fill 1 */ --shop-lavender: rgba(40, 40, 212, 0.14); /* demo 18/fill 3 */ --shop-sand: #efe6da; --brand-accent: #d91842; /* brand/primary in the shop frames */ } /* Buttons ------------------------------------------------------------------ */ .button--shop, .button--shop-outline { height: var(--sizing-button-medium); padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4); border-radius: var(--radius-3xlarge); font-weight: var(--font-weight-medium); font-size: 15.58px; } .button--shop { background: var(--shop-dark); color: #fff; } .button--shop:hover { background: #2c4a47; } .button--shop-outline { border: var(--sizing-border-width) solid var(--shop-dark-2); color: var(--shop-dark-2); } .button--shop-outline:hover { background: var(--shop-dark); border-color: var(--shop-dark); color: #fff; } .button--tiny { height: var(--sizing-button-small, 36px); padding: 4px var(--spacing-2) 4px var(--spacing-3); border-radius: var(--radius-2xlarge); font-size: 15px; } .button--tiny .button__arrow { width: 20px; height: 20px; } .button--card { flex: 1; height: 36px; padding: 4px var(--spacing-3); border-radius: var(--radius-medium); font-size: 15px; } .button--ghost-dark { border: var(--sizing-border-width) solid var(--shop-dark-2); color: var(--shop-dark-2); background: rgba(255, 255, 255, 0.6); } .button--ghost-dark:hover { background: #fff; } .button.loading { opacity: 0.6; pointer-events: none; } .added_to_cart { display: none; } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-3); } .badge { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--spacing-2); border-radius: var(--radius-large); background: var(--grey-neutral-16); color: var(--black-lighter); font-size: 14.4px; font-weight: var(--font-weight-medium); } .badge--sale { background: var(--brand-accent); color: #fff; } /* Section spacing on the landing ----------------------------------------- */ .shop-landing { padding-bottom: var(--space-section); } .shop-section { padding-top: var(--spacing-grid-gutter-5x); } .shop-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding-bottom: var(--spacing-grid-gutter-2x); } .shop-heading__title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 22.64px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.03em; color: var(--shop-dark); } /* Hero --------------------------------------------------------------------- */ .shop-hero { padding-top: var(--spacing-5); } .shop-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); } .shop-hero__col { display: flex; flex-direction: column; gap: var(--spacing-grid-gutter-2x); } .shop-hero__heading { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--spacing-1); min-height: 300px; } .shop-hero__title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(38px, 3.69vw, 62px); font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: -0.045em; color: var(--shop-dark); } .shop-hero .eyebrow--strong, .shop-banner .eyebrow--strong, .promo-card .eyebrow--strong { color: var(--shop-dark-2); } .shop-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: var(--spacing-grid-gutter-2x); overflow: hidden; border-radius: var(--radius-large); background: var(--grey-neutral-8); } .shop-banner--photo { min-height: 460px; background: #3b3530; } .shop-banner--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%); } .shop-banner--green { background: var(--shop-green); } .shop-banner--lavender { background: var(--shop-lavender); } .shop-banner--pink { background: var(--shop-pink); } .shop-banner--sand { background: var(--shop-sand); } .shop-banner__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shop-banner__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); } .shop-banner__content .button { margin-top: var(--spacing-3); } .shop-banner__title { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(30px, 2.38vw, 40px); font-weight: var(--font-weight-medium); line-height: 1.05; letter-spacing: -0.04em; color: var(--shop-dark); } .shop-banner--photo .shop-banner__title { color: #fff; } .shop-banner--wide { min-height: 450px; justify-content: stretch; padding: 40px; } .shop-banner__content--spread { flex: 1; justify-content: space-between; } /* Banner head as in the demo: eyebrow, title, text */ .shop-banner__head { display: flex; flex-direction: column; gap: var(--spacing-1); max-width: 440px; } .shop-banner__head .shop-banner__text { margin: 0; padding-top: var(--spacing-1); } /* With a photo the text stays in the free left part, clear of the product */ @media (min-width: 768px) { .shop-banner--wide:has(.shop-banner__image) .shop-banner__head { max-width: 38%; } } .shop-banner__text { max-width: 440px; margin-top: auto; margin-bottom: auto; font-size: 16.4px; line-height: 1.6; color: var(--shop-dark-2); } .shop-banner--sand .shop-banner__image { object-position: right center; } /* Products grid + card (Figma ProductArchive__Type1) ------------------------ */ ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-grid-gutter-2x); margin: 0; padding: 0; list-style: none; } ul.products.products--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } ul.products.products--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shop-hero .products--pair { flex: 1; } /* Card as in the live demo 18: square photo, on hover the second photo fades in, an expand icon appears top left and one full-width button slides up at the bottom of the photo */ .product-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xlarge); background: var(--grey-neutral-8); } .product-card__media { position: relative; flex: none; aspect-ratio: 1; overflow: hidden; background: #f5f5f6; } .products--tall .product-card__media { flex: 1; aspect-ratio: auto; min-height: 260px; } .product-card__image-link { position: absolute; inset: 0; } .product-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .product-card__image--hover { opacity: 0; } .product-card:hover .product-card__image--hover { opacity: 1; } .product-card:hover .product-card__image:has(+ .product-card__image--hover) { opacity: 0; } .product-card__badge { position: absolute; top: var(--spacing-card); left: var(--spacing-card); z-index: 2; transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .product-card__expand { position: absolute; top: var(--spacing-card); left: var(--spacing-card); z-index: 3; color: var(--black-basic); opacity: 0; transform: translateY(-6%); transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.3s; } .product-card__expand .icon { width: 22px; height: 22px; } .product-card__expand:hover { background: rgba(255, 255, 255, 0.6); } .product-card__actions { position: absolute; inset: auto 0 0; z-index: 3; padding: var(--spacing-card); opacity: 0; transform: translateY(6%); transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .product-card:hover .product-card__actions, .product-card:focus-within .product-card__actions, .product-card:hover .product-card__expand { opacity: 1; transform: none; } .product-card:hover .product-card__badge { opacity: 0; } .product-card__actions .button { width: 100%; height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border: 0; border-radius: 22px; background: var(--brand-primary); color: #fff; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); transition: background-color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .product-card__actions .button:hover { background: #6e7c6a; } @media (hover: none) { /* Touch screens: no hover, so the button stays visible at the bottom of the photo */ .product-card__actions { opacity: 1; transform: none; padding: 12px; } .product-card__actions .button { height: 40px; font-size: 14.76px; } .product-card__expand { display: none; } } .product-card__details { display: flex; flex: 1; flex-direction: column; gap: 1px; min-height: 164px; padding: 20px var(--spacing-card); } /* 164px as in the demo: a 300px photo + 164 = 464px card */ .product-card__title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 18.04px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.025em; color: var(--shop-dark); } .product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .product-card__cats, .product-card__price { font-size: 14.4px; line-height: 20px; color: var(--shop-dark-2); } .product-card__price { padding-bottom: var(--spacing-1); font-weight: var(--font-weight-semibold); } .product-card__price del { opacity: 0.55; font-weight: var(--font-weight-medium); } .product-card__price ins { text-decoration: none; } .product-card__swatches { display: flex; align-items: center; gap: var(--spacing-2); padding-top: var(--spacing-2); border-top: 1px solid var(--components-border); list-style: none; margin: 0; } .swatch-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .swatch-dot.is-active { width: 28px; height: 28px; border: 2px solid var(--shop-dark); box-shadow: inset 0 0 0 3px #fff; } /* USPs --------------------------------------------------------------------- */ .shop-usps { padding-top: var(--spacing-grid-gutter-2x); } .shop-usps__list { display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--spacing-grid-gutter-2x) 0; border: 1px solid var(--grey-neutral-32); border-radius: var(--radius-large); list-style: none; margin: 0; } .shop-usp { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); padding: 0 var(--spacing-5); text-align: center; } .shop-usp + .shop-usp { border-left: 1px solid var(--grey-neutral-32); } .shop-usp__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--spacing-1); border-radius: 50px; background: var(--grey-neutral-8); color: var(--shop-dark); } .shop-usp__icon .icon { width: 28px; height: 28px; } .shop-usp__title { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--shop-dark); } .shop-usp__text { font-size: 14.76px; line-height: 1.5; color: var(--shop-dark-2); } /* Category cards + scroller -------------------------------------------------- */ .shop-trending__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--spacing-grid-gutter-2x)) / 4); gap: var(--spacing-grid-gutter-2x); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .shop-trending__track::-webkit-scrollbar { display: none; } .cat-card { position: relative; height: 390px; overflow: hidden; border-radius: var(--radius-large); background: var(--grey-neutral-8); scroll-snap-align: start; } .cat-card--outline { border: 1px solid var(--grey-neutral-32); background: none; } .cat-card__link { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100%; padding: var(--spacing-spacer); } .cat-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 1s var(--ease-out); } .cat-card__title { position: relative; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 22.64px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.03em; color: var(--shop-dark); } .cat-card__icon { position: relative; color: var(--shop-dark); } .cat-card:hover .cat-card__image { transform: scale(1.04); } .cat-card:hover .cat-card__icon { background: var(--shop-dark); color: #fff; } .shop-trending__nav { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-5); } .pill-nav { display: flex; padding: var(--spacing-0-5); border-radius: var(--radius-2xlarge); background: var(--grey-neutral-8); } .pill-nav__button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 24px; color: var(--black-lighter); transition: background-color 0.2s; } .pill-nav__button:hover { background: #fff; } .pill-nav__button .icon { width: 24px; height: 24px; } .pill-nav__button--prev .icon { transform: rotate(180deg); } .shop-trending .slider-nav__line { background: var(--grey-basic); } /* Promo rows ---------------------------------------------------------------- */ .shop-promo__row { display: grid; grid-template-columns: 2fr 2fr; gap: var(--spacing-grid-gutter-2x); } .promo-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-grid-gutter-3x); min-height: 450px; padding: 40px; border-radius: var(--radius-large); } .promo-card--green { background: var(--shop-green); } .promo-card--pink { background: var(--shop-pink); } .promo-card__head { display: flex; flex-direction: column; gap: var(--spacing-1); } .promo-card__title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(28px, 2.1vw, 35px); font-weight: var(--font-weight-medium); line-height: 1.1; letter-spacing: -0.035em; color: var(--shop-dark); } .promo-card__text { max-width: 560px; padding-top: var(--spacing-1); line-height: 1.6; color: var(--shop-dark-2); } .promo-card__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); } /* Tabs ------------------------------------------------------------------------ */ .tabs { display: flex; flex-wrap: wrap; gap: var(--spacing-5); margin-bottom: var(--spacing-grid-gutter-2x); } .tabs__tab { padding: 4px 0; border-bottom: 2px solid transparent; font-size: 15.58px; font-weight: var(--font-weight-medium); color: var(--shop-dark-2); transition: border-color 0.2s; } .tabs__tab[aria-selected="true"] { border-color: var(--shop-dark); font-weight: var(--font-weight-semibold); color: var(--shop-dark); } .tabs__tab:hover { border-color: var(--grey-neutral-48); } /* Banners + journal -------------------------------------------------------------- */ .shop-banners__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); } .shop-journal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-grid-gutter-2x); margin: 0; padding: 0; list-style: none; } .journal-card { height: 390px; border-radius: var(--radius-large); background: var(--grey-neutral-8); } .journal-card__link { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: var(--spacing-spacer); } .journal-card__author { display: flex; align-items: center; gap: var(--spacing-2); font-size: 14.4px; line-height: 1.35; color: var(--shop-dark-2); } .journal-card__author strong { display: block; font-weight: var(--font-weight-semibold); color: var(--shop-dark); } .journal-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .journal-card__bottom { display: flex; flex-direction: column; gap: var(--spacing-1); } .journal-card__meta { font-size: 14.4px; color: var(--shop-dark-2); } .journal-card__title { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 18px; font-weight: var(--font-weight-medium); line-height: 1.25; letter-spacing: -0.025em; color: var(--shop-dark); } .journal-card__link:hover .journal-card__title { text-decoration: underline; text-underline-offset: 3px; } .journal-card__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--spacing-1); } .journal-card__tags .tag { font-size: 13px; } .shop-journal .cat-card { height: 390px; } /* Archive (categories, all products) -------------------------------------------- */ .shop-archive { padding-bottom: var(--space-section); } .shop-archive__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-5); color: var(--grey-basic); font-size: 14.76px; } .woocommerce-ordering select, .shop-page select, .product-summary select:not(.variation-picker select) { height: 40px; padding: 0 36px 0 14px; border: 0; border-radius: var(--radius-medium); background: var(--grey-neutral-8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 14 8'%3E%3Cpath d='M1.25 0L0 1.21L7 8L14 1.21L12.75 0L7 5.57Z' fill='%23151517'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; color: var(--black-lighter); } .woocommerce-pagination { margin-top: var(--spacing-grid-gutter-3x); } .woocommerce-pagination ul { display: flex; justify-content: center; gap: var(--spacing-1); margin: 0; padding: 0; list-style: none; } .woocommerce-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-medium); background: var(--grey-neutral-8); font-weight: var(--font-weight-medium); } .woocommerce-pagination .page-numbers.current { background: var(--components-button); color: #fff; } .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin: 0 0 var(--spacing-5); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-medium); background: var(--grey-neutral-8); color: var(--black-lighter); list-style: none; font-size: 16.4px; } .woocommerce-error { background: rgba(217, 24, 66, 0.08); } .woocommerce-error li { width: 100%; } .woocommerce-message .button, .woocommerce-info .button { order: 2; height: 36px; padding: 4px var(--spacing-3); border-radius: var(--radius-medium); background: var(--components-button); color: #fff; font-size: 15px; } .woocommerce-info a:not(.button), .woocommerce-message a:not(.button) { font-weight: var(--font-weight-semibold); } .woocommerce-notices-wrapper:empty { display: none; } /* Single product (layout of the live Ohio demo, site styling) -------------------------------------------------- */ .product-notices:has(.woocommerce-notices-wrapper:empty) { display: none; } .product-notices .woocommerce-message { margin-bottom: var(--spacing-grid-gutter-2x); } .product-single { padding-block: var(--spacing-grid-gutter-2x) var(--space-section); } .product-single__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 416px); gap: 56px; align-items: start; } .product-single__side { height: 100%; } /* Gallery: sticky thumbnails | photos stacked 8px apart */ .gallery-product { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--spacing-3); align-items: start; } .gallery-product--single { grid-template-columns: minmax(0, 1fr); } .gallery-product__thumbs { display: flex; flex-direction: column; gap: var(--spacing-3); } .gallery-product__thumb { display: block; width: 68px; height: 68px; overflow: hidden; border-radius: var(--radius-medium); background: #f5f5f6; transition: box-shadow 0.3s var(--ease-out); } .gallery-product__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.6s var(--ease-out); } .gallery-product__thumb:hover img { transform: scale(1.06); } .gallery-product__thumb.is-active { box-shadow: inset 0 0 0 1px var(--brand-headlines); } .gallery-product__stage { position: relative; } .gallery-product__track { display: flex; flex-direction: column; gap: 8px; } .gallery-product__slide { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-xlarge); background: #f5f5f6; cursor: zoom-in; } .gallery-product__image, .gallery-product__slide img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s var(--ease-out); } .gallery-product__slide:hover img { transform: scale(1.03); } .gallery-product__share { top: var(--spacing-spacer); left: var(--spacing-spacer); } .gallery-product__expand { position: absolute; top: var(--spacing-spacer); right: var(--spacing-spacer); z-index: 2; background: rgba(255, 255, 255, 0.7); } .gallery-product__expand:hover { background: #fff; } .gallery-dialog { width: min(1200px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-xlarge); background: #f5f5f6; } .gallery-dialog::backdrop { background: rgba(17, 16, 19, 0.9); } .gallery-dialog__image { width: 100%; max-height: calc(100dvh - 32px); object-fit: contain; mix-blend-mode: multiply; } .gallery-dialog__close { position: absolute; top: 12px; right: 12px; z-index: 1; background: #fff; } /* Thumbnails and summary stay in view while the photos scroll by (only on screens tall enough for the summary) */ @media (min-width: 1200px) and (min-height: 760px) { .gallery-product__thumbs, .product-summary { position: sticky; top: calc(var(--header-offset) + var(--spacing-grid-gutter-2x)); } } /* Summary (values from the demo, colours and buttons of the site) */ .product-summary { display: flex; flex-direction: column; } .product-summary .badges { gap: 4px; margin-bottom: var(--spacing-2); } .product-summary .badge { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--grey-neutral-12, rgba(136, 136, 137, 0.12)); font-size: 14.4px; } .product-summary .badge--sale { background: var(--brand-primary); color: #fff; } .product-summary .product_title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(23.97px, 2.25vw + 4px, 33.29px); font-weight: var(--font-weight-medium); line-height: 1.15; letter-spacing: -0.035em; color: var(--brand-headlines); } .product-summary__cats { margin-top: 4px; font-size: 15.58px; line-height: 1.6; color: var(--black-lighter); } .product-summary > .price { margin: var(--spacing-3) 0; font-size: 18.04px; line-height: 1.6; font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .product-summary .price del { opacity: 0.55; font-size: 0.85em; font-weight: var(--font-weight-semibold); } .product-summary .price ins { text-decoration: none; } .rating-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 15.58px; border: 1px solid var(--grey-neutral-16); border-radius: var(--radius-large); font-size: 15.58px; color: var(--black-lighter); transition: background-color 0.3s; } .rating-card__title { font-size: 13.71px; } .rating-card__row { display: flex; align-items: center; gap: 6px; } .rating-card strong { font-weight: var(--font-weight-medium); color: var(--brand-headlines); } .star-rating { position: relative; display: inline-block; width: 5.4em; height: 1.1em; overflow: hidden; font-size: 15.58px; line-height: 1; } .star-rating::before { content: "★★★★★"; position: absolute; inset: 0; letter-spacing: 0.08em; color: var(--grey-neutral-32); } .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; letter-spacing: 0.08em; color: var(--brand-headlines); } .product-summary__meta { margin-top: var(--spacing-3); font-size: 14.76px; line-height: 1.6; color: var(--black-lighter); } .product-summary__meta strong { font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .woocommerce-product-details__short-description { margin-top: var(--spacing-3); font-size: 16.4px; line-height: 1.6; color: var(--black-lighter); } .product-summary form.cart { margin-top: var(--spacing-3); } .variations { width: 100%; border-collapse: collapse; border-top: 1px solid var(--grey-neutral-16); } .variations tbody { display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-5); padding: 16.4px 0; } .variations tr { display: flex; flex-direction: column; gap: var(--spacing-1); margin: 0; } .variations th, .variations td { padding: 0; text-align: left; } .variations label { font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); } .variation-picker { position: relative; } .variation-picker select, .woocommerce form .variation-picker select { position: absolute; top: 0; left: 0; width: 1px !important; height: 1px; padding: 0; opacity: 0; pointer-events: none; } .variation-picker__options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); } .swatch { position: relative; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; background: none; transition: border-color 0.3s; } .swatch::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .swatch[aria-pressed="true"] { border-color: var(--brand-headlines); } .swatch:hover:not([aria-pressed="true"]) { border-color: var(--grey-neutral-32); } .swatch:disabled, .pill:disabled { opacity: 0.3; cursor: not-allowed; } .pill { height: 36px; padding: 0 12px; border: 1px solid var(--grey-neutral-32); border-radius: 18px; font-size: 14.4px; color: var(--brand-headlines); transition: border-color 0.3s, background-color 0.3s; } .pill[aria-pressed="true"] { border-color: var(--brand-headlines); } .pill:hover:not([aria-pressed="true"]) { background: var(--grey-neutral-8); } .reset_variations { display: inline-flex; align-items: center; height: 36px; padding: 0 4px; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 14.76px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); } .reset_variations:hover { color: var(--link-hover); } .reset_variations[style*="hidden"] { display: none; } .single_variation_wrap { padding-top: 0; } .woocommerce-variation-price .price { display: block; margin-bottom: 4px; font-size: 17.14px; font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .woocommerce-variation-availability, .stock { font-size: 14.4px; color: var(--black-lighter); } .woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); padding-top: 16.4px; border-top: 1px solid var(--grey-neutral-16); } .single_add_to_cart_button { height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border: 0; border-radius: var(--radius-3xlarge); background: var(--brand-primary); color: #fff; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color 0.3s var(--ease-out); } .single_add_to_cart_button:hover { background: #6e7c6a; } .single_add_to_cart_button.disabled { opacity: 0.45; cursor: not-allowed; } /* Quantity stepper (pill, as the buttons) */ .quantity { display: inline-flex; align-items: center; height: var(--sizing-button-medium); padding: 0 4px; border-radius: var(--radius-3xlarge); background: var(--grey-neutral-8); } .quantity--hidden { display: none; } .quantity .qty, .woocommerce form .quantity .qty { width: 32px; height: 100%; padding: 0; border: 0; background: none; border-radius: 0; text-align: center; font-size: 15.58px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); appearance: textfield; -moz-appearance: textfield; } .quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .quantity__step { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--brand-headlines); transition: background-color 0.3s; } .quantity__step:hover { background: #fff; } .quantity__step .icon { width: 18px; height: 18px; } /* Description + reviews */ .product-more { padding-top: var(--space-section); } .woocommerce-tabs .tabs { display: flex; flex-wrap: wrap; gap: var(--spacing-5); margin: 0 0 var(--spacing-grid-gutter-2x); padding: 0; list-style: none; } .woocommerce-tabs .tabs li a { display: block; padding: 4px 0; border-bottom: 2px solid transparent; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(19.09px, 1.5vw + 4px, 23.97px); font-weight: var(--font-weight-medium); letter-spacing: -0.03em; color: var(--grey-basic); transition: color 0.3s, border-color 0.3s; } .woocommerce-tabs .tabs li a:hover { color: var(--brand-headlines); } .woocommerce-tabs .tabs li.active a { border-color: var(--brand-headlines); color: var(--brand-headlines); } .woocommerce-Tabs-panel { max-width: 760px; font-size: 16.4px; line-height: 1.6; color: var(--black-lighter); } .woocommerce-Tabs-panel > h2 { display: none; } .woocommerce-Tabs-panel ul { padding-left: 1.2em; } .woocommerce-Tabs-panel p + p, .woocommerce-Tabs-panel p + ul { margin-top: var(--spacing-3); } #reviews .woocommerce-Reviews-title { margin: 0 0 var(--spacing-3); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 18.04px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); } #reviews .commentlist { margin: 0 0 var(--spacing-grid-gutter-2x); padding: 0; list-style: none; } #reviews .comment_container { display: flex; gap: var(--spacing-3); padding: var(--spacing-5) 0; border-bottom: 1px solid var(--grey-neutral-16); } #reviews .comment-text { flex: 1; display: flex; flex-direction: column; gap: 6px; } #reviews .meta { font-size: 14.4px; color: var(--grey-basic); } #reviews .woocommerce-review__author { font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } #reviews .comment-reply-title { display: block; margin-bottom: var(--spacing-3); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 18.04px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); } #review_form .comment-form { display: flex; flex-direction: column; gap: var(--spacing-3); } #review_form .comment-form p { display: flex; flex-direction: column; gap: var(--spacing-1); margin: 0; } #review_form label { font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--black-lighter); } #review_form input[type="text"], #review_form input[type="email"], #review_form textarea { width: 100%; height: var(--sizing-button-medium); padding: 0 var(--spacing-3); border: 1px solid var(--input-border); border-radius: var(--radius-medium); background: transparent; font-size: 15.36px; color: var(--brand-headlines); transition: border-color 0.2s; } #review_form textarea { height: 160px; padding: var(--spacing-2) var(--spacing-3); line-height: 1.6; resize: vertical; } #review_form input:hover, #review_form textarea:hover { border-color: var(--black-lighter); } #review_form input:focus, #review_form textarea:focus { outline: 0; border-color: var(--brand-headlines); } #review_form .comment-form-cookies-consent { flex-direction: row; align-items: center; } #review_form .form-submit input { width: fit-content; height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border: 0; border-radius: var(--radius-3xlarge); background: var(--brand-primary); color: #fff; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color 0.3s; } #review_form .form-submit input:hover { background: #6e7c6a; } #review_form p.stars a { font-size: 0; } #review_form p.stars a::before { content: "★"; font-size: 22px; color: var(--grey-neutral-32); } #review_form p.stars:hover a::before, #review_form p.stars.selected a::before { color: var(--brand-headlines); } #review_form p.stars a:hover ~ a::before, #review_form p.stars.selected a.active ~ a::before { color: var(--grey-neutral-32); } #review_form p.stars span { display: inline-flex; gap: 4px; } /* "Next Product" card (as on the projects) makes way for the add-to-cart bar */ .sticky-next__thumb--product { height: 104px; background: #f5f5f6; } .sticky-next__thumb--product .sticky-next__image { object-fit: contain; mix-blend-mode: multiply; } .has-sticky-cart .sticky-next.is-visible { opacity: 0; visibility: hidden; transform: translateY(6%); } /* Sticky add-to-cart bar (Figma bottom-right card) */ .sticky-cart { position: fixed; right: var(--spacing-spacer); bottom: var(--spacing-spacer); z-index: 35; display: flex; align-items: center; gap: var(--spacing-3); width: min(350px, calc(100% - 32px)); padding: var(--spacing-3); border-radius: var(--radius-xlarge); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 12px 40px rgba(0, 0, 0, 0.08); animation: sticky-in 0.35s var(--ease-out); } .sticky-cart[hidden] { display: none; } @keyframes sticky-in { from { opacity: 0; transform: translateY(12px); } } .sticky-cart__image { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f5f5f6; mix-blend-mode: multiply; } .sticky-cart__text { flex: 1; min-width: 0; } .sticky-cart__title { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--black-basic); } .sticky-cart__cats { font-size: 14.4px; color: var(--black-lighter); } .sticky-cart__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .sticky-cart__price { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); } .sticky-cart__price del { display: none; } .sticky-cart__price ins { text-decoration: none; } .sticky-cart .button { height: 36px; padding: 4px var(--spacing-3); font-size: 15px; } /* Cards used by cart, checkout, thank-you and account --------------------------------- */ .shop-card, .cart_totals, #order_review, .account-nav { padding: var(--spacing-spacer); border-radius: var(--radius-2xlarge); background: var(--grey-neutral-8); } .cart_totals > h2, #order_review_heading, .woocommerce-order-details__title, .account-nav__title { margin: 0 0 var(--spacing-3); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 22.64px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.03em; color: var(--black-basic); } .shop_table { width: 100%; border-collapse: collapse; font-size: 16.4px; } .shop_table th, .shop_table td { padding: var(--spacing-3) 0; border-bottom: 1px solid var(--components-border); text-align: left; vertical-align: top; } .shop_table tr:last-child th, .shop_table tr:last-child td { border-bottom: 0; } .shop_table th { width: 45%; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .shop_table td { font-weight: var(--font-weight-semibold); color: var(--black-basic); } .shop_table td .woocommerce-Price-amount { font-weight: var(--font-weight-semibold); } .shop_table .order-total td { font-size: var(--font-size-h5); } /* Shipping options with the red radio from Figma */ .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; font-weight: var(--font-weight-regular); } .woocommerce-shipping-methods li { display: flex; align-items: center; gap: var(--spacing-1); line-height: 1.7; } input[type="radio"].shipping_method, .wc_payment_method > input[type="radio"], .woocommerce-form__input-checkbox { flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--black-lighter); border-radius: 50%; appearance: none; cursor: pointer; } input[type="radio"].shipping_method:checked, .wc_payment_method > input[type="radio"]:checked { border: 6px solid var(--brand-accent); } .woocommerce-form__input-checkbox { border-radius: var(--radius-small); } .woocommerce-form__input-checkbox:checked { background: var(--black-lighter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.2 4.64L7.18 10.95L4.81 8.46L3.65 9.67L7.18 13.36L14.35 5.84Z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat; } .woocommerce-shipping-destination { margin-top: var(--spacing-3); font-weight: var(--font-weight-regular); } .shipping-calculator-button { display: inline-block; margin-top: var(--spacing-3); font-weight: var(--font-weight-semibold); } .shipping-calculator-form { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-3); } /* Cart ------------------------------------------------------------------------------ */ .woocommerce:has(> .woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 696fr) minmax(0, 416fr); gap: var(--spacing-grid-gutter-2x); align-items: start; } .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart-form .shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .woocommerce-cart-form .cart_item { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto auto auto 24px; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) 0; border-bottom: 1px solid var(--components-border); } .woocommerce-cart-form .cart_item td { padding: 0; border: 0; } .woocommerce-cart-form .product-remove { order: 6; } .woocommerce-cart-form .product-remove a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 18px; color: var(--grey-basic); } .woocommerce-cart-form .product-remove a:hover { background: var(--grey-neutral-16); color: var(--black-basic); } .woocommerce-cart-form .product-thumbnail { order: 1; } .woocommerce-cart-form .product-thumbnail img { display: block; width: 68px; height: 68px; object-fit: cover; background: #f5f5f6; mix-blend-mode: multiply; } .woocommerce-cart-form .product-name { order: 2; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); line-height: 1.35; } .woocommerce-cart-form .product-name a:hover { text-decoration: underline; } .woocommerce-cart-form .product-price { order: 3; } .woocommerce-cart-form .product-quantity { order: 4; } .woocommerce-cart-form .product-subtotal { order: 5; min-width: 80px; text-align: right; } .woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { font-weight: var(--font-weight-semibold); } .variation { display: grid; grid-template-columns: auto 1fr; gap: 0 4px; margin: 2px 0 0; font-family: var(--font-familiy-body); font-size: 14.4px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .variation dt { font-weight: var(--font-weight-regular); } .variation dd { margin: 0; font-weight: var(--font-weight-semibold); } .variation dd p { margin: 0; } .cart-item__cats { display: block; font-family: var(--font-familiy-body); font-size: 14.4px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-5); padding-top: var(--spacing-grid-gutter-2x) !important; } .woocommerce-cart-form tr:has(.actions) { display: block; } .coupon { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-1); position: relative; min-width: 260px; } .coupon::before { content: attr(data-label); } .coupon label { position: static !important; width: auto !important; height: auto !important; clip: auto !important; font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--black-lighter); } .coupon .input-text { height: var(--sizing-button-medium); padding: 0 140px 0 var(--spacing-3); border: 0; border-radius: var(--radius-medium); background: var(--grey-neutral-8); } .coupon .button { position: absolute; right: 0; bottom: 0; height: var(--sizing-button-medium); padding: 0 var(--spacing-4); background: none; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); } .coupon .button:hover { text-decoration: underline; } button[name="update_cart"] { height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border-radius: var(--radius-medium); background: #888889; color: #fff; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); } button[name="update_cart"]:disabled { opacity: 0.6; cursor: default; } .cart-collaterals .cross-sells { display: none; } .wc-proceed-to-checkout { padding-top: var(--spacing-5); } .button--block { width: 100%; } .wc-proceed-to-checkout .checkout-button { margin: 0; } .cart-empty.woocommerce-info { justify-content: flex-start; } .return-to-shop .button { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 12px; background: var(--components-button); color: #fff; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); } /* Checkout ---------------------------------------------------------------------------- */ form.checkout { display: grid; grid-template-columns: minmax(0, 696fr) minmax(0, 416fr); grid-template-rows: auto 1fr; gap: 0 var(--spacing-grid-gutter-2x); align-items: start; } form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; padding: var(--spacing-spacer) var(--spacing-spacer) 0; border-radius: var(--radius-2xlarge) var(--radius-2xlarge) 0 0; background: var(--grey-neutral-8); } form.checkout #order_review { grid-column: 2; grid-row: 2; padding-top: var(--spacing-3); border-radius: 0 0 var(--radius-2xlarge) var(--radius-2xlarge); } .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #ship-to-different-address { margin: var(--spacing-5) 0 var(--spacing-3); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); color: var(--black-basic); } #ship-to-different-address label { display: flex; align-items: center; gap: var(--spacing-1); font-size: 16.4px; cursor: pointer; } .form-row { display: flex; flex-direction: column; gap: var(--spacing-1); margin: 0 0 var(--spacing-5); padding: 0; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--spacing-3); } .form-row-wide, .woocommerce-billing-fields__field-wrapper .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } .form-row label { font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--black-lighter); } .form-row label .required, .form-row label abbr { display: none; } .form-row .optional { color: var(--grey-basic); font-weight: var(--font-weight-regular); } .woocommerce form .input-text, .woocommerce form select, .woocommerce-input-wrapper textarea, .select2-container .select2-selection--single { width: 100%; height: var(--sizing-button-medium); padding: 0 var(--spacing-3); border: 1px solid transparent; border-radius: var(--radius-medium); background-color: var(--grey-neutral-8); font-size: 16.4px; color: var(--black-basic); transition: border-color 0.2s, background-color 0.2s; } .woocommerce form textarea.input-text { height: 140px; padding: var(--spacing-3); line-height: 1.6; resize: vertical; } .woocommerce form .input-text::placeholder { color: var(--grey-basic); } .woocommerce form .input-text:focus, .woocommerce form select:focus { outline: 0; border-color: var(--grey-neutral-48); background-color: #fff; } .woocommerce-invalid .input-text, .woocommerce-invalid select { border-color: var(--brand-accent); } .select2-container .select2-selection--single { display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 9px; right: 10px; } .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; height: 48px; padding-block: 0; } form.woocommerce-form-login, form.checkout_coupon { margin-bottom: var(--spacing-5); padding: var(--spacing-5); border-radius: var(--radius-medium); background: var(--grey-neutral-8); } form.checkout_coupon { display: flex; flex-wrap: wrap; gap: var(--spacing-2); align-items: flex-end; } form.checkout_coupon .form-row { margin: 0; } .woocommerce-checkout-review-order-table thead th { padding-top: 0; color: var(--black-lighter); font-weight: var(--font-weight-regular); } .woocommerce-checkout-review-order-table .cart_item .product-name { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); } .woocommerce-checkout-review-order-table .product-quantity { font-weight: var(--font-weight-regular); } .woocommerce-checkout-payment { margin-top: var(--spacing-3); } .wc_payment_methods { display: flex; flex-direction: column; gap: var(--spacing-2); margin: 0 0 var(--spacing-5); padding: 0; list-style: none; } .wc_payment_method { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); } .wc_payment_method label { font-weight: var(--font-weight-medium); cursor: pointer; } .payment_box { width: 100%; margin-top: var(--spacing-1); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-medium); background: #fff; font-size: 14.76px; color: var(--black-lighter); } .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--spacing-3); font-size: 14px; line-height: 1.4; color: var(--grey-basic); } .woocommerce-privacy-policy-text a { text-decoration: underline; } /* Thank you ---------------------------------------------------------------------------- */ .order-received { display: grid; grid-template-columns: minmax(0, 696fr) minmax(0, 416fr); gap: var(--spacing-grid-gutter-2x); align-items: start; } .order-received__main { display: flex; flex-direction: column; gap: var(--spacing-grid-gutter-2x); } .order-received__notice { display: flex; align-items: center; gap: var(--spacing-3); } .order-received__check { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: #dff1e7; color: var(--black-basic); } .order-received__check .icon { width: 32px; height: 32px; } .order-received__overview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-5) var(--spacing-grid-gutter-2x); margin: 0; max-width: 560px; } .order-received__overview dt { font-size: 15.58px; color: var(--black-lighter); } .order-received__overview dd { margin: 4px 0 0; font-weight: var(--font-weight-semibold); color: var(--black-basic); } .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); } .woocommerce-customer-details .woocommerce-column__title { margin: 0 0 var(--spacing-3); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); color: var(--black-basic); } .woocommerce-customer-details address { line-height: 1.6; color: var(--black-lighter); } .woocommerce-customer-details address p { margin: 0; } .woocommerce-order-details .shop_table td.product-total, .woocommerce-order-details .shop_table tfoot td { font-weight: var(--font-weight-semibold); } .woocommerce-order-details .product-quantity { font-weight: var(--font-weight-regular); } .woocommerce-bacs-bank-details { padding: var(--spacing-5); border-radius: var(--radius-medium); background: var(--grey-neutral-8); } .wc-bacs-bank-details-heading { margin: 0 0 var(--spacing-2); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); } /* Account ----------------------------------------------------------------------------- */ .woocommerce:has(> .account-nav) { display: grid; grid-template-columns: minmax(0, 416fr) minmax(0, 696fr); gap: var(--spacing-grid-gutter-2x); align-items: start; } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .woocommerce-MyAccount-navigation a { display: block; font-size: 16.4px; line-height: 30px; color: var(--black-lighter); } .woocommerce-MyAccount-navigation .is-active a { font-weight: var(--font-weight-semibold); color: var(--black-basic); } .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } .woocommerce-MyAccount-content p + p { margin-top: var(--spacing-3); } .woocommerce-MyAccount-content a:not(.button) { font-weight: var(--font-weight-semibold); } .woocommerce-orders-table thead th { padding-top: 0; font-size: 14.4px; color: var(--black-lighter); } .woocommerce-orders-table th, .woocommerce-orders-table td { width: auto; vertical-align: middle; } .woocommerce-orders-table__cell-order-number a { font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); } .woocommerce-orders-table__cell-order-date { font-weight: var(--font-weight-regular) !important; } .woocommerce-orders-table__cell-order-status { font-weight: var(--font-weight-medium) !important; } .woocommerce-orders-table__cell-order-status::before { content: none; } .order-status-pill { display: inline-block; padding: 4px 12px; border-radius: var(--radius-medium); background: var(--grey-neutral-16); font-size: 15px; } .woocommerce-orders-table__cell-order-total { font-weight: var(--font-weight-regular) !important; } .woocommerce-orders-table__cell-order-total .amount { font-weight: var(--font-weight-semibold); } .woocommerce-orders-table .button, .woocommerce-MyAccount-content .woocommerce-Button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); color: var(--black-basic); } .woocommerce-orders-table .button::after { content: "→"; font-size: 20px; line-height: 1; transition: transform 0.2s; } .woocommerce-orders-table .button:hover::after { transform: translateX(3px); } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); } .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-2); } .woocommerce-Address-title h2 { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: var(--font-size-h5); } .woocommerce form.login, .woocommerce form.register, .woocommerce form.woocommerce-EditAccountForm, .woocommerce form.lost_reset_password { display: flex; flex-direction: column; gap: 0; max-width: 520px; } .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button.button[type="submit"], .woocommerce form .button[type="submit"]:not(.coupon .button):not([name="update_cart"]):not(#place_order) { width: fit-content; height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border: 0; border-radius: var(--radius-3xlarge); background: var(--brand-primary); color: #fff !important; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 15.58px; font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color 0.3s var(--ease-out); } .woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover, .woocommerce form .button[type="submit"]:not(.coupon .button):not([name="update_cart"]):not(#place_order):hover { background: #6e7c6a; } .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-3x); } .u-columns h2 { margin: 0 0 var(--spacing-5); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 22.64px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.03em; } .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--spacing-1); margin: 0 0 var(--spacing-3); } .lost_password { margin-top: var(--spacing-3); } /* Responsive ------------------------------------------------------------------------------ */ @media (max-width: 1199px) { .shop-hero__row, .shop-promo__row, .shop-banners__row, .product-single__row, .woocommerce:has(> .woocommerce-cart-form), form.checkout, .order-received, .woocommerce:has(> .account-nav) { grid-template-columns: 1fr; } form.checkout #customer_details, form.checkout #order_review_heading, form.checkout #order_review { grid-column: 1; grid-row: auto; } form.checkout #order_review_heading { margin-top: var(--spacing-5); } ul.products, ul.products.products--four, .shop-journal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } ul.products.products--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-trending__track { grid-auto-columns: calc((100% - 2 * var(--spacing-grid-gutter-2x)) / 2.5); } .shop-hero__heading { min-height: 0; padding-top: var(--spacing-5); } .shop-usps__list { grid-template-columns: 1fr 1fr; row-gap: var(--spacing-grid-gutter-2x); } .shop-usp:nth-child(3) { border-left: 0; } .sticky-cart { right: 16px; bottom: 16px; } } @media (max-width: 767px) { :root { --spacing-grid-gutter-2x: 16px; } ul.products, ul.products.products--four, ul.products.products--pair, .shop-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .product-card__details { padding: 16px; } .product-card__title { font-size: 16px; } .product-card__badge { top: 12px; left: 12px; } .shop-banner, .shop-banner--photo, .shop-banner--wide, .promo-card { min-height: 340px; padding: 24px; } .shop-section { padding-top: 56px; } .shop-trending__track { grid-auto-columns: 72%; } .cat-card, .journal-card, .shop-journal .cat-card { height: 300px; } .shop-usps__list { grid-template-columns: 1fr; padding: 8px 0; } .shop-usp { padding: var(--spacing-3); } .shop-usp + .shop-usp { border-left: 0; border-top: 1px solid var(--grey-neutral-32); } .gallery-product { grid-template-columns: 1fr; } .gallery-product__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; } .gallery-product__thumb { flex: none; width: 60px; height: 60px; } .gallery-product__share { top: 12px; left: 12px; } .woocommerce-cart-form .cart_item { grid-template-columns: 56px minmax(0, 1fr) 24px; grid-template-areas: "thumb name remove" "thumb qty total"; row-gap: var(--spacing-2); } .woocommerce-cart-form .product-thumbnail { grid-area: thumb; align-self: start; } .woocommerce-cart-form .product-thumbnail img { width: 56px; height: 56px; } .woocommerce-cart-form .product-name { grid-area: name; } .woocommerce-cart-form .product-remove { grid-area: remove; align-self: start; } .woocommerce-cart-form .product-price { display: none; } .woocommerce-cart-form .product-quantity { grid-area: qty; } .woocommerce-cart-form .product-subtotal { grid-area: total; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-customer-details .woocommerce-columns, .woocommerce-Addresses, .u-columns.col2-set { grid-template-columns: 1fr; } .order-received__overview { grid-template-columns: 1fr; } .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; padding: var(--spacing-3) 0; border-bottom: 1px solid var(--components-border); } .woocommerce-orders-table td { padding: 2px 0; border: 0; } .woocommerce-orders-table td::before { content: none; } .sticky-cart { left: 16px; width: auto; } .sticky-cart__cats { display: none; } } /* Item meta (variation attributes) in order tables */ .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-family: var(--font-familiy-body); font-size: 14.4px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 4px; } .wc-item-meta p { margin: 0; font-weight: var(--font-weight-semibold); } .wc-item-meta-label { font-weight: var(--font-weight-regular); } /* ========================================================================== Webshop start page (Figma Demo18_Home): the header as a fixed column on the left, styling as on Studio and Contact (site colours, olive buttons, 20px corners, 10vh rhythm). ========================================================================== */ :root { /* Column width as in the live demo 18: 32% of the screen height (30% on laptops) */ --side-header: clamp(250px, 32vh, 360px); --shop-dark: var(--brand-headlines); --shop-dark-2: var(--black-lighter); --shop-pink: rgba(136, 136, 137, 0.067); --shop-lavender: rgba(74, 79, 73, 0.1); --brand-accent: var(--brand-primary); } .side-header { display: none; } .side-header__top { display: flex; align-items: center; gap: 15px; } .side-nav__list { display: flex; flex-direction: column; } .side-nav__item { position: relative; } .side-nav__link { position: relative; display: block; padding: 5.6px 36px 5.6px 0; font-size: 16.53px; font-weight: var(--font-weight-medium); line-height: 1.6; color: var(--black-basic); transition: color 0.25s; } .side-nav__link:hover, .side-nav__item:hover > .side-nav__link, .side-nav__item--current > .side-nav__link { color: var(--brand-primary); } .side-nav__plus { position: absolute; top: 50%; right: 0; width: 18px; height: 18px; opacity: 0.6; transform: translateY(-50%); transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .side-nav__item--has-children:hover .side-nav__plus, .side-nav__item.is-open .side-nav__plus { transform: translateY(-50%) rotate(135deg); } .side-nav__caret { display: none; } /* Sub-menu: white list to the right of the column, at the height of its item */ .side-nav__submenu { position: absolute; top: 0; left: 100%; z-index: 2; width: 348px; margin: 0; padding: 0 0 0 53px; /* starts at the item, so the mouse can move across */ list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.35s; } .side-nav__item--has-children:hover > .side-nav__submenu, .side-nav__item--has-children:focus-within > .side-nav__submenu, .side-nav__item.is-open > .side-nav__submenu { opacity: 1; visibility: visible; transform: none; } .side-nav__sublink { display: block; padding: 8px 12px; border-radius: 18px; font-size: 16.2px; color: #fff; transition: background-color 0.25s, color 0.25s; } .side-nav__sublink:hover { background: rgba(255, 255, 255, 0.08); } /* The page dims while a sub-menu is open */ .side-header::after { content: ""; position: fixed; inset: 0 0 0 var(--side-header); z-index: 1; background: rgba(17, 16, 19, 0.9); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.35s; } .side-header:has(.side-nav__item--has-children:hover, .side-nav__item--has-children:focus-within, .side-nav__item.is-open)::after { opacity: 1; visibility: visible; } .side-header .shop-tools { flex-direction: column; align-items: flex-start; gap: var(--spacing-3); } .side-header .shop-tools { gap: var(--spacing-1); } .side-header .shop-tools__button, .side-header .header-cart__icon { width: 40px; height: 40px; background: none; } .side-header .shop-tools__button:hover, .side-header .header-cart:hover .header-cart__icon { background: var(--grey-neutral-8); } .side-header .header-cart { flex-direction: row-reverse; gap: var(--spacing-2); margin-left: 0; font-size: 15.58px; } .side-header .header-cart__count { top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; } .side-header .icon { width: 22px; height: 22px; } @media (min-width: 1200px) { .site--side .header { display: none; } .side-header { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; width: var(--side-header); padding: 28px 25px; background: var(--components-page); } .admin-bar .side-header { top: 32px; } .site--side .main, .site--side .footer { margin-left: var(--side-header); } .site--side .main { padding-top: 0; } /* Content as in the live demo 18: 16px from the column, 32px from the right edge, 9vh between sections */ .site--side .container { width: auto; margin-left: 16px; margin-right: 32px; } .site--side .shop-section { padding-top: 9vh; } .site--side .shop-hero { padding-top: 0; } /* Hero: two rows shared by both columns (subgrid). Row 1: photo banner | heading; row 2: green banner | two products */ .site--side .shop-hero__row { grid-template-rows: minmax(calc(22vh + 232px), auto) auto; row-gap: 0; } .site--side .shop-hero__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; } .site--side .shop-hero__col:first-child .shop-banner { min-height: 0; border-radius: 0; } .site--side .shop-hero__heading { min-height: 0; padding-bottom: var(--spacing-grid-gutter-2x); } .site--side .shop-hero .products--pair { flex: none; height: auto; } /* Product photos are always square (demo: 300 × 300 photo, 164 details at 1680px) */ .site--side .products--tall .product-card__media { flex: none; aspect-ratio: 1; min-height: 0; } .site--side .promo-card { min-height: 0; } .site--side .cat-card { height: auto; aspect-ratio: 300 / 374; } .site--side .footer .container { margin-left: 0; } } /* Same look as Studio / Contact: 20px corners, 10vh between sections, olive details */ .shop-section { padding-top: var(--space-section); } .shop-banner, .promo-card, .product-card, .cat-card, .journal-card, .shop-usps__list { border-radius: var(--radius-xlarge); } .cat-card:hover .cat-card__icon { background: var(--brand-primary); color: #fff; } .pill-nav { padding: 4px; border-radius: 40px; } .button--ghost { border-color: var(--grey-neutral-48); } .button--ghost .button__icon { color: currentColor; } .shop-banner--photo .button--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; } /* Laptops (1200–1440): the column narrows, as in the demo */ @media (min-width: 1200px) and (max-width: 1512px) { :root { --side-header: clamp(240px, 30vh, 320px); } } /* Phones (as the demo): photo edge to edge, then the heading, the green block and the products one per row */ @media (max-width: 1199px) { .site--side .shop-hero { padding-top: 0; } } @media (max-width: 767px) { .shop-hero__row { display: flex; flex-direction: column; gap: var(--spacing-grid-gutter-2x); } .shop-hero__col { display: contents; } .shop-hero .shop-banner { margin-inline: calc(var(--gutter-page) * -1); border-radius: 0; } .shop-hero .shop-banner--photo { order: 1; } .shop-hero__heading { order: 2; min-height: 0; padding-top: 6vh; } .shop-hero .shop-banner--green { order: 3; } .shop-hero .products--pair { order: 4; } .shop-landing ul.products, .shop-landing ul.products.products--pair, .shop-landing ul.products.products--four { grid-template-columns: 1fr; } .shop-landing .products--tall .product-card__media { flex: none; aspect-ratio: 1; min-height: 0; } } /* ========================================================================== Product, cart, checkout, thank-you and account in the site style (as Studio and Contact): page header in the site container, 20px cards, bordered fields as the contact form, olive pill buttons, olive radio buttons, text links with the underline animation. ========================================================================== */ .shop-page { padding-top: 0; } .shop-card, .cart_totals, #order_review, .account-nav { padding: var(--spacing-spacer); border-radius: var(--radius-xlarge); background: var(--grey-neutral-8); } form.checkout #order_review_heading { border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0; } form.checkout #order_review { border-radius: 0 0 var(--radius-xlarge) var(--radius-xlarge); } .cart_totals > h2, #order_review_heading, .woocommerce-order-details__title, .account-nav__title, .u-columns h2 { font-size: clamp(19.09px, 1.5vw + 4px, 23.97px); letter-spacing: -0.03em; color: var(--brand-headlines); } .shop_table td { color: var(--brand-headlines); } .shop_table th, .shop_table td { border-bottom-color: var(--grey-neutral-16); } /* Notices ("added to cart", "Returning customer?") */ .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice { border-radius: var(--radius-xlarge); padding: 12px 12px 12px var(--spacing-3); color: var(--black-lighter); } .woocommerce-message .button, .woocommerce-info .button { height: 36px; padding: 0 var(--spacing-3); border: 1px solid var(--grey-neutral-32); border-radius: var(--radius-3xlarge); background: none; color: var(--brand-headlines); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-weight: var(--font-weight-medium); transition: background-color 0.3s; } .woocommerce-message .button:hover, .woocommerce-info .button:hover { background: #fff; } .woocommerce-info a:not(.button), .woocommerce-message a:not(.button) { color: var(--brand-headlines); } /* Fields: as the contact form (1px border, 12px corners, transparent) */ .woocommerce form .input-text, .woocommerce form select, .woocommerce-input-wrapper textarea, .select2-container .select2-selection--single, .coupon .input-text { height: var(--sizing-button-medium); border: 1px solid var(--input-border); border-radius: var(--radius-medium); background-color: transparent; font-size: 15.36px; color: var(--brand-headlines); } .woocommerce form .input-text:hover, .woocommerce form select:hover, .coupon .input-text:hover { border-color: var(--black-lighter); } .woocommerce form .input-text:focus, .woocommerce form select:focus, .coupon .input-text:focus { outline: 0; border-color: var(--brand-headlines); background-color: transparent; } .woocommerce form textarea.input-text { height: 160px; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0; color: var(--brand-headlines); line-height: 1.4; } .select2-dropdown { border-color: var(--grey-neutral-32); border-radius: var(--radius-medium); overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--brand-primary); } .form-row label { color: var(--black-lighter); } .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #ship-to-different-address { font-size: clamp(19.09px, 1.5vw + 4px, 23.97px); letter-spacing: -0.03em; color: var(--brand-headlines); } .woocommerce-billing-fields > h3 { margin-top: 0; } form.woocommerce-form-login, form.checkout_coupon { border-radius: var(--radius-xlarge); } /* Radios and checkboxes in the site colours */ input[type="radio"].shipping_method, .wc_payment_method > input[type="radio"] { border-color: var(--grey-neutral-48); transition: border 0.2s; } input[type="radio"].shipping_method:checked, .wc_payment_method > input[type="radio"]:checked { border: 6px solid var(--brand-primary); } .woocommerce-form__input-checkbox { border: 1px solid var(--input-border); border-radius: 10px; width: 16px; height: 16px; } .woocommerce-form__input-checkbox:checked { border-color: var(--brand-headlines); background: var(--brand-headlines) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.2 4.64L7.18 10.95L4.81 8.46L3.65 9.67L7.18 13.36L14.35 5.84Z' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; } /* Cart */ .woocommerce-cart-form .cart_item { border-bottom-color: var(--grey-neutral-16); } .woocommerce-cart-form .product-thumbnail img { border-radius: var(--radius-medium); } .woocommerce-cart-form .product-name a { color: var(--brand-headlines); } .woocommerce-cart-form .product-name a:hover { text-decoration: none; } .woocommerce-cart-form .product-remove a { width: 32px; height: 32px; font-size: 20px; color: var(--black-lighter); transition: background-color 0.3s, color 0.3s; } .woocommerce-cart-form .product-remove a:hover { background: var(--grey-neutral-8); color: var(--brand-headlines); } .woocommerce-cart-form .cart_item { grid-template-columns: 68px minmax(0, 1fr) auto auto auto 32px; } .coupon .input-text { padding-right: 140px; } .coupon .button { height: var(--sizing-button-medium); padding: 0 var(--spacing-3); color: var(--brand-headlines); } .coupon .button:hover { text-decoration: none; color: var(--link-hover); } button[name="update_cart"] { height: var(--sizing-button-medium); padding: 0 var(--spacing-4); border: 1px solid var(--grey-neutral-32); border-radius: var(--radius-3xlarge); background: none; color: var(--brand-headlines); transition: background-color 0.3s; } button[name="update_cart"]:not(:disabled):hover { background: var(--grey-neutral-8); } button[name="update_cart"]:disabled { opacity: 0.45; } .wc-proceed-to-checkout { padding-top: var(--spacing-5); } .return-to-shop .button { height: var(--sizing-button-large); padding: 0 var(--spacing-5); border-radius: var(--radius-3xlarge); background: var(--brand-primary); transition: background-color 0.3s; } .return-to-shop .button:hover { background: #6e7c6a; } .cart-empty.woocommerce-info { margin-bottom: var(--spacing-5); } #place_order { margin-top: var(--spacing-2); } /* Thank you */ .order-received__check { background: rgba(74, 79, 73, 0.1); color: var(--brand-primary); } .order-received__notice .t-h4, .order-received__notice p { color: var(--brand-headlines); } .order-received__overview dd { color: var(--brand-headlines); } .woocommerce-customer-details .woocommerce-column__title { font-size: clamp(19.09px, 1.5vw + 4px, 23.97px); letter-spacing: -0.03em; color: var(--brand-headlines); } .woocommerce-bacs-bank-details { border-radius: var(--radius-xlarge); } /* Account */ .woocommerce-MyAccount-navigation a { color: var(--black-lighter); } .woocommerce-MyAccount-navigation .is-active a { color: var(--brand-headlines); } .order-status-pill { padding: 4px 12px; border-radius: var(--radius-3xlarge); background: var(--grey-neutral-12, rgba(136, 136, 137, 0.12)); font-size: 14.4px; color: var(--brand-headlines); } .woocommerce-orders-table .button, .woocommerce-MyAccount-content .woocommerce-Button { color: var(--brand-headlines); } .woocommerce-orders-table .button:hover { color: var(--link-hover); } .woocommerce-orders-table tbody tr { transition: background-color 0.3s; } /* Sticky add-to-cart bar: same card as "Next Product" */ .sticky-cart { right: var(--spacing-card); bottom: var(--spacing-card); border-radius: 30px; background: var(--surface-dropdown); box-shadow: 0 8px 40px rgba(17, 16, 19, 0.08); } .sticky-cart__image { border-radius: var(--radius-medium); } .sticky-cart__title, .sticky-cart__price { color: var(--brand-headlines); } /* Tablets and phones: photos in a swipe row with the thumbnails below; summary not sticky */ @media (max-width: 1199px) { .product-single__row { grid-template-columns: minmax(0, 1fr); gap: 5vh; } .gallery-product { grid-template-columns: minmax(0, 1fr); } .gallery-product__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; } .gallery-product__thumbs::-webkit-scrollbar { display: none; } .gallery-product__thumb { flex: none; width: 60px; height: 60px; } .gallery-product__track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .gallery-product__track::-webkit-scrollbar { display: none; } .gallery-product__slide { flex: 0 0 100%; scroll-snap-align: start; } } @media (max-width: 767px) { .gallery-product__share { top: 12px; left: 12px; } .gallery-product__expand { top: 12px; right: 12px; } .woocommerce-cart-form .cart_item { grid-template-columns: 56px minmax(0, 1fr) auto; } .woocommerce-cart-form .product-remove { justify-self: end; } .woocommerce-cart-form .product-subtotal { min-width: 0; align-self: center; } .variations tbody { flex-direction: column; } .sticky-cart { right: 16px; bottom: 16px; left: 16px; } } /* Cart, checkout and account have only a title in the page header: no minimum height (the title sits where Studio's does) */ :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .tax-product_cat, .tax-product_tag, .post-type-archive-product) .page-header__inner { min-height: 0; } /* "Place order" gets the circle arrow of the other buttons (drawn here: WooCommerce rewrites the button text on every update) */ :root { --icon-arrow-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 12C1.5 14.7848 2.60625 17.4555 4.57538 19.4246C6.54451 21.3938 9.21523 22.5 12 22.5C14.7848 22.5 17.4555 21.3938 19.4246 19.4246C21.3938 17.4555 22.5 14.7848 22.5 12C22.5 9.21523 21.3938 6.54451 19.4246 4.57538C17.4555 2.60625 14.7848 1.5 12 1.5C9.21523 1.5 6.54451 2.60625 4.57538 4.57538C2.60625 6.54451 1.5 9.21523 1.5 12ZM24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12ZM8.781 16.2045C8.64037 16.3453 8.44955 16.4245 8.25053 16.4247C8.05151 16.4248 7.86058 16.3459 7.71975 16.2053C7.57892 16.0646 7.49972 15.8738 7.49958 15.6748C7.49944 15.4758 7.57837 15.2848 7.719 15.144L13.8645 9H9.7125C9.51359 9 9.32282 8.92098 9.18217 8.78033C9.04152 8.63968 8.9625 8.44891 8.9625 8.25C8.9625 8.05109 9.04152 7.86032 9.18217 7.71967C9.32282 7.57902 9.51359 7.5 9.7125 7.5H15.675C15.8739 7.5 16.0647 7.57902 16.2053 7.71967C16.346 7.86032 16.425 8.05109 16.425 8.25V14.2125C16.425 14.4114 16.346 14.6022 16.2053 14.7428C16.0647 14.8835 15.8739 14.9625 15.675 14.9625C15.4761 14.9625 15.2853 14.8835 15.1447 14.7428C15.004 14.6022 14.925 14.4114 14.925 14.2125V10.0605L8.781 16.2045Z'/%3E%3C/svg%3E"); } #place_order::before, .woocommerce-form-login__submit::before, .woocommerce-form-register__submit::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; opacity: 0.75; -webkit-mask: var(--icon-arrow-circle) center / contain no-repeat; mask: var(--icon-arrow-circle) center / contain no-repeat; } #place_order:hover::before, .woocommerce-form-login__submit:hover::before, .woocommerce-form-register__submit:hover::before { animation: icon-move 0.35s ease-out; } /* Login and register (logged out): two equal cards, as the Dashboard card */ .u-columns .woocommerce-form-login, .u-columns .woocommerce-form-register { max-width: none; margin: 0; padding: var(--spacing-spacer); border-radius: var(--radius-xlarge); background: var(--grey-neutral-8); } .u-columns .woocommerce-form-register > p:not(.form-row) { margin: 0 0 var(--spacing-3); font-size: 14.76px; line-height: 1.5; color: var(--black-lighter); } .woocommerce-form-login .woocommerce-form-login__rememberme { flex-direction: row; } .account-orders__head { margin-bottom: var(--spacing-3); } .account-orders__title { margin: 0 0 var(--spacing-2); font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 18.04px; font-weight: var(--font-weight-medium); letter-spacing: -0.025em; color: var(--brand-headlines); } .account-orders__text { color: var(--black-lighter); } /* ========================================================================== All webshop pages as in the live demo 18 (1.9.1): the header column on the left (as /shop/), the content at the /shop/ width, demo notices, filled fields, cart / checkout / account layouts. ========================================================================== */ :root { --shop-field: rgba(136, 136, 137, 0.1); --shop-card: rgba(136, 136, 137, 0.08); --shop-success: rgb(41, 163, 102); --shop-error: rgb(217, 24, 66); } @media (min-width: 1200px) { .site--side { --header-offset: 32px; } .site--side .page-header__inner { min-height: 0; padding-top: 64px; } .site--side .product-single { padding-top: 0; } .site--side .breadcrumbs { min-height: 76px; } } /* Headings in the shop blocks (demo: 24.6px medium) */ .cart_totals > h2, #order_review_heading, .cross-sells__title, .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, .woocommerce-order-details__title, .woocommerce-column__title, .u-columns h2 { margin: 0 0 20px; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 24.6px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: -0.03em; color: var(--brand-headlines); } /* Notices (demo): soft bar, 16px corners, message + inline links, round close button */ .alert, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); width: 100%; margin: 0 0 16.4px; padding: 9px 9px 9px 20px; border: 0; border-radius: 16px; background: var(--shop-card); color: var(--black-lighter); font-size: 16.4px; line-height: 1.6; list-style: none; } .alert:not(:has(.alert__close)) { padding-block: 16px; padding-right: 20px; } .woocommerce .woocommerce-message { background: rgba(41, 163, 102, 0.15); color: var(--shop-success); } .woocommerce .woocommerce-error { background: rgba(217, 24, 66, 0.1); color: var(--shop-error); } .alert__message { flex: 1; margin: 0; padding-block: 7px; } .alert__list { flex: 1; margin: 0; padding: 7px 0; list-style: none; } .alert__list li + li { margin-top: 4px; } .alert a, .woocommerce-message a:not(.alert__close), .woocommerce-info a:not(.alert__close), .woocommerce-error a { color: inherit; font-weight: var(--font-weight-semibold); } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button { display: inline; order: 0; height: auto; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: var(--font-weight-semibold); } .woocommerce .woocommerce-message .button:hover, .woocommerce .woocommerce-info .button:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } .alert__close { flex: none; width: 40px; height: 40px; background: none; color: inherit; } .alert__close:hover { background: rgba(255, 255, 255, 0.6); } .alert__close .icon { width: 14px; height: 14px; } .woocommerce-notices-wrapper:empty, .product-notices:has(.woocommerce-notices-wrapper:empty) { display: none; } /* Fields (demo): filled, no border, 16px corners */ .woocommerce form .input-text, .woocommerce form select, .woocommerce-input-wrapper textarea, .select2-container .select2-selection--single, .woocommerce form .coupon .input-text, #review_form input[type="text"], #review_form input[type="email"], #review_form textarea { height: var(--sizing-button-medium); padding: 0 16px; border: 0; border-radius: 16px; background-color: var(--shop-field); box-shadow: none; font-size: 15.36px; color: var(--brand-headlines); transition: box-shadow 0.2s, background-color 0.2s; } .woocommerce form textarea.input-text, #review_form textarea { height: 160px; padding: 12px 16px; line-height: 1.6; } .woocommerce form .input-text:hover, .woocommerce form select:hover, #review_form input:hover, #review_form textarea:hover { border: 0; background-color: rgba(136, 136, 137, 0.14); } .woocommerce form .input-text:focus, .woocommerce form select:focus, #review_form input:focus, #review_form textarea:focus { outline: 0; border: 0; background-color: var(--shop-field); box-shadow: inset 0 0 0 1px var(--grey-neutral-48); } .woocommerce-invalid .input-text, .woocommerce-invalid select { box-shadow: inset 0 0 0 1px var(--shop-error); } .form-row { margin: 16.4px 0; gap: 8px; } .form-row label { font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--black-lighter); } .form-row label .required, .form-row label abbr { display: inline; border: 0; color: inherit; text-decoration: none; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: block; } .woocommerce form .select2-container .select2-selection--single .select2-selection__arrow { top: 9px; right: 12px; } /* Buttons in the shop forms: olive pill, 44px (demo size) */ .woocommerce form .button[type="submit"]:not(.coupon .button), .checkout-button, #place_order, button[name="update_cart"] { height: var(--sizing-button-medium); padding: 0 20px; border: 0; border-radius: var(--radius-3xlarge); background: var(--brand-primary); color: #fff !important; font-size: 15.58px; } .checkout-button:hover, #place_order:hover, button[name="update_cart"]:not(:disabled):hover { background: #6e7c6a; } button[name="update_cart"]:disabled { opacity: 0.5; } .checkout-button .button__icon { width: 22px; height: 22px; } /* Single product ------------------------------------------------------------------ */ .product-more { padding-top: var(--space-section); } .product-tabs__nav { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce-tabs .product-tabs__nav li a { display: block; padding: 13px 0; border-bottom: 2px solid transparent; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 16.4px; font-weight: var(--font-weight-medium); letter-spacing: normal; color: var(--black-lighter); transition: border-color 0.3s, color 0.3s; } .woocommerce-tabs .product-tabs__nav li a:hover { color: var(--brand-headlines); } .woocommerce-tabs .product-tabs__nav li.active a { border-color: var(--brand-headlines); color: var(--brand-headlines); } .product-tabs__band { padding: 48px 0 57.6px; background: var(--shop-card); } .product-tabs .woocommerce-Tabs-panel { max-width: none; margin: 0; } .product-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-grid-gutter-2x) 50px; align-items: stretch; } .product-tab__text { display: flex; flex-direction: column; gap: var(--spacing-5); max-width: 540px; } .product-tab__prose h5 { margin: 0 0 16px; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: 19.09px; font-weight: var(--font-weight-medium); letter-spacing: -0.025em; color: var(--brand-headlines); } .product-tab__prose p { margin: 0 0 16px; font-size: 16px; } .product-tab__prose > :last-child { margin-bottom: 0; } .product-tab__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-grid-gutter-2x); margin: 0; padding: 0; list-style: none; } .delivery-option { display: flex; flex-direction: column; font-size: 15.74px; line-height: 1.6; color: var(--black-lighter); } .delivery-option__percent { font-size: 15.58px; font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .delivery-option__bar { position: relative; height: 4px; margin: 9px 0 16px; border-radius: 4px; background: var(--grey-neutral-16); overflow: hidden; } .delivery-option__bar span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--brand-primary); } .delivery-option__title { font-weight: var(--font-weight-bold); color: var(--brand-headlines); } .product-tab__button { align-self: flex-start; } .product-tab__media { align-self: start; aspect-ratio: 589 / 456; overflow: hidden; border-radius: var(--radius-xlarge); background: #f5f5f6; } .product-tab__image { width: 100%; height: 100%; object-fit: cover; } .product-tabs .shop_attributes { width: 100%; max-width: 760px; border-collapse: collapse; } .product-tabs .shop_attributes th, .product-tabs .shop_attributes td { padding: 11.2px 0; border-bottom: 1px solid var(--grey-neutral-16); text-align: left; font-size: 16.4px; } .product-tabs .shop_attributes th { width: 40%; font-size: 14.4px; font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .product-tabs .shop_attributes td p { margin: 0; } .product-tabs #reviews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-grid-gutter-2x) 50px; } .product-tabs #reviews .clear { display: none; } /* Cart ------------------------------------------------------------------------------- */ .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr) minmax(0, 448px); gap: 0 32px; } .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: 32px; } .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form, .woocommerce:has(> .woocommerce-cart-form) > .cross-sells { grid-column: 1; } .cart-collaterals { padding: 25.2px; border-radius: 32px; background: var(--shop-card); } .cart-collaterals .cart_totals { padding: 0; border-radius: 0; background: none; } .cart_totals .shop_table th { font-size: 14.96px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .cart_totals .shop_table td { font-size: 15.58px; font-weight: var(--font-weight-regular); } .cart_totals .shop_table td strong, .cart_totals .shop_table td .amount { font-weight: var(--font-weight-semibold); } .woocommerce-cart-form .cart_item { grid-template-columns: 68px minmax(0, 1fr) auto auto auto; gap: 0 12px; padding: 0 0 16.4px; margin-bottom: 16.4px; } .woocommerce-cart-form .product-thumbnail { grid-column: 1; grid-row: 1; } .woocommerce-cart-form .product-remove { order: 0; grid-column: 1; grid-row: 1; z-index: 1; align-self: center; justify-self: center; } .woocommerce-cart-form .product-remove a { width: 48px; height: 48px; border-radius: 50%; background: rgba(17, 16, 19, 0.5); color: #fff; font-size: 22px; opacity: 0; transition: opacity 0.3s, background-color 0.3s; } .woocommerce-cart-form .product-remove a:hover { background: rgba(17, 16, 19, 0.7); color: #fff; } .woocommerce-cart-form .cart_item:hover .product-remove a, .woocommerce-cart-form .product-remove a:focus-visible { opacity: 1; } .woocommerce-cart-form .product-name { grid-column: 2; font-size: 16.4px; } .woocommerce-cart-form .product-price { grid-column: 3; font-weight: var(--font-weight-regular); } .woocommerce-cart-form .product-quantity { grid-column: 4; } .woocommerce-cart-form .product-subtotal { grid-column: 5; min-width: 70px; font-weight: var(--font-weight-regular); } .woocommerce-cart-form .quantity { height: 36px; border-radius: 22px; } .woocommerce-cart-form .quantity__step { width: 28px; height: 28px; } .woocommerce-cart-form .actions { align-items: flex-end; gap: 16px; padding-top: 16px !important; } .woocommerce-cart-form .coupon { gap: 8px; } .woocommerce form .coupon .input-text { border-radius: 22px; padding-right: 150px; } .coupon .button { right: 4px; color: var(--brand-headlines); } .cross-sells { margin-top: var(--spacing-grid-gutter-3x); } ul.products.products--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cross-sells .product-card__details { min-height: 0; padding: 16px; } .cross-sells .product-card__title { font-size: 16.24px; } .cart-empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: var(--space-section); } .cart-empty-state__title { margin: 0; font-family: var(--font-familiy-title); font-variation-settings: "opsz" 14; font-size: clamp(23.97px, 2.25vw + 4px, 33.29px); font-weight: var(--font-weight-medium); letter-spacing: -0.035em; color: var(--brand-headlines); } .cart-empty-state__text { color: var(--black-lighter); } .cart-empty-state__button { margin-top: var(--spacing-3); } /* Checkout: fields left, "Your order" as one sticky card right, coupon notice below the fields */ .woocommerce:has(> form.checkout) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 448px); column-gap: 32px; align-items: start; } .woocommerce:has(> form.checkout) > * { grid-column: 1; } .woocommerce form.checkout { display: contents; } .checkout-side { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 32px; padding: 25.2px; border-radius: 32px; background: var(--shop-card); } form.checkout .checkout-side #order_review_heading, form.checkout .checkout-side #order_review { margin: 0; padding: 0; border-radius: 0; background: none; } form.checkout .checkout-side #order_review_heading { margin-bottom: 12px; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 11.2px 24px 11.2px 0; font-size: 15.58px; } .woocommerce-checkout-review-order-table thead th, .woocommerce-checkout-review-order-table tfoot th { font-size: 14.96px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .woocommerce-checkout-review-order-table td { font-weight: var(--font-weight-regular); } .woocommerce-checkout-review-order-table .amount { font-weight: var(--font-weight-semibold); } #payment { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--grey-neutral-16); } .wc_payment_methods { gap: 8px; margin-bottom: 16px; } .wc_payment_method label { font-weight: var(--font-weight-regular); font-size: 15.58px; } .payment_box { margin-top: 8px; padding: 0; background: none; font-size: 16.4px; } .woocommerce-privacy-policy-text { margin: 16px 0 0; font-size: 14.4px; } #place_order { margin-top: 16px; } .woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { grid-column: 1; } form.checkout_coupon { padding: 20px; border-radius: 16px; background: var(--shop-card); } /* Thank you: summary card as the checkout card */ .order-received__aside { padding: 25.2px; border-radius: 32px; background: var(--shop-card); } /* Account (Figma DashboardOrders): Dashboard card left, content right; logged out: Login card left, Register right */ .woocommerce:has(> .account-nav), .u-columns.col2-set { display: grid; grid-template-columns: minmax(0, 416fr) minmax(0, 696fr); gap: var(--spacing-grid-gutter-2x); align-items: start; } .account-nav { padding: 28px; border-radius: 24px; background: var(--shop-card); } .account-nav__title { margin: 0 0 20px; font-size: 24.6px; } .woocommerce-MyAccount-navigation a { font-size: 16.4px; line-height: 30px; } .u-columns .u-column1 { padding: 28px; border-radius: 24px; background: var(--shop-card); } .u-columns .u-column2 { padding-top: 28px; } .u-columns .woocommerce-form-login, .u-columns .woocommerce-form-register { max-width: none; padding: 0; border-radius: 0; background: none; } .u-columns .u-column1 .input-text { background-color: #fff; } .u-columns .u-column1 .input-text:hover { background-color: #fff; box-shadow: inset 0 0 0 1px var(--grey-neutral-32); } .woocommerce-form-login__rememberme { font-size: 14.4px; } .woocommerce form.login .form-row:first-child, .woocommerce form.register .form-row:first-child { margin-top: 0; } .lost_password { margin: 16px 0 0; } .woocommerce-orders-table thead th { padding: 0 0 12px; border-bottom: 1px solid var(--grey-neutral-16); font-size: 14.4px; font-weight: var(--font-weight-regular); color: var(--black-lighter); } .woocommerce-orders-table tbody th, .woocommerce-orders-table tbody td { height: 60px; padding: 0 12px 0 0; border-bottom: 1px solid var(--grey-neutral-16); } .woocommerce-orders-table__cell-order-number a { font-size: 16.4px; font-weight: var(--font-weight-semibold); color: var(--brand-headlines); } .woocommerce-orders-table__header-order-actions span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .woocommerce-orders-table__cell-order-actions { text-align: right; } @media (max-width: 1199px) { .woocommerce:has(> form.checkout), .woocommerce:has(> .account-nav), .u-columns.col2-set, .product-tab, .product-tabs #reviews { grid-template-columns: minmax(0, 1fr); } .checkout-side, .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-column: 1; grid-row: auto; position: static; margin-top: var(--spacing-5); } .product-tab__media { aspect-ratio: 4 / 3; } .u-columns .u-column2 { padding-top: 0; } } @media (max-width: 767px) { .woocommerce-cart-form .cart_item { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: none; row-gap: 8px; } .woocommerce-cart-form .product-thumbnail, .woocommerce-cart-form .product-remove { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-cart-form .product-remove a { width: 40px; height: 40px; opacity: 1; } .woocommerce-cart-form .product-name { grid-column: 2 / span 2; grid-row: 1; } .woocommerce-cart-form .product-quantity { grid-column: 2; grid-row: 2; } .woocommerce-cart-form .product-subtotal { grid-column: 3; grid-row: 2; } ul.products.products--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-tab__options { grid-template-columns: 1fr; } } .woocommerce-Tabs-panel .product-tab__options { padding: 0; } .woocommerce-cart-form .coupon label { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal; font-size: 14.4px; font-weight: var(--font-weight-medium); color: var(--black-lighter); } .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: auto; } .woocommerce .u-columns form.login, .woocommerce .u-columns form.register { max-width: none; } .order-received__aside .woocommerce-order-details { padding: 0; border-radius: 0; background: none; } .woocommerce-order-details .shop_table th, .woocommerce-order-details .shop_table td { padding-right: 24px; font-size: 15.58px; } @media (max-width: 1199px) { .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr); } .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-row: auto; } } /* 1.9.2 --------------------------------------------------------------------------------------------- */ /* Tabs (demo): photo with square corners, filling its column */ .product-tab__media { border-radius: 0; background: none; } .product-tab__image { display: block; } /* Cart: fixed rows so "Cart totals" always starts level with the first product (also without notices) */ .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; } .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form { grid-row: 2; } .woocommerce:has(> .woocommerce-cart-form) > .cross-sells { grid-row: 3; } .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-row: 2 / span 2; } /* Checkout: notices above both columns; fields left, "Your order" card right */ .woocommerce:has(> form.checkout) { display: block; } .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 448px); column-gap: 32px; align-items: start; } form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: auto; } form.checkout .checkout-side { grid-column: 2; grid-row: auto; } /* Breadcrumbs under the title on cart and checkout (Figma): less space between title and crumbs */ :is(.woocommerce-cart, .woocommerce-checkout:not(.woocommerce-order-received)) .page-header__inner { padding-bottom: 32px; } :is(.woocommerce-cart, .woocommerce-checkout) .breadcrumbs { min-height: 0; padding-bottom: 32px; } @media (max-width: 1199px) { .woocommerce form.checkout { grid-template-columns: minmax(0, 1fr); } form.checkout .checkout-side { grid-column: 1; } .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-row: 4; } } /* Notices in the look of the cookie notice (1.9.3): pill as wide as the text, icon, soft shadow, round close button; colours stay green (added), grey (info) and red (error). Longer messages wrap in a rounded card. */ .alert, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { gap: var(--spacing-1); width: fit-content; max-width: 100%; padding: 8px 8px 8px 16px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); font-size: 15.58px; line-height: 1.6; } .alert:not(:has(.alert__close)) { padding: 12px 20px 12px 16px; } .alert:has(.alert__list li + li) { border-radius: 28px; align-items: flex-start; } .alert:has(.alert__list li + li) .alert__icon { margin-top: 8px; } .alert__icon { flex: none; } .alert__message, .alert__list { padding-block: 0; } .alert:has(.alert__list li + li) .alert__list { padding-block: 8px; } .alert__close { width: 40px; height: 40px; } .alert__close:hover { background: rgba(136, 136, 137, 0.16); } @media (max-width: 767px) { .alert, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { width: 100%; border-radius: 28px; font-size: 14.76px; } } .alert__close .icon { width: 24px; height: 24px; } /* Notices float where the cookie notice sits: bottom centre, stacked, just above the cookie notice while it is visible. Solid colours (the same tints on white) because they now float over the page. */ .alert-stack { position: fixed; left: 50%; bottom: var(--alert-stack-bottom, 28px); z-index: 71; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; transition: bottom 0.4s var(--ease-out); } .alert-stack:empty { display: none; } .alert-stack > .alert { margin: 0; pointer-events: auto; opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .alert-stack > .alert.is-visible { opacity: 1; transform: none; } .alert-stack > .woocommerce-message { background: rgb(223, 241, 232); } .alert-stack > .woocommerce-info { background: rgb(245, 245, 246); } .alert-stack > .woocommerce-error { background: rgb(251, 232, 236); } .alert-stack > .alert { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .woocommerce-NoticeGroup:not(:has(*)) { display: none; } @media (max-width: 767px) { .alert-stack { left: 16px; right: 16px; bottom: var(--alert-stack-bottom, 16px); width: auto; max-width: none; transform: none; } .alert-stack > .alert { width: 100%; } } /* Floating notices sit outside .woocommerce: colours and inline links on the notice classes themselves */ .alert-stack > .alert--success { color: var(--shop-success); } .alert-stack > .alert--notice { color: var(--black-lighter); } .alert-stack > .alert--error { color: var(--shop-error); } .alert-stack .alert a { color: inherit; font-weight: var(--font-weight-semibold); } .alert-stack .alert .button { display: inline; height: auto; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: var(--font-weight-semibold); } .alert-stack .alert .button:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }