/*
|--------------------------------------------------------------------------
| laptops-computers-south-africa.css
|--------------------------------------------------------------------------
| Shared selector/button styling for:
|   laptops-south-africa.php
|   computers-south-africa.php
|
| Keep shared button behaviour here so both pages remain visually identical.
|--------------------------------------------------------------------------
*/

/* Legacy page heading rules retained from laptops-south-africa.php */
body{text-align:left}
#ProductCount{background:#eeeeff;padding:3px;border-bottom:2px solid #cccccc;font-size:14px}
#HeadingText{font-size:16px;color:#000077;margin:24px 0 10px 0;border-bottom:1px dotted #888}
div.topName{color:#4F91DC}
a.topName{font-size:16px;color:#000;text-decoration:none;font-weight:bold}
a.topName:hover{font-size:16px;color:#000;text-decoration:underline;font-weight:bold}
#HeadingProduct{font-size:12px;color:#000;font-weight:normal;padding:0;margin:0}

/* =========================================================
   PAGE BREADCRUMB
   ========================================================= */
.laptop-breadcrumb{margin:0 0 12px;padding:8px 10px;background:#f7f9fb;border:1px solid #dce3ea;border-radius:8px;color:#687789;font:12px/1.4 Arial,Helvetica,sans-serif}
.laptop-breadcrumb a{color:#245f9b;text-decoration:none}
.laptop-breadcrumb a:hover,.laptop-breadcrumb a:focus{text-decoration:underline}
.laptop-breadcrumb-separator{display:inline-block;padding:0 7px;color:#9aa5af}
.laptop-breadcrumb-current{color:#333;font-weight:bold}

/* Shared box sizing */
.laptop-selector,.laptop-selector *,
.computer-selector,.computer-selector *{box-sizing:border-box}

/* ------------------------------------------------------------------
   LAPTOP FEATURED BANNER
   ------------------------------------------------------------------ */
.laptop-selector{width:100%;max-width:100%}
.laptop-featured{position:relative;display:block;width:100%;margin:0 0 16px 0;text-decoration:none;border-radius:12px;overflow:hidden}
.laptop-featured img{display:block;width:100%;height:auto;border:0}

/* Shiny sweep - CSS works by itself; JS also adds .is-shine for older/event fallback. */
.laptop-featured:after{content:"";position:absolute;top:-30%;left:-75%;width:35%;height:160%;background:rgba(255,255,255,.35);transform:skewX(-22deg);-webkit-transform:skewX(-22deg);transition:left .55s ease;-webkit-transition:left .55s ease;pointer-events:none}
.laptop-featured:hover:after,
.laptop-featured:focus:after,
.laptop-featured.is-shine:after{left:135%}

/* ------------------------------------------------------------------
   SHARED IMAGE BUTTON LAYOUT

   TEMPORARY 3-PER-ROW LIMIT:
   Both laptop and computer selectors intentionally remain three across.
   Remove/change repeat(3,...) later when the outer legacy pages are
   upgraded for responsive/mobile layout.
   ------------------------------------------------------------------ */
.laptop-brand-grid,
.computer-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;align-items:stretch}

.computer-category-grid{margin:0 0 12px}

/* Shared card shell */
.laptop-brand-card,
.computer-category-card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;height:100%;background:#fff;border:1px solid #d9e0e8;border-radius:12px;overflow:hidden;color:#163a63;text-align:center;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}

.laptop-brand-card:hover,
.laptop-brand-card:focus,
.laptop-brand-card.is-active,
.computer-category-card:hover,
.computer-category-card:focus,
.computer-category-card.is-active{border-color:#7aa7dc;box-shadow:0 5px 16px rgba(25,75,130,.16);transform:translateY(-1px);outline:0;text-decoration:none}

/* Shared image area / white breathing room */
.laptop-brand-card img,
.computer-category-image{display:block;width:100%;height:auto;border:0;padding:14px 10px 52px 10px;background:#fff}

/* Shared name strip - attached to bottom of complete button */
.laptop-brand-name,
.computer-category-name{position:absolute;left:0;right:0;bottom:0;height:38px;display:flex;align-items:center;justify-content:center;padding:8px 6px;background:#f3f6fa;background:rgba(243,246,250,.96);border-top:1px solid #d9e0e8;color:#163a63;font:bold 15px/1.2 Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;overflow:hidden;transition:bottom .18s ease,background-color .18s ease,color .18s ease}

/* Same hover/focus/JS state on both pages:
   move bar to centre, keep text size unchanged, show green selection tint. */
.laptop-brand-card:hover .laptop-brand-name,
.laptop-brand-card:focus .laptop-brand-name,
.laptop-brand-card.is-active .laptop-brand-name,
.computer-category-card:hover .computer-category-name,
.computer-category-card:focus .computer-category-name,
.computer-category-card.is-active .computer-category-name{bottom:50%;margin-bottom:-19px;background:#dff2df;background:rgba(223,242,223,.97);color:#173f20;border-top:1px solid #b8d9b8;border-bottom:1px solid #b8d9b8}

/* Shared round black product-count badge */
.laptop-brand-count,
.computer-category-count{position:absolute;top:8px;left:8px;z-index:3;display:block;min-width:30px;height:30px;padding:0 7px;background:#111;color:#fff;border-radius:15px;font:bold 12px/30px Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.28)}

/* ------------------------------------------------------------------
   LAPTOP INFORMATION
   ------------------------------------------------------------------ */
.laptop-info{clear:both;margin:22px 0 8px 0;padding:18px;background:#f7f9fc;border:1px solid #dfe6ee;border-radius:12px;color:#222;line-height:1.55}
.laptop-info h3{margin:0 0 10px 0;color:#0b376b;font-size:20px;line-height:1.25}
.laptop-info p{margin:0 0 12px 0}
.laptop-info p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------
   COMPUTER PAGE STRUCTURE / SUBCATEGORIES
   These remain computer-specific, but live in this shared stylesheet
   so the two pages need only one CSS file.
   ------------------------------------------------------------------ */
h2{font-size:15px}
.stand{background:#fff;font-size:11px}
.ttand{background:#fff;font-size:12px}
.computer-intro-banner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px;padding:12px;border:1px solid #d9e2ec;border-radius:12px;background:#f5f8fc;color:#394b5f;font:12px/1.5 Arial,Helvetica,sans-serif}
.computer-intro-item{padding:11px 12px;border:1px solid #e0e7ef;border-radius:9px;background:#fff}
.computer-intro-item strong{display:block;margin:0 0 4px;color:#183c65;font-size:14px}
.computer-category-section{margin:0 0 18px;padding:12px;border:1px solid #dce3eb;border-radius:12px;background:#f8fafc}
.computer-category-section-title{margin:0 0 11px;padding:0 0 7px;border-bottom:1px solid #dce3eb;color:#173e69;font:bold 16px/1.3 Arial,Helvetica,sans-serif}

/* Preserve existing nested/master subcategory structure and spacing. */
.computer-master-section{margin:12px 0;padding:11px;border:1px solid #cfd9e5;border-radius:10px;background:#eef3f8}
.computer-master-section .computer-category-grid{margin-bottom:0}
.computer-master-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#dde8f3;color:#173e69;text-decoration:none}
.computer-master-heading:hover,
.computer-master-heading:focus{background:#d2e1ef;text-decoration:none;outline:0}
.computer-master-heading strong{font-size:14px}
.computer-master-heading span{color:#65778a;font-size:10px;font-weight:normal}
.computer-error-banner{margin:0 0 14px;padding:10px 12px;border:1px solid #e4a6a6;border-left:4px solid #c62828;border-radius:8px;background:#fff4f4;color:#8b1f1f;font:12px/1.45 Arial,Helvetica,sans-serif}
.computer-info{clear:both;margin:22px 0 8px;padding:18px;border:1px solid #dfe6ee;border-radius:12px;background:#f7f9fc;color:#222;line-height:1.55}
.computer-info h3{margin:0 0 10px;color:#0b376b;font-size:20px;line-height:1.25}
.computer-info p{margin:0 0 12px}
.computer-info p:last-child{margin-bottom:0}

/* This breakpoint currently changes only surrounding content.
   The button grid intentionally remains three columns until the later
   outer-page mobile conversion. */
@media(max-width:600px){
.laptop-info{padding:14px}
.computer-intro-banner{grid-template-columns:1fr}
.computer-category-section,.computer-master-section{padding:8px}
.computer-info{padding:14px}
}