/*
 * Styles written for this theme, as opposed to those carried over from the
 * original build. Loaded last.
 */

/* Footer: contact details (edited under Site Settings). */
.footer-contact {
	font-size: 12px;
}

.footer-contact p {
	margin: 0 0 12px;
}

.footer-contact p:last-child {
	margin-bottom: 0;
}

.footer-contact a {
	color: inherit;
	text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus {
	text-decoration: underline;
}

/*
 * Main menu below 1024px (where it becomes the slide-in menu): hide the column
 * headings so each dropdown is a flat list of links.
 */
@media (max-width: 1023px) {
	.site-menu .breakdance-dropdown-column__title {
		display: none;
	}
}

/* Filter drawer: scroll when the filters are taller than the screen. dvh keeps the
   bottom clear of mobile browser toolbars. */
.shop-sidebar{overflow-y:auto;overscroll-behavior:contain;height:100vh;height:100dvh}

/* Brand pages (template-parts/page-brand.php): the intro as title, lead and text beside the
   brand photos, then the H3 sections as panels on a shaded band, lists as ticked checklists. */
.brand-intro__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.brand-intro__grid--text{grid-template-columns:minmax(0,1fr);max-width:760px}
.brand-intro__title{margin:8px 0 20px}
.brand-intro__lead p{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--bde-headings-color);margin:0 0 20px}
.brand-intro__body p{max-width:62ch}
.brand-intro__body p:last-child{margin-bottom:0}
.brand-intro__photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.brand-intro__photos img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--small-corner)}
.brand-intro__photos img:nth-child(even){transform:translateY(24px)}
.brand-intro__photos--1,.brand-intro__photos--3{grid-template-columns:repeat(var(--n,2),1fr)}
.brand-intro__photos--1{--n:1}
.brand-points .inner{padding:clamp(28px,4vw,48px)}
.brand-points__grid{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.brand-points__grid--2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.brand-points__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.brand-points__panel>h3:first-child,.brand-points__panel>h2:first-child{margin-top:0}
.brand-points__panel p:last-child{margin-bottom:0}
.brand-points__panel ul{list-style:none;padding:0;margin:0;display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.brand-points__panel li{position:relative;padding-left:30px;margin:0}
.brand-points__panel li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:767px){.brand-intro__grid{grid-template-columns:minmax(0,1fr)}.brand-intro__photos{grid-template-columns:repeat(4,1fr);gap:8px}.brand-intro__photos img:nth-child(even){transform:none}}

/* Brand pages: the brand's products under the page content, sized like the home page bestsellers. */
.breakdance .brand-products .bde-wooproductslist{--bde-woo-responsive__stack:column;--bde-woo-responsive__width:100%;--bde-woo-responsive__max-width:100%}
.breakdance .brand-products ul.products li.product .woocommerce-loop-product__title{font-size:18px}
.breakdance .brand-products ul.products li.product .price,.breakdance .brand-products ul.products li.product .price .woocommerce-Price-amount bdi{font-size:16px}
.breakdance .brand-products ul.products li.product .custom-area.custom-area-1{order:20}
@media (max-width:767px){.breakdance .brand-products ul.products li.product .woocommerce-loop-product__title{font-size:16px}.breakdance .brand-products ul.products li.product .price,.breakdance .brand-products ul.products li.product .price .woocommerce-Price-amount bdi{font-size:14px}}
.brand-products__more{display:flex;justify-content:center;margin-top:var(--default-gap)}

/* Shop listings: "Load more products" in place of page numbers. */
.load-more{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin:var(--default-gap) 0}
.load-more--previous{margin-top:0}
.load-more__count{margin:0;font-size:14px;opacity:.75}
.load-more__button.is-loading{opacity:.6;pointer-events:none;cursor:progress}

/* "Order a sample" (EFC Products plugin) beside Add to cart: WooCommerce's form is
   capped at 360px, which only fits the quantity and Add to cart. */
.breakdance-woocommerce div.product form.cart:has(.efc-sample-link){max-width:540px}
.efc-sample-link{white-space:nowrap}
.efc-sample-link[hidden]{display:none!important}

/* Contact form reply ("Your message has been received!"): the full width of the form, styled
   like the site's notices, instead of shrinking to its narrowest in the form's grid. */
.breakdance-form .js-contact-form-message{grid-column:1/-1;justify-self:stretch;width:auto;box-sizing:border-box;padding:14px 18px;font-size:16px;line-height:1.5;color:var(--bde-body-text-color);background:var(--beige-smoke);border-left:3px solid var(--action);border-radius:var(--small-corner)}
.breakdance-form .js-contact-form-message.breakdance-form-message--error{background:#fdf3f2;border-left-color:#b3261e;color:#8c1d18}
.breakdance-form .js-contact-form-message[hidden]{display:none}

/* WooCommerce notices (shown when the page reloads, e.g. without JavaScript): calm and on-brand
   instead of the grey bar. */
.breakdance .woocommerce-message,.breakdance .woocommerce-info{display:flex;align-items:center;gap:12px;background:var(--beige-smoke)!important;border:0!important;border-left:3px solid var(--action)!important;border-radius:var(--small-corner);color:var(--bde-body-text-color)!important;font-weight:400}
.breakdance .woocommerce-message a.button,.breakdance .woocommerce-message .wc-forward{margin-left:auto;color:var(--action)!important;font-weight:500}

/* Product gallery: the window is fixed at 50vh (global-settings.css), so each photo now fills
   it instead of hanging from the top and losing its lower half. Close-ups stay centred; room
   views (marked by inc/woocommerce.php) are framed towards the bottom, where the floor is. */
.breakdance-woocommerce .flex-viewport .woocommerce-product-gallery__image img{height:50vh;object-fit:cover;object-position:50% 50%}
.breakdance-woocommerce .flex-viewport .woocommerce-product-gallery__image.efc-room-view img{object-position:50% 85%}
/* Shop cards: the room view shown on hover is framed the same way. */
.bde-woo-product-image__hover-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 85%}

/* Product cards: each product sits in its own white box on the pale page, with a square image
   area so rows line up. Floors fill the square; accessory packshots (.efc-packshot, from
   woocommerce/content-product.php) are shown whole with a little air around them. Titles take
   up to three lines with room reserved for two, so prices line up, and the button sits at the
   foot of every card whatever the title length. */
.breakdance-woocommerce ul.products li.product{background:#fff;border:1px solid var(--beige);border-radius:var(--small-corner);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.breakdance-woocommerce ul.products li.product:hover{border-color:var(--dark-beige);box-shadow:0 6px 18px rgba(63,43,30,.06)}
.breakdance-woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{flex:1;padding-bottom:18px}
.breakdance-woocommerce ul.products li.product .bde-woo-product-image{aspect-ratio:1/1;overflow:hidden;background:#fff;margin-bottom:16px}
.breakdance-woocommerce ul.products li.product .bde-woo-product-image>img{display:block;width:100%;height:100%;object-fit:cover}
.breakdance-woocommerce ul.products li.product.efc-packshot .bde-woo-product-image>img{object-fit:contain;padding:8%;box-sizing:border-box}
.breakdance-woocommerce ul.products li.product .woocommerce-loop-product__title,.breakdance-woocommerce ul.products li.product .price{padding:0 18px}
.breakdance-woocommerce ul.products li.product .woocommerce-loop-product__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:2.6em}
.breakdance-woocommerce ul.products li.product .custom-area.custom-area-1{margin-top:auto;padding:0 18px}
.breakdance-woocommerce ul.products li.product .bde-woo-product-footer:empty{display:none}
/* Title, price and button centred in the box. */
.breakdance-woocommerce ul.products li.product .woocommerce-loop-product__title{text-align:center}
.breakdance-woocommerce ul.products li.product .price{justify-content:center;text-align:center}
.breakdance-woocommerce ul.products li.product .custom-area.custom-area-1{text-align:center}
.breakdance-woocommerce ul.products li.product .view-product-button{margin-inline:auto}
@media (max-width:767px){.breakdance-woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{padding-bottom:14px}.breakdance-woocommerce ul.products li.product .woocommerce-loop-product__title,.breakdance-woocommerce ul.products li.product .price,.breakdance-woocommerce ul.products li.product .custom-area.custom-area-1{padding:0 12px}.breakdance-woocommerce ul.products li.product .bde-woo-product-image{margin-bottom:12px}}

/* Home page category tiles (inc/home-page.php): the photo comes from the tile's settings,
   and on a computer the row holds as many tiles as there are (three per row for 5–6). */
.efc-tile{background-image:linear-gradient(0deg,rgba(38,25,17,.92) 0%,rgba(38,25,17,0) 80%),var(--efc-tile-photo,none);background-size:auto,cover;background-position:0 0,0 0;background-color:var(--brown-dark)}
/* The small white arrow after "view range" (the old tiles had it on numbered classes). */
.breakdance .efc-tiles .view-range-icon .bde-icon-icon.breakdance-icon-atom{font-size:12px}
.breakdance .efc-tiles .view-range-icon .bde-icon-icon.breakdance-icon-atom svg{fill:#fff}
@media (min-width:1120px){.featured-categories.efc-tiles{grid-template-columns:repeat(var(--efc-tile-cols,4),1fr)}}

/* Catalogue mode (inc/catalogue-mode.php): no Add to cart, quantity box or header basket.
   The quantity box stays in the page, hidden, for the pack calculator's estimate. */
.efc-catalogue .single_add_to_cart_button,.efc-catalogue form.cart .quantity,.efc-catalogue .site-mini-cart{display:none!important}
.efc-catalogue-note{flex:1 0 100%;margin:4px 0 0;font-size:14px;color:var(--grey-medium)}