/* ================================================
   RED POINT WIDGETS — shared
   ================================================
   Loaded before every widget stylesheet. Holds only what is genuinely global; anything
   that belongs to one section lives in that section's own file.

   The FONTS and the design tokens come from redpoint-tokens.css, which is enqueued as this
   file's dependency — they used to live in the redpoint-child theme, but the site is built
   directly on the active theme now, so the plugin has to carry them.

   The PAGE background is not set anywhere in code: each section paints its own band, and
   the colour behind them is Elementor → Site Settings → Background (#0C0C0C). This file
   only makes sure Elementor's own wrappers do not fight the sections.
   ================================================ */

/* ------------------------------------------------
   BUTTONS INSIDE RED POINT SECTIONS ARE NOT PAINTED BY THE THEME
   ------------------------------------------------
   hello-elementor's reset.css contains, for the whole site:

       [type=button]:focus, [type=button]:hover,
       [type=submit]:focus, [type=submit]:hover,
       button:focus, button:hover { background-color: #c36 }

   So EVERY button anywhere flashes magenta on hover or focus — the add-to-cart, the quantity
   steppers, the side cart, the newsletter. The design has no such state: the reference button
   is an outline control whose BORDER brightens and whose fill never changes
   (components/BuyBox.js:23).

   Two rules are needed, and the difference matters:

   - The resting state uses `:where()`, which carries ZERO specificity, so it only supplies a
     starting point and loses to every real rule.
   - The hover/focus state CANNOT use `:where()`. The theme's selector is `button:hover`
     (0,1,1) and reset.css loads AFTER every one of our stylesheets, so anything at equal
     specificity loses on document order. The attribute selector lifts ours to (0,2,1), which
     beats the theme while still losing to a component's own `.rp-x .rp-x__y:hover` at (0,3,0)
     — so a section that genuinely wants a hover fill keeps it.

   Scoped to elements whose class begins `rp-`, so nothing outside our own markup is touched. */
:where([class^="rp-"], [class*=" rp-"]) button {
	background-color: transparent;
}

[class^="rp-"] button:hover,
[class^="rp-"] button:focus,
[class*=" rp-"] button:hover,
[class*=" rp-"] button:focus {
	background-color: transparent;
}

/* ------------------------------------------------
   SINGLE POST ARTICLE
   ------------------------------------------------
   The Figma has no blog design — the file holds only Homepage, Category and Product — so the
   Single Post template is assembled from Elementor Pro's own Post Title / Featured Image /
   Post Content widgets wrapped in RED POINT bands.

   Those widgets carry no design of their own: they inherit from the theme, and Hello
   Elementor's default body colour is near-black. On the #0C0C0C page that renders as
   invisible text. This gives them the site's typography instead.

   Scoped to `body.single-post` so it can never reach a product or a page. */
body.single-post .elementor-widget-theme-post-title .elementor-heading-title {
	font-family: 'Futurism', sans-serif;
	font-size: 60px;
	line-height: 1.05;
	color: #FFFFFF;
}

body.single-post .elementor-widget-theme-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}

body.single-post .elementor-widget-theme-post-content {
	font-family: 'Google Sans', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--rp-body, #E6E6E6);
}

body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4 {
	font-family: 'Futurism', sans-serif;
	color: #FFFFFF;
	margin: 1.6em 0 0.5em;
}

