body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #black;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: black;
	background-image: linear-gradient(to bottom, black, black);
	background-repeat: repeat-x;
	border-color: gray;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: white;
	color:black;
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* content */
#content {
	min-height: 600px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}

/* ==========================================================================
   ==========================================================================

   S K I N   F A C T O R Y  ·  C A P A   E D I T O R I A L   v2

   TODO lo que está ARRIBA de este bloque es el CSS de fábrica del tema
   `default` de OpenCart 3.0.3.7. NO SE BORRA: lo siguen usando categoría,
   producto, búsqueda, carrito y checkout, que se rehacen en la segunda
   pasada. Esta capa va después y pisa sólo lo que tiene que pisar.

   Bootstrap 3 y jQuery 2.1.1 siguen cargados (los necesita OpenCart), así
   que acá abajo NO se redefine `.btn`, `.row` ni `.col-*`: todo lo propio
   va con prefijo `.sf-`. Lo único de Bootstrap que se toca a propósito es
   el ancho de `.container`, para que el ancho de página sea el del diseño.

   Orden de las secciones:
     A · Tokens y tipografía
     B · Base y utilidades
     C · Header (topbar, barra, buscador, carrito, menú)
     D · Home (hero, marquee, secciones, fichas de producto, módulos)
     E · Footer
     F · Accesibilidad y movimiento reducido

   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   A · TOKENS
   ========================================================================== */
:root{
  /* --- Color (los contrastes anotados son sobre --sf-paper) --- */
  --sf-paper:#FBFAF7;
  --sf-paper-2:#F3F1EB;
  --sf-paper-3:#E8E5DC;
  --sf-white:#FFFFFF;
  --sf-ink:#16150F;
  --sf-ink-2:#55524A;      /* 7.2:1 — AA */
  --sf-ink-3:#6E6B63;      /* 5.1:1 — AA */
  --sf-line:#DEDBD1;
  --sf-line-2:#C6C2B5;
  --sf-accent:#9C4A2F;     /* 6.0:1 — AA */
  --sf-accent-soft:#F5EAE4;
  --sf-on-ink:#EFECE3;     /* texto sobre fondo tinta */
  --sf-on-ink-2:#C3BEB0;
  --sf-on-ink-3:#98937F;

  /* --- Medidas --- */
  --sf-wrap:1240px;
  --sf-gut:clamp(20px,5vw,56px);
  --sf-section:clamp(64px,10vw,132px);
  --sf-section-tight:clamp(48px,7vw,90px);
  --sf-ease:cubic-bezier(.22,.61,.36,1);

  /* --- Tipografía: ver el bloque TODO de acá abajo --- */
  --sf-f-display-system: Didot, "Didot LT Std", "Bodoni MT", "Bodoni 72", "Playfair Display", "Times New Roman", Georgia, serif;
  --sf-f-display-hosted: "Playfair Display", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;

  /* >>> ESTA ES LA ÚNICA LÍNEA QUE HAY QUE TOCAR PARA ACTIVAR LA FUENTE
         AUTO-HOSTEADA: cambiar `system` por `hosted`. <<< */
  --sf-f-display: var(--sf-f-display-system);

  --sf-f-head: var(--sf-f-display);
  --sf-f-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --sf-f-ui:   "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --sf-display-track:-.035em;
  --sf-display-lh:.98;
  --sf-ui-track:.2em;
}

/* --------------------------------------------------------------------------
   TIPOGRAFÍA · SISTEMA A (serif de alto contraste), el elegido por el cliente.

   El stack de display es el mismo del prototipo aprobado. OJO CON ESTO:
   Didot existe sólo en macOS y Bodoni MT sólo en Windows. Son fuentes DE
   SISTEMA. Hoy, en producción, la home se ve con una tipografía distinta en
   cada plataforma, y en Android / Linux cae directo a Georgia.

   ####################  T O D O   D E   P R O D U C C I Ó N  ################
   #                                                                        #
   #  HAY QUE AUTO-HOSTEAR **PLAYFAIR DISPLAY**. Es la única del stack que   #
   #  es open source (SIL OFL) y por lo tanto la única que se puede servir   #
   #  igual en todas las plataformas.                                       #
   #                                                                        #
   #  Nada de Google Fonts ni CDN: los .woff2 van en el propio dominio, en   #
   #      catalog/view/theme/skinfactory/font/                               #
   #  Subir (subset latin + latin-ext, formato woff2):                      #
   #      playfair-display-400.woff2    regular                             #
   #      playfair-display-400i.woff2   italic  (lo usan los <em> del hero)  #
   #      playfair-display-600.woff2    semibold (opcional)                  #
   #                                                                        #
   #  Después: descomentar el bloque @font-face de acá abajo y cambiar UNA   #
   #  SOLA LÍNEA en :root —                                                 #
   #      --sf-f-display: var(--sf-f-display-system);                       #
   #  pasa a                                                                #
   #      --sf-f-display: var(--sf-f-display-hosted);                       #
   #  Eso es todo el switch. Nada más cambia.                               #
   #                                                                        #
   ##########################################################################

   Bloque a descomentar (está comentado a propósito: los archivos todavía no
   están en el servidor y un 404 de fuente arruina el primer render):

   @font-face{
     font-family:"Playfair Display";
     font-style:normal;
     font-weight:400;
     font-display:swap;
     src:url("../font/playfair-display-400.woff2") format("woff2");
   }
   @font-face{
     font-family:"Playfair Display";
     font-style:italic;
     font-weight:400;
     font-display:swap;
     src:url("../font/playfair-display-400i.woff2") format("woff2");
   }
   @font-face{
     font-family:"Playfair Display";
     font-style:normal;
     font-weight:600;
     font-display:swap;
     src:url("../font/playfair-display-600.woff2") format("woff2");
   }

   -------------------------------------------------------------------------- */


