/*
Theme Name: Alumnus

WooCommerce styles override
*/
/**
 * Shop tables
 */
table.shop_table_responsive thead {
  display: none;
}
table.shop_table_responsive tbody th {
  display: none;
}
table.shop_table_responsive tr td {
  display: block;
  text-align: right;
  clear: both;
}
table.shop_table_responsive tr td::before {
  content: attr(data-title) ": ";
  float: left;
}
table.shop_table_responsive tr td.product-remove a {
  text-align: left;
}
table.shop_table_responsive tr td.product-remove::before {
  display: none;
}
table.shop_table_responsive tr td.actions::before, table.shop_table_responsive tr td.download-actions::before {
  display: none;
}
table.shop_table_responsive tr td.download-actions .button {
  display: block;
  text-align: center;
}

@media screen and (min-width: 48em) {
  table.shop_table_responsive thead {
    display: table-header-group;
  }
  table.shop_table_responsive tbody th {
    display: table-cell;
  }
  table.shop_table_responsive tr th,
table.shop_table_responsive tr td {
    text-align: left;
  }
  table.shop_table_responsive tr td {
    display: table-cell;
  }
  table.shop_table_responsive tr td::before {
    display: none;
  }
}
/**
 * Products
 */
ul.products {
  margin: 0;
  padding: 0;
}
ul.products li.product {
  list-style: none;
  position: relative;
  margin-bottom: 2em;
}
ul.products li.product img {
  display: block;
}
ul.products li.product .button {
  display: block;
}

@media screen and (min-width: 48em) {
  ul.products li.product {
    width: 30.7966666667%;
    float: left;
    margin-right: 3.8%;
  }
  ul.products li.product.first {
    clear: both;
  }
  ul.products li.product.last {
    margin-right: 0;
  }

  ul.products.columns-1 li.product {
    float: none;
    width: 100%;
  }

  ul.products.columns-2 li.product {
    width: 48.1%;
  }

  ul.products.columns-3 li.product {
    width: 30.7966666667%;
  }

  ul.products.columns-4 li.product {
    width: 22.15%;
  }

  ul.products.columns-5 li.product {
    width: 16.96%;
  }

  ul.products.columns-6 li.product {
    width: 13.4933333333%;
  }
}
/**
 * Single product
 */
.single-product div.product {
  position: relative;
}
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  float: left;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 2em;
  right: 1em;
  display: block;
  z-index: 99;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
  margin-bottom: 1em;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  margin: 0;
  padding: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  cursor: pointer;
  float: left;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  opacity: 0.5;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
  width: 48.1%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
  width: 30.7966666667%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 22.15%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  width: 16.96%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
  clear: both;
}

.stock:empty::before {
  display: none;
}
.stock.in-stock {
  color: #0f834d;
}
.stock.out-of-stock {
  color: #e2401c;
}

/**
 * Checkout
 */
@media screen and (min-width: 768px) {
  .col2-set .form-row-first {
    float: left;
    margin-right: 3.8%;
  }
  .col2-set .form-row-last {
    float: right;
    margin-right: 0;
  }
  .col2-set .form-row-first,
.col2-set .form-row-last {
    width: 48.1%;
  }
}
/**
 * General WooCommerce components
 */
/**
 * Header cart
 */
.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
}
.site-header-cart .cart-contents {
  text-decoration: none;
}
.site-header-cart .widget_shopping_cart {
  display: none;
}
.site-header-cart .product_list_widget {
  margin: 0;
  padding: 0;
}

/**
 * Star rating
 */
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1.618em;
  line-height: 1.618;
  width: 5.3em;
  font-family: star;
  font-weight: 400;
}
.star-rating::before {
  content: "SSSSS";
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}
.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.star-rating span::before {
  content: "SSSSS";
  top: 0;
  position: absolute;
  left: 0;
  color: #4169e1;
}

