/* === kaynak: layout.css 1287-1515, 4265-4778 - Z-2 sprint === */

   SECTION 40 — FOOTER v2 (tf2-)
   Direct copy from style.css lines 15351–15574
   WhatsApp color moved to variable system
   ═══════════════════════════════════════════════════════════════════ */
.tf2-footer {
  --tf2-bg:       var(--th-footer-bg, #0f1419);
  --tf2-bg2:      var(--th-footer-bg-top, #161d26);
  --tf2-bg3:      var(--th-footer-bg-bottom, #1b2433);
  --tf2-bgbar:    #090d12;
  --tf2-accent:   var(--th-footer-link-hover, var(--th-color-accent));
  --tf2-text:     var(--th-footer-text, #e2e8f0);
  --tf2-muted:    var(--th-footer-text-muted, #8899aa);
  --tf2-border:   rgba(255,255,255,.07);
  --tf2-radius:   var(--th-radius-lg);
  --tf2-whatsapp: var(--th-whatsapp-bg, #25d366);
}

/* TOP BAR */
.tf2-footer-top { background: var(--tf2-bg2); border-bottom: 1px solid var(--tf2-border); }
.tf2-footer-top-inner {
  max-width: 1440px; margin: 0 auto; padding: 36px 24px;
  display: flex; align-items: flex-start; gap: 32px;
}
.tf2-top-sep { width: 1px; align-self: stretch; background: var(--tf2-border); flex-shrink: 0; }

/* Newsletter */
.tf2-newsletter { flex: 2; display: flex; flex-direction: column; gap: 12px; }
.tf2-sec-icon {
  width: 42px; height: 42px; background: rgba(255,96,0,.12);
  border-radius: var(--th-radius-xl); display: flex; align-items: center;
  justify-content: center; color: var(--tf2-accent); font-size: 18px;
}
.tf2-newsletter strong, .tf2-app-block strong, .tf2-social-block strong {
  font-size: 15px; font-weight: 700; color: var(--tf2-text); display: block;
}
.tf2-newsletter > span, .tf2-app-block > span {
  font-size: 12px; color: var(--tf2-muted); line-height: 1.5;
}
.tf2-newsletter em { color: var(--tf2-accent); font-style: normal; font-weight: 600; }
.tf2-nl-form {
  display: flex; max-width: 400px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--tf2-radius);
  overflow: hidden; background: rgba(255,255,255,.04);
}
.tf2-nl-form input {
  flex: 1; padding: 11px 14px; background: transparent;
  border: none; outline: none; font-size: 13px; color: var(--tf2-text);
}
.tf2-nl-form input::placeholder { color: var(--tf2-muted); }
.tf2-nl-form button {
  padding: 11px 18px; background: var(--tf2-accent); color: var(--th-color-text-inverse);
  border: none; cursor: pointer; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: filter .2s;
}
.tf2-nl-form button:hover { filter: brightness(1.1); }
.tf2-kvkk { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; }
.tf2-kvkk input { margin-top: 2px; accent-color: var(--tf2-accent); flex-shrink: 0; }
.tf2-kvkk span { font-size: 11px; color: var(--tf2-muted); line-height: 1.5; }
.tf2-kvkk a { color: var(--tf2-accent); text-decoration: none; }

/* App */
.tf2-app-block { flex: 1.5; display: flex; flex-direction: column; gap: 12px; }
.tf2-app-btns { display: flex; flex-direction: column; gap: 8px; }
.tf2-app-btns a img { border-radius: var(--th-radius-md); border: 1px solid rgba(255,255,255,.1); max-width: 130px; display: block; }

/* Social */
.tf2-social-block { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.tf2-social-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.tf2-social-icons a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--tf2-radius); color: var(--tf2-muted); font-size: 14px;
  transition: background .2s, color .2s, border-color .2s; text-decoration: none;
}
.tf2-social-icons a:hover { background: var(--tf2-accent); border-color: var(--tf2-accent); color: var(--th-color-text-inverse); }

/* MAIN NAV */
.tf2-footer-main { background: var(--tf2-bg); }
.tf2-footer-main-inner {
  max-width: 1440px; margin: 0 auto; padding: 48px 24px;
  display: grid; grid-template-columns: 220px repeat(4, 1fr); gap: 40px;
}
.tf2-brand { display: flex; flex-direction: column; gap: 14px; }
.tf2-brand img { max-width: 150px; height: auto; }
.tf2-brand p { font-size: 12px; color: var(--tf2-muted); line-height: 1.7; }
.tf2-trust { display: flex; flex-direction: column; gap: 6px; }
.tf2-trust li {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--tf2-muted); list-style: none;
}
.tf2-trust li i { color: var(--tf2-accent); width: 13px; }

/* Columns */
.tf2-col-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--tf2-border);
  padding: 0 0 13px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--tf2-text);
  text-transform: uppercase; letter-spacing: .8px; text-align: left;
}
.tf2-col-toggle > i:first-child { color: var(--tf2-accent); font-size: 12px; }
.tf2-col-arrow {
  margin-left: auto; font-size: 10px; color: var(--tf2-muted);
  display: none; transition: transform .25s;
}
.tf2-links {
  list-style: none; padding: 14px 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.tf2-links a {
  font-size: 13px; color: var(--tf2-muted); text-decoration: none;
  display: flex; align-items: center; gap: 6px; transition: color .15s;
}
.tf2-links a:hover { color: var(--tf2-accent); }
.tf2-wa-link { color: var(--tf2-whatsapp) !important; }
.tf2-wa-link:hover { filter: brightness(1.15); }

/* Contact */
.tf2-contact {
  font-style: normal; padding-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.tf2-c-row { display: flex; align-items: flex-start; gap: 10px; }
.tf2-c-icon {
  width: 28px; height: 28px; background: rgba(255,255,255,.05);
  border-radius: var(--th-radius-md); display: flex; align-items: center; justify-content: center;
  color: var(--tf2-accent); font-size: 12px; flex-shrink: 0; margin-top: 1px;
}
.tf2-c-label {
  display: block; font-size: 10px; font-weight: 700; color: var(--tf2-accent);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
}
.tf2-c-row div { display: flex; flex-direction: column; }
.tf2-c-row a, .tf2-c-row span { font-size: 12px; color: var(--tf2-muted); text-decoration: none; }
.tf2-c-row a:hover { color: var(--tf2-accent); }
.tf2-etbis {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tf2-border);
}
.tf2-etbis a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tf2-etbis img { width: 52px; height: auto; border-radius: var(--th-radius-sm); }
.tf2-etbis span { font-size: 11px; color: var(--tf2-muted); line-height: 1.4; }

/* BOTTOM */
.tf2-footer-bottom {
  background: var(--tf2-bg3);
  border-top: 1px solid var(--tf2-border); border-bottom: 1px solid var(--tf2-border);
}
.tf2-footer-bottom-inner {
  max-width: 1440px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.tf2-cargo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf2-cargo-label {
  font-size: 10px; font-weight: 700; color: var(--tf2-muted);
  text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
}
.tf2-cargo-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tf2-cargo-chip {
  padding: 4px 11px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--th-radius-3xl);
  font-size: 11px; color: var(--tf2-muted); white-space: nowrap;
}
.tf2-security { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tf2-sec-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--th-radius-md);
  font-size: 11px; color: var(--tf2-muted); font-weight: 500;
  white-space: nowrap; text-decoration: none; transition: border-color .2s, color .2s;
}
.tf2-sec-etbis { color: var(--tf2-accent); border-color: rgba(255,96,0,.2); }
.tf2-sec-etbis:hover { border-color: var(--tf2-accent); }
.tf2-rating {
  display: flex; align-items: center; gap: 10px;
  background: var(--tf2-accent); padding: 10px 16px; border-radius: var(--tf2-radius);
}
.tf2-rating-score { font-size: 26px; font-weight: 700; color: var(--th-color-text-inverse); line-height: 1; }
.tf2-rating-info { display: flex; flex-direction: column; gap: 3px; }
.tf2-rating-stars { display: flex; gap: 2px; color: var(--th-color-text-inverse); font-size: 11px; }
.tf2-rating-info > span { font-size: 10px; color: rgba(255,255,255,.85); font-weight: 600; }
.tf2-rating-count { font-size: 10px; color: rgba(255,255,255,.7); }

