/*
Theme Name:  Icoone
Theme URI:   https://dev.icoone.pl
Description: Motyw potomny przygotowany pod projekt Icoone. 
Author:      Wiktor Nieradka
Author URI:  https://dev.icoone.pl
Template:    hello-elementor
Version:     1.0.0
Requires PHP: 7.4
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: icoone
Tags: elementor, woocommerce, custom
*/

/* ==========================================================================
   1. Zmienne globalne
   Kolory typograficzne trzymaj w Elementor > Ustawienia witryny (Global Colors
   / Global Fonts). Ponizsze zmienne sluza rzeczom, ktorych Elementor nie
   obsluguje globalnie: cienie, promienie, przejscia, siatki, breakpointy.
   ========================================================================== */

:root {
	/* Odstepy */
	--ico-space-xs: 0.5rem;
	--ico-space-sm: 1rem;
	--ico-space-md: 2rem;
	--ico-space-lg: 4rem;
	--ico-space-xl: 6rem;

	/* Zaokraglenia */
	--ico-radius-sm: 4px;
	--ico-radius-md: 8px;
	--ico-radius-lg: 16px;
	--ico-radius-full: 999px;

	/* Cienie */
	--ico-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--ico-shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
	--ico-shadow-lg: 0 12px 40px rgba(0, 0, 0, .12);

	/* Ruch */
	--ico-transition: .25s cubic-bezier(.4, 0, .2, 1);

	/* Warstwy */
	--ico-z-header: 100;
	--ico-z-overlay: 900;
	--ico-z-modal: 1000;

	/* Kolory pomocnicze (nie sa Global Colors Elementora) */
	--ico-border: #e5e5e5;
	--ico-muted: #6b7280;
	--ico-success: #16a34a;
	--ico-error: #dc2626;
	
	/*boxshadow*/
	--ico-shadow: 4px 4px 8px 0 rgba(41, 39, 36, 0.05);
}

/* ==========================================================================
   2. Baza
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* Widoczny focus dla klawiatury – wymog dostepnosci (WCAG 2.4.7) */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Offset kotwic pod sticky header – ustaw wysokosc naglowka */
:target {
	scroll-margin-top: 100px;
}

/* Klasa dla tresci tylko dla czytnikow ekranu */
.ico-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. Naglowek / stopka
   ========================================================================== */

/* Miejsce na style sticky headera, mega menu, przelacznika jezykow itd. */

/* ==========================================================================
   4. Elementor – poprawki
   ========================================================================== */

/* Pelna szerokosc sekcji przy motywie z marginesami */
.elementor-section.elementor-section-full_width > .elementor-container {
	max-width: 100%;
}

/* ==========================================================================
   5. WooCommerce
   ========================================================================== */

/* Komunikaty Woo */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--ico-radius-md);
}

/* Karta produktu w archiwum */
/* ul.products li.product { } */

/* Karta produktu – widok pojedynczy */
/* .single-product div.product { } */

/* Koszyk i zamowienie */
/* .woocommerce-cart-form { } */
/* form.woocommerce-checkout { } */

/* ==========================================================================
   6. Formularze (Elementor Forms / Contact Form 7)
   ========================================================================== */

/* ==========================================================================
   7. Komponenty wlasne
   ========================================================================== */

/* ==========================================================================
   8. Responsywnosc
   Breakpointy zgodne z domyslnymi Elementora.
   ========================================================================== */

/* Tablet: do 1024px */
@media (max-width: 1024px) {
}

/* Mobile landscape: do 880px */
@media (max-width: 880px) {
}

/* Mobile: do 767px */
@media (max-width: 767px) {
}

/* ==========================================================================
   9. Wydruk
   ========================================================================== */

@media print {
	header, footer, .elementor-location-header, .elementor-location-footer,
	.no-print {
		display: none !important;
	}
}
/* ==========================================================================
   Rozwijana treść "Czytaj więcej"
   Widget w Elementorze: Zaawansowane -> Klasy CSS -> ico-more
   Poniżej 768 px treść jest całkowicie ukryta do momentu rozwinięcia.
   ========================================================================== */

.ico-more {
	--more-accent: #806A4C;
}

.ico-more .ico-more__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--more-accent);
	font: inherit;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.ico-more .ico-more__chevron {
	flex: 0 0 auto;
	transition: transform .25s ease;
}