p.stars a {
  position: relative;
  height: 1em;
  width: 1em;
  text-indent: -999em;
  display: inline-block;
  text-decoration: none;
  margin-right: 1px;
  font-weight: 400;
}
p.stars a::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-family: star;
  content: "S";
  color: #404040;
  text-indent: 0;
  opacity: 0.25;
}
p.stars a:hover ~ a::before {
  content: "S";
  color: #404040;
  opacity: 0.25;
}
p.stars:hover a::before {
  content: "S";
  color: #4169e1;
  opacity: 1;
}
p.stars.selected a.active::before {
  content: "S";
  color: #4169e1;
  opacity: 1;
}
p.stars.selected a.active ~ a::before {
  content: "S";
  color: #404040;
  opacity: 0.25;
}
p.stars.selected a:not(.active)::before {
  content: "S";
  color: #4169e1;
  opacity: 1;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.woocommerce-tabs ul.tabs li {
  display: block;
  margin: 0;
  position: relative;
}
.woocommerce-tabs ul.tabs li a {
  padding: 1em 0;
  display: block;
}
.woocommerce-tabs .panel h2:first-of-type {
  margin-bottom: 1em;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
  text-align: right;
}
.woocommerce-password-strength.strong {
  color: #0f834d;
}
.woocommerce-password-strength.short {
  color: #e2401c;
}
.woocommerce-password-strength.bad {
  color: #e2401c;
}
.woocommerce-password-strength.good {
  color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
  -webkit-box-shadow: inset 2px 0 0 #0f834d;
          box-shadow: inset 2px 0 0 #0f834d;
}
.form-row.woocommerce-invalid input.input-text {
  -webkit-box-shadow: inset 2px 0 0 #e2401c;
          box-shadow: inset 2px 0 0 #e2401c;
}

.required {
  color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: #0f834d;
  clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: #3d9cd2;
}

.woocommerce-error {
  background-color: #e2401c;
}

.demo_store {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  background-color: #3d9cd2;
  z-index: 9999;
}

@media screen and (min-width: 48em) {
  /**
   * Header cart
   */
  .site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999999;
    left: -999em;
    display: block;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }
  .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
    left: 0;
    display: block;
  }
}
/**
 * WooCommerce widgets
 */
/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
  margin-bottom: 1.5em;
}
.widget_price_filter .price_slider_amount {
  text-align: right;
  line-height: 2.4;
}
.widget_price_filter .price_slider_amount .button {
  float: left;
}
.widget_price_filter .ui-slider {
  position: relative;
  text-align: left;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: ew-resize;
  outline: none;
  background: #4169e1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: -0.25em;
  opacity: 1;
}
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -1em;
}
.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  -webkit-box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background: #4169e1;
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider-horizontal {
  height: 0.5em;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  height: 100%;
}
/* ===========================================================================
   IFRM: магазин курсів
   ---------------------------------------------------------------------------
   Дописано поверх штатних стилів WooCommerce і базового шару теми вище.
   Сітку тримає .elementor-container з inc/woocommerce.php: Elementor свій
   frontend CSS на сторінках товару не вантажить, тому геометрію контейнера
   доводиться описувати тут — зате вона збігається з рештою сайту (kit 1140px).
   =========================================================================== */

/* Змінні WooCommerce. Найдешевший спосіб прибрати фіолетовий дефолт одразу
   з усього магазину — кошика, оформлення, кабінету, — а не ганятися за
   кожним селектором окремо. */
:root {
  --wc-primary: var(--thm-color-primary);
  --wc-primary-text: var(--thm-color-white);
  --wc-secondary: var(--thm-color-light-bg);
  --wc-secondary-text: var(--thm-color-text-heading);
  --wc-highlight: var(--thm-color-primary);
  --wc-highligh-text: var(--thm-color-white);
  --wc-form-border-color: rgba(18, 15, 45, 0.15);
  --wc-form-border-radius: 5px;
}

.woocommerce-active .alumnus-woo-section {
  padding: 6rem 0 8rem;
}
.woocommerce-active .alumnus-woo-section > .elementor-container {
  /* display:block перебиває flex Elementor'а на випадок, якщо його CSS
     усе-таки завантажиться: інакше блоки товару вишикуються в рядок. */
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 1024px) {
  .woocommerce-active .alumnus-woo-section {
    padding: 4rem 0 6rem;
  }
  .woocommerce-active .alumnus-woo-section > .elementor-container {
    max-width: 1024px;
  }
}
@media (max-width: 767px) {
  .woocommerce-active .alumnus-woo-section > .elementor-container {
    max-width: 767px;
    padding: 0 1.5rem;
  }
}