/* ==========================================================================
   B · BASE Y UTILIDADES
   ========================================================================== */
body{
  background:var(--sf-paper);
  color:var(--sf-ink);
  font-family:var(--sf-f-body);
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--sf-ink)}
a:hover,a:focus{color:var(--sf-accent)}

/* El ancho de página del diseño. Se pisa el `.container` de Bootstrap a
   propósito: `.row` (margin -15px) y `.col-*` (padding 15px) se siguen
   cancelando solos contra cualquier padding del container, así que la grilla
   de Bootstrap sigue funcionando exactamente igual. */
.container{
  width:100%;
  max-width:var(--sf-wrap);
  padding-left:var(--sf-gut);
  padding-right:var(--sf-gut);
}
.sf-wrap{
  width:100%;
  max-width:var(--sf-wrap);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--sf-gut);
  padding-right:var(--sf-gut);
}

/* ¡IMPORTANTE! Bootstrap 3 le mete un clearfix a `.container`, `.row` y
   `.nav` con ::before / ::after y `content:" "`. Eso da igual mientras son
   contenedores de bloque, PERO en cuanto uno de esos elementos pasa a
   display:grid o display:flex —que es lo que hace esta capa en el header,
   el footer y las grillas de producto— esos dos pseudo-elementos se
   convierten en ITEMS de la grilla y corren todo un lugar.
   Se anulan uno por uno, sólo en los contenedores que acá se vuelven
   grid/flex. El clearfix sigue intacto en el resto del sitio. */
#top .container::before,      #top .container::after,
.sf-header__bar::before,      .sf-header__bar::after,
.sf-foot__grid::before,       .sf-foot__grid::after,
.sf-foot__bottom::before,     .sf-foot__bottom::after,
.sf-grid::before,             .sf-grid::after,
#menu .nav::before,           #menu .nav::after{content:none}

/* Saltar al contenido */
.sf-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--sf-ink);color:var(--sf-paper);
  padding:14px 20px;font-family:var(--sf-f-ui);font-size:14px;text-decoration:none;
}
.sf-skip:focus{left:12px;top:12px;color:var(--sf-paper)}

/* --- Escala tipográfica --- */
.sf-display{
  font-family:var(--sf-f-display);
  font-weight:400;
  letter-spacing:var(--sf-display-track);
  line-height:var(--sf-display-lh);
  color:var(--sf-ink);
  margin:0;
}
.sf-eyebrow{
  font-family:var(--sf-f-ui);
  font-size:11px;
  letter-spacing:var(--sf-ui-track);
  text-transform:uppercase;
  color:var(--sf-ink-3);
  font-weight:600;
  margin:0;
  line-height:1.5;
}
.sf-lede{
  font-size:clamp(15.5px,2.1vw,19px);
  color:var(--sf-ink-2);
  max-width:54ch;
  margin:0;
}

/* --- Regla stencil (el recurso gráfico de la marca: la línea con puentes
       de corte, como una plantilla de vinilo) --- */
.sf-rule{
  height:1px;border:0;margin:0;
  background:repeating-linear-gradient(90deg, var(--sf-line-2) 0 38px, transparent 38px 50px);
}

/* --- Marcas de corte en las esquinas, aparecen al hover / foco --- */
.sf-cut{
  position:absolute;top:12px;right:12px;bottom:12px;left:12px;z-index:4;pointer-events:none;
  opacity:0;transition:opacity .3s var(--sf-ease);
  background:
    linear-gradient(var(--sf-ink),var(--sf-ink)) 0    0    /18px 1px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 0    0    /1px 18px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 100% 0    /18px 1px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 100% 0    /1px 18px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 0    100% /18px 1px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 0    100% /1px 18px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 100% 100% /18px 1px no-repeat,
    linear-gradient(var(--sf-ink),var(--sf-ink)) 100% 100% /1px 18px no-repeat;
}

/* --- Botones propios. NO son `.btn` de Bootstrap a propósito: así no hay
       que pelear con sus gradientes, sombras y tamaños. --- */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;
  font-family:var(--sf-f-ui);font-size:13.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border:0;border-radius:999px;cursor:pointer;
  text-align:center;
  transition:background-color .25s var(--sf-ease), color .25s var(--sf-ease),
             border-color .25s var(--sf-ease), transform .2s var(--sf-ease);
}
.sf-btn--solid{background:var(--sf-ink);color:var(--sf-paper)}
.sf-btn--solid:hover,.sf-btn--solid:focus{background:var(--sf-accent);color:var(--sf-paper)}
.sf-btn--ghost{border:1px solid var(--sf-line-2);color:var(--sf-ink);background:transparent}
.sf-btn--ghost:hover,.sf-btn--ghost:focus{border-color:var(--sf-ink);background:var(--sf-ink);color:var(--sf-paper)}
.sf-btn:active{transform:translateY(1px)}