/* ---------- Telefon ---------- */
@media (max-width: 767px) {

	.ico-more .ico-more__toggle {
		display: flex;
	}

	.ico-more .ico-more__content {
		overflow: hidden;
		max-height: 0;
		transition: max-height .35s ease;
	}

	.ico-more.is-open .ico-more__content {
		max-height: 200em;
	}

	/* Odstęp pojawia się dopiero po rozwinięciu. */
	.ico-more.is-open .ico-more__toggle {
		margin-bottom: 12px;
	}

	/* Margines ostatniego akapitu potrafi wyjść poza max-height: 0
	   i zostawić szczelinę pod przyciskiem. */
	.ico-more:not(.is-open) .ico-more__content > :last-child {
		margin-bottom: 0;
	}

	.ico-more.is-open .ico-more__chevron {
		transform: rotate(180deg);
	}

	.ico-more .ico-more__toggle:focus-visible {
		outline: 2px solid var(--more-accent);
		outline-offset: 4px;
		border-radius: 4px;
	}
}

/* W edytorze Elementora nie zwijamy – inaczej nie widać, co się edytuje. */
.elementor-editor-active .ico-more .ico-more__content {
	max-height: none;
}


/* ==========================================================================
   Układ formularzy logowania i rejestracji
   Dodaj do style.css motywu potomnego.

   Siatka jest własna, nie z WooCommerce. Klasy .form-row-first/-last działają
   tylko wewnątrz elementu z klasą .woocommerce, której na naszych stronach
   nie ma – stąd pola układały się jedno pod drugim.
   ========================================================================== */

.icoone-auth {
	--auth-gap: 20px;          /* odstęp między polami w rzędzie */
	--auth-row-gap: 18px;      /* odstęp między rzędami */
}

/* Pojedyncze pole na całą szerokość */
.icoone-auth .icoone-row-wide {
	margin: 0 0 var(--auth-row-gap);
}

/* Rzędy wielokolumnowe */
.icoone-auth .icoone-grid {
	display: grid;
	gap: 0 var(--auth-gap);
	margin: 0 0 var(--auth-row-gap);
}

.icoone-auth .icoone-grid--2 {
	grid-template-columns: 1fr 1fr;
}

/* Kraj | Kod pocztowy | Miasto.
   Kod pocztowy jest węższy – to pole na kilka znaków, nie ma powodu,
   żeby zajmowało tyle miejsca co nazwa miasta. */
.icoone-auth .icoone-grid--3 {
	grid-template-columns: 1fr 0.8fr 1.2fr;
}

.icoone-auth .icoone-grid .icoone-col {
	margin: 0;
	min-width: 0;   /* bez tego długie wartości rozpychają kolumnę siatki */
}

/* ---------- Pola ---------- */

.icoone-auth label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
}