/* Хлібні крихти */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: 3rem;
  font-size: 1.4rem;
  color: var(--thm-color-text-main);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--thm-color-primary);
}

/**
 * Сторінка товару
 */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem 5rem;
  align-items: start;
}
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .alumnus-product-description,
.woocommerce div.product > .related,
.woocommerce div.product > .up-sells,
.woocommerce div.product > .woocommerce-product-details__short-description {
  grid-column: 1 / -1;
}

/* Курс без картинки: галерея-заглушка тільки заважає. */
.woocommerce div.product .woocommerce-product-gallery--without-images {
  display: none;
}
.woocommerce div.product:has(.woocommerce-product-gallery--without-images) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  /* штатні float/width з woocommerce-layout.css у грід-розкладці зайві */
  float: none;
  width: auto;
  margin-bottom: 0;
}

.woocommerce div.product .product_title {
  margin-bottom: 1.5rem;
  font-size: 3.6rem;
  line-height: 1.25;
  color: var(--thm-color-text-heading);
}
@media (max-width: 767px) {
  .woocommerce div.product .product_title {
    font-size: 2.8rem;
  }
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  margin-bottom: 2rem;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--thm-color-primary);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.5;
}
.woocommerce div.product p.price ins {
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--thm-color-text-main);
}

/**
 * Вибір дати і кнопка оплати
 */
.woocommerce div.product form.cart {
  margin: 2.5rem 0 0;
  padding: 2.5rem;
  background: var(--thm-color-light-bg);
  border-radius: 8px;
}
.woocommerce div.product form.cart::after {
  content: "";
  display: block;
  clear: both;
}

.woocommerce div.product form.cart table.variations {
  width: 100%;
  margin-bottom: 1.5rem;
  border: 0;
}
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}
.woocommerce div.product form.cart table.variations th.label label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--thm-color-text-heading);
}
.woocommerce div.product form.cart table.variations td.value {
  margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .variations select {
  width: 100%;
  min-height: 5.4rem;
  padding: 0 4rem 0 1.6rem;
  border: 1px solid rgba(18, 15, 45, 0.15);
  border-radius: 5px;
  background-color: var(--thm-color-white);
  /* власна стрілка: рідна виглядає по-різному в кожному браузері */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23120f2d' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--thm-color-text-heading);
  cursor: pointer;
}
.woocommerce div.product form.cart .variations select:focus {
  outline: none;
  border-color: var(--thm-color-primary);
  -webkit-box-shadow: 0 0 0 3px rgba(31, 68, 157, 0.12);
          box-shadow: 0 0 0 3px rgba(31, 68, 157, 0.12);
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.4rem;
  color: var(--thm-color-text-main);
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: 1.5rem;
}
.woocommerce div.product .woocommerce-variation-availability p {
  margin-bottom: 0;
}

/* Рядок «кількість + кнопка». Штатний WooCommerce тримає його на float, через
   що кнопка стає ліворуч від поля кількості — тобто в зворотному порядку. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .button {
  float: none;
  margin: 0;
}
.woocommerce div.product form.cart div.quantity {
  vertical-align: middle;
}
.woocommerce div.product form.cart div.quantity .qty {
  width: 8rem;
  height: 5.4rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(18, 15, 45, 0.15);
  border-radius: 5px;
  font-size: 1.6rem;
  text-align: center;
}
.woocommerce div.product form.cart .button {
  vertical-align: middle;
}

/**
 * Кнопки
 */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  padding: 1.8rem 3rem;
  border: 0;
  border-radius: 5px;
  background: var(--thm-color-primary);
  color: var(--thm-color-white);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--thm-color-secondary);
  color: var(--thm-color-white);
}
/* Неактивна кнопка. Клас .alt у штатних стилях має вищу вагу, ніж просто
   .disabled, тому кожен варіант доводиться дублювати з ним — інакше кнопка
   «Додати в кошик» до вибору дати лишається фіолетовою.
   .wc-variation-selection-needed — той самий стан, вішається скриптом. */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled,
