/* ==========================================================================
   ÍNDICE
   ==========================================================================
   00. Variables CSS
   01. Base / Reset
   02. Tipografía
   03. Layout
   04. Componentes: Buttons
   05. Componentes: Forms
   06. Componentes: Checkboxes & Radios
   07. Componentes: Account Menu
   08. Componentes: Addresses
   09. Componentes: Checkout
   10. Utilidades / Helpers
   11. Media Queries
   ========================================================================== */

/* ==========================================================================
   00. Variables CSS
   ========================================================================== */

:root {
  /* Colores */
  --color-primary: #0d1c2d;
  --color-primary-hover: #0c7ea5;
  --color-accent: #009dd2;
  --color-white: #fff;
  --color-black: #000;
  --color-black-transparent: rgba(0, 0, 0, 0.2);
  --color-background-light: #fbfbfb;
  --color-text-primary: #0d1c2d;
  --color-text-secondary: #3d3d3d;
  --color-text-placeholder: #9e9c9c;
  --color-border: rgba(0, 0, 0, 0.2);
  --color-border-dark: #000;
  --color-border-dashed: rgba(0, 0, 0, 0.2);
  --color-transparent: transparent;
  --color-focus: #1a73e8;
  --color-focus-shadow: rgba(26, 115, 232, 0.25);
  --color-hover-border: #6b7280;

  /* Fuentes */
  --font-family-bold: "SemiExpanded Bold";

  /* Tamaños de fuente */
  --font-size-h1-main: 48px;
  --font-size-h1-secondary: 30px;
  --font-size-menu: 24px;
  --font-size-label: 20px;
  --font-size-button: 18px;
  --font-size-small: 16px;
  --font-size-form-text: 18px;
  --font-size-alert: 18px;

  /* Pesos de fuente */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Espaciados */
  --spacing-xs: 10px;
  --spacing-sm: 12px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 33px;
  --spacing-xxl: 40px;
  --spacing-xxxl: 42px;
  --spacing-none: 0;
  --spacing-checkbox-label: 8px;
  --spacing-radio-top: 2px;
  --spacing-address-wrapper: 15px;
  --spacing-address-actions: 30px;
  --spacing-title-bottom: 30px;
  --input-padding-bottom: 8px;
  --spacing-gap-small: 5px;
  --spacing-gap-medium: 10px;
  --spacing-gap-large: 25px;
  --spacing-padding-checkout: 20px 30px;
  --spacing-padding-summary: 28px 30px 55px;

  /* Line heights */
  --line-height-tight: 1em;
  --line-height-normal: 1.2em;
  --line-height-relaxed: 1.25em;
  --line-height-loose: 1.33em;
  --line-height-form: 1.4em;
  --line-height-medium: 1.5em;

  /* Bordes */
  --border-radius-none: 0;
  --border-radius-button: 50px;
  --border-radius-circle: 50%;
  --border-width: 1px;
  --border-width-selected: 2px;
  --border-none: none;
  --border-zero: 0;

  /* Sombras */
  --shadow-button-active: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --shadow-focus: 0 0 0 3px var(--color-focus-shadow);

  /* Tamaños */
  --size-checkbox: 24px;
  --size-checkbox-tick-width: 11px;
  --size-checkbox-tick-height: 8px;
  --size-radio: 20px;
  --size-radio-dot: 8px;
  --max-width-container: 1620px;
  --button-min-width: 244px;
  --button-width-full: 100%;
  --button-width-auto: max-content;

  /* Transiciones */
  --transition-fast: 0.15s ease;
}

/* ==========================================================================
   01. Base / Reset
   ========================================================================== */

.page-customer-account #content {
  background-color: var(--color-transparent);
  padding: var(--spacing-none);
}

/* ==========================================================================
   02. Tipografía
   ========================================================================== */

.alert {
  font-size: var(--font-size-alert);
}

p,
.label,
label,
.h6,
h6 {
  font-size: var(--font-size-label);
}