.icoone-auth .input-text,
.icoone-auth input[type="text"],
.icoone-auth input[type="email"],
.icoone-auth input[type="tel"],
.icoone-auth input[type="password"],
.icoone-auth select {
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Telefon ---------- */

@media (max-width: 767px) {
	.icoone-auth .icoone-grid--2,
	.icoone-auth .icoone-grid--3 {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.icoone-auth .icoone-grid .icoone-col {
		margin: 0 0 var(--auth-row-gap);
	}

	.icoone-auth .icoone-grid .icoone-col:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Przełącznik widoczności hasła
   ========================================================================== */

.icoone-pass {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}

/* Pole ma zająć całą wolną przestrzeń.
   min-width: 0 jest konieczne – bez tego flex nie pozwoli polu
   zwęzić się poniżej domyślnej szerokości i ikona wypadnie poza kontener. */
.icoone-pass input[type="password"],
.icoone-pass input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.icoone-auth .icoone-pass__toggle,
.icoone-auth .icoone-pass__toggle:hover,
.icoone-auth .icoone-pass__toggle:focus,
.icoone-auth .icoone-pass__toggle:active {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 52px !important;
	min-width: 0 !important;
	max-width: none;
	height: 52px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	background-color: #F8F7F6 !important;
	border: solid 1px !important;
	border-color: #E7E1DA !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	color: #806A4C !important;
	line-height: 1 !important;
	font-size: 0 !important;
	cursor: pointer;
	transition: color .2s ease;
}



/* Rozmiar ikony niezależny od reguł motywu */
.icoone-auth .icoone-pass__toggle svg {
	display: block;
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
}

/* ==========================================================================
   FORMULARZE ICOONE — arkusz uniwersalny
   ========================================================================== */

:root {
	/* Kolory */
	--ico-accent:        #806A4C;   /* brąz – nagłówki, zaznaczenia */
	--ico-text:          #2E3038;
	--ico-card-border:   #E7E1DA;
	--ico-field-border:  #C9CBCF;
	--ico-btn-bg:        #DDD3C6;
	--ico-btn-bg-hover:  #CFC2B1;
	--ico-error:         #B3261E;

	/* Kształty */
	--ico-card-radius:   24px;
	--ico-field-radius:  16px;
	--ico-check-radius:  2px;

	/* Wymiary */
	--ico-field-height:  52px;
	--ico-field-pad:     18px;
	--ico-gap:           20px;
	--ico-row-gap:       18px;
}

/* ==========================================================================
   1. Karta formularza
   ========================================================================== */

.icoone-auth,
.icoone-gabinet {
	border: 1px solid var(--ico-card-border);
	border-radius: var(--ico-card-radius);
	background: #fff;
	padding: 24px 28px;
}

/* Karta gabinetu ma własne sekcje z paskami nagłówków – padding daje sekcja. */
.icoone-gabinet {
	padding: 0;
	border: 0;
}

.icoone-gabinet__section {
	border: 1px solid var(--ico-card-border);
	border-radius: var(--ico-card-radius);
	overflow: hidden;
	margin: 0 0 22px;
}

.icoone-gabinet__body {
	padding: 24px 28px;
}

/* ==========================================================================
   2. Nagłówki sekcji
   ========================================================================== */

.icoone-register-section h3,
.icoone-gabinet__title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	color: var(--ico-accent);
	line-height: 1.3;
}

.icoone-gabinet__title {
	margin: 0;
	padding: 16px 28px;
	font-size: 18px;
	background: #FAF8F5;
}

/* ==========================================================================
   3. Etykiety
   ========================================================================== */

.icoone-auth label,
.icoone-gabinet label,
.woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--ico-text);
	font-weight: 400;
}

.icoone-auth .required,
.icoone-gabinet .required {
	color: var(--ico-accent);
	text-decoration: none;
	border: 0;
}

/* ==========================================================================
   4. Pola tekstowe i listy
   ========================================================================== */

.icoone-auth .input-text,
.icoone-auth input[type="text"],
.icoone-auth input[type="email"],
.icoone-auth input[type="tel"],
.icoone-auth input[type="url"],
.icoone-auth input[type="password"],
.icoone-auth select,
.icoone-gabinet .input-text,
.icoone-gabinet input[type="text"],
.icoone-gabinet input[type="email"],
.icoone-gabinet input[type="tel"],
.icoone-gabinet input[type="url"],
.icoone-gabinet select,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	width: 100%;
	height: var(--ico-field-height);
	padding: 0 var(--ico-field-pad);
	box-sizing: border-box;
	border: 1px solid var(--ico-field-border);
	border-radius: var(--ico-field-radius);
	background-color: #fff;
	font: inherit;              /* select domyślnie bierze czcionkę systemową */
	font-size: 15px;
	color: var(--ico-text);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.icoone-auth textarea,
.icoone-gabinet textarea,
.woocommerce form .form-row textarea {
	height: auto;
	min-height: 120px;
	padding: 14px var(--ico-field-pad);
	border: 1px solid var(--ico-field-border);
	border-radius: var(--ico-field-radius);
	font: inherit;
	width: 100%;
	box-sizing: border-box;
}

.icoone-auth .input-text:focus,
.icoone-auth select:focus,
.icoone-gabinet .input-text:focus,
.icoone-gabinet select:focus,
.woocommerce form .form-row .input-text:focus {
	outline: none;
	border-color: var(--ico-accent);
	box-shadow: 0 0 0 3px rgba(128, 106, 76, .12);
}

.icoone-auth ::placeholder,
.icoone-gabinet ::placeholder {
	color: #A9ADB4;
}

