/*
Theme Name: ALARA Shoes
Update URI: false
Template: twentytwentyfive
Description: ALARA ladies shoes — store theme built on Twenty Twenty-Five.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: alara-shoes
*/

/* ---------- small things theme.json cannot do ---------- */
.alara-wordmark a { text-decoration: none; letter-spacing: .32em; padding-left: .32em; }

.alara-head { align-items: center; }

/* size tag: the little hanging tag used on the hero and the size strip */
.alara-tag {
	display: inline-flex; align-items: center; gap: .55em;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 3px 14px 14px 3px; padding: .3em 1em .3em .7em; font-size: .9rem;
}
.alara-tag::before { content: ""; width: .5em; height: .5em; border-radius: 50%; border: 1.5px solid currentColor; }

/* hero drawing */
.alara-hero-art svg { max-width: 440px; margin-left: auto; }

/* category boxes: the end of a shoe box, with the size range printed on the tab */
.alara-boxes { gap: 14px !important; max-width: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.alara-box { position: relative; min-height: 190px; border-radius: 6px; overflow: hidden; transition: transform .25s ease; }
.alara-box:hover { transform: translateY(-3px); }
.alara-box a { color: inherit; text-decoration: none; }
.alara-box a::after { content: ""; position: absolute; inset: 0; }
.alara-box .alara-box-tab {
	position: absolute; top: 0; right: 18px; padding: .25em .7em .35em;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	border-radius: 0 0 6px 6px; font-size: .78rem;
}

/* size guide table */
.alara-sizes table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.alara-sizes th, .alara-sizes td { border: 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: .6em .4em; text-align: center; }
.alara-sizes thead th { font-weight: 500; color: var(--wp--preset--color--accent-4); }
.alara-sizes tbody th { text-align: left; font-weight: 500; }
.alara-sizes .wp-block-table { overflow-x: auto; }

/* promise row */
.alara-promise p { margin: 0; }

/* WhatsApp button */
.alara-wa {
	position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 54px; height: 54px; border-radius: 50%;
	display: grid; place-items: center; background: #1f8f4e; color: #fff; box-shadow: 0 6px 18px rgba(43, 23, 34, .25);
}
.alara-wa svg { width: 28px; height: 28px; fill: currentColor; }
.alara-wa:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 3px; }

/* product grid: calmer cards */
.wc-block-components-product-sale-badge, .wc-block-grid__product-onsale { background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--base) !important; border: 0 !important; border-radius: 99px !important; }
.wp-block-woocommerce-product-image img, .wc-block-components-product-image img { border-radius: 6px; background: var(--wp--preset--color--accent-5); }

/* quieter links where underlines are noise */
.wc-block-grid__product-title, .wc-block-grid__product-link, .wc-block-components-product-name,
.wp-block-post-title a, footer a, .alara-box a { text-decoration: none !important; }
.wc-block-grid__product-title { color: var(--wp--preset--color--contrast); font-weight: 500; }
.wc-block-grid__product-link:hover .wc-block-grid__product-title, footer a:hover { text-decoration: underline !important; }
ins, .wc-block-components-product-price ins { text-decoration: none; }
del { color: var(--wp--preset--color--accent-4); }

@media (max-width: 781px) {
	.alara-hero-art { display: none; }
	.alara-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.alara-box { min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
	.alara-box { transition: none; }
	.alara-box:hover { transform: none; }
}

/* sale badge and product titles in lists */
.onsale, .woocommerce span.onsale, .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--base) !important;
	border: 0 !important; border-radius: 99px !important; font-weight: 500; min-height: 0; line-height: 1; padding: .55em .9em !important;
}
.wc-block-product .wp-block-post-title a, .products-block-post-template .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
/* the "demo" tag is for us, not for customers */
.taxonomy-product_tag, .product_meta .tagged_as { display: none !important; }

/* exchange note under the add-to-cart button */
.alara-exchange { font-size: .9rem; color: var(--wp--preset--color--accent-4); margin-top: .8em; }
.alara-exchange a { color: var(--wp--preset--color--contrast); }

/* colour and size buttons (replace the dropdowns on product pages) */
table.variations td.value { position: relative; }
.alara-hidden-select { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; max-width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
table.variations, table.variations tbody, table.variations tr, table.variations th, table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
table.variations tr { margin-bottom: 1.1em; }
table.variations th.label label { font-weight: 500; font-size: .95rem; }
.alara-chosen { font-weight: 400; color: var(--wp--preset--color--accent-4); }
.alara-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5em; }
.alara-swatch {
	display: inline-flex; align-items: center; gap: .45em; min-width: 3em; justify-content: center;
	padding: .55em .95em; border: 1.5px solid var(--wp--preset--color--accent-6); border-radius: 99px;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s;
}
.alara-swatch:hover { border-color: var(--wp--preset--color--contrast); }
.alara-swatch.is-on { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.alara-swatch:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
.alara-swatch.is-off { color: var(--wp--preset--color--accent-4); background: var(--wp--preset--color--accent-5); cursor: not-allowed; text-decoration: line-through; opacity: .7; }
.alara-swatch.is-off .alara-dot { opacity: .45; }
.alara-dot { width: 1em; height: 1em; border-radius: 50%; border: 1px solid rgba(43, 23, 34, .25); flex: none; }
.alara-swatch.is-on .alara-dot { border-color: var(--wp--preset--color--base); }
table.variations .reset_variations { display: inline-block; margin-top: .4em; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .alara-swatch { transition: none; } }

/* Track your order */
.alara-track { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
.alara-track-form { max-width: 420px; }
.alara-track-form label { display: block; font-weight: 500; margin-bottom: .3em; }
.alara-track-form input { width: 100%; padding: .75em .9em; border: 1.5px solid var(--wp--preset--color--accent-6); border-radius: 8px; font: inherit; background: #fff; }
.alara-track-form input:focus { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 1px; }
.alara-track-error { color: var(--wp--preset--color--accent-1); }
.alara-track-result { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--wp--preset--color--accent-6); }
.alara-track-result h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 .2em; }
.alara-track-meta { color: var(--wp--preset--color--accent-4); margin-top: 0; }
.alara-steps { list-style: none; padding: 0; margin: 1.5em 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: step; }
.alara-steps li { counter-increment: step; padding-top: 2.2em; position: relative; font-size: .92rem; color: var(--wp--preset--color--accent-4); border-top: 4px solid var(--wp--preset--color--accent-6); }
.alara-steps li::before { content: counter(step); position: absolute; top: .6em; left: 0; font-weight: 600; }
.alara-steps li.is-done { border-top-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }
.alara-steps li.is-now { font-weight: 600; }
.alara-track-state.is-bad { color: var(--wp--preset--color--accent-1); }
.alara-cn { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.alara-track-items { padding-left: 1.1em; color: var(--wp--preset--color--accent-4); }
.alara-thanks-track { background: var(--wp--preset--color--accent-5); padding: .9em 1.1em; border-radius: 8px; }