/*
 * clone.css - shell + engine patch styles for the bark.co clone.
 * Fidelity discipline: this file NEVER overrides mirrored rules with !important and only
 * (a) fixes WP/Woo shell invasion, (b) supplies mirrored-missing engine rules with source
 * anchors (comments), (c) shell page scaffolding (login/search/checkout-shell/woo-shell).
 * Mirror CSS/JS/DOM remain byte sources from capture.
 */

/* ---- custom elements used by mirrored theme engine (define display so CSS layout applies) ---- */
navigation-drawer,
cart-drawer,
search-drawer,
predictive-search,
quantity-selector,
store-header,
height-observer,
product-card,
product-card-redesign {
	display: block;
}

/* drawers are hidden by mirrored css via visibility; engine opens by adding .clone-open.
   source: captured home-375-drawer.png / theme css (.drawer{visibility:hidden}) - engine rules
   missing from target css because drawer show-state is produced by target JS (not mirrored).
   specificity (.drawer.clone-open > .drawer) - no !important override of mirrored rules. */
.drawer.clone-open {
	visibility: visible;
	pointer-events: auto;
}

/* mobile navigation drawer geometry (mirror of captured 375 open state, source: home-375-drawer.png) */
navigation-drawer#header-sidebar-menu.clone-open {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 375px;
	max-width: 100vw;
	background: #fbfbff;
	z-index: 2147483640;
	overflow-y: auto;
	transform: none;
}

/* desktop header dropdown panels: mirror of the target theme engine show/hide.
   source: bark.co live measurement 2026-09-08 (fixe2b_desk_probe_out.txt TIMING rows): hover open
   set details.open and inline opacity:1 on the panel, leave removed open and set inline opacity:0
   (mirrored css keeps .js .dropdown-menu{opacity:0} as the closed base). The engine toggles the
   panel by inline opacity only; no CSS transition is added here so the show/hide is instant like
   the mirrored drawer open/close (fb-B4 precedent: clone drawers are 0s instant, target container
   has no visible transition either). This block documents the engine-supply decision - no rule is
   required in addition to the mirrored .js .dropdown-menu{opacity:0}. */
.js nav.header__link-list li details[is="dropdown-disclosure"] .dropdown-menu {
	/* engine-supply note only: instant inline opacity toggle from clone.js (no transition rule) */
}

body.clone-scroll-lock {
	overflow: hidden;
}

/* hide default page-content empty blocks WP may inject on shell pages */
.clone-shell-content > .wp-site-blocks,
.clone-shell-content > p:empty {
	display: none;
}

/* ---- generic shell page scaffolding ---- */
.clone-shell-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

/* ---- search results ---- */
.clone-search__form {
	display: flex;
	gap: 12px;
	max-width: 560px;
}
.clone-search__input {
	flex: 1;
	border: 1px solid #142535;
	border-radius: 8px;
	padding: 10px 14px;
	font: inherit;
}
.clone-search__count {
	margin: 16px 0;
	font-weight: 600;
}
.clone-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.clone-product-card {
	text-decoration: none;
	color: inherit;
}
.clone-product-card__media {
	aspect-ratio: 1;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: #eef4f9;
}
.clone-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.clone-product-card__title {
	display: block;
	margin-top: 10px;
	font-weight: 600;
	line-height: 1.3;
}
.clone-product-card__price {
	display: block;
	margin-top: 6px;
	color: #142535;
}
@media (max-width: 768px) {
	.clone-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- login ---- */
.clone-login {
	max-width: 460px;
	margin: 40px auto 80px;
	padding: 0 20px;
}
.clone-login__card {
	border: 1px solid #dbe4ee;
	border-radius: 16px;
	background: #fff;
	padding: 32px 28px;
	box-shadow: 0 12px 32px rgba(20, 37, 53, 0.08);
}
.clone-login__heading {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 20px;
	color: #142535;
	text-align: center;
}
.clone-login__tabs {
	display: flex;
	border-bottom: 1px solid #dbe4ee;
	margin-bottom: 24px;
}
.clone-login__tab {
	flex: 1;
	background: none;
	border: none;
	padding: 12px;
	font: inherit;
	font-weight: 600;
	color: #8494a0;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.clone-login__tab.is-active {
	color: #142535;
	border-bottom-color: #00afd7;
}
.clone-login__form {
	display: grid;
	gap: 14px;
}
.clone-login__input {
	width: 100%;
	border: 1px solid #cdd7e2;
	border-radius: 8px;
	padding: 12px 14px;
	font: inherit;
}
.clone-login__input:focus {
	outline: 2px solid #00afd7;
	outline-offset: 0;
	border-color: transparent;
}
.clone-login__submit {
	background: #00afd7;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 13px 16px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.clone-login__error {
	background: #fdecec;
	color: #b42318;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
}
.clone-login__ok {
	background: #e8f7ee;
	color: #067647;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
}
.clone-login__hint {
	font-size: 13px;
	color: #66737f;
	text-align: center;
	margin: 4px 0 0;
}

/* ---- checkout shell (D-086 shell copy above Woo checkout) ---- */
.clone-checkout-shell {
	background: #fbfbff;
	border: 1px solid #dbe4ee;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 24px;
}
.clone-checkout-shell__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.clone-checkout-shell__tab {
	border: 1px solid #cdd7e2;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #66737f;
	cursor: pointer;
}
.clone-checkout-shell__tab.is-active {
	background: #142535;
	border-color: #142535;
	color: #fff;
}
.clone-checkout-shell__slot {
	border: 1px dashed #cdd7e2;
	border-radius: 10px;
	background: #fff;
	padding: 18px;
	margin-bottom: 14px;
}
.clone-checkout-shell__slot-note {
	margin: 0;
	font-size: 13px;
	color: #66737f;
}
.clone-checkout-shell__trust ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	font-size: 13px;
}
.clone-checkout-shell__trust a {
	color: #142535;
}