/* BAR */
.tf2-footer-bar { background: var(--tf2-bgbar); }
.tf2-footer-bar-inner {
  max-width: 1440px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.tf2-bar-left { font-size: 12px; color: var(--tf2-muted); }
.tf2-bar-nav { display: flex; align-items: center; gap: 18px; }
.tf2-bar-nav a { font-size: 12px; color: var(--tf2-muted); text-decoration: none; transition: color .15s; }
.tf2-bar-nav a:hover { color: var(--tf2-accent); }
.tf2-bar-cards img { height: 22px; width: auto; }

/* MOBILE */
@media (max-width: 992px) {
  .tf2-footer-top-inner { flex-direction: column; padding: 24px 16px; gap: 20px; }
  .tf2-top-sep { width: 100%; height: 1px; align-self: auto; }
  .tf2-footer-main-inner { grid-template-columns: 1fr; padding: 20px 16px; gap: 0; }
  .tf2-brand { padding-bottom: 20px; border-bottom: 1px solid var(--tf2-border); }
  .tf2-footer-col { border-bottom: 1px solid var(--tf2-border); }
  .tf2-col-toggle { padding: 13px 0; }
  .tf2-col-arrow { display: block; }
  .tf2-links {
    max-height: 0; overflow: hidden; padding-top: 0; gap: 0;
    transition: max-height .3s ease, padding .3s ease, gap .3s ease;
  }
  .tf2-footer-col.tf2-open .tf2-links { max-height: 600px; padding-top: 10px; gap: 9px; }
  .tf2-footer-col.tf2-open .tf2-col-arrow { transform: rotate(180deg); }
  .tf2-contact { max-height: 0; overflow: hidden; padding-top: 0; transition: max-height .3s ease, padding .3s ease; }
  .tf2-footer-col.tf2-open .tf2-contact { max-height: 600px; padding-top: 10px; }
  .tf2-etbis { display: none; }
  .tf2-footer-bottom-inner { flex-direction: column; align-items: flex-start; padding: 14px 16px; gap: 10px; }
  .tf2-footer-bar-inner { flex-direction: column; text-align: center; gap: 10px; padding: 12px 16px; }
  .tf2-bar-nav { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .tf2-rating { width: 100%; justify-content: center; }
  .tf2-security { justify-content: center; }
  .tf2-cargo { justify-content: center; }
}
@media (max-width: 576px) {
  .tf2-app-btns { flex-direction: row; flex-wrap: wrap; }
  .tf2-nl-form { max-width: 100%; }
}



/* ═══════════════════════════════════════════════════════════════════
/* === legacy.css'ten taşındı — 1I Footer / Social Icons / ETİŞ === */
/* ======================================================
   SECTION: Social Icons, ETBİS & Legacy Footer
   Lines: approx 9060–9499
   Purpose: social menu icons, ETBİS badge, legacy footer
            layout, logo-area, info section, secure images
   ====================================================== */

footer {
    background: var(--th-color-bg);
    -webkit-box-shadow: 0 10px 20px 5px var(--th-neutral-300);
    -moz-box-shadow: 0 10px 20px 5px var(--th-neutral-300);
    box-shadow: 0 10px 20px 5px var(--th-neutral-300)
}

footer .logo-area .logo img {
    max-height: 100px;
    max-width: 230px
}

footer .info {
    padding: 25px 0
}

footer .title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px
}

footer .title-3 {
    color: var(--th-color-text-secondary);
    font-size: 17px
}

footer .secure .description {
    color: var(--th-color-text);
    margin: 5px 0
}

footer .secure img {
    opacity: .5
}

footer .info ul {
    padding: 0;
    margin: 0
}

footer .info ul li {
    list-style: none;
    padding: 3px 0;
    color: var(--th-color-text);
    font-size: 13px;
    text-align: left
}

footer .info ul li a {
    display: block;
    font-size: 13px;
    position: relative;
    padding-left: 15px;
    line-height: 25px;
    transition: all var(--th-transition-normal)
}

footer .info ul li a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: ">"
}