.woocommerce button.button.wc-variation-selection-needed,
.woocommerce a.button.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.wc-variation-selection-needed:hover {
  padding: 1.8rem 3rem;
  /* Не прозорість від синього: на світлому тлі форми вона дає ту саму бузкову
     пляму, від якої тікали. Суцільний приглушений колір читається як «поки
     недоступно», а не як зіпсована кнопка. */
  background: #9aa4c2;
  color: var(--thm-color-white);
  opacity: 1;
  cursor: not-allowed;
}

/**
 * Наявність місць
 */
.woocommerce div.product .stock {
  font-size: 1.5rem;
  font-weight: 500;
}
/* Штатний WooCommerce фарбує наявність у --wc-highlight, тобто в той самий
   колір, що й акценти. Для «є місця / місць немає» потрібні різні кольори. */
.woocommerce div.product .stock.in-stock {
  color: #0f834d;
}
.woocommerce div.product .stock.out-of-stock {
  color: #e2401c;
}

/**
 * Опис курсу
 *
 * Вкладки прибрані в inc/woocommerce.php — лишився один блок опису.
 * Правило нижче на випадок, якщо вкладки колись повернуть плагіном.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none;
}

.woocommerce div.product .alumnus-product-description {
  padding-top: 4rem;
  border-top: 1px solid rgba(18, 15, 45, 0.1);
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--thm-color-text-main);
}
.woocommerce div.product .alumnus-product-description > h2 {
  margin-bottom: 2rem;
  font-size: 2.8rem;
  color: var(--thm-color-text-heading);
}
.woocommerce div.product .alumnus-product-description p:last-child {
  margin-bottom: 0;
}

/**
 * «Інші курси» внизу сторінки
 */
.woocommerce .related,
.woocommerce .up-sells {
  /* верхній відступ дає row-gap самого гріда div.product */
  padding-top: 4rem;
  border-top: 1px solid rgba(18, 15, 45, 0.1);
}
.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
  margin-bottom: 3rem;
  font-size: 2.8rem;
  color: var(--thm-color-text-heading);
}
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* WooCommerce вішає на ul.products клірфікс через ::before/::after. У grid
   псевдоелементи стають повноцінними комірками — і перша картка з'їжджає
   у другу колонку, а остання переноситься на новий рядок. */
.woocommerce .related ul.products::before,
.woocommerce .related ul.products::after,
.woocommerce .up-sells ul.products::before,
.woocommerce .up-sells ul.products::after {
  display: none;
}
.woocommerce .related ul.products li.product,
.woocommerce .up-sells ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 2rem;
  border: 1px solid rgba(18, 15, 45, 0.1);
  border-radius: 8px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.8rem;
  line-height: 1.35;
  color: var(--thm-color-text-heading);
}
/* Ціну в картках WooCommerce фарбує захардкодженим #958e09 — змінна тут не
   допомагає, тому перебиваємо селектором тієї ж ваги, але нижче за файлом. */
.woocommerce ul.products li.product .price {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--thm-color-primary);
}
@media (max-width: 991px) {
  .woocommerce .related ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .woocommerce .related ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: minmax(0, 1fr);
  }
}

/**
 * Повідомлення
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--thm-color-primary);
  background: var(--thm-color-light-bg);
  font-size: 1.5rem;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--thm-color-primary);
}
.woocommerce-error {
  border-top-color: #c0392b;
}

/**
 * Запасний контейнер
 *
 * Обгортку `.alumnus-woo-section` ставить inc/woocommerce.php. Якщо на сторінку
 * магазину вона з якоїсь причини не потрапила — інший шаблон, залитий лише CSS —
 * контент не має розтікатися на всю ширину екрана.
 */
.woocommerce-active #primary.site-main:not(:has(> .alumnus-woo-section)) {
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 6rem 1rem 8rem;
}

/**
 * Кошик
 */
