/**
 * OK.Station — Identidad visual.
 * Tema hijo de Storefront. Basado en el Brand Book de OK.Dock / OK.station.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* ============================================================
   1. Variables de marca
   ============================================================ */
:root {
	--okd-blue: #066CFF;
	--okd-cyan: #00C6FF;
	--okd-purple: #9C1DFF;
	--okd-orange: #FF7C19;
	--okd-gray: #DBDBDB;
	--okd-black: #000000;
	--okd-white: #FFFFFF;

	--okd-gradient: linear-gradient(90deg, #00C6FF, #066CFF, #9C1DFF, #FF7C19);
	--okd-gradient-blue-cyan: linear-gradient(135deg, #066CFF, #00C6FF);
	--okd-gradient-purple-blue: linear-gradient(135deg, #9C1DFF, #066CFF, #00C6FF);

	--okd-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--okd-radius-pill: 50px;
}

/* ============================================================
   2. Base: tipografia, enlaces, titulos
   ============================================================ */
body {
	font-family: var(--okd-font);
	font-weight: 400;
	color: var(--okd-black);
}

a {
	color: var(--okd-blue);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--okd-cyan);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--okd-font);
	font-weight: 700;
	color: var(--okd-black);
}

/* Texto destacado / accent */
.okd-accent {
	color: var(--okd-blue);
	font-weight: 600;
}

/* ============================================================
   3. Botones
   Se usa !important porque Storefront inyecta CSS dinamico del
   Personalizador para los colores de boton, que de otro modo gana.
   ============================================================ */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
a.add_to_cart_button,
.single_add_to_cart_button {
	background-color: var(--okd-blue) !important;
	background-image: none !important;
	color: var(--okd-white) !important;
	border: none;
	border-radius: var(--okd-radius-pill);
	font-family: var(--okd-font);
	font-weight: 600;
	padding: 0.7em 1.7em;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
a.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
	background-image: var(--okd-gradient-blue-cyan) !important;
	color: var(--okd-white) !important;
	box-shadow: 0 4px 14px rgba(6, 108, 255, 0.35);
}

/* Boton secundario: contorno, forma pill */
.okd-button-secondary {
	display: inline-block;
	background: transparent;
	color: var(--okd-blue);
	border: 2px solid var(--okd-blue);
	border-radius: var(--okd-radius-pill);
	font-family: var(--okd-font);
	font-weight: 600;
	padding: 0.6em 1.6em;
	transition: background 0.25s ease, color 0.25s ease;
}

.okd-button-secondary:hover {
	background: var(--okd-blue);
	color: var(--okd-white);
}

/* ============================================================
   4. Header del sitio
   ============================================================ */
.site-header {
	background-color: var(--okd-white);
	border-bottom: 2px solid var(--okd-blue);
}

/* Logo: muestra la imagen del brand book sobre el titulo del sitio.
   Si mas adelante se define un logo desde el Personalizador, esta
   regla puede eliminarse. */
.site-header .site-branding .site-title a {
	display: block;
	width: 240px;
	max-width: 60vw;
	height: 64px;
	background-image: url('https://okstation.mx/wp-content/uploads/2026/05/Ok.station-Logo-Original.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
}

.site-header .site-description {
	display: none;
}

/* ============================================================
   5. Secciones hero
   ============================================================ */
.okd-hero,
.storefront-hero {
	background: var(--okd-gradient-blue-cyan);
	color: var(--okd-white);
}

.okd-hero h1,
.okd-hero h2,
.okd-hero h3,
.okd-hero a,
.storefront-hero h1,
.storefront-hero h2,
.storefront-hero a {
	color: var(--okd-white);
}

/* ============================================================
   6. WooCommerce
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price,
.price .amount {
	color: var(--okd-blue) !important;
	font-weight: 600;
}

/* Badge de oferta en forma pill */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--okd-orange);
	color: var(--okd-white);
	border-radius: var(--okd-radius-pill);
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 0.5em 1em;
	font-weight: 600;
}

/* ============================================================
   7. Footer
   ============================================================ */
.site-footer {
	background-color: var(--okd-black);
	color: var(--okd-white);
}

.site-footer a {
	color: var(--okd-cyan);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--okd-white);
}

/* ============================================================
   8. Utilidades pill: badges y tags
   ============================================================ */
.okd-pill,
.tagcloud a,
.wp-block-tag-cloud a,
.widget_product_tag_cloud a {
	display: inline-block;
	border-radius: var(--okd-radius-pill);
	padding: 0.35em 1em;
	background-color: var(--okd-gray);
	color: var(--okd-black);
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}

.tagcloud a:hover,
.wp-block-tag-cloud a:hover,
.widget_product_tag_cloud a:hover {
	background-color: var(--okd-blue);
	color: var(--okd-white);
}