/* ==========================================================================
   drope — layout, motion & component styles
   Logical properties used throughout for RTL-readiness.
   ========================================================================== */

:root {
	--drope-dur-fast: 160ms;
	--drope-dur-base: 320ms;
	--drope-dur-slow: 600ms;
	--drope-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* Focus visibility (WCAG 2.2) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--lime);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.drope-header { padding-block: 1rem; border-block-end: 1px solid var(--wp--preset--color--line); }
.drope-header__bar { align-items: center; gap: 1.5rem; }
.drope-logo a { text-decoration: none; }
.drope-header__actions { align-items: center; gap: 1rem; flex-wrap: nowrap; }
.drope-header__actions > * { flex-shrink: 0; }
.drope-search { min-width: 0; flex-shrink: 1; }
.drope-search .wp-block-search__inside-wrapper { min-width: 0; }
.drope-search input[type="search"] { min-width: 0; width: 100%; }
@media (max-width: 600px) {
	.drope-search { max-width: 34vw; }
	.drope-search .wp-block-search__button { padding-inline: 0.5rem; }
}
.drope-nav .wp-block-navigation-item a { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.drope-nav .wp-block-navigation-item a:hover { color: var(--wp--preset--color--lime); }
.drope-search input[type="search"] { border: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--body); }
.drope-wishlist-link { position: relative; display: inline-flex; color: currentColor; text-decoration: none; }
.drope-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -8px; background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); font-size: 10px; line-height: 1; border-radius: 999px; padding: 3px 5px; font-family: var(--wp--preset--font-family--mono); }

/* ---------- Hero ---------- */
.drope-hero { padding-block: clamp(2rem, 4vw, 5rem); }
.drope-hero__grid { gap: clamp(2rem, 4vw, 4rem); align-items: stretch; }
.drope-hero__copy { position: relative; flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.drope-eyebrow { color: var(--wp--preset--color--lime); letter-spacing: 0.12em; }
.drope-hero__headline { margin: 0; }
.drope-hero__accent { color: var(--wp--preset--color--lime); }
.drope-hero__sub { max-width: 32ch; color: var(--wp--preset--color--soft-grey); }
.drope-hero__frame { flex: 1 1 50%; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, #1c1c1c, #1c1c1c 2px, #161616 2px, #161616 4px); border: 1px dashed var(--wp--preset--color--line-dark); display: flex; align-items: flex-end; padding: 1rem; opacity: 0.9; animation: drope-fade-up var(--drope-dur-slow) var(--drope-ease) both; }
.drope-hero__frame-label { color: var(--wp--preset--color--soft-grey); letter-spacing: 0.08em; margin: 0; }

@keyframes drope-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 0.9; transform: translateY(0); } }

/* ---------- Ticker ---------- */
.drope-ticker { overflow: hidden; background: var(--wp--preset--color--lime); border-block: 1px solid var(--wp--preset--color--graphite); padding-block: 0.5rem; }
.drope-ticker__track { display: flex; gap: 2rem; width: max-content; white-space: nowrap; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; animation: drope-ticker 24s linear infinite; }
@keyframes drope-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.drope-ticker:hover .drope-ticker__track { animation-play-state: paused; }

/* ---------- Sections ---------- */
.drope-section { padding-block: var(--wp--custom--spacing--section, clamp(3rem, 2rem + 4vw, 7rem)); }

/* ---------- Product rows / grids ---------- */
.drope-product-row .wc-block-product-template,
.drope-product-row ul.products,
.drope-product-grid .wc-block-product-template,
.drope-product-grid ul.products {
	display: flex;
	gap: 1.5rem;
}
.drope-product-row .wc-block-product-template { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.drope-product-row .wc-block-product-template > * { flex: 0 0 auto; width: min(70vw, 300px); scroll-snap-align: start; }
.drope-product-grid .wc-block-product-template { flex-wrap: wrap; }
.drope-product-grid .wc-block-product-template > * { flex: 1 1 calc(25% - 1.5rem); min-width: 220px; }

.wc-block-product-template .wc-block-product,
.wp-block-post-template > li {
	position: relative;
}
.wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--wp--preset--color--line); }
.wc-block-components-product-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--drope-dur-base) var(--drope-ease), transform var(--drope-dur-slow) var(--drope-ease); }
.wc-block-components-product-image:hover img { transform: scale(1.03); }