.sf-link-u{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--sf-f-ui);font-size:13.5px;font-weight:600;letter-spacing:.05em;
  padding-bottom:3px;border-bottom:1px solid var(--sf-line-2);
  transition:border-color .25s var(--sf-ease), gap .25s var(--sf-ease), color .25s var(--sf-ease);
}
.sf-link-u:hover,.sf-link-u:focus{border-color:var(--sf-accent);color:var(--sf-accent);gap:14px}
.sf-link-u svg{flex:none}

/* --- Marcos de foto. Fondo blanco puro detrás del packshot: las fotos de
       producto de Skin Factory ya vienen sobre blanco. --- */
.sf-ph{position:relative;overflow:hidden;background:var(--sf-white);display:block}
.sf-ph > img,
.sf-ph > a > img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:transform .7s var(--sf-ease);
}
.sf-ph--fill > img,
.sf-ph--fill > a > img{object-fit:cover}
.sf-ph--sq{aspect-ratio:1/1}
.sf-ph--43{aspect-ratio:4/3}
.sf-ph > a{display:block;width:100%;height:100%}

/* Reserva de alto para navegadores sin aspect-ratio (Safari < 15) */
@supports not (aspect-ratio: 1 / 1){
  .sf-ph--sq,.sf-ph--43{height:0}
  .sf-ph--sq{padding-bottom:100%}
  .sf-ph--43{padding-bottom:75%}
  .sf-ph--sq > img,.sf-ph--sq > a,
  .sf-ph--43 > img,.sf-ph--43 > a{position:absolute;top:0;right:0;bottom:0;left:0}
}

/* --- Pila de estados: todos los hijos van a la misma celda de grilla, así
       el grupo mide siempre lo que mide su estado más alto y al rotar no se
       mueve nada de lo que viene abajo. --- */
.sf-swp{display:grid}
.sf-swp > .sf-swp__i{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--sf-ease), visibility .55s var(--sf-ease);
}
.sf-swp > .sf-swp__i[data-on="true"]{opacity:1;visibility:visible}

/* --- Aparición al hacer scroll (sólo si hay JS) --- */
.sf-js .sf-rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--sf-ease), transform .8s var(--sf-ease)}
.sf-js .sf-rv.is-in{opacity:1;transform:none}


/* ==========================================================================
   C · HEADER
   Ojo: la estructura interna de #search, #cart, #menu, la moneda y el idioma
   NO se toca desde el marcado — sale de plantillas del tema `default`
   (common/search.twig, common/cart.twig, common/menu.twig, currency, language)
   y de selectores de common.js que dependen de ella:
       $('#search input').parent().find('button')   ← el botón de buscar
       $('header #search input')                    ← EXIGE que el buscador
                                                      viva dentro de <header>
       $('#cart > button') y $('#cart > ul')        ← el carrito AJAX
   Por eso acá abajo todo es CSS: se re-viste, no se re-arma.
   ========================================================================== */

/* --- Topbar (es el <nav id="top"> de OpenCart: moneda, idioma, cuenta,
       deseados, carrito, checkout) --- */
#top{
  background:var(--sf-ink);
  background-image:none;
  border-bottom:0;
  margin:0;
  padding:0;
  min-height:0;
  color:var(--sf-on-ink);
  font-family:var(--sf-f-ui);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#top .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2px 20px;min-height:38px;padding-top:2px;padding-bottom:2px;
}
.sf-topbar__claims{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--sf-on-ink-2);line-height:1.5;
}
.sf-topbar__claims b{font-weight:600;color:#fff}
.sf-topbar__claims .sf-sep{opacity:.35}
.sf-topbar__tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:0 4px}
/* El 2do atributo sólo aparece en la franja donde Bootstrap todavía tiene
   ocultos los rótulos de deseados / carrito / checkout (`hidden-md`) y por
   lo tanto sobra lugar. Arriba de 1200 px esos rótulos vuelven y no entra. */
.sf-topbar__claims .sf-topbar__more{display:none}
@media (min-width:768px) and (max-width:1199px){
  .sf-topbar__claims .sf-topbar__more{display:inline}
}
@media (max-width:600px){
  #top .container{justify-content:center}
  .sf-topbar__claims{justify-content:center;width:100%}
}

/* Moneda e idioma dentro del topbar */
#top .pull-left{float:none !important}
#top .btn-group{vertical-align:middle}
#top .btn-link,
#top-links li,
#top-links a{
  color:var(--sf-on-ink-2);
  text-shadow:none;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.14em;
}
#top .btn-link{
  border:0;padding:8px 10px;border-radius:999px;
  text-transform:uppercase;
  transition:color .2s var(--sf-ease), background-color .2s var(--sf-ease);
}
#top .btn-link:hover,#top .btn-link:focus,
#top-links a:hover,#top-links a:focus{color:#fff;background-color:rgba(255,255,255,.08)}
#top .btn-link strong{font-size:12px;line-height:1}
#top-links{padding-top:0;float:none !important;margin:0}
#top-links .list-inline{margin:0}
#top-links .list-inline > li{padding:0}
#top-links a{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px}
#top-links a + a{margin-left:0}
#top-links .fa{font-size:13px}
#top .dropdown-menu,
#top-links .dropdown-menu{
  background:var(--sf-paper);
  border:1px solid var(--sf-line);
  border-radius:2px;
  box-shadow:0 30px 70px -40px rgba(20,18,12,.55);
  padding:6px 0;
  text-transform:none;
  letter-spacing:0;
}
#top .dropdown-menu a,
#top .dropdown-menu button,
#top-links .dropdown-menu a{
  color:var(--sf-ink);
  font-size:13.5px;
  letter-spacing:0;
  text-transform:none;
  text-shadow:none;
}
#top .dropdown-menu li > a:hover,
#top .dropdown-menu li > a:focus,
#top-links .dropdown-menu a:hover,
#top-links .dropdown-menu a:focus,
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover,
#top #form-currency .currency-select:focus,
#top #form-language .language-select:focus{
  background:var(--sf-paper-2);
  background-image:none;
  color:var(--sf-accent);
  text-shadow:none;
}