.woocommerce table.shop_table {
  border-radius: 8px;
  border-color: rgba(18, 15, 45, 0.12);
  font-size: 1.5rem;
}
.woocommerce table.shop_table th {
  font-size: 1.5rem;
  color: var(--thm-color-text-heading);
}
.woocommerce table.cart img {
  width: 6.4rem;
  border-radius: 5px;
}
.woocommerce table.cart td.product-name a {
  color: var(--thm-color-text-heading);
  font-weight: 500;
}
.woocommerce table.cart td.product-name .variation {
  margin: 0.5rem 0 0;
  font-size: 1.4rem;
  color: var(--thm-color-text-main);
}
.woocommerce table.cart td.product-quantity .qty {
  width: 7rem;
  height: 4.6rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(18, 15, 45, 0.15);
  border-radius: 5px;
  font-size: 1.5rem;
  text-align: center;
}

/* Рядок дій: купон ліворуч, «Оновити кошик» праворуч. Штатне поле купона
   вузьке настільки, що плейсхолдер не влазить.
   Саму комірку чіпати не можна: display:flex на <td> вимикає colspan,
   і таблиця розсипається. Тому флексимо тільки вміст. */
.woocommerce table.cart td.actions {
  padding: 2rem;
  text-align: left;
}
.woocommerce table.cart td.actions::after {
  content: "";
  display: block;
  clear: both;
}
.woocommerce table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  float: left;
  padding: 0;
}
.woocommerce table.cart td.actions .coupon .input-text {
  width: 22rem;
  min-width: 0;
  height: 5.4rem;
  margin: 0;
  padding: 0 1.6rem;
  border: 1px solid rgba(18, 15, 45, 0.15);
  border-radius: 5px;
  font-size: 1.5rem;
}
.woocommerce table.cart td.actions > .button,
.woocommerce table.cart td.actions > button.button {
  float: right;
  margin: 0;
}

.woocommerce .cart-collaterals .cart_totals > h2 {
  margin-bottom: 2rem;
  font-size: 2.4rem;
  color: var(--thm-color-text-heading);
}
.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td {
  padding: 1.4rem 1.8rem;
}
.woocommerce .cart-collaterals .cart_totals .order-total .amount {
  font-size: 1.8rem;
  color: var(--thm-color-primary);
}
.woocommerce .wc-proceed-to-checkout {
  padding: 2rem 0 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  font-size: 1.6rem;
}

/**
 * Оформлення замовлення
 */
.woocommerce-checkout h3,
.woocommerce .woocommerce-billing-fields > h3,
.woocommerce .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  margin-bottom: 2rem;
  font-size: 2.4rem;
  line-height: 1.3;
  color: var(--thm-color-text-heading);
}
.woocommerce-checkout #order_review_heading {
  margin-top: 4rem;
}

.woocommerce form .form-row label {
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--thm-color-text-heading);
}
/* Зірочку обов'язкового поля WooCommerce ховає навмисно (visibility:hidden):
   замість неї він помічає необов'язкові поля словом «(необов'язково)».
   Не воюємо з цим — лише готуємо вигляд на випадок, якщо зірочку повернуть. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
  border: 0;
  color: #c0392b;
  text-decoration: none;
}
.woocommerce form .form-row .optional {
  color: var(--thm-color-text-main);
  font-weight: 400;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(18, 15, 45, 0.15);
  border-radius: 5px;
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--thm-color-text-heading);
}
.woocommerce form .form-row textarea {
  min-height: 9rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--thm-color-primary);
  -webkit-box-shadow: 0 0 0 3px rgba(31, 68, 157, 0.12);
          box-shadow: 0 0 0 3px rgba(31, 68, 157, 0.12);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: #c0392b;
}

/* Блок оплати. Штатні кольори — сірувато-бузкові, до палітри сайту не мають
   стосунку і задані літералами, а не змінними. */