footer .bar {
    padding: 10px 0;
    background: var(--th-color-bg)
}

footer .bar a {
    color: var(--th-color-text-secondary);
    text-align: center
}

footer .bar a:hover {
    color: var(--th-color-text-secondary)
}

footer .bar p {
    margin: 0;
    color: var(--th-color-text-secondary)
}

/* ======================================================
   SECTION: Mobile Sidebar Menu
   Lines: approx 9500–9686
   Purpose: sidebar-menu-type-2, mobile close button,
            short links, scrollbar, mobil-area footer
   ====================================================== */

.mobile-menu-close {
    display: flex;
    justify-content: center;
    margin-right: 19px;
    font-size: 40px;
    align-items: center
}

.mobile-menu-close i {
    border: 1px solid var(--th-color-border);
    padding: 1rem;
    border-radius: var(--th-radius-full);
    height: 40px;
    width: 40px;
    padding-top: 13px;
    padding-left: 14px;
    margin-top: 6px
}

/* === legacy.css'ten taşındı — 1H Mega Menu Submenu === */
/* ======================================================
   SECTION: Mega Menu – Submenu Items
   Lines: approx 11100–11505
   Purpose: single-menu-container, subtitle images,
            mega-menu nav-link overrides, dropdown categories,
            header cart hover badges
   ====================================================== */