/* Sold out / low stock — real WooCommerce classes, no fake badges */
.outofstock .wc-block-components-product-image::after {
	content: "SOLD OUT";
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	padding: 4px 8px;
}

/* Wishlist heart injected by JS */
.drope-card-wishlist { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; background: rgba(246,243,236,0.9); border: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.drope-card-wishlist svg { width: 16px; height: 16px; stroke: var(--wp--preset--color--graphite); fill: none; transition: fill var(--drope-dur-fast) ease, stroke var(--drope-dur-fast) ease; }
.drope-card-wishlist.is-active svg { fill: var(--wp--preset--color--lime); stroke: var(--wp--preset--color--graphite); }

/* ---------- Category split ---------- */
.drope-split { min-height: 60vh; }
.drope-split__panel { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 3rem); min-height: 40vh; transition: flex-grow var(--drope-dur-slow) var(--drope-ease); }
.drope-split__panel:hover { flex-grow: 1.15; }

/* ---------- Editorial story ---------- */
.drope-story__grid { gap: clamp(1.5rem, 3vw, 3rem); }
.drope-story__frame { flex: 1 1 45%; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, #ece7da, #ece7da 2px, #e3ddcc 2px, #e3ddcc 4px); display: flex; align-items: flex-end; padding: 1rem; }
.drope-story__copy { flex: 1 1 55%; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.drope-story__products .wc-block-product-template { display: flex; flex-direction: column; gap: 1rem; }
.drope-story__products .wc-block-product-template > * { display: flex; align-items: center; gap: 1rem; }
.drope-story__products .wc-block-components-product-image { width: 64px; height: 80px; flex: 0 0 auto; aspect-ratio: auto; }

/* ---------- Promo banner ---------- */
.drope-promo { position: relative; padding-block: clamp(2.5rem, 4vw, 4rem); overflow: hidden; }
.drope-promo .drope-stamp--static { position: absolute; inset-block-start: 1rem; inset-inline-end: 1.5rem; inset-block-end: auto; }
@media (max-width: 782px) { .drope-promo .drope-stamp--static { display: none; } }
.drope-promo__tag { display: inline-block; padding: 4px 10px; border: 1px dashed var(--wp--preset--color--graphite); transform: rotate(-2deg); margin-bottom: 0.5rem; }

/* ---------- Social gallery ---------- */
.drope-social-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.drope-social-grid__tile { aspect-ratio: 1; background: repeating-linear-gradient(45deg, #1c1c1c, #1c1c1c 2px, #232323 2px, #232323 4px); display: flex; align-items: flex-end; padding: 0.5rem; color: var(--wp--preset--color--warm-white); font-family: var(--wp--preset--font-family--mono); font-size: 11px; }
@media (max-width: 782px) { .drope-social-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Newsletter ---------- */
.drope-newsletter { padding-block: clamp(2.5rem, 4vw, 5rem); text-align: center; }
.drope-newsletter__form { display: flex; gap: 0.75rem; max-width: 420px; margin-inline: auto; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; }
.drope-newsletter__form input { flex: 1 1 220px; padding: 0.75rem 1rem; border: 1px solid var(--wp--preset--color--warm-white); background: transparent; color: var(--wp--preset--color--warm-white); font-family: var(--wp--preset--font-family--body); }
.drope-newsletter__form input::placeholder { color: var(--wp--preset--color--soft-grey); }
.drope-newsletter__form button { padding: 0.75rem 1.25rem; background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); border: none; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.drope-newsletter__status { width: 100%; font-size: var(--wp--preset--font-size--small); margin: 0; }

/* ---------- Buttons ---------- */
.is-style-drope-fill .wp-block-button__link { background: var(--wp--preset--color--graphite); color: var(--wp--preset--color--warm-white); }
.is-style-drope-fill .wp-block-button__link:hover { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); }
.is-style-drope-outline .wp-block-button__link { background: transparent; border: 1px solid currentColor; }
.is-style-drope-outline .wp-block-button__link:hover { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); border-color: var(--wp--preset--color--lime); }
.is-style-drope-fill-dark .wp-block-button__link { background: var(--wp--preset--color--graphite); color: var(--wp--preset--color--warm-white); }

.is-style-drope-hairline { border: none; border-block-end: 1px solid var(--wp--preset--color--line); }

/* ---------- Shop / archive ---------- */
.drope-shop__layout { gap: clamp(1.5rem, 3vw, 3rem); align-items: flex-start; }
.drope-shop__filters { flex: 0 0 220px; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.drope-shop__grid-wrap { flex: 1 1 auto; min-width: 0; }
.drope-empty-state { padding-block: 3rem; text-align: center; font-size: var(--wp--preset--font-size--large); }

/* ---------- Product page ---------- */
.drope-product__layout { gap: clamp(1.5rem, 3vw, 3rem); }
.drope-product__gallery { flex: 1 1 55%; }
.drope-product__info { flex: 1 1 45%; display: flex; flex-direction: column; gap: 1rem; }
.drope-accordion { border-block-end: 1px solid var(--wp--preset--color--line); padding-block: 0.75rem; }
.drope-accordion summary { cursor: pointer; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.04em; }
.drope-accordion__body { padding-block-start: 0.5rem; color: var(--wp--preset--color--soft-grey); }

/* Sticky mobile add-to-bag */
.drope-sticky-atc { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; background: var(--wp--preset--color--graphite); color: var(--wp--preset--color--warm-white); display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; transform: translateY(100%); transition: transform var(--drope-dur-base) var(--drope-ease); }
.drope-sticky-atc.is-visible { display: flex; transform: translateY(0); }
.drope-sticky-atc__button { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); border: none; padding: 0.6rem 1.1rem; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
@media (min-width: 783px) { .drope-sticky-atc { display: none !important; } }

/* ---------- Content pages ---------- */
.drope-page { padding-block: clamp(2rem, 4vw, 4rem); max-width: 760px; }
.drope-page > .wp-block-post-title { max-width: none; }
.drope-page p { color: var(--wp--preset--color--graphite); line-height: 1.6; }
.drope-page table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }
.drope-page table th, .drope-page table td { border: 1px solid var(--wp--preset--color--line); padding: 0.6rem 0.8rem; text-align: start; font-size: var(--wp--preset--font-size--small); }
.drope-page table th { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.drope-page .drope-accordion { border-block-end: 1px solid var(--wp--preset--color--line); padding-block: 0.85rem; }
.drope-page h2 { margin-block-start: 2rem; font-size: var(--wp--preset--font-size--large); }
.drope-page ul, .drope-page ol { padding-inline-start: 1.25rem; line-height: 1.6; }
.drope-page a { color: var(--wp--preset--color--graphite); text-decoration-color: var(--wp--preset--color--lime); text-decoration-thickness: 2px; }

/* ---------- Footer ---------- */
.drope-footer { padding-block: clamp(2rem, 4vw, 4rem); border-block-start: 1px solid var(--wp--preset--color--line); }
.drope-footer__grid { gap: 2rem; }
.drope-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.drope-footer a { text-decoration: none; }
.drope-footer a:hover { color: var(--wp--preset--color--lime); }
@media (max-width: 782px) { .drope-footer__grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	.drope-ticker__track { animation: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 782px) {
	.drope-hero__grid, .drope-split, .drope-story__grid, .drope-product__layout, .drope-shop__layout { flex-wrap: wrap; }
	.drope-hero__copy, .drope-hero__frame, .drope-split__panel, .drope-story__frame, .drope-story__copy, .drope-product__gallery, .drope-product__info { flex-basis: 100%; }
	.drope-shop__filters { position: static; flex-basis: 100%; }
	.drope-product-grid .wc-block-product-template > * { flex-basis: calc(50% - 1.5rem); }
}