/* Top One Computer - small overrides on top of the Nexmart template. Loaded last. */

/* Language picker flags for the ID / EN switch */
.language-picker__flag--id::before {
  background-image: linear-gradient(to bottom, #e53e3e 50%, #ffffff 50%);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.language-picker__flag--en::before {
  background-image: url(../images/icons/flag-english.png);
}

/* Media library images are larger than the template's cut-outs; keep them inside the blocks */
.banner-carousel .slide-item .image-layer {
  max-width: 46%;
  /* never taller than the slide minus the 50 px bottom offset, so nothing gets clipped */
  max-height: calc(100% - 70px);
  text-align: right;
}

.banner-carousel .slide-item .image-layer img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

.shop-one .row {
  display: flex;
  flex-wrap: wrap;
}

.shop-one .feature-block {
  display: flex;
}

.shop-one .feature-block .shop-block-one {
  width: 100%;
  display: flex;
}

.shop-block-one .inner-box {
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shop-block-one .inner-box .image {
  right: 20px;
  bottom: 20px;
  top: auto;
  left: auto;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.shop-block-one .inner-box .image img {
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Product cards: photos differ in size, so give every card the same image box and title height */
.shop-block-two .inner-box .image-box .image {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-block-two .inner-box .image-box .image img {
  width: auto;
  max-width: 100%;
  max-height: 190px;
  object-fit: contain;
}

.shop-block-two .inner-box .lower-content h4 {
  min-height: calc(3 * 1.3em);
  line-height: 1.3;
}

/* Real product names run long: three lines, the full name stays in the link title */
.shop-block-two .inner-box .lower-content h4 a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.shop-block-two .inner-box .lower-content h5 {
  min-height: 28px;
}

.shop-block-two .inner-box .lower-content .product-stock {
  display: block;
  margin-bottom: 6px;
}

.category-block-one .inner-box .image-box img {
  height: 100%;
  object-fit: contain;
  padding: 20px;
}

.clients-list li a img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.clients-list li a .brand-name {
  font-weight: 600;
}

/* Product card: used badge sits under the discount badge, out-of-stock in red */
.shop-block-two .image-box .discount-product + .hot-product {
  top: 40px;
}

.product-stock.out-of-stock {
  color: #e53e3e;
}

.shop-block-two .option-list li form {
  display: inline-block;
}

.shop-block-two .cart-btn form {
  display: inline-block;
}

/* Header phone / WhatsApp link inherits the template's hotline text colour */
.main-header .support-box p a,
.mobile-menu .contact-info a {
  color: inherit;
}

@media only screen and (max-width: 767px) {
  .banner-carousel .slide-item .image-layer img {
    max-height: 220px;
  }
}

/* Store logo is a tall PNG; keep it the height the template reserves for its logo */
.main-header .logo-box img,
.mobile-menu .nav-logo img,
.main-footer .footer-logo img {
  max-height: 56px;
  width: auto;
}

/* Brand logos come as SVGs of very different intrinsic sizes; give every cell the same box */
.clients-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

.clients-list li a img {
  max-height: 40px;
  max-width: 130px;
}

/* Category strip under the header: the list is doubled in the markup, so scrolling half its
   width loops seamlessly (the template scrolls the full width and leaves a gap) */
@keyframes scroll-left-half {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.featured-section .featured-list {
  animation: scroll-left-half 60s linear infinite;
}

.featured-section .featured-list:hover {
  animation-play-state: paused;
}

.featured-section .single-featured:last-child {
  margin-right: 50px;
}

/* Category strip under the header: media thumbs replace the template's 30 px icons */
.featured-section .single-featured {
  display: flex;
  align-items: center;
  color: inherit;
}

.featured-section .single-featured .image-box img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Latest-products grid: flex rows so cards of different heights never stagger */
.shop-two .inner-container {
  display: flex;
  flex-wrap: wrap;
}

.shop-two .inner-container .shop-block-two {
  float: none;
  display: flex;
}

.shop-two .inner-container .shop-block-two .inner-box {
  width: 100%;
}

/* Brand grid: CSS grid with one border per cell, centred logos, any number of brands */
.clients-section .clients-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: none;
}

.clients-section .clients-list li {
  float: none;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E5E5E5 !important;
  margin: 0 -1px -1px 0;
  min-height: 92px;
}

.clients-section .clients-list li a {
  min-height: 0;
  padding: 8px 20px;
}

@media only screen and (max-width: 991px) {
  .clients-section .clients-list { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (max-width: 575px) {
  .clients-section .clients-list { grid-template-columns: repeat(3, 1fr); }
}

/* Article covers: same frame whatever the photo's aspect ratio */
.news-block-one .inner-box .image-box .image,
.news-block-one .inner-box .image-box a {
  display: block;
}

.news-block-one .inner-box .image-box img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* Sidebar recent-post thumbnails fill their box */
.blog-sidebar .post-widget .post .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shop listing: four cards per row (the template's five are too narrow for Indonesian labels),
   flex rows so heights never stagger, and the hover button stays on one line */
@media only screen and (min-width: 992px) {
  .shop-page-section .wrapper .inner-container .shop-block-two {
    width: 25%;
  }
}

.shop-page-section .wrapper .inner-container {
  display: flex;
  flex-wrap: wrap;
}

.shop-page-section .wrapper .inner-container .shop-block-two {
  float: none;
  display: flex;
}

.shop-page-section .wrapper .inner-container .shop-block-two .inner-box {
  width: 100%;
}

.shop-block-two .inner-box .lower-content .cart-btn .theme-btn {
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 14px;
}

/* Price line may wrap (strike-through compare price); the template clips it at one line */
.shop-page-section .shop-block-two .inner-box .lower-content h5 {
  max-height: none;
}

.shop-block-two .inner-box .lower-content h5 del {
  white-space: nowrap;
}

/* Price filter: Rupiah ranges are long, so the Filter button drops under the amounts */
.price-range-slider .range-box {
  flex-wrap: wrap;
  gap: 10px;
}

.price-range-slider .range-box .range-value {
  flex: 1 1 100%;
}

.price-range-slider .range-value input {
  min-width: 0;
}

/* Product price stays on one line; the strike-through price may wrap under it */
.shop-block-two .inner-box .lower-content h5 .price-current,
.shop-block-two .inner-box .lower-content h5 del {
  display: inline-block;
  white-space: nowrap;
}

/* Header hotline: keep the caption on one line under the number */
.main-header .support-box p {
  white-space: nowrap;
}

/* Header search bar: the template fixes it at 810 px, which collides with the logo and the
   language switch on laptop screens; let it shrink between the two */
@media only screen and (min-width: 992px) {
  .header-upper .upper-inner {
    gap: 24px;
  }

  .header-upper .search-area {
    width: auto;
    flex: 1 1 auto;
    max-width: 810px;
    min-width: 0;
  }

  .header-upper .search-area .search-box {
    min-width: 0;
  }

  .header-upper .right-column {
    flex-shrink: 0;
  }

  .main-header .logo-box {
    flex-shrink: 0;
  }
}

/* Contact info cards: same height per row, long addresses/emails wrap instead of overflowing */
.contact-info-section .row {
  display: flex;
  flex-wrap: wrap;
}

.contact-info-section .info-column {
  display: flex;
}

.contact-info-section .info-column .info-block-one {
  width: 100%;
  display: flex;
}

.info-block-one .inner-box {
  width: 100%;
  padding-left: 130px;
  padding-right: 20px;
}

.info-block-one .inner-box .icon-box {
  left: 20px;
}

.info-block-one .inner-box p,
.info-block-one .inner-box a {
  overflow-wrap: anywhere;
}

/* Highlights strip: text vertically centred on its icon, equal width per item */
.highlights-section .inner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.highlights-section .highlights-block-one {
  display: flex;
  align-items: center;
}

.highlights-block-one .inner-box {
  display: flex;
  align-items: center;
  min-height: 60px;
}

.highlights-block-one .inner-box h5 {
  margin: 0;
}

.highlights-block-one .inner-box .icon-box {
  top: 50%;
  transform: translateY(-50%);
}

/* Cards in a row are stretched to equal height; let the text block fill the card so the
   hover "add to cart" button (anchored to the bottom of the text block) sits at the same
   distance below every card */
.shop-block-two .inner-box {
  display: flex;
  flex-direction: column;
}

.shop-block-two .inner-box .lower-content {
  flex: 1 1 auto;
}

/* Footer "follow us" column: a real WhatsApp button plus round social icons */
.main-footer .subscribe-widget .footer-whatsapp {
  margin-top: 6px;
  margin-bottom: 18px;
  background: #25D366;
  color: #fff !important;
  transition: background 300ms ease;
}

.main-footer .subscribe-widget .footer-whatsapp:hover {
  background: #1ebe5d;
}

.main-footer .subscribe-widget .footer-socials {
  display: flex;
  gap: 10px;
}

.main-footer .subscribe-widget .footer-socials li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}

.main-footer .subscribe-widget .footer-socials li a:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
}

/* About/services photo column: both pictures share the template's portrait frame (390x570) */
.about-section .image-box .image img {
  width: 100%;
  height: 570px;
  object-fit: cover;
}

/* Mobile: the "all categories" box collapses to a second hamburger next to the menu toggle,
   which is confusing; the mobile menu already lists every category, so hide the box */
@media only screen and (max-width: 1200px) {
  .main-header .outer-box .category-box {
    display: none;
  }
}

/* Promo blocks keep room for the picture on every screen size */
.shop-block-one .inner-box {
  padding-right: 160px !important;
}

.shop-block-one .inner-box .text,
.shop-block-one .inner-box h3,
.shop-block-one .inner-box .link-box {
  position: relative;
  z-index: 2;
}

.shop-block-one .inner-box .image {
  z-index: 1;
}

/* Account menu: real page links styled like the template's tab buttons, whole row clickable */
.account-section .inner-container .tab-btns li {
  padding: 0;
}

.account-section .inner-container .tab-btns li a,
.account-section .inner-container .tab-btns li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13.5px 40px;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 300ms ease;
}

.account-section .inner-container .tab-btns li a:hover,
.account-section .inner-container .tab-btns li button:hover {
  color: var(--theme-color);
}

.account-section .inner-container .tab-btns li.active-btn a {
  color: var(--theme-color);
}

/* Preloader: white with the brand blue instead of the template's black */
.handle-preloader {
  background: #ffffff;
}

.handle-preloader .animation-preloader .spinner {
  border: 3px solid rgba(230, 74, 10, 0.2);
  border-top-color: var(--theme-color);
  height: 90px;
  width: 90px;
  margin-bottom: 30px;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading {
  -webkit-text-stroke-color: rgba(230, 74, 10, 0.35);
  font-size: 36px;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: var(--theme-color);
}

.preloader-close {
  display: none;
}

/* Mobile menu: language switch (the header picker is hidden on phones) */
.mobile-menu .mobile-language {
  padding: 15px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14px;
}

.mobile-menu .mobile-language span {
  margin-right: 8px;
  opacity: 0.7;
}

.mobile-menu .mobile-language a {
  display: inline-block;
  padding: 4px 12px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
}

.mobile-menu .mobile-language a.active {
  background: var(--theme-color);
  border-color: var(--theme-color);
}

/* Category dropdown: the template's mega panel (990 px, three columns + product image) is far
   too big for a single list of sub-categories; size the panel to its content */
.main-header .outer-box .category-box .category-list .category-dropdown .list-inner {
  width: 320px;
  padding-right: 0;
}

.main-header .outer-box .category-box .list-inner .inner-box {
  padding: 25px 30px;
  max-height: none;
  overflow: visible;
}

.main-header .outer-box .category-box .list-inner .inner-box .single-column {
  float: none;
  width: 100%;
}

/* Product cards: the "add to cart" button is always visible (els.id style) instead of
   sliding in on hover, so cards stay the same height and phones get a button too */
.shop-block-two .inner-box .lower-content .cart-btn {
  position: static;
  opacity: 1;
  visibility: visible;
  margin-top: 12px;
}

.shop-block-two .inner-box:hover .lower-content .cart-btn {
  bottom: auto;
}

.shop-block-two .inner-box:before {
  opacity: 1;
  box-shadow: none;
  border: 1px solid #EDEDED;
  border-radius: 6px;
}

.shop-block-two .inner-box:hover:before {
  height: 100%;
  box-shadow: 0px 10px 30px 0px #0000001A;
}

.shop-block-two .inner-box .lower-content .cart-btn .theme-btn {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13px;
}

.shop-block-two .inner-box .lower-content {
  display: flex;
  flex-direction: column;
}

.shop-block-two .inner-box .lower-content .cart-btn {
  margin-top: auto;
  padding-top: 12px;
}

/* "Download Pricelist" button in the header icon row: same accent as the search button */
.main-header .menu-right-content .pricelist-btn a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  margin-right: 14px;
  background: var(--theme-color);
  border-radius: 30px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  white-space: nowrap;
  transition: all 300ms ease;
}

.main-header .menu-right-content .pricelist-btn a:hover {
  background: #FFAC00;
  color: #fff !important;
}

.main-header .menu-right-content .pricelist-btn a i {
  margin-right: 8px;
  font-size: 15px;
}

@media only screen and (max-width: 991px) {
  .main-header .menu-right-content .pricelist-btn span {
    display: none;
  }

  .main-header .menu-right-content .pricelist-btn a {
    padding: 0 12px;
  }

  .main-header .menu-right-content .pricelist-btn a i {
    margin-right: 0;
  }
}

/* Downloads page cards */
.download-block .inner-box {
  padding: 30px 30px 30px 110px !important;
}

.download-block .inner-box .icon-box {
  left: 20px;
  top: 30px;
  font-size: 34px;
}

.download-block .inner-box h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.download-block .inner-box .download-meta {
  font-size: 13px;
  color: #7C7C7C;
  margin-bottom: 15px;
}

/* "Produk Terbaru" heading: the tab-box title puts the link right after the heading; spread them */
.shop-two .title-content .sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
}

/* Shop toolbar on phones: count and sort stacked, both left-aligned */
@media only screen and (max-width: 767px) {
  .shop-page-section .item-shorting {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .shop-page-section .item-shorting .right-column {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Shop toolbar: per-page selector sits before the sort selector */
.shop-page-section .item-shorting .right-column .per-page-box {
  margin-right: 24px;
}

/* Header category menu: two columns when a category also offers "Per Prosesor" */
.main-header .outer-box .category-box .category-list .category-dropdown .list-inner.has-spec-column {
  width: 560px;
}

.main-header .outer-box .category-box .list-inner.has-spec-column .inner-box {
  display: flex;
  gap: 30px;
}

.main-header .outer-box .category-box .list-inner.has-spec-column .inner-box .single-column {
  float: none;
  width: 50%;
  flex: 1 1 50%;
}

.main-header .outer-box .category-box .list-inner .inner-box .single-column.spec-column ul li a {
  line-height: 34px;
}

@media only screen and (max-width: 1199px) {
  .main-header .outer-box .category-box .category-list .category-dropdown .list-inner.has-spec-column {
    width: 480px;
  }
}

/* Main menu never wraps onto a second line: items stay on one row and shrink their
   spacing on laptop widths instead (the row holds 7 items + the pricelist button now) */
@media only screen and (min-width: 1201px) {
  .main-header .header-lower .outer-box .menu-area,
  .main-header .sticky-header .outer-box .menu-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .main-menu .navigation {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .main-menu .navigation > li {
    float: none;
  }

  .main-header .menu-right-content {
    flex-shrink: 0;
  }
}

@media only screen and (min-width: 1201px) and (max-width: 1599px) {
  .main-menu .navigation > li {
    margin: 0 12px;
  }
}

/* Sticky header uses the narrower .auto-container; keep the category box compact and the
   pricelist button icon-only there so the single row always fits */
.main-header .sticky-header .outer-box .category-box {
  width: 220px;
}

.main-header .sticky-header .navigation > li {
  margin: 0 12px;
}

.main-header .sticky-header .menu-right-content .pricelist-btn span {
  display: none;
}

.main-header .sticky-header .menu-right-content .pricelist-btn a {
  padding: 0 13px;
}

.main-header .sticky-header .menu-right-content .pricelist-btn a i {
  margin-right: 0;
}

/* Tight laptop widths (1201-1399 px): narrower category box, tighter menu, icon-only pricelist button */
@media only screen and (min-width: 1201px) and (max-width: 1399px) {
  .main-header .outer-box .category-box {
    width: 240px;
  }

  .main-menu .navigation > li {
    margin: 0 9px;
  }

  .main-header .menu-right-content .pricelist-btn span {
    display: none;
  }

  .main-header .menu-right-content .pricelist-btn a {
    padding: 0 13px;
  }

  .main-header .menu-right-content .pricelist-btn a i {
    margin-right: 0;
  }
}

/* Footer bottom: copyright left, "Dibuat oleh" right */
.main-footer .footer-bottom .bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.main-footer .footer-bottom .made-by p {
  font-size: 14px;
  color: #B7B7B7;
}

.main-footer .footer-bottom .made-by a {
  color: #FFAC00;
}

/* Footer marketplace links: labelled pills instead of anonymous icons */
.main-footer .subscribe-widget .marketplace-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.main-footer .subscribe-widget .marketplace-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: all 300ms ease;
}

.main-footer .subscribe-widget .marketplace-links a.marketplace-shopee {
  background: #EE4D2D;
}

.main-footer .subscribe-widget .marketplace-links a.marketplace-tokopedia {
  background: #03AC0E;
}

.main-footer .subscribe-widget .marketplace-links a:hover {
  filter: brightness(1.1);
  color: #fff;
}

/* ===================================================================
   Brand: Top One.id (flame logo). Orange-red primary, amber accent,
   white header so the red logo stands out.
   =================================================================== */
:root {
  --theme-color: #E64A0A;
  --theme-color-hover: #C23A06;
  --accent-color: #FBA60E;
}

.header-upper {
  background: #fff;
  border-bottom: 1px solid #EDEDED;
}

.header-upper .search-area {
  background: #F4F4F4;
}

.header-upper .search-area .search-box .form-group input[type='search'] {
  background: transparent;
}

.header-upper .search-area .search-box .form-group button[type='submit'] {
  background: var(--accent-color);
}

.header-upper .search-area .search-box .form-group input:focus + button,
.header-upper .search-area .search-box .form-group button:hover {
  background: var(--theme-color);
}

.header-upper .language-picker__flag.language-picker__label,
.header-upper .language-picker__button:before,
.header-upper .nice-select,
.header-upper .nice-select:before,
.header-upper .support-box a,
.header-upper .support-box p,
.header-upper .support-box .icon-box {
  color: var(--title-color);
}

.header-upper .support-box a:hover {
  color: var(--theme-color);
}

.header-upper .support-box .icon-box {
  color: var(--theme-color);
}

/* Horizontal logo is wider than the old one; keep it readable */
.main-header .logo-box img {
  max-height: 52px;
}

.main-footer .footer-logo img,
.mobile-menu .nav-logo img {
  max-height: 48px;
}

/* Pricelist button hover: darker brand colour instead of the old amber */
.main-header .menu-right-content .pricelist-btn a:hover {
  background: var(--theme-color-hover);
}