/* Własna strzałka listy rozwijanej */
.icoone-auth select,
.icoone-gabinet select,
.woocommerce form .form-row select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806A4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px;
	cursor: pointer;
}

/*
 * .woocommerce-input-wrapper to przezroczysty pojemnik na pole.
 * Nie nadajemy mu ramki ani wysokości – wygląd niesie samo pole w środku,
 * inaczej powstaje ramka w ramce i podwójna wysokość.
 */
.icoone-auth .woocommerce-input-wrapper,
.icoone-gabinet .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* ==========================================================================
   5. Pola wyboru
   ========================================================================== */

.icoone-auth input[type="checkbox"],
.icoone-gabinet input[type="checkbox"],
.woocommerce form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	padding: 0;
	border: 1.5px solid var(--ico-accent);
	border-radius: var(--ico-check-radius);
	background: #fff;
	cursor: pointer;
	vertical-align: -3px;
}

.icoone-auth input[type="checkbox"]:checked,
.icoone-gabinet input[type="checkbox"]:checked,
.woocommerce form input[type="checkbox"]:checked {
	background: var(--ico-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/68% no-repeat;
}

.icoone-auth input[type="checkbox"]:focus-visible,
.icoone-gabinet input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ico-accent);
	outline-offset: 2px;
}

/* Etykieta obok pola wyboru – w linii, nie pod spodem */
.icoone-auth label.checkbox,
.icoone-auth .form-row label:has(input[type="checkbox"]),
.icoone-gabinet label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	font-size: 15px;
	cursor: pointer;
}

.icoone-auth a,
.icoone-gabinet a {
	color: var(--ico-accent);
	text-underline-offset: 2px;
}

/* ==========================================================================
   6. Przyciski
   ========================================================================== */

.icoone-auth .woocommerce-button,
.icoone-auth .button,
.icoone-gabinet .button,
.woocommerce .icoone-auth button.button {
	display: block;
	margin: 8px auto 0;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--ico-field-radius);
	background-color: var(--ico-btn-bg);
	color: var(--ico-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.icoone-auth .woocommerce-button:hover,
.icoone-auth .button:hover,
.icoone-gabinet .button:hover {
	background-color: var(--ico-btn-bg-hover);
	color: var(--ico-text);
}

/* Przyciski w karcie gabinetu stoją w rzędzie, nie na środku */
.icoone-gabinet__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.icoone-gabinet__actions .button {
	margin: 0;
}

.icoone-gabinet__cancel {
	color: var(--ico-text);
	opacity: .65;
}

/* ==========================================================================
   7. Odsyłacz pod formularzem
   ========================================================================== */

.icoone-auth__switch {
	margin-top: 4px;
	text-align: center;
	font-size: 15px;
}

.icoone-auth .lost_password {
	margin: 4px 0 0;
	font-size: 15px;
	text-align: center;
}

/* ==========================================================================
   8. Układ — siatka pól
   ========================================================================== */

.icoone-auth .icoone-row-wide,
.icoone-gabinet .icoone-row-wide {
	margin: 0 0 var(--ico-row-gap);
}

.icoone-auth .icoone-grid,
.icoone-gabinet .icoone-grid {
	display: grid;
	gap: 0 var(--ico-gap);
	margin: 0 0 var(--ico-row-gap);
}

.icoone-auth .icoone-grid--2,
.icoone-gabinet .icoone-grid--2 { grid-template-columns: 1fr 1fr; }

.icoone-auth .icoone-grid--3,
.icoone-gabinet .icoone-grid--3 { grid-template-columns: 1fr 0.8fr 1.2fr; }

.icoone-auth .icoone-grid .icoone-col,
.icoone-gabinet .icoone-grid .icoone-col {
	margin: 0;
	min-width: 0;   /* bez tego długie wartości rozpychają kolumnę */
}

/* ==========================================================================
   9. Elementy specyficzne — gabinet
   ========================================================================== */

.icoone-devices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.icoone-devices__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--ico-field-border);
	border-radius: 12px;
	font-size: 15px;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.icoone-devices__item:hover { border-color: var(--ico-accent); }

.icoone-devices__item:has(input:checked) {
	border-color: var(--ico-accent);
	background: #FAF8F5;
}

.icoone-contact-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	align-items: center;
	gap: var(--ico-gap);
	margin: 0 0 var(--ico-row-gap);
}