body.single-post .elementor-widget-theme-post-content a {
	color: var(--rp-accent, #FF3B3B);
}

/* The article column is boxed to the 1320 shell by the template's container, so blockquotes
   and lists only need their own rhythm. */
body.single-post .elementor-widget-theme-post-content blockquote {
	margin: 1.5em 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--rp-accent, #FF3B3B);
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	body.single-post .elementor-widget-theme-post-title .elementor-heading-title {
		font-size: 38px;
	}
}

/* ------------------------------------------------
   CONTENT PAGES  (About · What is Red Point · Shipping)
   ------------------------------------------------
   These are editorial pages, not storefront sections — built from Elementor's own content
   widgets (heading, text, image, counter, image-box, icon-box, accordion) because that is
   what the client will actually edit and extend.

   Every one of those widgets ships light-theme defaults: headings and counters render in
   Elementor's cyan, body text near-black. On #0C0C0C the page is barely readable, which is
   what the first render showed.

   Scoped to `.rp-content`, a class set on each section container when the pages are built,
   so none of this can reach the storefront, the checkout, or a page the client adds later
   that should not inherit it.
   ------------------------------------------------ */

.rp-content .elementor-widget-heading .elementor-heading-title {
	font-family: 'Futurism', sans-serif;
	color: #FFFFFF;
}

.rp-content .elementor-widget-heading h1.elementor-heading-title {
	font-size: 56px;
	line-height: 1.05;
}

.rp-content .elementor-widget-heading h2.elementor-heading-title {
	font-size: 34px;
	line-height: 1.15;
}

.rp-content .elementor-widget-heading h3.elementor-heading-title {
	font-size: 22px;
	line-height: 1.2;
}

/* Body copy. */
.rp-content .elementor-widget-text-editor {
	font-family: 'Google Sans', sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: var(--rp-body, #E6E6E6);
}

/* The standfirst under each page title. */
.rp-content .rp-lead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--rp-muted, #818181);
}

.rp-content .elementor-widget-text-editor a {
	color: var(--rp-accent, #FF3B3B);
}

/* Ordered lists carry the process steps on two of the three pages, so the numeral is part of
   the design rather than incidental. */
.rp-content .elementor-widget-text-editor ol,
.rp-content .elementor-widget-text-editor ul {
	margin: 0;
	padding-inline-start: 22px;
}

.rp-content .elementor-widget-text-editor li {
	margin-bottom: 10px;
}

.rp-content .elementor-widget-text-editor li::marker {
	color: var(--rp-accent, #FF3B3B);
	font-weight: 700;
}

.rp-content .elementor-widget-text-editor strong {
	color: #FFFFFF;
}

/* Images. */
.rp-content .elementor-widget-image img {
	border-radius: 16px;
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------
   COUNTERS — the milestones on About */
.rp-content .elementor-widget-counter .elementor-counter-number-wrapper {
	font-family: 'Futurism', sans-serif;
	font-size: 52px;
	line-height: 1;
	color: var(--rp-accent, #FF3B3B);
}

.rp-content .elementor-widget-counter .elementor-counter-title {
	margin-top: 8px;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
}

/* ------------------------------------------------
   IMAGE BOX / ICON BOX — the team and audience cards
   ------------------------------------------------
   Elementor sizes the image-box picture from a control default that renders it as a thumbnail;
   in a three-up card row it needs to fill the card. */
.rp-content .elementor-widget-image-box .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rp-content .elementor-widget-image-box .elementor-image-box-img {
	width: 100% !important;
	margin: 0 !important;
}

.rp-content .elementor-widget-image-box .elementor-image-box-img img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

.rp-content .elementor-widget-image-box .elementor-image-box-title,
.rp-content .elementor-widget-icon-box .elementor-icon-box-title {
	font-family: 'Futurism', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
}

.rp-content .elementor-widget-image-box .elementor-image-box-description,
.rp-content .elementor-widget-icon-box .elementor-icon-box-description {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rp-body, #E6E6E6);
}

/* The icon itself. Elementor's default is a generic star at a large size — repeated across
   three cards it says nothing and dominates the panel. Each card now carries a distinct
   glyph, sized down and in the accent so it marks the card rather than fills it. */
.rp-content .elementor-widget-icon-box .elementor-icon {
	font-size: 26px;
	color: var(--rp-accent, #FF3B3B);
	fill: var(--rp-accent, #FF3B3B);
}

.rp-content .elementor-widget-icon-box .elementor-icon svg {
	width: 26px;
	height: 26px;
}

.rp-content .elementor-widget-icon-box .elementor-icon-box-icon {
	margin-bottom: 14px;
}

/* Icon boxes carry the audience and delivery-option cards, so they read as panels. */
.rp-content .elementor-widget-icon-box .elementor-icon-box-wrapper {
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: var(--rp-panel, #111111);
	height: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------
   ACCORDION — the FAQ on What is Red Point */
.rp-content .elementor-accordion .elementor-accordion-item {
	margin-bottom: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--rp-panel, #111111);
}

.rp-content .elementor-accordion .elementor-tab-title {
	background-color: transparent;
	font-family: 'Google Sans', sans-serif;
	font-size: 17px;
	font-weight: 500;
}

.rp-content .elementor-accordion .elementor-tab-title a,
.rp-content .elementor-accordion .elementor-tab-title .elementor-accordion-title {
	color: #FFFFFF;
}

.rp-content .elementor-accordion .elementor-tab-title.elementor-active a,
.rp-content .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--rp-accent, #FF3B3B);
}

.rp-content .elementor-accordion .elementor-tab-content {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	background-color: transparent;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rp-body, #E6E6E6);
}

.rp-content .elementor-accordion .elementor-accordion-icon {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   CONTACT PAGE
   ------------------------------------------------
   A task page: the form and the contact details sit side by side so neither is buried. The
   form is Elementor's, which ships light-theme fields — the same problem the checkout had,
   solved the same way, with the design's own field vocabulary.
   ------------------------------------------------ */

/* `redpoint.css` is enqueued early — it is the second stylesheet on the page — so Elementor's
   frontend CSS and the theme both load after it. Anything they declare at equal specificity
   wins on document order, which is why the fields stayed light. The widget class raises this
   to (0,3,0) and `!important` settles the three properties that actually matter, rather than
   re-ordering the whole stylesheet for one form. */
.rp-contact .elementor-widget-form .elementor-field-textual,
.rp-contact .elementor-widget-form .elementor-field-group .elementor-field,
.rp-contact .elementor-widget-form input.elementor-field,
.rp-contact .elementor-widget-form textarea.elementor-field {
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 12px !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: #FFFFFF !important;
}

.rp-contact .elementor-widget-form textarea.elementor-field-textual {
	min-height: 140px;
}

.rp-contact .elementor-widget-form .elementor-field-textual:focus {
	border-color: var(--rp-accent, #FF3B3B);
	outline: none;
	box-shadow: none;
}

.rp-contact .elementor-widget-form .elementor-field-textual::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.rp-contact .elementor-widget-form .elementor-field-group > label {
	margin-bottom: 6px;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	color: var(--rp-muted, #818181);
}

/* The submit button — the pill used for every primary action on the site. */
.rp-contact .elementor-button[type="submit"],
.rp-contact .elementor-form .elementor-button {
	min-height: 48px;
	padding: 0 36px;
	border: 0;
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B);
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
}

.rp-contact .elementor-form .elementor-button:hover {
	background-color: #E02F2F;
	color: #FFFFFF;
}

/* Contact details list. */
.rp-contact .elementor-widget-icon-list .elementor-icon-list-item {
	margin-bottom: 14px;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: var(--rp-body, #E6E6E6);
}

.rp-contact .elementor-widget-icon-list .elementor-icon-list-icon i,
.rp-contact .elementor-widget-icon-list .elementor-icon-list-icon svg {
	color: var(--rp-accent, #FF3B3B);
	fill: var(--rp-accent, #FF3B3B);
	width: 18px;
	height: 18px;
}

/* Validation and send states, which only appear after a submission. */
.rp-contact .elementor-message {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
}

.rp-contact .elementor-message.elementor-message-success {
	color: var(--rp-cat-green, #36E07A);
}

.rp-contact .elementor-message.elementor-message-danger,
.rp-contact .elementor-field-group .elementor-field-required {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   POLICY PAGE  (Privacy & Security)
   ------------------------------------------------
   A policy is read differently from the other content pages: scanned for one clause, not read
   through. So it gets a narrower measure, a revision date, and an index — set on `.rp-policy`
   in addition to `.rp-content`.
   ------------------------------------------------ */

/* The revision date. First thing anyone checks on a policy, so it sits under the standfirst
   rather than buried at the foot. */
.rp-policy .rp-updated {
	margin-top: 6px;
	font-size: 14px;
	color: var(--rp-muted, #818181);
}

/* The index. */
.rp-policy .rp-toc {
	margin: 0;
	padding: 24px 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: var(--rp-panel, #111111);
	list-style: none;
}

.rp-policy .rp-toc li {
	margin-bottom: 10px;
}

.rp-policy .rp-toc li:last-child {
	margin-bottom: 0;
}

.rp-policy .rp-toc li::marker {
	content: none;
}

.rp-policy .rp-toc a {
	color: var(--rp-body, #E6E6E6);
	text-decoration: none;
}

.rp-policy .rp-toc a:hover {
	color: var(--rp-accent, #FF3B3B);
}

/* Numbered clause headings run smaller than a page heading — they are signposts inside a
   document, not section titles competing with the page title. */
.rp-policy .elementor-widget-heading h2.elementor-heading-title {
	font-size: 26px;
	scroll-margin-top: 120px; /* so an index jump does not land under the header */
}

/* ------------------------------------------------
   TABLE — delivery times on Shipping
   ------------------------------------------------
   Written as HTML inside a text widget rather than as a widget, because a four-row rate card
   does not justify a dependency and the client can edit it in place. */
.rp-content .rp-table {
	width: 100%;
	margin: 8px 0 32px;
	border-collapse: collapse;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
}

/* The theme draws vertical rules between cells, which chops a four-row rate card into a grid
   and fights the horizontal reading direction the table actually wants. */
.rp-content .rp-table th,
.rp-content .rp-table td {
	border-inline-start: 0;
	border-inline-end: 0;
}

.rp-content .rp-table th {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-weight: 500;
	text-align: start;
}

.rp-content .rp-table td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--rp-body, #E6E6E6);
}

.rp-content .rp-table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 1024px) {
	.rp-content h1.elementor-heading-title {
		font-size: 36px;
	}

	.rp-content h2.elementor-heading-title {
		font-size: 26px;
	}

	.rp-content .elementor-counter-number-wrapper {
		font-size: 38px;
	}
}

/* ------------------------------------------------
   SEARCH RESULTS
   ------------------------------------------------
   No Figma frame, so the template is composed from Elementor's archive widgets wrapped in
   the storefront's own bands. Those widgets ship light-theme colours and would be unreadable
   on #0C0C0C.

   Scoped to `body.search` so none of it reaches the product archive, which has its own
   designed widget (Product Browser). */
body.search .elementor-widget-theme-archive-title .elementor-heading-title {
	font-family: 'Futurism', sans-serif;
	font-size: 48px;
	line-height: 1.1;
	color: #FFFFFF;
}

/* The retry field — same vocabulary as the Newsletter's input. */
body.search .elementor-widget-search-form input[type="search"],
body.search .elementor-search-form__input {
	height: 48px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--rp-pill, 100px);
	background-color: rgba(255, 255, 255, 0.06);
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
}

body.search .elementor-search-form__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

body.search .elementor-search-form__submit {
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B);
	color: #FFFFFF;
}

/* Result cards. */
body.search .elementor-post {
	background-color: var(--rp-panel, #111111);
	border-radius: 16px;
	overflow: hidden;
}

body.search .elementor-post__text {
	padding: 0 20px 20px;
}

body.search .elementor-post__title,
body.search .elementor-post__title a {
	font-family: 'Futurism', sans-serif;
	font-size: 22px;
	line-height: 1.2;
	color: #FFFFFF;
}

body.search .elementor-post__title a:hover {
	color: var(--rp-accent, #FF3B3B);
}

body.search .elementor-post__excerpt,
body.search .elementor-post__excerpt p {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rp-body, #E6E6E6);
}

body.search .elementor-post__meta-data {
	color: var(--rp-muted, #818181);
}

body.search .elementor-post__read-more {
	color: var(--rp-accent, #FF3B3B);
}

/* Nothing-found message and pagination. */
body.search .elementor-posts-nothing-found {
	font-family: 'Google Sans', sans-serif;
	font-size: 18px;
	color: var(--rp-body, #E6E6E6);
}

body.search .elementor-pagination .page-numbers {
	color: var(--rp-body, #E6E6E6);
}

body.search .elementor-pagination .page-numbers.current {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   404
   ------------------------------------------------
   No Figma frame exists for this page, so the template is composed from the storefront's
   vocabulary: the Futurism display face, the accent, and the same pill CTA as the buy box.
   The message uses core Elementor widgets (heading / text-editor / button), which carry the
   theme's light-mode colours and would otherwise be near-invisible on #0C0C0C.

   Element ids come from the template (rp404b1 = the numeral, rp404b2 = the line beneath).
   Scoped to `body.error404` so none of it can reach another page. */
body.error404 .elementor-element-rp404b1 .elementor-heading-title {
	font-family: 'Futurism', sans-serif;
	font-size: 140px;
	line-height: 1;
	color: var(--rp-accent, #FF3B3B);
}

body.error404 .elementor-element-rp404b2 .elementor-heading-title {
	font-family: 'Futurism', sans-serif;
	font-size: 40px;
	line-height: 1.1;
	color: #FFFFFF;
}

body.error404 .elementor-widget-text-editor {
	font-family: 'Google Sans', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--rp-body, #E6E6E6);
	max-width: 520px;
}

body.error404 .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 36px;
	border: 0;
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B);
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	fill: #FFFFFF;
	transition: background-color 0.15s ease;
}

body.error404 .elementor-widget-button .elementor-button:hover {
	background-color: #E02F2F;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	body.error404 .elementor-element-rp404b1 .elementor-heading-title {
		font-size: 88px;
	}

	body.error404 .elementor-element-rp404b2 .elementor-heading-title {
		font-size: 28px;
	}
}

/* ------------------------------------------------
   WOOCOMMERCE NOTICES
   ------------------------------------------------
   WooCommerce prints its notices wrapper BETWEEN the header and the template's first
   section. That gap is load-bearing here: the header is transparent and stays in normal
   flow, and the section after it pulls itself up with a negative top margin to sit under
   it (see the OVERLAP note in redpoint-header.css).

   Empty, the wrapper has no height and nothing moves. As soon as a notice appears it takes
   up space in exactly that gap — the next section still pulls up by its fixed negative
   margin, so the notice lands in the header's zone and the transparent header paints over
   it. The result is unreadable.

   Fixing the wrapper takes it out of flow entirely, so it cannot disturb the overlap
   whether it is empty or not. It also gets the design's own colours instead of
   WooCommerce's default light-on-white, which is what made it look pasted on.

   z-index sits under the side cart (100000) and over the header (10). */
.woocommerce-notices-wrapper {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99997;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(560px, calc(100vw - 32px));
	pointer-events: none; /* the page underneath stays clickable; the buttons re-enable below */
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background-color: var(--rp-panel, #111111);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rp-body, #E6E6E6);
	list-style: none;
	pointer-events: auto;
}

/* A left border in the notice's own meaning — green for success, accent for a problem.
   `border-inline-start` rather than `border-left`: this one SHOULD follow the text
   direction, unlike the drawer's physical side. */
.woocommerce-notices-wrapper .woocommerce-message {
	border-inline-start: 3px solid var(--rp-cat-green, #36E07A);
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-inline-start: 3px solid var(--rp-accent, #FF3B3B);
}

.woocommerce-notices-wrapper .woocommerce-info {
	border-inline-start: 3px solid var(--rp-cat-cyan, #25D9F5);
}

/* WooCommerce floats its button to the far side and relies on a clearfix that does not
   survive being put in a flex row. */
.woocommerce-notices-wrapper .button {
	float: none;
	margin-inline-start: auto;
	padding: 8px 18px;
	border: 0;
	border-radius: var(--rp-pill, 100px);
	background-color: var(--rp-accent, #FF3B3B);
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-notices-wrapper .button:hover {
	background-color: #E02F2F;
	color: #FFFFFF;
}

/* WooCommerce's default ::before tick/cross is positioned for its own light box. */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
	display: none;
}

/* ------------------------------------------------
   ELEMENTOR WRAPPER RESETS
   ------------------------------------------------
   Every RED POINT section is a full-bleed band that draws its own background and its own
   60px gutter. Elementor's widget container adds padding of its own, which would inset the
   band and break the 1440/1320 grid the whole design is built on. */
[class*="elementor-widget-redpoint_"] {
	width: 100%;
}

[class*="elementor-widget-redpoint_"] > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

/* ------------------------------------------------
   BASE TYPE
   ------------------------------------------------
   Google Sans for body copy, Futurism for headings — the two faces the design uses. Both
   are declared in redpoint-tokens.css; this just points the widgets at them. */
[class*="elementor-widget-redpoint_"] {
	font-family: 'Google Sans', sans-serif;
	color: var(--rp-body, #E6E6E6);
}

/* ------------------------------------------------
   SECTION HEADING — shared
   ------------------------------------------------
   Several sections open with the same two-tone heading (למצוא את / ההנאה שלך, הנמכרים /
   ביותר, and so on): Futurism 80, line-height 0.9, the lead in white and the trailing
   words in accent red, with an optional kicker paragraph on the far side. It lives here,
   not in each section's file, so every section's heading stays identical.

   The title comes FIRST in the DOM so under RTL it paints on the RIGHT; the kicker is the
   second child and lands on the left. */
.rp-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 64px;
}

.rp-heading__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 80px;
	line-height: 0.9;
	text-align: right;
}

.rp-heading__lead {
	font-weight: 300;
	color: #FFFFFF;
}

.rp-heading__accent {
	color: #FF3B3B;
}

.rp-heading__kicker {
	margin: 0;
	flex-shrink: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: #E6E6E6;
	/* width is set inline from the widget — 211px on the pleasure grid, 236px on the blog
	   teaser; they are not the same and hardcoding one re-wraps the other. */
}

.rp-heading__kicker span {
	display: block;
	/* nowrap holds the design's line breaks: Chrome measures the longest kicker line a
	   fraction over the box and would otherwise wrap it to an extra line. */
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.rp-heading__title {
		font-size: 48px;
	}
	.rp-heading__kicker {
		display: none;
	}
}

/* ------------------------------------------------
   IMAGE SIZING — READ THIS BEFORE ADDING A WIDGET
   ------------------------------------------------
   Elementor ships:

       .elementor img { height: auto; }

   Specificity (0,1,1). A plain class selector is (0,1,0), so `.rp-x__media { height: 100% }`
   LOSES and the image silently falls back to its natural aspect ratio. Nothing errors — the
   image simply renders the wrong size and the crop is wrong with it.

   It cost a full debugging pass on the promo banner: the card was a correct 1320x350 but the
   image inside it rendered 1320x879, so object-fit: cover never had the box it needed and the
   banner showed a zoomed-in slice of the product instead of the whole thing.

   ANY image a RED POINT widget sizes itself must be selected with at least (0,2,0) — put an
   ancestor class in front of it:

       .rp-promo__card .rp-promo__media { height: 100%; }   ✓  wins
       .rp-promo__media               { height: 100%; }     ✗  loses to Elementor

   The rule below is a backstop for the full-bleed case, but do not rely on it alone — be
   explicit in the widget's own stylesheet. */
[class*="elementor-widget-redpoint_"] img[class*="__media"] {
	height: 100%;
	width: 100%;
	object-fit: cover;
}