/**
 * Anita Butiik — Theme Styles for ProCommerce BEM Pages
 *
 * Maps pc-* BEM classes to match the Ecomus theme (tf-*) design 1:1.
 * Loaded after styles.css and custom.css.
 *
 * Brand tokens (--main, --primary, --text, --line, --white, --bg-11, etc.)
 * are defined in styles.css :root. Per-property var(--main, #000) fallbacks
 * remain throughout this file as defense-in-depth.
 */

/* ==========================================================================
   1. SHARED COMPONENTS
   ========================================================================== */

/* Page Title — matches .tf-page-title */
.pc-page-title {
  padding: 69px 0 65px;
  background: linear-gradient(to right, rgba(232,238,235,0.25) 0%, rgba(232,238,235,0.25) 20%, rgba(249,232,228,0.5) 40%, rgba(253,240,237,0.5) 50%, rgba(249,232,228,0.5) 60%, rgba(232,238,235,0.25) 80%, rgba(232,238,235,0.25) 100%);
}
.pc-page-title .heading { font-size: 42px; font-weight: 400; line-height: 50px; text-align: center; }

/* Breadcrumb — matches .tf-breadcrumb-wrap */
.pc-breadcrumb { padding: 22.5px 0; }
.pc-breadcrumb__list { list-style: none; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 0; margin: 0; }
.pc-breadcrumb__item { color: var(--text, #545454); font-size: 14px; }
.pc-breadcrumb__item + .pc-breadcrumb__item::before { content: '\003E'; padding: 0 4px; font-size: 8px; font-weight: 700; color: var(--text, #545454); }
.pc-breadcrumb__item a { color: var(--text, #545454); text-decoration: none; }
.pc-breadcrumb__item a:hover { color: var(--main, #000); }
.pc-breadcrumb__item--active { color: var(--main, #000); }

/* Pagination — matches .tf-pagination-wrap */
.pc-pagination { padding: 30px 0 0; display: flex; justify-content: center; }
.pc-pagination__list { list-style: none; display: flex; gap: 8px; align-items: center; padding: 0; margin: 0; }
.pc-pagination__item { margin: 0; }
.pc-pagination__link {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line, #ebebeb); border-radius: 3px;
  background: var(--white, #fff); color: var(--main, #000);
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: all 0.3s ease;
}
.pc-pagination__link:hover { border-color: var(--main, #000); background: var(--main, #000); color: var(--white, #fff); }
.pc-pagination__link--active { background: var(--main, #000); border-color: var(--main, #000); color: var(--white, #fff); }

/* ==========================================================================
   SHARED BLACK PILL BUTTON
   Used by ALL action buttons across product, cart, checkout, auth, invoice,
   order-status, etc. Includes shine animation on hover.

   No `!important` — pc-pages.css is loaded AFTER bootstrap.min.css, styles.css,
   and custom.css (see includes/head.php), so cascade order already wins at
   matching specificity. The compound selectors like `.pc-checkout .btn-fill`
   (0,2,0) outrank Bootstrap's single-class `.btn-fill` (0,1,0) by specificity.

   Subset selectors are deliberately NOT listed: `.pc-checkout .pc-btn.btn-fill`
   is a strict subset of `.pc-checkout .btn-fill`, and `.invoice-section .top
   .btn-primary` is always also matched by `.invoice-section .top .btn` (Bootstrap
   convention pairs `.btn` + `.btn-primary`), so listing them twice just bloats
   the rule.
   ========================================================================== */
.pc-btn,
.pc-btn--danger,
.pc-product__add-to-cart,
.pc-auth__btn--primary,
.pc-order-status .btn-primary,
.pc-checkout .btn-fill,
.invoice-section .top .btn,
.cart-checkout-btn .pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  background-color: var(--main, #000);
  border: 1px solid var(--main, #000);
  color: var(--white, #fff);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.pc-btn::after,
.pc-btn--danger::after,
.pc-product__add-to-cart::after,
.pc-auth__btn--primary::after,
.pc-order-status .btn-primary::after,
.pc-checkout .btn-fill::after,
.invoice-section .top .btn::after,
.cart-checkout-btn .pc-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 150%; width: 200%;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skew(-20deg); pointer-events: none;
}
.pc-btn:hover,
.pc-product__add-to-cart:hover,
.pc-auth__btn--primary:hover,
.pc-order-status .btn-primary:hover,
.pc-checkout .btn-fill:hover,
.invoice-section .top .btn:hover,
.cart-checkout-btn .pc-btn:hover {
  background-color: var(--main, #000);
  border-color: var(--main, #000);
  color: var(--white, #fff);
}
.pc-btn:hover::after,
.pc-product__add-to-cart:hover::after,
.pc-auth__btn--primary:hover::after,
.pc-order-status .btn-primary:hover::after,
.pc-checkout .btn-fill:hover::after,
.invoice-section .top .btn:hover::after,
.cart-checkout-btn .pc-btn:hover::after,
.pc-btn--danger:hover::after { animation: shine 0.75s cubic-bezier(0.01, 0.56, 1, 1); }

/* Danger variant — destructive actions (unlink account, confirm delete, etc.)
   Overrides only the red color; pill shape, padding, shine animation all
   inherited from the shared rule above. */
.pc-btn--danger {
  background-color: var(--primary, #db1215);
  border-color: var(--primary, #db1215);
}
.pc-btn--danger:hover {
  background-color: #b50f12;
  border-color: #b50f12;
  color: var(--white, #fff);
}

/* Outline variant — background-transparent, dark text. Used by order-status
   secondary buttons (download invoice, back to cart). Does NOT inherit the
   shine animation (no ::after) and explicitly suppresses any shine from the
   base black pill styles by resetting background to transparent. */
.pc-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  background-color: transparent;
  border: 1px solid var(--main, #000);
  color: var(--main, #000);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.pc-btn--outline:hover {
  background-color: var(--main, #000);
  color: var(--white, #fff);
}

/* Quantity Selector — matches .wg-quantity */
.pc-quantity {
  width: 127px; display: flex; justify-content: space-between;
  background-color: var(--bg-11, #f2f2f2); border-radius: 3px; overflow: hidden;
}
.pc-quantity__btn,
.pc-quantity button,
.pc-quantity .btn-quantity {
  width: 38px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--main, #000); cursor: pointer;
  border: none; background: transparent;
  padding: 0; margin: 0; outline: none; line-height: 1;
  transition: all 0.3s ease; user-select: none;
  -webkit-appearance: none; appearance: none;
}
.pc-quantity__btn:hover,
.pc-quantity button:hover,
.pc-quantity .btn-quantity:hover { color: var(--primary, #db1215); }
.pc-quantity__btn:focus,
.pc-quantity button:focus,
.pc-quantity .btn-quantity:focus { outline: none; box-shadow: none; }
/* Override Bootstrap form-control defaults */
.pc-quantity__input,
.pc-quantity input {
  width: 51px; height: 46px; padding: 0;
  background-color: transparent !important; background: transparent !important;
  border: 0 !important; border-radius: 0;
  text-align: center; font-size: 16px; font-weight: 600; line-height: 26px;
  color: var(--main, #000); -moz-appearance: textfield; appearance: textfield;
  box-shadow: none !important; outline: none !important;
}
.pc-quantity__input::-webkit-outer-spin-button,
.pc-quantity__input::-webkit-inner-spin-button,
.pc-quantity input::-webkit-outer-spin-button,
.pc-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* ==========================================================================
   2. PRODUCT PAGE
   ========================================================================== */

/* Product Section — matches .flat-spacing-4 */
.pc-product { padding: 0 0 100px; }

/* Layout — CSS grid (required by zoom.js which uses grid-column on info + zoom target) */
.pc-product__layout { display: grid; grid-template-columns: 48% 1fr; gap: 10px; }
.pc-product__gallery { position: sticky; top: 20px; align-self: start; overflow: hidden; }
.pc-product__info { padding-left: 25px; }
.pc-product__single-image { margin: 0; }
.pc-product__single-image img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; vertical-align: middle; }

/* Gallery — matches .thumbs-slider */
.pc-gallery { display: flex; gap: 10px; }

/* Thumbnails — matches .tf-product-media-thumbs */
.pc-gallery__thumbs { width: calc(14% - 10px); max-height: 846px; flex-shrink: 0; }
.pc-gallery__thumbs .swiper-slide { height: max-content; }
.pc-gallery__thumbs img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 5px;
  cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease;
}
.pc-gallery__thumbs .swiper-slide-thumb-active img { border-color: var(--main, #000); }

/* Main image — matches .tf-product-media-main */
.pc-gallery__main { flex: 1; min-width: 0; border-radius: 10px; overflow: hidden; position: relative; }
.pc-gallery__main-swiper .swiper-slide { visibility: hidden; height: auto; }
.pc-gallery__main-swiper .swiper-slide-active { visibility: visible; }
.pc-gallery__main img { max-width: 100%; width: 100%; height: auto; object-fit: cover; display: block; cursor: zoom-in; vertical-align: middle; border-radius: 10px; }
.pc-gallery__main-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.pc-gallery__zoom-image { cursor: zoom-in; }
.pc-gallery__zoom-target { pointer-events: none; }

/* Swiper nav arrows — positioned on .pc-gallery__main */
.pc-gallery__main .swiper-button-next,
.pc-gallery__main .swiper-button-prev {
  width: 46px; height: 46px; border-radius: 50%;
  background-color: rgba(255,255,255,0.7); color: var(--main, #000);
  transition: all 0.3s ease;
}
.pc-gallery__main .swiper-button-next:hover,
.pc-gallery__main .swiper-button-prev:hover { background-color: var(--primary, #db1215); }
.pc-gallery__main .swiper-button-next:hover::after,
.pc-gallery__main .swiper-button-prev:hover::after { color: var(--white, #fff); }
.pc-gallery__main .swiper-button-next::after,
.pc-gallery__main .swiper-button-prev::after { font-size: 11px; font-weight: 700; color: var(--main, #000); }
@media (max-width: 991px) { .pc-gallery__main img { cursor: default; } }

/* Product Info — matches .tf-product-info-list */
.pc-product__info > *:not(:last-child) { margin-bottom: 20px; }

/* Title — matches .tf-product-info-title */
.pc-product__title { font-size: 22px; font-weight: 400; margin: 0 0 20px; line-height: 26.4px; }

/* SKU */
.pc-product__sku { font-size: 12px; color: var(--text, #545454); margin-bottom: 15px; line-height: 20px; }

/* Price — matches .tf-product-info-price */
.pc-product__price { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.pc-product__price--current { font-size: 28px; line-height: 28px; color: var(--main, #000); font-weight: 400; }
.pc-product__price--sale { font-size: 28px; line-height: 28px; color: var(--primary, #db1215); font-weight: 400; }
.pc-product__price--original { font-size: 20px; line-height: 20px; text-decoration: line-through; color: rgba(0,0,0,0.55); }

/* Description */
.pc-product__description { font-size: 14px; line-height: 22.4px; color: var(--text, #545454); }
.pc-product__description p { margin: 0 0 0.5em; }

/* Variant Picker — matches .tf-product-info-variant-picker + .variant-picker-item */
.pc-product__variants { display: flex; gap: 20px; flex-direction: column; }
.pc-variant-picker__label { margin-bottom: 15px; font-size: 14px; color: #875C10; }
.pc-variant-picker__value { font-weight: 600; }
.pc-variant-picker__options { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Hidden radio — matches .variant-picker-values input */
.pc-variant-picker__radio {
  position: absolute !important; overflow: hidden; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); word-wrap: normal !important;
}

/* Color swatches — matches .variant-picker-values label (color-btn) */
.pc-variant-picker__color {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid transparent; cursor: pointer; padding: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.pc-variant-picker__color:hover { border-color: var(--main, #000); }
.pc-variant-picker__radio:checked + .pc-variant-picker__color {
  border-color: var(--main, #000); box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,0.1);
}
.pc-variant-picker__color--sold-out { opacity: 0.35; pointer-events: none; }
.pc-variant-picker__swatch {
  width: 100%; height: 100%; border-radius: 50%; display: block;
  border: 1px solid rgba(134,134,134,0.12);
}

/* Size buttons — Amazon-style (matches custom.css overrides) */
.pc-variant-picker__size {
  min-width: 45px; height: 38px; width: max-content;
  padding: 7px 15px; border: 1px solid #888c8c; border-radius: 8px;
  background: #fff; cursor: pointer; text-align: center;
  font-size: 14px; font-weight: 400; line-height: 22.4px; color: #0f1111;
  transition: all 0.3s ease; position: relative;
}
.pc-variant-picker__size:hover { border-color: #0f1111; }
.pc-variant-picker__radio:checked + .pc-variant-picker__size {
  border-color: transparent; box-shadow: 0 0 0 2px #2162a1; background: #fff;
}
.pc-variant-picker__size--sold-out {
  opacity: 1; border: 1px solid #d5d5d5; border-radius: 8px;
  background: #f7f7f7; color: #aaa; pointer-events: none; overflow: hidden;
}
.pc-variant-picker__size.sold-out-line::after {
  content: ''; position: absolute; top: 50%; left: -10%;
  width: 140%; height: 0.5px; background: #999; transform: rotate(-12deg);
}

/* Quantity + Actions — matches .tf-product-info-quantity + .tf-product-info-buy-button */
.pc-product__actions { display: flex; flex-direction: column; gap: 20px; }
.pc-product__quantity { display: flex; flex-direction: column; }
.pc-product__quantity-label { margin-bottom: 5px; font-size: 14px; font-weight: 600; color: var(--main, #000); }

/* Add to Cart — width auto, uses shared .pc-btn styles above */
.pc-product__add-to-cart { width: max-content !important; }
.pc-product__add-to-cart--disabled { opacity: 0.3; cursor: not-allowed; }
.pc-product__add-to-cart--disabled::after { display: none; }

/* Share — matches .tf-product-info-extra-link */
.pc-product__share { display: flex; align-items: center; gap: 10px 30px; flex-wrap: wrap; }
.pc-product__share-link { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--main, #000); cursor: pointer; text-decoration: none; }
.pc-product__share-link .uil { font-family: 'icomoon' !important; font-style: normal; font-weight: normal; speak: never; line-height: 1; font-size: 20px; }
.pc-product__share-link .uil-share-alt::before { content: "\e952"; }
.pc-product__share-link:hover { color: var(--primary, #db1215); }

/* Tabs — matches .widget-tabs.style-has-border */
.pc-product-tabs { padding: 50px 0 80px; }
.pc-product-tabs > .container { padding-left: 0; padding-right: 0; }
.pc-product-tabs .container { border: 1px solid var(--line, #ebebeb); border-radius: 3px; }

.pc-tabs__nav {
  list-style: none; display: flex; gap: 10px 50px; padding: 0;
  margin: 0 38px; border-bottom: 1px solid var(--line, #ebebeb); overflow-x: auto;
}
.pc-tabs__nav-item { margin: 0; }
.pc-tabs__nav-btn {
  background: transparent; border: none; padding: 15px 0;
  font-size: 18px; font-weight: 600; line-height: 30px; min-width: max-content;
  cursor: pointer; color: var(--main, #000); position: relative;
  transition: all 0.3s ease;
}
.pc-tabs__nav-btn::after {
  position: absolute; content: ""; bottom: 0; left: 0;
  width: 0; height: 2px; background-color: var(--main, #000);
  transition: all 0.3s ease;
}
.pc-tabs__nav-btn.active::after { width: 100%; }
.pc-tabs__content { position: relative; overflow: hidden; }
.pc-tabs__panel {
  padding: 35px; display: block; pointer-events: none; opacity: 0; visibility: hidden;
  position: absolute; z-index: 1; top: 0; left: 0; right: 0;
  transform: translateY(30px); transition-timing-function: ease-in; transition-duration: 0.2s;
}
.pc-tabs__panel.active {
  pointer-events: auto; opacity: 1; visibility: visible; position: relative; z-index: 2;
  transform: none; transition-timing-function: ease-out; transition-duration: 0.3s; transition-delay: 0.3s;
}

/* Attributes table — matches .tf-pr-attrs */
.pc-product__attrs-table {
  width: 100%; border-spacing: 0; border-collapse: collapse;
  border-radius: 5px; border-style: hidden;
  box-shadow: 0 0 0 0.1rem var(--line, #ebebeb); color: var(--text-2, #909090);
}
.pc-product__attrs-table tr { border: 1px solid var(--line, #ebebeb); vertical-align: middle; }
.pc-product__attrs-table th { padding: 10px; border-right: 1px solid var(--line, #ebebeb); font-weight: 700; text-align: left; }
.pc-product__attrs-table td { padding: 10px; }

/* Related Products — matches .flat-spacing-1 + .card-product */
.pc-related-products { padding: 70px 0; }
.pc-related-products__title { font-size: 42px; font-weight: 400; line-height: 50.4px; margin-bottom: 30px; text-align: center; padding: 0 15px; }
.pc-related-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.pc-related-products__item { overflow: hidden; text-align: center; }
.pc-related-products__item:nth-child(n+5) { display: none; }
.pc-related-products__image { display: block; overflow: hidden; border-radius: 10px; position: relative; }
.pc-related-products__image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform 0.5s ease; border-radius: 10px; }
.pc-related-products__image:hover img { transform: scale(1.06); }
.pc-related-products__info { padding: 15px 0 0; text-align: center; }
.pc-related-products__name { font-size: 14px; color: var(--main, #000); text-decoration: none; display: block; line-height: 22.4px; }
.pc-related-products__name:hover { color: var(--primary, #db1215); }
.pc-related-products__price { font-size: 14px; margin-top: 2px; display: flex; justify-content: center; gap: 8px; line-height: 14px; font-weight: 600; }
.pc-related-products__price--sale { color: var(--main, #000); }
.pc-related-products__price--old { text-decoration: line-through; color: rgba(0,0,0,0.5); font-weight: 400; display: inline-block; margin-right: 5px; }

/* PhotoSwipe */
.pswp, .pswp--open, .pswp__bg { background: #000 !important; }
.pswp { --pswp-bg: #000 !important; }

/* ==========================================================================
   3. CART PAGE
   ========================================================================== */

.pc-cart { padding: 80px 0 60px; }
.pc-cart__wrap { display: flex; gap: 30px; }
.pc-cart__items { flex: 1; min-width: 0; }
.pc-cart__footer { width: 440px; flex-shrink: 0; }
.pc-cart__footer-inner { position: sticky; top: 100px; }

/* Table — matches .tf-table-page-cart */
.pc-cart__table { width: 100%; border-collapse: collapse; }
.pc-cart__table thead { border-bottom: 1px solid #ebebeb; }
.pc-cart__table th { padding: 18px 10px; font-size: 14px; font-weight: 600; color: var(--main, #000); text-align: left; }
.pc-cart__table th.text-center { text-align: center; }
/* Center "Kogus" header to match centered quantity input */
.pc-cart__table th:nth-last-child(2) { text-align: center; }
.pc-cart__row { border-bottom: 1px solid #ebebeb; }
.pc-cart__row td { padding: 30px 10px; vertical-align: middle; font-size: 14px; }

/* Product cell */
.pc-cart__cell-product { display: flex; gap: 20px; align-items: center; }
.pc-cart__cell-product img { width: 100px; height: 125px; object-fit: cover; border-radius: 10px; }
.pc-cart__cell-product .cart-info { flex: 1; }
.pc-cart__cell-product .cart-title { font-weight: 400; font-size: 14px; color: var(--main, #000); text-decoration: none; display: block; line-height: 22.4px; }
.pc-cart__cell-product .cart-title:hover { color: var(--primary, #db1215); }
.pc-cart__cell-product .remove-cart { font-size: 12px; color: rgba(0,0,0,0.55); cursor: pointer; margin-top: 8px; display: inline-block; text-decoration: underline; }
.pc-cart__cell-product .remove-cart:hover { color: var(--primary, #db1215); }

/* Other cells */
.pc-cart__cell-size, .pc-cart__cell-color { text-align: center; }
.pc-cart__cell-price .cart-price { white-space: nowrap; }
.pc-cart__cell-quantity { text-align: center; }
.pc-cart__cell-quantity .cart-quantity { display: flex; justify-content: center; }
.pc-cart__cell-total { font-weight: 600; }
.pc-cart__cell-total .cart-total { white-space: nowrap; }

/* Actions */
.pc-cart__actions { margin-top: 20px; }
.pc-cart__actions a { font-size: 14px; color: rgba(0,0,0,0.55); }
.pc-cart__actions a:hover { color: var(--main, #000); }

/* Footer/Sidebar */
.pc-cart__checkout { background-color: var(--bg-11, #f2f2f2); border-radius: 2.5px; padding: 30px; }
.pc-cart__totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; line-height: 22.4px; }
.pc-cart__totals-row .fw-6 { font-weight: 600; }
.pc-cart__totals-row .total-value { font-size: 20px; }
.pc-cart__trust { margin-top: 20px; text-align: center; }
.pc-cart__trust p { font-size: 14px; }
.pc-cart__trust .cart-list-social { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }

/* Checkout button */
.cart-checkout-btn { margin-top: 20px; }
.cart-checkout-btn .pc-btn { width: 100%; height: 46px; justify-content: center; }

/* Empty cart */
.pc-cart__empty { text-align: center; padding: 80px 0; font-size: 16px; color: var(--text, #545454); }

/* Related products in cart */
.pc-cart__related { padding: 70px 0; }
.pc-cart__related-title { font-size: 42px; font-weight: 400; line-height: 50.4px; margin-bottom: 30px; text-align: center; padding: 0 15px; }
.pc-cart__related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.pc-cart__related-item { overflow: hidden; }
.pc-cart__related-item:nth-child(n+5) { display: none; }
.pc-cart__related-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; }

/* ==========================================================================
   4. AUTH PAGES
   ========================================================================== */

.pc-auth { padding: 80px 0; }
.pc-auth__wrapper { max-width: 440px; margin: 0 auto; background-color: var(--bg-11, #f2f2f2); padding: 30px; border-radius: 3px; }
.pc-auth__logged-in { text-align: center; padding: 40px 0; }
.pc-auth__logged-in h3 { font-size: 22px; margin-bottom: 10px; font-weight: 400; }

/* Form fields with floating labels.
   Floating label mechanics (position: relative, label positioning) live in
   pcadmin/public/core/css/core.css. Theme owns spacing only. */
.pc-auth__field { margin-bottom: 16px; }
.pc-auth__input { width: 100%; height: 50px; border: 1px solid #ebebeb; border-radius: 3px; font-size: 14px; background: var(--white, #fff); color: var(--main, #000); transition: border-color 0.3s ease; outline: none; }
.pc-auth__input:focus { border-color: var(--main, #000); }
.pc-auth__label { font-size: 14px; color: rgba(0,0,0,0.55); }
/* Floated label font-size — themes can override this */
input.pc-auth__input:focus + .pc-auth__label,
input.pc-auth__input:not(:placeholder-shown) + .pc-auth__label { font-size: 10px; }
/* Override browser autofill background to match theme */
input.pc-auth__input:-webkit-autofill,
input.pc-auth__input:-webkit-autofill:hover,
input.pc-auth__input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--white, #fff) inset !important; -webkit-text-fill-color: var(--main, #000) !important; }

/* Auth buttons — primary uses shared .pc-btn styles, full-width override */
.pc-auth__btn--primary { width: 100% !important; margin-bottom: 12px; }
/* Google button (secondary, outline) */
.pc-auth__btn--google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border-radius: 999px;
  background: var(--white, #fff); color: var(--main, #000); border: 1px solid #ebebeb;
  font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 12px;
  text-decoration: none; transition: all 0.3s ease;
}
.pc-auth__btn--google:hover { border-color: var(--main, #000); color: var(--main, #000); }
.pc-auth__btn--google svg { flex-shrink: 0; }

/* Danger button (destructive actions like unlink-google) uses .pc-btn--danger
   defined near the shared .pc-btn rule above — no auth-specific styles here. */

/* Links */
.pc-auth__forgot { text-align: right; margin: -8px 0 16px; }
.pc-auth__forgot a { font-size: 12px; color: rgba(0,0,0,0.55); text-decoration: underline; }
.pc-auth__forgot a:hover { color: var(--main, #000); }
.pc-auth__footer { text-align: center; margin-top: 20px; font-size: 14px; color: rgba(0,0,0,0.55); }
.pc-auth__footer a { color: var(--main, #000); font-weight: 500; text-decoration: underline; }
.pc-auth__footer a:hover { color: var(--primary, #db1215); }

/* Alerts */
.pc-auth__alert { padding: 12px 16px; border-radius: 3px; font-size: 14px; margin-bottom: 16px; }
.pc-auth__alert--error { background: #fef2f2; color: #c62828; border: 1px solid #fecaca; }
.pc-auth__alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Checkbox */
.pc-auth__checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.pc-auth__checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--main, #000); }

/* Title + description/hints */
.pc-auth__title { font-size: 22px; font-weight: 400; margin: 0 0 10px; line-height: 30px; color: var(--main, #000); }
.pc-auth__description { text-align: center; color: rgba(0,0,0,0.55); margin-bottom: 24px; font-size: 14px; line-height: 22.4px; }
.pc-auth__hint { font-size: 12px; color: rgba(0,0,0,0.55); margin-top: 8px; }

/* Resend verification */
.pc-auth__resend { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ebebeb; }
.pc-auth__resend h4 { font-size: 16px; margin-bottom: 12px; font-weight: 600; }

/* Status (email verified page) */
.pc-auth__status { text-align: center; padding: 20px 0; }
.pc-auth__status h3 { font-size: 22px; margin: 16px 0 8px; font-weight: 400; }
.pc-auth__status p { color: rgba(0,0,0,0.55); margin-bottom: 20px; }
.pc-auth__status-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 28px; }
.pc-auth__status-icon--success { background: #f0fdf4; color: #166534; }
.pc-auth__status-icon--error { background: #fef2f2; color: #c62828; }
.pc-auth__status-icon--warning { background: #fffbeb; color: #92400e; }
.pc-auth__status-icon--info { background: #eff6ff; color: #1e40af; }

/* Account / Order Status */
.pc-account { padding: 80px 0 60px; }

/* Sidebar nav — vertical pills, full-fill active state. align-self:start keeps the
   sticky sidebar pinned to the top of its Bootstrap col when the right column is
   shorter than viewport. */
.pc-account .account-nav { position: sticky; top: 30px; align-self: start; }
.pc-account .nav-pills { flex-direction: column; gap: 0; padding: 0; margin: 0; }
.pc-account .nav-pills .nav-item { margin: 0; }
.pc-account .nav-pills .nav-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 0;
  font-size: 15px; font-weight: 500; line-height: 20px;
  color: var(--text, #545454);
  background: transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}
.pc-account .nav-pills .nav-link:hover {
  color: var(--main, #000);
  background-color: var(--bg-11, #f2f2f2);
}
.pc-account .nav-pills .nav-link.active {
  background-color: var(--main, #000) !important;
  color: var(--white, #fff) !important;
}
.pc-account .nav-pills .nav-link i { font-size: 18px; flex-shrink: 0; }

/* Section cards */
.pc-account .account-section {
  background: var(--bg-11, #f2f2f2);
  border: 1px solid var(--line, #ebebeb);
  border-radius: 3px;
  padding: 30px;
}
.pc-account .account-section h5 { font-size: 20px; font-weight: 500; margin: 0 0 24px; color: var(--main, #000); line-height: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #ebebeb); }
.pc-account .account-section h6 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

/* Google account status cards — colored left border indicates state */
.pc-account .google-status { padding: 20px; background: var(--white, #fff); border: 1px solid var(--line, #ebebeb); border-left: 4px solid #6c757d; border-radius: 3px; margin-bottom: 15px; }
.pc-account .google-linked { border-left-color: #28a745; }
.pc-account .google-not-linked { border-left-color: #6c757d; }
.pc-account .google-status .d-flex { gap: 10px; align-items: center; }
.pc-account .google-status .fw-5 { font-weight: 500; }

/* Form elements (Bootstrap overrides) */
.pc-account .form-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--main, #000); }
.pc-account .form-control,
.pc-account .form-select {
  height: 50px; padding: 12px 18px;
  border: 1px solid var(--line, #ebebeb); border-radius: 3px;
  font-size: 14px; color: var(--main, #000);
  box-shadow: none;
}
.pc-account .form-control:focus,
.pc-account .form-select:focus { border-color: var(--main, #000); box-shadow: none; outline: none; }
.pc-account textarea.form-control { height: auto; min-height: 80px; resize: vertical; }
.pc-account .form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.pc-account .form-check-input { width: 18px; height: 18px; margin: 0; accent-color: var(--main, #000); }
.pc-account .form-check-label { font-size: 14px; color: var(--main, #000); margin: 0; cursor: pointer; }

/* Alerts */
.pc-account .alert { padding: 12px 16px; border-radius: 3px; font-size: 14px; margin-bottom: 16px; }
.pc-account .alert-danger { background: #fef2f2; color: #c62828; border: 1px solid #fecaca; }
.pc-account .alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Loading state — recolor Bootstrap spinner-border to brand black */
.pc-account #loading-state { text-align: center; padding: 60px 0; color: var(--text, #545454); }
.pc-account .spinner-border { color: var(--main, #000); }

/* Unlink-Google modal — id-based selectors because the modal is rendered outside
   <section class="pc-account"> at account.php:485, so .pc-account .modal-* would
   never match. Keep this co-located with the rest of the account styles. */
#unlink-google-modal .modal-content { border-radius: 3px; border: none; }
#unlink-google-modal .modal-header { border-bottom: 1px solid var(--line, #ebebeb); }
#unlink-google-modal .modal-footer { border-top: 1px solid var(--line, #ebebeb); gap: 10px; }

/* Account section button sizing (width: auto, smaller padding/height) lives in
   pcadmin/public/core/css/core.css — that file is loaded AFTER pc-pages.css
   on account.php and uses `width: auto !important` to beat the base rule's
   `.pc-auth__btn--primary { width: 100% !important; }`. Keeping the override
   on the pcadmin side keeps layout/structural button sizing in core.css and
   visual/color styling in this theme file. */
.pc-order-status { padding: 40px 0 80px; }
.pc-order-status__content { max-width: 700px; margin: 0 auto; }
/* Order status outline variants are marked up with the dedicated .pc-btn--outline
   class defined near the shared .pc-btn rule above — no inline-style attribute
   sniffing here. See pcadmin/core/pages/order-status.php. */

/* Invoice page — buttons inherit shared .pc-btn styles via the consolidated rule above */


/* ==========================================================================
   5. CHECKOUT PAGE
   ========================================================================== */

.pc-checkout { padding: 80px 0; }

/* Layout — 2-column grid: form left (60%), sidebar right (40%) */
.pc-checkout__wrap { display: grid; grid-template-columns: 1fr; gap: 30px; }
.pc-checkout__wrap.layout-2 { grid-template-columns: 60% 1fr; }
.pc-checkout__form { min-width: 0; }
.pc-checkout__sidebar { min-width: 0; }
.pc-checkout__sidebar-inner { position: sticky; top: 30px; background-color: #fbfbfc; padding: 30px; border-radius: 3px; display: grid; gap: 20px; }

/* Form spacing */
.form-checkout .box:not(:last-child) { margin-bottom: 15px; }
.form-checkout .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.form-checkout .fieldset { display: block; }
.form-checkout .box.fieldset { display: block; }

/* Labels with required asterisk */
.form-checkout label { display: block; margin-bottom: 10px; position: relative; font-size: 14px; color: var(--main, #000); }
.form-checkout label.required::after,
.form-checkout fieldset.required > label::after { content: " *"; color: var(--primary, #db1215); }

/* Inputs — override Bootstrap form-control defaults inside checkout */
.form-checkout input[type="text"],
.form-checkout input[type="email"],
.form-checkout input[type="tel"],
.form-checkout input[type="number"],
.form-checkout textarea {
  width: 100%; height: 50px; padding: 12px 18px;
  border: 1px solid var(--line, #ebebeb); border-radius: 3px;
  font-size: 14px; line-height: 24px;
  background: var(--white, #fff); color: var(--main, #000);
  transition: border-color 0.3s ease; box-sizing: border-box; outline: none;
}
.form-checkout textarea { height: auto; min-height: 90px; resize: vertical; }
.form-checkout input:focus,
.form-checkout textarea:focus { border-color: var(--main, #000); box-shadow: none; outline: none; }
.form-checkout input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--white, #fff) inset !important; -webkit-text-fill-color: var(--main, #000) !important; }

/* Select wrapper + dropdown arrow — matches production .select-custom.
   Dual-scoped to .pc-account because the parcel-locker country pickers reuse it. */
.pc-checkout .select-custom,
.form-checkout .select-custom,
.pc-account .select-custom { position: relative; }
.pc-checkout .select-custom::after,
.form-checkout .select-custom::after,
.pc-account .select-custom::after {
  font-family: "icomoon";
  content: "\e904";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  font-weight: 700;
  color: var(--main, #000);
  pointer-events: none;
  z-index: 1;
}
.pc-checkout .pc-select,
.form-checkout .pc-select,
.form-checkout select.pc-select {
  width: 100%; height: 50px; padding: 0 36px 0 18px;
  border: 1px solid var(--line, #ebebeb); border-radius: 3px;
  background-color: var(--white, #fff); color: var(--main, #000);
  font-size: 14px; line-height: 24px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; outline: none; position: relative;
}
.pc-checkout .pc-select:focus { border-color: var(--main, #000); }
.pc-checkout .w-100 { width: 100% !important; }

/* Checkbox + radio (.pc-check) — and Bootstrap form-check fallback */
.pc-checkout .pc-check,
.pc-checkout .form-check-input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--main, #000); }
.pc-checkout input[type="radio"].pc-check,
.pc-checkout input[type="radio"].form-check-input { border-radius: 50%; }
.pc-checkout .box-checkbox { display: flex; align-items: center; gap: 10px; }
.pc-checkout .fieldset-radio { display: flex; align-items: center; gap: 10px; }
.pc-checkout .form-check { display: flex; align-items: center; gap: 10px; padding-left: 0; margin-bottom: 8px; }
.pc-checkout .form-check label,
.pc-checkout .form-check .form-check-label { margin-bottom: 0; cursor: pointer; }

/* Combobox visual styles (positioning + show/hide live in pcadmin core.css) */
.pc-checkout .combobox-input,
.pc-account .combobox-input { width: 100%; height: 50px; padding: 12px 36px 12px 18px; border: 1px solid var(--line, #ebebeb); border-radius: 3px; font-size: 14px; background: var(--white, #fff); color: var(--main, #000); outline: none; box-sizing: border-box; }
.pc-checkout .combobox-input:focus,
.pc-account .combobox-input:focus { border-color: var(--main, #000); }
.pc-checkout .combobox-dropdown,
.pc-account .combobox-dropdown { background: var(--white, #fff); border: 1px solid var(--line, #ebebeb); border-top: none; border-radius: 0 0 3px 3px; max-height: 280px; overflow-y: auto; }
.pc-checkout .combobox-dropdown .combobox-group,
.pc-account .combobox-dropdown .combobox-group { padding: 8px 18px; font-size: 12px; font-weight: 600; color: var(--text, #545454); background: var(--bg-11, #f2f2f2); text-transform: uppercase; letter-spacing: 0.5px; }
.pc-checkout .combobox-dropdown .combobox-option,
.pc-checkout .combobox-dropdown .combobox-item,
.pc-account .combobox-dropdown .combobox-option,
.pc-account .combobox-dropdown .combobox-item { padding: 10px 18px; cursor: pointer; font-size: 14px; color: var(--main, #000); }
.pc-checkout .combobox-dropdown .combobox-option:hover,
.pc-checkout .combobox-dropdown .combobox-option.active,
.pc-checkout .combobox-dropdown .combobox-item:hover,
.pc-checkout .combobox-dropdown .combobox-item.active,
.pc-account .combobox-dropdown .combobox-option:hover,
.pc-account .combobox-dropdown .combobox-option.active,
.pc-account .combobox-dropdown .combobox-item:hover,
.pc-account .combobox-dropdown .combobox-item.active { background: var(--bg-11, #f2f2f2); }

/* Coupon box */
.pc-checkout .coupon-box { display: flex; gap: 10px; align-items: stretch; }
.pc-checkout .coupon-box input { flex: 1; height: 50px; padding: 12px 18px; border: 1px solid var(--line, #ebebeb); border-radius: 3px; font-size: 14px; background: var(--white, #fff); color: var(--main, #000); outline: none; }
.pc-checkout .coupon-box input:focus { border-color: var(--main, #000); }
.pc-checkout .coupon-box button { flex-shrink: 0; }

/* Buttons in checkout — pill, fill, icon variants */
.pc-checkout .rounded-pill { border-radius: 999px; }
/* checkout .btn-fill inherits shared .pc-btn styles via the consolidated rule above */
.pc-checkout .pc-btn.justify-content-center { justify-content: center; }
.pc-checkout .pc-btn.btn-icon { gap: 8px; }
.pc-checkout .pc-btn.w-100 { width: 100%; }

/* Sidebar — totals rows use h6 with fw-5 */
.pc-checkout__sidebar h5 { font-size: 20px; font-weight: 600; margin: 0 0 12px; line-height: 30px; }
.pc-checkout__sidebar h6 { font-size: 20px; font-weight: 500; margin: 0; line-height: 30px; }
.pc-checkout__sidebar .fw-5 { font-weight: 500; }
.pc-checkout__sidebar .fw-6 { font-weight: 600; }
.pc-checkout__sidebar .text_black-2 { font-size: 14px; line-height: 22.4px; color: var(--text, #545454); }

/* Total rows — flex with separator line */
.pc-checkout__sidebar .line { display: flex; justify-content: space-between; align-items: center; }
.pc-checkout__sidebar .pb_20 { padding-bottom: 20px; }
.pc-checkout__sidebar .line.pb_20 { border-bottom: 1px solid var(--line, #ebebeb); margin-bottom: 0; }
.pc-checkout__sidebar .mb_10 { margin-bottom: 10px; }
.pc-checkout__sidebar .mb_20 { margin-bottom: 20px; }

/* Payment method radios use .tf-check */
.pc-checkout .tf-check { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--main, #000); flex-shrink: 0; }
.pc-checkout input[type="radio"].tf-check { border-radius: 50%; }
.pc-checkout .fieldset-radio label,
.pc-checkout .box-checkbox label { margin-bottom: 0; cursor: pointer; font-size: 14px; line-height: 22.4px; }

/* ==========================================================================
   6. NEWSLETTER PAGES
   ========================================================================== */

.pc-newsletter { padding: 60px 0 80px; }
.pc-newsletter__card {
  max-width: 540px; margin: 0 auto;
  background-color: var(--bg-11, #f2f2f2);
  padding: 40px 30px; border-radius: 3px;
}
.pc-newsletter__card--center { text-align: center; }
.pc-newsletter__heading { font-size: 22px; font-weight: 400; margin: 0 0 12px; line-height: 30px; color: var(--main, #000); }
.pc-newsletter__description { font-size: 14px; line-height: 22.4px; color: rgba(0,0,0,0.55); margin: 0 0 24px; }

/* Form fields */
.pc-newsletter__field { margin-bottom: 16px; text-align: left; }
.pc-newsletter__label { display: block; font-size: 14px; color: var(--main, #000); margin-bottom: 8px; }
.pc-newsletter__input {
  width: 100%; height: 50px; padding: 12px 18px;
  border: 1px solid #ebebeb; border-radius: 3px;
  background: var(--white, #fff); color: var(--main, #000);
  font-size: 14px; line-height: 24px;
  transition: border-color 0.3s ease; box-sizing: border-box; outline: none;
}
.pc-newsletter__input:focus { border-color: var(--main, #000); }

/* Status icons */
.pc-newsletter__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 28px;
}
.pc-newsletter__icon--success { background: #f0fdf4; color: #166534; }
.pc-newsletter__icon--error { background: #fef2f2; color: #c62828; }

/* Alerts */
.pc-newsletter__alert { padding: 12px 16px; border-radius: 3px; font-size: 14px; margin-top: 16px; }
.pc-newsletter__alert--error { background: #fef2f2; color: #c62828; border: 1px solid #fecaca; }
.pc-newsletter__alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Newsletter card uses the inherited full-width primary button (.pc-auth__btn--primary at line ~437),
   except the centered card variant which uses an inline-sized button. */
.pc-newsletter .pc-auth__btn--primary { margin-bottom: 0; }
.pc-newsletter__card--center .pc-auth__btn--primary { width: auto !important; min-width: 200px; }

/* ==========================================================================
   7. BLOG PAGES
   ========================================================================== */

/* Listing — matches .tf-blog .blog-article-item */
.pc-blog { padding: 40px 0 80px; }
.pc-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.pc-blog__item { display: flex; flex-direction: column; overflow: hidden; }
.pc-blog__item-image { display: block; overflow: hidden; border-radius: 10px; }
.pc-blog__item-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s ease; }
.pc-blog__item-image:hover img { transform: scale(1.06); }
.pc-blog__item-content { padding: 18px 0 0; }
.pc-blog__item-date { font-size: 12px; color: rgba(0,0,0,0.55); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.pc-blog__item-title { font-size: 18px; font-weight: 500; line-height: 26px; margin: 0 0 10px; }
.pc-blog__item-title a { color: var(--main, #000); text-decoration: none; transition: color 0.3s ease; }
.pc-blog__item-title a:hover { color: var(--primary, #db1215); }
.pc-blog__item-excerpt { font-size: 14px; line-height: 22.4px; color: var(--text, #545454); margin: 0 0 12px; }
.pc-blog__item-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--main, #000);
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid var(--main, #000);
  transition: color 0.3s ease;
}
.pc-blog__item-link:hover { color: var(--primary, #db1215); border-bottom-color: var(--primary, #db1215); }
.pc-blog__empty { text-align: center; padding: 60px 0; font-size: 16px; color: var(--text, #545454); }

/* Single Post — matches .blog-detail */
.pc-blog-post { padding: 20px 0 80px; }
.pc-blog-post .container { max-width: 860px; }
.pc-blog-post__thumb { margin: 0 0 30px; border-radius: 10px; overflow: hidden; }
.pc-blog-post__thumb img { width: 100%; height: auto; object-fit: cover; display: block; }
.pc-blog-post__header { margin-bottom: 30px; }
.pc-blog-post__title { font-size: 36px; font-weight: 400; line-height: 44px; margin: 0 0 12px; color: var(--main, #000); }
.pc-blog-post__date { font-size: 13px; color: rgba(0,0,0,0.55); text-transform: uppercase; letter-spacing: 0.5px; }
.pc-blog-post__content {
  font-size: 16px; line-height: 28px; color: var(--text, #545454);
  margin-bottom: 40px;
}
.pc-blog-post__content p { margin: 0 0 1em; }
.pc-blog-post__content h2,
.pc-blog-post__content h3,
.pc-blog-post__content h4 { font-weight: 500; line-height: 1.3; margin: 1.5em 0 0.5em; color: var(--main, #000); }
.pc-blog-post__content h2 { font-size: 28px; }
.pc-blog-post__content h3 { font-size: 22px; }
.pc-blog-post__content h4 { font-size: 18px; }
.pc-blog-post__content img { max-width: 100%; height: auto; border-radius: 5px; margin: 1em 0; }
.pc-blog-post__content ul,
.pc-blog-post__content ol { padding-left: 1.5em; margin: 0 0 1em; }
.pc-blog-post__content blockquote {
  border-left: 3px solid var(--main, #000); padding: 0 0 0 20px;
  margin: 1.5em 0; font-style: italic; color: var(--main, #000);
}
.pc-blog-post__content a { color: var(--primary, #db1215); text-decoration: underline; }

/* Author card */
.pc-blog-post__author {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: var(--bg-11, #f2f2f2); border-radius: 5px;
  margin-bottom: 30px;
}
.pc-blog-post__author-image { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }
.pc-blog-post__author-image img { width: 100%; height: 100%; object-fit: cover; }
.pc-blog-post__author-info { flex: 1; min-width: 0; }
.pc-blog-post__author-name { font-size: 16px; font-weight: 500; color: var(--main, #000); margin-bottom: 4px; }
.pc-blog-post__author-date { font-size: 13px; color: rgba(0,0,0,0.55); }

/* Back link */
.pc-blog-post__back { padding-top: 20px; border-top: 1px solid var(--line, #ebebeb); }
.pc-blog-post__back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--main, #000);
  text-decoration: none; transition: color 0.3s ease;
}
.pc-blog-post__back-link:hover { color: var(--primary, #db1215); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 1149px) {
  .pc-product__layout { grid-template-columns: 1fr; }
  .pc-product__gallery { position: static; }
  .pc-product__info { padding-left: 0; }
  .pc-gallery__thumbs { display: none; }
  .pc-gallery { display: block; }
  .pc-gallery__main { width: 100%; }
}

@media (max-width: 991px) {
  .pc-related-products__grid { grid-template-columns: repeat(2, 1fr); }
  .pc-cart__wrap { flex-direction: column; }
  .pc-cart__footer { width: 100%; }
  .pc-cart__footer-inner { position: static; }
  .pc-cart__related-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-checkout__wrap.layout-2 { grid-template-columns: 1fr; }
  .pc-checkout__sidebar-inner { position: static; }
  .pc-account .account-nav { position: static; margin-bottom: 30px; }
  .pc-account .nav-pills .nav-link { padding: 12px 15px; font-size: 15px; }
  .pc-account .account-section { padding: 20px; }
  .pc-blog__grid { grid-template-columns: repeat(2, 1fr); }
  .pc-blog-post__title { font-size: 28px; line-height: 36px; }
}

@media (max-width: 767px) {
  .pc-product__title { font-size: 18px; }
  .pc-product__price--current, .pc-product__price--sale { font-size: 22px; line-height: 22px; }
  .pc-product__price--original { font-size: 16px; }
  .pc-product__actions { flex-direction: column; align-items: stretch; }
  .pc-product__add-to-cart { width: 100%; min-width: auto; }
  .pc-cart__table thead { display: none; }
  .pc-cart__row { display: block; padding: 20px 0; }
  .pc-cart__row td { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
  .pc-cart__row td::before { content: attr(data-cart-title); font-weight: 600; font-size: 12px; text-transform: uppercase; color: rgba(0,0,0,0.55); }
  .pc-cart__cell-product { width: 100%; }
  .pc-page-title .heading { font-size: 22px; }
  .pc-auth__wrapper { padding: 0 15px; }
  .pc-account { padding: 40px 0; }
  .pc-account .account-section { padding: 18px; }
  .pc-related-products__title, .pc-cart__related-title { font-size: 22px; }
  .pc-tabs__nav-btn { font-size: 16px; padding: 12px 15px; }
  .pc-blog__grid { grid-template-columns: 1fr; }
  .pc-blog-post__title { font-size: 24px; line-height: 32px; }
  .pc-blog-post__content { font-size: 15px; line-height: 26px; }
  .pc-newsletter__card { padding: 30px 20px; }
  .pc-newsletter__heading { font-size: 18px; }
}