.subtitle-img img {
    max-height: 25px;
    margin-bottom: 5px
}

.single-menu-container .single-menu li .subtitle-img {
    font-weight: 500;
    text-decoration: none;
    padding: 0;
    display: block;
    color: var(--th-color-text-inverse);
    transition: all .2s ease-in-out 0s;
    font-size: 16px
}

.single-menu-container .single-menu li .sub-single-item {
    padding: 0 15px
}

/* === legacy.css'ten taşındı — 2D Product Card section (footer/stores/video-play) === */
/* ======================================================
   SECTION: Product Card – Hover & Action Buttons
   Lines: approx 11506–11649
   Purpose: product-view-select, card-product hover effects,
            right-to-left / down-to-top button wrappers,
            carousel controls
   ====================================================== */

.product-view-select {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    align-items: center
}

.video-play i {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center
}

#payment-methods-content-0 .payment-method-form .alert,.product-carousel-mobile {
    display: none
}

.video-play {
    position: relative
}

.video-play i {
    top: 0;
    width: 30px;
    height: 30px;
    border: 3px solid var(--th-neutral-0);
    border-radius: 100%;
    line-height: 25px;
    margin: auto;
    text-indent: 1px;
    color: var(--th-color-text-inverse);
}

.cateogory-image img {
    height: 150px;
    width: 150px;
    border-radius: var(--th-radius-full)
}

.custom-image-container {
    text-align: center
}

.custom-image-container img {
    width: 100%;
    height: auto
}