.woocommerce-checkout #payment {
  border-radius: 8px;
  background: var(--thm-color-light-bg);
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 2rem;
  border-bottom: 1px solid rgba(18, 15, 45, 0.1);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--thm-color-text-heading);
}
.woocommerce-checkout #payment div.payment_box {
  margin: 1.2rem 0 0;
  border-radius: 5px;
  background: var(--thm-color-white);
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--thm-color-text-main);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--thm-color-white);
}
.woocommerce-checkout #payment div.form-row {
  padding: 2rem;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.woocommerce-checkout #payment #place_order {
  float: none;
  width: 100%;
  font-size: 1.6rem;
}
.alumnus-summary__title+.alumnus-summary__title {
    display: none !important;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover {
    font-family: "Roboto", Sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1F449D;
}
.summary.entry-summary .posted_in {
    display: none !important;
}
.product_meta {
    margin: 20px 0;
}
.woocommerce div.product form.cart table.variations {
    margin-bottom: -10px;
}

@media (min-width: 768px) {
  .woocommerce-checkout #payment #place_order {
    float: right;
    width: auto;
  }
}

/**
 * Сайдбара в магазині немає
 *
 * Прибирає його inc/woocommerce.php — двома замками: знімає хук
 * `woocommerce_sidebar` і гасить `is_active_sidebar` для області.
 *
 * Це правило — страховка на випадок, коли PHP ще не залитий або сайдбар
 * друкує щось третє. Ховаємо і сам блок, і колонку-обгортку з sidebar.php,
 * інакше від неї лишиться порожній `col-lg-4`.
 */
.woocommerce-page #secondary,
.woocommerce-page .col-lg-4:has(> #secondary),
.woocommerce-active.alumnus-woo-no-sidebar #secondary,
.woocommerce-active.alumnus-woo-no-sidebar .col-lg-4:has(> #secondary) {
  display: none;
}

/* Ширину контенту тема рахує в alumnus_content_wrapper_class(), і її перевірка
   магазину не знає ні про «Мій кабінет», ні про архіви категорій товарів —
   там лишалася б колонка на 8/12 з порожнім місцем збоку. */
.alumnus-woo-no-sidebar .col-md-12.col-lg-8 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/**
 * Кошик у шапці
 *
 * Пункт меню, який додає alumnus_woocommerce_header_cart_item().
 * Поки магазин не запущено, його бачать лише ті, хто його налаштовує.
 */
.site-header-cart-item .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
}
.site-header-cart-item .cart-contents i {
  font-size: 1.7rem;
  line-height: 1;
}
.site-header-cart-item .cart-contents__count {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: 1rem;
  background: var(--thm-color-secondary);
  color: var(--thm-color-text-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2rem;
  text-align: center;
}
.site-header-cart-item .cart-contents__count--empty {
  background: rgba(18, 15, 45, 0.12);
  color: var(--thm-color-text-main);
}
.site-header-cart-item .cart-contents__total {
  font-size: 1.4rem;
}

@media (max-width: 991px) {
  /* У згорнутому меню пункт стає рядком, як і решта, — тримаємо його ліворуч. */
  .site-header-cart-item .cart-contents {
    justify-content: flex-start;
  }
}

/**
 * Блокові кошик і оформлення
 *
 * Сайт використовує не шорткоди, а блоки Cart / Checkout — у них своя розмітка
 * (`wc-block-*`) і власні стилі, до яких правила вище не дотягуються.
 */

/* Кількість — окремою колонкою праворуч від позиції. */
.wc-block-cart-items__row {
  position: relative;
}
.wc-block-cart-item__quantity {
  position: absolute;
  top: 50%;
  right: 0;
}

/* Кнопки блоків під загальний вигляд сайту: «Оформити замовлення» в кошику
   і «Сплатити» на оформленні — одна й та сама кнопка за роллю. */
a.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  padding: 1.8rem 3rem;
  border: 0;
  border-radius: 5px;
  background: var(--thm-color-primary);
  color: var(--thm-color-white);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
a.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--thm-color-secondary);
  color: var(--thm-color-white);
}
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-checkout-place-order-button.is-loading {
  background: #9aa4c2;
  color: var(--thm-color-white);
  cursor: not-allowed;
}

/**
 * Класичне оформлення у вигляді блокового
 *
 * Блок «Оформлення замовлення» кладе форму ліворуч, а підсумок — карткою праворуч.
 * Шорткод так не вміє: у нього платіжні дані й додаткова інформація стоять поруч,
 * а підсумок падає під них. Розкладку збираємо гридом.
 */
.woocommerce-checkout form.checkout.woocommerce-checkout {
  margin-top: 3rem;
}