/* ---- Woo shell alignment (WP/Woo invasion fixes, no !important) ---- */
.clone-shell-content--woo .woocommerce,
.clone-shell-content--woo .products {
	text-align: left;
}

/* ---- v914r1 (NEW-10): product buybox form UA-margin reset ----
   Source anchor: live target 2026-09-08 @1440 measured - #barkco-product-info buy-buttons form
   margin-bottom = 0px (buy container 43px tall, box total 477px). The mirror-era stylesheet set
   predates the target reset that zeroes the Chromium UA form margin (UA leftover 1em = 16px on
   the clone makes the buy container 59px and the box 487px). Engine-supply the missing reset,
   scoped to the buybox form only (no !important). */
#barkco-product-info form {
	margin-bottom: 0;
}

/* ---- B-8 (fb-B8): qty stepper 375 real-mobile-UA visual alignment ----
   Source anchor: live target 2026-09-07 real mobile UA 375 measured - stepper 45px tall / radius 8 /
   border 1px rgb(var(--bark-light-blue)) / bg rgb(var(--cool-white)); input flex:1 -> ~84.5x43;
   qty+pricing row content 345px wide starting x15 (15px side padding). Live target DOM wraps the
   row inside safe-sticky#barkco-product-info + .section-full, so mirror css bark-in-the-belly-pdp.css
   (#barkco-product-info .quantity-selector{height:45px;border-radius:8px;border:1px solid
   rgb(var(--bark-light-blue));background:rgb(var(--cool-white));width:100%} and
   #barkco-product-info .quantity-selector__input{flex:1}) matches. The clone captured mirror (older
   Shopify render) keeps the row OUTSIDE #barkco-product-info so those mirror rules never match.
   Engine-supply the missing mirror geometry at the <700px mobile branch only (mirror theme.css uses
   min-width:700px as its mobile switch; 1440 desktop branch untouched per D-12 1440 baseline).
   clone.js quantity logic untouched. */
@media screen and (max-width: 699px) {
  /* live .section-full padding-inline 15 -> row content 345 wide, cols (345-12)/2 = 166.5px;
     margin-top = live row top delta (legend top 754 vs clone 734, measured 2026-09-07) */
  main > div:has(.product-info__quantity-selector) {
    padding-inline: 15px;
    margin-top: 20px;
  }

  .product-info__quantity-selector .quantity-selector {
    height: 45px;
    border-radius: 8px;
    background: rgb(var(--cool-white));
    border-color: rgb(var(--bark-light-blue));
  }

  .product-info__quantity-selector .quantity-selector__input {
    flex: 1;
  }
}

/* ---- first-visit email promo overlay (fb-LUA-10, homepage) ----
   Source of the card visual = live target capture 2026-09-07 15:00Z
   (runtime/screenshots/popup_probe/s1_home_final.png) cropped to
   assets/img/clone_promo_free_toys_card.png (504x811). Input/CTA are rebuilt as real DOM at
   measured capture coordinates (percent of the card box; card keeps the intrinsic aspect).
   Overlay dim & engine close semantics mirror the target Wisepops v2 engine (wp-backdrop). */