body#checkout section.checkout-step .add-address a i,
body#checkout
  .cart-grid-right
  .card
  .cart-summary-subtotals-container
  .cart-summary-line
  .label,
body#checkout
  .cart-grid-right
  .card
  .cart-summary-subtotals-container
  .cart-summary-line
  .value,
.card-block.cart-summary-totals .cart-summary-line.cart-total .label,
.card-block.cart-summary-totals .cart-summary-line.cart-total .value {
  font-size: var(--font-size-label);
}

/* ==========================================================================
   03. Layout
   ========================================================================== */

div[data-elementor-type="breadcrumb"] ~ .container {
  max-width: var(--max-width-container);
  width: var(--button-width-full);
}

.account-page {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
}

.account-page > .col-lg-8 {
  background-color: var(--color-background-light);
  border: var(--border-width) solid var(--color-border);
  padding: var(--spacing-xl) var(--spacing-xxxl);
}

.account-page > .col-lg-8 .page-header {
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--spacing-xxl);
  padding-bottom: var(--spacing-xs);
}

.account-page > .col-lg-8 .page-header h1 {
  color: var(--color-text-primary);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-h1-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-none);
  text-transform: uppercase;
}

.account-page__title {
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-h1-main);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  margin-bottom: var(--spacing-title-bottom);
  padding-bottom: var(--spacing-xs);
  padding-top: var(--spacing-xxl);
  text-transform: uppercase;
  width: var(--button-width-full);
}

/* ==========================================================================
   04. Componentes: Buttons
   ========================================================================== */

.btn-outline-primary {
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-shadow: var(--shadow-button-active);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: var(--color-primary);
  --bs-btn-disabled-bg: var(--color-transparent);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-white);
  --bs-gradient: none;
}

.btn-primary,
.btn-primary:hover {
  background-color: var(--color-accent);
}

.btn.btn-primary.form-control-submit,
.btn-primary[type="submit"] {
  background-color: var(--color-accent);
  border: var(--border-none);
  border-radius: var(--border-radius-button);
  color: var(--color-white);
  float: none !important;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-button);
  line-height: var(--line-height-tight);
  min-width: var(--button-min-width);
  padding: var(--spacing-lg) var(--spacing-xxl);
  text-transform: uppercase;
  width: var(--button-width-auto);
}

.btn.btn-primary.form-control-submit:hover,
.btn-primary[type="submit"]:hover {
  background-color: var(--color-primary-hover);
}

.checkout-step .btn-primary[type="submit"] {
  width: var(--button-width-full);
}

/* ==========================================================================
   05. Componentes: Forms
   ========================================================================== */

/* Labels */
.account-page .col-form-label,
.account-page .form-label,
.col-form-label,
.form-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-form);
}

/* Inputs */
.account-page .form-control,
.account-page .modal.product-comment-modal .form-control,
.account-page .modal.product-comment-modal textarea,
.form-control,
.modal.product-comment-modal .form-control,
.modal.product-comment-modal textarea {
  background-color: var(--color-transparent);
  border: var(--border-zero);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-radius: var(--border-radius-none);
  color: var(--color-text-placeholder);
  font-size: var(--font-size-label);
  padding: var(--spacing-none) var(--spacing-none) var(--input-padding-bottom)
    var(--spacing-none);
}

.form-text {
  font-size: var(--font-size-form-text);
}

.text-muted.form-informations-option {
  color: var(--color-text-placeholder) !important;
}

.text-muted.form-informations-subtitle {
  color: var(--color-accent) !important;
}

/* Input groups */
.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  background-color: var(--color-transparent);
  border: var(--border-none);
  border-bottom: var(--border-width) solid var(--color-black);
  border-radius: var(--border-radius-none);
  color: var(--color-black);
}

/* Form footer */
#customer-form .form-footer {
  justify-content: flex-start;
}

/* Radio buttons */
.radio-buttons {
  display: flex;
  gap: var(--spacing-xs);
}

.radio-buttons .form-check {
  padding: var(--spacing-none);
}