/* Поля додаткової інформації прибрані (див. IFRM_Courses_Checkout),
   тож друга колонка платіжного блоку лишається порожньою. */
.woocommerce-checkout .col2-set .col-1 {
  float: none;
  width: 100%;
}
.woocommerce-checkout .col2-set .col-2 {
  display: none;
}

.woocommerce-checkout #order_review {
  padding: 2.5rem;
  border: 1px solid rgba(18, 15, 45, 0.12);
  border-radius: 8px;
  background: var(--thm-color-light-bg);
}
.woocommerce-checkout #order_review table.shop_table {
  margin-bottom: 2rem;
  border: 0;
  background: transparent;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 1.2rem 0;
  border-color: rgba(18, 15, 45, 0.1);
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-size: 1.8rem;
}
.woocommerce-checkout #order_review .order-total td {
  color: var(--thm-color-primary);
}
.woocommerce-checkout #order_review #payment {
  background: transparent;
}
.woocommerce-checkout #order_review #payment ul.payment_methods {
  padding: 0 0 2rem;
}
.woocommerce-checkout #order_review #payment div.form-row {
  padding: 2rem 0 0;
}

@media (min-width: 992px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 4rem;
    align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    /* підсумок лишається перед очима, поки заповнюють форму */
    position: sticky;
    top: 2rem;
  }
  .woocommerce-checkout #order_review #payment #place_order {
    float: none;
    width: 100%;
  }
}

/**
 * Підсумок замовлення картками
 *
 * Вигляд блокового checkout'а на шорткоді: мініатюра з лічильником, назва,
 * опис, ціна праворуч. Розмітку дає оверрайд woocommerce/checkout/review-order.php.
 */
.woocommerce-checkout #order_review table.alumnus-summary thead {
  /* Шапки «Товар / Проміжний підсумок» у блоковому підсумку немає. */
  display: none;
}
.woocommerce-checkout #order_review table.alumnus-summary tbody td.product-name,
.woocommerce-checkout #order_review table.alumnus-summary tbody td.product-total {
  padding: 1.6rem 0;
  vertical-align: top;
}
.woocommerce-checkout #order_review table.alumnus-summary tbody td.product-total {
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
  color: var(--thm-color-text-heading);
}
/* Кількість показує бейдж на мініатюрі; штатний рядок «× 1» лишаємо
   в розмітці заради сторонніх плагінів, але не показуємо. */
.woocommerce-checkout #order_review table.alumnus-summary .product-quantity {
  display: none;
}

#order_review .alumnus-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
#order_review .alumnus-summary-item__image {
  position: relative;
  flex: 0 0 4.8rem;
  width: 4.8rem;
}
#order_review .alumnus-summary-item__image img {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 5px;
  object-fit: cover;
}
#order_review .alumnus-summary-item__qty {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.6rem;
  border-radius: 1.1rem;
  background: var(--thm-color-text-heading);
  color: var(--thm-color-white);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2.2rem;
  text-align: center;
}
#order_review .alumnus-summary-item__body {
  min-width: 0;
}
#order_review .alumnus-summary-item__name {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--thm-color-text-heading);
}
#order_review .alumnus-summary-item__unit {
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
  color: var(--thm-color-text-main);
}
#order_review .alumnus-summary-item__description,
#order_review .alumnus-summary-item__body .variation {
  margin: 0.6rem 0 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--thm-color-text-main);
}
#order_review .alumnus-summary-item__description p {
  margin: 0;
}
#order_review .alumnus-summary-item__body .variation dt,
#order_review .alumnus-summary-item__body .variation dd {
  display: inline;
  margin: 0;
  font-size: inherit;
}
#order_review .alumnus-summary-item__body .variation dd p {
  display: inline;
  margin: 0;
}

/**
 * Блок оплати переїхав у ліву колонку — оформлюємо його карткою,
 * як і підсумок праворуч.
 */
.woocommerce-checkout form.checkout > #payment {
  margin-top: 3rem;
  border-radius: 8px;
  background: var(--thm-color-light-bg);
}