/* --- Barra principal --- */
.sf-header{
  position:relative;
  z-index:80;
  background:var(--sf-paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--sf-ease), box-shadow .3s var(--sf-ease);
}
@media (min-width:992px){
  .sf-header{
    position:sticky;top:0;
    background:rgba(251,250,247,.94);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
  }
}
.sf-header.is-stuck{border-bottom-color:var(--sf-line)}

.sf-header__bar{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:14px;
  padding-top:16px;
  padding-bottom:16px;
}
@media (min-width:768px){
  .sf-header__bar{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(18px,3vw,44px);
    min-height:96px;
    padding-top:14px;padding-bottom:14px;
  }
}

/* Logo: sale de {{ logo }} / {{ name }} de la configuración de OpenCart */
.sf-header__brand{display:flex;flex-direction:column;gap:7px;min-width:0}
.sf-header__brand #logo{margin:0;line-height:1}
.sf-header__brand #logo a{display:inline-block;text-decoration:none}
.sf-header__brand #logo img{max-height:34px;width:auto;display:block}
@media (min-width:768px){ .sf-header__brand #logo img{max-height:42px} }
.sf-header__brand #logo h1{
  margin:0;font-family:var(--sf-f-display);font-size:26px;
  letter-spacing:var(--sf-display-track);color:var(--sf-ink);
}
.sf-header__tag{
  font-family:var(--sf-f-ui);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sf-ink-3);
}
@media (max-width:767px){ .sf-header__tag{display:none} }

/* --- Buscador ---
   Se conserva #search > input + .input-group-btn > button tal cual lo emite
   common/search.twig (common.js depende de ese parentesco). Sólo se re-viste. */
.sf-header__search{min-width:0}
header #search.input-group{
  display:flex;align-items:center;gap:10px;width:100%;margin:0;
}
header #search .form-control{
  flex:1 1 auto;width:auto;display:block;float:none;
  height:46px;padding:0 2px;
  border:0;border-bottom:1px solid var(--sf-line-2);border-radius:0;
  background:transparent;box-shadow:none;
  font-family:var(--sf-f-display);
  font-size:clamp(16px,2.2vw,21px);
  letter-spacing:var(--sf-display-track);
  color:var(--sf-ink);
  transition:border-color .25s var(--sf-ease);
}
header #search .form-control::placeholder{color:var(--sf-ink-3);opacity:1}
header #search .form-control:focus{border-bottom-color:var(--sf-accent);box-shadow:none;outline:none}
header #search .input-group-btn{
  display:flex;width:auto;flex:none;font-size:inherit;white-space:normal;vertical-align:middle;
}
header #search .input-group-btn > .btn{
  width:46px;height:46px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sf-ink);background-image:none;
  border:0;border-radius:999px;box-shadow:none;text-shadow:none;
  color:var(--sf-paper);font-size:15px;
  transition:background-color .25s var(--sf-ease);
}
header #search .input-group-btn > .btn:hover,
header #search .input-group-btn > .btn:focus{background:var(--sf-accent);color:#fff}

/* --- Carrito ---
   #cart > button y #cart > ul son selectores de common.js: no se envuelve
   nada adentro de #cart. */
.sf-header__cart{min-width:0}
#cart{margin:0}
#cart.btn-block{width:auto}
#cart > .btn{
  display:inline-flex;align-items:center;gap:9px;
  width:auto;min-height:46px;padding:0 22px;
  background:var(--sf-ink);background-image:none;
  border:0;border-radius:999px;box-shadow:none;text-shadow:none;
  color:var(--sf-paper);
  font-family:var(--sf-f-ui);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap;
  transition:background-color .25s var(--sf-ease), color .25s var(--sf-ease);
}
#cart > .btn:hover,#cart > .btn:focus{background:var(--sf-accent);color:#fff}
#cart.open > .btn{
  background:var(--sf-accent);background-image:none;
  border:0;color:#fff;box-shadow:none;text-shadow:none;
}
#cart.open > .btn:hover{color:#fff}
#cart .dropdown-menu{
  background:var(--sf-paper);
  border:1px solid var(--sf-line);
  border-radius:2px;
  box-shadow:0 30px 70px -40px rgba(20,18,12,.55);
  padding:10px;
  min-width:320px;
  z-index:1001;
}
#cart .dropdown-menu li > div{min-width:0;padding:0 6px}
#cart .dropdown-menu table{margin-bottom:10px;font-size:13px}
#cart .dropdown-menu td{vertical-align:middle}
#cart .dropdown-menu a{color:var(--sf-ink);text-decoration:none}
#cart .dropdown-menu a:hover{color:var(--sf-accent)}
#cart .dropdown-menu img{background:var(--sf-white)}
#cart .dropdown-menu p{font-family:var(--sf-f-ui);font-size:13px}
@media (max-width:767px){
  #cart .dropdown-menu{min-width:0;width:calc(100vw - 2 * var(--sf-gut));max-width:340px}
  #cart .dropdown-menu li > div{min-width:0}
}
@media (max-width:767px){
  .sf-header__bar{grid-template-columns:1fr auto;grid-template-areas:"brand cart" "search search"}
  .sf-header__brand{grid-area:brand}
  .sf-header__cart{grid-area:cart;justify-self:end}
  .sf-header__search{grid-area:search}
  #cart > .btn{padding:0 16px;font-size:11.5px}
}