/* Guest form */
.guest-form a {
  background-color: var(--color-transparent);
  border: var(--border-none);
  color: var(--color-text-placeholder);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-label);
  line-height: var(--line-height-relaxed);
  padding: var(--spacing-none);
}

.guest-form a[aria-controls="checkout-guest-form"] {
  color: var(--color-text-secondary) !important;
  font-weight: var(--font-weight-bold);
}

.nav-link:focus,
.nav-link:hover {
  color: var(--color-accent) !important;
}

/* ==========================================================================
   06. Componentes: Checkboxes & Radios
   ========================================================================== */

/* Checkboxes base */
.form-check-input {
  margin-left: var(--spacing-none);
  position: static;
}

.form-check-input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-text-placeholder);
  border-radius: var(--border-radius-none);
  cursor: pointer;
  display: inline-grid;
  height: var(--size-checkbox);
  margin: var(--spacing-none);
  max-width: var(--size-checkbox);
  min-width: var(--size-checkbox);
  place-content: center;
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  width: var(--size-checkbox);
}

.form-check-input[type="checkbox"]::after {
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  content: "";
  height: var(--size-checkbox-tick-height);
  transform: rotate(-45deg) translateY(-1px);
  transition: border-color var(--transition-fast);
  width: var(--size-checkbox-tick-width);
}

.form-check-input[type="checkbox"]:checked {
  border-color: var(--color-accent);
}

.form-check-input[type="checkbox"]:checked::after {
  border-bottom-color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.form-check-input[type="checkbox"]:focus {
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus);
  outline: var(--border-none);
}

.form-check-input[type="checkbox"]:hover {
  border-color: var(--color-hover-border);
}

.form-check-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-form);
  padding-left: var(--spacing-checkbox-label);
  text-align: left;
}

.form-check {
  display: flex;
  flex-direction: row;
}

/* Custom radio buttons */
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--color-accent);
}

.address-item .custom-radio {
  flex-shrink: 0;
  margin-top: var(--spacing-radio-top);
  position: relative;
}

.address-item .custom-radio input[type="radio"] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.address-item .custom-radio input[type="radio"] + span {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-text-secondary);
  border-radius: var(--border-radius-circle);
  display: inline-block;
  height: var(--size-radio);
  position: relative;
  width: var(--size-radio);
}

.address-item .custom-radio input[type="radio"]:checked + span {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.address-item .custom-radio input[type="radio"]:checked + span::after {
  background-color: var(--color-white);
  border-radius: var(--border-radius-circle);
  content: "";
  height: var(--size-radio-dot);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--size-radio-dot);
}

.address-item header .radio-block {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
}

.address-item .radio-block > *:not(.custom-radio) {
  flex: 1;
}

/* ==========================================================================
   07. Componentes: Account Menu
   ========================================================================== */

.account-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.account-menu a {
  background-color: var(--color-background-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-none);
  padding: var(--spacing-lg) var(--spacing-md);
  text-decoration: none;
  width: var(--button-width-full);
}

.account-menu a .link-item {
  align-items: center;
  color: var(--color-text-primary) !important;
  display: flex;
  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-bold);
  gap: var(--spacing-xs);
  line-height: var(--line-height-tight);
}

.account-menu__line.active {
  background-color: var(--color-primary) !important;
  border: var(--border-width) solid var(--color-primary) !important;
}

.account-menu__line.active .link-item {
  color: var(--color-white) !important;
}

.account-menu__line.active img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7483%)
    hue-rotate(200deg) brightness(104%) contrast(103%);
}

/* ==========================================================================
   08. Componentes: Addresses
   ========================================================================== */

/* Enlaces globales */
a {
  color: var(--color-accent);
  text-decoration: none;
}

.address {
  align-items: flex-end;
  border: var(--border-none);
  border-bottom: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-none);
  display: flex;
  flex-direction: row;
  padding-bottom: var(--spacing-lg);
}

.page-addresses .address {
  align-items: center;
  justify-content: space-between;
}