.clone-fv-promo {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
}
.clone-fv-promo.clone-fv-open {
  display: block;
}
.clone-fv-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 18, 0.15);
  /* FIX-E2-g 1.1: mirror the target Wisepops backdrop blur on the popup scrim */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.clone-fv-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 504px;
  max-width: calc(100vw - 16px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(10, 20, 40, 0.35);
  background: #e5eaf2;
}
.clone-fv-img {
  display: block;
  width: 100%;
  height: auto;
}
.clone-fv-close {
  position: absolute;
  top: 8%;
  right: 3%;
  width: 8%;
  height: 8%;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
/* ---- fv control geometry / overlay discipline (fb-FV 2026-09-09 + re-crop round) ----
   RE-CROP (this round): the three card assets were re-cropped from the authoritative source
   screenshots runtime/docs/captured/fixe2_popup/source_drop/2026-09-08_fv_{email,phone,success}.png
   at the measured TRUE visible card bounds (device px of the source):
     email   x1041..1808 y311..1605 -> clone_promo_free_toys_card.png 767x1294 (FA121716)
     phone   x1041..1808 y306..1610 -> clone_fv_phone_card.png         767x1304 (C0BAE11D)
     success x1041..1808 y275..1641 -> clone_fv_success_card.png       767x1366 (C6D353FE)
   The previous assets (cropped from the 2026-09-07 bark.co capture at 504x811) were WIDER than
   the real card: their right edge included page background behind the popup (visible yellow
   'Meet Licksters' card / dog head / text remnants) -> the popup image mismatch users saw.
   Source = card only (rounded corners are applied by .clone-fv-card border-radius). Because the
   crops carry the source's own rendered controls (white field + its label, yellow CTA, green GET
   BARKBOX, white NO THANKS), the DOM overlays are transparent hit/focus targets aligned to the
   baked boxes (re-measured 2026-09-09 on the new crops, native px -> % of that card box).
   Control boxes (measured): email field y980..1055 x78..689; phone field y980..1063 x78..689;
   CTA(email y1073..1157 / phone y1082..1166, x77..690); success green y1156..1225 x77..690;
   NO THANKS text rows y1193..1213 x321..446 (email/phone). Text stays in DOM (a11y/harness
   textContent); color:transparent lets the baked art label render. */
.clone-fv-email {
  position: absolute;
  left: 10.2%;
  top: 75.7%;
  width: 79.7%;
  height: 5.8%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #142535;
  font: 500 15px/1 Inter, sans-serif;
  padding: 0 8px;
  outline: none;
}
.clone-fv-phone {
  position: absolute;
  left: 10.2%;
  top: 75.2%;
  width: 79.7%;
  height: 6.4%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #142535;
  font: 500 15px/1 Inter, sans-serif;
  padding: 0 8px;
  outline: none;
}
.clone-fv-email:focus,
.clone-fv-phone:focus {
  border-color: #9fc7e8;
}
/* source placeholder glyph luma ~185-220 (sampled) - matches the baked placeholder lightness */
.clone-fv-email::placeholder {
  color: #d6d6d6;
}
/* CTA (email/phone steps): baked yellow button spans x77..690 (~10%..90%), email y1073..1157 /
   phone y1082..1166 (~83%..89.4%) of the re-cropped cards - transparent hit target. */
.clone-fv-submit {
  position: absolute;
  left: 10%;
  top: 83%;
  width: 80%;
  height: 6.5%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 0;
  /* FIX-E2-g 1.2 + fb-FV: text node kept (a11y/harness textContent) but visually transparent
     so the baked art label is the single visible text; flex keeps the node centred (harness 1.2). */
  display: flex;
  align-items: center;
  justify-content: center;
}
.clone-fv-submit:hover {
  filter: none;
}
/* success GET BARKBOX (v914r1 C, fxe2-d-1 + fb-FV): baked fluorescent-green button rgb(176,253,65)
   at y1156..1225 x77..690 (~84.6%..89.7%) of the 767x1366 re-crop. Transparent overlay; click
   closes the popup (no nav source, registered). */
.clone-fv-get {
  position: absolute;
  left: 10%;
  top: 84.6%;
  width: 80%;
  height: 5.1%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clone-fv-get:hover {
  filter: none;
}
/* NO THANKS: baked white label x321..446 (~41.9%..58.2%) at rows y1193..1213 (~92.2%..93.8%) of
   the re-cropped email/phone cards. Transparent dismiss link; text stays for a11y/harness. */
.clone-fv-nothanks {
  position: absolute;
  left: 41%;
  top: 92.0%;
  width: 18%;
  height: 2.2%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  cursor: pointer;
  color: transparent;
  font: 600 13px/1 Inter, sans-serif;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}