/* --- Menú de categorías (common/menu.twig del tema default) --- */
.sf-nav:empty{display:none}
.sf-nav .container{padding-left:var(--sf-gut);padding-right:var(--sf-gut)}
#menu{
  background:transparent;background-image:none;
  border:0;border-top:1px solid var(--sf-line);
  border-radius:0;
  min-height:0;margin:0;
}
#menu .navbar-header{float:none}
#menu .nav{float:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0}
#menu .nav > li{float:none}
#menu .nav > li > a{
  color:var(--sf-ink);
  text-shadow:none;
  background:transparent;
  font-family:var(--sf-f-ui);
  font-size:13.5px;letter-spacing:.01em;
  padding:15px 13px;min-height:0;
  border-radius:0;
  transition:color .2s var(--sf-ease);
}
#menu .nav > li > a:hover,
#menu .nav > li > a:focus,
#menu .nav > li.open > a,
#menu .nav > li.open > a:hover,
#menu .nav > li.open > a:focus{background:transparent;color:var(--sf-accent)}
#menu .dropdown-menu{
  background:var(--sf-paper);
  border:1px solid var(--sf-line);
  border-radius:0 0 3px 3px;
  box-shadow:0 30px 70px -40px rgba(20,18,12,.5);
  padding:24px 28px 6px;
}
/* El panel necesita un ancho propio: si no, al ser `position:absolute` se
   encoge al contenido y la grilla de auto-fit colapsa en una sola columna. */
@media (min-width:768px){
  #menu .dropdown-menu{width:min(760px,86vw);max-width:none}
}
#menu .dropdown-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 30px}
#menu .dropdown-inner ul{display:block;margin:0}
#menu .dropdown-inner a{
  min-width:0;display:block;padding:10px 0;
  color:var(--sf-ink);font-family:var(--sf-f-body);font-size:14.5px;line-height:1.35;
  border-bottom:1px solid var(--sf-line);
  transition:color .2s var(--sf-ease), padding-left .2s var(--sf-ease);
}
#menu .dropdown-inner li a:hover,
#menu .dropdown-inner li a:focus{color:var(--sf-accent);background:transparent;padding-left:6px}
#menu .see-all{
  display:block;margin-top:18px;
  border-top:1px solid var(--sf-line);border-radius:0;
  padding:14px 0;
  font-family:var(--sf-f-ui);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--sf-ink);
}
#menu .see-all:hover,#menu .see-all:focus{
  background:transparent;background-image:none;color:var(--sf-accent);text-decoration:none;
}
#menu #category{
  float:left;padding-left:0;
  font-family:var(--sf-f-ui);font-size:11px;font-weight:600;
  letter-spacing:var(--sf-ui-track);text-transform:uppercase;
  line-height:44px;color:var(--sf-ink-3);text-shadow:none;
}
#menu .btn-navbar{
  float:right;margin:6px 0;
  padding:0 16px;min-height:34px;
  background:var(--sf-ink);background-image:none;
  border:0;border-radius:999px;box-shadow:none;
  color:var(--sf-paper);font-size:14px;
}
#menu .btn-navbar:hover,#menu .btn-navbar:focus,#menu .btn-navbar:active{
  background:var(--sf-accent);background-image:none;color:#fff;
}
@media (max-width:767px){
  #menu{border-radius:0}
  #menu .navbar-collapse{
    max-height:70vh;overflow-y:auto;
    border-top:1px solid var(--sf-line);
    padding-left:0;padding-right:0;margin:0;
  }
  #menu .nav{display:block}
  #menu .nav > li > a{padding:15px 0;border-bottom:1px solid var(--sf-line);font-size:16px}
  #menu div.dropdown-menu{
    margin-left:0 !important;background:transparent;border:0;box-shadow:none;
    padding:0 0 10px 16px;
  }
  #menu .dropdown-inner{display:block}
  #menu .dropdown-inner a{width:100%;color:var(--sf-ink-2);font-size:14.5px}
  #menu .dropdown-menu a:hover,
  #menu .dropdown-menu ul li a:hover{background:transparent;color:var(--sf-accent)}
  #menu .see-all{margin-top:0;color:var(--sf-ink)}
}


/* ==========================================================================
   D · HOME
   ========================================================================== */
#common-home{padding-top:var(--sf-section)}
#common-home #content{min-height:0}
.sf-home{display:block}

