/* Product-page entry point for the branding editor (loaded only when the
   product is brandable, so no extra CSS on ordinary product pages).

   It is framed as its own offer box: on its own, a white outlined link sitting
   under the red КУПИ button reads as a footnote, not as an invitation. The box
   is a tinted panel with a blue accent bar down its left edge and softly rounded
   corners, sitting in the same stack as .expected-delivery / .limited_qty.
   Blue #00adee is the storefront's own interactive colour (links, size chart);
   green and amber are already spoken for by delivery and low stock, and red
   belongs to КУПИ, so the branding CTA never competes with the buy action. */
.branding-cta-box {
	margin: 12px 0 10px;
	padding: 12px 13px;
	background: #e8f7fd;
	border-left: 6px solid #00adee;
	border-radius: 6px;
}
.branding-cta-title {
	display: block; font-size: 15px; font-weight: 700; color: #10323f;
	text-transform: uppercase; letter-spacing: .02em;
}
.branding-cta-title .fa { color: #00adee; margin-right: 6px; }
.branding-cta-text {
	display: block; margin: 4px 0 10px;
	font-size: 13px; font-weight: 300; color: #4a5b63; line-height: 1.4;
}
/* the button reuses the storefront's own full-width blue button spec (.buy in
   style.css: flat, 46px, 15px/700, uppercase). Height comes from padding rather
   than a fixed 46px so a wrapped label grows the button instead of spilling. */
.branding-cta {
	display: block; width: 100%; box-sizing: border-box; text-align: center;
	padding: 14px 10px; line-height: 1.2;
	background-color: #00adee; font-size: 15px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease;
}
/* The storefront paints every link black — `a,a:hover,a:active,a:visited,a:focus
   { color:#000000 }` in style.css. Those state selectors outrank a plain class,
   so once the link had been visited or focused the label turned black. The label
   is repeated here with the same state list at a higher specificity, so it stays
   white in every state like the site's other filled buttons. */
a.branding-cta,
a.branding-cta:link,
a.branding-cta:visited,
a.branding-cta:hover,
a.branding-cta:focus,
a.branding-cta:active { color: #fff; text-decoration: none; }
.branding-cta:hover,
.branding-cta:focus { background-color: #0093c9; }

/* The group box is ONE border on ONE element: .bg-group wraps the group's rows
   as a table-row-group. A row group only paints a border in the collapsing
   model, hence border-collapse on the table itself — border-spacing is already
   0 here (the UA's table{border-spacing:2px} does not match a display:table
   div), so collapsing changes no geometry, only which borders get painted.
   1px #000 to match the row separators the rest of the basket already uses. */
.basket-prods { border-collapse: collapse; }
.basket-prods .bg-group { display: table-row-group; border: 1px solid #000; }
/* The gap row: real empty space between blocks, belonging to neither.
   Its cells carry no border, so the block above closes on its own bottom line, the
   gap is blank, and the block below opens on its own top line - which is what makes
   „which amount belongs to which products“ answerable at a glance. Kept out of the
   cart's own rules by having no .thumb-title/.price-qty-del content to style. */
.basket-prods .item.bg-gap > .thumb-title,
.basket-prods .item.bg-gap > .price-qty-del {
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
}
/* the block after a gap has no line of its own on top - cells only carry a bottom
   border - so the gap row draws it, sitting directly above that block */
.basket-prods .item.bg-gap + .bg-group,
.basket-prods .item.bg-gap + .item > .thumb-title,
.basket-prods .item.bg-gap + .item > .price-qty-del { border-top: 1px solid #000; }
/* Rows keep the basket's normal 1px separator between them. Only the row that
   sits directly ABOVE a group drops its own, because the container already
   draws that line - otherwise the same edge would come from two sources. */
.basket-prods .item.before-bg-group .thumb-title,
.basket-prods .item.before-bg-group .price-qty-del { border-bottom: 0; }


/* Edit / remove sit in the same corner as a normal row's "Изтрий" and are icon
   buttons for the same reason it is: the column is narrow. FA 4.0.3 is bundled
   in style.css — fa-trash does not exist in it, fa-trash-o does. */
.bg-actions { display: inline-block; }
.bg-actions .bg-edit,
.bg-actions .bg-remove {
	display: inline-block; width: 36px; height: 36px; line-height: 34px;
	margin: 11px 0 0 6px; border: 1px solid #000; border-radius: 5px;
	text-align: center; font-size: 16px; text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.bg-actions .bg-edit { background: #000; color: #fff; }
.bg-actions .bg-remove { background: #fff; color: #000; }
.bg-actions .bg-edit:hover,
.bg-actions .bg-edit:focus { background: #333; color: #fff; text-decoration: none; }
.bg-actions .bg-remove:hover,
.bg-actions .bg-remove:focus { background: #000; color: #fff; text-decoration: none; }

/* While one branding action is in flight (edit/remove are full-page navigations
   with a brief delay), disable BOTH links so a second click can't fire a
   duplicate request. The busy class is added on first click (see basket JS). */
.bg-actions.bg-busy .bg-edit,
.bg-actions.bg-busy .bg-remove { pointer-events: none; opacity: .5; cursor: default; }


/* The branding charge as its own line at the foot of the group. It reads as a
   product line, so it borrows the product metrics rather than inventing its
   own: the label takes .prod-info a.title (22px/300/1.1) and the amount takes
   .product-price .price (27px/700), both from style.css. The cells lose their
   horizontal padding because a product row has none - the offsets below come
   from the same places a product row's offsets come from. */
.basket-prods .item.bg-total-row .thumb-title,
.basket-prods .item.bg-total-row .price-qty-del {
	padding: 10px 0; vertical-align: middle; background: #f7f7f7;
}
/* A product title starts after the thumbnail cell, which style.css fixes at
   140px (200px under 1022px). This row has no thumbnail, so it pays that same
   width as padding and the two titles start on one line. */
.basket-prods .item.bg-total-row .thumb-title { padding-left: 140px; }
.basket-prods .item.bg-total-row .bg-total-label {
	font-size: 22px; font-weight: 300; line-height: 1.1; color: #000;
	text-transform: none; letter-spacing: normal;
}
/* Same 30px gap from the quantity column that .product-price keeps, so the two
   amounts end on one line. */
.basket-prods .item.bg-total-row .bg-total-price {
	display: inline-block; vertical-align: middle; margin: 0 30px 0 0;
	font-size: 27px; font-weight: 700; color: #000; white-space: nowrap;
}
.basket-prods .item.bg-total-row .qd,
.basket-prods .item.bg-total-row .pr {
	display: inline-block; float: right; height: 36px; line-height: 36px;
}
/* The amount can only end where the product prices end if this row's quantity
   column is exactly as wide as theirs. .bg-col-spacer makes it so: it holds an
   inert copy of that column collapsed to zero height, so it costs nothing
   vertically but still reports the same width.
   The icons then sit at the START of that column - left:0 - so they follow the
   amount directly and share a vertical line with the steppers on the rows above
   and below. Pinning them right instead would park them in the "Изтрий" slot,
   which on a branded row is invisible, leaving them stranded at the far edge. */
.basket-prods .item.bg-total-row .qd { position: relative; }
.basket-prods .item.bg-total-row .bg-col-spacer {
	display: block; height: 0; overflow: hidden; visibility: hidden;
}
.basket-prods .item.bg-total-row .bg-actions { position: absolute; top: 0; left: 0; }
.basket-prods .item.bg-total-row .bg-actions .bg-edit,
.basket-prods .item.bg-total-row .bg-actions .bg-remove { margin-top: 0; }

/* 768-1022px. The basket drops the table model, but the right-hand side keeps
   working exactly as it does on desktop: style.css turns .price-qty-del into an
   inline-block indented by the thumbnail and leaves .qd/.pr as right floats. So
   everything above still applies and the only thing that moves is the width the
   label has to pay - the thumbnail grows from 140px to 200px here. */
@media only screen and (max-width: 1022px) {
	.basket-prods .bg-group { display: block; }
	/* Block mode: the two cells stack instead of sitting side by side, so a height on
	   each of them adds up. The row owns the gap here and the cells collapse. */
	.basket-prods .item.bg-gap { display: block; height: 26px; }
	.basket-prods .item.bg-gap > .thumb-title,
	.basket-prods .item.bg-gap > .price-qty-del { display: none; }
	.basket-prods .item.before-bg-group { border-bottom: 0; }
	/* one solid block: the tint moves from the two cells to the row, otherwise
	   the cells only tint their own boxes and leave white gaps. */
	.basket-prods .item.bg-total-row { display: block; background: #f7f7f7; }
	.basket-prods .item.bg-total-row .thumb-title,
	.basket-prods .item.bg-total-row .price-qty-del { background: none; }
	.basket-prods .item.bg-total-row .thumb-title { padding-left: 200px; }
	.basket-prods .item .qty-remove.is-placeholder { display: none; }
}

/* Under 768px the basket stops being columns at all: style.css stacks and
   centres every row - .prod-info is centred, .qd becomes a 130px block and .pr
   a 260px block, both margin:10px auto. Those rules already match this row, so
   the branding line only has to stop doing the desktop things. There is no
   column left to reserve and no "Изтрий" slot to lay icons over, so the spacer
   goes and the icons become a centred block of their own - landing exactly
   where the stepper sits on a product row, with the amount centred below it. */
@media only screen and (max-width: 767px) {
	.basket-prods .item.bg-total-row .thumb-title { padding: 10px 0; text-align: center; }
	.basket-prods .item.bg-total-row .qd,
	.basket-prods .item.bg-total-row .pr {
		float: none; display: block; height: auto; line-height: normal; text-align: center;
	}
	.basket-prods .item.bg-total-row .bg-col-spacer { display: none; }
	.basket-prods .item.bg-total-row .bg-actions { position: static; }
	.basket-prods .item.bg-total-row .bg-total-price { margin: 0; }
}

/* Locked quantity on a branded line (edit only in the branding editor). */
/* Branded line: the stepper is the SAME control as a product row, just inert -
   the quantity is owned by the branding editor. Disabled styling comes from the
   base .qty button:disabled rule, so nothing is restated here. The hidden copy
   of the remove button reserves "Изтрий"'s width so the columns stay aligned. */
.basket-prods .item .qty-remove.is-placeholder { visibility: hidden; pointer-events: none; }
.basket-prods .item .qty.qty-locked .qty-number { cursor: default; }

/* The branding line in My Orders is not a link, but it has to start where a
   product title starts, so it takes the same 2px of side padding .myord-cell a
   gives those titles. Everything else it needs - 19px/300 - it already inherits
   from .myord-table, which is what makes it read as one more product. */
.myord-cell .itm-plain { padding: 0 2px; }

/* "Reorder this order" button in My Orders. A clear secondary action on a line
   of its own: .reorder-wrap is the block that breaks the line, so the button
   itself stays inline-block, hugs its text and follows the cell's text-align -
   left on desktop, centred once .myord-cell centres itself on small screens.
   Scoped under .myord-cell on purpose: that cell styles every <a> inside it as
   a plain blue underlined link with padding 0 2px, and .myord-cell a (0,1,1)
   outranks a bare .reorder-btn (0,1,0) - unscoped, the button silently loses
   its padding and keeps the underline, rendering as ordinary link text. */
.reorder-wrap { margin-top: 14px; }
.myord-cell .reorder-btn {
	display: inline-block; padding: 16px 26px; white-space: nowrap;
	border: 1px solid #00adee; border-radius: 4px; background: #fff; color: #00adee;
	font-size: 14px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .02em; text-decoration: none; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.myord-cell .reorder-btn:hover,
.myord-cell .reorder-btn:focus { background: #00adee; color: #fff; text-decoration: none; }


/* ---- checkout: the branded-basket payment notice ---------------------------
   The banner reports something the customer did not ask for - either that the
   payment method was changed for them, or that the one they just clicked was
   refused - so it has to be closeable. It is hidden by default and shown either
   by the server (inline style, after a repair) or by the page (when the setter
   rejects a click); style.css gives every div.alert display:block, so hiding it
   needs the same specificity the cart's own alert uses.
   The close button is scoped with two classes and restates display/background in
   :hover/:focus, because style.css carries a global
   `button, button:focus { outline:none; border:0px; display:inline-block }`
   at (0,1,1) that otherwise wins the instant the button is clicked. */
div.alert.branding-payment-alert { display: none; position: relative; padding-right: 54px; }
div.alert.branding-payment-alert .bg-alert-close {
	display: block; position: absolute; top: 6px; right: 8px;
	width: 32px; height: 32px; padding: 0; margin: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .18); color: #fff;
	font-size: 24px; font-weight: 300; line-height: 30px; text-align: center;
	cursor: pointer;
	transition: background .15s ease;
}
div.alert.branding-payment-alert .bg-alert-close:hover,
div.alert.branding-payment-alert .bg-alert-close:focus {
	display: block; border: 0; outline: none;
	background: rgba(255, 255, 255, .34); color: #fff;
}

/* ---- "Приложи и за друг продукт" — cart button + chooser page ------------ */
/* The duplicate action sits between edit and remove; same 36px shape as its
   neighbours, its own branding-accent colour so it reads as "make another". */
.bg-actions .bg-duplicate {
	display: inline-block; width: 36px; height: 36px; line-height: 34px;
	margin: 11px 0 0 6px; border: 1px solid #00adee; border-radius: 5px;
	text-align: center; font-size: 16px; text-decoration: none;
	background: #00adee; color: #fff;
	transition: background .15s ease, color .15s ease;
}
.bg-actions .bg-duplicate:hover,
.bg-actions .bg-duplicate:focus { background: #0093c9; border-color: #0093c9; color: #fff; text-decoration: none; }
.bg-actions.bg-busy .bg-duplicate { pointer-events: none; opacity: .5; cursor: default; }
.basket-prods .item.bg-total-row .bg-actions .bg-duplicate { margin-top: 0; }

/* the chooser page */
.bt-wrap { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.bt-head { margin: 0 0 18px; }
.bt-back { display: inline-block; margin-bottom: 12px; color: #405365; text-decoration: none; font-size: 14px; }
.bt-back:hover { color: #00adee; }
.bt-h1 { font-size: 24px; color: #16232e; margin: 0 0 6px; }
.bt-h1 .fa { color: #00adee; margin-right: 8px; }
.bt-sub { color: #405365; margin: 0 0 22px; font-size: 15px; }
.bt-section-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a9bab; margin: 18px 0 10px; }
.bt-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.bt-card {
	display: flex; align-items: center; gap: 12px;
	width: calc(50% - 7px); box-sizing: border-box;
	padding: 10px; border: 1px solid #e4eaf0; border-radius: 12px;
	background: #fff; text-decoration: none; color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bt-card:hover { border-color: #00adee; box-shadow: 0 0 0 3px rgba(0,173,238,.12); text-decoration: none; }
.bt-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; background: #f6f8fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bt-thumb img { max-width: 100%; max-height: 100%; }
.bt-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-title { font-size: 15px; color: #16232e; line-height: 1.25; }
.bt-codes { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: #8a9bab; }
.bt-code { white-space: nowrap; }
.bt-code strong { font-weight: 600; color: #405365; }
.bt-gender { font-size: 12px; color: #8a9bab; }
.bt-empty { padding: 20px; background: #f6f8fa; border: 1px solid #e4eaf0; border-radius: 12px; color: #405365; }
@media only screen and (max-width: 680px) {
	.bt-card { width: 100%; }
}

/* chooser search. Scoped with two classes (0,2,0) so the controls beat style.css's
   global `button:focus` and `a:visited/:hover` state rules (0,1,1) - see the
   payment-alert close button above. The focus ring is the card's hover ring. */
.bt-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 0 0 8px; }
.bt-search .bt-search-input {
	flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box;
	padding: 0 12px; border: 1px solid #e4eaf0; border-radius: 8px;
	background: #fff; color: #16232e; font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bt-search .bt-search-input:focus { outline: none; border-color: #00adee; box-shadow: 0 0 0 3px rgba(0,173,238,.12); }
.bt-search .bt-search-btn {
	display: inline-block; flex: 0 0 auto; height: 40px; padding: 0 16px;
	border: 0; border-radius: 8px; background: #00adee; color: #fff;
	font-size: 14px; font-weight: 700; cursor: pointer;
	transition: background .15s ease;
}
.bt-search .bt-search-btn:hover,
.bt-search .bt-search-btn:focus { background: #0093c9; }
.bt-search .bt-search-clear { flex: 0 0 auto; color: #405365; font-size: 14px; text-decoration: none; }
.bt-search .bt-search-clear:hover,
.bt-search .bt-search-clear:focus { color: #00adee; text-decoration: none; }

/* chooser pagination */
.bt-pager { margin: 10px 0 4px; }
.bt-page { display: inline-block; min-width: 32px; text-align: center; padding: 5px 9px; margin-right: 5px; border: 1px solid #e4eaf0; border-radius: 6px; color: #405365; text-decoration: none; }
.bt-page:hover { background: #e8f7fd; color: #405365; text-decoration: none; }
.bt-page.is-active { background: #00adee; border-color: #00adee; color: #fff; }