/* Oven & Crumb 1.0.9 — theme styling for TitanCart's product, cart and form controls.
 * TitanCart hard-codes some button colours (#0e1115 / #111) instead of using --tc-primary, so the
 * theme restyles those controls here. Selectors are prefixed with body.oc-site to outrank
 * TitanCart's layout-variant rules (e.g. .tc-pdp--wide .tc-pdp__add-btn) without !important. */

/* ---------- Primary buttons: chocolate, caramel hover ---------- */
body.oc-site .tc-pdp__add-btn,
body.oc-site .tc-cartpage__checkout-btn,
body.oc-site .tc-cartpage__promo-btn,
body.oc-site .tc-pdp__tab-btn--active {
	background: var(--oc-chocolate);
	border-color: var(--oc-chocolate);
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.oc-site .tc-pdp__add-btn:hover:not(:disabled),
body.oc-site .tc-cartpage__checkout-btn:hover,
body.oc-site .tc-cartpage__promo-btn:hover {
	background: #8d5034;
	border-color: #8d5034;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(69, 35, 15, .22);
}
body.oc-site .tc-pdp__add-btn:active:not(:disabled),
body.oc-site .tc-cartpage__checkout-btn:active { transform: none; box-shadow: none; }
body.oc-site .tc-pdp__add-btn { min-height: 52px; }

/* ---------- Wishlist & Compare: cream secondary buttons ---------- */
body.oc-site .tc-pdp__wish-btn,
body.oc-site .tc-pdp__compare-btn {
	min-height: 52px;
	gap: 9px;
	background: var(--oc-cream);
	border: 1.5px solid #e3d3c5;
	border-radius: 6px;
	color: var(--oc-chocolate);
	font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
body.oc-site .tc-pdp__wish-btn svg { width: 19px; height: 19px; }
body.oc-site .tc-pdp__compare-btn .bi { font-size: 16px; line-height: 1; }
body.oc-site .tc-pdp__wish-btn:hover,
body.oc-site .tc-pdp__compare-btn:hover {
	background: #fdf0ec;
	border-color: var(--oc-coral);
	color: #b9544f;
	transform: translateY(-1px);
}
/* Saved to wishlist: coral, heart filled. */
body.oc-site .tc-pdp__wish-btn.tc-wishlist-toggle--active,
body.oc-site .tc-pdp__wish-btn.active {
	background: #fdecea;
	border-color: #b9544f;
	color: #b9544f;
}
body.oc-site .tc-pdp__wish-btn.tc-wishlist-toggle--active svg path,
body.oc-site .tc-pdp__wish-btn.active svg path { fill: currentColor; }
/* In the compare list: solid chocolate. */
body.oc-site .tc-pdp__compare-btn.tc-compare-toggle--active {
	background: var(--oc-chocolate);
	border-color: var(--oc-chocolate);
	color: #fff;
}

/* ---------- Product tabs ---------- */
body.oc-site .tc-pdp__tab-btn { border-radius: 6px; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
body.oc-site .tc-pdp__tab-btn:not(.tc-pdp__tab-btn--active):hover { border-color: var(--oc-coral); color: #b9544f; }

/* ---------- Text fields: one soft ring, no box-in-a-box ---------- */
/* The theme's global :focus-visible outline (3px, offset 4px) is right for links and buttons, not
   for text fields — on those it drew a second box outside the field. */
.oc-site input:not([type=checkbox]):not([type=radio]):focus-visible,
.oc-site textarea:focus-visible,
.oc-site select:focus-visible { outline: none; }
:where(.oc-site) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select):focus-visible {
	border-color: var(--oc-coral);
	box-shadow: 0 0 0 3px rgba(214, 111, 105, .22);
}
/* Header search: the ring goes around the whole pill, not the input inside it. */
.oc-site .oc-search:focus-within { outline: none; border-color: var(--oc-coral); box-shadow: 0 0 0 3px rgba(214, 111, 105, .22); }
.oc-site .oc-search input:focus-visible { box-shadow: none; }