@media (min-width: 992px) {
  .woocommerce-checkout form.checkout #customer_details {
    /* більше не розтягуємо на два рядки: під ним тепер блок оплати */
    grid-row: 1;
  }
  .woocommerce-checkout form.checkout > #payment {
    grid-column: 1;
    grid-row: 2;
  }
  .woocommerce-checkout form.checkout #order_review {
    /* підсумок стає компактнішим — липкість лишаємо */
    align-self: start;
  }
}

/**
 * Підсумок замовлення без таблиці на вигляд
 *
 * Штатний `shop_table` малює рамку навколо, рамки в комірках і власний
 * border-radius. У блоковому підсумку рамок немає взагалі — лише тонкі
 * горизонтальні лінії між блоками. Знімаємо все й лишаємо самі лінії.
 */
.woocommerce-checkout #order_review table.alumnus-summary {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  background: transparent;
}
.woocommerce-checkout #order_review table.alumnus-summary tr,
.woocommerce-checkout #order_review table.alumnus-summary th,
.woocommerce-checkout #order_review table.alumnus-summary td,
.woocommerce-checkout #order_review table.alumnus-summary tbody tr:first-child td,
.woocommerce-checkout #order_review table.alumnus-summary tfoot tr:last-child td {
  border: 0;
  background: transparent;
}

/* Позиції: лінія лише між ними, не навколо. */
.woocommerce-checkout #order_review table.alumnus-summary tbody tr + tr td {
  border-top: 1px solid rgba(18, 15, 45, 0.1);
}

/* Підсумки: відбиваємо від списку товарів однією лінією зверху. */
.woocommerce-checkout #order_review table.alumnus-summary tfoot tr:first-child th,
.woocommerce-checkout #order_review table.alumnus-summary tfoot tr:first-child td {
  border-top: 1px solid rgba(18, 15, 45, 0.1);
}
.woocommerce-checkout #order_review table.alumnus-summary tfoot th,
.woocommerce-checkout #order_review table.alumnus-summary tfoot td {
  padding: 1.2rem 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--thm-color-text-main);
}
.woocommerce-checkout #order_review table.alumnus-summary tfoot th {
  text-align: left;
}
.woocommerce-checkout #order_review table.alumnus-summary tfoot td {
  text-align: right;
  white-space: nowrap;
  color: var(--thm-color-text-heading);
}
.woocommerce-checkout #order_review table.alumnus-summary tfoot .order-total th,
.woocommerce-checkout #order_review table.alumnus-summary tfoot .order-total td {
  padding-top: 1.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--thm-color-text-heading);
}
.woocommerce-checkout #order_review table.alumnus-summary tfoot .order-total td,
.woocommerce-checkout #order_review table.alumnus-summary tfoot .order-total td .amount {
  color: var(--thm-color-primary);
}
/* Штатний «Разом» жирнить свій рядок цілком — прибираємо подвійний акцент. */
.woocommerce-checkout #order_review table.alumnus-summary tfoot strong {
  font-weight: inherit;
}

/* Заголовок картки — як «Підсумок замовлення» у блоковому вигляді. */
.woocommerce-checkout #order_review_heading {
  font-size: 2rem;
}

/**
 * Заголовок підсумку — всередині картки
 *
 * Штатний `#order_review_heading` — окремий елемент грида, і він потрапляв
 * у той самий рядок, що й висока ліва колонка з полями. Через це під ним
 * зяяла порожнеча, а картка починалася аж навпроти блоку оплати.
 *
 * У блоковому checkout'і заголовок і так лежить усередині картки — робимо так само:
 * штатний ховаємо, свій друкує оверрайд review-order.php.
 */
.woocommerce-checkout #order_review_heading {
  display: none;
}

/* Суму в заголовку не дублюємо: у блоці вона там заради згорнутого вигляду
   на телефоні, а наша картка розгорнута завжди — «Загалом» видно нижче. */
.woocommerce-checkout #order_review .alumnus-summary__title {
  margin: 0 0 2rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--thm-color-text-heading);
}

@media (min-width: 992px) {
  .woocommerce-checkout form.checkout #order_review {
    /* тепер картка — єдиний елемент правої колонки і починається зверху */
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }
}