@media (max-width: 768px) {
@media (max-width: 991px) {

    .category-filter-order-desktop,.dt-discount-img img,.product-view-select {
        display: none
    }

    footer .bb {
        background: var(--th-color-bg);
        box-shadow: 0 10px 20px -10px var(--th-neutral-300)
    }

    .th-card .right-to-left {
        display: none
    }

    

    footer .bar .right-image {
        justify-content: center
    }

    footer .bb .pr-5 {
        padding-right: 10px
    }

    

    .product-carousel-desktop.normal,footer .info ul li a:before,footer .logo-area {
        display: none
    }

    .mobile-header-space,.product-carousel-mobile,header.mobile {
        display: block
    }

    .stores .cards {
        display: block;
        text-align: center
    }

    .stores .card {
        display: inline-block;
        margin: 0;
        max-width: 45%;
        height: 50px;
        border: 0
    }

    footer .bar .right-image,footer .bar p {
        text-align: center
    }

    footer .bar .right-image {
        margin: 10px 0
    }

    footer .bb {
        border-top: 0;
        border-bottom: 0
    }

    footer .info {
        padding-top: 0
    }

    footer .info .title {
        color: var(--th-color-text-inverse);
        border: 0;
        padding: 10px;
        position: relative
    }

    footer .info .title::after {
        content: "+";
        right: 10px;
        top: 3px;
        bottom: 0;
        position: absolute;
        font-size: 20px;
        margin-bottom: 10px
    }

    footer .info .fs {
        text-align: center;
        border: 0;
        margin-bottom: 15px;
        padding: 10px
    }

    footer .info ul {
        margin: 0
    }

    footer .info .fs,footer .info ul li {
        color: var(--th-color-text)
    }

    footer .info ul li a {
        color: var(--th-color-text)
    }

    

    footer .secure {
        text-align: center;
        margin: 10px 0
    }
}

@media (max-width: 400px) {
}

/* === legacy.css'ten taşındı — 2D custom-module btn-cart display:none (mobile) === */
@media (max-width: 991px) {
    .custom-module-code-10564 .th-card .th-card__inner .buttons .btn-cart,.custom-module-code-8397 .th-card .th-card__inner .buttons .btn-cart,.modal-content .buttons .btn-cart,.product-profile-1 .carousel .carousel-indicators {
        display: none
    }

    .custom-module-code-10564 .th-card .th-card__inner .title,.custom-module-code-8397 .th-card .th-card__inner .title {
        width: 95%;
        padding: 0;
        margin-left: 5px;
        line-height: 14px;
        height: 40px;
        font-weight: 400;
        font-size: 10px;
        color: var(--th-neutral-700);
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center
    }

/* === legacy.css'ten taşındı — 1A sticky header shrink (AŞAMA 9) === */
.th-header__header { transition: padding .3s ease, box-shadow .3s ease; }

/* === legacy.css'ten taşındı — 1A skip-link a11y (AŞAMA 9) === */
.th-header__skip-link{position:absolute;top:-100%;left:16px;z-index:10000;padding:12px 24px;background:var(--th-color-accent);color:var(--th-color-text-inverse);font-weight:700;border-radius:0 0 8px 8px;text-decoration:none;transition:top .2s}
.th-header__skip-link:focus{top:0}

/* === legacy.css'ten taşındı — 1A mobile search iOS fix (AŞAMA 9) === */
@media (max-width: 768px) {
  .th-header__search-input{min-height:44px;font-size:16px !important}
}

/* === legacy.css'ten taşındı — S7 Video Player === */
/* ======================================================
   SECTION: Video Player
   Lines: approx 7340–7368
   Purpose: video embed, play button overlay
   ====================================================== */

.video {
    position: relative;
    display: inline-block
}

.video video {
    width: 100%;
    height: auto;
    display: block
}

/* === legacy.css'ten taşındı — S8 Legacy Header Cart Hover === */
/* ======================================================
   SECTION: Legacy Header – Cart Hover Dropdown
   Lines: approx 12100–12579
   Purpose: header-cart-hover dropdown, auth-links,
            btn-remove in dropdown, header-cart-summary-1,
            cart buttons, table borders
   ====================================================== */

.header-cart-summary-1 .table th {
    font-size: 12px;
    font-weight: 500
}

.header-cart-summary-1 .buttons {
    display: flex;
    flex-direction: column;
    margin-right: 12px
}

.header-cart-summary-1 .buttons .btn {
    font-size: 12px;
    padding: 5px 3px;
    margin: 5px;
    background: var(--th-btn-accent-bg);
    color: var(--th-btn-accent-text);
    transition: all var(--th-transition-normal)
}

.header-cart-summary-1 .buttons .btn:hover {
    background: var(--th-btn-accent-bg-hover);
    color: var(--th-btn-accent-text)
}

.header-cart-summary-1 .buttons .btn-color-2 {
    background: var(--th-btn-primary-bg);
    color: var(--th-btn-primary-text);
    transition: all var(--th-transition-normal)
}

.header-cart-summary-1 .buttons .btn-color-2:hover {
    background: var(--th-btn-primary-bg-hover);
    color: var(--th-btn-primary-text)
}

.header-cart-summary-1 .buttons .btn-color-2 i {
    font-size: 8px;
    padding-left: 3px
}

.table td,.table th {
    border-top: none
}

/* === legacy.css'ten taşındı — S13 Mobile UX Optimization (C7-5) === */
@media (max-width: 768px) {body{padding-bottom:72px}}

.tilbehomeMobilMenu456-cart-icon { position: relative; }

@media (max-width: 768px) {
  .tilbehomeMobilMenu456-menu-item a,.tilbehomeMobilMenu456-menu-item button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:4px 0;text-decoration:none;background:none;border:none;color:inherit;font:inherit;cursor:pointer}
  .tilbehomeMobilMenu456-menu-item i{font-size:20px}
}

@media (max-width: 768px) {
  .cat-responsive-buttons .btn-group{width:100%;gap:8px}
  .cat-responsive-buttons .btn{flex:1;min-height:44px;font-size:14px;font-weight:600;border-radius: var(--th-radius-lg)}
}

/* === legacy.css'ten taşındı — B9 .ajax-shopping-cart (general) === */
.ajax-shopping-cart {
    padding: 15px;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--th-color-bg);
    border-radius: var(--th-radius-lg);
    box-shadow: 0 2px 6px rgba(0,0,0,.08)
}

.ajax-cart-empty {
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
    color: var(--th-color-text-muted)
}

.ajax-shopping-cart .product {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--th-color-bg-tertiary);
    padding: 10px 0;
    transition: background .3s ease-in-out
}

.ajax-shopping-cart .product:last-child {
    border-bottom: 0
}

.ajax-shopping-cart .product:hover {
    background: var(--th-emerald-50);
    border-radius: var(--th-radius-md)
}

.ajax-shopping-cart .product .image {
    flex: 2;
    padding-right: 10px
}

.ajax-shopping-cart .product .price {
    flex: 2;
    font-size: 12px;
    text-align: right;
    color: var(--th-color-danger);
    font-weight: 700
}

.ajax-shopping-cart .product .info {
    flex: 3;
    text-align: right
}

.ajax-shopping-cart .product .info .name {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--th-color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease-in-out
}

.ajax-shopping-cart .product .info .name:hover {
    color: var(--th-red-700)