.address__alias {
  color: var(--color-text-secondary);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-label);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.address__content {
  color: var(--color-text-placeholder);
  column-count: 3;
  font-size: var(--font-size-label);
  margin-bottom: var(--spacing-none);
}

.address__wrapper {
  margin-bottom: var(--spacing-address-wrapper) !important;
}

.address__actions {
  align-items: center;
  display: flex;
  gap: var(--spacing-address-actions);
}

.address__delete,
.address__edit {
  background-color: var(--color-transparent);
  border: var(--border-none);
  color: var(--color-text-secondary);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-none);
  text-decoration: none;
  text-transform: uppercase;
}

/* Address item (checkout) */
.address-item {
  border: var(--border-none);
  border-bottom: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-none);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.address-item.selected {
  border-bottom-color: var(--color-accent);
  border-bottom-width: var(--border-width-selected);
}

.address-item.selected .address-alias {
  color: var(--color-accent);
}

.address-item header {
  margin-bottom: var(--spacing-sm);
}

.address-item .address-alias {
  color: var(--color-text-secondary);
  display: block;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-label);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.address-item .address {
  border: var(--border-none);
  border-radius: var(--border-radius-none);
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--font-size-label);
  line-height: var(--line-height-normal);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.address-item hr {
  border: var(--border-none);
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--spacing-lg) var(--spacing-none);
}

.address-item .address-footer {
  align-items: center;
  display: flex;
  gap: var(--spacing-lg);
}

.address-item .edit-address,
.address-item .delete-address {
  align-items: center;
  background-color: var(--color-transparent);
  border: var(--border-none);
  color: var(--color-text-secondary);
  display: inline-flex;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  gap: var(--spacing-xs);
  padding: var(--spacing-none);
  text-decoration: none;
  text-transform: uppercase;
}

.address-item .edit-address:hover,
.address-item .delete-address:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.address-item .edit-address .material-icons,
.address-item .delete-address .material-icons {
  font-size: var(--font-size-small);
  vertical-align: middle;
}

.card-footer {
  background-color: var(--color-transparent);
  border-top: var(--border-none);
  padding: var(--spacing-none);
}

/* ==========================================================================
   09. Componentes: Checkout
   ========================================================================== */

.form-informations {
  font-size: var(--font-size-label) !important;
}

.form-informations .form-informations-option {
  color: var(--color-text-placeholder);
  font-style: normal;
}

.form-informations .form-informations-subtitle {
  font-size: var(--font-size-label);
}

.input-group .input-group-btn > .btn[data-action="show-password"] {
  background-color: var(--color-transparent);
}

#block-reassurance li:last-child,
body#checkout section.checkout-step:last-child {
  border: var(--border-width) solid var(--color-border);
}

.checkout-step {
  background-color: var(--color-background-light) !important;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-none);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-padding-checkout) !important;
}

.checkout-step.-current {
  padding-bottom: var(--spacing-xxxl);
}

.checkout-step .step-title {
  color: var(--color-text-primary);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-h1-secondary) !important;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-none) !important;
  text-transform: uppercase !important;
  border: var(--border-none) !important;
  border-bottom: var(--border-none) !important;
  padding: var(--spacing-none) !important;
  padding-bottom: var(--spacing-none) !important;
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-medium);
}

body#checkout
  section.checkout-step.-reachable.-complete
  .step-title
  .step-edit {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--spacing-gap-small);
  font-size: var(--font-size-label);
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-text-secondary) !important;
}

body#checkout section.checkout-step .delete-address,
body#checkout section.checkout-step .edit-address {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-small);
  font-size: var(--font-size-label);
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-text-secondary) !important;
}

body#checkout section.checkout-step .radio-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.checkout-step .step-title ~ .content {
  padding-top: var(--spacing-md) !important;
}

body#checkout section.checkout-step .address-item {
  width: var(--button-width-full);
  flex-basis: auto;
  padding-bottom: var(--spacing-none);
  border-radius: var(--border-radius-none);
}

