/*
 * Zahra Collective: the store (WooCommerce) and the Privacy Centre's tables.
 * WooCommerce's classic stylesheets are switched off (inc/store.php), so everything the store
 * needs is here, in the five colours and three typefaces. Section blocks keep their own styles.
 */

/* The bar shop managers see while the store is hidden. */
.store-preview { background: var(--gold); color: var(--plum); font-size: 15px; line-height: 1.5; }
.store-preview p { padding: 10px 0; }
.store-preview a { color: var(--plum); font-weight: 700; }

/* WooCommerce notices (added to basket, errors). */
.store-notices .woocommerce-notices-wrapper:empty { display: none; }
.store-notices .woocommerce-notices-wrapper { padding-top: 24px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 16px; padding: 16px 20px; border-radius: 18px; background: var(--plum-7); border: 1px solid var(--line); color: var(--plum); font-size: 16px; font-weight: 600; list-style: none; }
.woocommerce-error { border: 2px solid var(--plum); background: var(--white); }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--plum); color: var(--white); font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: rgba(86, 50, 57, .86); color: var(--white); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Prices. */
.price del, .pcard__price del { color: var(--brown); opacity: .8; font-weight: 400; margin-right: 6px; }
.price ins, .pcard__price ins { text-decoration: none; }

/* Product cards (the shop grid). */
.store-products__grid, ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.pcard { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--white); }
.pcard[hidden] { display: none; }
.pcard__media { display: block; height: 260px; overflow: hidden; background: var(--plum-7); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.pcard__tag { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); line-height: 1.45; }
.pcard--aa .pcard__tag, .pmini--aa .pcard__tag { color: var(--brown); }
.pcard__name { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--plum); }
.pcard__name a { text-decoration: none; color: inherit; }
.pcard__name a:hover { text-decoration: underline; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; }
.pcard { position: relative; }
.pcard__price { font-size: 17px; font-weight: 700; color: var(--plum); }
.pcard__draft { align-self: flex-start; }
.pcard__foot { margin-top: auto; padding-top: 8px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcard__cta { width: 100%; }
.pcard__foot .added_to_cart { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--plum); }
.pcard__cta.loading { opacity: .6; }
.pcard__cta.added::after { content: " \2713"; }
@media (prefers-reduced-motion: no-preference) {
	.pcard { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
	.pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(86, 50, 57, .14); }
	.pcard__media img { transition: transform .8s var(--ease); }
	.pcard:hover .pcard__media img { transform: scale(1.05); }
}

/* The striped tile shown until a product has a photo. */
.ptile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 220px; background-color: rgba(249, 192, 73, .3); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 16px); color: var(--plum); font-size: 15px; font-weight: 600; }
.ptile--aa { background-color: var(--plum); color: var(--white); }

/* Compact cards: "You might also like". */
.pdp-also__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.pmini a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--white); color: var(--plum); text-decoration: none; }
.pmini a:hover { color: var(--plum); }
.pmini__media { display: block; height: 220px; overflow: hidden; }
.pmini__media img { width: 100%; height: 100%; object-fit: cover; }
.pmini__body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.pmini__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.pmini__price { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
	.pmini a { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
	.pmini a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(86, 50, 57, .14); }
}

/* Product page. */
.pdp { padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 96px); }
.pdp__crumbs { margin-bottom: 28px; }
.pdp__grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: flex-start; }
.pdp__gallery { flex: 1.1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pdp__main { display: grid; gap: 14px; }
.pdp__slide { height: clamp(360px, 42vw, 560px); border-radius: var(--r-photo); overflow: hidden; }
.pdp__slide .ptile { min-height: 100%; font-size: 17px; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pdp__thumb { height: 110px; padding: 0; border-radius: 14px; border: 2.5px solid transparent; background: var(--plum-7); overflow: hidden; cursor: pointer; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--plum); }
.pdp__buy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pdp__coll { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); text-decoration: none; }
.pdp__coll img { height: 36px; width: auto; }
.pdp__coll:hover { text-decoration: underline; }
.pdp__draft, .pdp__buy > .pcard__draft { align-self: flex-start; }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pdp__amount { font-size: 28px; font-weight: 700; color: var(--plum); }
.pdp__note { font-size: 15px; }
.pdp__intro { font-size: 19px; }
.pdp__intro p + p { margin-top: .8em; }
.pdp__promises { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 16px; }
.pdp__promises li { display: flex; gap: 10px; align-items: center; }
.pdp__promises svg { flex: none; color: var(--plum); }
.pdp__details { border-top: 1px solid var(--line); }
.pdp__details details { border-bottom: 1px solid var(--line); }
.pdp__details summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; font-family: var(--serif); font-size: 22px; color: var(--plum); list-style: none; cursor: pointer; }
.pdp__details summary::-webkit-details-marker { display: none; }
.pdp__details summary svg { flex: none; }
.pdp__details details[open] summary svg { transform: rotate(180deg); }
.pdp__details summary:focus-visible { outline-offset: 2px; }
.pdp__panel { padding-bottom: 18px; font-size: 17px; }
@media (prefers-reduced-motion: no-preference) { .pdp__details summary svg { transition: transform .3s var(--ease); } }
@media (max-width: 600px) {
	.pdp__thumb { height: 72px; }
	.pdp__slide { height: auto; aspect-ratio: 4 / 5; }
}