.icoone-contact-row__label { font-weight: 600; }
.icoone-contact-row .icoone-grid { margin: 0; }

.icoone-logo__current {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 10px;
}

.icoone-logo__current img {
	max-width: 90px;
	height: auto;
	border: 1px solid var(--ico-card-border);
	border-radius: 8px;
}

.icoone-gabinet input[type="file"] {
	width: 100%;
	padding: 14px var(--ico-field-pad);
	border: 1px dashed var(--ico-field-border);
	border-radius: var(--ico-field-radius);
	background: #fff;
	box-sizing: border-box;
	cursor: pointer;
}

/* ==========================================================================
   10. Przełącznik widoczności hasła
   ========================================================================== */

.icoone-pass {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}

.icoone-pass input {
	flex: 1 1 auto;
	min-width: 0;
}

.icoone-auth .icoone-pass__toggle,
.icoone-auth .icoone-pass__toggle:hover {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 0 !important;   /* motywy skalują SVG w em – zerujemy bazę */
	line-height: 1 !important;
	color: var(--ico-accent) !important;
	cursor: pointer;
}

.icoone-auth .icoone-pass__toggle svg {
	display: block;
	width: 22px !important;
	height: 22px !important;
}

/* ==========================================================================
   11. Komunikaty
   ========================================================================== */

.icoone-auth .woocommerce-error,
.icoone-auth .woocommerce-message,
.icoone-auth .woocommerce-info,
.icoone-gabinet-notices .woocommerce-message {
	border-radius: var(--ico-field-radius);
	border-left: 3px solid var(--ico-accent);
}

.icoone-auth .woocommerce-error { border-left-color: var(--ico-error); }

.icoone-register-info {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-radius: var(--ico-field-radius);
	background: #FAF8F5;
	font-size: 15px;
}

/* ==========================================================================
   12. Telefon
   ========================================================================== */

@media (max-width: 767px) {

	:root {
		--ico-field-height: 48px;
		--ico-field-pad: 16px;
	}

	.icoone-auth,
	.icoone-gabinet__body {
		padding: 20px 16px;
	}

	.icoone-auth .icoone-grid--2,
	.icoone-auth .icoone-grid--3,
	.icoone-gabinet .icoone-grid--2,
	.icoone-gabinet .icoone-grid--3 {
		grid-template-columns: 1fr;
	}

	.icoone-auth .icoone-grid .icoone-col,
	.icoone-gabinet .icoone-grid .icoone-col {
		margin-bottom: var(--ico-row-gap);
	}

	.icoone-auth .icoone-grid .icoone-col:last-child,
	.icoone-gabinet .icoone-grid .icoone-col:last-child {
		margin-bottom: 0;
	}

	.icoone-contact-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.icoone-auth .woocommerce-button,
	.icoone-gabinet .button {
		width: 100%;
	}

	.icoone-register-section h3 {
		font-size: 20px;
	}
}

/* ==========================================================================
   13. Zakładka "Moje dane"
   ========================================================================== */

.icoone-account__hint {
	margin: 4px 0 0;
	font-size: 14px;
	color: #8A8F98;
}

/* ==========================================================================
   Nawigacja panelu klienta (Moje konto)
   Dodaj do style.css motywu potomnego.
   ========================================================================== */
 
/*
 * box-sizing jest tu kluczowy: karta treści ma padding i ramkę, które przy
 * domyślnym content-box doliczają się do szerokości. Suma kolumn przekracza
 * wtedy 100% i treść spada pod nawigację.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
}
 
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 26%;
	float: left;
	margin-right: 4%;
}
 
.woocommerce-account .woocommerce-MyAccount-content {
	width: 70%;
	float: right;
}
 
/* Lista bez punktorów – motyw dodaje je domyślnie */
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
 
.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
.woocommerce-MyAccount-navigation li::marker {
	content: "";
}
 