body#checkout section.checkout-step .address-footer {
  display: flex;
  justify-content: flex-end;
  width: var(--button-width-full);
  flex: auto;
  margin: var(--spacing-none);
}

body#checkout section.checkout-step .address {
  flex: auto;
  width: var(--button-width-full);
  margin: var(--spacing-none);
  columns: 3;
}

body#checkout section.checkout-step .address-item > header {
  min-height: auto !important;
}

.custom-radio:has(input:checked) {
  border: none !important;
}

body#checkout section.checkout-step .step-number {
  border: var(--border-none) !important;
  background-color: var(--color-transparent) !important;
  padding: var(--spacing-none);
  font-size: inherit !important;
  color: inherit !important;
  width: max-content !important;
}

body#checkout section.checkout-step .step-number:after {
  content: ".";
}

.checkout-step .step-title .material-icons {
  display: none;
}

.checkout-step .content {
  padding: var(--spacing-none) !important;
}

body#checkout .nav-inline .nav-item + .nav-item,
body#checkout .nav-inline .nav-link + .nav-link {
  margin-left: var(--spacing-none) !important;
}

body#checkout #delivery textarea,
body#checkout #gift_message textarea {
  background-color: var(--color-transparent);
  border-width: var(--border-zero) var(--border-zero) var(--border-width)
    var(--border-zero);
}

body#checkout section.checkout-step .delivery-options .delivery-option {
  padding: var(--spacing-none);
  border-radius: var(--border-radius-none);
  border: var(--border-none);
  background-color: var(--color-transparent);
}

.carriere-name-container {
  display: flex;
  flex-direction: column;
}

body#checkout section.checkout-step .carrier-delay,
body#checkout section.checkout-step .carrier-name {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-normal) !important;
}

body#checkout section.checkout-step .separator {
  flex: 1;
  border-bottom: var(--border-width) dashed var(--color-border-dashed);
}

body#checkout
  section.checkout-step
  .delivery-options
  .delivery-option
  label
  .carrier:not(.carrier-hasLogo)
  > .col-xs-12 {
  padding-left: var(--spacing-none);
}

.carrier {
  gap: var(--spacing-gap-medium);
}

.delivery-options-list {
  padding-top: var(--spacing-lg);
}

.order-options {
  padding-top: var(--spacing-title-bottom);
}

body#checkout .additional-information {
  margin-left: var(--spacing-none);
  font-size: var(--font-size-label);
}

body#checkout section.checkout-step .payment-options .payment-option {
  border-radius: var(--border-radius-none);
  border-color: var(--color-border-dashed);
}

#js-checkout-summary {
  background-color: var(--color-white);
  padding: var(--spacing-padding-summary);
  border: var(--border-width) solid var(--color-border-dashed) !important;
  border-radius: var(--border-radius-none);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

#js-checkout-summary .card-block {
  padding: var(--spacing-none);
}

.title-cart-summary {
  font-size: var(--font-size-h1-secondary);
  line-height: var(--line-height-medium);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-bold);
  margin-bottom: var(--spacing-xxl);
  color: var(--color-text-primary);
}

.cart-summary-subtotals-container,
.cart-summary-totals {
  display: block;
}

body#checkout
  .cart-grid-right
  .card
  .cart-summary-subtotals-container
  .cart-summary-line
  .value {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-placeholder);
}

.cart-summary-line .label:after {
  content: "";
  display: inline-block;
  flex: 1;
  border-bottom: var(--border-width) dashed var(--color-border-dashed);
  width: -webkit-fill-available;
}

.cart-summary-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-gap-large);
}

.cart-summary-line .label {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-gap-large);
  text-align: left;
  line-height: var(--line-height-normal);
}

.cart-total .value {
  font-size: var(--font-size-menu) !important;
}

/* ==========================================================================
   10. Utilidades / Helpers
   ========================================================================== */

/* ==========================================================================
   11. Media Queries
   ========================================================================== */

@media (max-width: 768px) {
  .account-page {
    flex-direction: column;
  }

  .account-page > .col-lg-8 {
    padding: var(--spacing-lg);
  }
}