/* --- HERO lado a lado ---------------------------------------------------- */
.sf-hero{
  padding-top:clamp(34px,6vw,68px);
  padding-bottom:clamp(46px,7vw,84px);
}
.sf-hero__copy p{max-width:46ch}
.sf-hero__copy p.sf-eyebrow{max-width:none}
.sf-hero h1{
  font-size:calc(clamp(30px,6.2vw,44px) * 1.07);
  margin:18px 0 22px;
  max-width:19ch;
}
.sf-hero h1 em{font-style:italic;color:var(--sf-accent)}
.sf-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.sf-hero__meta{
  display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap;margin:0;
  margin-top:clamp(30px,4vw,44px);padding-top:24px;border-top:1px solid var(--sf-line);
}
.sf-hero__meta div{min-width:110px}
.sf-hero__meta dt{
  font-family:var(--sf-f-ui);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sf-ink-3);font-weight:600;
}
.sf-hero__meta dd{
  font-family:var(--sf-f-display);font-size:calc(clamp(19px,2.4vw,25px) * 1.07);
  margin-top:6px;margin-left:0;line-height:1.15;letter-spacing:var(--sf-display-track);
}

/* Rotador: foto cuadrada 1:1 */
.sf-rot{position:relative;margin-top:clamp(28px,4.5vw,46px)}
@media (max-width:999px){
  .sf-rot{max-width:440px;margin-left:auto;margin-right:auto}
}
.sf-rot__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  padding-top:16px;margin-top:16px;border-top:1px solid var(--sf-line);
}
.sf-rot__txt{
  flex:1 1 240px;min-width:0;margin:0;
  font-family:var(--sf-f-ui);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sf-ink-3);
}
.sf-rot__dots{display:flex;gap:8px;flex:none}
/* 34x24: el mínimo de área de click de WCAG 2.2 (2.5.8) es 24x24 */
.sf-rot__dot{
  width:34px;height:24px;display:grid;place-items:center;border-radius:2px;
  background:none;border:0;padding:0;cursor:pointer;
}
.sf-rot__dot i{display:block;width:26px;height:2px;background:var(--sf-line-2);transition:background-color .25s var(--sf-ease)}
.sf-rot__dot[aria-selected="true"] i{background:var(--sf-ink)}
.sf-rot__dot:hover i,.sf-rot__dot:focus i{background:var(--sf-accent)}

@media (min-width:1000px){
  .sf-hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,4vw,64px);
    align-items:center;
  }
  .sf-hero__copy{grid-column:1;grid-row:1}
  .sf-rot{grid-column:2;grid-row:1;margin-top:0;max-width:480px;justify-self:end;width:100%}
  .sf-hero__meta{grid-column:1/-1;grid-row:2}
  .sf-hero h1{max-width:none;font-size:calc(clamp(31px,3.4vw,46px) * 1.07)}
  .sf-hero__copy p.sf-lede{max-width:40ch}
  .sf-hero__cta .sf-btn{padding-left:24px;padding-right:24px}
}

/* --- Marquee de atributos ------------------------------------------------ */
.sf-marquee{
  border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);
  overflow:hidden;padding:16px 0;
}
.sf-marquee__track{display:flex;gap:40px;width:max-content;animation:sf-mq 46s linear infinite}
.sf-marquee span{
  font-family:var(--sf-f-display);letter-spacing:var(--sf-display-track);
  font-size:clamp(16px,2.4vw,24px);color:var(--sf-ink-3);
  white-space:nowrap;display:flex;align-items:center;gap:40px;
}
.sf-marquee span::after{content:"·";color:var(--sf-line-2)}
@keyframes sf-mq{to{transform:translateX(-50%)}}
.sf-marquee:hover .sf-marquee__track{animation-play-state:paused}

/* --- Secciones ----------------------------------------------------------- */
.sf-section{padding-top:var(--sf-section);padding-bottom:var(--sf-section)}
.sf-section--tight{padding-top:var(--sf-section-tight);padding-bottom:var(--sf-section-tight)}
.sf-section--paper2{background:var(--sf-paper-2)}
.sf-section--paper2 .sf-ph{background:var(--sf-white)}
.sf-sec-head{
  display:grid;gap:16px;margin-bottom:clamp(30px,4vw,52px);
  grid-template-columns:1fr;align-items:end;
}
@media (min-width:860px){ .sf-sec-head{grid-template-columns:1fr auto;gap:30px} }
.sf-sec-head h2,
.sf-sec-head .sf-h2{font-size:calc(clamp(29px,5vw,50px) * 1.07);margin-top:12px}