/* ---------- Pozycja ---------- */
 
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 40px;
	border: 1px solid var(--ico-card-border, #E7E1DA);
	border-radius: 24px;
	background: #fff;
	color: var(--ico-text, #2E3038);
	font-size: 24px;
	font-weight: 400;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
	box-shadow: 4px 4px 8px 0 rgba(41, 39, 36, .05);
	line-height: 1em;
	
}
 
.woocommerce-MyAccount-navigation li a:hover {
	border-color: var(--ico-accent, #806A4C);
	color: var(--ico-accent, #806A4C);
}
 
/* ---------- Pozycja aktywna ---------- */
 
.woocommerce-MyAccount-navigation li.is-active a {
	background: #FAF7F3;
	border-color: #F0E9E0;
	color: var(--ico-accent, #806A4C);
}
 
/* Ptaszek tylko przy aktywnej pozycji.
   Rysowany pseudoelementem, więc nie trzeba ruszać szablonów WooCommerce. */
.woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806A4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	transition: opacity .2s ease;
}
 
.woocommerce-MyAccount-navigation li.is-active a::before {
	opacity: 1;
}
 
/* ---------- Wylogowanie ---------- */
 
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #8A8F98;
}
 
/* ---------- Telefon ---------- */
 
@media (max-width: 767px) {
 
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
		margin: 0 0 24px;
	}
 
	.woocommerce-MyAccount-navigation li a {
		padding: 14px 18px;
		font-size: 15px;
	}
}

/* ==========================================================================
   Przyciski w panelu klienta (Zapisz / Anuluj)
   ========================================================================== */

.icoone-gabinet__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
}

/* Zapisz.
   Selektor zaczyna się od .woocommerce-account i wskazuje element button,
   żeby przebić style przycisków z motywu. */
.woocommerce-account .icoone-gabinet__actions button.button,
.woocommerce-account .icoone-gabinet__actions button.woocommerce-Button,
.woocommerce-account .icoone-gabinet__actions input[type="submit"] {
	margin: 0;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: 14px;
	background-color: #DDD3C6;
	background-image: none;
	color: #2E3038;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.woocommerce-account .icoone-gabinet__actions button.button:hover,
.woocommerce-account .icoone-gabinet__actions button.woocommerce-Button:hover,
.woocommerce-account .icoone-gabinet__actions input[type="submit"]:hover {
	background-color: #CFC2B1;
	color: #2E3038;
}

/* Anuluj – to odnośnik, nie przycisk, więc potrzebuje własnych reguł.
   Ten sam kształt i padding, ale białe tło z obrysem. */
.woocommerce-account .icoone-gabinet__actions a.icoone-gabinet__cancel {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 14px 30px;
	border: 1px solid #E7E1DA;
	border-radius: 14px;
	background: #fff;
	color: #2E3038;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	opacity: 1;
	transition: border-color .2s ease;
}

.woocommerce-account .icoone-gabinet__actions a.icoone-gabinet__cancel:hover {
	border-color: #806A4C;
	color: #2E3038;
	text-decoration: none;
}


/* ==========================================================================
   Strefa klienta – lista odnośników
   Dodaj do style.css motywu potomnego.
   ========================================================================== */

.icoone-hub__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 520px;
}

.icoone-hub__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.icoone-hub__item::marker {
	content: "";
}

.icoone-hub__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 40px;
	border: 1px solid #E7E1DA;
	border-radius: 24px;
	background: #fff;
	box-shadow: 4px 4px 8px 0 rgba(41, 39, 36, .05);
	color: #2E3038 !important;
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.icoone-hub__link:hover {
	border-color: #E0D6C8;
	color: #2E3038;
	text-decoration: none;
}

/* Ikona i etykieta jako jedna całość po lewej, strzałka dociśnięta w prawo */
.icoone-hub__lead {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.icoone-hub__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: #C5AB87;
}

.icoone-hub__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icoone-hub__arrow {
	flex: 0 0 auto;
	color: #806A4C;
	transition: transform .2s ease;
}

.icoone-hub__link:hover .icoone-hub__arrow {
	transform: translateX(3px);
}

.icoone-hub__guard {
	padding: 18px 22px;
	border: 1px solid #EFEBE5;
	border-radius: 16px;
	background: #fff;
}

/* Filtr nad listą zamówień */
.icoone-orders-filter {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
}

.icoone-orders-filter a {
	font-size: 14px;
	color: #806A4C;
}

@media (max-width: 767px) {
	.icoone-hub__list {
		max-width: none;
	}

	.icoone-hub__link {
		padding: 15px 20px;
		font-size: 18px;
	}

	.icoone-hub__icon {
		width: 22px;
		height: 22px;
	}
}