/* SAMECOM core — tokens, base components, cart bar. Scoped to .samecom / .samecom-*.
   Uses logical properties so RTL (Arabic) layouts work without extra rules. */

:root {
	--samecom-primary: var(--samra-primary-color, #c9080b);
	--samecom-primary-hover: var(--samra-primary-hover, color-mix(in srgb, var(--samecom-primary) 85%, #000));
	--samecom-text: var(--samra-text-color, #1f2937);
	--samecom-muted: #6b7280;
	--samecom-border: #e5e7eb;
	--samecom-surface: #ffffff;
	--samecom-soft: #f6f7f9;
	--samecom-success: #15803d;
	--samecom-danger: #b91c1c;
	--samecom-warning: #b45309;
	--samecom-whatsapp: #25d366;
	--samecom-whatsapp-dark: #128c7e;
	--samecom-radius: 12px;
	--samecom-radius-sm: 8px;
	--samecom-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 16px rgba(17, 24, 39, .06);
	--samecom-container: 1200px;
	--samecom-gap: clamp(16px, 2.5vw, 32px);
	--samecom-cartbar-height: 0px;
}

.samecom,
.samecom *,
.samecom *::before,
.samecom *::after { box-sizing: border-box; }

.samecom { color: var(--samecom-text); line-height: 1.6; }
.samecom img { max-width: 100%; height: auto; }
.samecom a { color: inherit; }

/* ---------------------------------------------------------------- containment
   A single long token — a product name with no spaces, an email address, a URL,
   a SKU — contributes its whole length to the min-content width of its box. In a
   grid or flex track that sizes to content, that one word makes the row wider
   than the screen and the whole page scrolls sideways. `anywhere` (not
   `break-word`) is what actually shrinks the min-content contribution, so the
   track can collapse instead of the page growing.

   Scoped to SAMECOM's own text containers: the theme, menus and headings are
   untouched, and nothing is hidden or clipped — the text wraps instead. */
.samecom-product-card__title,
.samecom-product-card__title a,
.samecom-product-card__cat,
.samecom-cart-line__info,
.samecom-cart-line__name,
.samecom-cart-line__variant,
.samecom-mini-lines li,
.samecom-mini-lines li > span,
.samecom-mini-lines strong,
.samecom-mini-lines small,
.samecom-order-table th,
.samecom-order-table td,
.samecom-product__title,
.samecom-breadcrumbs,
.samecom-field__error,
.samecom-home-card__title,
.samecom-home-contact__value,
.samecom-home-testimonial__text,
.samecom-home-testimonial__who,
.samecom-empty p {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Media and embeds never widen their container. */
.samecom video,
.samecom iframe,
.samecom embed,
.samecom object,
.samecom svg:not(.samecom-icon) { max-width: 100%; }
.samecom table { max-width: 100%; }

/* Any SAMECOM element that scrolls horizontally must also be the containing block
   for its absolutely positioned descendants, or those descendants keep their static
   position inside the track, escape the clip and widen the whole document. */
.samecom-gallery__thumbs,
.samecom-pack__thumbs,
.samecom-pack__nav,
.samecom-home-rail,
.samecom-variants-table-wrap { position: relative; }

/* Grid and flex children shrink below their content instead of pushing out. */
.samecom-grid > *,
.samecom-cart-line > *,
.samecom-mini-lines li > * { min-width: 0; }

.samecom-container { width: 100%; max-width: var(--samecom-container); margin-inline: auto; padding-inline: var(--samecom-gap); }
.samecom-container--narrow { max-width: 820px; }
.samecom-center { text-align: center; }

.samecom-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.samecom-page-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 24px; line-height: 1.2; }
.samecom-section-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 20px; line-height: 1.25; }

/* Buttons */
.samecom-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 22px; border: 2px solid transparent; border-radius: var(--samecom-radius-sm);
	font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
	cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s;
	-webkit-tap-highlight-color: transparent;
}
.samecom-btn:active:not(:disabled) { transform: translateY(1px); }
.samecom-btn:focus-visible, .samecom-qty__btn:focus-visible, .samecom-option:focus-visible { outline: 3px solid color-mix(in srgb, var(--samecom-primary) 45%, transparent); outline-offset: 2px; }
.samecom-btn--primary { background: var(--samecom-primary); color: #fff !important; }
.samecom-btn--primary:hover:not(:disabled) { background: var(--samecom-primary-hover); }
.samecom-btn--outline { background: transparent; border-color: var(--samecom-primary); color: var(--samecom-primary) !important; }
.samecom-btn--outline:hover:not(:disabled) { background: var(--samecom-primary); color: #fff !important; }
.samecom-btn--ghost { background: var(--samecom-soft); color: var(--samecom-text) !important; }
.samecom-btn--ghost:hover { background: var(--samecom-border); }
.samecom-btn--light { background: #fff; color: var(--samecom-primary) !important; }
.samecom-btn--whatsapp { background: var(--samecom-whatsapp); border-color: var(--samecom-whatsapp); color: #fff !important; }
.samecom-btn--whatsapp:hover:not(:disabled) { background: var(--samecom-whatsapp-dark); border-color: var(--samecom-whatsapp-dark); }
.samecom-btn--block { display: flex; width: 100%; }
.samecom-btn--sm { min-height: 38px; padding: 6px 14px; font-size: .9rem; }
.samecom-btn--lg { min-height: 54px; padding: 14px 28px; font-size: 1.08rem; }
.samecom-btn:disabled, .samecom-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.samecom-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.samecom-btn.is-busy::after {
	content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid currentColor; border-color: #fff #fff transparent transparent; animation: samecom-spin .7s linear infinite;
}
.samecom-btn--outline.is-busy::after, .samecom-btn--ghost.is-busy::after { border-color: var(--samecom-primary) var(--samecom-primary) transparent transparent; }
.samecom-btn.is-added { border-color: var(--samecom-success); color: var(--samecom-success) !important; }
.samecom-icon { width: 1.2em; height: 1.2em; flex: none; }
.samecom-link { color: var(--samecom-primary); }

@keyframes samecom-spin { to { transform: rotate(360deg); } }

/* Price, stock, badges */
.samecom-price { font-weight: 700; color: var(--samecom-text); }
.samecom-price del, del.samecom-price-regular { color: var(--samecom-muted); font-weight: 400; margin-inline-end: 6px; }
.samecom-price ins { text-decoration: none; color: var(--samecom-primary); }
.samecom-stock { font-size: .92rem; color: var(--samecom-success); font-weight: 600; }
.samecom-stock.is-out { color: var(--samecom-danger); }
.samecom-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
	line-height: 1.5; background: var(--samecom-soft); color: var(--samecom-text);
}
.samecom-badge--sale { background: var(--samecom-primary); color: #fff; }
.samecom-badge--soldout { background: #374151; color: #fff; }
.samecom-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--samecom-status, #6b7280) 14%, #fff); color: var(--samecom-status, #374151); }

/* Messages */
.samecom-message { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--samecom-radius-sm); font-size: .95rem; background: var(--samecom-soft); }
.samecom-message--success { background: #ecfdf5; color: var(--samecom-success); }
.samecom-message--error { background: #fef2f2; color: var(--samecom-danger); }
.samecom-message[hidden] { display: none; }
.samecom-note { font-size: .9rem; color: var(--samecom-muted); margin: 10px 0; }
.samecom-error-text { color: var(--samecom-danger); }

/* Breadcrumbs */
.samecom-breadcrumbs { font-size: .9rem; color: var(--samecom-muted); margin: 16px 0; }
.samecom-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.samecom-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 6px; opacity: .6; }
.samecom-breadcrumbs a { text-decoration: none; }
.samecom-breadcrumbs a:hover { color: var(--samecom-primary); text-decoration: underline; }

/* Quantity */
.samecom-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--samecom-border); border-radius: var(--samecom-radius-sm); overflow: hidden; background: #fff; height: 46px; }
.samecom-qty__btn { width: 42px; border: 0; background: var(--samecom-soft); font-size: 1.2rem; cursor: pointer; color: var(--samecom-text); }
.samecom-qty__btn:hover { background: var(--samecom-border); }
.samecom-qty input { width: 52px; border: 0; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; appearance: textfield; background: transparent; color: inherit; }
.samecom-qty input::-webkit-outer-spin-button, .samecom-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.samecom-qty--sm { height: 38px; }
.samecom-qty--sm .samecom-qty__btn { width: 34px; }
.samecom-qty--sm input { width: 42px; }

/* Empty states */
.samecom-empty { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; color: var(--samecom-muted); }
.samecom-empty svg { color: var(--samecom-border); margin-bottom: 12px; }
.samecom-empty h1, .samecom-empty h2 { color: var(--samecom-text); font-size: 1.35rem; margin: 0 0 8px; }
.samecom-empty .samecom-btn { margin-top: 16px; }

/* Rich content */
.samecom-content > :first-child { margin-top: 0; }
.samecom-content > :last-child { margin-bottom: 0; }

/* Totals (shared by cart, checkout and landing order forms) */
.samecom-totals { margin: 0; }
.samecom-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--samecom-border); }
.samecom-totals dt { color: var(--samecom-muted); }
.samecom-totals dd { margin: 0; font-weight: 600; }
.samecom-totals__total { border-bottom: 0 !important; font-size: 1.15rem; }
.samecom-totals__total dt { color: var(--samecom-text); font-weight: 700; }
.samecom-totals__total dd { color: var(--samecom-primary); font-weight: 800; }

/* Cart bar */
.samecom-cart-bar {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 9990;
	background: var(--samecom-surface); border-top: 1px solid var(--samecom-border);
	box-shadow: 0 -4px 20px rgba(17, 24, 39, .08);
	padding: 10px var(--samecom-gap) calc(10px + env(safe-area-inset-bottom));
	animation: samecom-slide-up .25s ease-out;
}
.samecom-cart-bar[hidden] { display: none; }
.samecom-cart-bar__inner { max-width: var(--samecom-container); margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.samecom-cart-bar__icon { font-size: 1.3rem; }
.samecom-cart-bar__count { font-weight: 600; }
.samecom-cart-bar__total { font-weight: 700; color: var(--samecom-primary); margin-inline-end: auto; }
.samecom-cart-bar__close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--samecom-muted); padding: 4px 8px; min-width: 36px; min-height: 36px; }
.samecom-cart-bar__close:hover { color: var(--samecom-text); }
@media (max-width: 520px) {
	.samecom-cart-bar__inner { flex-wrap: wrap; gap: 8px; }
	.samecom-cart-bar__icon { display: none; }
	.samecom-cart-bar__view, .samecom-cart-bar__checkout { flex: 1 1 40%; }
	.samecom-cart-bar__close { position: absolute; inset-inline-end: 6px; top: 4px; }
	.samecom-cart-bar__total { margin-inline-end: 36px; }
}
@keyframes samecom-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.samecom-cart-bar { animation: none; }
	.samecom-btn { transition: none; }
}

/* Keep page content and the theme's floating buttons clear of the cart bar. */
body.samecom-has-cartbar { padding-bottom: var(--samecom-cartbar-height); }
/* Theme offsets preserved, lifted by the bar height: WhatsApp 20/15/10px, chatbot toggle 25/15px, chat window 100/70px. */
body.samecom-has-cartbar .samra-whatsapp-float { bottom: calc(var(--samecom-cartbar-height) + 20px) !important; }
body.samecom-has-cartbar .samra-chatbot-toggle { bottom: calc(var(--samecom-cartbar-height) + 25px) !important; }
body.samecom-has-cartbar .samra-chatbot-container { bottom: calc(var(--samecom-cartbar-height) + 100px) !important; max-height: calc(100vh - var(--samecom-cartbar-height) - 120px); }
@media (max-width: 768px) {
	body.samecom-has-cartbar .samra-whatsapp-float { bottom: calc(var(--samecom-cartbar-height) + 15px) !important; }
}
@media (max-width: 480px) {
	body.samecom-has-cartbar .samra-whatsapp-float { bottom: calc(var(--samecom-cartbar-height) + 10px) !important; }
	body.samecom-has-cartbar .samra-chatbot-toggle { bottom: calc(var(--samecom-cartbar-height) + 15px) !important; }
	body.samecom-has-cartbar .samra-chatbot-container { bottom: calc(var(--samecom-cartbar-height) + 70px) !important; height: calc(100vh - var(--samecom-cartbar-height) - 120px); }
}

/* ---------------------------------------------------------------------------
 * Smart variant selection (sequential, dependency-aware).
 * These live in core.css because every surface that prints a buy box loads it:
 * the product page, landing pages, Premium Cards and the quick-buy cards.
 * ------------------------------------------------------------------------- */

.samecom-buy-box--smart fieldset[data-attribute][hidden] { display: none; }
/* An option removed from the choices must really disappear: the class sets a display
 * value, which would otherwise beat the browser's rule for the hidden attribute. */
.samecom-option[hidden], .samecom-pc-swatch[hidden], label[hidden].samecom-option { display: none; }
.samecom-variant-note { margin: 2px 0 10px; font-size: .88rem; min-width: 0; overflow-wrap: anywhere; }
.samecom-variant-note.is-hint { color: var(--samecom-muted); }
.samecom-variant-note.is-summary { color: var(--samecom-text); font-weight: 600; }
.samecom-variant-note.is-out { color: #b91c1c; }
.samecom-variant-note:empty { display: none; }

/* A colour chip only where the value really names a colour; sizes stay labels. */
.samecom-option--swatch::before {
	content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-inline-end: 8px;
	border-radius: 50%; background: var(--samecom-swatch, transparent);
	box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .22);
}
.samecom-option--thumb { padding-inline-start: 6px; gap: 8px; }
.samecom-option__thumb { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.samecom-buy-box.is-adding { position: relative; }
.samecom-buy-box.is-adding .samecom-attribute__options { opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------------------
 * Toasts: compact feedback instead of a blocking browser alert.
 * ------------------------------------------------------------------------- */

.samecom-toasts {
	position: fixed; z-index: 100001; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	pointer-events: none;
}
.samecom-toast {
	pointer-events: auto; max-width: min(420px, 100%); min-width: 0;
	padding: 10px 14px; border-radius: var(--samecom-radius-sm);
	background: #111827; color: #fff; font-size: .9rem; cursor: pointer;
	box-shadow: 0 8px 24px rgba(17, 24, 39, .28);
	overflow-wrap: anywhere; opacity: 1; transition: opacity .2s ease, transform .2s ease;
}
.samecom-toast--error { background: #b91c1c; }
.samecom-toast--success { background: #15803d; }
.samecom-toast.is-leaving { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .samecom-toast { transition: none; } }