/*
Theme Name: BERQ Commerce
Theme URI: https://berq.studio
Author: BERQ Studio
Description: Custom WooCommerce storefront for BERQ Studio.
Version: 0.1.12
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: berq
*/

@font-face {
    font-family: "Gilroy";
    src: url("assets/fonts/gilroy-light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("assets/fonts/gilroy-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("assets/fonts/gilroy-extra-bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

:root {
    --header-height: 91px;
    --paper: #fff;
    --ink: #11120f;
    --muted: #696a64;
    --line: rgba(17, 18, 15, .18);
    --surface: #f7f7f7;
    --accent: #1648ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Gilroy", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a, summary, select { cursor: pointer; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; height: var(--header-height); display: grid; grid-template-columns: 1fr auto; align-items: start; padding: 20px; background: #fff; }
.wordmark { width: 112px; display: block; line-height: 0; }
.wordmark img { width: 100%; display: block; }
.cart-link { font-size: 14px; font-weight: 400; line-height: 1.25; transition: opacity .2s; }
.cart-link:hover { opacity: .5; }
.cart-link { min-width: 48px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cart-icon { width: 18px; height: 18px; display: block; }

.copyright-footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 20px; background: #fff; font-size: 11px; font-weight: 400; }
.copyright-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.shop-page, .woocommerce-page-shell { min-height: 100vh; padding-top: var(--header-height); }
.shop-catalog { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: stretch; }
.shop-category-menu { min-width: 0; min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 51px 26px 30px; overflow: hidden; background: #fff; white-space: nowrap; }
.shop-category-menu a { position: relative; color: rgba(0, 0, 0, .58); font-size: 10px; font-weight: 300; line-height: 15px; letter-spacing: .02em; text-transform: uppercase; }
.shop-category-menu a:hover { color: #000; }
.shop-category-menu a[aria-current="page"] { color: #000; font-weight: 700; }
.shop-category-menu a[aria-current="page"]::before { position: absolute; top: 50%; left: -10px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; transform: translateY(-50%); }
.shop-results { min-width: 0; }
.shop-results .woocommerce-notices-wrapper:empty, .shop-results .woocommerce-result-count, .shop-results .woocommerce-ordering { display: none; }
.shop-results ul.products { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0 2px 100px 0; list-style: none; }
.shop-results ul.products::before, .shop-results ul.products::after { display: none; }
.shop-results ul.products li.product { min-width: 0; width: 100% !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0; background: #fff; }
.shop-card-link { display: block; }
.shop-card-image { position: relative; aspect-ratio: 5 / 7; display: grid; place-items: center; overflow: hidden; background: var(--surface); }
.shop-card-image img { width: 100%; height: 100%; display: block; margin: 0 !important; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.shop-card-link:hover .shop-card-image img, .shop-card-link:focus-visible .shop-card-image img { transform: scale(1.02); }
.stock-label { position: absolute; right: 10px; bottom: 10px; padding: 5px 7px; background: #111; color: #fff; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.shop-card-copy { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 4px 12px; padding: 20px; font-size: 11px; line-height: 1.25; }
.shop-card-copy strong { min-width: 0; overflow: hidden; font-weight: 300; text-overflow: ellipsis; white-space: nowrap; }
.shop-card-copy > span { color: var(--muted); text-align: right; }
.shop-card-price { grid-column: 1 / -1; justify-self: start; }
.shop-card-price del { opacity: .45; }
.shop-empty { min-height: calc(100svh - var(--header-height)); display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.berq-product { padding-top: var(--header-height); }
.product-top { min-height: calc(100svh - var(--header-height)); display: grid; grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr); }
.product-gallery { position: relative; min-width: 0; min-height: calc(100svh - var(--header-height)); overflow: hidden; background: #f1f1ef; }
.product-gallery .onsale { z-index: 2; top: 14px; right: auto; left: 14px; min-width: 0; min-height: 0; margin: 0; padding: 4px 7px; border-radius: 0; background: #111; color: #fff; font-size: 9px; font-weight: 400; line-height: 1.4; text-transform: uppercase; }
.product-gallery .woocommerce-product-gallery { width: 100% !important; height: calc(100svh - var(--header-height)); float: none !important; margin: 0 !important; }
.product-gallery .woocommerce-product-gallery__wrapper, .product-gallery .woocommerce-product-gallery__image, .product-gallery .woocommerce-product-gallery__image a { height: 100%; }
.product-gallery .woocommerce-product-gallery__image > a > img:not(.zoomImg) { width: 100%; height: 100%; display: block; object-fit: contain; }
.product-gallery .woocommerce-product-gallery__image .zoomImg { max-width: none !important; max-height: none !important; background: #f1f1ef; object-fit: initial; }
.product-gallery a.woocommerce-product-gallery__trigger { position: absolute; z-index: 3; top: 14px; right: 14px; width: 30px; height: 30px; display: block; border: 0; border-radius: 0; background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311120f' stroke-width='1.5'%3E%3Cpath d='M9 4H4v5M15 4h5v5M20 15v5h-5M4 15v5h5'/%3E%3C/svg%3E") !important; opacity: .75; transition: opacity .2s; }
.product-gallery .woocommerce-product-gallery__trigger:hover { opacity: 1; }
.product-gallery .woocommerce-product-gallery__trigger > span[aria-hidden="true"] { display: none; }
.product-gallery .woocommerce-product-gallery__trigger::before, .product-gallery .woocommerce-product-gallery__trigger::after { display: none !important; }
.product-gallery .flex-viewport { height: 100% !important; }
.product-gallery .flex-control-thumbs { position: absolute; z-index: 2; bottom: 14px; left: 14px; display: flex; gap: 6px; margin: 0 !important; padding: 0; list-style: none; }
.product-gallery .flex-control-thumbs li { width: 44px !important; height: 56px; float: none !important; background: #fff; }
.product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.product-panel { min-width: 0; min-height: calc(100svh - var(--header-height)); display: flex; padding: 30px clamp(28px, 3vw, 56px) 36px; }
.product-summary { width: min(100%, 560px); align-self: center; }
.product-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; margin-bottom: 30px; }
.product-heading h1 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: .01em; text-transform: uppercase; }
.product-price { font-size: 13px; line-height: 1.4; white-space: nowrap; }
.product-price p { margin: 0; }
.product-description { max-width: 470px; margin-bottom: 30px; color: #575853; font-size: 15px; line-height: 1.55; }
.product-description p { margin: 0 0 1em; }
.product-purchase { margin-bottom: 34px; }
.product-purchase form.cart { margin: 0; }
.product-purchase .variations { width: 100%; margin: 0 0 15px; border-collapse: collapse; }
.product-purchase .variations th, .product-purchase .variations td { display: block; padding: 0; text-align: left; }
.product-purchase .variations th { margin-bottom: 8px; font-size: 11px; font-weight: 400; text-transform: uppercase; }
.product-purchase select { width: 100%; min-height: 44px; padding: 0 38px 0 12px; border: 1px solid #d8d8d5; border-radius: 0; background: #fff; font-size: 13px; }
.product-purchase .reset_variations { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.product-purchase .woocommerce-variation-price { margin-bottom: 12px; font-size: 13px; }
.product-purchase .quantity { display: none !important; }
.product-purchase .single_add_to_cart_button { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 0; padding: 12px 14px; background: #111; color: #fff; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; transition: opacity .2s; }
.product-purchase .single_add_to_cart_button::after { content: "+"; font-size: 16px; line-height: 1; }
.product-purchase .single_add_to_cart_button:hover { background: #111; opacity: .72; }
.product-purchase .single_add_to_cart_button.disabled { cursor: not-allowed; opacity: .35; }
.product-disclosure { border-bottom: 1px solid #dededb; }
.product-disclosure:first-of-type { border-top: 1px solid #dededb; }
.product-disclosure summary { display: flex; justify-content: space-between; padding: 13px 0; list-style: none; font-size: 11px; text-transform: uppercase; }
.product-disclosure summary::-webkit-details-marker { display: none; }
.product-disclosure summary span { transition: transform .2s; }
.product-disclosure[open] summary span { transform: rotate(45deg); }
.product-disclosure > div { max-width: 470px; padding: 0 0 17px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.product-disclosure p { margin: 0 0 1em; }
.product-help { margin-top: 38px; }
.product-help h2 { margin: 0 0 8px; font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; }
.product-help a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.berq-product > .related, .berq-product > .upsells { padding: 90px 5vw 110px; }
.berq-product > .related > h2, .berq-product > .upsells > h2 { margin: 0 0 30px; font-size: 15px; font-weight: 400; }
.berq-product > .related ul.products, .berq-product > .upsells ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.berq-product > .related li.product, .berq-product > .upsells li.product { min-width: 0; width: 100% !important; float: none !important; margin: 0 !important; }

.woocommerce-page-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 100px; }
.woocommerce-page-shell > .woocommerce { padding-top: 55px; }
.woocommerce-notices-wrapper { width: 100%; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border: 0; border-top: 1px solid var(--ink); padding: 15px 0 15px 30px; background: transparent; font-size: 13px; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 15px; left: 0; color: var(--ink); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button { border: 0 !important; border-radius: 0 !important; padding: 13px 16px !important; background: #111 !important; color: #fff !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .04em; text-transform: uppercase; }
.woocommerce table.shop_table { border: 0; border-collapse: collapse; border-radius: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid var(--line); padding: 15px 10px; }
.woocommerce-cart-form .product-thumbnail img { width: 90px; }
.cart_totals h2, .woocommerce-checkout h3 { font-size: 16px; font-weight: 500; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { min-height: 44px; border: 1px solid #c9c9c5; border-radius: 0; padding: 9px 11px; background: #fff; }
.woocommerce form .form-row label { font-size: 12px; }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { border-radius: 0; background: #f4f4f1; }
.wc-block-components-address-form .wc-block-components-address-form__country { margin-top: 12px !important; }

.standard-page { min-height: 80vh; padding: calc(var(--header-height) + 60px) 5vw 100px; }

.berq-empty-cart { max-width: 1320px; margin: 0 auto; }
.berq-empty-cart-body { min-height: 52svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px 72px; text-align: center; }
.berq-empty-cart-body h2 { margin: 0; font-size: clamp(32px, 5vw, 64px); font-weight: 300; line-height: 1.1; letter-spacing: -.035em; }
.berq-empty-cart-cta { margin-top: 32px; width: min(100%, 300px); min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 18px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; transition: background .2s; }
.berq-empty-cart-cta:hover { background: #353630; color: #fff; }
.berq-empty-cart-cta span { font-size: 18px; line-height: 1; }
@media (max-width: 768px) {
    .berq-empty-cart-body { min-height: 50svh; padding: 48px 0; }
}

@media (max-width: 768px) {
    :root { --header-height: 53px; }
    .site-header { height: var(--header-height); grid-template-columns: 1fr auto; align-items: center; padding: 0 14px; }
    .wordmark { width: 80px; }
    .cart-link { min-width: 52px; font-size: 12px; }
    .copyright-footer { padding: 14px; font-size: 10px; }

    .shop-catalog { display: block; }
    .shop-category-menu { width: 100%; min-height: 0; flex-direction: row; gap: 22px; padding: 20px 14px 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .shop-category-menu::-webkit-scrollbar { display: none; }
    .shop-category-menu a { flex: 0 0 auto; }
    .shop-category-menu a[aria-current="page"]::before { display: none; }
    .shop-results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 56px; }
    .shop-card-copy { min-height: 48px; display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 12px; font-size: 11px; }
    .shop-card-copy strong { white-space: normal; overflow-wrap: anywhere; }
    .shop-card-copy > .shop-card-price { text-align: left; }
    .shop-card-copy > span:not(.shop-card-price) { display: none; }
    .shop-card-price { font-size: 10px; }

    .product-top { min-height: 0; display: block; }
    .berq-product .shop-category-menu { display: none; }
    .product-gallery { min-height: 66svh; }
    .product-gallery .woocommerce-product-gallery { height: 66svh; }
    .product-gallery .flex-control-thumbs { right: 12px; bottom: 10px; left: auto; }
    .product-gallery .flex-control-thumbs li { width: 34px !important; height: 44px; }
    .product-panel { min-height: 0; padding: 28px 16px 45px; }
    .product-summary { width: 100%; }
    .product-heading { margin-bottom: 24px; }
    .product-heading h1 { font-size: 17px; }
    .product-description { font-size: 14px; }
    .product-disclosure > div { font-size: 13px; }
    .berq-product > .related, .berq-product > .upsells { padding: 65px 12px 80px; overflow: hidden; }
    .berq-product > .related ul.products, .berq-product > .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .woocommerce-page-shell { width: calc(100% - 28px); padding-bottom: 70px; }
    .woocommerce-page-shell > .woocommerce { padding-top: 35px; }
    .woocommerce table.shop_table_responsive tr td::before { font-weight: 500; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* WooCommerce clearfix pseudo-elements must not become product grid cells. */
.berq-product > .related ul.products::before, .berq-product > .related ul.products::after, .berq-product > .upsells ul.products::before, .berq-product > .upsells ul.products::after { display: none; }