/* --- Bloque personalizados (fondo tinta) --------------------------------- */
.sf-custom{background:var(--sf-ink);color:var(--sf-on-ink)}
.sf-custom .sf-wrap{display:grid;gap:clamp(36px,5vw,70px);align-items:center;grid-template-columns:1fr}
@media (min-width:940px){ .sf-custom .sf-wrap{grid-template-columns:.95fr 1.05fr} }
.sf-custom h2{font-size:calc(clamp(31px,5.4vw,56px) * 1.07);margin:18px 0 22px;color:#FFFDF7}
.sf-custom p{color:var(--sf-on-ink-2);max-width:46ch}
.sf-custom .sf-eyebrow{color:var(--sf-on-ink-3)}
.sf-custom__steps{display:grid;gap:0;margin:30px 0;padding:0;list-style:none}
.sf-custom__step{display:flex;gap:18px;align-items:flex-start;padding:17px 0;border-top:1px solid rgba(255,255,255,.15)}
.sf-custom__step:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.sf-custom__step b{
  font-family:var(--sf-f-display);font-size:12.5px;color:var(--sf-on-ink-3);
  font-weight:400;min-width:22px;padding-top:4px;letter-spacing:.1em;
}
.sf-custom__step p{color:#D6D1C4;font-size:15px;margin:0}
.sf-custom__step p span{display:block;color:var(--sf-on-ink-3);font-size:13.5px;margin-top:4px}
.sf-custom .sf-btn--solid{background:var(--sf-paper);color:var(--sf-ink)}
.sf-custom .sf-btn--solid:hover,.sf-custom .sf-btn--solid:focus{background:var(--sf-accent);color:#fff}
.sf-custom .sf-ph{background:#0E0D09}

/* --- Confianza ----------------------------------------------------------- */
.sf-trust{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sf-trust__item{padding-top:24px;border-top:1px solid var(--sf-line)}
.sf-trust__item h3{
  font-family:var(--sf-f-head);font-weight:400;font-size:calc(20px * 1.07);
  letter-spacing:var(--sf-display-track);margin:14px 0 10px;color:var(--sf-ink);
}
.sf-trust__item p{color:var(--sf-ink-2);font-size:14.5px;max-width:38ch;margin:0}
.sf-trust__ico{color:var(--sf-accent);display:block}

/* ==========================================================================
   D.2 · MÓDULOS DE PRODUCTO (featured / bestseller / latest)
   ========================================================================== */
.sf-module{margin-bottom:clamp(48px,7vw,90px)}
.sf-module__head{
  display:grid;gap:12px;grid-template-columns:1fr;align-items:end;
  margin-bottom:clamp(24px,3.4vw,40px);
}
.sf-module__title{
  font-size:calc(clamp(27px,4.6vw,44px) * 1.07);
  margin:0;
}
.sf-module__rule{margin-bottom:clamp(24px,3.4vw,38px)}

/* La `.row` de Bootstrap sigue intacta; se le suma display:flex para que las
   fichas de distinto alto no se escalonen (los float de BS3 quedan inertes
   dentro de un contenedor flex, los anchos de .col-* se respetan igual). */
.sf-grid{display:flex;flex-wrap:wrap}
.sf-grid > .product-layout{display:flex;min-width:0;margin-bottom:clamp(28px,3.4vw,48px)}

.sf-card{position:relative;display:flex;flex-direction:column;width:100%;min-width:0}
.sf-card__media{position:relative;overflow:hidden}
.sf-card:hover .sf-ph > a > img,
.sf-card:focus-within .sf-ph > a > img{transform:scale(1.04)}
.sf-card:hover .sf-cut,
.sf-card:focus-within .sf-cut{opacity:.6}
.sf-card__tag{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--sf-ink);color:var(--sf-paper);
  font-family:var(--sf-f-ui);padding:5px 11px;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.sf-card__body{padding-top:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.sf-card__title{
  font-family:var(--sf-f-head);font-weight:400;
  font-size:calc(clamp(15px,1.85vw,19px) * 1.07);
  line-height:1.3;letter-spacing:var(--sf-display-track);
  margin:0;
  overflow-wrap:break-word;word-wrap:break-word;
}
.sf-card__title a{text-decoration:none;color:var(--sf-ink);transition:color .2s var(--sf-ease)}
.sf-card__title a:hover,.sf-card__title a:focus{color:var(--sf-accent)}
.sf-card__desc{
  font-size:13px;color:var(--sf-ink-3);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:600px){ .sf-card__desc{display:none} }
.sf-card .rating{padding-bottom:0}
.sf-card__price{
  margin:3px 0 0;font-family:var(--sf-f-ui);font-size:15.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--sf-ink);
}
.sf-card__price .price-new{font-weight:600;color:var(--sf-accent)}
.sf-card__price .price-old{color:var(--sf-ink-3);text-decoration:line-through;margin-left:10px;font-weight:400}
.sf-card__price .price-tax{display:block;font-size:12px;font-weight:400;color:var(--sf-ink-3);letter-spacing:0}

/* Barra de compra rápida: entra al hover en desktop, siempre visible en táctil */
.sf-card__quick{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  opacity:0;transform:translateY(100%);
  transition:opacity .3s var(--sf-ease), transform .3s var(--sf-ease);
}
.sf-card:hover .sf-card__quick,
.sf-card:focus-within .sf-card__quick{opacity:1;transform:none}
.sf-card__quick button{
  display:block;width:100%;padding:13px;border:0;cursor:pointer;
  background:var(--sf-ink);color:var(--sf-paper);
  font-family:var(--sf-f-ui);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
  transition:background-color .2s var(--sf-ease);
}
.sf-card__quick button:hover,.sf-card__quick button:focus{background:var(--sf-accent);color:#fff}
@media (hover:none){
  .sf-card__quick{position:static;opacity:1;transform:none}
  .sf-card__quick button{padding:14px 13px}
}
.sf-card__actions{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.sf-iconbtn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sf-line);border-radius:999px;background:transparent;
  color:var(--sf-ink-2);cursor:pointer;font-size:13px;
  transition:border-color .2s var(--sf-ease), color .2s var(--sf-ease);
}
.sf-iconbtn:hover,.sf-iconbtn:focus{border-color:var(--sf-accent);color:var(--sf-accent)}

/* ==========================================================================
   D.3 · MÓDULOS DE BANNER (slideshow / banner / carousel)
   El alto y el recorte de estas imágenes los define el admin de OpenCart
   (ancho x alto del módulo), así que acá NO se fuerza ninguna relación de
   aspecto: se enmarca y se deja que la imagen mande.
   ========================================================================== */
.sf-media-module{margin-bottom:clamp(40px,6vw,80px)}
.sf-media-module .swiper-viewport{
  border:0;border-radius:0;box-shadow:none;background:var(--sf-paper-2);margin:0;
}
.sf-media-module .swiper-container{background:var(--sf-paper-2)}
.sf-media-module .swiper-slide img{width:100%;height:auto;display:block;margin:0 auto}

/* Pie de foto editorial: el título del banner cargado en el admin */
.sf-media__note{
  position:absolute;left:0;bottom:0;z-index:3;margin:0;
  background:var(--sf-paper);
  padding:11px 18px 0 0;
  font-family:var(--sf-f-ui);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sf-ink-3);max-width:88%;
}
.sf-media-module .swiper-slide{position:relative}

/* Paginación y flechas, en clave editorial */
.sf-media-module .swiper-pagination{margin-top:14px;text-align:left}
.sf-media-module .swiper-pagination-switch{
  display:inline-block;width:26px;height:2px;border-radius:0;
  background:var(--sf-line-2);opacity:1;margin-right:8px;cursor:pointer;
  vertical-align:middle;
}
.sf-media-module .swiper-active-switch{background:var(--sf-ink)}
.sf-media-module .swiper-button-next,
.sf-media-module .swiper-button-prev{
  background-image:none;width:44px;height:44px;border-radius:999px;
  background-color:rgba(251,250,247,.9);color:var(--sf-ink);
  display:flex;align-items:center;justify-content:center;
}
.sf-media-module .swiper-button-next::after{content:"\f105";font-family:FontAwesome;font-size:18px}
.sf-media-module .swiper-button-prev::after{content:"\f104";font-family:FontAwesome;font-size:18px}

/* Carousel = franja de categorías: foto enmarcada + nombre debajo */
.sf-carousel .swiper-slide{background:transparent}
.sf-carousel__item{display:block;text-decoration:none;color:var(--sf-ink)}
.sf-carousel__body{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--sf-line);
  transition:border-color .3s var(--sf-ease);
}
.sf-carousel__name{
  font-family:var(--sf-f-head);font-weight:400;
  font-size:calc(clamp(14px,2vw,19px) * 1.07);
  letter-spacing:var(--sf-display-track);line-height:1.2;
  transition:color .2s var(--sf-ease);
  text-align:left;
}
.sf-carousel__item:hover .sf-carousel__body{border-color:var(--sf-ink)}
.sf-carousel__item:hover .sf-carousel__name,
.sf-carousel__item:focus .sf-carousel__name{color:var(--sf-accent)}
.sf-carousel__item:hover .sf-ph > img{transform:scale(1.035)}
.sf-carousel__item:hover .sf-cut,
.sf-carousel__item:focus .sf-cut{opacity:.6}


/* ==========================================================================
   E · FOOTER
   ========================================================================== */
footer{
  background:var(--sf-ink);
  background-image:none;
  border-top:0;
  color:var(--sf-on-ink-2);
  margin-top:0;
  padding-top:clamp(54px,7vw,92px);
  font-family:var(--sf-f-body);
}
footer a{color:var(--sf-on-ink-2);text-decoration:none;transition:color .2s var(--sf-ease)}
footer a:hover,footer a:focus{color:#FFFDF7}
footer hr{border-top:none;border-bottom:1px solid rgba(255,255,255,.14)}
.sf-foot__grid{
  display:grid;gap:clamp(32px,4vw,50px);grid-template-columns:1fr;
  padding-bottom:clamp(38px,5vw,60px);
}
@media (min-width:560px){ .sf-foot__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .sf-foot__grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .sf-foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr} }
.sf-foot__col ul{margin:0;padding:0;list-style:none}
.sf-foot__brand{
  font-family:var(--sf-f-display);
  font-size:calc(clamp(24px,3.4vw,32px) * 1.07);
  letter-spacing:var(--sf-display-track);line-height:1.05;
  color:#FFFDF7;margin:0;
}
.sf-foot__desc{margin-top:18px;font-size:14.5px;max-width:34ch;color:var(--sf-on-ink-2)}
footer h5,
.sf-foot h5{
  font-family:var(--sf-f-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sf-on-ink-3);margin:0 0 18px;font-weight:600;
}
.sf-foot li{margin-bottom:11px;font-size:14.5px}
.sf-wa{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:13px 22px;color:#FFFDF7;font-size:14.5px;font-weight:600;
  transition:background-color .25s var(--sf-ease), color .25s var(--sf-ease), border-color .25s var(--sf-ease);
}
.sf-wa:hover,.sf-wa:focus{background:#FFFDF7;color:var(--sf-ink);border-color:#FFFDF7}
.sf-wa svg{flex:none}
.sf-foot__bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:24px 0 34px;margin:0;
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;
  font-size:12.5px;color:#A39E8D;
}
.sf-foot__bottom p{margin:0}
.sf-pays{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.sf-pay{
  border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 11px;
  font-family:var(--sf-f-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}


/* ==========================================================================
   F · ACCESIBILIDAD Y MOVIMIENTO
   ========================================================================== */
:focus-visible{outline:2px solid var(--sf-accent);outline-offset:3px;border-radius:2px}
/* Fondo tinta: el borgoña no contrasta contra la tinta, se usa el papel */
footer :focus-visible,
#top :focus-visible,
.sf-custom :focus-visible{outline-color:var(--sf-paper)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sf-marquee__track{animation:none}
  .sf-js .sf-rv{opacity:1;transform:none}
  .sf-swp > .sf-swp__i{transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}