/* The add to basket forms (simple, variable, grouped, external). */
.pdp__form form.cart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.pdp__form .variations_form { display: block; }
.pdp__form table.variations { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pdp__form table.variations tr { display: grid; gap: 6px; margin-bottom: 12px; }
.pdp__form table.variations th, .pdp__form table.variations td { padding: 0; text-align: left; }
.pdp__form table.variations label { font-size: 16px; font-weight: 600; color: var(--plum); }
.pdp__form select { width: 100%; min-height: 50px; padding: 0 44px 0 14px; border-radius: 12px; border: 1.5px solid var(--grey); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23563239' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; color: var(--plum); font-size: 17px; appearance: none; }
.pdp__form select:focus, .quantity input.qty:focus { border-color: var(--plum); outline: none; box-shadow: 0 0 0 4px rgba(249, 192, 73, .45); }
.pdp__form .reset_variations { display: inline-flex; min-height: 44px; align-items: center; font-size: 15px; }
.pdp__form .single_variation_wrap { display: grid; gap: 14px; }
.pdp__form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.pdp__form .woocommerce-variation-price .price { font-size: 22px; font-weight: 700; color: var(--plum); }
.pdp__form .stock { font-size: 16px; font-weight: 600; color: var(--plum); }
.pdp__form .group_table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pdp__form .group_table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.single_add_to_cart_button { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--plum); background: var(--plum); color: var(--white); font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.single_add_to_cart_button:hover { background: rgba(86, 50, 57, .86); border-color: rgba(86, 50, 57, .86); }
.single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled { opacity: .55; cursor: not-allowed; }
.pdp__form .cart[action^="http"] .single_add_to_cart_button { flex: 0 1 auto; }

/* Quantity: label above a pill with minus and plus. */
.quantity { display: flex; flex-direction: column; gap: 6px; }
.quantity--fixed { display: none; }
.qty-label { font-size: 16px; font-weight: 600; color: var(--plum); }
.qty-pill { display: flex; align-items: center; min-height: 54px; border: 1.5px solid var(--grey); border-radius: 999px; background: var(--white); }
.quantity input.qty { width: 72px; min-height: 50px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--plum); font-size: 17px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.quantity.is-js input.qty { width: 44px; padding: 0; }
.quantity input.qty::-webkit-inner-spin-button, .quantity.is-js input.qty::-webkit-outer-spin-button { margin: 0; }
.quantity.is-js input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-step { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 50px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--plum); cursor: pointer; }
.qty-step:hover { background: var(--plum-7); }

/* Tables in the Privacy Centre: they scroll sideways on small screens, never the page. */
.ptable { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--white); }
.ptable:focus-visible { outline-offset: 2px; }
.ptable table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.privacy-ck .ptable table { min-width: 620px; }
.ptable th, .ptable td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.ptable thead th { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); background: var(--cream); }
.ptable tbody th { font-weight: 600; color: var(--plum); }

/* Basket, checkout and account pages (WooCommerce blocks), lightly in the site's style. */
.woocommerce-cart .wrap--text, .woocommerce-checkout .wrap--text, .woocommerce-account .wrap--text { max-width: var(--max); }
.wc-block-cart, .wc-block-checkout, .woocommerce-account .entry { font-family: var(--sans); color: var(--brown); }
.wc-block-cart h2, .wc-block-checkout h2, .wc-block-components-title, .wc-block-components-checkout-step__title { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--plum); }
.wc-block-components-product-name, .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item { color: var(--plum); }
.wc-block-components-button:not(.is-link), .woocommerce-account .button, .woocommerce-account button[type="submit"] { min-height: 52px; padding: 0 28px; border-radius: 999px !important; border: 1.5px solid var(--plum) !important; background: var(--plum) !important; color: var(--white) !important; font-family: var(--caps) !important; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.wc-block-components-button:not(.is-link):hover, .woocommerce-account .button:hover { background: rgba(86, 50, 57, .86) !important; border-color: rgba(86, 50, 57, .86) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input, .wc-blocks-components-select__select, .woocommerce-account input.input-text { border: 1.5px solid var(--grey) !important; border-radius: 12px !important; color: var(--plum) !important; }
.wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus, .woocommerce-account input.input-text:focus { border-color: var(--plum) !important; box-shadow: 0 0 0 4px rgba(249, 192, 73, .45) !important; outline: none; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--plum); border-color: var(--plum); }
.wc-block-components-radio-control__input:checked { border-color: var(--plum); }
.wc-block-components-radio-control__input:checked::before { background: var(--plum); }
.wc-block-cart a, .wc-block-checkout a { color: var(--plum); }
.woocommerce-account .woocommerce { display: grid; gap: 32px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--plum); border-color: var(--plum); color: var(--white); }
.woocommerce-account form .form-row { display: grid; gap: 6px; margin: 0 0 16px; }
.woocommerce-account input.input-text { width: 100%; min-height: 52px; padding: 0 16px; font-size: 17px; }
.woocommerce-account table { width: 100%; border-collapse: collapse; font-size: 16px; }
.woocommerce-account th, .woocommerce-account td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }